:root{
  --sfondo:#f6f7f9; --carta:#ffffff; --bordo:#e2e5ea; --testo:#16191d;
  --tenue:#646c78; --accento:#1f6f43; --accento-chiaro:#e7f4ec;
  --allarme:#a1231c; --allarme-chiaro:#fdecea; --ambra:#8a5a00; --ambra-chiaro:#fdf3e0;
  --nuovo:#0b5cad; --nuovo-chiaro:#e6f0fb;
}
@media (prefers-color-scheme: dark){
  :root{
    --sfondo:#101317; --carta:#181c22; --bordo:#2a3038; --testo:#e8ebef;
    --tenue:#9aa4b1; --accento:#5fd39a; --accento-chiaro:#12291f;
    --allarme:#ff8a80; --allarme-chiaro:#2b1614; --ambra:#f0b849; --ambra-chiaro:#2b2213;
    --nuovo:#7db6f5; --nuovo-chiaro:#12203355;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--sfondo);color:var(--testo);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:24px 16px 64px}
.foglio{max-width:860px;margin:0 auto}
/* 🚨 Nessuna regola globale sui link: ogni posto se lo ricordava da se', e
   il giorno in cui uno se n'e' dimenticato il risultato e' stato «prova con
   60 km» BLU in mezzo a una pagina verde -- l'azione principale della
   ricerca, resa l'unica cosa che sembra di un altro sito. Qui una volta
   sola; i bottoni si riscrivono il colore dopo, e sono piu' specifici. */
a{color:var(--accento)}
h1{font-size:22px;margin:0 0 4px;letter-spacing:-.01em}
.sottotitolo{color:var(--tenue);font-size:13.5px;margin:0 0 20px}
.pallino{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accento);margin-right:6px;vertical-align:middle}
.banner{border-radius:10px;padding:12px 14px;margin:0 0 18px;font-size:14px;
  border:1px solid transparent}
.banner.male{background:var(--allarme-chiaro);border-color:var(--allarme);color:var(--allarme)}
.banner.info{background:var(--ambra-chiaro);border-color:var(--ambra);color:var(--ambra)}
/* L'esito dell'anteprima: la risposta a «vedi quanti ne riceveresti».
   Verde perche' e' una MISURA, non un allarme -- e anche uno zero qui e'
   una risposta buona, che la riga stessa si preoccupa di spiegare. */
.banner.esito{background:var(--accento-chiaro);border-color:var(--accento);
  color:var(--accento);line-height:1.6}
.banner.esito b{color:var(--accento)}
.banner.vecchio{background:var(--ambra-chiaro);border-color:var(--ambra);color:var(--ambra)}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);
  margin:28px 0 12px;font-weight:600}
.vuoto{background:var(--carta);border:1px dashed var(--bordo);border-radius:12px;
  padding:28px 20px;text-align:center;color:var(--tenue)}
.vuoto b{color:var(--testo);display:block;margin-bottom:4px;font-size:16px}
.carta{background:var(--carta);border:1px solid var(--bordo);border-radius:12px;
  padding:16px 18px;margin-bottom:14px}
.carta.nuova{border-color:var(--nuovo);box-shadow:0 0 0 3px var(--nuovo-chiaro)}
.testa{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
/* 🚨 La riga che decide: quanto e' lontana e quando scade, ai due lati.
   Sono le due cose su cui si scarta o si apre, e prima stavano una in mezzo
   a una riga di comune+provincia e l'altra sotto una tabella di nove righe. */
.decide{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  justify-content:space-between;margin:0 0 6px}
.lontananza{font-size:17px;font-weight:650;color:var(--accento)}
.lontananza small{font-size:13px;font-weight:500;color:var(--tenue)}
/* ⚠️ «distanza ignota» ereditava il verde e il peso di un numero vero: una
   cosa che non sappiamo non si scrive come una che sappiamo. */
.lontananza .ignoto{color:var(--tenue);font-size:13.5px;font-weight:500}
.decide .scadenza{margin:0;font-size:14px;text-align:right}
/* Le targhe: piccole, in fila, e sotto l'identita' invece che sopra. */
.targhe{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
/* 🚫 Un'assenza si dice, non si disegna come un bottone spento. */
.senza-link{color:var(--tenue);font-size:12.5px;margin:8px 0 0}
/* «Tutti i dati». 🚫 Chiuso: la tabella era meta' dell'altezza della
   scheda e la guarda una persona su venti. */
.dettagli{margin:10px 0 0;border-top:1px solid var(--bordo);padding-top:8px}
.dettagli summary{font-size:12.5px;color:var(--tenue);cursor:pointer;
  font-weight:600;list-style:none}
.dettagli summary::-webkit-details-marker{display:none}
.dettagli summary::before{content:"› ";display:inline-block;
  transition:transform .12s;font-weight:700}
.dettagli[open] summary::before{transform:rotate(90deg)}
.dettagli summary:hover{color:var(--accento)}
/* ⚠️ La classe non e' piu' un blocco in cima: e' in linea con il comune,
   perche' e' un'identita' e non un allarme. */
.classe{background:var(--accento-chiaro);color:var(--accento);border-radius:6px;
  padding:3px 8px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.etichetta{border-radius:6px;padding:3px 8px;font-size:11.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.etichetta.nuovo{background:var(--nuovo-chiaro);color:var(--nuovo)}
.etichetta.ore{background:var(--ambra-chiaro);color:var(--ambra)}
.etichetta.durata{background:var(--sfondo);color:var(--tenue);border:1px solid var(--bordo);text-transform:none;font-weight:600}
.etichetta.lontano{background:var(--bordo);color:var(--tenue)}
.scuola{font-size:17px;font-weight:650;margin:0 0 2px;line-height:1.25}
.dove{color:var(--tenue);font-size:13.5px;margin:0 0 9px}
.dove b{color:var(--testo);font-weight:600}
.ignoto{font-style:italic}
.altra-ancora{font-size:12.5px;opacity:.75;white-space:nowrap}
.scadenza{font-size:14px;font-weight:600;margin:0 0 12px}
.scadenza.oggi,.scadenza.domani{color:var(--allarme)}
.scadenza.presto{color:var(--ambra)}
.scadenza.calma{color:var(--accento)}
.scadenza.ignota{color:var(--ambra)}
dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0 0 14px;
  font-size:13.5px}
dt{color:var(--tenue)}
dd{margin:0}
.note{background:var(--sfondo);border-radius:8px;padding:10px 12px;font-size:13px;
  color:var(--tenue);margin:0 0 14px;white-space:pre-wrap}
.bottoni{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.bottoni form{margin:0}
a.btn,button.btn{display:inline-block;border-radius:8px;padding:8px 14px;font-size:13.5px;
  font-weight:600;text-decoration:none;border:1px solid var(--bordo);
  background:var(--carta);color:var(--testo);cursor:pointer;font-family:inherit}
a.btn.primo{background:var(--accento);border-color:var(--accento);color:#fff}
@media (prefers-color-scheme: dark){a.btn.primo{color:#08130d}}
a.btn.spento{opacity:.5;pointer-events:none}
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--carta);
  border:1px solid var(--bordo);border-radius:12px;overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--bordo)}
th{color:var(--tenue);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.05em}
tr:last-child td{border-bottom:none}
details{margin-top:8px}
summary{cursor:pointer;color:var(--tenue);font-size:13.5px}
footer{margin-top:36px;padding-top:18px;border-top:1px solid var(--bordo);
  color:var(--tenue);font-size:12.5px;line-height:1.7}
footer a{color:inherit}
.scorri{overflow-x:auto}

/* ====== le pagine d'ingresso ==========================================
   🚨 Prima non esistevano: il modulo d'iscrizione, cioe' la prima cosa che
   una persona vede, portava ventitre' `style=` scritti a mano e non
   conosceva nessuna di queste variabili. Lo stile del servizio viveva solo
   nella pagina dei risultati, che si vede DOPO essersi iscritti. */
.stretto{max-width:560px}
.occhiello{color:var(--tenue);font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;margin:0 0 6px}
.promessa{font-size:17px;line-height:1.55;margin:0 0 22px}
.promessa b{font-weight:650}
.riquadro{background:var(--carta);border:1px solid var(--bordo);border-radius:12px;
  padding:18px 20px;margin:0 0 18px}
.campo{margin:0 0 20px}
.campo>label,.campo>.etichetta-campo{display:block;font-weight:600;font-size:14px;
  margin:0 0 6px}
.aiuto{color:var(--tenue);font-size:12.5px;line-height:1.5;margin:6px 0 0}
.aiuto b{color:var(--testo)}
input[type=text],input[type=email],input[type=number],select{
  width:100%;font:inherit;font-size:15px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--bordo);background:var(--carta);color:var(--testo)}
input:focus,select:focus{outline:2px solid var(--accento);outline-offset:1px;
  border-color:var(--accento)}
/* Le scelte multiple. 🚫 Non un menu a tendina: su un telefono nasconde
   proprio le quattro voci che riguardano l'86% di chi legge. */
.scelte{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;margin:0}
.scelta{display:flex;gap:9px;align-items:flex-start;background:var(--carta);
  border:1px solid var(--bordo);border-radius:9px;padding:10px 12px;cursor:pointer}
.scelta:hover{border-color:var(--accento)}
.scelta input{margin:2px 0 0;accent-color:var(--accento);flex:0 0 auto}
.scelta .nome{font-size:14px;line-height:1.35}
.scelta .codice{display:block;color:var(--tenue);font-size:11.5px;font-weight:600;
  letter-spacing:.03em;margin-top:1px}
.scelta .quante{color:var(--tenue);font-size:11.5px}
.altre summary{margin:12px 0 10px;font-weight:600;color:var(--testo);font-size:14px}
/* Campi ripetuti (le altre classi, gli altri posti): una colonna con un
   respiro fra uno e l'altro. 🚨 Gli spazi fra due `<input>` nel sorgente
   sono l'unica cosa che li separava, cioe' una spaziatura decisa dal
   markup e non dal foglio. */
.pila{display:grid;gap:8px}
/* I tre comandi della ricerca. 🚨 Una riga sola su uno schermo largo e una
   colonna su un telefono, e la colonna non e' un ripiego: i tre sono la
   prima cosa che si tocca, quindi devono essere grandi, non compatti. */
.cerca{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;
  background:var(--carta);border:1px solid var(--bordo);border-radius:12px;
  padding:12px;
  /* ⚠️ `stretch` (il valore di partenza) tirava ogni comando all'altezza
     del piu' alto: con due classi scelte, il bottone «Mostra» diventava un
     blocco verde alto novanta pixel. I comandi tengono la loro altezza e
     si allineano in cima; e' la colonna delle classi che cresce. */
  align-items:flex-start}
.cerca select,.cerca input{flex:1 1 180px;width:auto;min-width:0}
/* 🚨 I chilometri e «Mostra» stanno INSIEME. Con quattro comandi in una
   riga che va a capo, il bottone finiva da solo su una terza riga: la cosa
   da premere, staccata da tutto, che sembra un errore di impaginazione.
   Legati, o vanno a capo tutti e due o nessuno dei due. */
.campo-azione{flex:0 0 auto;display:flex;gap:8px;align-items:flex-start}
/* Le classi scelte: targhe con la loro ×, e sotto il campo per aggiungerne
   un'altra. 🚨 Lo STATO si vede -- chi cerca tre classi deve sapere quali
   sono -- e si toglie con un clic, che e' un link e non uno script. */
.campo-classi{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}
.campo-classi input{flex:1 1 auto;width:100%}
.scelte-classi{display:flex;flex-wrap:wrap;gap:6px}
.targa-classe{display:inline-flex;align-items:center;gap:6px;
  background:var(--accento-chiaro);color:var(--accento);border-radius:6px;
  padding:4px 6px 4px 9px;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.targa-classe a{color:inherit;text-decoration:none;font-size:15px;
  line-height:1;opacity:.65;padding:0 3px;border-radius:4px}
.targa-classe a:hover{opacity:1;background:var(--accento);color:var(--carta)}
.cerca button{flex:0 0 auto;font:inherit;font-size:15px;font-weight:650;
  padding:10px 20px;border-radius:8px;border:1px solid var(--accento);
  background:var(--accento);color:#fff;cursor:pointer}
@media (prefers-color-scheme: dark){.cerca button{color:#08130d}}
.cerca button:hover{filter:brightness(1.06)}
/* 🚨 In colonna `flex-basis` e' un'ALTEZZA, non una larghezza: su un
   telefono `.campo-classi{flex:1 1 260px}` diventava un riquadro alto 260 px
   con dentro un campo di testo sperduto. Larghezza piena, altezza naturale. */
@media (max-width:560px){.cerca{flex-direction:column;align-items:stretch}
  .cerca select,.cerca input,.cerca button{flex:0 0 auto;width:100%}
  .campo-classi,.campo-azione{flex:0 0 auto;width:100%}
  .campo-azione{flex-direction:column}}
/* Il numero e' il titolo: e' la risposta alla domanda per cui uno e' qui.
   ⚠️ Gli `h2` di questo foglio sono etichettine MAIUSCOLE da 13px (servono a
   dire «Aperti adesso» sopra una lista): ereditarle faceva gridare la frase
   piu' importante della pagina. Si riscrivono tutte e tre le proprieta',
   perche' `font-size` da solo lascia le maiuscole e la spaziatura. */
.conteggio{font-size:22px;font-weight:650;margin:4px 0 2px;
  text-transform:none;letter-spacing:normal;color:var(--testo)}
.conteggio b{color:var(--accento)}
/* ⚠️ `button.grande` non prende un `<a>`: il bottone che porta al modulo e'
   un link, e senza questa riga sarebbe rimasto il bottoncino da 13px in
   fondo alla pagina -- cioe' l'unico passo che conta, reso il piu' piccolo. */
a.btn.grande{display:block;text-align:center;font-size:16px;padding:14px 18px}
.altre>.pila{margin:0 0 4px}
/* La seconda etichetta dentro un campo: dice cosa sono i campi liberi
   sotto le caselle, senza competere con il titolo del campo. */
.minore{display:block;font-size:13px;color:var(--tenue);font-weight:600;
  margin:16px 0 6px}
/* Il bottone che non impegna a niente. 🚨 Deve leggersi come un'altra COSA,
   non come un «Iscrivimi» piu' pallido: chi arriva qui deve poter provare
   senza il sospetto di essersi iscritto per sbaglio. */
button.grande.chiaro{background:transparent;color:var(--accento);
  border-color:var(--accento);margin-bottom:4px}
@media (prefers-color-scheme: dark){button.grande.chiaro{color:var(--accento)}}
button.grande.chiaro:hover{background:var(--accento-chiaro);filter:none}
button.grande{width:100%;font:inherit;font-size:16px;font-weight:650;padding:13px;
  border-radius:9px;border:1px solid var(--accento);background:var(--accento);
  color:#fff;cursor:pointer}
@media (prefers-color-scheme: dark){button.grande{color:#08130d}}
button.grande:hover{filter:brightness(1.06)}
.minuto{color:var(--tenue);font-size:13px;margin:18px 0 0;line-height:1.6}
.minuto a{color:var(--accento)}
/* La pagina /stato: una riga per fonte, il verdetto a sinistra. */
.riga-stato{display:flex;gap:10px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid var(--bordo)}
.riga-stato:last-child{border-bottom:none}
.verdetto{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px}
.verdetto.bene{background:var(--accento)}
.verdetto.male{background:var(--allarme)}
.verdetto.ignoto{background:var(--ambra)}
.quando{color:var(--tenue);font-size:12.5px;margin-left:auto;white-space:nowrap}