/* ==========================================================================
   BALNEABILE — design tokens
   Direzione A, "Il calendario della stagione". Congelata il 2026-08-21.
   Revisione del REGISTRO lo stesso giorno: vedi la nota qui sotto e
   design/.design-log.json.
   Dopo questo file nessun colore e nessuna dimensione nasce altrove: se un
   valore non e' qui, non si usa.

   Regola della direzione: l'asse portante e' IL TEMPO. Il dominante della
   pagina comune e' la linea del tempo della stagione, perche' la misura che
   regge il sito e' questa: al 21/08/2026, su 4.758 aree con almeno un
   campione, la mediana dall'ultimo prelievo era 32 giorni e l'83,5% delle
   aree aveva l'ultimo prelievo piu' vecchio di due settimane.

   Il colore codifica UNA cosa sola: si puo' entrare in acqua o no.
   ========================================================================== */

/* --- NOTA SUL REGISTRO ----------------------------------------------------
   Questo sito e' costruito sullo stesso impianto tecnico del suo gemello sui
   prezzi dei carburanti, e nella prima versione gli somigliava troppo: due
   grotesk quasi uguali, due mono quasi uguali, lo stesso bianco a occhio
   nudo. Un registro visivo non si allontana cambiando i colori: si allontana
   cambiando la struttura. Qui si e' mosso quello.

     tipografia   grotesk + mono     ->  SERIF + mono larga
     scala        12/14/16/20/28/40  ->  13/15/17/22/32/52
     densita'     righe 40px         ->  righe 56px, celle arieggiate
     griglia      2/3 + 1/3          ->  banda a piena larghezza
     dominante    una cifra          ->  UNA LINEA DEL TEMPO
     link         blu ovunque        ->  inchiostro sottolineato
     spigoli      radius 2px         ->  0, come una pagina stampata

   Non e' bastato. Con i mobili cambiati la stanza restava la stessa: stessa
   larghezza, stessa carta, stesso inchiostro. Misurato in CIE L*, che e' la
   chiarezza come la percepisce l'occhio, non la media dei canali:

                        gemello        prima          adesso
     carta              L* 98,0        L* 95,2        L* 92,7
     croma della carta     2,7%           1,6%           7,1%
     inchiostro         L*  9,3        L*  9,1        L* 21,2
     larghezza           1180px         1120px          960px
     fondo scuro        L*  5,6        L*  5,9        L* 14,7
     testo su scuro     L* 93,5        L* 93,6        L* 86,9

   Prima la differenza sull'inchiostro era di 0,2 punti e sul fondo scuro di
   0,3: l'occhio non registra scarti cosi'. Adesso sono 11,9 e 9,1, con la
   carta visibilmente tinta di azzurro-ciano spento (croma da 1,6% a 7,1%).
   Tutti i contrasti sono stati rimisurati: nessuna coppia testo/fondo
   scende sotto 4,5 su nessuno dei tre fondi, in entrambi i temi.
   Gli script che li calcolano stanno in recon/col/.
   -------------------------------------------------------------------------- */

:root {
  /* --- TIPOGRAFIA -------------------------------------------------------
     Newsreader: serif da lettura su schermo, disegnata per i giornali
     online. Regge titoli, corpo del testo e nomi nelle tabelle.
     Martian Mono: mono larga e tecnica, per cifre, date ed etichette. E'
     volutamente ingombrante: qui i numeri sono pochi e devono pesare.     */
  --font-text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-num:  'Martian Mono', 'SFMono-Regular', Consolas, monospace;

  /* scala editoriale: 13 / 15 / 17 / 22 / 32 / 52
     Piu' larga di quella del gemello perche' un serif a 14px in tabella si
     legge peggio di un grotesk, e perche' qui le righe hanno piu' aria.   */
  --t-xs:  0.8125rem; /* 13 - didascalie, note, etichette          */
  --t-sm:  0.9375rem; /* 15 - tabelle                              */
  --t-md:  1.0625rem; /* 17 - corpo                                */
  --t-lg:  1.375rem;  /* 22 - sottotitoli                          */
  --t-xl:  2rem;      /* 32 - titoli sezione                       */
  --t-2xl: 3.25rem;   /* 52 - la cifra, dove serve ancora          */

  --lh-tight: 1.15;
  --lh-num: 1;
  --lh-body: 1.62;
  --measure: 62ch;

  /* --- SCALA SEMANTICA: STATO DI BALNEAZIONE ----------------------------
     Cinque gradini, tutti popolati. Quote misurate sul censimento completo
     del 21/08/2026 (5.028 aree):

       balneabile, ultimo campione entro i limiti   ~93,8 %
       fuori norma SENZA ordinanza sindacale            55 aree
       vietata per inquinamento                        123 aree
       vietata per altri motivi                        106 aree
       nessun campione nella stagione                  ~14 aree

     --st-ok NON riempie mai un'area: e' solo un filo a sinistra della riga
     e il glifo dello stato. Verde su nove righe su dieci sarebbe
     decorazione, non informazione. Il colore pieno resta alle righe che
     hanno qualcosa da dire.

     --st-alt e' deliberatamente NON rosso: "vietata per altri motivi" non
     e' un problema di qualita' dell'acqua (il feed lo distingue dallo stato
     4) e confonderlo con l'inquinamento sarebbe un errore di lettura.     */
  --st-ok:   #14635C;   /* balneabile, campione entro i limiti     */
  --st-warn: #7E5800;   /* fuori norma, nessuna ordinanza          */
  --st-inq:  #A32A1E;   /* vietata per inquinamento                */
  --st-alt:  #4C4658;   /* vietata per altri motivi                */
  --st-nd:   #586061;   /* nessun campione nella stagione          */

  /* fondi tenui degli stessi gradini, ricalibrati sulla carta nuova */
  --st-ok-bg:   #C6E4E2;
  --st-warn-bg: #E7DDC7;
  --st-inq-bg:  #F1D8D6;
  --st-alt-bg:  #E2DBF0;
  --st-nd-bg:   #D4E0E2;

  /* --- IL NASTRO DELLA STAGIONE ----------------------------------------
     Elemento firma. Tacca = prelievo, blocco pieno = giorni di divieto,
     filo verticale = oggi. Vive dentro la riga; in testa alla pagina del
     comune diventa il dominante, alto --nastro-h-big.                    */
  --nastro-h: 22px;
  --nastro-h-big: 68px;
  --nastro-bg:    #C5D7DB;
  --nastro-fuori: #D9E4E7;   /* mesi fuori dalla stagione di quell'area */
  --nastro-tick:  #47524F;   /* un prelievo                        */
  --nastro-oggi:  #3A3F8C;   /* la linea di oggi                   */

  /* --- NEUTRI FREDDI VERDE-GRIGIO (carta nautica) -----------------------
     Mai #000, mai #fff. La carta e' piu' profonda e piu' fredda di quella
     del gemello: messe a fianco non si confondono.                       */
  --n-950: #1B2324;
  --n-900: #2A3536;   /* l'inchiostro: L* 21,2, non un nero              */
  --n-800: #343F41;
  --n-700: #485557;
  --n-600: #566366;   /* AA su tutti e tre i fondi: 5,18 / 5,64 / 4,89   */
  --n-500: #819193;   /* NON per il testo (2,73). Solo bordi e separatori */
  /* --n-400 e' DECORATIVO: la barra "/" fra le briciole e il segno di
     rientro sotto una riga. Non ci va mai del testo, perche' su carta sta a
     2,03 di contrasto. Se serve un grigio leggibile, --ink-faint.        */
  --n-400: #98A9AB;
  --n-300: #ADBEC2;
  --n-200: #C0D2D5;
  --n-100: #D7E7E9;
  --n-050: #DEEDF0;   /* LA CARTA: L* 92,7, croma 7,1%                   */

  /* --- ACCENTO ----------------------------------------------------------
     Nel gemello i link sono blu ovunque. Qui no: sono color inchiostro con
     una sottolineatura, come in un giornale, e l'accento resta a due usi
     soli - lo stato attivo della navigazione e il passaggio del mouse. Un
     colore in meno sulla pagina e' un colore in piu' che il lettore
     attribuisce al dato.                                                 */
  --accent:       #3A3F8C;
  --accent-hover: #262A63;
  --link-rule:    #97A9AC;   /* la sottolineatura dei link, a riposo */
  --focus:        #7E5800;

  /* --- RUOLI ------------------------------------------------------------ */
  --bg:        var(--n-050);
  --bg-raised: #EAF6F8;
  --bg-sunken: var(--n-100);
  --ink:       var(--n-900);
  --ink-soft:  var(--n-700);
  --ink-faint: var(--n-600);
  --rule:      var(--n-300);
  --rule-soft: var(--n-200);

  /* --- GRIGLIA 4px ------------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px;

  /* Densita': meno fitta del gemello. Le righe qui portano un nastro con
     dentro sei mesi di stagione, e a 40px non respirava.                  */
  --row-h: 56px;
  --cell-pad: 14px 12px;

  /* --- TRE LARGHEZZE, NON UNA ------------------------------------------
     Una sola scatola per tutto incolonna la pagina e la appiattisce. Le tre
     misure NON sono scelte a occhio: sono la larghezza minima che i
     contenuti veri chiedono, stimata colonna per colonna sui caratteri
     effettivi (mono 0,75em, serif 0,48em, corpo 15px):

       /segnalazioni   1.011 px      elenco dei comuni      182 px
       /chiuse-da-anni   990 px      /laghi                 611 px
       /divieti          949 px      comuni di un lago      710 px
       aree di un comune 891 px      /regioni               740 px
                                     /province              802 px

     Da qui: chi sta sopra i 950 va largo, chi sta sotto gli 820 sta comodo
     nella colonna dei dati, la prosa scende alla misura di lettura.
     Tutti i blocchi restano centrati sullo STESSO asse: il ritmo lo fa la
     larghezza, non lo scarto laterale.                                    */
  --w-largo:   1200px;   /* linea del tempo, mappa, tabelle da 6-7 colonne */
  --w-dati:     960px;   /* titoli, tabelle corte, classifiche, elenchi    */
  --w-testo:    680px;   /* prosa, note, pagine editoriali e legali        */
  --wrap: var(--w-largo);
  --border: 1px solid var(--rule);
  --border-soft: 1px solid var(--rule-soft);
  --rule-forte: 2px solid var(--ink);   /* la riga sopra le sezioni */
  --radius: 0;              /* spigoli vivi: e' una pagina, non un pannello */

  /* L'unico bianco puro del progetto, e serve a una cosa sola: la carta
     quando si stampa una pagina. A schermo non si usa mai. */
  --paper: #FFFFFF;
}

/* --- DARK MODE: ricalibrata, non invertita ------------------------------
   Su fondo scuro i toni scuri della scala collassano: vanno rischiarati
   mantenendo i rapporti fra i gradini e la regola che --st-ok non riempie. */
@media (prefers-color-scheme: dark) {
  :root {
    --st-ok:   #4FBFA9;
    --st-warn: #D9A63C;
    --st-inq:  #F5807A;
    --st-alt:  #A79FBC;
    --st-nd:   #93A5A8;

    --st-ok-bg:   #233C37;
    --st-warn-bg: #3F3624;
    --st-inq-bg:  #4D2F2D;
    --st-alt-bg:  #3B3155;
    --st-nd-bg:   #243A3E;

    --link-rule:    #4E6165;
    --nastro-bg:    #314246;
    --nastro-fuori: #222F31;
    --nastro-tick:  #A0B5B8;
    --nastro-oggi:  #8E93E0;

    /* Non un nero neutro: un blu di profondita'. Il gemello ha un fondo
       scuro caldo a L* 5,6; qui si sta a L* 14,7 con croma 5,9%, che a
       occhio e' una stanza diversa e non lo stesso nero.                */
    --bg:        #1B272A;
    --bg-raised: #253235;
    --bg-sunken: #162021;
    --ink:       #CADDE1;
    --ink-soft:  #A0B5B8;
    --ink-faint: #8B9FA2;
    --rule:      #3A494C;
    --rule-soft: #2C393C;

    /* I tre neutri usati direttamente da app.css vanno ricalibrati anche
       qui, altrimenti restano quelli del tema chiaro: la parte vuota delle
       barre di distribuzione diventerebbe una striscia luminosa su fondo
       scuro. E' un difetto che non da' nessun errore e si vede solo
       guardando la pagina in modalita' scura.                            */
    --n-200: #304143;   /* fondo delle barre di distribuzione */
    --n-400: #75878B;   /* separatori decorativi              */
    --n-500: #8AA0A3;

    --accent:       #8E93E0;
    --accent-hover: #B0B4EC;
    --focus:        #D9A63C;
  }
}

/* ==========================================================================
   BALNEABILE — foglio di stile.
   Ogni valore viene da tokens.css. Se un colore o una dimensione non e' un
   token, e' un errore (bin/test.php lo verifica).

   Registro: pagina stampata, non pannello. Serif per il testo, mono larga
   per le cifre, spigoli vivi, righe alte, righe di separazione poche e
   nette. Vedi la nota in testa a tokens.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  /* grana appena percettibile invece del colore piatto */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-weight: 600; line-height: var(--lh-tight);
  margin: 0 0 var(--s4); letter-spacing: -.005em;
}
h1 { font-size: var(--t-xl); max-width: 22ch; }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p  { margin: 0 0 var(--s5); max-width: var(--measure); }
ul, ol { max-width: var(--measure); }

/* --- LINK: inchiostro sottolineato, non blu -----------------------------
   Nel gemello i link sono blu. Qui il colore resta tutto al dato: i link
   sono del colore del testo con una sottolineatura sottile, come in un
   giornale, e diventano accento solo al passaggio del mouse.             */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.num, .n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.02em;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }

/* --- LA GRIGLIA A TRE LARGHEZZE ----------------------------------------
   Una griglia a tre colonne: quella centrale e' la colonna dei dati (960),
   le due laterali sono lo spazio che i blocchi larghi si prendono quando
   servono. Cosi' un blocco largo e uno stretto non hanno bisogno di
   allinearsi a caso: condividono la stessa colonna centrale, e chi va
   largo la sfonda simmetricamente.

     default      colonna centrale, 960px
     .b-largo     tutte e tre le colonne, 1200px
     .b-testo     dentro la centrale, 680px, allineato a SINISTRA con essa

   La misura di lettura (--measure) continua a valere dentro i paragrafi:
   una didascalia dentro una tabella larga resta stretta da sola.          */
main.wrap,
.apri {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    min(var(--w-dati), 100%)
    minmax(0, 1fr);
}
main.wrap > *,
.apri > * { grid-column: 2; min-width: 0; }
main.wrap > .b-largo,
.apri > .b-largo { grid-column: 1 / -1; }
/* ATTENZIONE: .apri e' una griglia ANNIDATA. Un suo figlio .b-largo puo'
   sfondare solo fino al bordo di .apri: se .apri sta nella colonna dei dati,
   il nastro dentro resta largo 960 e la fascia larga non si vede.
   Quindi .apri va marcata .b-largo ogni volta che ne contiene uno.        */
main.wrap > .b-testo,
.apri > .b-testo { max-width: var(--w-testo); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--bg-raised); color: var(--ink); padding: var(--s2) var(--s4); border: var(--border);
}
.skip:focus { left: var(--s4); top: var(--s2); }

/* ------------------------------------------------------------- testata
   Due righe, come la testata di un giornale: marchio e sottotitolo sopra,
   sezioni sotto. Il gemello ha una sola barra di servizio con marchio, voci
   e ricerca tutti in fila: e' l'elemento che si vede su ogni pagina, ed era
   la somiglianza piu' vistosa fra i due siti.                             */

.masthead { background: var(--bg); border-bottom: var(--rule-forte); }
.masthead__top {
  display: flex; align-items: flex-end; gap: var(--s6);
  padding-top: var(--s5); padding-bottom: var(--s4); flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: var(--ink); text-decoration: none; flex: 0 0 auto;
}
.brand__mark { flex: 0 0 auto; }
.brand__nome {
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1;
}
.masthead__occhiello {
  margin: 0 0 2px; flex: 1 1 14rem; max-width: 26rem;
  font-family: var(--font-num); font-size: var(--t-xs);
  line-height: 1.5; color: var(--ink-faint);
  border-left: var(--border); padding-left: var(--s5);
}
.nav { border-top: var(--border); background: var(--bg); }
.nav__in {
  display: flex; gap: var(--s6); flex-wrap: wrap;
  font-family: var(--font-num); font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: .07em;
}
.nav a {
  color: var(--ink-soft); text-decoration: none;
  padding: var(--s3) 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.nav a:hover { color: var(--accent-hover); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.srch { display: flex; gap: var(--s1); margin-left: auto; }
.srch input {
  font: inherit; font-size: var(--t-sm); padding: var(--s2) var(--s3);
  border: var(--border); border-radius: var(--radius);
  background: var(--bg-raised); color: var(--ink); width: 170px;
}
.srch button {
  font-family: var(--font-num); font-size: var(--t-xs);
  padding: var(--s2) var(--s4); border: 1px solid var(--ink);
  border-radius: var(--radius); background: var(--ink); color: var(--bg);
  cursor: pointer;
}
.srch button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ----------------------------------------------------------- briciole */

.crumb {
  font-family: var(--font-num); font-size: var(--t-xs);
  color: var(--ink-faint); margin: var(--s6) 0 var(--s5);
}
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); max-width: none; }
.crumb li + li::before { content: "/"; margin-right: var(--s2); color: var(--n-400); }
.crumb a { color: var(--ink-faint); text-decoration-color: transparent; }
.crumb a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------- apertura a banda
   Niente griglia 2/3 + 1/3: qui l'apertura e' una BANDA a piena larghezza.
   Sopra il titolo, poi la linea del tempo, poi una striscia orizzontale di
   dati. E' la differenza strutturale piu' grossa rispetto al gemello.     */

.apri { margin: 0 0 var(--s12); }
/* La homepage e' l'unica pagina che apre con un titolo di taglia piena:
   e' l'unico posto in cui il lettore non sa ancora dove si trova.        */
.apri--home h1 { font-size: var(--t-2xl); max-width: 16ch; letter-spacing: -.03em; }
.apri--home .apri__testo { font-size: var(--t-lg); line-height: 1.45; }
.apri > .tl, .apri > .strip { margin-left: 0; margin-right: 0; }
.apri__occhiello {
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin: 0 0 var(--s3);
}
.apri__main { min-width: 0; }
.apri__testo { max-width: var(--measure); margin: 0 0 var(--s8); }
.apri__testo p:last-child { margin-bottom: 0; }

/* --- IL BATTITO NAZIONALE: l'apertura della homepage -------------------
   Alto il doppio del nastro di riga, a tutta larghezza. E' il solo blocco
   del sito che esiste per essere guardato prima che letto, e non e'
   decorazione: e' la tesi disegnata.                                      */
.battito { margin: var(--s6) 0 var(--s5); }
.battito__svg {
  display: block; width: 100%; height: 132px;
  border-top: var(--rule-forte); border-bottom: 1px solid var(--ink);
}

/* la linea del tempo: il dominante */
.tl { margin: 0 0 var(--s6); }
.tl__svg {
  display: block; width: 100%; height: var(--nastro-h-big);
  border-top: var(--rule-forte); border-bottom: 1px solid var(--ink);
}
.tl__mesi {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-family: var(--font-num); font-size: var(--t-xs);
  color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase;
  margin-top: var(--s2);
}
.tl__mesi span { border-left: 1px solid var(--rule-soft); padding-left: var(--s2); }
.tl__mesi span:first-child { border-left: 0; padding-left: 0; }
.tl__leg {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s4);
}
.tl__leg i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.tl__leg i.t { width: 2px; height: 13px; background: var(--nastro-tick); }
.tl__leg i.o { width: 3px; height: 13px; background: var(--nastro-oggi); }
.tl__leg i.d { background: var(--st-inq); }
.tl__leg i.s { background: var(--nastro-bg); }
.tl__leg i.f { width: 2px; height: 13px; background: var(--st-inq); }

/* la striscia dei dati: orizzontale, non una colonna laterale */
.strip {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--ink);
  margin: 0;
}
.strip__i {
  flex: 1 1 8rem; min-width: 0;
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-right: var(--border-soft);
}
.strip__i:last-child { border-right: 0; }
.strip__i + .strip__i { padding-left: var(--s5); }
.strip dt {
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); margin: 0 0 var(--s2);
}
.strip dd {
  margin: 0; font-family: var(--font-num); font-size: var(--t-lg);
  font-weight: 500; line-height: 1.15; letter-spacing: -.03em;
}
.strip dd small {
  display: block; margin-top: var(--s1);
  font-family: var(--font-text); font-size: var(--t-xs);
  font-weight: 400; letter-spacing: 0; color: var(--ink-faint);
}
.strip__i--inq dd { color: var(--st-inq); }
.strip__i--warn dd { color: var(--st-warn); }
.strip__i--ok dd { color: var(--st-ok); }

/* la cifra grande, dove serve ancora (pagine nazionali) */
.cifre { display: flex; flex-wrap: wrap; gap: var(--s12); margin: var(--s6) 0 0; }
.cifra { min-width: 0; max-width: 20rem; }
.cifra__v {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-2xl); line-height: var(--lh-num); font-weight: 500;
  letter-spacing: -.05em; display: block;
}
.cifra__v--sm { font-size: var(--t-xl); }
.cifra__r { display: block; width: 100%; height: 1px; background: var(--ink); margin: var(--s3) 0; }
.cifra__l { display: block; font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.45; }
.cifra__l b { color: var(--ink-soft); font-weight: 600; }

/* --------------------------------------------------- nota a margine
   Non un riquadro: una nota di taglio, con la riga sopra. Il gemello usa
   riquadri bordati; qui l'unico bordo e' quello che separa.               */
.nota-lat {
  border-top: 1px solid var(--ink);
  padding: var(--s3) 0 0;
  margin: 0 0 var(--s6);
  max-width: var(--measure);
}
.nota-lat__t {
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); margin: 0 0 var(--s2);
}
.nota-lat p { margin: 0 0 var(--s2); font-size: var(--t-sm); }
.nota-lat p:last-child { margin-bottom: 0; }
.nota-lat--ok    { border-top-color: var(--st-ok); }
.nota-lat--warn  { border-top-color: var(--st-warn); }
.nota-lat--chiusa{ border-top-color: var(--st-nd); }

.note-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s8); margin: var(--s8) 0 0; }

/* -------------------------------------------------------------- sezioni
   La riga forte sta SOPRA il titolo, come in un quotidiano.              */

.sez { margin: var(--s16) 0 0; }
.sez__h {
  display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap;
  border-top: var(--rule-forte); padding-top: var(--s3); margin-bottom: var(--s5);
}
.sez__h h2 { margin: 0; }
.sez__h .n { font-family: var(--font-num); font-size: var(--t-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.sez__h a { font-family: var(--font-num); font-size: var(--t-xs); margin-left: auto; text-transform: uppercase; letter-spacing: .06em; }

.dida { font-size: var(--t-xs); color: var(--ink-faint); max-width: var(--measure); margin: var(--s4) 0 0; line-height: 1.5; }
.dida a { color: var(--ink-faint); }

/* ------------------------------------------------------- tabella registro */

.reg { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.reg caption {
  text-align: left; font-size: var(--t-xs); color: var(--ink-faint);
  padding-bottom: var(--s4); max-width: var(--measure); line-height: 1.5;
}
.reg th, .reg td { padding: var(--cell-pad); vertical-align: middle; }
.reg thead th {
  font-family: var(--font-num); font-size: var(--t-xs); font-weight: 400;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint);
  text-align: left; border-bottom: 1px solid var(--ink); white-space: nowrap;
  padding-top: 0;
}
.reg tbody tr { height: var(--row-h); border-bottom: var(--border-soft); }
.reg tbody tr:hover { background: var(--bg-raised); }
.reg .r { text-align: right; }
.reg .r, .reg td .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.reg .nome { font-weight: 600; }
.reg a { text-decoration-color: var(--link-rule); }

/* Il filo di stato a sinistra della riga. --st-ok NON riempie mai un'area:
   un verde su nove righe su dieci sarebbe decorazione. Il colore pieno
   resta all'eccezione.                                                     */
.reg tbody td:first-child { border-left: 3px solid transparent; padding-left: var(--s4); }
tr.g-ok   td:first-child { border-left-color: var(--st-ok); }
tr.g-warn td:first-child { border-left-color: var(--st-warn); }
tr.g-inq  td:first-child { border-left-color: var(--st-inq); }
tr.g-alt  td:first-child { border-left-color: var(--st-alt); }
tr.g-nd   td:first-child { border-left-color: var(--st-nd); }
tr.g-warn { background: var(--st-warn-bg); }
tr.g-inq  { background: var(--st-inq-bg); }
tr.g-alt  { background: var(--st-alt-bg); }
tr.g-warn:hover, tr.g-inq:hover, tr.g-alt:hover { filter: brightness(.98); }

/* riga di dettaglio sotto un'area vietata o segnalata */
tr.motivo { height: auto; }
tr.motivo td {
  padding-top: 0; padding-bottom: var(--s4);
  font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.5;
}
tr.motivo .marca { color: var(--n-400); margin-right: var(--s2); font-family: var(--font-num); }

/* ------------------------------------------------------------- il glifo */

.gl { vertical-align: -1px; margin-right: var(--s2); flex: 0 0 auto; }
.gl--ok   { color: var(--st-ok); }
.gl--warn { color: var(--st-warn); }
.gl--inq  { color: var(--st-inq); }
.gl--alt  { color: var(--st-alt); }
.gl--nd   { color: var(--st-nd); }

.stato {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .05em;
}
.stato--ok   { color: var(--st-ok); }
.stato--warn { color: var(--st-warn); font-weight: 600; }
.stato--inq  { color: var(--st-inq); font-weight: 600; }
.stato--alt  { color: var(--st-alt); font-weight: 600; }
.stato--nd   { color: var(--st-nd); }

/* --------------------------------------------- il nastro nella riga */

.nastro { display: block; width: 100%; height: var(--nastro-h); }
/* Nella tabella larga il nastro ha lo spazio per far leggere sei mesi:
   a 140px un prelievo settimanale e uno mensile sembravano la stessa cosa. */
.nastro-col { width: 26%; min-width: 200px; }

/* ------------------------------------------------ barre di distribuzione */

.dist { list-style: none; margin: 0; padding: 0; max-width: none; }
.dist li {
  display: grid; grid-template-columns: 11rem 1fr 4.5rem; gap: var(--s4);
  align-items: center; padding: var(--s3) 0; font-size: var(--t-sm);
  border-bottom: var(--border-soft);
}
.dist .b { height: 14px; background: var(--n-200); }
.dist .b i { display: block; height: 100%; }
.dist .v { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.dist .c1 i { background: var(--st-ok); }
.dist .c2 i { background: var(--st-ok); opacity: .58; }
.dist .c3 i { background: var(--st-warn); }
.dist .c4 i { background: var(--st-inq); }
.dist .cn i { background: var(--st-nd); }

/* ---------------------------------------------------------------- note */

.note {
  border-top: 1px solid var(--ink);
  padding: var(--s3) 0 0;
  font-size: var(--t-sm); margin: var(--s6) 0;
  max-width: var(--measure);
}
.note p:last-child { margin-bottom: 0; }
.note.stale { border-top-color: var(--st-warn); }
.note.forte { border-top-color: var(--st-inq); }
blockquote.note { padding-left: var(--s5); border-left: 3px solid var(--rule); }

/* --------------------------------------------------------------- mappa */

.mappa { height: 520px; border: 1px solid var(--ink); background: var(--bg-sunken); margin: var(--s5) 0 0; }
.mappa:focus-visible { outline: 2px solid var(--focus); }
.leaflet-container { font-family: var(--font-text); font-size: var(--t-xs); background: var(--bg-sunken); }

/* ------------------------------------------------------------ elenchi */

.cols { columns: 3 15rem; column-gap: var(--s10); font-size: var(--t-sm); }
.cols ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.cols li { break-inside: avoid; padding: var(--s1) 0; border-bottom: var(--border-soft); }
.cols a { text-decoration-color: transparent; }
.cols a:hover { text-decoration-color: currentColor; }
.cols .n { color: var(--ink-faint); font-size: var(--t-xs); float: right; }

/* -------------------------------------------------------------- testo */

/* La prosa vive nella colonna di lettura, ma le sue tabelle possono usarla
   tutta: a 62ch una tabella di quattro colonne non ci sta. I paragrafi
   restano stretti da soli, per la regola su p.                            */
.prosa { max-width: var(--w-testo); }
.prosa h2 { margin-top: var(--s12); border-top: var(--rule-forte); padding-top: var(--s3); }
.prosa h3 { margin-top: var(--s8); }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin-bottom: var(--s3); }
.prosa dt { font-weight: 600; margin-top: var(--s5); }
.prosa dd { margin: 0 0 var(--s3); }
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: var(--s5) 0; }
.prosa th, .prosa td { padding: var(--cell-pad); border-bottom: var(--border-soft); text-align: left; }
.prosa td.num, .prosa td:not(:first-child) { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.prosa thead th {
  border-bottom: 1px solid var(--ink); font-family: var(--font-num);
  font-size: var(--t-xs); font-weight: 400; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint);
}
.prosa code { font-family: var(--font-num); font-size: .85em; }

/* ----------------------------------------------------------- pubblicita' */

.ad { margin: var(--s12) 0; min-height: 1px; }
.ad::before {
  content: "Pubblicità"; display: block;
  font-family: var(--font-num); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s2);
}

/* -------------------------------------------------------------- footer */

.foot {
  border-top: var(--rule-forte); margin-top: var(--s20);
  padding: var(--s10) 0 var(--s12); background: var(--bg);
  font-size: var(--t-sm); color: var(--ink-soft);
}
/* Non tre colonne: una fascia di collegamenti a tutta larghezza e sotto
   una colonna di testo stretta. Le tre colonne erano l'ultimo pezzo di
   ossatura rimasto identico al sito gemello.                              */
.foot__in {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    min(var(--w-dati), 100%)
    minmax(0, 1fr);
}
.foot__in > * { grid-column: 2; min-width: 0; }
.foot__in > .b-largo { grid-column: 1 / -1; }

.foot__marchio { margin-bottom: var(--s6); }
.foot__marchio b { font-size: var(--t-lg); font-weight: 600; display: block; }
.foot__marchio span { font-size: var(--t-xs); color: var(--ink-faint); font-family: var(--font-num); }

.foot__link {
  list-style: none; margin: 0 0 var(--s8); padding: var(--s4) 0;
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  border-top: 1px solid var(--ink); border-bottom: var(--border-soft);
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
}
.foot__link li { padding: 0; }
.foot a { color: var(--ink-soft); text-decoration-color: transparent; }
.foot a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.foot__legal { font-size: var(--t-xs); color: var(--ink-faint); }
.foot__legal p { max-width: none; margin-bottom: var(--s4); }

/* ----------------------------------------------------------------- CMP */

.cmp {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg-raised); border-top: 3px solid var(--ink);
}
.cmp__in { display: flex; gap: var(--s6); align-items: center; padding: var(--s5) var(--s5); flex-wrap: wrap; }
.cmp p { margin: 0; font-size: var(--t-sm); flex: 1 1 22rem; }
.cmp__acts { display: flex; gap: var(--s3); margin-left: auto; }
.cmp button {
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--ink); background: var(--bg); color: var(--ink);
  cursor: pointer; border-radius: var(--radius);
}
.cmp button.primary { background: var(--ink); color: var(--bg-raised); }
.cmp button:hover { border-color: var(--accent-hover); color: var(--accent-hover); }
.cmp button.primary:hover { background: var(--accent-hover); color: var(--bg-raised); }
.cmp-reopen {
  font-family: var(--font-num); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em;
  padding: var(--s3) var(--s5); border: 1px solid var(--ink);
  background: var(--bg); color: var(--ink); cursor: pointer; border-radius: var(--radius);
}

/* ------------------------------------------------------------- mobile
   Una tabella su mobile diventa una lista leggibile, non uno scroll
   orizzontale.                                                            */

@media (max-width: 900px) {
  .strip__i { flex: 1 1 45%; }
  .cifre { gap: var(--s8); }
}

/* Sotto i 1000px non c'e' piu' spazio da distribuire: la griglia a tre
   larghezze si scioglie in una colonna sola e le tabelle si compattano.
   Il testo resta nella sua misura di lettura, allineato a sinistra.
   Sotto i 700 le tabelle diventano liste: vedi piu' avanti.               */
@media (max-width: 1000px) {
  main.wrap, .apri, .foot__in { display: block; }
  main.wrap > *, .apri > *, .foot__in > * { max-width: none; }
  main.wrap > .b-testo, .apri > .b-testo, .foot__in > .b-testo { max-width: var(--w-testo); }

  .reg { font-size: var(--t-xs); }
  .reg th, .reg td { padding: 10px 8px; }
  .nastro-col { width: 20%; min-width: 90px; }
  .battito__svg { height: 112px; }
}

@media (max-width: 700px) {
  :root { --nastro-h-big: 52px; }
  h1 { font-size: var(--t-lg); max-width: none; }
  .apri--home h1 { font-size: var(--t-xl); max-width: none; }
  .apri--home .apri__testo { font-size: var(--t-md); }
  .battito__svg { height: 96px; }
  .cifra__v { font-size: var(--t-xl); }
  .srch { margin-left: 0; width: 100%; }
  .srch input { flex: 1 1 auto; width: auto; }
  .masthead__occhiello { display: none; }
  .brand__nome { font-size: 1.375rem; }
  .nav__in { gap: var(--s4); font-size: 10px; }
  .foot__in { grid-template-columns: 1fr; gap: var(--s6); }
  .strip__i { flex: 1 1 100%; border-right: 0; border-bottom: var(--border-soft); padding-left: 0 !important; }
  .tl__mesi { font-size: 10px; }

  .reg, .reg tbody, .reg tr, .reg td { display: block; width: 100%; }
  .reg thead { position: absolute; left: -9999px; }
  .reg tbody tr {
    height: auto; border: 1px solid var(--rule); border-left-width: 4px;
    border-left-color: var(--rule); margin-bottom: var(--s4);
    padding: var(--s4); background: var(--bg-raised);
  }
  .reg tbody tr.g-ok   { border-left-color: var(--st-ok); }
  .reg tbody tr.g-warn { border-left-color: var(--st-warn); }
  .reg tbody tr.g-inq  { border-left-color: var(--st-inq); }
  .reg tbody tr.g-alt  { border-left-color: var(--st-alt); }
  .reg tbody tr.g-nd   { border-left-color: var(--st-nd); }
  .reg tbody td { border: 0; padding: var(--s1) 0; text-align: left; }
  .reg tbody td:first-child { border-left: 0; padding-left: 0; }
  .reg tbody td[data-l]::before {
    content: attr(data-l) " ";
    font-family: var(--font-num); color: var(--ink-faint); font-size: var(--t-xs);
    text-transform: uppercase; letter-spacing: .06em; margin-right: var(--s2);
  }
  .reg tbody td.r { text-align: left; }
  .reg tr.motivo td { padding-top: var(--s3); }
  .nastro-col { width: 100%; min-width: 0; }
  .cols { columns: 1; }
  .dist li { grid-template-columns: 8rem 1fr 3.5rem; }
}

@media print {
  .masthead, .cmp, .ad, .nav, .srch, .mappa { display: none !important; }
  body { background: var(--paper); }
}