/* Solo token, mai colori letterali: la palette vive in tokens.css (FF07 lo verifica). */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--t-m)/1.6 var(--sans);
}
main { max-width: 920px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-8); }
h1, h2 { font-family: var(--serif); }
h1 { font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--sp-3); text-wrap: balance; }
h2 { font-size: var(--t-l); margin: var(--sp-8) 0 var(--sp-3); }
.intro { color: var(--inchiostro-tenue); max-width: 62ch; margin: 0 0 var(--sp-6); }
a { color: var(--accento); text-underline-offset: 2px; }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .92em; }

/* --- skip link: visibile solo quando prende il fuoco -------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--sp-4); top: var(--sp-2); z-index: 10; background: var(--superficie);
              padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- honeypot (→S4): fuori schermo, NON display:none ---------------------
   Alcuni bot riconoscono display:none e saltano il campo. Fuori dal viewport no. */
.esca { position: absolute; left: -5000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- testata e navigazione --------------------------------------------- */
.intestazione { border-bottom: 1px solid var(--linea); background: var(--superficie); }
.nav { max-width: 1120px; margin: 0 auto; padding: var(--sp-3) var(--sp-4);
       display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }
.marchio { font-family: var(--serif); font-weight: 700; font-size: var(--t-l);
           text-decoration: none; color: var(--inchiostro); }
.marchio__punto { color: var(--terra); }
.nav__voci { display: flex; flex-wrap: nowrap; gap: var(--sp-1) var(--sp-3); flex: 1; min-width: 0;
             overflow-x: auto; scrollbar-width: none; }   /* una riga sola: vedi la nota nel blocco mobile */
.nav__voci::-webkit-scrollbar { display: none; }
.nav__voci a { white-space: nowrap; }
.nav__azioni { display: flex; gap: var(--sp-2); align-items: center; }
.nav__chi { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.nav__voci a { color: var(--inchiostro); text-decoration: none; padding: var(--sp-1) 0;
               border-bottom: 2px solid transparent; transition: var(--transizione); }

/* --- I SETTE STATI (→09 §E) -------------------------------------------- */

/* 2. hover — solo col puntatore. Su touch non esiste, quindi niente di importante
      puo' vivere solo qui. */
@media (hover: hover) {
  .nav__voci a:hover { border-bottom-color: var(--linea); }
  .btn:hover { background: var(--linea); }
  .btn--primario:hover { background: var(--accento-scuro); }
}

/* 3. focus visibile — :focus-visible, non :focus, che sporcherebbe anche i click col mouse.
      Mai outline:none senza un sostituto: e' il tasto Tab che diventa inutilizzabile. */
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: 3px; }

/* 4. premuto — conferma il click prima che risponda il server. */
.btn:active { transform: translateY(1px); }

/* 5. corrente — "sei qui". Colore PIU' forma (→E5): chi non distingue i colori vede
      comunque la sottolineatura. */
.nav__voci a[aria-current="page"] { border-bottom-color: var(--accento); font-weight: 600; }

/* 6. disabilitato */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* 7. in attesa — l'indicatore HTMX. Doppio click = doppio ordine se il bottone resta
      cliccabile: hx-disabled-elt lo spegne, questo lo dice. */
.attesa { display: none; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.htmx-request .attesa, .htmx-request.attesa { display: inline; }

/* --- bottoni ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2);
       padding: var(--sp-2) var(--sp-4); border: 1px solid var(--linea);
       border-radius: var(--raggio); background: var(--superficie); color: var(--inchiostro);
       font: inherit; text-decoration: none; cursor: pointer; transition: var(--transizione); }
.btn--primario { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.btn--muto { color: var(--inchiostro-tenue); }
/* tema: in chiaro si vede la luna (passa allo scuro), in scuro il sole (passa al chiaro) */
.btn--tema { justify-content: center; min-width: 40px; min-height: 40px; padding: var(--sp-2); }
.icona-tema { display: block; }
.icona-tema--sole { display: none; }
:root[data-theme="dark"] .icona-tema--luna { display: none; }
:root[data-theme="dark"] .icona-tema--sole { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icona-tema--luna { display: none; }
  :root:not([data-theme="light"]) .icona-tema--sole { display: block; }
}

/* --- flash: uno solo, nel layout base (→F1) ----------------------------- */
.flash { max-width: 860px; margin: var(--sp-4) auto 0; padding: var(--sp-3) var(--sp-4);
         border-radius: var(--raggio); border: 1px solid var(--linea);
         display: flex; justify-content: space-between; gap: var(--sp-3); align-items: center; }
.flash--ok { background: var(--accento-tenue); border-color: var(--ok); }
.flash--errore { background: var(--superficie); border-color: var(--critico); color: var(--critico); }
.flash--avviso { background: var(--superficie); border-color: var(--attenzione); }
.flash__x { background: none; border: 0; font-size: var(--t-l); cursor: pointer; color: inherit; }

.esito { padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); margin: var(--sp-2) 0; }
.esito--ok { background: var(--accento-tenue); }
.esito--errore { color: var(--critico); border: 1px solid var(--critico); }
.esito--avviso { border: 1px solid var(--attenzione); margin-bottom: var(--sp-4); }
.esito--avviso .riga { margin: var(--sp-2) 0 0; }

/* --- contenuti ---------------------------------------------------------- */
.griglia { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.scheda { background: var(--superficie); border: 1px solid var(--linea);
          border-radius: var(--raggio); padding: var(--sp-4); box-shadow: var(--ombra); }
.scheda h2 { margin-top: 0; font-size: var(--t-m); }
.sintesi { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.tessera { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
           padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; min-width: 120px; }
.tessera__n { font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.elenco { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.elenco li { background: var(--superficie); border: 1px solid var(--linea);
             border-radius: var(--raggio); padding: var(--sp-3); }
.vuoto { background: var(--superficie); border: 1px dashed var(--linea);
         border-radius: var(--raggio); padding: var(--sp-6); text-align: center; }
.riga { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: var(--sp-4) 0; }
.modulo { display: grid; gap: var(--sp-2); max-width: 380px; }
input, select, textarea { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--linea);
                border-radius: var(--raggio); background: var(--superficie);
                color: var(--inchiostro); font: inherit; min-height: 40px; }

/* La tabella scorre DENTRO il suo contenitore: il body non scorre mai in orizzontale (→M2). */
.tabella { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tabella th, .tabella td { text-align: left; padding: var(--sp-2) var(--sp-3);
                           border-bottom: 1px solid var(--linea); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.pillola { font-size: var(--t-xs); padding: 2px var(--sp-2); border-radius: 999px;
           border: 1px solid var(--linea); }
/* Verde = "vinto" (approvata), ambra = "da fare", rosso = respinta (→FE4). */
.pillola--approvata, .pillola--ok { background: var(--accento-tenue); border-color: var(--ok); }
.pillola--confermata { border-color: var(--attenzione); color: var(--attenzione); }
.pillola--da_confermare { color: var(--inchiostro-tenue); }
.pillola--respinta { border-color: var(--critico); color: var(--critico); }

.pie { border-top: 1px solid var(--linea); padding: var(--sp-8) var(--sp-4);
       color: var(--inchiostro-tenue); text-align: center; font-size: var(--t-s);
       background: var(--carta-scura); }
.pie p { margin: 0 0 var(--sp-1); }
.pie__marchio { font-family: var(--serif); font-weight: 700; font-size: var(--t-l); color: var(--inchiostro); }
.pie__dati { font-size: var(--t-xs); line-height: 1.7; overflow-wrap: anywhere; }

/* --- home: struttura a fasce ---------------------------------------------- */
main.pagina-piena { max-width: none; padding: 0; }
.contenitore { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-6); }
.fascia { padding: 72px 0; }
.fascia--carta { background: var(--carta-scura); }
.occhiello { color: var(--terra); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
             font-size: var(--t-xs); margin: 0 0 var(--sp-2); }
.titolo-sezione { font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--sp-3);
                  max-width: 22ch; text-wrap: balance; font-weight: 600; }
.sottotitolo { color: var(--inchiostro-tenue); max-width: 60ch; margin: 0 0 var(--sp-8); }

/* --- 1. eroe: l'illustrazione a tutta larghezza, il testo su un velo di crema -- */
.eroe { position: relative; min-height: min(78vh, 720px); display: flex; align-items: center;
        overflow: hidden; border-bottom: 1px solid var(--linea); }
.eroe__immagine { position: absolute; inset: 0; }
.eroe__immagine img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
/* Il velo va da sinistra (crema piena, dove sta il testo) a destra (trasparente, dove si
   vede la tavola): il testo resta leggibile senza coprire l'invito della sedia. */
.eroe__immagine::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--velo) 0%, var(--velo) 34%, transparent 68%); }
.eroe__testo { position: relative; width: 100%; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.eroe h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; letter-spacing: -.01em;
           max-width: 11ch; margin: 0 0 var(--sp-4); font-weight: 600; }
.eroe__intro { font-size: var(--t-l); line-height: 1.5; max-width: 34ch; margin: 0 0 var(--sp-6); }
.eroe__azioni { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.btn--chiaro { background: var(--superficie); border-color: var(--linea); }

/* --- 2. i mondi: schede illustrate che portano al modulo ---------------------- */
.mondi { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4);
         grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mondo { display: flex; flex-direction: column; text-decoration: none; color: inherit;
         background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px;
         overflow: hidden; height: 100%; transition: var(--transizione); }
.mondo__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.mondo__titolo { font-family: var(--serif); font-size: var(--t-l); font-weight: 600;
                 padding: var(--sp-3) var(--sp-4) 0; }
.mondo__riga { color: var(--inchiostro-tenue); font-size: var(--t-s); padding: 2px var(--sp-4) var(--sp-4); }
.nota-mondi { color: var(--inchiostro-tenue); font-size: var(--t-s); margin: var(--sp-6) 0 0; }

/* --- 3. come funziona ---------------------------------------------------------- */
.passi-illustrati { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-8);
                    grid-template-columns: repeat(3, minmax(0, 1fr)); }
.passi-illustrati li { position: relative; }
.passo__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px;
              display: block; border: 1px solid var(--linea); }
.passo__n { position: absolute; top: calc(var(--sp-3) * -1); left: var(--sp-4); width: 44px; height: 44px;
            border-radius: 50%; background: var(--grano); color: var(--inchiostro);
            display: grid; place-items: center; font-family: var(--serif); font-weight: 700;
            font-size: var(--t-l); box-shadow: var(--ombra); }
.passi-illustrati h3 { font-family: var(--serif); font-size: var(--t-l); margin: var(--sp-4) 0 var(--sp-1); }
.passi-illustrati p { color: var(--inchiostro-tenue); margin: 0; }

/* --- 4. manifesto -------------------------------------------------------------- */
.manifesto { background: var(--accento); color: var(--su-accento); padding: 88px 0; text-align: center; }
.manifesto__frase { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25;
                    max-width: 26ch; margin: 0 auto; text-wrap: balance; font-weight: 500; }
.manifesto__frase em { color: var(--enfasi-su-accento); font-style: italic; }

/* --- 5. iscrizione: perche' a sinistra, modulo a destra --------------------------- */
.iscrizione { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-8);
              align-items: start; }
.iscrizione__lato { position: sticky; top: var(--sp-6); }
.rassicurazioni { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-3); }
.rassicurazioni li { padding-left: var(--sp-6); position: relative; color: var(--inchiostro-tenue); }
.rassicurazioni li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px;
                             border-radius: 50%; background: var(--grano); }
.rassicurazioni strong { color: var(--inchiostro); }

/* --- contenuti: guide e regioni ----------------------------------------------- */
.briciole { font-size: var(--t-s); color: var(--inchiostro-tenue); margin: 0 0 var(--sp-4); }
.briciole a { color: inherit; }
/* Due classi: .testo (68ch) sta piu' sotto nel file e, a parita' di specificita', vincerebbe. */
.testo.testo--largo { max-width: 900px; }
.guida__data, .nota-dati { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.nota-dati { border-left: 3px solid var(--linea); padding-left: var(--sp-3); margin: var(--sp-6) 0; }
.guida h2 { margin-top: var(--sp-8); }
.guida blockquote { margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--terra);
                   background: var(--superficie); font-family: var(--serif); font-size: var(--t-l); }
.tabella-scorre { overflow-x: auto; margin: var(--sp-4) 0; }
.guida table { border-collapse: collapse; min-width: 100%; font-size: var(--t-s); }
.guida th, .guida td { border-bottom: 1px solid var(--linea); padding: var(--sp-2) var(--sp-3); text-align: left; }
.guida th { color: var(--inchiostro-tenue); font-weight: 600; }
.invito { background: var(--accento-tenue); border: 1px solid var(--linea); border-radius: 14px;
          padding: var(--sp-6); margin: var(--sp-8) 0; }
.invito h2 { margin-top: 0; }
.fonti ul { padding-left: var(--sp-6); }
.guide-vicine ul { list-style: none; padding: 0; display: grid; gap: var(--sp-1) var(--sp-4);
                   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.guide-vicine a { display: inline-flex; min-height: 40px; align-items: center; }
.fonti li { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
/* --- indice delle guide: ricerca, temi come filtri, schede in colonne ------------------- */
main.pagina-larga { max-width: 1200px; }
/* display:flex batterebbe l'attributo hidden: i pezzi che il JS mostra e nasconde lo dicono qui. */
.indice-guide [hidden] { display: none; }
/* Al computer: colonna fissa a sinistra (ricerca + temi in verticale), schede a destra. */
.indice-guide__corpo { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.indice-guide__lato { position: sticky; top: var(--sp-4); max-height: calc(100vh - 2 * var(--sp-4));
                      overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.indice-guide__cerca { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.indice-guide__cerca input { width: 100%; font-size: var(--t-m); min-height: 44px; box-sizing: border-box; }
.indice-guide__menu { display: none; }
.indice-guide__conteggio { margin: 0; color: var(--inchiostro-tenue); font-size: var(--t-s); }
.indice-guide__conteggio:empty { display: none; }
.indice-guide__temi { display: flex; flex-direction: column; border-left: 2px solid var(--linea); }
.tema-voce { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; min-height: 40px;
             padding: var(--sp-1) var(--sp-3); margin-left: -2px; border-left: 2px solid transparent;
             color: var(--inchiostro); text-decoration: none; font-size: var(--t-s); line-height: 1.3;
             transition: border-color var(--transizione), background var(--transizione); }
.tema-voce span { color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; }
.tema-voce[aria-current="true"] { border-left-color: var(--accento); background: var(--accento-tenue);
                                  color: var(--accento-scuro); font-weight: 600; }
@media (hover: hover) { .tema-voce:hover { border-left-color: var(--accento); } }
@media (max-width: 860px) {
  /* Al telefono: una barra compatta in alto con ricerca e menu dei temi, niente elenco laterale. */
  .indice-guide__corpo { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .indice-guide__lato { top: 0; z-index: 5; max-height: none; overflow: visible; background: var(--carta);
                        padding: var(--sp-3) 0; border-bottom: 1px solid var(--linea); }
  .indice-guide__cerca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
  .indice-guide__conteggio { grid-column: 1 / -1; }
  .indice-guide__menu { display: block; width: 100%; min-height: 44px; }
  .indice-guide__temi { display: none; }
}
#guide, .indice-guide__tema { scroll-margin-top: 140px; }
.indice-guide__tema { margin-bottom: var(--sp-8); }
.indice-guide__tema h2 { margin-bottom: var(--sp-3); }
.schede-guide { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3);
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.schede-guide a { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; box-sizing: border-box;
                  padding: var(--sp-4); background: var(--superficie); border: 1px solid var(--linea);
                  border-radius: 14px; color: var(--inchiostro); text-decoration: none;
                  transition: border-color var(--transizione), box-shadow var(--transizione); }
@media (hover: hover) { .schede-guide a:hover { border-color: var(--accento); box-shadow: var(--ombra); } }
.schede-guide a:active { transform: translateY(1px); }
.schede-guide strong { font-family: var(--serif); font-size: var(--t-l); line-height: 1.2; color: var(--accento-scuro); }
.schede-guide__titolo { font-size: var(--t-s); font-weight: 600; }
.schede-guide__descr { font-size: var(--t-s); color: var(--inchiostro-tenue); display: -webkit-box;
                       -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.schede-guide .aiuto { margin-top: auto; padding-top: var(--sp-2); }
@media (max-width: 560px) {
  /* Al telefono una scheda deve stare in poco spazio: titolo breve e due righe bastano a scegliere. */
  .schede-guide__titolo { display: none; }
  .schede-guide__descr { -webkit-line-clamp: 2; line-clamp: 2; }
  .schede-guide a { padding: var(--sp-3) var(--sp-4); }
  .schede-guide strong { font-size: var(--t-m); }
  .indice-guide__tema { scroll-margin-top: 120px; }
}
.elenco-guide { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.elenco-guide li { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: var(--sp-4); }
.elenco-guide p { margin: var(--sp-1) 0; color: var(--inchiostro-tenue); }
.denominazioni { list-style: none; padding: 0; columns: 2 260px; column-gap: var(--sp-6); }
.denominazioni li { break-inside: avoid; padding: var(--sp-1) 0; border-bottom: 1px dashed var(--linea);
                    display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; }
.province, .regioni-griglia { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.regioni-griglia { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1000px) { .regioni-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .regioni-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); } }
.indice-regioni .intro, .indice-regioni .nota-dati { max-width: 68ch; }
.regioni-griglia a { display: flex; flex-direction: column; padding: 0 0 var(--sp-3); text-decoration: none; overflow: hidden;
                     color: var(--inchiostro); background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
                     transition: border-color var(--transizione), box-shadow var(--transizione); }
.regioni-griglia strong, .regioni-griglia .aiuto { padding: 0 var(--sp-4); }
.regioni-griglia strong { font-family: var(--serif); font-size: var(--t-l); margin-top: var(--sp-3); }
.regioni-griglia__img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
                        transition: transform 300ms ease; }
@media (hover: hover) {
  .regioni-griglia a:hover { border-color: var(--accento); box-shadow: var(--ombra); }
  .regioni-griglia a:hover .regioni-griglia__img { transform: scale(1.03); }
}
.regioni-griglia a:active { transform: translateY(1px); }
.regione__immagine img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 75%; display: block;
                         border-radius: 14px; margin: 0 0 var(--sp-6); }
.regioni-link { line-height: 2; }
.regioni-link ul, ul.regioni-link { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.approfondimenti { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); }
/* Colonne fisse che dividono i 16 temi in righe piene: 4, poi 2, poi 1 (con 3 ne avanzerebbe uno). */
.temi-guide { display: grid; gap: var(--sp-4); grid-template-columns: repeat(4, minmax(0, 1fr));
              margin-top: var(--sp-4); }
@media (max-width: 1000px) { .temi-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .temi-guide { grid-template-columns: minmax(0, 1fr); } }
.tema-guide { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px;
              padding: var(--sp-4); }
.tema-guide h3 { margin: 0 0 var(--sp-2); font-size: var(--t-m); }
.tema-guide ul { list-style: none; padding: 0; margin: 0; }
.tema-guide li { border-top: 1px dashed var(--linea); }
.tema-guide li:first-child { border-top: 0; }
.tema-guide a { display: block; padding: var(--sp-2) 0; min-height: 40px; box-sizing: border-box; }

/* --- 6. domande frequenti ---------------------------------------------------- */
.faq { max-width: 820px; }
.faq__voce { border-bottom: 1px solid var(--linea); padding: var(--sp-4) 0; }
.faq__voce summary { font-family: var(--serif); font-size: var(--t-l); font-weight: 600;
                     cursor: pointer; list-style: none; display: flex; justify-content: space-between;
                     gap: var(--sp-4); }
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary::after { content: "+"; color: var(--terra); font-weight: 400; }
.faq__voce[open] summary::after { content: "–"; }
.faq__voce p { color: var(--inchiostro-tenue); margin: var(--sp-2) 0 0; max-width: 65ch; }
.faq__altro { margin-top: var(--sp-6); color: var(--inchiostro-tenue); }

@media (hover: hover) {
  .mondo:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-color: var(--accento); }
}
@media (max-width: 960px) {
  .mondi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iscrizione { grid-template-columns: 1fr; }
  .iscrizione__lato { position: static; }
}
@media (max-width: 760px) {
  .passi-illustrati { grid-template-columns: 1fr; gap: var(--sp-8); }
  /* Su telefono l'illustrazione sta SOPRA il testo, non dietro: un velo su uno schermo
     stretto coprirebbe proprio la tavola. */
  .eroe { display: block; min-height: 0; }
  .eroe__immagine { position: relative; aspect-ratio: 16 / 10; }
  .eroe__immagine::after { background: linear-gradient(0deg, var(--carta) 0%, transparent 40%); }
  .eroe__testo { padding-top: 0; }
  .eroe__intro { font-size: var(--t-m); }
  .fascia { padding: 48px 0; }
}
@media (max-width: 560px) {
  .mondi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .mondo__titolo { font-size: var(--t-m); }
  .contenitore { padding: 0 var(--sp-4); }
}

/* --- modulo di iscrizione -------------------------------------------------- */
.modulo-iscrizione { padding: var(--sp-6); }
fieldset { border: 0; border-top: 1px dashed var(--linea); margin: 0; padding: var(--sp-4) 0; min-width: 0; }
legend { font-family: var(--serif); font-weight: 600; font-size: var(--t-l); padding: 0 var(--sp-2) 0 0; }
.campi { display: grid; gap: var(--sp-3) var(--sp-4); }
.campi--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.campi--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.campo { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); min-width: 0; }
.campo label { font-weight: 500; font-size: var(--t-s); }
.campo input, .campo select, .campo textarea { width: 100%; }
textarea { resize: vertical; min-height: 80px; }
.facoltativo { color: var(--inchiostro-tenue); font-weight: 400; font-size: var(--t-xs); }
.aiuto { color: var(--inchiostro-tenue); font-size: var(--t-s); margin: var(--sp-1) 0 var(--sp-2); }
.campo__errore { color: var(--critico); font-size: var(--t-s); margin: var(--sp-1) 0 0; }
[aria-invalid="true"] { border-color: var(--critico); }
fieldset[aria-invalid="true"] { border-top-color: var(--critico); }

.scelte { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.scelta { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3);
          border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--carta);
          cursor: pointer; transition: var(--transizione); }
.scelta input { min-height: 0; margin: 4px 0 0; accent-color: var(--accento); }
.scelta:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); }
.scelta--blocco { border: 0; background: none; padding: var(--sp-1) 0; }
.scelta--blocco:has(input:checked) { background: none; }
.consensi { display: grid; gap: var(--sp-1); }
.invio { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; padding-top: var(--sp-4);
         border-top: 1px solid var(--linea); }
.btn--grande { padding: var(--sp-3) var(--sp-6); font-weight: 600; }

/* --- pagine di messaggio e testo -------------------------------------------- */
.messaggio { max-width: 620px; margin: var(--sp-8) auto; padding: var(--sp-6); }
.passi { color: var(--inchiostro-tenue); padding-left: var(--sp-6); }
.testo { max-width: 68ch; }
.testo h2 { font-size: var(--t-l); }
.avviso-segnaposto { border: 1px dashed var(--attenzione); color: var(--attenzione);
                     padding: var(--sp-2) var(--sp-3); border-radius: var(--raggio); }

/* --- admin ----------------------------------------------------------------- */
a.tessera { text-decoration: none; color: inherit; transition: var(--transizione); }
.tessera--attiva { border-color: var(--accento); box-shadow: inset 0 -3px 0 var(--accento); }
.provenienze { margin: 0 0 var(--sp-6); }
.provenienze summary { cursor: pointer; font-weight: 600; margin-bottom: var(--sp-3); }
.filtri { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.filtri input { flex: 1 1 220px; }
.paginazione { display: flex; gap: var(--sp-3); align-items: center; justify-content: center; margin-top: var(--sp-4); }
.dati { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.dati dt { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.dati dd { margin: 0; overflow-wrap: anywhere; }
.a-capo { white-space: pre-line; }
.griglia + .scheda { margin-top: var(--sp-4); }
.decisione { display: grid; gap: var(--sp-2); max-width: 560px; }
/* --- Vetrine dei produttori ----------------------------------------------------------- */
.mappa { margin: var(--sp-4) 0; }
.mappa [hidden] { display: none; }   /* .btn ha display: inline-flex, che vincerebbe su hidden */
/* Spazio riservato prima che la mappa si carichi: la pagina non salta (10 §8). */
.mappa__riquadro { height: 380px; border: 1px solid var(--linea); border-radius: var(--raggio);
                   background: var(--carta-scura); }
.mappa__comandi { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); }
.mappa__comandi .aiuto { margin: 0; }
.vetrine { list-style: none; padding: 0; display: grid; gap: var(--sp-4);
           grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vetrina-voce { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: var(--sp-4); }
.vetrina-voce p { margin: var(--sp-1) 0; }
.vetrina-voce__nome { font-family: var(--serif); font-size: var(--t-l); font-weight: 600; }
.vetrina-voce__dove, .vetrina-voce__cosa { color: var(--inchiostro-tenue); font-size: var(--t-s); }
.contatti-rapidi { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-6); }
.contatti-rapidi .btn { min-height: 44px; }
.vetrina-scheda { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.vetrina-scheda h2 { margin-top: 0; }
.prodotti, .prodotti-area { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.prodotto, .prodotto-area { background: var(--superficie); border: 1px solid var(--linea);
                            border-radius: var(--raggio); padding: var(--sp-3) var(--sp-4); }
.prodotto p { margin: var(--sp-1) 0 0; }
.prodotto--spento { opacity: .7; }
.prodotto__testa, .prodotto-area__testa { display: flex; gap: var(--sp-2); justify-content: space-between;
                                          align-items: flex-start; }
.prodotto-area__testa .aiuto { display: block; margin: 0; }
.prodotto-area details { margin-top: var(--sp-2); }
.prodotto-area summary { cursor: pointer; color: var(--inchiostro-tenue); font-size: var(--t-s); min-height: 40px;
                         display: flex; align-items: center; }
.riga--stretta { margin: var(--sp-2) 0 0; }
.mesi { display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.scelta--mese { padding: var(--sp-1) var(--sp-2); }
.modi { padding-left: var(--sp-6); }
.da-fare { padding-left: var(--sp-6); }
.da-fare li { margin: var(--sp-1) 0; }
/* Disponibilita': testo + forma, non solo colore (→E5). Ambra = da fare per il cliente
   (affrettarsi o ordinare), mai verde per "disponibile": e' neutro, non una vittoria (→FE4). */
.pillola--disponibile { border-color: var(--linea); }
/* Le indicazioni «senza» dichiarate: forma piena (non solo colore) per distinguerle dallo stato. */
.pillola--senza { background: var(--accento-tenue); border-color: var(--accento); font-weight: 600; }
.pillola--bio { background: var(--accento-tenue); border-color: var(--accento); font-weight: 600; }
.bio-certificato { font-size: var(--t-s); color: var(--inchiostro-tenue); margin: calc(var(--sp-2) * -1) 0 var(--sp-4); }
.prodotto__allergeni { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
                       font-size: var(--t-s); color: var(--inchiostro-tenue); margin: var(--sp-1) 0; }
.allergeni-campi { margin: var(--sp-3) 0; }
.allergeni-campi summary { cursor: pointer; font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.allergeni-campi fieldset { margin-top: var(--sp-3); }
.mesi.allergeni-scelte { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pillola--poca, .pillola--ordinazione { border-color: var(--attenzione); color: var(--attenzione); }
.pillola--finita, .pillola--fuori_stagione { color: var(--inchiostro-tenue); border-style: dashed; }
.modulo-largo { max-width: 760px; }
/* --- Foto --------------------------------------------------------------------------- */
.foto-griglia { list-style: none; padding: 0; display: grid; gap: var(--sp-4);
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.foto-voce { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
             padding: var(--sp-2); display: grid; gap: var(--sp-2); align-content: start; }
.foto-voce img, .vetrina-voce__foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
                                      border-radius: calc(var(--raggio) - 4px); display: block; }
.foto-voce input[name="descrizione"] { flex: 1 1 120px; min-width: 0; }
.vetrina-voce__foto { margin-bottom: var(--sp-2); }
.galleria { display: flex; gap: var(--sp-2); overflow-x: auto; margin: 0 0 var(--sp-6);
            scrollbar-color: var(--linea) transparent; scrollbar-width: thin;
            scroll-snap-type: x mandatory; }
.galleria__voce { flex: 0 0 auto; scroll-snap-align: start; }
.galleria__voce img { display: block; height: 160px; width: auto; aspect-ratio: auto;
                      border-radius: var(--raggio); object-fit: cover; }
.galleria__voce--prima img { height: 320px; max-width: min(100%, 560px); }
.galleria__voce--prima { max-width: 100%; }
.prodotto__foto { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 64px; }
.prodotto__nome, .prodotto-area__nome { flex: 1; }
@media (max-width: 560px) {
  .galleria__voce--prima img { height: 220px; }
  .galleria__voce img { height: 120px; }
}
.scelta--filtro { border: 0; background: none; padding: var(--sp-1) 0; align-items: center; }
.filtri .scelta--filtro input { flex: none; }   /* non e' il campo di ricerca: non si allarga */
.scelta--filtro:has(input:checked) { background: none; }
.distanza { font-weight: 600; color: var(--inchiostro); }
.preferiti { margin: 0 0 var(--sp-6); }
.preferiti h2 { font-size: var(--t-l); margin: 0 0 var(--sp-2); }
.elenco-preferiti { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.elenco-preferiti a { display: inline-flex; min-height: 40px; align-items: center; }
.contatti-rapidi [hidden], .preferiti[hidden], [data-ordine-distanza][hidden] { display: none; }
.invito-cerco { background: var(--accento-tenue); border: 1px solid var(--linea); border-radius: var(--raggio);
                padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0; }
/* --- /cerco: il primo schermo e' testo + modulo, con l'illustrazione dietro un velo ---------- */
.cerco-alto { position: relative; border-bottom: 1px solid var(--linea); }
.cerco-alto__sfondo { position: absolute; inset: 0; overflow: hidden; }   /* il taglio qui: l'elenco dei comuni deve poter uscire */
.cerco-alto__sfondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* Crema quasi piena dove sta il testo, piu' leggera verso destra dove il modulo ha il suo fondo. */
.cerco-alto__sfondo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--velo) 0%, var(--velo) 45%, transparent 100%); }
.cerco-alto__griglia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
                       gap: var(--sp-8); align-items: start; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.cerco-alto h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.06; margin: 0 0 var(--sp-4);
                 text-wrap: balance; font-weight: 600; }
.cerco-eroe__intro { font-size: var(--t-l); line-height: 1.5; color: var(--inchiostro-tenue); max-width: 40ch; margin: 0 0 var(--sp-6); }
.cerco-eroe__chiedi { margin: 0 0 var(--sp-2); font-weight: 600; }
.idee-cerco { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cerco-alto .rassicurazioni { margin-top: var(--sp-6); }
.cerco-alto__modulo .scheda { box-shadow: var(--ombra); margin: 0; }
.cerco-alto__modulo .campi--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cerco-come .passi-illustrati { margin-top: var(--sp-4); }
.cerco-dopo { padding-top: var(--sp-6); padding-bottom: var(--sp-8); color: var(--inchiostro-tenue); }
#richiesta { scroll-margin-top: var(--sp-4); }
@media (max-width: 960px) {
  .cerco-alto__griglia { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  /* Al telefono il velo copre tutto: l'illustrazione resta un fondo, il testo leggibile. */
  .cerco-alto__sfondo::after { background: var(--velo); }
  /* Al telefono il modulo deve arrivare presto: «i produttori non vedono la tua email» lo
     ripete comunque l'aiuto del campo email. */
  .cerco-alto .rassicurazioni { display: none; }
}
@media (max-width: 560px) {
  .cerco-alto__griglia { padding-top: var(--sp-6); gap: var(--sp-4); }
  .cerco-eroe__intro { font-size: var(--t-m); margin-bottom: var(--sp-4); }
  /* Le idee su una riga che scorre: il modulo sale nel primo schermo. */
  .idee-cerco--alto { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-1);
                      mask-image: linear-gradient(to right, var(--inchiostro) 88%, transparent); }
  .idee-cerco--alto li { flex: 0 0 auto; }
}
.passi-cerco { display: grid; gap: var(--sp-2); padding-left: var(--sp-6); margin: 0 0 var(--sp-6); }
.richieste { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.richiesta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
             padding: var(--sp-3) var(--sp-4); }
.richiesta .aiuto { display: block; margin: 0; }
/* Forma oltre al colore (→E5): il bordo a sinistra segna le richieste della propria zona. */
.richiesta--mia { border-left: 4px solid var(--attenzione); }
.avvisami { margin-top: var(--sp-2); }
.avvisami summary { cursor: pointer; color: var(--accento); font-size: var(--t-s); min-height: 40px;
                    display: flex; align-items: center; }
.avvisami input[type="email"] { flex: 1 1 200px; }
@media (max-width: 760px) {
  .vetrina-scheda { grid-template-columns: 1fr; }
  .mappa__riquadro { height: 300px; }
}

@media (hover: hover) {
  .scelta:hover { border-color: var(--accento); }
  a.tessera:hover { border-color: var(--accento); }
}

/* Chi ha chiesto meno movimento non deve subirlo. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Su mobile i bersagli restano >= 40px e la nav va a capo senza traboccare (→M2, M7). */
@media (max-width: 560px) {
  .modulo-iscrizione { padding: var(--sp-4); }
  .dati { grid-template-columns: 1fr; }
  .nav { gap: var(--sp-2); }
  /* Una riga sola, sempre: se andasse a capo, l'altezza dell'intestazione cambierebbe quando
     arrivano i font (il testo di ripiego e' piu' largo) e spingerebbe giu' la pagina (CLS).
     Sugli schermi piu' stretti la nav scorre di lato dentro se stessa, la pagina no (→M2). */
  .nav__voci { flex: 1 0 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav__voci::-webkit-scrollbar { display: none; }
  .nav__voci a { min-height: 40px; display: inline-flex; align-items: center; }   /* →M7 */
  .btn { min-height: 40px; }
}
/* I telefoni piu' stretti (360-400 px): voci un po' piu' piccole e vicine, cosi' la nav sta in una
   riga senza dover scorrere per scoprire «Candidati». */
@media (max-width: 400px) {
  .nav__voci { gap: var(--sp-1) var(--sp-2); }
  .nav__voci a { font-size: var(--t-s); }
}

/* --- il combobox dei comuni (app.js): elenco a discesa nello stile del sito ------------------ */
.combo { position: relative; }
.combo__lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
                max-height: 280px; overflow-y: auto; margin: 0; padding: var(--sp-1) 0; list-style: none;
                background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--raggio);
                box-shadow: var(--ombra); }
.combo__lista[hidden] { display: none; }
.combo__lista li { padding: var(--sp-2) var(--sp-3); min-height: 40px; box-sizing: border-box;
                   display: flex; align-items: center; cursor: pointer; }
.combo__lista li[aria-selected="true"] { background: var(--accento-tenue); color: var(--accento-scuro);
                                         box-shadow: inset 3px 0 0 var(--accento); }
@media (hover: hover) { .combo__lista li[role="option"]:hover { background: var(--accento-tenue); } }
.combo__lista .combo__vuoto { color: var(--inchiostro-tenue); cursor: default; font-size: var(--t-s); }

/* --- /senza: l'indice delle esigenze alimentari ------------------------------------------- */
.esigenze { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-8); display: grid; gap: var(--sp-3);
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.esigenze--grandi { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.esigenze a { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; box-sizing: border-box;
              padding: var(--sp-3) var(--sp-4); background: var(--superficie); border: 1px solid var(--linea);
              border-radius: 12px; color: var(--inchiostro); text-decoration: none;
              transition: border-color var(--transizione), box-shadow var(--transizione); }
.esigenze strong { font-family: var(--serif); font-size: var(--t-l); color: var(--accento-scuro); }
.esigenze--grandi a span:not(.aiuto) { color: var(--inchiostro-tenue); font-size: var(--t-s); }
@media (hover: hover) { .esigenze a:hover { border-color: var(--accento); box-shadow: var(--ombra); } }
.esigenze a:active { transform: translateY(1px); }

/* --- /rm/: «il tuo comune» (combobox di app.js) e bottone sulla stessa riga ----------------- */
.cerca-comune { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; margin: 0 0 var(--sp-6); }
.cerca-comune .campo { flex: 1 1 260px; max-width: 420px; margin: 0; }
.cerca-comune .btn { min-height: 44px; }

/* --- /widget: anteprima e codice --------------------------------------------------------- */
.widget-anteprima { display: block; width: 100%; max-width: 680px; border: 1px solid var(--linea); border-radius: 12px;
                    background: var(--carta); }
.widget-codice { width: 100%; box-sizing: border-box; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
                 padding: var(--sp-3); border: 1px solid var(--linea); border-radius: var(--raggio);
                 background: var(--superficie); color: var(--inchiostro); }

/* --- mercati contadini ------------------------------------------------------------------------ */
.elenco-mercati { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.elenco-mercati > li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
                       padding: var(--sp-3) 0; border-bottom: 1px dashed var(--linea); }
.elenco-mercati .aiuto { display: block; }
.elenco-mercati--pubblico { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.elenco-mercati--pubblico > li { padding: 0; border: 0; display: block; }
.elenco-mercati--pubblico a { display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; box-sizing: border-box;
                              padding: var(--sp-3) var(--sp-4); background: var(--superficie); border: 1px solid var(--linea);
                              border-radius: 12px; color: var(--inchiostro); text-decoration: none; }
.elenco-mercati--pubblico strong { font-family: var(--serif); font-size: var(--t-l); color: var(--accento-scuro); }
@media (hover: hover) { .elenco-mercati--pubblico a:hover { border-color: var(--accento); box-shadow: var(--ombra); } }

/* --- area: statistiche della vetrina --------------------------------------------------------
   Barre con <meter> (niente style inline: la CSP non li ammette). Colore neutro: un numero di
   visite non e' «buono» o «cattivo» (→FE4). */
.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--sp-4); }
.conteggi { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.conteggi li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0;
               border-bottom: 1px solid var(--linea); }
.conteggi strong { font-variant-numeric: tabular-nums; }
.statistiche td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.statistiche meter { width: min(40vw, 220px); height: 0.8rem; vertical-align: middle; margin-right: var(--sp-2);
                     -webkit-appearance: none; appearance: none; background: var(--carta-scura);
                     border-radius: var(--raggio); }
.statistiche meter::-webkit-meter-bar { background: var(--carta-scura); border: 0; border-radius: var(--raggio); }
.statistiche meter::-webkit-meter-optimum-value { background: var(--inchiostro-tenue); border-radius: var(--raggio); }
.statistiche meter::-moz-meter-bar { background: var(--inchiostro-tenue); border-radius: var(--raggio); }

/* --- prenota e ritira -----------------------------------------------------------------------
   Colori riservati (→FE4): ambra = c'e' da fare (una prenotazione da confermare), verde = fatta
   (ritirata); il resto neutro. Lo stato si legge anche dall'etichetta, non solo dal colore (E5). */
.prenota-quanto { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.prenota-quanto label { font-weight: 600; }
.prenota-quanto input { width: 6.5rem; min-height: 40px; }
.prenota-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3);
                 position: sticky; bottom: 0; z-index: 2; margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
                 background: var(--superficie); border: 1px solid var(--accento); border-radius: var(--raggio);
                 box-shadow: var(--ombra); }
.prenota-barra h3 { margin: 0; }
.prenota-barra p { margin: var(--sp-1) 0 0; }
.righe-ordine td:nth-child(2), .righe-ordine td:nth-child(3) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pillola--ordine-ricevuto { border-color: var(--attenzione); color: var(--attenzione); font-weight: 600; }
.pillola--ordine-confermato, .pillola--ordine-pronto { border-color: var(--accento); }
.pillola--ordine-ritirato { background: var(--accento-tenue); border-color: var(--ok); }
.pillola--ordine-rifiutato, .pillola--ordine-annullato { color: var(--inchiostro-tenue); border-style: dashed; }
.schede-filtro { display: flex; gap: var(--sp-4); margin: var(--sp-4) 0; border-bottom: 1px solid var(--linea); }
.schede-filtro a { padding: var(--sp-2) 0; border-bottom: 3px solid transparent; min-height: 40px;
                   display: inline-flex; align-items: center; }
.schede-filtro a[aria-current="page"] { border-bottom-color: var(--accento); font-weight: 600; }
.tessera--da-fare { border-color: var(--attenzione); border-width: 2px; }
/* Il riepilogo sta nello schermo del telefono: il nome va a capo, quantita' e prezzo no. */
.tabella.righe-ordine { display: table; }
.righe-ordine th, .righe-ordine td { padding-left: var(--sp-2); padding-right: var(--sp-2); }
.righe-ordine td:first-child { white-space: normal; }
@media (max-width: 480px) { .righe-ordine { font-size: var(--t-s); } }
.consegna-campi { margin: var(--sp-3) 0 var(--sp-3) var(--sp-5); padding-left: var(--sp-3); border-left: 2px solid var(--linea); }
.pillola--prenota { border-color: var(--accento); }
.scheda .passi { color: var(--inchiostro); display: grid; gap: var(--sp-2); }
.domande dt { font-weight: 600; margin-top: var(--sp-4); }
.domande dd { margin: var(--sp-1) 0 0; color: var(--inchiostro-tenue); }