/* ============================================================
   TOEFL iBT PRACTICE — foglio di stile unico
   ------------------------------------------------------------
   Direzione (riscritta in fase 2): la dashboard e' una CABINA DI
   PILOTAGGIO SCURA, le schermate di prova restano bianche.

   Non e' una scelta di gusto, e' un segnale di stato:

       fondo scuro   ->  stai pilotando la preparazione
       fondo chiaro  ->  sei dentro una prova

   La barra di navigazione era gia' quasi nera (--nav): la fase 2
   promuove quel linguaggio da colore della barra a colore del
   sistema, invece di inventare una direzione nuova di sana pianta.

   Il meccanismo e' STRUTTURALE, non una convenzione da ricordare:
   i token stanno scuri qui su :root, e le schermate d'esame
   ri-dichiarano gli stessi nomi in chiaro su se stesse (blocco
   subito sotto). Chi aggiunge un componente dentro #rd o #ad lo
   ottiene chiaro senza doverlo sapere; chi lo aggiunge in home lo
   ottiene scuro. Un colore scritto a mano due volte e' un bug.

   Due famiglie di colore, due significati distinti:
     - l'ARANCIONE e' l'accento d'azione: bottoni, cose cliccabili;
     - i GRAFICI usano una rampa fredda separata, perche' servono
       piu' tinte e perche' il colore di un dato non deve sembrare
       cliccabile.

   Tre voci tipografiche, tutte native Windows -> nessuna CDN:
     - Bahnschrift (DIN: geometrica, stretta) per titoli e numeri.
       E' la voce da strumento, ed e' quella che da' alla home il
       carattere di cruscotto invece che di rivista;
     - Segoe UI per il corpo del prodotto;
     - Consolas per timer e cifre tecniche.
   Georgia corsivo NON e' piu' la voce della dashboard: resta dove
   e' editoriale davvero — brani, testate delle prove, vocabolario.

   Nota deliberata, invariata dalla fase 1: le schermate di prova
   restano piu' nude delle altre. Il TOEFL vero e' software
   istituzionale; l'area di scrittura non deve essere piacevole,
   deve essere silenziosa.
   ============================================================ */

:root{
  /* ---------- superfici: tre gradini appena percettibili ---------- */
  --bg:          #0E1014;
  --bg-warm:     #141821;
  --surface:     #15181E;
  --surface-2:   #1A1E26;
  --line:        #262B35;
  --line-2:      #343A47;

  /* ---------- inchiostri ---------- */
  --ink:         #ECEEF3;
  --ink-2:       #A3AAB9;
  /* #6E7686 stava a 3.9:1 sulla superficie e 3.2:1 sui chip: sotto
     la soglia 4.5:1 per il testo piccolo, ed e' proprio il colore
     delle note sotto i grafici — cioe' del testo che dice quello
     che il grafico NON mostra. Quella riga e' la parte onesta del
     disegno: non puo' essere la meno leggibile della pagina.
     #8A92A2 sta a 5.7 / 5.3 / 4.7 e la scala resta ordinata
     (15.3 -> 7.6 -> 5.7). */
  --ink-3:       #8A92A2;

  /* ---------- accento d'azione: uno solo, usato poco ---------- */
  --accent:      #F26A21;
  --accent-dk:   #FF7F3D;
  --accent-soft: rgba(242,106,33,.14);

  /* L'inchiostro che sta SOPRA l'arancione. Era #fff scritto a mano
     in nove punti, e misurava 3.06:1 sul bottone — sotto la soglia
     4.5:1 del testo piccolo. Sull'hover era anche peggio: 2.51:1,
     il numero piu' basso di tutta l'interfaccia, perche' --accent-dk
     schiarisce e il bianco ci si perde dentro.

     La via d'uscita non e' scurire l'arancione: e' l'unico accento
     che ha l'app, e scurirlo lo spegnerebbe su fondo scuro. E'
     ribaltare l'inchiostro. Misurato:

                          #fff      #0E1014
       --accent           3.06      6.22
       --accent-dk scuro  2.51      7.58
       --accent-dk chiaro 4.11      4.63

     Col nero l'hover GUADAGNA contrasto invece di perderlo: la
     direzione dello stato e quella della leggibilita' finalmente
     vanno d'accordo. Non si ri-dichiara nel tema chiaro perche'
     --accent non si ri-dichiara: stesso arancione, stesso nero. */
  --accent-on:   #0E1014;

  /* L'inchiostro sopra i riempimenti SEMANTICI (verde/rosso/ambra).
     Questo invece si ribalta col tema, e deve: nel tema scuro quei
     tre sono colori CHIARI (servono a leggersi su #0E1014), quindi
     il bianco sopra misura 2.34 / 3.07 / 2.27 — la pastiglia "l4"
     del vocabolario era il punto peggiore. Nelle schermate chiare
     sono scuri e il bianco e' giusto: 5.29 / 5.53 / 5.38.
     Un token solo, che segue il tema come lo seguono loro. */
  --on-fill:     #0E1014;

  /* ---------- semantici, ritarati per fondo scuro ----------
     Le versioni chiare erano pensate su avorio: su #0E1014 il
     verde #2C8C5E sparisce e il rosso #CF4A38 diventa fango. */
  --green:       #3FBF80;
  --green-soft:  rgba(63,191,128,.14);
  --red:         #F0685A;
  --red-soft:    rgba(240,104,90,.14);
  --amber:       #E0A03C;
  --amber-soft:  rgba(224,160,60,.13);

  /* ---------- lastre scure "storiche" ----------
     Restano identiche: dentro le prove il contesto del Listening e
     dello Speaking non deve cambiare di una virgola. */
  --nav:         #191719;
  --nav-2:       #2C292C;
  --nav-line:    #3A363A;
  --nav-ink:     #EDEAE6;
  --nav-ink-2:   #9C9799;

  /* ---------- token di superficie, un valore solo per tema ---------- */
  --chip:          #232833;
  --surface-hover: #1F242E;
  --line-hover:    #3E4553;
  --line-soft:     rgba(255,255,255,.07);
  --accent-ink:    #FF8B4C;
  --green-line:    rgba(63,191,128,.42);
  --red-line:      rgba(240,104,90,.42);
  --emphasis-bg:   var(--ink);
  --emphasis-ink:  #0E1014;

  /* ---------- RAMPA DATI: fredda, separata dall'accento ----------
     Reading e Listening sono le uniche due sezioni che il
     simulatore misura da solo, quindi servono esattamente due
     tinte che non si confondano fra loro ne' con l'arancione dei
     bottoni.

     Questi due valori NON sono stati scelti a occhio: passano i
     cinque controlli del validatore (banda di luminosita' per
     fondo scuro L 0.48-0.67, croma minima, separazione per
     daltonismo deutan/tritan, soglia a vista normale, contrasto
     sulla superficie). Deutan dE 12.3, vista normale dE 17.1.
     Cambiarli a mano vuol dire rifare quella verifica.

     La costanza usa invece una sola tinta a quattro intensita':
     misura una quantita', non delle categorie, e una scala
     multicolore la trasformerebbe in categorie che non esistono. */
  --data-r:    #35A2C8;
  --data-l:    #7A6AE6;

  /* Le stesse due tinte, ma per il TESTO.
     I marker e le linee sono oggetti grafici: gli basta 3:1. Il
     numero stampato sull'ultimo punto e' testo a 11 px, e li' la
     soglia e' 4.5:1 — che #7A6AE6 non raggiunge (4.26). Invece di
     ritoccare la coppia validata (cambiarla vuol dire rifare i
     cinque controlli daltonismo/contrasto) si alza SOLO la
     versione da testo, restando nella stessa famiglia di tinta:
     la serie resta riconoscibile, il numero diventa leggibile.
     Per il Reading il valore coincide col marker, perche' #35A2C8
     e' gia' a 6.1:1 — il token esiste lo stesso, cosi' chi domani
     tocca --data-r sa che c'e' una seconda soglia da ricontrollare. */
  --data-r-ink: #35A2C8;
  --data-l-ink: #8E80EC;

  --data-grid: #222834;
  --data-0:    #171B23;
  --data-1:    rgba(53,162,200,.22);
  --data-2:    rgba(53,162,200,.46);
  --data-3:    rgba(53,162,200,.72);
  --data-4:    #35A2C8;

  --r:      18px;
  --r-md:   13px;
  --r-sm:   9px;
  --pill:   999px;

  /* Su fondo scuro un'ombra nera non si vede: la profondita' la da'
     un filo di luce sul bordo alto, piu' un'ombra ampia e cupa. */
  --shadow:    inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,0,0,.9);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -30px rgba(0,0,0,.95);

  --display: Georgia, Constantia, "Times New Roman", serif;
  --ui:      "Segoe UI Variable Text", "Segoe UI", Tahoma, sans-serif;
  --head:    Bahnschrift, "DIN Next LT Pro", "Segoe UI Variable Display", "Segoe UI Semibold", sans-serif;
  --read:    Constantia, Cambria, Georgia, serif;
  --write:   "Segoe UI", Corbel, sans-serif;
  --mono:    Consolas, "Cascadia Mono", "Courier New", monospace;
}

/* ============================================================
   LE SCHERMATE DI PROVA TORNANO CHIARE
   ------------------------------------------------------------
   Stessi nomi, valori chiari, ri-dichiarati sul contenitore della
   prova: tutto quello che sta dentro eredita il tema chiaro senza
   una singola regola in piu'. Sono esattamente le schermate che il
   piano vieta di toccare — #rd, #lQ, #lPlay, #lCtx, #sp, #ad,
   #int, #wf — e nient'altro.

   #asm (mini valutazione), #vb (vocabolario) e #review NON sono
   qui: non sono esami. Seguono la home, che e' il posto giusto
   per loro — il riepilogo lo leggi da pilota, non da esaminando.
   ============================================================ */
#lCtx, #lPlay, #lQ, #rd, #sp, #ad, #int, #wf{
  --bg:            #F6F4F1;
  --bg-warm:       #FBEADC;
  --surface:       #FFFFFF;
  --surface-2:     #FAF9F7;
  --line:          #EBE7E2;
  --line-2:        #DDD8D1;
  --ink:           #17161A;
  --ink-2:         #56545E;
  --ink-3:         #6C6976;
  --accent-dk:     #D5540F;
  --accent-soft:   #FDEFE5;
  --green:         #237A50;
  --green-soft:    #E9F5EE;
  --red:           #B93E30;
  --red-soft:      #FCEEEB;
  --amber:         #965E10;
  --amber-soft:    #FDF4E3;
  --chip:          #EFECE8;
  --surface-hover: #FFFDFB;
  --line-hover:    #D3CCC3;
  --line-soft:     rgba(0,0,0,.08);
  --accent-ink:    #B8480C;
  /* qui i semantici sono scuri, quindi sopra ci va il bianco:
     5.29 sul verde, 5.53 sul rosso, 5.38 sull'ambra. --accent-on
     NON compare in questa lista, ed e' voluto: l'arancione e'
     identico nei due temi, quindi il suo inchiostro pure. */
  --on-fill:       #FFFFFF;
  --green-line:    #BFE0CD;
  --red-line:      #E6C4BE;
  --emphasis-bg:   var(--ink);
  --emphasis-ink:  #fff;
  --shadow:        0 1px 2px rgba(23,22,26,.04), 0 10px 30px -16px rgba(23,22,26,.18);
  --shadow-lg:     0 2px 4px rgba(23,22,26,.04), 0 24px 56px -24px rgba(23,22,26,.26);

  /* Questa riga NON e' ridondante, ed e' l'unica cosa che tiene in
     piedi tutto il meccanismo.

     Ri-dichiarare i token qui cambia solo cio' che li LEGGE qui
     dentro. Il colore del testo, pero', nessuno lo rilegge: e'
     `body{ color:var(--ink) }`, risolto sul body — cioe' fuori, col
     valore SCURO — e da li' ereditato come colore concreto. Senza
     questa riga il brano del Reading finisce grigio chiaro su bianco
     e il testo praticamente sparisce. E' successo davvero, in fase
     2, e non l'ha trovato nessuna asserzione: l'ha trovato uno
     screenshot. Le asserzioni sui colori, adesso, ci sono.

     Vale per ogni proprieta' EREDITATA impostata sul body con un
     token: se un giorno il body prendesse anche una `font-family`
     legata al tema, andrebbe ripetuta qui accanto. */
  color: var(--ink);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }
body{
  font-family:var(--ui);
  font-size:15px;
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* L'alone e' l'unico gesto decorativo della pagina: resta dietro
   tutto e non si muove. Nella cabina scura non e' piu' un sole
   pesca ma una luce fredda radente da sinistra, appena percettibile
   — serve a togliere al fondo la piattezza del nero pieno, non a
   farsi notare. Il soffio caldo in basso a destra e' l'unica
   presenza dell'arancione fuori dai bottoni, tenuto sotto il 4%. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 640px at -8% -16%, rgba(79,195,232,.10) 0%, rgba(79,195,232,.03) 34%, rgba(79,195,232,0) 68%),
    radial-gradient(900px 520px at 108% 104%, rgba(242,106,33,.06) 0%, rgba(242,106,33,0) 62%),
    radial-gradient(700px 420px at 104% -12%, rgba(145,130,245,.07) 0%, rgba(145,130,245,0) 60%);
}

/* ============================================================
   NAVIGAZIONE — barra scura flottante
   ------------------------------------------------------------
   In home non c'e': il suo lavoro lo fa la barra laterale, e
   tenerle entrambe vorrebbe dire mostrare due volte lo stesso
   marchio e la stessa sezione. Resta dove serve davvero — nelle
   prove e nelle schermate senza barra laterale — perche' ospita
   il timer e l'unica uscita.
   ============================================================ */
.topbar{
  position:relative; z-index:20; flex:0 0 auto;
  height:62px; margin:14px 16px 0;
  background:var(--nav);
  border:1px solid var(--nav-line);
  border-radius:var(--r);
  display:flex; align-items:center; gap:10px;
  padding:0 10px 0 20px;
  color:var(--nav-ink);
  box-shadow:var(--shadow);
}
body.at-home .topbar{ display:none; }
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--head); font-size:16.5px; font-weight:600;
  letter-spacing:-.01em; color:#fff;
  padding-right:18px; margin-right:6px;
}
/* Il segno: un sole a raggi, disegnato in CSS, colore accento.
   Non e' piu' legato alla topbar: lo usa anche la barra laterale. */
.brand .glyph{
  width:26px; height:26px; flex:0 0 26px; position:relative;
}
.brand .glyph::before,
.brand .glyph::after{
  content:""; position:absolute; inset:0; border-radius:50%;
}
.brand .glyph::before{
  background:
    conic-gradient(from 0deg, var(--accent) 0 8%, transparent 8% 12.5%,
      var(--accent) 12.5% 20.5%, transparent 20.5% 25%,
      var(--accent) 25% 33%, transparent 33% 37.5%,
      var(--accent) 37.5% 45.5%, transparent 45.5% 50%,
      var(--accent) 50% 58%, transparent 58% 62.5%,
      var(--accent) 62.5% 70.5%, transparent 70.5% 75%,
      var(--accent) 75% 83%, transparent 83% 87.5%,
      var(--accent) 87.5% 95.5%, transparent 95.5% 100%);
  -webkit-mask:radial-gradient(circle, transparent 34%, #000 35%);
          mask:radial-gradient(circle, transparent 34%, #000 35%);
}
.topbar .brand .glyph::after{
  inset:7px; background:var(--accent);
}

.topbar .section{
  font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--nav-ink);
  background:var(--nav-2);
  padding:9px 17px; border-radius:var(--pill);
}
.topbar .spacer{ flex:1; }

/* ---------- timer: strumento, non decorazione ---------- */
.timer{
  font-family:var(--mono);
  font-size:19px; font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  padding:6px 16px; border-radius:var(--r-md);
  background:#0F0E0F; border:1px solid var(--nav-line);
  color:#E8E4DF; min-width:104px; text-align:center;
}
.timer .lbl{
  display:block; font-family:var(--ui); font-size:8.5px; font-weight:600;
  letter-spacing:.2em; color:var(--nav-ink-2); margin-bottom:-1px;
}
.timer.warn{ color:#F5B54A; border-color:#6B4E14; background:#231A08; }
.timer.crit{
  color:#FF7A63; border-color:#7A2A1D; background:#2B0E09;
  animation:alarm .9s steps(2,end) infinite;
}
@keyframes alarm{ 50%{ background:#4C1610; } }
.timer.hidden-val > .val{ visibility:hidden; }

/* ============================================================
   BOTTONI
   ============================================================ */
.btn{
  font-family:var(--ui); font-size:14px; font-weight:600;
  letter-spacing:-.005em;
  padding:10px 20px; border-radius:var(--r-md);
  border:1px solid var(--line-2);
  background:var(--surface); color:var(--ink);
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease,
             transform .1s ease, box-shadow .16s ease;
}
.btn:hover:not(:disabled){ background:var(--surface-hover); border-color:var(--line-hover); }
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:disabled{ opacity:.42; cursor:not-allowed; }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.btn.primary{
  background:var(--accent); border-color:var(--accent);
  color:var(--accent-on);
  box-shadow:0 1px 2px rgba(210,84,15,.22), 0 8px 18px -10px rgba(210,84,15,.55);
}
.btn.primary:hover:not(:disabled){ background:var(--accent-dk); border-color:var(--accent-dk); }

.btn.ghost{
  background:var(--nav-2); border-color:transparent; color:var(--nav-ink);
}
.btn.ghost:hover:not(:disabled){ background:#3A363A; }

.btn.sm{ font-size:12.5px; padding:7px 13px; border-radius:var(--r-sm); }
.btn.danger{ border-color:var(--red-line); color:var(--red); background:var(--surface); }
.btn.danger:hover:not(:disabled){ background:var(--red-soft); }

/* ============================================================
   GUSCIO — barra laterale + colonna principale
   ------------------------------------------------------------
   La dashboard e' diventata troppo alta per stare in una pagina
   sola: scorrerla dall'obiettivo fino alla cronologia voleva dire
   passare in mezzo a tutto il resto ogni volta. La barra laterale
   divide la home in quattro pagine e rende raggiungibile ognuna
   in un colpo.

   La barra c'e' SOLO in home. Durante una prova sparisce — non
   per estetica: un menu cliccabile a fianco di un esame in corso
   e' un modo per perdere il set a meta'. Le uscite restano una
   sola, il bottone Exit, che sa cosa chiedere prima di uscire.
   ============================================================ */
.shell{ position:relative; z-index:1; display:flex; height:100%; min-height:0; }
.main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; }

.side{
  display:none;
  flex:0 0 236px; width:236px;
  flex-direction:column;
  background:var(--surface);
  border-right:1px solid var(--line);
  padding:18px 14px 14px;
  overflow-y:auto;
}
body.at-home .side{ display:flex; }

.side .brand{
  display:flex; align-items:center; gap:11px;
  padding:4px 8px 20px;
  font-family:var(--head); font-size:16px; font-weight:600;
  letter-spacing:.01em; color:var(--ink);
}
.side .brand .glyph{ width:26px; height:26px; flex:0 0 26px; position:relative; }
.side .brand i{
  display:block; font-style:normal; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  margin-top:1px;
}

.side .grp{
  font-size:9.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); padding:16px 10px 8px;
}
.side .grp:first-of-type{ padding-top:4px; }

.navitem{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; margin-bottom:2px;
  border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--ink-2);
  font-family:var(--ui); font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  text-align:left; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.navitem .ico{
  flex:0 0 17px; font-size:14px; line-height:1; color:var(--ink-3);
  transition:color .15s ease;
}
.navitem:hover{ background:var(--surface-hover); color:var(--ink); }
.navitem:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.navitem.on{
  background:var(--surface-2); color:var(--ink);
  box-shadow:inset 2px 0 0 var(--accent);
}
.navitem.on .ico{ color:var(--accent); }
.navitem .badge{
  margin-left:auto; font-size:10.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3); background:var(--chip);
  border-radius:var(--pill); padding:2px 8px;
}
.navitem.on .badge{ color:var(--accent-ink); background:var(--accent-soft); }

.side .foot{ margin-top:auto; padding-top:16px; }

/* ---------- riquadro d'impostazione ----------
   Nato in fondo alla barra per la modalita' difficile. Dalla voce 10
   la modalita' difficile e' migrata nella pagina Impostazioni — e'
   configurazione dell'attrezzo, non un compito da fare — e in fondo
   alla barra e' rimasto il profilo attivo. Stessa forma, quindi un
   blocco solo invece di due copie che divergono. */
.hardbox,.whobox{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:12px 13px; background:var(--surface-2);
}
.hardbox .row,.whobox .row{ display:flex; align-items:center; gap:10px; }
.hardbox b,.whobox b{
  flex:1; font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hardbox p,.whobox p{ font-size:11px; line-height:1.55; color:var(--ink-3); margin-top:8px; }
.hardbox.on{ border-color:rgba(242,106,33,.42); }
.hardbox.on b{ color:var(--accent-ink); }

.sw{
  flex:0 0 38px; width:38px; height:22px; padding:0;
  border:1px solid var(--line-2); border-radius:var(--pill);
  background:var(--chip); cursor:pointer; position:relative;
  transition:background .18s ease, border-color .18s ease;
}
.sw::after{
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--ink-3);
  transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease;
}
.sw:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.sw[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
/* Il pomello resta BIANCO, ed e' l'unica eccezione voluta alla
   regola di --accent-on. Non e' testo: e' un oggetto grafico, e la
   soglia che lo riguarda e' 3:1 (WCAG 1.4.11), non 4.5 — il bianco
   sull'arancione sta a 3.06 e passa. Scurirlo l'ho provato: da
   pomello sollevato diventa un buco nell'interruttore, e si perde
   il senso stesso della levetta. Numero a posto, gesto rotto. */
.sw[aria-checked="true"]::after{ transform:translateX(16px); background:#fff; }

/* ============================================================
   STRUTTURA SCHERMATE
   ------------------------------------------------------------
   Altezze in flex, non in calc(): la topbar cambia forma fra la
   cabina e l'esame, e ogni calc(100% - 76px) sarebbe una costante
   da tenere allineata a mano al primo ritocco di padding.
   ============================================================ */
.screen{ display:none; position:relative; z-index:1; min-height:0; }
.screen.on{ display:flex; flex-direction:column; flex:1; }

/* Le schermate di prova vivono dentro una "lastra" bianca
   arrotondata, che sul fondo scuro della cabina risalta come un
   foglio illuminato: e' esattamente il segnale che deve dare. */
#lCtx.on, #lPlay.on, #lQ.on, #rd.on, #sp.on, #ad.on, #int.on, #wf.on{
  margin:14px 16px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.directions{
  padding:16px 26px; background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:13.5px; line-height:1.62; color:var(--ink-2);
}
.directions b{ color:var(--ink); font-weight:600; }

.split{ flex:1; display:flex; min-height:0; }
.pane{ flex:1; min-width:0; display:flex; flex-direction:column; }
.pane.left{ border-right:1px solid var(--line); background:var(--surface-2); }
.pane-head{
  padding:12px 24px; background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:12px;
}
.pane-head .spacer{ flex:1; }
.pane-body{ flex:1; overflow-y:auto; padding:26px 30px; }

/* ============================================================
   DISCUSSIONE / LETTURA
   ============================================================ */
.course-tag{
  display:inline-block; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent-soft);
  border-radius:var(--pill); padding:5px 13px; margin-bottom:20px;
}
.post{ display:flex; gap:14px; margin-bottom:26px; }
.avatar{
  width:42px; height:42px; flex:0 0 42px; border-radius:var(--pill);
  background:#E7E3DE; color:var(--ink-2);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700;
}
.post.prof .avatar{ background:var(--nav); color:#fff; }
.post-body{ flex:1; min-width:0; }
.post-name{ font-size:14px; font-weight:700; margin-bottom:1px; }
.post-role{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.post-text{ font-family:var(--read); font-size:15.5px; line-height:1.68; color:var(--ink); }
.post-text .q{ font-weight:bold; display:block; margin-top:12px; }

.passage h2{
  font-family:var(--display); font-style:italic; font-size:25px;
  letter-spacing:-.01em; margin-bottom:18px; color:var(--ink);
}
.passage p{ font-family:var(--read); font-size:15.5px; line-height:1.78; margin-bottom:15px; }

/* ============================================================
   AREA DI SCRITTURA — deliberatamente nuda
   ============================================================ */
.pane.right{ background:var(--surface); }
.wtoolbar{
  display:flex; align-items:center; gap:6px;
  padding:9px 16px; border-bottom:1px solid var(--line); background:var(--surface);
}
.wtoolbar:last-child{ border-bottom:0; border-top:1px solid var(--line); }
.wtoolbar .spacer{ flex:1; }
.wcount{
  font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.wcount b{ color:var(--ink); font-size:15px; font-weight:700; }
.wcount.ok b{ color:var(--green); }
.wcount.over b{ color:var(--amber); }

.editor{ flex:1; position:relative; display:flex; }
.editor textarea{
  flex:1; width:100%; border:0; resize:none; outline:0;
  font-family:var(--write); font-size:16.5px; line-height:1.75;
  padding:26px 30px; color:var(--ink); background:transparent;
}
.editor textarea::placeholder{ color:#BDB9B4; }
.editor textarea:focus{ box-shadow:inset 3px 0 0 var(--accent); }
.editor textarea:disabled{ background:var(--surface-2); color:var(--ink-3); }

.lockmask{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(25,23,25,.93); color:#fff; text-align:center; padding:30px;
  backdrop-filter:blur(3px);
}
.lockmask.on{ display:flex; animation:fade .22s ease both; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.lockmask .box{ max-width:400px; }
.lockmask h3{
  font-family:var(--head); font-size:27px; font-weight:700;
  letter-spacing:.02em; margin-bottom:12px; color:#FF8B74;
}
.lockmask p{ font-size:14px; line-height:1.65; color:#C6C1BC; margin-bottom:22px; }

.notice{
  padding:9px 16px; background:var(--amber-soft); border-top:1px solid #F0E2C4;
  font-size:11.5px; color:var(--amber);
}

/* ============================================================
   HOME — la dashboard
   ============================================================ */
#home{ overflow-y:auto; display:none; }
#home.on{ display:block; }
.home-wrap{ max-width:1240px; margin:0 auto; padding:30px 30px 72px; }

/* ---------- le quattro pagine ----------
   Restano tutte nel DOM: nasconderle con display:none costa niente
   e tiene validi gli id che il motore aggiorna anche a pagina
   chiusa (la cronologia si ridisegna tornando in home, non quando
   la si guarda). */
.page{ display:none; }
.page.on{ display:block; animation:pagein .26s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pagein{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }

.home-head{ margin-bottom:30px; }
.home-head .eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.home-head h1{
  font-family:var(--head); font-size:42px; font-weight:600;
  letter-spacing:-.005em; line-height:1.06; margin-bottom:14px;
}
/* Georgia corsivo e' uscito dalla dashboard: qui la seconda voce
   e' lo stesso carattere in tono minore, non un'altra famiglia. */
.home-head h1 em{
  font-style:normal; font-weight:300; color:var(--ink-2);
}
.home-head p{ color:var(--ink-2); font-size:14.5px; line-height:1.68; max-width:720px; }

/* nota d'apertura, la pastiglia arancione della dashboard */
.flag{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--pill); padding:8px 16px 8px 10px;
  font-size:13px; color:var(--ink-2); margin-bottom:16px;
  box-shadow:var(--shadow);
}
.flag .b{
  width:19px; height:19px; border-radius:50%; flex:0 0 19px;
  background:var(--accent); color:var(--accent-on);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
}
.flag b{ color:var(--ink); font-weight:600; }

/* Avviso di sola larghezza: nasce spento e lo accende il blocco
   telefono in fondo al file. Sta nell'HTML sempre — un avviso
   costruito da JS e' un avviso che non compare se JS inciampa. */
.phone-note{
  display:none;
  font-size:13px; line-height:1.6; color:var(--ink-2);
  background:var(--chip); border:1px solid var(--line);
  border-radius:var(--r-md); padding:12px 14px; margin-bottom:18px;
}
.phone-note b{ color:var(--ink); font-weight:600; }

/* ---------- fascia dei numeri ---------- */
.tiles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:16px; margin-bottom:34px;
}
.tile{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px 18px;
  box-shadow:var(--shadow);
}
.tile .k{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:14px;
}
.tile .k .ico{
  width:30px; height:30px; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.tile .v{
  font-family:var(--head); font-size:36px; font-weight:700;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1;
  margin-bottom:8px;
}
.tile .s{ font-size:12.5px; color:var(--ink-3); }
.tile .s b{ color:var(--ink-2); font-weight:600; }

/* ---------- sezioni ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 26px 28px;
  margin-bottom:20px; box-shadow:var(--shadow);
}
.panel > h3{
  font-family:var(--head); font-size:19px; font-weight:700;
  letter-spacing:-.02em; margin-bottom:6px;
}
.panel > .sub{ font-size:13.5px; color:var(--ink-2); margin-bottom:20px; line-height:1.66; max-width:780px; }
.panel > .sub b{ color:var(--ink); font-weight:600; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:16px; }
.card{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md);
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow); }
.card-in{ padding:20px 20px 16px; flex:1; }
.card h3{
  font-family:var(--head); font-size:17px; font-weight:700;
  letter-spacing:-.018em; margin-bottom:7px;
}
.card .meta{
  display:inline-block; font-size:10.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2); background:var(--chip);
  border-radius:var(--pill); padding:4px 11px; margin-bottom:13px;
}
.card.alt .meta{ color:var(--accent-ink); background:var(--accent-soft); }
.card.alt2 .meta{ color:var(--green); background:var(--green-soft); }
.card p{ font-size:13.5px; line-height:1.66; color:var(--ink-2); }
.card p b, .card p i{ color:var(--ink); }
.card .warnnote{
  font-size:12px; line-height:1.6; color:var(--amber);
  background:var(--amber-soft); border-radius:var(--r-sm);
  padding:9px 12px; margin-top:13px;
}
.card-foot{ padding:0 20px 20px; }
.card-foot select{
  width:100%; font-family:var(--ui); font-size:13.5px;
  padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface);
  margin-bottom:10px; color:var(--ink); cursor:pointer;
}
.card-foot .btn{ width:100%; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;
}
.field input, .field textarea, .field select{
  width:100%; font-family:var(--write); font-size:14px; line-height:1.58;
  padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink); outline:0; resize:vertical;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field select{ font-family:var(--ui); cursor:pointer; }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}

.hist{ width:100%; border-collapse:collapse; font-size:13.5px; }
.hist th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
  padding:0 12px 10px 0; border-bottom:1px solid var(--line);
}
.hist td{ padding:11px 12px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.hist tr:last-child td{ border-bottom:0; }
.hist td.n{ font-variant-numeric:tabular-nums; color:var(--ink-2); }
.empty{ color:var(--ink-3); font-size:13.5px; }

.voicebar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--ink-3); display:inline-block; }
.dot.ok{ background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.dot.bad{ background:var(--red); box-shadow:0 0 0 3px var(--red-soft); }

/* ============================================================
   LISTENING — contesto
   ============================================================ */
/* Centrato verticalmente MA scrollabile. Con `justify-content:center`
   un contenuto piu' alto del contenitore sborda da entrambi i lati e
   non si raggiunge: niente barra, niente scorrimento, la parte fuori
   e' irraggiungibile. I due pseudo-elementi elastici centrano senza
   quel difetto.

   Questa regola stava su `#sp .ctx`, applicata al solo Speaking dove il
   difetto era stato visto. Ma il difetto e' di `.ctx`: sul telefono si
   e' ripresentato sul CANCELLO, dove il bottone «Entra» finiva sotto il
   bordo e non si poteva entrare — cioe' l'app era inutilizzabile, non
   scomoda. Una correzione legata al posto dov'e' stato visto il sintomo
   invece che alla causa aspetta solo di essere riscoperta altrove. */
.ctx{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; overflow-y:auto;
  background:var(--nav); color:var(--nav-ink);
  padding:44px; text-align:center;
}
.ctx::before{ content:""; margin-top:auto; }
.ctx::after { content:""; margin-bottom:auto; }
.ctx .badge{
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  border-radius:var(--pill); padding:7px 16px; margin-bottom:26px;
  background:var(--nav-2); color:var(--nav-ink-2);
}
.ctx .badge.p2{ background:rgba(242,106,33,.16); color:#FFA06B; }
.ctx h2{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:29px; letter-spacing:-.01em; line-height:1.3;
  margin-bottom:14px; max-width:680px; color:#fff;
}
.ctx .sub{ font-size:14px; color:var(--nav-ink-2); line-height:1.7; max-width:540px; margin-bottom:34px; }
.ctx .rules{
  text-align:left; font-size:13px; line-height:2; color:#B4AFB1;
  background:rgba(255,255,255,.04); border-radius:var(--r-md);
  padding:18px 22px; margin-bottom:34px;
}
.ctx .rules b{ color:#fff; font-weight:600; }

/* ============================================================
   PROVA COMPLETA — briefing e pausa
   Stessa lastra scura del contesto del Listening: e' il linguaggio
   dei momenti "preparati", e questo lo e' piu' di tutti.
   ============================================================ */
.ex-rules{
  text-align:left; font-size:13.5px; line-height:1.9; color:#B4AFB1;
  background:rgba(255,255,255,.04); border-radius:var(--r-md);
  padding:18px 22px; margin-bottom:22px;
}
.ex-rules b{ color:#fff; font-weight:600; }
.ex-plan{
  width:100%; border-collapse:collapse; text-align:left;
  font-size:13px; color:var(--nav-ink-2); margin-bottom:22px;
}
.ex-plan td{ padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.ex-plan td i{ display:block; font-style:normal; font-size:11.5px; color:#8C8489; margin-top:2px; }
.ex-plan td.n{ text-align:right; font-family:var(--mono); font-size:12.5px; color:#fff; white-space:nowrap; }
.ex-plan tr.tot td{ border-bottom:none; color:#fff; font-weight:600; padding-top:13px; }
.ex-missing{
  text-align:left; font-size:12.5px; line-height:1.8; color:#C9A88F;
  background:rgba(242,106,33,.10); border-left:2px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:14px 18px;
}
.ex-missing b{ color:#FFA06B; font-weight:600; }

/* ============================================================
   LISTENING — ascolto
   ============================================================ */
.listen{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; background:var(--nav); color:var(--nav-ink); padding:44px;
  text-align:center;
}
.listen h2{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:26px; line-height:1.35; margin-bottom:10px; max-width:660px; color:#fff;
}
.listen .sub{ font-size:13.5px; color:var(--nav-ink-2); margin-bottom:40px; }
/* `flex:0 0 auto` non e' decorazione. .ctx e' un flex in colonna, e
   un flex item con `height` si lascia comprimere quando il contenuto
   sotto cresce: con i task integrati, che aggiungono brano, consegna
   e griglia, il cerchio diventava un'ellisse. Trovato con uno
   screenshot, come gli altri due bug visivi di questo progetto. */
.speaker{
  flex:0 0 auto;
  width:112px; height:112px; border-radius:50%;
  border:1px solid var(--nav-line); background:#111011;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; margin-bottom:32px;
}
.speaker.live{
  border-color:var(--accent);
  animation:pulse 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,106,33,.28); }
  50%    { box-shadow:0 0 0 18px rgba(242,106,33,0); }
}
.progress{
  width:420px; max-width:100%; height:5px; border-radius:var(--pill);
  background:#2A272A; overflow:hidden;
}
.progress i{
  display:block; height:100%; width:0; border-radius:var(--pill);
  background:var(--accent); transition:width .35s linear;
}
.listen .note{ margin-top:24px; font-size:12.5px; color:var(--nav-ink-2); }

.notes-strip{ border-top:1px solid var(--line); background:#FFFDF8; }
.notes-strip .hd{
  padding:9px 20px; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:#B08A3C; border-bottom:1px solid #F2E7CE;
}
.notes-strip textarea{
  width:100%; height:110px; border:0; outline:0; resize:none;
  font-family:var(--write); font-size:14px; line-height:1.62;
  padding:13px 20px; background:transparent; color:var(--ink);
}

/* ============================================================
   LISTENING — domande
   ============================================================ */
.qbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 24px; border-bottom:1px solid var(--line); background:var(--surface);
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.qbar .spacer{ flex:1; }
.qbar .n{
  font-size:11px; letter-spacing:.13em; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:var(--pill); padding:5px 12px;
}
.qbar .noback{
  font-weight:400; letter-spacing:0; text-transform:none;
  font-size:12.5px; color:var(--ink-3);
}

.qwrap{ flex:1; overflow-y:auto; background:var(--surface-2); }
.qinner{ max-width:800px; margin:0 auto; padding:38px 28px 44px; }
.qtext{
  font-family:var(--read); font-size:20px; line-height:1.58;
  letter-spacing:-.005em; margin-bottom:10px; white-space:pre-line;
}
.qhint{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:20px;
}

.opts{ display:flex; flex-direction:column; gap:9px; }
.opt{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md);
  font-family:var(--read); font-size:15.5px; line-height:1.58;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.opt:hover{ border-color:var(--line-hover); background:var(--surface-hover); }
.opt:active{ transform:translateY(1px); }
.opt .mark{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--line-2); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--on-fill); transition:background .15s ease, border-color .15s ease;
}
.opt.round .mark{ border-radius:50%; }
.opt.sel{ border-color:var(--accent); background:var(--accent-soft); }
/* Il segno di spunta cade su tre riempimenti diversi: arancione quando
   e' solo selezionata, verde/rosso quando la risposta e' stata corretta.
   L'arancione non cambia col tema e i semantici si', quindi servono i
   due token distinti — qui --accent-on, sul .mark di base --on-fill. */
.opt.sel .mark{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); }
.opt.sel .mark::after{ content:"\2713"; font-size:12px; font-weight:700; }
.opt.sel.round .mark::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent-on); }
.opt.locked{ cursor:default; }
.opt.locked:hover{ border-color:var(--line); background:var(--surface); }
.opt.right{ border-color:var(--green); background:var(--green-soft); }
.opt.right:hover{ border-color:var(--green); background:var(--green-soft); }
.opt.right .mark{ background:var(--green); border-color:var(--green); }
/* Specificita' alzata di proposito: deve battere .opt.sel.round, altrimenti
   una singola sbagliata resterebbe un pallino invece della croce. */
.opt.right.round .mark::after,
.opt.right .mark::after{
  content:"\2713"; font-size:12px; font-weight:700;
  width:auto; height:auto; border-radius:0; background:none;
}
.opt.wrong{ border-color:var(--red); background:var(--red-soft); }
.opt.wrong:hover{ border-color:var(--red); background:var(--red-soft); }
.opt.wrong .mark{ background:var(--red); border-color:var(--red); }
.opt.wrong.round .mark::after,
.opt.wrong .mark::after{
  content:"\2715"; font-size:11px; font-weight:700;
  width:auto; height:auto; border-radius:0; background:none;
}

/* ---------- riscontro immediato (solo in allenamento) ---------- */
.fb{
  margin-top:20px; padding:17px 20px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; line-height:1.72; color:var(--ink-2);
  animation:rise .24s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.fb.right{ border-left:4px solid var(--green); }
.fb.wrong{ border-left:4px solid var(--red); }
.fb .verdict{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:7px;
}
.fb.right .verdict{ color:var(--green); }
.fb.wrong .verdict{ color:var(--red); }
.fb b{ color:var(--ink); font-weight:700; }

/* ---------- barra azioni ---------- */
.actbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 24px; border-top:1px solid var(--line); background:var(--surface);
}
.actbar .spacer{ flex:1; }
.actbar .msg{ font-size:12.5px; color:var(--ink-3); }

/* ============================================================
   WORD FORMS
   ============================================================ */
.wf-wrap{ flex:1; display:flex; align-items:center; justify-content:center; padding:40px 28px; background:var(--surface-2); }
.wf-card{
  width:100%; max-width:700px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 32px 26px; box-shadow:var(--shadow);
}
.wf-pos{
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3);
}
.tag{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--pill); padding:4px 11px;
  background:var(--chip); color:var(--ink-2);
}
.tag.verbo{ background:var(--accent-soft); color:var(--accent-ink); }
.tag.prep { background:#E8F0FA; color:#2C5D93; }
.tag.forma{ background:var(--green-soft); color:var(--green); }
.tag.art  { background:var(--amber-soft); color:var(--amber); }

.wf-sentence{
  font-family:var(--read); font-size:21px; line-height:1.9; margin-bottom:20px;
}
.wf-sentence input{
  font-family:var(--write); font-size:19px; font-weight:600;
  padding:5px 12px; min-width:170px;
  border:0; border-bottom:2px solid var(--accent); border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--accent-soft); color:var(--ink); outline:0;
}
.wf-sentence input:disabled{ background:var(--chip); border-bottom-color:var(--line-2); color:var(--ink-2); }
.wf-hints{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:20px; }
.hint-chip{
  font-size:12.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--pill); padding:6px 13px;
}
.hint-chip b{ color:var(--ink); font-weight:700; }

.wf-fb{ display:none; padding:15px 18px; border-radius:var(--r-md); margin-bottom:20px; }
.wf-fb.on{ display:block; animation:rise .24s cubic-bezier(.2,.8,.3,1) both; }
.wf-fb.right{ background:var(--green-soft); }
.wf-fb.wrong{ background:var(--red-soft); }
.wf-fb .verdict{ font-size:14.5px; font-weight:700; margin-bottom:6px; }
.wf-fb.right .verdict{ color:var(--green); }
.wf-fb.wrong .verdict{ color:var(--red); }
/* Niente opacity. Era .7 e portava il rosso a 2.97:1 sul suo fondo:
   sotto soglia, e proprio sulla forma che Jack ha scritto sbagliata —
   cioe' l'unica cosa in quella riga che deve rileggere davvero. A
   pieno sta a 4.89:1. La barratura basta gia' a dire "questa no": la
   trasparenza non aggiungeva senso, toglieva solo leggibilita'. */
.wf-fb .verdict s{ text-decoration-thickness:2px; }
.wf-fb .verdict b{ color:var(--green); }
.wf-fb .rule{ font-size:13px; line-height:1.68; color:var(--ink-2); }
.wf-actions{ display:flex; gap:10px; }

/* ============================================================
   RIEPILOGO
   ============================================================ */
#review{ overflow-y:auto; display:none; }
#review.on{ display:block; }
.rev-wrap{ max-width:940px; margin:0 auto; padding:34px 24px 72px; }
.rev-head{ margin-bottom:26px; }
.rev-head h1{
  font-family:var(--head); font-size:36px; font-weight:700;
  letter-spacing:-.028em; margin-bottom:7px;
}
.rev-head .sub{ color:var(--ink-2); font-size:14px; }

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px; margin-bottom:26px;
}
.stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--shadow);
}
.stat .k{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:9px;
}
.stat .v{
  font-family:var(--head); font-size:31px; font-weight:700;
  letter-spacing:-.032em; font-variant-numeric:tabular-nums; line-height:1;
}
.stat .v.good{ color:var(--green); }
.stat .v.bad{ color:var(--red); }

.rev-text{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:26px 30px; font-family:var(--write); font-size:16px; line-height:1.8;
  white-space:pre-wrap; word-wrap:break-word; margin-bottom:22px;
}
.rev-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.miss{
  margin-bottom:12px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--red);
}
.miss .s{ font-family:var(--read); font-size:15.5px; margin-bottom:7px; }
.miss .s b{ color:var(--green); }
.miss .d{ font-size:13px; line-height:1.68; color:var(--ink-2); }
.miss .d s{ color:var(--red); }

.qreview{
  margin-bottom:12px; padding:18px 20px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--red);
}
.qreview .q{ font-family:var(--read); font-size:15.5px; line-height:1.6; margin-bottom:11px; white-space:pre-line; }
.qreview .a{ font-size:13.5px; line-height:1.72; color:var(--ink-2); }
.qreview .a s{ color:var(--red); }
.qreview .a b{ color:var(--green); }
.qreview .why{ margin-top:9px; font-size:13px; line-height:1.72; color:var(--ink-2); }
.qreview .tagq{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--pill); padding:3px 10px; margin-bottom:10px;
}

.setline{
  display:flex; align-items:baseline; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.setline .t{ flex:1; }
.setline .p{ font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; }
.setline .s{ font-variant-numeric:tabular-nums; }
.setline .s.bad{ color:var(--red); }

.estimate{
  font-size:13px; line-height:1.7; color:var(--amber);
  background:var(--amber-soft); border-radius:var(--r-md);
  padding:14px 18px; margin-top:4px;
}
.estimate b{ font-weight:700; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(90px);
  background:var(--nav); color:#fff; padding:14px 26px;
  border-radius:var(--pill); font-size:14px;
  box-shadow:var(--shadow-lg); z-index:100;
  transition:transform .26s cubic-bezier(.2,.8,.3,1);
}
.toast.on{ transform:translateX(-50%) translateY(0); }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:var(--pill); border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--line-hover); background-clip:content-box; }

/* ============================================================
   RESPONSIVE — sotto i 900px le due colonne si impilano
   ============================================================ */
@media (max-width:900px){
  .split{ flex-direction:column; }
  .pane.left{ border-right:0; border-bottom:1px solid var(--line); max-height:38%; }
  .grid2{ grid-template-columns:1fr; }
  .home-head h1{ font-size:31px; }
  .topbar .section{ display:none; }
}

/* ============================================================
   TELEFONO — sotto i 600px
   ------------------------------------------------------------
   Misurato, non immaginato: a 390px la dashboard aveva 105
   elementi fuori dallo schermo. Due cause, e nessuna delle due
   era il testo troppo grande.

   1. `.side` e' larga 236px fisse. Su 390 ne restano 154 al
      contenuto, cioe' la barra di navigazione si prendeva il 60%
      dello schermo di chi voleva studiare.
   2. Le fasce usano `repeat(auto-fit, minmax(228px,1fr))`.
      `auto-fit` toglie colonne, ma `minmax` mette un PAVIMENTO:
      sotto i 228px non scende comunque. Con 154px disponibili la
      colonna restava 228 e sfondava. Su schermi larghi quel
      pavimento e' giusto — e' cosa impedisce a un riquadro di
      numeri di diventare una fessura — quindi si toglie qui e non
      alla regola generale.

   Le sezioni d'esame NON vengono adattate, e non e' pigrizia: il
   TOEFL si fa al computer, e un Writing allenato sulla tastiera
   del telefono allena un'altra cosa. La home lo dice con
   `.phone-note`, che esiste solo a questa larghezza.
   ============================================================ */
@media (max-width:600px){

  /* --- la barra laterale diventa una striscia in alto --- */
  .shell{ flex-direction:column; }
  body.at-home .side{
    flex:0 0 auto; width:auto;
    flex-direction:row; align-items:center; gap:6px;
    overflow-x:auto; overflow-y:hidden;
    border-right:0; border-bottom:1px solid var(--line);
    padding:9px 10px;
  }
  .side .brand, .side .grp{ display:none; }
  /* `width:100%` e' giusto in colonna e assurdo in riga: rendeva ogni
     voce larga quanto lo schermo, cioe' sei schermate da scorrere per
     arrivare a Impostazioni. Anche i due segnali che indicavano "in
     alto a sinistra" si girano: la barretta dell'attivo passa da sinistra
     a sotto, e il contatore della cronologia smette di essere spinto a
     fondo riga da `margin-left:auto`. */
  .side .navitem{
    flex:0 0 auto; width:auto; white-space:nowrap;
    margin:0; gap:8px; padding:8px 11px;
  }
  .side .navitem .badge{ margin-left:6px; }
  .side .navitem.on{ box-shadow:inset 0 -2px 0 var(--accent); }
  /* Chi sei resta visibile: su un attrezzo condiviso sapere sotto
     quale nome stai scrivendo conta anche su schermo piccolo. Sparisce
     la riga di spiegazione, non il nome. */
  .side .foot{ margin:0; flex:0 0 auto; }
  .side .foot .whobox{ border:0; background:transparent; padding:0 2px; }
  .side .whobox p{ display:none; }
  .side .whobox b{ max-width:96px; }

  /* --- via il pavimento delle fasce: una colonna sola --- */
  .dash-top, .tiles, .cards, .stats, .qa-grid, .grid2, .dash-split{
    grid-template-columns:1fr;
  }

  /* --- i minimi che non lasciavano stringere --- */
  .step-form{ flex-direction:column; align-items:stretch; }
  .step-form .field{ min-width:0; width:100%; }
  .setup-done .t{ min-width:0; }

  /* --- respiro: 30px di margine per lato su 390 sono il 15% --- */
  .home-wrap{ padding:20px 14px 56px; }
  .rev-wrap, .vb-wrap{ padding:24px 14px 56px; }
  .qinner{ padding:26px 14px 32px; }
  .home-head h1{ font-size:26px; }
  .dash-fig{ padding:16px 16px 14px; }
  .dash-fig .v{ font-size:36px; }
  .ctx{ padding:32px 18px; }

  /* --- l'avviso onesto, visibile solo qui --- */
  .phone-note{ display:block; }
}

/* ============================================================
   READING
   ============================================================ */
.qbar .kind{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); background:var(--chip);
  border-radius:var(--pill); padding:4px 11px;
}
.qbar .kind.drill{ color:var(--amber); background:var(--amber-soft); }

/* numerazione dei paragrafi e paragrafo puntato dalla domanda */
.passage .para{
  font-family:var(--read); font-size:15.5px; line-height:1.8;
  margin-bottom:16px; padding:6px 12px 6px 10px;
  border-left:3px solid transparent; border-radius:0 var(--r-sm) var(--r-sm) 0;
  transition:background .2s ease, border-color .2s ease;
}
.passage .para.focus{ background:var(--accent-soft); border-left-color:var(--accent); }
.passage .pn{
  display:inline-block; min-width:20px; margin-right:8px;
  font-family:var(--ui); font-size:11px; font-weight:700;
  color:var(--ink-3); vertical-align:2px;
}
.passage mark{
  background:#FFE9A8; color:var(--ink); padding:1px 3px; border-radius:3px;
  box-shadow:0 0 0 1px #EBD48A;
}

/* quadratini di inserimento */
.passage .slot{
  display:inline-block; color:var(--accent); cursor:pointer;
  padding:0 3px; border-radius:3px; font-size:13px;
  transition:background .15s ease, transform .1s ease;
}
.passage .slot:hover{ background:var(--accent-soft); transform:scale(1.25); }
.passage .slot.on{ background:var(--accent); color:var(--accent-on); }

.insertbox{
  font-family:var(--read); font-size:15.5px; line-height:1.6;
  background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--r-md);
  padding:15px 18px; margin-bottom:14px;
}
.insertbox b{ color:var(--ink); }
.insertstate{ font-size:13px; color:var(--ink-2); }

.sumintro{
  font-family:var(--read); font-size:15.5px; line-height:1.6; font-style:italic;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 18px; margin-bottom:14px; color:var(--ink-2);
}

.blankline{
  font-family:var(--read); font-size:19px; line-height:2.1;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px;
}
.blankline input{
  font-family:var(--write); font-size:18px; font-weight:600;
  padding:5px 12px; min-width:150px;
  border:0; border-bottom:2px solid var(--accent); border-radius:var(--r-sm) var(--r-sm) 0 0;
  background:var(--accent-soft); color:var(--ink); outline:0;
}

/* mappa delle domande: qui si torna indietro, quindi serve vederle tutte */
.qmap{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:11px 24px; border-top:1px solid var(--line); background:var(--surface-2);
}
.qmap .qn{
  width:31px; height:31px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface);
  font-family:var(--ui); font-size:12.5px; font-weight:700; color:var(--ink-3);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.qmap .qn:hover{ border-color:var(--ink-3); }
.qmap .qn.done{ background:#E7E3DE; color:var(--ink); border-color:#D6D0C8; }
.qmap .qn.drill{ border-style:dashed; }
.qmap .qn.here{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); }

/* ============================================================
   SPEAKING
   ============================================================ */
/* Le tre righe che stavano qui (`#sp .ctx` scrollabile) sono salite
   su `.ctx`: valevano per tutte le schermate di contesto, non solo per
   lo Speaking. Vedi il commento accanto a `.ctx`. */
.speaker.rec{
  border-color:var(--red); background:#2A0F0C;
  animation:recpulse 1.15s ease-in-out infinite;
}
@keyframes recpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(207,74,56,.42); }
  50%    { box-shadow:0 0 0 20px rgba(207,74,56,0); }
}

.spinstr{
  font-size:13.5px; line-height:1.7; color:var(--nav-ink-2);
  background:rgba(255,255,255,.05); border-radius:var(--r-md);
  padding:14px 18px; margin-bottom:14px; text-align:left;
}
.spinstr b{ color:#fff; font-weight:600; }

.reveal{
  font-family:var(--read); font-size:16px; line-height:1.6;
  background:rgba(242,106,33,.12); border:1px solid rgba(242,106,33,.35);
  border-radius:var(--r-md); padding:15px 18px;
  margin-bottom:18px; max-width:660px; color:#FFD9C2;
}
.reveal b{ color:#fff; }

.orig{
  font-family:var(--read); font-size:16px; line-height:1.6; text-align:left;
  background:rgba(255,255,255,.05); border-radius:var(--r-md);
  padding:15px 18px; margin-bottom:14px; color:#DCD7D3;
}
.orig b{ font-family:var(--ui); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nav-ink-2); }

/* ============================================================
   TASK INTEGRATI 2/3/4 — parte 3 dello Speaking
   ------------------------------------------------------------
   Vive dentro la cabina scura (.ctx), non nel tema chiaro delle
   prove scritte: qui si parla, non si scrive, e la cabina e' il
   posto giusto. Percio' i colori sono espliciti sul fondo --nav,
   non ereditati dal blocco chiaro.
   ============================================================ */

/* etichettina condivisa da .spprompt e .points */
#sp .plab{
  font-family:var(--ui); font-size:10.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--nav-ink-2); margin-bottom:8px;
}

/* Il brano da leggere in 45-50 secondi. Serif e riga larga: e'
   l'unico testo di questa schermata che va letto per capire, non
   scorso — e ha un cronometro addosso. */
.spread{
  width:100%; max-width:660px; text-align:left;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-md); padding:20px 24px; margin-bottom:16px;
}
/* #FFA06B a mano, NON var(--accent-dk): `#sp` sta nell'elenco delle
   schermate chiare, quindi li' dentro --accent-dk vale #D5540F — che
   sul fondo della cabina fa 3.6:1. E' la trappola gia' documentata:
   ri-dichiarare i token su un contenitore non cambia il fondo che
   .ctx si dipinge da sola. #FFA06B e' l'arancione che la cabina usa
   gia' su .ctx .badge.p2, e sta a 7.4:1. */
.spread .rhead{
  font-family:var(--ui); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:#FFA06B; margin-bottom:12px;
}
.spread .rtext{
  font-family:var(--read); font-size:16.5px; line-height:1.72; color:var(--nav-ink);
}

/* La consegna. Resta a schermo per preparazione E registrazione,
   perche' e' l'unica cosa che l'esame lascia sotto gli occhi. */
.spprompt{
  width:100%; max-width:660px; text-align:left;
  font-family:var(--read); font-size:16px; line-height:1.62; color:#FFE3D0;
  background:rgba(242,106,33,.12); border:1px solid rgba(242,106,33,.34);
  border-radius:var(--r-md); padding:16px 20px; margin-bottom:16px;
}

/* Ripiego senza voce: il copione. Non e' la stessa cosa e viene
   detto a parole sopra — questo blocco lo fa solo leggibile. */
.script{
  width:100%; max-width:660px; text-align:left;
  max-height:260px; overflow-y:auto;
  background:rgba(255,255,255,.05); border-radius:var(--r-md);
  padding:14px 18px; margin-bottom:14px;
}
.script p{ font-size:14px; line-height:1.68; color:#DCD7D3; margin-bottom:9px; }
.script p:last-child{ margin-bottom:0; }
.script b{
  font-family:var(--ui); font-size:10.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#FFA06B;
}

/* La griglia dopo la risposta. Caselle vere, spuntate a mano:
   il programma non sa se l'hai detto, e non lo finge. */
.points{
  width:100%; text-align:left;
  background:rgba(255,255,255,.05); border-radius:var(--r-md);
  padding:16px 18px; margin-bottom:14px;
}
.points .pnote{
  font-size:12px; line-height:1.6; color:var(--nav-ink-2); margin-bottom:12px;
}
.points .pitem{
  display:flex; gap:11px; align-items:flex-start;
  padding:9px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:13.5px; line-height:1.62; color:#DCD7D3; cursor:pointer;
}
.points .pitem input{
  flex:0 0 auto; margin-top:3px; width:15px; height:15px;
  accent-color:var(--accent); cursor:pointer;
}
.points .pitem input:checked + span{ color:var(--nav-ink-2); }

.tscript{
  font-size:13.5px; line-height:1.7; text-align:left; color:#C8C3BF;
  background:rgba(255,255,255,.05); border-radius:var(--r-md);
  padding:13px 16px; margin-top:12px;
}
.tscript b{ color:#fff; }

/* la trascrizione che non c'e': si dice perche', non si tace */
.tscript.warn{
  background:rgba(242,106,33,.12); border:1px solid rgba(242,106,33,.3); color:#F0CDB6;
}
.tscript.warn b{ color:#fff; }
#review .tscript.warn{
  background:var(--amber-soft); border:none; color:var(--amber);
  font-size:13px; margin-top:9px; padding:11px 14px;
}
#review .tscript.warn b{ color:var(--amber); font-weight:700; }

/* Spia della trascrizione durante la registrazione.
   Dice che sta funzionando, NON cosa stai dicendo: leggersi addosso
   mentre si parla fa correggere l'occhio invece della bocca. */
.live{
  display:inline-block; text-align:left;
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.14);
  border-radius:var(--r-md); padding:10px 16px; margin-bottom:14px;
}
.live b{
  display:block; font-family:var(--ui); font-size:10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--nav-ink-2);
  margin-bottom:3px;
}
.live span{ font-size:12.5px; color:#8C8681; }
.live.on{
  border-style:solid; border-color:rgba(242,106,33,.45);
  background:rgba(242,106,33,.08);
}
.live.on b{ color:var(--accent); }

audio.clip{
  display:block; width:100%; max-width:520px; margin:12px auto;
  border-radius:var(--pill);
}
#sp audio.clip{ filter:invert(.92) hue-rotate(180deg); }

.spactions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; }

/* il player nel riepilogo sta su fondo chiaro: niente inversione */
#review audio.clip{ margin:12px 0; max-width:100%; }

/* ============================================================
   DASHBOARD — obiettivo, calendario, giorno, progressi
   ------------------------------------------------------------
   Stesso vocabolario visivo del resto: carte bianche molto
   arrotondate su fondo avorio, un solo accento arancione, numeri
   grandi in nero pieno. Nessun colore nuovo: tutto passa dalle
   variabili gia' definite in testa al file.
   ============================================================ */

/* ---------- fascia in alto: giorni, stima, obiettivo ---------- */
.dash-top{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:16px; margin-bottom:20px;
}
.dash-fig{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px 20px;
  box-shadow:var(--shadow);
}
.dash-fig .v{
  font-family:var(--head); font-size:46px; font-weight:700;
  letter-spacing:-.04em; line-height:1; margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.dash-fig .v .u{ font-size:19px; font-weight:600; color:var(--ink-3); letter-spacing:-.01em; }
.dash-fig .k{
  font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.dash-fig .s{ font-size:13px; color:var(--ink-2); line-height:1.55; }

/* ---------- due colonne che collassano da sole ---------- */
.dash-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:980px){ .dash-split{ grid-template-columns:1fr; } }

/* ---------- configurazione in tre passi ---------- */
.setup-head{
  font-family:var(--head); font-size:19px; font-weight:700;
  letter-spacing:-.02em; margin-bottom:20px;
}
.steps{ display:flex; flex-direction:column; }
.step{ display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--line); }
.step:first-child{ border-top:0; padding-top:0; }
.step .n{
  flex:0 0 34px; height:34px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--head); font-size:15px; font-weight:700; color:var(--ink-2);
}
.step.done .n{ background:var(--green); border-color:var(--green); color:var(--on-fill); }
.step .b{ flex:1; min-width:0; }
.step h4{
  font-family:var(--head); font-size:15.5px; font-weight:700;
  letter-spacing:-.015em; margin-bottom:5px;
}
.step .s{ font-size:13.5px; color:var(--ink-2); line-height:1.65; max-width:640px; }
.step.off .n{ border-style:dashed; }
.step .opt-tag{
  font-family:var(--ui); font-size:10px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); background:var(--chip);
  border-radius:var(--pill); padding:3px 9px; vertical-align:2px;
}
.step-form{ margin-top:16px; display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.step-form .field{ margin-bottom:0; min-width:170px; }
.setup-done{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.setup-done .t{ flex:1; min-width:260px; font-size:13.5px; color:var(--ink-2); line-height:1.65; }
.setup-done .t b{ color:var(--ink); font-weight:600; }

/* ---------- calendario ---------- */
.cal-head{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.cal-head .m{
  font-family:var(--head); font-size:16px; font-weight:700;
  letter-spacing:-.018em; min-width:150px;
}
.cal-head .spacer{ flex:1; }
.cal-head .nav{
  width:30px; height:30px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink-2); font-size:17px; line-height:1; cursor:pointer;
}
.cal-head .nav:hover{ background:var(--surface-2); }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid .dow{
  text-align:center; font-size:10px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); padding-bottom:8px;
}
.cal-grid .cell{
  position:relative; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); border:1px solid transparent;
  font-size:13.5px; font-variant-numeric:tabular-nums;
  color:var(--ink); cursor:pointer;
  transition:background .14s ease, border-color .14s ease;
}
.cal-grid .cell:hover{ background:var(--surface-2); border-color:var(--line-2); }
.cal-grid .cell.out{ color:var(--ink-3); opacity:.5; cursor:default; }
.cal-grid .cell.out:hover{ background:none; border-color:transparent; }
.cal-grid .cell.today{ font-weight:700; border-color:var(--line-2); background:var(--surface-2); }
.cal-grid .cell.full{ background:var(--green-soft); border-color:var(--green-line); }
.cal-grid .cell.exam{ background:var(--accent-soft); border-color:var(--accent); font-weight:700; }
/* la selezione vince su tutto il resto: e' l'unico stato che l'utente comanda */
.cal-grid .cell.sel{ background:var(--emphasis-bg); color:var(--emphasis-ink); border-color:var(--emphasis-bg); }
.cal-grid .cell.exam.sel{ background:var(--accent); border-color:var(--accent); color:var(--accent-on); }
.cal-grid .cell .dot{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--accent);
}
.cal-grid .cell.sel .dot{ background:#fff; }

.cal-legend{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:16px;
  font-size:12px; color:var(--ink-3);
}
.cal-legend .k{ display:flex; align-items:center; gap:7px; }
.cal-legend .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.cal-legend .sq{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.cal-legend .sq.full{ background:var(--green-soft); border:1px solid var(--green-line); }
.cal-legend .sq.exam{ background:var(--accent-soft); border:1px solid var(--accent); }

/* ---------- pannello del giorno ---------- */
.day-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.day-head h3{
  font-family:var(--head); font-size:19px; font-weight:700; letter-spacing:-.02em;
}
.day-head .chip{
  font-size:11px; font-weight:700; letter-spacing:.06em;
  color:var(--accent-ink); background:var(--accent-soft);
  border-radius:var(--pill); padding:5px 12px;
}
.day-sec{ border-top:1px solid var(--line); padding:16px 0 4px; }
.day-sec:first-of-type{ border-top:0; padding-top:0; }
.day-sec h4{
  font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.day-sec .an{ font-size:13.5px; line-height:1.7; color:var(--ink-2); }
.day-sec .an b{ color:var(--ink); font-weight:600; }
.day-sec .sub-note{ font-size:12.5px; line-height:1.62; color:var(--ink-3); margin-bottom:10px; }
.day-sec .hist{ font-size:13px; }

.plan-bar{
  height:5px; border-radius:var(--pill); background:var(--line);
  overflow:hidden; margin-bottom:7px;
}
.plan-bar i{ display:block; height:100%; background:var(--accent); border-radius:var(--pill); }
.plan-cnt{ font-size:12px; color:var(--ink-3); margin-bottom:14px; }

.ptask{
  display:flex; align-items:center; gap:13px;
  padding:12px 14px; margin-bottom:8px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md);
}
.ptask .tick{
  flex:0 0 22px; width:22px; height:22px; border-radius:6px;
  border:1.5px solid var(--line-2); background:var(--surface);
  color:#fff; font-size:12px; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ptask.done .tick{ background:var(--green); border-color:var(--green); }
.ptask .b{ flex:1; min-width:0; }
.ptask .l{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.ptask .d{ font-size:12px; color:var(--ink-3); margin-top:2px; }
.ptask.done .l{ color:var(--ink-3); text-decoration:line-through; }

/* ============================================================
   PIANO — interruttore giorno/settimane e vista settimanale
   ============================================================ */
.pview{
  display:inline-flex; gap:2px; padding:3px; margin-bottom:18px;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--pill);
}
.pview .seg{
  border:0; background:transparent; cursor:pointer;
  font-family:var(--ui); font-size:12.5px; font-weight:600; color:var(--ink-3);
  padding:6px 16px; border-radius:var(--pill); letter-spacing:-.01em;
}
.pview .seg.on{ background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--line-2), 0 1px 3px var(--line-soft); }

.wk-note{ font-size:12.5px; line-height:1.62; color:var(--ink-3); margin-bottom:14px; }

.wk{
  padding:14px 16px; margin-bottom:10px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
}
.wk:hover{ border-color:var(--line-2); }
.wk.now{ background:var(--surface); border-color:var(--accent); }
.wk-top{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.wk-when{ flex:1; min-width:0; }
.wk-when b{ display:block; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.wk-when span{ font-size:12px; color:var(--ink-3); }
.wk-phase{
  flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--pill); background:var(--line); color:var(--ink-2);
}
.wk-phase.ph-exam{ background:rgba(242,106,33,.14); color:var(--accent-ink); }
.wk-phase.ph-final{ background:var(--line-soft); color:var(--ink); }
.wk-goals{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.wk-goals span{
  font-size:12px; color:var(--ink-2); padding:4px 10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--pill);
}
.wk-goals b{ font-weight:700; color:var(--ink); }
.wk-foot{ font-size:12px; color:var(--ink-3); }
.wk-why{ font-size:12px; color:var(--ink-2); margin-top:8px; font-style:italic; }

textarea.tut{
  width:100%; min-height:96px; font-family:var(--write); font-size:13.5px;
  line-height:1.6; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink); outline:0; resize:vertical;
}
textarea.tut:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---------- azioni rapide ---------- */
.qa-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px; }
.qa{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  text-align:left; font-family:var(--ui); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 20px 18px;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.qa:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow); }
.qa:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.qa .ico{ font-size:17px; color:var(--accent); line-height:1; margin-bottom:9px; }
.qa b{ font-family:var(--head); font-size:15.5px; font-weight:700; letter-spacing:-.018em; color:var(--ink); }
.qa i{ font-style:normal; font-size:12.5px; line-height:1.6; color:var(--ink-2); }
.qa u{ text-decoration:none; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--accent-ink); }
.qa:hover u{ text-decoration:underline; }

/* ---------- progressi: vocabolario e grammatica ---------- */
.vhead{ font-size:13px; color:var(--ink-3); margin-bottom:16px; }
.vrow{
  display:grid; grid-template-columns:1fr 96px 44px; gap:12px;
  align-items:center; padding:11px 0; border-top:1px solid var(--line);
}
.vrow:first-of-type{ border-top:0; }
.vrow .lab{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; letter-spacing:-.01em;
}
.vrow .bar{ height:6px; border-radius:var(--pill); background:var(--line); overflow:hidden; }
.vrow .bar i{ display:block; height:100%; background:var(--accent); border-radius:var(--pill); }
.vrow .bar i.ok{ background:var(--green); }
.vrow .bar i.ko{ background:var(--amber); }
.vrow .n{
  font-family:var(--head); font-size:19px; font-weight:700;
  text-align:right; font-variant-numeric:tabular-nums;
}
.vrow .s{ grid-column:1 / -1; font-size:12px; color:var(--ink-3); margin-top:-4px; }
.vnote{
  font-size:12px; line-height:1.6; color:var(--ink-3);
  border-top:1px solid var(--line); padding-top:13px; margin-top:12px;
}
.vnote b{ color:var(--ink-2); font-weight:600; }

/* pastiglia del livello: quattro toni, dal piu' pallido
   (riconoscere) al pieno (usato) */
.lvl{
  display:inline-block; font-size:11px; font-weight:700;
  border-radius:var(--pill); padding:3px 10px; white-space:nowrap;
}
.lvl.l0{ color:var(--ink-3); background:var(--chip); }
.lvl.l1{ color:var(--ink-2); background:var(--line-2); }
.lvl.l2{ color:var(--amber); background:var(--amber-soft); }
.lvl.l3{ color:var(--accent-ink); background:var(--accent-soft); }
.lvl.l4{ color:var(--on-fill); background:var(--green); }
/* nella riga dei progressi la pastiglia e' solo un quadratino di colore */
.vrow .lvl{ width:11px; height:11px; padding:0; border-radius:3px; }
.vrow .lvl.l1{ background:var(--ink-3); }
.vrow .lvl.l2{ background:var(--amber); }
.vrow .lvl.l3{ background:var(--accent); }
.vrow .lvl.l4{ background:var(--green); }

/* ============================================================
   GRAFICI
   ------------------------------------------------------------
   Il disegno vero sta in chart.js: qui c'e' solo il contorno —
   la scatola, la legenda, la nota. Le due tinte NON compaiono in
   questo blocco perche' sono nei token (--data-*) e le usa il
   codice che genera l'SVG: un colore scritto a mano qui sarebbe
   un secondo posto da cambiare, e prima o poi uno dei due
   resterebbe indietro.

   Le note sotto i grafici non sono decorazione: sono la parte che
   dice cosa il grafico NON mostra. Hanno il peso di un testo da
   leggere, non di una didascalia da saltare.
   ============================================================ */
.ch-box{ margin:2px 0 0; overflow-x:auto; }
.ch{ display:block; width:100%; height:auto; }
.ch text{ font-family:var(--head); font-variant-numeric:tabular-nums; }
.ch circle{ transition:r .12s ease; }
.ch circle:hover{ r:6; }
/* La griglia della costanza si allarga fino a riempire il pannello
   e non oltre: i quadrati devono restare quadratini da colpo
   d'occhio, non piastrelle. */
.ch-grid{ max-width:420px; }

.ch-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12px; color:var(--ink-3); margin-bottom:14px;
}
.ch-legend .k{ display:inline-flex; align-items:center; gap:7px; }
.ch-legend .k i{ width:9px; height:9px; border-radius:3px; flex:0 0 9px; }
.ch-legend .k b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
/* Le due serie giudicate: vuote come i loro marker, tonde per lo
   Speaking e quadrate per il Writing. Stessa tinta di proposito —
   a distinguerle e' la forma, non un colore in piu' da validare. */
.ch-legend .k i.jd{
  background:transparent; border:2px solid var(--ink-2); border-radius:50%;
  width:10px; height:10px; flex:0 0 10px;
}
.ch-legend .k i.jd.sq{ border-radius:2px; }

/* ============================================================
   VALUTAZIONE DELLA CHAT
   ------------------------------------------------------------
   La casella dove finisce il voto che il simulatore non sa dare.
   Sta sul riepilogo (fondo scuro, come la home) e in cronologia.
   ============================================================ */
.gradebox{
  margin-top:26px; padding:20px 22px;
  background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--accent); border-radius:var(--r-md);
}
.gradebox .gk{
  font-family:var(--ui); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:10px;
}
.gradebox .gnote{ font-size:13px; line-height:1.68; color:var(--ink-2); margin-bottom:14px; }
.gradebox .gnote b{ color:var(--ink); font-weight:600; }
.gradebox .gnote-late{ margin:12px 0 0; font-size:12.5px; color:var(--ink-3); }
.gradebox .gnote-late b{ color:var(--ink-2); }
.grow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.grow input{
  width:96px; padding:11px 13px; font-family:var(--ui); font-size:17px; font-weight:700;
  font-variant-numeric:tabular-nums; text-align:center;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.grow input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.grow .gsc{ font-size:14px; font-weight:600; color:var(--ink-3); margin-left:-4px; }
.grow .gmsg{ font-size:12.5px; color:var(--ink-3); }
.grow .gmsg.on{ color:var(--green); font-weight:600; }
.gradebox textarea{
  width:100%; margin-top:12px; padding:11px 13px; min-height:58px; resize:vertical;
  font-family:var(--ui); font-size:13.5px; line-height:1.62;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.gradebox textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

/* la colonna in cronologia */
.hist th .th-sub{
  display:block; font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--ink-3); margin-top:2px;
}
.hist td.gcell{ white-space:nowrap; }
.hist td.gcell input{
  width:58px; padding:5px 6px; text-align:center;
  font-family:var(--ui); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.hist td.gcell input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.hist td.gdim{ color:var(--ink-3); opacity:.55; }
.btn.xs{ padding:5px 9px; font-size:11px; margin-left:5px; }
.hist-note{
  margin-top:12px; font-size:12.5px; line-height:1.62; color:var(--ink-3);
}
.hist-note b{ color:var(--ink-2); font-weight:600; }

.ch-scale{ gap:6px; margin:14px 0 0; }
.ch-scale > i{
  width:11px; height:11px; border-radius:3px; flex:0 0 11px;
  border:1px solid var(--line-soft);
}
.ch-scale .sp{ flex:1; min-width:8px; }
.ch-scale .k{ gap:6px; }

.ch-note{
  font-size:11.5px; line-height:1.62; color:var(--ink-3);
  border-top:1px solid var(--line); padding-top:11px; margin-top:14px;
}
.ch-note b{ color:var(--ink-2); font-weight:600; }
.ch-note + .ch-note{ border-top:0; padding-top:0; margin-top:8px; }

/* ============================================================
   BARRA DEL TEMPO PER ITEM — solo modalita' difficile
   ------------------------------------------------------------
   Sottile e in cima alla carta: deve essere visibile con la coda
   dell'occhio mentre si legge, non richiedere di guardarla. Il
   rosso arriva all'ultimo quarto, quando smettere di rileggere e
   tirare a indovinare e' la mossa giusta.
   ============================================================ */
.iclock{
  height:4px; border-radius:var(--pill); background:var(--line);
  overflow:hidden; margin:0 0 22px;
}
.iclock i{
  display:block; height:100%; width:100%;
  background:var(--accent); border-radius:var(--pill);
  transition:width .1s linear, background .3s ease;
}
.iclock i.low{ background:var(--red); }

/* pastiglia "modalita' difficile" sopra l'item del vocabolario */
.hard-tag{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft);
  border-radius:var(--pill); padding:2px 9px;
}

/* ============================================================
   MINI VALUTAZIONE
   ============================================================ */
#asm.on{
  margin:14px 16px 16px; height:calc(100% - 92px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}
#asm .qbar .kind{
  font-size:10.5px; letter-spacing:.12em; color:var(--ink-2);
  background:var(--chip); border-radius:var(--pill); padding:5px 12px;
}
#asm .qtext{ font-size:18px; margin-bottom:20px; }
.asm-passage{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 22px; margin-bottom:24px;
}
.asm-passage h4{
  font-family:var(--head); font-size:14px; font-weight:700;
  letter-spacing:-.015em; margin-bottom:12px;
}
.asm-passage p{
  font-family:var(--read); font-size:15px; line-height:1.72;
  color:var(--ink); margin-bottom:12px; position:relative; padding-left:26px;
}
.asm-passage p:last-child{ margin-bottom:0; }
.asm-passage p .pn{
  position:absolute; left:0; top:2px;
  font-family:var(--ui); font-size:11px; font-weight:700; color:var(--ink-3);
}
.asm-audio{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:20px 22px; margin-bottom:24px;
}
.asm-audio .hint{ font-size:12.5px; color:var(--ink-3); margin-top:10px; }
.asm-audio .ok{ font-size:13.5px; color:var(--green); font-weight:600; }
.asm-note{
  background:var(--amber-soft); border-radius:var(--r-md);
  padding:15px 18px; margin-bottom:24px;
  font-size:13.5px; line-height:1.7; color:var(--amber);
}
.asm-note b{ color:var(--ink); font-weight:700; }
.asm-self{ margin-bottom:26px; }
.asm-self h4{
  font-family:var(--head); font-size:16px; font-weight:700;
  letter-spacing:-.018em; margin-bottom:12px;
}
.asm-self .opt{ margin-bottom:9px; }

/* Le opzioni della valutazione e del vocabolario portano una lettera
   al posto della casella: sono scelte, non caselle da spuntare. */
.opt .ltr{
  flex:0 0 auto; width:22px; height:22px; border-radius:6px;
  background:var(--chip); color:var(--ink-2);
  font-family:var(--ui); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.opt.sel .ltr{ background:var(--accent); color:var(--accent-on); }
.opt.ok{ border-color:var(--green); background:var(--green-soft); }
.opt.ok .ltr{ background:var(--green); color:var(--on-fill); }
.opt.ko{ border-color:var(--red); background:var(--red-soft); }
.opt.ko .ltr{ background:var(--red); color:var(--on-fill); }
.opt .tx{ flex:1; min-width:0; }

/* ============================================================
   VOCABOLARIO
   ============================================================ */
#vb.on{
  margin:14px 16px 16px; height:calc(100% - 92px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
}
#vb .qwrap{ background:var(--surface-2); }
.vb-wrap{ max-width:880px; margin:0 auto; padding:36px 28px 56px; }
.vb-wrap h2{
  font-family:var(--head); font-size:28px; font-weight:700;
  letter-spacing:-.028em; margin-bottom:8px;
}
.vb-wrap .sub{
  font-size:13.5px; line-height:1.7; color:var(--ink-2); max-width:680px;
}
.vb-wrap .sub b{ color:var(--ink); font-weight:600; }
.vb-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 28px; }
.vb-pos{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:22px;
}
.vb-pos b{ color:var(--accent-ink); }

.vb-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.vb-table th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
  padding:0 12px 10px 0; border-bottom:1px solid var(--line);
}
.vb-table td{ padding:10px 12px 10px 0; border-bottom:1px solid var(--line); }
.vb-table td.w{ font-family:var(--read); font-size:15px; font-weight:600; }
.vb-table td.p{ font-size:11.5px; color:var(--ink-3); }
.vb-legend{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:18px; font-size:12px; color:var(--ink-3);
}

.vb-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:34px 34px 30px; box-shadow:var(--shadow);
}
.vb-card .word{
  font-family:var(--display); font-style:italic; font-size:42px;
  letter-spacing:-.02em; margin-bottom:4px;
}
.vb-card .pos{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:22px;
}
.vb-card .ask{ font-size:15px; line-height:1.65; color:var(--ink-2); margin-bottom:18px; }
.vb-card .sentence{ font-family:var(--read); font-size:19px; line-height:1.85; margin-bottom:18px; }
.vb-card .sentence input{
  font-family:var(--read); font-size:18px; width:190px;
  padding:4px 10px; border:0; border-bottom:2px solid var(--accent);
  background:var(--accent-soft); border-radius:var(--r-sm) var(--r-sm) 0 0;
  color:var(--ink); outline:0;
}
.vb-btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.vb-fb{ display:none; }
.vb-fb.ok, .vb-fb.ko{
  display:block; margin-top:22px; padding:17px 20px; border-radius:var(--r-md);
  background:var(--surface-2); font-size:13.5px; line-height:1.72; color:var(--ink-2);
  animation:rise .24s cubic-bezier(.2,.8,.3,1) both;
}
.vb-fb.ok{ border-left:4px solid var(--green); }
.vb-fb.ko{ border-left:4px solid var(--red); }
.vb-fb b{ color:var(--ink); font-weight:700; }
.vb-fb .ex{
  font-family:var(--read); font-size:15px; line-height:1.6;
  color:var(--ink); margin-top:10px;
}
.vb-learned{ list-style:none; margin:0 0 4px; }
.vb-learned li{ font-size:14px; padding:8px 0; border-bottom:1px solid var(--line); }
.vb-learned li:last-child{ border-bottom:0; }
.vb-learned.down li{ color:var(--red); }

/* discesa di livello: si vede, e si vede subito.
   L'avviso al primo errore e' ambra, la discesa e' rossa —
   sono due cose diverse e non devono somigliarsi. */
.vb-fb .down{
  margin-top:13px; padding:10px 13px; border-radius:var(--r-sm);
  background:var(--red-soft); color:var(--red);
  font-size:12.5px; line-height:1.6;
}
.vb-fb .down b{ color:var(--red); font-weight:700; }
.vb-fb .down.warn{ background:var(--amber-soft); color:var(--amber); }
.vb-fb .down.warn b{ color:var(--amber); }

/* ============================================================
   MOVIMENTO RIDOTTO
   ------------------------------------------------------------
   Aggiunto in revisione di fase 2: il foglio non aveva nessuna
   regola per chi chiede meno movimento, e con la fase 2 le
   animazioni sono aumentate (il cambio pagina, la barra del tempo
   per item). Non e' una preferenza estetica del sistema operativo:
   per una parte delle persone il movimento e' nausea o emicrania.

   Le transizioni NON vengono azzerate del tutto ma portate a 1ms:
   a zero pieno alcuni browser saltano l'evento `transitionend`, e
   qui non ci sono catene che ci si appoggiano, ma e' la forma che
   non si rompe se domani ce ne fosse una.

   Due eccezioni deliberate, perche' NON sono decorazione:
     - `.speaker.live` e `.speaker.rec` pulsano per dire che sta
       succedendo qualcosa che non si vede — l'audio che scorre, il
       microfono aperto. Restano, rallentate; sono alone che si
       espande, non spostamenti, quindi non e' la classe di
       movimento che da' fastidio;
     - la barra di .iclock non e' un'animazione, e' la lettura di
       un cronometro: toglierla vorrebbe dire togliere il dato.
       Perde solo la transizione morbida e diventa a scatti.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* i due segnali di stato sopravvivono, piu' lenti e senza spostamenti */
  .speaker.live, .speaker.rec{
    animation-duration:2.6s !important;
    animation-iteration-count:infinite !important;
  }
  .iclock i{ transition-duration:.001ms !important; }
}