/* Sidecode account: argilla liscia, palette "Pietra".
   Una luce sola, in alto a sinistra. In rilievo ciò che si tocca, incassato ciò che si legge.
   Valori presi dal sito vetrina (sidecode.it). Nessuna risorsa esterna.
   Caratteri (SIL Open Font License 1.1, https://openfontlicense.org):
   Gabarito, Copyright 2023 The Gabarito Project Authors (https://github.com/naipefoundry/gabarito);
   Hanken Grotesk, Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk). */

@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/sidecode/risorse/font/gabarito-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/sidecode/risorse/font/hanken-grotesk-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- colori: chiaro "Pietra" ---------- */
:root {
  color-scheme: light dark;
  --nh: 255;
  --tray: oklch(0.912 0.009 255);
  --clay: oklch(0.972 0.004 255);
  --clay-lift: oklch(0.992 0.003 255);
  --hollow: oklch(0.87 0.011 255);
  --ink: oklch(0.24 0.035 262);
  --soft: oklch(0.42 0.03 262);
  /* bordi di campi e tasti: almeno 3:1 su lastra e su incavo */
  --bordo: oklch(0.55 0.03 262);
  /* intensità di ombre e riflessi (nello scuro: ombre più profonde, riflessi attenuati) */
  --shk: 1;
  --hk: 1;
  --hi: 0.8;
  --hi2: 0.55;
  --s1: calc(0.3 * var(--shk));
  --s2: calc(0.25 * var(--shk));
  --s3: calc(0.2 * var(--shk));
  --errore: oklch(0.45 0.17 25);
  --errore-fondo: oklch(0.9 0.045 20);
  --errore-glifo: oklch(0.99 0.005 25);
  --ok: oklch(0.45 0.1 160);
  --ok-glifo: oklch(0.99 0.005 160);
  --pericolo: oklch(0.46 0.17 25);
  --pericolo-testo: oklch(0.99 0.005 25);
  --pericolo-bordo: oklch(0.4 0.15 25);
  /* colore dell'app: lo cambia cssApp() con [data-app="..."] */
  --app: oklch(0.31 0.065 262);
  --app-testo: oklch(0.97 0.006 255);
  --display: 'Gabarito', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --text: 'Hanken Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --gap: clamp(16px, 2.2vw, 24px);
  --r: clamp(28px, 3.2vw, 36px);
  --pad: clamp(20px, 2.4vw, 28px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --swing: cubic-bezier(.7, 0, .2, 1);
}

/* ---------- colori: scuro (vassoio blu notte, lastre più chiare, nessuna superficie bianca) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tray: oklch(0.175 0.018 262);
    --clay: oklch(0.235 0.022 262);
    --clay-lift: oklch(0.32 0.028 262);
    --hollow: oklch(0.15 0.016 262);
    --ink: oklch(0.94 0.01 255);
    --soft: oklch(0.77 0.02 255);
    --bordo: oklch(0.62 0.03 262);
    --shk: 0.25;
    --hk: 0.16;
    --hi: 0.14;
    --hi2: 0.08;
    --errore: oklch(0.82 0.12 25);
    --errore-fondo: oklch(0.2 0.045 20);
    --errore-glifo: oklch(0.2 0.04 25);
    --ok: oklch(0.8 0.1 160);
    --ok-glifo: oklch(0.2 0.03 160);
    --pericolo: oklch(0.42 0.13 25);
    --pericolo-testo: oklch(0.99 0.005 25);
    --pericolo-bordo: oklch(0.62 0.14 25);
    --app: oklch(0.5 0.1 262);
    --app-testo: oklch(0.99 0.003 255);
  }
}

/* ---------- ricette dell'argilla ---------- */
:root {
  /* lastra in rilievo (con spessore) */
  --ombra-lastra:
    0 4px 6px -2px oklch(var(--s1) 0.06 var(--nh) / 0.3),
    5px 16px 14px -6px oklch(var(--s1) 0.06 var(--nh) / 0.3),
    16px 34px 48px -16px oklch(var(--s1) 0.06 var(--nh) / 0.5),
    inset 3px 4px 3px oklch(1 0 0 / var(--hi)),
    inset 14px 18px 28px -14px oklch(1 0 0 / var(--hi2)),
    inset -12px -20px 30px -12px oklch(var(--s1) 0.06 var(--nh) / 0.3),
    inset 0 -6px 8px -4px oklch(var(--s1) 0.06 var(--nh) / 0.22);
  /* lastra tenue: più bassa, quasi appoggiata al vassoio */
  --ombra-tenue:
    0 2px 3px -2px oklch(var(--s1) 0.06 var(--nh) / 0.3),
    4px 9px 14px -8px oklch(var(--s1) 0.06 var(--nh) / 0.3),
    inset 2px 3px 2px oklch(1 0 0 / calc(0.75 * var(--hi))),
    inset -6px -9px 14px -8px oklch(var(--s1) 0.06 var(--nh) / 0.2);
  /* tasto in rilievo */
  --ombra-su:
    0 5px 7px -3px oklch(var(--s2) 0.06 var(--nh) / 0.5),
    8px 18px 20px -8px oklch(var(--s3) 0.06 var(--nh) / 0.55),
    inset 2px 3px 2px oklch(1 0 0 / calc(0.95 * var(--hk))),
    inset -6px -8px 12px -6px oklch(var(--s1) 0.06 var(--nh) / 0.2);
  --ombra-su-alto:
    0 7px 9px -3px oklch(var(--s2) 0.06 var(--nh) / 0.5),
    10px 22px 24px -8px oklch(var(--s3) 0.06 var(--nh) / 0.55),
    inset 2px 3px 2px oklch(1 0 0 / calc(0.95 * var(--hk))),
    inset -6px -8px 12px -6px oklch(var(--s1) 0.06 var(--nh) / 0.2);
  /* tasto premuto: stesse quattro strati, ma incassato */
  --ombra-giu:
    0 1px 1px -1px oklch(var(--s2) 0.06 var(--nh) / 0.35),
    0 0 0 0 oklch(var(--s3) 0.06 var(--nh) / 0),
    inset 5px 7px 10px -3px oklch(var(--s1) 0.06 var(--nh) / 0.45),
    inset -3px -4px 3px oklch(1 0 0 / calc(0.8 * var(--hk)));
  /* tasto in rilievo, colorato (riflesso più basso) */
  --ombra-app:
    0 5px 7px -3px oklch(var(--s2) 0.06 var(--nh) / 0.5),
    8px 18px 20px -8px oklch(var(--s3) 0.06 var(--nh) / 0.55),
    inset 2px 3px 2px oklch(1 0 0 / calc(0.4 * var(--hk))),
    inset -6px -8px 12px -6px oklch(0 0 0 / 0.25);
  --ombra-app-alto:
    0 7px 9px -3px oklch(var(--s2) 0.06 var(--nh) / 0.5),
    10px 22px 24px -8px oklch(var(--s3) 0.06 var(--nh) / 0.55),
    inset 2px 3px 2px oklch(1 0 0 / calc(0.4 * var(--hk))),
    inset -6px -8px 12px -6px oklch(0 0 0 / 0.25);
  --ombra-app-giu:
    0 1px 1px -1px oklch(var(--s2) 0.06 var(--nh) / 0.35),
    0 0 0 0 oklch(var(--s3) 0.06 var(--nh) / 0),
    inset 5px 7px 10px -3px oklch(0 0 0 / 0.4),
    inset -3px -4px 3px oklch(1 0 0 / calc(0.3 * var(--hk)));
  /* incavo piccolo (campi, righe che si leggono) */
  --ombra-incavo:
    inset 4px 6px 10px -3px oklch(var(--s1) 0.06 var(--nh) / 0.45),
    inset -2px -3px 2px oklch(1 0 0 / calc(0.8 * var(--hk)));
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--tray); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tray);
  color: var(--ink);
  font: 17px/1.5 var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p, ul { margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

.pagina {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding:
    max(20px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
.vassoio { width: 100%; max-width: 28rem; min-width: 0; }
@media (min-width: 640px) {
  .vassoio { max-width: 32rem; }
  .pagina { padding-top: max(56px, env(safe-area-inset-top)); }
}

/* ---------- intestazione ---------- */
.testata { display: flex; align-items: center; gap: 14px; padding: 4px 6px 22px; }
.icona {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--clay-lift);
  box-shadow:
    0 3px 5px -2px oklch(var(--s2) 0.06 var(--nh) / 0.5),
    6px 11px 14px -6px oklch(var(--s3) 0.06 var(--nh) / 0.5);
}
.testata-testi { min-width: 0; }
.nome-app {
  font: 800 1.5rem/1.1 var(--display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.sotto { margin-top: 3px; font-size: 14px; line-height: 1.3; color: var(--soft); }
.marchio { font-family: var(--display); font-size: 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }
.marchio b { font-weight: 800; }

/* ---------- lastre ---------- */
.lastra {
  position: relative;
  margin-bottom: var(--gap);
  padding: var(--pad);
  border-radius: var(--r);
  background: var(--clay);
  box-shadow: var(--ombra-lastra);
}
.lastra.tenue {
  padding: 4px var(--pad);
  background: var(--tray);
  box-shadow: var(--ombra-tenue);
}
.titolo, .titolo-pagina {
  font: 800 clamp(1.75rem, 7.4vw, 2.25rem)/1.05 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.titolo { margin-bottom: 10px; }
.titolo-pagina { margin: 0 6px 18px; }
.titolo-lastra { margin-bottom: 8px; font: 600 15px/1.3 var(--text); color: var(--soft); }
.testo { margin-bottom: 20px; text-wrap: pretty; overflow-wrap: anywhere; }
.testo strong, .email { font-weight: 700; overflow-wrap: anywhere; }
.aiuto { font-size: 15px; line-height: 1.4; color: var(--soft); text-wrap: pretty; }
.piccolo { margin: 0 6px 18px; font-size: 14px; line-height: 1.5; color: var(--soft); }
.valore { font: 700 1.25rem/1.25 var(--display); letter-spacing: -0.01em; overflow-wrap: anywhere; min-width: 0; flex: 1 1 10ch; }
.riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }

/* ---------- campi (incassati) ---------- */
.modulo > * + * { margin-top: 18px; }
.modulo > .testo { margin-bottom: 0; }
.campo > * + * { margin-top: 8px; }
.modulo > .nota:empty, .campo > .nota:empty { margin-top: 0; }
.campo > label { display: block; font: 600 16px/1.3 var(--text); }
input[type="text"], input[type="email"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--bordo);
  border-radius: 20px;
  background: var(--hollow);
  color: var(--ink);
  font-size: 17px;
  box-shadow: var(--ombra-incavo);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible { outline-offset: 2px; }
input.codice {
  text-align: center;
  font: 700 1.75rem/1 var(--display);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  font-variant-numeric: tabular-nums;
}
input[aria-invalid="true"] { border-color: var(--errore); border-width: 2px; }

.spunta { display: flex; align-items: center; gap: 12px; }
.spunta input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1.5px solid var(--bordo);
  border-radius: 9px;
  background: var(--hollow);
  box-shadow: var(--ombra-incavo);
  cursor: pointer;
}
.spunta input::after {
  content: '';
  width: 8px;
  height: 14px;
  margin-top: -2px;
  border: solid var(--app-testo);
  border-width: 0 3px 3px 0;
  rotate: 45deg;
  opacity: 0;
  scale: 0.6;
  transition: opacity .2s var(--ease), scale .2s var(--ease);
}
.spunta input:checked { background: var(--app); }
.spunta input:checked::after { opacity: 1; scale: 1; }
.spunta input[aria-invalid="true"] { border-color: var(--errore); border-width: 2.5px; }
.spunta label { flex: 1; display: flex; align-items: center; min-height: 44px; font: 600 17px/1.3 var(--text); cursor: pointer; }

/* ---------- messaggi (incassati; icona e testo, mai solo colore) ---------- */
.nota { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.nota:not(:empty) {
  position: relative;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--hollow);
  box-shadow: var(--ombra-incavo);
}
.nota[role="alert"]:not(:empty), .nota.fatto:not(:empty) { padding-left: 46px; }
.nota[role="alert"]:not(:empty)::before, .nota.fatto:not(:empty)::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ok);
}
.nota.fatto:not(:empty)::after {
  content: '';
  position: absolute;
  left: 22.5px;
  top: 16.5px;
  width: 6px;
  height: 11px;
  border: solid var(--ok-glifo);
  border-width: 0 2.5px 2.5px 0;
  rotate: 45deg;
}
.nota[role="alert"]:not(:empty) { background: var(--errore-fondo); color: var(--errore); font-weight: 600; }
.nota[role="alert"]:not(:empty)::before { background: var(--errore); }
.nota[role="alert"]:not(:empty)::after {
  content: '';
  position: absolute;
  left: 23.5px;
  top: 17px;
  width: 3px;
  height: 12px;
  background:
    linear-gradient(var(--errore-glifo), var(--errore-glifo)) 0 0 / 3px 7px no-repeat,
    linear-gradient(var(--errore-glifo), var(--errore-glifo)) 0 9px / 3px 3px no-repeat;
}
.nota a { font-weight: 700; }
.lastra > .nota:not(:empty), #elimina-avvia > .nota:not(:empty) { margin-top: 14px; }
.lastra > .testo:last-child { margin-bottom: 0; }

/* ---------- tasti (in rilievo) ---------- */
.tasto {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1.5px solid var(--bordo);
  border-radius: 999px;
  background: var(--clay-lift);
  color: var(--ink);
  font: 700 17px/1.15 var(--display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ombra-su);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: translate .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.tasto.primario {
  background: var(--app);
  color: var(--app-testo);
  border-color: var(--app);
  border-color: color-mix(in oklab, var(--app), var(--ink) 45%);
  box-shadow: var(--ombra-app);
}
.tasto.pericolo {
  background: var(--pericolo);
  color: var(--pericolo-testo);
  border-color: var(--pericolo-bordo);
  box-shadow: var(--ombra-app);
}
.tasto.piccolo { min-height: 44px; padding: 8px 18px; font-size: 16px; }
.modulo > .tasto, .pieno { width: 100%; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.azioni > .tasto { flex: 1 1 auto; }
.aiuto:not([hidden]) + .azioni { margin-top: 14px; }
@media (hover: hover) {
  .tasto:hover { translate: 0 -2px; box-shadow: var(--ombra-su-alto); }
  .tasto.primario:hover, .tasto.pericolo:hover { box-shadow: var(--ombra-app-alto); }
}
.tasto:active, .tasto[aria-busy="true"] { translate: 0 3px; box-shadow: var(--ombra-giu); }
.tasto.primario:active, .tasto.primario[aria-busy="true"],
.tasto.pericolo:active, .tasto.pericolo[aria-busy="true"] { box-shadow: var(--ombra-app-giu); }
.tasto[aria-busy="true"] { cursor: progress; }
.tasto:disabled:not([aria-busy="true"]) { opacity: 0.6; cursor: not-allowed; translate: none; }

/* tasti di sola scritta (e link): "Rimanda il codice", "Usa un'altra email", "Annulla" */
.tasto-testo {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  margin: 0 -8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: 600 16px/1.2 var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tasto-testo:disabled { color: var(--soft); text-decoration: none; cursor: default; }
.tasto-testo[aria-busy="true"] { cursor: progress; text-decoration: none; }
.tasto-testo.evidenza:not(:disabled) {
  margin: 0;
  padding: 0 20px;
  border: 1.5px solid var(--bordo);
  border-radius: 999px;
  background: var(--clay-lift);
  font: 700 16px/1.15 var(--display);
  text-decoration: none;
  box-shadow: var(--ombra-su);
}
.tasto-testo.evidenza:not(:disabled):active { box-shadow: var(--ombra-giu); }
.rimanda { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; }
.aiuti { display: grid; gap: 2px; margin-top: 14px; justify-items: start; }
.indietro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  font-size: 15px;
  color: var(--soft);
}
.piede { margin: 0 -8px; }

/* ---------- elenchi ---------- */
.elenco { list-style: none; display: grid; gap: 12px; margin-bottom: 22px; }
.elenco li { position: relative; padding-left: 30px; text-wrap: pretty; }
.elenco li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--app);
  box-shadow:
    inset 0 2px 1px oklch(1 0 0 / calc(0.6 * var(--hk))),
    inset 0 -3px 3px oklch(calc(0.42 * var(--shk)) 0.06 var(--nh) / 0.3);
}
.cosa { margin-bottom: 12px; font: 700 1.125rem/1.3 var(--display); }

.dispositivi { list-style: none; display: grid; gap: 12px; margin-bottom: 16px; }
.dispositivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--hollow);
  box-shadow: var(--ombra-incavo);
}
.disp-testo { flex: 1 1 11rem; min-width: 0; }
.disp-nome { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.disp-uso { margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--soft); }
.targhetta {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-top: 6px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: oklch(calc(0.2 * var(--shk)) 0.05 var(--nh) / 0.07);
  box-shadow:
    inset 2px 3px 4px -1px oklch(var(--s1) 0.06 var(--nh) / 0.4),
    inset -1px -2px 1px oklch(1 0 0 / calc(0.7 * var(--hk)));
}
.codice-sc {
  display: inline-block;
  padding: 1px 11px;
  border-radius: 999px;
  background: var(--hollow);
  box-shadow: var(--ombra-incavo);
  color: var(--ink);
  font: 600 14px/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
}

/* ---------- Turnstile (quasi sempre invisibile) ---------- */
.verifica > div { width: fit-content; margin: 0 auto; }
.verifica.attiva { margin-bottom: var(--gap); }

/* ---------- passi: la lastra scorre ---------- */
@keyframes entra-dx { from { opacity: 0; translate: 36px 0; } }
@keyframes entra-sx { from { opacity: 0; translate: -36px 0; } }
@keyframes esce-sx { to { opacity: 0; translate: -36px 0; } }
@keyframes esce-dx { to { opacity: 0; translate: 36px 0; } }
.entra-dx { animation: entra-dx .34s var(--ease) both; }
.entra-sx { animation: entra-sx .34s var(--ease) both; }
.esce-sx { animation: esce-sx .15s ease-in both; }
.esce-dx { animation: esce-dx .15s ease-in both; }

/* ---------- campo sbagliato: piccolo scuotimento ---------- */
@keyframes scuoti {
  0%, 100% { translate: 0 0; }
  15% { translate: -8px 0; }
  30% { translate: 7px 0; }
  45% { translate: -5px 0; }
  60% { translate: 4px 0; }
  75% { translate: -2px 0; }
}
.scuoti { animation: scuoti .42s var(--ease); }

/* ---------- entrata riuscita: il colore dell'app si allarga dal tasto ---------- */
.cerchio {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: var(--app);
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path .45s var(--swing);
}
.cerchio.attivo { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); }

/* ---------- telefoni stretti ---------- */
@media (max-width: 360px) {
  :root { --pad: 18px; }
  .testata { gap: 12px; }
  .nome-app { font-size: 1.35rem; }
  input.codice { letter-spacing: 0.3em; text-indent: 0.3em; }
}

/* ---------- niente movimento: restano solo colore e opacità ---------- */
@media (prefers-reduced-motion: reduce) {
  .tasto { transition: background-color .15s linear, box-shadow .15s linear; }
  .tasto:hover, .tasto:active, .tasto[aria-busy="true"] { translate: none; }
  @keyframes entra-dx { from { opacity: 0; } }
  @keyframes entra-sx { from { opacity: 0; } }
  @keyframes esce-sx { to { opacity: 0; } }
  @keyframes esce-dx { to { opacity: 0; } }
  .entra-dx, .entra-sx { animation-duration: .2s; }
  @keyframes scuoti {
    0%, 100% { background-color: var(--hollow); }
    30% { background-color: var(--errore-fondo); }
  }
  .scuoti { animation-duration: .6s; }
  .cerchio { clip-path: none; opacity: 0; transition: opacity .15s linear; }
  .cerchio.attivo { clip-path: none; opacity: 1; }
  .spunta input::after { transition: opacity .2s linear; scale: 1; }
}

/* ---------- colori forzati (contrasto alto di sistema) ---------- */
@media (forced-colors: active) {
  .lastra, .nota:not(:empty), .dispositivo, .targhetta { border: 1px solid CanvasText; }
  .tasto, input[type="text"], input[type="email"] { border: 2px solid ButtonText; }
  .tasto.primario, .tasto.pericolo { forced-color-adjust: none; border-color: ButtonText; }
  .spunta input:checked::after { border-color: CanvasText; }
}


/* colori delle app */
[data-app="collaudo"]{--app:#3D5A80;--app-testo:#FFFFFF}