/* Pagine dei comuni e delle province.
   Stessi token di index.html: se cambia la palette del sito, cambia qui.
   Sta in un file a parte e non dentro ogni pagina perché le pagine sono
   più di cinquemila: inline sarebbero 50 MB di CSS ripetuto, e il browser
   non potrebbe metterlo in cache fra una città e l'altra. */
@font-face{font-family:'Manrope';src:url('/font/Manrope.woff2') format('woff2');
font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/font/SpaceGrotesk.woff2') format('woff2');
font-weight:300 700;font-style:normal;font-display:swap}

:root{
  --teal:#0F766E; --teal-br:#19A594; --teal-glow:#2DBBAC;
  --amber:#E0972A; --amber-br:#F0A83C;
  /* Il semaforo dei prezzi. ⚠️ --exp era #C0503A: 4,04 di contrasto, sotto
     la soglia, e lo usano proprio i numeri — la cosa che si viene a leggere.
     Verde e ambra passavano già (6,03 e 6,35). */
  --cheap:#17A47D; --mid:#D08420; --exp:#C55E4A;
  --ink:#07120F;
  --card:rgba(255,255,255,.05); --card-brd:rgba(255,255,255,.10);
  /* ⚠️ --text3 ERA #5F7570: sul fondo #07120F fa 3,87 di contrasto, sotto il
     4,5 che serve a un testo normale. Non era un dettaglio: lo usano le
     briciole di navigazione, la data dei prezzi, il conteggio dei comuni —
     misurati 113 elementi illeggibili su una pagina sola.
     Se lo si riabbassa, si riabbassa per tutto il sito in una volta.

     ⚠️ E SI MISURA SUL FONDO DELLE SCHEDE, non su quello della pagina. Il
     passaggio a #6D817D l'avevo verificato contro #07120F — 4,61, passato —
     ma le schede e la tabella hanno sopra un bianco al 5%, quindi il fondo
     vero è più chiaro e lì lo stesso colore faceva 4,14: bocciato dove il
     testo sta davvero. Con #778B87 fa 4,74 sulle schede e di più fuori. */
  --text:#EAF3F0; --text2:#9DB3AC; --text3:#778B87;
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Space Grotesk',var(--font);
  --nav-h:66px; --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--ink);color:var(--text);
line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* alone verde in alto, come sulla home */
.glow{position:fixed;inset:0 0 auto;height:70vh;pointer-events:none;z-index:0;
background:radial-gradient(70% 60% at 50% -10%,rgba(25,165,148,.20),transparent 70%)}

nav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;
background:rgba(7,18,15,.82);backdrop-filter:blur(14px);
border-bottom:1px solid var(--card-brd)}
.nav-in{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
font-weight:700;font-size:19px}
.brand img{width:32px;height:32px}
.nav-links{display:flex;align-items:center;gap:22px;font-size:14.5px;color:var(--text2)}
.nav-links a:hover{color:var(--text)}
@media(max-width:760px){.nav-links{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:13px;
font-weight:800;font-size:14.5px;background:linear-gradient(135deg,var(--teal),var(--teal-br));
color:#fff;transition:transform .18s,filter .18s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}

main{position:relative;z-index:1;padding-bottom:70px}
.briciole{font-size:13.5px;color:var(--text3);padding:22px 0 0;display:flex;
gap:8px;flex-wrap:wrap;align-items:center}
.briciole a:hover{color:var(--teal-glow)}
.briciole span{opacity:.5}

h1{font-family:var(--display);font-size:clamp(28px,4.6vw,44px);line-height:1.12;
letter-spacing:-.02em;margin:14px 0 10px}
.sotto{color:var(--text2);font-size:16.5px;max-width:62ch}
.sotto b{color:var(--text)}
.aggiornato{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
font-size:13px;color:var(--text3);border:1px solid var(--card-brd);
border-radius:99px;padding:5px 13px}
.punto{width:7px;height:7px;border-radius:50%;background:var(--cheap);
box-shadow:0 0 0 4px rgba(23,164,125,.18)}
/* La stessa pillola quando la fonte è ferma: il pallino verde direbbe «tutto
   a posto» sopra un prezzo di quattro giorni fa. */
.aggiornato.vecchio{border-color:rgba(224,151,42,.40)}
.aggiornato.vecchio .punto{background:var(--amber);box-shadow:0 0 0 4px rgba(224,151,42,.18)}
.fonte-ferma{margin:10px 0 0;font-size:13.5px;color:var(--text2);max-width:66ch;line-height:1.55}

h2{font-family:var(--display);font-size:clamp(20px,2.6vw,27px);margin:44px 0 4px}
h2+.nota{color:var(--text2);font-size:15px;margin-bottom:18px}

/* riquadri con il prezzo più basso per carburante */
/* ⚠️ La misura minima è calcolata, non scelta a occhio: i carburanti mostrati
   vanno da due a sei, e con 232px al quinto la riga si spezzava e l'HVO
   restava da solo in fondo, largo un quarto di pagina. A 186px ci stanno
   tutti e sei dentro i 1180 della colonna (6×186 + 5×14 = 1186 ≈ il massimo,
   e le celle vuote `auto-fit` le fa sparire), quindi quando i carburanti sono
   quattro le schede tornano larghe come prima. */
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
gap:14px;margin-top:26px}
.scheda{background:var(--card);border:1px solid var(--card-brd);border-radius:17px;
padding:17px 19px;display:flex;flex-direction:column}
/* La riga della forbice va appoggiata in fondo: le schede di una fila hanno
   contenuti di lunghezza diversa (il metano spesso è un distributore solo) e
   senza questo i tratti di separazione finivano a mezz'aria, ognuno a
   un'altezza sua. Lo spaziatore tiene comunque undici pixel d'aria. */
.scheda .riempi{flex:1 1 11px;min-height:11px}
.scheda .carb{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--text3);font-weight:700}
.scheda .prezzo{font-family:var(--display);font-size:33px;font-weight:700;
color:var(--cheap);margin:5px 0 2px;letter-spacing:-.02em}
.scheda .prezzo small{font-size:15px;color:var(--text2);font-weight:600;margin-left:3px}
.scheda .dove{font-size:13.5px;color:var(--text2);line-height:1.45}
.scheda .forbice{padding-top:11px;border-top:1px solid var(--card-brd);
font-size:13px;color:var(--text3)}
.scheda .forbice b{color:var(--amber)}

/* tabella dei distributori.
   ⚠️ SU UN TELEFONO LA TABELLA È PIÙ LARGA DELLO SCHERMO e scorre di lato:
      560px minimi contro 375. Scorreva già, ma in silenzio — le colonne del
      metano e dell'HVO restavano fuori e niente diceva che ci fossero. Le due
      ombre qui sotto compaiono solo dal lato dove c'è ancora roba: sono
      ancorate alla pagina (`scroll`), mentre le due sfumature del colore
      della scheda sono ancorate al contenuto (`local`) e le coprono quando
      si arriva in fondo. Nessun JavaScript, e sparisce da sé dove la tabella
      ci sta tutta. */
.tab-wrap{overflow-x:auto;margin-top:20px;border:1px solid var(--card-brd);
border-radius:17px;
background:
  linear-gradient(90deg,var(--card) 40%,rgba(0,0,0,0)) left/26px 100% no-repeat local,
  linear-gradient(270deg,var(--card) 40%,rgba(0,0,0,0)) right/26px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.42),rgba(0,0,0,0)) left/13px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.42),rgba(0,0,0,0)) right/13px 100% no-repeat scroll,
  var(--card)}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
th{text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--text3);font-weight:700;padding:14px 16px;border-bottom:1px solid var(--card-brd);
white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.03)}
.dist{font-weight:700}
.dist small{display:block;font-weight:500;color:var(--text3);font-size:12.5px;margin-top:2px}
.marca{color:var(--text2);font-size:13px;white-space:nowrap}
td.p{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.p.giu{color:var(--cheap)} .p.su{color:var(--exp)} .p.med{color:var(--text)}
.p em{font-style:normal;color:var(--text3);font-weight:500;font-size:12px}
.vuoto{color:var(--text3);font-weight:500}
.bollino{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;
padding:2px 7px;border-radius:99px;margin-left:6px;vertical-align:1px}
.bollino.best{background:rgba(23,164,125,.18);color:#5FD8B0}
.bollino.auto{background:rgba(224,151,42,.16);color:var(--amber-br)}

/* elenco di comuni o province */
.elenco{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
gap:9px;margin-top:20px}
.voce{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
background:var(--card);border:1px solid var(--card-brd);border-radius:12px;
padding:11px 14px;font-size:14.5px;transition:border-color .15s,transform .15s}
.voce:hover{border-color:var(--teal-br);transform:translateY(-1px)}
.voce b{font-weight:700}
.voce .n{color:var(--text3);font-size:12.5px;white-space:nowrap}
.voce .pr{color:var(--cheap);font-weight:700;font-variant-numeric:tabular-nums;
white-space:nowrap}
.regione{margin-top:34px}
.regione h3{font-family:var(--display);font-size:18px;color:var(--text2);
font-weight:700;margin-bottom:2px}

/* richiamo all'app */
.cta{margin-top:44px;background:linear-gradient(135deg,rgba(15,118,110,.30),rgba(224,151,42,.14));
border:1px solid var(--card-brd);border-radius:22px;padding:30px 28px;
display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{margin:0 0 6px;font-size:23px}
.cta p{color:var(--text2);font-size:15px;max-width:52ch}

footer{border-top:1px solid var(--card-brd);padding:34px 0;margin-top:56px;
color:var(--text3);font-size:14px;position:relative;z-index:1}
.piede{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.piede a{color:var(--text2)}
.piede a:hover{color:var(--text)}
.fonte{font-size:12.5px;color:var(--text3);margin-top:26px;line-height:1.6;max-width:74ch}
.fonte a{color:var(--text2);text-decoration:underline}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Il dito non è un puntatore ─────────────────────────────────────
   Briciole, piede e «vedi →» erano righe di testo alte diciotto o venti
   pixel: da centrare con un dito sono poche, e le WCAG ne chiedono almeno
   ventiquattro. Il riempimento verticale su un elemento in linea allarga
   l'area che si può toccare SENZA muovere di un pixel l'impaginazione. */
@media(max-width:760px){
  .briciole a,.briciole span,.piede a,.fonte a,td a{padding-block:7px}
  .briciole{gap:8px 10px}
}

/* ── Il campo che cerca fra gli ottomila comuni ─────────────────────
   ⚠️ I COLORI VENGONO DALLE VARIABILI DI QUESTO FOGLIO, non da nomi
      inventati. La prima versione usava --bordo, --ink-2, --tenue: nomi che
      qui non esistono, quindi ogni colore cadeva sul ripiego chiaro. Su una
      pagina che ha il fondo #07120F il risultato era un campo BIANCO con
      dentro testo bianco, e un elenco di risultati illeggibile. Le variabili
      vere sono in cima al file: --card, --card-brd, --text, --text2. */
.cerca { margin: 26px 0 4px; position: relative; }
.cerca label {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text2); margin-bottom: 8px;
}
.cerca input {
  width: 100%; box-sizing: border-box;
  padding: 13px 16px; font-size: 16px; /* 16px: sotto, iOS zooma da solo */
  border: 1px solid var(--card-brd); border-radius: 12px;
  background: var(--card); color: var(--text); font-family: inherit;
}
.cerca input::placeholder { color: var(--text3); }
.cerca input:focus {
  outline: none; border-color: var(--teal-glow);
  box-shadow: 0 0 0 3px rgba(45, 187, 172, .18);
}
#q-esiti {
  list-style: none; margin: 8px 0 0; padding: 0;
  border: 1px solid var(--card-brd); border-radius: 12px;
  overflow: hidden; background: #0d1a17;
}
#q-esiti li + li { border-top: 1px solid var(--card-brd); }
#q-esiti a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px; text-decoration: none; color: var(--text);
}
#q-esiti a:hover, #q-esiti a:focus { background: rgba(255,255,255,.06); }
#q-esiti a span { color: var(--text2); font-size: 13px; }
#q-esiti .vuoto { padding: 12px 16px; color: var(--text2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Da quando un prezzo non si muove. Compare solo oltre i tre giorni:
   sotto è il caso normale e sarebbe rumore. */
.scheda .fermo {
  margin-top: 6px; font-size: 12px; font-weight: 600;
  color: var(--amber-br);
}

/* ── La classifica su schermo stretto ───────────────────────────────
   La tabella è larga 560px minimo e scorre di lato dentro il suo
   riquadro. Su un telefono da 375 questo vuol dire che l'ultima
   colonna — la DIFFERENZA A PIENO, cioè il numero che il titolo
   promette — resta fuori, e niente dice che si può scorrere.
   Sotto i 560px le due colonne dei prezzi si tolgono e i due numeri
   tornano sotto il nome della città. */
.stretto { display: none; }
@media (max-width: 560px) {
  table { min-width: 0; }
  .largo { display: none; }
  .stretto { display: block; color: var(--text2); font-size: 12px; }
}

/* La media del comune, sotto il prezzo più basso: è il riferimento che
   rende leggibile il minimo. */
.scheda .media {
  margin-top: 6px; font-size: 12.5px; color: var(--text2);
}