/* LE PAGINE D'ACCESSO — accesso, registrazione, password dimenticata, nuova password.
   Estratte da style.css il 25/9/2026 (tetto del CSS render-blocking di tutte le pagine, 400 KB:
   seo-testa-pagine.test.js). Si caricano SOLO dalle quattro pagine d'accesso, dopo style.css,
   di cui usano i token (var(--…)). */

/* ============================================================================
   PAGINE D'ACCESSO — accesso, registrazione, password dimenticata, nuova
   password (25/9/2026, «login e registrazione nel modo migliore possibile»).

   Una scheda sola, centrata, larga 440px, con Skoo in testa come nell'app: il
   titolo non sta più a sinistra mentre la scheda sta al centro. Tutto è
   dentro `.accesso` (la sezione) o su classi nuove, così accept-invite e il
   consenso dei genitori, che usano ancora `.auth-card`, restano come sono.

   Qui dentro non c'è un solo colore scritto a mano (da «I MIEI LIBRI» alla
   fine del file i test lo vietano, e fanno bene). I colori dei due bottoni dei
   provider sono quelli delle linee guida di Google e di Apple, non una scelta
   nostra: stanno come token (`--oauth-*`, chiaro e scuro) nelle due pagine che
   hanno i bottoni, login.html e register.html, insieme al @font-face di Google
   Sans. Senza quei token i bottoni non si disegnano: si vede subito.

   Sta PRIMA del lettore perché `lettore-ui.test.js` vuole che l'ultimo
   `prefers-reduced-motion` del file sia il suo.
   ========================================================================= */
:root {
  /* Il bordo dei campi: ≥3:1 sul fondo della scheda (WCAG 1.4.11 chiede 3:1 per il contorno di
     un controllo). Quello di prima, --border, era 1,2:1: il campo quasi non si vedeva. È una
     miscela dei token e non un colore scritto: vale da sola in chiaro e in scuro. */
  --campo-bordo: color-mix(in srgb, var(--text) 52%, var(--bg1));
}

.accesso { padding: var(--space-5) 0 var(--space-7); }
.accesso .auth-card {
  max-width: 440px;
  margin: 0 auto;
  padding: var(--space-5) 20px;
}
.accesso .auth-card:hover { box-shadow: var(--shadow-s); border-color: var(--border-soft); }
@media (min-width: 721px) {
  .accesso { padding: 56px 0 80px; }
  .accesso .auth-card { padding: 32px 36px; }
}

/* La barra: il logo e la porta opposta. La domanda sparisce sul telefono, resta il bottone. */
.accesso-nav__domanda { color: var(--muted); font-size: 14px; }
@media (max-width: 560px) { .accesso-nav__domanda { display: none; } }

/* Skoo che saluta, e il suo fumetto. Il PNG ha molto margine intorno alla mascotte: il
   riquadro lo ritaglia, così a schermo si vede Skoo e non l'aria che ha attorno. */
.skoo-saluto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
.skoo-saluto__mascotte {
  flex: none;
  width: 88px;
  height: 72px;
  overflow: hidden;
}
.skoo-saluto__mascotte img {
  display: block;
  width: 144px;
  height: 144px;
  max-width: none;
  margin: -38px 0 0 -26px;
  transform-origin: 40% 70%;
  animation: skoo-saluta 0.9s ease-out 0.15s 1 both;
}
@keyframes skoo-saluta {
  0% { transform: translateY(6px) rotate(-6deg); opacity: 0; }
  55% { transform: rotate(4deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.accesso .skoo-saluto__fumetto {
  position: relative;
  margin: 0;
  max-width: 290px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-1));
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}
.skoo-saluto__fumetto::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: inherit;
  border-left: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  transform: rotate(45deg);
}
.accesso .accesso__titolo {
  margin: var(--space-2) 0 var(--space-1);
  font-size: clamp(26px, 6.4vw, 30px);
  line-height: 1.15;
  text-align: center;
}
.accesso .accesso__sottotitolo {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}
.accesso #auth-alert > .alert,
.accesso #auth-alert.alert { margin: 0 0 var(--space-4); }
.accesso #auth-alert .alert a { font-weight: 700; }

/* ── I BOTTONI DEI PROVIDER, NELLA FORMA UFFICIALE ─────────────────────────────
   Google (tema chiaro/scuro delle linee guida): G a colori 20px a 12px dal bordo, Google Sans
   Medium 14/20, fondo e bordo dei token qui sopra. Apple: mela e titolo dello stesso colore,
   bianco su nero o nero su bianco, titolo al 43% dell'altezza (17px su 40). Stessa altezza e
   stessa larghezza per entrambi: nessuno dei due è meno in vista dell'altro. I loghi stanno a
   sinistra, allineati sullo stesso asse; il testo è centrato nel bottone.
   40px e non 44 (revisione del 25/9): è l'altezza standard del kit Google, e con il titolo Apple
   legato al 43% dell'altezza a 44 il divario fra i due testi era 14 contro 19 — Apple sembrava il
   bottone principale. A 40 è 14 contro 17, senza toccare loghi né colori. 40px restano ben sopra
   il minimo di Apple (30) e i 24px del bersaglio minimo WCAG 2.2. */
.oauth-posto:empty { display: none; }
.oauth { display: grid; gap: var(--space-3); }
/* `display: grid` qui sopra batte l'attributo `hidden`: senza questa riga il blocco resterebbe
   visibile nel passo 2 della registrazione (`registrazione.js#montaPassi`). */
.oauth[hidden] { display: none; }
.oauth-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 44px;
  border-radius: var(--radius-control);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}
.oauth-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.oauth-btn__logo { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.oauth-btn--google {
  background: var(--oauth-google-fondo);
  border: 1px solid var(--oauth-google-bordo);
  color: var(--oauth-google-testo);
  font-family: "Google Sans Bottone", "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25px;
}
.oauth-btn--google .oauth-btn__logo { width: 20px; height: 20px; }
.oauth-btn--google:hover { background: color-mix(in srgb, var(--oauth-google-testo) 8%, var(--oauth-google-fondo)); }
.oauth-btn--apple {
  background: var(--oauth-apple-fondo);
  border: 0;
  color: var(--oauth-apple-testo);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.2px;
}
/* La cornice del logo Apple è alta quanto il bottone (così la vuole il kit: 31×44 scalata a
   40 fa 28×40) e il glifo ha il suo centro a 15,5 × 40/44 ≈ 14px: a 8px dal bordo cade sullo
   stesso asse della G (12 + 10 = 22px). */
.oauth-btn--apple .oauth-btn__logo { left: 8px; top: 0; width: 28.2px; height: 40px; transform: none; }
.oauth-btn--apple:hover { background: color-mix(in srgb, var(--oauth-apple-testo) 14%, var(--oauth-apple-fondo)); }
.accesso .oauth-oppure {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-4);
  color: var(--muted);
  font-size: 14px;
}
.oauth-oppure::before,
.oauth-oppure::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-strong);
}
/* Chi torna dal provider senza account: l'indirizzo confermato e la via d'uscita. */
.oauth-attesa {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  font-size: 15px;
  line-height: 1.45;
}
.accesso .oauth-attesa p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.accesso .oauth-attesa p:last-child { margin: 0; }

/* ── I CAMPI ─────────────────────────────────────────────────────────────────── */
.accesso .auth-form { gap: var(--space-4); }
.accesso .passo,
.accesso #parental-fields { display: grid; gap: var(--space-4); }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo .input-label,
.campo-gruppo .input-label { margin: 0; font-size: 14px; }
.campo__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.campo__link { font-size: 14px; font-weight: 600; padding: 4px 0; }
.accesso .input {
  min-height: 48px;
  border-color: var(--campo-bordo);
  font-size: 16px;
}
.accesso .input:focus { border-color: var(--accent); }
.accesso .input[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
.accesso .input[readonly] { background: var(--surface-2); }
.campo-password { position: relative; }
.campo-password .input { padding-right: 104px; }
.campo-occhio {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.campo-occhio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.accesso .campo-errore {
  margin: 0;
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.accesso .campo-nota { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.accesso .campo-nota--avviso { color: var(--text); font-size: 14px; font-weight: 600; }
.accesso .campo-nota--avviso:empty { display: none; }
.campo-gruppo { margin: 0; padding: 0; border: 0; min-width: 0; }
.accesso .role-selector { margin: 6px 0 0; }
.accesso .consent-checkboxes { margin: 0; }
.accesso .consent-label input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--accent);
}

/* La lista viva delle regole della password: cerchio vuoto o spunta — forma e parola, non solo
   colore (la parola, per chi non vede, è lo `sr-only` accanto a ogni riga). */
.regole {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.regole li { display: flex; align-items: flex-start; gap: var(--space-2); }
.regole li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.regole li[data-ok="true"] { color: var(--color-success-ink); }
.regole li[data-ok="true"]::before {
  content: "✓";
  border-color: transparent;
  background: var(--color-success-ink);
  color: var(--surface-1);
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* Il bottone principale a tutta larghezza: «Accedi», «Continua», «Crea l'account». */
.btn--pieno {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
.btn[aria-busy="true"] { cursor: progress; }
.accesso .passo__indietro { min-height: 44px; }
.accesso .passo__conta { margin: 0; }
.accesso .accesso__piede {
  margin: var(--space-5) 0 0;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.accesso .accesso__prova { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .skoo-saluto__mascotte img,
  .accesso .auth-card { animation: none; }
}