/* L'attributo `hidden` deve vincere su qualsiasi display impostato da una
   classe. Senza questa riga, un elemento con `display:grid` o `display:flex`
   resta visibile anche con hidden=true: il foglio di stile del browser mette
   `[hidden]{display:none}` con specificità zero, e la classe lo scavalca. */
[hidden] { display: none !important; }
/* Mobile-first per davvero: una mano, pieno sole, rete incerta.
   Nessun framework, nessun font remoto: quello che carica più in fretta. */

/* -----------------------------------------------------------------------------
   I nomi vecchi, ricondotti ai token dell'identità.
   -----------------------------------------------------------------------------
   Le regole di questo foglio erano già scritte contro --bg, --card, --ink e
   compagnia. Invece di riscriverle tutte, i vecchi nomi diventano alias dei
   token di tema.css: la tavolozza cambia in un punto solo, e ogni componente
   dell'analisi la eredita senza essere toccato.

   Il tema scuro non sta più qui: lo definisce tema.css, una volta, per tutto
   il sito. Due blocchi scuri in due file sarebbero diventati incoerenti alla
   prima modifica.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --bg:        var(--carta);
  --card:      var(--carta-alta);
  --ink:       var(--inchiostro);
  --ink-soft:  var(--inchiostro-2);
  --ink-faint: var(--inchiostro-3);
  --line:      var(--tratto);
  --line-soft: var(--tratto-fioco);
  --accent:    var(--bosco);

  /* i colori di stato restano quattro famiglie distinte, perché sono un
     linguaggio: verde aperta, giallo in apertura, blu possibile, rosso chiusa.
     Devono restare distinguibili anche per chi confonde rosso e verde, ed è il
     motivo per cui a portare il significato non è mai il solo colore ma anche
     il pallino, l'etichetta e la posizione. */
  --verde: var(--bosco);      --verde-bg: var(--bosco-velo);    --verde-ink: var(--bosco);
  --giallo: var(--ambra);     --giallo-bg: var(--ambra-velo);   --giallo-ink: var(--ambra);
  --blu: var(--acqua);        --blu-bg: var(--acqua-velo);      --blu-ink: var(--acqua);
  --rosso: var(--ruggine);    --rosso-bg: var(--ruggine-velo);  --rosso-ink: var(--ruggine);
  --grigio: var(--inchiostro-2); --grigio-bg: var(--carta-bassa); --grigio-ink: var(--inchiostro-2);

  --pad: 16px;
  --shadow: var(--ombra);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Titoli, pulsanti ed etichette in Archivo, come la landing: è quello che dà
   continuità fra la pagina che vende e il prodotto. Il corpo del testo resta
   sui caratteri di sistema, perché l'app la si apre nel bosco e ogni kilobyte
   in meno è tempo in meno davanti a una schermata bianca. */
h1, h2, h3, h4,
.verdetto .titolo, .btn, .primario, .bottone, .marchio,
.striscia .v, .dato .v, .misure .v {
  font-family: var(--tipo-display), system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -.015em;
}
.striscia .k, .fonte b, .legenda, .punto-coord,
code, .num td:last-child, .dato .u {
  font-family: var(--tipo-dato), ui-monospace, monospace;
}
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 48px;
}
h1, h2, h3 { margin: 0; font-weight: 620; letter-spacing: -.01em; }
p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }
button, select, input { font: inherit; color: inherit; }

.wrap { max-width: 720px; margin: 0 auto; }

/* ---------- mappa ---------- */
#mappa { overflow: hidden; height: 45vh; min-height: 260px; max-height: 460px; width: 100%; background: var(--line-soft); z-index: 1; }
.map-shell { position: relative; }
.map-tools {
  position: absolute; z-index: 500; left: 10px; right: 10px; top: 10px;
  display: flex; gap: 8px; align-items: flex-start;
}
.search { position: relative; flex: 1; }
.search input {
  width: 100%; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow); outline: none;
}
.search input:focus { border-color: var(--accent); }
.risultati {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 250px; overflow-y: auto;
}
.risultati div { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.risultati div:last-child { border-bottom: 0; }
.risultati div:hover, .risultati div:focus { background: var(--line-soft); }
.risultati small { display: block; color: var(--ink-faint); font-size: 12.5px; }
.gps {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 11px; border: 1px solid var(--line);
  background: var(--card); box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; font-size: 19px;
}
.gps:active { transform: scale(.96); }
.map-hint {
  position: absolute; z-index: 500; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.62); color: #fff; padding: 5px 12px; border-radius: 20px;
  font-size: 12.5px; pointer-events: none; white-space: nowrap;
}

/* ---------- blocchi ---------- */
.sez { padding: var(--pad); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--pad); margin-bottom: 14px; box-shadow: var(--shadow);
}
.card > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); margin-bottom: 10px; font-weight: 640; }

/* ---------- scheda punto ---------- */
.punto-nome { font-size: 19px; font-weight: 640; margin-bottom: 2px; }
.punto-coord { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.dato { background: var(--line-soft); border-radius: 10px; padding: 9px 10px; }
.dato .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); }
.dato .v { font-size: 17px; font-weight: 620; font-variant-numeric: tabular-nums; line-height: 1.25; }
.dato .u { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.bussola { display: flex; align-items: center; gap: 7px; }
.bussola svg { flex: 0 0 26px; }

/* ---------- selettori ---------- */
.sel-riga { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .sel-riga { grid-template-columns: 1fr 1fr; } }
.sel label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: 4px; }
.sel select {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sel .perche { font-size: 12px; color: var(--ink-faint); margin-top: 4px; line-height: 1.4; }

/* -----------------------------------------------------------------------------
   VERDETTO
   -----------------------------------------------------------------------------
   Era un rettangolo pieno di colore con dentro del testo. Adesso è un pannello
   con il rilievo del punto disegnato dietro — le stesse isoipse della landing,
   seminate con il numero della cella DPC, quindi ogni punto ha il suo rilievo e
   non è una decorazione uguale per tutti.

   Il colore dello stato non riempie più il fondo: sta in un filo verticale a
   sinistra, nel pallino e nel titolo. Una campitura piena su tutto il pannello
   urla, e su cinque stati diversi rende la pagina un semaforo.
   -------------------------------------------------------------------------- */
.verdetto {
  position: relative; overflow: hidden;
  border-radius: var(--r-max); border: 1px solid var(--tratto);
  background: var(--carta-alta); box-shadow: var(--ombra);
  margin-bottom: 12px;
  animation: sali .45s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes sali { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .verdetto { animation: none; } }

.verdetto .trama {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: .5;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}
.verdetto .dentro { position: relative; z-index: 2; padding: 18px 20px 20px; border-left: 3px solid var(--tratto); }

.verdetto .luogo { margin-bottom: 14px; }
.verdetto .luogo .nome {
  display: block; font-family: var(--tipo-display), system-ui, sans-serif;
  font-weight: 700; font-size: 19px; letter-spacing: -.02em; line-height: 1.15;
}
.verdetto .luogo .coord {
  display: block; font-family: var(--tipo-dato), monospace; font-size: 11.5px;
  color: var(--ink-faint); margin-top: 3px;
}

.verdetto .stato {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--tipo-dato), monospace; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 8px;
}
.verdetto .pallino { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.verdetto .titolo { display: none; }
.verdetto .sotto {
  font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0;
  max-width: 52ch;
}
.verdetto .conto {
  font-family: var(--tipo-dato), monospace; font-size: 12px; line-height: 1.5;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--ink-soft);
}

/* Il colore vive nel filo, nel pallino e nell'etichetta. Mai nel fondo. */
.verdetto.APERTA .dentro { border-left-color: var(--bosco); }
.verdetto.APERTA .stato { color: var(--bosco); }
.verdetto.IN_APERTURA .dentro { border-left-color: var(--ambra); }
.verdetto.IN_APERTURA .stato { color: var(--ambra); }
.verdetto.POSSIBILE .dentro { border-left-color: var(--acqua); }
.verdetto.POSSIBILE .stato { color: var(--acqua); }
.verdetto.CHIUSA .dentro { border-left-color: var(--ruggine); }
.verdetto.CHIUSA .stato { color: var(--ruggine); }
.verdetto.FUORI .dentro { border-left-color: var(--ink-faint); }
.verdetto.FUORI .stato { color: var(--ink-faint); }

/* i vecchi nomi restano per il confronto e la pagina del punto condiviso */
.v-APERTA { background: var(--verde-bg); color: var(--verde-ink); }
.v-IN_APERTURA { background: var(--giallo-bg); color: var(--giallo-ink); }
.v-POSSIBILE { background: var(--blu-bg); color: var(--blu-ink); }
.v-CHIUSA { background: var(--rosso-bg); color: var(--rosso-ink); }
.v-FUORI { background: var(--grigio-bg); color: var(--grigio-ink); }

.avviso-natura {
  font-size: 12.5px; color: var(--ink-faint); line-height: 1.5;
  border-left: 2px solid var(--tratto); padding-left: 12px; margin: 0 0 16px;
}

/* ---------- specie ---------- */
.specie { border: 1px solid var(--line); border-radius: 11px; padding: 13px; margin-bottom: 10px; }
.specie:last-child { margin-bottom: 0; }
.specie .riga1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.specie .nome { font-style: italic; font-weight: 620; font-size: 16.5px; }
.specie .comune { font-style: normal; font-weight: 400; color: var(--ink-faint); font-size: 13px; }
.badge { font-size: 11px; font-weight: 640; text-transform: uppercase; letter-spacing: .05em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.b-APERTA { background: var(--verde-bg); color: var(--verde-ink); }
.b-IN_APERTURA { background: var(--giallo-bg); color: var(--giallo-ink); }
.b-POSSIBILE { background: var(--blu-bg); color: var(--blu-ink); }
.b-CHIUSA { background: var(--rosso-bg); color: var(--rosso-ink); }
.b-FUORI { background: var(--grigio-bg); color: var(--grigio-ink); }
.specie .dettaglio { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.5; }
.barra { height: 7px; border-radius: 4px; background: var(--line-soft); margin-top: 9px; position: relative; overflow: hidden; }
.barra i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: currentColor; opacity: .75; }
.prob { font-variant-numeric: tabular-nums; font-weight: 620; }
.escluse { font-size: 13px; color: var(--ink-faint); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.escluse b { font-style: italic; font-weight: 600; color: var(--ink-soft); }

/* ---------- grafico ---------- */
.grafico { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.grafico svg { display: block; }
.legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; }
.legenda span { display: flex; align-items: center; gap: 5px; }
.legenda i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }

/* ---------- consiglio ---------- */
.consiglio p { font-size: 15.5px; line-height: 1.62; }
.consiglio .note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-faint); }
.consiglio .note p { font-size: 12.5px; line-height: 1.5; }

/* ---------- badge provenienza ---------- */
.fonti { display: flex; flex-wrap: wrap; gap: 7px; }
.fonte {
  font-size: 11.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--line-soft); line-height: 1.35;
}
.fonte b { font-weight: 640; }
.fonte.alta { border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.fonte.media { border-color: color-mix(in srgb, var(--giallo) 45%, transparent); }
.fonte.bassa { border-color: color-mix(in srgb, var(--rosso) 45%, transparent); }

/* ---------- perché ---------- */
details.perche { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); margin-bottom: 14px; box-shadow: var(--shadow); }
details.perche > summary {
  padding: 15px var(--pad); cursor: pointer; font-weight: 600; font-size: 15px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.perche > summary::-webkit-details-marker { display: none; }
details.perche > summary::after { content: '＋'; color: var(--ink-faint); font-weight: 400; }
details.perche[open] > summary::after { content: '−'; }
details.perche .corpo { padding: 0 var(--pad) var(--pad); }
table.num { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
table.num th, table.num td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; word-break: break-word; }
table.num td { width: 50%; }
table.num td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 560; word-break: break-word; overflow-wrap: anywhere; }
table.num td:first-child { color: var(--ink-soft); }
table.num th { color: var(--ink-faint); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; padding-top: 14px; }
.avvertenza { font-size: 13px; line-height: 1.5; background: var(--giallo-bg); color: var(--giallo-ink); padding: 10px 12px; border-radius: 9px; margin-top: 8px; }

/* ---------- feedback ---------- */
.scelte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.scelte button {
  padding: 9px 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font-size: 14px;
}
.scelte button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.scelte button:active { transform: scale(.97); }
.primario {
  width: 100%; margin-top: 12px; padding: 13px; border-radius: 11px; border: 0;
  background: var(--accent); color: #fff; font-weight: 620; cursor: pointer; font-size: 15px;
}
.primario:disabled { opacity: .45; cursor: default; }
.esito-ok { margin-top: 10px; font-size: 13.5px; color: var(--verde); line-height: 1.5; }

/* ---------- stati di caricamento ---------- */
.spinner { display: flex; align-items: center; gap: 10px; color: var(--ink-faint); font-size: 14.5px; padding: 26px var(--pad); justify-content: center; }
.spinner i {
  width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
.errore { background: var(--rosso-bg); color: var(--rosso-ink); border-radius: var(--r); padding: var(--pad); font-size: 14.5px; line-height: 1.55; margin-bottom: 14px; }

footer { padding: 6px var(--pad) 28px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.6; text-align: center; }
footer a { color: var(--ink-soft); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* -----------------------------------------------------------------------------
   Collisione di specificità, trovata provando.
   -----------------------------------------------------------------------------
   `.pagina a { color: var(--accent) }` in sito.css vale (0,1,1) e batte
   `.btn` (0,1,0): il risultato era testo verde su fondo verde, cioè un
   pulsante vuoto. Non si vede leggendo il codice, si vede solo guardando la
   pagina. Le regole qui sotto sono più specifiche di entrambe, quindi il
   problema non può tornare da nessuna delle due parti.
   -------------------------------------------------------------------------- */
a.btn, .pagina a.btn, .card a.btn { color: var(--carta-alta); }
a.btn.secondario, .pagina a.btn.secondario, .card a.btn.secondario { color: var(--ink); }

/* ---------------------------------------------------- blocco 2: striscia dati

   Le quattro cose che devono restare visibili su ogni analisi: provenienza,
   data dell'ultima misura, incertezza come banda, coerenza orografica.
   Scorre in orizzontale sui telefoni stretti invece di comprimersi fino a
   diventare illeggibile. */
/* Quattro celle sempre TUTTE visibili. Una striscia che scorre in orizzontale
   ne mostrerebbe due e nasconderebbe le altre due: su un'informazione che il
   capitolato vuole sempre sotto gli occhi, "c'è ma devi scorrere" non conta.
   Sul telefono diventano due righe da due. */
.striscia {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; margin-bottom: 8px;
}
@media (max-width: 720px) {
  .striscia { grid-template-columns: 1fr 1fr; }
}
.striscia .cella {
  background: var(--card); border: 1px solid var(--line);
  border-left-width: 3px; border-radius: 10px; padding: 9px 11px; min-width: 0;
}
.striscia .cella.ok { border-left-color: var(--verde); }
.striscia .cella.medio { border-left-color: var(--giallo); }
.striscia .cella.basso { border-left-color: var(--rosso); }
.striscia .cella.neutro { border-left-color: var(--line); }
.striscia .k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); margin-bottom: 3px;
}
.striscia .v { font-size: 14.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
.striscia .n { font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); margin-top: 4px; }

.attribuzione-dato {
  font-size: 11.5px; color: var(--ink-faint); line-height: 1.45;
  margin: 0 0 14px; padding: 0 2px;
}

/* ------------------------------------------------- blocco 2: azioni punto */
.azioni-punto {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px;
}
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn.secondario { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn:active { transform: translateY(1px); }
.azioni-punto .contatore { font-size: 12.5px; color: var(--ink-faint); margin-left: auto; }
.azioni-punto .esito { flex-basis: 100%; font-size: 13.5px; line-height: 1.5; }
.azioni-punto .esito .ok { color: var(--verde-ink); }
.azioni-punto .esito .errore { background: none; padding: 0; color: var(--rosso-ink); }
.link-condiviso {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}

/* ------------------------------------------------ blocco 3: riscontro

   Le due strade in cima non sono simmetriche per caso: la strada del vuoto
   deve costare un tocco, perché se dichiarare un'uscita a vuoto costa quanto
   dichiarare un cesto, i vuoti non arrivano — e senza i vuoti si vedono solo
   le volte in cui il modello ha avuto ragione. */
.riscontro .invito { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.due-strade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .due-strade { grid-template-columns: 1fr; } }
.strada {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  min-height: 68px; padding: 13px 15px; border-radius: 12px; cursor: pointer;
  font: inherit; text-align: left; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
}
.strada .grande { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.strada .piccolo { font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; }
.strada.vuoto { border-color: color-mix(in srgb, var(--blu) 45%, transparent); }
.strada.trovato { border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.strada:active { transform: translateY(1px); }

.riscontro .campo { margin-top: 16px; display: grid; gap: 7px; }
.riscontro .etichetta { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.riscontro .etichetta i { font-weight: 400; font-style: normal; color: var(--ink-faint); }
.riscontro .aiuto { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); margin: 2px 0 0; }
.riscontro input[type="date"], .riscontro textarea {
  width: 100%; min-height: 44px; font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.riscontro textarea { min-height: 60px; resize: vertical; }
.foto-scelta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 16px; border: 1px dashed var(--line); border-radius: 10px;
  font-size: 14.5px; color: var(--ink-soft); cursor: pointer; background: var(--card);
}
#fb-anteprima { max-width: 180px; border-radius: 10px; margin-top: 8px; }
.riscontro .posizione { font-size: 12.5px; line-height: 1.5; margin-top: 14px; }
.riscontro .posizione .ok { color: var(--verde); }
.riscontro .posizione .fioco { color: var(--ink-faint); }
.riscontro .premio { font-size: 14px; font-weight: 600; color: var(--verde); margin-top: 8px; }
.riscontro .fioco { font-size: 13px; color: var(--ink-faint); line-height: 1.5; margin-top: 8px; }
#comune-riscontro > .btn { margin-top: 16px; margin-right: 8px; }

/* -----------------------------------------------------------------------------
   La mappa, portata dentro la tavolozza.
   -----------------------------------------------------------------------------
   Le tessere standard di OpenStreetMap sono vivaci e colorate: strade rosse,
   aree gialle, acqua azzurra da atlante scolastico. Accanto a una tavolozza
   scelta stonano, ed è la cosa che più fa sembrare un sito messo insieme.

   Il filtro agisce SOLO sul riquadro delle tessere: segnaposto, controlli e
   attribuzione restano ai loro colori. Non altera nessun dato — è il disegno di
   sfondo, non una misura.

   Nel tema scuro si usa il trucco classico della carta notturna: si inverte e
   si ruota la tinta di mezzo giro, così il verde resta verde e l'acqua resta
   blu, ma su fondo scuro.
   -------------------------------------------------------------------------- */
.leaflet-tile-pane {
  filter: saturate(.62) contrast(.94) brightness(1.04) sepia(.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.86) contrast(1.05);
  }
}
:root[data-tema="scuro"] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.86) contrast(1.05);
}

/* L'attribuzione di Leaflet con il fondo bianco fisso salta all'occhio nel
   tema scuro: la si riporta ai colori del sito. */
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--card) 88%, transparent) !important;
  color: var(--ink-faint) !important;
  font-size: 10.5px !important;
}
.leaflet-control-attribution a { color: var(--ink-soft) !important; }
.leaflet-bar a {
  background: var(--card) !important; color: var(--ink) !important;
  border-color: var(--line) !important;
}
.leaflet-bar a:hover { background: var(--line-soft) !important; }

/* -----------------------------------------------------------------------------
   A che punto siamo: la banda e i due cancelli come distanza dalla soglia.
   -------------------------------------------------------------------------- */
.avanzamento { margin-bottom: 14px; display: grid; gap: 12px; }

.banda-prob {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--bosco);
  border-radius: var(--r); padding: 16px 18px;
}
.banda-prob .k {
  font-family: var(--tipo-dato), monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.banda-prob .v {
  font-family: var(--tipo-display), sans-serif; font-weight: 700;
  font-size: clamp(34px, 8vw, 46px); letter-spacing: -.03em; line-height: 1.05;
  margin: 4px 0 6px; color: var(--bosco); font-variant-numeric: tabular-nums;
}
.banda-prob .v span { font-size: .5em; font-weight: 600; margin-left: 2px; }
.banda-prob .n { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); margin: 0; }

.misuratori { display: grid; gap: 10px; }
@media (min-width: 620px) { .misuratori { grid-template-columns: repeat(3, 1fr); } }
.mis {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px 15px 14px; min-width: 0;
}
.mis .k {
  font-family: var(--tipo-dato), monospace; font-size: 10px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint);
}
.mis .v {
  font-family: var(--tipo-display), sans-serif; font-weight: 700; font-size: 24px;
  letter-spacing: -.02em; line-height: 1.1; margin: 5px 0 8px; font-variant-numeric: tabular-nums;
}
.mis .v .su { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); margin-left: 6px; letter-spacing: 0; }
.mis .barra { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.mis .barra i { display: block; height: 100%; border-radius: 999px; background: var(--ink-faint); }
/* Il colore non porta il significato da solo: c'è anche il numero «X di Y» e
   la nota. Chi confonde rosso e verde legge lo stesso quello che manca. */
.mis.fatto .barra i { background: var(--bosco); }
.mis.fatto .v { color: var(--bosco); }
.mis.manca .barra i { background: var(--ruggine); }
.mis .n { font-size: 12px; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; }

.in-arrivo {
  background: var(--acqua-velo); border-radius: var(--r); padding: 13px 16px;
  border-left: 3px solid var(--acqua);
}
.in-arrivo .k {
  font-family: var(--tipo-dato), monospace; font-size: 10px;
  letter-spacing: .11em; text-transform: uppercase; color: var(--acqua); margin-bottom: 6px;
}
.in-arrivo p { font-size: 13.5px; line-height: 1.55; margin: 0 0 6px; }
.in-arrivo .orizzonte { font-size: 12px; color: var(--ink-faint); margin: 0; }

/* =============================================================================
   IL PANNELLO, RIFATTO CON LA GRAMMATICA DELLA LANDING
   =============================================================================
   Il difetto non era la tavolozza: era che ogni cosa stava dentro una scatola
   uguale a tutte le altre. Venti rettangoli bianchi con bordo, raggio e ombra,
   impilati, non fanno gerarchia — la appiattiscono. È esattamente quello che
   fa sembrare un'interfaccia vecchia di quindici anni.

   La landing non usa nemmeno una scatola. Usa tre cose:
     · lo SPAZIO come separatore, e un filo dove lo spazio non basta;
     · un salto di SCALA violento fra l'occhiello monospaziato e il titolo;
     · il SERIF per la prosa e il grottesco solo per i numeri e i titoli.
   Questo strato porta quella grammatica dentro l'analisi. Da qui in giù non
   c'è quasi più un bordo: quello che separa è il bianco fra le cose.
   ========================================================================== */

/* --- la sezione: nessun contenitore, solo un filo e molta aria ------------- */
.card {
  background: none;
  border: 0;
  border-top: 1px solid var(--tratto-fioco);
  border-radius: 0;
  box-shadow: none;
  padding: 40px 0 8px;
  margin: 0;
}
.card:first-child { border-top: 0; padding-top: 8px; }

/* Il titolo di sezione com'è sulla landing: l'occhiello minuscolo in
   monospaziato, e sotto il titolo vero, grande abbastanza da farsi leggere
   attraversando la pagina con il pollice. */
.card > h2 {
  font-family: var(--tipo-display), system-ui, sans-serif;
  font-size: clamp(21px, 3.4vw, 26px);
  font-weight: 680; letter-spacing: -.025em; line-height: 1.12;
  color: var(--inchiostro); text-transform: none;
  margin: 0 0 20px;
}
.card > h2 > i {
  display: block; font-style: normal;
  font-family: var(--tipo-dato), ui-monospace, monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--germoglio); margin-bottom: 9px;
}

/* --- la prosa è in serif, come sulla landing ------------------------------ */
.verdetto .sotto,
.consiglio p, .consiglio .note p,
.specie .dettaglio, .escluse,
.in-arrivo p, .relazione .corpo p,
.riscontro .invito, .avvertenze-fisse p, .cancello .testo {
  font-family: var(--tipo-prosa), Georgia, 'Times New Roman', serif;
}
.consiglio p { font-size: 16.5px; line-height: 1.66; }
.specie .dettaglio { font-size: 14.5px; line-height: 1.6; }

/* --- i dati: colonne separate da un filo, come la riga 3000 / 1 km / 80% --- */
.griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0; background: none; border: 0; border-radius: 0; overflow: visible;
  border-top: 1px solid var(--tratto-fioco);
  border-bottom: 1px solid var(--tratto-fioco);
}
.dato {
  background: none; border-radius: 0; padding: 15px 16px;
  border-left: 1px solid var(--tratto-fioco); min-width: 0;
}
.dato:first-child { border-left: 0; padding-left: 0; }
.dato .k {
  font-family: var(--tipo-dato), monospace; font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--inchiostro-3); line-height: 1.35;
}
.dato .v {
  font-family: var(--tipo-display), system-ui, sans-serif;
  font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px;
}
.dato .u { font-size: 11.5px; font-weight: 500; color: var(--inchiostro-3); letter-spacing: 0; }

/* --- la striscia delle quattro garanzie: stessa grammatica ---------------- */
.striscia {
  gap: 0; margin: 0 0 4px;
  border-top: 1px solid var(--tratto-fioco); border-bottom: 1px solid var(--tratto-fioco);
}
.striscia .cella {
  background: none; border: 0; border-radius: 0;
  border-left: 1px solid var(--tratto-fioco);
  border-top: 2px solid var(--tratto); padding: 14px 14px 16px;
}
.striscia .cella:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 720px) {
  .striscia .cella:nth-child(3) { border-left: 0; padding-left: 0; }
}
.striscia .cella.ok { border-top-color: var(--bosco); }
.striscia .cella.medio { border-top-color: var(--ambra); }
.striscia .cella.basso { border-top-color: var(--ruggine); }
.striscia .cella.neutro { border-top-color: var(--tratto); }
.striscia .k {
  font-family: var(--tipo-dato), monospace; font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: 6px;
}
.striscia .v {
  font-family: var(--tipo-display), system-ui, sans-serif;
  font-size: 16px; font-weight: 650; letter-spacing: -.015em; line-height: 1.28;
}

/* --- a che punto siamo: i misuratori diventano colonne, non schede -------- */
.avanzamento { gap: 0; margin: 4px 0 0; }
.banda-prob {
  background: none; border: 0; border-left: 2px solid var(--bosco);
  border-radius: 0; padding: 4px 0 4px 18px; margin: 24px 0 4px;
}
.misuratori {
  gap: 0; margin-top: 26px;
  border-top: 1px solid var(--tratto-fioco); border-bottom: 1px solid var(--tratto-fioco);
}
.mis {
  background: none; border: 0; border-radius: 0;
  border-left: 1px solid var(--tratto-fioco); padding: 16px 16px 18px;
}
.mis:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 619px) {
  .mis { border-left: 0; padding-left: 0; border-top: 1px solid var(--tratto-fioco); }
  .mis:first-child { border-top: 0; }
}
.mis .v { font-size: 30px; letter-spacing: -.035em; }
.mis .barra { height: 3px; border-radius: 0; background: var(--tratto-fioco); }
.mis .barra i { border-radius: 0; transition: width .7s cubic-bezier(.2,.7,.3,1); }
.mis .n { font-family: var(--tipo-prosa), Georgia, serif; font-size: 13px; line-height: 1.5; }

.in-arrivo {
  background: none; border-radius: 0; border-left: 2px solid var(--acqua);
  padding: 4px 0 4px 18px; margin-top: 26px;
}
.in-arrivo p { font-size: 15px; line-height: 1.6; }

/* --- le specie: righe di un elenco, non tre schede ------------------------ */
.specie {
  border: 0; border-top: 1px solid var(--tratto-fioco); border-radius: 0;
  padding: 18px 0; margin: 0;
}
.specie:first-of-type { border-top: 0; padding-top: 0; }
.specie .nome { font-size: 19px; letter-spacing: -.015em; }
/* Lo stato della specie non è più una pillola colorata: è la stessa etichetta
   monospaziata con il pallino che porta il verdetto principale. Una pillola
   piena, ripetuta tre volte, trasforma l'elenco in un semaforo. */
.badge {
  background: none !important; border-radius: 0; padding: 0;
  font-family: var(--tipo-dato), monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .13em; display: inline-flex; align-items: center; gap: 7px;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.b-APERTA { color: var(--bosco); }
.b-IN_APERTURA { color: var(--ambra); }
.b-POSSIBILE { color: var(--acqua); }
.b-CHIUSA { color: var(--ruggine); }
.b-FUORI { color: var(--inchiostro-3); }
.escluse { border-top: 1px solid var(--tratto-fioco); border-top-style: solid; padding-top: 16px; margin-top: 4px; }

/* --- i due cancelli: un filo verticale colorato, niente cornice ----------- */
.cancello, .fattore {
  background: none !important; border: 0 !important; border-left: 2px solid var(--tratto) !important;
  border-radius: 0 !important; padding: 4px 0 4px 16px !important; margin-bottom: 18px !important;
}

/* --- selettori: quelli del browser si riconoscono a un chilometro ---------- */
.sel-riga { gap: 20px; }
.sel label {
  font-family: var(--tipo-dato), monospace; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: 8px;
}
.sel select {
  min-height: 50px; padding: 0 38px 0 0; border: 0; border-bottom: 1px solid var(--tratto);
  border-radius: 0; background-color: transparent;
  background-position: calc(100% - 11px) 55%, calc(100% - 6px) 55%;
  font-family: var(--tipo-display), system-ui, sans-serif; font-size: 16.5px; font-weight: 550;
  letter-spacing: -.015em;
  transition: border-color .18s ease;
}
.sel select:hover { border-bottom-color: var(--germoglio); }
.sel select:focus-visible { border-bottom-color: var(--bosco); outline: 2px solid var(--germoglio); outline-offset: 4px; }
.sel .perche { font-family: var(--tipo-prosa), Georgia, serif; font-size: 12.5px; margin-top: 8px; }

/* --- fonti: righe, non tre scatolette ------------------------------------- */
.fonti { display: grid; gap: 0; }
.fonte {
  border: 0; border-top: 1px solid var(--tratto-fioco); border-radius: 0;
  padding: 14px 0 14px 14px; border-left: 2px solid var(--tratto); margin: 0;
  font-size: 14px; line-height: 1.55;
}
.fonte:first-child { border-top: 0; }
.fonte b {
  display: block; font-family: var(--tipo-dato), monospace; font-size: 9.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: 4px;
}
.fonte.alta { border-left-color: var(--bosco); }
.fonte.media { border-left-color: var(--ambra); }
.fonte.bassa { border-left-color: var(--ruggine); }

/* --- pannelli richiudibili: un filo e un segno, non un cassetto ----------- */
details.perche {
  background: none; border: 0; border-top: 1px solid var(--tratto-fioco);
  border-radius: 0; margin: 0; overflow: visible;
}
details.perche > summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-family: var(--tipo-display), system-ui, sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: -.02em; min-height: 0; display: flex; align-items: center;
}
details.perche > summary::-webkit-details-marker { display: none; }
details.perche > summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--tipo-dato), monospace; font-size: 20px; color: var(--germoglio); line-height: 1;
  transition: transform .2s ease;
}
details.perche[open] > summary::after { content: '–'; }
details.perche > .corpo { padding: 0 0 24px; }

/* --- avvertenze: restano riconoscibili, perché sono un obbligo ------------ */
.avvertenza {
  font-size: 13.5px; line-height: 1.6; background: none; color: var(--inchiostro-2);
  border-left: 2px solid var(--ambra); border-radius: 0;
  padding: 4px 0 4px 14px; margin-top: 14px;
}
.avvertenze-fisse {
  border-left: 2px solid var(--ambra); border-radius: 0; background: none;
  padding: 6px 0 6px 18px; display: grid; gap: 12px;
  font-size: 15px; line-height: 1.6; margin-top: 34px;
}

/* --- pulsanti: pieni e tondi come sulla landing --------------------------- */
.btn, .primario {
  border-radius: 999px; min-height: 46px; padding: 0 22px;
  font-family: var(--tipo-display), system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em;
  transition: background-color .16s ease, border-color .16s ease, transform .1s ease;
}
.btn.secondario { background: none; border-color: var(--tratto); }
.btn.secondario:hover { border-color: var(--germoglio); background: var(--bosco-velo); }
.btn:not(.secondario):hover { background: var(--germoglio); border-color: var(--germoglio); }
.azioni-punto { gap: 10px; margin: 26px 0 0; }

/* --- il verdetto resta l'unico oggetto con un corpo ----------------------- */
.verdetto { margin-bottom: 4px; border-radius: 18px; }
.verdetto .luogo .nome { font-size: clamp(26px, 5vw, 34px); letter-spacing: -.035em; }
.verdetto .sotto { font-size: 16.5px; line-height: 1.62; }

/* --- l'entrata: i pannelli salgono uno dopo l'altro, appena --------------- */
#app > * { animation: sali .45s cubic-bezier(.2, .7, .3, 1) both; }
#app > *:nth-child(2) { animation-delay: .04s; }
#app > *:nth-child(3) { animation-delay: .08s; }
#app > *:nth-child(4) { animation-delay: .12s; }
#app > *:nth-child(n+5) { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { #app > * { animation: none; } }

/* -----------------------------------------------------------------------------
   LA TRAMA DI FONDO
   -----------------------------------------------------------------------------
   Le stesse isoipse della landing, dietro tutta la colonna dell'analisi e
   seminate con il numero della cella DPC: due punti diversi hanno due rilievi
   diversi, quindi non è una texture decorativa uguale per tutti — è il posto
   dove sei, disegnato piano. Sta sotto tutto, non prende clic, e con
   prefers-reduced-motion smette di respirare (se ne occupa isoipse.js).
   -------------------------------------------------------------------------- */
.trama-colonna {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  --isoipsa: color-mix(in srgb, var(--bosco) 7%, transparent);
  --isoipsa-madre: color-mix(in srgb, var(--bosco) 12%, transparent);
  --maglia: color-mix(in srgb, var(--inchiostro) 3%, transparent);
}
.colonna-analisi { position: relative; }
.colonna-analisi > *:not(.trama-colonna) { position: relative; z-index: 1; }

/* --- i due cancelli, come righe di un referto ------------------------------ */
.cancelli { display: grid; gap: 0; }
.cancello {
  border-left: 2px solid var(--tratto); padding: 4px 0 4px 16px; margin-bottom: 20px;
}
.cancello:last-child { margin-bottom: 0; }
.cancello.sì { border-left-color: var(--bosco); }
.cancello.no { border-left-color: var(--ruggine); }
.cancello .k {
  font-family: var(--tipo-dato), monospace; font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: 5px;
}
.cancello.sì .k { color: var(--bosco); }
.cancello.no .k { color: var(--ruggine); }
.cancello .testo { font-size: 15.5px; line-height: 1.58; }

/* -----------------------------------------------------------------------------
   Rifiniture dopo la prima prova a schermo.
   -------------------------------------------------------------------------- */

/* Il filo verticale fra le celle non deve prendere il colore dello stato: quel
   colore adesso sta sul filo ORIZZONTALE in cima. Le vecchie regole
   `.cella.ok { border-left-color }` lo tingevano ancora. */
.striscia .cella.ok, .striscia .cella.medio,
.striscia .cella.basso, .striscia .cella.neutro { border-left-color: var(--tratto-fioco); }

/* Un numero fisso di colonne, così si sa quale cella apre la riga: con
   `auto-fit` non esiste un selettore per «la prima di ogni riga», e la seconda
   riga si ritrovava un filo verticale a sinistra che non separa niente. */
.griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia > .dato:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.griglia > .dato:nth-child(n+4) { border-top: 1px solid var(--tratto-fioco); }
@media (min-width: 900px) {
  .griglia { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .griglia > .dato:nth-child(3n+1) { border-left: 1px solid var(--tratto-fioco); padding-left: 16px; }
  .griglia > .dato:nth-child(6n+1) { border-left: 0; padding-left: 0; }
  .griglia > .dato:nth-child(n+4) { border-top: 0; }
  .griglia > .dato:nth-child(n+7) { border-top: 1px solid var(--tratto-fioco); }
}

/* La barra del misuratore era diventata un trattino: si vede, ma non si legge.
   Quattro pixel e un fondo un filo più marcato bastano a farla tornare una
   quantità invece di un segno grafico. */
.mis .barra { height: 4px; background: color-mix(in srgb, var(--inchiostro) 9%, transparent); }

/* Il badge di specie a capo da solo su schermo stretto sta meglio sopra il
   nome che appeso in fondo alla riga. */
@media (max-width: 560px) {
  .specie .riga1 { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
}

/* -----------------------------------------------------------------------------
   Contrasto delle etichette minute.
   -----------------------------------------------------------------------------
   Occhielli, chiavi dei dati e intestazioni delle fonti sono in monospaziato a
   nove punti e mezzo: testo piccolo, che per essere leggibile ha bisogno di
   4,5:1 e non di 3:1. Sul chiaro erano a 3,1-3,5 — abbastanza per un titolo
   grande, non per una didascalia letta in un bosco con il sole di traverso.
   -------------------------------------------------------------------------- */
.card > h2 > i { color: var(--bosco); }
.dato .k, .striscia .k, .fonte b, .mis .k, .banda-prob .k,
.sel label, .cancello .k, .punto-coord, .verdetto .luogo .coord {
  color: var(--inchiostro-2);
}

/* Il cartello dello zoom: appare solo quando qualcuno gira la rotella senza
   Ctrl, e si dissolve da solo dopo un secondo e mezzo. */
.zoom-aiuto {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
  z-index: 500; pointer-events: none;
  background: color-mix(in srgb, var(--inchiostro) 88%, transparent);
  color: var(--carta); padding: 13px 20px; border-radius: 999px;
  font-family: var(--tipo-display), system-ui, sans-serif; font-size: 14.5px; font-weight: 500;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  box-shadow: var(--ombra-alta); white-space: nowrap;
}
.zoom-aiuto.visibile { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zoom-aiuto b { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .zoom-aiuto { transition: none; } }

/* =============================================================================
   PROVENIENZA E RIFIUTO DI RISPONDERE
   =============================================================================
   Da dove viene ogni numero non è una nota tecnica in fondo: è l'argomento di
   vendita del sito. Sta quindi in un blocco suo, sempre presente, anche quando
   la copertura è completa — perché «nessun buco» è un'informazione, non
   l'assenza di un problema.
   ========================================================================== */
.provenienza-fonte .riga-fonte {
  border-top: 1px solid var(--tratto-fioco);
  border-left: 2px solid var(--tratto);
  padding: 14px 0 14px 14px;
}
.provenienza-fonte .riga-fonte:first-of-type { border-top: 0; }
.provenienza-fonte .riga-fonte.piena { border-left-color: var(--bosco); }
.provenienza-fonte .riga-fonte.parziale { border-left-color: var(--ambra); }
.provenienza-fonte .riga-fonte.previsione { border-left-color: var(--acqua); }
.provenienza-fonte .riga-fonte.contorno { border-left-color: var(--tratto); }
.provenienza-fonte .k {
  font-family: var(--tipo-dato), monospace; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--inchiostro-2); margin-bottom: 5px;
}
.provenienza-fonte .v {
  font-family: var(--tipo-display), system-ui, sans-serif;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; line-height: 1.35;
}
.provenienza-fonte .n {
  font-family: var(--tipo-prosa), Georgia, serif;
  font-size: 13.5px; line-height: 1.5; color: var(--inchiostro-2); margin-top: 5px;
}
.provenienza-fonte .mai-stimata {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tratto-fioco);
  font-family: var(--tipo-prosa), Georgia, serif; font-size: 14px; line-height: 1.6;
  color: var(--inchiostro);
}

/* Il rifiuto prende il posto del verdetto. Ha il peso di un verdetto perché
   lo è: la risposta è «non lo so, ed ecco perché». */
.non-rispondo {
  border: 1px solid var(--tratto); border-left: 4px solid var(--ambra);
  border-radius: 18px; background: var(--carta-alta);
  padding: 22px 24px 24px; margin-bottom: 4px;
}
.non-rispondo .k {
  font-family: var(--tipo-display), system-ui, sans-serif;
  font-size: clamp(21px, 3.6vw, 27px); font-weight: 700; letter-spacing: -.025em;
  line-height: 1.15; margin: 0 0 14px; color: var(--inchiostro);
}
.non-rispondo .testo {
  font-family: var(--tipo-prosa), Georgia, serif;
  font-size: 16px; line-height: 1.62; margin: 0 0 11px;
}
.non-rispondo .testo.fioco { color: var(--inchiostro-2); font-size: 14.5px; margin-bottom: 0; }

/* Il campo della quota: sta fra i selettori ma è un numero, non una scelta. */
.sel-quota .riga-quota { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sel-quota input[type="number"] {
  width: 110px; min-height: 50px; padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--tratto); border-radius: 0;
  background: transparent; color: var(--ink);
  font-family: var(--tipo-display), system-ui, sans-serif;
  font-size: 20px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sel-quota input[type="number"]:hover { border-bottom-color: var(--germoglio); }
.sel-quota input[type="number"]:focus-visible {
  border-bottom-color: var(--bosco); outline: 2px solid var(--germoglio); outline-offset: 4px;
}
.sel-quota .unita {
  font-family: var(--tipo-dato), monospace; font-size: 13px; color: var(--inchiostro-2);
  margin-left: -4px;
}
.sel-quota .btn.mini { min-height: 34px; padding: 0 12px; font-size: 12.5px; }