/* Lo stile del corso d'inglese: le classi che js/microfono.js e js/componenti/voce.js scrivono nei loro elementi (il pulsante audio, il
   microfono, le parole valutate), l'indice del corso (js/indice.js) e le schermate di stato del router (js/app.js). Sono del corso e non
   della base, perché quei moduli sono del corso e non si copiano nel Python.
   Si usa dopo ../vetrina360/vetrina360.css: prende da lì i token (colori, spazi, raggi, caratteri) e non scrive nessun colore a mano.
   Un test (stile.test.js) controlla che ogni classe usata da quei due moduli abbia qui, o nella base, la sua regola. */

@keyframes pulsazione { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }

/* ── Pulsante audio ───────────────────────────────────────────────────────────────────────────
   Tondo da 52px, giallo, in rilievo (bordo di 2px inchiostro e ombra piena di 4px sotto). Sul giallo l'icona è --su-giallo, in
   entrambi i temi. Mentre l'audio suona (in-riproduzione) mostra la pausa; la variante lento è una pastiglia più piccola con la tartaruga. */

.pulsante-audio {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--inchiostro);
  border-radius: 50%;
  background: var(--giallo);
  box-shadow: 0 4px 0 var(--inchiostro);
  color: var(--su-giallo);
  font-family: var(--testo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pulsante-audio svg { width: 24px; height: 24px; }
.pulsante-audio:active { box-shadow: 0 2px 0 var(--inchiostro); transform: translateY(2px); }
.pulsante-audio:disabled { opacity: 0.4; box-shadow: none; cursor: default; transform: none; }

/* La pausa, disegnata con due barre (l'icona dentro il pulsante è sempre la freccia: il modulo non la cambia). */
.pulsante-audio:not(.lento).in-riproduzione > svg { display: none; }

.pulsante-audio:not(.lento).in-riproduzione::before {
  content: "";
  width: 14px;
  height: 18px;
  border-right: 5px solid currentColor;
  border-left: 5px solid currentColor;
}

/* Lento: più piccolo, con la tartaruga (la stessa forma dell'icona «lento», qui come ritaglio che prende il colore del testo) e la scritta. */
.pulsante-audio.lento {
  width: auto;
  height: 40px;
  padding: 0 var(--s4) 0 var(--s3);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--inchiostro);
  font-size: 15px;
  font-weight: 700;
}

.pulsante-audio.lento > svg { display: none; }

.pulsante-audio.lento::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16c0-4 3.5-7 7-7s7 3 7 7z'/%3E%3Ccircle cx='20' cy='13.5' r='1.75'/%3E%3Cpath d='M6 16v2.5M13 16v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16c0-4 3.5-7 7-7s7 3 7 7z'/%3E%3Ccircle cx='20' cy='13.5' r='1.75'/%3E%3Cpath d='M6 16v2.5M13 16v2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pulsante-audio.lento::after { content: "lento"; }

/* Mentre suona, il lento si inverte: nero con la tartaruga gialla. */
.pulsante-audio.lento.in-riproduzione { background: var(--su-giallo); color: var(--giallo); }

/* Dentro una banda gialla il pulsante (giallo) è giallo su giallo: il bordo e l'ombra diventano --su-giallo, come tutto il resto della banda
   (--inchiostro in scuro è crema e sul giallo non si vede). */
.v-banda .pulsante-audio { border-color: var(--su-giallo); box-shadow: 0 4px 0 var(--su-giallo); }
.v-banda .pulsante-audio.lento { box-shadow: 0 3px 0 var(--su-giallo); }
.v-banda .pulsante-audio:active { box-shadow: 0 2px 0 var(--su-giallo); }
.v-banda .pulsante-audio:disabled { box-shadow: none; }

/* ── Microfono ────────────────────────────────────────────────────────────────────────────────
   Tondo da 72px, inchiostro con l'icona gialla (in scuro giallo con l'icona scura: è la coppia del pulsante principale). Pronto; in
   ascolto, con l'anello che pulsa; elaboro, con la rotellina attorno. L'errore (microfono negato) non è un suo stato: lo dice il blocco
   che lo contiene. Con meno movimento l'anello resta fermo, ma si vede che sta ascoltando. */

.microfono {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pulsante);
  color: var(--pulsante-testo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.microfono svg { width: 32px; height: 32px; }
.microfono:disabled { opacity: 0.5; cursor: default; }
.microfono.pronto:hover { background: color-mix(in srgb, var(--pulsante) 82%, var(--inchiostro-2)); }
.microfono::before,
.microfono::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.microfono.in-ascolto { box-shadow: 0 0 0 4px var(--pagina), 0 0 0 7px var(--inchiostro); }
.microfono.in-ascolto::before { border: 3px solid var(--inchiostro); animation: pulsazione 1.4s ease-out infinite; }
.microfono.elaboro::after { inset: -7px; border: 4px solid transparent; border-top-color: var(--inchiostro); animation: v-gira 0.9s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .microfono.in-ascolto::before { animation: none; transform: scale(1.3); opacity: 0.6; }
}

/* ── Il blocco del microfono e le parole valutate ─────────────────────────────────────────────
   Sotto il microfono: la didascalia, poi l'esito (le stelle e le parole colorate, oppure la registrazione da riascoltare, oppure come
   consentire il microfono). Giusta in inchiostro, incerta con la sottolineatura a puntini, da ripetere in --errore sottolineata: il
   colore non è mai l'unico segnale. */

.blocco-voce { display: grid; justify-items: center; gap: var(--s3); padding-top: var(--s1); }
.blocco-voce .didascalia { min-height: 1.5em; margin: 0; color: var(--inchiostro-2); text-align: center; }
.esito-voce { display: grid; justify-items: center; gap: var(--s3); width: 100%; text-align: center; }
.esito-voce:empty { display: none; }
.esito-voce .esito { min-height: 1.5em; margin: 0; font-weight: 600; text-align: center; }
.esito-voce .testo-2 { margin: 0; color: var(--inchiostro-2); }
.esito-voce .piccolo { font-size: 15px; }

.parole-valutate { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px var(--s3); margin: 0; font-size: 20px; font-weight: 600; }
.parola-valutata { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.parola-valutata.ok { font-weight: 700; }
.parola-valutata.incerta { text-decoration: underline dotted 2px var(--avviso); text-underline-offset: 5px; }
.parola-valutata.mancante { color: var(--errore); text-decoration: underline 2px; text-underline-offset: 5px; }
button.parola-valutata { min-height: 44px; padding: 0 var(--s1); cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.parola-valutata:disabled { opacity: 0.4; cursor: default; }

.sopratitolo { margin: 0; color: var(--inchiostro-2); font-size: 15px; font-weight: 600; }
.registrazione { width: 100%; }
.registrazione audio { display: block; width: 100%; }
.autovalutazione { display: grid; gap: var(--s3); width: 100%; }
.guida-microfono { display: grid; gap: var(--s2); width: 100%; text-align: left; }
.guida-microfono p { margin: 0; }

/* ── I pulsanti di una volta ──────────────────────────────────────────────────────────────────
   voce.js scrive ancora `pulsante`, `pulsante secondario` e `pulsante testo piccolo` (il testo «lento», «L'ho detta bene», «Riprovo dopo»).
   Qui prendono l'aspetto dei pulsanti nuovi; finché quel modulo non passa a pulsante() di componenti.js, i due elenchi vanno tenuti uguali. */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0 var(--s5);
  border: 2px solid transparent;
  border-radius: var(--raggio);
  background: var(--pulsante);
  color: var(--pulsante-testo);
  font-family: var(--testo);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s;
}

.pulsante:active { transform: translateY(2px); }
.pulsante.secondario { background: var(--piastrella); color: var(--inchiostro); }
.pulsante.testo { padding: 0 var(--s3); background: transparent; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; }
.pulsante.piccolo { min-height: 40px; font-size: 16px; }
.pulsante.in-riproduzione { background: var(--piastrella); }
.pulsante:disabled { opacity: 0.4; cursor: default; transform: none; }

/* ── L'indice del corso ───────────────────────────────────────────────────────────────────────
   Nella colonna di sinistra (272px sul PC; sul tablet è un pannello; sul telefono `lato` non c'è e la home mette i livelli nel proprio contenuto). Un livello è il suo nome,
   l'avanzamento «fatte/totale» in una pillola (o il lucchetto, se non ha ancora lezioni) e l'elenco delle lezioni. La lezione fatta ha il
   tondo nero con la spunta, quella in corso il tondo giallo con il contorno, quella da fare il tondo grigio con il numero; la lezione
   aperta ha lo sfondo --giallo-tenue e il contorno inchiostro. Sul giallo tenue il testo resta --inchiostro. */

.v-indice-livelli,
.v-indice-lezioni { margin: 0; padding: 0; list-style: none; }

.v-indice-livelli { display: flex; flex-direction: column; gap: var(--s5); }
.v-indice-lezioni { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s2); }

.v-indice-intestazione { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: 0 var(--s2); }
.v-indice-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-indice-nome .occhiello { color: var(--inchiostro-2); }
.v-indice-livello-titolo { font-family: var(--titoli); font-size: 18px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }

.v-indice-avanzamento,
.v-indice-lucchetto { display: inline-flex; flex: none; align-items: center; }

.v-indice-conto { padding: 2px var(--s3); border-radius: 999px; background: var(--piastrella); font-size: 14px; font-weight: 700; line-height: 1.4; }
.v-indice-lucchetto { color: var(--inchiostro-2); }
.v-indice-lucchetto svg { width: 20px; height: 20px; }
.v-indice-vuoto { margin: var(--s2) var(--s2) 0; color: var(--inchiostro-2); font-size: 15px; }

.v-indice-lezione,
.v-indice-verifica {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s2);
  border-radius: var(--raggio);
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.v-indice-lezione:hover,
.v-indice-verifica:hover { background: var(--piastrella); }
.v-indice-lezione:focus-visible,
.v-indice-verifica:focus-visible { outline-offset: -3px; }
.v-indice-attiva,
.v-indice-attiva:hover { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); }

.v-indice-numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--piastrella);
  font-size: 14px;
  font-weight: 700;
}

.v-indice-numero svg { width: 18px; height: 18px; }
.v-indice-lezione[data-stato="fatta"] .v-indice-numero { background: var(--inchiostro); color: var(--superficie); }
.v-indice-lezione[data-stato="in-corso"] .v-indice-numero { background: var(--giallo); box-shadow: 0 0 0 2px var(--inchiostro); color: var(--su-giallo); }
.v-indice-testi { min-width: 0; overflow-wrap: anywhere; }

/* La verifica di fine livello, in fondo alle lezioni del livello (js/indice.js): una riga come quelle delle lezioni, con la stella al posto
   del numero (la spunta sul tondo nero quando è superata), sotto il titolo lo stato e, prima delle 12 lezioni, il consiglio. */
.v-indice-verifica { margin-top: var(--s1); }
.v-indice-verifica .v-indice-testi { display: flex; flex-direction: column; gap: 2px; }
.v-indice-verifica-stato { color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.v-indice-verifica-consiglio { color: var(--inchiostro-2); font-size: 13px; font-weight: 500; }
.v-indice-verifica[data-stato="superata"] .v-indice-numero { background: var(--inchiostro); color: var(--superficie); }

/* Il contenitore che il router dà a ogni vista dentro il contenuto (js/app.js): serve a staccarlo dalla pagina quando si va altrove, e non
   deve cambiare niente di quel che si vede: i figli si dispongono come se stessero direttamente nel contenuto. */
.v-vista { display: contents; }

/* ── Schermate di stato del router ────────────────────────────────────────────────────────────
   «Pagina non trovata» e «Qualcosa non ha funzionato»: lo stato vuoto della base con sotto le azioni (e il messaggio dell'errore). */

.v-stato-azioni { display: flex; flex-direction: column; align-items: center; gap: var(--s4); width: 100%; max-width: 480px; }
.v-stato-bottoni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* Il titolo della pagina prende il fuoco a ogni cambio di vista (il router): un titolo non è un comando, e non vuole il contorno. */
h1[tabindex="-1"]:focus,
.v-vuoto-titolo[tabindex="-1"]:focus { outline: none; }

/* ── Accesso e iscrizione (js/viste/accesso.js) ───────────────────────────────────────────────
   Una colonna sola (telefono e tablet): la banda gialla, poi la scheda con «Entra | Iscriviti» e il modulo, poi il collegamento alla
   privacy. Sul PC due metà alte quanto la pagina: a sinistra la banda, a destra la scheda al centro. Sul telefono il titolo è quello corto
   (il testo lungo e quello corto sono nella pagina tutti e due: il CSS ne mostra uno). Sulla banda tutto è --su-giallo (lo fa .v-banda). */

.v-accesso { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 560px; margin: 0 auto; }

.v-accesso > .v-banda { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s6) var(--s5); }

.v-accesso-titolo { text-wrap: balance; }
.v-accesso-titolo-corto { display: none; }
.v-guscio[data-schermo="telefono"] .v-accesso-titolo-corto { display: inline; }
.v-guscio[data-schermo="telefono"] .v-accesso-titolo-lungo { display: none; }

.v-accesso-punti { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; font-size: 19px; font-weight: 600; line-height: 1.3; }
.v-accesso-punti li { display: flex; align-items: center; gap: var(--s3); }

/* La spunta: tondo nero con il segno giallo (in scuro come in chiaro, perché sta sul giallo). */
.v-accesso-spunta { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--su-giallo); color: var(--giallo); }
.v-accesso-spunta svg { width: 20px; height: 20px; stroke-width: 3; }

.v-accesso-entrata { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-accesso-scheda { display: flex; flex-direction: column; gap: var(--s5); }

/* «Entra | Iscriviti»: due metà uguali. */
.v-accesso-scheda .v-tab { flex: 1 1 0; justify-content: center; font-size: 18px; }

.v-accesso-modulo { display: flex; flex-direction: column; gap: var(--s4); }
.v-accesso-modulo .v-pulsante[type="submit"] { width: 100%; }
.v-accesso-errore:empty { display: none; }

.v-accesso-privacy { margin: 0; font-size: 15px; text-align: center; }
.v-accesso-privacy a { color: var(--inchiostro-2); }

/* La casella dell'informativa: tutta la riga è alta almeno 48px e l'etichetta si tocca. */
.casella { display: flex; align-items: flex-start; gap: var(--s3); min-height: 48px; padding: var(--s2) 0; }
.casella input[type="checkbox"] { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--pulsante); }
.casella label { padding-top: 1px; font-size: 16px; }

/* Il campo trappola dell'iscrizione: una persona non lo vede (e non lo raggiunge: ha tabindex -1 e aria-hidden), un robot lo compila. */
.trappola { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.v-guscio[data-schermo="telefono"] .v-accesso { gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-accesso > .v-banda { gap: var(--s4); padding: var(--s5) var(--s4); }
.v-guscio[data-schermo="telefono"] .v-accesso-punti { gap: var(--s2); font-size: 17px; }

.v-guscio[data-schermo="pc"] .v-accesso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
  max-width: none;
  /* Alto quanto la finestra, tolti l'intestazione con la sua riga (--sopra), i margini del contenuto (--s5 sopra, --s7 sotto) e un po'
     d'aria, perché la pagina non scorra per un pixel. */
  min-height: calc(100vh - var(--sopra) - var(--s5) - var(--s7) - var(--s2));
  min-height: calc(100dvh - var(--sopra) - var(--s5) - var(--s7) - var(--s2));
}

.v-guscio[data-schermo="pc"] .v-accesso > .v-banda { justify-content: center; gap: var(--s6); padding: var(--s7); }
.v-guscio[data-schermo="pc"] .v-accesso-punti { gap: var(--s4); font-size: 20px; }
.v-guscio[data-schermo="pc"] .v-accesso-entrata { justify-content: center; width: 100%; max-width: 480px; margin: 0 auto; }

/* ── Privacy e crediti (js/viste/privacy.js) ──────────────────────────────────────────────────
   Una colonna di lettura da 720px: il titolo con l'introduzione, poi le sezioni (titolo, testo, elenco) e «Indietro». */

.v-privacy { display: flex; flex-direction: column; gap: var(--s6); width: 100%; max-width: 720px; margin: 0 auto; }
.v-privacy-testata { display: flex; flex-direction: column; gap: var(--s3); }
.v-privacy-intro { margin: 0; color: var(--inchiostro-2); }
.v-privacy-sezione { display: flex; flex-direction: column; gap: var(--s3); }
.v-privacy-sezione p { margin: 0; }
.v-privacy-elenco { display: grid; gap: var(--s2); margin: 0; padding-left: 22px; }
.v-privacy .v-pulsante { align-self: flex-start; }
.v-privacy code { padding: 1px 6px; border-radius: var(--raggio-piccolo); background: var(--piastrella); font-size: 0.9em; }

/* ── Profilo (js/viste/profilo.js) ────────────────────────────────────────────────────────────
   Riquadri su due colonne sul PC (e dove c'è posto per due da 22rem), impilati sul telefono: a sinistra i numeri, le lezioni e la voce,
   l'aspetto; a destra l'account e la privacy. Con la password provvisoria una colonna sola, stretta. Il giallo non serve qui. */

.v-profilo-pagina { display: flex; flex-direction: column; gap: var(--s5); }
.v-profilo-provvisoria { width: 100%; max-width: 480px; margin: 0 auto; }

.v-profilo-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s4); align-items: start; }
.v-profilo-colonna { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
/* I cinque riquadri (e quello della password provvisoria, che è l'account): colonne di cose con lo stesso respiro. */
.v-profilo-numeri,
.v-profilo-lezioni,
.v-profilo-aspetto,
.v-profilo-account,
.v-profilo-privacy { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

/* I numeri: tessere con l'etichetta piccola sopra e il valore grande, a capo quando non c'è posto. */
.v-profilo-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--s3); margin: 0; }
.v-profilo-numero { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--piastrella); }
.v-profilo-numero dt { color: var(--inchiostro-2); font-size: 15px; font-weight: 600; }
.v-profilo-numero dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); margin: 0; }
.v-profilo-valore { font-family: var(--titoli); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.v-profilo-unita { color: var(--inchiostro-2); font-size: 15px; font-weight: 600; }

/* Un'impostazione: l'interruttore e sotto il suo aiuto; le righe sono separate da un filetto. */
.v-profilo-riga { display: flex; flex-direction: column; gap: var(--s1); }
.v-profilo-riga + .v-profilo-riga { padding-top: var(--s3); border-top: 1px solid var(--riga); }
.v-profilo-aiuto { color: var(--inchiostro-2); font-size: 15px; }

/* Un gruppo dentro un riquadro (il test da rifare, il cambio della password): filetto sopra, poi le sue cose in colonna. */
.v-profilo-sezione { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); width: 100%; padding-top: var(--s4); border-top: 1px solid var(--riga); }

/* I moduli (password): campi in colonna, pulsante a sinistra, l'errore del server sopra il pulsante (e niente spazio se non c'è). */
.v-profilo-modulo { display: flex; flex-direction: column; gap: var(--s4); width: 100%; }
.v-profilo-modulo > .v-pulsante { align-self: flex-start; }
.v-profilo-errore:empty { display: none; }
.v-profilo-nome { overflow-wrap: anywhere; }
.v-profilo-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* «Elimina il mio account»: chiuso finché non lo si apre; il titolo è nel colore dell'errore (rosso, anche in scuro). */
.v-profilo-elimina { padding-top: var(--s2); border-top: 1px solid var(--riga); }
.v-profilo-elimina > summary { padding: var(--s3) 0; color: var(--errore); font-weight: 700; cursor: pointer; }
.v-profilo-elimina[open] > summary { margin-bottom: var(--s2); }

.v-profilo-privacy > .v-pulsante { align-self: flex-start; }

/* ── Corso, la home (js/viste/corso.js) ───────────────────────────────────────────────────────
   Una colonna: il titolo del giorno, la scheda «Riprendi» in rilievo (o la banda del test, o il saluto del corso finito), le tre schede
   (serie, ripasso, tutor) e le lezioni del livello in griglia. Il riquadro del numero e la banda sono gialli: lì tutto è --su-giallo.
   Sul PC le schede sono tre in fila e le lezioni quattro per riga; sul tablet le lezioni sono tre; sul telefono le schede sono due
   affiancate con il tutor sotto e le lezioni due per riga. Sul telefono i livelli sono un blocco sotto le lezioni (`lato` lì non si vede). */

.v-home { display: flex; flex-direction: column; gap: var(--s5); }
.v-corso-titolo { text-wrap: balance; }

/* Il numero grande: di una lezione, dei giorni di fila, delle frasi da ripassare. */
.v-corso-numero { font-family: var(--titoli); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* Gli errori dei contenuti, per l'amministratore: la banda d'avviso con il collegamento al pannello. */
.v-corso-contenuti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  padding: var(--s4);
  border: 1px solid var(--avviso);
  border-radius: var(--raggio-grande);
  background: var(--avviso-chiaro);
  color: var(--avviso);
}

.v-corso-contenuti > svg { flex: none; width: 24px; height: 24px; }
.v-corso-contenuti > p { flex: 1 1 18em; margin: 0; font-weight: 600; }

/* «Riprendi»: a sinistra il riquadro giallo (numero e titolo), a destra livello, tappa, segmenti e pulsante. */
.v-corso-riprendi { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s5); align-items: stretch; }

.v-corso-riquadro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s5);
  border-radius: var(--raggio-grande);
  background: var(--giallo);
  color: var(--su-giallo);
}

.v-corso-riquadro .v-corso-numero { font-size: 72px; }
.v-corso-riquadro h2 { overflow-wrap: anywhere; }

.v-corso-dettagli { display: flex; flex-direction: column; justify-content: center; gap: var(--s4); min-width: 0; }
.v-corso-dettagli .v-tappe { max-width: 28rem; }
.v-corso-dettagli .v-pulsante { align-self: flex-start; }
.v-corso-livello-nome { color: var(--inchiostro-2); }
.v-corso-tappa { margin: 0; font-weight: 600; }

/* La banda del test: titolo, frasi, e i due pulsanti uno accanto all'altro (a capo se non c'è posto). */
.v-corso-test { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); }
.v-corso-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Il saluto del corso finito. */
.v-corso-finito { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }

/* Le tre schede. */
.v-corso-schede { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.v-corso-schede > .v-scheda { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; padding: var(--s4); }
.v-corso-schede > .v-scheda > .v-pulsante { margin-top: auto; }
.v-corso-scheda-titolo { margin: 0; font-family: var(--testo); color: var(--inchiostro-2); }
.v-corso-valore { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); margin: 0; font-weight: 600; }
.v-corso-fiamma { align-self: center; flex: none; width: 32px; height: 32px; fill: var(--giallo); stroke: var(--inchiostro); stroke-width: 1.75; }
.v-corso-nota { margin: 0; color: var(--inchiostro-2); font-size: 15px; }

/* «Oggi: fatto» ha la spunta in un tondo scuro; «Oggi: da fare» è solo testo. Verde e rosso sono per giusto e sbagliato. */
.v-corso-oggi { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 700; }
.v-corso-oggi svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--inchiostro); color: var(--superficie); stroke-width: 3; }

/* Le lezioni del livello: titolo e conto «3/8» sulla stessa riga, poi la griglia. */
.v-corso-lezioni { display: flex; flex-direction: column; gap: var(--s4); }
.v-corso-livello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.v-corso-conto { padding: 2px var(--s3); border-radius: 999px; background: var(--piastrella); font-size: 14px; font-weight: 700; line-height: 1.4; }
.v-corso-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.v-corso-griglia > li { display: flex; min-width: 0; }

.v-corso-lezione {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  min-width: 0;
  min-height: 132px;
  padding: var(--s4);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-grande);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.v-corso-lezione:hover { background: var(--piastrella); }
/* La lezione in corso (la prossima) ha il bordo inchiostro di 2px; il bordo di 1px diventa 2px con l'ombra, così le schede non si spostano. */
.v-corso-lezione[data-stato="in-corso"] { border-color: var(--inchiostro); box-shadow: 0 0 0 1px var(--inchiostro); }

.v-corso-lezione-numero { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--piastrella); font-size: 15px; font-weight: 700; }
.v-corso-lezione-numero svg { width: 20px; height: 20px; }
.v-corso-lezione[data-stato="fatta"] .v-corso-lezione-numero { background: var(--inchiostro); color: var(--superficie); }
.v-corso-lezione[data-stato="in-corso"] .v-corso-lezione-numero { background: var(--giallo); box-shadow: 0 0 0 2px var(--inchiostro); color: var(--su-giallo); }
.v-corso-lezione-titolo { min-width: 0; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.v-corso-lezione .v-stelle { margin-top: auto; }

.v-guscio[data-schermo="tablet"] .v-corso-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* La verifica del livello, dopo la griglia: i testi a sinistra e il pulsante a destra; sul telefono (o quando non c'è posto) il pulsante
   va sotto. «Superata» ha la spunta nel tondo scuro, come «Oggi: fatto». */
.v-corso-verifica { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); padding: var(--s4) var(--s5); }
.v-corso-verifica-testi { display: flex; flex: 1 1 20rem; flex-direction: column; gap: var(--s2); min-width: 0; }
.v-corso-verifica-titolo { margin: 0; font-size: 20px; }
.v-corso-verifica-stato { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; font-weight: 700; }
.v-corso-verifica-stato svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--inchiostro); color: var(--superficie); stroke-width: 3; }
.v-corso-verifica-consiglio { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--giallo-tenue); color: var(--inchiostro); font-size: 15px; }
.v-corso-verifica > .v-pulsante { flex: none; }

/* «Tutti i livelli»: il blocco per il telefono, dove `lato` non si vede. Da tablet in su è `display: none` (fuori dal giro della tastiera e dai
   lettori di schermo): lì i livelli sono nell'indice del guscio, e vedere lo stesso elenco due volte sarebbe rumore. */
.v-corso-tutti-livelli { display: none; flex-direction: column; gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-tutti-livelli { display: flex; }

/* Il telefono: «Riprendi» in colonna con il riquadro in orizzontale (numero e titolo di fianco), le prime due schede affiancate e il tutor
   sotto, le lezioni due per riga. */
.v-guscio[data-schermo="telefono"] .v-home { gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-riprendi { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-riquadro { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-riquadro .occhiello { flex: 1 0 100%; }
.v-guscio[data-schermo="telefono"] .v-corso-riquadro .v-corso-numero { font-size: 56px; }
.v-guscio[data-schermo="telefono"] .v-corso-riquadro h2 { flex: 1 1 8rem; }
.v-guscio[data-schermo="telefono"] .v-corso-test { padding: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-verifica { padding: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-verifica > .v-pulsante { flex: 1 1 100%; }
.v-guscio[data-schermo="telefono"] .v-corso-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.v-guscio[data-schermo="telefono"] .v-corso-serie,
.v-guscio[data-schermo="telefono"] .v-corso-ripasso { padding: var(--s3); }
.v-guscio[data-schermo="telefono"] .v-corso-serie .v-corso-numero,
.v-guscio[data-schermo="telefono"] .v-corso-ripasso .v-corso-numero { font-size: 36px; }
/* Nelle due schede strette (165px): niente fiamma (è già nell'intestazione), così «1 giorno di fila» sta su una riga, e il pulsante
   ha meno aria ai lati, così «Ripassa ora» non va a capo. */
.v-guscio[data-schermo="telefono"] .v-corso-fiamma { display: none; }
.v-guscio[data-schermo="telefono"] .v-corso-serie .v-pulsante,
.v-guscio[data-schermo="telefono"] .v-corso-ripasso .v-pulsante { padding: 0 var(--s3); }
.v-guscio[data-schermo="telefono"] .v-corso-tutor { grid-column: 1 / -1; }
.v-guscio[data-schermo="telefono"] .v-corso-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── La lezione ───────────────────────────────────────────────────────────────────────────────
   js/viste/lezione.js (la regia) e le tappe di js/viste/lezione/. Una colonna di lettura da 720px, una cosa per volta: dove si è, l'h1 con
   il nome della tappa, la tappa, e in fondo il pulsante principale (fisso in basso sul telefono, alto 56px e largo quanto lo schermo).
   Le tappe: nel lato sul PC (colonna di 232px) con stato e nome; nella testa del guscio, sul tablet e sul telefono, i sei segmenti con
   «Tappa 3 di 6». Sul tablet il lato in modo concentrato sarebbe una barra in alto: qui non si mostra, perché le tappe ci sono già nella
   testa (dove `:has` non c'è si vedrebbero tutte e due, senza danni). Le frasi inglesi lunghe (fino a 24 parole) vanno a capo da sole
   (`overflow-wrap: anywhere` della base sui paragrafi; qui sugli span e sui pulsanti che le contengono). */

.lezione { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 720px; margin: 0 auto; }
.lezione-testata { display: flex; flex-direction: column; gap: var(--s2); }
.lezione-dove { color: var(--inchiostro-2); }
.lezione-titolo:focus { outline: none; }
.lezione-corpo { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }

/* Sul PC il titolo intero sta già nell'intestazione e il livello nel lato: qui non si ripete. */
.v-guscio[data-schermo="pc"] .lezione-dove { display: none; }

/* Il piede: il pulsante principale in fondo, a destra. Sul telefono è fisso in basso, a tutta larghezza e sopra la barra di sistema
   (safe-area), anche quando la tappa è corta; la lezione lascia sotto di sé il suo spazio, così l'ultima riga non finisce dietro. */
.lezione-piede { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); }
.lezione-avanti { min-width: 10rem; }

/* Lo spazio sotto la lezione è l'altezza vera del piede (`--lezione-piede`, la scrive piede() di js/viste/lezione/comune.js): un
   verdetto con la spiegazione è più alto di un pulsante. Prima che si sappia (o senza ResizeObserver) vale quella di una riga da 56px.
   Lo spazio e il piede cambiano di colpo: con meno movimento vetrina360 dà a tutto una transizione di 0,01ms (e `transition-property`
   resta «all»), così per un istante lo spazio sotto sarebbe quello di prima e la risposta non si potrebbe portare sopra il verdetto. */
.v-guscio[data-schermo="telefono"] .lezione {
  padding-bottom: calc(var(--lezione-piede, calc(56px + var(--s3) * 2 + env(safe-area-inset-bottom, 0px))) + var(--s3));
  transition-property: none;
}

.v-guscio[data-schermo="telefono"] .lezione-piede {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--s3) var(--bordo-destro) calc(var(--s3) + env(safe-area-inset-bottom, 0px)) var(--bordo-sinistro);
  border-top: 1px solid var(--riga);
  background: var(--superficie);
  transition-property: none;
}

.v-guscio[data-schermo="telefono"] .lezione-piede .v-pulsante { flex: 1 1 100%; min-height: 56px; font-size: 18px; }

.lezione-aiuto { color: var(--inchiostro-2); font-size: 15px; }

/* La ripresa: dove si era e le tre scelte. */
.lezione-ripresa { display: flex; flex-direction: column; gap: var(--s4); }
.lezione-ripresa-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ── Le tappe nel lato (PC) ── */

.lezione-lato { display: flex; flex-direction: column; gap: var(--s3); }
.lezione-lato-dove { padding: 0 var(--s2); color: var(--inchiostro-2); }
.lezione-tappe { display: block; }
.lezione-tappe-elenco { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.lezione-tappe-voce { display: flex; flex-direction: column; gap: var(--s2); }

.lezione-tappe-tasto {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 48px;
  padding: var(--s2);
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--inchiostro);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}

button.lezione-tappe-tasto { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.lezione-tappe-tasto:hover { background: var(--piastrella); }
.lezione-tappe-tasto:focus-visible { outline-offset: -3px; }
.lezione-tappe-tasto[aria-current="step"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); }
.lezione-tappe-tasto[data-stato="da-fare"] .lezione-tappe-nome { color: var(--inchiostro-2); }
.lezione-tappe-nome { min-width: 0; overflow-wrap: anywhere; }

.lezione-tappe-segno {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--piastrella);
  color: var(--inchiostro);
  font-size: 14px;
  font-weight: 700;
}

.lezione-tappe-segno svg { width: 16px; height: 16px; stroke-width: 3; }
.lezione-tappe-tasto[data-stato="fatto"] .lezione-tappe-segno { background: var(--inchiostro); color: var(--superficie); }
.lezione-tappe-tasto[data-stato="ora"] .lezione-tappe-segno { background: var(--giallo); box-shadow: 0 0 0 2px var(--inchiostro); color: var(--su-giallo); }
.lezione-tappe-barra { padding: 0 var(--s2) var(--s1) calc(28px + var(--s5)); }
.lezione-tappe-barra .v-barra { --altezza: 10px; }

/* Sul tablet le tappe stanno nella testa: il lato non si mostra (sul telefono lo nasconde già il guscio). */
.v-guscio[data-schermo="tablet"] .v-cassetto-lato:has(.lezione-lato) { display: none; }

/* ── L'avanzamento nella testa (tablet e telefono) ── */

.lezione-avanzamento { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.lezione-avanzamento .v-tappe { flex: 1 1 10rem; max-width: 28rem; }
.lezione-avanzamento-testo { flex: 0 1 auto; min-width: 0; color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.v-guscio[data-schermo="pc"] .lezione-avanzamento { display: none; }

/* ── Ascolta ── */

.lezione-scena { display: flex; flex-direction: column; gap: var(--s3); }
.lezione-situazione { text-wrap: pretty; }
.lezione-personaggi { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; }
.lezione-personaggi li { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; }
.lezione-personaggio-nome { min-width: 0; overflow-wrap: anywhere; }

.lezione-iniziale {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--piastrella);
  color: var(--inchiostro);
  font-family: var(--titoli);
  font-size: 15px;
  font-weight: 800;
}

.lezione-iniziale-io { background: var(--inchiostro); color: var(--pagina); }

.lezione-comandi { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* «Lento» e «Mostra traduzioni» accesi: giallo tenue con il contorno, come ciò che è selezionato. */
.lezione-comandi .v-pulsante[aria-pressed="true"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); color: var(--inchiostro); }

.lezione-dialogo { display: flex; flex-direction: column; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.lezione-fumetto-nome { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.v-fumetto-io .lezione-fumetto-nome { text-align: right; }
/* Il ▶ resta accanto alla battuta anche sul telefono (la base lo manda sotto quando la frase è lunga): il fumetto è largo al massimo
   l'88% della colonna, quindi per il testo restano almeno 200px anche a 375px. */
.lezione-fumetto .v-fumetto-nuvola { flex-wrap: nowrap; }
.lezione-fumetto .v-fumetto-corpo { min-width: 0; }

/* La battuta è un pulsante (toccandola si vede la traduzione), ma si legge come il testo del fumetto. */
.lezione-battuta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lezione-battuta > span { overflow-wrap: anywhere; }
.lezione-battuta:focus-visible { outline-offset: 4px; }

/* La battuta che sta parlando in «Ascolta tutto»: un anello giallo attorno alla nuvola. */
.lezione-fumetto.in-riproduzione .v-fumetto-nuvola { box-shadow: 0 0 0 3px var(--giallo), 0 0 0 5px var(--inchiostro); }

/* Nel fumetto «io» (fondo inchiostro) il pulsante audio ha il bordo e l'ombra del colore della pagina, se no non si staccherebbe. */
.v-fumetto-io .pulsante-audio { border-color: var(--pagina); box-shadow: 0 4px 0 var(--pagina); }
.v-fumetto-io .pulsante-audio:active { box-shadow: 0 2px 0 var(--pagina); }

/* ── Frasi chiave ──
   Due schede per riga sul PC e sul tablet; sul telefono una sola, quella con `data-corrente`, e sotto «‹ 2 di 10 ›». */

.lezione-frasi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.lezione-frase { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.lezione-frase:focus { outline: none; }
.lezione-frase:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; }

.lezione-nota { padding: var(--s3); border-radius: var(--raggio); background: var(--piastrella); font-size: 15px; }
.lezione-audio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: auto; padding-top: var(--s2); }

.lezione-navigatore { display: none; align-items: center; justify-content: space-between; gap: var(--s3); }
.lezione-contatore { font-weight: 700; font-variant-numeric: tabular-nums; }
.lezione-navigatore .v-pulsante { width: 56px; padding: 0; }

.v-guscio[data-schermo="telefono"] .lezione-frasi { grid-template-columns: minmax(0, 1fr); }
.v-guscio[data-schermo="telefono"] .lezione-frase:not([data-corrente]) { display: none; }
.v-guscio[data-schermo="telefono"] .lezione-navigatore { display: flex; }
.v-guscio[data-schermo="telefono"] .lezione-frase { padding: var(--s4); }

/* ── Il trucco ── */

.lezione-trucco { display: flex; flex-direction: column; gap: var(--s3); }
.lezione-trucco h2 { text-wrap: balance; }
.lezione-trucco-spiegazione { text-wrap: pretty; }
.lezione-esempi-blocco { display: flex; flex-direction: column; gap: var(--s3); }
.lezione-sottotitolo { font-size: 20px; }
.lezione-esempi { display: flex; flex-direction: column; margin: 0; padding: 0 var(--s5); list-style: none; }
.lezione-esempio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4) 0; }
.lezione-esempio + .lezione-esempio { border-top: 1px solid var(--riga); }
.lezione-esempio-testi { display: flex; flex: 1 1 12em; flex-direction: column; gap: var(--s1); min-width: 0; }
.lezione-esempio-en { font-size: 19px; font-weight: 700; line-height: 1.3; }
.v-guscio[data-schermo="telefono"] .lezione-esempi { padding: 0 var(--s4); }

/* ── Esercizi e domande della lettura ──
   js/componenti/esercizio.js: la consegna, l'h2 della domanda, le opzioni (v-opzione), i tasselli di «riordina», il campo di
   «scrivi» o le due colonne di «abbina», e in fondo il
   verdetto. Il fondo dell'esercizio sta nel piede della tappa: sul telefono è fisso in basso e il verdetto lo riempie fino ai bordi
   (con la safe-area sotto); quando è vuoto (prima di rispondere, con le opzioni) il piede non si vede. Sul PC il verdetto è una barra
   con gli angoli tondi in fondo alla colonna. */

.lezione-esercizio-testata { display: flex; flex-direction: column; gap: var(--s2); }
.lezione-esercizio-testata .occhiello { color: var(--inchiostro-2); }
.lezione-esercizio { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

.esercizio { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.esercizio-consegna { color: var(--inchiostro-2); font-size: 15px; font-weight: 700; }
.esercizio-domanda { font-size: 24px; line-height: 1.25; text-wrap: pretty; }
.esercizio-domanda:focus { outline: none; } /* come l'h1 della tappa: il fuoco ci va da sé, non per un Tab */
.esercizio-frase { font-size: 26px; }

/* Il buco di «completa»: una riga da riempire; poi la parola scelta, verde o rossa. */
.esercizio-buco {
  display: inline-block;
  min-width: 4.5em;
  margin: 0 0.15em;
  padding: 0 var(--s2);
  border-bottom: 3px solid var(--riga-2);
  text-align: center;
  vertical-align: baseline;
}
.esercizio-buco[data-esito="giusta"] { border-bottom-color: var(--ok); border-radius: var(--raggio-piccolo) var(--raggio-piccolo) 0 0; background: var(--ok-chiaro); color: var(--ok); }
.esercizio-buco[data-esito="sbagliata"] { border-bottom-color: var(--errore); border-radius: var(--raggio-piccolo) var(--raggio-piccolo) 0 0; background: var(--errore-chiaro); color: var(--errore); }

.esercizio-ascolto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.esercizio-frase-scritta { font-size: 20px; font-weight: 700; }

.esercizio-opzioni { display: flex; flex-direction: column; gap: var(--s3); }
.esercizio-opzioni .v-opzione:disabled { cursor: default; }
.esercizio-opzioni .v-opzione:disabled:active { margin-bottom: 0; border-bottom-width: 4px; transform: none; }

/* Riordina: la riga della risposta (tratteggiata finché è vuota), «Cancella» sotto a destra, i tasselli da toccare. */
.esercizio-composizione { display: flex; flex-direction: column; gap: var(--s2); }
.esercizio-risposta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  min-height: 64px;
  padding: var(--s2) var(--s3);
  border: 2px dashed var(--riga-2);
  border-radius: var(--raggio-grande);
}
.esercizio-risposta[data-esito="giusta"] { border-style: solid; border-color: var(--ok); background: var(--ok-chiaro); color: var(--ok); }
.esercizio-risposta[data-esito="sbagliata"] { border-style: solid; border-color: var(--errore); background: var(--errore-chiaro); color: var(--errore); }
.esercizio-risposta-vuota { color: var(--inchiostro-2); font-size: 15px; }
.esercizio-cancella { display: flex; justify-content: flex-end; }
.esercizio-tasselli { display: flex; flex-wrap: wrap; gap: var(--s2); }

.esercizio-tassello {
  min-height: 48px;
  max-width: 100%;
  padding: var(--s2) var(--s4);
  border: 2px solid var(--riga-2);
  border-bottom-width: 4px;
  border-radius: var(--raggio-grande);
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.esercizio-tassello:hover { background: var(--piastrella); }
.esercizio-tassello:active { margin-top: 2px; border-bottom-width: 2px; }
.esercizio-tassello:disabled { cursor: default; }
.esercizio-tassello:disabled:active { margin-top: 0; border-bottom-width: 4px; }
.esercizio-risposta .esercizio-tassello { border-color: var(--inchiostro); }
.esercizio-risposta[data-esito] .esercizio-tassello { border-color: currentColor; background: var(--superficie); color: inherit; }
/* Una parola già messa nella frase lascia il suo posto vuoto: le altre non si spostano. */
.esercizio-tasselli .esercizio-tassello.usata { border-style: dashed; border-bottom-width: 2px; background: var(--piastrella); color: transparent; }

/* Scrivi (il dettato): ▶ e lento, la traduzione come aiuto, il campo largo quanto la colonna. Nel verdetto la frase giusta ha le parole
   da correggere sottolineate a onda (e annunciate «da correggere»): il colore da solo non basta. */
.esercizio-aiuto { color: var(--inchiostro-2); font-size: 17px; text-wrap: pretty; }
.esercizio[data-tipo="scrivi"] .v-campo .esercizio-campo { min-height: 56px; font-size: 20px; }
.esercizio[data-tipo="scrivi"] .v-campo .esercizio-campo[readonly] { background: var(--piastrella); }
.esercizio-frase-giusta { font-weight: 700; }
.esercizio-parola-errata {
  padding: 0 2px;
  border-radius: var(--raggio-piccolo);
  background: var(--superficie);
  color: var(--errore);
  text-decoration: underline wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.esercizio-parola-testo { overflow-wrap: anywhere; }

/* Abbina: due colonne uguali di voci (l'inglese a sinistra), anche sul telefono; sotto, la riga che annuncia le coppie. La voce scelta
   è gialla con il bordo scuro, quella unita verde con ✓ (e spenta), quella sbagliata rossa con ✕ per un attimo. */
.esercizio-abbina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.esercizio-colonna { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.esercizio-voce {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: var(--s2) var(--s3);
  border: 2px solid var(--riga-2);
  border-bottom-width: 4px;
  border-radius: var(--raggio-grande);
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, border-color 0.15s;
}
.esercizio-voce:hover { background: var(--piastrella); }
.esercizio-voce:active { margin-top: 2px; border-bottom-width: 2px; }
/* Il testo va a capo e spezza anche le parole lunghe: sul telefono una colonna è larga poco più di 140px, e «appartamento» con la ✓
   non ci sta. In italiano (`lang="it"` sulla voce) si spezza dove si deve, con il trattino; dove il browser non sa farlo, ovunque. */
.esercizio-voce-testo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.esercizio-voce[lang="it"] .esercizio-voce-testo { -webkit-hyphens: auto; hyphens: auto; }
.esercizio-voce-esito { display: inline-flex; flex: none; }
.esercizio-voce-esito svg { width: 22px; height: 22px; stroke-width: 3; }
.esercizio-voce[data-stato="scelta"] { border-color: var(--inchiostro); background: var(--giallo-tenue); }
.esercizio-voce[data-stato="unita"] { border-color: var(--ok); background: var(--ok-chiaro); cursor: default; }
.esercizio-voce[data-stato="unita"]:active { margin-top: 0; border-bottom-width: 4px; }
.esercizio-voce[data-stato="unita"] .esercizio-voce-esito { color: var(--ok); }
.esercizio-voce[data-stato="sbagliata"] { border-color: var(--errore); background: var(--errore-chiaro); }
.esercizio-voce[data-stato="sbagliata"] .esercizio-voce-esito { color: var(--errore); }
.esercizio-abbina-stato { min-height: 1.4em; color: var(--inchiostro-2); font-size: 15px; font-weight: 700; }
.v-guscio[data-schermo="telefono"] .esercizio-abbina { gap: var(--s2); }
.v-guscio[data-schermo="telefono"] .esercizio-colonna { gap: var(--s2); }
.v-guscio[data-schermo="telefono"] .esercizio-voce { min-height: 52px; padding: var(--s2); font-size: 16px; }

.esercizio-piede { display: flex; flex: 1 1 100%; justify-content: flex-end; min-width: 0; }
.esercizio-piede .v-verdetto { flex: 1 1 100%; border-radius: var(--raggio-grande); }
.lezione-piede:has(> .esercizio-piede[hidden]) { display: none; }

.v-guscio[data-schermo="telefono"] .lezione-piede:has(.v-verdetto) { padding: 0; border-top: 0; background: transparent; }
.v-guscio[data-schermo="telefono"] .esercizio-piede .v-verdetto {
  border-radius: 0;
  padding: var(--s4) var(--bordo-destro) calc(var(--s4) + env(safe-area-inset-bottom, 0px)) var(--bordo-sinistro);
}
.v-guscio[data-schermo="telefono"] .esercizio-domanda { font-size: 21px; }
.v-guscio[data-schermo="telefono"] .esercizio-frase { font-size: 22px; }

/* ── Leggi e capisci ──
   Il testo a sinistra e le domande a destra quando c'è posto (la colonna si allarga fino a 1080px); altrimenti una sotto l'altro, come
   sul telefono. Decide lo spazio vero della lezione, non il tipo di schermo: sul PC il lato (232px) e il pannello del tutor (380px)
   possono lasciarne poco. Le due colonne stanno affiancate solo se ciascuna ha almeno 360px.
   La scheda del testo richiama il suo tipo (`data-tipo`); il testo va a capo dove va a capo nel contenuto. Le parole del glossario sono
   sottolineate a puntini; il fumetto con la traduzione si apre sotto la parola, dentro la scheda (lo posiziona leggi.js). */

.lezione:has(.lezione-lettura) { max-width: 1080px; }

.lezione-lettura { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--s5); align-items: start; }
.lettura-colonna-testo { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.lettura-colonna-domande { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.lettura-comandi { display: flex; flex-wrap: wrap; gap: var(--s3); }
.lettura-comandi .v-pulsante[aria-pressed="true"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); color: var(--inchiostro); }
.lettura-italiano { padding: var(--s4); border-radius: var(--raggio); background: var(--piastrella); white-space: pre-line; }

.lettura-carta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px solid var(--riga);
  border-radius: var(--raggio-grande);
  background: var(--superficie);
  color: var(--inchiostro);
}
.lettura-tipo { color: var(--inchiostro-2); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lettura-titolo { font-size: 22px; line-height: 1.2; }
.lettura-testo { font-size: 18px; line-height: 1.6; white-space: pre-line; }

/* Messaggio: un fumetto di una chat. */
.lettura-carta[data-tipo="messaggio"] { max-width: 34em; border: 0; border-radius: 20px 20px 20px 6px; background: var(--piastrella); }
/* Email: l'intestazione separata dal corpo. */
.lettura-carta[data-tipo="email"] { border-top: 6px solid var(--inchiostro); }
.lettura-carta[data-tipo="email"] .lettura-titolo { padding-bottom: var(--s3); border-bottom: 1px solid var(--riga); }
/* Menu: centrato, con la doppia cornice. */
.lettura-carta[data-tipo="menu"] { border: 4px double var(--inchiostro); text-align: center; }
.lettura-carta[data-tipo="menu"] .lettura-titolo { font-size: 26px; }
/* Cartello: giallo con il bordo spesso; sul giallo tutto è --su-giallo. */
.lettura-carta[data-tipo="cartello"] { border: 4px solid var(--su-giallo); background: var(--giallo); color: var(--su-giallo); text-align: center; }
.lettura-carta[data-tipo="cartello"] .lettura-tipo { color: var(--su-giallo); }
.lettura-carta[data-tipo="cartello"] .lettura-titolo { font-size: 26px; text-transform: uppercase; }
.lettura-carta[data-tipo="cartello"] .lettura-testo { font-weight: 700; }
.lettura-carta[data-tipo="cartello"] .lettura-parola { color: var(--su-giallo); text-decoration-color: var(--su-giallo); }
/* Annuncio: un foglio appeso, col bordo tratteggiato e la puntina. */
.lettura-carta[data-tipo="annuncio"] { border: 2px dashed var(--riga-2); }
.lettura-carta[data-tipo="annuncio"]::before {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border: 2px solid var(--inchiostro);
  border-radius: 50%;
  background: var(--giallo);
  content: "";
}
/* Articolo: il titolo da giornale e la riga sotto. */
.lettura-carta[data-tipo="articolo"] .lettura-titolo { padding-bottom: var(--s3); border-bottom: 2px solid var(--inchiostro); font-size: 26px; }

.lettura-parola {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--inchiostro-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lettura-parola:hover { text-decoration-style: solid; }
.lettura-parola[aria-pressed="true"] { background: var(--giallo-tenue); color: var(--inchiostro); text-decoration-style: solid; }
.lettura-carta[data-tipo="cartello"] .lettura-parola[aria-pressed="true"] { background: var(--superficie); color: var(--inchiostro); }

.lettura-fumetto {
  position: absolute;
  z-index: 2;
  top: var(--fumetto-y, 0);
  left: var(--fumetto-x, 50%);
  width: max-content;
  max-width: min(280px, calc(100% - 16px));
  padding: var(--s2) var(--s3);
  border-radius: var(--raggio);
  background: var(--inchiostro);
  color: var(--pagina);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  animation: v-dissolvi 0.15s ease-out;
}
.lettura-fumetto::before {
  position: absolute;
  top: -6px;
  left: var(--punta-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--inchiostro);
  content: "";
  transform: rotate(45deg);
}
.lettura-fumetto strong { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .lettura-fumetto { animation: none; }
}

.v-guscio[data-schermo="telefono"] .lettura-carta { padding: var(--s4); }

/* ── Parla tu ──
   js/viste/lezione/parla.js. (a) Una frase per schermata, con il microfono di voce.js nella scheda; (b) il dialogo a fumetti (quelli di
   Ascolta) con la scheda «Tocca a te» sotto. Sotto la scheda le alternative, come pulsanti di testo: «Scrivi invece» (apre il campo) e
   «Salta…». Il campo scritto mostra l'esito come il microfono (le stesse classi di voce.js: stelle, parole colorate). */

.lezione-parla { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.lezione-parla-titolo { font-family: var(--testo); color: var(--inchiostro-2); }
.lezione-parla-titolo:focus,
.lezione-parla-dialogo:focus,
.lezione-parla-tocca:focus { outline: none; } /* come l'h1 della tappa: il fuoco ci va da sé, non per un Tab */
.lezione-parla-frase { overflow-wrap: anywhere; text-wrap: pretty; }
.lezione-parla-dialogo { font-size: 24px; }
.lezione-parla-tocca { font-size: 20px; }
.lezione-parla-da-dire { font-size: 22px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.lezione-parla-turno { display: flex; flex-direction: column; gap: var(--s4); }
.lezione-parla-turno:empty { display: none; }
.lezione-parla-finito { align-items: center; background: var(--giallo-tenue); color: var(--inchiostro); text-align: center; }
.lezione-parla-alternative { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.lezione-parla-alternative:empty { display: none; }

.lezione-scrivi-modulo { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1.5px dashed var(--riga-2); border-radius: var(--raggio-grande); }
.lezione-scrivi-etichetta { font-weight: 700; }
.lezione-scrivi-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

.lezione-scrivi-campo {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1.5px solid var(--riga-2);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 17px;
}

.lezione-scrivi-campo:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; }
.lezione-scrivi-esito { padding-top: var(--s1); }

/* ── La fine ──
   js/viste/lezione/fine.js. La banda gialla (con l'onda) con le stelle grandi, il giudizio, la serie e le frasi nel ripasso; sotto i conti
   in tre riquadri, le frasi della lezione con «Da rivedere», le altre azioni e, nel piede, «Prossima lezione».
   La festa: coriandoli che cadono una volta sola sopra la banda; ai traguardi di serie sono di più, più grandi e su tutto lo schermo.
   Nessuno li tocca (pointer-events) e con «meno movimento» non ci sono. I colori sono token: giallo (col contorno, per stare sul giallo),
   inchiostro, verde e rosso. */

.lezione-fine { position: relative; }
.lezione-fine .v-banda { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s6) var(--s5); text-align: center; }
.lezione-fine-stelle .v-stelle { gap: var(--s2); }
.lezione-fine-stelle .v-stelle svg { width: 56px; height: 56px; stroke-width: 1.25; }
/* Sul giallo una stella piena gialla non si vedrebbe: piena è scura (--su-giallo), vuota è solo il contorno, più chiaro. */
.lezione-fine-stelle .v-stelle svg.piena { fill: var(--su-giallo); stroke: var(--su-giallo); }
.lezione-fine-stelle .v-stelle svg.vuota { fill: none; stroke: var(--su-giallo); opacity: 0.5; }
.lezione-fine-giudizio { font-size: 28px; text-wrap: balance; }
.lezione-fine-giudizio:focus { outline: none; }
.lezione-fine-serie { font-weight: 700; }

.lezione-fine-conti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.lezione-fine-conti li { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; padding: var(--s3) var(--s4); border-radius: var(--raggio-grande); background: var(--piastrella); }
.lezione-fine-conti span { color: var(--inchiostro-2); font-size: 15px; font-weight: 600; }
.lezione-fine-conti strong { font-family: var(--titoli); font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }

/* Le frasi nel ripasso: un `details` chiuso di base (dieci frasi spingerebbero giù «Prossima lezione»). Niente flex sul details: non tutti
   i browser lo fanno contenitore flessibile, quindi lo spazio lo danno i margini. */
.lezione-fine-ripasso > * + * { margin-top: var(--s3); }
.lezione-fine-sottotitolo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  margin: calc(var(--s2) * -1) 0;
  font-family: var(--titoli);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

/* Il segno che si apre (con display: flex il triangolo del browser sparisce): un triangolo che gira. */
.lezione-fine-sottotitolo::-webkit-details-marker { display: none; }
.lezione-fine-sottotitolo::before { flex: none; font-size: 16px; content: "▸"; transition: transform 0.15s; }
.lezione-fine-ripasso[open] > .lezione-fine-sottotitolo::before { transform: rotate(90deg); }
.lezione-fine-frasi { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.lezione-fine-frase { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; }
.lezione-fine-frase + .lezione-fine-frase { border-top: 1px solid var(--riga); }
.lezione-fine-frase-testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lezione-fine-frase-en { font-weight: 700; overflow-wrap: anywhere; }
.lezione-fine-frase .v-adesivo { flex: none; }

.lezione-fine-altre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.lezione-fine-attesa { min-height: 8rem; }
.lezione-fine-scheda { display: flex; flex-direction: column; gap: var(--s3); }
.lezione-fine-errore { min-width: 0; }

.lezione-festa { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; --caduta: 22rem; }
.lezione-festa-grande { position: fixed; z-index: 60; --caduta: 110vh; }

.lezione-coriandolo {
  position: absolute;
  top: -20px;
  left: var(--x, 50%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--inchiostro);
  opacity: 0;
  animation: lezione-coriandolo 2.6s cubic-bezier(0.3, 0.6, 0.6, 1) var(--ritardo, 0s) 1 forwards;
}

.lezione-coriandolo[data-colore="1"] { background: var(--giallo); box-shadow: inset 0 0 0 1.5px var(--su-giallo); }
.lezione-coriandolo[data-colore="2"] { background: var(--ok); }
.lezione-coriandolo[data-colore="3"] { width: 10px; height: 10px; border-radius: 50%; background: var(--errore); }
.lezione-festa-grande .lezione-coriandolo { width: 11px; height: 18px; animation-duration: 3.8s; }
.lezione-festa-grande .lezione-coriandolo[data-colore="3"] { width: 13px; height: 13px; }

@keyframes lezione-coriandolo {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--deriva, 0), var(--caduta), 0) rotate(calc(var(--giro, 0deg) + 540deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .lezione-festa { display: none; }
}

.v-guscio[data-schermo="telefono"] .lezione-fine .v-banda { padding: var(--s5) var(--s4); }
.v-guscio[data-schermo="telefono"] .lezione-fine-giudizio { font-size: 24px; }
.v-guscio[data-schermo="telefono"] .lezione-fine-conti li { padding: var(--s3); }
.v-guscio[data-schermo="telefono"] .lezione-fine-conti strong { font-size: 17px; }

/* ── La verifica di fine livello ──
   js/viste/verifica.js. È una `.lezione` (la colonna da 720px, il piede fisso in basso sul telefono) con una domanda per schermata; il
   risultato è come la fine della lezione: la banda gialla con il punteggio grande e la festa se è superata, poi le lezioni da ripassare
   e, nel piede, «Rifai la verifica» e «Torna al corso». */

.verifica { min-width: 0; }
.verifica-scarsi { margin: calc(var(--s2) * -1) 0 0; }
.verifica-attesa { min-height: 8rem; }
.verifica-errore-scheda { display: flex; flex-direction: column; gap: var(--s3); }
.verifica-errore-titolo { font-size: 24px; }
.verifica-errore-titolo:focus { outline: none; }
.verifica-errore { min-width: 0; }

.verifica-risultato { position: relative; }
.verifica-risultato .v-banda { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s6) var(--s5); text-align: center; }
.verifica-punteggio { font-family: var(--titoli); font-size: 56px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.verifica-giudizio { font-size: 28px; text-wrap: balance; }
.verifica-giudizio:focus { outline: none; }

.verifica-ripasso { display: flex; flex-direction: column; gap: var(--s3); }
.verifica-ripasso-titolo { margin: 0; font-size: 20px; }
.verifica-ripasso-elenco { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.verifica-ripasso-elenco > li + li { border-top: 1px solid var(--riga); }
.verifica-ripasso-lezione {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--s2) 0;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.verifica-ripasso-lezione:hover { text-decoration-thickness: 2px; }

.v-guscio[data-schermo="telefono"] .verifica-risultato .v-banda { padding: var(--s5) var(--s4); }
.v-guscio[data-schermo="telefono"] .verifica-punteggio { font-size: 44px; }
.v-guscio[data-schermo="telefono"] .verifica-giudizio { font-size: 24px; }

/* ── La conversazione con il tutor ────────────────────────────────────────────────────────────
   js/componenti/conversazione.js, nella vista Tutor (al centro) e nel pannello destro della lezione (`.conv-compatta`). In testa la scena e
   l'obiettivo con «Ricomincia»; i fumetti della base (il tutor a sinistra, tu a destra, con il nome sopra); la banda degli stati del tutor
   (--avviso o --errore, con l'icona: il colore non è mai l'unico segnale) sopra il campo; in fondo il campo, il microfono e l'invio. */

.conv { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }

.conv-testa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-radius: var(--raggio-grande); background: var(--piastrella); }
.conv-testa-testi { display: flex; flex: 1 1 14rem; flex-direction: column; gap: var(--s2); min-width: 0; }
.conv-scena { color: var(--inchiostro-2); text-wrap: pretty; }
.conv-obiettivo { font-weight: 600; overflow-wrap: anywhere; }

.conv-turni { display: flex; flex-direction: column; gap: var(--s4); min-height: 3rem; }
.conv-turno { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.conv-turno-tutor { align-items: flex-start; }
.conv-turno-mio { align-items: flex-end; }
.conv-turno .v-fumetto-testo { overflow-wrap: anywhere; }
/* Il ▶ resta accanto alla risposta anche quando è lunga (la base lo manderebbe sotto), come nel dialogo della lezione. */
.conv-turno .v-fumetto-nuvola { flex-wrap: nowrap; }
.conv-turno .v-fumetto-corpo { min-width: 0; }
.conv-nome { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.conv-in-attesa { opacity: 0.6; }
.conv-perche { margin-top: var(--s1); color: var(--inchiostro-2); }

/* «Il tutor sta scrivendo…» */
.conv-attesa { display: inline-flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 15px; }
.conv-attesa .v-rotella { width: 18px; height: 18px; }

/* Prima del primo uso (il pannello della lezione): una frase e «Comincia la conversazione». */
.conv-inizio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); color: var(--inchiostro-2); }

.conv-contatore { color: var(--inchiostro-2); font-size: 14px; font-weight: 700; text-align: center; }

/* La fine: obiettivo raggiunto o battute finite, e i pulsanti per andare avanti. */
.conv-fine { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--raggio-grande); background: var(--giallo-tenue); color: var(--inchiostro); text-align: center; }
.conv-obiettivo-raggiunto { font-family: var(--titoli); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.conv-esaurita { font-weight: 600; }
.conv-fine-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* La banda degli stati del tutor, sopra il campo. */
.conv-stato { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--avviso); border-radius: var(--raggio-grande); background: var(--avviso-chiaro); color: var(--inchiostro); }
.conv-stato[data-tipo="errore"] { border-color: var(--errore); background: var(--errore-chiaro); }
.conv-stato-icona { display: inline-flex; flex: none; color: var(--avviso); }
.conv-stato[data-tipo="errore"] .conv-stato-icona { color: var(--errore); }
.conv-stato-icona svg { width: 22px; height: 22px; }
.conv-stato-testo { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.conv-stato-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Il campo: l'area di testo, il microfono (72px) e l'invio (56px) sulla stessa riga; sotto la didascalia del microfono e il conto. */
.conv-compositore { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--riga); }
.conv-riga { display: flex; align-items: flex-end; gap: var(--s3); }

.conv-area {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 72px;
  padding: var(--s3);
  border: 1.5px solid var(--riga-2);
  border-radius: var(--raggio-grande);
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 17px;
  line-height: 1.4;
  resize: vertical;
}

.conv-area::placeholder { color: var(--inchiostro-2); opacity: 1; }
.conv-area:disabled { opacity: 0.5; cursor: default; }
.conv-invia.v-pulsante { flex: none; width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; }
.conv-invia svg { width: 24px; height: 24px; }

.conv-sotto { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.conv-didascalia { min-width: 0; color: var(--inchiostro-2); font-size: 15px; }
.conv-conto { flex: none; color: var(--inchiostro-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.conv-conto-troppo { color: var(--errore); font-weight: 700; }
.conv-troppo { color: var(--errore); font-size: 15px; font-weight: 600; }

/* Nel pannello destro della lezione (380px): meno aria. */
.conv-compatta { gap: var(--s3); }
.conv-titolo { font-size: 18px; }
.conv-titolo:focus { outline: none; } /* ci va il fuoco quando il campo resta spento: è un titolo, non un comando */
.conv-compatta .conv-testa { padding: var(--s3); }
.conv-compatta .conv-obiettivo { font-size: 15px; }
.conv-compatta .conv-turni { gap: var(--s3); }
.conv-compatta .conv-compositore { padding-top: var(--s3); }

.v-guscio[data-schermo="telefono"] .conv-testa { padding: var(--s3); }

/* ── La vista Tutor ───────────────────────────────────────────────────────────────────────────
   js/viste/tutor.js. Nel lato l'elenco delle scene per livello (come l'indice del corso: righe toccabili, la scena aperta su --giallo-tenue
   con il contorno); lo stato della scena è una pillola sotto il titolo (nuova su piastrella, in corso gialla, obiettivo raggiunto verde con
   la scritta --ok). Il centro è una colonna da 720px. Sul telefono il lato non c'è: senza scena l'elenco sta nel centro
   (`.tutor-solo-telefono`); da tablet in su al suo posto c'è lo stato vuoto (`.tutor-non-telefono`), con «Apri l'elenco» solo sul tablet.
   Il ← per tornare all'elenco serve dove l'elenco non si vede: sul PC non c'è. Nel pannello l'obiettivo e le frasi utili con ▶. */

.tutor { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 720px; margin: 0 auto; }
.tutor-con-scena { gap: var(--s4); }
.tutor-titolo { overflow-wrap: anywhere; text-wrap: balance; }
.tutor-intro { color: var(--inchiostro-2); text-wrap: pretty; }
.tutor-indietro.v-pulsante { align-self: flex-start; margin-left: calc(var(--s2) * -1); }

.tutor-solo-telefono { display: none; }
.v-guscio[data-schermo="telefono"] .tutor-solo-telefono { display: block; }
.v-guscio[data-schermo="telefono"] .tutor-non-telefono { display: none; }
.tutor-solo-tablet.v-pulsante { display: none; }
.v-guscio[data-schermo="tablet"] .tutor-solo-tablet.v-pulsante { display: inline-flex; }
.v-guscio[data-schermo="pc"] .tutor-indietro { display: none; }

.tutor-elenco { display: flex; flex-direction: column; gap: var(--s5); }
.tutor-oggi { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 15px; }
.tutor-oggi strong { color: var(--inchiostro); }
.tutor-livello { display: flex; flex-direction: column; gap: var(--s2); }
.tutor-livello-nome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: 0 var(--s2); font-size: 18px; overflow-wrap: anywhere; }
.tutor-scene { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: 0; list-style: none; }

.tutor-scena {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s3);
  border-radius: var(--raggio);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.tutor-scena:hover { background: var(--piastrella); }
.tutor-scena:focus-visible { outline-offset: -3px; }
.tutor-scena[aria-current="page"],
.tutor-scena[aria-current="page"]:hover { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); }
.tutor-scena-testi { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tutor-scena-titolo { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }

.tutor-scena-obiettivo {
  display: -webkit-box;
  overflow: hidden;
  color: var(--inchiostro-2);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.tutor-scena[aria-current="page"] .tutor-scena-obiettivo { color: var(--inchiostro); }
.tutor-scena-stato { margin-top: var(--s1); padding: 1px var(--s2); border-radius: 999px; background: var(--piastrella); color: var(--inchiostro-2); font-size: 13px; font-weight: 700; line-height: 1.5; }
.tutor-scena[data-stato="in-corso"] .tutor-scena-stato { background: var(--giallo); color: var(--su-giallo); }
.tutor-scena[data-stato="obiettivo"] .tutor-scena-stato { background: var(--ok-chiaro); color: var(--ok); }

.tutor-chiuso .tutor-livello-nome { color: var(--inchiostro-2); }
.tutor-lucchetto { display: inline-flex; align-items: center; }
.tutor-lucchetto svg { width: 20px; height: 20px; }
.tutor-preparazione { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 15px; }

/* Il pannello: l'obiettivo e le frasi utili. */
.tutor-pannello { display: flex; flex-direction: column; gap: var(--s5); }
.tutor-pannello-parte { display: flex; flex-direction: column; gap: var(--s3); }
.tutor-pannello-parte h2 { font-size: 20px; }
.tutor-pannello-obiettivo { font-weight: 600; overflow-wrap: anywhere; }
.tutor-frasi-zona { min-height: 48px; }
.tutor-frasi { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.tutor-frase { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--riga); border-radius: var(--raggio-grande); background: var(--superficie); }
.tutor-frase-testi { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.tutor-frase-en { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.tutor-frase-it { color: var(--inchiostro-2); font-size: 15px; }

/* ── Ripasso (js/viste/ripasso.js) ────────────────────────────────────────────────────────────
   Come gli esercizi della lezione: una colonna da 720px con l'h1, «Frase 3 di 12» con la barra, la carta in una scheda (l'esercizio
   «ascolta» di componenti/esercizio.js, o «Dillo in inglese» con il microfono di voce.js) e sotto il verdetto o «Avanti». Il pannello
   destro ha «Ne restano N» con la barra e il riquadro fisso «Come funziona». «Ne restano N» c'è anche nel centro, accanto a «Frase 3 di
   12», ma solo dove il pannello non si vede: sul PC con il pannello aperto si legge una volta sola. La fine è una banda gialla con l'onda. */

.ripasso { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 720px; margin: 0 auto; }
.ripasso-titolo:focus { outline: none; }
.ripasso-testata { display: flex; flex-direction: column; gap: var(--s2); }
.ripasso-testata-riga { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.ripasso-testata .occhiello { color: var(--inchiostro-2); }
.ripasso-conto { color: var(--inchiostro-2); font-size: 15px; font-weight: 700; }
.v-guscio[data-schermo="pc"]:not([data-pannello-chiuso-pc]) .ripasso-conto { display: none; }
.ripasso-zona { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.ripasso-carta { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.ripasso-corpo { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.ripasso-da-dire { overflow-wrap: anywhere; }

/* L'inglese che si scopre: con la risposta giusta («ascolta») o con «Mostra» e il microfono («di»). */
.ripasso-svelata,
.ripasso-inglese { font-size: 22px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-wrap: pretty; }
.ripasso-svelata { padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--ok-chiaro); color: var(--ok); }
.ripasso-frase { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border: 1.5px dashed var(--riga-2); border-radius: var(--raggio-grande); }
.ripasso-frase .occhiello { color: var(--inchiostro-2); }
.ripasso-suoni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.ripasso-domanda { font-weight: 700; }
.ripasso-coppia { display: flex; flex-wrap: wrap; gap: var(--s3); }
.ripasso-voce { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.ripasso-mostra { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s1) var(--s3); }
.ripasso-aiuto { color: var(--inchiostro-2); font-size: 15px; }
.ripasso-nota { color: var(--inchiostro-2); text-align: center; }

/* «Avanti» in fondo a destra, come il pulsante principale della lezione; sul telefono a tutta larghezza (qui non è fisso: sotto c'è la
   barra di navigazione). */
.ripasso-piede { display: flex; justify-content: flex-end; }
.ripasso-avanti { min-width: 10rem; }
.v-guscio[data-schermo="telefono"] .ripasso-piede .v-pulsante { flex: 1 1 100%; min-height: 56px; font-size: 18px; }
/* Quando «Avanti» si accende la vista lo porta in vista (scrollIntoView). Sul telefono lo spazio della barra in basso lo lascia già la
   pagina (scroll-padding-bottom con --altezza-barra, in vetrina360.css): qui solo un po' d'aria, per non contare la barra due volte. */
.v-guscio[data-schermo="telefono"] .ripasso-avanti { scroll-margin-bottom: var(--s3); }

/* Il pannello destro. */
.ripasso-pannello { display: flex; flex-direction: column; gap: var(--s5); }
.ripasso-quanto { display: flex; flex-direction: column; gap: var(--s3); }
.ripasso-restano { font-size: 28px; font-variant-numeric: tabular-nums; }
.ripasso-pannello-titolo { font-size: 20px; }
.ripasso-come { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--raggio-grande); background: var(--piastrella); }
.ripasso-come-elenco { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.ripasso-come-elenco li { display: flex; align-items: flex-start; gap: var(--s2); }
.ripasso-come-elenco svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.ripasso-come-elenco li[data-esito="giusta"] svg { color: var(--ok); }
.ripasso-come-elenco li[data-esito="sbagliata"] svg { color: var(--errore); }

/* Il salvataggio, l'errore e la fine. Sulla banda gialla tutto è --su-giallo. */
.ripasso-salvo { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s6) var(--s4); color: var(--inchiostro-2); }
.ripasso-errore { display: flex; flex-direction: column; gap: var(--s4); }
.ripasso-errore-testo { display: flex; flex-direction: column; gap: var(--s2); }
.ripasso-fine-titolo { font-size: 28px; text-wrap: balance; }
.ripasso-fine-titolo:focus { outline: none; }
.ripasso-fine { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); }
.ripasso-riepilogo { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.ripasso-riepilogo li { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4); border: 2px solid var(--su-giallo); border-radius: var(--raggio-grande); }
.ripasso-riepilogo span { font-size: 15px; font-weight: 600; }
.ripasso-riepilogo strong { font-family: var(--titoli); font-size: 22px; font-weight: 800; }
.ripasso-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ── Test d'ingresso (js/viste/test.js) ───────────────────────────────────────────────────────
   A schermo concentrato: una colonna da 720px con l'h1, «Livello 2 di 4» con la barra e la domanda in una scheda (il brano da leggere, o
   il pulsante audio grande con il lento; il testo; le opzioni di vetrina360; l'esito; «Non lo so»). Il risultato è la banda gialla con
   l'onda: il livello consigliato, la frase, «Comincia da qui» e «Parto dall'inizio». */

.test { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 720px; margin: 0 auto; }
.test-titolo:focus { outline: none; }
.test-zona { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.test-testata { display: flex; flex-direction: column; gap: var(--s2); }
.test-testata .occhiello { color: var(--inchiostro-2); }
.test-domanda { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.test-domanda-testo { font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; text-wrap: pretty; }
.test-domanda-testo:focus { outline: none; } /* il fuoco ci va da sé a ogni domanda, non per un Tab */

.test-brano {
  margin: 0;
  padding: var(--s4);
  border-left: 4px solid var(--giallo);
  border-radius: var(--raggio);
  background: var(--piastrella);
  font-size: 19px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* L'audio grande: il ▶ da 72px (la misura del microfono), il lento accanto. */
.test-ascolto { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s2) 0; }
.test-ascolto .pulsante-audio:not(.lento) { width: 72px; height: 72px; box-shadow: 0 5px 0 var(--inchiostro); }
.test-ascolto .pulsante-audio:not(.lento) svg { width: 32px; height: 32px; }
.test-ascolto .pulsante-audio:not(.lento):active { box-shadow: 0 2px 0 var(--inchiostro); transform: translateY(3px); }
.test-ascolto .pulsante-audio:not(.lento):disabled { box-shadow: none; transform: none; }

.test-opzioni { display: flex; flex-direction: column; gap: var(--s3); }
.test-opzioni .v-opzione:disabled { cursor: default; }
.test-esito { min-height: 1.5em; font-weight: 700; text-align: center; }
.test-esito:focus { outline: none; } /* il fuoco ci va da sé durante l'esito, non per un Tab */
.test-esito[data-esito="giusta"] { color: var(--ok); }
.test-esito[data-esito="sbagliata"] { color: var(--errore); }
.test-non-lo-so { display: flex; justify-content: center; }

.test-risultato { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s6) var(--s5); }
.test-risultato-titolo { font-size: 32px; overflow-wrap: anywhere; text-wrap: balance; }
.test-risultato-titolo:focus { outline: none; }
.test-risultato-frase { max-width: 56ch; text-wrap: pretty; }
.test-risultato-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }

/* ── Pannello amministratore (js/viste/admin.js e js/viste/admin/*.js) ────────────────────────
   Sul PC le schede sono un elenco verticale nel lato (al posto dell'indice), con quella aperta su --giallo-tenue e il contorno, come la
   lezione aperta dell'indice. Sul tablet il lato è il pannello «Indice»: le schede stanno anche in alto nel contenuto, come sul telefono,
   dove scorrono in orizzontale (`.v-admin-schede-alto`, nascosto sul PC). Il contenuto usa tutta la larghezza (fino a 1080px): la tabella
   delle persone ne ha bisogno, e sul telefono diventa un elenco di schede (vetrina360.css). I riquadri del tutor stanno in una griglia
   che fa due colonne dove c'è posto. */

.v-admin { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.v-admin-testata { display: flex; flex-direction: column; gap: var(--s1); }
.v-admin-testata .occhiello { color: var(--inchiostro-2); }
.v-admin-testata h1:focus { outline: none; } /* il fuoco ci va da sé a ogni cambio di scheda, non per un Tab */
.v-admin-pannello { min-width: 0; }

.v-admin-schede-alto { display: none; min-width: 0; }
.v-guscio:not([data-schermo="pc"]) .v-admin-schede-alto { display: block; }

.v-admin-lato { display: flex; flex-direction: column; gap: var(--s3); }
.v-admin-lato-titolo { padding: 0 var(--s2); color: var(--inchiostro-2); }
.v-admin-lato .v-schede { flex-direction: column; gap: var(--s1); overflow: visible; border-bottom: 0; }
.v-admin-lato .v-tab { min-height: 48px; padding: 0 var(--s3); border-bottom: 0; border-radius: var(--raggio); color: var(--inchiostro); white-space: normal; }
.v-admin-lato .v-tab:hover { background: var(--piastrella); }
.v-admin-lato .v-tab:focus-visible { outline-offset: -3px; }
.v-admin-lato .v-tab[aria-current="page"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); }

/* I pezzi comuni: riquadri in colonna, aiuti, note, esiti, l'elenco «etichetta … valore», le pastiglie. */
.v-admin-riquadro { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-admin-testata-riquadro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); }
.v-admin-aiuto,
.v-admin-nota { color: var(--inchiostro-2); font-size: 15px; text-wrap: pretty; }
.v-admin-esito:empty { display: none; }
.v-admin-errore { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.v-admin-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.v-admin-numero { font-family: var(--titoli); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

.v-admin-dati { display: flex; flex-direction: column; margin: 0; }
.v-admin-dati > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--riga); }
.v-admin-dati > div:last-child { border-bottom: 0; }
.v-admin-dati dt { color: var(--inchiostro-2); font-weight: 600; }
.v-admin-dati dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.v-admin-etichetta {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s2);
  border: 1px solid currentcolor;
  border-radius: 999px;
  background: var(--piastrella);
  color: var(--inchiostro);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.v-admin-etichetta[data-tipo="admin"] { border-color: var(--inchiostro); background: var(--giallo-tenue); }
.v-admin-etichetta[data-tipo="tu"],
.v-admin-etichetta[data-tipo="spenta"] { border-color: var(--riga); }
.v-admin-etichetta[data-tipo="bloccata"] { background: var(--errore-chiaro); color: var(--errore); }
.v-admin-etichetta[data-tipo="ok"] { background: var(--ok-chiaro); color: var(--ok); }
.v-admin-etichetta[data-tipo="attesa"] { background: var(--avviso-chiaro); color: var(--avviso); }

/* Persone: la password provvisoria (in rilievo, sopra la ricerca), la ricerca con il conto, la tabella. */
.v-admin-persone { display: flex; flex-direction: column; gap: var(--s4); }
.v-admin-zona-password:empty { display: none; }
.v-admin-zona-tutor:empty { display: none; }
/* Il riquadro del modello e del tetto del tutor di una persona: si apre sopra la ricerca e prende il fuoco. */
.v-admin-tutor-persona { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.v-admin-tutor-persona form { display: flex; flex-direction: column; gap: var(--s4); width: 100%; max-width: 40rem; }
.v-admin-password { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.v-admin-password-riga { display: flex; flex-wrap: wrap; gap: var(--s2); width: 100%; }
.v-admin-password-valore {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s3);
  border: 1.5px solid var(--riga-2);
  border-radius: var(--raggio);
  background: var(--pagina);
  color: var(--inchiostro);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 20px;
  letter-spacing: 0.08em;
}
.v-admin-ricerca { display: flex; flex-direction: column; gap: var(--s2); max-width: 28rem; }
.v-admin-conto { color: var(--inchiostro-2); font-size: 15px; }
.v-admin-elenco { min-width: 0; }
.v-admin-persone .v-tabella td { font-size: 15px; }
.v-admin-nome { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); overflow-wrap: anywhere; }
.v-admin-corso { display: inline-flex; flex-direction: column; }
.v-admin-sotto { color: var(--inchiostro-2); font-size: 14px; }
.v-admin-azioni.v-pulsante { white-space: nowrap; }
/* Sul tablet la tabella ha poco spazio: il pulsante resta con i tre puntini (il nome «Azioni su …» lo dice già `aria-label`). */
.v-guscio[data-schermo="tablet"] .v-admin-azioni .v-pulsante-etichetta { display: none; }
.v-guscio[data-schermo="tablet"] .v-admin-azioni.v-pulsante { width: 48px; padding: 0; }

@media (max-width: 719px) {
  .v-admin-corso { align-items: flex-end; }
  .v-admin-persone .v-tabella td:last-child { justify-content: flex-end; padding-top: var(--s3); }
  .v-admin-persone .v-tabella td:last-child::before { content: none; } /* «Azioni» lo dice già il pulsante */
}

/* Tutor AI: la chiave sopra, poi i tre riquadri in griglia (due colonne dove ci stanno), il «Salva» in fondo. */
.v-admin-tutor,
.v-admin-modulo,
.v-admin-voce,
.v-admin-consumi,
.v-admin-consumi-zona,
.v-admin-contenuti { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-admin-modulo-chiave,
.v-admin-modulo-voce { min-width: 0; }
.v-admin-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s4); align-items: start; }
.v-admin-colonna { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-admin-chiave-attuale { overflow-wrap: anywhere; }
.v-admin-rifiuto:empty { display: none; }
.v-admin-azioni-riga { display: flex; flex-wrap: wrap; gap: var(--s3); }
.v-admin-salva { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.v-admin-spesa { display: flex; flex-direction: column; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--riga); }
.v-admin-spesa-titolo { font-weight: 700; }
.v-admin-interruttore { display: flex; flex-direction: column; gap: var(--s1); }
.v-admin-interruttore + .v-admin-interruttore { padding-top: var(--s3); border-top: 1px solid var(--riga); }
.v-admin-prezzi { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; margin: 0; padding: var(--s4) 0 0; border: 0; border-top: 1px solid var(--riga); }
.v-admin-prezzi > legend { padding: 0; font-weight: 700; }
.v-admin-prezzo { display: flex; flex-direction: column; gap: var(--s2); }
.v-admin-prezzo h3 { font-size: 17px; }
.v-admin-coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }

/* Le scelte con due righe (modello, modo della voce): una sotto l'altra, la pastiglia diventa un riquadro con il titolo e l'aiuto. */
.v-admin-scelte .v-gruppo-scelte { flex-direction: column; }
.v-admin-scelte .v-scelta { display: flex; }
.v-admin-scelte .v-scelta-testo { flex: 1 1 auto; align-items: flex-start; min-height: 56px; padding: var(--s3) var(--s4); border-radius: var(--raggio-grande); }
.v-admin-scelte .v-scelta-testo::before { margin-top: 3px; }
.v-admin-scelta-testi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-admin-scelta-titolo { font-weight: 700; }
.v-admin-scelta-aiuto { color: var(--inchiostro-2); font-size: 15px; font-weight: 400; }
/* Nella scelta fatta lo sfondo è --giallo-tenue, e su quello --inchiostro-2 in scuro fa 3,66:1 (coppia vietata, vetrina360/LEGGIMI.md). */
.v-admin-scelte .v-scelta > input:checked + .v-scelta-testo .v-admin-scelta-aiuto { color: var(--inchiostro); }

/* Voce: lo stato del servizio. Consumi: la tendina del mese, stretta. Contenuti: i file non validi con i loro problemi. */
.v-admin-stato-corpo { display: flex; flex-direction: column; gap: var(--s3); }
.v-admin-mese { max-width: 20rem; }
.v-admin-scartati { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.v-admin-scartati > li { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4); border-left: 4px solid var(--errore); border-radius: var(--raggio); background: var(--errore-chiaro); }
.v-admin-problemi { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding-left: 20px; }