/* ===========================================================================
   Enoversity — foglio di stile unico.

   Prima questi stili stavano in undici blocchi <style> dentro le pagine Razor:
   circa 48 KB non memorizzabili nella cache, riscaricati a ogni navigazione, e
   una regola condivisa era difficile da trovare. Qui stanno in un file solo,
   servito con asp-append-version, quindi scaricato una volta e invalidato solo
   quando cambia davvero.

   Ordine, che è anche l'ordine della cascata:
     1. base            — dimensioni di testo e regole generiche
     2. tavolozza       — i token :root dei due temi, e i componenti condivisi
     3. pagine          — un blocco per pagina, ognuno sotto la propria classe
                          radice (.argomento, .guida, .cartine, .scheda-deg...)
                          così nessun blocco può interferire con un altro.

   Le pagine NON devono tornare ad avere <style> propri: una regola che serve a
   più pagine va nella sezione 2, una che serve a una sola nella sua sezione.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. Caratteri
   Due famiglie, servite dal sito (wwwroot/fonts) e non da un CDN: nessuna
   richiesta a terzi, niente testo in attesa di un dominio lento, e la stessa
   resa anche offline. Di ognuna c'e' il solo sottoinsieme "latin", che
   all'italiano basta, accentate comprese: sei file, 94 KB in tutto,
   scaricati una volta e poi in cache.

     Cinzel        — solo il marchio: il nome accanto al sigillo, nella barra.
                     E' un lapidario tutto maiuscolo, illeggibile per un testo
                     corrente: non va usato da nessun'altra parte.
     Source Sans 3 — tutto il resto: titoli, interfaccia, tabelle, prosa.

   Il contrasto e' fra categorie diverse — capitali incise per il marchio,
   lineare per la pagina — e non fra due serif: due serif a pochi pixel di
   distanza si leggono come lo stesso carattere fatto male. Per questo i
   titoli NON hanno una terza famiglia: si staccano dal testo per corpo e
   peso, che a 2.15rem e 800 bastano e avanzano.

   I pesi caricati sono esattamente quelli che il foglio usa (600, 700, 800,
   piu' il corsivo del testo): un peso mancante il browser lo finge
   ingrassando i contorni, e si vede. Se una regola nuova usa un font-weight
   che qui non c'e', va aggiunta la faccia corrispondente.
   font-display: swap — il testo si legge subito col carattere di sistema e
   cambia quando il file e' arrivato: nessuna riga invisibile all'apertura.
   La licenza dei due caratteri (OFL 1.1) sta in wwwroot/fonts/LICENSE.txt.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cinzel-600.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/source-sans-3-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/source-sans-3-700.woff2") format("woff2");
}
@font-face {
    font-family: "Source Sans 3";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/source-sans-3-800.woff2") format("woff2");
}

:root {
    --font-testo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-marchio: "Cinzel", Georgia, "Times New Roman", serif;
    /* I titoli non hanno un carattere proprio: sono il carattere del testo, in
       corpo e peso da titolo. Resta un token a parte perche' il ruolo e'
       diverso, e dargli un giorno una famiglia tutta sua e' una riga sola. */
    --font-titoli: var(--font-testo);
}

/* ---------------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------------- */
/* La misura di base del testo. Da qui in giu' il foglio non usa piu' pixel
   per il testo ma rem, quindi queste tre righe sono l'unica manopola: tutto
   il sito cresce e cala insieme, titoli ed etichette compresi.
     16px  — il minimo per un testo da leggere, ed e' anche il valore sotto il
             quale iOS ingrandisce la pagina da solo quando si tocca un campo
             di immissione. Prima la base era 14px, e si vedeva.
     17px  — da tablet in su, dove si sta piu' lontani dallo schermo.
     18px  — sugli schermi larghi: la colonna di lettura e' fissa a 820px e a
             18px fa quei 70-75 caratteri per riga che si leggono meglio.
   Niente testo sotto 0.75rem (12px): sotto quella misura un'etichetta si
   legge solo avvicinandosi allo schermo. */
/* La barra di scorrimento. Una pagina corta non ce l'ha, una lunga si', e
   passando dall'una all'altra il contenuto centrato saltava di lato di una
   quindicina di pixel. scrollbar-gutter tiene lo spazio sempre riservato,
   anche quando la barra non c'e': nessun salto, e senza obbligare una barra
   visibile su ogni pagina come faceva il vecchio trucco di overflow-y:scroll.
   Dove le barre sono a scomparsa (macOS, telefoni) non toglie niente a
   nessuno, perche' li' il salto non c'era. */
html { font-size: 16px; scrollbar-gutter: stable; }
@media (min-width: 768px) { html { font-size: 17px; } }
@media (min-width: 1400px) { html { font-size: 18px; } }
.btn-link.nav-link { text-decoration: none; }
main { min-height: 60vh; }

/* I caratteri. I token qui sopra sono l'unico posto dove si sceglie una
   famiglia: le pagine non dichiarano piu' font-family proprie. Le cifre
   tabulari incolonnano i numeri nelle tabelle di statistiche, che altrimenti
   ballano di un paio di pixel per riga. */
body { font-family: var(--font-testo); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-titoli); }

/* Titolo di pagina per le pagine che non ne hanno uno proprio (quelle che ce
   l'hanno — Argomenti, Guida, Scorri, Cartine — vincono per specificita' e
   aggiungono la barretta d'accento). 2.15rem invece dei 2.5 di Bootstrap, e
   l'inchiostro pieno invece del grigio dei titoli: a mezza tinta il titolo
   non si stacca dal testo e la pagina sembra senza testa. */
h1 { font-size: 2.15rem; font-weight: 800; line-height: 1.12; letter-spacing: -.015em; color: var(--ink); }

/* ---------------------------------------------------------------------------
   2. Tavolozza e componenti condivisi
   da Pages/Shared/_Layout.cshtml
   --------------------------------------------------------------------------- */
/* ------------------------------------------------------------------
   Tavolozza unica dell'app. Ogni pagina usa queste variabili e nessun
   colore fisso, cosi' il tema scuro e' una sola ridefinizione qui.
   Il blocco :root e' il tema chiaro, ed e' anche il fallback se il
   browser non applica nessuna delle due regole scure.
   ------------------------------------------------------------------ */
:root {
    color-scheme: light;

    --bg: #ffffff;              /* fondo pagina */
    --surface: #ffffff;         /* schede, riquadri */
    --surface-2: #fbfcfd;       /* pannelli tenui, accordion */
    --surface-3: #eef0f2;       /* intestazioni di tabella e di gruppo */

    --ink: #232a30;             /* testo principale */
    --ink-2: #55606a;           /* testo secondario */
    /* 4.57:1 su --surface-2: sedici regole usano questo token per testo
       piccolo, e a #8a939b si fermava a 3.04, sotto la soglia AA. */
    --muted: #6c757d;           /* didascalie */
    --title: #4d5a66;           /* titoli */

    --line: #dde1e5;            /* bordi */
    --line-strong: #9aa5ad;     /* bordi marcati */
    --hairline: #eceff1;        /* separatori interni */

    --accent: #b02a6b;          /* riempimenti: pulsanti, chip attivi */
    --accent-ink: #b02a6b;      /* accento usato come testo o bordo */
    --accent-soft: #f0c9dd;     /* hover tenue */
    --accent-premuto: #96225b;  /* primario premuto: bianco sopra a 7.85:1 */
    --accent-softer: #ecdfe6;   /* zone di rimando sulle cartine */
    --on-accent: #ffffff;       /* testo sopra --accent */

    /* ranghi delle classificazioni, condivisi da Cartine e Database */
    --rank-0: #8e1c4f;
    --rank-1: #c96aa0;
    --rank-2: #a08096;
    --rank-3: #828c94;
    /* Il rango piu' alto e' una tinta scura e regge il bianco (8.6:1). Gli
       altri tre sono tinte pallide: il bianco sopra si ferma a 3.4-3.5, sotto
       la soglia. La rampa resta quella (scuro -> pallido) e cambia
       l'inchiostro, che sui pallidi va scuro: 4.75-4.84. */
    --on-rank: #ffffff;      /* testo sopra il rango scuro */
    --on-rank-pale: #1b1f23; /* testo sopra i ranghi pallidi */
    --on-rank-1: var(--on-rank-pale);
    --on-rank-2: var(--on-rank-pale);
    --on-rank-3: var(--on-rank-pale);

    /* Cartine. La forma delle zone la porta il contorno --zone-bordo, che sta a
       >=3:1 su ogni riempimento a riposo: i riempimenti possono restare tenui
       senza che la cartina diventi indecifrabile. Selezionata contro
       non selezionata: 4.31:1. */
    --zone-bordo: #6b747b;      /* contorno delle zone: 4.76:1 sulla card */
    --zone-bg: #f2f4f7;         /* terre fuori dal bank, inerti */
    --zone-vuota: #e6eaed;      /* zona senza denominazioni */
    --zone-none: #d2d8de;       /* zona con denominazioni, non selezionata */
    --zone-link: #edc9dd;       /* zona che rimanda a un'altra cartina */
    --zone-hover: #b02a6b;      /* passaggio del puntatore */
    --zone-sel: #e09cbe;        /* zona selezionata */
    --zone-sel-bordo: #5e1239;  /* anello della zona selezionata */

    /* Colori semantici di Bootstrap usati come TESTO. Bootstrap tiene lo
       stesso valore nei due temi: #dc3545 su fondo scuro si ferma a 3.97:1.
       Il riempimento resta saturo (ci va sopra il bianco, 4.53:1). */
    /* 5.42:1 su --surface, 5.27 su --surface-2, 4.74 su --surface-3: il rosso
       di Bootstrap (#dc3545) passava sul bianco ma si fermava a 4.41 sui
       pannelli tenui, dove sta il testo d'avviso. Il riempimento resta il suo. */
    --danger-ink: #c92a3a;
    --danger-fill: #dc3545;

    /* Larghezza della colonna di lettura. Le pagine di testo (Argomenti, Esame,
       Scorri, l'esercizio della scheda) si fermano qui: a tutta pagina la riga
       diventa troppo lunga per leggerla a colpo d'occhio. Le pagine-strumento
       (Oggi, Carte, Database, Cartine, Schede) usano invece tutto il contenitore,
       perché sono griglie e tabelle, non prosa. */
    --col-lettura: 820px;

    --ombra: rgba(0, 0, 0, .18);
    --ombra-card: rgba(176, 42, 107, .12);
}

/* Tema scuro esplicito: vince sempre, anche se il sistema dice chiaro. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #14171a;
    --surface: #1b1f23;
    --surface-2: #1e2328;
    --surface-3: #262c32;

    --ink: #e7ebee;
    --ink-2: #b2bcc4;
    --muted: #8b959d;
    --title: #c9d4dc;

    --line: #333a41;
    --line-strong: #59636b;
    --hairline: #2a3037;

    /* l'accento come riempimento resta saturo, perche' ci va sopra il
       bianco; come testo si schiarisce, altrimenti sparisce sul fondo */
    --accent: #b83a72;
    --accent-ink: #e98fba;
    --accent-soft: #4d2639;
    --accent-premuto: #c44a7d;  /* piu' chiaro, non piu' scuro: 4.54:1 col bianco, 3.49 sul pannello */
    --accent-softer: #35202b;
    --on-accent: #ffffff;

    --rank-0: #e87aaa;
    --rank-1: #c58ab2;
    --rank-2: #ad9aa6;
    --rank-3: #95a0a8;
    --on-rank: #1a1216;
    --on-rank-pale: #1a1216;
    --on-rank-1: var(--on-rank-pale);
    --on-rank-2: var(--on-rank-pale);
    --on-rank-3: var(--on-rank-pale);

    /* Sul fondo scuro i vecchi grigi stavano a 1.1-1.3:1 sulla card: la
       cartina non si vedeva. Ora il contorno e' chiaro e regge >=3:1 su ogni
       riempimento a riposo; selezionata contro non selezionata 3.61:1. */
    --zone-bordo: #a8b1b8;      /* 7.61:1 sulla card */
    --zone-bg: #262d33;
    --zone-vuota: #343c43;
    --zone-none: #474f57;
    --zone-link: #7c4759;
    --zone-hover: #b83a72;
    --zone-sel: #a05f77;
    --zone-sel-bordo: #f2b3d0;

    --danger-ink: #f1959b;      /* 8.15:1 su --bg */
    --danger-fill: #dc3545;

    --ombra: rgba(0, 0, 0, .6);
    --ombra-card: rgba(233, 143, 186, .18);
}

/* Senza scelta esplicita si segue il sistema. Funziona anche a JavaScript
   spento: lo script in testa serve solo a girare l'interruttore di Bootstrap. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #14171a;
        --surface: #1b1f23;
        --surface-2: #1e2328;
        --surface-3: #262c32;

        --ink: #e7ebee;
        --ink-2: #b2bcc4;
        --muted: #8b959d;
        --title: #c9d4dc;

        --line: #333a41;
        --line-strong: #59636b;
        --hairline: #2a3037;

        --accent: #b83a72;
        --accent-ink: #e98fba;
        --accent-soft: #4d2639;
        --accent-premuto: #c44a7d;
        --accent-softer: #35202b;
        --on-accent: #ffffff;

        --rank-0: #e87aaa;
        --rank-1: #c58ab2;
        --rank-2: #ad9aa6;
        --rank-3: #95a0a8;
        --on-rank: #1a1216;
        --on-rank-pale: #1a1216;
        --on-rank-1: var(--on-rank-pale);
        --on-rank-2: var(--on-rank-pale);
        --on-rank-3: var(--on-rank-pale);

        /* Sul fondo scuro i vecchi grigi stavano a 1.1-1.3:1 sulla card: la
           cartina non si vedeva. Ora il contorno e' chiaro e regge >=3:1 su ogni
           riempimento a riposo; selezionata contro non selezionata 3.61:1. */
        --zone-bordo: #a8b1b8;      /* 7.61:1 sulla card */
        --zone-bg: #262d33;
        --zone-vuota: #343c43;
        --zone-none: #474f57;
        --zone-link: #7c4759;
        --zone-hover: #b83a72;
        --zone-sel: #a05f77;
        --zone-sel-bordo: #f2b3d0;

        --danger-ink: #f1959b;      /* 8.15:1 su --bg */
        --danger-fill: #dc3545;

        --ombra: rgba(0, 0, 0, .6);
        --ombra-card: rgba(233, 143, 186, .18);
    }
}

/* ===========================================================================
   Tavolozza "vineyard" — https://www.color-hex.com/color-palette/1021413
     #e5e498 giallo · #bea55d oro · #7e7745 oliva · #31273c prugna · #7e5361 rosa
   I cinque valori sono usati COM'E', senza risaturarli. Sono tinte tenui (croma
   0.04-0.10) e devono restare tali: e' il carattere della tavolozza.
   Il loro ordine di luminosita' e' gia' una rampa: prugna 0.29, rosa 0.49,
   oliva 0.56, oro 0.73, giallo 0.90 — da li' escono i quattro ranghi, e al buio
   la rampa si percorre al contrario.
   Derivati solo i valori che la tavolozza non ha: le tinte pallide per gli hover
   (--accent-soft, --accent-softer) e la zona di rimando al buio, ottenuti dal
   rosa abbassandone il croma.
   Ogni gradino porta il proprio inchiostro (--on-rank-1/2/3): oliva regge il
   bianco ma non l'inchiostro scuro, l'oro il contrario. */
[data-tavolozza="vineyard"] {
    --accent: #7e5361;  /* tavolozza: rosa, bianco sopra 6.37:1 */
    --accent-ink: #7e5361;  /* tavolozza: rosa, 6.37:1 sul bianco */
    --accent-soft: #f3d5de;  /* derivato, tinta pallida: non c'e' nella tavolozza */
    --accent-premuto: #31273c;  /* tavolozza: prugna, bianco sopra 14.13:1 */
    --accent-softer: #fbebf0;  /* derivato, idem */
    --on-accent: #ffffff;  /* derivato */
    --rank-0: #31273c;  /* tavolozza: prugna, bianco sopra 14.13:1 */
    --rank-1: #7e5361;  /* tavolozza: rosa */
    --rank-2: #7e7745;  /* tavolozza: oliva */
    --rank-3: #bea55d;  /* tavolozza: oro */
    --on-rank: #ffffff;  /* derivato */
    --on-rank-pale: #1b1220;  /* derivato */
    --on-rank-1: #ffffff;  /* derivato */
    --on-rank-2: #ffffff;  /* derivato */
    --on-rank-3: #1b1220;  /* derivato */
    --zone-link: #e5e498;  /* tavolozza: giallo */
    --zone-hover: #7e5361;  /* tavolozza: rosa */
    --zone-sel: #bea55d;  /* tavolozza: oro */
    --zone-sel-bordo: #31273c;  /* tavolozza: prugna */
}

[data-tavolozza="vineyard"][data-theme="dark"] {
    --accent: #7e5361;  /* tavolozza: rosa, bianco sopra 6.37:1 */
    --accent-ink: #bea55d;  /* tavolozza: oro, 6.89:1 sulla card */
    --accent-soft: #482b35;  /* derivato, tinta pallida: non c'e' nella tavolozza */
    --accent-premuto: #7e7745;  /* tavolozza: oliva, bianco sopra 4.55:1 */
    --accent-softer: #332026;  /* derivato, idem */
    --on-accent: #ffffff;  /* derivato */
    --rank-0: #e5e498;  /* tavolozza: giallo, inchiostro sopra 13.76:1 */
    --rank-1: #bea55d;  /* tavolozza: oro */
    --rank-2: #7e7745;  /* tavolozza: oliva */
    --rank-3: #7e5361;  /* tavolozza: rosa */
    --on-rank: #1b1220;  /* derivato */
    --on-rank-pale: #1b1220;  /* derivato */
    --on-rank-1: #1b1220;  /* derivato */
    --on-rank-2: #ffffff;  /* derivato */
    --on-rank-3: #ffffff;  /* derivato */
    --zone-link: #64424d;  /* derivato */
    --zone-hover: #bea55d;  /* tavolozza: oro — 3.46:1 sulle zone a riposo */
    --zone-sel: #7e5361;  /* tavolozza: rosa */
    --zone-sel-bordo: #31273c;  /* tavolozza: prugna — 5.87:1 sull'oro */
}

@media (prefers-color-scheme: dark) {
    [data-tavolozza="vineyard"]:not([data-theme="light"]) {
        --accent: #7e5361;  /* tavolozza: rosa, bianco sopra 6.37:1 */
        --accent-ink: #bea55d;  /* tavolozza: oro, 6.89:1 sulla card */
        --accent-soft: #482b35;  /* derivato, tinta pallida: non c'e' nella tavolozza */
        --accent-premuto: #7e7745;  /* tavolozza: oliva, bianco sopra 4.55:1 */
        --accent-softer: #332026;  /* derivato, idem */
        --on-accent: #ffffff;  /* derivato */
        --rank-0: #e5e498;  /* tavolozza: giallo, inchiostro sopra 13.76:1 */
        --rank-1: #bea55d;  /* tavolozza: oro */
        --rank-2: #7e7745;  /* tavolozza: oliva */
        --rank-3: #7e5361;  /* tavolozza: rosa */
        --on-rank: #1b1220;  /* derivato */
        --on-rank-pale: #1b1220;  /* derivato */
        --on-rank-1: #1b1220;  /* derivato */
        --on-rank-2: #ffffff;  /* derivato */
        --on-rank-3: #ffffff;  /* derivato */
        --zone-link: #64424d;  /* derivato */
        --zone-hover: #bea55d;  /* tavolozza: oro — 3.46:1 sulle zone a riposo */
        --zone-sel: #7e5361;  /* tavolozza: rosa */
        --zone-sel-bordo: #31273c;  /* tavolozza: prugna — 5.87:1 sull'oro */
}
}

/* Cruscotto: le due fette della ciambella e le barre di Forza. */
[data-tavolozza="vineyard"] .home {
    --forza-mat: #7e5361;  /* tavolozza: rosa */
    --forza-vis: #bea55d;  /* tavolozza: oro */
}

[data-tavolozza="vineyard"][data-theme="dark"] .home {
    --forza-mat: #e5e498;  /* tavolozza: giallo */
    --forza-vis: #7e7745;  /* tavolozza: oliva */
}

@media (prefers-color-scheme: dark) {
    [data-tavolozza="vineyard"]:not([data-theme="light"]) .home {
        --forza-mat: #e5e498;  /* tavolozza: giallo */
        --forza-vis: #7e7745;  /* tavolozza: oliva */
}
}

body { background: var(--bg); color: var(--ink); }

/* Termini agganciati agli Argomenti dentro le flashcard: devono leggersi
   come parte del testo, non come link, ma restare riconoscibili. */
.topic-tip {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-ink);
    cursor: help;
}
.topic-tip:hover, .topic-tip:focus {
    color: var(--accent-ink);
    border-bottom-style: solid;
}
.tooltip-inner { max-width: 320px; text-align: left; font-size: 0.8125rem; line-height: 1.45; }

/* Accordion condiviso da Studia e Argomenti: stessa resa in entrambe le pagine. */
/* Bootstrap evidenzia la voce attiva di un menu a tendina con il suo blu:
   qui stonerebbe, visto che tutto il resto segue l'accento vinoso. */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background: var(--accent);
    color: var(--on-accent);
}

/* Il pulsante primario non era mai stato vestito: restava il blu di Bootstrap
   (#0d6efd) in un'interfaccia magenta, su ventisei pulsanti in tredici pagine.
   Il blu passa l'AA per un soffio (4.5:1 esatto); l'accento sta a 6.2 in chiaro
   e 5.4 in scuro, quindi agganciarlo ai token guadagna anche in leggibilita'.

   Lo stato premuto va nella direzione giusta per ogni tema: piu' scuro in
   chiaro, piu' CHIARO in scuro. Scurire anche di notte avrebbe spinto il
   riempimento verso il fondo della pagina, rendendo il bordo del comando meno
   distinguibile invece che piu'. */
.btn-primary {
    --bs-btn-color: var(--on-accent);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent-premuto);
    --bs-btn-hover-border-color: var(--accent-premuto);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent-premuto);
    --bs-btn-active-border-color: var(--accent-premuto);
    --bs-btn-disabled-color: var(--on-accent);
    --bs-btn-disabled-bg: var(--accent-soft);
    --bs-btn-disabled-border-color: var(--accent-soft);
}
/* In tema scuro il riempimento sta a 2.93:1 sul pannello, appena sotto il 3:1
   che serve perche' il bordo di un comando si distingua dallo sfondo
   (WCAG 1.4.11). Un filo piu' chiaro lo riporta sopra senza toccare il colore
   del riempimento, che e' usato in mezza applicazione. */
:root[data-theme="dark"] .btn-primary { --bs-btn-border-color: var(--accent-ink); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary { --bs-btn-border-color: var(--accent-ink); }
}

/* Anche la paginazione era rimasta ai default di Bootstrap: numeri blu e
   pagina attiva blu, in tre pagine (Admin/Utenti, Admin/Domande, Database).
   Agganciandola ai token si allinea a tutto il resto in un posto solo.
   Numeri 6.20:1 in chiaro e 7.19 in scuro; la pastiglia attiva porta il bianco
   a 6.20 / 5.40 e si stacca dalla pagina a 6.20 / 3.07, quindi il suo bordo si
   distingue senza bisogno di un filo in piu'. */
.pagination {
    --bs-pagination-color: var(--accent-ink);
    --bs-pagination-bg: var(--surface);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-color: var(--accent-ink);
    --bs-pagination-hover-bg: var(--surface-3);
    --bs-pagination-hover-border-color: var(--line);
    --bs-pagination-focus-color: var(--accent-ink);
    --bs-pagination-focus-bg: var(--surface-3);
    --bs-pagination-active-color: var(--on-accent);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-disabled-color: var(--muted);
    --bs-pagination-disabled-bg: var(--surface);
    --bs-pagination-disabled-border-color: var(--line);
}

.u-pagine { margin-top: 12px; }
/* "1-25 di 63": dice dove si e' senza contare le pastiglie. */
.u-conteggio { font-size: 0.8125rem; color: var(--ink-2); margin: 0 0 8px; }

/* Bootstrap tiene lo stesso grigio (#6c757d) in chiaro e in scuro: sul fondo
   scuro il contrasto scende a 3.8:1, sotto la soglia AA di 4.5. Agganciamo i
   bottoni ai token dell'app, cosi' seguono il tema invece di ignorarlo. */
.btn-outline-secondary {
    --bs-btn-color: var(--ink-2);
    --bs-btn-border-color: var(--muted);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}

.text-danger { color: var(--danger-ink) !important; }
.text-primary { color: var(--accent-ink) !important; }

/* I collegamenti senza classe usavano il blu di Bootstrap (#0d6efd): 4.50:1 sul
   bianco, ma 4.38 sui pannelli tenui — sotto la soglia proprio dove capita piu'
   spesso di metterli. Agganciati all'accento dell'app: 6.2:1 in chiaro, 8.0 in
   scuro, e finalmente dello stesso colore di tutto il resto. */
:root {
    --bs-link-color: var(--accent-ink);
    --bs-link-hover-color: var(--accent);
    --bs-link-color-rgb: none;
}
a { color: var(--accent-ink); }
a:hover { color: var(--accent); }

.btn-outline-danger {
    --bs-btn-color: var(--danger-ink);
    --bs-btn-border-color: var(--danger-ink);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger-fill);
    --bs-btn-hover-border-color: var(--danger-fill);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--danger-fill);
    --bs-btn-active-border-color: var(--danger-fill);
}

/* btn-outline-dark userebbe #212529 anche sul tema scuro: invisibile. */
.btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: var(--line-strong);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-ink);
    --bs-btn-border-color: var(--accent-ink);
    --bs-btn-hover-color: var(--on-accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--on-accent);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
}

.st-blocco-h {
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 800;
    color: var(--accent-ink); border-left: 5px solid var(--accent); padding-left: 10px; margin: 0 0 12px;
}
.st-gruppo { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.st-gruppo > summary {
    cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; list-style: none;
}
.st-gruppo > summary::-webkit-details-marker { display: none; }
.st-gruppo > summary::before { content: "\25B8"; color: var(--accent-ink); font-size: 0.8125rem; }
.st-gruppo[open] > summary::before { content: "\25BE"; }
.st-gruppo[open] > summary { border-bottom: 1px solid var(--hairline); }
.st-g-nome { font-weight: 700; color: var(--title); font-size: 0.9375rem; }
.st-g-meta { font-size: 0.8125rem; color: var(--muted); }
.st-g-all { margin-left: auto; }

/* Variante a pulsante dello stesso gruppo. Serve dove accanto al titolo c'e'
   un comando: un <summary> e' gia' un pulsante, e un comando dentro un altro
   comando non si raggiunge in modo prevedibile (WCAG 4.1.2). Qui l'apertura
   e' un <button aria-expanded> e il collegamento gli sta accanto. */
.st-g-testa {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px;
}
.st-gruppo.aperto > .st-g-testa { border-bottom: 1px solid var(--hairline); }
.st-g-toggle {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: none; border: 0; padding: 0; margin: 0; text-align: left;
    cursor: pointer; color: inherit; font: inherit;
}
.st-g-toggle::before { content: "\25B8"; color: var(--accent-ink); font-size: 0.8125rem; }
.st-g-toggle[aria-expanded="true"]::before { content: "\25BE"; }
.st-g-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* Il nucleo d'esame in cima al selettore mazzi, e il segno sulle lezioni
   che ne fanno parte. Accento pieno: e' la scelta predefinita. */
.nucleo {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    border: 1px solid var(--line); border-left: 4px solid var(--accent-ink);
    border-radius: 8px; background: var(--surface-2); padding: 14px 16px;
}
.nucleo-testo { flex: 1 1 260px; min-width: 0; }
.nucleo-tag {
    display: inline-block; vertical-align: middle; margin-left: 6px;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 800;
    padding: 2px 7px; border-radius: 99px;
    background: var(--accent-softer); color: var(--accent-ink); border: 1px solid var(--line);
}
@media (max-width: 640px) {
    .st-g-all { margin-left: 0; }
    .st-g-toggle { flex-basis: 100%; }
    .st-g-nome { font-size: 0.9375rem; }
}

/* Menu dell'account (partial Pages/Shared/_MenuAccount.cshtml).
   Il pallino con l'iniziale fa da bersaglio riconoscibile a colpo d'occhio:
   e' la convenzione dell'avatar, e regge anche quando la voce e' la sola cosa
   a destra nella barra. Non e' un'immagine, quindi non c'e' niente da
   caricare e segue la tavolozza da sola. */
.acct-tog { display: inline-flex; align-items: center; gap: 8px; }
.acct-pallino {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--on-accent);
    font-size: 0.875rem; font-weight: 700; line-height: 1;
}
/* Il menu e' piu' largo del minimo di Bootstrap perche' la prima riga porta un
   indirizzo email: a 200px andrebbe a capo su quasi tutti gli indirizzi. */
.acct-menu { min-width: 260px; }
.acct-chi { padding-top: 8px; padding-bottom: 8px; }
.acct-mail {
    display: block; font-size: 0.875rem; font-weight: 700; color: var(--ink);
    overflow-wrap: anywhere;
}
.acct-vedi { display: block; font-size: 0.8125rem; color: var(--muted); margin-top: 1px; }
.acct-chi:hover .acct-vedi, .acct-chi:focus .acct-vedi { color: var(--accent-ink); }

/* Selettore del tema nel menu profilo: tre bersagli larghi, comodi al tocco. */
.tema-scelte { display: flex; gap: 4px; padding: 4px 12px 8px; }
.tema-scelta {
    flex: 1 1 0; text-align: center; font-size: 0.8125rem; font-weight: 700;
    padding: 7px 4px; border: 1px solid var(--line); border-radius: 6px;
    color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.tema-scelta:hover { border-color: var(--accent); color: var(--accent-ink); }
.tema-scelta.active {
    background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.tema-etichetta {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 800; color: var(--muted); padding: 6px 12px 2px;
}

/* ---------------------------------------------------------------------------
   2b. Accessibilità e utilità
   Le regole qui sotto hanno sostituito 48 attributi style="" sparsi nelle
   pagine. Un attributo inline non si può sovrascrivere da foglio di stile,
   non cambia col tema e non si può testare: quando serve una misura, si
   aggiunge una classe qui.
   --------------------------------------------------------------------------- */

/* Salto al contenuto: primo elemento focalizzabile, invisibile finché non
   riceve il fuoco. Chi naviga da tastiera non deve ripassare tutto il menu
   a ogni pagina. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    z-index: 1080;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--accent-ink);
    border-radius: 6px;
}

/* Il fuoco da tastiera deve essere sempre visibile, e con l'accento dell'app:
   l'anello predefinito di Bootstrap sparisce su alcuni fondi scuri. */
:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

/* Un <summary> è cliccabile: il puntatore lo diceva con nove style inline. */
summary {
    cursor: pointer;
}

/* Intestazione di tabella ordinabile. Era un <th onclick>, non raggiungibile
   da tastiera e senza ruolo: ora il bersaglio è un vero <button>. */
.u-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.u-sort:hover {
    text-decoration: underline;
}

/* misure ricorrenti */
.u-nota { font-size: 0.8125rem; }
.u-intro { font-size: 0.875rem; }
.u-input-sm { font-size: 0.875rem; }

.u-max-640 { max-width: 640px; }
.u-w-80 { width: 80px; }
.u-w-110 { width: 110px; }
.u-w-160 { width: 160px; }
.u-w-200 { width: 200px; }
.u-w-19 { width: 19%; }
.u-w-20 { width: 20%; }
.u-w-25 { width: 25%; }
.u-w-50 { width: 50%; }

/* Colonne di numeri: cifre a larghezza fissa perche' si allineino. */
.u-num { font-variant-numeric: tabular-nums; }

.u-max-200 { max-width: 200px; }
.u-max-300 { max-width: 300px; }
.u-max-320 { max-width: 320px; }
.u-max-480 { max-width: 480px; }
.u-max-520 { max-width: 520px; }

.u-facet-scroll { max-height: 170px; overflow: auto; }
.u-facet-item { min-width: 180px; }
.u-tabella-alta { max-height: 70vh; overflow: auto; }
.u-thead-sticky { position: sticky; top: 0; z-index: 1; }
/* Una colonna in piu' (ultimo accesso) e una tendina al posto delle pastiglie:
   la tabella scorre gia' dentro .table-responsive, serve solo lo spazio perche'
   "23 giorni fa" non vada a capo. */
.u-tabella-utenti { min-width: 760px; max-width: 980px; }
/* Email lunghe: vanno a capo nella cella invece di allargare la tabella. */
.u-email { overflow-wrap: anywhere; }
/* Un form per riga attorno alla tendina del livello: senza margine proprio,
   altrimenti la riga cresce di 16px solo per lui. */
.u-livello { margin: 0; }
.u-livello .form-select { min-width: 140px; }
/* Le azioni in fila, con aria in mezzo: prima i bottoni si toccavano, e su
   schermo stretto andavano a capo uno sotto l'altro senza spazio. */
.u-azioni { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.u-azioni form { margin: 0; }
.u-visto { white-space: nowrap; font-size: 0.875rem; color: var(--ink-2); }
/* "mai" e' un'assenza, non un valore: piu' tenue, ma sopra il 4.5:1 su --surface. */
.u-visto-mai { color: var(--muted); font-style: italic; }

/* Sessione di studio: domanda e risposta della carta. */
.sess-domanda {
    font-size: 1.6rem;
    font-weight: 600;
    white-space: pre-line;
}

.sess-risposta {
    font-size: 1.25rem;
    white-space: pre-line;
    text-align: left;
}

/* La stella dei preferiti. Bootstrap la colorava con text-warning (#ffc107):
   1.63:1 su fondo chiaro, illeggibile. L'accento dell'app passa in entrambi i temi. */
.sess-stella {
    line-height: 1;
    font-size: 1.1rem;
    color: var(--accent-ink);
}

/* Bersagli di tocco: sotto i 44px il dito sbaglia. Vale sui soli controlli
   compatti, per non gonfiare le tabelle fitte. */
@media (hover: none) and (pointer: coarse) {
    /* inline-flex perché min-height da solo non centra il testo in un inline-block */
    .btn,
    .u-sort,
    .st-g-toggle,
    .navbar-toggler {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-toggler {
        min-width: 44px;
    }

    /* La casella in sé resta della sua misura: è l'area attorno, insieme
       all'etichetta, a dare il bersaglio. Ingrandirla la deformerebbe. */
    .form-check-input {
        min-height: 24px;
        min-width: 24px;
    }

    .form-check {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Le due schede compilabili usano input nudi, fuori dai componenti di
       Bootstrap: senza questo restano alti 13-23px, sotto il minimo di 24. */
    .scheda-abb .ab-opt {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
    }
    .scheda-abb .ab-opt input[type="radio"] {
        width: 20px;
        height: 20px;
    }
    .scheda-punti .info input,
    .scheda-abb input[type="text"],
    .scheda-abb textarea {
        min-height: 28px;
    }

    /* I riquadri richiudibili "metodo" e "opzioni": la riga da toccare. */
    .st-gruppo > summary,
    .cartine .mp-item > summary,
    details > summary.text-muted {
        min-height: 32px;
    }
}

/* ---------------------------------------------------------------------------
   3. Argomenti — indice
   da Pages/Argomenti/Index.cshtml
   --------------------------------------------------------------------------- */
/* L'accordion (.st-gruppo, .st-blocco-h) e' definito nel layout: qui solo le tessere. */
.argomenti .arg-card{
  height:100%; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:12px 14px; text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.argomenti .arg-card:hover{ border-color:var(--accent-ink); box-shadow:0 2px 10px var(--ombra-card); }
.argomenti .arg-card h3{ font-size:0.9375rem; font-weight:700; color:var(--title); margin:0 0 5px; }
.argomenti .arg-card p{ font-size:0.8125rem; color:var(--ink-2); margin:0; line-height:1.45; }

/* ---------------------------------------------------------------------------
   3. Argomenti — pagina
   da Pages/Argomenti/Topic.cshtml
   --------------------------------------------------------------------------- */
.argomento{ max-width:var(--col-lettura); }
.argomento .arg-kicker{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.6px; font-weight:800; color:var(--accent-ink); margin-bottom:4px;
}
.argomento h1{
  font-size:2.125rem; line-height:1.12; letter-spacing:-.015em; color:var(--ink); font-weight:800;
  border-left:6px solid var(--accent-ink); padding-left:14px; margin-bottom:14px;
}
.argomento .arg-lead{
  background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent-ink);
  border-radius:8px; padding:12px 16px; font-size:0.9375rem; line-height:1.55; margin-bottom:20px;
}
.argomento .arg-body{ font-size:1rem; line-height:1.65; }
.argomento .arg-body h2{
  font-size:0.875rem; text-transform:uppercase; letter-spacing:.4px; font-weight:800;
  color:var(--accent-ink); margin:22px 0 8px;
}
.argomento .arg-body ul{ margin:0 0 12px 20px; padding:0; }
.argomento .arg-body li{ margin-bottom:5px; }
.argomento .arg-body table{ width:100%; border-collapse:collapse; margin:12px 0; }
.argomento .arg-body th, .argomento .arg-body td{
  border:1px solid var(--line-strong); padding:6px 9px; font-size:0.875rem; vertical-align:top; text-align:left;
}
.argomento .arg-body th{ background:var(--surface-3); font-weight:700; }
.argomento .arg-fonti{ margin-top:26px; font-size:0.8125rem; color:var(--muted); }
.argomento .arg-fonti a{ color:var(--muted); }
.argomento .arg-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }

@media (max-width:640px){
  .argomento h1{ font-size:1.5625rem; }
  .argomento .arg-body table{ display:block; overflow-x:auto; }
}

/* ---------------------------------------------------------------------------
   3. Esame — indice
   da Pages/Esame/Index.cshtml
   --------------------------------------------------------------------------- */
/* L'accordion (.st-gruppo, .st-blocco-h) e' definito nel layout: qui solo le tessere. */
.esame-idx .es-card{
  height:100%; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:12px 14px; text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.esame-idx .es-card:hover{ border-color:var(--accent-ink); box-shadow:0 2px 10px var(--ombra-card); }
.esame-idx .es-card h3{ font-size:0.9375rem; font-weight:700; color:var(--title); margin:0 0 5px; }
.esame-idx .es-card p{ font-size:0.8125rem; color:var(--ink-2); margin:0; line-height:1.45; }

.esame-idx .es-intro{
  background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent-ink);
  border-radius:8px; padding:12px 16px; font-size:0.9375rem; line-height:1.55; margin-bottom:22px;
}
.esame-idx .es-intro p{ margin:0 0 8px; }
.esame-idx .es-intro p:last-child{ margin-bottom:0; }

/* ---------------------------------------------------------------------------
   3. Esame — pagina
   da Pages/Esame/Pagina.cshtml
   --------------------------------------------------------------------------- */
.guida{ max-width:var(--col-lettura); }
.guida .g-kicker{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.6px; font-weight:800;
  color:var(--accent-ink); margin-bottom:4px;
}
.guida h1{
  font-size:2.125rem; line-height:1.12; letter-spacing:-.015em; color:var(--ink); font-weight:800;
  border-left:6px solid var(--accent-ink); padding-left:14px; margin-bottom:12px;
}
.guida .g-fonte{
  display:inline-block; font-size:0.75rem; text-transform:uppercase; letter-spacing:.5px;
  font-weight:800; padding:3px 9px; border-radius:99px; margin-bottom:16px;
  background:var(--accent-softer); color:var(--accent-ink); border:1px solid var(--line);
}

/* "In breve": la versione corta della pagina, pensata per essere letta da sola. */
.guida .g-breve{
  background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--accent-ink);
  border-radius:8px; padding:14px 18px 14px 16px; margin-bottom:22px;
}
.guida .g-breve h2{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.6px; font-weight:800;
  color:var(--muted); margin:0 0 9px;
}
.guida .g-breve ul{ margin:0; padding-left:18px; }
.guida .g-breve li{ font-size:0.9375rem; line-height:1.5; margin-bottom:7px; }
.guida .g-breve li:last-child{ margin-bottom:0; }

.guida .g-body{ font-size:1rem; line-height:1.65; }
.guida .g-body h3{
  font-size:0.875rem; text-transform:uppercase; letter-spacing:.4px; font-weight:800;
  color:var(--accent-ink); margin:24px 0 8px;
}
.guida .g-body ul, .guida .g-body ol{ margin:0 0 12px 20px; padding:0; }
.guida .g-body li{ margin-bottom:5px; }
.guida .g-body table{ width:100%; border-collapse:collapse; margin:12px 0; }
.guida .g-body th, .guida .g-body td{
  border:1px solid var(--line-strong); padding:6px 9px; font-size:0.875rem; vertical-align:top; text-align:left;
}
.guida .g-body th{ background:var(--surface-3); font-weight:700; }

/* Strumenti: i rimandi alle parti del sito dove il contenuto si allena. */
.guida .g-strum{ margin-top:28px; }
.guida .g-strum h2{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.6px; font-weight:800;
  color:var(--muted); margin:0 0 10px;
}
.guida .g-strum a{
  display:block; border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:10px 13px; text-decoration:none; color:inherit; height:100%;
}
.guida .g-strum a:hover{ border-color:var(--accent-ink); box-shadow:0 2px 10px var(--ombra-card); }
.guida .g-strum strong{ display:block; font-size:0.875rem; color:var(--title); margin-bottom:3px; }
.guida .g-strum span{ font-size:0.8125rem; color:var(--ink-2); line-height:1.45; }

.guida .g-fonti{ margin-top:26px; font-size:0.8125rem; color:var(--muted); }
.guida .g-fonti a{ color:var(--muted); }
.guida .g-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }

@media (max-width:640px){
  .guida h1{ font-size:1.5625rem; }
  .guida .g-body table{ display:block; overflow-x:auto; }
}

/* ---------------------------------------------------------------------------
   3. Scorri
   da Pages/Scorri/Index.cshtml
   --------------------------------------------------------------------------- */
.scorri{ --accent:var(--accent-ink); --title:var(--title); --line:var(--line); }
.scorri *{ box-sizing:border-box; }

.scorri .ws-top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 8px; }
.scorri h1{
  font-size:1.6875rem; color:var(--ink); font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; border-left:6px solid var(--accent); padding-left:12px; margin:0;
}
.scorri .ws-sub{ font-size:0.8125rem; color:var(--muted); }
.scorri .ws-conta{ margin-left:auto; font-size:0.8125rem; color:var(--muted); white-space:nowrap; }

/* Selettore del serbatoio: stesso accordion di Studia e Argomenti. */
.scorri .ws-pool{ margin:0 0 10px; }
.scorri .ws-rapidi{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 14px 0; }
.scorri .ws-rapido{
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px 12px;
  font-size:0.8125rem; font-weight:700; cursor:pointer; color:var(--ink-2);
}
.scorri .ws-rapido:hover{ border-color:var(--accent); color:var(--accent); }
.scorri .ws-lezioni{ display:flex; flex-wrap:wrap; gap:2px 18px; padding:10px 14px 14px; }
.scorri .ws-lez{ min-width:210px; font-size:0.875rem; }
.scorri .ws-azioni{ padding:0 14px 14px; }

/* Il feed: una carta per schermata, con aggancio allo scorrimento. */
.scorri .ws-feed{
  height:calc(100vh - 210px);
  height:calc(100dvh - 210px);
  /* Colonna stretta anche sul desktop: a tutta pagina la riga diventa
     lunghissima e la lettura a colpo d'occhio non funziona più. */
  max-width:var(--col-lettura); margin:0 auto;
  overflow-y:auto; overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-2);
}
.scorri .ws-card{
  height:100%; scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:center;
  padding:26px 30px; border-bottom:1px solid var(--hairline); position:relative;
}
.scorri .ws-lezione{
  position:absolute; top:16px; left:30px; font-size:0.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color:var(--accent);
}
/* La domanda dà il contesto: senza, una risposta che comincia per "No."
   o "Dipende" non vuol dire niente. Sta sopra e in tono minore, perché
   il protagonista della carta resta la risposta. */
.scorri .ws-domanda{
  font-size:clamp(14px, 1.1vh + .5vw, 17px); line-height:1.45; font-weight:600;
  color:var(--muted); margin:0 0 12px; max-width:52ch;
  padding-left:12px; border-left:3px solid var(--accent-softer);
}

/* La prima riga della risposta è la nozione; il resto è il perché. */
.scorri .ws-lead{
  font-size:clamp(19px, 2.2vh + 1vw, 30px); line-height:1.32; font-weight:700;
  color:var(--ink); margin:0; max-width:46ch;
}
.scorri .ws-body{
  font-size:clamp(14px, 1.2vh + .5vw, 17px); line-height:1.6; color:var(--ink-2);
  margin:14px 0 0; max-width:60ch;
}
.scorri .ws-fine{
  height:100%; scroll-snap-align:center; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center;
  padding:26px; color:var(--muted); font-size:0.9375rem;
}
.scorri .ws-vuoto{ padding:40px 20px; text-align:center; color:var(--muted); font-size:0.9375rem; }
.scorri .ws-hint{ font-size:0.75rem; color:var(--muted); margin:8px 0 0; text-align:center; }

@media (max-width:640px){
  .scorri .ws-feed{ height:calc(100vh - 250px); height:calc(100dvh - 250px); }
  .scorri .ws-card{ padding:22px 20px; }
  .scorri .ws-lezione{ left:20px; }
}

/* ---------------------------------------------------------------------------
   3. Cartine
   da Pages/Cartine/Index.cshtml
   --------------------------------------------------------------------------- */
/* Nomi locali storici mappati sulla tavolozza globale: la pagina non possiede
   piu' colori propri, quindi segue il tema senza doppie definizioni. */
.cartine{
  --line:var(--line-strong); --hdr:var(--surface-3); --title:var(--title);
  --docg:var(--rank-0); --doc:var(--rank-1); --igt:var(--rank-2);
  --altro:var(--rank-3); --none:var(--zone-none);
}
.cartine *{ box-sizing:border-box; }
.cartine h1{
  font-size:1.8125rem; color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.5px;
  border-left:6px solid var(--accent-ink); padding-left:14px; margin:0 0 4px;
}

.cartine .mp-paesi{ display:flex; gap:8px; margin:0 0 6px; flex-wrap:wrap; }
.cartine .mp-paese{
  border:1px solid var(--line); border-radius:999px; padding:4px 14px; font-size:0.875rem;
  font-weight:700; color:var(--ink-2); text-decoration:none; background:var(--surface); white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
.cartine .mp-bandiera{
  flex:0 0 auto; width:18px; height:13px; display:block;
  border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.cartine .mp-paese:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.cartine .mp-paese.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cartine .mp-nota{ font-size:0.8125rem; color:var(--muted); margin:0 0 10px; }

/* Elenco delle zone: sulle carte a livello di paese alcuni bersagli sono
   minuscoli (Lussemburgo, Uruguay), quindi devono essere raggiungibili anche
   senza colpirli sulla mappa. */
.cartine .mp-vai{ margin:0 0 10px; }
.cartine .mp-vai > summary{
  cursor:pointer; font-size:0.8125rem; color:var(--muted); list-style:none; display:inline-flex;
  align-items:center; gap:6px;
}
.cartine .mp-vai > summary::-webkit-details-marker{ display:none; }
.cartine .mp-vai > summary::before{ content:"\25B8"; color:var(--accent-ink); font-size:0.75rem; }
.cartine .mp-vai[open] > summary::before{ content:"\25BE"; }
.cartine .mp-vai-lista{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }

.cartine .mp-grid{ display:flex; gap:18px; align-items:flex-start; }
.cartine .mp-map{ flex:0 0 42%; max-width:42%; position:sticky; top:12px; }

/* Il profilo della regione: quattro voci, etichetta sopra e testo sotto.
   Una <dl> e non dei paragrafi, perché sono coppie termine-descrizione e
   con lo screen reader si scorrono come tali. */
.cartine .mp-profilo{
  border:1px solid var(--line); border-left:4px solid var(--accent-ink);
  border-radius:8px; background:var(--surface-2); padding:12px 14px; margin-bottom:12px;
}
.cartine .mp-profilo-h{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.6px; font-weight:800;
  color:var(--accent-ink); margin:0 0 8px;
}
.cartine .mp-profilo-dl{ margin:0; }
.cartine .mp-profilo-dl > div + div{ margin-top:8px; }
.cartine .mp-profilo-dl dt{
  font-size:0.75rem; text-transform:uppercase; letter-spacing:.4px;
  font-weight:800; color:var(--muted); margin:0 0 1px;
}
.cartine .mp-profilo-dl dd{ margin:0; font-size:0.875rem; line-height:1.5; color:var(--ink); }
.cartine .mp-profilo-fonte{
  margin:10px 0 0; font-size:0.75rem; color:var(--muted); font-style:italic;
}
.cartine .mp-side{ flex:1 1 auto; min-width:0; }

.cartine .mp-map > svg{ width:100%; height:auto; display:block; }
/* aree senza denominazioni nel bank: disegnate ma spente e non interattive */
.cartine .bg path{ fill:var(--zone-bg); stroke:var(--zone-bordo); stroke-width:1.1; pointer-events:none; }
.cartine .mp-riquadro{ fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:3 3; pointer-events:none; }

/* una zona = uno o piu' path (l'unione di piu' suddivisioni amministrative) */
.cartine .reg{ cursor:pointer; outline:none; }
.cartine .reg path{ fill:var(--none); stroke:var(--zone-bordo); stroke-width:1.1; transition:fill .12s; }
.cartine .reg:not(.empty):hover path{ fill:var(--zone-hover); }
/* la selezionata tiene il magenta pieno: a separarla dalle vicine e' l'anello
   chiaro (4.81:1 sul riempimento delle altre zone), non la luminosita' */
.cartine .reg.on path{ fill:var(--zone-sel); stroke:var(--zone-sel-bordo); stroke-width:2.2; }
/* dopo .on, se no il focus sulla zona selezionata non si vedrebbe */
.cartine .reg:focus-visible path{ stroke:var(--accent-ink); stroke-width:2.4; }
/* zona senza denominazioni: spenta, non un riempimento a opacità ridotta, che
   trascinava sotto la soglia anche il contorno */
.cartine .reg.empty{ cursor:default; }
.cartine .reg.empty path{ fill:var(--zone-vuota); }
/* paese che ha una carta propria: si vede che è cliccabile ma porta altrove */
.cartine .reg.link path{ fill:var(--zone-link); }
.cartine .reg.link:hover path{ fill:var(--zone-hover); }

.cartine .mp-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:0.8125rem; color:var(--ink-2); margin-top:8px; }
.cartine .mp-legend i{
  width:12px; height:12px; border-radius:3px; display:inline-block;
  vertical-align:-2px; margin-right:5px; border:1px solid var(--zone-bordo);
}
/* le tre pastiglie erano nel markup ma senza regola: la legenda usciva vuota */
.cartine .mp-legend i.is-sel{ background:var(--zone-sel); }
.cartine .mp-legend i.is-hover{ background:var(--zone-hover); }
.cartine .mp-legend i.is-nodata{ background:var(--zone-vuota); }

/* pannello destro */
.cartine .mp-head{ border-bottom:2px solid var(--accent-ink); padding-bottom:8px; margin-bottom:10px; }
.cartine .mp-head h2{ font-size:1.25rem; font-weight:800; color:var(--title); margin:0; }
.cartine .mp-head .sub{ font-size:0.8125rem; color:var(--ink-2); }
.cartine .mp-chips{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 12px; }
.cartine .mp-chip{
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:3px 11px;
  font-size:0.8125rem; font-weight:700; cursor:pointer; color:var(--ink-2);
}
.cartine .mp-chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.cartine .mp-search{ width:100%; font-size:0.875rem; padding:6px 10px; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; }

.cartine .mp-list{ max-height:640px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.cartine .mp-item{ border-bottom:1px solid var(--hairline); padding:8px 12px; }
.cartine .mp-item:last-child{ border-bottom:0; }
.cartine .mp-item summary{ cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:8px; }
.cartine .mp-item summary::-webkit-details-marker{ display:none; }
.cartine .mp-nome{ font-weight:700; font-size:0.875rem; color:var(--ink); flex:1 1 auto; }
.cartine .mp-tipo{
  font-size:0.75rem; font-weight:800; letter-spacing:.4px; padding:2px 7px; border-radius:4px; color:var(--on-rank); flex:0 0 auto;
}
/* colore per rango della classificazione, non per sigla: ogni paese usa la propria */
.cartine .mp-tipo.r0{ background:var(--docg); }
.cartine .mp-tipo.r1{ background:var(--doc); color:var(--on-rank-1); }
.cartine .mp-tipo.r2{ background:var(--igt); color:var(--on-rank-2); }
.cartine .mp-tipo.r3{ background:var(--altro); color:var(--on-rank-3); }
/* intestazione di gruppo: sulle carte per paese separa le regioni vinicole */
.cartine .mp-gruppo{
  position:sticky; top:0; z-index:1; background:var(--hdr); border-bottom:1px solid var(--line);
  padding:5px 12px; font-size:0.75rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--title);
}
.cartine .mp-det{ font-size:0.8125rem; color:var(--ink-2); line-height:1.5; padding:6px 0 2px 2px; }
.cartine .mp-det b{ color:var(--title); font-weight:700; }
.cartine .mp-empty{ padding:18px; color:var(--muted); font-size:0.875rem; text-align:center; }
.cartine .mp-vaialtra{ display:block; margin-top:10px; font-size:0.875rem; font-weight:700; }
.cartine .mp-credit{ font-size:0.75rem; color:var(--muted); margin-top:10px; }
.cartine .mp-credit a{ color:var(--muted); }

@media (max-width:860px){
  .cartine .mp-grid{ flex-direction:column; }
  .cartine .mp-map, .cartine .mp-side{ flex:1 1 auto; max-width:100%; width:100%; position:static; }
  .cartine .mp-map{ max-width:480px; margin:0 auto; }
  .cartine .mp-list{ max-height:none; }
}

/* ---------------------------------------------------------------------------
   3. Scheda di degustazione
   da Pages/Schede/Degustazione.cshtml
   --------------------------------------------------------------------------- */
/* ------------------------------------------------------------------
   I colori "di servizio" (fondo, bordi, testo) vengono dalla tavolozza
   globale del layout, cosi seguono il tema. Restano locali soltanto i
   colori della scheda di degustazione, che portano significato: la scheda
   deve restare riconoscibile in entrambi i temi.
   ------------------------------------------------------------------ */
.scheda-deg {
  --slate:#5c6670; --grey-hdr:#c3cdd3; --purple:#5a3a5e; --purple-light:#b6a3bb;
  --green:#8bb63a; --green-light:#d9e6b3; --magenta:#c72a70; --pink:#e58bb0;
  --pink-pale:#f6d9e4; --pink-paler:#fbeef4;
  /* intestazioni figurative: blu della Fittezza, arancio della Vivacita */
  --blue:#5b9bd5; --orange:#ed9b40;
  /* il magenta come riempimento resta saturo (ci va sopra il bianco);
     come testo va schiarito sul tema scuro, altrimenti non si legge */
  --magenta-ink:#c72a70;
  /* Verde, blu, arancio e rosa sono tinte chiare: il bianco sopra si ferma
     fra 2.2 e 3.0:1. Portano significato, quindi resta il riempimento e
     cambia l'inchiostro (5.6-7.4:1). Viola, magenta e ardesia tengono il
     bianco: li' il contrasto e' gia' 5.3-9.5:1. */
  --on-fill-chiaro:#1b1f23;
  color:var(--ink);
}

/* Tema scuro: i riempimenti a tinta piena sopravvivono, le tinte pallide
   diventano tinte scure dello stesso tono, il magenta-testo si schiarisce. */
:root[data-theme="dark"] .scheda-deg {
  --grey-hdr:#384349; --purple:#7f5185; --purple-light:#48394c;
  --green-light:#3c4328; --magenta-ink:#ee7fae;
  --pink-pale:#4a2a36; --pink-paler:#3a222c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scheda-deg {
    --grey-hdr:#384349; --purple:#7f5185; --purple-light:#48394c;
    --green-light:#3c4328; --magenta-ink:#ee7fae;
    --pink-pale:#4a2a36; --pink-paler:#3a222c;
  }
}
.scheda-deg h1.sc-title {
  font-size:1.625rem; line-height:1.15; color:var(--title); text-transform:uppercase;
  letter-spacing:.5px; border-left:6px solid var(--purple); padding-left:14px; font-weight:800;
}
.scheda-deg .sc-section { display:flex; margin-bottom:22px; border:1px solid var(--line-strong); }
.scheda-deg .sc-side {
  background:var(--slate); color:var(--on-accent); writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:center; font-weight:800; font-size:0.9375rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:12px 6px; min-width:42px; display:flex; align-items:center; justify-content:center; line-height:1.3;
}
.scheda-deg .sc-content { flex:1; min-width:0; }
.scheda-deg .sc-scroll { overflow-x:auto; }
/* Le regioni scorrevoli prendono tabindex="0" nel markup: qui il fuoco va
   reso visibile, altrimenti chi naviga da tastiera non sa dove si trova. */
.scheda-deg .sc-scroll:focus-visible,
.table-responsive:focus-visible {
  outline:2px solid var(--accent-ink); outline-offset:2px;
}
.scheda-deg .sc-mobile-only { display:none; }
.scheda-deg table { width:100%; border-collapse:collapse; table-layout:fixed; min-width:520px; }
.scheda-deg td, .scheda-deg th { border:1px solid var(--line-strong); text-align:center; padding:5px 6px; font-size:0.875rem; background:var(--surface); }
.scheda-deg th { font-weight:700; }
.scheda-deg .hdr { background:var(--grey-hdr); }
.scheda-deg .hdr-purple { background:var(--purple); color:var(--on-accent); }
.scheda-deg .hdr-blue { background:var(--blue); color:var(--on-fill-chiaro); }
.scheda-deg .hdr-orange { background:var(--orange); color:var(--on-fill-chiaro); }
.scheda-deg .purple-cell { background:var(--purple-light); }
.scheda-deg .hdr-green { background:var(--green); color:var(--on-fill-chiaro); }
.scheda-deg .green-cell { background:var(--green-light); }
.scheda-deg .hdr-magenta { background:var(--magenta); color:var(--on-accent); }
.scheda-deg .pink-cell { background:var(--pink); color:var(--on-fill-chiaro); }
.scheda-deg .hdr-pinkpale { background:var(--pink-pale); }

/* Quando la classe di riempimento sta sulla <tr> e non sulle celle, il colore
   del testo si eredita ma lo sfondo no: ogni cella tiene il proprio, che arriva
   dalla regola generale su td/th (var(--surface)). Sul tema chiaro non si
   notava — inchiostro scuro su bianco — ma sul tema scuro diventava #1b1f23 su
   #1b1f23: testo invisibile. Qui lo sfondo scende anche alle celle. */
.scheda-deg tr.hdr > th,         .scheda-deg tr.hdr > td         { background:var(--grey-hdr); }
.scheda-deg tr.hdr-purple > th,  .scheda-deg tr.hdr-purple > td  { background:var(--purple); color:var(--on-accent); }
.scheda-deg tr.hdr-magenta > th, .scheda-deg tr.hdr-magenta > td { background:var(--magenta); color:var(--on-accent); }
.scheda-deg tr.hdr-blue > th,    .scheda-deg tr.hdr-blue > td    { background:var(--blue); color:var(--on-fill-chiaro); }
.scheda-deg tr.hdr-orange > th,  .scheda-deg tr.hdr-orange > td  { background:var(--orange); color:var(--on-fill-chiaro); }
.scheda-deg tr.hdr-green > th,   .scheda-deg tr.hdr-green > td   { background:var(--green); color:var(--on-fill-chiaro); }
.scheda-deg .pinkpale-cell { background:var(--pink-paler); }
@media (max-width:640px) {
  .scheda-deg .sc-section { flex-direction:column; }
  .scheda-deg .sc-side {
    writing-mode:horizontal-tb; transform:none; min-width:0; width:100%;
    padding:7px 10px; font-size:0.8125rem; letter-spacing:1px;
  }
  .scheda-deg table { min-width:0; }
  .scheda-deg .sc-desktop-only { display:none; }
  .scheda-deg .sc-mobile-only { display:block; }
  .scheda-deg td, .scheda-deg th { font-size:0.75rem; padding:4px 3px; }
  .scheda-deg h1.sc-title { font-size:1.125rem; }
}

/* guida "come si compila" */
.scheda-deg .sc-guida{ border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.scheda-deg .sc-guida > button{
  width:100%; text-align:left; background:none; border:0; padding:12px 16px;
  font-weight:700; color:var(--title); font-size:0.9375rem;
}
.scheda-deg .sc-guida > button:after{ content:" \25BE"; color:var(--magenta-ink); }
.scheda-deg .sc-guida > button[aria-expanded="true"]:after{ content:" \25B4"; }
.scheda-deg .sc-guida .sc-guida-body{ padding:0 16px 14px; font-size:0.875rem; line-height:1.55; }
.scheda-deg .sc-guida h6{
  font-size:0.8125rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--magenta-ink); font-weight:800; margin:14px 0 6px;
}
.scheda-deg .sc-guida ul{ margin:0 0 0 18px; padding:0; }
.scheda-deg .sc-guida li{ margin-bottom:4px; }
.scheda-deg .sc-guida p{ margin-bottom:8px; }

/* celle selezionabili */
.scheda-deg td.sc-opt{ cursor:pointer; user-select:none; position:relative; }
.scheda-deg td.sc-opt:hover{ box-shadow:inset 0 0 0 2px var(--pink); }
.scheda-deg td.sc-opt:focus-visible{ outline:2px solid var(--magenta-ink); outline-offset:-2px; }
.scheda-deg td.sc-opt.is-on{ background:var(--magenta); color:var(--on-accent); font-weight:700; }
.scheda-deg td.sc-opt.is-on:before{ content:"\2713\00a0"; }

/* barra azioni + riepilogo */
.scheda-deg .sc-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.scheda-deg .sc-riepilogo{
  border:1px solid var(--line); border-radius:8px; background:var(--surface-2); padding:14px 16px; margin-top:4px;
}
.scheda-deg .sc-riepilogo h6{
  font-size:0.8125rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--magenta-ink); font-weight:800; margin:0 0 8px;
}
.scheda-deg .sc-riepilogo .sc-sec{ margin-bottom:10px; font-size:0.875rem; line-height:1.5; }
.scheda-deg .sc-riepilogo .sc-sec:last-child{ margin-bottom:0; }
.scheda-deg .sc-riepilogo .sc-sec b{ color:var(--title); display:block; font-size:0.75rem;
  text-transform:uppercase; letter-spacing:.3px; margin-bottom:2px; }
.scheda-deg .sc-riepilogo .k{ color:var(--ink-2); }
.scheda-deg .sc-riepilogo .v{ font-weight:700; }
.scheda-deg .sc-riepilogo .sc-empty{ color:var(--muted); font-size:0.875rem; margin:0; }

/* ---------------------------------------------------------------------------
   3. Scheda di abbinamento
   da Pages/Schede/Abbinamento.cshtml
   --------------------------------------------------------------------------- */
/* ------------------------------------------------------------------
   Fondi, bordi e testi vengono dalla tavolozza globale del layout, cosi
   seguono il tema. Restano locali i colori che portano significato: la
   coppia vino/cibo e il reticolo del diagramma.
   ------------------------------------------------------------------ */
.scheda-abb{
  --slate:#5c6670;
  --vino:#b02a6b; --cibo:#2f7d4f;
  /* reticolo del diagramma: circonferenze e rette sottili */
  --grid:#c9d0d6;
  color:var(--ink);
}

/* Tema scuro: vino e cibo restano una coppia riconoscibile (vinaccia / verde)
   ma si schiariscono, perche' servono anche da testo; il reticolo diventa un
   grigio scuro, altrimenti i tratti sottili spariscono. */
:root[data-theme="dark"] .scheda-abb{
  --vino:#e07aa8; --cibo:#4faa72; --grid:#454e56;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scheda-abb{
    --vino:#e07aa8; --cibo:#4faa72; --grid:#454e56;
  }
}
.scheda-abb * { box-sizing:border-box; }
.scheda-abb .sp-title{
  border-left:6px solid var(--accent-ink); padding-left:14px; color:var(--title);
  text-transform:uppercase; font-weight:800; line-height:1.1; letter-spacing:.5px; font-size:1.375rem; margin:0;
}

/* legenda */
.scheda-abb .ab-carica > div{ min-width:0; }
.scheda-abb #abbPiatto{ width:100%; max-width:420px; min-width:0; }
.scheda-abb .ab-carica label{ font-size:0.8125rem; font-weight:700; color:var(--title); }
.scheda-abb .ab-spiega{
  margin-top:8px; padding:10px 12px; border:1px solid var(--line); border-left:4px solid var(--accent-ink);
  border-radius:6px; background:var(--surface-2); font-size:0.875rem; line-height:1.5; color:var(--ink-2);
}
.scheda-abb .ab-spiega b{ color:var(--title); }
.scheda-abb .ab-spiega .ab-den{ display:block; margin-top:6px; font-size:0.8125rem; color:var(--muted); }
.scheda-abb .ab-legenda{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:0.875rem; }
.scheda-abb .ab-legenda span{ display:inline-flex; align-items:center; gap:6px; }
.scheda-abb .ab-swatch{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.scheda-abb .ab-swatch.v{ background:var(--vino); }
.scheda-abb .ab-swatch.c{ background:var(--cibo); }

/* diagramma */
.scheda-abb .ab-wrap{ border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); padding:6px; }
.scheda-abb svg{ width:100%; height:auto; display:block; }
.scheda-abb .ring{ fill:none; stroke:var(--grid); stroke-width:1; }
.scheda-abb .ring.major{ stroke:var(--line-strong); }
.scheda-abb .spoke{ stroke:var(--grid); stroke-width:1; }
.scheda-abb .lbl-v{ font-size:11px; font-weight:800; fill:var(--vino); text-transform:uppercase; letter-spacing:.2px; }
.scheda-abb .lbl-c{ font-size:11px; font-weight:600; fill:var(--cibo); }
.scheda-abb .scale-num{ font-size:9px; fill:var(--muted); }
.scheda-abb .poly-v{ fill:var(--vino); fill-opacity:.14; stroke:var(--vino); stroke-width:2; stroke-linejoin:round; }
.scheda-abb .poly-c{ fill:var(--cibo); fill-opacity:.14; stroke:var(--cibo); stroke-width:2; stroke-linejoin:round;
                     stroke-dasharray:5 3; }
.scheda-abb .dot-v{ fill:var(--vino); }
.scheda-abb .dot-c{ fill:var(--cibo); }

/* pannello valori */
.scheda-abb .ab-panel{ border:1px solid var(--line-strong); border-radius:8px; background:var(--surface-2); padding:12px 14px; }
.scheda-abb .ab-panel h6{
  font-size:0.8125rem; text-transform:uppercase; letter-spacing:.4px; font-weight:800; margin:0 0 8px;
}
.scheda-abb .ab-panel h6.v{ color:var(--vino); }
.scheda-abb .ab-panel h6.c{ color:var(--cibo); }
.scheda-abb .ab-row{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.scheda-abb .ab-row label{ flex:1; font-size:0.8125rem; margin:0; }
.scheda-abb .ab-row input[type=range]{ flex:0 0 96px; }
.scheda-abb .ab-val{ flex:0 0 22px; text-align:right; font-weight:800; font-size:0.8125rem; font-variant-numeric:tabular-nums; }
.scheda-abb .ab-row.v .ab-val{ color:var(--vino); }
.scheda-abb .ab-row.c .ab-val{ color:var(--cibo); }

/* righe finali */
.scheda-abb table.ab-fin{ width:100%; border-collapse:collapse; }
.scheda-abb table.ab-fin td{ border:1px solid var(--line-strong); padding:7px 9px; font-size:0.875rem; }
.scheda-abb table.ab-fin td.k{ background:var(--surface-3); font-weight:800; text-transform:uppercase;
                               font-size:0.75rem; letter-spacing:.3px; width:26%; }
.scheda-abb table.ab-fin label{ margin:0 16px 0 4px; font-size:0.875rem; }

/* guida */
.scheda-abb .sp-guida{ border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.scheda-abb .sp-guida > button{
  width:100%; text-align:left; background:none; border:0; padding:12px 16px;
  font-weight:700; color:var(--title); font-size:0.9375rem;
}
.scheda-abb .sp-guida > button:after{ content:" \25BE"; color:var(--accent-ink); }
.scheda-abb .sp-guida > button[aria-expanded="true"]:after{ content:" \25B4"; }
.scheda-abb .sp-guida .sp-guida-body{ padding:0 16px 14px; font-size:0.875rem; line-height:1.55; }
.scheda-abb .sp-guida h6{
  font-size:0.8125rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--accent-ink); font-weight:800; margin:14px 0 6px;
}
.scheda-abb .sp-guida ul{ margin:0 0 0 18px; padding:0; }
.scheda-abb .sp-guida li{ margin-bottom:4px; }
.scheda-abb .sp-guida table.gt{ width:100%; border-collapse:collapse; margin:8px 0; }
.scheda-abb .sp-guida table.gt td, .scheda-abb .sp-guida table.gt th{
  border:1px solid var(--line-strong); padding:5px 9px; font-size:0.8125rem; vertical-align:top;
}
.scheda-abb .sp-guida table.gt th{ background:var(--surface-3); font-size:0.75rem; text-transform:uppercase; letter-spacing:.3px; }
.scheda-abb .sp-guida table.gt td.cibo{ color:var(--cibo); font-weight:600; }
.scheda-abb .sp-guida table.gt td.vino{ color:var(--vino); font-weight:700; text-transform:uppercase; font-size:0.75rem; }
.scheda-abb .sp-scroll{ overflow-x:auto; }

/* opzioni a fondo scheda: radio ed etichetta non si separano mai */
.scheda-abb .ab-opt{ display:inline-block; white-space:nowrap; margin:0 14px 4px 0; }
.scheda-abb .ab-opt label{ margin:0 0 0 4px; font-size:0.875rem; }

@media (max-width:640px){
  .scheda-abb .sp-title{ font-size:1.0625rem; }
  .scheda-abb .ab-row label{ font-size:0.8125rem; }
  .scheda-abb .ab-row input[type=range]{ flex:0 0 88px; }

  /* il diagramma si rimpicciolisce: testo e tratti crescono in unita utente
     per restare leggibili una volta scalato l'SVG */
  .scheda-abb .lbl-v, .scheda-abb .lbl-c{ font-size:20px; }
  .scheda-abb .scale-num{ font-size:15px; }
  .scheda-abb .ring, .scheda-abb .spoke{ stroke-width:1.8; }
  .scheda-abb .poly-v, .scheda-abb .poly-c{ stroke-width:4; }
  .scheda-abb .poly-c{ stroke-dasharray:9 6; }

  /* le tabelle della guida si impilano: cibo -> vino -> motivo */
  .scheda-abb .sp-guida table.gt, .scheda-abb .sp-guida table.gt tbody,
  .scheda-abb .sp-guida table.gt tr, .scheda-abb .sp-guida table.gt td{ display:block; width:100%; }
  .scheda-abb .sp-guida table.gt tr:first-child{ display:none; }
  .scheda-abb .sp-guida table.gt tr{ border:1px solid var(--line-strong); margin-bottom:8px; }
  .scheda-abb .sp-guida table.gt td{ border:0; padding:6px 10px; }
  .scheda-abb .sp-guida table.gt td.cibo{ background:var(--surface-3); }
  .scheda-abb .sp-guida table.gt td.vino:before{ content:"\2194\00a0"; }

  /* le righe finali diventano etichetta sopra, opzioni sotto */
  .scheda-abb table.ab-fin, .scheda-abb table.ab-fin tbody,
  .scheda-abb table.ab-fin tr, .scheda-abb table.ab-fin td{ display:block; width:100%; }
  .scheda-abb table.ab-fin tr{ margin-bottom:8px; border:1px solid var(--line-strong); }
  .scheda-abb table.ab-fin td{ border:0; }
  .scheda-abb table.ab-fin td.k{ width:100%; border-bottom:1px solid var(--line-strong); }
}

/* ---------------------------------------------------------------------------
   3. Ruota degli aromi
   da Pages/Schede/Aromi.cshtml
   --------------------------------------------------------------------------- */
.aroma-wheel{
  /* Colori propri della ruota: --rim e --gold sono tinte medie e restano
     identiche nei due temi; --paper segue la scheda; --ink si schiarisce. */
  --rim:#B6A3BB; --gold:#E8B54A; --paper:var(--surface); --ink:#3A2A22;
  --rim-hover:#c5b5c9;
  /* --rim e' una lavanda chiara: regge come riempimento, non come testo
     (2.3:1 su bianco) ne' come bordo (la 1.4.11 chiede 3:1). Due derivati:
     --rim-ink per il testo, --rim-edge per i bordi. */
  --rim-ink:#6f5a75; --rim-edge:#876f8e; --on-rim:#1b1f23;
  --focus-glow:rgba(107,27,35,.18);
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding:4px 4px 20px;
}
/* Varianti scure: il testo bruno diventa un crema caldo, l'alone del fuoco
   si accende. Le tinte dei settori (nei dati) restano invariate. */
:root[data-theme="dark"] .aroma-wheel{
  --ink:#e3d3c9;
  --focus-glow:rgba(233,143,186,.28);
  --rim-ink:#c9b6ce; --rim-edge:#B6A3BB;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .aroma-wheel{
    --ink:#e3d3c9;
    --focus-glow:rgba(233,143,186,.28);
    --rim-ink:#c9b6ce; --rim-edge:#B6A3BB;
  }
}
.aroma-wheel * { box-sizing:border-box; }
.aroma-wheel header{ text-align:center; margin-bottom:6px; }
.aroma-wheel header h1{ font-size:clamp(18px,3.2vw,28px); color:var(--rim-ink); letter-spacing:.5px; margin:0; }
.aroma-wheel header p{ font-size:0.875rem; opacity:.7; margin-top:2px; }
.aroma-wheel .toolbar{ margin:10px 0 4px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.aroma-wheel .toolbar input{ padding:7px 12px; border:2px solid var(--rim-edge); border-radius:20px; font-size:0.9375rem; width:240px; background:var(--surface); color:var(--ink); outline:none; }
.aroma-wheel .toolbar input:focus{ box-shadow:0 0 0 3px var(--focus-glow); }
.aroma-wheel .toolbar button{ padding:7px 14px; border:2px solid var(--rim-edge); border-radius:20px; background:var(--rim); color:var(--on-rim); font-size:0.875rem; cursor:pointer; }
.aroma-wheel .toolbar button:hover{ background:var(--rim-hover); }
.aroma-wheel #wheelwrap{ width:min(94vmin,860px); max-width:100%; }
.aroma-wheel svg{ width:100%; height:auto; display:block; }
.aroma-wheel .seg{ cursor:pointer; transition:opacity .18s ease; }
.aroma-wheel .seg.dim{ opacity:.18; }
.aroma-wheel .seg path{ stroke:var(--paper); stroke-width:1; transition:filter .15s; }
.aroma-wheel .seg:hover path{ filter:brightness(1.08); }
.aroma-wheel .leaflabel,.aroma-wheel .arclabel,.aroma-wheel .radlabel{ pointer-events:none; user-select:none; }
.aroma-wheel #crumb{ margin-top:12px; min-height:44px; text-align:center; font-size:0.9375rem; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.aroma-wheel #crumb .chip{ background:var(--surface); border:1.5px solid var(--rim-edge); border-radius:16px; padding:4px 12px; font-size:0.875rem; }
.aroma-wheel #crumb .chip.leafchip{ background:var(--rim); color:var(--on-rim); font-weight:bold; }
.aroma-wheel #crumb .sep{ color:var(--rim-ink); font-weight:bold; }
@media (prefers-reduced-motion: reduce){ .aroma-wheel .seg,.aroma-wheel .seg path{ transition:none; } }

/* ---------------------------------------------------------------------------
   3. Scheda a punti
   da Pages/Schede/Punti.cshtml
   --------------------------------------------------------------------------- */
.scheda-punti{
  /* --sp-line/--hdr/--scost seguono la tavolozza globale; --slate, le velature
     rosate e il tratteggio sono propri della scheda: variante scura piu' sotto. */
  --sp-line:var(--line-strong); --hdr:var(--surface-3); --scost:var(--surface-3);
  --slate:#5c6670;
  --sp-hover:#f6eef3; --sp-live:#fdf4f8; --sp-focus:#fffdfe;
  --sp-dotted:#c4ccd2;
  color:var(--ink);
}
:root[data-theme="dark"] .scheda-punti{
  --slate:#3a444d;
  --sp-hover:#3a2732; --sp-live:#2b1f26; --sp-focus:#2a2228;
  --sp-dotted:#4a545c;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .scheda-punti{
    --slate:#3a444d;
    --sp-hover:#3a2732; --sp-live:#2b1f26; --sp-focus:#2a2228;
    --sp-dotted:#4a545c;
  }
}
.scheda-punti * { box-sizing:border-box; }
.scheda-punti .sp-title{
  border-left:6px solid var(--accent-ink); padding-left:14px; color:var(--title);
  text-transform:uppercase; font-weight:800; line-height:1.1; letter-spacing:.5px; font-size:1.375rem; margin:0;
}
.scheda-punti table{ width:100%; border-collapse:collapse; }
.scheda-punti td, .scheda-punti th{ border:1px solid var(--sp-line); padding:6px 8px; font-size:0.875rem; vertical-align:middle; }

/* info (fillable) block */
.scheda-punti .info td{ height:44px; padding:4px 8px; }
.scheda-punti .info .lbl{ font-size:0.75rem; color:var(--ink-2); display:block; }
.scheda-punti .info .unit{ text-align:right; font-size:0.75rem; color:var(--ink-2); }
.scheda-punti .info input{
  width:100%; border:0; border-bottom:1px dotted var(--sp-dotted); background:transparent;
  font-size:0.875rem; padding:1px 2px; color:var(--ink);
}
.scheda-punti .info input:focus{ outline:0; border-bottom-color:var(--accent-ink); background:var(--sp-focus); }
.scheda-punti .info .pair{ display:flex; gap:8px; }

/* celle di punteggio cliccabili */
.scheda-punti .grid .cell{ background:var(--surface); padding:0; }
.scheda-punti .sp-pick{ display:block; margin:0; cursor:pointer; min-height:34px; position:relative; }
.scheda-punti .sp-pick input{
  position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;
}
.scheda-punti .sp-pick .sp-mark{
  display:flex; align-items:center; justify-content:center;
  min-height:34px; font-weight:800; font-size:0.9375rem; color:transparent; line-height:1;
}
.scheda-punti .sp-pick:hover .sp-mark{ background:var(--sp-hover); }
.scheda-punti .sp-pick input:focus-visible ~ .sp-mark{ outline:2px solid var(--accent-ink); outline-offset:-2px; }
.scheda-punti .sp-pick input:checked ~ .sp-mark{ background:var(--accent); color:var(--on-accent); }
.scheda-punti .sp-pick input:checked ~ .sp-mark:before{ content:"\2715"; }

/* subtotali di sezione e totale */
.scheda-punti .grid .section td{ vertical-align:middle; }
.scheda-punti .grid .sec-sub{
  background:var(--slate); color:var(--on-accent); text-align:right; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.scheda-punti .grid tr.live td{ background:var(--sp-live); font-weight:800; }
.scheda-punti .grid tr.live .sp-total{
  font-size:1.25rem; color:var(--accent-ink); font-variant-numeric:tabular-nums;
}
.scheda-punti .grid tr.live .sp-count{ font-size:0.75rem; font-weight:600; color:var(--ink-2); }
.scheda-punti .sp-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* scoring grid */
.scheda-punti .grid th, .scheda-punti .grid td{ text-align:center; }
.scheda-punti .grid .note{ text-align:left; font-size:0.75rem; font-weight:700; text-transform:uppercase; color:var(--ink); width:44%; background:var(--hdr); }
.scheda-punti .grid .col{ width:9%; font-weight:800; font-size:0.9375rem; }
.scheda-punti .grid .scost-h{ font-weight:800; background:var(--hdr); }
.scheda-punti .grid .section td{ background:var(--slate); color:var(--on-accent); text-align:left; font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
.scheda-punti .grid .param{ text-align:left; }
.scheda-punti .grid .scost{ background:var(--scost); text-align:right; font-weight:700; }
.scheda-punti .grid .total td{ font-weight:800; font-size:0.9375rem; }
.scheda-punti .grid .total .note{ font-size:0.75rem; }
.scheda-punti .sp-scroll{ overflow-x:auto; }

/* guida "come si compila" */
.scheda-punti .sp-guida{ border:1px solid var(--line); border-radius:8px; background:var(--surface-2); }
.scheda-punti .sp-guida > button{
  width:100%; text-align:left; background:none; border:0; padding:12px 16px;
  font-weight:700; color:var(--title); font-size:0.9375rem;
}
.scheda-punti .sp-guida > button:after{ content:" ▾"; color:var(--accent-ink); }
.scheda-punti .sp-guida > button[aria-expanded="true"]:after{ content:" ▴"; }
.scheda-punti .sp-guida .sp-guida-body{ padding:0 16px 14px; font-size:0.875rem; line-height:1.55; }
.scheda-punti .sp-guida h6{
  font-size:0.8125rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--accent-ink); font-weight:800; margin:14px 0 6px;
}
.scheda-punti .sp-guida ul{ margin:0 0 0 18px; padding:0; }
.scheda-punti .sp-guida li{ margin-bottom:4px; }
.scheda-punti .sp-guida .sp-formula{
  background:var(--surface); border:1px solid var(--sp-line); border-radius:6px;
  padding:10px 12px; font-family:Consolas,"Courier New",monospace; font-size:0.875rem; margin:8px 0;
}
.scheda-punti .sp-guida table.sp-esempio{ width:auto; margin:8px 0; }
.scheda-punti .sp-guida table.sp-esempio td{ font-size:0.8125rem; padding:4px 10px; }
.scheda-punti .sp-guida table.sp-esempio .num{ text-align:right; white-space:nowrap; }
.scheda-punti .sp-guida table.sp-esempio .tot td{ font-weight:800; background:var(--hdr); }

@media (max-width:640px){
  .scheda-punti td, .scheda-punti th{ font-size:0.75rem; padding:4px 4px; }
  .scheda-punti .sp-title{ font-size:1.0625rem; }
  .scheda-punti .grid .col{ font-size:0.8125rem; }
  .scheda-punti .grid .cell{ padding:0; }
  .scheda-punti .sp-pick, .scheda-punti .sp-pick .sp-mark{ min-height:38px; }  /* area di tocco */
  .scheda-punti .grid tr.live .sp-total{ font-size:1.0625rem; }
  .scheda-punti .info td{ height:auto; }
  .scheda-punti .info .pair{ flex-direction:column; gap:2px; }

  /* le tabelle della guida non escono dallo schermo */
  .scheda-punti .sp-guida table.sp-esempio{ width:100%; }
  .scheda-punti .sp-guida table.sp-esempio td{ font-size:0.75rem; padding:4px 6px; }
}

/* ---------------------------------------------------------------------------
   3. Oggi — la pagina d'ingresso
   da Pages/Oggi/Index.cshtml

   Un solo numero grande (i giorni), una sola barra (il nucleo consolidato),
   quattro riquadri e una lista. Il resto e' aria: la pagina deve far vedere
   che cosa fare, non tutto quello che si potrebbe fare.
   --------------------------------------------------------------------------- */
/* .home non fissa larghezze: usa tutto il contenitore, come Carte e Database. */

.home .hm-testata {
    display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-2); padding: 18px 20px; margin-bottom: 16px;
}

/* La cifra grande resta in cifre proporzionali: tabular-nums allargherebbe
   ogni cifra alla misura dello zero e a 56px "12" sembrerebbe slegato. */
.home .hm-eroe { flex: 0 0 auto; min-width: 130px; }
.home .hm-eroe-n {
    font-size: 3.5rem; line-height: 1; font-weight: 700; color: var(--accent-ink);
    font-variant-numeric: proportional-nums;
}
.home .hm-eroe-vuoto { color: var(--muted); }
.home .hm-eroe-lab { font-size: 0.875rem; color: var(--ink-2); margin-top: 4px; }
/* Le settimane accanto ai giorni: stessa riga, un gradino sotto per peso. */
.home .hm-eroe-sett { color: var(--muted); }
.home .hm-eroe-data { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }

.home .hm-misura { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* --- La composizione del nucleo: ciambella + conteggi ---------------------- */
/* Tre archi sovrapposti, ognuno lungo quanto la sua quota. Ruotato di -90 gradi
   perche' stroke-dasharray parte da ore 3 e la lettura naturale parte da ore 12. */
.home .hm-cia { width: 104px; height: 104px; flex: 0 0 auto; transform: rotate(-90deg); }
.home .hm-cia-f {
    fill: none; stroke-width: 14;
    /* Niente linecap arrotondato: su fette piccole sborderebbe sulla vicina e
       la falserebbe. */
    stroke-linecap: butt;
}
.home .hm-cia-f.cia-mat { stroke: var(--forza-mat); }
.home .hm-cia-f.cia-vis { stroke: var(--forza-vis); }
/* "Mai aperte" nella ciambella non e' la traccia vuota di una barra: e' una
   fetta, cioe' un dato. Con --forza-new stava a 1.12:1 sulla card in tema scuro
   e spariva. Ha un token suo, abbastanza chiaro da vedersi (3.56:1 al buio,
   3.07:1 in chiaro) ma senza colore, cosi' resta la fetta che non rivendica
   niente. --forza-new resta quello che e': il fondo neutro delle barre. */
.home .hm-cia-f.cia-new { stroke: var(--cia-vuote); }

/* Pastiglia, numero e parola sulla stessa riga: la legenda e' il dato. */
.home .hm-conti { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.home .hm-conti > li { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.home .hm-conti strong {
    color: var(--ink); font-size: 0.9375rem; min-width: 3ch; text-align: right;
    font-variant-numeric: tabular-nums;
}
/* La percentuale eredita tutto dall'etichetta — stesso corpo, stesso peso,
   stesso colore — e si stacca solo di spazio: e' una precisazione della parola,
   non un numero da soppesare. */
.home .hm-conti-e { display: inline; }
.home .hm-conti-p { margin-left: 6px; }
.home .hm-conti-tot { margin-bottom: 4px; }
.home .hm-conti-tot strong { font-size: 1.0625rem; }
.home .hm-sw-cia-mat { background: var(--forza-mat); }
.home .hm-sw-cia-vis { background: var(--forza-vis); }
.home .hm-sw-cia-new { background: var(--cia-vuote); }

.home .hm-kpi {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.home .hm-tile {
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); padding: 12px 14px; min-width: 0;
}
.home .hm-tile-lab {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 700; color: var(--muted);
}
.home .hm-tile-val { font-size: 1.625rem; font-weight: 600; color: var(--ink); line-height: 1.15; }
.home .hm-tile-sub { font-size: 0.75rem; color: var(--muted); }
.home .hm-tile-allerta { border-color: var(--danger-ink); }
.home .hm-tile-allerta .hm-tile-val { color: var(--danger-ink); }

.home .hm-finito {
    border: 1px solid var(--line); border-left: 4px solid var(--accent-ink);
    border-radius: 8px; background: var(--surface-2); padding: 12px 14px; margin-bottom: 12px;
}

.home .hm-piano { list-style: none; padding: 0; margin: 0 0 16px; }
.home .hm-passo {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
    padding: 12px 14px; margin-bottom: 8px;
}
.home .hm-passo-testo { flex: 1 1 260px; min-width: 0; }
.home .hm-passo-t { font-weight: 700; color: var(--title); font-size: 0.9375rem; }
.home .hm-passo-n {
    display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px;
    font-size: 0.8125rem; font-weight: 700;
    background: var(--accent-softer); color: var(--accent-ink); border: 1px solid var(--line);
}
.home .hm-passo-s { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
.home .hm-passo-vai { flex: 0 0 auto; }

.home .hm-lista-dif { margin: 0; padding-left: 18px; font-size: 0.875rem; }
.home .hm-lista-dif li { margin-bottom: 4px; }

.home .hm-ritmo { font-size: 0.8125rem; color: var(--muted); margin-top: 10px; }
.home .hm-ritmo-basso { color: var(--danger-ink); font-weight: 700; }


/* --- Il riquadro del piano, in cima alla pagina -------------------------- */
.home .hm-piano-box > summary { gap: 8px 12px; }
.home .hm-sep { color: var(--line-strong); margin: 0 2px; }
.home .hm-piano-corpo { padding: 4px 14px 16px; }

/* Data e tetto in colonna a sinistra, regioni a destra: il tetto e' una
   conseguenza della data, non un campo che vive per conto suo. */
.home .hm-form {
    display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); gap: 20px 28px;
}
.home .hm-form-col { min-width: 0; }
.home .hm-campo-stretto { max-width: 140px; }

/* Le regioni sono venti: a riga unica diventano un muro. Una griglia che si
   riempie da sola tiene le colonne piene e le etichette allineate. */
.home .hm-regioni {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2px 14px;
}
.home .hm-regione { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; }
.home .hm-regione .form-check-input { flex: 0 0 auto; margin: 0; }
.home .hm-regione .form-check-label { min-width: 0; font-size: 0.875rem; }
.home .hm-regione-n {
    color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums;
}

/* Zona pericolosa: separata, sobria, e a due passaggi. */
.home .hm-pericolo {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.home .hm-pericolo-t { font-weight: 700; color: var(--danger-ink); margin: 0 0 4px; }
.home .hm-pericolo-b { font-size: 0.8125rem; color: var(--muted); }

/* --- Il piano in otto settimane ------------------------------------------- */
/* Una riga per settimana, ognuna apribile. La riga porta il numero, che cosa
   si fa, e quanto di quella settimana regge davvero: il piano risponde da solo
   a "dove devo tornare", che i vecchi otto pallini non sapevano dire. */
.home .hm-otto { margin-bottom: 16px; }
.home .hm-sett { margin-bottom: 6px; }

.home .hm-sett > summary { align-items: center; gap: 12px; }

/* Il numero. aria-hidden nel markup: l'etichetta "Settimana 3 di 8" è già
   scritta accanto, e sentirsi leggere "3" prima è solo rumore. */
.home .hm-sett-n {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-2); font-size: 0.875rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.home .hm-sett.passata > summary .hm-sett-n {
    background: var(--accent-softer); color: var(--accent-ink); border-color: var(--accent-soft);
}
.home .hm-sett.ora > summary .hm-sett-n {
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
/* La settimana di oggi si riconosce anche senza colore: il filo a sinistra
   resta visibile in bianco e nero e per chi non distingue le tinte. */
.home .hm-sett.ora { border-left: 4px solid var(--accent); }

.home .hm-sett-testo { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.home .hm-sett-obj {
    font-size: 0.9375rem; color: var(--title); font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home .hm-sett-eti {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 800; color: var(--muted); margin-top: 2px;
}
.home .hm-sett-ora { color: var(--accent-ink); margin-left: 6px; }

/* Stessa barra delle statistiche, stessi token: due letture, una tinta sola. */
.home .hm-sett-barra,
.home .hm-sett-lez-b {
    display: flex; height: 16px; border-radius: 4px; overflow: hidden;
    background: var(--forza-new); min-width: 0;
    border: 1px solid var(--forza-bordo); box-sizing: border-box;
}
.home .hm-sett-barra { flex: 0 1 150px; }
.home .hm-sett-val,
.home .hm-sett-lez-v {
    flex: 0 0 auto; min-width: 108px; text-align: right;
    font-size: 0.8125rem; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.home .hm-sett-vuoto {
    flex: 0 0 auto; font-size: 0.8125rem; color: var(--muted); font-style: italic;
}

.home .hm-sett-corpo { padding: 12px 14px 14px; }
.home .hm-sett-nota { font-size: 0.875rem; color: var(--ink-2); margin: 0 0 10px; }

.home .hm-sett-lez { list-style: none; padding: 0; margin: 0 0 12px; }
.home .hm-sett-lez > li {
    display: grid; grid-template-columns: minmax(120px, 230px) 1fr 108px;
    align-items: center; gap: 12px; padding: 4px 0;
}
.home .hm-sett-lez-n {
    font-size: 0.875rem; color: var(--ink-2); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.home .hm-otto-vai { display: flex; flex-wrap: wrap; gap: 8px; }
.home .hm-otto-nota { font-size: 0.875rem; color: var(--ink-2); margin: 8px 0 0; }

@media (max-width: 720px) {
    /* Stretto, l'obiettivo va a capo e la barra passa sotto: troncare a due
       parole non direbbe quale settimana è. */
    .home .hm-sett-obj { white-space: normal; }
    .home .hm-sett-barra { flex: 1 1 100%; order: 3; }
    /* Il min-width da 108px serve solo ad allineare la colonna in orizzontale:
       stretto, il conteggio va sotto la barra e non deve tenere larghezza, se no
       allarga la pagina invece di andare a capo. */
    /* flex-basis 100%, non auto: "flex: 0 0 auto" non si restringe, e a 320px
       il conteggio spingeva la pagina di tre pixel oltre il bordo. */
    .home .hm-sett-val { order: 4; flex: 1 1 100%; min-width: 0; text-align: left; }
    .home .hm-sett-testo { flex: 1 1 100%; }
    .home .hm-sett-lez > li { grid-template-columns: 1fr; gap: 2px; }
    .home .hm-sett-lez-n { white-space: normal; }
    .home .hm-sett-lez-v { min-width: 0; text-align: left; }
}

/* --- Statistiche per argomenti -------------------------------------------- */
/* Una sola tinta in tre passi: la lunghezza porta il valore, il colore porta
   lo stato. Il distacco fra i due segmenti e' un vuoto di 2px nel colore del
   pannello, non un bordo: un bordo aggiungerebbe inchiostro che non e' dato.
 *
 * I token stanno su .home e non su .hm-forza perche' li leggono in due:
 * le barre e le pastiglie della legenda. Prima i colori erano ribattuti a mano
 * in entrambi i posti, in tutti e due i temi — otto esadecimali per due tinte,
 * con l'ovvio rischio di cambiarne uno e dimenticare l'altro. */
.home {
    --forza-mat: var(--accent);
    /* Oro, non un magenta piu' chiaro. "Viste" e "consolidate" sono due stati
       diversi, non due gradi della stessa cosa: due varianti della stessa tinta
       li facevano leggere come "piu'/meno" e collassavano per chi non distingue
       i colori. Con il rosa di prima il validatore dava ΔE 11.6 a vista normale,
       sotto la soglia di 15: indistinguibili anche con la vista piena.
       Adesso 24.2 a vista normale e 17.4 in deuteranopia. Dalla tavolozza
       "vineyard", risaturato quanto basta a superare il minimo di croma. */
    --forza-vis: #b3852a;       /* 3.24:1 su --surface-2 */
    --forza-new: var(--surface-3);

    /* Il contorno della barra. La traccia vuota (--surface-3) sta a 1.11:1 sul
       pannello: invisibile. Ma la parte vuota e' un dato — "mai aperte" e' il
       resto della barra — quindi l'estensione va delimitata (WCAG 1.4.11, 3:1).
       Si delimita con un filo, non riempiendo di grigio scuro: un riempimento
       carico leggerebbe come "fatto", che e' il contrario di quel che dice. */
    --forza-bordo: #8a9299;   /* 3.07:1 su --surface-2 */
    --cia-vuote: #8a9299;     /* fetta "mai aperte": 3.07:1 sulla card */

    /* Il vuoto fra i segmenti prende il colore del pannello dell'accordion, non
       di --surface: su --surface-2 in tema scuro il vecchio valore dava 1.05:1,
       cioe' i due segmenti si fondevano in una barra sola. */
    --forza-gap: var(--surface-2);
}
:root[data-theme="dark"] .home {
    --forza-mat: var(--accent-ink);
    --forza-vis: #b3852a;     /* 4.75:1 sul pannello scuro; e' anche piu' scuro
                                 dell'accento, quindi si separa pure in grigi */
    --forza-bordo: #6e7981;   /* 3.56:1 su --surface-2 */
    --cia-vuote: #6e7981;     /* 3.56:1 sulla card: prima era 1.12 e non si vedeva */
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .home {
        --forza-mat: var(--accent-ink);
        --forza-vis: #b3852a;
        --forza-bordo: #6e7981;
        --cia-vuote: #6e7981;
    }
}

/* Il corpo dell'accordion. Le barre e la tabella sono due letture dello stesso
   dato, non due sezioni: stanno nello stesso pannello, separate da un titolino. */
.home .hm-stat-corpo { padding: 12px 14px 14px; }

/* Bootstrap mette le caption sotto la tabella: qui il titolo va sopra, perche'
   e' il titolo della sotto-sezione, non una nota a pie' di tabella. */
.home .hm-stat-cap {
    /* Il respiro sopra e' padding e non margin: una caption e' una table-caption
       box, e i margini verticali su quella non sono affidabili fra browser. */
    caption-side: top; padding: 18px 0 8px;
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 800;
    color: var(--ink-2);
}

.home .hm-forza-nota { font-size: 0.875rem; color: var(--ink-2); margin: 0 0 10px; }

.home .hm-legenda {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 10px;
}
.home .hm-key { display: inline-flex; align-items: center; gap: 6px; }
.home .hm-sw {
    width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto;
}

.home .hm-forza { list-style: none; padding: 0; margin: 0; }
.home .hm-forza-riga {
    display: grid; grid-template-columns: minmax(120px, 210px) 1fr 108px;
    align-items: center; gap: 12px; padding: 5px 0;
}
.home .hm-forza-nome {
    font-size: 0.875rem; color: var(--ink-2); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home .hm-forza-barra {
    display: flex; height: 16px; border-radius: 4px; overflow: hidden;
    background: var(--forza-new); min-width: 0;
    /* border-box: il filo sta dentro i 16px, cosi' l'altezza utile resta 14px
       come prima e le percentuali dei segmenti continuano a dire il vero. */
    border: 1px solid var(--forza-bordo); box-sizing: border-box;
}
/* Una tinta sola: la barra dice quanto e' aperto, e basta. */
.home .hm-seg { display: block; height: 100%; background: var(--forza-mat); }
.home .hm-forza-val {
    font-size: 0.8125rem; color: var(--ink-2); text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .home .hm-forza-riga { grid-template-columns: 1fr; gap: 2px; }
    .home .hm-forza-nome { white-space: normal; }
    .home .hm-forza-val { text-align: left; }
    /* La ciambella sopra i conteggi, non accanto. */
    .home .hm-misura { gap: 14px; }
    .home .hm-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home .hm-eroe-n { font-size: 2.875rem; }
    .home .hm-passo-vai { width: 100%; }
    .home .hm-form { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   3. Scheda a tempo
   da Pages/Schede/Drill.cshtml
   --------------------------------------------------------------------------- */
.drill { max-width: var(--col-lettura); }

.drill .dr-testa {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 16px; flex-wrap: wrap; margin-bottom: 12px;
}
.drill .dr-titolo { font-size: 1.375rem; font-weight: 800; color: var(--title); margin: 0; }
.drill .dr-intro { font-size: 0.875rem; color: var(--muted); margin: 4px 0 0; }
.drill .dr-cronometro {
    font-size: 1.625rem; font-weight: 600; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.drill .dr-avanzamento {
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .5px;
    font-weight: 700; color: var(--muted); margin-bottom: 8px;
}
.drill .dr-voce { font-size: 1.25rem; font-weight: 800; color: var(--title); margin: 0 0 2px; }
.drill .dr-aiuto { font-size: 0.8125rem; color: var(--muted); margin: 0 0 14px; }

.drill .dr-slot {
    list-style: none; padding: 0; margin: 0 0 14px;
    counter-reset: posto; display: flex; flex-direction: column; gap: 6px;
    min-height: 44px;
}
.drill .dr-slot li { counter-increment: posto; display: flex; align-items: center; gap: 10px; }
.drill .dr-slot li::before {
    content: counter(posto); flex: 0 0 auto;
    width: 22px; text-align: right;
    font-size: 0.8125rem; font-weight: 700; color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.drill .dr-pool {
    display: flex; flex-wrap: wrap; gap: 8px;
    border-top: 1px dashed var(--line); padding-top: 14px;
}
.drill .dr-chip {
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface-2); color: var(--ink);
    padding: 8px 14px; font-size: 0.9375rem; cursor: pointer; text-align: left;
    min-height: 40px;
}
.drill .dr-chip:hover { border-color: var(--accent); color: var(--accent-ink); }
.drill .dr-chip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.drill .dr-chip-posto { flex: 1 1 auto; background: var(--surface); }
/* Esito per posizione: si impara vedendo quale voce e' fuori posto. */
.drill .dr-ok { border-color: var(--accent-ink); }
.drill .dr-ko { border-color: var(--danger-ink); color: var(--danger-ink); }

.drill .dr-esito { font-size: 0.875rem; margin: 14px 0 0; min-height: 1.4em; }
.drill .dr-esito-ok { color: var(--accent-ink); font-weight: 700; }
.drill .dr-esito-ko { color: var(--ink-2); }

.drill .dr-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.drill .dr-punteggio {
    font-size: 3rem; font-weight: 700; color: var(--accent-ink); line-height: 1;
    font-variant-numeric: proportional-nums;
}
.drill .dr-tempo { font-size: 0.9375rem; color: var(--ink-2); margin-top: 6px; }

@media (max-width: 480px) {
    .drill .dr-cronometro { font-size: 1.25rem; }
    .drill .dr-azioni .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   3. Sessione — risposta a scelta multipla
   da Pages/Study/Session.cshtml
   --------------------------------------------------------------------------- */
.sess-scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sess-scelta {
    display: flex; align-items: center; gap: 12px; text-align: left;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface); color: var(--ink);
    padding: 14px 16px; font-size: 1rem; cursor: pointer; min-height: 60px;
}
.sess-scelta:hover { border-color: var(--accent); background: var(--accent-softer); }
.sess-scelta:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.sess-scelta-n {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-3); color: var(--ink-2);
    font-size: 0.8125rem; font-weight: 800;
}
.sess-scelta-t { min-width: 0; }

@media (max-width: 560px) {
    .sess-scelte { grid-template-columns: 1fr; }
}

/* Scelta della tavolozza, in Admin. Le pastiglie mostrano i cinque colori che
   cambiano davvero: accento, premuto, accento-testo al buio, oro dei dati e
   rango piu' alto. Sono gli unici valori ripetuti qui, perche' una pastiglia
   deve mostrare la tavolozza NON in vigore, che per definizione non e' nei
   token della pagina. */
.tv-form fieldset { border: 0; padding: 0; margin: 0; }
.tv-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer;
  max-width: 520px;
}
.tv-opt:hover { border-color: var(--accent-ink); }
.tv-opt:has(input:checked) { border-color: var(--accent-ink); box-shadow: 0 0 0 2px var(--accent-soft); }
.tv-opt:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.tv-testo { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tv-nome { font-weight: 700; color: var(--ink); }
.tv-sub { font-size: 0.8125rem; color: var(--ink-2); }
.tv-swatch { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.tv-sw {
  width: 20px; height: 20px; border-radius: 4px; display: inline-block;
  border: 1px solid var(--line-strong);
}
.tv-opt[data-tv="enoversity"] .tv-sw-1 { background: #b02a6b; }
.tv-opt[data-tv="enoversity"] .tv-sw-2 { background: #96225b; }
.tv-opt[data-tv="enoversity"] .tv-sw-3 { background: #e98fba; }
.tv-opt[data-tv="enoversity"] .tv-sw-4 { background: #b3852a; }
.tv-opt[data-tv="enoversity"] .tv-sw-5 { background: #8e1c4f; }
.tv-opt[data-tv="vineyard"] .tv-sw-1 { background: #31273c; }
.tv-opt[data-tv="vineyard"] .tv-sw-2 { background: #7e5361; }
.tv-opt[data-tv="vineyard"] .tv-sw-3 { background: #7e7745; }
.tv-opt[data-tv="vineyard"] .tv-sw-4 { background: #bea55d; }
.tv-opt[data-tv="vineyard"] .tv-sw-5 { background: #e5e498; }

@media (max-width: 420px) {
  .tv-opt { flex-wrap: wrap; }
  .tv-swatch { width: 100%; }
}

/* Il marchio. Il sigillo accanto al nome nella barra: alle misure piccole la
   scritta sull'anello non si legge, e non deve — il nome sta li' accanto in
   testo, e il sigillo fa da segno. Per questo e' aria-hidden: ripeterebbe
   "Enoversity" a chi usa lo screen reader. Sulla pagina di accesso invece il
   sigillo E' il marchio e porta lui il nome, quindi li' ha un alt vero.
   Da 992px in su il sigillo va a 112px: e' la misura in cui l'anello si legge
   davvero. La barra diventa alta ~128px, scelta voluta. */
.navbar-brand { display: inline-flex; align-items: center; gap: 10px; }
/* Il nome accanto al sigillo: Cinzel, maiuscolo, con un filo di spaziatura
   perche' un lapidario stretto si impasta. E' l'unico punto del sito dove
   questo carattere compare — da qui in giu' e' tutto lineare. */
.navbar-brand span {
  font-family: var(--font-marchio);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mk-sigillo { height: 32px; width: 32px; display: block; flex: 0 0 auto; }

.mk-grande { display: block; height: 128px; width: 128px; margin: 8px auto 16px; }

@media (max-width: 575.98px) {
  .mk-sigillo { height: 28px; width: 28px; }
  .mk-grande { height: 104px; width: 104px; }
}

@media (min-width: 992px) {
  .navbar { --bs-navbar-padding-y: .5rem; }
  /* Con il sigillo a 112px e il nome a 2rem il marchio e' diventato un blocco:
     il rem di stacco di Bootstrap lo faceva sembrare la prima voce del menu.
     2.5rem e' la distanza a cui le due cose si leggono come due cose. */
  .navbar-brand { gap: 18px; font-size: 2rem; margin-right: 2.5rem; }
  .navbar-expand-lg .navbar-nav .nav-link { padding-left: .7rem; padding-right: .7rem; }
  .mk-sigillo { height: 112px; width: 112px; }
  .mk-grande { height: 240px; width: 240px; margin: 12px auto 24px; }
}

/* Accesso. Senza barra in cima il marchio e' l'unica cosa che dice dove sei,
   quindi sta al centro e grande, e porta alla home. Il blocco e' stretto e
   centrato: con la barra tolta, una colonna appoggiata a sinistra sembrerebbe
   un pezzo di pagina mancante. */
.acc-blocco {
  max-width: 420px;
  margin: 0 auto;
  padding-top: 24px;
}
.acc-blocco .mk-grande { margin-bottom: 12px; }
/* la riga di descrizione sotto il titolo */
.acc-blocco .lead { margin-bottom: 22px; font-size: 1rem; }
.acc-titolo { text-align: center; margin-bottom: 20px; }

/* "Registrati" non e' l'azione di questa pagina: sta sotto il pulsante, come
   alternativa, non accanto come se fossero pari. */
.acc-alt {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.9375rem;
}
.acc-alt a { color: var(--accent-ink); }

@media (min-width: 992px) {
  .acc-blocco { padding-top: 40px; }
}

/* ------------------------------------------------------------------
   Schede di impianto proprio (analisi sensoriale 0-5, scheda a 100
   punti). A differenza della scheda di degustazione qui i colori non
   portano significato: sono quelli del tema, e basta.
   ------------------------------------------------------------------ */
.scheda-oiv .so-title { font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.scheda-oiv .so-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.scheda-oiv .so-hint { font-size: 0.8125rem; }
.scheda-oiv .so-wrap { overflow-x: auto; }
.scheda-oiv .so-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.scheda-oiv .so-grid { width: 100%; border-collapse: collapse; min-width: 520px; }
.scheda-oiv .so-grid th,
.scheda-oiv .so-grid td { border: 1px solid var(--line); padding: 6px 8px; font-size: 0.875rem; }
.scheda-oiv .so-grid thead th { background: var(--surface-2); font-weight: 700; }
.scheda-oiv .so-par { text-align: left; width: 38%; }
.scheda-oiv .so-nota { display: block; font-size: 0.75rem; color: var(--muted); }
.scheda-oiv .so-sec > td {
  background: var(--accent-softer); font-weight: 700; color: var(--title);
  text-transform: uppercase; letter-spacing: .04em; font-size: 0.75rem;
}
.scheda-oiv .so-sec-dif > td { background: var(--danger-fill); color: var(--danger-ink); }

/* La casella 0-5: il radio resta, visibile solo alla tastiera e agli screen reader. */
.scheda-oiv .so-cell { text-align: center; padding: 0; }
.scheda-oiv .so-pick { display: block; cursor: pointer; margin: 0; }
.scheda-oiv .so-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.scheda-oiv .so-mark {
  display: block; padding: 7px 0; color: var(--muted);
  font-variant-numeric: tabular-nums; user-select: none;
}
.scheda-oiv .so-pick:hover .so-mark { background: var(--accent-softer); color: var(--ink); }
.scheda-oiv .so-pick input:checked + .so-mark {
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.scheda-oiv .so-pick input:focus-visible + .so-mark { outline: 2px solid var(--accent-ink); outline-offset: -2px; }

.scheda-oiv .so-coda { width: 100%; border-collapse: collapse; margin-top: 18px; }
.scheda-oiv .so-coda td { border: 1px solid var(--line); padding: 7px 8px; font-size: 0.875rem; }
.scheda-oiv .so-coda .k { width: 38%; color: var(--ink-2); }
.scheda-oiv .so-opt { display: inline-flex; align-items: center; gap: 5px; margin-right: 14px; }

.scheda-oiv .so-riepilogo {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); padding: 14px 16px;
}
.scheda-oiv .so-riepilogo h6 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--title); margin-bottom: 8px;
}
.scheda-oiv .so-sec-r { font-size: 0.875rem; line-height: 1.5; margin-bottom: 6px; }
.scheda-oiv .so-sec-r b { display: block; font-size: 0.75rem; color: var(--ink-2); }
.scheda-oiv .so-vuoto { color: var(--muted); font-size: 0.875rem; margin: 0; }
.scheda-oiv .so-scala { border-collapse: collapse; margin: 8px 0 12px; }
.scheda-oiv .so-scala th,
.scheda-oiv .so-scala td { border: 1px solid var(--line); padding: 3px 10px; font-size: 0.8125rem; }
.scheda-oiv .so-scala th { background: var(--surface-2); width: 3ch; text-align: center; }

/* Scheda a 100 punti */
.scheda-oiv .cn-range { width: 42%; }
.scheda-oiv .cn-val { width: 20%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scheda-oiv .cn-max { color: var(--muted); font-size: 0.75rem; }
.scheda-oiv .cn-input { width: 100%; margin: 0; vertical-align: middle; }
.scheda-oiv .cn-alto .so-par { color: var(--accent-ink); font-weight: 700; }
.scheda-oiv .cn-tot td { background: var(--surface-2); font-size: 1rem; border-top: 2px solid var(--line-strong); }
.scheda-oiv .cn-tot strong { font-size: 1.25rem; color: var(--ink); }
.scheda-oiv .cn-banda { font-size: 0.8125rem; font-weight: 700; color: var(--accent-ink); }

@media (max-width: 640px) {
  .scheda-oiv .so-grid { min-width: 0; }
  .scheda-oiv .so-grid th,
  .scheda-oiv .so-grid td { font-size: 0.75rem; padding: 4px 5px; }
  .scheda-oiv .so-par { width: 44%; }
}