/* Font self-hosted: nessuna chiamata a fonts.googleapis.com / fonts.gstatic.com.

   Public Sans (variable 100-900, OFL) + IBM Plex Mono (OFL).

   Subset: latin + latin-ext. Rigenerabile con bin/fonts.sh */



/* Public Sans -- latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/public-sans-400-latin-ext.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;
}

/* Public Sans -- latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/public-sans-400-latin.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;
}

/* IBM Plex Mono 400 -- latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.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;
}

/* IBM Plex Mono 400 -- latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin.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;
}

/* IBM Plex Mono 500 -- latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin-ext.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;
}

/* IBM Plex Mono 500 -- latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-latin.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;
}

/* IBM Plex Mono 600 -- latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-600-latin-ext.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;
}

/* IBM Plex Mono 600 -- latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-600-latin.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;
}

/* ==========================================================================
   IL COSTO DEL PIENO — design tokens
   Direzione B, congelata il 2026-08-20. Dopo questo file nessun colore e
   nessuna dimensione nasce altrove: se un valore non e' qui, non si usa.

   Regola della direzione: l'unita' di misura del sito e' l'EURO SUL PIENO,
   non l'euro al litro. Il colore codifica il SOVRAPPREZZO rispetto al pieno
   piu' economico raggiungibile. Nessun colore e' decorativo.
   ========================================================================== */

:root {
  /* --- TIPOGRAFIA -------------------------------------------------------
     Public Sans: font del governo federale USA. Registro civico, zero
     brillantezza commerciale. IBM Plex Mono solo per le cifre.            */
  --font-text: 'Public Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-num:  'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* scala stretta: 12 / 14 / 16 / 20 / 28 / 40 */
  --t-xs: 0.75rem;    /* 12 - didascalie, eur/litro, note        */
  --t-sm: 0.875rem;   /* 14 - tabelle, corpo minore              */
  --t-md: 1rem;       /* 16 - corpo                              */
  --t-lg: 1.25rem;    /* 20 - sottotitoli                        */
  --t-xl: 1.75rem;    /* 28 - titoli sezione                     */
  --t-2xl: 2.5rem;    /* 40 - IL NUMERO                          */

  --lh-tight: 1.1;
  --lh-num: 1;
  --lh-body: 1.55;
  --measure: 68ch;

  /* --- SCALA SEMANTICA: SOVRAPPREZZO SUL PIENO --------------------------
     Sequenziale, ancorata a zero (= il piu' economico del comune).
     I gradini NON sono estetici, sono le misure fatte sul feed MIMIT
     del 19/08/2026 su 23.972 impianti:
       2,50 EUR = risparmio mediano dentro lo stesso comune (2.878 comuni)
       5,00 EUR = 90esimo percentile dello stesso risparmio
      10,00 EUR = delta mediano servito vs self (12.682 impianti)
     Chi supera 10 EUR sta pagando piu' del costo di farsi servire.        */
  --pieno-0: #14564A;   /* 0,00          il piu' economico raggiungibile   */
  --pieno-1: #6E6A60;   /* +0,01 .. 2,50 differenza trascurabile           */
  --pieno-2: #9A6F1E;   /* +2,51 .. 5,00 vale la deviazione                */
  --pieno-3: #B4490D;   /* +5,01 .. 10,0 qui vive il servito               */
  --pieno-4: #8C1D18;   /* > 10,00       stai pagando troppo               */

  /* fondi tenui degli stessi gradini, per le celle e i badge */
  --pieno-0-bg: #E4EFEA;
  --pieno-1-bg: #EDEAE2;
  --pieno-2-bg: #F6EBD4;
  --pieno-3-bg: #F8E3D5;
  --pieno-4-bg: #F6DCD9;

  /* --- NEUTRI CALDI (carta) ---------------------------------------------
     Mai #000, mai #fff.                                                   */
  --n-950: #100E0B;
  --n-900: #1C1A16;
  --n-800: #33302A;
  --n-700: #57534B;
  --n-600: #7D7970;
  --n-500: #ABA69C;
  --n-400: #C4BFB5;
  --n-300: #D5D0C6;
  --n-200: #EAE6DD;
  --n-100: #F5F2EA;
  --n-050: #FBF9F4;

  /* --- ACCENTO ----------------------------------------------------------
     Uno solo, e solo per link e stato attivo. Mai per decorare, mai
     dentro la scala dati.                                                 */
  --accent: #1F4E79;
  --accent-hover: #163A5A;
  --focus: #B4490D;

  /* --- RUOLI ------------------------------------------------------------ */
  --bg:        var(--n-050);
  --bg-raised: #FFFFFC;
  --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;

  --row-h: 44px;            /* ospita la barra del sovrapprezzo */
  --cell-pad: var(--s2) var(--s3);
  --wrap: 1180px;
  --border: 1px solid var(--rule);
  --border-soft: 1px solid var(--rule-soft);
  --radius: 2px;            /* quasi nessuno: e' un documento, non una card */
}

/* --- DARK MODE: ricalibrata, non invertita ------------------------------
   La scala del sovrapprezzo va rischiarata perche' su fondo scuro i toni
   scuri collassano. I rapporti tra i gradini restano gli stessi.          */
@media (prefers-color-scheme: dark) {
  :root {
    --pieno-0: #4FBFA0;
    --pieno-1: #A8A296;
    --pieno-2: #D9A63C;
    --pieno-3: #F0793B;
    --pieno-4: #F2635C;

    --pieno-0-bg: #14322B;
    --pieno-1-bg: #2A2823;
    --pieno-2-bg: #372C13;
    --pieno-3-bg: #3B2115;
    --pieno-4-bg: #3B1B1A;

    --bg:        #14120F;
    --bg-raised: #1C1A16;
    --bg-sunken: #100E0B;
    --ink:       #F0ECE3;
    --ink-soft:  #C4BFB5;
    --ink-faint: #9C978D;
    --rule:      #3A3630;
    --rule-soft: #2A2722;

    --accent: #7FB0DC;
    --accent-hover: #A9CBEA;
    --focus: #F0793B;
  }
}

/* ==========================================================================
   IL COSTO DEL PIENO — app.css
   Scritto a mano sui token di tokens.css. Nessun framework, nessun reset di
   terze parti, nessuna classe di utility generica.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Rete di sicurezza contro lo sfondamento orizzontale: se un domani un
   elemento sbordera' di qualche pixel, il documento non scorrera' comunque
   di lato. Tre precisazioni, tutte verificate su Chrome 151 e non dedotte:
   - 'clip' e non 'hidden': clip non crea un contenitore di scorrimento,
     quindi position:sticky continua a funzionare (misurato);
   - la regola va su html E su body: da soli non bastano, perche' la
     radice propaga l'overflow al viewport e la propagazione se lo mangia
     (misurato: html{overflow-x:clip} da solo lascia scorrere di 580px);
   - overflow-clip-margin lascia 8px di respiro agli anelli di focus, che
     stanno fuori dal box e non devono essere tagliati.
   Non e' una scusa per lasciare bug: e' la rete sotto il filo.            */
html, body { overflow-x: clip; overflow-clip-margin: 8px; }
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, non colore piatto */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* Nessun media incorporato puo' essere piu' largo della sua colonna.
   Le tessere della mappa sono escluse: Leaflet le posiziona a misura fissa
   e comprimerle rompe la proiezione (leaflet.css lo dichiara gia' con
   !important, questa e' solo la stessa regola detta in casa nostra). */
img, svg, video, canvas, iframe, embed, object { max-width: 100%; }
.leaflet-container img, .leaflet-container svg { max-width: none; }
/* Nessuna parola indivisibile (URL nelle pagine legali, nomi di impianto
   scritti tutti attaccati dal gestore) puo' sfondare la colonna. */
h1, h2, h3, p, li, dd, dt, td, th, caption { overflow-wrap: break-word; }

h1, h2, h3 { font-weight: 700; line-height: var(--lh-tight); margin: 0; letter-spacing: -.011em; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p  { margin: 0 0 var(--s4); max-width: var(--measure); }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* le cifre sono sempre mono e sempre tabulari */
.num {
  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(--s4); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s2); z-index: 99; background: var(--bg-raised); padding: var(--s2) var(--s3); border: var(--border); }

/* ---------- MASTHEAD ---------------------------------------------------- */
.masthead { border-bottom: var(--border); background: var(--bg-raised); }
.masthead__in { display: flex; align-items: center; gap: var(--s6); min-height: 56px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: var(--t-md); letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
/* Il marchio compare solo da 560px: sotto quella soglia ogni pixel della
   testata serve al nome, e l'overflow orizzontale e' misurato al limite. */
.brand__mark { display: none; width: 1.15em; height: 1.15em; flex: none; }
@media (min-width: 560px) { .brand__mark { display: block; } }
.brand:hover { color: var(--ink); }
.brand b { color: var(--pieno-0); }
.nav { display: flex; gap: var(--s4); flex-wrap: wrap; margin-right: auto; }
.nav a { font-size: var(--t-sm); color: var(--ink-soft); text-decoration: none; padding: var(--s1) 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pieno-0); font-weight: 500; }

/* ---------- SELETTORE LITRI (elemento firma 1) -------------------------- */
.litri { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-faint); padding: var(--s1) 0; }
.litri__set { display: flex; border: var(--border); background: var(--bg); }
.litri__set button {
  font: inherit; font-family: var(--font-num); font-size: var(--t-xs);
  background: none; border: 0; border-right: var(--border-soft);
  padding: var(--s1) var(--s2); min-width: 34px; min-height: 28px;
  color: var(--ink-soft); cursor: pointer;
}
.litri__set button:last-child { border-right: 0; }
.litri__set button:hover { background: var(--bg-sunken); color: var(--ink); }
.litri__set button[aria-pressed="true"] { background: var(--pieno-0); color: #FBF9F4; font-weight: 600; }
@media (prefers-color-scheme: dark) { .litri__set button[aria-pressed="true"] { color: #100E0B; } }

/* ---------- BREADCRUMB -------------------------------------------------- */
.crumb { font-size: var(--t-xs); color: var(--ink-faint); padding: var(--s3) 0 0; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.crumb li::after { content: "\203A"; padding-left: var(--s1); color: var(--n-500); }
.crumb li:last-child::after { content: ""; }
.crumb a { color: var(--ink-faint); }

/* ---------- TESTATA ASIMMETRICA 2/3 + 1/3 ------------------------------- */
.head { display: grid; grid-template-columns: 2fr 1fr; gap: 0; border: var(--border); background: var(--bg-raised); margin: var(--s4) 0 var(--s6); }
.head__main { padding: var(--s6); border-right: var(--border); }
.head__side { padding: var(--s6); background: var(--bg-sunken); }
.head__kicker { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 var(--s2); }
.head__lead { font-size: var(--t-lg); line-height: 1.3; max-width: 26ch; margin: 0 0 var(--s3); font-weight: 400; color: var(--ink-soft); }

/* IL NUMERO */
.big { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s2); }
.big__v { font-family: var(--font-num); font-size: var(--t-2xl); font-weight: 600; line-height: var(--lh-num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--pieno-0); }
.big__u { font-size: var(--t-sm); color: var(--ink-faint); }
.big__note { font-size: var(--t-xs); color: var(--ink-faint); margin: 0; }

/* coppie etichetta/valore nella colonna di contesto */
.kv { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); align-items: baseline; margin: 0 0 var(--s4); }
.kv dt { font-size: var(--t-xs); color: var(--ink-faint); }
.kv dd { margin: 0; text-align: right; font-family: var(--font-num); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.kv--lead dd { font-size: var(--t-lg); font-weight: 600; }

/* ---------- SEZIONI ----------------------------------------------------- */
.sec { margin: 0 0 var(--s10); }
.sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); border-bottom: 2px solid var(--ink); padding-bottom: var(--s2); margin-bottom: var(--s4); flex-wrap: wrap; }
.sec__h p { margin: 0; font-size: var(--t-xs); color: var(--ink-faint); }

/* ---------- TABELLA DATI ------------------------------------------------ */
/* La tabella del comune ha sei colonne e non si comprime sotto i ~930px
   senza diventare illeggibile. Fra i 721px (dove torna una tabella vera) e
   i ~950px di viewport scorre SOLO questo blocco: il documento resta fermo.
   L'ombra sul bordo non e' decorazione, e' l'affordance: dice che oltre il
   bordo c'e' altra tabella, e sparisce da sola quando non c'e' piu' nulla
   da scorrere (background-attachment: local sulle due velature). */
.tbl-wrap {
  border: var(--border);
  background: var(--bg-raised);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background-image:
    linear-gradient(to right, var(--bg-raised) 40%, transparent),
    linear-gradient(to left,  var(--bg-raised) 40%, transparent),
    linear-gradient(to right, color-mix(in srgb, var(--ink) 14%, transparent), transparent),
    linear-gradient(to left,  color-mix(in srgb, var(--ink) 14%, transparent), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* la legenda sta dentro il blocco che scorre: resta ancorata a sinistra,
   altrimenti scorrerebbe via proprio la chiave di lettura del colore */
.tbl-wrap > .legend { position: sticky; left: 0; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data caption { text-align: left; padding: var(--s3); font-size: var(--t-xs); color: var(--ink-faint); border-bottom: var(--border); }
table.data th, table.data td { padding: var(--cell-pad); border-bottom: var(--border-soft); vertical-align: middle; text-align: left; }
table.data thead th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 500; border-bottom: var(--border);
  background: var(--bg-sunken);
}
table.data tbody tr { height: var(--row-h); }
table.data tbody tr:hover { background: var(--bg-sunken); }
table.data tbody tr:last-child td { border-bottom: 0; }
/* numeri sempre a destra, etichette sempre a sinistra */
.r { text-align: right !important; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eurl { display: block; font-size: var(--t-xs); color: var(--ink-faint); font-weight: 400; }
.name { font-weight: 500; }
.name small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-faint); }
.flag { font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap; }
.muted { color: var(--ink-faint); }

/* ---------- BARRA DEL SOVRAPPREZZO (elemento firma 2) ------------------- */
/* allineata a zero: la lunghezza e' l'euro in piu' rispetto al migliore */
.over { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: var(--s2); min-width: 150px; }
.over__track { height: 10px; background: var(--bg-sunken); border: var(--border-soft); position: relative; }
.over__fill { position: absolute; left: 0; top: 0; bottom: 0; }
.over__v { font-family: var(--font-num); font-size: var(--t-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* Il gradino 0 non ha barra da disegnare: la lunghezza e' zero per
   definizione, il binario resterebbe vuoto. L'etichetta ("il piu' economico",
   "nessun sovrapprezzo") prende quindi tutta la cella e puo' andare a capo.
   Senza questa regola quel testo, largo 129-151px e in nowrap, usciva dalla
   colonna da 58px e spingeva il documento 42px oltre il viewport a
   QUALSIASI larghezza: era la causa principale dello scroll orizzontale.  */
.over.g0 { grid-template-columns: minmax(0, 1fr); }
.over.g0 .over__track { display: none; }
.over.g0 .over__v { white-space: normal; }

.g0 .over__fill, .sw-0 { background: var(--pieno-0); }
.g1 .over__fill, .sw-1 { background: var(--pieno-1); }
.g2 .over__fill, .sw-2 { background: var(--pieno-2); }
.g3 .over__fill, .sw-3 { background: var(--pieno-3); }
.g4 .over__fill, .sw-4 { background: var(--pieno-4); }
.g0 .over__v { color: var(--pieno-0); font-weight: 600; }
.g1 .over__v { color: var(--ink-soft); }
.g2 .over__v { color: var(--pieno-2); }
.g3 .over__v { color: var(--pieno-3); font-weight: 500; }
.g4 .over__v { color: var(--pieno-4); font-weight: 600; }
/* il colore non basta mai da solo: il migliore porta anche un glifo e il peso */
.best::before { content: "\25AA\00A0"; color: var(--pieno-0); }

/* riga-tesi: "al servito, ovunque" — chiude ogni tabella comune */
tr.thesis td { background: var(--pieno-3-bg); border-top: 2px solid var(--pieno-3); font-weight: 500; }
tr.thesis .over__fill { background: var(--pieno-3); }
tr.thesis:hover { background: var(--pieno-3-bg); }
/* dove il servito non costa di piu' il colore deve dirlo: gradino 0, non 3 */
tr.thesis--pari td { background: var(--pieno-0-bg); border-top-color: var(--pieno-0); }
tr.thesis--pari:hover { background: var(--pieno-0-bg); }

/* ---------- CLASSIFICA A DUE COLONNE ------------------------------------ */
/* Non due colonne uguali: quella delle province economiche e la sola
   azionabile (ci si puo' andare), quindi pesa di piu' e tiene il numero
   grande; la colonna delle care e' contesto e sta a lato. */
.duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s8); }
.duo > div + div { padding-left: var(--s8); border-left: var(--border-soft); }
.duo > div + div .rank li { font-size: var(--t-xs); }
.rank { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.rank li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-bottom: var(--border-soft); font-size: var(--t-sm); }
.rank .num { font-weight: 500; }
.rank a { text-decoration: none; color: var(--ink); }
.rank a:hover { text-decoration: underline; }

/* ---------- I TRE DELTA (homepage) -------------------------------------- */
.deltas { list-style: none; margin: 0; padding: 0; }
.deltas li { display: grid; grid-template-columns: minmax(140px, 15rem) 1fr auto; gap: var(--s4); align-items: center; padding: var(--s3) 0; border-bottom: var(--border-soft); }
.deltas__label { font-size: var(--t-sm); font-weight: 500; }
.deltas__label small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-faint); }
.deltas__bar { height: 16px; background: var(--bg-sunken); border: var(--border-soft); position: relative; }
.deltas__bar span { position: absolute; left: 0; top: 0; bottom: 0; }
.deltas__v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--t-lg); font-weight: 600; white-space: nowrap; }

/* ---------- RICERCA ----------------------------------------------------- */
.find { border: var(--border); background: var(--bg-raised); padding: var(--s6); display: grid; grid-template-columns: 2fr 1fr; gap: var(--s6); align-items: center; }
/* Senza min-width:0 la colonna della griglia prende la larghezza minima
   intrinseca del form (campo + bottone = 305px) e sotto i 347px di viewport
   sfonda la pagina. Con questo il campo si accorcia, il bottone no.        */
.find > * { min-width: 0; }
.find form { display: flex; gap: var(--s2); min-width: 0; }
.find input {
  flex: 1; font: inherit; font-size: var(--t-md); padding: var(--s3);
  border: var(--border); background: var(--bg); color: var(--ink); min-width: 0;
}
.find button, .btn {
  font: inherit; font-size: var(--t-sm); font-weight: 500; padding: var(--s3) var(--s5);
  background: var(--ink); color: var(--bg); border: 0; cursor: pointer; text-decoration: none;
}
.find button:hover, .btn:hover { background: var(--n-800); color: var(--bg); }

/* ---------- NOTE / AVVISI ----------------------------------------------- */
.note { font-size: var(--t-xs); color: var(--ink-faint); border-left: 2px solid var(--rule); padding-left: var(--s3); margin: var(--s4) 0; max-width: var(--measure); }
.stale { border-left-color: var(--pieno-2); color: var(--pieno-2); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s4); font-size: var(--t-xs); color: var(--ink-faint); padding: var(--s3); border-top: var(--border); background: var(--bg-sunken); }
.legend span { display: flex; align-items: center; gap: var(--s2); }
.legend i { width: 14px; height: 10px; display: inline-block; border: var(--border-soft); }

/* ---------- MAPPA (secondaria, sotto la tabella) ------------------------ */
.map { height: 400px; border: var(--border); background: var(--bg-sunken); }
.map:focus-visible { outline: 2px solid var(--focus); }
.leaflet-container { font-family: var(--font-text); background: var(--bg-sunken); }
.pin { border-radius: 50%; border: 2px solid #FFFFFC; box-sizing: border-box; }

/* ---------- PROSA (pagine legali/editoriali) ---------------------------- */
.prose { max-width: var(--measure); }
.prose h2 { margin: var(--s8) 0 var(--s3); font-size: var(--t-lg); }
.prose h3 { margin: var(--s6) 0 var(--s2); }
.prose ul, .prose ol { padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose dt { font-weight: 600; margin-top: var(--s3); }
.prose dd { margin: 0 0 var(--s2); color: var(--ink-soft); }

/* ---------- SLOT PUBBLICITARI ------------------------------------------- */
.ad { margin: var(--s8) 0; min-height: 90px; display: flex; align-items: center; justify-content: center; }

/* ---------- COOKIE BANNER ----------------------------------------------- */
.cmp { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--bg-raised); border-top: 2px solid var(--ink); padding: var(--s4) 0; }
.cmp[hidden] { display: none; }
.cmp__in { display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center; }
.cmp p { margin: 0; font-size: var(--t-sm); }
.cmp__acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.cmp__acts button { font: inherit; font-size: var(--t-sm); padding: var(--s2) var(--s4); cursor: pointer; border: var(--border); background: var(--bg); color: var(--ink); white-space: nowrap; }
.cmp__acts button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 500; }

/* ---------- FOOTER ------------------------------------------------------ */
.foot { border-top: var(--border); margin-top: var(--s16); padding: var(--s8) 0 var(--s12); background: var(--bg-raised); font-size: var(--t-xs); color: var(--ink-faint); }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s8); margin-bottom: var(--s6); }
.foot h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: var(--s2); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--s1); }
.foot a { color: var(--ink-faint); }
.foot__src { border-top: var(--border-soft); padding-top: var(--s4); max-width: var(--measure); }

/* ---------- 404 --------------------------------------------------------- */
.e404 { padding: var(--s16) 0; }
.e404 .code { font-family: var(--font-num); font-size: var(--t-2xl); color: var(--pieno-4); font-weight: 600; display: block; }

/* ---------- MOBILE: la tabella diventa una lista ------------------------ */
@media (max-width: 860px) {
  .head, .duo, .find, .foot__cols { grid-template-columns: 1fr; }
  .duo > div + div { padding-left: 0; border-left: 0; border-top: var(--border-soft); padding-top: var(--s6); }
  .head__main { border-right: 0; border-bottom: var(--border); }
  .cmp__in { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  h1 { font-size: var(--t-lg); }
  .big__v { font-size: var(--t-xl); }
  /* Qui la tabella e' display:block, quindi il caption finisce dentro una
     table box anonima e si stringe a 98px: una colonna di due parole.
     Reso block torna largo quanto la lista. */
  table.data caption { border-bottom: 0; display: block; }
  table.data thead { position: absolute; left: -9999px; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tbody tr { height: auto; padding: var(--s3); border-bottom: var(--border); }
  table.data td { border: 0; padding: var(--s1) 0; display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: baseline; }
  table.data td::before { content: attr(data-l); font-size: var(--t-xs); color: var(--ink-faint); }
  table.data td.name { display: block; margin-bottom: var(--s2); }
  table.data td.name::before { content: none; }
  .over { grid-template-columns: minmax(0, 1fr) 58px; min-width: 0; }
  .deltas li { grid-template-columns: 1fr auto; }
  .deltas__bar { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

@media print {
  .masthead, .cmp, .ad, .foot, .map, .find { display: none; }
  body::before { display: none; }
  .tbl-wrap { border: 1px solid #000; }
}

/* prezzo escluso dai calcoli perche' implausibile: si mostra, ma barrato */
.sospetto { color: var(--ink-faint); }
.sospetto s { text-decoration-thickness: 1px; }
.sospetto .eurl { color: var(--pieno-2); }