/* ── LA LIBRERIA (29/9/2026): elenco, argomento, ricerca, Serie, la pagina
   del problema, i muri dei piani, le flashcard ─────────────────────────────
   Il foglio di Designer Libreria. Le regole valgono solo nelle pagine della
   sezione (le carica il blocco head di ognuna): i pezzi del foglio che usa
   anche il Problema del giorno (verdetto, indizio, risposte) qui si
   ritoccano dentro .pag-ex, e il Problema del giorno resta com'e'.
   Solo token, numeri in sans con cifre tabulari, niente sotto i 13px,
   bersagli da 44 con uno stato premuto. */

/* ── Il problema riaperto: lo stato in cima al foglio, col suo segno ── */
.ex-riaperto { margin: 0 0 var(--sp3); }
.ex-stato { display: flex; align-items: center; gap: var(--sp2); font-size: 15px; line-height: 24px; color: var(--ink-2); }
.ex-stato .lib-casella { flex: none; }

/* ── Il verdetto: quello che la consegna ha dato, in righe ── */
.pag-ex .vr-riga { margin: var(--sp1) 0 0; font-size: 15px; line-height: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pag-ex .riga-sola:not(.hidden) { display: flex; align-items: center; min-height: 44px; margin-top: var(--sp1); }
.pag-ex .riga-sola.hidden { display: none; }

/* ── Il tocco ── */
.pag-ex .riga-sola { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.riga-sola:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* ── La pagina del problema, grammatica v2 (29/9) ──────────────────────────
   Le regole di partenza stanno in style.css, ma queste classi le usa solo
   exercise.html: qui si ritoccano dentro .pag-ex, e il Problema del giorno,
   che ha le sue, non cambia. */

/*  gli XP guadagnati, all'evidenziatore: il riempimento sotto l'inchiostro  */
.pag-ex .vr-riga mark { color: var(--on-reward); font-weight: 600; padding: 1px 2px; border-radius: 0;
  background: var(--reward); }
.pag-ex .vr-riga .sep { color: var(--ink-3); }

/*  i link in fondo al foglio: alti 44 per il dito, il testo in mezzo; fra
    due righe nessuno spazio in piu' (l'altezza e' gia' il respiro)  */
.pag-ex .piede-foglio { gap: 0 16px; line-height: 20px; }
.pag-ex .piede-foglio a, .pag-ex .piede-foglio button { display: inline-flex; align-items: center; min-height: 44px; }


/*  l'indizio: «Un altro indizio» e la «×» da 44; l'etichetta a 13  */
.pag-ex .indizio-eti { font-size: 13px; }
.pag-ex .indizio-altro { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
.pag-ex .indizio-altro[hidden] { display: none; }
.pag-ex .indizio-chiudi { width: 44px; height: 44px; top: -10px; right: -12px; }
.pag-ex .nota-oli .indizio-chiudi { top: 0; }

/*  il «no» della penna rossa: 13, come ogni scritta che non e' stampata  */
.pag-ex .segno-no { font-size: 13px; }

/*  «Salvato» in inchiostro: il giallo e' dell'evidenziatore (XP, livello,
    parole trovate), e il segno del salvato e' l'orecchia  */
.pag-ex .attrezzi button.acceso { color: var(--ink); }

/*  I quattro comandi della barra (A4) stanno fra i margini da 20: il primo
    comincia sul margine e l'ultimo ci finisce (il bersaglio resta alto 44).
    A 320 con «Salvato» non ci stavano: «Salta» arrivava a 6 px dal bordo.  */
.pag-ex .attrezzi > :first-child { padding-left: 0; }
.pag-ex .attrezzi > :last-child { padding-right: 0; }
@media (max-width: 359px) {
  .pag-ex .attrezzi button, .pag-ex .attrezzi a { gap: 4px; padding-left: 2px; padding-right: 2px; }
}

.pag-ex .piede-foglio a, .pag-ex .piede-foglio button, .pag-ex .indizio-altro, .pag-ex .indizio-chiudi {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pag-ex .piede-foglio a:active, .pag-ex .piede-foglio button:active, .pag-ex .indizio-altro:active,
.pag-ex .indizio-chiudi:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/*  lo stato premuto dei comandi della pagina che non l'avevano (guardia 9)  */
.pag-ex .riga-indizio, .pag-ex .chiedi, .pag-ex .link-azione { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.riga-indizio:active, .pag-ex .chiedi:active, .link-azione:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }


/* ── La Libreria, grammatica v2 (29/9) ─────────────────────────────────── */

/*  la ricerca: tutto il campo si tocca. Il campo vero riempie la casella,
    la lente ci sta sopra e lascia passare il tocco. Solo qui: .cerca e'
    anche del Forum e delle scuole.  */
#lib-testa .cerca { position: relative; padding: 0; }
#lib-testa .cerca > i, #lib-testa .cerca > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
#lib-testa .cerca input[name="q"] { min-height: 44px; padding: 0 12px 0 36px; }
/*  A2 (29/9, giro 2): il campo non ha l'anello, come tutti i campi; si
    accende il bordo, indaco (.campo:focus). Prima non si vedeva niente, e
    con la tastiera non si capiva di essere nella ricerca.  */
#lib-testa .cerca:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/*  la riga del piano e dell'ambito: i link alti 44, sulla riga del testo  */
.lib-ambito { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp2); margin-top: var(--sp1);
  font-size: 13px; line-height: 18px; }
.lib-ambito > span + a + span::before { content: '\00b7'; margin-right: var(--sp2); color: var(--ink-3); }
.lib-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 500;
  color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/*  i numeri: sans a cifre tabulari (.num), mai sotto 13  */
.lib-conto, .lib-colonna { font-size: 13px; }
.lib-num .pt { margin-left: 0; }

/*  lo stato vuoto: in cima, breve, Oli piccolo accanto (come .cl-vuoto)  */
.lib-vuoto { display: flex; align-items: flex-start; gap: var(--sp3); margin-top: var(--sp4); }
.lib-vuoto .oli { width: 40px; height: 40px; flex: none; }
.lib-vuoto p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lib-vuoto b { color: var(--ink); }
.lib-vuoto .azione { margin-top: var(--sp3); }

.lib-link { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lib-link:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* ── I muri dei piani e del limite del giorno (29/9) ───────────────────────
   Agon e Olimpo sono righe sulla carta, divise da un filo, non riquadri
   bianchi. Il macro (billing/_piano.html) e' quello della pagina dei piani:
   qui si ridisegna solo dentro .muro. */
.muro .oa-piano { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--sp4) 0; box-shadow: none; }
.muro .pi-stacco { margin: var(--sp4) 0 0; text-align: left; }
.muro .pi-stacco + .oa-piano { border-top: 0; padding-top: var(--sp2); }
.muro .righe { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 0; }

/* ── Le flashcard (29/9) ───────────────────────────────────────────────────
   In cima una riga sola, con l'Oli piccolo accanto; niente riquadro e
   niente griglia delle scatole. Gli argomenti sono righe sulla carta. */
.fc-stato { display: flex; align-items: center; gap: var(--sp3); margin-top: var(--sp4); }
.fc-stato .oli { width: 40px; height: 40px; flex: none; }
.fc-stato p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fc-stato b { color: var(--ink); font-weight: 600; }
.fc-stato .sep { color: var(--ink-3); }
.fc-inizia { margin-top: var(--sp3); }

.fc-argomenti { border-top: 1px solid var(--line); }
.fc-argomenti .voce { background: none; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
.fc-argomenti .voce small { font-variant-numeric: tabular-nums; }
.fc-aggiungi { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 var(--sp3); }

/*  nello studio, la scatola a parole  */
.fc-scatola { display: block; margin: var(--sp2) 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.fc-aggiungi { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.fc-aggiungi:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* ── A3 (29/9, giro 2): margini uguali, e niente barra nel foglio dei filtri ──
   La pagina del problema apriva a sinistra un margine da 44 per i segni a
   penna della correzione (style.css, «ESERCIZIO»): i segni oggi stanno
   dentro le risposte, e il margine faceva il foglio 44 a sinistra e 20 a
   destra. Ora 20 e 20, come ogni schermata della sezione.
   Il foglio dei filtri nascondeva la barra con ::-webkit-scrollbar, ma
   `* { scrollbar-width: thin }` vince in Chromium: la barra sottile si
   vedeva. Lo scorrimento resta. (Solo nella Libreria: il foglio e' anche
   della Cronologia, che ha lo stesso difetto.) */
body:has(#ex-testa) #main-content { padding-left: 20px; }
.pag-ex .sotto { margin-left: -20px; padding-left: 20px; }
/*  Ritocchi della PR 453 (A6): i comandi seguono subito il foglio, e si
    attaccano al fondo (sticky, bottom 0, con l'area sicura nel padding)
    solo quando il contenuto e' piu' lungo dello schermo. Con margin-top:
    auto (style.css) la barra andava sempre in fondo: col problema corto
    restava mezzo schermo vuoto fra il foglio e i comandi.  */
.pag-ex .sotto { margin-top: 14px; }
#foglio-filtri .foglio-corpo { scrollbar-width: none; }

/* ── L'icona di «Salva» (ritocchi della PR 453, B9) ─────────────────────────
   Il contorno di una pagina con l'angolo piegato (macros/_icone.html),
   col tratto delle altre icone della barra. Il triangolo del giro 2
   sembrava una squadra. */
.salva-icona { flex: none; }

/* ── C1 (29/9, giro 2): l'indice come sommario, coi puntini di guida ───────
   Un capitolo per materia: il glifo nel suo colore, il nome a 16/600, a
   destra il totale; 32px fra i capitoli, nessun filo. Una voce: il nome a
   15/500 (va a capo), i puntini dall'ultima riga fino al numero, «21 di
   376» a cifre tabulari. Riga alta 48, tutta da toccare.
   I puntini: un elemento vuoto largo quanto lo schermo, con il bordo di
   sotto a puntini da 2px (uno ogni 4px, senza gradienti), sulla linea di
   base; la colonna del nome lo taglia dove comincia il numero. Il nome si
   ferma 24px prima della fine della sua colonna: i puntini sono sempre
   almeno 24px, anche a 320, e il numero non deve mai scendere sotto. */
.lib-capitolo + .lib-capitolo { margin-top: var(--sp8); }
.lib-capitolo:first-child { margin-top: var(--sp2); }
.lib-capo { display: flex; align-items: baseline; gap: var(--sp2); margin: 0 0 var(--sp1); font-size: 16px; font-weight: 600;
  line-height: 24px; color: var(--ink); }
.lib-capo-glifo { display: inline-flex; align-self: center; }
.lib-capo .glifo-mat { margin: 0; }
.lib-capo-nome { flex: 1; min-width: 0; }
.lib-capo .lib-voce-conto { font-size: 15px; font-weight: 500; }

/* L'indice coi puntini e il nastrino stanno in style.css, fra i componenti
   condivisi: li usano anche i Percorsi (3/10, al posto della copia della #459). */

/* ── C2 (29/9, giro 2): l'elenco di un argomento, per difficolta' ─────────
   Un titolo per difficolta' a 16/600 («Facile · 142»), cifre tabulari;
   la riga: quadretto, numero, titolo in serif, niente freccia. Il numero
   sta piu' vicino al quadretto, allineato a destra nella sua colonna. */
.lib-livello { display: flex; align-items: baseline; margin: var(--sp6) 0 0; padding-bottom: var(--sp2);
  font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink); }
.lib-livello:first-child { margin-top: var(--sp2); }
.lib-livello .sep { color: var(--ink-3); margin: 0 4px; }
#elenco-lib .lib-num { width: 3.6ch; margin-left: -8px; margin-right: 0; }
/*  C3 dei ritocchi della PR 453: la colonna larga quanto il numero piu'
    lungo del livello, e parte dal bordo del quadretto: il numero piu' largo
    sta a 4 px (i 4 del gap che restano). Le cifre tabulari di Plus Jakarta
    sono 1,85 px piu' strette di 1ch (misurato a 14 px): la larghezza e'
    N cifre piu' il punto, con 1 px di margine perche' il punto non esca.  */
#elenco-lib .lib-num.cifre-1 { width: calc(1.6ch - 3px); }
#elenco-lib .lib-num.cifre-2 { width: calc(2.6ch - 4.85px); }
#elenco-lib .lib-num.cifre-3 { width: calc(3.6ch - 6.7px); }
#elenco-lib .lib-num.cifre-4 { width: calc(4.6ch - 8.55px); }
.lib-stato-argomento { color: var(--ink-2); }

/* ── C3 (29/9, giro 2): la pagina dell'argomento ────────────────────────────
   Un elemento solo, disegnato dallo script della pagina. Non e' un comando:
   i quadretti da 10 sono l'eccezione dichiarata ai 44px. La riga toccata
   resta segnata un istante (senza sfumare se il movimento e' ridotto). */
.lib-pagina { margin-top: var(--sp4); }
.lib-pagina canvas { display: block; width: 100%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lib-pagina-intera { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp1); padding: 0;
  background: none; border: 0; font: inherit; font-size: 13px; font-weight: 500; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
.lib-pagina-intera[hidden] { display: none; }
.lib-pagina-intera:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }
/*  Ritocchi della PR 453 (B1): nelle righe dell'elenco il contorno del
    quadretto e' un segno, e arriva a 3: --ink-3 (4,6), non --matita-leggera
    (1,36). Nella pagina dell'argomento resta chiaro (eccezione dichiarata
    nella grammatica); fuori dalla Libreria il quadretto non cambia.  */
#elenco-lib .lib-casella { box-shadow: inset 0 0 0 1px var(--ink-3); }
#elenco-lib a.lib-segnata { background: color-mix(in srgb, var(--primary) 8%, transparent); }
#elenco-lib a.lib-riga { transition: background-color .6s; }
@media (prefers-reduced-motion: reduce) { #elenco-lib a.lib-riga { transition: none; } }

/* ── C4 (29/9, giro 2): il nastrino «Qui eri rimasto» ──────────────────────
   Indaco: si puo' fare, da qui. Un filo sottile sopra la riga, a sinistra
   la coda a V (8x16) che pende dal filo, a destra la frase a 13/400. La
   riga fa posto sopra di se'. Nell'indice, la coda sta a sinistra del nome
   dell'argomento usato per ultimo. La coda finisce 7 px sopra il quadretto
   (ritocchi della PR 453: a 38 lo toccava quasi, 3 px). */
#elenco-lib a.lib-con-nastrino { position: relative; padding-top: 42px; }

/* ── C6 (29/9, giro 2): le note a margine ──────────────────────────────────
   A matita: 13/400 in grafite, non corsivo, sul lato destro della riga,
   una per riga. Il compito e' l'etichetta stampata COMPITO, mono maiuscolo
   11/600, come sul foglietto del professore. */
.lib-nota { flex: none; align-self: flex-start; margin-top: 2px; max-width: 9.5em; font-size: 13px; font-weight: 400; line-height: 20px;
  font-style: normal; color: var(--grafite); text-align: right; font-variant-numeric: tabular-nums; }
.lib-nota.stampato { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-2); }
.pag-ex .ex-numero { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp2); }
.pag-ex .ex-numero .lib-nota { margin-top: 0; }

/* ── C7 (29/9, giro 2): l'evidenziatore della ricerca ──────────────────────
   --reward dietro le lettere trovate, l'inchiostro sopra, angoli vivi, 1px
   sopra e sotto e 2px ai lati; niente gradiente. Tutte le occorrenze, mai
   dentro una formula (services/ricerca.evidenzia). */
.lib-riga mark { color: var(--on-reward); background: var(--reward); border-radius: 0; padding: 1px 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ── C8 (29/9, giro 2): i filtri accesi, sopra l'elenco ─────────────────── */
.lib-attivi { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp3); margin: var(--sp1) 0 0;
  font-size: 13px; line-height: 18px; color: var(--ink-2); }

/* ── C9 (29/9, giro 2): l'indizio sotto le risposte ─────────────────────────
   Prima stava in cima al foglio col filo sotto; ora sta dopo le risposte,
   col filo tratteggiato sopra, e aprendolo il testo non si sposta. */
.pag-ex .indizio { margin: var(--sp4) 0 0; padding: var(--sp3) 30px 0 0; border-bottom: 0;
  border-top: 1px dashed color-mix(in srgb, var(--grafite) 45%, transparent); }
.pag-ex .indizio .indizio-chiudi { top: 2px; }

/* ── C10 (29/9, giro 2): «Altro» e il suo foglio ────────────────────────────
   «Altro» e' un link piccolo in fondo al foglio, alto 44 come gli altri;
   il foglio sale dal basso (lo stesso dei filtri, color carta) con tre
   righe da 48 sulla carta: senza il fondo bianco delle card di .voce, che
   ne faceva tre scatole col testo a 2 px dal bordo. */
.ex-altro-righe { padding-bottom: var(--sp4); }
.ex-altro-righe .voce:last-child { border-bottom: 0; }
.ex-altro-righe .voce[hidden] { display: none; }
.ex-altro-righe .voce { width: 100%; min-height: 48px; padding: 12px 0; background: none;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink);
  cursor: pointer; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ex-altro:active, .ex-altro-righe .voce:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* ── Ritocchi della PR 453 (B2): la pastiglia della materia accesa ─────────
   Indaco come le altre, mai nel colore della materia (come in Forum e
   Profilo). La regola che la colorava sta in style.css (.past.math...
   [aria-pressed]): e' di Designer OlimpiApp, e la PR chiede di toglierla. */
.past.math[aria-pressed="true"], .past.cs[aria-pressed="true"], .past.physics[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); }

/* ── Ritocchi della PR 453 (B6): l'avviso del piano, in fondo all'indice ── */
.lib-piano { margin-top: var(--sp6); font-size: 13px; line-height: 20px; }
/*  «Scopri Agon ›» su una riga sua: alto 44 dentro la frase allargava la
    seconda riga, e l'avviso sembrava spezzato  */
.lib-piano .lib-link { display: flex; width: max-content; }

/* ── Ritocchi della PR 453 (B8): i distintivi vinti nella correzione ──────
   I nomi in --medal-ink, ognuno alto 44 da toccare, sulla stessa riga. */
.pag-ex .vr-medaglia { color: var(--medal-ink);
  font-weight: 500; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/*  Terzo giro, dopo le foto: i nomi vanno a capo come testo, con l'interlinea
    dell'esito (prima ognuno era un inline-block alto 44, e ogni riga
    diventava alta 44: un buco alto una riga fra le due). L'area da toccare
    la allarga il padding verticale, che in un elemento in linea non cambia
    l'altezza della riga: con un nome alto 19, 25 px fanno 44. Su una riga
    sola meta' sopra e meta' sotto; andando a capo, i nomi della prima riga
    si allungano verso l'alto e quelli dell'ultima verso il basso
    (segnaRigheMedaglie in exercise.html), cosi' due righe vicine non si
    coprono. (Un ::after posizionato no: dentro un elemento in linea le sue
    percentuali si risolvono su un contenitore che non e' il nome.)  */
/*  position: relative mette il nome sopra le righe che vengono dopo
    nell'esito: senza, il suo padding sotto finiva coperto dal blocco
    seguente, e il dito non lo trovava (37 px invece di 44)  */
/*  ogni nome resta intero: va a capo fra un nome e l'altro, non dentro  */
.pag-ex .vr-medaglia { position: relative; padding: 13px 0 12px; white-space: nowrap; }
.pag-ex .vr-medaglia.prima { padding: 25px 0 0; }
.pag-ex .vr-medaglia.ultima { padding: 0 0 25px; }
.pag-ex .vr-medaglia.prima.ultima { padding: 13px 0 12px; }
.pag-ex .vr-medaglia:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }

/* ── Terzo giro (1/10): l'indizio dopo la consegna ───────────────────────────
   Si ripiega in una riga «Indizio» (13, grafite, alta 44) con la freccia;
   toccandola si riapre con gli indizi che avevi visto. Ripiegato non ha la
   «×» ne' «Un altro indizio». */
.pag-ex .indizio-ripiegato { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  background: none; border: 0; font: inherit; font-size: 13px; font-weight: 500; font-style: normal; color: var(--grafite); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pag-ex .indizio-ripiegato[hidden] { display: none; }
.pag-ex .indizio-ripiegato svg, .pag-ex .indizio-ripiegato i { width: 14px; height: 14px; }
.pag-ex .indizio-ripiegato[aria-expanded="true"] svg { transform: rotate(180deg); }
.pag-ex .indizio-ripiegato:active { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.pag-ex .indizio.ripiegato { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
.pag-ex .indizio.ripiegato .indizio-chiudi, .pag-ex .indizio.ripiegato .indizio-altro,
.pag-ex .indizio.ripiegato:not(.aperto) .indizio-voce { display: none; }
/*  riaperto, il primo indizio non ripete «Indizio»: lo dice gia' la riga  */
.pag-ex .indizio.ripiegato.aperto .indizio-voce:first-of-type .indizio-eti { display: none; }
.pag-ex .vr-indizi { color: var(--ink-2); white-space: nowrap; }

/* ── Terzo giro (1/10): la legenda dei segni ─────────────────────────────────
   Una riga sola sopra la griglia, 13/400 in --ink-3, «·» fra le voci. I
   segni sono quelli della griglia, alla stessa scala: contorno chiaro
   (--matita-leggera), tratteggio in grafite (0,8), barra rossa (1,25). */
.lib-legenda { display: flex; flex-wrap: nowrap; align-items: center; column-gap: var(--sp2); margin: var(--sp2) 0 var(--sp3);
  font-size: 13px; font-weight: 400; line-height: 20px; color: var(--ink-3); white-space: nowrap; }
.lib-legenda-voce { display: inline-flex; align-items: center; gap: 5px; }
.lib-legenda svg { flex: none; overflow: hidden; }
.lib-legenda svg rect { fill: none; stroke: var(--matita-leggera); stroke-width: 1; }
.lib-legenda .lg-risolto path { fill: none; stroke: var(--grafite); stroke-width: .8; }
.lib-legenda .lg-sbagliato path { fill: none; stroke: var(--error); stroke-width: 1.25; stroke-linecap: round; }

/* ── Terzo giro (1/10): la tua risposta, riaprendo o dopo la consegna ─────── */
.pag-ex .ex-tua-risposta { margin: var(--sp3) 0 0; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.pag-ex .ex-tua-risposta[hidden] { display: none; }
.pag-ex .ex-tua-risposta .num { color: var(--ink); font-variant-numeric: tabular-nums; }