/* Stile di Python Facile: si appoggia alla base /vetrina360/vetrina360.css e prende da lì i token (colori, spazi, raggi, caratteri), senza
   scrivere nessun colore a mano. Qui stanno solo le regole del corso: l'indice del corso (js/indice.js), le schermate di stato del router
   (js/app.js), le pagine pubbliche (accesso, privacy, licenze), il corso, i percorsi, il test d'ingresso e la domanda a tocchi
   (js/viste/corso.js, percorsi.js, test.js, js/componenti/domanda.js), il profilo, la lezione e le sfide, il tutor e il ripasso e il
   pannello amministratore (js/viste/admin.js). */

/* ── 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 blocco (un livello delle basi o un percorso) è il suo nome, l'avanzamento «fatte/totale» in una pillola (o il lucchetto,
   se è chiuso o 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 {
  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 { background: var(--piastrella); }
.v-indice-lezione: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; }

/* 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 licenze (js/viste/privacy.js e js/viste/licenze.js) ────────────────────────────
   Una colonna di lettura da 720px: il titolo con l'introduzione, poi le sezioni (titolo, testo, elenco) e «Indietro». Le due pagine
   hanno la stessa forma. Le licenze in più hanno la tabella dei pacchetti (la base: sul telefono diventa un elenco di schede), i testi
   lunghi in riquadri che si aprono e le note in piccolo. */

.v-privacy,
.v-licenze { display: flex; flex-direction: column; gap: var(--s6); width: 100%; max-width: 720px; margin: 0 auto; }
.v-privacy-testata,
.v-licenze-testata { display: flex; flex-direction: column; gap: var(--s3); }
.v-privacy-intro,
.v-licenze-intro { margin: 0; color: var(--inchiostro-2); }
.v-privacy-sezione,
.v-licenze-sezione { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-privacy-sezione p,
.v-licenze-sezione p { margin: 0; }
.v-privacy-elenco,
.v-licenze-elenco { display: grid; gap: var(--s2); margin: 0; padding-left: 22px; }
.v-privacy .v-pulsante,
.v-licenze .v-pulsante { align-self: flex-start; }

.v-licenze-nota { color: var(--inchiostro-2); font-size: 15px; }
.v-licenze-voce { display: flex; flex-direction: column; gap: var(--s2); }

/* Un testo di licenza lungo: il riquadro si apre con tutta la riga del titolo (alta almeno 48px) e il testo va a capo dentro la colonna,
   senza far scorrere la pagina di lato. */
.v-licenza > summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v-licenza[open] > summary { margin-bottom: var(--s2); }
.v-licenza-testo { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--piastrella); font: 14px/1.5 var(--codice-carattere); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Un percorso da scegliere (indice.js) non è chiuso: niente lucchetto, ma l'etichetta «Da scegliere» (pillola gialla con il contorno), la
   frase e il collegamento a #/percorsi, alto almeno 48px. */
.v-indice-etichetta { flex: none; padding: 2px var(--s3); border-radius: 999px; background: var(--giallo-tenue); box-shadow: inset 0 0 0 1.5px var(--inchiostro); color: var(--inchiostro); font-size: 14px; font-weight: 700; line-height: 1.4; }
.v-indice-scelta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); margin-top: var(--s2); }
.v-indice-scelta .v-indice-vuoto { margin-top: 0; }
.v-indice-vai { display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px; margin: 0 var(--s2); color: var(--inchiostro); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; }
.v-indice-vai svg { flex: none; width: 18px; height: 18px; }

/* ── 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 il codice,
   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; }
.v-profilo-obiettivo { margin: 0; font-weight: 600; }

/* Il testo sotto una scelta: la spiegazione, nel grigio del testo secondario. */
.v-profilo-aiuto { margin: 0; color: var(--inchiostro-2); font-size: 15px; }

/* Un gruppo dentro un riquadro (il test da rifare, il Laboratorio, 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); }
.v-profilo-sezione > p { margin: 0; }

/* 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 > p { margin: 0; }

/* ── Corso, la home (js/viste/corso.js) ───────────────────────────────────────────────────────
   Una colonna: il titolo del giorno e il collegamento al Laboratorio, la scheda «La tua prossima lezione» in rilievo (o la banda del
   test, o la scelta del percorso, o il saluto), le due schede (serie e obiettivo, ripasso), le lezioni del livello in griglia e i
   percorsi. Il riquadro del numero e la banda sono gialli: lì tutto è --su-giallo. Sul PC le lezioni sono quattro per riga; sul tablet
   tre; sul telefono due. Sul telefono l'indice è un blocco in fondo (`lato` lì non si vede). */

.v-home { display: flex; flex-direction: column; gap: var(--s5); }
.v-corso-titolo { text-wrap: balance; }
.v-corso-laboratorio { align-self: flex-start; margin-top: calc(-1 * var(--s3)); }

/* Il numero grande: di una lezione, dei giorni di fila, delle carte 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; }

/* «La tua prossima lezione»: il titolo della scheda sopra, poi a sinistra il riquadro giallo (numero e titolo) e a destra dove sta la
   lezione e il pulsante. */
.v-corso-prossima { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: stretch; }
.v-corso-prossima-titolo,
.v-corso-scheda-titolo { margin: 0; font-family: var(--testo); color: var(--inchiostro-2); }
.v-corso-prossima-titolo { grid-column: 1 / -1; }

.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-lezione-nome { font-family: var(--titoli); font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; overflow-wrap: anywhere; }

.v-corso-dettagli { display: flex; flex-direction: column; justify-content: center; gap: var(--s4); min-width: 0; }
.v-corso-dettagli .v-pulsante { align-self: flex-start; }
.v-corso-dove { font-size: 19px; 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); }

/* La banda «Vuoi andare più a fondo?» (il livello 3): titolo, conto e pulsante, uno sotto l'altro. */
.v-corso-fondo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s5); }

/* La scelta del percorso e il corso finito. */
.v-corso-scelta,
.v-corso-finito { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

.v-corso-consiglio { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--inchiostro-2); font-weight: 600; }
.v-corso-consiglio svg { flex: none; width: 20px; height: 20px; }

/* Le due schede. */
.v-corso-schede { display: grid; grid-template-columns: repeat(2, 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-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; }

/* «Obiettivo di oggi: fatto» ha la spunta in un tondo scuro; «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 (e quelle di un percorso): 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)); }

/* I percorsi, uno per riga: il nome, lo stato (con il lucchetto se è chiuso) e una frase. Quello da scegliere ha il fondo giallo tenue e
   nessun lucchetto; quello chiuso ha il lucchetto e dice perché. */
.v-corso-percorsi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); }
.v-corso-percorsi-elenco { display: flex; flex-direction: column; gap: var(--s3); width: 100%; margin: 0; padding: 0; list-style: none; }
.v-corso-percorso { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s4); border: 1px solid var(--riga); border-radius: var(--raggio-grande); background: var(--superficie); }
.v-corso-percorso[data-stato="in-corso"] { border-color: var(--inchiostro); box-shadow: 0 0 0 1px var(--inchiostro); }
.v-corso-percorso[data-stato="scegli"] { background: var(--giallo-tenue); }
.v-corso-percorso-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.v-corso-percorso-testata h3 { min-width: 0; overflow-wrap: anywhere; }
.v-corso-percorso-stato { display: inline-flex; flex: none; align-items: center; gap: var(--s1); padding: 2px var(--s3); border-radius: 999px; background: var(--piastrella); font-size: 14px; font-weight: 700; line-height: 1.4; }
.v-corso-percorso[data-stato="scegli"] .v-corso-percorso-stato { background: var(--superficie); box-shadow: inset 0 0 0 1.5px var(--inchiostro); }
.v-corso-percorso-stato svg { width: 16px; height: 16px; }
/* Sul giallo tenue il testo resta --inchiostro (con --inchiostro-2 in scuro il contrasto non basta). */
.v-corso-percorso[data-stato="scegli"] .v-corso-nota { color: var(--inchiostro); }
.v-corso-percorso-avanzamento { display: flex; flex-direction: column; gap: var(--s2); }

/* «Tutte le lezioni»: 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ì l'indice è nel guscio, e vedere lo stesso elenco due volte sarebbe rumore. */
.v-corso-indice-telefono { display: none; flex-direction: column; gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-indice-telefono { display: flex; }

/* Il telefono: la scheda «prossima lezione» in colonna con il riquadro in orizzontale (numero e titolo di fianco), le due schede
   affiancate, le lezioni due per riga. */
.v-guscio[data-schermo="telefono"] .v-home { gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-prossima { 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-lezione-nome { flex: 1 1 8rem; }
.v-guscio[data-schermo="telefono"] .v-corso-test,
.v-guscio[data-schermo="telefono"] .v-corso-fondo { padding: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-corso-schede { 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-ripasso .v-pulsante { padding: 0 var(--s3); }
.v-guscio[data-schermo="telefono"] .v-corso-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Percorsi (js/viste/percorsi.js) ──────────────────────────────────────────────────────────
   Una colonna di lettura da 720px: il titolo, le fasce informative e una scheda per percorso. Dentro la scheda il nome con lo stato, la
   descrizione, il progetto finale, la frase (chiuso: il lucchetto e perché; da scegliere: si può scegliere adesso) e, se è aperto, le
   lezioni in griglia (a due colonne, come il telefono: la colonna è stretta). */

.v-percorsi { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 720px; margin: 0 auto; }
.v-percorsi-intro { color: var(--inchiostro-2); }

.v-percorso { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; }
.v-percorso > * { max-width: 100%; }
.v-percorso-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); width: 100%; }
.v-percorso-testata h2 { min-width: 0; overflow-wrap: anywhere; }
.v-percorso-stato { display: inline-flex; align-items: center; gap: var(--s2); flex: none; }
.v-percorso-stato > svg { width: 20px; height: 20px; color: var(--inchiostro-2); }
.v-percorso-motivo { font-weight: 600; }
.v-percorso-motivo[data-motivo="scelta"] { padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--giallo-tenue); color: var(--inchiostro); }
.v-percorso-avanzamento { display: flex; flex-direction: column; gap: var(--s2); width: 100%; }
.v-percorso .v-corso-griglia { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-guscio[data-schermo="telefono"] .v-percorsi { gap: var(--s4); }
/* Sul telefono la scheda ha già i suoi margini: due lezioni per riga sarebbero larghe 140px e spezzerebbero le parole. Una per riga, con il
   numero a sinistra e le stelle a destra. */
.v-guscio[data-schermo="telefono"] .v-percorso .v-corso-griglia { grid-template-columns: minmax(0, 1fr); }
.v-guscio[data-schermo="telefono"] .v-percorso .v-corso-lezione { flex-direction: row; align-items: center; min-height: 64px; }
.v-guscio[data-schermo="telefono"] .v-percorso .v-corso-lezione .v-stelle { margin: 0 0 0 auto; }
.v-guscio[data-schermo="telefono"] .v-percorso .v-corso-lezione-titolo { flex: 1 1 auto; }

/* ── Test d'ingresso (js/viste/test.js) ───────────────────────────────────────────────────────
   A schermo concentrato: una colonna da 720px con l'h1, «Fascia 2 di 3» con la barra e la domanda in una scheda (il testo, il codice,
   le opzioni di vetrina360, l'esito, la spiegazione, «Non lo so» e «Avanti»). Il risultato è la banda gialla con l'onda: il punto di
   partenza consigliato, la frase e i pulsanti. */

.test { display: flex; flex-direction: column; gap: var(--s5); width: 100%; max-width: 720px; margin: 0 auto; }
.test-titolo { overflow-wrap: anywhere; text-wrap: balance; }
.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:focus { outline: none; } /* il fuoco ci va da sé a ogni domanda, non per un Tab */
/* «Avanti» (messo dalla vista sotto la domanda): al centro sul PC, a tutta larghezza sul telefono. */
.test-domanda > .v-pulsante { align-self: center; min-width: 12rem; }
.v-guscio[data-schermo="telefono"] .test-domanda > .v-pulsante { align-self: stretch; }

.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); }

/* ── Una domanda a tocchi (js/componenti/domanda.js) ──────────────────────────────────────────
   Il testo (h2 o h3), l'eventuale codice, le opzioni (`.v-opzione` della base: alte almeno 56px, con il segno di giusto o sbagliato in
   fondo), l'esito, la spiegazione e i pulsanti. Le opzioni che sono codice (le uscite di «cosa stampa?», i pezzi di «completa») sono a
   spaziatura fissa e vanno a capo. Il colore è quello della base (`data-stato`). */

.domanda-scheda { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.testo-domanda { font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; text-wrap: pretty; }
.opzioni { display: flex; flex-direction: column; gap: var(--s3); }
.opzioni .v-opzione:disabled { cursor: default; }
.opzioni .v-opzione[data-stato="neutra"]:disabled:hover { background: var(--superficie); }
.opzioni .v-opzione[data-stato="giusta"]:disabled:hover { background: var(--ok-chiaro); }
.opzioni .v-opzione[data-stato="sbagliata"]:disabled:hover { background: var(--errore-chiaro); }
.v-opzione.codice-opzione { font: 17px/1.45 var(--codice-carattere); }
.codice-opzione > .testo-opzione { white-space: pre-wrap; overflow-wrap: anywhere; }

.esito { min-height: 1.5em; margin: 0; font-weight: 700; text-align: center; }
.domanda-scheda .spiegazione { padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--piastrella); overflow-wrap: anywhere; }
.domanda-scheda .v-pulsante { align-self: center; }

/* Il buco di «completa»: una riga da riempire; poi la parola scelta, verde o rossa. */
.buco { display: inline-block; min-width: 3.5em; padding: 0 var(--s2); border-bottom: 3px solid var(--inchiostro); text-align: center; }
.buco.giusta { border-color: var(--ok); color: var(--ok); }
.buco.sbagliata { border-color: var(--errore); color: var(--errore); }

/* Il codice da leggere (js/componenti/codice.js), nella forma che serve alle domande: una riga per riga, il numero, poi il codice, che va
   a capo invece di scorrere di lato. Le righe da toccare («trova l'errore») sono pulsanti alti almeno 48px. Il riquadro ha il fondo e i
   colori del codice (token --codice-*, più sotto in «Python nella pagina») e scorre dentro di sé se qualcosa non sta: la pagina no. */
.codice { min-width: 0; max-width: 100%; padding: var(--s2) 0; overflow: auto; border: 1px solid var(--riga-2); border-radius: var(--raggio-grande); background: var(--codice-fondo); color: var(--inchiostro); font: 15px/1.5 var(--codice-carattere); }
.codice.senza-numeri .codice-riga { padding-left: var(--s4); }
.codice-riga { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; margin: 0; padding: 1px var(--s3); border: 0; border-radius: 0; background: none; color: var(--inchiostro); font: inherit; text-align: left; }
.codice-numero { flex: none; min-width: 2ch; color: var(--inchiostro-2); text-align: right; user-select: none; }
.codice-testo { flex: 1 1 auto; min-width: 0; min-height: 1.5em; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
button.codice-riga { align-items: center; min-height: 48px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.codice-riga:not(:disabled):hover,
.codice-riga.aperta { background: var(--piastrella-2); }
button.codice-riga:focus-visible { outline-offset: -3px; }
button.codice-riga:disabled { cursor: default; }
.codice-riga > .segno { flex: none; display: inline-flex; }
.codice-riga > .segno svg { width: 20px; height: 20px; }
.codice-riga.giusta { box-shadow: inset 5px 0 0 var(--ok); }
.codice-riga.sbagliata { box-shadow: inset 5px 0 0 var(--errore); }
.codice-riga.giusta > .segno { color: var(--ok); }
.codice-riga.sbagliata > .segno { color: var(--errore); }
.codice-spiegazione { margin: 2px var(--s3) var(--s2); padding: var(--s3); border-left: 4px solid var(--giallo); border-radius: var(--raggio-piccolo); background: var(--superficie); overflow-wrap: anywhere; }
.codice .buco { min-width: 3ch; padding: 0 2px; }

.v-guscio[data-schermo="telefono"] .test { gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .test-risultato { padding: var(--s5) var(--s4); }
.v-guscio[data-schermo="telefono"] .test-risultato-titolo { font-size: 26px; }

/* ── Python nella pagina: colori del codice e dell'uscita ─────────────────────────────────────
   Il riquadro del codice (quello di sola lettura di js/componenti/codice.js, l'editor di js/editor/editor.js e il flusso dell'uscita di
   js/componenti/uscita.js) ha un solo fondo, --codice-fondo (la piastrella della base: chiara in chiaro, scura in scuro). I colori
   dell'evidenziazione e dei pezzi d'uscita sono token qui sotto, scritti per esteso (rgb) perché la base non ha né viola né azzurro né
   turchese: in corso.css niente esadecimali, e i colori scritti per esteso stanno solo in questi token. Ogni colore fa almeno 4,5:1 su
   --codice-fondo, in chiaro e in scuro: lo controlla test/viste-stile.test.js. Come nella base, i valori dello scuro sono scritti due
   volte (il sistema, la scelta a mano) e un test controlla che coincidano. Il colore, da solo, non dice niente: la risposta di input() è
   in grassetto con l'icona della matita, l'avviso in corsivo con il triangolo, il riquadro dell'errore ha l'icona e il bordo rosso. */

:root { --codice-carattere: ui-monospace, "Cascadia Code", Consolas, monospace; }

:root, [data-tema="chiaro"] {
  --codice-fondo: var(--piastrella);
  --codice-fondo-numeri: var(--piastrella-2);
  --codice-parola: rgb(111, 45, 168);
  --codice-stringa: rgb(22, 96, 50);
  --codice-numero: rgb(150, 70, 0);
  --codice-commento: rgb(88, 86, 80);
  --codice-funzione: rgb(24, 78, 150);
  --uscita-risposta: rgb(0, 92, 102);
  --uscita-avviso: rgb(122, 86, 0);
  /* La pagina di un grafico e quella di Flask sono bianche anche nel tema scuro (è il loro sfondo, non il nostro). */
  --uscita-carta: rgb(255, 255, 255);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --codice-fondo: var(--piastrella);
    --codice-fondo-numeri: var(--piastrella-2);
    --codice-parola: rgb(215, 170, 255);
    --codice-stringa: rgb(134, 214, 160);
    --codice-numero: rgb(255, 160, 80);
    --codice-commento: rgb(168, 161, 148);
    --codice-funzione: rgb(124, 190, 255);
    --uscita-risposta: rgb(94, 214, 224);
    --uscita-avviso: rgb(240, 200, 70);
    --uscita-carta: rgb(255, 255, 255);
  }
}

:root[data-tema="scuro"], [data-tema="scuro"] {
  --codice-fondo: var(--piastrella);
  --codice-fondo-numeri: var(--piastrella-2);
  --codice-parola: rgb(215, 170, 255);
  --codice-stringa: rgb(134, 214, 160);
  --codice-numero: rgb(255, 160, 80);
  --codice-commento: rgb(168, 161, 148);
  --codice-funzione: rgb(124, 190, 255);
  --uscita-risposta: rgb(94, 214, 224);
  --uscita-avviso: rgb(240, 200, 70);
  --uscita-carta: rgb(255, 255, 255);
}

/* I colori che l'evidenziatore (js/editor/evidenzia.js) dà ai pezzi del codice: nell'editor, nei riquadri di sola lettura e nelle opzioni
   delle domande. Niente grassetti né corsivi: nell'editor il testo colorato sta sotto la textarea e le lettere devono avere la stessa
   larghezza. */
.py-parola { color: var(--codice-parola); }
.py-testo { color: var(--codice-stringa); }
.py-numero { color: var(--codice-numero); }
.py-commento { color: var(--codice-commento); }
.py-funzione { color: var(--codice-funzione); }

/* ── L'editor (js/editor/editor.js) ───────────────────────────────────────────────────────────
   La textarea (trasparente, sopra) e il pre colorato (sotto) hanno le stesse misure riga per riga: stesso carattere, stessa altezza di
   riga, stesso margine interno. Il codice colorato e i numeri seguono lo scorrimento della textarea (transform dall'editor, che la CSP
   permette). Il codice non va a capo e scorre dentro il riquadro, in orizzontale e in verticale: la pagina no. Sul telefono (decide il
   guscio con data-schermo, mai la larghezza) il testo è da 16px, sotto i quali iOS ingrandisce la pagina al primo tocco, e sotto
   c'è la fila dei tasti rapidi. */

.editor { --editor-carattere: 15px; min-width: 0; max-width: 100%; overflow: hidden; border: 2px solid var(--riga-2); border-radius: var(--raggio-grande); background: var(--codice-fondo); color: var(--inchiostro); }
.editor.grande { --editor-carattere: 18px; }
.editor:focus-within { border-color: var(--inchiostro); outline: 3px solid var(--anello); outline-offset: 2px; }
.editor-corpo { display: flex; height: 360px; min-height: 160px; overflow: hidden; resize: vertical; }
.editor-numeri, .editor-colori, .editor-testo { font: var(--editor-carattere)/1.5 var(--codice-carattere); letter-spacing: 0; tab-size: 4; }
.editor-numeri { flex: none; overflow: hidden; padding: var(--s3) var(--s2) var(--s3) var(--s3); border-right: 1px solid var(--riga-2); background: var(--codice-fondo-numeri); color: var(--inchiostro-2); text-align: right; user-select: none; }
.editor-numeri-testo { min-width: 2ch; white-space: pre; }
.editor-area { position: relative; flex: 1 1 auto; min-width: 0; }
.editor-colori { position: absolute; inset: 0; margin: 0; padding: var(--s3); overflow: hidden; color: var(--inchiostro); white-space: pre; pointer-events: none; }
/* Un blocco, non un elemento in linea: il transform non vale sugli elementi in linea. `font: inherit` toglie lo 0.92em di `code`. */
.editor-colori-testo { display: block; font: inherit; }
.editor-testo {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--s3);
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--inchiostro);
  white-space: pre;
  resize: none;
}
.editor-testo:focus, .editor-testo:focus-visible { outline: none; }
/* Un testo troppo lungo per colorarlo: si vede quello della textarea. */
.editor.senza-colori .editor-testo { color: var(--inchiostro); -webkit-text-fill-color: currentColor; }
.editor.senza-colori .editor-colori { display: none; }
.editor-testo::selection { background: color-mix(in srgb, var(--inchiostro) 18%, transparent); }

/* I tasti rapidi: solo sul telefono, tutti in una riga che sta nello schermo. */
.tasti-rapidi { display: none; gap: var(--s1); padding: var(--s2); border-top: 1px solid var(--riga-2); background: var(--codice-fondo-numeri); }
.tasto-rapido {
  flex: 1 1 0;
  min-width: 26px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--riga-2);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font: 600 18px/1 var(--codice-carattere);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tasto-rapido:active { background: var(--piastrella-2); }
.tasto-rapido:last-child { flex-grow: 1.8; font-size: 15px; }

.v-guscio[data-schermo="telefono"] .editor { --editor-carattere: 16px; }
.v-guscio[data-schermo="telefono"] .editor.grande { --editor-carattere: 19px; }
.v-guscio[data-schermo="telefono"] .editor-corpo { height: 300px; }
.v-guscio[data-schermo="telefono"] .tasti-rapidi { display: flex; }

/* ── L'uscita di un programma (js/componenti/uscita.js) ───────────────────────────────────────
   Il flusso è un riquadro come quello del codice (stesso fondo, bordo pieno) che scorre dentro di sé; sotto, l'esito (l'errore spiegato,
   il tempo scaduto, il programma fermato). Ogni genere di pezzo si riconosce anche senza il colore: la domanda di input() ha l'icona
   del fumetto, la risposta quella della matita e il grassetto, l'avviso (stderr) il triangolo e il corsivo. L'errore, l'email e
   l'anteprima sono riquadri con bordo, icona e titolo. */

.uscita { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; max-width: 100%; }
.uscita-flusso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; max-height: 60vh; overflow: auto; padding: var(--s3) var(--s4); border: 2px solid var(--riga-2); border-radius: var(--raggio-grande); background: var(--codice-fondo); color: var(--inchiostro); }
.uscita-flusso:empty { display: none; }
.uscita-testo { margin: 0; color: var(--inchiostro); font: 15px/1.5 var(--codice-carattere); white-space: pre-wrap; overflow-wrap: anywhere; }
.pezzo-uscita { color: var(--inchiostro); }
.pezzo-domanda { color: var(--inchiostro); }
.pezzo-risposta { color: var(--uscita-risposta); font-weight: 700; }
.pezzo-avviso { color: var(--uscita-avviso); font-style: italic; }
.pezzo-icona { display: inline-block; width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.14em; font-style: normal; }
.pezzo-icona svg { display: block; width: 100%; height: 100%; }

.uscita-grafico { display: block; max-width: 100%; height: auto; border: 1px solid var(--riga-2); border-radius: var(--raggio); background: var(--uscita-carta); }
.uscita-figura { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); min-width: 0; margin: 0; }
.uscita-didascalia { color: var(--inchiostro-2); font-size: 14px; font-weight: 600; }

.uscita-scheda { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s3) var(--s4); border: 1px solid var(--riga-2); border-radius: var(--raggio); background: var(--superficie); color: var(--inchiostro); }
.uscita-scheda h3 { display: flex; align-items: center; gap: var(--s2); font-size: 17px; }
.uscita-scheda h3 svg { flex: none; width: 22px; height: 22px; }
.uscita-anteprima { gap: var(--s3); }
.uscita-email dl { display: grid; gap: var(--s2); margin: 0; }
.uscita-email dl > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--s2); }
.uscita-email dt { color: var(--inchiostro-2); font-weight: 600; }
.uscita-email dd { margin: 0; overflow-wrap: anywhere; }
.uscita-email .testo-email dd { white-space: pre-wrap; }
.stato-http { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
/* La pagina di Flask: il suo sfondo è quello predefinito (bianco) anche nel tema scuro. */
.uscita-pagina { display: block; width: 100%; max-width: 100%; height: 320px; border: 1px solid var(--riga-2); border-radius: var(--raggio); background: var(--uscita-carta); }
.uscita-dati { margin: 0; max-height: 320px; overflow: auto; font: 14px/1.5 var(--codice-carattere); white-space: pre-wrap; overflow-wrap: anywhere; }

.uscita-esito:not(:empty) { display: grid; gap: var(--s3); }
.uscita-esito .nota { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
.uscita-vuota { margin: 0; color: var(--inchiostro-2); font-size: 15px; }

/* L'errore di Python spiegato in italiano: bordo rosso, icona, il titolo, la frase, la riga dove è successo (con il suo testo
   evidenziato) e l'errore com'è scritto da Python. */
.errore-python { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; padding: var(--s3) var(--s4); border: 2px solid var(--errore); border-left-width: 6px; border-radius: var(--raggio); background: var(--errore-chiaro); color: var(--inchiostro); overflow-wrap: anywhere; }
.errore-python h3 { display: flex; align-items: center; gap: var(--s2); color: var(--errore); font-size: 18px; }
.errore-python h3 svg { flex: none; width: 24px; height: 24px; }
.errore-python p { margin: 0; }
.errore-riga { font-weight: 700; }
.errore-codice { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; padding: var(--s2) var(--s3); border-radius: var(--raggio-piccolo); background: var(--superficie); box-shadow: inset 5px 0 0 var(--errore); font: 15px/1.5 var(--codice-carattere); }
.errore-numero { flex: none; min-width: 2ch; color: var(--inchiostro-2); text-align: right; }
.errore-testo { min-width: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.errore-originale { font-size: 14px; }

/* ── Laboratorio (js/viste/laboratorio.js) ────────────────────────────────────────────────────
   Sul PC e sul tablet i miei file e i dati del corso stanno in `lato` (sul tablet nel pannello «Indice») e l'editor al centro. Sul
   telefono `lato` non si vede: i file stanno in un blocco in cima al contenuto e i dati in uno in fondo, tutti e due `display: none`
   da tablet in su (fuori dal giro della tastiera) e visibili solo con data-schermo="telefono". Il lavoro è una colonna: nome del file e
   indicatore del salvataggio, editor, Esegui e Interrompi, le opzioni, l'uscita. */

.v-lab { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.v-lab-intro { max-width: 60ch; color: var(--inchiostro-2); }
.v-lab-stato:empty { display: none; }
.v-lab-lavoro { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; max-width: 100%; }
.v-lab-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.v-lab-nome { font-family: var(--codice-carattere); font-size: 20px; letter-spacing: 0; overflow-wrap: anywhere; }

/* L'indicatore del salvataggio (anche quello delle sfide): una pillola con l'icona (spunta, matita, giro, info, attenzione) e il testo; il
   colore è dell'icona. */
.v-lab-salvataggio,
.v-sfida-salvataggio { display: inline-flex; align-items: center; gap: var(--s2); max-width: 100%; padding: 2px var(--s3); border-radius: 999px; background: var(--piastrella); color: var(--inchiostro); font-size: 15px; font-weight: 600; line-height: 1.4; }
.v-lab-salvataggio:empty,
.v-sfida-salvataggio:empty { display: none; }
.v-lab-salvataggio svg,
.v-sfida-salvataggio svg { flex: none; width: 18px; height: 18px; }
.v-lab-salvataggio[data-stato="salvato"] svg,
.v-sfida-salvataggio[data-stato="salvato"] svg { color: var(--ok); }
.v-lab-salvataggio[data-stato="coda"] svg,
.v-sfida-salvataggio[data-stato="coda"] svg { color: var(--avviso); }
.v-lab-salvataggio[data-stato="errore"] svg,
.v-sfida-salvataggio[data-stato="errore"] svg { color: var(--errore); }

.v-lab-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }
.v-lab-scorciatoia { margin: calc(-1 * var(--s2)) 0 0; color: var(--inchiostro-2); font-size: 15px; }

.v-lab-opzioni { padding: var(--s2) var(--s4); }
.v-lab-opzioni > summary { padding: var(--s3) 0; font-weight: 700; cursor: pointer; }
.v-lab-opzioni[open] > summary { margin-bottom: var(--s2); }
.v-lab-opzioni-corpo { display: flex; flex-direction: column; gap: var(--s4); padding-bottom: var(--s3); }
.v-lab-pacchetti { min-width: 0; margin: 0; padding: 0; border: 0; }
.v-lab-pacchetti > legend { padding: 0; margin-bottom: var(--s2); font-size: 16px; font-weight: 600; }
.v-lab-interruttori { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 var(--s5); }
.v-campo textarea.v-lab-risposte { font-family: var(--codice-carattere); }

.v-lab-uscita-titolo { font-size: 20px; }
.v-lab-nuovi { display: flex; flex-direction: column; gap: var(--s3); }
.v-lab-nuovi-elenco { display: flex; flex-direction: column; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.v-lab-nuovi-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.v-lab-nuovi-riga code { min-width: 0; overflow-wrap: anywhere; }
.v-lab-esito:not(:empty) { margin-top: var(--s2); }
.v-lab-fatto { display: inline-flex; align-items: center; gap: var(--s2); color: var(--inchiostro); font-weight: 600; }
.v-lab-fatto svg { flex: none; width: 20px; height: 20px; color: var(--ok); }

/* I miei file e i dati del corso. */
.v-lab-lato { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.v-lab-file,
.v-lab-dati { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-lab-file h2,
.v-lab-dati h2 { font-size: 20px; }
.v-lab-conto { color: var(--inchiostro-2); font-size: 15px; }
.v-lab-aiuto { color: var(--inchiostro-2); font-size: 15px; }
.v-lab-elenco { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.v-lab-voce { display: flex; align-items: center; width: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--raggio); background: none; color: var(--inchiostro); font: 15px/1.3 var(--codice-carattere); text-align: left; overflow-wrap: anywhere; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v-lab-voce:hover { background: var(--piastrella); }
.v-lab-voce:focus-visible { outline-offset: -3px; }
.v-lab-voce[aria-current="true"],
.v-lab-voce[aria-current="true"]:hover { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); font-weight: 700; }
.v-lab-azioni-file { display: flex; flex-wrap: wrap; gap: var(--s2); }
.v-lab-nuovo { display: flex; flex-direction: column; gap: var(--s3); }
.v-lab-nuovo[hidden] { display: none; }
.v-lab-dati-elenco { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.v-lab-dato > summary { padding: var(--s3) 0; font: 15px/1.5 var(--codice-carattere); overflow-wrap: anywhere; cursor: pointer; }
.v-lab-dato-corpo { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s2); }
.v-lab-dato-testo { margin: 0; max-height: 240px; min-width: 0; padding: var(--s2) var(--s3); overflow: auto; border-radius: var(--raggio); background: var(--codice-fondo); color: var(--inchiostro); font: 13px/1.45 var(--codice-carattere); white-space: pre; }

/* Il blocco per il telefono. */
.v-lab-telefono { display: none; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-guscio[data-schermo="telefono"] .v-lab-telefono { display: flex; }

/* Il telefono: i file sono pastiglie che vanno a capo (poco spazio verticale prima dell'editor), le due azioni dividono la riga. */
.v-guscio[data-schermo="telefono"] .v-lab { gap: var(--s4); }
.v-guscio[data-schermo="telefono"] .v-lab-elenco { flex-direction: row; flex-wrap: wrap; gap: var(--s2); }
.v-guscio[data-schermo="telefono"] .v-lab-voce { width: auto; max-width: 100%; border: 2px solid var(--riga-2); }
.v-guscio[data-schermo="telefono"] .v-lab-azioni > .v-pulsante { flex: 1 1 0; }
.v-guscio[data-schermo="telefono"] .v-lab-scorciatoia { display: none; }
.v-guscio[data-schermo="telefono"] .v-lab-opzioni { padding: var(--s1) var(--s3); }

/* ── Gli esercizi a tocchi: «riordina» (js/componenti/esercizi.js) ────────────────────────────
   «Il tuo programma» è un riquadro tratteggiato con il fondo del codice, che dopo «Controlla» ha il bordo pieno verde o rosso (e l'esito
   scritto sotto: il colore da solo non basta). Le righe sono pulsanti a tutta larghezza, alti almeno 56px, in carattere fisso, con i
   colori dell'editor; il rientro si vede come uno spazio grigio a sinistra. Una riga già messa resta al suo posto, spenta e sbiadita. Le
   righe lunghe vanno a capo dentro il pulsante: la pagina non scorre di lato. */

.riordina .sopratitolo { margin: 0; color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.programma { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 76px; padding: var(--s3); border: 2px dashed var(--riga-2); border-radius: var(--raggio-grande); background: var(--codice-fondo); }
.programma.giusta { border-style: solid; border-color: var(--ok); }
.programma.sbagliata { border-style: solid; border-color: var(--errore); }
.programma-vuoto { margin: auto 0; color: var(--inchiostro-2); font-size: 15px; text-align: center; }
.righe-da-mettere { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }

.riga-codice {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: var(--s2) var(--s3);
  border: 2px solid var(--riga-2);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
  font: 16px/1.4 var(--codice-carattere);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.riga-codice > code { min-width: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.riga-codice:not(:disabled):hover { background: var(--piastrella); }
.riga-codice:disabled { cursor: default; }
.riga-codice.messa { border-color: var(--inchiostro); }
.riga-codice.usata { border-style: dashed; opacity: 0.45; }
.rientro { border-radius: 2px; background: var(--piastrella-2); white-space: pre; }
.azioni-riordina { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); }

/* ── La lezione (js/viste/lezione.js, le tappe in js/componenti/tappe.js) ─────────────────────────────────────────────────────────
   Una colonna di lettura da 720px, una cosa per volta: dove si è (sul PC lo dice già il lato), l'avviso del Trading, l'h1 con il nome della
   tappa, la tappa, e in fondo il pulsante principale (a destra; sul telefono a tutta larghezza, alto 56px). Le tappe: nel lato sul PC
   (colonna da 232px; sul tablet il guscio, in modo concentrato, mette il lato in una striscia sopra il contenuto e lì le tappe stanno in
   riga: vedi in fondo) con stato e nome; sul telefono, dove il lato non c'è, in una barra in cima al
   contenuto con cinque tasti (numero o spunta) e «Tappa 2 di 5: Il trucco». La tappa in corso ha il fondo giallo tenue con il contorno. */

.v-lezione { display: flex; flex-direction: column; gap: var(--s5); width: 100%; min-width: 0; max-width: 720px; margin: 0 auto; }
.v-lezione-testata { display: flex; flex-direction: column; gap: var(--s3); }
.v-lezione-dove-centro { color: var(--inchiostro-2); }
.v-guscio[data-schermo="pc"] .v-lezione-dove-centro { display: none; }
.v-lezione-titolo { overflow-wrap: anywhere; text-wrap: balance; }
.v-lezione-titolo:focus { outline: none; } /* il fuoco ci va da sé a ogni tappa, non per un Tab */
.v-lezione-avviso { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--raggio); background: var(--giallo-tenue); color: var(--inchiostro); font-weight: 600; }
.v-lezione-avviso svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }

.v-lezione-zona,
.v-lezione-corpo { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.v-lezione-aiuto { color: var(--inchiostro-2); font-size: 15px; }
/* Le scorciatoie si dicono solo sul PC (sul telefono e sul tablet di solito la tastiera non c'è). */
.v-lezione-tasti { display: none; color: var(--inchiostro-2); font-size: 14px; }
.v-guscio[data-schermo="pc"] .v-lezione-tasti { display: block; }

.v-lezione-piede { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s3); }
.v-lezione-avanti { min-width: 10rem; }
.v-guscio[data-schermo="telefono"] .v-lezione-piede .v-pulsante { flex: 1 1 100%; min-height: 56px; font-size: 18px; }

/* «Esegui» e l'uscita sotto. */
.v-lezione-esegui { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-lezione-esegui-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.v-lezione-stato { margin: 0; color: var(--inchiostro-2); font-size: 15px; }

/* Il trucco: la banda gialla (tutto --su-giallo) con il titolo e la spiegazione, che va a capo dove va a capo il contenuto. */
.v-lezione-trucco { display: flex; flex-direction: column; gap: var(--s3); }
.v-lezione-trucco h2 { overflow-wrap: anywhere; text-wrap: balance; }
.v-lezione-trucco-spiegazione { white-space: pre-line; text-wrap: pretty; }
.v-lezione-sottotitolo { font-size: 20px; }
.v-lezione-esempio { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-lezione-esempio-titolo { color: var(--inchiostro-2); font-size: 15px; }
.v-lezione-esempio-nota { text-wrap: pretty; }

/* Gli esercizi: «Esercizio 2 di 10» con la barra, poi l'esercizio in una scheda. */
.v-lezione-esercizio-zona { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-lezione-esercizio-testata { display: flex; flex-direction: column; gap: var(--s2); }
.v-lezione-esercizio-testata .occhiello { color: var(--inchiostro-2); }
.v-lezione-esercizio { min-width: 0; }
.v-lezione-esercizio:focus { outline: none; } /* il fuoco ci va da sé a ogni esercizio */
.v-lezione-nota { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

/* Gli elenchi del riassunto. */
.v-lezione-elenco { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding-left: 1.4em; }

/* Il riassunto e «Sul tuo PC». */
.v-lezione-sul-pc { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-lezione-sistemi { display: flex; flex-wrap: wrap; gap: var(--s2); }
.v-lezione-sistemi .v-pulsante[aria-pressed="true"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); color: var(--inchiostro); }
.v-lezione-passi { display: flex; flex-direction: column; gap: var(--s4); margin: 0; padding-left: 1.4em; }
.v-lezione-passi h3 { font-size: 17px; }
.v-lezione-passo-testo { overflow-wrap: anywhere; }
.v-lezione-passo-testo code,
.v-lezione-scarica code { font-family: var(--codice-carattere); overflow-wrap: anywhere; }
.v-lezione-file { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding-left: 1.2em; }
.v-lezione-scarica { font-weight: 600; }
.v-lezione-cartella { color: var(--inchiostro-2); font-size: 15px; }
.v-lezione-fatto-zona { display: flex; }
.v-lezione-fatto { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.v-lezione-fatto svg { flex: none; width: 20px; height: 20px; color: var(--ok); }
.v-lezione-esito { display: flex; flex-direction: column; gap: var(--s3); }
.v-lezione-esito:empty { display: none; }
.v-lezione-mancano { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

/* La fine (la banda gialla con le stelle) e la lezione già completata. */
.v-lezione-fine { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.v-lezione-giudizio { font-size: 24px; font-weight: 700; text-wrap: balance; }
.v-lezione-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }

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

.v-lezione-lato { display: flex; flex-direction: column; gap: var(--s3); }
.v-lezione-lato > .occhiello { padding: 0 var(--s2); color: var(--inchiostro-2); }
.v-lezione-lato-titolo { padding: 0 var(--s2); font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.v-lezione-tappe > ol { display: flex; flex-direction: column; gap: var(--s1); margin: 0; padding: 0; list-style: none; }

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

.v-lezione-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;
}

.v-lezione-segno svg { width: 16px; height: 16px; stroke-width: 3; }
[data-stato="fatto"] > .v-lezione-segno { background: var(--inchiostro); color: var(--superficie); }
[aria-current="step"] > .v-lezione-segno { background: var(--giallo); box-shadow: 0 0 0 2px var(--inchiostro); color: var(--su-giallo); }
.v-lezione-dove { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.v-lezione-dove:empty { display: none; }

/* ── Le tappe sul telefono: la barra in cima al contenuto ── */

.v-lezione-telefono { display: none; flex-direction: column; gap: var(--s2); }
.v-guscio[data-schermo="telefono"] .v-lezione-telefono { display: flex; }
.v-lezione-telefono .v-lezione-dove { padding: 0; }
.v-lezione-tappe-corte > ol { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.v-lezione-tappe-corte li { flex: 1 1 0; min-width: 0; }

.v-lezione-tappa-corta {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  background: var(--piastrella);
  color: var(--inchiostro);
  font: inherit;
}

button.v-lezione-tappa-corta { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.v-lezione-tappa-corta[aria-current="step"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); }
.v-lezione-tappa-corta:focus-visible { outline-offset: -3px; }

/* Sul tablet, in modo concentrato, il guscio mette il lato in una striscia sopra il contenuto: lì le tappe stanno in riga (dove e titolo
   sono già nell'intestazione e nel contenuto), così la tappa comincia subito sotto. */
.v-guscio[data-schermo="tablet"] .v-lezione-lato > .occhiello,
.v-guscio[data-schermo="tablet"] .v-lezione-lato-titolo { display: none; }
.v-guscio[data-schermo="tablet"] .v-lezione-lato { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.v-guscio[data-schermo="tablet"] .v-lezione-tappe > ol { flex-direction: row; flex-wrap: wrap; }
.v-guscio[data-schermo="tablet"] .v-lezione-tappa { width: auto; padding-right: var(--s3); }

/* ── Le sfide: «Scrivi tu» (js/componenti/sfide.js, sfida.js, corsa.js, telefono.js) ────────
   In cima «Sfida 2 di 5» e le sfide in riga: tasti da 48px con il numero o la spunta (fatta: fondo inchiostro), quella sullo schermo con il
   fondo giallo tenue e il contorno. Sotto, la sfida in una scheda: titolo, compito, il lavoro del PC (la pillola del salvataggio, l'editor,
   «Cosa scrive l'utente», Prova · Esegui · Ricomincia), poi Interrompi e lo stato di Python, l'esito, le prove una per una, l'uscita di
   Esegui e «Se non sai come andare avanti». Le prove hanno l'icona (spunta o ✕) oltre al colore. Sul telefono, sopra il lavoro, il blocco
   `.v-sfida-telefono` (nascosto da tablet in su): il riordino, che prende il posto del lavoro del PC finché non si sceglie di scrivere. */

.v-sfide { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-sfide-testata { display: flex; flex-direction: column; gap: var(--s2); }
.v-sfide-testata .occhiello { color: var(--inchiostro-2); }
.v-sfide-elenco > ol { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.v-sfide-nessuna p { margin: 0; }

.v-sfide-voce {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--raggio);
  background: var(--piastrella);
  color: var(--inchiostro);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.v-sfide-voce:hover { background: var(--piastrella-2); }
.v-sfide-voce:focus-visible { outline-offset: 2px; }
.v-sfide-voce[data-stato="fatto"] { background: var(--inchiostro); color: var(--superficie); }
.v-sfide-voce[aria-current="true"] { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); color: var(--inchiostro); }
.v-sfide-segno { display: inline-flex; }
.v-sfide-segno svg { width: 18px; height: 18px; stroke-width: 3; }
.v-sfide-zona { min-width: 0; }

.v-sfida { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-sfida-titolo { overflow-wrap: anywhere; text-wrap: balance; }
.v-sfida-titolo:focus { outline: none; } /* il fuoco ci va da sé quando si cambia sfida */
.v-sfida-compito { font-size: 17px; text-wrap: pretty; overflow-wrap: anywhere; }

/* Il blocco del telefono (js/componenti/telefono.js), nascosto da tablet in su. Sul telefono, mentre si riordina (`data-lavoro="riordina"`
   della sfida), il lavoro del PC non si vede, e nemmeno «Copia nell'editor» della soluzione; con «Scrivi comunque» (`data-lavoro="scrivi"`)
   si vede l'editor e si nasconde il riordino. Decidono gli attributi del guscio e della sfida: un cambio di larghezza non ricrea niente. */
.v-sfida-telefono { display: none; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-guscio[data-schermo="telefono"] .v-sfida-telefono { display: flex; }
.v-guscio[data-schermo="telefono"] .v-sfida[data-lavoro="riordina"] .v-sfida-lavoro { display: none; }
.v-guscio[data-schermo="telefono"] .v-sfida[data-lavoro="riordina"] .v-sfida-copia { display: none; }
.v-guscio[data-schermo="telefono"] .v-sfida[data-lavoro="scrivi"] .v-telefono-riordina { display: none; }
/* Riordinando, «Interrompi» si vede solo quando serve: mentre girano le prove (acceso). Spento, sul telefono sarebbe solo un pulsante grigio. */
.v-guscio[data-schermo="telefono"] .v-sfida[data-lavoro="riordina"] .v-sfida-corsa .v-pulsante:disabled { display: none; }

/* «Riordina le righe» e «Completa i pezzi». Le righe sono le `.riga-codice` degli esercizi (pulsanti alti almeno 56px, carattere fisso, il
   rientro grigio) ma non vanno a capo: stanno in un riquadro che scorre di lato dentro di sé, tutte larghe quanto la più lunga, così i
   rientri restano allineati e la pagina non scorre. «Il tuo programma» è tratteggiato sul fondo del codice. I pezzi da completare: la riga
   con il buco e le tre opzioni (`.v-opzione` della base, alte 56px, a spaziatura fissa). «Prova» a tutta larghezza, alto 56px. */
.v-telefono { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-telefono-riordina { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-telefono-passo { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-telefono-titolo { font-size: 17px; }
.v-telefono-titolo:focus { outline: none; } /* il fuoco ci va da sé tornando dall'editor */
.v-telefono-aiuto { margin: 0; color: var(--inchiostro-2); font-size: 15px; text-wrap: pretty; }
.v-telefono-etichetta { margin: 0; color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.v-telefono-riquadro { min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.v-telefono-composto { padding: var(--s3); border: 2px dashed var(--riga-2); border-radius: var(--raggio-grande); background: var(--codice-fondo); }
.v-telefono-composto .programma-vuoto { margin: var(--s3) 0; }
.v-telefono-righe { display: flex; flex-direction: column; gap: var(--s2); width: max-content; min-width: 100%; }
.v-telefono-programma:empty { display: none; }
/* Il riquadro scorre e taglia ciò che esce dai suoi bordi: il contorno del fuoco sta dentro la riga. */
.v-telefono-programma .riga-codice:focus-visible,
.v-telefono-banca .riga-codice:focus-visible { outline-offset: -4px; }
.v-telefono .riga-codice > code { flex: none; white-space: pre; overflow-wrap: normal; }
.v-telefono-riga { display: flex; align-items: center; min-height: 56px; padding: var(--s2) var(--s3); border-radius: var(--raggio); background: var(--codice-fondo); color: var(--inchiostro); font: 16px/1.4 var(--codice-carattere); }
.v-telefono-riga > code { font: inherit; white-space: pre; tab-size: 4; }
.v-telefono-buchi { display: flex; flex-direction: column; gap: var(--s5); margin: 0; padding: 0; list-style: none; }
.v-telefono-buco { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-telefono-buco .v-opzione-testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.v-telefono-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.v-telefono-azioni > .v-pulsante.v-grande { flex: 1 1 100%; }
.v-telefono-manca { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
.v-telefono-manca:empty { display: none; }
/* «Torna a riordinare le righe» in cima (sopra l'editor) e «Scrivi comunque» in fondo alla sfida, in un altro `.v-sfida-telefono`: vuoti,
   non si vedono (né lasciano lo spazio tra le righe della sfida). */
.v-telefono-cambio { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.v-telefono-cambio:empty { display: none; }
.v-telefono-fondo { align-items: flex-start; padding-top: var(--s4); border-top: 1px solid var(--riga); }
.v-guscio[data-schermo="telefono"] .v-telefono-fondo:empty { display: none; }
.v-telefono-nota { margin: 0; color: var(--inchiostro-2); font-size: 15px; text-wrap: pretty; }

.v-sfida-lavoro { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-sfida-testata { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); }
.v-sfida-testata h3 { font-size: 17px; }
.v-sfida-editor { min-width: 0; }
.v-sfida-attesa { display: grid; place-items: center; min-height: 120px; margin: 0; border-radius: var(--raggio); background: var(--codice-fondo); color: var(--inchiostro-2); }
.v-sfida-avviso-codice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.v-sfida-avviso-codice:empty { display: none; }

.v-sfida-risposte { padding: var(--s1) var(--s4); border: 1px solid var(--riga); border-radius: var(--raggio); }
.v-sfida-risposte > summary { padding: var(--s2) 0; font-weight: 700; cursor: pointer; }
.v-sfida-risposte-corpo { padding-bottom: var(--s3); }
.v-campo textarea.v-sfida-risposte-testo { font-family: var(--codice-carattere); }

.v-sfida-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.v-sfida-scorciatoia { margin: 0; color: var(--inchiostro-2); font-size: 14px; }
.v-guscio[data-schermo="telefono"] .v-sfida-scorciatoia { display: none; }
.v-guscio[data-schermo="telefono"] .v-sfida-lavoro .v-sfida-azioni > .v-pulsante { flex: 1 1 auto; }
/* «Interrompi» e a che punto è Python: fuori dal lavoro del PC, perché servono anche alle sfide del telefono. */
.v-sfida-corsa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.v-sfida-stato { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
.v-sfida-stato:empty { display: none; }

/* L'esito che resta (superata con le stelle, la soluzione vista) e il risultato dell'ultimo «Prova». */
.v-sfida-esito:empty,
.v-sfida-risultati:empty { display: none; }
.v-sfida-superata { display: flex; flex-direction: column; gap: var(--s3); }
.v-sfida-stelle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.v-sfida-risultati { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.v-sfida-prove { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.v-sfida-prova { display: flex; align-items: flex-start; gap: var(--s2); overflow-wrap: anywhere; }
.v-sfida-prova svg { flex: none; width: 20px; height: 20px; margin-top: 2px; stroke-width: 3; }
.v-sfida-prova[data-esito="passata"] svg { color: var(--ok); }
.v-sfida-prova[data-esito="fallita"] svg { color: var(--errore); }

/* «Se non sai come andare avanti»: i suggerimenti aperti, il prossimo, la soluzione. */
.v-sfida-aiuti { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--riga); }
.v-sfida-aiuti h3 { font-size: 17px; }
.v-sfida-suggerimenti { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding-left: 1.4em; }
.v-sfida-suggerimenti:empty { display: none; }
.v-sfida-suggerimento { text-wrap: pretty; }
.v-sfida-suggerimento:focus { outline: none; } /* il fuoco ci va da sé quando lo si apre */
.v-sfida-chiedi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.v-sfida-nota { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
.v-sfida-soluzione { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); min-width: 0; }
.v-sfida-soluzione .codice { align-self: stretch; }
.v-sfida-soluzione h4 { margin: 0; font-size: 16px; }
.v-sfida-soluzione h4:focus { outline: none; }

/* ── La conversazione con il tutor (js/componenti/conversazione.js) ───────────────────────────
   Nel pannello destro della lezione e del Laboratorio (`.v-conv-compatta`: la colonna di 380px del PC, il cassetto del tablet e del
   telefono) e al centro della scheda Tutor. In testa «Il tutor» e una frase; in lezione, dentro una sfida, il riquadro dei tre modi (aiuto,
   soluzione, revisione) con la nota sulle stelle; poi 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 e l'invio.
   Il codice di una risposta è un riquadro di codice (che scorre dentro di sé) con «Copia nell'editor». */

.v-conv { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-conv-testa { display: flex; flex-direction: column; gap: var(--s2); }
.v-conv-titolo { font-size: 20px; }
.v-conv-titolo:focus { outline: none; } /* è un titolo, non un comando */
.v-conv-intro { color: var(--inchiostro-2); font-size: 15px; text-wrap: pretty; }

/* I modi della sfida: il nome della sfida, i pulsanti (vanno a capo nella colonna stretta), la nota sulle stelle. */
.v-conv-sfida { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--raggio-grande); background: var(--piastrella); }
.v-conv-sfida-nome { font-weight: 700; overflow-wrap: anywhere; }
.v-conv-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }
.v-conv-nota { color: var(--inchiostro-2); font-size: 14px; text-wrap: pretty; }

.v-conv-turni { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-conv-turni:empty { display: none; }
.v-conv-turno { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.v-conv-turno-tutor { align-items: stretch; }
.v-conv-turno-mio { align-items: flex-end; }
.v-conv-turno .v-fumetto { max-width: 100%; }
.v-conv-turno .v-fumetto-corpo { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.v-conv-turno .v-fumetto-testo { overflow-wrap: anywhere; white-space: pre-line; text-wrap: pretty; }
.v-conv-nome { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 14px; font-weight: 700; }
.v-conv-etichetta { font-weight: 600; }
.v-conv-in-attesa { opacity: 0.6; }
/* Dopo un aiuto il fuoco va sulla risposta (tabindex -1) da sé, non per un Tab: come per i titoli, niente contorno. */
.v-conv-turno-tutor:focus { outline: none; }
/* Il rifiuto del tutor: il fumetto con il bordo dell'avviso, perché non è una risposta. */
.v-conv-turno-rifiuto .v-fumetto-nuvola { box-shadow: inset 0 0 0 2px var(--avviso); }
.v-conv-fuori-tema { display: flex; align-items: flex-start; gap: var(--s2); padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 14px; }
.v-conv-fuori-tema svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.v-conv-codice { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.v-conv-codice-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }

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

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

/* La fine: niente più domande in questa conversazione, e «Nuova conversazione». */
.v-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; }
.v-conv-fine-testo { font-weight: 600; text-wrap: pretty; }

/* La banda degli stati del tutor, sopra il campo. */
.v-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); }
.v-conv-stato[data-tipo="errore"] { border-color: var(--errore); background: var(--errore-chiaro); }
.v-conv-stato-icona { display: inline-flex; flex: none; color: var(--avviso); }
.v-conv-stato[data-tipo="errore"] .v-conv-stato-icona { color: var(--errore); }
.v-conv-stato-icona svg { width: 22px; height: 22px; }
.v-conv-stato-testo { flex: 1 1 12rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.v-conv-stato-azioni { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* Il campo e l'invio (56px) sulla stessa riga; sotto che cosa va con la domanda e il conto dei caratteri. */
.v-conv-compositore { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--riga); }
.v-conv-riga { display: flex; align-items: flex-end; gap: var(--s3); }
.v-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;
}
.v-conv-area::placeholder { color: var(--inchiostro-2); opacity: 1; }
.v-conv-area:disabled { opacity: 0.5; cursor: default; }
.v-conv-invia.v-pulsante { flex: none; width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; }
.v-conv-invia svg { width: 24px; height: 24px; }
.v-conv-sotto { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.v-conv-didascalia { min-width: 0; color: var(--inchiostro-2); font-size: 14px; }
.v-conv-conto { flex: none; margin-left: auto; color: var(--inchiostro-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.v-conv-conto-troppo { color: var(--errore); font-weight: 700; }
.v-conv-troppo { color: var(--errore); font-size: 15px; font-weight: 600; }

/* Nel pannello (380px): meno aria. */
.v-conv-compatta { gap: var(--s3); }
.v-conv-compatta .v-conv-turni { gap: var(--s3); }
.v-conv-compatta .v-conv-compositore { padding-top: var(--s3); }

/* ── La vista Tutor (js/viste/tutor.js) ───────────────────────────────────────────────────────
   Nel lato «Le tue conversazioni» (come l'indice del corso: righe toccabili, quella aperta su --giallo-tenue con il contorno; lo stato è
   una pillola, aperta gialla e finita su piastrella; «Elimina» a destra). Il centro è una colonna da 720px. Sul telefono il lato non c'è:
   l'elenco sta nel centro, sotto la conversazione nuova (`.v-tutor-telefono`); «Tutte le conversazioni» serve dove l'elenco non si vede. */

.v-tutor { display: flex; flex-direction: column; gap: var(--s5); width: 100%; min-width: 0; max-width: 720px; margin: 0 auto; }
.v-tutor-con-conversazione { gap: var(--s4); }
.v-tutor-titolo { overflow-wrap: anywhere; text-wrap: balance; }
.v-tutor-intro { color: var(--inchiostro-2); text-wrap: pretty; }
.v-tutor-oggi { color: var(--inchiostro-2); font-size: 15px; font-weight: 700; }
.v-tutor-indietro.v-pulsante { align-self: flex-start; margin-left: calc(var(--s2) * -1); }
.v-guscio[data-schermo="pc"] .v-tutor-indietro { display: none; }

.v-tutor-telefono { display: none; }
.v-guscio[data-schermo="telefono"] .v-tutor-telefono { display: block; }

.v-tutor-lato { display: flex; flex-direction: column; gap: var(--s4); }
.v-tutor-elenco { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.v-tutor-elenco-titolo { padding: 0 var(--s2); font-size: 18px; }
.v-tutor-nessuna { padding: 0 var(--s2); color: var(--inchiostro-2); font-size: 15px; text-wrap: pretty; }
.v-tutor-voci { display: flex; flex-direction: column; gap: var(--s1); align-self: stretch; margin: 0; padding: 0; list-style: none; }
.v-tutor-riga { display: flex; align-items: center; gap: var(--s1); }
.v-tutor-voce {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  border-radius: var(--raggio);
  color: var(--inchiostro);
  text-decoration: none;
}
.v-tutor-voce:hover { background: var(--piastrella); }
.v-tutor-voce:focus-visible { outline-offset: -3px; }
.v-tutor-voce[aria-current="page"],
.v-tutor-voce[aria-current="page"]:hover { background: var(--giallo-tenue); box-shadow: inset 0 0 0 2px var(--inchiostro); }
.v-tutor-voce-titolo { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.v-tutor-voce-dettagli { color: var(--inchiostro-2); font-size: 14px; }
.v-tutor-voce[aria-current="page"] .v-tutor-voce-dettagli { color: var(--inchiostro); }
.v-tutor-voce-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; }
.v-tutor-voce[data-stato="aperta"] .v-tutor-voce-stato { background: var(--giallo); color: var(--su-giallo); }
.v-tutor-elimina.v-pulsante { flex: none; width: 48px; min-height: 48px; padding: 0; }

/* ── Ripasso (js/viste/ripasso.js) ────────────────────────────────────────────────────────────
   Come gli esercizi della lezione: una colonna da 720px con l'h1, «Carta 3 di 12» con la barra, la carta in una scheda (la domanda a
   tocchi di componenti/domanda.js) e sotto «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 «Carta 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 (sulla banda tutto è --su-giallo). */

.v-ripasso { display: flex; flex-direction: column; gap: var(--s5); width: 100%; min-width: 0; max-width: 720px; margin: 0 auto; }
.v-ripasso-titolo:focus { outline: none; }
.v-ripasso-testata { display: flex; flex-direction: column; gap: var(--s2); }
.v-ripasso-testata-riga { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.v-ripasso-testata .occhiello { color: var(--inchiostro-2); }
.v-ripasso-conto { color: var(--inchiostro-2); font-size: 15px; font-weight: 700; }
.v-guscio[data-schermo="pc"]:not([data-pannello-chiuso-pc]) .v-ripasso-conto { display: none; }
.v-ripasso-zona { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-ripasso-carta { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.v-ripasso-carta .testo-domanda:focus { outline: none; } /* il fuoco ci va da sé a ogni carta */
.v-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. */
.v-ripasso-piede { display: flex; justify-content: flex-end; }
.v-ripasso-avanti { min-width: 10rem; }
.v-guscio[data-schermo="telefono"] .v-ripasso-piede .v-pulsante { flex: 1 1 100%; min-height: 56px; font-size: 18px; }
.v-guscio[data-schermo="telefono"] .v-ripasso-avanti { scroll-margin-bottom: var(--s3); }

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

/* Il salvataggio, l'errore e la fine. */
.v-ripasso-salvo { display: flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s6) var(--s4); color: var(--inchiostro-2); }
.v-ripasso-errore { display: flex; flex-direction: column; gap: var(--s4); }
.v-ripasso-errore-testo { display: flex; flex-direction: column; gap: var(--s2); }
.v-ripasso-fine-titolo { font-size: 28px; text-wrap: balance; }
.v-ripasso-fine-titolo:focus { outline: none; }
.v-ripasso-fine { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6) var(--s5); }
.v-ripasso-riepilogo { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.v-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); }
.v-ripasso-riepilogo span { font-size: 15px; font-weight: 600; }
.v-ripasso-riepilogo strong { font-family: var(--titoli); font-size: 22px; font-weight: 800; }
.v-ripasso-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* ── 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. Le regole del telefono stanno sotto `data-schermo`, non in una media query: lo decide il guscio. */

.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: var(--codice-carattere); 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 e i percorsi sbloccati (in rilievo, sopra la ricerca), la ricerca con l'ordine e 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-percorsi:empty { display: none; }
/* Il riquadro dei percorsi sbloccati di una persona: si apre sopra la ricerca e prende il fuoco. */
.v-admin-percorsi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.v-admin-percorsi form { display: flex; flex-direction: column; gap: var(--s4); width: 100%; max-width: 40rem; }
.v-admin-percorsi-scelte { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; margin: 0; padding: var(--s3) 0 0; border: 0; border-top: 1px solid var(--riga); }
.v-admin-percorsi-scelte > legend { padding: 0; font-weight: 700; }
.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: var(--codice-carattere);
  font-size: 20px;
  letter-spacing: 0.08em;
}
.v-admin-ricerca { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--s3); max-width: 36rem; }
.v-admin-conto { grid-column: 1 / -1; 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; }
.v-guscio[data-schermo="telefono"] .v-admin-corso { align-items: flex-end; }
.v-guscio[data-schermo="telefono"] .v-admin-persone .v-tabella td:last-child { justify-content: flex-end; padding-top: var(--s3); }
.v-guscio[data-schermo="telefono"] .v-admin-persone .v-tabella td:last-child::before { content: none; } /* «Azioni» lo dice già il pulsante */

/* Tutor AI: l'avviso del rifiuto in cima, la chiave, poi i riquadri in griglia (due colonne dove ci stanno), il «Salva» in fondo.
   Python e Contenuti: lo stato dello scaricamento e i conti. */
.v-admin-tutor,
.v-admin-modulo,
.v-admin-python,
.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 { 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 (il modello): 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; }
/* Sulla voce scelta il fondo è --giallo-tenue: lì --inchiostro-2 in scuro fa 3,66:1 (coppia da non usare, LEGGIMI.md della base). */
.v-scelta > input:checked + .v-scelta-testo .v-admin-scelta-aiuto { color: var(--inchiostro); }

/* Python: lo stato dello scaricamento. Consumi: la tendina del mese, stretta. Contenuti: i conti e 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-conti { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
.v-admin-conto-voce { display: flex; align-items: baseline; gap: var(--s2); margin: 0; font-weight: 600; }
.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; }