/* -------------------------------------------------------------------
   GloriaDentalTutor — foglio di stile

   Palette e impostazione prese dal prototipo `sito/GIORNATA_10.html`, che
   a sua volta le prende dal sito di Gloria: il verde salvia domina, i
   testi scuri sono verdi anch'essi, le tinte chiare fanno da fondo ai
   riquadri. È lo stesso verde dei riquadri su esmerise, quindi la pagina
   resta in continuità con quello che gli studenti già vedono.

   Il pubblico legge testi lunghi, spesso di sera e spesso al telefono:
   colonna stretta, corpo grande, contrasto alto, niente decorazione che
   rubi attenzione al testo.

   IL VOLTO, dal 14 settembre 2026 (PIANO_DESIGN_2026-09-14.md). Tre
   decisioni di Paolo: il carattere è il DIN, qui Barlow e Barlow
   Condensed, ospitati da noi in `caratteri/` e non da Google, che con
   ogni pagina vedrebbe l'indirizzo di chi legge; la disciplina è quella
   del Bauhaus, cioè righe e numeri come struttura, niente ombre, angoli
   appena smussati; e al posto del nero c'è il verde scuro dei titoli del
   sito di Gloria. La tela con le dieci tavole approvate sta su
   claude.ai/code, il link è nel piano.
   ------------------------------------------------------------------- */

/* ---- il carattere ----
   Otto file, solo l'alfabeto latino, che copre l'italiano: 130 KB in
   tutto, scaricati una volta e poi in cache. `swap` mostra subito il
   testo col carattere di sistema e lo cambia quando Barlow arriva. */
@font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap;
             src: url(/caratteri/barlow-400.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: italic; font-weight: 400; font-display: swap;
             src: url(/caratteri/barlow-400i.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap;
             src: url(/caratteri/barlow-500.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap;
             src: url(/caratteri/barlow-600.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-style: normal; font-weight: 700; font-display: swap;
             src: url(/caratteri/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
             src: url(/caratteri/barlow-condensed-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
             src: url(/caratteri/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
             src: url(/caratteri/barlow-condensed-700.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }

:root {
  --sfondo:        #f6fafa;
  --carta:         #ffffff;
  --testo:         #244747;   /* il verde scuro del sito, al posto del nero */
  --tenue:         #566c6f;   /* era #5f7679: 4,8:1 anche sul fondo tinto (GRAFICA, difetto 53; Paolo, 4/10) */
  --bordo:         #dde9ea;
  --accento:       #3a7477;   /* era #3f7c80: 4,6:1 sul fondo tinto, per il testo piccolo (difetto 53) */
  --su-accento:    #ffffff;   /* il testo sopra l'accento */
  --accento-tenue: #e8f1f2;
  --ok:            #008361;
  --ko:            #c0455a;
  --evidenza:      #6d9a9c;
  /* il quaderno: l'ocra dell'evidenziatore, caldo accanto al salvia */
  --segno:         #c08a33;
  --salvia:        #6d9a9c;   /* il verde di Gloria: oggi resta per il telo dietro le foto */
  /* LA BARRA IN CIMA ha un colore suo, dal 21 settembre 2026. Era il salvia,
     e sopra il salvia il bianco faceva 3,11 — e 2,61 dove le voci erano
     attenuate — sotto il minimo per un testo che si deve leggere. Paolo ha
     scelto questo verde piu' scuro fra tre strade disegnate da GRAFICA GDT:
     col bianco pieno fa 4,77. E' un colore fisso, dichiarato solo qui e non
     nei blocchi del tema scuro, perche' la barra e' la stessa nei due temi;
     e non e' `--accento`, che nello scuro diventa chiaro e riporterebbe il
     bianco a 2,08. Il salvia non si cambia al suo posto: lo usa anche
     `--fondo-foto`, e le foto degli strumenti si scurirebbero con lui. */
  --barra:         #3f7c80;
  /* dietro le foto dei quiz: il verde salvia schiarito sulla carta, non il
     nero (Paolo, 19 settembre 2026). Gli strumenti sono PNG trasparenti e ci
     stanno sopra come su un telo; nel tema scuro si scurisce con la carta. */
  --fondo-foto:    color-mix(in srgb, var(--salvia) 24%, var(--carta));
  --fondo-aula:    #16292b;   /* intorno alla scheda del quiz: il verde del sito, spento */
  --su-aula:       #a9c1c3;
  --ombra:         none;      /* niente ombre: separano le righe, non la luce */
  --larghezza:     720px;
  /* LA PAGINA DI UN CONTENUTO. `--larghezza` e' la colonna sola delle
     pagine di testo; questa e' la tavola della lezione — testo, colonna
     di lato e barra del lettore, che devono cominciare tutti e tre sulla
     stessa verticale. Cresce con la finestra invece di stare ferma a
     1100: su un portatile da quattordici pollici restavano quattrocento
     pixel di aria ai lati, e su un monitor grande la pagina era identica.
     Non cresce all'infinito, pero': una riga troppo lunga si legge peggio,
     non meglio, e quello che avanza si da' al corpo del carattere e alla
     colonna di lato. Misurata col carattere vero, a 1512 la riga e' di 89
     caratteri, non i settanta che questo commento dava per scontati:
     Barlow e' stretto, e 740 pixel ne tengono piu' del previsto (GRAFICA
     GDT, 21 settembre 2026). Se fermarla prima e' una scelta della scala
     del testo.

     Niente `vw` qui dentro. Il primo giro diceva `min(1180px, 94vw)`, e sul
     telefono 94vw fa 367 pixel su 390: la pagina di un contenuto — e solo
     quella — perdeva ventitre' pixel di testo, sulla pagina dove si
     studia, e scendendo nel corso il testo saltava di dodici pixel
     (misurato da GRAFICA GDT, 21 settembre 2026). L'aria ai lati la da'
     gia' l'imbottitura di `main`: sotto i 1180 la pagina e' larga quanto
     la finestra, come tutte le altre. */
  --lettura:       1180px;
  /* UN COMANDO E' UN COMANDO. Campi, elenchi a discesa e pulsanti hanno
     lo stesso angolo e la stessa altezza: erano quattro raggi diversi e
     tre altezze, e in un modulo si vedeva. Il raggio minuto sta alle
     targhe e alle pastiglie, quello largo ai contenitori. */
  --raggio:        10px;
  --raggio-minuto: 3px;
  --alto:          42px;
  /* Lo spazio che la freccia dell'elenco a discesa si tiene a destra.
     Sta qui perche' CHI RISCRIVE L'IMBOTTITURA DI UN `select` DEVE
     LASCIARGLIELO: `padding: 6px 9px` su un elenco stretto mandava la
     freccia sopra l'ultima lettera della parola. */
  --freccia:       34px;
  --din:           Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --cond:          "Barlow Condensed", Barlow, "Arial Narrow", sans-serif;
  /* TRE TAGLIE DI TITOLO (griglia B, paolo-60, 26 settembre 2026): erano
     otto, dal 76 della tua area al 30 dei testi legali. 64 per le due porte
     d'ingresso, la prima pagina e la tua area; 52 dove si studia o si
     sceglie; 30 dove si legge un documento o si compila un modulo. Il
     dietro le quinte resta a 40: lo studente non lo vede. L'elenco pagina
     per pagina e' di GRAFICA, in materiale/grafica/griglia/LEGGIMI.md. */
  --titolo-porta:     64px;
  --titolo-pagina:    52px;
  --titolo-documento: 30px;
}
/* Al telefono una soglia sola, e le misure che c'erano gia': 52, 40 e 26.
   Prima le soglie erano quattro (430, 600, 759, 899) e la prima pagina
   aveva due taglie di mezzo, 48 e 56. */
@media (max-width: 600px) {
  :root { --titolo-porta: 52px; --titolo-pagina: 40px; --titolo-documento: 26px; }
}

/* Lo scuro segue il sistema, ma la scelta esplicita vince: chi vuole
   guardare la pagina chiara col Mac in scuro deve poterlo fare senza
   cambiare le impostazioni del computer. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo:        #111819;
    --carta:         #192224;
    --fondo-aula:    #0a1112;
    --testo:         #e6eded;
    --tenue:         #93a7a9;
    --bordo:         #2a3739;
    --accento:       #8fbcbe;
    --su-accento:    #0e2422;   /* scuro: il bianco su #8fbcbe faceva 2,1:1 */
    --accento-tenue: #1e2e30;
    --ok:            #4cc4a6;
    --ko:            #ff8fa0;
    --evidenza:      #8fbcbe;
    --segno:         #e0b264;
    --ombra:         none;
    /* la mappa nel tema scuro (GRAFICA, 27/9): la tessera vuota a 3,1:1, la pallida a 3:1 */
    --tessera-vuota:   rgb(84, 104, 106);
  }
}
:root[data-tema="scuro"] {
  --sfondo:        #111819;
  --carta:         #192224;
  --fondo-aula:    #0a1112;
  --testo:         #e6eded;
  --tenue:         #93a7a9;
  --bordo:         #2a3739;
  --accento:       #8fbcbe;
  --su-accento:    #0e2422;
  --accento-tenue: #1e2e30;
  --ok:            #4cc4a6;
  --ko:            #ff8fa0;
  --evidenza:      #8fbcbe;
  --ombra:         none;
  --segno:         #e0b264;
  --tessera-vuota:   rgb(84, 104, 106);
}

/* I controlli del browser seguono il tema: senza `color-scheme`, nello scuro il
   «Scegli file», le tendine e le barre restavano chiari (GRAFICA, audit del 2/10, 1). */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) { color-scheme: dark; } }
:root[data-tema="scuro"] { color-scheme: dark; }
input[type=file]::file-selector-button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--accento);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 400 17.5px/1.6 var(--din);
  -webkit-font-smoothing: antialiased;
}

/* QUANTO E' LARGA QUESTA PAGINA, detto in un posto solo.
   `--pagina` la sceglie il corpo, e tutto quello che deve incolonnarsi —
   il testo, il piede, la barra del lettore — la legge da li'. Prima la
   stessa misura era scritta in tre posti che non si parlavano: il
   contenuto era largo 1100 e il piede 720, cioe' rientrava di 190 pixel,
   su diciotto pagine (misurato il 20 settembre 2026). */
/* LA GRIGLIA B (Paolo, 26 settembre 2026, paolo-60; la mappa e' di GRAFICA,
   in materiale/grafica/griglia/LEGGIMI.md). Due larghezze, al centro: la
   larga e' quella della lezione, 1180, e ci stanno tutta la strada dello
   studente e le pagine a piu' colonne; la stretta, 720, e' per le pagine a
   una colonna. Prima la larga era 1100 e la lezione 1180, e a 1512 lo
   studente saltava di 190 pixel entrando nel modulo e di 230 nella lezione. */
/* UNA LARGHEZZA SOLA (Paolo con GRAFICA, 27 settembre 2026, «la larghezza
   pagine non è tutta uguale»; supera la griglia B): tutte le pagine sono
   larghe 1180 e partono sotto il marchio. A 1512 fra le pagine strette e la
   prima pagina c'era un salto di 230 px. Dentro, tutto largo (qui sotto,
   «tutto largo»); la lezione tiene il suo corpo e il fianco. Il
   dietro le quinte e l'esercizio pratico a 880
   hanno le loro misure. Anche il quaderno e' tutto largo. */
body { --pagina: var(--lettura); }
main { max-width: var(--pagina); margin: 0 auto; padding: 28px 20px 80px; }

/* ---- testata ---- */
/* La barra si incolonna sulla pagina larga (griglia B): il marchio sta sopra
   il testo delle pagine larghe, come il piede, e non piu' a 20 pixel dal
   bordo della finestra. Sotto i 1180 l'imbottitura resta 20. Il 100% di
   un'imbottitura e' la larghezza del corpo, senza la barra di scorrimento. */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px max(20px, calc((100% - var(--lettura)) / 2 + 20px)); min-height: 60px;   /* 60 per tutti: da visitatore era 56, ed entrando cresceva (GRAFICA, 166) */
  background: var(--barra); color: #fff;
  view-transition-name: barra;   /* resta ferma mentre la pagina sotto cambia */
}
.marchio { display: inline-flex; align-items: center; gap: 10px;
           font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
           text-decoration: none; color: #fff; white-space: nowrap; }
.marchio img { height: 30px; width: auto; display: block; }
.barra nav { display: flex; align-items: center; gap: 14px; font-size: 13.5px; font-weight: 500; }
/* La vetrina al centro, io a destra: e' una testata sola, e cambia solo
   quello che c'e' nella seconda meta' a seconda che tu sia entrato o no. */
.barra .vetrina { flex: 1 1 auto; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.barra .vetrina a { color: #fff; }
.barra .vetrina a.qui { opacity: 1; font-weight: 600; box-shadow: inset 0 -2px 0 #fff; padding-bottom: 2px; }
.barra .io { flex: 0 0 auto; }
.barra .rapidi .bottone { padding: 7px 15px; font-size: 13.5px;
                          background: transparent; border-color: #fff; color: #fff; }
.barra .rapidi .bottone:hover { background: #fff; color: var(--barra); opacity: 1; }
.barra .chi { color: #fff; }
.barra a { color: #fff; text-decoration: none; }
.barra a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.barra .bottone:hover { text-decoration: none; }
.barra .tema { color: #fff; }
.barra .tema:hover { opacity: 1; color: #fff; }
/* Sul telefono la barra e' una riga sola: marchio, tema, «Entra» e il
   bottone del menu. Le voci del sito e quelle personali stanno dietro il
   menu, in colonna, e si aprono con una casella nascosta: niente
   JavaScript, e ricaricando la pagina il menu e' chiuso. */
/* IL PULSANTE DEL MENU E' UN `<label>`, perche' apre il menu con una casella
   nascosta senza JavaScript — e un `label` si prende la regola delle
   etichette dei moduli, sedici pixel di margine sotto. In una riga centrata
   quei sedici contano: la barra del telefono era alta 80 invece di 64, e il
   menu stava otto pixel piu' in alto del marchio (trovato da GRAFICA GDT, 21
   settembre 2026). Il margine sotto si azzera qui.
   La misura e' una sola, quarantaquattro come gli altri tasti d'icona: qui
   c'era 40 e la regola del telefono la rialzava, e chi leggeva il file
   trovava 40 (GRAFICA GDT, 26 settembre 2026). */
.apri-menu { display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
             margin-bottom: 0;
             color: #fff; cursor: pointer; border-radius: var(--raggio); margin-right: -8px; }
.apri-menu svg { display: block; }
.apri-menu .chiudi { display: none; }
.menu-stato { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.barra:has(.menu-stato:focus-visible) .apri-menu { outline: 2px solid #fff; outline-offset: 2px; }
/* Il menu a scomparsa arriva fino a 950 e non a 900: fra 901 e 941, con le
   voci dell'amministratore, la barra andava a capo anche col solo logo
   (GRAFICA GDT, 22 settembre 2026, misurato ogni 5 px). */
@media (max-width: 950px) {
  .barra { flex-wrap: wrap; gap: 10px 14px; }
  .barra .rapidi { margin-left: auto; }
  .apri-menu { display: inline-flex; }
  /* Si toccano col dito: «Entra» era alto 36 pixel e il pulsante del tema
     27 per 23. Quarantaquattro e' la misura di un dito, la stessa del piede
     (GRAFICA GDT, 21 settembre 2026). */
  .barra .rapidi .bottone { min-height: 44px; display: inline-flex; align-items: center; }
  .barra .tema { min-width: 44px; min-height: 44px; display: inline-flex;
                 align-items: center; justify-content: center; }
  .barra .vetrina, .barra .io { display: none; order: 5; flex-basis: 100%; gap: 0;
                                flex-direction: column; align-items: stretch; font-size: 16px; }
  .barra .vetrina { border-top: 1px solid rgba(255, 255, 255, .35); padding-top: 4px; }
  .barra .vetrina a, .barra .io a { padding: 11px 0; opacity: 1;
                                    border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .barra .vetrina a.qui { box-shadow: none; font-weight: 700; }
  .barra .io a:last-child { border-bottom: 0; }
  .barra:has(.menu-stato:checked) .vetrina,
  .barra:has(.menu-stato:checked) .io { display: flex; }
  .barra:has(.menu-stato:checked) .apri-menu .apri { display: none; }
  .barra:has(.menu-stato:checked) .apri-menu .chiudi { display: block; }
}
/* IL MENU A SIMBOLI (Paolo, 5/10 sera: la variante B di GRAFICA, materiale/grafica/menu_simboli/). A destra
   della barra la borsa, il recupero (pallino ocra: e' una cosa da fare) o la mappa, e la persona con la sua
   tendina. Attenzione: `.barra nav { display:flex }` vince su `.menu-io`, da qui `.barra nav.menu-io`. */
.barra .io.simboli { gap: 2px; }
.barra .simbolo { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; color: #fff; cursor: pointer; list-style: none; }
.barra .simbolo::-webkit-details-marker { display: none; }
.barra .simbolo:hover { background: rgba(255,255,255,.14); text-decoration: none; }
.barra .simbolo svg { display: block; }
.barra .pallino { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #fff; color: var(--barra); font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--barra); }
.barra .pallino.ocra { background: var(--segno); color: #244747; }
.barra details.persona { position: relative; }
.barra details.persona[open] > summary { background: rgba(255,255,255,.18); }
.barra .persona .tendina { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 30;
  display: flex; flex-direction: column; padding: 6px; background: var(--carta); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.2); font-size: 14.5px; }
.barra .persona .tendina .nome { padding: 10px 12px 9px; font-weight: 600; border-bottom: 1px solid var(--bordo); margin-bottom: 4px; }
.barra .persona .tendina a { color: var(--testo); padding: 10px 12px; border-radius: 10px; }
.barra .persona .tendina a:hover { background: var(--accento-tenue); text-decoration: none; }
.barra nav.menu-io { display: none; }
@media (max-width: 950px) {
  .barra .io.simboli { display: flex; order: 0; flex-basis: auto; flex-direction: row; align-items: center; margin-left: auto; font-size: 13.5px; }
  .barra .io.simboli .simbolo { width: 44px; height: 44px; }
  .barra .io.simboli a.simbolo { padding: 0; border-bottom: 0; }
  .barra .io.simboli details.persona { display: none; }
  .barra .rapidi { margin-left: 0; }
  .barra .menu-io { order: 6; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; margin-top: -10px; }
  .barra .menu-io .nome { padding: 18px 0 2px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
  .barra .menu-io a { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
  .barra .menu-io a:last-child { border-bottom: 0; }
  .barra:has(.menu-stato:checked) nav.menu-io { display: flex; }
  .barra:has(.menu-stato:checked) .io.simboli { display: flex; }
  /* «dietro le quinte» nella barra chiusa non ci sta: sul telefono e' in testa al menu-io (CODICE) */
  .barra .io.simboli .vai-quinte { display: none; }
}
/* bandierina e tema vicini come le icone accanto; a 320 lo studente in beta ha cinque tasti e il logo, e il ☰
   andava su una seconda riga (barra a 118 px invece di 64): GRAFICA, difetto 100 */
.barra .rapidi { gap: 2px; }
@media (max-width: 359px) { .barra { column-gap: 6px; } }
/* Fra 951 e 1120 il nome si toglie e resta il logo (sotto i 951 c'è il
   menu a scomparsa, e il nome ci sta di nuovo): con le voci del sito
   e quelle personali la barra non ci stava e andava a capo, da 52 a 83 px
   su due o tre righe (trovato da Paolo stringendo la finestra, misurato da
   GRAFICA GDT il 22 settembre 2026). */
@media (min-width: 951px) and (max-width: 1120px) {
  .marchio { font-size: 0; gap: 0; }
}
/* Sui telefoni stretti il marchio e' il solo logo: col nome per esteso,
   tema, «Entra» e menu non stanno su una riga da 375 px. */
@media (max-width: 520px) {
  .marchio { font-size: 0; gap: 0; }
  .marchio img { height: 34px; }
}

/* ---- pagine pubbliche ----
   Colonna stretta e testo grande come nel resto del sito: chi legge qui
   sta valutando se spendere mille euro, non sta scorrendo una vetrina. */
.apertura { margin: 10px 0 34px; }
.apertura h1 { font-family: var(--cond); font-size: var(--titolo-pagina); line-height: .95; letter-spacing: -.01em;
               margin-bottom: 14px; }
/* Un modulo o un documento che sta nell'apertura della vetrina, come
   l'iscrizione e la conferma dell'ordine: il titolo e' quello dei
   documenti, taglia e carattere (griglia B). */
.apertura.documento h1 { font-family: var(--cond); font-size: var(--titolo-documento);
                         line-height: .95; letter-spacing: -.01em; }
.apertura .sottotitolo { font-size: 19px; color: var(--tenue); margin-bottom: 0; }

.pubblica p { font-size: 17px; }
.pubblica h2 { margin-top: 34px; }
.pubblica .virgolette { border-left: 3px solid var(--evidenza);
                        padding: 2px 0 2px 16px; margin: 0 0 16px;
                        color: var(--testo); font-size: 17px; }   /* 17 e non 16,5: GRAFICA, recensioni, 27/9 */

/* Le schede dei corsi in vendita. Il prezzo si vede senza cercarlo: chi
   arriva qui deve capire subito cosa comprerebbe e quanto costa. */
.vendita { display: grid; gap: 16px; margin: 24px 0 8px;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vendita .carta { background: var(--carta); border: 1px solid var(--bordo);
                  border-radius: var(--raggio); padding: 20px 22px; box-shadow: var(--ombra);
                  display: flex; flex-direction: column; gap: 10px; }
.vendita h3 { margin: 0; font-size: 18px; line-height: 1.3; }
/* La scheda corta si clicca tutta: il link del titolo si allarga sopra la
   scheda con uno pseudo-elemento, e il contorno per la tastiera lo disegna
   la scheda, perché lo pseudo-elemento il fuoco non lo mostra. */
.vendita .carta { position: relative; transition: border-color .15s; }
.vendita .carta:hover { border-color: var(--accento); }
.vendita .carta:focus-within { outline: 2px solid var(--accento); outline-offset: 2px; }
.vendita .carta h3 a::after { content: ''; position: absolute; inset: 0; }
.vendita .carta h3 a:focus-visible { outline: none; }
.vendita .sommario-scheda { margin: 0; display: -webkit-box; -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical; overflow: hidden; }
/* Il prezzo sta in fondo alla scheda, e l'etichetta sulla riga piccola:
   così i prezzi di una fila stanno alla stessa altezza, qualunque sia il
   titolo e qualunque la cifra (Paolo, misurato da GRAFICA). */
.vendita .carta > .prezzo { margin-top: auto; }
.vendita .prezzo small .etichetta-scheda { font-family: var(--din); margin-left: 6px; vertical-align: 1px;
                                           line-height: 1.2; padding: 1px 7px; }
/* La copertina del prodotto (GRAFICA, LEGGIMI delle copertine, «Dove vanno
   nelle pagine»). Sopra i 600 px il quadrato sta in cima alla scheda, a
   tutta larghezza e a filo dei bordi; 18 px sotto contando i 10 del gap.
   Sul telefono va a sinistra di titolo e prezzo, 121 × 121, e il resto
   della scheda scende sotto: in cima avrebbe allungato la pagina di oltre
   ottomila pixel. */
.vendita .copertina-tessera { display: block; width: calc(100% + 44px); max-width: none;
                              height: auto; aspect-ratio: 1; object-fit: cover;
                              margin: -20px -22px 8px; border-radius: var(--raggio) var(--raggio) 0 0; }
@media (max-width: 600px) {
  /* minmax(0, 1fr) e min-width: 0, altrimenti un titolo o un prezzo
     lunghi allargano la colonna e la scheda esce dallo schermo. */
  .vendita .carta:has(> .copertina-tessera) { display: grid; grid-template-columns: 121px minmax(0, 1fr);
                                              column-gap: 14px; row-gap: 10px; align-items: start; }
  .vendita .carta:has(> .copertina-tessera) > * { grid-column: 1 / -1; min-width: 0; }
  .vendita .carta:has(> .copertina-tessera) > h3 { overflow-wrap: anywhere; }
  .vendita .carta:has(> .copertina-tessera) > .prezzo { font-size: 28px; }
  /* Una scheda senza prezzo, come le tre della home: il titolo prende le
     due righe e si centra sul quadrato, invece di lasciare un vuoto sotto. */
  .vendita .carta:has(> .copertina-tessera):not(:has(> .prezzo)) > h3 { grid-row: 1 / span 2; align-self: center; }
  .vendita .carta > .copertina-tessera { grid-column: 1; grid-row: 1 / span 2; width: 121px;
                                         margin: 0; border-radius: var(--raggio); }
  .vendita .carta:has(> .copertina-tessera) > h3 { grid-column: 2; grid-row: 1; }
  .vendita .carta:has(> .copertina-tessera) > .prezzo { grid-column: 2; grid-row: 2; }
}
/* L'orizzontale nella pagina del prodotto: a tutta colonna, 28 px sotto. */
.copertina-larga { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 840;
                   border-radius: var(--raggio); margin: 0 0 28px; }

/* TUTTO LARGO (Paolo, 27/9): «ovunque così», poi «Tutto largo, anche i
   testi». Nella pagina da 1180 niente prende piu' una colonna da 740 con il
   vuoto a destra: testi, schede e pannelli arrivano al bordo. Restano piu'
   stretti solo il riquadro dell'accesso (400, al centro) e l'esercizio
   pratico (880), che hanno regole loro. Le copertine non si tagliano (GRAFICA,
   27/9): intere, larghe quanto la loro colonna. */
.pubblica img.copertina-larga { aspect-ratio: auto; object-fit: fill; width: 100%; height: auto; }
/* l'ingresso dell'affiancamento: fuori dalla scheda la copertina non supera quella delle schede (GRAFICA, difetto 148) */
@media (min-width: 1100px) { .apertura + img.copertina-larga { max-width: 740px; } }

/* LA SCHEDA DEL CORSO (passo 2, GRAFICA, 27/9; `.scheda-corso` e non `.scheda`,
   che e' gia' la scheda di un corso nel catalogo): copertina e corpo a
   sinistra fino al riquadro dell'acquisto da 348 a destra, fermo sotto la
   barra mentre si scorre. Sotto i 1100 una colonna sola: copertina,
   riquadro, corpo, a tutta larghezza. */
.scheda-corso > img.copertina-larga, .scheda-corso > .acquisto, .scheda-corso > .corpo { margin: 0; }
.scheda-corso { display: grid; row-gap: 28px; }
.acquisto { padding: 20px 22px; background: var(--carta); border: 1px solid var(--bordo);
            border-radius: var(--raggio); display: flex; flex-direction: column; gap: 12px; }
.acquisto > * { margin: 0; }
.acquisto h2 { margin: 6px 0 0; font-size: 17px; }
/* In colonna e senza andare a capo: il «flex-basis: 100%» del .ritorno.a-capo,
   pensato per le righe, in colonna diventa un'altezza, e a 618 px mandava il
   link in una seconda colonna accanto al pulsante (Paolo, 27/9). */
.acquisto .azioni { flex-direction: column; flex-wrap: nowrap; align-items: stretch; margin: 0; }   /* i 18 e 28 di .azioni facevano 70 px vuoti sopra il collegamento all'Aiuto */
.acquisto .azioni > .ritorno.a-capo { flex-basis: auto; }
.acquisto .azioni .bottone { justify-content: center; }
.acquisto .gia-tuo { margin: 0; flex-direction: column; align-items: stretch; gap: 12px; }
.acquisto .gia-tuo .bottone { justify-content: center; }
.acquisto .invito-recensione { margin: 0; }
/* Il riquadro dell'acquisto uguale in tutte le pagine (GRAFICA, 27/9): «IVA
   inclusa» sotto il prezzo, e l'ultima riga di spiegazione a 15. */
.acquisto .iva-inclusa { display: block; margin-top: 2px; }
.acquisto > p.calmo:last-child { font-size: 15px; line-height: 1.45; }
.acquisto .azioni > .ritorno { font-size: 15px; }
.acquisto .aiuto-qui-riga { margin: 0; }
/* fra 600 e 1100 il riquadro non va largo quanto la pagina: a 1024 il
   pulsante sarebbe stato di 960 px (GRAFICA, 27/9) */
@media (max-width: 1099px) { .acquisto { max-width: 560px; } }
.scheda-corso > .corpo > :first-child { margin-top: 0; }
/* in «Cosa apre» la riga grigia della sessione va a capo col suo interlinea, non con quello del nome (GRAFICA, 27/9) */
.scheda-corso li .calmo { line-height: 1.45; }
@media (min-width: 1100px) {
  .scheda-corso { grid-template-columns: minmax(0, 1fr) 348px; column-gap: clamp(32px, 4vw, 52px);
            grid-template-areas: "cop acq" "corpo acq"; grid-template-rows: auto 1fr; row-gap: 32px; }
  .scheda-corso > img.copertina-larga { grid-area: cop; }
  .scheda-corso > .corpo { grid-area: corpo; }
  .acquisto { grid-area: acq; align-self: start; position: sticky; top: 76px; }
  /* il libro: la figura sta gia' nell'apertura, qui solo testo e riquadro */
  .scheda-corso.senza-copertina { grid-template-areas: "corpo acq"; grid-template-rows: auto; }
}

/* ---- le pagine di testo a tutta larghezza (GRAFICA, seconda lista del 27/9) ----
   A 1140 una riga di testo a 17 px teneva 140 battute: il testo cresce, e le
   pagine lunghe prendono una colonna di lato, come la scheda del corso. */
@media (min-width: 1100px) {
  /* T1 */
  .pubblica p, .pubblica li, .lettura.legale p, .lettura.legale li { font-size: 19px; line-height: 1.6; }
}

/* T2, i testi legali: a sinistra l'indice dei titoli di LEGAL, interi, fermo
   sotto la barra; a destra il testo, tabelle dei cookie comprese. Sotto i
   1100 l'indice non c'e' e il testo e' quello di prima. */
.indice-legale { display: none; }
.con-indice h2[id] { scroll-margin-top: 80px; }
@media (min-width: 1100px) {
  .con-indice { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .indice-legale { display: block; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto;
                   padding-top: 8px; }
  .indice-legale ol { list-style: none; margin: 0; padding: 0; }
  .indice-legale a { display: flex; align-items: center; min-height: 36px; padding: 4px 0; font-size: 15px;
                     line-height: 1.3; color: var(--testo); text-decoration: none; }
  .indice-legale a:hover { text-decoration: underline; }
  .indice-legale a.in-lettura { color: var(--accento); font-weight: 600; }
}

/* T3, il modulo del recesso: i tre campi su una riga, il pulsante sotto a
   sinistra, largo quanto il testo. Etichette e nota restano quelle
   dell'art. 54-bis (LEGAL). */
@media (min-width: 1100px) {
  .funzione-recesso { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
  .funzione-recesso > label { margin: 0; }
  .funzione-recesso > :not(label):not(input) { grid-column: 1 / -1; }
  .funzione-recesso .azioni { justify-content: flex-start; margin: 0; }
  .funzione-recesso .azioni button { width: auto; }
}

/* T4, l'Aiuto: la ricerca in alto a tutta larghezza; sotto, a sinistra i
   temi uno per riga, fermi, quello in lettura in accento; a destra le
   domande. Al telefono le pastiglie restano quelle di prima. Mentre si
   cerca i temi spariscono, e le risposte prendono tutta la riga. */
@media (min-width: 1100px) {
  .aiuto-colonne { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 48px; align-items: start;
                 margin-top: 24px; }
  .aiuto-colonne:has(> .aiuto-temi[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .aiuto-colonne > .aiuto-temi { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0;
                               position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
  .aiuto-colonne > .aiuto-temi[hidden] { display: none; }
  .aiuto-temi a.chip { height: auto; min-height: 40px; padding: 4px 0; border: 0; background: none; border-radius: 0;
                       font-size: 15px; line-height: 1.3; color: var(--testo); }
  .aiuto-temi a.chip:hover { text-decoration: underline; }
  .aiuto-temi a.chip.in-lettura { color: var(--accento); font-weight: 600; }
  .aiuto-elenco > .aiuto-tema:first-of-type h2, .aiuto-elenco > .aiuto-risultati + .aiuto-tema h2 { margin-top: 0; }
}

/* T5, «Vi parlo di me»: il racconto a sinistra, Visione e Missione a destra
   in due riquadri come quello dell'acquisto, fermi; sotto i 1100 in fondo. */
.con-lato { display: grid; row-gap: 28px; }
.con-lato > .corpo > :first-child { margin-top: 0; }
.con-lato > .lato { display: flex; flex-direction: column; gap: 16px; }
.riquadro-lato { padding: 20px 22px; background: var(--carta); border: 1px solid var(--bordo);
                 border-radius: var(--raggio); }
.riquadro-lato h2 { margin: 0 0 8px; font-size: 17px; }
.riquadro-lato p { margin: 0; }
@media (min-width: 1100px) {
  .con-lato { grid-template-columns: minmax(0, 1fr) 348px; column-gap: clamp(32px, 4vw, 52px); align-items: start; }
  .con-lato > .lato { position: sticky; top: 76px; }
  .riquadro-lato p { font-size: 17px; }
}

/* T6, «Cosa dicono di me»: le citazioni in riquadri, tre per riga da 1100,
   due da 600, una al telefono. */
.citazioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 24px 0; }
.citazioni > .virgolette { margin: 0; padding: 18px 20px; background: var(--carta); border: 1px solid var(--bordo);
                           border-left: 3px solid var(--segno); border-radius: var(--raggio); }
@media (min-width: 600px) { .citazioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* da 1100 quattro per riga, cosi' le sette fanno 4 + 3 (GRAFICA, R1) */
@media (min-width: 1100px) { .citazioni { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* la tabella dei cookie al telefono: ogni riga un blocco, con l'intestazione
   di LEGAL sopra ogni valore (GRAFICA, R3) */
@media (max-width: 599px) {
  table.cookie thead { display: none; }
  /* la .tabella al telefono scorre di lato e non va a capo: qui no, se no
     restava larga 1040 e «A cosa serve» si tagliava (GRAFICA, R3) */
  table.cookie, table.cookie tbody, table.cookie tr { display: block; width: auto; min-width: 0; }
  table.cookie { overflow: visible; white-space: normal; }
  table.cookie tr { padding: 10px 0; border-bottom: 1px solid var(--bordo); }
  table.cookie td { display: block; border: 0; padding: 2px 0; white-space: normal; overflow-wrap: anywhere; }
  table.cookie tr:hover td { background: none; }
  table.cookie td::before { content: attr(data-etichetta); display: block; font-size: 12.5px; color: var(--tenue); }
}

.vendita .prezzo { font-family: var(--cond); font-size: 34px; font-weight: 600; color: var(--accento);
                   font-variant-numeric: tabular-nums; line-height: 1; }
/* «(IVA inclusa)» accanto al prezzo, grande la metà e dello stesso colore:
   Gloria, 22 settembre 2026, voleva che si vedesse. Il prezzo senza IVA
   resta sotto, piccolo, come chiede LEGAL. */
.iva-inclusa { font-size: .5em; font-weight: 600; white-space: nowrap;
               letter-spacing: .01em; vertical-align: .18em; }
.vendita .prezzo small { display: block; font-size: 12.5px; font-weight: 400;
                         font-family: var(--din); margin-top: 6px; line-height: 1.4;
                         color: var(--tenue); }
.vendita ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--tenue); }
.vendita ul li { margin-bottom: 3px; }
.vendita .bottone { margin-top: auto; }

/* ---- testo ---- */
/* I titoli dei documenti (termini, privacy, cookie, informativa contatti,
   recesso, accesso, iscrizione) in Condensed, come ha detto Paolo il 21/9
   (GRAFICA, giro del 27/9). La taglia resta 30, 26 al telefono. */
h1 { font-family: var(--cond); font-size: var(--titolo-documento); line-height: .95; letter-spacing: -.01em;
     font-weight: 700; margin: 8px 0 20px; }
h2 { font-size: 21px; letter-spacing: -.01em; font-weight: 700; margin: 30px 0 10px; }
h3 { font-weight: 600; }
h2 a { color: inherit; text-decoration: none; }
p  { margin: 0 0 14px; }
a  { color: var(--accento); }

.calmo    { color: var(--tenue); font-size: 14px; }
.errore   { color: var(--ko); font-weight: 550; }
/* l'errore sotto il suo campo, in cassa (GRAFICA, difetto 63); il bordo del campo sbagliato sta dopo i campi */
small.errore-campo { font-size: 13px; font-weight: 500; }
/* Un modulo respinto (gettone scaduto): stessa forma dell'avviso, rosso. */
.avviso.respinto { background: color-mix(in srgb, var(--ko) 12%, transparent);
                   color: color-mix(in srgb, var(--ko) 70%, var(--testo)); }
/* Il collegamento dentro l'avviso prendeva il colore di tutti i
   collegamenti, e sul fondo tinto faceva 3,87. Prende quello del testo
   intorno, e resta riconoscibile per la sottolineatura (GRAFICA GDT). */
.avviso a { color: inherit; }
/* Le briciole (bricioleNav() in bootstrap.php), disegno di GRAFICA
   approvato da Paolo il 22/9/2026. Una riga sola: da 1000 px il titolo si
   legge intero, fra 601 e 999 l'ultima voce si accorcia coi puntini e il
   `title` la dice intera, sul telefono resta solo lei, «‹ titolo», su due
   righe al massimo. Il padding di 12 px col margine uguale e contrario
   porta il bersaglio a 45 px senza spostare niente. Dentro ci sono solo
   collegamenti: il nome della pagina in cui sei lo dice l'h1, e i comandi
   («Vedi come lo studente») stanno coi comandi. */
.briciole { display: flex; align-items: baseline; column-gap: 8px; font-size: 13px;
            line-height: 1.6; color: var(--tenue); margin: 0 0 10px; }
.briciole a { flex: none; color: var(--tenue); text-decoration: none; white-space: nowrap;
              padding: 12px 0; margin: -12px 0; }
.briciole > a:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.briciole a:hover, .briciole a:focus-visible { color: var(--testo); text-decoration: underline;
                                               text-underline-offset: 3px; }
.briciole .sep { flex: none; color: color-mix(in srgb, var(--tenue) 55%, transparent); }
@media (max-width: 600px) {
  .briciole > :not(:last-child) { display: none; }
  .briciole > a:last-child { white-space: normal; display: -webkit-box;
                             -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .briciole > a:last-child::before { content: "‹\00a0" / ""; }
}

/* ---- riquadri ---- */
.riquadro {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 26px 24px;
  box-shadow: var(--ombra);
}
.riquadro.stretto { max-width: 400px; margin: 48px auto; }

/* ---- moduli ---- */
label { display: block; margin: 0 0 16px; font-size: 14px; color: var(--tenue); }
/* Le caselle di spunta restano fuori: prendendo questa regola diventavano
   un riquadro alto quaranta pixel largo quanto la riga, ed e' quello che
   si vedeva accanto a «Sblocco sequenziale» nell'editor. */
input:not([type=checkbox]):not([type=radio]), textarea, select {
  display: block; width: 100%; margin-top: 6px;
  min-height: var(--alto);
  padding: 10px 13px;
  font: inherit; font-size: 16px; line-height: 20px; color: var(--testo);
  background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio);
}
/* L'elenco a discesa lo disegniamo noi: quello di sistema su Mac ha una
   doppia freccia e un'altezza sue, e in fila con un campo di testo si
   vedeva che erano due oggetti di due mondi. La freccia e' un tono medio
   che tiene sia sul chiaro sia sullo scuro. */
select {
  appearance: none; -webkit-appearance: none; padding-right: var(--freccia);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237d9598' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox], input[type=radio] {
  flex: none; width: 18px; height: 18px; margin: 0; padding: 0;
  accent-color: var(--accento);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accento); outline-offset: -1px; border-color: transparent;
}
/* il campo sbagliato col bordo dell'errore: qui, dopo le regole dei campi, che se no lo coprono (GRAFICA, difetto 63) */
input[aria-invalid=true]:not([type=checkbox]):not([type=radio]), textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--ko); }
.codice-input { font-size: 26px; letter-spacing: .4em; text-align: center; }

/* I comandi minuti — la barra, il lettore, le frecce dell'editor, il
   tasto del tema — non sono comandi di un modulo: hanno un'altezza loro e
   la tengono. Si dichiarano qui, accanto alla regola che li toccherebbe,
   perche' domani chi aggiunge un pulsante piccolo sappia dov'e' la porta. */
.barra button, .barra .bottone, .chip, .tema, .suoni,
.moduli .in-linea button { min-height: 0; }

button, .bottone {
  display: inline-block;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 20px;
  min-height: var(--alto);
  border-radius: var(--raggio); border: 1px solid var(--testo);
  background: var(--carta); color: var(--testo);
  padding: 10px 18px; cursor: pointer; text-align: center; text-decoration: none;
  transition: .15s;
}
button:hover:not(:disabled), .bottone:hover { border-color: var(--accento); color: var(--accento); }
button:disabled { opacity: .35; cursor: default; }

/* Il bottone principale è pieno del verde di Gloria. Lo decide una classe
   e non il tipo: le opzioni del quiz e i due tasti del ripasso sono
   anch'essi submit, e devono restare col contorno. */
button.primario, .bottone:not(.secondario) {
  background: var(--accento); border-color: var(--accento); color: var(--su-accento);
}
button.primario:hover, .bottone:not(.secondario):hover { opacity: .9; color: var(--su-accento); }
/* I pulsanti pieni tengono il colore della scritta anche sotto il puntatore. La regola di
   button:hover qui sopra (testo color accento) pesa piu' del loro .x:hover, e su un fondo
   accento la scritta spariva: «Fai la fattura e scarica l'XML» in Oggi (Paolo, 3/10). Qui
   tutti i pulsanti pieni del sito che non avevano gia' la loro regola. */
.dd-si:hover:not(:disabled), .bolla-aiuto:hover:not(:disabled) { color: var(--su-accento); }
button.pastiglia.qui:hover:not(:disabled) { color: var(--carta); }
.apri-correzione:hover:not(:disabled) { color: #f7f3ea; }
.comandi-audio .play:hover:not(:disabled) { color: var(--sfondo); }

/* Da tastiera si deve vedere dove si e'. Fino al 6 settembre 2026 il focus
   era visibile solo sui campi di testo: bottoni, link, opzioni del quiz e
   carte dei corsi non davano nessun segno. */
button:focus-visible, .bottone:focus-visible, a:focus-visible {
  outline: 2px solid var(--accento); outline-offset: 2px;
}
.bottone small { display: block; font-weight: 400; opacity: .85; font-size: 12.5px; margin-top: 2px; }
.bottone.secondario { background: var(--carta); color: var(--testo); }
.bottone.largo { width: 100%; }

/* I comandi di un modulo stanno su una riga e si allineano al centro.
   Senza `align-items` il pulsante piu' semplice si stirava in altezza per
   riempire la riga, e accanto a «Elimina» — che porta un margine suo — si
   vedeva un «Salva» alto il doppio e piu' in alto. */
.azioni { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
          margin: 18px 0 28px; }
/* Lo stato sta in una riga sua, sopra i pulsanti, e il pulsante fa una cosa
   sola (COPY, giro 1, 26 settembre 2026): «È già tuo.» e sotto «Apri il
   corso», non piu' «È già tuo — vai a studiare» sul pulsante. Il ritorno
   all'elenco e' un collegamento di testo, non un pulsante. */
.azioni > .stato { flex-basis: 100%; margin: 0; font-weight: 600; }
/* i pulsanti in testa al corso, tutti alla stessa altezza e con la riga piccola in riga (GRAFICA, difetto 99) */
.azioni.avvio { align-items: stretch; }
.azioni.avvio .bottone { display: inline-flex; align-items: center; justify-content: center; gap: .45em; flex-wrap: wrap; }
.azioni.avvio .bottone small { display: inline; margin: 0; font-size: 15px; font-weight: 400; opacity: .8; }
.azioni.avvio .bottone small::before { content: "·"; margin-right: .4em; }
@media (max-width: 600px) { .azioni.avvio .bottone { flex: 1 1 100%; } }
/* sotto i 400 px la riga sta ancora su una riga sola (375, l'iPhone SE); sotto i 370 la riga piccola va sotto,
   senza il puntino (GRAFICA, difetto 99) */
@media (max-width: 400px) { .azioni.avvio .bottone { padding-left: 14px; padding-right: 14px; gap: .35em; } .azioni.avvio .bottone small { font-size: 14px; } .azioni.avvio .bottone small::before { margin-right: .3em; } }
@media (max-width: 369px) { .azioni.avvio .bottone { flex-direction: column; gap: 2px; } .azioni.avvio .bottone small::before { content: none; } }
/* Il collegamento di testo nella riga dei pulsanti (GRAFICA, 26/9): l'accento,
   sottolineato, peso 400 perche' non sembri un pulsante, lo stesso corpo del
   pulsante, e alto 44 perche' si tocchi bene col dito. «a-capo» lo manda
   sotto, allineato a sinistra col pulsante. */
.azioni > .ritorno { display: inline-flex; align-items: center; min-height: 44px;
                     color: var(--accento); text-decoration: underline; font-weight: 400;
                     font-size: 16px; }
.azioni > .ritorno.a-capo { flex-basis: 100%; order: 9; }
.bivio  { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0 8px; }
.bivio .bottone { flex: 1 1 13rem; }
/* la scritta al centro anche quando l'altro pulsante ha la riga piccola e sono alti uguali (GRAFICA, difetto 120) */
.bivio .bottone { display: flex; flex-direction: column; justify-content: center; }

/* ---- corsi ed elenchi ---- */
.corso { margin: 28px 0; border-top: 2px solid var(--testo); padding-top: 14px; }
.corso-testa { display: flex; align-items: baseline; justify-content: space-between;
               gap: 16px; flex-wrap: wrap; }
.corso-testa h2 { margin: 0; }
.conto { color: var(--tenue); font-size: 13.5px; margin: 0; }
.conto strong { color: var(--accento); font-variant-numeric: tabular-nums; }

.giornate, .blocchi { list-style: none; margin: 10px 0 0; padding: 0; }
.giornate li, .blocchi li { border-bottom: 1px solid var(--bordo); }
.giornate a, .blocchi a {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 12px; margin: 0 -12px;
  border-radius: var(--raggio); text-decoration: none; color: inherit;
}
.giornate a:hover, .blocchi a:hover { background: var(--accento-tenue); }
.num, .cod {
  flex: 0 0 auto; min-width: 3.2rem;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  color: var(--accento); font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.tit { flex: 1 1 auto; }
.quanti { flex: 0 0 auto; font-size: 12.5px; color: var(--tenue);
          font-variant-numeric: tabular-nums; }
/* a 320 «riletto · 1 domanda · 1 punto esame» non ci sta accanto al titolo: va a capo invece di tagliarsi (LAB, difetto 119) */
@media (max-width: 400px) { .blocchi .quanti { flex: 0 1 auto; text-align: right; } }
.blocchi .tipo {
  flex: 0 0 auto; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); border: 1px solid var(--bordo); border-radius: var(--raggio-minuto); padding: 2px 6px;
}
.blocchi li.t-quiz .tit { font-weight: 600; }
.blocchi li.letto .tit { color: var(--tenue); }
.blocchi li.letto .tit::after { content: " ·"; color: var(--ok); font-weight: 700; }

.avanz { flex: 0 0 64px; }
.barra-avanz { display: block; height: 3px; background: var(--bordo); border-radius: 0; overflow: hidden; }
.barra-avanz i { display: block; height: 100%; background: var(--accento); transition: width .3s ease; }

/* ---- lettura ----
   Niente scheda intorno al testo: la pagina e' il testo. Sul telefono e'
   una colonna sola nell'ordine di sempre, riassunto, testo, punto esame;
   dal desktop largo in poi «Da ricordare» e «Punto esame» stanno in una
   colonna a destra, ferma mentre il testo scorre. Il fianco arriva da
   `rendi.php` gia' separato; `display: contents` lo scioglie nel flusso
   sul telefono e `order` rimette il riassunto prima del testo. */
.lettura {
  position: relative;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
/* Solo l'articolo di una lezione ha corpo e fianco; le pagine legali usano
   `.lettura` da sole e restano una colonna. */
.lettura.articolo { display: flex; flex-direction: column; }
.lettura.articolo .fianco { display: contents; }
/* L'ORDINE SUL TELEFONO, dove le due colonne diventano una sola: il
   riassunto prima (si sa cosa si sta per ascoltare), poi il testo, poi il
   punto esame, poi l'appunto, e in fondo i comandi. L'appunto era rimasto
   senza numero quando è arrivato il quaderno, e un figlio senza numero
   vale zero: finiva SOPRA, appena sotto il titolo — si chiedeva di
   scrivere quello che si voleva ricordare prima di aver letto una riga. */
.lettura.articolo .b-sintesi { order: 1; }
/* UN LIMITE ALLA RIGA anche dove le colonne sono una sola. Stava solo
   sopra i 1100 pixel, quindi fra 768 e 1099 — un iPad, una finestra a
   meta' schermo — il testo prendeva tutta la pagina: 129 caratteri per
   riga a 1024, misurati da GRAFICA GDT il 21 settembre 2026 col carattere
   vero sul testo vero. Adesso sono 92, quasi quanti sul portatile (89).
   ATTENZIONE, `70ch` NON VUOL DIRE SETTANTA CARATTERI: il `ch` e' la
   larghezza dello zero, e in Barlow le minuscole sono piu' strette. Dove
   fermare la riga in caratteri veri si decide insieme alla scala del
   testo, per tutte le larghezze insieme: qui non si stringe l'iPad piu'
   del portatile. Sul telefono non morde; sopra i 1100 lo riscrive la
   griglia. */
.lettura.articolo .corpo { order: 2; max-width: 70ch; }
.lettura.articolo .b-punti_esame { order: 3; }
.lettura.articolo .appunto { order: 4; }
.lettura.articolo .comandi { order: 5; }
/* IL TITOLO NON RIMPICCIOLISCE ENTRANDO. Il corso e la lezione hanno il
   titolo a 52 pixel, e a 40 sul telefono; il contenuto lo aveva a 34 fino a
   1099 pixel, quindi scendendo nel corso su un iPad si passava da 52 a 34,
   e sul telefono da 40 a 34 (GRAFICA GDT, 21 settembre 2026). Adesso segue
   le stesse misure.
   E LO STESSO CARATTERE: il condensato del corso e della lezione, non il
   Barlow pieno, che scendendo nel corso sembrava un altro sito. Deciso da
   Paolo il 21 settembre sui numeri di GRAFICA: a 52 pixel in una colonna da
   760 il condensato tiene 42 caratteri per riga contro 34, i titoli che
   vanno su tre righe sul portatile passano da 19 a 3 su 624, e sul telefono
   un titolo di 59 caratteri scende da cinque righe a tre. L'interlinea e' a
   meta' fra i due: il corso ha titoli corti da una riga, un contenuto
   arriva a tre, e a .95 le righe si toccherebbero. */
.lettura.articolo h1 { font-family: var(--cond); font-size: var(--titolo-pagina); line-height: 1;
                       letter-spacing: -.01em; }
.cod-grande { font-size: 12.5px; font-weight: 600; color: var(--accento);
              letter-spacing: .12em; text-transform: uppercase;
              font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.cod-grande .obiettivo { margin-left: 10px; text-transform: none; letter-spacing: 0;
                         color: var(--tenue); font-weight: 400; }
/* A che punto della lezione si e': «2 di 20», accanto al codice. */
.cod-grande .dove { margin-left: 10px; color: var(--tenue); font-weight: 500;
                    text-transform: none; letter-spacing: .02em; }
/* senza il codice del blocco (allo studente, difetto 38) «1 di 30» segue la lezione senza il doppio spazio */
.cod-grande .lezione + .dove { margin-left: 0; }
/* In quale lezione siamo. Sta davanti al codice ed è la cosa più visibile
   della riga: chi ascolta con la pagina a mezzo schermo deve capirlo senza
   leggere le briciole. */
.cod-grande .lezione { display: inline-block; margin-right: 10px; padding: 2px 8px;
                       border-radius: 2px; background: var(--accento); color: var(--su-accento);
                       font-size: 13px; letter-spacing: .04em; }
/* Il codice davanti a ogni voce dell'elenco: scorrendo una lezione da
   trentasette blocchi si deve sapere a che punto si è. Numeri tabellari,
   così le colonne si incolonnano da sole. */
/* Dal 9/10 il numero c'e' in tutti gli elenchi, casi, strumenti, esercizi e video compresi: la colonna vale per tutti
   (Paolo: «2Rivelatore di placca», attaccato al titolo, nella lista dei casi). */
.tit .cod-riga { display: inline-block; min-width: 3.6em; margin-right: 10px;
                             color: var(--accento); font-weight: 600;
                             font-variant-numeric: tabular-nums; }
.lettura h1 { margin: 8px 0 22px; }

/* Le tre misure che scalano insieme: la colonna di lato, lo spazio fra le
   due colonne e il corpo del carattere. Su un quattordici pollici il testo
   passa da diciotto a poco piu' di diciannove e la colonna di lato da 320
   a 350; su uno schermo piu' grande si fermano, perche' oltre non si legge
   meglio. Il corpo non supera i 740: e' il limite oltre il quale l'occhio
   perde il capo della riga tornando a sinistra. */
@media (min-width: 1100px) {
  .lettura.articolo { display: grid;
                      grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 370px);
                      column-gap: clamp(40px, 3.6vw, 64px);
                      grid-template-areas: "cod fianco" "titolo fianco" "corpo fianco"
                                           "appunto fianco" "comandi fianco";
                      align-items: start; }
  .lettura.articolo .cod-grande { grid-area: cod; }
  .lettura.articolo h1 { grid-area: titolo; max-width: 760px; }
  .lettura.articolo .corpo { grid-area: corpo; max-width: 740px;
                             font-size: clamp(18px, 1.28vw, 20px); }
  .lettura.articolo .fianco { display: flex; flex-direction: column; gap: 20px; grid-area: fianco;
                              position: sticky; top: 72px; }
  .lettura.articolo .fianco .blocco, .lettura.articolo .fianco .chiave,
  .lettura.articolo .fianco .esame { margin: 0; }
  .lettura.articolo .appunto { grid-area: appunto; max-width: 740px; }
  .lettura.articolo .comandi { grid-area: comandi; max-width: 740px; }
}

/* ---- i video ----
   Il riquadro tiene la proporzione anche prima che il video parta, così
   la pagina non salta quando arriva il primo fotogramma. Il fondo è il
   verde scuro quasi nero, non il nero: niente nero, nemmeno qui. */
.video { margin: 0 0 24px; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9;
               background: #0b1717; border-radius: var(--raggio); }
/* La descrizione sotto il video e' testo da leggere, non una nota: il colore
   del testo, e un capoverso per ogni a capo (didascaliaVideo(), app/rendi.php;
   GRAFICA, 26 settembre 2026). */
.video figcaption { max-width: 740px; margin-top: 16px; font-size: 16px; line-height: 1.6;
                    color: var(--testo); }
.video figcaption p { margin: 0 0 10px; }
.video figcaption p:last-child { margin-bottom: 0; }
/* La spunta «vai avanti quando l'audio finisce» vale per l'audio: su una
   pagina che non ne ha, prometterebbe una cosa che non succede. */
.lettura.articolo:not(:has(audio)):not(:has(video)) .seguito { display: none; }
@media (min-width: 1100px) {
  /* Una pagina di solo video non ha la colonna di destra: senza questa
     regola il video resterebbe largo 680 pixel con un vuoto accanto.
     LE AREE QUI DENTRO VANNO TENUTE IN PARI CON QUELLE DI SOPRA: sono lo
     stesso elenco senza la colonna di lato, e un'area che sta di là e non
     di qua non sparisce — il figlio che la porta si fa mettere in una
     colonna inventata dalla griglia, e la pagina diventa a due colonne.
     E' successo il 20 settembre 2026 con `appunto`, appena aggiunta di
     sopra: il video e' uscito largo 521 invece di 840 e l'appunto e' finito
     di fianco. */
  .lettura.articolo:not(:has(.fianco)) { grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "cod" "titolo" "corpo" "appunto" "comandi"; }
  /* IL VIDEO PRENDE TUTTA LA PAGINA, IL TESTO NO. Con la griglia B la
     lezione col video e' larga 1180 come le altre (Paolo, paolo-60), e il
     video la prende tutta: 1140 × 641, e i capitoli sotto, che sono la sua
     linea del tempo, gli stanno larghi uguale, come prima della griglia. La
     didascalia e il resto del corpo restano nei 740 del testo. La sera del
     26 settembre 2026 il video era finito anche lui a 740, con 400 pixel
     vuoti a destra (foto di Paolo su Clean & Seal): «come le altre» era
     stato capito male. Il video sta in `.blocco.b-video` (app/rendi.php). */
  .lettura.articolo:has(.video) .corpo > :not(.b-video) { max-width: 740px; }
}

/* La vecchia firma piccola in basso a destra (.lettura::after col nome) e'
   tolta: la filigrana dice gia' nome ed e-mail (GRAFICA, 27/9 sera). */
@media print {
  .barra, .scorri, .pie, .azioni { display: none; }
  .lettura { border: 0; box-shadow: none; }
}

/* ---- il testo segue la voce ---- */
/* Una frase per capoverso: a schermo si legge molto meglio, e la frase è
   l'unità che si illumina. Illuminare settecento caratteri per volta è una
   macchia, non una guida. */
/* Ogni frase ha lo stesso rientro della frase sincronizzabile e di quella
   tenuta, cosi' il testo parte dal titolo e una frase tenuta non salta di
   8 px (GRAFICA, pre-audit del 26 settembre 2026). */
.b-testo p.frase { margin: 0 0 6px -8px; padding: 2px 8px; }
.b-testo p.frase.apre { margin-top: 20px; }
.b-testo p.frase.apre:first-child { margin-top: 0; }

.sincronizzabile { cursor: pointer; border-radius: var(--raggio);
                   margin-left: -8px; padding: 2px 8px;
                   transition: background .35s ease, color .35s ease; }
.sincronizzabile:hover { background: color-mix(in srgb, var(--accento) 8%, transparent); }
h1.sincronizzabile { margin-left: -10px; padding: 4px 10px; }

/* L'evidenza della voce: il verde petrolio col testo bianco latte, uguale
   nel chiaro e nello scuro, per la frase e per il titolo (5,6:1). Scelta da
   Paolo il 27/9 sera, in chat con GRAFICA: il fondo chiaro col filo non la
   voleva. */
.adesso { background: #356b6f; box-shadow: 0 0 0 1px #356b6f; border-radius: var(--raggio); }
.adesso, .adesso * { color: #f7f3ea; }
/* Col mouse sopra, la frase che si sente si scurisce un poco (6,7:1): senza,
   `.sincronizzabile:hover`, piu' specifica, le metteva il fondo chiaro sotto
   il testo latte (Paolo, 27/9 sera, con due foto; riga di GRAFICA). */
.sincronizzabile.adesso:hover { background: #2d5e61; box-shadow: 0 0 0 1px #2d5e61; }
@media (prefers-reduced-motion: reduce) { .sincronizzabile { transition: none; } }

/* ---- blocchi tipizzati del corpo ---- */
.blocco { margin: 0 0 4px; }
.blocco.meta { display: inline-block; width: 48%; vertical-align: top; }
.b-testo p { margin: 0 0 14px; }
.b-testo p:last-child { margin-bottom: 0; }
.blocco img, .blocco video { max-width: 100%; border-radius: var(--raggio); }
.b-spazio hr { border: 0; border-top: 1px solid var(--bordo); margin: 26px 0; }
audio { width: 100%; margin: 4px 0 22px; border-radius: var(--raggio); }

/* DA RICORDARE: sta in alto, subito dopo l'audio. Serve a sapere cosa si
   sta per ascoltare, quindi viene prima del testo, non dopo. */
.chiave { background: var(--accento-tenue); border-radius: 0;
          border-top: 3px solid var(--accento);
          padding: 14px 18px 16px; margin: 0 0 24px; }
.chiave h3 { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--accento); }
.chiave ul { margin: 0; padding-left: 20px; }
.chiave li { margin: 6px 0; font-size: clamp(15.5px, 1.07vw, 17px); line-height: 1.5; }

/* PUNTO ESAME: chiude il contenuto. Il rosso è quello del docx di Gloria
   ma smorzato: a schermo per ore un rosso pieno è faticoso. */
.esame { border: 0; border-top: 3px solid var(--ko);
         background: color-mix(in srgb, var(--ko) 7%, transparent);
         border-radius: 0; padding: 14px 18px 16px; margin: 26px 0 0; }
.esame h3 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .12em;
            text-transform: uppercase; color: var(--ko); }
.esame ul { margin: 0; padding-left: 20px; }
.esame li { margin: 10px 0; font-size: 15.5px; line-height: 1.5; }
.esame li b { display: block; font-weight: 600; }
.esame li span { display: block; margin-top: 3px; }

/* ---- avanti e indietro ---- */
.scorri { display: flex; justify-content: space-between; gap: 16px; margin-top: 26px; }
.scorri a { max-width: 46%; text-decoration: none; font-size: 14.5px; color: var(--testo); }
.scorri a:hover { color: var(--accento); }
.scorri small { display: block; color: var(--tenue); font-size: 11.5px; font-weight: 600;
                text-transform: uppercase; letter-spacing: .12em; }
.scorri .succ { text-align: right; margin-left: auto; }

/* ---- carte: ripasso e quiz ---- */
.carta { max-width: 560px; margin: 20px auto; }
.progresso { color: var(--tenue); font-size: 12.5px; font-weight: 600; text-transform: uppercase;
             letter-spacing: .12em; margin-bottom: 14px;
             font-variant-numeric: tabular-nums; }
.domanda { font-size: 25px; line-height: 1.3; font-weight: 600;
           margin: 10px 0 24px; letter-spacing: -.01em; }
.soluzione { background: var(--accento-tenue); border-radius: 0; border-top: 3px solid var(--accento);
             padding: 16px 18px; margin-bottom: 22px; font-size: 16.5px; }
.valuta { display: flex; gap: 10px; margin-top: 6px; }
.valuta button { flex: 1; background: var(--carta); color: var(--testo); }
.valuta .si { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--bordo)); }
.valuta .no { color: var(--ko); border-color: color-mix(in srgb, var(--ko) 40%, var(--bordo)); }
.valuta .si:hover { border-color: var(--ok); color: var(--ok); }
.valuta .no:hover { border-color: var(--ko); color: var(--ko); }

.opzioni { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.opzione { display: flex; gap: 12px; align-items: flex-start; text-align: left;
           width: 100%; padding: 14px 16px; font-weight: 400; line-height: 1.45;
           background: var(--carta); color: var(--testo);
           border: 1px solid var(--bordo); border-radius: var(--raggio); }
.opzione .lettera { flex: none; width: 26px; height: 26px; border-radius: var(--raggio-minuto);
                    background: var(--sfondo); border: 1px solid var(--bordo);
                    display: grid; place-items: center; font-size: 12.5px;
                    font-weight: 700; color: var(--tenue); margin-top: 1px; }
.opzione.giusta { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.opzione.giusta .lettera { background: var(--ok); border-color: var(--ok); color: var(--su-accento); }
.opzione.sbagliata { border-color: var(--ko); background: color-mix(in srgb, var(--ko) 12%, transparent); }
.opzione.sbagliata .lettera { background: var(--ko); border-color: var(--ko); color: var(--su-accento); }
/* dopo la risposta la lettera lascia il posto a un segno: la spunta sulla
   giusta, la croce sulla tua sbagliata (GRAFICA e COPY, 27/9). Il colore da
   solo non basta a chi non distingue il verde dal rosso */
.opzione.giusta .lettera, .opzione.sbagliata .lettera { font-size: 0; }
.opzione.giusta .lettera::before, .opzione.sbagliata .lettera::before {
  content: ''; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--segno) center / contain no-repeat; mask: var(--segno) center / contain no-repeat; }
.opzione.giusta .lettera { --segno: url(/icone/segno-giusta.svg); }
.opzione.sbagliata .lettera { --segno: url(/icone/segno-sbagliata.svg); }
.spiegazione { margin-top: 14px; font-size: 15px; color: var(--tenue); }

/* ---- risultato ---- */
.punteggio { text-align: center; padding: 14px 0 24px; }
.punteggio .grande { display: block; font-family: var(--cond); font-size: 96px; font-weight: 700;
                     letter-spacing: -.01em; line-height: .9; font-variant-numeric: tabular-nums; }
.punteggio .grande em { font-style: normal; font-size: 34px; color: var(--tenue); font-weight: 600; }
.punteggio .calmo { display: block; margin-top: 6px; font-size: 15px; }

.deboli { list-style: none; padding: 0; margin: 0 0 8px; }
.deboli li { padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.deboli strong { display: block; }
.deboli .codici { display: block; font-size: 11.5px; color: var(--accento);
                  font-variant-numeric: tabular-nums; margin-top: 3px;
                  letter-spacing: .04em; }

/* ---- piano ---- */
.tappa { margin: 26px 0; }
.tappa h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.passo { display: inline-flex; align-items: center; justify-content: center;
         width: 26px; height: 26px; flex: 0 0 auto;
         background: var(--testo); color: var(--sfondo);
         border-radius: var(--raggio-minuto); font-size: 13px; font-weight: 700; }

/* ---- piede ---- */
.prova { display: inline-block; font-size: 11.5px; color: var(--tenue);
         border: 1px dashed var(--bordo); border-radius: var(--raggio-minuto); padding: 3px 8px; }

/* =====================================================================
   DIETRO LE QUINTE
   =====================================================================
   Stesso stampo dello studente — stesso carattere, stesso verde scuro,
   niente ombre — ma un mestiere diverso: qui si guarda, si confronta e si
   decide, non si legge. Da cui le tre differenze: il menu e' una colonna
   ferma, il titolo dice sempre dove sei, e le tabelle sono fatte per
   scorrere gli occhi lungo una colonna di numeri.
   ---------------------------------------------------------------- */

.quinte { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 40px; }
.tavolo { min-width: 0; padding-top: 4px; }

/* ---- la colonna del menu ---- */
.lato { display: flex; flex-direction: column; align-items: stretch;
        position: sticky; top: 72px; align-self: start;
        max-height: calc(100vh - 88px); overflow-y: auto;
        padding: 4px 22px 24px 0; border-right: 1px solid var(--bordo); }
.lato .insegna { font-family: var(--cond); font-size: 22px; font-weight: 700;
                 letter-spacing: .01em; color: var(--testo); padding-bottom: 14px;
                 margin-bottom: 14px; border-bottom: 2px solid var(--testo); }
.lato .gruppo { display: flex; flex-direction: column; margin-bottom: 18px; }
.lato .etichetta { font-size: 10.5px; letter-spacing: .14em; font-weight: 600;
                   text-transform: uppercase; color: var(--tenue); opacity: .7;
                   margin-bottom: 4px; }
.lato a { padding: 6px 0 6px 11px; font-size: 14.5px; color: var(--tenue);
          text-decoration: none; border-left: 2px solid transparent; }
.lato a:hover { color: var(--testo); border-left-color: var(--bordo); }
.lato a.qui { color: var(--accento); font-weight: 600; border-left-color: var(--accento); }

/* Sotto i 900 px la colonna torna una riga che scorre di lato: le
   etichette dei gruppi diventano separatori, non capoversi. */
@media (max-width: 900px) {
  .quinte { display: block; }
  .lato { position: static; max-height: none; flex-direction: row; align-items: center;
          gap: 4px; overflow-x: auto; padding: 0 0 4px; margin-bottom: 22px;
          border-right: 0; border-bottom: 1px solid var(--bordo); }
  .lato .insegna { display: none; }
  .lato .gruppo { flex-direction: row; align-items: center; gap: 4px; margin: 0; }
  .lato .etichetta { margin: 0 8px 0 10px; white-space: nowrap; }
  .lato a { padding: 7px 10px; white-space: nowrap; border-left: 0;
            border-bottom: 2px solid transparent; }
  .lato a:hover { border-left: 0; border-bottom-color: var(--bordo); }
  .lato a.qui { border-left: 0; border-bottom-color: var(--accento); }
}

/* ---- la testa della pagina ----
   Il titolo in condensato con la riga sopra, come «Da ricordare» di la':
   e' il segno che dice dove comincia una cosa. Il capoverso subito dopo e'
   la spiegazione, e sta stretto perche' si legge una volta sola. */
.tavolo h1 { font-family: var(--cond); font-size: 40px; line-height: 1;
             letter-spacing: 0; margin: 0 0 8px; padding-top: 14px;
             border-top: 2px solid var(--testo); }
.tavolo h1 + .calmo { font-size: 14.5px; max-width: 64ch; margin-bottom: 26px; }
.tavolo h2 { font-size: 19px; margin-top: 34px; }

/* ---- le cifre di «Oggi» ----
   Numeri grandi in condensato, separati da righe e non da riquadri: in
   colpo d'occhio si legge se c'e' qualcosa da fare. Uno zero resta
   tenue, perche' uno zero e' una buona notizia e non deve chiamare. */
.cifre { display: grid; gap: 0; margin: 0 0 34px;
         grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
         border-top: 2px solid var(--testo); }
.cifra { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 18px 0;
         text-decoration: none; color: inherit; border-bottom: 1px solid var(--bordo); }
.cifra:hover { background: var(--accento-tenue); }
.cifra .quanto { font-family: var(--cond); font-size: 46px; font-weight: 700;
                 line-height: 1; color: var(--accento); font-variant-numeric: tabular-nums; }
.cifra .nome { font-size: 14.5px; font-weight: 600; }
.cifra .sotto { font-size: 12px; color: var(--tenue); line-height: 1.35; }
/* «Oggi» in quattro gruppi per urgenza (LAB, 2/10, app/quinte.php): il titolo del gruppo e' un'etichetta, non un capitolo */
.etichetta-coda { font-size: 10.5px; letter-spacing: .14em; font-weight: 600; text-transform: uppercase;
                  color: var(--tenue); margin: 6px 0 0; }
.etichetta-coda + .cifre { margin-bottom: 18px; }
.cifra.conto .quanto { color: var(--testo); }
.cifra.vuota .quanto { color: var(--bordo); }
.cifra.vuota .nome { color: var(--tenue); font-weight: 500; }

/* La riga della sessione d'esame: i giorni che mancano, grandi, e accanto
   che cosa sono. */
.riga-fatto { display: flex; align-items: center; gap: 18px; margin: 10px 0 0;
              padding: 14px 0; border-top: 1px solid var(--bordo);
              border-bottom: 1px solid var(--bordo); }
.riga-fatto .fra { font-family: var(--cond); font-size: 52px; font-weight: 700;
                   line-height: 1; color: var(--testo); font-variant-numeric: tabular-nums; }
.riga-fatto small { display: block; font-size: 12.5px; margin-top: 3px; }

/* ---- avvisi ---- */
/* Il messaggio con cui la piattaforma dice «fatto» o «non va», in
   diciassette pagine — l'accesso, il carrello, l'ordine, la richiesta. Il
   testo era del colore pieno sul suo stesso fondo tinto, e nel tema chiaro
   faceva 3,86 (GRAFICA GDT, 21 settembre 2026). Un po' del colore del
   testo lo porta a 4,85 nel caso peggiore, in tutti e due i temi, e il
   messaggio resta verde o rosso anche nelle parole, non solo nel bordo. */
.avviso { background: color-mix(in srgb, var(--ok) 12%, transparent);
          border: 0; border-left: 3px solid var(--ok);
          color: color-mix(in srgb, var(--ok) 70%, var(--testo));
          padding: 11px 14px; border-radius: 0; font-size: 14.5px; }

/* ---- moduli di servizio ----
   Nel dietro le quinte un modulo e' un attrezzo, non una pagina: campi
   piu' bassi, etichette piu' minute, tutto su una riga dove ci sta. */
/* Qui i comandi sono piu' bassi, non diversi: stesso angolo, stesso
   corpo del testo, quattro pixel in meno sopra e sotto. Il corpo resta a
   sedici perche' sotto i sedici il telefono ingrandisce da solo il campo
   appena lo tocchi. */
.quinte { --alto: 36px; }
.quinte input:not([type=checkbox]):not([type=radio]), .quinte select, .quinte textarea {
  padding: 7px 11px; margin-top: 4px; }
    .quinte select { padding-right: var(--freccia); }
.quinte label { font-size: 12.5px; margin-bottom: 12px; }
.quinte button, .quinte .bottone { padding: 7px 14px; }
.quinte .in-riga label { margin-bottom: 12px; }
/* Nelle quinte la nota di un .in-riga va sotto, su tutta la riga: altrimenti alza la riga e il pulsante si allinea a lei e non ai campi (GRAFICA, 4/10). E il pulsante ha il margine delle etichette. */
.quinte .in-riga > p { grid-column: 1 / -1; margin-top: 0; }
.quinte .in-riga button, .quinte .in-riga .bottone { margin-bottom: 12px; }
.quinte .riquadro { border-radius: 0; border: 0; border-top: 2px solid var(--testo);
                    padding: 18px 0 20px; background: none; }

/* ---- tabelle ----
   Righe alte abbastanza da seguirle con l'occhio, cifre incolonnate, e la
   testata che resta attaccata sotto la barra mentre si scorre. */
.tabella { width: 100%; border-collapse: collapse; font-size: 14.5px;
           font-variant-numeric: tabular-nums; }
.tabella th { text-align: left; font-weight: 600; color: var(--tenue);
              font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
              padding: 10px 10px 8px; border-bottom: 2px solid var(--testo);
              position: sticky; top: 52px; background: var(--sfondo); z-index: 1; }
.tabella td { padding: 11px 10px; border-bottom: 1px solid var(--bordo);
              vertical-align: top; }
.tabella tr:hover td { background: var(--accento-tenue); }
/* l'Aiuto, «Come si studia»: le foto del telefono di GRAFICA, al massimo 390 px, col raggio e il bordo delle carte */
.aiuto-foto { margin: 14px 0 16px; }
.aiuto-foto img { display: block; width: 100%; max-width: 390px; height: auto; border-radius: var(--raggio); border: 1px solid var(--bordo); }
/* Black list: il motivo in due righe coi puntini, intero nella finestra della riga (GRAFICA 9) */
.motivo-corto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.tabella a { color: var(--testo); text-decoration: none;
             box-shadow: inset 0 -1px 0 var(--bordo); }
.tabella a:hover { color: var(--accento); box-shadow: inset 0 -1px 0 var(--accento); }
/* Sul telefono la tabella scorre di lato invece di spezzarsi in briciole. */
@media (max-width: 700px) {
  .tabella { display: block; overflow-x: auto; white-space: nowrap; }
  .tabella th { position: static; }
}
/* Al telefono un'ombra sul bordo dice che la tabella scorre: compare solo dove c'e'
   ancora qualcosa da scorrere (GRAFICA 8, scelta di Paolo del 2/10, riga di GRAFICA) */
@media (max-width: 700px) {
  .tabella th { background: none; }
  .tabella {
    background:
      linear-gradient(to right, var(--sfondo) 40%, transparent) left / 32px 100% no-repeat local,
      linear-gradient(to left, var(--sfondo) 40%, transparent) right / 32px 100% no-repeat local,
      linear-gradient(to right, color-mix(in srgb, var(--testo) 22%, transparent), transparent) left / 14px 100% no-repeat scroll,
      linear-gradient(to left, color-mix(in srgb, var(--testo) 22%, transparent), transparent) right / 14px 100% no-repeat scroll;
  }
}
/* I dispositivi collegati (io.php) al telefono: una riga a carta per dispositivo, «Scollega» a
   destra e in vista (GRAFICA, DIFETTI_AUDIT_2026-10.md, 2/10 sera; parole delle testate di COPY 34) */
@media (max-width: 600px) {
  .tabella.dispositivi { display: block; white-space: normal; overflow: visible; background: none; }
  .tabella.dispositivi tbody { display: block; }
  .tabella.dispositivi tr:first-child { display: none; }
  .tabella.dispositivi tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
                            align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bordo); }
  .tabella.dispositivi td { display: block; border: 0; padding: 0; grid-column: 1; }
  .tabella.dispositivi td:nth-child(1) { font-weight: 500; }
  .tabella.dispositivi td:nth-child(2), .tabella.dispositivi td:nth-child(3) { font-size: 13.5px; }
  .tabella.dispositivi td:nth-child(2)::before { content: "Ultimo uso: "; }
  .tabella.dispositivi td:nth-child(3)::before { content: "Da dove: "; }
  .tabella.dispositivi td:last-child { grid-column: 2; grid-row: 1 / span 3; }
  .tabella.dispositivi tr:hover td { background: none; }
}

/* ---- elenchi di schede ----
   Una riga per cosa, due righe di testo per riga: sopra quello che si
   cerca, sotto quello che serve a riconoscerla. Le colonne hanno una
   larghezza dichiarata, se no una colonna con dentro sei titoli di corso
   si prende mezza tabella e spezza il nome del prodotto in otto righe.
   E' quello che faceva il catalogo. */
/* `fixed` e le larghezze in un `<colgroup>` nella pagina: quanto vale
   una colonna lo sa chi sa che cosa ci mette dentro, non il foglio. */
.elenco { table-layout: fixed; }
.elenco td { vertical-align: top; }
.elenco .sotto { display: block; margin-top: 3px; font-size: 12px; color: var(--tenue);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elenco .cifra-cella strong { font-variant-numeric: tabular-nums; }
.elenco .in-fondo { text-align: right; }
/* Una riga che non riguarda piu' nessuno — una sessione d'esame passata,
   una riga di black list oltre la conservazione — resta leggibile ma non
   chiama. */
.elenco tr.passata td, .conti-scadenze tr.passata td { opacity: .55; }
/* Il nome e' il modo di aprire la scheda: si comporta da collegamento,
   perche' e' quello che uno prova a fare per primo. */
.elenco .titolo { background: none; border: 0; padding: 0; min-height: 0;
                  font: inherit; font-weight: 600; color: var(--testo);
                  text-align: left; cursor: pointer; }
.elenco .titolo:hover { color: var(--accento); text-decoration: underline;
                        text-underline-offset: 3px; }
.minuto { min-height: 0; padding: 4px 10px; font-size: 12.5px; font-weight: 600;
          border-radius: var(--raggio-minuto); border: 1px solid var(--bordo);
          background: var(--carta); color: var(--tenue); cursor: pointer; }
.minuto:hover { border-color: var(--accento); color: var(--accento); }
.azioni-testa { margin: 0 0 20px; }

.pastiglia { display: inline-block; font-size: 11.5px; font-weight: 600;
             letter-spacing: .03em; padding: 3px 8px; border-radius: var(--raggio-minuto);
             background: var(--accento-tenue); color: var(--accento); }
.pastiglia.si { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.pastiglia.no { background: var(--sfondo); color: var(--tenue);
                box-shadow: inset 0 0 0 1px var(--bordo); }
.pastiglia.ko { background: color-mix(in srgb, var(--ko) 15%, transparent); color: var(--ko); }

/* ---- cercare nel dietro le quinte ----
   La stessa barra in ogni pannello: il campo prende lo spazio che resta,
   i filtri sono pastiglie da premere e quella accesa si vede. Sono link,
   non pulsanti, perché una ricerca fatta deve poter essere un indirizzo
   da tenere aperto o da mandare. */
.barra-cerca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
               margin: 16px 0 18px; }
.barra-cerca input[type=search] { flex: 1 1 18rem; width: auto; margin: 0; }
.barra-cerca .filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.barra-cerca .conto { margin-left: auto; font-size: 12.5px; }
.barra-cerca a.minuto { display: inline-block; text-decoration: none; }
.barra-cerca .bottone { min-height: var(--alto); margin: 0; }
/* un collegamento con l'aspetto di un piccolo comando: «Vedi come lo studente» */
a.minuto { display: inline-block; text-decoration: none; }
a.pastiglia { text-decoration: none; }
a.pastiglia:hover { box-shadow: inset 0 0 0 1px currentColor; }
.pastiglia.qui { background: var(--accento); color: var(--carta); }
/* Nel catalogo lo stato di vendita è un bottone che apre la scheda. */
button.pastiglia { border: 0; font-family: inherit; cursor: pointer; }
button.pastiglia:hover { box-shadow: inset 0 0 0 1px currentColor; }
.come-si-vende { border: 1px solid var(--bordo); border-radius: var(--raggio);
                 padding: 8px 14px 10px; margin: 0 0 18px; }
.come-si-vende legend { font-size: 12.5px; color: var(--tenue); padding: 0 6px; }
.come-si-vende .spunta { padding: 5px 0; align-items: baseline; }

/* Nel registro, la riga che dice che qualcosa non ha funzionato: si vede
   scorrendo, senza doverla cercare. */
.tabella tr.segnalata td { background: color-mix(in srgb, var(--ko) 7%, transparent); }

/* I numeri in testa a un pannello: quanto aspetta, quanto è entrato,
   che cosa è fermo. Stessa griglia dei contatori dello studio. */
.numeri-testa { margin: 0 0 4px; }
.numeri-testa strong { font-size: 28px; }
.numeri-testa .nota { display: block; margin-top: 2px; font-size: 11.5px; }

/* ---- la scheda che si apre sopra la pagina ----
   Un `dialog` vero: lo sfondo, il fuoco che resta dentro e il tasto Esc
   li fa il browser. A noi resta il vestito. */
.pannello { width: min(820px, calc(100vw - 40px)); max-height: 86vh;
            padding: 0 26px 26px; border: 1px solid var(--bordo);
            border-radius: var(--raggio); background: var(--carta);
            color: var(--testo); overflow: auto; }
.pannello::backdrop { background: color-mix(in srgb, #0b1717 62%, transparent); }
.testa-pannello { position: sticky; top: 0; z-index: 1; padding: 22px 46px 14px 0;
                  margin-bottom: 18px; background: var(--carta);
                  border-bottom: 2px solid var(--testo); }
.testa-pannello h2 { margin: 0 0 2px; font-family: var(--cond); font-size: 28px;
                     line-height: 1.05; }
.testa-pannello .calmo { margin: 0; font-size: 13px; }
.pannello .chiudi { position: absolute; top: 16px; right: 0; min-height: 0;
                    width: 34px; height: 34px; padding: 0; font-size: 22px; line-height: 1;
                    border: 0; background: none; color: var(--tenue); cursor: pointer; }
.pannello .chiudi:hover { color: var(--testo); }
@media (max-width: 700px) {
  .pannello { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh;
              border-radius: 0; border: 0; margin: 0; padding: 0 18px 24px; }
}

/* ---- targhe di stato ----
   Il tratteggio dice «provvisorio» e nel dietro le quinte non lo e': qui
   una targa e' uno stato, e si legge come tale. */
.quinte .targa { border: 0; background: var(--accento-tenue); color: var(--accento);
                 font-weight: 600; padding: 3px 8px; }

/* ---- testa di una scheda ----
   `.richiesta-testa` e' la riga in cima a ogni scheda degli acquisti
   sospesi e dell'agenda. Il foglio per l'interrogazione, che stava qui,
   se n'e' andato con le ore con Gloria il 25 settembre 2026. */
.richiesta-testa { display: flex; align-items: center; justify-content: space-between;
                   gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.in-linea { display: inline; }
.in-linea select { width: auto; margin: 0; padding: 6px var(--freccia) 6px 11px;
                   font-size: 14px; }
details summary { cursor: pointer; font-size: 14px; color: var(--tenue); padding: 6px 0; }

.riga-esame { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
              padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.riga-esame input[type=date] { width: auto; margin: 0; }

/* ---- la struttura dei contenuti ----
   Il rientro e' l'unica cosa che dice il livello, quindi si vede: una
   riga sottile a sinistra di ogni ramo, come una stecca. */
.ramo { padding: 6px 0; border-bottom: 1px solid var(--bordo); font-size: 14.5px;
        display: flex; align-items: baseline; gap: 10px; }
.ramo.l1 { padding-left: 24px; box-shadow: inset 12px 0 0 -11px var(--bordo); }
.ramo.l2 { padding-left: 48px; box-shadow: inset 36px 0 0 -35px var(--bordo); }
.ramo.l3 { padding-left: 72px; box-shadow: inset 60px 0 0 -59px var(--bordo); }
.ramo.foglia { opacity: .75; }
.ramo .tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
              color: var(--tenue); min-width: 5rem; }
.ramo .cod { min-width: 4.4rem; font-variant-numeric: tabular-nums; }
/* Solo il titolo si allarga: `flex: 1` su tutti gli `a` stirava anche la
   targhetta «modifica» per mezza riga. */
.ramo a { text-decoration: none; color: var(--testo); }
.ramo > a { flex: 1 1 auto; min-width: 0; }
.ramo a:hover { color: var(--accento); }
.ramo .modifica { flex: 0 0 auto; }
.ramo .quanti { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tenue); }

/* L'albero che si apre (18 settembre 2026): i corsi chiusi, una riga l'uno;
   il rientro lo fa l'annidamento, con la stecca a sinistra. */
/* `.ramo` è flex, e un display scritto vince sull'attributo hidden: la ricerca
   nasconderebbe le righe solo per finta. */
#albero [hidden] { display: none !important; }
.albero-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 18px; }
.albero-barra input[type=search] { flex: 1 1 16rem; width: auto; margin: 0; }
.ramo-c > summary { cursor: pointer; list-style: none; flex-wrap: wrap; }
.ramo-c > summary::-webkit-details-marker { display: none; }
.ramo-c > summary::before { content: "\203A"; flex: 0 0 auto; width: .9em; color: var(--tenue);
                            font-weight: 700; transition: rotate .15s ease; }
.ramo-c[open] > summary::before { rotate: 90deg; }
.ramo-c > summary:hover .tit { color: var(--accento); }
.ramo-c > summary .tit { flex: 1 1 12rem; min-width: 0; font-weight: 600; }
.ramo-c > summary .conti { flex: 0 1 auto; font-size: 12.5px; color: var(--tenue); }
.ramo-c > .figli { margin-left: 5px; padding-left: 18px; border-left: 1px solid var(--bordo); }
.ramo-c > .figli > .calmo { margin: 6px 0; font-size: 13px; }
.corso-albero { border: 1px solid var(--bordo); border-radius: var(--raggio); margin: 0 0 10px; padding: 0 14px; }
.corso-albero > summary { padding: 13px 0; font-size: 16px; border-bottom: 0; }
.corso-albero[open] > summary { border-bottom: 1px solid var(--bordo); }
.corso-albero > .figli { margin: 0 0 10px 5px; }
.corso-albero .ramo:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ramo-c > summary::before { transition: none; } }

/* ---- schermi piccoli ---- */
@media (max-width: 430px) {
  body { font-size: 16.5px; }
  main { padding: 20px 16px 60px; }
  /* la barra sullo stesso margine del contenuto: il marchio a 16, non a 20 (GRAFICA, 28/9) */
  .barra { padding-left: 16px; padding-right: 16px; }
  .riquadro { padding: 22px 18px; border-radius: var(--raggio); }
  button, .bottone { padding: 11px 14px; font-size: 14.5px; }
  .azioni > .ritorno { font-size: 14.5px; }
  .blocco.meta { width: 100%; }
  .punteggio .grande { font-size: 46px; }
}
.primario.largo { width: 100%; }

/* ---- interruttore del tema ---- */
.tema { background: none; border: 0; padding: 4px 6px; font-size: 15px;
        line-height: 1; cursor: pointer; color: var(--tenue); }
.tema:hover { color: var(--accento); border-color: transparent; }
/* Sopra i 950 pixel il tasto del tema era 34 per 30: 44 per 44 come ogni
   tasto d'icona, perche' un iPad in orizzontale prende la barra larga e si usa
   col dito. Il margine negativo gli fa prendere 4 pixel sopra e 4 sotto senza
   alzare la barra, che resta 56 (GRAFICA, 26 settembre 2026). Sul telefono
   la regola c'e' gia', e la barra e' alta 64 di proposito. */
@media (min-width: 951px) {
  .barra .tema { min-width: 44px; min-height: 44px; margin: -4px 0; padding: 0;
                 display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- comandi di lettura ---- */
.comandi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.seguito { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
           color: var(--tenue); cursor: pointer; user-select: none; margin: 0; }
.seguito input { accent-color: var(--accento); width: 16px; height: 16px;
                 margin: 0; padding: 0; }
.tasti { margin-left: auto; font-size: 12px; color: var(--tenue); }
.tasti kbd { font: inherit; border: 1px solid var(--bordo); border-radius: var(--raggio-minuto);
             padding: 1px 5px; background: var(--carta); }
@media (max-width: 430px) { .tasti { display: none; } }

/* ---- il lettore, fisso in fondo ---- */
/* Con l'evidenziazione che segue la voce la pagina scorre da sola: un
   lettore in mezzo al testo sparirebbe di sopra dopo mezzo minuto. Qui
   resta sempre visibile, e sul telefono è sotto il pollice. */
.blocco.b-audio { margin: 0; }
.lettore {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: color-mix(in srgb, var(--sfondo) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordo);
  padding: 6px 20px calc(8px + env(safe-area-inset-bottom));
  view-transition-name: lettore;   /* come la barra: non si sposta fra un blocco e l'altro */
}
/* LA BARRA COMINCIA DOVE COMINCIA IL TESTO. Stava larga 720 e centrata,
   cioe' su una verticale sua: l'onda partiva un palmo piu' a destra della
   prima parola. Qui e' larga quanto il contenuto della pagina, tolta la
   sua imbottitura, e le due colonne si incolonnano. */
.lettore .dentro { max-width: calc(var(--pagina) - 40px); margin: 0 auto; }
.lettore audio { display: none; }   /* i comandi sono i nostri, qui sotto */
/* la voce sintetica, sotto i comandi: piccola e sempre li' (LEGAL, 4/10) */
.lettore .voce-sintetica, .voce-pannello .voce-sintetica, .voce-sintetica { margin: 2px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--tenue); }

/* I comandi, come sulla tela: tasto tondo, tempo, salti, velocita',
   e a destra l'interruttore che fa seguire il testo alla voce.

   UNA RIGA SOLA, dal 20 settembre 2026. Prima erano due — l'onda sopra e
   i comandi sotto — e la barra si prendeva 137 pixel: su un portatile da
   quattordici pollici, con lo spazio riservato in fondo alla pagina, un
   sesto dello schermo (misurato, non stimato). Adesso l'onda sta in mezzo
   ai comandi e si prende quello che avanza: la stessa informazione in
   meno di metà altezza. Sotto i 760 pixel torna sopra, a capo, che su un
   telefono è l'unica forma possibile. */
.comandi-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comandi-audio .play { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
                       background: var(--testo); color: var(--sfondo); cursor: pointer;
                       display: grid; place-items: center; flex: none; }
.comandi-audio .play svg { display: block; }
.comandi-audio .play .pausa { display: none; }
.lettore.suona .play .via { display: none; }
.lettore.suona .play .pausa { display: block; }
.comandi-audio .tempo { font-size: 13px; font-weight: 500; color: var(--tenue);
                        font-variant-numeric: tabular-nums; white-space: nowrap; }
.comandi-audio .tempo b { color: var(--testo); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
        border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--carta);
        font: inherit; font-size: 12.5px; font-weight: 600; color: var(--tenue); cursor: pointer;
        font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip:hover { border-color: var(--testo); color: var(--testo); }
/* Il testo della scelta nel colore del testo: l'accento su quel fondo tenue
   dava 4,15 di contrasto a 12,5 px, sotto il 4,5 (GRAFICA, 24/9). Vale per
   tutti i chip: esercizi, analizza, lettore e filtro per sede. */
.chip.on { background: var(--accento-tenue); border-color: transparent; color: var(--testo); }
/* Il filtro per sede in /corsi.php: le stesse etichette, come link (studente-39).
   Il bersaglio si allarga a 44 px senza muovere niente, e il titolo su cui
   porta l'ancora non finisce sotto la barra fissa. */
.filtro-sede { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
a.chip { text-decoration: none; }
.filtro-sede a.chip { position: relative; }
.filtro-sede a.chip::after { content: ""; position: absolute; inset: -5px -4px; }
.pubblica h2[id] { scroll-margin-top: 80px; }
/* Anche «Il testo segue la voce» e' un `<label>`, e anche lui si prendeva i
   sedici pixel delle etichette dei moduli: stava otto pixel piu' in alto
   del tasto e dell'onda, su ogni lezione con l'audio. */
.segue { margin-left: auto; margin-bottom: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
         color: var(--tenue); cursor: pointer; user-select: none; }
.segue input { accent-color: var(--accento); width: 16px; height: 16px; margin: 0; }
.segue .corto { display: none; }
.linea { height: 4px; background: var(--bordo); cursor: pointer; margin: 16px 0 8px; }
.linea i { display: block; height: 100%; width: 0; background: var(--accento); }
@media (max-width: 600px) { .comandi-audio .salto { display: none; } }
@media (max-width: 430px) { .segue .lungo { display: none; } .segue .corto { display: inline; } }

/* La forma d'onda: prima si vede il discorso, poi i comandi.
   Alta poco, è una guida e non un grafico. */
.onda { display: block; flex: 1 1 220px; min-width: 0; height: 30px; margin: 0;
        cursor: pointer; border-radius: var(--raggio); }
/* Senza l'onda ci vuole comunque un posto dove cliccare per spostarsi: la
   linea sta nella riga al posto suo, non sopra. */
.comandi-audio .linea { flex: 1 1 220px; min-width: 0; margin: 0; }
@media (max-width: 760px) {
  .onda, .comandi-audio .linea { order: -1; flex: 1 0 100%; }
}
.onda:hover { background: color-mix(in srgb, var(--accento) 5%, transparent); }
@media (max-width: 430px) {
  .onda { height: 26px; }
  .lettore { padding-left: 16px; padding-right: 16px; }
}
@media print { .lettore { display: none; } }

/* ---- ricerca ---- */
.cerca { margin: 0 0 22px; }
.cerca input {
  margin: 0; padding: 12px 16px; font-size: 15.5px;
  background: var(--carta); border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* ---- schede dei corsi ----
   Due colonne sul desktop, copertina quadrata a sinistra a filo di scheda.
   Il corso resta chiuso: da qui si entra, non si srotola. */
.schede { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .schede { grid-template-columns: 1fr; } }

.scheda {
  display: flex; align-items: stretch; gap: 0;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra);
  text-decoration: none; color: inherit;
  transition: border-color .15s;
}
.scheda:hover { border-color: var(--testo); }

/* Il quadrato resta intero, anche quando il testo accanto è più alto: prima
   si allungava con la scheda, e `object-fit: cover` lo tagliava in un
   rettangolo verticale diverso a ogni scheda (177 × 177, 198, 229). Rilievo
   3-bis dell'audit di GRAFICA, 22 settembre 2026. Nelle schede della tua
   area, dal 24 settembre, il resto della scheda lo riempie il colore della
   copertina (le regole `.schede > .scheda` più sotto). */
.copertina { flex: 0 0 34%; max-width: 200px; aspect-ratio: 1; align-self: flex-start;
             background: var(--accento-tenue); }
.copertina img { display: block; width: 100%; height: 100%; object-fit: cover; }

.testo-scheda { flex: 1 1 auto; padding: 16px 18px;
                display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.testo-scheda h2 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.sommario {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--tenue);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.piede-scheda { margin-top: auto; padding-top: 10px;
                display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                font-size: 12.5px; color: var(--tenue); }
.piede-scheda .avanz { flex: 0 0 70px; }

.targa { display: inline-block; font-size: 11px; text-transform: uppercase;
         letter-spacing: .06em; color: var(--tenue);
         border: 1px dashed var(--bordo); border-radius: var(--raggio-minuto); padding: 2px 7px; }
/* Acceso e spento, nella pagina degli interruttori: il colore fa il lavoro
   che farebbe rileggere la parola. */
.targa.si { color: var(--ok); border-style: solid; border-color: currentColor; }
.targa.no { color: var(--ko); border-style: solid; border-color: currentColor; }
/* --buono e --allarme non c'erano: in scuro «acceso» e «spento» erano a 2,2:1 (GRAFICA, difetto 160) */
.interruttori td { vertical-align: top; }
.interruttori td:last-child { max-width: 34ch; }

/* LE SCHEDE DELLA TUA AREA, COME NEL CATALOGO (Paolo, 24 settembre 2026,
   strada B di GRAFICA). Sotto il quadrato restava un bianco quando il testo
   accanto era più alto: fino a 52 px a 1512, fino a 158 sul telefono.
   Adesso la descrizione sta su due righe; sopra i 600 px il quadrato resta
   intero e appoggiato al fondo, e sopra di lui continua il suo colore
   (`--fondo`, da COLORI.json, scritto nella pagina). Sul telefono è la
   tessera del catalogo: 121 px accanto a titolo e numeri, la descrizione
   sotto a tutta larghezza. Il grigio di «in preparazione» sta sul
   contenitore, altrimenti il colore resterebbe acceso accanto alla foto
   spenta. */
.schede > .scheda .sommario { -webkit-line-clamp: 2; }
@media (min-width: 601px) {
  .schede > .scheda .copertina { align-self: stretch; aspect-ratio: auto; display: flex; flex-direction: column;
                                 justify-content: flex-end; background: var(--fondo, var(--accento-tenue)); }
  .schede > .scheda .copertina img { height: auto; aspect-ratio: 1; }
}
.schede > .scheda.in-arrivo .copertina { filter: grayscale(.55); opacity: .75; }
@media (max-width: 600px) {
  .schede > .scheda { display: grid; grid-template-columns: 121px minmax(0, 1fr); column-gap: 14px; row-gap: 8px;
                      padding: 16px 18px; align-items: start; }
  .schede > .scheda .testo-scheda { display: contents; }
  .schede > .scheda .copertina { grid-column: 1; grid-row: 1 / span 2; width: 121px; max-width: none;
                                 border-radius: var(--raggio); overflow: hidden; }
  .schede > .scheda .testo-scheda h2 { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .schede > .scheda .piede-scheda { grid-column: 2; grid-row: 2; margin-top: 0; padding-top: 0; }
  .schede > .scheda .sommario { grid-column: 1 / -1; grid-row: 3; }
}

/* ---- testata del corso ---- */
.testa-corso { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.testa-corso h1 { margin: 0 0 8px; font-family: var(--cond); font-size: var(--titolo-pagina); line-height: .95;
                  letter-spacing: -.01em; }
.testa-corso .sommario { -webkit-line-clamp: 4; font-size: 15px; margin-bottom: 8px; }
.copertina-grande { flex: 0 0 150px; width: 150px; height: 150px;
                    object-fit: cover; border-radius: var(--raggio); box-shadow: var(--ombra); }
/* Al telefono la copertina sta sopra il titolo: accanto, a 92, lasciava al
   titolo una colonna stretta e lo mandava su quattro righe (GRAFICA, 27/9). */
@media (max-width: 600px) {
  .testa-corso { flex-direction: column; gap: 12px; }
  .copertina-grande { flex-basis: auto; width: 72px; height: 72px; }
}

/* ---- elenco dei moduli ---- */
.moduli { list-style: none; margin: 10px 0 0; padding: 0; }
.moduli li { border-bottom: 1px solid var(--bordo); }
.moduli a { display: flex; align-items: center; gap: 14px;
            padding: 14px 12px; margin: 0 -12px;
            border-radius: var(--raggio); text-decoration: none; color: inherit; }
.moduli a:hover { background: var(--accento-tenue); }
.moduli .segno { flex: 0 0 26px; height: 26px; display: grid; place-items: center;
                 border-radius: var(--raggio-minuto); background: var(--accento-tenue);
                 color: var(--accento); font-size: 13px; font-weight: 700; }
/* Il quadrato del modulo al posto di «▤»: 56 px, 48 sul telefono, 16 px
   prima del titolo (i 14 del gap più 2). */
.moduli .copertina-modulo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--raggio);
                            object-fit: cover; margin-right: 2px; }
@media (max-width: 600px) { .moduli .copertina-modulo { flex-basis: 48px; width: 48px; height: 48px; } }
.moduli .dentro-modulo { flex: 1 1 auto; min-width: 0; }
.moduli .tit { display: block; }
.moduli .calmo { display: block; font-size: 12.5px; }
.moduli .avanz { flex: 0 0 70px; }
.moduli li.t-quiz .segno { background: color-mix(in srgb, var(--ko) 12%, transparent);
                           color: var(--ko); }

/* ---- editor ---- */
/* IN RIGA VUOL DIRE IN COLONNE UGUALI. Col flex ogni campo prendeva una
   larghezza sua a seconda di quanto spazio avanzava: «Stato» larghissimo,
   «Come mostra i figli» stretto, e la riga sotto sfalsata rispetto a
   quella sopra. In griglia le colonne sono tutte uguali e i campi si
   incolonnano da una riga all'altra. */
.in-riga { display: grid; gap: 0 18px; align-items: start;
           grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.in-riga label { margin-bottom: 16px; }
.in-riga .spunta { align-self: center; padding-top: 14px; }
.in-riga button, .in-riga .bottone { justify-self: start; align-self: end;
                                     margin-bottom: 16px; }
label small { color: var(--tenue); font-weight: 400; }
.spunta { display: flex; align-items: center; gap: 9px; flex: 1 1 100%; }
.spunta input { margin: 0; }
.spunta span { flex: 1; }
/* la dichiarazione che si firma, in cassa: nel colore del testo, non grigia come una nota (GRAFICA, difetto 55) */
.spunta.firma { color: var(--testo); }
.testo-lungo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: 14px; line-height: 1.6; }
.divergenza { background: color-mix(in srgb, var(--ko) 9%, transparent);
              border: 1px solid color-mix(in srgb, var(--ko) 35%, var(--bordo));
              border-radius: var(--raggio); padding: 9px 13px; font-size: 14px; }
.nuovo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
         margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.nuovo input[name=titolo_nuovo] { flex: 1 1 260px; margin: 0; }
.nuovo select { width: auto; margin: 0; }
.riga-esame select, .in-riga select { min-width: 0; }
/* Il blocco pericoloso da solo si stacca da quello che c'e' sopra; dentro
   la riga dei comandi no, perche' li' e' un pulsante fra gli altri. */
.pericolo { margin: 28px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.azioni .pericolo { margin: 0; }
/* la conferma in due tempi (giro 1C, chiediConferma()): la domanda a tutta riga
   sotto gli altri pulsanti, la frase in colore normale, «Sì» in fondo a destra */
.chiede-conferma { display: contents; }
.domanda-conferma { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.domanda-conferma[hidden], .apri-conferma[hidden] { display: none; }
.domanda-conferma p { flex-basis: 100%; margin: 0 0 4px; }
.domanda-conferma .si { margin-left: auto; }
/* La domanda di conferma dentro un .in-riga: su tutta la riga, non nella colonna del pulsante, e larga quanto serve (GRAFICA, 4/10) */
.in-riga .domanda-conferma { grid-column: 1 / -1; max-width: 28rem; }
.chiede-conferma.rossa .apri-conferma, .chiede-conferma.rossa .si {
  color: var(--ko); border-color: color-mix(in srgb, var(--ko) 35%, var(--bordo)); }
.pericolo button { color: var(--ko); border-color: color-mix(in srgb, var(--ko) 35%, var(--bordo)); }
.pericolo button:hover { border-color: var(--ko); color: var(--ko); }
.moduli .in-linea { display: flex; gap: 4px; flex: 0 0 auto; }
.moduli .in-linea button { padding: 4px 10px; font-size: 13px; }
.modifica { font-size: 12px; color: var(--tenue); text-decoration: none;
            border: 1px solid var(--bordo); border-radius: var(--raggio-minuto); padding: 1px 7px; }
.modifica:hover { color: var(--accento); border-color: var(--accento); }
.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 800px) { .confronto { grid-template-columns: 1fr; } }
.confronto pre { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace;
                 font-size: 13.5px; line-height: 1.6; background: var(--carta);
                 border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 16px;
                 margin: 0; overflow-x: auto; }
.confronto pre.vecchio { background: color-mix(in srgb, var(--ko) 5%, var(--carta)); }

/* ---- catalogo: cosa apre un prodotto, su cosa vale un coupon ----
   Colonne strette e scorrevoli: le righe da spuntare sono una trentina, e
   in colonna unica diventano un chilometro di pagina. Fino al 22 settembre
   2026 si chiamava `.apre`, come la frase che apre un capoverso nel
   lettore: ogni p.frase.apre prendeva display: grid, e il primo grassetto
   dentro una frase l'avrebbe spezzata in colonne (trovato da GRAFICA). */
.cosa-apre { display: grid; gap: 14px; margin: 10px 0 18px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cosa-apre fieldset { border: 1px solid var(--bordo); border-radius: var(--raggio);
                 padding: 10px 14px 12px; margin: 0; max-height: 320px;
                 overflow-y: auto; }
.cosa-apre legend { font-size: 12.5px; color: var(--tenue); padding: 0 6px; }
.cosa-apre .spunta { padding: 3px 0; }

/* ---- scheda di una persona ----
   I contatori dello studio. Sono numeri e basta di proposito: da qui si
   sa quanto una persona ha lavorato, non che cosa ha scritto. */
.contatori { display: grid; gap: 12px; margin-top: 12px;
             grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.contatori div, .contatori > a { display: block; background: var(--carta);
                 border: 1px solid var(--bordo);
                 border-radius: var(--raggio); padding: 12px 14px; }
/* Un contatore che porta da qualche parte lo deve far capire: cambia il
   bordo, non il colore del numero — se no sembra un altro stato. */
.contatori > a { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.contatori > a:hover { border-color: var(--accento); }
.contatori > a:hover span { color: var(--accento); }
.contatori strong { display: block; font-family: var(--cond); font-size: 34px; font-weight: 600;
                    line-height: 1; font-variant-numeric: tabular-nums; }
.contatori span { color: var(--tenue); font-size: 12.5px; }

/* L'IBAN del bonifico: a gruppi da quattro per leggerlo, ma col margine e
   non con lo spazio, cosi' chi lo copia lo incolla nella banca compatto.
   Un tocco lo seleziona tutto: sul telefono e' il gesto che serve. */
.iban { font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all;
        white-space: nowrap; }
.iban span + span { margin-left: .4em; }

/* ---- la cassa: carrello, fatturazione, ordine ------------------------
   Tre passi in fila con la stessa forma (19 settembre 2026): a sinistra
   quello che si fa, a destra il riquadro che serve — il totale col
   pulsante, o come pagare — fermo mentre si scorre. Prima era un
   riquadro di 400 pixel in mezzo allo schermo. Sul telefono una colonna
   sola, nell'ordine della pagina: dove il riquadro e' la cosa che si
   cerca (gli estremi del bonifico, il riepilogo prima del modulo) sta
   prima nella pagina, e da schermo largo va a destra lo stesso. */
.cassa .apertura { margin-bottom: 28px; }
.cassa .apertura h1 { margin: 6px 0 8px; }
.cassa-passi { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0;
               list-style: none; counter-reset: cassa; font-size: 13px; color: var(--tenue); }
.cassa-passi li { counter-increment: cassa; display: flex; align-items: center; gap: 7px; }
.cassa-passi li::before { content: counter(cassa); display: inline-grid; place-items: center;
                          width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--bordo);
                          font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cassa-passi li.fatto::before { content: "✓"; border-color: var(--accento); color: var(--accento); }
.cassa-passi li.qui { color: var(--testo); font-weight: 600; }
.cassa-passi li.qui::before { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.cassa-passi a { color: inherit; }

.cassa-corpo { display: flex; flex-direction: column; gap: 32px; }
.cassa .cassa-appena { margin: -8px 0 28px; }
/* Come si paga: due scelte, una per riga, cliccabili per intero. */
.metodi { display: grid; gap: 10px; margin: 6px 0 8px; }
.metodo { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px;
          border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta);
          color: var(--testo); font-size: 15px; cursor: pointer; }
.metodo:has(input:checked) { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.metodo input { margin: 4px 0 0; accent-color: var(--accento); flex: 0 0 auto; }
.metodo small { display: block; margin-top: 3px; color: var(--tenue); font-size: 13.5px; line-height: 1.45; }
.metodo small[hidden] { display: none; }
/* le rate spente dalla partita IVA (24 settembre 2026): si vedono, ma non si scelgono */
.metodo input:disabled + span strong { color: var(--tenue); }
.cassa-lato .paga-carta { margin: 0; }
.cassa-lato .altro-modo { margin-top: 16px; border-top: 1px solid var(--bordo); padding-top: 12px; }
.cassa-lato .altro-modo summary { cursor: pointer; font-size: 14px; color: var(--tenue); }
.cassa-lato .altro-modo[open] summary { margin-bottom: 14px; }
.cassa .avviso-recesso { font-size: 14.5px; padding: 12px 14px; border-radius: var(--raggio);
                         background: color-mix(in srgb, var(--evidenza) 22%, transparent); }
.cassa-principale { min-width: 0; }
.cassa-principale > :first-child { margin-top: 0; }
.cassa-lato .riquadro { padding: 22px 22px 20px; }
.cassa-lato h2 { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
                 color: var(--tenue); margin: 0 0 16px; }
.cassa-lato .azioni { flex-direction: column; align-items: stretch; margin: 20px 0 0; }
.cassa-lato .calmo { margin: 14px 0 0; }
@media (min-width: 900px) {
  .cassa-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 56px; align-items: start; }
  .cassa-principale { grid-column: 1; grid-row: 1; }
  .cassa-lato { grid-column: 2; grid-row: 1; position: sticky; top: 92px; }
}

.cassa-righe { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--testo); }
.cassa-righe li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px;
                  align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--bordo); }
.cassa-righe .nome { font-size: 18px; font-weight: 600; line-height: 1.35; }
.cassa-righe .nome a { color: var(--testo); text-decoration: none; }
.cassa-righe .nome a:hover { color: var(--accento); }
.cassa-righe .importo { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cassa-righe .durata { grid-column: 1 / -1; font-size: 13.5px; color: var(--tenue); line-height: 1.45; }
.cassa-righe.compatte .durata { font-size: 12.5px; }
.cassa-righe .sotto { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px;
                      align-items: baseline; font-size: 13.5px; }
.cassa-righe .sotto form { margin: 0; }
.cassa-righe .togli { min-height: 0; padding: 0; border: 0; background: none; font-size: 13.5px;
                      font-weight: 400; color: var(--tenue); text-decoration: underline;
                      text-underline-offset: 3px; }
.cassa-righe .togli:hover { color: var(--ko); }
/* il cestino al posto di «Togli» (GRAFICA, 27/9): l'area da 44, a destra */
.cassa-righe .sotto form:has(.cestino) { margin-left: auto; }
.cassa-righe .togli.cestino { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
                              margin: -12px -12px -12px auto; align-self: center; color: var(--tenue);
                              text-decoration: none; border-radius: var(--raggio); }
.cassa-righe .togli.cestino:hover, .cassa-righe .togli.cestino:focus-visible { color: var(--ko); }
.cassa-righe.compatte { border-top: 0; margin-bottom: 8px; }
.cassa-righe.compatte li { padding: 10px 0; }
.cassa-righe.compatte .nome { font-size: 14.5px; font-weight: 500; }
.cassa-righe.compatte .importo { font-size: 14.5px; }

.cassa-conto { margin: 0; }
.cassa-conto div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
                   padding: 5px 0; font-size: 14.5px; }
.cassa-conto dt { color: var(--tenue); }
.cassa-conto dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cassa-conto .sconto dd { color: var(--accento); }
.cassa-conto .totale { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.cassa-conto .totale dt { color: var(--testo); font-weight: 600; }
.cassa-conto .totale dd { font-family: var(--cond); font-size: 36px; font-weight: 600; line-height: 1;
                          color: var(--accento); }
.cassa-lato .iva { margin: 8px 0 0; font-size: 12.5px; text-align: right; }
.cassa-lato .errore { font-size: 14px; margin: 14px 0 0; }
/* La sessione d'esame, scelta in cassa sopra il riepilogo (COPY, SESSIONE_SCELTA § 2; 4/10):
   la domanda in chiaro, la riga sotto in piccolo. Col riquadro in piu' il lato e' piu' alto
   della finestra, quindi non resta fermo: scorre con la pagina. Da vedere con GRAFICA. */
.cassa-lato .sessioni-scelta { margin-bottom: 16px; }
.cassa-lato .sessioni-scelta label { color: var(--testo); font-size: 15px; font-weight: 600; }
.cassa-lato .sessioni-scelta label:last-child { margin-bottom: 0; }
.cassa-lato .sessioni-scelta .sotto-domanda { display: block; margin-top: 4px; font-size: 13.5px;
                                              font-weight: 400; line-height: 1.45; color: var(--tenue); }
.cassa-lato .sessioni-scelta .corso { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; }
/* una sola sessione possibile (difetto 43): il titolo come la domanda, la frase di LEGAL sotto, in tondo */
.cassa-lato .sessioni-scelta .sessione-unica { margin: 0 0 16px; color: var(--testo); font-size: 15px; font-weight: 600; }
.cassa-lato .sessioni-scelta .sessione-unica:last-child { margin-bottom: 0; }
.cassa-lato .sessioni-scelta .sessione-unica .frase { display: block; margin-top: 4px; font-size: 14.5px;
                                                      font-weight: 400; line-height: 1.45; }
@media (min-width: 900px) {
  .cassa-lato:has(.sessioni-scelta) { position: static; }
}
/* «Sposta la sessione» nella scheda persona: la voce della tendina si legge intera, e il numero
   d'ordine nella nota non va a capo sul trattino (GRAFICA, DIFETTI_AUDIT_2026-10.md, 4/10) */
.sposta-sessione select { width: 100%; min-width: 18rem; }
.tabella td:has(> .sposta-sessione) { min-width: 18rem; }
.codice-ordine { white-space: nowrap; }
@media (min-width: 600px) {   /* CAP, città e provincia su una riga, ognuno largo quanto serve */
  .cassa .in-riga.luogo { grid-template-columns: 8rem minmax(0, 1fr) 5.5rem; }
}

.cassa-codice { margin-top: 22px; }
.cassa-codice .in-riga { grid-template-columns: minmax(0, 1fr) auto; }
.cassa-codice p { margin: 0; }

/* Gli estremi del bonifico, uno sotto l'altro: in colonna stretta una
   tabella a due colonne spezzava l'IBAN. */
.estremi { display: grid; gap: 14px; margin: 0; }
.estremi > div { display: grid; gap: 2px; }
.estremi dt { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.estremi dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.estremi .forte dd { font-size: 18px; font-weight: 650; }
.estremi .due { grid-template-columns: 1fr 1fr; gap: 14px; }
.estremi .due > div { display: grid; gap: 2px; }
.modulo-recesso { margin: 26px 0; padding: 20px 22px; border: 1px solid var(--bordo);
                  border-radius: var(--raggio); background: var(--carta); }
.legale .modulo-recesso h2 { margin: 0 0 4px; }
.legale .modulo-recesso ul { list-style: none; padding: 0; margin: 14px 0; }
.modulo-recesso li { padding: 10px 0; border-bottom: 1px dashed var(--bordo); }
.modulo-recesso li::before { content: "- "; color: var(--tenue); }
.legale .modulo-recesso h3 { font-size: 1.05rem; margin: 0 0 4px; }
/* La funzione di recesso (24 settembre 2026): il campo esca sta fuori dallo
   schermo e non in display:none, che certi robot saltano. */
.funzione-recesso .esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cassa-fattura { font-style: normal; line-height: 1.6; color: var(--tenue); font-size: 15px; }

/* Il piede: chi vende, detto per esteso. VERSIONE B (Paolo, 22 settembre
   2026, con GRAFICA GDT): una fascia da bordo a bordo nel verde chiaro
   della fascia d'apertura, cosi' la pagina si apre e si chiude con lo
   stesso colore; un corpo solo e un colore solo, dove prima i corpi erano
   tre. In prima riga i collegamenti legali, sotto i dati della societa'. */
.pie { max-width: none; margin: 0; border-top: 0; background: var(--accento-tenue); color: var(--testo);
       font-size: 13px; line-height: 1.7; display: flex; flex-direction: column; align-items: center; gap: 4px;
       text-align: center; padding: 30px max(20px, calc((100% - var(--pagina)) / 2 + 20px)) 40px; }
.pie .prova { margin-bottom: 6px; }
.pie .legali, .pie .societa { display: block; margin: 0; text-wrap: balance; }
.pie a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.pie a:hover { text-decoration-color: currentColor; }
/* SUL TELEFONO I COLLEGAMENTI DEL PIEDE SI SBAGLIAVANO: sette voci legali
   alte quindici pixel a quattordici l'una dall'altra. L'imbottitura porta
   il bersaglio a quarantaquattro, che e' la misura di un dito, e a vedersi
   non cambia niente. Le mail stanno dentro il testo: i 14 px sopra e sotto
   allargano il bersaglio senza spostare le righe. */
.pie .legali a { display: inline-block; padding: 12px 4px; }
.pie .societa a { display: inline; padding: 14px 2px; }
/* La voce del piede si chiama .pie-voce: con .voce prendeva imbottitura e margini
   del pannello della voce nel quiz, e al telefono il piede era alto 662 px (GRAFICA, 27/9). */
.pie .pie-voce { display: inline-block; }
@media (max-width: 600px) {
  .pie { align-items: stretch; text-align: left; line-height: 1.55; padding: 20px 16px 28px; gap: 10px; }
  .pie .prova { align-self: flex-start; }
  .pie .legali { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .pie .legali a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .pie .legali .recedi { grid-column: 1 / -1; }
  /* il grigio un po' piu' scuro: var(--tenue) sul fondo del piede faceva 4,20 a 13 px; cosi' 5,22 in chiaro
     e 7,18 in scuro (GRAFICA, controllo incrociato del 3/10 notte) */
  .pie .societa { color: color-mix(in srgb, var(--tenue) 70%, var(--testo)); text-wrap: pretty; }
  .pie .pie-voce, .pie .societa .punto { display: inline; }
  .pie .legali .punto { display: none; }   /* nella griglia i puntini diventavano caselle (GRAFICA, 27/9) */
}

/* ---- pagina di stampa ---- */
.da-stampare h2 { border-bottom: 1px solid var(--bordo); padding-bottom: 6px; }
.da-stampare h3 { margin: 0 0 8px; }
.da-stampare .giusta { color: var(--ok); font-weight: 600; }
.domanda-stampa { margin-top: 18px; }
kbd { font: inherit; font-size: 12px; border: 1px solid var(--bordo);
      border-radius: var(--raggio-minuto); padding: 1px 5px; background: var(--carta); }
@media print {
  .non-stampare { display: none; }
  .da-stampare { font-size: 11pt; }
  .da-stampare h1, .da-stampare h2, .da-stampare h3 { break-after: avoid; }
  .chiave, .esame { break-inside: avoid; }
}

/* ---- le pagine legali e le fonti ------------------------------------
   Testo lungo da leggere per intero: colonna stretta, titoli d'articolo
   tenuti vicini al loro testo, elenchi con respiro. Le fonti sotto il
   titolo del corso stanno nel tono calmo della descrizione. */
.legale h2 { font-size: 1.05rem; margin: 28px 0 8px; }
.legale h1 + h2 { margin-top: 18px; }
.legale ul { padding-left: 1.2em; }
.legale li { margin-bottom: 6px; }
.legale .spunta { margin: 18px 0 8px; }
/* A tutta colonna, come la descrizione sopra e l'elenco sotto (Paolo, 24/9:
   «il testo non segue tutta l'ampiezza»). In fondo alla pagina del corso la
   nota viene subito dopo l'elenco delle lezioni, che si chiude già con la sua
   riga: il secondo filetto lì non va, e sopra i 900 px la nota sta in due
   colonne invece di lasciare un buco a destra (GRAFICA, strada B). */
.fonti-riga { color: var(--tenue); font-size: 14px; margin: 4px 0 0; }
.nota-fonti { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--riga, #d9e2e2);
              color: var(--tenue); font-size: 14px; }
.nota-fonti h2 { font-size: 1rem; margin: 0 0 8px; color: var(--testo, inherit); }
.nota-fonti ul { padding-left: 1.2em; }
.moduli + .nota-fonti { border-top: 0; padding-top: 0; }
@media (min-width: 900px) {
  .nota-fonti { column-count: 2; column-gap: 40px; }
  .nota-fonti h2 { column-span: all; }
  .nota-fonti p, .nota-fonti ul { break-inside: avoid; }
}

/* ---- il movimento, senza JavaScript ------------------------------------
   Due cose che apple.com faceva con le librerie e che il browser oggi fa
   da sé. La prima: passando da una pagina all'altra il contenuto sfuma
   invece di lampeggiare, e la barra e il lettore restano fermi al loro
   posto (hanno un `view-transition-name`). La seconda: i riquadri
   compaiono mentre si scorre, legati alla posizione e non a un
   osservatore, quindi quello che è già in vista alla prima apertura è
   già al suo posto. Chi ha chiesto meno movimento al sistema non vede
   né l'una né l'altra. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

@keyframes compare {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: none; }
}
@supports (animation-timeline: view()) {
  .scheda, .vendita .carta, .riquadro, .corso, .chiave, .esame, .richiesta, .contatori div {
    animation: compare linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .scheda, .vendita .carta, .riquadro, .corso, .chiave, .esame, .richiesta, .contatori div {
    animation: none;
  }
}

/* ---- le figure di Gloria ------------------------------------------------
   Una per pagina, col ruolo che ha sul sito: il mezzobusto in casa, il
   camice blu in «Vi parlo di me», il camice bianco in «Cosa dicono di me»,
   la copertina accanto al libro. Sono ritagli col fondo trasparente,
   appoggiati su un campo di verde chiaro col titolo che li tocca: foto e
   tipografia sulla stessa griglia, senza cornici. Il bordo basso del campo
   è la fine della figura, che nei PNG è tagliata netta lì. I file stanno
   in `gloria/`, ridotti da `materiale/grafica/dal_sito/`. */
.apertura.con-figura { display: grid; grid-template-columns: minmax(0, 1fr) 42%;
                       gap: 16px 24px; align-items: center;   /* il titolo a meta', non 280 px sotto (GRAFICA, R2, 27/9) */
                       background: var(--accento-tenue); border-radius: var(--raggio);
                       padding: 28px 0 0 24px; margin: 16px 0 34px; overflow: hidden; }
.apertura.con-figura > div { padding-bottom: 28px; }
.apertura.con-figura h1 { margin-top: 0; }
/* Sul fondo chiaro della fascia con la foto il sottotitolo grigio faceva
   4,20 contro 4,5, sulle tre pagine che presentano Gloria (GRAFICA GDT, 21
   settembre 2026). Un quinto del colore del testo lo porta a 4,85 nel tema
   chiaro e 6,62 nello scuro, e resta piu' tenue del testo, come deve. */
.apertura.con-figura .sottotitolo { color: color-mix(in srgb, var(--tenue) 80%, var(--testo)); }
.apertura.con-figura .figura { display: block; width: 100%; height: auto; align-self: end; }
.apertura.con-figura .figura.alta { width: auto; max-width: 100%; max-height: 440px;
                                    justify-self: end; margin-top: -28px; }
.apertura.con-figura .figura.libro { width: 64%; margin: 0 auto 28px; border: 1px solid var(--bordo); }
@media (max-width: 600px) {
  .apertura.con-figura { grid-template-columns: minmax(0, 1fr) 46%; gap: 10px 12px;
                         padding: 22px 0 0 18px; }
  .apertura.con-figura > div { padding-bottom: 22px; }
  /* Al telefono ogni figura va sotto il titolo, come nella prima pagina:
     anche quelle alte, che accanto lasciavano al titolo e al sottotitolo 172
     px (GRAFICA, 27/9; prima valeva solo per le figure larghe). Il ritratto
     alto si ferma a 320 e sta al centro, appoggiato al fondo della fascia. */
  .apertura.con-figura { grid-template-columns: minmax(0, 1fr); padding-right: 18px; }
  .apertura.con-figura > div { padding-bottom: 0; }
  .apertura.con-figura .figura.alta { max-height: 320px; margin-top: 0; justify-self: center; }
  .apertura.con-figura .figura:not(.alta) { margin: 0 -18px 0 0; width: calc(100% + 18px); }
  .apertura.con-figura .figura.libro { width: 60%; margin: 6px auto 22px; }
}

/* La fascia col ritratto in cima all'area dello studente, fatta come la
   home del sito di Gloria: il saluto a sinistra, la foto a destra, tutti
   e due dentro la colonna della pagina, e il fondo della fascia è lo
   stesso grigio salvia del fondo della foto, così non si vede dove
   finisce l'una e comincia l'altro. La foto è un'immagine in flusso, non
   uno sfondo: un ritaglio a copertura mostrava solo la testa, e ancorata
   al bordo dello schermo finiva lontana dal testo. I colori sono fissi,
   la foto è chiara anche col tema scuro. */
.fascia-ritratto { margin: -28px calc(50% - 50vw) 28px; background: #bccccd; color: #244747; }
.fascia-ritratto .dentro { max-width: var(--pagina); margin: 0 auto; padding: 0 20px 24px;
                           display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fascia-ritratto .ritratto { display: block; height: 230px; width: auto; flex: none; }
.fascia-ritratto .parole { align-self: stretch; }
.fascia-ritratto h1 { font-family: var(--cond); font-size: var(--titolo-porta); line-height: .9;
                      letter-spacing: -.01em; margin: 0 0 10px; color: #244747; }
.fascia-ritratto .sottotitolo { font-size: 18px; line-height: 1.5; color: #3f5758;
                                max-width: 26em; margin: 0; }
@media (min-width: 900px) {
  .fascia-ritratto .dentro { flex-direction: row; align-items: flex-end; justify-content: space-between;
                             gap: 32px; padding: 0 20px; }
  .fascia-ritratto .parole { align-self: center; padding: 40px 0; }
  .fascia-ritratto .ritratto { height: 440px; }
}
@media (min-width: 1500px) { .fascia-ritratto .ritratto { height: 500px; } }
@media (max-width: 430px) { .fascia-ritratto { margin-top: -20px; } }

/* ---- la fascia d'apertura della home ------------------------------------
   Da bordo a bordo dello schermo il campo di verde chiaro, che esce da
   `main` coi margini negativi; dentro, la griglia della pagina, la stessa
   delle carte sotto: a sinistra il blocco bianco del titolo, a destra
   Gloria, in piedi sul bordo basso della fascia. Foto e blocco sono due
   celle di una griglia normale, niente posizioni assolute né sconfinamenti:
   Safari e Chrome li mettono nello stesso posto. La foto è il ritaglio
   quadrato di Paolo, testa intera e spalle dentro il quadro, sul campo di
   verde chiaro: nessun bordo da nascondere.
   `overflow-x: clip` sul corpo evita che i cento vw, che contano anche la
   barra di scorrimento, aprano uno scorrimento orizzontale. */
html, body { overflow-x: clip; }
.eroe { margin: 0 calc(50% - 50vw) 44px; background: var(--accento-tenue); }
/* Attaccata alla barra solo quando è la prima cosa della pagina: chi è
   entrato trova prima l'avviso «i tuoi corsi sono nella tua area». */
.pubblica:first-child > .eroe { margin-top: -28px; }
.eroe .dentro { max-width: var(--pagina); margin: 0 auto; padding: 40px 20px 0;
                display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.eroe .parole { padding-bottom: 6px; }
.eroe h1 { font-family: var(--cond); font-size: var(--titolo-porta); line-height: .9; letter-spacing: -.01em;
           margin: 0 0 20px; }
.eroe .sottotitolo { font-size: 18px; line-height: 1.5; color: var(--tenue); max-width: 30em;
                     margin: 0 0 22px; }
.eroe .figura { display: block; width: 100%; max-width: 360px; height: auto; justify-self: end;
                object-fit: contain; object-position: right bottom; }
@media (max-width: 430px) { .eroe { margin-top: -20px; }
                            .eroe .figura { height: 320px; } }
/* Fra 420 e 999 la fascia aveva una colonna sola, con la foto sotto il testo
   e allineata a destra: a sinistra restava un vuoto alto 360 che cresceva
   con la finestra, 568 × 360 a 968 px (segnalato da Paolo, misurato da
   GRAFICA GDT il 22 settembre 2026). Fra 600 e 999 le colonne sono due, come
   sopra i mille ma senza il blocco bianco; sotto i 600 la foto sta al centro.
   I 40 px sotto le parole servono fra 600 e 830, dove il testo è più alto
   della foto e il bottone finirebbe a 6 px dal bordo. */
.eroe h1 { text-wrap: balance; }
@media (max-width: 599px) { .eroe .figura { justify-self: center; object-position: center bottom; } }
@media (min-width: 600px) and (max-width: 999px) {
  .eroe .dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); gap: 24px; }
  .eroe .parole { align-self: center; padding: 8px 0 40px; }
  .eroe .figura { max-width: 100%; align-self: end; }
}
@media (min-width: 600px) and (max-width: 759px) { .eroe .sottotitolo { font-size: 17px; } }
/* Al telefono il sottotitolo sulla foto va nel colore del testo pieno: il
   tenue non teneva il contrasto (GRAFICA, 27/9). */
@media (max-width: 599px) { .eroe .sottotitolo { color: var(--testo); } }

@media (min-width: 1000px) {
  /* La colonna della foto ha un tetto: una foto di proporzioni diverse
     da quelle attese non può allargarla e schiacciare il titolo. */
  .eroe .dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: end;
                  padding-top: 48px; min-height: 540px; }   /* seicento meno sessanta, chiesti da Paolo: la foto resta sul bordo */
  .eroe .parole { background: var(--carta); max-width: 560px; padding: 40px 40px 44px;
                  border-radius: var(--raggio) var(--raggio) 0 0; }
  .eroe .sottotitolo { font-size: 19px; margin-bottom: 26px; }
  .eroe .figura { max-width: 100%; max-height: 540px; }
}

/* ---- il quiz nel browser ------------------------------------------------
   La testa con «domanda 4 di 22», il tempo e l'interruttore dei suoni;
   sotto, la barra di avanzamento; poi la scena, che cambia domanda senza
   ricaricare. La risposta sbagliata trema appena, quella dopo entra
   scivolando; chi ha chiesto meno movimento al sistema non vede nessuna
   delle due cose. */
.testa-quiz { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testa-quiz .progresso { margin: 0; }
.testa-quiz .progresso b { font-weight: 600; color: var(--testo); }
.suoni { background: none; border: 0; padding: 6px; margin: -6px; color: var(--tenue);
         cursor: pointer; border-radius: var(--raggio); display: inline-flex; }
.suoni:hover { color: var(--accento); border-color: transparent; }
.suoni.spento .onda-suono { display: none; }
.suoni.spento { opacity: .55; }
.avanzamento { display: block; height: 4px; background: var(--bordo); margin: 12px 0 24px; }
.avanzamento i { display: block; height: 100%; background: var(--accento); transition: width .35s ease; }
.opzione:not(:disabled):hover { border-color: var(--testo); color: var(--testo); }
.opzione:disabled { opacity: 1; cursor: default; }
.opzione .segno { margin-left: auto; }
.dopo { margin-top: 18px; }
.esito { font-weight: 700; font-size: 21px; letter-spacing: -.01em; margin: 0 0 6px; }
.esito.ok { color: var(--ok); }
.esito.ko { color: var(--ko); }
.dopo .spiegazione { margin: 0 0 16px; }
.pillola { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--raggio);
           font-family: var(--din); font-weight: 600; font-size: 13px; margin-top: 12px; }
.pillola.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.pillola.ko { background: color-mix(in srgb, var(--ko) 12%, transparent); color: var(--ko); }
.punteggio .grande em { font-size: 40px; }
@keyframes scuoti { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
.opzione.scuoti { animation: scuoti .35s ease; }
@keyframes entra { from { opacity: 0; translate: 28px 0; } to { opacity: 1; translate: none; } }
#scena.entra { animation: entra .28s ease-out; }
@media (prefers-reduced-motion: reduce) { .opzione.scuoti, #scena.entra { animation: none; } }

/* -------------------------------------------------------------------
   IL CORSO PRATICO — 17 settembre 2026
   Il primo corso senza testo da leggere: è fatto di immagini e video.
   La pagina dello strumento e quella dell'esercizio girano intorno al
   PALCO, un riquadro solo in cui si sceglie come guardare — la foto in
   piedi, la punta da vicino, il video — e il testo sta accanto. Sul
   telefono il palco sta in alto e il testo scorre sotto; dal desktop in
   poi resta fermo a sinistra mentre si leggono le note. Bozza approvata
   da Paolo l'11 settembre (strumenti3d/scheda_palco.html).
   ------------------------------------------------------------------- */
.pratica { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
/* Il Condensed come tutti i titoli da 52 (Paolo il 21/9: «Condensed ovunque»; GRAFICA, griglia B). */
.pratica-testa h1 { font-family: var(--cond); font-size: var(--titolo-pagina); line-height: .95; letter-spacing: -.01em; margin: 8px 0 10px; }
.pratica .sotto { font-size: 17px; line-height: 1.5; color: var(--tenue); max-width: 60ch; margin: 0; }
.pratica-testo { min-width: 0; }
.pratica-testo h2 { margin-top: 0; }
.pratica-testo section { margin: 0 0 32px; }

.palco { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta); overflow: hidden; }
.palco.vuoto { padding: 24px; }
.palco .modi { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--bordo); }
.palco .modi .chip { flex: 1 1 0; justify-content: center; }
.palco .pane { display: flex; align-items: center; justify-content: center;
               height: min(68vh, 640px); background: var(--sfondo); }
.palco .pane[hidden] { display: none; }
.palco .pane.con-lente { position: relative; cursor: zoom-in; }
.palco .pane.con-lente .lente-apri { right: 12px; bottom: 12px; }
.palco .pane img { max-height: 100%; max-width: 100%; width: auto; height: auto; padding: 16px 12px; }
.palco .pane video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0b1717; }
.palco.largo .pane { height: auto; }
.palco.largo .pane video { aspect-ratio: 16 / 9; height: auto; }
.palco .did { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--tenue); text-align: center; }
.palco .calmo { margin: 0; }

/* Le note di Gloria: la voce a sinistra in maiuscoletto, il testo accanto. */
dl.note { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; max-width: 66ch; }
dl.note dt { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--accento);
             font-weight: 700; padding-top: 4px; }
dl.note dd { margin: 0; line-height: 1.55; }
@media (max-width: 560px) { dl.note { grid-template-columns: 1fr; gap: 2px; } dl.note dd { margin-bottom: 12px; } }

/* Gli esercizi in cui lo strumento compare, come schede piccole. */
.chips-esercizi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips-esercizi a { display: block; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta);
                    padding: 9px 12px; text-decoration: none; color: inherit; line-height: 1.3; }
.chips-esercizi a:hover { border-color: var(--testo); }
.chips-esercizi b { display: block; font-size: 15px; }
.chips-esercizi span { font-size: 12.5px; color: var(--tenue); }

/* Lo strumento richiamabile dalla pagina dell'esercizio. */
.strumenti-di-lato { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; max-width: 64ch; }
.strumento-di-lato { display: flex; gap: 14px; align-items: center; border: 1px solid var(--bordo);
                     border-radius: var(--raggio); background: var(--carta); padding: 8px 12px;
                     text-decoration: none; color: inherit; }
.strumento-di-lato:hover { border-color: var(--testo); }
/* dello strumento intero la miniatura prende la cima: la punta vera */
.strumento-di-lato img { height: 64px; width: 40px; object-fit: cover; object-position: top; }
.strumento-di-lato b { display: block; font-size: 15px; }
.strumento-di-lato span span { font-size: 12.5px; color: var(--tenue); }

/* I passi: numerati con il verde, uno per capoverso. */
ol.passi { margin: 0; padding: 0 0 0 2.2em; max-width: 64ch; counter-reset: passo; list-style: none; }
ol.passi li { position: relative; margin: 0 0 12px; line-height: 1.55; }
ol.passi li::before { counter-increment: passo; content: counter(passo);
                      position: absolute; left: -2.2em; top: .1em; width: 1.6em; height: 1.6em;
                      border-radius: 50%; background: var(--accento-tenue); color: var(--accento);
                      font-size: 12.5px; font-weight: 700; display: grid; place-items: center;
                      font-variant-numeric: tabular-nums; }

.prossimo { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--bordo);
            padding-top: 14px; margin-top: 8px; font-size: 15px; }
.prossimo a { text-decoration: none; color: var(--testo); font-weight: 600; max-width: 48%; }
.prossimo a.dopo { text-align: right; margin-left: auto; margin-top: 0; }   /* sulla riga di «Prima» (GRAFICA, difetto 56) */
.prossimo small { display: block; color: var(--tenue); font-size: 11.5px; letter-spacing: .08em;
                  text-transform: uppercase; font-weight: 600; }

@media (min-width: 900px) {
  .pratica { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .pratica-testa { grid-column: 1 / -1; }
  .pratica-testa h1 { max-width: 760px; }
  .palco { position: sticky; top: 72px; }
  .esercizio .palco { position: static; }
  .pratica.esercizio { grid-template-columns: minmax(0, 1fr); }
  .pratica.esercizio .palco { max-width: 840px; }
  .pratica.esercizio .pratica-testo { max-width: 840px; }
}

/* Riconoscere gli strumenti: la punta a sinistra, quattro nomi a destra. */
.riconosci h1 { margin: 8px 0 18px; }
.riconosci-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.riconosci-foto { position: relative; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta);
                  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; }
.riconosci-foto img { max-height: 420px; max-width: 100%; width: auto; }
.riconosci-foto .mostra-intera { position: absolute; opacity: 0; pointer-events: none; }
.riconosci-foto .l-intera { display: none; }
.riconosci-foto .mostra-intera:checked ~ .l-intera { display: block; }
.riconosci-foto .mostra-intera:checked ~ .la-punta { display: none; }
.riconosci-foto .mostra-intera:checked ~ label { background: var(--accento-tenue); color: var(--accento); border-color: transparent; }
.riconosci-nomi { display: flex; flex-direction: column; gap: 10px; align-self: center; }
.riconosci-nomi .bottone { text-align: left; }
.riconosci.esito.giusto h1 { color: var(--ok); }
.riconosci.esito.sbagliato h1 { color: var(--ko); }
@media (min-width: 760px) { .riconosci-corpo { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 40px; } }

/* Il modo 3D del palco: la tela riempie il riquadro, i comandi in fondo. */
.palco .pane-3d { position: relative; display: block; }
.palco .pane-3d[hidden] { display: none; }
.pane-3d .tela { position: absolute; inset: 0; touch-action: none; }
.pane-3d canvas { display: block; width: 100%; height: 100%; }
.pane-3d .sugg { position: absolute; left: 10px; top: 10px; max-width: 80%; font-size: 12px; color: var(--tenue);
                 background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-minuto);
                 padding: 3px 8px; pointer-events: none; }
.pane-3d .comandi-3d .gruppo { display: contents; }
/* I tasti fatti solo di un'icona di GRAFICA: 44 per 44, l'icona a 22, il nome
   sta nell'`aria-label` del tasto (26 settembre 2026). */
.chip.icona { display: inline-flex; align-items: center; justify-content: center;
              min-width: 44px; min-height: 44px; padding: 0; }
.chip.icona svg, .tema svg, .consenso-chiudi svg { display: block; }
.pane-3d .comandi-3d { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center;
                       gap: 6px; flex-wrap: wrap; }

/* Le pagine con un video — il Protocollo, la lezione registrata del corso
   pratico. Dal 17 al 26 settembre 2026 erano una colonna sola larga 840,
   in una pagina stretta a 880: Paolo il 17, davanti a tre larghezze nella
   stessa pagina, «il filetto non prende tutta l'ampiezza come il blocco di
   testo», e il 14, «non è tutto centrato ma spostato a sinistra». Con la
   griglia B (paolo-60) la lezione col video e' una lezione come le altre:
   pagina larga 1180, e il video, la didascalia, l'appunto e i comandi
   nella colonna del testo, 740. Resta solo la didascalia un po' piu'
   grande, che sotto un video si legge da piu' lontano. */
.lettura.articolo:has(.video) .video figcaption { font-size: 17px; }
/* Il blocco del video non ha il limite del testo, a nessuna larghezza: sotto
   i 1100 il resto del corpo resta ai suoi 70ch, sopra ai 740 (piu' su, nella
   griglia della lezione). */
.lettura.articolo:has(.video) .corpo { max-width: none; }
@media (max-width: 1099px) { .lettura.articolo:has(.video) .corpo > :not(.b-video) { max-width: 70ch; } }
/* L'esercizio pratico resta stretto a 880 finche' GRAFICA non l'ha guardato
   con un conto che ce l'ha (griglia B, 26 settembre 2026). Si restringe
   `--pagina`, non `main`: la larghezza della pagina e' una sola misura, e la
   leggono anche il piede e la barra del lettore. */
body:has(.pratica.esercizio) { --pagina: 880px; }

/* LA HOME SUL TELEFONO. Paolo il 17 settembre 2026, con l'iPhone in
   mano: «non bellissima». Il ritratto stava sotto il saluto, in un
   rettangolo chiaro che non era il colore della fascia — la foto porta
   un suo profilo colore e Safari la rende più chiara — e il vuoto a
   sinistra della figura restava vuoto. Adesso la foto è ritagliata sulla
   persona col fondo trasparente (`ritratto.webp`), quindi nessun
   rettangolo su nessun tema; e sul telefono sta a destra del saluto,
   appoggiata in basso, con le parole che le crescono accanto. */
@media (max-width: 899px) {
  .fascia-ritratto .dentro { display: grid; grid-template-columns: minmax(0, 1fr) auto;
                             column-gap: 8px; align-items: end; padding-bottom: 0; }
  .fascia-ritratto .parole { display: contents; }
  .fascia-ritratto h1 { grid-column: 1; align-self: end; padding-top: 22px; }
  .fascia-ritratto .sottotitolo { grid-column: 1; font-size: 16.5px; padding-bottom: 18px; }
  .fascia-ritratto .ritratto { grid-column: 2; grid-row: 1 / span 2; height: 250px; width: auto;
                               align-self: end; max-width: 46vw; object-fit: contain; object-position: right bottom; }
}
@media (max-width: 430px) { .fascia-ritratto .ritratto { height: 220px; } }

/* -------------------------------------------------------------------
   LE IMMAGINI CLINICHE — 17 settembre 2026
   Il corso «Osservazione e descrizione di immagini cliniche»: una
   fotografia di Gloria e la sua descrizione voce per voce. La pagina del
   caso usa il palco del corso pratico; qui la foto è grande, si
   ingrandisce con le dita (js/zoom.js) e accanto c'è la lezione
   registrata che parte dal minuto del caso. Le voci «si vede» hanno il
   filo verde, quelle «si sa e si fa» il filo grigio: all'esame sono le
   due domande. Poi l'ANALIZZA, che è l'esame simulato, chiesto da Paolo
   «molto creativo e dinamico».
   ------------------------------------------------------------------- */
.pane-foto { position: relative; overflow: hidden; background: #0b1717; }
.pane-foto img.zoomabile { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain;
                           padding: 0; transform-origin: center; will-change: transform; user-select: none;
                           -webkit-user-drag: none; transition: transform .22s ease; }
.pane-foto.ingrandita img.zoomabile { transition: none; }
.caso .palco .pane-foto { height: auto; }
.caso .palco .pane-video { height: auto; }
.caso .palco .pane-video video { aspect-ratio: 16 / 9; height: auto; }
.prova-tu { margin: 0 0 26px; }

dl.voci { display: block; max-width: 70ch; }
dl.voci .voce { display: block; padding: 8px 0 10px 14px; margin: 0 0 6px; border-left: 3px solid var(--bordo); }
dl.voci .voce.vede { border-left-color: var(--accento); }
dl.voci .voce dt { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
                   color: var(--tenue); padding: 0 0 4px; }
dl.voci .voce.vede dt { color: var(--accento); }
dl.voci .voce dd { margin: 0; line-height: 1.55; }
/* il titoletto di un gruppo di voci, «Le 4 cause delle lesioni cervicali»: senza testo suo */
dl.voci .voce.titolo { border-left-color: transparent; padding: 14px 0 0; margin: 0; }
dl.voci .voce.titolo dt { color: var(--testo); padding: 0; }
dl.voci .voce.titolo dd { display: none; }
.legenda { font-size: 13px; color: var(--tenue); margin: -8px 0 14px; }
.legenda .vede { color: var(--accento); font-weight: 600; }
.chips-esercizi .chip-ferma { display: block; border: 1px dashed var(--bordo); border-radius: var(--raggio);
                              padding: 9px 12px; line-height: 1.3; }

/* I capitoli di un video lungo: la barra a segmenti che si riempie, il
   capitolo in corso col suo titolo, e l'elenco con le miniature. */
.capitoli-video { margin: 14px 0 0; }
.capitolo-ora { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
.capitolo-ora .et { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue);
                    font-weight: 600; white-space: nowrap; }
.capitolo-ora .tit { font-size: 17px; line-height: 1.3; }
.capitoli-barra { display: flex; gap: 3px; height: 10px; }
.capitoli-barra .seg { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-width: 4px; height: 10px;
                       background: var(--accento-tenue); border-radius: var(--raggio-minuto); position: relative; overflow: hidden;
                       transition: transform .15s; }
.capitoli-barra .seg i { display: block; height: 100%; width: 0; background: var(--accento); }
.capitoli-barra .seg:hover { transform: scaleY(1.5); }
.capitoli-barra .seg.on { background: color-mix(in srgb, var(--accento) 35%, var(--accento-tenue)); }
.capitoli-barra .seg:focus-visible { outline: 2px solid var(--testo); outline-offset: 2px; }
.capitoli { list-style: none; margin: 16px 0 0; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 4px 16px; }
.capitoli li { display: flex; align-items: center; gap: 8px; border-radius: var(--raggio); padding: 4px 6px; }
.capitoli li.on { background: var(--accento-tenue); }
.capitoli button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.capitoli button:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: var(--raggio); }
.capitoli img { width: 96px; height: 54px; object-fit: cover; border-radius: var(--raggio); flex: none; background: #0b1717; }
.capitoli .dentro { min-width: 0; }
.capitoli .t { display: block; font-variant-numeric: tabular-nums; color: var(--accento); font-weight: 700; font-size: 12.5px; }
.capitoli .tit { display: block; font-size: 15px; line-height: 1.3; }
/* Non `.scheda`: quella è la scheda dei corsi, e il link se ne prendeva
   bordo, fondo, ombra e comparsa (visto da GRAFICA, 24 settembre 2026). */
.capitoli .capitolo-scheda { font-size: 12.5px; color: var(--tenue); white-space: nowrap; }
@media (max-width: 560px) { .capitoli img { width: 72px; height: 40px; } }

/* L'Analizza: la foto a sinistra, il gioco a destra. */
.analizza-testa h1 { font-family: var(--cond); font-size: var(--titolo-pagina); line-height: .95; letter-spacing: -.01em; margin: 8px 0 10px; }
.analizza-testa .sotto { font-size: 16px; line-height: 1.5; color: var(--tenue); max-width: 62ch; margin: 0 0 18px; }
.analizza-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.analizza-foto .pane-foto { border: 1px solid var(--bordo); border-radius: var(--raggio); display: flex;
                            align-items: center; justify-content: center; max-height: 42vh; }
.analizza-foto img.zoomabile { max-height: 42vh; }
.analizza-foto .did { margin: 6px 0 0; font-size: 13px; color: var(--tenue); text-align: center; }
.analizza .fase.entra { animation: entra .28s ease-out; }
.analizza.cambio { opacity: .45; transition: opacity .2s; }

/* IL CRONOMETRO dell'esame simulato. Si chiamava `.tempo`, come il
   contatore del lettore audio, e siccome sta piu' in basso nel foglio
   vinceva lui: il contatore diventava un quadrato di 64 pixel col testo su
   tre righe, e la durata — un `span`, e qui sotto gli `span` sono messi
   `absolute` — se ne andava a spasso per la barra. Due cose diverse, due
   nomi (20 settembre 2026). */
.cronometro { position: relative; width: 64px; height: 64px; margin: 0 0 12px; cursor: pointer; }
.cronometro svg { width: 100%; height: 100%; }
.cronometro .fondo { fill: none; stroke: var(--bordo); stroke-width: 3; }
.cronometro .arco { fill: none; stroke: var(--accento); stroke-width: 3; stroke-linecap: round;
               transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 1s linear; }
.cronometro.finito .arco { stroke: var(--ko); }
.cronometro span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700;
              font-variant-numeric: tabular-nums; }

.scrittura textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; line-height: 1.5;
                      padding: 12px 14px; border: 1px solid var(--bordo); border-radius: var(--raggio);
                      background: var(--carta); color: var(--testo); resize: vertical; min-height: 150px; }
.scrittura textarea:focus { outline: 2px solid var(--accento); outline-offset: 1px; border-color: transparent; }
.scrittura-comandi { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 30px; }
.scrittura-comandi .pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--tenue); display: inline-block; }
#detta.on .pallino { background: var(--ko); animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .3; } }
.scrittura-comandi .interim { color: var(--tenue); font-style: italic; font-size: 14px; }
/* quando la dettatura non parte (4/10): una riga sotto i comandi, come gli avvisi calmi */
.scrittura .detta-avviso { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tenue); }

.metro { margin: 16px 0; }
/* `metro-filo` e non `barra`: `.barra` è la testata del sito, e il filo ne prendeva
   i 52 pixel di altezza e il fondo verde (trovato il 19 settembre 2026) */
.metro .metro-filo { height: 8px; border-radius: var(--raggio); background: var(--accento-tenue); overflow: hidden; }
.metro .metro-filo i { display: block; height: 100%; width: 0; background: var(--accento); transition: width .35s ease; }
.metro .metro-filo.pieno i { background: var(--ok); }
.metro p { margin: 8px 0 0; font-size: 14.5px; color: var(--tenue); }
.metro b { color: var(--testo); }

.esito-riga { font-size: 20px; margin: 0 0 12px; }
.voci-esito { list-style: none; margin: 0; padding: 0; }
.voce-esito { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--bordo);
              animation: entra .35s ease-out both; }
.voce-esito .segno { all: unset; cursor: pointer; flex: none; width: 28px; height: 28px; border-radius: 50%;
                     display: grid; place-items: center; border: 2px solid var(--bordo); font-weight: 700;
                     color: var(--tenue); margin-top: 2px; }
.voce-esito .segno:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.voce-esito.colta .segno { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.voce-esito .voce-nome { display: block; font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
                         font-weight: 700; margin-bottom: 4px; color: var(--tenue); }
.voce-esito.colta .voce-nome { color: var(--accento); }
.voce-esito .voce-testo { margin: 0; line-height: 1.5; font-size: 15px; }
.tuo-testo { margin: 14px 0; }
.tuo-testo summary { cursor: pointer; color: var(--tenue); font-size: 14px; }
.tuo-testo p { line-height: 1.55; white-space: pre-wrap; margin: 8px 0 0; }
.analizza mark { background: var(--accento-tenue); color: var(--testo); border-radius: var(--raggio-minuto); padding: 0 2px; font-weight: 600; }

.pagella { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
.pagella .voto { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px; background: var(--carta); }
.pagella .voto b { display: block; font-family: var(--cond); font-weight: 600; font-size: 44px; line-height: 1;
                   letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.pagella .voto span { font-size: 13px; color: var(--tenue); }
.analizza .collegamenti { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .analizza .fase.entra, .voce-esito, #detta.on .pallino { animation: none; }
  .cronometro .arco, .metro .metro-filo i, .pane-foto img.zoomabile { transition: none; }
}
@media (min-width: 900px) {
  .pratica.caso { grid-template-columns: minmax(340px, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .analizza-corpo { grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 1fr); column-gap: 36px; align-items: start; }
  .analizza-foto { position: sticky; top: 72px; }
  .analizza-foto .pane-foto, .analizza-foto img.zoomabile { max-height: 70vh; }
}

/* Gloria che commenta il caso: il lettore delle lezioni, ma dentro la
   scheda sotto la fotografia, non nella barra fissa in fondo. */
.lettore.in-scheda { position: static; border: 0; border-top: 1px solid var(--bordo); padding: 10px 14px 12px;
                     background: var(--carta); box-shadow: none; }
.lettore.in-scheda .dentro { max-width: none; }
.lettore.in-scheda .chi { margin: 0 0 6px; font-size: 13px; color: var(--tenue); }
.lettore.in-scheda .chi b { color: var(--testo); }

/* Il corso piccolo si mostra piatto: i video sotto il titolo del loro
   modulo, che qui è un'intestazione e non una riga da aprire. */
.moduli li.sezione { border-bottom: 0; padding: 30px 0 8px; }
.moduli li.sezione:first-child { padding-top: 8px; }
.moduli li.sezione h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.moduli li.sezione p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.moduli.piatto li:not(.sezione) a { padding-left: 4px; }

/* ---- da rivedere: le domande sbagliate, a fine quiz e nel piano ---- */
.rivedi-titolo { margin: 28px 0 4px; display: flex; align-items: baseline; gap: 10px; }
.rivedi-titolo .calmo { font-weight: 400; font-size: 14px; }
.rivedi { list-style: none; margin: 4px 0 0; padding: 0; }
.rivedi > li { padding: 16px 0; border-bottom: 1px solid var(--bordo); }
.rivedi > li:last-child { border-bottom: 0; }
.rivedi .domanda { font-weight: 600; font-size: 16px; line-height: 1.4; margin: 0 0 8px; }
.rivedi .risposte { display: grid; gap: 4px; }
.rivedi .risposte p { margin: 0; font-size: 15px; line-height: 1.4; }
.rivedi .risposte b { font-weight: 600; margin-right: 4px; }
.rivedi .ko b { color: var(--ko); }
.rivedi .ok b { color: var(--ok); }
.rivedi .spiegazione { margin: 8px 0 0; }
/* dov'era il tranello, nelle domande a tradimento (19 settembre 2026):
   una riga sola, col filo a sinistra come una nota a margine */
.rivedi .trappola { margin: 10px 0 0; padding: 6px 0 6px 12px; border-left: 3px solid var(--accento);
                    font-size: 14.5px; line-height: 1.45; color: var(--testo); }
.rivedi .trappola b { color: var(--accento); font-weight: 600; margin-right: 4px; }
.rivedi .origine { margin: 10px 0 0; font-size: 14px; }
.rivedi .origine a { text-decoration: none; font-weight: 600; }
.rivedi .origine a:hover { text-decoration: underline; }
.rivedi .origine .cod { min-width: 0; margin-right: 2px; font-size: 12px; }
.etichetta { display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 2px 7px;
             border-radius: var(--raggio-minuto); font-size: 11px; font-weight: 600; letter-spacing: .05em;
             text-transform: uppercase; white-space: nowrap;
             background: color-mix(in srgb, var(--accento) 12%, transparent); color: var(--accento); }
.tappa h2 small { font-weight: 400; font-size: 14px; color: var(--tenue); margin-left: 2px; }
.tappa > .calmo { margin: 0 0 6px 36px; font-size: 14px; }
.tappa h2 .tit { flex: 1 1 auto; min-width: 0; }
@media (max-width: 600px) { .tappa h2 .tit { line-height: 1.2; } }
.tappa h2 .tit small { display: block; margin: 2px 0 0; }

/* ---- quante domande: la scelta prima di un quiz che pesca dalla banca ---- */
.scelta-quiz .punteggio { padding: 18px 0 10px; }
.scelta-quiz .punteggio .grande { font-size: 84px; }
.scelta-quiz input[type=range] { display: block; width: 100%; margin: 8px 0 14px; accent-color: var(--accento); }
.scelta-quiz .tacche { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 22px; }
.scelta-quiz .tacche button {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bordo); background: transparent; color: var(--testo);
}
.scelta-quiz .tacche button.on { border-color: var(--accento); color: var(--accento); background: var(--accento-tenue); }

/* ---- le parti della prova: nella scelta, durante il quiz, nell'esito ---- */
.quote-parti { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 10px;
               font-size: 13px; color: var(--tenue); }
.quote-parti b { color: var(--testo); font-variant-numeric: tabular-nums; font-weight: 600; }
.progresso .parte-ora:not(:empty) { font-weight: 600; color: var(--accento); }
.progresso .parte-ora:not(:empty)::after { content: " · "; color: var(--tenue); font-weight: 400; }
.sotto-soglia { display: block; margin-top: 8px; font-size: 13px; }
.parti-esito { list-style: none; margin: 4px 0 8px; padding: 0; }
.parti-esito li { display: grid; grid-template-columns: 8.5rem 1fr auto 7.5rem; align-items: center; gap: 12px;
                  padding: 11px 0; border-bottom: 1px solid var(--bordo); }
.parti-esito li:last-child { border-bottom: 0; }
.parti-esito .nome { font-weight: 600; }
.parti-esito .misura { position: relative; height: 8px; border-radius: var(--raggio);
                      background: color-mix(in srgb, var(--testo) 10%, transparent); }
.parti-esito .misura i { position: absolute; inset: 0 auto 0 0; border-radius: var(--raggio); background: var(--tenue); }
.parti-esito li.ok .misura i { background: var(--ok); }
.parti-esito li.ko .misura i { background: var(--ko); }
.parti-esito .misura b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
                        background: var(--testo); opacity: .55; }
.parti-esito .conto { font-family: var(--cond); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.parti-esito .conto em { font-style: normal; font-size: 14px; color: var(--tenue); font-weight: 600; }
.parti-esito .dice { font-size: 13px; text-align: right; line-height: 1.25; }
.parti-esito li.ok .dice { color: var(--ok); }
.parti-esito li.ko .dice { color: var(--ko); }
.parti-esito .dice small { display: block; color: var(--tenue); font-size: 11.5px; }
/* `.misura` e non `.barra`: `.barra` e' la testata del sito, e le sue regole
   facevano le barre alte tre volte tanto. */
@media (max-width: 520px) {
  .parti-esito li { grid-template-columns: 1fr auto auto; row-gap: 8px; }
  .parti-esito .misura { grid-column: 1 / -1; grid-row: 2; }
  .parti-esito .conto { grid-column: 2; grid-row: 1; font-size: 19px; }
  .parti-esito .dice { grid-column: 3; grid-row: 1; }
}

/* ---- il quiz dinamico: la foto della domanda, le punte da scegliere ---- */
.domanda-foto { margin: 4px 0 14px; border-radius: var(--raggio); overflow: hidden; background: var(--fondo-foto);
                aspect-ratio: 4 / 3; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.domanda-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.opzioni.foto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opzione.foto { position: relative; padding: 0; overflow: hidden; aspect-ratio: 1 / 1; display: block;
                background: var(--fondo-foto); }
.opzione.foto img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 10px; }
.opzione.foto .lettera { position: absolute; top: 8px; left: 8px; z-index: 1; }
.opzione.foto.giusta { outline: 3px solid var(--ok); outline-offset: -3px; }
.opzione.foto.sbagliata { outline: 3px solid var(--ko); outline-offset: -3px; }
.rivedi img.mini { float: right; width: 96px; height: 72px; object-fit: contain; border-radius: var(--raggio);
                   margin: 0 0 8px 14px; background: var(--fondo-foto); }
.rivedi > li::after { content: ""; display: block; clear: both; }
/* Gli strumenti interi sono foto lunghe e strette (331 × 2.866): in piedi,
   come nella loro scheda. Nella domanda un riquadro alto; come alternative
   quattro affiancati, come su un vassoio (Paolo, 19 settembre 2026). */
/* le foto arrivano fino al bordo, punta compresa: un margine intorno, se no
   la punta tocca il riquadro (Paolo, 19 settembre 2026) */
.domanda-foto.in-piedi { aspect-ratio: auto; height: min(58vh, 480px); padding: 22px 16px; }
.domanda-foto.in-piedi img { height: 100%; width: auto; max-width: 100%; }
.opzioni.foto.in-piedi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opzioni.foto.in-piedi .opzione.foto { aspect-ratio: 1 / 3.2; }
.opzioni.foto.in-piedi .opzione.foto img { padding: 34px 6px 16px; }
.rivedi img.mini.in-piedi { width: 40px; height: 150px; padding: 8px 4px; }

/* ---- il quiz dinamico: la pagina dove si compone ----
   Gli argomenti sono caselle vestite da riquadri: se ne accende uno o più
   (Paolo, 19 settembre 2026: niente lezioni una per una). Il segno in alto a
   destra dice che è acceso, e senza JavaScript il modulo funziona uguale. */
/* Tutto largo anche qui (GRAFICA, giro del 27/9): stava a 680 al centro,
   con 416 pixel vuoti per parte. Da 1100 in su gli argomenti su tre colonne. */
.carta.dinamico { max-width: none; margin-left: 0; }
.dinamico h1 { margin-bottom: 6px; }
/* Il quaderno, il recupero, il piano e il quiz dinamico sono pagine dello
   studio, non documenti: il titolo e' quello di una pagina (griglia B). Con
   30 stavano trenta pixel sotto la lezione da cui si arriva. */
.quaderno h1, .recupero-testa h1, .dinamico h1, h1.pagina-studio { font-family: var(--cond); font-size: var(--titolo-pagina);
                                                                   line-height: .95; letter-spacing: -.01em; }
.argomenti { border: 0; padding: 0; margin: 20px 0 18px; min-width: 0;
             display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 1100px) { .argomenti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* `label` ha un margine e un colore suoi (i moduli): qui si azzerano, se no
   fra un riquadro e l'altro restava un vuoto di sedici pixel in più */
.argomento { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
             margin: 0; font-size: inherit; color: var(--testo);
             padding: 12px 40px 12px 14px; border: 1px solid var(--bordo); border-radius: var(--raggio);
             cursor: pointer; min-width: 0; }
.argomento input { position: absolute; opacity: 0; pointer-events: none; }
.argomento::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px;
                    border: 1.5px solid var(--bordo); border-radius: 50%; }
.argomento b { font-size: 16px; font-weight: 600; }
.argomento span { font-size: 13px; color: var(--tenue); line-height: 1.3; }
.argomento em { font-style: normal; font-size: 12px; color: var(--tenue); margin-top: 4px;
                font-variant-numeric: tabular-nums; }
.argomento:hover { border-color: var(--accento); }
.argomento:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue);
                                box-shadow: inset 0 0 0 1px var(--accento); }
.argomento:has(input:checked) b { color: var(--accento); }
.argomento:has(input:checked)::after { border-color: var(--accento); background: var(--accento)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.argomento:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
/* Le due spunte del quiz dinamico — il tempo e «torna su quello che
   sbaglio». Erano scritte come `.spunta` e basta, cioe' riscrivevano la
   spunta di TUTTA la piattaforma: quella dell'accettazione dei termini e
   quella della cassa comprese, che sono le due dove un difetto costa. E'
   la stessa malattia del `.tempo` e del `.pie`: un nome per due mestieri. */
.ric-interruttori .spunta { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
          cursor: pointer; margin: 0; font-size: 15px; color: var(--testo); }
.ric-interruttori .spunta input { flex: 0 0 auto; margin: 0; width: auto;
          accent-color: var(--accento); translate: 0 2px; }
.ric-interruttori .spunta .nome { flex: 1 1 auto; min-width: 0; }
.ric-interruttori .spunta .nome small { display: block; font-size: 12.5px; color: var(--tenue); }

.dinamico .punteggio { padding: 8px 0 6px; }
.dinamico .punteggio .grande { font-size: 76px; }
.dinamico input[type=range] { display: block; width: 100%; margin: 8px 0 12px; accent-color: var(--accento); }
.dinamico .tacche { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 16px; }
.dinamico .tacche button { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
                           border: 1px solid var(--bordo); background: transparent; color: var(--testo); }
.dinamico .tacche button.on { border-color: var(--accento); color: var(--accento); background: var(--accento-tenue); }
/* la difficoltà: tre pastiglie come le tacche, una sola accesa */
.gradi { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 0 10px; }
.gradi .calmo { font-size: 13px; margin-right: 2px; }
.gradi label { position: relative; margin: 0; cursor: pointer; }
.gradi input { position: absolute; opacity: 0; pointer-events: none; }
.gradi span:not(.calmo) { display: inline-block; font-size: 13px; padding: 6px 12px; border-radius: 999px;
                          border: 1px solid var(--bordo); color: var(--testo); }
.gradi label:hover span { border-color: var(--accento); }
.gradi label:has(input:checked) span { border-color: var(--accento); color: var(--accento); background: var(--accento-tenue); }
.gradi label:has(input:focus-visible) span { outline: 2px solid var(--accento); outline-offset: 2px; }
.ric-interruttori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0 0 8px; }
.disponibili { text-align: center; font-size: 13.5px; color: var(--tenue); margin: 8px 0 12px;
               font-variant-numeric: tabular-nums; }
.disponibili.vuoto { color: var(--ko); }

/* Simula l'esame: lo scritto del bando in un tocco, sopra la composizione.
   Le tre parti con i loro numeri veri — quante domande, quante giuste per
   passare — come sta scritto nel bando (Paolo, 19 settembre 2026). */
.esame-simulato { margin: 18px 0 30px; padding: 16px 18px 14px; background: var(--accento-tenue);
                  border-top: 3px solid var(--accento); }
.esame-simulato h2 { margin: 0 0 4px; }
.esame-simulato > p { margin: 0; font-size: 14.5px; }
.parti-compito { list-style: none; margin: 14px 0 16px; padding: 0;
                 display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.parti-compito li { display: flex; flex-direction: column; min-width: 0; padding: 10px 12px;
                    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.parti-compito b { font-family: var(--cond); font-size: 34px; line-height: 1; font-weight: 600;
                   color: var(--accento); font-variant-numeric: tabular-nums; }
.parti-compito span { font-size: 14px; font-weight: 600; margin-top: 4px; }
.parti-compito small { font-size: 12.5px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.esame-simulato .fonte-regole { font-size: 12.5px; margin: 10px 0 0; text-align: center; }
.dinamico h2.componi { margin: 0 0 4px; }

@media (max-width: 480px) {
  /* sul telefono una colonna sola: a due, «3.867 domande» andava a capo */
  .argomenti { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .argomento { padding: 10px 40px 10px 14px; }
  .esame-simulato { padding: 14px 14px 12px; }
  .parti-compito { gap: 6px; }
  .parti-compito li { padding: 8px 10px; }
  .parti-compito b { font-size: 28px; }
}
@media (max-width: 560px) {
  .ric-interruttori { grid-template-columns: minmax(0, 1fr); }
  .dinamico .punteggio .grande { font-size: 60px; }
}

/* ======================================================================
   LA MODALITÀ QUIZ, IMMERSIVA — `.aula` (19 settembre 2026)

   Paolo: i quiz si fanno sul telefono, in treno; vuole «l'oscuramento di
   tutto quello che è il contesto» e che niente resti fuori vista: «tutta
   l'area deve essere sempre in percentuale sulla finestra». Quindi la
   pagina è una scena alta quanto la finestra (`100dvh`, che sul telefono
   segue la barra del browser che va e viene) e NON SCORRE MAI: tre fasce —
   in alto dove sei, al centro la domanda, in basso le risposte, dove arriva
   il pollice. Sul telefono la scheda è lo schermo; dal tablet in su sta al
   centro e intorno è spento, nel verde del sito e non in nero.

   `--scala` la abbassa `adatta()` in quiz.php quando una domanda non entra:
   tutto quello che ha una misura qui sotto la moltiplica.
   ====================================================================== */
html:has(body.immersivo) { overflow: hidden; overscroll-behavior: none; }
body.immersivo > .barra, body.immersivo > footer { display: none; }
body.immersivo main { max-width: none; padding: 0; }

.aula { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
        background: var(--carta); --scala: 1; }
.aula-carta { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr);
              background: var(--carta); }
.aula-aiuto { display: none; }
/* nell'aula `hidden` vuol dire nascosto, anche per i bottoni che hanno un `display` loro:
   senza, «Scopri la risposta» restava sotto i due bottoni che lo sostituiscono */
.aula [hidden] { display: none !important; }

/* in alto: esci · a che punto sei · i tasti; sotto il filo, sotto ancora da dove viene la domanda */
.aula-testa { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center;
              padding: 6px 8px 0; }
.aula-testa .progresso { margin: 0; text-align: center; text-transform: none; letter-spacing: 0;
                         font-size: 14px; font-weight: 400; color: var(--tenue); font-variant-numeric: tabular-nums; }
.aula-testa .progresso b { font-weight: 600; color: var(--testo); }
.aula-tempo { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--bordo); }
.aula-tasti { display: flex; justify-content: flex-end; min-width: 44px; }
.aula-tasto { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
              margin: 0; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--tenue); cursor: pointer; }
.aula-tasto:hover { color: var(--accento); background: var(--accento-tenue); border-color: transparent; }
.aula-tasto[aria-pressed=true]#intero { color: var(--accento); }
.aula-testa .avanzamento { grid-column: 1 / -1; margin: 2px 8px 0; height: 3px; }
.aula-etichetta { grid-column: 1 / -1; margin: 8px 0 0; min-height: 1.3em; text-align: center; font-size: 12.5px;
                  font-weight: 600; color: var(--accento); }

/* la scena: la domanda prende lo spazio che resta, le risposte stanno in fondo */
.aula #scena { min-height: 0; display: flex; flex-direction: column; padding: 0 18px 16px;
               padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.aula-domanda { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
                padding: 10px 2px; }
.aula-domanda:not(:has(figure)) .domanda { margin-block: auto; }
.aula .domanda { margin: 0; font-size: calc(clamp(19px, 15px + 1.5vmin, 26px) * var(--scala)); line-height: 1.3; }
.aula-risposte { flex: 0 1 auto; min-height: 0; max-height: 72%; overflow-y: auto; }
.aula .opzioni { gap: calc(8px * var(--scala)); margin: 0; }
.aula .opzione { margin: 0; padding: calc(12px * var(--scala)) 14px; min-height: 44px; align-items: center;
                 font-size: calc(clamp(15px, 13px + .6vmin, 17px) * var(--scala)); line-height: 1.35;
                 /* solo il colore si anima: quando adatta() cambia --scala, le misure scattano (GRAFICA, 27/9) */
                 transition-property: border-color, background-color, color; }

/* dopo la risposta: restano la tua e quella giusta, e la spiegazione prende il posto delle altre */
.aula .risposto .opzioni:not(.foto) .opzione:not(.giusta):not(.sbagliata) { display: none; }
.aula .dopo { margin-top: calc(10px * var(--scala)); }
.aula .esito { font-size: calc(16px * var(--scala)); margin: 0 0 4px; }
.aula .aula-domanda .esito { margin: calc(8px * var(--scala)) 0 0; }
/* in riconosci la foto della punta ha un'altezza massima: con una sola opzione
   rimasta, il vuoto va fra la domanda e l'esito, e l'esito si attacca alle
   opzioni (GRAFICA, 27/9). Nel quiz la domanda sta gia' al centro della sua zona */
#riconosci .aula-domanda .esito { margin-top: auto; padding-top: calc(8px * var(--scala)); }
.aula .dopo .spiegazione, .aula form .spiegazione { margin: 0 0 12px; font-size: calc(15px * var(--scala)); line-height: 1.45; }

/* ---- La voce dopo l'errore (codice-20, js/voce.js). Il disegno è di GRAFICA,
   materiale/grafica/voce-errore/LEGGIMI.md: un riquadro solo, sul fondo
   chiaro, con il tasto, l'onda e il tempo in una riga; le frasi sotto, solo
   dopo il primo ascolto; e da dove viene. ---- */
.voce [hidden], .voce-posto [hidden], .cadono[hidden], .voce-tondo[hidden] { display: none !important; }
.voce { margin: 0 0 calc(10px * var(--scala, 1)); padding: 10px 12px;
        background: var(--accento-tenue); border-radius: var(--raggio); }
.voce-riga { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; }
.voce-tasto { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
              display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
              background: var(--accento); color: var(--su-accento); min-height: 0; }
/* il colore d'accento che `button:hover` dà a tutti i pulsanti qui
   sparirebbe sul fondo pieno */
.voce-tasto:hover:not(:disabled) { color: var(--su-accento); opacity: .9; }
.voce-tasto:focus-visible, .voce-onda:focus-visible, .voce-tondo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* prima del primo tocco, al posto di onda e tempo, l'invito (COPY e GRAFICA) */
.voce-invito { grid-column: 2 / -1; font-size: 15px; color: var(--testo); white-space: nowrap;
               overflow: hidden; text-overflow: ellipsis; }
.voce-onda { height: 32px; cursor: pointer; }
.voce-onda canvas { display: block; width: 100%; height: 32px; }
.voce-tempo { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--tenue); min-width: 2.6em; text-align: right; }
.voce-frasi { margin: 8px 0 0; }
.voce-frasi p { margin: 0 0 2px; padding: 2px 4px; border-radius: var(--raggio); cursor: pointer;
                font-size: calc(15px * var(--scala, 1)); line-height: 1.45; }
.voce-avviso { margin: 8px 0 0; font-size: 13px; color: var(--testo); }
/* da dove viene: la lezione e il blocco, e a destra dove rileggerlo */
.voce-da { display: flex; justify-content: space-between; align-items: center; gap: 10px;
           margin: 6px 0 0; font-size: 13px; color: var(--tenue); }
.voce-da a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; white-space: nowrap; }
/* chi ha solo il quiz: la stessa riga, sul fondo più pieno */
.voce-da.assaggio { margin: 8px -4px -2px; padding: 0 8px; border-radius: var(--raggio);
                    background: color-mix(in srgb, var(--accento) 16%, transparent); color: var(--testo); }
.voce-da.assaggio a { margin: 0; }
/* la spiegazione scritta, dietro un tocco, e la riga di chi ha risposto giusto */
.spiega-apri, .voce-riascolta { display: flex; width: fit-content; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 4px;
                                padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; }
.spiega-apri { color: var(--accento); text-decoration: underline; text-underline-offset: 3px; }
.voce-riascolta { color: var(--tenue); }
.voce-riascolta svg { color: var(--accento); }
/* la trappola, sotto la domanda, solo a chi ha sbagliato */
.cadono { margin: calc(10px * var(--scala, 1)) 0 0; padding: 2px 0 2px 10px;
          border-left: 3px solid color-mix(in srgb, var(--ko) 60%, transparent);
          font-size: calc(14px * var(--scala, 1)); line-height: 1.4; color: var(--testo); }
.cadono b { font-weight: 700; margin-right: 3px; }
/* mentre Gloria parla l'opzione sbagliata lascia il posto alle frasi, e la
   trappola, già letta, si fa da parte finché la voce va */
.aula #scena.voce-aperta .opzioni:not(.foto) .opzione.sbagliata,
.aula #scena.voce-aperta .opz-foto:has(.sbagliata) { display: none; }
.aula #scena.voce-parla .cadono { display: none; }
/* e la zona delle risposte prende quello che le serve: la domanda, già
   letta, cede lo spazio vuoto che ha intorno. Il 72 per cento resta il tetto
   finché la voce non è partita. Se la domanda è lunga e non ci sta più,
   scende il carattere di tutte e due, come sempre (Aula.adatta) */
.aula #scena.voce-aperta .aula-risposte { max-height: none; }
.aula #scena.voce-aperta .aula-domanda { flex-basis: 0; min-height: 3em; }
/* nell'elenco delle sbagliate: il tasto tondo a destra della domanda, col solo contorno */
.rivedi li.con-voce { position: relative; padding-right: 56px; }
.voce-tondo { position: absolute; top: 0; right: 0; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%;
              display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
              border: 1.5px solid var(--accento); background: transparent; color: var(--accento); min-height: 0; }
.voce-tondo[aria-expanded=true], .voce-tondo[aria-expanded=true]:hover:not(:disabled) { background: var(--accento); color: var(--su-accento); }
.rivedi li.con-voce > .voce { margin: 12px -56px 0 0; }

/* il ripasso a carte: domanda e risposta insieme al centro, e in basso prima
   «Scopri la risposta» poi, nello stesso punto, i due bottoni */
.aula-centro { margin-block: auto; }
.aula .aula-centro .domanda { margin: 0; }
.aula .soluzione { margin: calc(16px * var(--scala)) 0 0; padding: calc(14px * var(--scala)) 16px;
                   font-size: calc(clamp(15.5px, 13.5px + .7vmin, 18px) * var(--scala)); line-height: 1.45; }
.aula .valuta { margin: 0; gap: 10px; }
.aula .valuta[hidden] { display: none; }
.aula .valuta button { min-height: 52px; margin: 0; }
.aula-risposte .bivio { display: flex; gap: 10px; margin: 0; }
.aula-risposte .bivio > * { flex: 1 1 0; margin: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.aula-sotto { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--tenue); }
.aula-sotto a { color: inherit; }
.aula-testa .avanzamento[hidden] { display: none; }
.aula-etichetta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 14px; }

/* Il quiz che non riesce a consegnare le risposte lo dice qui, sopra la scena,
   con la cosa da fare accanto (quiz.php, 23 settembre 2026). Il colore è
   quello dell'avviso respinto, ma pieno: sotto c'è la domanda. */
.quiz-avviso { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
               max-width: 560px; margin: 0 auto; display: flex; gap: 12px; align-items: center;
               padding: 12px 14px; border-left: 3px solid var(--ko);
               background: color-mix(in srgb, var(--ko) 12%, var(--carta));
               color: color-mix(in srgb, var(--ko) 70%, var(--testo)); font-size: 14.5px; line-height: 1.4; }
.quiz-avviso[hidden] { display: none; }
.quiz-avviso p { margin: 0; flex: 1 1 auto; }
.quiz-avviso button { flex: none; margin: 0; }

/* le foto: quella della domanda prende l'altezza che c'è, le alternative si dividono la loro fascia */
.aula .domanda-foto, .aula .domanda-foto.in-piedi { position: relative; flex: 1 1 0; min-height: 110px; max-height: 520px;
                      height: auto; aspect-ratio: auto; margin: 0 0 12px; cursor: zoom-in; }
.aula .domanda-foto + .domanda { font-size: calc(clamp(17px, 14px + 1vmin, 22px) * var(--scala)); text-align: center; }
.aula .opzioni.foto .opzione.foto { aspect-ratio: auto; width: 100%; height: calc(clamp(84px, 17dvh, 190px) * var(--scala)); min-height: 0; }
.aula .opzioni.foto.in-piedi .opzione.foto { aspect-ratio: auto; height: calc(clamp(150px, 52dvh, 480px) * var(--scala)); }
/* `punta`: della foto di uno strumento si vede solo il quarto in alto, la parte
   lavorante vera, grande quanto il riquadro; il resto lo apre la lente */
.aula .domanda-foto.punta { overflow: hidden; }
.aula .domanda-foto.punta img { position: absolute; top: 16px; left: 50%; translate: -50% 0; width: auto; max-width: none;
                                height: 370%; object-fit: fill; }
.opz-foto { position: relative; min-width: 0; }
.lente-apri { position: absolute; right: 6px; bottom: 6px; width: 36px; height: 36px; margin: 0; padding: 0;
              display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: zoom-in;
              border: 1px solid var(--bordo); background: var(--carta); color: var(--accento); }
.lente-apri:hover { border-color: var(--accento); color: var(--accento); }

/* il telefono di traverso: la domanda a sinistra, le risposte a destra */
@media (orientation: landscape) and (max-height: 520px) {
  .aula #scena { flex-direction: row; gap: 18px; padding-bottom: 10px; }
  .aula-domanda, .aula-risposte { flex: 1 1 0; max-height: none; align-self: stretch; }
  /* «safe»: se le risposte non ci stanno nemmeno a --scala 0,72, si allineano in alto e
     scorrono, invece di sbordare sopra dove lo scorrimento non arriva. E cosi' Aula.adatta()
     vede tutta la colonna: con «center» la misura si fermava prima (GRAFICA, la (a), 27/9) */
  .aula-risposte { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; }
  .aula-etichetta { margin-top: 4px; }
  .aula .opzioni.foto.in-piedi .opzione.foto { height: calc(clamp(120px, 62dvh, 300px) * var(--scala)); }
  /* la voce dopo l'errore: l'opzione sbagliata se ne va subito, e le frasi
     stanno nella colonna della domanda (js/voce.js) */
  .aula #scena.con-voce.risposto .opzioni:not(.foto) .opzione.sbagliata,
  .aula #scena.con-voce.risposto .opz-foto:has(.sbagliata) { display: none; }
  .aula-domanda > .voce-frasi { margin-top: 10px; }
}
/* di traverso le risposte sono strette in altezza: opzioni più basse e più vicine (GRAFICA, 27/9) */
@media (orientation: landscape) and (max-height: 519px) {
  .aula .opzione { padding: 8px 12px; line-height: 1.3; }
  .aula .opzioni { gap: 6px; }
  /* le colonne da 1:1 a 2:3, più spazio alle risposte: a 700×400 --scala sale da 0,72 a 0,78
     prima della risposta e da 0,92 a 1 dopo; a 700×320 lo scorrimento scende da 55 a 27 px,
     e la domanda sta ancora tutta (GRAFICA, 27/9) */
  .aula-domanda { flex: 2 1 0; }
  .aula-risposte { flex: 3 1 0; }
}

/* dal tablet in su: la scheda al centro, intorno spento */
@media (min-width: 760px) and (min-height: 521px) {
  .aula { background: var(--fondo-aula); }
  .aula-carta { width: min(720px, 100% - 48px); height: min(100dvh - 96px, 780px);
                border-radius: var(--raggio); overflow: hidden; }
  .aula-testa { padding: 10px 14px 0; }
  .aula #scena { padding: 0 34px 30px; }
  .aula-aiuto { display: block; margin: 0; font-size: 13px; color: var(--su-aula); }
}
@media (hover: none) { .aula-aiuto { display: none !important; } }

/* ---- Analizza nell'aula: la fotografia prende lo spazio che c'è, il pannello
   di lavoro sta sotto sul telefono e accanto sul computer. Qui il pannello
   scorre — un confronto voce per voce non sta in uno schermo — ma la pagina
   no, e la fotografia resta sempre in vista. ---- */
.aula .analizza { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 14px;
                  padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* A schermo pieno il titolo e' piccolo: il Condensed si', ma l'interlinea di prima. */
.aula .analizza-testa h1 { font-size: clamp(20px, 16px + 1.4vmin, 28px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 4px; }
.aula .analizza-testa .sotto { font-size: 14px; line-height: 1.4; margin: 0; max-width: none; }
.aula .analizza-corpo { display: contents; }
.aula .analizza-foto { position: static; flex: 1 1 0; min-height: 130px; display: flex; flex-direction: column; }
.aula .analizza-foto .pane-foto { flex: 1 1 0; min-height: 0; max-height: none; }
.aula .analizza-foto img.zoomabile { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.aula .analizza-foto .did { display: none; }
.aula .analizza-lato { flex: 0 1 auto; min-height: 0; max-height: 58%; overflow-y: auto; overscroll-behavior: contain; }
.aula .fase[hidden] { display: none !important; }
/* la fase in cui si scrive: il tempo scende accanto al tasto «Detta», e non ruba una riga */
.aula #scrivi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.aula #scrivi .scrittura { display: contents; }
.aula #scrivi textarea { grid-column: 1 / -1; min-height: 76px; height: clamp(76px, 15dvh, 140px); font-size: 16px; }
.aula #scrivi .scrittura-comandi { grid-column: 1; }
.aula #scrivi .cronometro { grid-column: 2; grid-row: 2; width: 46px; height: 46px; margin: 8px 0 0; }
.aula #scrivi .cronometro span { font-size: 11.5px; }
.aula #scrivi .metro { grid-column: 1 / -1; margin: 10px 0; }
.aula #scrivi .azioni { grid-column: 1 / -1; }
.aula.tastiera .analizza-testa .sotto, .aula.tastiera .metro p { display: none; }
.aula.tastiera .analizza-foto { min-height: 90px; }

@media (min-width: 900px) and (min-height: 521px) {
  .aula.larga .aula-carta { width: min(1180px, 100% - 48px); height: min(100dvh - 64px, 860px); }
  .aula .analizza { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr);
                    grid-template-rows: auto minmax(0, 1fr); column-gap: 30px; row-gap: 14px; padding: 6px 30px 26px; }
  .aula .analizza-testa { grid-column: 2; grid-row: 1; }
  .aula .analizza-foto { grid-column: 1; grid-row: 1 / -1; }
  .aula .analizza-lato { grid-column: 2; grid-row: 2; max-height: none; padding-right: 6px; }
  .aula #scrivi textarea { min-height: 170px; height: clamp(170px, 30dvh, 300px); }
}

/* uscire: si chiede prima */
.aula-dialogo { width: min(400px, 100% - 40px); padding: 22px 22px 18px; border: 1px solid var(--bordo);
                border-radius: var(--raggio); background: var(--carta); color: var(--testo); }
.aula-dialogo::backdrop { background: color-mix(in srgb, var(--fondo-aula) 72%, transparent); }
.aula-dialogo h2 { margin: 0 0 6px; }
.aula-dialogo p { margin: 0 0 16px; color: var(--tenue); font-size: 15px; }
.aula-dialogo .bivio { margin: 0; }
/* I due pulsanti uno sotto l'altro, a tutta larghezza (GRAFICA, 27/9): col
   `flex: 1 1 13rem` di .bivio, in colonna la base diventava l'altezza, e il
   riquadro usciva enorme. Il ricominciare sta sotto, fuori dal bivio. */
.aula-dialogo .bivio { flex-direction: column; gap: 8px; }
.aula-dialogo .bivio > * { flex: 0 0 auto; width: 100%; }
.aula-dialogo .rifai { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bordo); text-align: center; }
.aula-dialogo .rifai a { display: inline-flex; align-items: center; min-height: 44px; color: var(--testo); text-underline-offset: 3px; }
.aula-dialogo .rifai-nota { margin: 0; font-size: 13.5px; color: var(--tenue); }
.aula-dialogo .bivio > * { min-height: 44px; display: inline-flex; align-items: center;
                           justify-content: center; text-decoration: none; }

/* ---- la lente (js/lente.js): una foto a tutto schermo, sul verde delle foto ---- */
html.lente-aperta { overflow: hidden; }
.lente { position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh;
         display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--fondo-foto); color: var(--testo); }
.lente[hidden], .lente [hidden] { display: none !important; }   /* anche i bottoni, che hanno un `display` loro */
.lente-testa { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 18px; }
.lente-titolo { margin: 0; font-weight: 600; font-size: 16px; }
.lente-tasto { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0;
               padding: 0; border: 0; border-radius: 50%; background: none; color: var(--testo); cursor: pointer; }
.lente-tasto:hover:not(:disabled) { background: color-mix(in srgb, var(--testo) 10%, transparent); color: var(--testo); }
.lente-tasto:disabled { opacity: .3; }
.lente-palco { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
               touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.lente-palco.ingrandita { cursor: grab; }
.lente-palco img { flex: none; max-width: none; display: block; transform-origin: center; will-change: transform;
                   -webkit-user-drag: none; pointer-events: none; }
.lente-piede { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
               padding: 8px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.lente-conta { min-width: 52px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.lente-conta:empty { display: none; }
.lente-modo { margin: 0 6px; padding: 9px 16px; border-radius: 999px; font-size: 14px; background: var(--carta);
              border: 1px solid var(--bordo); color: var(--testo); }
.lente-scegli { margin: 0; padding: 10px 22px; }

/* ======================================================================
   IL TUO RECUPERO (19 settembre 2026, app/recupero.php): la tessera in cima
   a «I tuoi corsi», la pagina, la striscia in testa ai contenuti.
   ====================================================================== */
.tessera-recupero { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; padding: 16px 18px;
                    text-decoration: none; color: var(--testo); background: var(--accento-tenue);
                    border-top: 3px solid var(--accento); }
.tessera-recupero:hover { background: color-mix(in srgb, var(--accento) 14%, var(--carta)); }
.tessera-recupero .numero { flex: none; min-width: 64px; text-align: center; font-family: var(--cond); font-weight: 600;
                            font-size: 46px; line-height: 1; color: var(--accento); font-variant-numeric: tabular-nums; }
.tessera-recupero .testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tessera-recupero .testo b { font-size: 18px; }
.tessera-recupero .testo > span { font-size: 14px; color: var(--tenue); }
.tessera-recupero .vai { flex: none; font-weight: 600; font-size: 14px; color: var(--accento); }
.tessera-recupero .misura, .recupero-avanz .misura { display: block; height: 6px; border-radius: var(--raggio); overflow: hidden;
                    background: color-mix(in srgb, var(--accento) 18%, var(--carta)); }
.tessera-recupero .misura { margin-top: 6px; max-width: 360px; }
.tessera-recupero .misura i, .recupero-avanz .misura i { display: block; height: 100%; background: var(--accento); }

.recupero-testa { margin: 0 0 8px; }
.recupero-testa h1 { margin-bottom: 6px; }
.recupero-testa .sottotitolo { max-width: 64ch; }
.recupero-avanz { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; max-width: 520px; }
.recupero-avanz .misura { flex: 1 1 auto; }
.recupero-avanz .calmo { flex: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.recupero-rifai { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 20px 0 0; }
.recupero-rifai button { margin: 0; }
.recupero-rifai button small { display: block; font-weight: 400; font-size: 12.5px; opacity: .85; }
.recupero-rifai .calmo { margin: 0; font-size: 14px; }
/* le schede del ripasso che il giro non rifà (recupero.php, 24 settembre 2026) */
.recupero-schede { margin: 12px 0 0; }
.recupero-schede .bottone { margin: 0; }
.recupero-schede .bottone small { display: block; font-weight: 400; font-size: 12.5px; opacity: .85; }

/* un contenuto già riletto: resta nell'elenco, più quieto, col suo segno */
.blocchi li.riletto .tit { color: var(--tenue); }
.segno-riletto { font-weight: 600; color: var(--ok); }
.segno-riletto::before { content: "✓ "; }

.storico { list-style: none; margin: 8px 0 0; padding: 0; }
.storico li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto minmax(120px, auto); gap: 4px 14px; align-items: baseline;
              padding: 10px 0; border-bottom: 1px solid var(--bordo); font-size: 15px; }
.storico .quando { color: var(--tenue); font-variant-numeric: tabular-nums; }
.storico .quando small, .storico .voto small { font-size: 12px; color: var(--tenue); }
.storico .tit small { display: block; font-size: 12.5px; color: var(--tenue); }
.storico .voto { font-variant-numeric: tabular-nums; white-space: nowrap; }
.storico .aperti { text-align: right; font-size: 13.5px; color: var(--tenue); }
@media (max-width: 600px) {
  .storico li { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .storico .aperti { grid-column: 2 / -1; text-align: left; }
  .tessera-recupero { gap: 12px; padding: 14px; }
  .tessera-recupero .numero { min-width: 52px; font-size: 38px; }
  .tessera-recupero .vai { display: none; }
}

/* la striscia in testa a un contenuto che è nel recupero: il filo non si perde */
.striscia-recupero { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
                     margin: 0 0 18px; padding: 10px 14px; font-size: 14px; color: var(--testo);
                     background: var(--accento-tenue); border-left: 3px solid var(--accento); }
.striscia-recupero b { color: var(--accento); }
.striscia-recupero a { flex: none; font-weight: 600; text-decoration: none; }
.striscia-recupero a:hover { text-decoration: underline; }

/* ---- il quaderno ---------------------------------------------------
   Due gesti mentre si legge: tenere una frase, e scriversi un appunto.

   IL SEGNO STA NEL MARGINE, non sulla frase: il clic sulla frase è già
   preso — fa saltare la voce lì sopra — e due cose diverse non possono
   rispondere allo stesso tocco. È una barretta sottile a sinistra, tenue
   finché non la si guarda, piena quando la frase è tenuta. */
.b-testo p.frase { position: relative; scroll-margin-top: 90px; }
/* Arrivando dal quaderno si atterra sulla frase esatta: un lampo breve dice
   quale, poi si spegne e resta la pagina come sempre. */
@keyframes lampo-frase { from { background: color-mix(in srgb, var(--segno) 45%, transparent); }
                           to { background: color-mix(in srgb, var(--segno) 14%, transparent); } }
.b-testo p.frase:target { animation: lampo-frase 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .b-testo p.frase:target { animation: none; } }
.segno {
  position: absolute; left: -8px; top: 2px; bottom: 2px;
  width: 3px; min-height: 0; padding: 0;
  border: 0; border-radius: 2px;
  background: var(--bordo); opacity: 0;
  cursor: pointer; transition: opacity .18s ease, background .18s ease;
}
/* L'area da toccare è molto più larga della barretta che si vede: sul
   telefono tre pixel non si prendono. */
.segno::after { content: ""; position: absolute; top: -4px; bottom: -4px;
                left: -10px; right: -10px; }
p.frase:hover .segno, .segno:focus-visible { opacity: 1; }
.segno:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
p.frase.segnata .segno { opacity: 1; background: var(--segno); }
p.frase.segnata {
  background: color-mix(in srgb, var(--segno) 14%, transparent);
  border-radius: var(--raggio); margin-left: -8px; padding: 2px 8px;
}
/* Quando la voce arriva su una frase tenuta, vince l'illuminazione della
   voce (`.adesso`, che ha il suo fondo e il suo testo chiaro): l'ocra
   sotto la renderebbe illeggibile nel tema scuro. Che la frase sia tenuta
   continua a dirlo la barretta nel margine, che resta piena. */
p.frase.segnata.adesso { background: #356b6f; }
/* Sul telefono la barretta resta tutta sullo schermo, e l'area per il dito
   prende il margine senza entrare nel testo. */
@media (max-width: 700px) { .segno { left: 0; opacity: .45; }
                            .segno::after { left: -8px; right: -5px; } }

/* L'appunto in fondo al contenuto: una carta che si riempie mentre si
   scrive, senza pulsanti da premere. */
.appunto { margin: 34px 0 0; padding: 18px 20px; background: var(--carta);
           border: 1px dashed var(--bordo); border-radius: var(--raggio); }
.appunto.scritto { border-style: solid; border-left: 3px solid var(--segno); }
.appunto h2 { margin: 0 0 8px; font-size: 1rem; color: var(--tenue);
              font-weight: 600; letter-spacing: .01em; }
.appunto textarea { width: 100%; margin: 0; min-height: 76px; resize: vertical;
                    background: transparent; border: 0; padding: 0;
                    font-size: 16px; line-height: 1.6; color: var(--testo); }
/* Il campo non ha bordo ne' fondo: se si spegne anche il fuoco, chi ci
   arriva da tastiera non sa di esserci. Era l'unico `outline: none` del
   foglio. */
.appunto textarea:focus-visible { outline: 2px solid var(--accento); outline-offset: 6px;
                                  border-radius: 2px; }
.stato-appunto { margin: 8px 0 0; font-size: 12.5px; min-height: 1em; }

/* L'avviso quando qualcosa non è stato salvato: compare in basso, non
   sposta niente, se ne va da solo. */
.avviso-quaderno {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 12px);
  margin: 0; padding: 10px 16px; border-radius: var(--raggio);
  background: var(--testo); color: var(--sfondo); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}
.avviso-quaderno.si-vede { opacity: 1; transform: translate(-50%, 0); }

/* ---- la pagina del quaderno ----
   Si legge come un quaderno vero: il corso in alto, il contenuto come
   titoletto, sotto le frasi tenute una per riga e l'appunto in fondo. */
.quaderno .vuoto { margin: 28px 0; font-size: 18px; }
.corso-quaderno { margin: 34px 0 6px; font-size: 1.1rem; color: var(--tenue);
                  font-weight: 600; letter-spacing: .02em; }
.corso-quaderno:first-of-type { margin-top: 22px; }
.pagina-quaderno { padding: 14px 0 18px; border-top: 1px solid var(--bordo); }
.pagina-quaderno h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 600; }
.pagina-quaderno h3 span { display: block; font-size: 12.5px; font-weight: 400; }
.segnate { margin: 0; padding: 0; list-style: none; }
.segnate li { margin: 0 0 6px; padding-left: 14px; border-left: 3px solid var(--segno); }
.segnate a { color: var(--testo); text-decoration: none; }
.segnate a:hover { color: var(--accento); }
.appunto-letto { margin-top: 12px; padding: 12px 14px; background: var(--carta);
                 border: 1px solid var(--bordo); border-radius: var(--raggio);
                 line-height: 1.6; }
.appunto-letto .quando { display: block; margin-top: 8px; font-size: 12px; }
.azioni-quaderno { margin: 30px 0 0; }

@media print {
  .quaderno .barra-cerca, .azioni-quaderno, .numeri-testa { display: none; }
  .pagina-quaderno { break-inside: avoid; }
  .segnate li { border-left-color: #999; }
}

/* Più pulsanti in fila sotto un riquadro, che sul telefono vanno a capo
   senza incollarsi. */
.righe-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }

/* Togliere dal quaderno: il pulsante si vede quando serve, cioè quando si
   sta guardando quella riga. Sparisce in stampa. */
.quaderno .togli { min-height: 0; margin-left: 8px; padding: 1px 7px;
  border: 1px solid var(--bordo); border-radius: var(--raggio-minuto);
  background: var(--carta); color: var(--tenue); font-size: 11.5px;
  cursor: pointer; opacity: 0; transition: opacity .15s ease, color .15s ease; }
.segnate li { display: flex; align-items: baseline; gap: 4px; }
.segnate li a { flex: 1 1 auto; }
.segnate li:hover .togli, .appunto-letto:hover .togli,
.quaderno .togli:focus-visible { opacity: 1; }
.quaderno .togli:hover { color: var(--ko); border-color: var(--ko); }
.va-via { opacity: .35; transition: opacity .15s ease; }
@media (max-width: 700px) { .quaderno .togli { opacity: .7; } }

/* ---- la revisione di Gloria (revisione.php, 22 settembre 2026) ----
   Una voce sotto l'altra, separate da una riga come le schede del
   gestionale. Quella vista si spegne un poco, quella con una riserva
   porta il segno a sinistra: si scorrono a colpo d'occhio. */
.revisione > .calmo { max-width: 70ch; }
.rev-gruppo { margin: 34px 0 6px; }
.rev { border-top: 1px solid var(--bordo); padding: 18px 0 20px; }
.rev.vista { opacity: .72; }
.rev.vista:hover, .rev.vista:focus-within { opacity: 1; }
.rev.riserva { opacity: 1; box-shadow: inset 3px 0 0 var(--ko); padding-left: 14px; }
.rev-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rev-numero { font-family: var(--cond); font-weight: 700; font-size: 20px;
              min-width: 2.4em; color: var(--accento); }
.rev h3 { font-size: 17px; margin: 10px 0 8px; max-width: 70ch; }
.rev h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--tenue); margin: 0 0 6px; }
.rev-confronto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
@media (max-width: 760px) { .rev-confronto { grid-template-columns: 1fr; } }
.rev-confronto .vecchio { color: var(--tenue); }
.rev-opzioni { margin: 0; padding-left: 1.6em; }
.rev-opzioni li { margin: 2px 0; }
.rev-opzioni li.giusta { font-weight: 600; }
.rev-perche { max-width: 70ch; margin: 10px 0 4px; }
.rev-libro { font-size: 13px; margin: 0 0 10px; }
.rev-mostra { margin: 6px 0 10px; padding-left: 18px; }
.rev-mostra li { margin: 4px 0; }
.rev-scelta fieldset { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rev-opzione { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; }
.rev-nota { display: block; max-width: 70ch; }
.rev-nota textarea { margin-top: 4px; }
.rev-ripensata { border-left: 3px solid var(--ko); padding: 4px 0 4px 14px; margin: 12px 0; max-width: 74ch; }
.rev-ripensata p { margin: 6px 0; }
.rev-salva { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }

/* Il banner dei cookie (23 settembre 2026, app/misura.php). In basso,
   sopra tutto, senza coprire la pagina: si puo' leggere e poi scegliere.
   Accetta e Rifiuta hanno la stessa forma, come vuole il Garante. */
.consenso { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000;
  max-width: 560px; margin: 0 auto; padding: 18px 20px 16px; background: var(--carta);
  color: var(--testo); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); font-size: .95rem; }
.consenso[hidden], .consenso [hidden] { display: none !important; }
.consenso p { margin: 0 0 10px; }
/* 44 per 44 come gli altri tasti d'icona (GRAFICA, 26/9: era 34 per 42). Il
   centro dell'icona resta dov'era: 27 pixel dal bordo destro, 29 dall'alto. */
.consenso-chiudi { position: absolute; top: 7px; right: 5px; background: none; border: 0;
  color: var(--tenue); font-size: 1.1rem; cursor: pointer; padding: 0;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.consenso-scelte { display: grid; gap: 8px; margin: 4px 0 12px; }
.consenso-scelte label { display: flex; gap: 8px; align-items: flex-start; }
.consenso-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.consenso-azioni .bottone { flex: 1 1 auto; }

/* «Ho controllato i bonifici», in cima alla coda degli ordini (ordini.php, 24 settembre 2026) */
.controllo-bonifici { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.controllo-bonifici p { margin: 0; flex: 1 1 320px; font-size: 14.5px; }
.controllo-bonifici button { margin: 0; }
/* la scadenza del bonifico accanto alle coordinate (ordine.php) */
.scadenza-bonifico { font-size: 14.5px; }

/* Interruttori sul telefono: un blocco per interruttore, niente scorrimento
   di lato (GRAFICA, 24 settembre 2026; stesso punto di rottura della .tabella) */
@media (max-width: 700px) {
  .tabella.interruttori { display: block; white-space: normal; overflow: visible; }
  .tabella.interruttori thead { display: none; }
  .tabella.interruttori tbody, .tabella.interruttori tr, .tabella.interruttori td { display: block; }
  .tabella.interruttori tr { padding: 12px 0 14px; border-bottom: 1px solid var(--bordo); }
  .tabella.interruttori td { border: 0; padding: 3px 0; max-width: none; }
  .tabella.interruttori tr:hover td { background: none; }
}

/* Gli stacchi fra le sezioni di io.php: prima i bordi si toccavano (Paolo,
   «questi spazi dovrebbero essere maggiori»; misure di GRAFICA, 24/9). 34 è lo
   stacco sopra «Tutti i corsi», 16 il passo della griglia delle schede. */
.pubblica > .schede + .riquadro,
.pubblica > .calmo + .riquadro,
.pubblica > .riquadro + .riquadro { margin-top: 34px; }
.pubblica > .schede + .calmo { margin-top: 16px; }

/* Il recesso online nella coda degli ordini (24 settembre 2026): i recessi da
   decidere in cima, col bordo del «no», e dentro la scheda dell'ordine. */
.recessi-aperti { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--ko); border-radius: var(--raggio); }
.recessi-aperti h2 { margin: 0 0 6px; font-size: 1.05rem; }
.recessi-aperti ul { margin: 0; padding: 0; list-style: none; }
.recessi-aperti li { padding: 5px 0; font-size: 14.5px; }
.recesso-scheda { margin: 14px 0; padding: 10px 14px; border: 1px solid var(--bordo); border-radius: var(--raggio); }
.recesso-scheda.aperto { border-color: var(--ko); }
.recesso-scheda h3 { margin: 0 0 4px; font-size: 1rem; }

/* ---- il dito: ogni comando almeno 44 × 44 ----
   Paolo, 26 settembre 2026 (paolo-71), «Sì, dappertutto»: sul telefono
   ogni comando si tocca in un'area di almeno 44 pixel, allargando l'area e
   non il disegno. Le misure di partenza sono di GRAFICA, a 390, in
   materiale/grafica/audit/LEGGIMI.md: pastiglie 34, pulsanti piccoli 30,
   «togli» e «cancella» del quaderno 24, le etichette delle caselle 21, i
   gradi del quiz dinamico 35, le sue tacche 42, la lente 36, il marchio 34.
   L'area e' uno `::after` trasparente, centrato e largo e alto almeno 44:
   il comando non cambia di un pixel, e il dito lo prende lo stesso. Vale sul
   telefono e dove si tocca col dito (tablet), non col mouse. I campi e i
   pulsanti dei moduli passano da 42 a 44: in un campo l'area non si allarga
   senza allargare il campo, e sono due pixel. */
@media (max-width: 600px), (pointer: coarse) {
  :root { --alto: 44px; }
  .chip, .minuto, .togli, label.seguito, label.segue, .tacche button,
  .marchio, .pagina-quaderno h3 a, .mappa .viste .pastiglia { position: relative; }   /* .gradi label e .lente-apri lo sono gia' */
  .chip::after, .minuto::after, .togli::after, label.seguito::after, label.segue::after,
  .gradi label::after, .tacche button::after, .lente-apri::after, .marchio::after,
  .pagina-quaderno h3 a::after, .mappa .viste .pastiglia::after,
  .filtro-sede a.chip::after {   /* aveva gia' un'area sua, piu' stretta: qui vale questa */
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* Le tacche dei capitoli del video sono alte 10 e strette: l'area cresce
     solo in altezza, se no ognuna coprirebbe le vicine (GRAFICA, 27/9). */
  .capitoli-barra .seg { overflow: visible; }
  .capitoli-barra .seg::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
                                height: 44px; transform: translateY(-50%); }
  .capitoli-barra .seg i { border-radius: var(--raggio-minuto); }
  /* Nel catalogo si tocca tutta la scheda, non solo il titolo. */
  .vendita .carta h3 a::after { content: ""; position: absolute; inset: 0; }
}

/* ---- l'Aiuto (aiuto.php) ----
   Le voci di WIKI, una domanda per riga che si apre. Nato il 26 settembre
   2026 notte, in fretta perche' Paolo lo voleva vedere: il disegno lo
   rimisura GRAFICA. La domanda e' testo pieno, non il grigio minuto dei
   `details` del resto del sito. */
.aiuto-cerca input { width: 100%; }
.aiuto-esito { min-height: 1.6em; margin: 8px 0 0; }
.aiuto-temi { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.aiuto-temi[hidden] { display: none; }
/* Al telefono le quindici pastiglie facevano un blocco alto 244 px prima
   della prima domanda: su una riga sola, che scorre di lato dentro di se' e
   mai la pagina, con una sfumatura a destra per dire che continua (GRAFICA,
   27/9). I 5 px sopra e sotto sono l'area da 44 delle pastiglie da 34, che
   altrimenti farebbe scorrere il contenitore anche in verticale. */
@media (max-width: 600px) {
  .aiuto-temi { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
                scroll-snap-type: x proximity; scrollbar-width: none;
                padding: 5px 0; margin-top: 11px;
                -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
                        mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
  .aiuto-temi::-webkit-scrollbar { display: none; }
  .aiuto-temi.alla-fine { -webkit-mask-image: none; mask-image: none; }
  .aiuto-temi .chip { flex: none; scroll-snap-align: start; }
}
.aiuto-tema { margin-top: 36px; }
.aiuto-tema h2 { margin: 0 0 4px; }
.aiuto-voce { border-bottom: 1px solid var(--bordo); }
/* Il triangolo del browser spostava la domanda di 15 pixel (431 invece di
   416): via, e a destra la freccia in giu' del sito, che si gira quando la
   voce e' aperta (GRAFICA, 26/9 notte). */
.aiuto-voce summary { list-style: none; display: flex; justify-content: space-between; align-items: center;
                      gap: 12px; font-size: 17.5px; font-weight: 600; color: var(--testo); padding: 12px 0;
                      min-height: 44px; line-height: 1.45; }
.aiuto-voce summary::-webkit-details-marker { display: none; }
.aiuto-voce summary svg { flex: none; color: var(--tenue); transition: transform .2s ease; }
.aiuto-voce[open] summary svg { transform: rotate(180deg); }
.aiuto-risultati:empty { display: none; }
.aiuto-risultati { margin-top: 18px; }
.aiuto-voce .targa { margin-left: 8px; vertical-align: 2px; }
/* LA RISPOSTA, UNA RIGA E POI I PASSI (COPY riscrive le risposte, GRAFICA
   27/9): un riquadro tinto, la prima riga e' la risposta in grassetto, i passi
   sono un elenco numerato coi numeri nel cerchio. Un pezzo solo per la pagina
   dell'Aiuto e per la bolla, che cambia solo le misure (piu' sotto). */
.aiuto-risposta, .aiuto-risposta-qui { margin: 4px 0 14px; padding: 14px 16px; border-radius: var(--raggio);
                                       background: var(--accento-tenue); line-height: 1.45; }
.aiuto-risposta > :first-child, .aiuto-risposta-qui > :first-child { margin-top: 0; }
/* I collegamenti dentro le risposte nel colore del testo, sottolineati:
   l'accento su quel fondo non teneva il 4,5 (GRAFICA, 27/9). */
.aiuto-risposta a, .aiuto-risposta-qui a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
.aiuto-risposta > :last-child, .aiuto-risposta-qui > :last-child { margin-bottom: 0; }
.aiuto-risposta p, .aiuto-risposta li { font-size: 17px; }
.aiuto-risposta > p:first-child { font-size: 18px; font-weight: 600; color: var(--testo); margin-bottom: 12px; }
.aiuto-risposta ol, .aiuto-risposta-qui ol { list-style: none; counter-reset: passo; margin: 0; padding: 0;
                                             display: grid; gap: 10px; }
.aiuto-risposta ol > li, .aiuto-risposta-qui ol > li { counter-increment: passo; display: grid;
                                                       grid-template-columns: 24px 1fr; column-gap: 12px; margin: 0; }
.aiuto-risposta ol > li::before, .aiuto-risposta-qui ol > li::before {
  content: counter(passo); width: 24px; height: 24px; margin-top: calc((1.45em - 24px) / 2);
  border-radius: 50%; background: var(--accento); color: var(--su-accento);
  font: 600 13px/24px var(--din); text-align: center; font-variant-numeric: tabular-nums; }
.aiuto-risposta ul, .aiuto-risposta-qui ul { padding-left: 20px; }
/* il cerchio del numero centrato sulla prima riga del passo, riga per riga */
.aiuto-risposta ol > li::before { margin-top: calc((1.45 * 17px - 24px) / 2); }
.aiuto-risposta-qui ol > li::before { margin-top: calc((1.45 * 15px - 24px) / 2); }
/* la frase dopo i passi non si attacca all'ultimo */
.aiuto-risposta :is(ol, ul) + p, .aiuto-risposta-qui :is(ol, ul) + p { margin-top: 12px; }
.scrivici { margin-top: 48px; padding: 20px 22px; border: 1px solid var(--bordo); border-radius: var(--raggio); }
.scrivici h2 { margin-top: 0; }
/* I due contatti come pulsanti, in fila; uno sotto l'altro sotto i 400 px. */
.scrivici-tasti { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 399px) { .scrivici-tasti { flex-direction: column; align-items: stretch; } }

/* ---- L'Aiuto fuori dalla sua pagina (27 settembre 2026, disegno di GRAFICA) ---- */

/* Il «?» dove ci si blocca: accesso, cassa, pagina di un corso. Tutta la
   domanda e' collegamento, alta almeno 44, sottolineata solo al passaggio. */
.aiuto-qui { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
             color: var(--accento); font-size: 15px; font-weight: 600; text-decoration: none; }
.aiuto-qui svg { flex: none; }
.aiuto-qui:hover span { text-decoration: underline; text-underline-offset: 3px; }
.aiuto-qui.solo-segno { min-width: 44px; justify-content: center; vertical-align: middle; }
p.aiuto-qui-riga { margin: 8px 0 0; }

/* La tessera in «La tua area», come quella del recupero: il segno in un
   cerchio, il nome e la riga di COPY, la freccia. Tutta collegamento. */
.tessera-aiuto { display: flex; align-items: center; gap: 16px; margin: 26px 0; padding: 16px 18px;
                 text-decoration: none; color: var(--testo); background: var(--carta);
                 border: 1px solid var(--bordo); border-radius: var(--raggio); }
.tessera-aiuto:hover { background: var(--accento-tenue); }
.tessera-aiuto .segno { flex: none; display: grid; place-items: center; width: 56px; height: 56px;
                        border-radius: 50%; background: var(--accento-tenue); color: var(--accento); }
.tessera-aiuto .testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tessera-aiuto .testo b { font-size: 18px; font-weight: 600; }
.tessera-aiuto .testo > span { font-size: 14px; color: var(--tenue); }
.tessera-aiuto .freccia { flex: none; font-size: 24px; color: var(--accento); }

/* LA BOLLA, in basso a destra come nei siti coi chatbot (Paolo). Sopra la
   pagina e sotto il banner dei cookie; finche' il banner e' aperto non c'e'. */
.bolla-aiuto { position: fixed; z-index: 950;
               right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
               width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
               display: grid; place-items: center;
               background: var(--accento); color: var(--su-accento);
               box-shadow: 0 6px 18px rgb(0 0 0 / .2); }
.bolla-aiuto:hover { background: color-mix(in srgb, var(--accento) 88%, #fff); }
.bolla-aiuto:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
.bolla-aiuto .segno-chiudi, .bolla-aiuto.aperta .segno-apri { display: none; }
.bolla-aiuto.aperta .segno-chiudi { display: block; }
.bolla-aiuto span { display: block; line-height: 0; }
.consenso:not([hidden]) ~ .bolla-aiuto { display: none; }
@media (min-width: 900px) { .bolla-aiuto { right: 24px; bottom: 24px; } }
body:has(.bolla-aiuto) main { padding-bottom: 88px; }
/* l'ingresso dell'affiancamento largo quanto la copertina sopra (GRAFICA, difetto 152) */
.affiancamento-ingresso { max-width: 740px; }
/* la regola del gruppo, dentro il riquadro del gruppo: una nota a fondo tenue e non una cornice nella cornice; a 15 px,
   perche' B la legge prima di pagare (GRAFICA, difetto 153) */
.gruppo-riquadro .condizioni-in-breve { border: 0; background: var(--accento-tenue); padding: 12px 14px; margin: 16px 0; font-size: 15px; }
.gruppo-riquadro .condizioni-in-breve p { font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
.gruppo-riquadro .condizioni-in-breve p:last-child { margin: 0; }
/* Al telefono la bolla copriva l'ultima riga del piede, la S.r.l., la PEC e
   info@ (GRAFICA, 27/9): sotto i 900 px il piede fa posto. */
@media (max-width: 899px) {
  body:has(.bolla-aiuto) .pie { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* IL RIQUADRO: accanto alla pagina dal tablet in su, sopra la bolla. */
.aiuto-pannello { position: fixed; z-index: 960; inset: auto 24px 96px auto; margin: 0; padding: 0;
                  width: 380px; max-width: calc(100vw - 32px); max-height: min(600px, calc(100dvh - 140px));
                  border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--carta); color: var(--testo);
                  box-shadow: 0 6px 18px rgb(0 0 0 / .2); overflow: hidden; }
.aiuto-pannello[open] { display: flex; flex-direction: column; animation: aiuto-entra .18s ease-out;
                        transform-origin: bottom right; }
@keyframes aiuto-entra { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .aiuto-pannello[open] { animation: none; } }
.aiuto-testa { flex: none; display: flex; align-items: center; justify-content: space-between;
               padding: 6px 6px 6px 20px; border-bottom: 1px solid var(--bordo); }
.aiuto-testa h2 { margin: 0; font-family: var(--din); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.aiuto-chiudi { width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
                border: 0; background: none; color: var(--tenue); cursor: pointer; }
.aiuto-chiudi:hover { color: var(--testo); }
.aiuto-corpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.aiuto-cerca-bolla input { width: 100%; height: 44px; }
.aiuto-conto { margin: 8px 0 0; font-size: 13px; color: var(--tenue); }
.aiuto-conto:empty { margin: 0; }
.aiuto-sezione { margin: 18px 0 2px; font-family: var(--din); font-size: 13px; font-weight: 600;
                 letter-spacing: 0; color: var(--tenue); }
.aiuto-righe { list-style: none; margin: 4px 0 0; padding: 0; }
.aiuto-righe li { margin: 0; }
.aiuto-riga { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
              gap: 12px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--bordo); border-radius: 0;
              background: none; color: var(--testo); font: inherit; font-size: 15.5px; font-weight: 600;
              text-align: left; cursor: pointer; }
.aiuto-riga svg { flex: none; color: var(--tenue); transition: transform .2s ease; }
.aiuto-riga[aria-expanded="true"] svg { transform: rotate(180deg); }
.aiuto-riga .targa { margin-left: 6px; vertical-align: 1px; }
/* nella bolla, la stessa risposta a misura del riquadro (il pezzo comune e' sopra) */
.aiuto-risposta-qui p, .aiuto-risposta-qui li { font-size: 15px; line-height: 1.45; }
/* nella bolla solo la prima riga e i passi; il resto sta nella pagina
   dell'Aiuto, dietro «Apri nell'Aiuto». Senza passi, anche la seconda riga. */
.aiuto-risposta-qui > :not(:first-child):not(ol):not(ul):not(.aiuto-apri) { display: none; }
.aiuto-risposta-qui:not(:has(ol, ul)) > p:nth-child(2) { display: block; }
.aiuto-risposta-qui > p:first-child { font-size: 16px; font-weight: 600; color: var(--testo); margin-bottom: 10px; }
.aiuto-risposta-qui ol { gap: 8px; }
.aiuto-apri { margin: 10px 0 0; font-size: 15px; }
.aiuto-apri a { font-weight: 600; }
.aiuto-piede { flex: none; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
               border-top: 1px solid var(--bordo); }
.aiuto-piede p { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.aiuto-tasti { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.aiuto-tasti .bottone { min-height: 44px; justify-content: center; }

/* Al telefono e' un foglio dal basso, modale, col velo. */
@media (max-width: 599px) {
  .aiuto-pannello { inset: auto 0 0 0; width: 100%; max-width: 100%; height: 85dvh; max-height: 85dvh;
                    border-radius: var(--raggio) var(--raggio) 0 0; border-bottom: 0; }
  .aiuto-pannello[open] { transform-origin: bottom center; }
  .aiuto-pannello::backdrop { background: rgb(0 0 0 / .35); }
}
@media print { .bolla-aiuto, .aiuto-pannello { display: none !important; } }

/* Già tuo, in cima alla pagina del prodotto (prodotto.php, 26 settembre
   2026 notte): la riga e il pulsante pieno accanto, prima della copertina. */
.gia-tuo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 26px; }
.gia-tuo .stato { margin: 0; font-size: 18px; font-weight: 600; }

/* Le righe coi prezzi della pagina di un prodotto, «Di cosa è fatto» e «Fa
   parte anche di»: una tabellina, nome a sinistra e prezzo a destra, che non
   va mai a capo. Sotto i 480 px il prezzo scende sotto il nome, a destra,
   intero (GRAFICA, 26 settembre 2026 notte, dopo il cerchio rosso di Paolo). */
.righe-prezzo { list-style: none; padding: 0; margin: 0 0 24px; }
.righe-prezzo li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
                   min-height: 48px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--bordo); }
.righe-prezzo a { color: var(--testo); text-decoration: none; }
.righe-prezzo a:hover { text-decoration: underline; text-underline-offset: 3px; }
.righe-prezzo .prezzo-riga { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
                             white-space: nowrap; }
@media (max-width: 479px) {
  .righe-prezzo li { grid-template-columns: 1fr; gap: 2px; }
  .righe-prezzo .prezzo-riga { justify-self: end; }
}

/* Un collegamento di testo che porta a un posto, con la freccia: come «Torna
   ai corsi», l'accento sottolineato, alto 44 per il dito. Uno solo per
   pagina e' il pulsante pieno; gli altri che portano altrove sono questi
   (GRAFICA, 26 settembre 2026 notte, prima pagina). */
.vai { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--accento);
       text-decoration: underline; text-underline-offset: 3px; font-size: 16px; font-weight: 400; }
.vendita .vai { margin-top: auto; align-self: flex-start; }
.azioni .vai { margin-right: 18px; }

/* ---- le recensioni (paolo-76, disegno di GRAFICA, 27/9/2026) ---- */
.recensioni { margin: 28px 0; }
.recensioni [hidden], .scrivi-recensione[hidden] { display: none !important; }   /* i bottoni hanno un `display` loro */
.recensioni .virgolette .quando { display: block; margin-top: 6px; font-size: 13px; color: var(--tenue); }
.altre-recensioni { margin: 0 0 16px; }
.altre-recensioni summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
                            min-height: 44px; cursor: pointer; color: var(--accento); font-weight: 600; }
.altre-recensioni summary::-webkit-details-marker { display: none; }
.altre-recensioni summary svg { flex: none; transition: transform .2s ease; }
.altre-recensioni[open] summary svg { transform: rotate(180deg); }
/* gli articoli di una lezione nella bibliografia (prodotto.php): si aprono come
   «Leggi le altre» e le voci dell'Aiuto (GRAFICA, 27/9) */
.letture { margin: 0 0 16px; }
.letture summary { list-style: none; display: inline-flex; align-items: center; gap: 8px;
                   min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--testo); }
.letture summary::-webkit-details-marker { display: none; }
.letture summary svg { flex: none; transition: transform .2s ease; }
.letture[open] summary svg { transform: rotate(180deg); }
.letture .anno { white-space: nowrap; }
.come-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0;
             background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600;
             color: var(--accento); text-decoration: none; cursor: pointer; }
.come-link:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.invito-recensione { margin: -14px 0 26px; }
.invito-recensione.stato { font-size: 15px; font-weight: 600; color: var(--tenue); }
.invito-recensione a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600;
                       color: var(--accento); text-decoration: none; }
.invito-recensione a:hover { text-decoration: underline; text-underline-offset: 3px; }
.recensioni .stato { margin: 8px 0 0; font-weight: 600; }
.recensioni .stato:empty { margin: 0; }
.scrivi-recensione { margin-top: 12px; }
.scrivi-recensione .domanda { margin: 0; font-size: 17px; font-weight: 600; color: var(--testo); }
.scrivi-recensione textarea { width: 100%; min-height: 120px; font-size: 17px; }
.scrivi-recensione .conto-scrivi { margin: 4px 0 14px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.scrivi-recensione .spunta { align-items: flex-start; margin: 0 0 6px; font-size: 15px; color: var(--testo); }
.scrivi-recensione .spunta input { margin-top: 3px; }
.scrivi-recensione .nota-permesso { font-size: 13px; }
.righe-recensioni { list-style: none; padding: 0; margin: 8px 0 28px; }
.righe-recensioni li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
                       gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.righe-recensioni .nome { color: var(--testo); font-weight: 600; text-decoration: none; }
.regola-recensioni { border-left: 3px solid var(--accento); padding: 2px 0 2px 12px; font-size: 14px; }
.scarta-recensione { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bordo); }
.pericolo button.conferma, .pericolo button.conferma:hover { background: var(--ko); border-color: var(--ko); color: var(--su-accento); }

/* La scelta dopo l'annullamento (scelta.php): le due strade affiancate da
   900 in su, una sotto l'altra sotto. Da rivedere con GRAFICA. */
.scelta-strade { display: grid; gap: 24px; margin-top: 18px; }
.scelta-strade .riquadro { margin: 0; }
@media (min-width: 900px) { .scelta-strade { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---- La tua mappa (codice-22, public/mappa.php, js/mappa.js), in beta. Il
   disegno è di GRAFICA, materiale/grafica/mappa/LEGGIMI.md: la colonna da 720,
   le tessere da 18 col passo di 24, cinque forme che si leggono anche in bianco
   e nero, e un solo fondo colorato, «Da dove ripartire». ---- */
.mappa { max-width: 720px; }
.mappa .sotto { margin: 6px 0 22px; font-size: 15px; color: var(--tenue); }
.mappa .viste { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.mappa .viste .pastiglia { min-height: 32px; padding: 6px 12px; font-size: 13px; }

/* la tessera: vuota, mezza, piena, pallida, col punto */
.tessera { display: inline-block; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin: 0; padding: 0;
           border: 1.5px solid var(--tessera-vuota, var(--bordo)); border-radius: var(--raggio-minuto); background: var(--carta); position: relative; min-height: 0; }
.tessera.s-corso { border-color: var(--accento); background: linear-gradient(to top, var(--accento) 50%, var(--carta) 50%); }
.tessera.s-sai { border-color: var(--accento); background: var(--accento); }
.tessera.s-ripassare { border-color: var(--accento); background: color-mix(in srgb, var(--accento) 30%, var(--carta)); }
/* «da ripassare» si distingue per la forma, in tutti e due i temi: pieno, bordato pallido
   o bordato vuoto. Il bordo pallido di prima, nel tema chiaro, si perdeva (GRAFICA e Paolo, 27/9) */
.tessera.s-riprendere { border-color: var(--segno); }
.tessera.s-riprendere::after { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px;
                               border-radius: 50%; background: var(--segno); }
.tessera.senza.s-cominciare { border-style: dashed; }

.mappa .legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 18px; padding: 0; list-style: none;
                  font-size: 14px; color: var(--tenue); }
.mappa .legenda li { display: inline-flex; align-items: center; gap: 7px; }

/* «Da dove ripartire»: in Io una proposta, nella mappa tre */
.riparti { margin: 0 0 22px; padding: 14px 16px; background: var(--accento-tenue); border-radius: var(--raggio); }
.riparti-testa { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px;
                 font-size: 13px; font-variant-caps: all-small-caps; letter-spacing: .04em; color: var(--tenue); }
.riparti .a-mappa { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0;
                    font-size: 15px; font-weight: 600; font-variant-caps: normal; letter-spacing: 0;
                    color: var(--accento); text-decoration: none; }
.riparti .proposta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 8px 0;
                     border: 0; border-radius: 0; background: none; color: var(--testo); text-align: left;
                     font: inherit; text-decoration: none; cursor: pointer; }
.riparti .proposta + .proposta { border-top: 1px solid color-mix(in srgb, var(--accento) 18%, transparent); }
.riparti .proposta:hover:not(:disabled) { color: var(--testo); }
.proposta-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proposta-testo b { font-size: 16px; font-weight: 600; line-height: 1.3; }
.proposta-testo > span { font-size: 14px; }
.proposta-testo .proposta-gesto { color: var(--accento); font-weight: 600; }
.proposta-testo .perche { color: var(--tenue); }
.riparti.in-io { margin: 0 0 26px; }

/* le lezioni */
.mappa .lezioni { margin: 0; padding: 0; list-style: none; }
.mappa .lezione { border-top: 1px solid var(--bordo); padding: 12px 0; }
.lez-tasto { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0;
             background: none; color: var(--testo); text-align: left; font: inherit; cursor: pointer; }
.lez-tasto:hover:not(:disabled) { color: var(--testo); }
.lez-riga { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-variant-caps: all-small-caps;
            letter-spacing: .04em; color: var(--tenue); }
.lez-riga .conto { font-size: 13px; font-variant-caps: normal; letter-spacing: 0; color: var(--testo); }
.lez-titolo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 2px 0 8px;
              font-size: 16px; font-weight: 600; line-height: 1.3; }
.lez-titolo > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lez-titolo svg { flex: none; margin-top: 1px; transition: rotate .15s ease; }
.lez-tasto[aria-expanded=true] .lez-titolo svg { rotate: 180deg; }
.mappa .tessere { display: flex; flex-wrap: wrap; gap: 6px; }
/* al telefono le tessere sono un disegno: si tocca la riga della lezione */
.tessere .tessera { pointer-events: none; }
.mappa-argomenti { margin: 10px 0 0; padding: 0; list-style: none; }
.mappa-arg { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px;
                    width: 100%; min-height: 48px; margin: 0; padding: 6px 0; border: 0; border-radius: 0;
                    border-top: 1px solid color-mix(in srgb, var(--bordo) 60%, transparent);
                    background: none; color: var(--testo); text-align: left; font: inherit; font-size: 15px; cursor: pointer; }
.mappa-arg:hover:not(:disabled) { color: var(--accento); }
.arg-nome .cod { color: var(--tenue); margin-right: 4px; font-variant-numeric: tabular-nums; }
.arg-stato { font-size: 13px; color: var(--tenue); white-space: nowrap; }
.mappa .parte-titolo { margin: 26px 0 8px; font-family: var(--cond); font-size: 26px; font-weight: 600; }

/* col mouse ogni tessera si clicca da sola, con l'area allargata a 26 */
@media (pointer: fine) {
  .tessere .tessera { pointer-events: auto; cursor: pointer; }
  .tessere .tessera::before { content: ""; position: absolute; inset: -4px; }
  .tessere .tessera:hover { outline: 1.5px solid var(--testo); outline-offset: 1px; }
}

/* il foglio di un argomento: dal basso al telefono, al centro col mouse */
.foglio { width: min(460px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: var(--raggio);
          background: var(--carta); color: var(--testo); }
.foglio::backdrop { background: color-mix(in srgb, #0b1717 45%, transparent); }
.foglio-dentro { position: relative; padding: 22px 22px 20px; }
.foglio-chiudi { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; min-height: 0; padding: 0;
                 display: inline-flex; align-items: center; justify-content: center; border: 0; background: none;
                 color: var(--tenue); }
.foglio-riga { display: flex; align-items: center; gap: 8px; margin: 0 40px 8px 0; font-size: 13.5px; color: var(--tenue); }
.foglio h2 { margin: 0 0 8px; font-size: 21px; font-weight: 600; line-height: 1.25; }
.foglio-frase { margin: 0 0 18px; font-size: 15.5px; line-height: 1.45; }
.gesti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gesti.gesti-2 { grid-template-columns: repeat(2, 1fr); }
.gesto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px;
         margin: 0; padding: 8px 6px; border: 1px solid var(--accento); border-radius: var(--raggio); background: var(--carta);
         color: var(--accento); font: inherit; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none;
         line-height: 1.2; cursor: pointer; }
.gesto.pieno, .gesto.pieno:hover:not(:disabled) { background: var(--accento); color: var(--su-accento); }
@media (max-width: 600px) {
  .mappa h1.pagina-studio { font-size: 40px; }
  .foglio { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--raggio) var(--raggio) 0 0; }
  .foglio-dentro { padding-top: 26px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .foglio-dentro::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px;
                           margin-left: -20px; border-radius: 2px; background: var(--bordo); }
}
.riparti-vuota { margin: 6px 0 2px; font-size: 15px; color: var(--testo); }

/* ---------------------------------------------------------------------
   «Il tuo dubbio» (app/dubbio.php, js/dubbio.js; COPY giro 2, punto 8; GRAFICA).
   Il comando è testo con la bandierina, non un pulsante pieno: chi non ha
   dubbi non ci deve inciampare. Il foglio è una scheda sola, al centro.
   --------------------------------------------------------------------- */
.dubbio-riga { margin: 8px 0 0; }
.chiedi-controllo { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; cursor: pointer; color: var(--tenue); font-size: 14.5px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.chiedi-controllo:hover { color: var(--testo); }
.chiedi-controllo:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: var(--raggio); }
.dubbio-stato { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--tenue); font-size: 14.5px; }
.chiedi-controllo svg, .dubbio-stato svg { flex: none; }
/* «Il tuo dubbio» nella barra, solo in beta (GRAFICA, 4/10): la sola bandierina, bianca come il tasto
   del tema, 44 per 44 a ogni larghezza; la frase intera nell'aria-label. */
.barra .dubbio-barra { color: #fff; text-decoration: none; width: 44px; min-height: 44px; margin: -4px 0;
  padding: 0; justify-content: center; }
.barra .dubbio-barra:hover { color: #fff; }
.barra .dubbio-barra:focus-visible { outline-color: #fff; }
@media (max-width: 950px) { .barra .dubbio-barra { margin: 0; } }
.foglio-dubbio { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box;
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 24px 24px 20px; background: var(--carta); color: var(--testo); }
.foglio-dubbio::backdrop { background: rgb(0 0 0 / .45); }
.foglio-dubbio .chiudi { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--tenue); cursor: pointer; }
.foglio-dubbio h2 { margin: 0 44px 4px 0; }
.dubbio-dove { margin: 0 0 14px; }
.dubbio-selezione { margin: 0 0 14px; padding: 6px 12px; border-left: 3px solid var(--bordo); color: var(--tenue); font-style: italic; }
.dubbio-scelte { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.dubbio-scelte legend { font-weight: 600; margin: 0 0 4px; padding: 0; }
.dubbio-scelte .scelte { display: flex; flex-direction: column; align-items: flex-start; }   /* una per riga, in tutti i fogli (GRAFICA, 4/10) */
.dubbio-scelte label { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.dubbio-avviso { font-size: 13.5px; color: var(--tenue); margin: 0 0 6px; }
.foglio-dubbio textarea { width: 100%; box-sizing: border-box; }
.foglio-dubbio .azioni { justify-content: flex-end; margin-top: 12px; }
.dubbio-grazie h2 { margin-bottom: 8px; }

/* sotto il modulo d'accesso, staccato da una riga: non sembra più parte del modulo (GRAFICA, 27/9) */
.dopo-modulo { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--bordo); }

/* Dai 1100 in su (GRAFICA, 27/9): la mappa larga come la lettura, con le lezioni in due
   colonne («Da dove ripartire» e la legenda restano a tutta larghezza); la descrizione
   sotto un video, la didascalia di Clean & Seal, in due colonne. Al telefono resta una colonna. */
@media (min-width: 1100px) {
  .mappa { max-width: var(--lettura); }
  .mappa ol.lezioni { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  figure.video > figcaption { columns: 2; column-gap: 48px; max-width: none; }
  figure.video > figcaption :is(p, h3) { break-inside: avoid; }
}
/* la risposta al dubbio, dalla parte dello studente (dubbio.php?d=) */
.risposta-dubbio .dubbio-tuo { margin: 0 0 16px; padding: 6px 12px; border-left: 3px solid var(--bordo); color: var(--tenue); }
.risposta-dubbio .dubbio-risposta { margin: 0 0 20px; }
/* anche le righe di «Da ricordare» e i punti esame si tengono nel quaderno (Paolo, 27/9;
   migrazione 072): lo stesso segno nel margine delle frasi, prima del pallino */
li.segnabile { position: relative; }
li.segnabile .segno { left: -26px; }
li.segnabile:hover .segno { opacity: 1; }
li.segnabile.segnata .segno { opacity: 1; background: var(--segno); }
li.segnabile.segnata { background: color-mix(in srgb, var(--segno) 14%, transparent); border-radius: var(--raggio); }
@media (max-width: 700px) { li.segnabile .segno { left: -22px; opacity: .45; } }
/* Sulla riga tenuta il pallino lascia il posto alla barretta, nello stesso
   punto, e il testo resta allineato alle altre righe (Paolo, 27/9). */
li.segnabile.segnata { list-style: none; }
li.segnabile.segnata .segno { left: -13px; }
.segnate li.dal-fianco .etichetta { margin-right: 6px; }
/* nel quaderno il cestino al posto di «togli», come nel carrello (COPY, 27/9: «Togli» non si usa) */
.segnate .togli.cestino { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
                          margin: -10px -10px -10px 4px; padding: 0; border: 0; background: none; color: var(--tenue);
                          border-radius: var(--raggio); cursor: pointer; flex: none; }
.segnate .togli.cestino:hover, .segnate .togli.cestino:focus-visible { color: var(--ko); }

/* ---- le lezioni non si stampano ----
   (Paolo, 27/9 sera; disegno di GRAFICA, parole di COPY). In stampa resta
   soltanto la frase di `data-stampa`; la filigrana col nome e l'e-mail, che
   scrive filigrana() in bootstrap.php, si vede solo se qualcosa passa lo
   stesso sulla carta. Sullo schermo non c'e' (Paolo: «sempre no, meglio di
   no»). Il velo, solo in beta, copre la pagina quando la finestra perde il
   fuoco. */
.filigrana { display: none; }
.velo { position: fixed; inset: 0; z-index: 2147483600; background: var(--sfondo);
        display: grid; place-items: center; text-align: center; padding: 0 24px; }
.velo p { margin: 0; font-size: 17px; font-weight: 500; color: var(--tenue); }
@media print {
  body[data-stampa] { background: #fff !important; }
  body[data-stampa] > *:not(.filigrana) { display: none !important; }
  /* La frase su un fondo bianco pieno, sopra la filigrana, che cosi' non la sporca (Paolo, 27/9 sera,
     dal PDF di Safari). */
  body[data-stampa]::before { content: attr(data-stampa); display: block; box-sizing: border-box;
    width: 150mm; margin: 70mm auto 0; padding: 8mm 10mm; position: relative; z-index: 2147483001;
    background: #fff; border-radius: var(--raggio);
    font: 600 16pt/1.45 Barlow, system-ui, sans-serif; color: #244747; text-align: center;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Grande quanto il foglio A4, e non quanto la finestra: con `inset: 0` Safari la fermava al
     primo terzo della pagina. */
  .filigrana { display: block; position: fixed; top: 0; left: 0; right: auto; bottom: auto;
    width: 210mm; height: 297mm; z-index: 2147483000; pointer-events: none;
    background-repeat: repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------------------------------------------------------------------
   «Correggi il testo» (app/correzione.php, js/correzione.js; Paolo, 29/9).
   Solo per gli amministratori. Il comando compare sotto la frase
   selezionata, col verde petrolio della frase che segue la voce; il
   riquadro e' fatto come quello del dubbio. Il disegno vero e' di GRAFICA:
   questo e' un primo giro coi gettoni che ci sono.
   --------------------------------------------------------------------- */
.apri-correzione { position: absolute; z-index: 60; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--raggio); background: #356b6f; color: #f7f3ea;
  font: 600 14.5px/1 var(--din); cursor: pointer; }
.apri-correzione[hidden] { display: none; }
/* Per chi corregge (la classe la mette js/correzione.js, che arriva solo agli amministratori):
   il testo dei link, dei sommari e delle etichette si seleziona come il resto. Senza, il dito o
   il mouse aprivano o trascinavano il link. (Le risposte dei quiz sono pulsanti: li' il tocco risponde.) */
html.correggibile a, html.correggibile summary, html.correggibile label {
  -webkit-user-select: text; user-select: text; -webkit-user-drag: none; -webkit-touch-callout: none; }
.apri-correzione:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.foglio-correzione { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box;
  border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 24px 24px 20px; background: var(--carta); color: var(--testo); }
.foglio-correzione::backdrop { background: rgb(0 0 0 / .45); }
.foglio-correzione .chiudi { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--tenue); cursor: pointer; }
.foglio-correzione h2 { margin: 0 44px 12px 0; }
.foglio-correzione .correzione-etichetta { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--testo); }
.correzione-frase { margin: 0 0 14px; padding: 6px 12px; border-left: 3px solid var(--bordo); color: var(--tenue);
  font-style: italic; max-height: 30vh; overflow: auto; }
.foglio-correzione textarea { width: 100%; box-sizing: border-box; }
.foglio-correzione .azioni { justify-content: flex-end; margin-top: 12px; }
/* «Togli questa frase» a sinistra, lontano da Invia: si toglie, non si manda (come i «togli» della cassa) */
.foglio-correzione .togli-frase { order: -1; margin-right: auto; }
.foglio-correzione .togli-frase:hover { color: var(--ko); border-color: var(--ko); }
/* Gli stati del riquadro (GRAFICA, 3/10, materiale/grafica/audit/riquadro_stati.css, la parte sicura): il
   preambolo chiede attenzione, ocra e non il verde di «fatto»; e mentre chiede, i pulsanti di sotto non ci sono. */
.correzione-preambolo .avviso { background: color-mix(in srgb, var(--segno) 14%, transparent); border-left-color: var(--segno);
  color: color-mix(in srgb, var(--segno) 40%, var(--testo)); }
.correzione-chiede:has(.correzione-preambolo:not([hidden])) > .azioni { display: none; }
@media (max-width: 600px) { .correzione-preambolo .azioni { flex-direction: column; align-items: stretch; } }
/* La «Scelta» di GRAFICA (col si' di Paolo, 3/10): dove la frase non si riscrive niente campo e niente
   «Invia». Le parole degli studenti tengono la riga di COPY e «Rimuovi questa frase», la riga di
   legge solo la riga che spiega. La zona la scrive js/correzione.js in data-zona. */
.correzione-chiede[data-zona] label[for=correzione-proposta],
.correzione-chiede[data-zona] textarea,
.correzione-chiede[data-zona] [type=submit] { display: none; }
.correzione-chiede[data-zona="legale"] > .azioni { display: none; }
.correzione-chiede[data-zona] .togli-frase { margin-right: 0; }
.correzione-chiede[data-zona] > .azioni { justify-content: flex-start; }
/* Fra due paragrafi di una correzione: uno stacco alto quanto il margine dei capoversi, non una riga
   vuota (GRAFICA, materiale/grafica/audit/UNIFORMITA_TESTI.md § 4; app/correzione.php, htmlCorrezione()) */
span.stacco { display: block; height: .74em; }
/* Le rate in home, la fascia sopra le tre carte (GRAFICA, materiale/grafica/rate/rate_B_fascia.html;
   scelta di Paolo, 3/10 notte). La riga sotto il titolo sta nello stesso riquadro e si legge come il
   testo: niente note in piccolo (LEGAL). */
.rate { --rate-titolo: clamp(30px, 3.2vw, 42px); }
.rate strong { display: block; font-family: var(--cond); font-weight: 600; font-size: var(--rate-titolo);
  line-height: 1.05; color: var(--accento); }
.rate .riga { display: block; margin: 8px 0 0; font-size: inherit; line-height: 1.45; color: var(--testo); }
.rate .vai { display: inline-block; margin-top: 6px; }
.rate-fascia { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 28px; margin: 0 0 8px;
  padding: 20px 24px; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.rate-fascia .riga { margin: 0; }
@media (max-width: 700px) { .rate-fascia { grid-template-columns: minmax(0, 1fr); padding: 18px; } }
/* B2, scelta di Paolo (4/10 notte, «bianco su bianco ha poca forza»): fondo pieno del marchio e testo
   chiaro; in scuro l'inverso, come i pulsanti (GRAFICA, materiale/grafica/rate/rate_B2_pieno.html) */
.rate-fascia { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.rate-fascia strong, .rate-fascia .riga, .rate-fascia a.vai { color: var(--su-accento); }
.rate-fascia a.vai { text-decoration-color: currentColor; }
.rate-fascia a.vai:hover { color: var(--su-accento); opacity: .85; }
/* la riga del marchio HeyLight sotto la fascia: piccola, come chiede il kit (COPY e LEGAL, 9/10) */
.pubblica .rate-marchio { margin: 10px 0 16px; font-size: 12px; line-height: 1.45; color: var(--tenue); }   /* .pubblica p vinceva: 19 px (GRAFICA, difetto 149) */
/* Le carte di vendita si aprono tutte col link del titolo (il suo ::after copre la carta): per
   chi corregge si apre col titolo, e il testo della carta si seleziona */
html.correggibile .vendita .carta h3 a::after { content: none; }
.correzione-grazie p { margin: 8px 44px 4px 0; }
/* il pannello dello staff (correzioni.php) */
.correzioni-copia { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.correzioni .correzione-com-e { margin: 0; padding: 0 0 0 10px; border-left: 3px solid var(--bordo); color: var(--tenue); }
.correzioni .correzione-vuole { padding: 0 0 0 10px; border-left: 3px solid #356b6f; }
.correzione-passi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------------------------------------------------------------------
   La guida al primo ingresso (app/guida.php, js/guida.js; Paolo, 28/9).
   Un velo, una luce sul pezzo di pagina e una scheda accanto. Il disegno
   vero e' di GRAFICA: qui solo i gettoni che ci sono, il verde petrolio
   per il bordo della luce e il velo dei riquadri.
   --------------------------------------------------------------------- */
.guida { position: fixed; inset: 0; z-index: 2147483000; }
.guida.senza { background: rgb(0 0 0 / .45); }
.guida-luce { position: fixed; border-radius: var(--raggio); pointer-events: none;
  box-shadow: 0 0 0 3px #356b6f, 0 0 0 200vmax rgb(0 0 0 / .45);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
.guida-scheda { position: fixed; box-sizing: border-box; width: min(380px, calc(100% - 32px));
  padding: 18px 20px 16px; background: var(--carta); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: var(--raggio); }
.guida-scheda.al-centro { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.guida-scheda.in-fondo { left: 16px; right: 16px; bottom: 16px; width: auto; }
.guida-conto { margin: 0 0 4px; font-size: 13px; color: var(--tenue); }
.guida-scheda h2 { margin: 0 0 6px; font-size: 22px; }
.guida-scheda #guida-testo { margin: 0 0 14px; font-size: 16px; line-height: 1.45; }
.guida-tasti { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guida-tasti .guida-salta { margin-right: auto; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--tenue); font: inherit; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.guida-tasti button:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* `.bottone` scrive il suo display, che vincerebbe su `hidden`: al primo passo «Indietro» non c'e' */
.guida-tasti [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .guida-luce { transition: none; } }
.rivedi-guida { margin: 10px 0 0; }

/* ---------------------------------------------------------------------
   Il pannello «Conti» (app/conti.php, conti.php; lo scheletro, 29/9). Dalla
   tavola di GRAFICA, materiale/grafica/conti/: certa diritta coi centesimi,
   stimata in corsivo col «≈», «da verificare» come targa ocra accanto. Con
   il file d'esempio, «Cifre inventate» e la trama ocra su ogni pezzo.
   --------------------------------------------------------------------- */
.stima { font-style: italic; }
.targa-verifica { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 2px 7px;
  border-radius: var(--raggio-minuto); background: color-mix(in srgb, var(--segno) 24%, transparent); color: var(--testo);
  white-space: nowrap; vertical-align: 1px; font-style: normal; }
.finto { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--segno) 9%, transparent) 0 10px, transparent 10px 20px); }
.targa-finto { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--raggio-minuto); background: var(--segno); color: #244747; }
.conti-esempio { margin: 0 0 18px; padding: 10px 14px; border-radius: var(--raggio);
  background: color-mix(in srgb, var(--segno) 22%, var(--carta)); border: 1px solid color-mix(in srgb, var(--segno) 50%, transparent); }
.conti-testa { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 8px; }
.conti-testa .targa-finto { float: right; font-size: 10px; padding: 2px 6px; }
.conti-testa strong { font-size: 28px; }
.conti-testa .nota { color: var(--testo); }
/* `.contatori span` e' pensato per l'etichetta: la cifra dentro il numero resta grande */
.conti-testa strong .certa, .conti-testa strong .stima, .conti-testa strong .stima span { font-size: inherit; color: inherit; }
.conti-testa .targa-verifica { font-size: 11px; color: var(--testo); vertical-align: middle; }
.conti-testa .nota .stima, .conti-testa .nota .certa { color: var(--testo); }
.tabella caption { caption-side: top; text-align: left; padding: 0 0 8px; }
.tabella .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella th.num { text-align: right; }
.conti-mesi .barra-cella { width: 45%; }
.conti-barra { display: block; height: 8px; margin-top: 7px; border-radius: var(--raggio-minuto); background: var(--accento); }
.conti-fornitori .da-sistemare { color: var(--ko); }
.conti-fatture .sotto, .conti-scadenze .sotto, .conti-iva .sotto { display: block; font-size: 12.5px; color: var(--tenue); }
/* Tasse e scadenze, IVA per trimestre (GRAFICA, 4/10; materiale/grafica/audit/conti_tasse_regole.css,
   DIFETTI_AUDIT_2026-10.md, «Conti: Tasse e scadenze…») */
/* la .num delle lezioni (maiuscolo, spaziato) non entra nelle tabelle */
.tabella td.num { text-transform: none; letter-spacing: normal; }
.tabella td.num .calmo { font-weight: 400; color: var(--tenue); }
/* la targa va sotto la cifra: le cifre restano in colonna */
.tabella td.num .targa-verifica { display: block; width: fit-content; margin: 4px 0 0 auto; }
/* sotto i 700 px ogni riga diventa un blocco, come le fatture */
@media (max-width: 700px) {
  .conti-scadenze thead, .conti-iva thead { display: none; }
  .conti-scadenze, .conti-iva, .conti-scadenze tbody, .conti-iva tbody { display: block; width: 100%; min-width: 0; white-space: normal; overflow-x: visible; }
  .conti-scadenze tr, .conti-iva tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    padding: 11px 0; border-bottom: 1px solid var(--bordo); }
  .conti-scadenze td, .conti-iva td { padding: 0; border: 0; }
  .conti-scadenze td.data { grid-column: 1; grid-row: 1; }
  .conti-scadenze td.num { grid-column: 2; grid-row: 1; }
  .conti-scadenze td.cosa { grid-column: 1 / -1; min-width: 0; }
  .conti-scadenze td:nth-child(3) { grid-column: 1 / -1; font-size: 12.5px; color: var(--tenue); }
  .conti-iva td.cosa { grid-column: 1; grid-row: 1; }
  .conti-iva td.data { grid-column: 2; grid-row: 1; font-size: 12.5px; color: var(--tenue); }
  .conti-iva td.data::before { content: "entro il "; }
  .conti-iva td.num { grid-column: 1 / -1; white-space: nowrap; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  .conti-iva td.num::before { content: attr(data-etichetta); font-size: 12.5px; font-weight: 400; color: var(--tenue); margin-right: auto; }
  .conti-iva td.num .targa-verifica { margin: 0; }
  .giro-tabella:has(.conti-scadenze, .conti-iva) { overflow-x: visible; }
}
.giro-tabella { overflow-x: auto; }
/* dentro un contenitore che scorre, la testata attaccata a 52 px scenderebbe sulla prima riga */
.giro-tabella .tabella th { position: static; }
.legenda-conti { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--tenue); }
.legenda-conti .certa, .legenda-conti .stima { color: var(--testo); font-weight: 600; }
.conti-piede { margin-top: 28px; }
/* sotto i 700 px ogni movimento diventa un blocco (GRAFICA) */
@media (max-width: 700px) {
  .conti-fatture thead { display: none; }
  .conti-fatture tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--bordo); }
  .conti-fatture td { padding: 0; border: 0; }
  .conti-fatture td.data { grid-column: 1; font-weight: 600; }
  .conti-fatture td.num { grid-column: 2; grid-row: 1; }
  .conti-fatture td.cosa { grid-column: 1 / -1; }
  .conti-fatture td.st { grid-column: 1; }
  .conti-fatture td.dove { grid-column: 2; text-align: right; }
  .conti-fatture caption { display: block; }
}

/* La richiesta di prolungamento dell'art. 12 (lavoro 9 di NUVOLA, app/prolungamento.php):
   le due scelte senza la cornice del browser, come quelle del dubbio. */
.prolungamento-scelte { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.prolungamento-scelte legend { font-weight: 600; margin: 0 0 4px; padding: 0; }

/* La pagina per lo studio del commercialista (lavoro 9 di NUVOLA): i nomi dei file vanno a capo */
.mese-fornitori ul { margin: 0 0 12px; padding-left: 18px; }
.mese-fornitori li { margin: 0 0 6px; overflow-wrap: anywhere; }

/* ===================================================================
   IL DIETRO LE QUINTE A CARTE. GRAFICA GDT, 2 ottobre 2026: la tavola in
   materiale/grafica/quinte/TAVOLA_QUINTE.html, portata qui da LAB cosi'
   com'e', senza le righe solo della tavola (barra, body, guscio).
   Prefisso dd-, solo token del sito, un raggio solo, nessuna ombra.
   In fondo, «Le aggiunte di LAB»: quello che la tavola non disegna.
   =================================================================== */
/* Il menu: cinque voci invece di diciannove */
.dd-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start;
           position: sticky; top: 24px; }
.dd-menu a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px;
             border-radius: var(--raggio); color: var(--testo); text-decoration: none; font-weight: 500; }
.dd-menu a:hover { background: var(--accento-tenue); }
.dd-menu a[aria-current] { background: var(--accento); color: var(--su-accento); }
.dd-menu .conta { font-family: var(--cond); font-weight: 600; font-size: 17px; }

/* Testa: titolo, data, i quattro numeri */
.dd-testa h1 { font-family: var(--cond); font-size: 40px; line-height: .95; margin: 0 0 6px; }
.dd-testa .calmo { color: var(--tenue); margin: 0 0 22px; font-size: 14.5px; }
.dd-finte { display: inline-block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--segno); border: 1px solid var(--segno); border-radius: var(--raggio-minuto);
            padding: 2px 6px; margin-left: 8px; vertical-align: 2px; }
.dd-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.dd-numeri div { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
                 padding: 12px 14px; }
.dd-numeri strong { display: block; font-family: var(--cond); font-size: 30px; font-weight: 600; line-height: 1; }
.dd-numeri span { font-size: 12.5px; color: var(--tenue); }

/* Le fasce: il tempo che resta mette in fila le carte */
.dd-fascia { margin: 0 0 26px; }
.dd-fascia > h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
                  font-weight: 600; margin: 0 0 10px; }

/* LA CARTA */
.dd-carta { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
            padding: 16px 18px; margin-bottom: 10px; }
.dd-carta.vicina { border-left: 4px solid var(--segno); }
.dd-carta.scaduta { border-left: 4px solid var(--ko); }
.dd-carta header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.dd-carta h3 { margin: 0; font-size: 18px; font-weight: 600; }
.dd-carta h3 .n { font-family: var(--cond); font-size: 22px; margin-right: 4px; }
.dd-chi { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
          border-radius: var(--raggio-minuto); padding: 2px 7px; background: var(--accento-tenue); color: var(--accento); }
.dd-entro { margin-left: auto; font-size: 13px; color: var(--tenue); }
.vicina .dd-entro { color: var(--segno); font-weight: 600; }
.scaduta .dd-entro { color: var(--ko); font-weight: 600; }
.dd-perche { margin: 6px 0 10px; font-size: 14px; color: var(--tenue); }

/* I quattro stati: se ne vede uno solo, ma il passo e' leggibile */
.dd-stato { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--tenue); }
.dd-stato i { width: 7px; height: 7px; border-radius: 50%; background: var(--bordo); }
.dd-stato i.si { background: var(--accento); }

/* Le righe: il gesto sta sulla riga, niente pagina in mezzo */
.dd-righe { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo); }
.dd-righe li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
               padding: 10px 0; border-bottom: 1px solid var(--bordo); }
.dd-righe .cosa { font-weight: 500; }
.dd-righe .sotto { grid-column: 1; font-size: 13px; color: var(--tenue); }
.dd-righe .gesti { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; }
.dd-tutte { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 14px; }

/* I pulsanti: quelli del sito, in due pesi */
.dd-si, .dd-no { font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--raggio);
                 padding: 8px 14px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.dd-si { background: var(--accento); color: var(--su-accento); border: 1px solid var(--accento); }
.dd-no { background: transparent; color: var(--testo); border: 1px solid var(--bordo); }
.dd-si:hover { filter: brightness(1.08); }
.dd-no:hover { border-color: var(--accento); color: var(--accento); }
.dd-apri { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: var(--accento);
           text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* La carta da decidere con Gloria: domanda, scelte, consiglio */
.dd-scelte { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 8px; }
.dd-scelte label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
                   border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 12px; cursor: pointer; }
.dd-scelte label:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); }
.dd-scelte input { accent-color: var(--accento); margin-top: 3px; }
.dd-scelte small { display: block; color: var(--tenue); font-size: 13px; }
.dd-consiglio { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); font-weight: 600; margin-left: 6px; }

.dd-pace { color: var(--tenue); font-size: 14px; border-top: 1px solid var(--bordo); padding-top: 14px; }

/* IL FOGLIO DI LATO: il dettaglio sopra la lista, e chiudendolo si torna li' */
.dd-velo { position: fixed; inset: 0; background: color-mix(in srgb, var(--testo) 30%, transparent); }
.dd-foglio { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--carta);
             border-left: 1px solid var(--bordo); padding: 22px 24px; overflow-y: auto; }
.dd-foglio .chiudi { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: var(--raggio);
                     border: 1px solid var(--bordo); background: transparent; color: var(--testo); font-size: 20px; cursor: pointer; }
.dd-foglio h2 { font-family: var(--cond); font-size: 28px; margin: 4px 50px 4px 0; }
.dd-foglio dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 22px; font-size: 14.5px; }
.dd-foglio dt { color: var(--tenue); }
.dd-foglio dd { margin: 0; font-weight: 500; }
.dd-foglio .gesti { display: flex; gap: 8px; flex-wrap: wrap; }

/* Al telefono: una colonna di carte, il menu in alto che scorre, il foglio dal basso */
@media (max-width: 700px) {
  .dd-menu { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .dd-menu a { white-space: nowrap; gap: 8px; }
  .dd-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-entro { margin-left: 0; flex-basis: 100%; }
  .dd-righe li { grid-template-columns: 1fr; }
  .dd-righe .gesti { grid-row: auto; grid-column: 1; }
  .dd-foglio { top: auto; left: 0; width: auto; max-height: 82vh; border-left: 0; border-top: 1px solid var(--bordo);
               border-radius: var(--raggio) var(--raggio) 0 0; }
}

/* ---- Le aggiunte di LAB (2 ottobre 2026), da guardare con GRAFICA ----
   Il menu sta dentro la colonna .lato del sito: qui si spengono i fili di
   .lato a, e sotto le cinque voci ci sono le pagine della voce dove sei.
   Il gesto sulla riga e' un modulo, che resta in riga come un pulsante; il
   bonifico porta accanto il giorno dell'accredito. Il foglio sta sopra la
   barra del sito, e [hidden] lo spegne. */
.lato .dd-menu a, .lato .dd-sotto a { border-left: 0; border-bottom: 0; }
.dd-sotto { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--bordo);
            display: grid; gap: 0; }
.dd-sotto a { display: block; padding: 6px 12px; font-size: 14px; color: var(--tenue); text-decoration: none;
              border-radius: var(--raggio); }
.dd-sotto a:hover { color: var(--testo); background: var(--accento-tenue); }
.dd-sotto a.qui { color: var(--accento); font-weight: 600; }
.dd-gesto { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.dd-gesto input[type=date] { font: inherit; font-size: 14px; min-height: 40px; padding: 6px 8px;
                             border: 1px solid var(--bordo); border-radius: var(--raggio);
                             background: var(--carta); color: var(--testo); }
/* l'ultima giornata dell'affiancamento: l'etichetta e la nota piccola sotto (COPY, 8) */
.dd-gesto .dd-data { display: inline-flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tenue); }
.dd-gesto .dd-data small { font-size: 12px; }
a.dd-no { display: inline-flex; align-items: center; text-decoration: none; }
.dd-velo { z-index: 90; }
.dd-foglio { z-index: 91; }
.dd-foglio[hidden], .dd-velo[hidden] { display: none; }
@media (max-width: 900px) {
  .lato { flex-direction: column; align-items: stretch; }
  .lato .dd-menu { position: static; display: flex; overflow-x: auto; gap: 6px; }
  .lato .dd-menu a { white-space: nowrap; gap: 8px; }
  .dd-sotto { display: flex; overflow-x: auto; gap: 4px; margin-top: 8px; padding-top: 8px; }
  .dd-sotto a { white-space: nowrap; }
}
@media (max-width: 700px) {
  .dd-righe .gesti { flex-wrap: wrap; }
}

/* «Apri» da solo resta a destra anche al telefono (GRAFICA, scelta 10, sì di
   Paolo il 3/10): le righe con un gesto vero vanno a capo come prima, quelle
   con il solo «Apri» no, e una carta di 8 righe non diventa alta il doppio. */
@media (max-width: 700px) {
  .dd-righe li:has(> .gesti > .dd-no:only-child) { grid-template-columns: minmax(0, 1fr) auto; }
  .dd-righe li:has(> .gesti > .dd-no:only-child) .gesti { grid-row: 1 / span 2; grid-column: 2; }
}

/* ---- Il dente a livelli (codice-23, public/dente.php, js/livelli.js), in beta.
   La scena è quella del prototipo di LAB e GRAFICA: la testa da 56 col solo
   livello sopra e «Intero», la linea della profondità, e sotto un livello per
   volta, che entra con lo zoom da dove si è toccato. I disegni portano il loro
   stile (materiale/grafica/livelli/). Tutte le classi hanno «liv-» davanti:
   i nomi corti come .elenco o .avviso esistono già nel sito. ---- */
.mappa .esplora { margin: -8px 0 18px; font-size: 15px; }
.mappa .esplora a { font-weight: 600; text-decoration: none; }
.sotto-livelli { margin: 6px 0 18px; max-width: 720px; font-size: 15px; color: var(--tenue); }
.livelli { position: relative; max-width: 720px; height: min(812px, calc(100dvh - 140px)); min-height: 560px;
           display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
           border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo); }
.liv-testa { position: relative; height: 56px; padding: 6px 12px 9px; display: flex; justify-content: space-between;
             align-items: center; gap: 8px; background: var(--carta); }
.liv-briciola { min-width: 0; }
.liv-briciola button { border: 0; background: none; min-height: 44px; padding: 0 6px 0 2px; color: var(--accento);
                       font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden;
                       text-overflow: ellipsis; max-width: 100%; }
.liv-briciola button:hover:not(:disabled) { color: var(--accento); }
.livelli [hidden] { display: none !important; }
.liv-intero { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; flex: 0 0 auto; margin: 0;
              padding: 0 14px 0 12px; border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta);
              color: var(--testo); font-weight: 600; font-size: 14px; cursor: pointer; }
.liv-intero svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.liv-prof { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; }
.liv-prof i { flex: 1 1 0; height: 3px; background: var(--bordo); }
.liv-prof i.piena { background: var(--accento); }
.liv-scena { position: relative; overflow: hidden; }
.livelli .livello { position: absolute; inset: 0; overflow-y: auto; padding: 14px 16px 16px; display: grid; gap: 12px; align-content: start; }
.livelli .livello h2 { margin: 0; font: 700 30px/1 var(--cond); text-wrap: balance; }
.liv-sotto { margin: 0; font-size: 14.5px; color: var(--tenue); }
.liv-scelto { color: var(--testo); }
.liv-testo { margin: 0; font-size: 15.5px; line-height: 1.5; }
.liv-disegno svg { width: 100%; height: auto; display: block; max-height: 52dvh; }
.liv-disegno .area, .liv-disegno .dente, .liv-disegno .tessuto { cursor: pointer; }
.liv-info, .liv-zona { display: grid; gap: 10px; }
/* la voce, come nella voce dopo l'errore */
.liv-voce { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--raggio); background: var(--accento-tenue); }
.liv-voce-riga { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.liv-voce-tasto { width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%;
                  display: grid; place-items: center; background: var(--accento); color: var(--su-accento); cursor: pointer; }
.liv-voce-tasto:hover:not(:disabled) { color: var(--su-accento); opacity: .9; }
.liv-voce-tasto svg { width: 22px; height: 22px; fill: currentColor; }
.liv-voce-invito { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.liv-voce-frasi { margin: 0; font-size: 15px; line-height: 1.45; }
.liv-voce-frasi span { color: var(--tenue); border-radius: var(--raggio-minuto); transition: background-color .2s, color .2s; }
.liv-voce-frasi span.detta { color: var(--testo); }
.liv-voce-frasi span.adesso { color: var(--testo); background: color-mix(in srgb, var(--accento) 22%, transparent);
                              box-shadow: 0 0 0 2px color-mix(in srgb, var(--accento) 22%, transparent); }
.liv-azione { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 16px;
              border: 0; border-radius: var(--raggio); background: var(--accento); color: var(--su-accento); font-weight: 600;
              font-size: 16px; text-decoration: none; cursor: pointer; }
.liv-azione:hover:not(:disabled) { color: var(--su-accento); opacity: .92; }
.liv-azione.chiara, .liv-azione.chiara:hover:not(:disabled) { background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); }
.liv-giro { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.liv-conta { font-size: 14px; color: var(--tenue); font-variant-numeric: tabular-nums; }
/* ogni livello anche come elenco, per chi non vede e per chi preferisce */
.liv-elenco { border-top: 1px solid var(--bordo); padding-top: 8px; }
.liv-elenco summary { display: flex; align-items: center; min-height: 32px; font-size: 13.5px; color: var(--tenue); cursor: pointer; }
.liv-elenco ul { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.liv-elenco li button { width: 100%; min-height: 40px; margin: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--bordo);
                        border-radius: 0; background: none; color: var(--testo); text-align: left; font-size: 15px; font-weight: 400; cursor: pointer; }
.liv-elenco li button span { color: var(--tenue); font-size: 13.5px; }
.liv-avviso { position: absolute; left: 50%; bottom: 20px; z-index: 4; width: max-content; max-width: calc(100% - 32px);
              margin: 0; padding: 8px 14px; transform: translateX(-50%); border-radius: var(--raggio);
              background: var(--testo); color: var(--carta); font-size: 14px; }
/* lo zoom da un livello all'altro: parte da dove si è toccato */
.livelli .livello.entra { animation: liv-entra 1s cubic-bezier(.2, .7, .2, 1) both; }
.livelli .livello.torna { animation: liv-torna .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes liv-entra { from { transform: scale(.18); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes liv-torna { from { transform: scale(1.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes liv-sfuma { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .livelli .livello.entra, .livelli .livello.torna { animation: liv-sfuma .2s both; }
  .liv-voce-frasi span { transition: none; }
}
@media (max-width: 600px) {
  .livelli { height: calc(100dvh - 120px); margin: 0 -8px; border-radius: 0; border-left: 0; border-right: 0; }
}


/* ---- Il recupero o la mappa: sceglie chi studia (LAB, 4 ottobre 2026, con le
   tre regole di GRAFICA). La prima volta due tessere uguali in tutto, perche' e'
   una scelta e non un'offerta: stesso fondo e filo della tessera del recupero,
   stessa struttura, nessuna piu' piena. La domanda e' un'etichetta. Dopo, il
   passaggio all'altra e' un link tenue, ma col tocco di 44 px. ---- */
.scelta-ripasso { margin: 0 0 26px; }
.scelta-etichetta { margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                    font-weight: 600; color: var(--tenue); }
.scelta-sotto { margin: 0 0 12px; font-size: 14px; color: var(--tenue); }
.scelta-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; margin: 0; }
.scelta-tessera { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
                  gap: 4px 14px; align-items: start; text-align: left; font: inherit; cursor: pointer;
                  padding: 16px 18px; color: var(--testo); background: var(--accento-tenue);
                  border: 0; border-top: 3px solid var(--accento); border-radius: var(--raggio); }
.scelta-tessera:hover { background: color-mix(in srgb, var(--accento) 14%, var(--carta)); }
.scelta-tessera b { grid-column: 1; font-size: 18px; }
.scelta-tessera > span:not(.vai) { grid-column: 1; font-size: 14px; color: var(--tenue); }
.scelta-tessera .vai { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px;
                       font-weight: 600; color: var(--accento); }
.cambia-ripasso { margin: 0 0 22px; }
.tessera-recupero + .cambia-ripasso, .riparti.in-io + .cambia-ripasso { margin-top: -18px; }
.cambia-ripasso button { min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
                         font: inherit; font-size: 14px; color: var(--tenue);
                         text-decoration: underline; text-underline-offset: 3px; }
.cambia-ripasso button:hover { color: var(--testo); }
.altro-ripasso { margin: 0 0 14px; font-size: 14px; }
.altro-ripasso a { color: var(--tenue); text-underline-offset: 3px; }
@media (max-width: 700px) {
  .scelta-due { grid-template-columns: minmax(0, 1fr); }
}

/* I CONTATTI DELLE CAMPAGNE (contatti.php; il disegno di LAB, 4/10): la carta di Oggi, per
   telefonare. Il nome grande, il telefono da toccare a 44 px, un gesto solo; gli altri in un
   elenco compatto. */
.carte-contatti { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
                  gap: 12px; margin: 0 0 30px; }
.carte-contatti .dd-carta { margin: 0; display: flex; flex-direction: column; gap: 6px; }
/* la carta toccata si nasconde con `hidden` mentre resta «Annulla»: il display:flex qui sopra lo vinceva, e la carta,
   spinta a destra dalla riga dell'Annulla, sembrava la carta accanto col pulsante spento (Paolo, la notte del 9/10) */
.carte-contatti .dd-carta[hidden] { display: none; }
/* «Scarica l'elenco», sotto la ricerca (Paolo via GDT, 9/10 notte) */
.scarica-contatti { margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.scarica-contatti small { font-size: 13.5px; }
.carta-contatto .quando { margin: 0; font-size: 12.5px; }
.carta-contatto h3 { font-size: 22px; }
.carta-contatto .telefono { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center;
                            font-size: 17px; font-weight: 600; text-decoration: none; }
.carta-contatto .email { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.carta-contatto .email a { color: var(--tenue); }
.carta-contatto .riga { margin: 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical; overflow: hidden; }
.carta-contatto .gesti { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.carta-contatto .gesti form { margin: 0; }
.carta-contatto .dd-si, .carta-contatto .dd-no { min-height: 44px; }
.annulla-contatto { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 14px;
                    border: 1px dashed var(--bordo); border-radius: var(--raggio); padding: 14px 18px; }
.contatti-compatti { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo); }
.contatti-compatti li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0;
                        border-bottom: 1px solid var(--bordo); }
.contatti-compatti .chi { font-weight: 600; }
.contatti-compatti .calmo { flex: 1 1 14rem; font-size: 13.5px; }
.contatti-compatti .segni { display: flex; flex-wrap: wrap; gap: 6px; }
.foglio-contatto { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 16px; }
.foglio-contatto dt { color: var(--tenue); font-size: 13px; }
.foglio-contatto dd { margin: 0; overflow-wrap: anywhere; }
.si-no { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.si-no legend { font-size: 12.5px; color: var(--tenue); padding: 0; margin-bottom: 6px; }
.si-no .spunta { flex: 0 0 auto; }
/* le tre scelte del foglio, da toccare col pollice (GRAFICA, 4/10) */
.si-no label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-right: 14px; }
.sentito-foglio { margin: 0 0 18px; }
/* Al telefono, dove Gloria chiama, la prima carta si vede subito (LAB, 4/10): la spiegazione tiene
   la frase che dice cosa fare, i quattro numeri in una fila e piccoli, la ricerca sopra «Gli altri». */
@media (max-width: 700px) {
  .pagina-contatti { display: flex; flex-direction: column; }
  .pagina-contatti > .avviso, .pagina-contatti > .errore { order: -1; }
  .pagina-contatti .solo-largo { display: none; }
  .pagina-contatti > .numeri-testa { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 18px; }
  .pagina-contatti > .numeri-testa div { padding: 8px 8px; }
  .pagina-contatti > .numeri-testa strong { font-size: 20px; }
  .pagina-contatti > .numeri-testa span { font-size: 11px; line-height: 1.25; display: block; }
  .pagina-contatti > .contatti-da-chiamare { order: 1; }
  .pagina-contatti > .barra-cerca { order: 2; }
  .pagina-contatti > .contatti-altri { order: 3; }
}
/* LE MAIL GIA' SCRITTE (GRAFICA, 4/10, MAIL_DAL_PANNELLO_ASPETTO.md): l'anteprima e' la mail vera,
   nella sua cornice, che scorre da sola; il fondo resta bianco, la mail sceglie da se' il suo tema. */
.anteprima-mail { display: block; width: 100%; height: min(60vh, 560px); border: 1px solid var(--bordo);
                  border-radius: var(--raggio); background: #fff; }
.anteprima-oggetto { font-weight: 600; margin: 0 0 8px; }
@media (max-width: 700px) { .anteprima-mail { height: 52vh; } }
.foglio-mail .gesti-foglio { position: sticky; bottom: 0; background: var(--carta); padding: 12px 0 4px; margin-top: 12px;
                             border-top: 1px solid var(--bordo); }
.foglio-mail .gesti-foglio .avviso.prova { flex-basis: 100%; margin: 0 0 4px; }
/* la riga della prova in ocra, come l'avviso sul preambolo, non nel verde di «fatto» (GRAFICA, 4/10) */
.avviso.prova { background: color-mix(in srgb, var(--segno) 14%, transparent); border-left-color: var(--segno);
                color: color-mix(in srgb, var(--segno) 40%, var(--testo)); }
.mail-inviata { margin: 6px 0 0; font-size: 13.5px; }
.mail-inviata form { display: inline; }
.carta-contatto .mail-apri { align-self: flex-start; min-height: 44px; }
.non-chiamare-foglio { margin: 0 0 18px; }
.non-chiamare-foglio small { display: block; margin-top: 4px; }

/* ── L'AFFIANCAMENTO DA COMPORRE (LAB, 4/10 notte; public/corso-in-presenza.php, app/affiancamento.php) ──
   Le due strade affiancate, una sopra l'altra al telefono; la scelta a pastiglie con il riepilogo di
   lato, che resta fermo mentre si scorre; sotto i 700 px tutto in una colonna. Da guardare a GRAFICA. */
.due-strade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.due-strade .strada { display: flex; flex-direction: column; margin: 0; }
.due-strade .strada h2 { margin-top: 0; }
.due-strade .strada .azioni { margin-top: auto; }
.scelta-affiancamento { margin: 40px 0; scroll-margin-top: 80px; }
/* il riepilogo largo quanto le due strade, il modulo resta a 560 (Paolo, 6/10, punto 11) */
.scelta-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.scelta-corpo .scelta-modulo { max-width: 560px; }
.scelta-gruppo { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.scelta-gruppo legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.pastiglie { display: flex; flex-wrap: wrap; gap: 8px; }
.pastiglie label { position: relative; margin: 0; }
.pastiglie input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastiglie span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--bordo);
                  border-radius: var(--raggio); background: var(--carta); cursor: pointer; }
.pastiglie input:checked + span { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); font-weight: 600; }
.pastiglie input:focus-visible + span { outline: 2px solid var(--accento); outline-offset: 2px; }
.scelta-gruppo .comune { display: block; margin-top: 12px; }
.scelta-gruppo .comune[hidden] { display: none; }
.scelta-gruppo .comune input { display: block; width: 100%; max-width: 360px; margin-top: 6px; }
.scelta-gruppo .comune .errore-campo { display: block; margin-top: 6px; }
.scelta-gruppo .comune .errore-campo[hidden] { display: none; }
.riepilogo-affiancamento { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px 22px; }
.riepilogo-affiancamento .scelta-detta { margin-top: 0; font-size: 18px; }
.riepilogo-affiancamento .cassa-conto .totale dd { font-size: 22px; }
.riepilogo-affiancamento .viaggio dd { margin: 0; color: var(--tenue); font-size: 14.5px; white-space: normal; }
/* le condizioni come una nota in piccolo, 13 px nel colore tenue (Paolo, 6/10, punto 11: «troppo invasivo»; misura di
   GRAFICA, materiale/grafica/affiancamento_riepilogo/). Vale per studio e gruppo; il p a parte, se no vince .pubblica p */
.riepilogo-affiancamento .condizioni-in-breve { margin: 16px 0; padding: 12px 14px; background: var(--accento-tenue);
                                                 border: 0; font-size: 13px; color: var(--tenue); }
.riepilogo-affiancamento .condizioni-in-breve p { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--tenue); }
.riepilogo-affiancamento .condizioni-in-breve a { font-size: 13px; }
.riepilogo-affiancamento .condizioni-in-breve p:last-child { margin: 0; }
.riepilogo-affiancamento .azioni { margin-bottom: 0; }
/* ── L'AFFIANCAMENTO RIFATTO (Paolo, 6/10; il prototipo di LAB, lab/AFFIANCAMENTO_RIFATTO_PROTOTIPO_genera.py) ──
   L'ingresso con le due strade che sono collegamenti; lo studio con via, CAP e comune in fila, la strumentazione e le
   fasce di ogni persona; il gruppo col suo link da copiare. La scelta fatta come .chip.on del sito (GRAFICA, 5/10
   notte): fondo tenue, senza bordo, testo pieno. Da guardare a GRAFICA a 1512, 390 e 320. */
.pastiglie input:checked + span { background: var(--accento-tenue); border-color: transparent; box-shadow: none; color: var(--testo); }
.pastiglie label[hidden] { display: none; }
.scelta-gruppo[hidden], .scelta-gruppo [hidden], .persona-fasce[hidden] { display: none; }
.scelta-gruppo .nota-scelta { margin: 8px 0 10px; max-width: 640px; }
.strada-link { text-decoration: none; color: inherit; }
.strada-link .bottone { align-self: flex-start; margin-top: auto; }
.strada-link:hover h2, .strada-link:focus-visible h2 { color: var(--accento); }
.campi-luogo { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 12px; max-width: 640px; margin-top: 4px; }
.campi-luogo label, .persona-fasce label, .nota-strumenti { display: block; font-size: 14px; }
.campi-luogo input, .persona-fasce select, .nota-strumenti input { display: block; width: 100%; margin-top: 6px; }
.campi-luogo label, .persona-fasce label { margin: 0; }   /* il margine di label si sommava al gap (GRAFICA, 6/10) */
.campi-luogo .errore-campo:not([hidden]), .scelta-gruppo > .errore-campo:not([hidden]) { display: block; margin-top: 6px; }
.domanda-mectron { margin-top: 14px; }
.domanda-mectron p { margin: 0 0 8px; }
.nota-strumenti { margin-top: 14px; max-width: 640px; }
.persone-fasce { display: grid; gap: 12px; max-width: 640px; }
.persona-fasce { display: grid; grid-template-columns: 7em 1fr 1fr; gap: 12px; align-items: end; }
.persona-fasce .chi { font-weight: 600; padding-bottom: 10px; }
/* «… più IVA, compreso il viaggio» è lunga: va a capo, e il riepilogo non allarga la colonna */
.riepilogo-affiancamento { min-width: 0; }
.riepilogo-affiancamento .cassa-conto .totale { flex-wrap: wrap; }
.riepilogo-affiancamento .cassa-conto .totale dd { white-space: normal; text-align: right; min-width: 0; }
.richiesta-affiancamento { margin-top: 48px; scroll-margin-top: 80px; }
.torna-alla-scelta { margin-top: 32px; }
.gruppo-riquadro { max-width: 720px; }
.gruppo-stato { font-size: 18px; }
.righe-gruppo { padding-left: 1.2em; }
.link-gruppo { display: flex; gap: 8px; max-width: 640px; }
.link-gruppo input { flex: 1; min-width: 0; }
.sposta-data { margin-top: 16px; }
@media (max-width: 700px) {
  .due-strade { grid-template-columns: 1fr; }
  .campi-luogo { grid-template-columns: 1fr; gap: 14px; }
  .persona-fasce { grid-template-columns: 1fr 1fr; }
  .persona-fasce .chi { grid-column: 1 / -1; padding: 0; }
  .link-gruppo { flex-direction: column; }
}

/* Il numero delle domande in cima ai quiz (Gloria e Paolo, 5/10; parole di COPY, GRAFICA). Il carattere dei
   titoli, colore del testo e non dell'accento: l'accento resta al prezzo, così le due cose grandi non si confondono. */
.quante-domande { font-family: var(--cond); font-weight: 600; font-size: 26px; line-height: 1.05;
                  letter-spacing: -.005em; color: var(--testo); margin: 0; }
.vendita .carta .quante-domande { font-size: 26px; margin: -2px 0 0; }   /* GRAFICA: se no vince .pubblica p, a 19 px */
.apertura .quante-domande { font-size: 34px; margin: 14px 0 0; }
.apertura .quante-domande + .sottotitolo { margin-top: 6px; }
@media (max-width: 600px) {
  .apertura .quante-domande { font-size: 28px; margin-top: 10px; }
  .vendita .carta .quante-domande { font-size: 22px; }
}


/* «Non è nei tuoi corsi» (Paolo, 5/10; parole di COPY; GRAFICA): un contenuto che lo studente non ha resta
   visibile col lucchetto; al mouse, o al primo tocco, la riga dice in che corso sta e porta lì. */
.non-tuo { position: relative; }
.non-tuo .segno-non-tuo { display: inline-flex; vertical-align: -2px; margin-left: 5px; color: var(--tenue); }
.non-tuo .segno-non-tuo svg { width: 15px; height: 15px; }
.chip.non-tuo .segno-non-tuo { margin-left: 0; vertical-align: 0; }
.non-tuo-riga { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: none;
                width: max-content; max-width: min(380px, calc(100vw - 32px)); padding: 9px 12px;
                background: var(--carta); color: var(--testo); border: 1px solid var(--bordo);
                border-radius: var(--raggio); box-shadow: var(--ombra), 0 10px 24px rgba(0,0,0,.12);
                font-size: 14px; font-weight: 400; line-height: 1.35; white-space: normal; text-align: left; }
.non-tuo-riga b { font-weight: 600; }
.non-tuo-riga a { color: var(--accento); font-weight: 600; text-decoration: none; white-space: nowrap; }
.non-tuo-riga a:hover { text-decoration: underline; }
.non-tuo:hover > .non-tuo-riga, .non-tuo:focus-within > .non-tuo-riga, .non-tuo.aperta > .non-tuo-riga { display: block; }
/* Al tocco la riga non vola: si apre sotto, dentro la pagina, e non esce mai dallo schermo */
@media (hover: none) {
  .non-tuo:hover > .non-tuo-riga { display: none; }
  .non-tuo.aperta > .non-tuo-riga { display: block; position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none;
                                     background: var(--accento-tenue); border-color: transparent; }
}
/* (CODICE) la riga si legge uguale dentro i chip e le righe dei blocchi, che hanno uno stile loro per ogni
   span e ogni collegamento (.chips-esercizi span, .blocchi a): qui vince quello della riga */
.non-tuo > .non-tuo-riga { font-size: 14px; color: var(--testo); }
.non-tuo > .non-tuo-riga a { display: inline; padding: 0; margin: 0; border-radius: 0; background: none; color: var(--accento); }
.non-tuo > .non-tuo-riga b { display: inline; font-size: inherit; }
/* (CODICE) la voce dopo l'errore, per chi non ha il corso: la riga si vede sempre, e va a capo (COPY, 5/10) */
.voce-da a.voce-non-tuo { display: inline; white-space: normal; margin: 0; min-height: 0; }
.voce-non-tuo .segno-non-tuo { display: inline-flex; vertical-align: -2px; margin-left: 5px; color: var(--tenue); }
.voce-non-tuo .segno-non-tuo svg { width: 15px; height: 15px; }
.voce-non-tuo .vai { color: var(--accento); font-weight: 600; white-space: nowrap; }
/* (CODICE) nel quaderno, le righe di un contenuto che non apre piu': si leggono come le altre, ma non portano alla lezione */
.segnate li .riga-ferma { flex: 1 1 auto; color: var(--testo); }
/* (CODICE) il foglio di un argomento di un corso che non ha: un gesto solo, «Vai al corso ›», largo */
.gesti.gesti-1 { grid-template-columns: 1fr; }
.gesti.gesti-0 { display: none; }
.foglio-frase .segno-non-tuo, .arg-stato .segno-non-tuo, .pastiglia .segno-non-tuo { display: inline-flex; vertical-align: -2px; margin-left: 5px; color: var(--tenue); }
.foglio-frase .segno-non-tuo svg, .arg-stato .segno-non-tuo svg, .pastiglia .segno-non-tuo svg { width: 15px; height: 15px; }
.pastiglia.qui .segno-non-tuo { color: inherit; }
/* (CODICE, GRAFICA) l'ultima parola del titolo e il lucchetto non si separano */
.non-tuo-ultima { white-space: nowrap; }

/* Chi ha già un pezzo del pacchetto (difetto 131): l'avviso e i moduli che
   mancano stanno in un riquadro tenue subito sotto il prezzo, perché è il
   prezzo che cambia senso per lui; il pulsante pieno del pacchetto resta in
   fondo, staccato dai moduli da «Come si acquista». Nome e prezzo sulla
   stessa riga anche al telefono: se il nome è lungo va a capo lui, il prezzo
   resta in alto a destra (GRAFICA, 6 ottobre 2026). */
.acquisto .gia-dentro { display: grid; gap: 8px; padding: 16px; border-radius: var(--raggio);
                        background: var(--accento-tenue); }
.acquisto .gia-dentro > p.calmo { color: var(--testo); font-size: 16px; line-height: 1.45; }
.acquisto .gia-dentro .righe-prezzo { margin: 0; }
.acquisto .gia-dentro .righe-prezzo li { grid-template-columns: 1fr auto; gap: 8px 12px; min-height: 0;
                                         padding: 14px 0; }
.acquisto .gia-dentro .righe-prezzo li:first-child { padding-top: 6px; }
.acquisto .gia-dentro .righe-prezzo li:last-child { border-bottom: 0; padding-bottom: 0; }
.acquisto .gia-dentro .righe-prezzo .prezzo-riga { justify-self: end; }
.acquisto .gia-dentro .righe-prezzo form { grid-column: 1 / -1; }

/* LO SCONTO DEL LANCIO, 20% per 24 ore (Paolo e Gloria, 9/10; GRAFICA). Le parole sono di COPY, la riga sul prezzo
   più basso dei 30 giorni di LEGAL. Vale per ogni sconto a tempo del negozio, non solo per questo. */

/* La fascia, subito sotto la barra, in home e nelle pagine dei corsi: il fondo tenue, una riga al computer e due o
   tre al telefono. Non è attaccata in cima (sticky): si legge e poi scorre via, il conto alla rovescia va per
   minuti, senza secondi che corrono. */
.fascia-sconto { background: var(--accento-tenue); color: var(--testo); border-bottom: 1px solid var(--bordo); }
.fascia-sconto p { max-width: 1140px; margin: 0 auto; padding: 10px 16px;
                   display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 14px;
                   font-size: 15px; line-height: 1.4; text-align: center; }
.fascia-sconto strong { font-family: var(--cond); font-size: 20px; font-weight: 600; color: var(--accento); }
.fascia-sconto .manca { color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Il prezzo pieno barrato, prima di quello scontato: piccolo e nel colore tenue, in proporzione al prezzo che
   accompagna (em), così va bene nella scheda, nel catalogo, nel carrello e nella cassa. */
.prezzo-pieno { font-size: .58em; font-weight: 400; color: var(--tenue); white-space: nowrap;
                text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: .35em;
                vertical-align: .14em; font-variant-numeric: tabular-nums; }
/* La riga di LEGAL sul prezzo più basso dei 30 giorni, sotto il prezzo: la misura del «più IVA». */
.nota-sconto, .pubblica .nota-sconto { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--tenue); }
.vendita .prezzo .nota-sconto { display: block; font-family: var(--din); font-weight: 400; }

/* Le parole di COPY (9/10): sotto la fascia una nota piccola con «Condizioni ›», la percentuale vera accanto al
   prezzo («−19%», piccola come «(IVA inclusa)») e, per chi legge lo schermo, la frase intera nascosta alla vista. */
.fascia-sconto .nota { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: var(--tenue); }
.fascia-sconto .nota a { color: var(--accento); white-space: nowrap; }
.sconto-percento { font-size: .5em; font-weight: 600; color: var(--accento); white-space: nowrap;
                   vertical-align: .18em; margin-left: .3em; }
/* Al telefono la nota corta di COPY (aspetta il sì di LEGAL): due frasi dentro .nota, la lunga e la corta, e sotto i
   600 px si vede la corta. «Condizioni ›» resta in tutte e due. */
.fascia-sconto .nota .corta { display: none; }
@media (max-width: 599px) {
  .fascia-sconto .nota .lunga { display: none; }
  .fascia-sconto .nota .corta { display: inline; }
}
/* 163, GRAFICA 9/10: nel catalogo al telefono la colonna del prezzo è di circa 130 px, e barrato, prezzo e
   percentuale in fila uscivano dalla carta a 320: il barrato va su una riga sua, sopra. Nelle righe di carrello, cassa
   e «Acquistabili anche singolarmente» il barrato a .58em veniva di circa 10 px: a 13. */
@media (max-width: 599px) {
  /* 164: inline, con l'a capo dopo, cosi' «Listino» e il barrato stanno sulla stessa riga, sopra il prezzo */
  .vendita .carta:has(> .copertina-tessera) > .prezzo .prezzo-pieno { display: inline; font-size: 15px; vertical-align: baseline; }
  .vendita .carta:has(> .copertina-tessera) > .prezzo .prezzo-pieno::after { content: "\A"; white-space: pre; }
}
.importo .prezzo-pieno, .prezzo-riga .prezzo-pieno { font-size: 13px; vertical-align: baseline; }
/* «Listino» accanto al barrato, quando si barra il listino (LEGAL e COPY, 9/10): visibile, perché il barrato da solo si
   leggerebbe come «prezzo di prima». Piccolo e tenue come il barrato; GRAFICA lo rivede. */
.prezzo-listino { font-size: .58em; font-weight: 400; color: var(--tenue); white-space: nowrap; vertical-align: .14em; margin-right: .25em; }
.importo .prezzo-listino, .prezzo-riga .prezzo-listino { font-size: 13px; vertical-align: baseline; }
@media (max-width: 599px) {
  .vendita .carta:has(> .copertina-tessera) > .prezzo .prezzo-listino { font-size: 15px; vertical-align: baseline; }
}

/* Il numero del contenuto per lo studente, «13», nella colonna del codice: piu' stretta, perche' sono due cifre
   (GRAFICA, 9/10; numeroBreve(), app/albero.php). La mappa e l'elenco degli argomenti fanno lo stesso. */
.cod-riga.num { display: inline-block; min-width: 2em; }   /* tutte le serie (GRAFICA, 9/10) */

/* Il numero in una colonna sua, e sotto il titolo la riga piccola («caso clinico · Gloria lo commenta · 17:16») che parte
   allineata al titolo, non sotto il numero: lezioni, casi, strumenti, esercizi, Protocollo (Paolo, 9/10). */
.moduli .dentro-modulo.con-numero { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 10px;
                                    align-items: baseline; }
.dentro-modulo.con-numero > .cod-riga { grid-column: 1; grid-row: 1; margin-right: 0; color: var(--accento); font-weight: 600;
                                        font-variant-numeric: tabular-nums; }
.dentro-modulo.con-numero > :not(.cod-riga) { grid-column: 2; }
/* il numero a 15 px: a 13 accanto a un titolo di 16,5-17,5 si perdeva (GRAFICA, 9/10) */
.con-numero > .cod-riga.num { font-size: 15px; }

/* L'INGRESSO DELL'AFFIANCAMENTO, tre strade (Paolo, 9/10; GRAFICA). Copertina e capoverso di Gloria affiancati
   sulla griglia delle schede dei corsi (copertina larga 740, colonna 348): il capoverso sta dove le schede hanno il
   riquadro d'acquisto, e il primo schermo non ha più il vuoto a destra. Sotto, le tre carte in fila su tutta la
   larghezza; sotto i 900 px una sotto l'altra, e la copertina sopra il capoverso. */
.ingresso-testa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 0 40px; }
.ingresso-testa > .copertina-larga { margin: 0; }
.ingresso-testa > p { margin: 0; }
@media (min-width: 1100px) {
  .ingresso-testa { grid-template-columns: minmax(0, 1fr) 348px; column-gap: clamp(32px, 4vw, 52px); align-items: center; }
  .ingresso-testa > .copertina-larga { max-width: none; }
  .ingresso-testa > p { font-size: 18px; line-height: 1.6; }
}
.affiancamento-ingresso { max-width: none; }
.tre-strade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 24px 0; }
.tre-strade .strada { display: flex; flex-direction: column; margin: 0; }
.tre-strade .strada h2 { margin-top: 0; }
.tre-strade .strada .bottone { align-self: flex-start; margin-top: auto; }
@media (min-width: 900px) { .tre-strade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* per te una persona sola: le due fasce senza la colonna «Persona 1» (CODICE, 9/10, da GRAFICA) */
.persona-fasce.una { grid-template-columns: 1fr 1fr; }
/* a 320 le due tendine da 136 px tagliavano «meno di un anno»: sotto i 400 px una sotto l'altra (GRAFICA, 165), anche per
   ogni persona dello studio e del gruppo (GRAFICA, 170) */
@media (max-width: 399px) { .persona-fasce, .persona-fasce.una { grid-template-columns: minmax(0, 1fr); } }
/* l'errore delle fasce nella cassa del gruppo: su una riga sua, staccato dalla nota (GRAFICA, 167) */
.persone-fasce + .errore-campo { display: block; margin: 8px 0 12px; }
.persone-fasce + .errore-campo[hidden] { display: none; }

/* LE ICONE SOCIAL (GRAFICA, 9/10, richiesta di Paolo via GDT). Link normali, niente widget di Meta:
   non caricano niente prima del consenso. Ordine: Instagram, Facebook, LinkedIn (TikTok col posto, spenta). */

/* nel piede, di tutte le pagine: una riga sopra i collegamenti legali */
.pie .social { display: flex; justify-content: center; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.pie .social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
                 border-radius: var(--raggio); color: var(--testo); text-decoration: none; }
.pie .social a:hover { background: color-mix(in srgb, var(--accento) 12%, transparent); color: var(--accento); }
.pie .social a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.social svg, .social-elenco svg { display: block; width: 22px; height: 22px; flex: none; }
@media (max-width: 600px) {
  .pie .social { justify-content: flex-start; margin-left: -11px; }   /* il disegno in riga col testo, il bersaglio resta 44 */
}

/* in «Vi parlo di me»: un riquadro nella colonna di lato, dopo Visione e Missione */
.social-elenco { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.social-elenco a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--testo); text-decoration: none; }
.social-elenco a svg { color: var(--accento); }
.social-elenco .nome { font-weight: 600; }
.social-elenco .chi { color: var(--tenue); font-size: 14px; overflow-wrap: anywhere; }
.social-elenco a:hover .nome { text-decoration: underline; text-underline-offset: 3px; }
.social-elenco a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: var(--raggio); }

/* IL PROTOCOLLO PRIMA DELL'AFFIANCAMENTO (GRAFICA, 9/10). Nel riepilogo di te, gruppo e studio, e nella pagina del
   gruppo dal link. Sopra c'è già il riquadro tinto delle condizioni: questo si stacca con una linea, non con un
   altro riquadro. Il capoverso, poi il pulsante, poi la riga calma vicina al pulsante e più piccola (prima era a
   0 px in per te e nello studio, a 28 nel gruppo, e a 19 px come il testo). */
.protocollo-prima { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--bordo); }
.protocollo-prima > p:first-child { margin: 0 0 14px; }
.protocollo-prima .azioni { margin: 0; }
.protocollo-prima .calmo { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
/* la riga per gli studi sulla scheda del Protocollo parla di un'altra strada: si stacca con una linea (GRAFICA, 9/10 sera,
   materiale/grafica/protocollo_due_acquisti/per_lo_studio.css) */
.acquisto .per-lo-studio { padding-top: 16px; border-top: 1px solid var(--bordo); }