/* ==========================================================================
   Estetica: editoriale-civica. Carta calda, inchiostro caldo, un solo accento
   ocra. La sobrieta' qui e' funzionale: il pubblico deve fidarsi di una cifra
   economica, e un'interfaccia squillante lavorerebbe contro quella fiducia.
   I numeri sono trattati come in un bilancio: grandi, tabulari, con filetti.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper:    #faf7f1;
  --paper-2:  #f2ede3;
  --paper-3:  #e9e2d5;
  --ink:      #1a1714;
  --ink-2:    #565049;
  --ink-3:    #8b8379;
  --rule:     #ddd5c7;
  --rule-2:   #c9bfad;

  /* Ocra-sole: caldo e serio, non il giallo cliche del fotovoltaico. */
  --sun:      #b8590a;
  --sun-2:    #d97a1f;
  --sun-soft: #f7e9d5;
  --moss:     #4a6b2a;
  --moss-soft:#e8efdc;
  --brick:    #9a3412;
  --brick-soft:#fbe8e0;
  --slate:    #3d5a6c;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans:  'IBM Plex Sans', 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  --max: 68rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;

  --shadow-1: 0 1px 2px rgba(26, 23, 20, .05), 0 2px 8px rgba(26, 23, 20, .04);
  --shadow-2: 0 2px 4px rgba(26, 23, 20, .06), 0 12px 32px rgba(26, 23, 20, .08);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:    #14120f;
    --paper-2:  #1d1a15;
    --paper-3:  #262118;
    --ink:      #f1ece3;
    --ink-2:    #aaa298;
    --ink-3:    #7d766c;
    --rule:     #332e26;
    --rule-2:   #443d33;
    --sun:      #e79a42;
    --sun-2:    #f0b062;
    --sun-soft: #2b2013;
    --moss:     #9cc06a;
    --moss-soft:#1e2616;
    --brick:    #e08160;
    --brick-soft:#2b1712;
    --slate:    #8fb0c4;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
    --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}

/* Il toggle del tema deve vincere in entrambe le direzioni. */
:root[data-theme="dark"] {
  --paper:#14120f; --paper-2:#1d1a15; --paper-3:#262118;
  --ink:#f1ece3; --ink-2:#aaa298; --ink-3:#7d766c;
  --rule:#332e26; --rule-2:#443d33;
  --sun:#e79a42; --sun-2:#f0b062; --sun-soft:#2b2013;
  --moss:#9cc06a; --moss-soft:#1e2616;
  --brick:#e08160; --brick-soft:#2b1712; --slate:#8fb0c4;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --paper:#faf7f1; --paper-2:#f2ede3; --paper-3:#e9e2d5;
  --ink:#1a1714; --ink-2:#565049; --ink-3:#8b8379;
  --rule:#ddd5c7; --rule-2:#c9bfad;
  --sun:#b8590a; --sun-2:#d97a1f; --sun-soft:#f7e9d5;
  --moss:#4a6b2a; --moss-soft:#e8efdc;
  --brick:#9a3412; --brick-soft:#fbe8e0; --slate:#3d5a6c;
  color-scheme: light;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .97rem + .15vw, 1.075rem)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grana di carta: profondita' senza immagini, un solo SVG inline in data-uri. */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: .028;
  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");
}
@media (prefers-color-scheme: dark) { body::before { opacity: .05; } }

/* ── Tipografia ───────────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; }
h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem); line-height: 1.02; margin: 0; }
h2 { font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.9rem); line-height: 1.1; margin: 0 0 .5em; }
h3 { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); line-height: 1.25; margin: 0 0 .4em; }

p { margin: 0 0 1em; max-width: 62ch; }
a { color: var(--sun); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }

.occhiello {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .7rem;
}
.occhiello::after { content:''; flex:1; height:1px; background: var(--rule); }

.guida { color: var(--ink-2); font-size: .935rem; }
.mini  { font-size: .82rem; color: var(--ink-3); }
em.corsivo { font-family: var(--serif); font-style: italic; font-size: 1.08em; }

/* ── Impaginazione ────────────────────────────────────────────────────────── */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* La testata è sticky: senza questo margine un salto d'ancora porterebbe il
   titolo di sezione sotto la barra, fuori dalla vista. */
.sezione, #strumento { scroll-margin-top: 5rem; }
.sezione { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.sezione + .sezione { border-top: 1px solid var(--rule); }
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; z-index: 10000;
}
.skip:focus { left: 1rem; top: 1rem; }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 2px;
}

/* ── Testata ──────────────────────────────────────────────────────────────── */

.testata {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
.testata > .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4rem;
}
.marchio {
  font-family: var(--serif); font-size: 1.3rem; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: .6rem;
  margin-right: auto;
}
.marchio svg { flex: none; }
.nav-link { font-size: .88rem; color: var(--ink-2); text-decoration: none; }
.nav-link:hover { color: var(--sun); }
@media (max-width: 34rem) { .nav-link.opz { display: none; } }

.tema {
  background: none; border: 1px solid var(--rule); border-radius: 50%;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  cursor: pointer; color: var(--ink-2); flex: none;
}
.tema:hover { border-color: var(--sun); color: var(--sun); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem) 0; overflow: hidden; }
/* Arco di luce: suggerisce il sole senza disegnarlo. */
.hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -34vw; right: -14vw; width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    color-mix(in srgb, var(--sun) 17%, transparent) 0%,
    color-mix(in srgb, var(--sun) 6%, transparent) 42%,
    transparent 68%);
}
.hero-griglia {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 60rem) {
  .hero-griglia { grid-template-columns: 1.15fr .85fr; }
}
h1 .luce {
  font-style: italic;
  background: linear-gradient(96deg, var(--sun) 8%, var(--sun-2) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-somm { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--ink-2); max-width: 46ch; margin-top: 1.5rem; }

.fatti { display: flex; flex-wrap: wrap; gap: 0 2.25rem; margin-top: 2.25rem; }
.fatto { padding-top: .8rem; border-top: 2px solid var(--ink); }
.fatto dt { font: 500 .7rem/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.fatto dd { margin: .45rem 0 0; font-family: var(--serif); font-size: 1.45rem; line-height: 1; }

/* ── Modulo a passi ───────────────────────────────────────────────────────── */

.scheda {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.passo { padding: clamp(1.35rem, 3vw, 2rem); }
.passo + .passo { border-top: 1px solid var(--rule); }
.passo[hidden] { display: none; }

.passo-testa { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.1rem; }
.passo-num {
  font: 500 .7rem/1 var(--mono); color: var(--sun);
  border: 1px solid currentColor; border-radius: 50%;
  width: 1.6rem; height: 1.6rem; display: grid; place-items: center; flex: none;
}
.passo-tit { font-family: var(--sans); font-weight: 600; font-size: .98rem; margin: 0; letter-spacing: -.005em; }

/* Scelta tipologia: bottoni grandi, tocco comodo su mobile. */
.scelte { display: grid; gap: .6rem; }
.scelta {
  display: flex; align-items: center; gap: .95rem; width: 100%;
  padding: .95rem 1.05rem; text-align: left; cursor: pointer;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font: inherit; transition: border-color .16s, background .16s, transform .16s;
}
.scelta:hover { border-color: var(--sun); transform: translateX(2px); }
.scelta[aria-pressed="true"] {
  border-color: var(--sun); background: var(--sun-soft);
  box-shadow: inset 3px 0 0 var(--sun);
}
.scelta-icona { flex: none; color: var(--sun); }
.scelta b { display: block; font-weight: 600; font-size: .96rem; }
.scelta span { display: block; font-size: .82rem; color: var(--ink-2); margin-top: .1rem; }

/* Campi */
.campo { display: block; margin-bottom: 1rem; }
.campo > .etichetta {
  display: block; font-weight: 500; font-size: .88rem; margin-bottom: .35rem;
}
.campo > .aiuto { display: block; font-size: .8rem; color: var(--ink-3); margin-bottom: .45rem; }
input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%; padding: .78rem .9rem;
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: var(--radius);
  transition: border-color .16s, box-shadow .16s;
}
input:hover, select:hover { border-color: var(--ink-3); }
input:focus, select:focus {
  outline: none; border-color: var(--sun);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 16%, transparent);
}
.riga-campi { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .riga-campi.due { grid-template-columns: 1fr 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .82rem 1.5rem; cursor: pointer;
  font: 500 .95rem/1 var(--sans);
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius);
  transition: background .16s, transform .12s;
}
.btn:hover { background: var(--sun); border-color: var(--sun); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-2 { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-2:hover { background: transparent; border-color: var(--sun); color: var(--sun); }
.btn-t { background: none; border: none; color: var(--sun); cursor: pointer; font: 500 .86rem var(--sans); padding: .3rem 0; text-decoration: underline; text-underline-offset: .2em; }

.filo-svelto { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

/* Indicatore di caricamento: sole che si carica per gradi. */
.attesa { display: flex; align-items: center; gap: .9rem; color: var(--ink-2); font-size: .9rem; }
.raggi { width: 1.4rem; height: 1.4rem; flex: none; animation: gira 1.6s linear infinite; color: var(--sun); }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .raggi { animation-duration: 4s; } }

/* ── Avvisi ───────────────────────────────────────────────────────────────── */

.avviso {
  display: flex; gap: .8rem; padding: .9rem 1.05rem; margin-bottom: .7rem;
  border-radius: var(--radius); font-size: .9rem; line-height: 1.5;
  border: 1px solid; align-items: flex-start;
}
.avviso svg { flex: none; margin-top: .15rem; }
.avviso.warning { background: var(--brick-soft); border-color: color-mix(in srgb, var(--brick) 32%, transparent); color: var(--brick); }
.avviso.info    { background: var(--paper-3); border-color: var(--rule-2); color: var(--ink-2); }
.avviso strong { color: inherit; }
.avviso .azioni { margin-top: .6rem; display: flex; gap: .6rem; flex-wrap: wrap; }

/* ── Risultato ────────────────────────────────────────────────────────────── */

.esito { animation: sali .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes sali { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .esito { animation: none; } }

.verdetto { display: flex; align-items: center; gap: .55rem; font: 500 .8rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1.1rem; }
.verdetto.si  { color: var(--moss); }
.verdetto.forse { color: var(--sun); }
.verdetto.no  { color: var(--brick); }
.pallino { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex:none;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }

/* Il numero eroe: produzione. Deriva dal rilievo, non da assunzioni
   economiche, quindi e' la cifra piu' difendibile da mettere in primo piano. */
.eroe { margin: 0 0 .4rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.eroe-num {
  font-family: var(--serif); font-size: clamp(3.4rem, 2rem + 7vw, 6.5rem);
  line-height: .9; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.eroe-un { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem); color: var(--ink-2); }
.eroe-sotto { color: var(--ink-2); font-size: .95rem; margin-bottom: .4rem; }
/* Indirizzo effettivamente analizzato: discreto ma sempre verificabile. */
.indirizzo-analizzato { margin: 0 0 1.75rem; display: flex; align-items: center; gap: .4rem; }
.indirizzo-analizzato::before {
  content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 1.5px solid var(--ink-3);
}

/* Griglia 2x2 fissa e non auto-fit: le tessere vivono in una colonna a metà
   larghezza, dove auto-fit produce 3+1 con un filetto spaiato sotto l'ultima.
   Quattro in linea solo quando c'è davvero spazio. */
.tessere { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink); margin-bottom: 2rem; }
@media (min-width: 92rem) { .tessere { grid-template-columns: repeat(4, 1fr); } }
.tessera { padding: 1rem 1.1rem 1.1rem 0; border-bottom: 1px solid var(--rule); }
.tessera dt { font: 500 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tessera dd { margin: .5rem 0 0; font-family: var(--serif); font-size: clamp(1.5rem,1.3rem+.7vw,1.95rem); line-height: 1; font-variant-numeric: tabular-nums; }
.tessera dd small { font-family: var(--sans); font-size: .72rem; color: var(--ink-3); display: block; margin-top: .3rem; letter-spacing: 0; }
.tessera.spicca dd { color: var(--sun); }

/* Bilancio economico: impaginato come un prospetto. */
.prospetto { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: .5rem; }
.prospetto th { text-align: left; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); padding: 0 0 .6rem; border-bottom: 1px solid var(--ink); }
.prospetto td { padding: .62rem 0; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.prospetto td:last-child { text-align: right; font-family: var(--mono); font-size: .88rem; white-space: nowrap; }
.prospetto tr.totale td { border-bottom: 2px solid var(--ink); font-weight: 600; padding-top: .8rem; }
.prospetto tr.totale td:last-child { color: var(--sun); font-size: 1rem; }
.prospetto .nota { color: var(--ink-3); font-size: .8rem; display: block; }

.due-colonne { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .due-colonne { grid-template-columns: 1fr 1fr; } }

/* ── Rosa delle falde ─────────────────────────────────────────────────────── */
/* L'elemento distintivo: rende visibile quali falde contano e quali sono state
   scartate. Senza questo, "abbiamo escluso le falde a nord" resta un'asserzione
   che l'utente deve accettare per fede. */
.rosa { display: block; width: 100%; max-width: min(22rem, 100%); margin-inline: auto; overflow: visible; }
.rosa-cardine { font: 500 .62rem var(--mono); fill: var(--ink-3); letter-spacing: .1em; }
.rosa-cerchio { fill: none; stroke: var(--rule); stroke-width: 1; }
/* Un filo del colore della carta separa le falde con orientamento quasi
   identico, che altrimenti si leggerebbero come un raggio solo. */
.rosa-falda { stroke-linecap: round; paint-order: stroke; }
.rosa-falda.ok  { stroke: var(--sun); }
/* Le scartate sono tratteggiate: con linecap arrotondato i cap riempirebbero
   i vuoti del tratteggio rendendolo invisibile agli spessori in gioco, quindi
   qui serve il taglio netto. Il dasharray viene scalato sullo spessore in JS. */
.rosa-falda.no  { stroke: var(--ink-3); stroke-linecap: butt; opacity: .75; }
.rosa-bordo     { stroke: var(--paper); stroke-linecap: round; }
.rosa-legenda { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; font-size: .8rem; color: var(--ink-2); }
.rosa-legenda i { display: inline-block; width: 1.1rem; height: 2px; vertical-align: middle; margin-right: .4rem; }
.falde-elenco { list-style: none; padding: 0; margin: 1.1rem 0 0; font-size: .85rem; }
.falde-elenco li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.falde-elenco .scartata { color: var(--ink-3); }
.falde-elenco .motivo { font-size: .78rem; }

/* ── Regolatori ───────────────────────────────────────────────────────────── */

.regolatori { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(1.2rem,3vw,1.75rem); }
.reg { margin-bottom: 1.35rem; }
.reg:last-child { margin-bottom: 0; }
.reg-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.reg-testa label { font-weight: 500; font-size: .9rem; }
.reg-val { font-family: var(--mono); font-size: .88rem; color: var(--sun); font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; background: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--rule-2); }
input[type="range"]::-moz-range-track { height: 2px; background: var(--rule-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.05rem; height: 1.05rem; margin-top: -.5rem;
  border-radius: 50%; background: var(--sun); border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
input[type="range"]::-moz-range-thumb {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--sun); border: 2px solid var(--paper);
}
.interruttore { display: flex; align-items: center; gap: .7rem; cursor: pointer; font-size: .92rem; font-weight: 500; }
.interruttore input { position: absolute; opacity: 0; width: 0; height: 0; }
.leva { width: 2.5rem; height: 1.4rem; border-radius: 1rem; background: var(--rule-2); position: relative; transition: background .18s; flex: none; }
.leva::after { content:''; position: absolute; top: 3px; left: 3px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--paper); transition: transform .18s; }
.interruttore input:checked + .leva { background: var(--sun); }
.interruttore input:checked + .leva::after { transform: translateX(1.1rem); }
.interruttore input:focus-visible + .leva { outline: 2px solid var(--sun); outline-offset: 2px; }

/* Valore in ricalcolo locale: l'utente deve sapere che sta vedendo una stima
   provvisoria prima che arrivi quella autoritativa dal server. */
.provvisorio { opacity: .55; transition: opacity .2s; }

/* ── Affidabilita ─────────────────────────────────────────────────────────── */

.affid { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem;
  padding: .3rem .7rem; border-radius: 2rem; border: 1px solid var(--rule-2); color: var(--ink-2); }
.affid .barre { display: flex; gap: 2px; }
.affid .barre i { width: 3px; height: .7rem; background: var(--rule-2); border-radius: 1px; }
.affid.alta  .barre i { background: var(--moss); }
.affid.media .barre i:nth-child(-n+2) { background: var(--sun); }
.affid.bassa .barre i:nth-child(1) { background: var(--brick); }

/* ── Contenuti ────────────────────────────────────────────────────────────── */

.passi-elenco { list-style: none; counter-reset: p; padding: 0; margin: 0;
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.passi-elenco li { counter-increment: p; padding-top: 1rem; border-top: 2px solid var(--ink); }
.passi-elenco li::before { content: '0' counter(p); font: 500 .72rem var(--mono); color: var(--sun); letter-spacing: .1em; display: block; margin-bottom: .7rem; }

.fattori { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.fattori li { background: var(--paper); padding: 1.15rem 1.3rem; display: grid; gap: .3rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .fattori li { grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: baseline; } }
.fattori b { font-weight: 600; font-size: .95rem; }
.fattori span { color: var(--ink-2); font-size: .92rem; }

details.faq { border-bottom: 1px solid var(--rule); }
details.faq summary {
  cursor: pointer; padding: 1.05rem 2rem 1.05rem 0; position: relative;
  font-weight: 500; font-size: 1.02rem; list-style: none;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); color: var(--sun); font-size: 1.2rem; transition: transform .2s;
}
details.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details.faq .risposta { padding-bottom: 1.15rem; color: var(--ink-2); font-size: .94rem; }
details.faq .risposta p:last-child { margin-bottom: 0; }

.trasparenza { background: var(--paper-2); border-left: 3px solid var(--sun); padding: clamp(1.3rem,3vw,2rem); border-radius: 0 var(--radius) var(--radius) 0; }
.assunzioni { list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: .88rem; column-gap: 2.5rem; }
@media (min-width: 44rem) { .assunzioni { columns: 2; } }
/* flex-wrap: il valore ha white-space:nowrap per non spezzare una cifra, quindi
   su schermi stretti deve poter scendere a capo invece di sfondare il viewport. */
.assunzioni li { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .15rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); break-inside: avoid; }
.assunzioni li > span { min-width: 0; }
.assunzioni b { font-family: var(--mono); font-weight: 500; font-size: .84rem; white-space: nowrap; }

/* ── Chiusura ─────────────────────────────────────────────────────────────── */

.piede { border-top: 1px solid var(--rule); background: var(--paper-2); padding-block: 3rem 2.5rem; font-size: .88rem; color: var(--ink-2); }
.piede-griglia { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2.25rem; }
@media (min-width: 44rem) { .piede-griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede h4 { font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .9rem; }
.piede ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.piede a { color: var(--ink-2); text-decoration: none; }
.piede a:hover { color: var(--sun); }
.disclaimer { border-top: 1px solid var(--rule); padding-top: 1.5rem; font-size: .82rem; color: var(--ink-3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Pagine di testo */
.prosa { max-width: 44rem; }
.prosa h2 { margin-top: 2.5rem; }
.prosa h3 { margin-top: 1.75rem; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1.25rem 0; }
.prosa th, .prosa td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--rule); }
.prosa th { font: 500 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.prosa code { font: .88em var(--mono); background: var(--paper-3); padding: .15em .4em; border-radius: 2px; }
.prosa .box { background: var(--paper-2); border-left: 3px solid var(--sun); padding: 1.2rem 1.4rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; }
.prosa .box p:last-child { margin-bottom: 0; }

/* ── Fascia di anteprima ───────────────────────────────────────────────────── */
/* Visibile solo finché il backend non è collegato. Deliberatamente vistosa:
   pubblicare la demo credendola funzionante sarebbe l'errore peggiore. */
.fascia-demo {
  background: var(--sun); color: #fff;
  padding: .6rem var(--gutter);
  font-size: .84rem; line-height: 1.45; text-align: center;
}
.fascia-demo strong { font-weight: 600; }

/* ── Suggerimenti di indirizzo ─────────────────────────────────────────────
   Elenco a comparsa sotto il campo. Volutamente sobrio: deve sembrare una
   estensione del campo, non un elemento a sé.                              */

.autocompleta { position: relative; }

.suggerimenti {
  position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; right: 0;
  margin: 0; padding: .25rem; list-style: none;
  background: var(--paper); border: 1px solid var(--rule-2);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
  max-height: 17rem; overflow-y: auto;
  /* Su schermi bassi la tastiera mobile può coprire l'elenco: lo scorrimento
     interno evita che le voci finiscano fuori dallo schermo. */
  overscroll-behavior: contain;
}
.suggerimenti[hidden] { display: none; }

.suggerimento {
  padding: .6rem .7rem; cursor: pointer; border-radius: 2px;
  display: flex; flex-direction: column; gap: .1rem;
  line-height: 1.35;
}
.suggerimento:hover,
.suggerimento[aria-selected="true"] { background: var(--sun-soft); }
.suggerimento[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--sun); }
.suggerimento b { font-weight: 500; font-size: .94rem; color: var(--ink); }
.suggerimento span { font-size: .8rem; color: var(--ink-3); }

/* Riga finale non selezionabile: ricorda che si può cercare il testo digitato. */
.suggerimenti .nota-elenco {
  padding: .5rem .7rem; font-size: .76rem; color: var(--ink-3);
  border-top: 1px solid var(--rule); margin-top: .25rem;
}