/* Font auto-ospitati: Fraunces e Figtree, entrambi SIL Open Font License.
   Prima arrivavano da fonts.googleapis.com e bloccavano il rendering per
   796 ms su mobile -- da soli quasi metà del ritardo dell'LCP. Ospitarli qui
   toglie una connessione a un terzo dominio, un DNS, un TLS e una richiesta
   in cascata (il CSS di Google a sua volta chiedeva i woff2 a gstatic).

   Solo i sottoinsiemi latin e latin-ext, e solo i pesi usati davvero:
   Fraunces 400/600 per i titoli, Figtree 400/600/700 per il resto.
   Saltati: vietnamese. */
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/font/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/font/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/font/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/font/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/font/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/font/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/font/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/font/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/font/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeO-U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/font/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ComeOggi v2 — Calm Weather Intelligence
   ============================================================================
   File NUOVO e separato da style.css: la preview non tocca il CSS consolidato,
   quindi non serve toccare il cache buster e non si rischia una regressione sul
   sito vivo.

   Diagnosi che ha guidato questi token, misurata su style.css:
     149.524 byte, 4.648 righe
     173 custom properties GIA' definite
     638 colori esadecimali letterali, 210 distinti
     109 !important
     12 breakpoint distinti (1, 390, 520, 560, 620, 680, 760, 840, 860, 880, 899, 900)

   Non manca un design system: manca la sua applicazione. Qui i token sono
   pochi, e tutto il resto ne discende. Tre breakpoint, non dodici. Zero
   !important.
   ============================================================================ */

:root {
  /* --- colore: blu come base, ma la pagina non e' blu ---------------------
     Il concept di riferimento spinge verso il bianco-azzurro freddo di
     qualunque SaaS. Il neutro qui resta leggermente CALDO (una punta di giallo
     nella luminanza) perche' un grigio puro non e' scelto: e' ereditato. */
  --blu-900: #0a3c5e;
  --blu-700: #0b5f92;
  --blu-600: #0878bc;   /* il brand attuale: conservato */
  --blu-400: #3ba3e0;
  --blu-200: #a8d5f2;
  --blu-050: #eaf4fb;

  --neutro-950: #12202a;
  --neutro-700: #3d4d58;
  --neutro-500: #63737e;
  --neutro-300: #c3ccd2;
  --neutro-150: #e4e9ec;
  --neutro-050: #f4f6f7;
  --carta:      #ffffff;
  --fondo:      #fbfaf7;   /* crema appena percettibile, non bianco clinico */

  --ambra-600: #b8791a;    /* accento caldo, usato con parsimonia */

  /* --- ruoli ------------------------------------------------------------- */
  --c-brand:        var(--blu-600);
  --c-brand-forte:  var(--blu-900);
  --c-fondo:        var(--fondo);
  --c-superficie:   var(--carta);
  --c-superficie-2: var(--neutro-050);
  --c-testo:        var(--neutro-950);
  --c-testo-soft:   var(--neutro-500);
  --c-bordo:        var(--neutro-150);
  --c-bordo-forte:  var(--neutro-300);
  --c-focus:        #1b6fd6;

  /* --- rischio: SEMANTICO, mai decorativo --------------------------------
     Regola dura: questi cinque colori compaiono solo quando il motore dichiara
     un livello di rischio. Una card che li usa per "far colore" rende
     illeggibile quella che li usa per dire qualcosa. */
  --r-nessuno:  #1f7a4d;
  --r-attesa:   #b8860b;
  --r-rilievo:  #c2571a;
  --r-alto:     #b3261e;
  --r-estremo:  #6b2fa8;
  --r-nessuno-bg: #e8f5ee;
  --r-attesa-bg:  #fdf4e0;
  --r-rilievo-bg: #fceee5;
  --r-alto-bg:    #fdeceb;
  --r-estremo-bg: #f2ecfa;

  /* --- affidabilita': NON e' rischio ------------------------------------
     Scala neutra apposta. Una confidenza bassa non e' un pericolo, e colorarla
     di rosso lo farebbe credere. */
  --conf-alta:  var(--neutro-950);
  --conf-media: var(--neutro-500);
  --conf-bassa: var(--neutro-500);

  /* --- natura del dato ---------------------------------------------------
     Osservato, previsto, stimato, mancante, vecchio. Distinti da colore E da
     forma E da etichetta: il colore non e' mai l'unico segnale. */
  --nat-osservato: var(--blu-700);
  --nat-previsto:  var(--neutro-500);
  --nat-stimato:   var(--neutro-500);
  --nat-mancante:  var(--neutro-300);
  --nat-vecchio:   var(--ambra-600);

  /* --- tipografia --------------------------------------------------------
     Fraunces + Figtree sono gia' nel progetto e sono OFL: nessuna nuova
     dipendenza, nessuna nuova domanda di licenza. La coppia e' anche piu'
     caratterizzata del Plus Jakarta Sans del concept, che e' il carattere
     predefinito di mezzo mondo SaaS. */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-testo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-dati: "Figtree", system-ui, sans-serif;

  --t-mega: clamp(4rem, 17vw, 6.5rem);
  --t-display: clamp(1.75rem, 5vw, 2.5rem);
  --t-h2: 1.25rem;
  --t-h3: 1.0625rem;
  --t-corpo: 1rem;
  --t-piccolo: 0.875rem;
  --t-micro: 0.75rem;

  --p-corpo: 1.6;
  --p-stretto: 1.25;

  /* --- spazio: scala unica, niente numeri a caso ------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --raggio-s: 8px;
  --raggio-m: 14px;
  --raggio-l: 20px;
  --raggio-pill: 999px;

  --ombra-1: 0 1px 2px rgba(18, 32, 42, .06);
  --ombra-2: 0 4px 16px -6px rgba(18, 32, 42, .14);

  --mov-veloce: 120ms cubic-bezier(.2, .8, .3, 1);
  --mov-calmo: 260ms cubic-bezier(.2, .8, .3, 1);

  --largh-testo: 68ch;
  --largh-app: 1120px;
}

/* Tre stati di tema, non due: la maggioranza dei visitatori non ha scelto
   niente e arriva con "sistema", dove nessun attributo e' stampato. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta:      #16232c;
    --fondo:      #101a21;
    --neutro-950: #eef3f6;
    --neutro-700: #c3ced5;
    --neutro-500: #93a2ab;
    --neutro-300: #4a5b66;
    --neutro-150: #26343d;
    --neutro-050: #1b2831;
    --blu-050:    #122b3b;
    --blu-200:    #2b5c7d;
    --c-focus:    #6ab4ff;
    --r-nessuno-bg: #12291f; --r-attesa-bg: #2a2413;
    --r-rilievo-bg: #2c1d14; --r-alto-bg: #2e1715; --r-estremo-bg: #211a2e;
    --r-nessuno: #5cc98c; --r-attesa: #e0b354; --r-rilievo: #f0895a;
    --r-alto: #f2827c; --r-estremo: #b18ce0;
    --ombra-2: 0 4px 16px -6px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  --carta: #16232c; --fondo: #101a21;
  --neutro-950: #eef3f6; --neutro-700: #c3ced5; --neutro-500: #93a2ab;
  --neutro-300: #4a5b66; --neutro-150: #26343d; --neutro-050: #1b2831;
  --blu-050: #122b3b; --blu-200: #2b5c7d; --c-focus: #6ab4ff;
  --r-nessuno-bg: #12291f; --r-attesa-bg: #2a2413;
  --r-rilievo-bg: #2c1d14; --r-alto-bg: #2e1715; --r-estremo-bg: #211a2e;
  --r-nessuno: #5cc98c; --r-attesa: #e0b354; --r-rilievo: #f0895a;
  --r-alto: #f2827c; --r-estremo: #b18ce0;
  --ombra-2: 0 4px 16px -6px rgba(0, 0, 0, .5);
}

/* ============================================================================
   Base
   ============================================================================ */
.v2 * { box-sizing: border-box; }
.v2 {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-testo);
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  line-height: var(--p-corpo);
  -webkit-font-smoothing: antialiased;
}
.v2 :focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--raggio-s);
}
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.v2-guscio {
  max-width: var(--largh-app);
  margin: 0 auto;
  padding: 0 var(--s4) var(--s8);
}

/* ============================================================================
   AppHeader
   ============================================================================ */
.v2-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--c-fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-bordo);
}
.v2-bar__luogo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v2-bar__nome {
  font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600;
  line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-bar__sotto { font-size: var(--t-micro); color: var(--c-testo-soft); }
.v2-icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;      /* target tocco >= 44px, WCAG 2.2 */
  border: 1px solid var(--c-bordo); border-radius: var(--raggio-pill);
  background: var(--c-superficie); color: var(--c-testo);
  cursor: pointer; transition: border-color var(--mov-veloce);
}
.v2-icona:hover { border-color: var(--c-bordo-forte); }

/* ============================================================================
   Hero: UNA conclusione dominante
   Il concept metteva quattro card di pari peso sopra la piega. Quattro cose
   con lo stesso peso sono zero gerarchia: l'occhio non sa dove andare. Qui
   comanda la frase, il numero la accompagna.
   ============================================================================ */
.v2-hero { padding: var(--s6) 0 var(--s5); }
.v2-hero__cielo {
  height: 4px; border-radius: var(--raggio-pill); margin-bottom: var(--s5);
  background: linear-gradient(90deg, var(--blu-600), var(--blu-200) 60%, var(--ambra-600));
}
.v2-hero__riga { display: flex; align-items: flex-start; gap: var(--s5); flex-wrap: wrap; }
.v2-grado {
  font-family: var(--f-display);
  font-size: var(--t-mega); font-weight: 400;
  line-height: .82; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.v2-grado sup { font-size: .28em; vertical-align: super; font-weight: 500; }
.v2-hero__testo { flex: 1 1 18rem; min-width: 0; }
.v2-conclusione {
  font-family: var(--f-display);
  font-size: var(--t-display); font-weight: 600;
  line-height: var(--p-stretto); text-wrap: balance;
  margin: 0 0 var(--s3);
}
.v2-motivo {
  font-size: var(--t-corpo); color: var(--c-testo-soft);
  max-width: var(--largh-testo); margin: 0;
}
.v2-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin-top: var(--s4); align-items: center;
}

/* ============================================================================
   Etichette: natura del dato e affidabilita'
   Colore + forma + parola. Mai il colore da solo.
   ============================================================================ */
.v2-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--raggio-pill);
  border: 1px solid var(--c-bordo); background: var(--c-superficie);
  color: var(--c-testo-soft);
}
.v2-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.v2-tag--osservato { color: var(--nat-osservato); border-color: currentColor; }
.v2-tag--previsto::before { border-radius: 1px; }          /* quadrato: previsione */
.v2-tag--stimato::before { border-radius: 1px; transform: rotate(45deg); } /* rombo */
.v2-tag--vecchio { color: var(--nat-vecchio); border-color: currentColor; }
.v2-tag--vecchio::before { border-radius: 1px; transform: rotate(45deg); }
.v2-tag--mancante { color: var(--nat-mancante); }
.v2-tag--mancante::before { background: none; border: 1.5px dashed currentColor; }

.v2-conf { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.v2-conf__barre { display: inline-flex; gap: 3px; }
.v2-conf__barre i { width: 4px; height: 12px; border-radius: 2px; background: var(--c-bordo-forte); }
.v2-conf--alta .v2-conf__barre i { background: var(--conf-alta); }
.v2-conf--media .v2-conf__barre i:nth-child(-n+2) { background: var(--conf-media); }
.v2-conf--bassa .v2-conf__barre i:nth-child(1) { background: var(--conf-bassa); }

/* ============================================================================
   Hazard: compare SOLO con un rischio dichiarato dal motore
   ============================================================================ */
.v2-hazard {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); border-radius: var(--raggio-m);
  border-left: 4px solid var(--liv, var(--r-attesa));
  background: var(--liv-bg, var(--r-attesa-bg));
  color: var(--c-testo);
}
.v2-hazard--attesa  { --liv: var(--r-attesa);  --liv-bg: var(--r-attesa-bg); }
.v2-hazard--rilievo { --liv: var(--r-rilievo); --liv-bg: var(--r-rilievo-bg); }
.v2-hazard--alto    { --liv: var(--r-alto);    --liv-bg: var(--r-alto-bg); }
.v2-hazard--estremo { --liv: var(--r-estremo); --liv-bg: var(--r-estremo-bg); }
.v2-hazard__t { font-weight: 700; margin: 0 0 2px; }
.v2-hazard__d { margin: 0; font-size: var(--t-piccolo); color: var(--c-testo-soft); }

/* ============================================================================
   Sezioni e timeline
   ============================================================================ */
.v2-sez { margin-top: var(--s7); }
.v2-sez__t {
  font-family: var(--f-display); font-size: var(--t-h2); font-weight: 600;
  margin: 0 0 var(--s4); display: flex; align-items: baseline; gap: var(--s3);
}
.v2-sez__t small { font-family: var(--f-testo); font-size: var(--t-micro); font-weight: 400; color: var(--c-testo-soft); }

.v2-scelte { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.v2-scelta {
  flex: 1; padding: 10px var(--s3); min-height: 44px;
  border: 1px solid var(--c-bordo); background: var(--c-superficie);
  border-radius: var(--raggio-s); font: inherit; font-size: var(--t-piccolo);
  color: var(--c-testo-soft); cursor: pointer;
}
/* lo stato attivo non e' solo colore: peso + sottolineatura */
.v2-scelta[aria-selected="true"] {
  color: var(--c-testo); font-weight: 700;
  border-color: var(--c-testo); box-shadow: inset 0 -3px 0 var(--c-brand);
}

.v2-ore { display: flex; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); scroll-snap-type: x proximity; }
.v2-ora {
  flex: none; width: 78px; text-align: center; scroll-snap-align: start;
  padding: var(--s3) var(--s2); border-radius: var(--raggio-m);
  border: 1px solid var(--c-bordo); background: var(--c-superficie);
}
.v2-ora__h { font-size: var(--t-micro); color: var(--c-testo-soft); font-variant-numeric: tabular-nums; }
.v2-ora__t { font-size: var(--t-h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.v2-ora__p { font-size: var(--t-micro); color: var(--nat-osservato); }
.v2-ora--segna { border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.v2-ora__nota {
  display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-brand); font-weight: 700; margin-top: 2px;
}

/* ============================================================================
   Attivita': decisione, finestra, motivo
   ============================================================================ */
.v2-att { display: grid; gap: var(--s3); }
.v2-att__r {
  display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3);
  align-items: center; padding: var(--s3) var(--s4);
  border: 1px solid var(--c-bordo); border-radius: var(--raggio-m);
  background: var(--c-superficie);
}
.v2-att__n { font-weight: 600; }
.v2-att__m { font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.v2-esito {
  font-size: var(--t-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 5px 10px; border-radius: var(--raggio-pill);
  border: 1px solid currentColor; white-space: nowrap;
}
.v2-esito--si      { color: var(--r-nessuno); background: var(--r-nessuno-bg); }
.v2-esito--forse   { color: var(--r-attesa);  background: var(--r-attesa-bg); }
.v2-esito--aspetta { color: var(--r-rilievo); background: var(--r-rilievo-bg); }
.v2-esito--no      { color: var(--r-alto);    background: var(--r-alto-bg); }
.v2-esito--ignoto  { color: var(--c-testo-soft); background: var(--c-superficie-2); border-style: dashed; }

/* ============================================================================
   Radar, giorni, perche'
   ============================================================================ */
.v2-radar {
  border: 1px solid var(--c-bordo); border-radius: var(--raggio-l);
  background: var(--c-superficie); padding: var(--s4); display: grid; gap: var(--s3);
}
.v2-radar__fatto { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.v2-radar__km { font-family: var(--f-display); font-size: var(--t-h2); font-weight: 600; }

.v2-giorni { display: grid; gap: 2px; }
.v2-giorno {
  display: grid; grid-template-columns: 4.5rem 2rem 1fr auto; gap: var(--s3);
  align-items: center; padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--c-bordo);
}
.v2-giorno:last-child { border-bottom: 0; }
.v2-giorno__g { font-weight: 600; font-size: var(--t-piccolo); }
.v2-giorno__t { font-variant-numeric: tabular-nums; font-size: var(--t-piccolo); text-align: right; }
.v2-giorno__t b { font-size: var(--t-corpo); }

.v2-perche { border: 1px solid var(--c-bordo); border-radius: var(--raggio-m); background: var(--c-superficie); }
.v2-perche > summary {
  cursor: pointer; padding: var(--s4); font-family: var(--f-display);
  font-weight: 600; font-size: var(--t-h3); list-style: none;
}
.v2-perche > summary::-webkit-details-marker { display: none; }
.v2-perche > summary::after { content: " ▾"; color: var(--c-testo-soft); }
.v2-perche[open] > summary::after { content: " ▴"; }
.v2-perche__c { padding: 0 var(--s4) var(--s4); }
.v2-prova { display: flex; gap: var(--s3); padding: 6px 0; font-size: var(--t-piccolo); align-items: baseline; }
.v2-prova__s { flex: none; width: 1.25rem; font-weight: 700; }
.v2-prova--si .v2-prova__s { color: var(--r-nessuno); }
.v2-prova--no .v2-prova__s { color: var(--c-testo-soft); }

/* ============================================================================
   Responsive: TRE breakpoint, non dodici
   ============================================================================ */
@media (min-width: 768px) {
  .v2-guscio { padding: 0 var(--s5) var(--s8); }
  .v2-att__r { grid-template-columns: 44px 1fr auto; }
}
@media (min-width: 1024px) {
  .v2-colonne {
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .9fr);
    gap: var(--s7); align-items: start;
  }
  .v2-lato { position: sticky; top: 88px; display: grid; gap: var(--s5); }
}

/* Nessuna sezione deve far scorrere la pagina in orizzontale. */
.v2 table, .v2 pre, .v2-scroll { max-width: 100%; overflow-x: auto; }
.v2 img, .v2 svg { max-width: 100%; }

/* ============================================================================
   CONCEPT A1 — sicurezza, mobile, rifiniture
   Aggiunte al Concept A. Non riscrivono i token approvati: li estendono dove
   la review ha trovato un difetto misurato.
   ============================================================================ */

:root {
  /* Testo su fondo TINTO. I token normali erano nati per il fondo chiaro e su
     una card colorata scendevano sotto AA: #63737e su #fceee5 dava 4,31 e il
     chip "aspetta" #c2571a dava 3,95. Non cambio il colore globale -- servono
     varianti piu' scure per questo contesto e basta. */
  --su-tinto-testo:   #2b3840;
  --su-tinto-soft:    #445560;
  --r-attesa-scuro:   #7a5806;
  --r-rilievo-scuro:  #8a3d0f;
  --r-alto-scuro:     #8f1a14;
  --r-estremo-scuro:  #4f2080;
  --r-nessuno-scuro:  #145c39;

  --nav-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --su-tinto-testo: #eef3f6;
    --su-tinto-soft:  #c3ced5;
    --r-attesa-scuro: #e8c56b; --r-rilievo-scuro: #f5a077;
    --r-alto-scuro: #f79a95; --r-estremo-scuro: #c5a4ea; --r-nessuno-scuro: #6fd69b;
  }
}
:root[data-theme="dark"] {
  --su-tinto-testo: #eef3f6; --su-tinto-soft: #c3ced5;
  --r-attesa-scuro: #e8c56b; --r-rilievo-scuro: #f5a077;
  --r-alto-scuro: #f79a95; --r-estremo-scuro: #c5a4ea; --r-nessuno-scuro: #6fd69b;
}

/* --- il collegamento al contenuto, visibile solo col tastierino ---------- */
.v2-salta {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center;
  background: var(--c-superficie); border: 2px solid var(--c-focus);
  border-radius: var(--raggio-s); font-weight: 600;
}
.v2-salta:focus { left: var(--s4); top: var(--s4); }

/* ============================================================================
   Hero: numero, condizione e conclusione come UN blocco
   In A fra il 32° e la frase si apriva un vuoto che le slegava: due elementi
   affiancati con `flex` e un `gap` grande diventano due cose separate.
   ============================================================================ */
.v2-hero__blocco { display: grid; gap: var(--s2); }
.v2-hero__ora {
  display: flex; align-items: baseline; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: calc(var(--s1) * -1);
}
.v2-hero__ora .v2-grado { font-size: clamp(3.25rem, 13vw, 4.5rem); line-height: 1; }
.v2-hero__cond {
  font-size: var(--t-h2); color: var(--c-testo-soft);
  font-weight: 500; line-height: 1.2;
}
.v2-hero .v2-conclusione { margin: var(--s2) 0 0; }
.v2-hero .v2-motivo { margin-top: var(--s1); }
.v2-hero__meta { margin-top: var(--s3); }

/* ============================================================================
   Avvisi: tutti quelli rilevati, sotto la conclusione, mai al posto suo
   ============================================================================ */
.v2-avvisi { display: grid; gap: var(--s3); margin-top: var(--s4); }
.v2-hazard { align-items: center; justify-content: space-between; gap: var(--s4); }
.v2-hazard__t { color: var(--su-tinto-testo); }
.v2-hazard__d { color: var(--su-tinto-soft); }
.v2-hazard .v2-tag { background: transparent; flex: none; }
.v2-hazard--alto    { --liv: var(--r-alto-scuro);    --liv-bg: var(--r-alto-bg); }
.v2-hazard--rilievo { --liv: var(--r-rilievo-scuro); --liv-bg: var(--r-rilievo-bg); }
.v2-hazard--attesa  { --liv: var(--r-attesa-scuro);  --liv-bg: var(--r-attesa-bg); }

/* --- esiti attivita': stesse tinte, testo scurito per reggere AA -------- */
.v2-esito--si      { color: var(--r-nessuno-scuro); }
.v2-esito--forse   { color: var(--r-attesa-scuro); }
.v2-esito--aspetta { color: var(--r-rilievo-scuro); }
.v2-esito--no      { color: var(--r-alto-scuro); }
.v2-esito { min-height: 28px; display: inline-flex; align-items: center; }

.v2-att__i {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; width: 100%; color: var(--c-testo-soft);
}
.v2-altre { margin-top: var(--s3); }
.v2-altre > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: var(--t-piccolo); font-weight: 600; color: var(--c-brand);
}

/* --- il pannello tecnico e i bottoni arrivano a 44 px ------------------- */
.v2-perche > summary { min-height: 44px; display: flex; align-items: center; }
.v2-bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s5); border-radius: var(--raggio-s);
  border: 1px solid var(--c-bordo-forte); background: var(--c-superficie);
  color: var(--c-testo); font-weight: 600; text-decoration: none;
}
.v2-bottone:hover { border-color: var(--c-testo); }
.v2-piede { margin-top: var(--s7); font-size: var(--t-micro); }
.v2-piede a { color: var(--c-brand); }

/* ============================================================================
   Navigazione mobile: quattro voci, e su desktop sparisce
   Lo stato attivo non dipende dal colore: cambia peso, compare una barra
   sopra la voce e l'icona si riempie. Chi non distingue i colori lo vede
   comunque, e `aria-current` lo dice a chi usa uno screen reader.
   ============================================================================ */
.v2-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--c-superficie) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-bordo);
  /* iPhone: la barra di sistema non deve coprire le voci */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.v2-nav__v {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: var(--nav-h); padding: 8px 4px;
  color: var(--c-testo-soft); text-decoration: none;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  border-top: 3px solid transparent;
}
.v2-nav__v[aria-current="page"] {
  color: var(--c-testo); border-top-color: var(--c-brand); font-weight: 700;
}
.v2-nav__v[aria-current="page"] svg { stroke-width: 2.6; }
.v2-nav__v:focus-visible { outline-offset: -3px; }

/* Il contenuto non deve finire sotto la barra. */
.v2--connav .v2-guscio { padding-bottom: calc(var(--nav-h) + var(--s7) + env(safe-area-inset-bottom, 0px)); }

@media (min-width: 768px) {
  .v2-nav { display: none; }
  .v2--connav .v2-guscio { padding-bottom: var(--s8); }
}

/* Su desktop la colonna laterale non serve piu': le attivita' stanno nel
   flusso principale, dove si leggono prima anche su mobile. */
@media (min-width: 1024px) {
  .v2-colonne { grid-template-columns: minmax(0, 1fr); }
  .v2-lato { display: none; }
  .v2-principale { max-width: 62rem; }
}

/* Il collegamento nel piede era l'ultimo bersaglio sotto i 44 px: 322x33.
   Un link dentro un paragrafo eredita l'interlinea del testo, quindi non basta
   dargli un'altezza -- va reso inline-flex con un'altezza propria. */
.v2-piede a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
}

/* L'etichetta dentro un avviso sta su fondo tinto come il resto del riquadro:
   ereditava --c-testo-soft (#63737e) e dava 4,31 contro il 4,5 richiesto.
   Avevo scurito titolo e descrizione ma non il tag: stesso contesto, stessa
   regola. */
.v2-hazard .v2-tag { color: var(--su-tinto-soft); border-color: currentColor; }
.v2-hazard .v2-tag--osservato { color: var(--nat-osservato); }

/* ============================================================================
   HOMEPAGE V2 — la ricerca come primo gesto
   ============================================================================ */
.v2-home-hero { padding-bottom: var(--s4); }
.v2-claim { font-size: clamp(1.9rem, 6.5vw, 3rem); margin: 0 0 var(--s3); }
.v2-claim__sub { max-width: 46ch; font-size: var(--t-corpo); }

.v2-cerca { margin-top: var(--s5); }
.v2-cerca__l {
  display: block; font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-testo-soft); margin-bottom: var(--s2);
}
.v2-cerca__riga { display: flex; gap: var(--s2); }
.v2-cerca__i {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--s4);
  font: inherit; font-size: var(--t-corpo);
  color: var(--c-testo); background: var(--c-superficie);
  border: 1px solid var(--c-bordo-forte); border-radius: var(--raggio-s);
}
.v2-cerca__i::placeholder { color: var(--c-testo-soft); }
.v2-cerca__b {
  min-height: 52px; padding: 0 var(--s5); font: inherit; font-weight: 700;
  color: var(--carta); background: var(--c-brand-forte);
  border: 1px solid var(--c-brand-forte); border-radius: var(--raggio-s);
  cursor: pointer;
}
:root[data-theme="dark"] .v2-cerca__b,
:root:not([data-theme="light"]) .v2-cerca__b { color: #08222f; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .v2-cerca__b { color: #fff; } }
.v2-posizione { margin-top: var(--s3); gap: var(--s2); }
.v2-nota-pos { margin-top: var(--s2); font-size: var(--t-piccolo); }

/* --- valori: quattro affermazioni, non quattro card decorate ----------- */
.v2-valori { display: grid; gap: var(--s5); }
.v2-valore h3 {
  font-family: var(--f-display); font-size: var(--t-h3);
  font-weight: 600; margin: 0 0 var(--s1);
}
.v2-valore p { margin: 0; color: var(--c-testo-soft); font-size: var(--t-piccolo); max-width: 46ch; }
.v2-valore a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-brand); font-weight: 600; font-size: var(--t-piccolo);
}

/* --- news: elenco, non vetrina ---------------------------------------- */
.v2-news { display: grid; gap: 2px; }
.v2-news__v {
  display: grid; gap: 2px; padding: var(--s3) 0;
  border-bottom: 1px solid var(--c-bordo); text-decoration: none; color: inherit;
  min-height: 44px;
}
.v2-news__v:last-child { border-bottom: 0; }
.v2-news__t {
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-brand); font-weight: 700;
}
.v2-news__h { font-weight: 600; }
.v2-news__d { font-size: var(--t-micro); color: var(--c-testo-soft); }

/* --- chip: l'indice, in fondo ma per intero --------------------------- */
.v2-chip { display: flex; flex-wrap: wrap; gap: var(--s2); }
.v2-chip__v {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s4); border-radius: var(--raggio-pill);
  border: 1px solid var(--c-bordo); background: var(--c-superficie);
  color: var(--c-testo); text-decoration: none; font-size: var(--t-piccolo);
}
.v2-chip__v:hover { border-color: var(--c-bordo-forte); }
.v2-chip__v--forte { border-color: var(--c-testo); font-weight: 700; }
.v2-testo-seo { margin-top: var(--s5); max-width: var(--largh-testo); font-size: var(--t-piccolo); }

@media (min-width: 768px) {
  .v2-valori { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}
@media (min-width: 1024px) {
  .v2-claim { font-size: 3.25rem; }
  .v2-cerca { max-width: 40rem; }
}

.v2-piede-nav {
  max-width: var(--largh-app); margin: var(--s7) auto 0;
  padding: var(--s5) var(--s4) var(--s7);
  border-top: 1px solid var(--c-bordo);
}
.v2-piede-nav .v2-piede { margin-top: var(--s4); }

/* ============================================================================
   MAPPA V2 — app-first
   La mappa occupa lo schermo; i controlli sono pochi, grandi e sempre
   raggiungibili. Niente pannelli tecnici aperti di default.
   ============================================================================ */
.v2--mappa { display: flex; flex-direction: column; min-height: 100dvh; }
.v2-bar--mappa { position: static; }

.v2-vivo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .06em;
  color: var(--r-alto-scuro);
}
.v2-vivo i {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  animation: v2-batte 1.8s ease-in-out infinite;
}
@keyframes v2-batte { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .v2-vivo i { animation: none } }

/* --- livelli: tre in chiaro, il resto sotto --------------------------- */
.v2-livelli {
  display: flex; gap: var(--s2); padding: var(--s3) var(--s4);
  overflow-x: auto; align-items: center;
  border-bottom: 1px solid var(--c-bordo); background: var(--c-fondo);
}
.v2-liv {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--raggio-pill);
  border: 1px solid var(--c-bordo); background: var(--c-superficie);
  color: var(--c-testo-soft); font: inherit; font-size: var(--t-piccolo);
  font-weight: 600; cursor: pointer;
}
/* Lo stato acceso non dipende dal colore: compare il segno di spunta, il peso
   sale e il bordo si scurisce. */
.v2-liv__c { width: 0; overflow: hidden; transition: width var(--mov-veloce); color: var(--c-brand); }
.v2-liv[aria-pressed="true"] {
  color: var(--c-testo); border-color: var(--c-testo); font-weight: 700;
}
.v2-liv[aria-pressed="true"] .v2-liv__c { width: 1em; }

.v2-altri { flex: none; }
.v2-altri > summary {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s4); border-radius: var(--raggio-pill);
  border: 1px dashed var(--c-bordo-forte); background: transparent;
  font-size: var(--t-piccolo); font-weight: 600; color: var(--c-testo-soft);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.v2-altri > summary::-webkit-details-marker { display: none; }
.v2-altri__c {
  position: absolute; z-index: 25; margin-top: var(--s2);
  display: grid; gap: var(--s2); padding: var(--s3);
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  border-radius: var(--raggio-m); box-shadow: var(--ombra-2);
}
.v2-altri__n { margin: 0; font-size: var(--t-micro); color: var(--c-testo-soft); max-width: 22rem; }

/* --- la mappa e la sua barra del tempo -------------------------------- */
/* La cartografia e' protagonista: riempie quasi tutta la prima schermata,
   il testo di contesto resta sotto la piega. */
.v2-mappa-guscio { position: relative; flex: 1; min-height: 68dvh; }
.v2-mappa { position: absolute; inset: 0; background: var(--c-superficie-2); }
.v2-mappa:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }

.v2-tempo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-superficie) 92%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--c-bordo);
}
.v2-tempo__b {
  flex: none; width: 48px; height: 48px; border-radius: var(--raggio-pill);
  border: 1px solid var(--c-bordo-forte); background: var(--c-superficie);
  color: var(--c-testo); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.v2-tempo__c { flex: 1; min-width: 0; }
.v2-tempo__l {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-piccolo); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.v2-tempo__r { width: 100%; height: 44px; accent-color: var(--c-brand); cursor: pointer; }

/* --- il foglio del punto toccato -------------------------------------- */
.v2-foglio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-height: 62dvh; overflow-y: auto;
  background: var(--c-superficie); border-top: 1px solid var(--c-bordo);
  border-radius: var(--raggio-l) var(--raggio-l) 0 0;
  box-shadow: 0 -8px 28px -18px rgba(18, 32, 42, .5);
  padding: var(--s2) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
}
.v2-foglio__m { width: 40px; height: 4px; border-radius: 99px; background: var(--c-bordo-forte); margin: var(--s2) auto var(--s3); }
.v2-foglio__t { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.v2-foglio__t h2 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.v2-foglio__c { margin-top: var(--s3); display: grid; gap: var(--s3); }
.v2-avviso-p { padding-bottom: var(--s3); border-bottom: 1px solid var(--c-bordo); }
.v2-avviso-p:last-of-type { border-bottom: 0; }
.v2-avviso-p .v2-motivo { margin: 4px 0 0; font-size: var(--t-piccolo); }
.v2-foglio__f { font-size: var(--t-micro); color: var(--c-testo-soft); }

/* --- vista satellite: nazionale, dichiarata --------------------------- */
.v2-sat {
  position: fixed; inset: 0; z-index: 45; overflow-y: auto;
  background: var(--c-fondo); padding: var(--s4);
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom, 0px));
}
.v2-sat__t { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.v2-sat__t b { font-family: var(--f-display); font-size: var(--t-h3); }
.v2-sat__t .v2-icona { margin-left: auto; }
.v2-sat img { display: block; width: 100%; height: auto; border-radius: var(--raggio-m); background: var(--c-superficie-2); }
.v2-sat__n { margin-top: var(--s3); font-size: var(--t-piccolo); }

.v2-sotto-mappa { padding-top: var(--s6); }
.v2-fonte { padding: var(--s3) 0; border-bottom: 1px solid var(--c-bordo); }
.v2-fonte:last-child { border-bottom: 0; }
.v2-fonte .v2-motivo { margin: 4px 0 0; font-size: var(--t-piccolo); }

@media (min-width: 768px) {
  .v2-mappa-guscio { min-height: 74dvh; }
  .v2-foglio { left: auto; right: var(--s5); bottom: var(--s5); width: 26rem; border-radius: var(--raggio-l); }
}

/* I comandi di zoom di Leaflet nascono 30x30: sotto il minimo di 44 px del
   WCAG 2.2. Non si tocca la libreria, si corregge la resa. */
.v2--mappa .leaflet-control-zoom a {
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
}
.v2--mappa .leaflet-control-zoom { border: 0; box-shadow: var(--ombra-2); }
.v2--mappa .leaflet-bar a { border-bottom-color: var(--c-bordo); }
/* Il titolo nella barra resta della misura di prima: e' un h1 per la
   struttura del documento, non per gridare. */
.v2-bar h1.v2-bar__nome { font-size: var(--t-h3); margin: 0; }


/* Altezza deterministica della mappa su mobile: con `flex: 1` l'area si
   assestava solo dopo che il resto della pagina aveva finito, e ogni
   assestamento e' uno spostamento di layout (CLS 0,114). Qui l'altezza e' nota
   prima che Leaflet esista. */
@media (max-width: 767px) {
  .v2-mappa-guscio { flex: none; height: 68dvh; min-height: 68dvh; }
}

/* I pannelli di Leaflet vivono fra z-index 400 e 700. Senza un contesto di
   impilamento proprio, quei numeri si confrontano con i FRATELLI della mappa:
   la barra del tempo a z-index 15 finiva sotto le mattonelle ed era invisibile
   pur essendo renderizzata. `z-index: 0` su un elemento posizionato crea il
   contesto e chiude i 400-700 dentro la mappa, dove appartengono. */
.v2--mappa .v2-mappa { z-index: 0; }
.v2--mappa .v2-tempo { z-index: 5; }

/* L'avviso di degradazione: dichiarato, non dedotto da uno sfondo vuoto. */
.basemap-avviso {
  max-width: 17rem; padding: 8px 12px; border-radius: 10px;
  background: var(--c-superficie); border: 1px solid var(--c-bordo-forte);
  color: var(--c-testo); font-size: 12px; line-height: 1.4;
  box-shadow: var(--ombra-2);
}
/* L'attribuzione non deve finire sotto la barra del tempo. */
.v2--mappa .leaflet-control-attribution {
  font-size: 10px; background: color-mix(in srgb, var(--c-superficie) 90%, transparent);
  margin-bottom: 0;
}


/* L'attribuzione della mappa: sopra la barra del tempo, mai sotto i comandi,
   mai coperta dal foglio del punto o dalla safe-area. */
.v2-mappa-attrib {
  position: absolute; left: var(--s3); right: var(--s3);
  bottom: calc(102px + env(safe-area-inset-bottom, 0px));
  z-index: 6; margin: 0;
  font-size: 10.5px; line-height: 1.35; color: var(--c-testo-soft);
  background: color-mix(in srgb, var(--c-superficie) 88%, transparent);
  border-radius: 6px; padding: 3px 7px; width: fit-content; max-width: calc(100% - var(--s5));
}
.v2-mappa-attrib a { color: inherit; }

/* ============================================================================
   PRECISIONE V2 — consumer sopra, esperto sotto
   ============================================================================ */
.v2-sintesi {
  margin-top: var(--s5); padding: var(--s5);
  border: 1px solid var(--c-bordo); border-radius: var(--raggio-l);
  background: var(--c-superficie);
}
.v2-sintesi__d { margin: 0 0 var(--s2); font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.v2-sintesi__r { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.v2-sintesi__v {
  font-family: var(--f-display); font-size: clamp(2.5rem, 9vw, 3.5rem);
  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.v2-sintesi__v small { font-size: .38em; font-weight: 500; margin-left: 2px; }
.v2-sintesi__b { font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.v2-sintesi__m { margin: var(--s3) 0 0; font-size: var(--t-corpo); }
.v2-sintesi__c { margin: var(--s2) 0 0; font-size: var(--t-micro); }

.v2-elenco { margin: var(--s2) 0 0; padding-left: 1.1rem; font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.v2-elenco li { margin-bottom: 6px; }
.v2-nota-metodo { margin-top: var(--s5); font-size: var(--t-piccolo); max-width: var(--largh-testo); }

/* --- stato della metrica: colore E parola, mai solo colore ------------- */
.v2-stato {
  display: inline-flex; align-items: center; flex: none;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: var(--raggio-pill);
  border: 1px solid currentColor;
}
.v2-stato--ok      { color: var(--r-nessuno-scuro); background: var(--r-nessuno-bg); }
.v2-stato--vecchia { color: var(--r-rilievo-scuro); background: var(--r-rilievo-bg); }
.v2-stato--prova   { color: var(--c-testo-soft);    background: var(--c-superficie-2); border-style: dashed; }
.v2-stato--nulla   { color: var(--c-testo-soft);    background: var(--c-superficie-2); border-style: dotted; }
.v2-stato--poco    { color: var(--r-attesa-scuro);  background: var(--r-attesa-bg); }

/* --- una scheda per claim --------------------------------------------- */
.v2-claims { display: grid; gap: var(--s5); }
.v2-claim {
  padding: var(--s5); border: 1px solid var(--c-bordo);
  border-radius: var(--raggio-l); background: var(--c-superficie);
}
.v2-claim--non_valutabile, .v2-claim--sperimentale { background: var(--c-superficie-2); }
.v2-claim__t { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.v2-claim__t h3 { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; margin: 0; }
.v2-claim__d { margin: var(--s2) 0 0; font-size: var(--t-piccolo); max-width: var(--largh-testo); }
.v2-claim__n { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.v2-claim__v {
  font-family: var(--f-display); font-size: 2rem; font-weight: 600;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.v2-claim__v small { font-size: .45em; margin-left: 2px; }
.v2-claim__b { font-size: var(--t-piccolo); color: var(--c-testo-soft); }
.v2-claim__vuoto { margin-top: var(--s4); font-size: var(--t-piccolo); }

/* --- barre: scala dichiarata, sempre da zero -------------------------- */
.v2-barre { margin-top: var(--s4); display: grid; gap: 6px; }
.v2-barra { display: grid; grid-template-columns: 8.5rem 1fr 3rem; gap: var(--s3); align-items: center; }
.v2-barra__e { font-size: var(--t-micro); color: var(--c-testo-soft); }
.v2-barra__t { height: 12px; border-radius: 99px; background: var(--c-superficie-2); overflow: hidden; }
.v2-barra__t i { display: block; height: 100%; background: var(--c-brand); border-radius: 99px; }
.v2-barra--base .v2-barra__t i { background: var(--c-bordo-forte); }
.v2-barra__v { font-size: var(--t-piccolo); font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.v2-barre__s { margin: 4px 0 0; font-size: var(--t-micro); color: var(--c-testo-soft); }

/* --- i metadati che rendono leggibile un numero ----------------------- */
.v2-meta { display: grid; gap: var(--s3); margin: var(--s4) 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-meta dt { font-size: var(--t-micro); color: var(--c-testo-soft); text-transform: uppercase; letter-spacing: .03em; }
.v2-meta dd { margin: 2px 0 0; font-size: var(--t-piccolo); font-variant-numeric: tabular-nums; }

.v2-limiti { margin: var(--s4) 0 0; padding-left: 1.1rem; font-size: var(--t-micro); color: var(--c-testo-soft); }
.v2-limiti li { margin-bottom: 4px; }

.v2-esperto { margin-top: var(--s4); }
.v2-tab-esperto { width: 100%; border-collapse: collapse; font-size: var(--t-piccolo); }
.v2-tab-esperto caption { text-align: left; font-size: var(--t-micro); color: var(--c-testo-soft); padding-bottom: var(--s2); }
.v2-tab-esperto th { text-align: left; font-weight: 600; padding: 5px var(--s3) 5px 0; color: var(--c-testo-soft); vertical-align: top; width: 45%; }
.v2-tab-esperto td { padding: 5px 0; font-variant-numeric: tabular-nums; word-break: break-word; }
.v2-tab-esperto tr { border-bottom: 1px solid var(--c-bordo); }
.v2-tab-esperto tr:last-child { border-bottom: 0; }

.v2-glossario dt { font-weight: 700; font-size: var(--t-piccolo); margin-top: var(--s3); }
.v2-glossario dd { margin: 2px 0 0; font-size: var(--t-piccolo); color: var(--c-testo-soft); max-width: var(--largh-testo); }

@media (min-width: 768px) {
  .v2-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .v2-claims { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .v2-sintesi { max-width: 44rem; }
}

/* `hidden` deve nascondere davvero: il foglio del browser perde contro
   qualunque regola d'autore, e sei componenti della preview restavano
   disegnati — comprese due barre che affermavano il falso e un distintivo
   "LIVE" acceso a vuoto. Fuori dal blocco prefers-reduced-motion, che per
   prassi deve vincere sempre, questo e' l'unico !important del foglio. */
[hidden] { display: none !important; }

/* Le barre di stato stanno in una pila FISSA in basso, non nel flusso.
   Quando stavano in cima al documento, comparire significava spingere giu'
   tutta la pagina: 0,1204 di scostamento misurato, sempre lo stesso su tre
   prove. Da qui non muovono niente di gia' disegnato; si aggiunge soltanto
   spazio sotto l'ultimo contenuto, che nessuno stava leggendo. */
.v2-pila-stato {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 34; display: grid;
}
.v2-pila-stato:empty { display: none; }
/* Lo spazio si riserva solo quando una barra c'e' davvero. */
.v2[data-barre="1"] { padding-bottom: 56px; }
.v2[data-barre="2"] { padding-bottom: 108px; }

/* --- barre di stato della PWA: dichiarate, non dedotte ----------------- */
.v2-avviso-rete, .v2-avviso-agg {
  padding: 10px var(--s4); font-size: var(--t-piccolo); font-weight: 600;
  background: var(--r-attesa-bg); color: var(--su-tinto-testo);
  border-bottom: 1px solid var(--c-bordo);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
}
.v2-avviso-agg { background: var(--blu-050); }
.v2-eta-copia { font-weight: 400; opacity: .85; }
.v2-invito {
  position: fixed; left: var(--s4); right: var(--s4);
  bottom: calc(var(--nav-h) + var(--s4) + var(--h-barre, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 35; padding: var(--s4); border-radius: var(--raggio-l);
  background: var(--c-superficie); border: 1px solid var(--c-bordo-forte);
  box-shadow: var(--ombra-2); display: grid; gap: var(--s3);
}
.v2-invito__a { display: flex; gap: var(--s2); flex-wrap: wrap; }
.v2-luoghi { display: grid; gap: var(--s3); }


/* `leaflet.css` viene iniettato a runtime, quindi arriva DOPO questo foglio.
   La regola di Leaflet per i comandi ha la stessa specificita' della nostra
   (0,2,1) e a parita' vince l'ultimo: il fix sui 44 px veniva annullato in
   silenzio. Qui si sale a 0,3,1, senza !important. */
.v2--mappa .leaflet-touch .leaflet-bar a,
.v2--mappa .leaflet-touch .leaflet-control-zoom a {
  width: 44px; height: 44px; line-height: 44px; font-size: 20px;
}