/* =====================================================================
   ERDA — IL FOGLIO SERVITO, e da E14 la SORGENTE DEL COLORE
   ---------------------------------------------------------------------
   Nato il 31 ago 2026 come copia del foglio `app/static/comune/stile.css`
   della piattaforma AML (quarto giro: «copiamo tutto il copiabile, poi
   cambiamo colori e logo»). Cambiato SOLO il blocco `:root` (I-17: al
   prodotto si personalizzano colori e loghi, l'interfaccia no) e aggiunte in
   coda le regole proprie di Erda, sotto «ERDA — REGOLE PROPRIE».
   Il resto e' il foglio AML tal quale, commenti compresi.

   ⚠️ 1 set 2026, E14, decisione (b) del regista: questo foglio e' la
   SORGENTE del colore (CLAUDE.md regola 12). `mockup/stile.css` e' il
   riferimento STORICO del 31 ago e non si tocca: da qui in avanti i due
   `:root` divergono di proposito, e la guardia
   `test_il_tema_ha_la_forma_del_mockup` confronta la FORMA, non i valori
   (`LEZIONI.md` n. 39). Chi cambia una tinta la cambia QUI, e solo qui.
   ===================================================================== */

/* =====================================================================
   PIATTAFORMA AML — il foglio di stile, in un posto solo
   ---------------------------------------------------------------------
   Nato in C1a il 17 agosto 2026, dal mock-up approvato dal committente
   dopo tre giri di correzioni. Sostituisce i 537 attributi `style=` in
   linea censiti come PA-I.32.

   🔑 I-17 — «al cliente si personalizzano COLORI e LOGHI, l'interfaccia
   no». La promessa e' vera solo se il tema e' un ELENCO DI VARIABILI e
   non un ramo di codice: con una struttura mono-persona, N interfacce
   sono N prodotti da mantenere e collaudare, e il cliente con la
   schermata su misura resta indietro al primo aggiornamento.
   ⇒ Sotto `:root` c'e' tutto cio' che si personalizza. Nient'altro nel
   foglio scrive un colore o un nome di carattere, e c'e' una prova
   meccanica che lo verifica (`tests/unit/test_guardia_stile.py`).

   ⚠️ Il cartone (`/prototipo/`) NON usa questo foglio: tiene il suo,
   congelato in `templates/prototipo/_stile_cartone.html`, e sparisce una
   schermata alla volta. Decisione del committente del 17 ago, n. 4 —
   riscrivere lo stile di 33 pagine destinate alla cancellazione e'
   lavoro buttato. Per qualche settimana convivono due estetiche.
   =====================================================================


   =====================================================================
   🔤 IL CRITERIO TIPOGRAFICO — e non e' un vezzo estetico
   ---------------------------------------------------------------------
                    GARAMOND NOMINA.  GEIST MISURA.

   Garamond e' la voce della piattaforma quando DA' UN NOME a qualcosa.
   Geist e' la voce DEI DATI.

   Il test, una domanda sola:
     «questa stringa e' il NOME di qualcosa, o e' un VALORE / uno STATO /
      un MESSAGGIO / un'AZIONE?»

   GARAMOND                            GEIST
   · nome della piattaforma            · date e importi
   · nome del cliente                  · punteggi e fasce, anche il
   · nome del soggetto                   numerone grande
     (nel titolo E in elenco:          · stati della pratica
      e' lo stesso oggetto)            · avvisi e messaggi
   · nomi delle regioni                · intestazioni di colonna
   · nomi dei blocchi                  · conteggi, pulsanti, aiuti
   · nomi dei luoghi di navigazione
     (gruppi E voci della spalla)

   ⚠️ E C'E' UNA TERZA VOCE, `--mono`, che va DICHIARATA e non taciuta:
   il codice fiscale, la partita IVA e l'identificativo. Non sono valori
   da leggere: sono CODICI DA CONFRONTARE carattere per carattere, e li'
   la larghezza fissa non e' un vezzo — e' la differenza fra accorgersi
   e non accorgersi che due codici differiscono per una cifra. La regola
   resta prevedibile: **se lo confronti caratatere per carattere, e' mono.**

   🔴 Il commento precedente diceva «--corpo e --titolo restano gli unici
   due posti in cui compare un nome di carattere». Era FALSO: `--mono`
   c'era gia', e la guardia che doveva impedirlo lo ammetteva in silenzio
   nella propria espressione regolare. Trovato dalla revisione
   adversariale il 17 ago 2026 — *una guardia che non difende cio' che
   dichiara e' peggio di nessuna guardia, perche' se ne fida qualcuno.*

   ✅ DECISO dal committente il 17 ago 2026 (d), PA-I.72: `--mono` si
   CONSEGNA come le altre due. Fino ad allora cadeva su caratteri di
   sistema, e su un'istanza dal cliente il codice fiscale si sarebbe visto
   col monospazio che quella macchina ha — la variabilita' che
   auto-ospitare i `.woff2` serviva a togliere. La scelta e' Geist Mono:
   stessa famiglia del bastone (stesse forme, stessa altezza-x, quindi
   un codice accanto a un valore non stona), stessa licenza SIL OFL,
   larghezza fissa dichiarata nel binario (`post.isFixedPitch`). Le
   riserve di sistema restano DOPO il nome consegnato: sono cio' che si
   vede se il file non arriva, non la scelta.

   🔑 UN CRITERIO SI RICONOSCE DA UNA PROPRIETA' SOLA: il lettore deve
   poter PREVEDERE quale carattere vedra' prima di guardare. Se non puo',
   la distinzione ha smesso di informare ed e' diventata decorazione.
   «Importante» non e' una proprieta' verificabile — la decide chi scrive
   il CSS, caso per caso, che e' la definizione di vezzo.

   ⚠️ VALE ANCHE QUANDO COSTA: il punteggio grande e' un valore, quindi
   sta al bastone pure quando in graziato stava meglio. Un'eccezione
   «perche' sta meglio» distrugge il criterio.
   =====================================================================


   =====================================================================
   LA SCALA — quattro livelli, e si distinguono
   ---------------------------------------------------------------------
   L0  Garamond 27px tondo ......... il titolo della pagina
   L1  GARAMOND MAIUSCOLO spaziato . la REGIONE concettuale
   L2  Garamond tondo 15px ......... il blocco dentro la regione
   L3  bastone maiuscoletto 9,5px .. le intestazioni dei DATI

   Il maiuscolo spaziato legge piu' «alto» del tondo anche essendo piu'
   piccolo: e' l'architettura della pagina, non un titolo. Garamond ha
   l'occhio piccolo — a parita' di corpo apparente vuole 2-3 px in piu'
   del bastone, ed e' perche' i numeri qui sotto non somigliano a quelli
   del corpo.
   ===================================================================== */


/* =====================================================================
   I CARATTERI — serviti da noi, mai da un CDN
   ---------------------------------------------------------------------
   🔴 La domanda non e' «posso usarlo?» ma «posso CONSEGNARLO?». Il
   Modello C installa l'istanza in casa del cliente: i `.woff2` viaggiano
   dentro il pacchetto. Clash Grotesk era il preferito ed e' stato
   scartato per questo — la EULA Fontshare vieta il passaggio a terzi.
   EB Garamond e Geist sono SIL OFL, che l'impacchettamento e la
   ridistribuzione li permette per iscritto.

   🔑 UN FILE PER FAMIGLIA. Sono caratteri VARIABILI (asse `wght`), e il
   peso si dichiara come INTERVALLO: il browser instanzia 400, 500 e 600
   dallo stesso binario. Nella cartella del mock-up c'erano cinque file
   per 173 KB, ma erano due file ripetuti — stesso hash, un doppione per
   peso, che e' il modo in cui Google Fonts li serve. Qui sono tre file
   per 97 KB. Intervalli letti dalla tabella `fvar` dei file, non
   ipotizzati: EB Garamond 400-800, Geist 100-900, Geist Mono 100-900.
   La licenza di ognuno, con l'avviso di copyright che la OFL pretende
   in ogni copia, sta in `font/LICENZE.txt`.
   ===================================================================== */

@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("font/EBGaramond-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("font/Geist-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("font/GeistMono-latin.woff2") format("woff2");
}


/* =====================================================================
   IL TEMA — questo blocco, e nient'altro, e' cio' che si personalizza
   ===================================================================== */

:root {
  color-scheme: light;

  /* 🔤 Gli UNICI TRE posti in cui compare un nome di carattere (come in AML). */
  --corpo:  "Geist", "Segoe UI", system-ui, sans-serif;
  --titolo: "EB Garamond", Garamond, Georgia, serif;
  --mono:   "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 📐 E58 — LA MISURA DELLE TABELLE, un passo sotto il corpo.
     Le tre voci qui sopra sono FAMIGLIE, non grandezze: la grandezza a cui
     parla `--corpo` e' il `font-size` del `body` (12.5px, piu' giu'), e questa
     e' quella del contenuto di ogni `table.fitta`.
     Perche' una variabile e non un numero: le tabelle dell'applicazione sono
     dieci (`fitta`, `fitta esecuzioni`, `fitta pubblicazioni`, `fitta
     documenti`), e dieci numeri uguali sono dieci posti da cambiare insieme e
     uno da dimenticare. Perche' un passo e non due: Gandolfi, 10 set, guarda
     Monitoraggio e vede poche righe per schermata — non chiede una tabella che
     non si legge. La guardia e' `tests/unit/test_tabelle_e58.py`. */
  --tabella: 11.5px;

  /* superfici — carta grigio-verde, piu' fredda della «tortora» di AML:
     Erda sta sotto terra, la scala e' quella della pietra e del muschio */
  --sfondo:      #eff0eb;
  --carta:       #fbfbf8;
  --carta-2:     #f4f4ee;
  --bordo:       #dcdcd1;
  --bordo-lieve: #e7e7de;
  --bordo-forte: #c3c4b4;

  /* inchiostri — `--testo` e' quello di RbyC (E14); il contrasto sul fondo lo MISURA
     `tests/unit/test_faccia_e14.py`, non lo dichiara questo commento */
  --testo: #262a27;
  --tenue: #66695e;
  --fioco: #62655a;

  /* la spalla: il verde cupo di RbyC (E14) */
  --lato:       #05301d;
  --lato-testo: #e8ece7;
  --lato-velo:  #ffffff12;
  --lato-velo2: #ffffff1f;
  --lato-filo:  #ffffff14;
  --lato-riga:  #ffffff26;
  --lato-conta: #ffffff1c;

  /* accento: il verde di RbyC (E14) — `--accento-cupo` e' la spalla, che li' e' gia' il piu' scuro */
  --accento:       #004225;
  --accento-cupo:  #05301d;
  --accento-tenue: #e6efe9;
  --accento-filo:  #00422544;

  /* 🔴 SEMANTICI, e in Erda vogliono dire: verde = confermato / ripreso ·
     ambra = da confermare / in coda · rosso = mancante / fonte muta / URL morto */
  --basso: #3f7a48;  --sf-basso: #3f7a4814;  --filo-basso: #3f7a4855;
  --medio: #a2691c;  --sf-medio: #a2691c14;  --filo-medio: #a2691c55;
  --alto:  #a33a30;  --sf-alto:  #a33a3014;  --filo-alto:  #a33a3055;

  --bianco: #ffffff;
}


/* =====================================================================
   BASE
   ===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--corpo);
  font-size: 12.5px;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accento); }
p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 1px;
  border-radius: 3px;
}

.num { font-variant-numeric: tabular-nums; text-align: right; }
.mono { font-family: var(--mono); font-size: .93em; }
.nota { color: var(--tenue); font-size: 11.5px; }
.vuoto { color: var(--tenue); padding: 1.4rem; text-align: center; }

/* Visibile ai soli lettori di schermo: un'etichetta che c'e' per chi la
   ascolta e non ruba spazio a chi la vede. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Il salto al contenuto: la prima cosa che incontra chi naviga da
   tastiera, altrimenti dovrebbe attraversare tutta la spalla a ogni
   pagina. Si vede solo quando prende il fuoco. */
.salta {
  position: absolute; left: -9999px; top: 0; z-index: 40;
  background: var(--carta); color: var(--testo);
  padding: .5rem .8rem; border: 1px solid var(--accento); border-radius: 0 0 5px 0;
}
.salta:focus { left: 0; }


/* =====================================================================
   LA SCALA TIPOGRAFICA
   ===================================================================== */

h1, h2, h3 { margin: 0; font-family: var(--titolo); font-weight: 600; }

/* L0 — titolo di pagina */
.capo h1 {
  font-size: 28px;
  letter-spacing: -.012em;
  line-height: 1.08;
  font-optical-sizing: auto;
}

/* L1 — regione concettuale: MAIUSCOLO, spaziato */
.reg-nome {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .155em; line-height: 1; color: var(--testo);
}

/* L2 — blocco dentro la regione: tondo */
details.blocco > summary .tit {
  font-family: var(--titolo); font-size: 15px; font-weight: 500;
  letter-spacing: 0; line-height: 1.2;
}

/* L3 — intestazioni dei dati: restano al BASTONE. Sono etichette di
   colonna, non titoli: se salissero a Garamond, il livello 2 e il
   livello 3 diventerebbero lo stesso livello. */
thead th {
  font-family: var(--corpo); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fioco); font-weight: 600;
  background: var(--carta-2); white-space: nowrap;
  text-align: left;
}


/* =====================================================================
   LA SPALLA SINISTRA
   ===================================================================== */

.app { display: flex; min-height: 100vh; }

.lato {
  width: 206px; flex: none;
  position: sticky; top: 0; height: 100vh;
  background: var(--lato); color: var(--lato-testo);
  display: flex; flex-direction: column;
}

/* 🏷️ Il riquadro del marchio e' a se' APPOSTA: qui andranno il nome
   della piattaforma (ancora da trovare) e il LOGO DEL CLIENTE. Si
   sostituisce il contenuto, non si tocca la struttura — I-17. */
.lato .marchio {
  padding: .95rem .9rem .85rem;
  border-bottom: 1px solid var(--lato-filo);
}
.lato .marchio-t {
  font-family: var(--titolo); font-size: 18px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.1;
}
.lato .marchio .qualifica {
  display: block; font-family: var(--titolo); font-size: 10.5px;
  font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  opacity: .62; margin-top: .3rem;
}

.lato nav { padding: .45rem; flex: 1; overflow-y: auto; }

/* I gruppi della spalla usano lo STESSO trattamento delle regioni del
   foglio (L1): un gruppo di navigazione e un blocco concettuale sono la
   stessa cosa vista da due posti. */
.lato .gruppo {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--titolo); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .17em;
  /* .5 dava 4,32:1 sul fondo scuro, sotto soglia. A .62 sono 5,8:1. */
  opacity: .62; padding: .85rem .55rem .3rem;
}
.lato .gruppo::after {
  content: ""; flex: 1; height: 1px; background: var(--lato-riga);
}
.lato nav > .gruppo:first-child { padding-top: .35rem; }

/* Le VOCI sono nomi di luoghi quanto i loro gruppi ⇒ Garamond anche
   loro. Cosi' la navigazione e' tutta «voce che nomina» e il foglio e'
   tutto «voce dei dati». 14,5 px e non 12,5: Garamond ha l'occhio
   piccolo. */
.lato a {
  display: flex; align-items: center; gap: .5rem;
  padding: .24rem .55rem; border-radius: 4px; text-decoration: none;
  color: var(--lato-testo); opacity: .78;
  font-family: var(--titolo); font-size: 14.5px; font-weight: 500;
  transition: opacity 120ms ease-out, background-color 120ms ease-out;
}
.lato a:hover { opacity: 1; background: var(--lato-velo); }
.lato a.attiva { opacity: 1; background: var(--lato-velo2); }

/* Il conteggio accanto alla voce e' un VALORE ⇒ bastone, dentro un nome
   in Garamond. E' il criterio applicato dentro una riga sola. */
.lato a .badge {
  margin-left: auto; font-family: var(--corpo); font-size: 10.5px;
  font-variant-numeric: tabular-nums; font-weight: 500;
  background: var(--lato-conta); padding: 0 .28rem; border-radius: 3px;
  opacity: .85;
}

.lato .senza-ruolo {
  padding: .9rem .8rem; font-size: 11.5px; line-height: 1.4; opacity: .7;
}

.lato .chi {
  padding: .6rem .9rem; border-top: 1px solid var(--lato-filo);
  font-size: 11.5px;
}
.lato .chi b { display: block; font-weight: 500; }
.lato .chi span { opacity: .62; font-size: 10.5px; }
/* Uscire e' un ATTO ⇒ un pulsante, e in POST. Vestito da collegamento
   perche' nella spalla un bottone pieno peserebbe come una voce di menu,
   che non e'.
   E24 — «Cambia» (e «Imposta chi sei» al primo avvio) e' invece un
   collegamento davvero: non cambia niente, porta a un modulo. Stessa veste,
   stessa regola: nella spalla lo spazio dei nomi e' uno, e una classe nuova
   con gli stessi valori sarebbe lo stesso colore scritto due volte. */
.lato .chi form { margin: .15rem 0 0; }
.lato .chi .esci, .lato .chi .cambia {
  font: inherit; font-family: var(--corpo); font-size: 10.5px;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--lato-testo); opacity: .62; text-decoration: underline;
}
.lato .chi .cambia { display: block; margin-top: .15rem; }
.lato .chi .esci:hover, .lato .chi .cambia:hover { opacity: 1; }

@media (max-width: 780px) {
  .app { display: block; }
  .lato { width: auto; height: auto; position: static; }
  .lato nav { overflow: visible; }
}


/* =====================================================================
   IL FOGLIO
   ===================================================================== */

.corpo { flex: 1; min-width: 0; }
.foglio { padding: 1rem 1.3rem 4rem; max-width: 1320px; }

.briciole { font-size: 11.5px; color: var(--tenue); margin-bottom: .35rem; }
.briciole a { text-decoration: none; }
.briciole a:hover { text-decoration: underline; }

.capo { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.capo .sotto {
  color: var(--tenue); font-size: 12.5px; margin-top: .25rem;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.capo .spinta { margin-left: auto; display: flex; gap: .4rem; }
.riga-capo {
  padding-bottom: .75rem; border-bottom: 1px solid var(--bordo);
  margin-bottom: .95rem;
}


/* =====================================================================
   COMANDI
   ===================================================================== */

.bott {
  font: inherit; font-family: var(--corpo); font-size: 12.5px;
  padding: .3rem .7rem;
  border: 1px solid var(--bordo-forte); border-radius: 5px;
  background: var(--carta); color: var(--testo); cursor: pointer;
  text-decoration: none; white-space: nowrap; display: inline-block;
  transition: border-color 120ms ease-out, color 120ms ease-out;
}
.bott:hover { border-color: var(--testo); }
.bott.primario {
  background: var(--accento); border-color: var(--accento);
  color: var(--bianco); font-weight: 500;
}
.bott.primario:hover { background: var(--accento-cupo); border-color: var(--accento-cupo); }
.comandi { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; }

.pill {
  display: inline-block; padding: .04rem .38rem; border-radius: 3px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid transparent;
}
.pill-basso { color: var(--basso); background: var(--sf-basso); border-color: var(--filo-basso); }
.pill-medio { color: var(--medio); background: var(--sf-medio); border-color: var(--filo-medio); }
.pill-alto  { color: var(--alto);  background: var(--sf-alto);  border-color: var(--filo-alto); }
.pill-tenue { color: var(--tenue); border-color: var(--bordo-forte); font-weight: 500; }
.pill-acc   { color: var(--accento); background: var(--accento-tenue); border-color: var(--accento-filo); }
/* WE1 (21 ago 2026) — lo stato «in evidenza» che ha chiesto. Neutra apposta:
   in questa piattaforma l'unica scala di gravita' e' la FASCIA, e dare un
   colore anche allo stato metterebbe due semafori nella stessa riga — chi
   legge non saprebbe piu' quale dei due sta guardando.

   🔄 F3 · voce 11 (28 ago 2026) — la neutralita' si RESTRINGE, non si
   cancella. Quella ragione vale per gli stati di LAVORAZIONE, che sono un
   percorso; non vale per gli ESITI, che non sono un grado di gravita' — sono
   la fine, e distinguere «e' andata bene» da «e' andata male» a colpo d'occhio
   e' il mestiere di un elenco. Sue parole: *«nell'elenco pratiche l'occhio non
   separa una APPROVATA da una APERTA senza leggere»*.
   ⛔ E resta scritto perche' NON si colorano «in valutazione» e sorelle: fra un
   mese qualcuno lo rifarebbe senza sapere che si era deciso di no. */
.pill-stato { color: var(--testo); border-color: var(--bordo-forte); }
.pill-esito-buono  { color: var(--basso); background: var(--sf-basso); border-color: var(--filo-basso); }
.pill-esito-avverso { color: var(--alto); background: var(--sf-alto); border-color: var(--filo-alto); }
.tenue { color: var(--tenue); }

/* WE1 — un'intestazione di colonna che a schermo non serve (la colonna delle
   frecce) e che a un lettore di schermo serve eccome: `<th></th>` vuoto lascia
   la colonna senza nome, e chi naviga a voce sente «colonna 3». */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}


/* =====================================================================
   LE QUATTRO REGIONI — distinte per FORMA, non per colore
   ---------------------------------------------------------------------
   anagrafica = elenchi di fatti · profilo = un verdetto con un numero ·
   rapporti = una lista di cose · workflow = una barra a tappe, perche'
   un processo deve avere la forma di un processo.

   ✂️ Niente glosse esplicative accanto ai titoli. Chi usa questa
   piattaforma e' un professionista dell'antiriciclaggio: spiegargli
   cos'e' un'anagrafica non informa. Se un titolo ha bisogno di una
   didascalia, e' sbagliato il titolo — non manca la didascalia.
   ===================================================================== */

.regione { margin-bottom: 1.05rem; }
.reg-capo { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.reg-marca {
  font-family: var(--titolo); font-size: 11.5px; font-weight: 600;
  color: var(--fioco); border: 1px solid var(--bordo-forte);
  border-radius: 50%; width: 20px; height: 20px; line-height: 18px;
  text-align: center; flex: none; letter-spacing: .01em;
}
.reg-capo .riga { flex: 1; height: 1px; background: var(--bordo); }

/* F24-4d (24 ago 2026) — il RIQUADRO: la regione come scheda chiusa, per le
   pagine del configuratore. Li' le aree sono qualitativamente diverse
   (pubblicare, tarare la scala, comporre le sezioni) e la sola riga
   orizzontale le faceva leggere come un testo continuo — sue parole: «troppo
   omogenea», «un wall of text». Le pagine-scheda (anagrafica, profilo)
   restano alle regioni per forma: il riquadro e' un modificatore, non il
   nuovo default. */
.regione.riquadro {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 6px; padding: .6rem .85rem .75rem;
}
.regione.riquadro > details.piega > summary.reg-capo { margin-bottom: .55rem; }

/* F6 (28 ago 2026) — l'INDICE delle ancore. Sue parole sul percorso del
   profilo: «non si capisce niente, ci deve essere piu' ordine… qualcosa che
   aiuta a navigare la sezione». Con dieci stati vivi la pagina rende 118 KB:
   dieci schede non si scorrono, si raggiungono.

   ✋ E' una riga di ancore, non una seconda spalla: la pagina ne ha gia' una, e
   due navigazioni concorrenti sono peggio di nessuna. */
.ancore {
  display: flex; flex-wrap: wrap; gap: .3rem .6rem;
  margin: 0 0 .9rem; padding: .45rem .6rem;
  background: var(--carta-2); border: 1px solid var(--bordo-lieve);
  border-radius: 6px; font-size: 11.5px;
}
.ancore a { color: var(--tenue); text-decoration: none; }
.ancore a:hover { color: var(--accento); text-decoration: underline; }

/* Arrivando da un'ancora la scheda non deve incollarsi al bordo di sopra: un
   titolo a filo di finestra si legge come «sono gia' oltre». */
.regione[id] { scroll-margin-top: .8rem; }

/* La PIEGA di regione (18 ago 2026): «Anagrafica», «Compagine»… si chiudono
   a livello alto. Stile diverso dai blocchi: niente cornice, il capo di
   regione resta com'e' (marca cerchiata + MAIUSCOLO + riga), e a destra un
   segno «−»/«+» in carattere di titolo. I blocchi dentro nascono chiusi. */
details.piega > summary.reg-capo {
  cursor: pointer; list-style: none; user-select: none; margin-bottom: .45rem;
}
details.piega > summary.reg-capo::-webkit-details-marker { display: none; }
details.piega > summary.reg-capo::after {
  content: "+"; font-family: var(--titolo); font-size: 17px; line-height: 1;
  color: var(--fioco); width: 20px; text-align: center; flex: none;
}
details.piega[open] > summary.reg-capo::after { content: "−"; }
details.piega > summary.reg-capo:hover .reg-nome { color: var(--accento-cupo); }
details.piega > summary.reg-capo .conta {
  font-family: var(--corpo); font-size: 11px; color: var(--fioco); flex: none;
}

details.blocco {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 6px; margin-bottom: .3rem;
}
details.blocco > summary {
  padding: .3rem .6rem; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .5rem;
  user-select: none; border-radius: 5px;
}
details.blocco > summary::-webkit-details-marker { display: none; }
details.blocco > summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid var(--fioco);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transition: transform 120ms ease-out;
}
details.blocco[open] > summary::before { transform: rotate(90deg); }
details.blocco > summary:hover { background: var(--carta-2); }
details.blocco > summary .conta {
  margin-left: auto; font-family: var(--corpo); font-weight: 400;
  color: var(--fioco); font-size: 11px;
}
details.blocco .interno {
  padding: .5rem .7rem .6rem; border-top: 1px solid var(--bordo-lieve);
}
details.blocco .interno.a-filo { padding: 0; border-top: 1px solid var(--bordo-lieve); }
/* 🔴 Difetto n. 459 (rilievo del 23 ago, `F23-2`). «A filo» vuol dire padding
   zero, ed e' giusto per una TABELLA — deve arrivare al bordo. E' sbagliato per
   i pulsanti che la seguono: senza padding toccano il bordo, e col margine di
   `.comandi` restano staccati dall'ultima riga. Sue parole: *«tocca i bordi e ha
   troppo spazio bianco rispetto all'ultima riga sopra»*. Il rientro lo rimette
   dove stanno gli altri comandi, e il margine sparisce perche' il padding lo
   sostituisce. */
details.blocco .interno.a-filo > .comandi { padding: .55rem .7rem; margin-top: 0; }

/* PA-I.212 (27 ago 2026, `S1` ②) — la GERARCHIA della pagina di una sezione.
   Fin qui la banda DOMANDA e la banda RISPOSTA erano larghe uguali e i blocchi
   apribili stavano in fila allo stesso livello: la pagina si leggeva come
   quattro cose pari, mentre **le risposte stanno dentro la domanda**. Il
   rientro con la stanghetta a sinistra dice l'appartenenza senza aggiungere
   una parola, ed e' la stessa cosa che fa l'indentazione in un elenco.
   ✋ «Aggiungi una domanda» resta al livello alto (blocco primario, sotto):
   aggiunge un'unita' strutturale, e rientrarlo direbbe il contrario. */
.sotto-domanda {
  margin-left: .7rem;
  padding-left: .8rem;
  border-left: 2px solid var(--bordo);
}

/* PA-I.212 — il blocco MINUTO: un `details` dentro una cella di tabella (il
   tipo d'avviso creabile dalla colonna ACCENDE). Stessa forma del blocco, ma
   senza cornice e senza sfondo: dentro una riga una seconda scatola disegnata
   la spezzerebbe, e cio' che serve e' solo il triangolino che apre. */
details.blocco.minuto {
  background: none; border: none; margin: .2rem 0 0;
}
details.blocco.minuto > summary { padding: .1rem 0; }
details.blocco.minuto > summary .tit { font-size: 11px; color: var(--fioco); }
details.blocco.minuto > summary:hover { background: none; }
details.blocco.minuto > summary:hover .tit { color: var(--accento-cupo); }
details.blocco.minuto .interno {
  padding: .3rem 0 .1rem; border-top: none;
}

/* F24-4d — il blocco PRIMARIO: «Aggiungi una domanda» (e «Aggiungi una
   sezione») pesano piu' di «Aggiungi una risposta», perche' aggiungono
   un'unita' strutturale. Blu per sua decisione, come i pulsanti che
   navigano (F23-3): e' l'invito principale della pagina. */
details.blocco.primario { border-color: var(--accento); }
details.blocco.primario > summary {
  background: var(--accento); color: var(--bianco); border-radius: 5px;
}
details.blocco.primario[open] > summary { border-radius: 5px 5px 0 0; }
details.blocco.primario > summary:hover { background: var(--accento-cupo); }
details.blocco.primario > summary::before { border-left-color: var(--bianco); }
details.blocco.primario > summary .tit { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  details.blocco > summary::before { transition: none; }
  .lato a { transition: none; }
  .bott { transition: none; }
}

/* --- I · anagrafica: elenchi di fatti --- */
/* ⚠️ `max-width` e non `1fr` libero: il blocco e' largo quanto la pagina, e
   senza limite il valore di un campo da dodici caratteri si stendeva su
   mille pixel. Nel mock-up la scheda stava su DUE colonne e il problema non
   si vedeva; qui la regione e' una sola, e il difetto e' comparso solo
   guardando la pagina resa. Quando arrivano le altre tre regioni (C4, C5,
   C7) la disposizione a due colonne torna, e questo limite non da' fastidio. */
dl.dati {
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  gap: .16rem .7rem; margin: 0; max-width: 620px;
}
dl.dati dt { color: var(--tenue); }
dl.dati dd { margin: 0; }

/* 18 ago 2026 (d): i gruppi dell'anagrafica in UN blocco, su due colonne
   («tanto spazio bianco»). Ogni gruppo ha il suo titolo piccolo. */
.gruppi-due-col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 2rem; align-items: start;
}
.gruppi-due-col .gruppo h3 {
  font-family: var(--titolo); font-size: 13.5px; font-weight: 600; margin: 0 0 .3rem;
  color: var(--tenue); letter-spacing: .01em;
}
.gruppi-due-col dl.dati { max-width: none; }
@media (max-width: 900px) { .gruppi-due-col { grid-template-columns: 1fr; } }

/* Le AZIONI di riga come icone (18 ago 2026 (d): «meglio due icone, cosi'
   stanno su una riga»): matita = modifica, cestino = elimina/annulla; il
   motivo, quando serve, e' un campo piccolo accanto al cestino. */
td.azioni-icone { white-space: nowrap; }
.icone { display: inline-flex; align-items: center; gap: .3rem; }
form.icone { margin: 0; }
.icona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 5px; border: 1px solid var(--bordo-forte);
  background: var(--carta); color: var(--tenue); cursor: pointer; padding: 0;
  text-decoration: none; font: inherit;
}
.icona:hover { color: var(--testo); border-color: var(--testo); }
.icona:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.icone input[type=text] { width: 9rem; padding: .18rem .4rem; font-size: 12px; }

/* E58 — un passo piu' giu' di tutto il resto della pagina, da un posto solo.
   Sta sulla TABELLA e non sulla cella perche' cosi' la prende anche cio' che in
   una cella ci sta dentro (le pill, le `.meta`, i pulsanti), che e' quello che
   fa l'altezza della riga. */
table.fitta { font-size: var(--tabella); }

table.fitta th, table.fitta td {
  text-align: left; padding: .24rem .6rem;
  border-bottom: 1px solid var(--bordo-lieve);
  /* In alto, non al centro: con celle di altezza diversa il centraggio
     fa ballare le righe e la lettura si perde. */
  vertical-align: top;
}
table.fitta tbody tr:last-child td { border-bottom: none; }
table.fitta tbody tr:hover { background: var(--carta-2); }
table.fitta tr.somma td { font-weight: 600; border-top: 1px solid var(--bordo); }

/* Una tabella di CONFIGURAZIONE che si compila riga per riga (Impostazioni ›
   Checklist, C11c): il nome ha lo spazio per leggersi, i numeri il loro, e le
   due azioni della riga stanno una accanto all'altra. */
table.configurabile td.nome { width: 26%; min-width: 12rem; }
table.configurabile td.modo select { min-width: 10rem; }
table.configurabile td.fascia select { min-width: 7rem; }
table.configurabile td.numero input { width: 4.5rem; }
table.configurabile td.ordine input { width: 3.5rem; }
table.configurabile tr.errori-riga td { padding-top: 0; }
/* 🔄 F3 · voce 15 — la regola era su `table.configurabile`, e l'elenco dei
   questionari e' una `fitta`: i tre pulsanti si impaginavano «Apri Duplica»
   sopra e «Ritira» sotto. ⇒ Sta sulla COLONNA, che e' la cosa di cui si parla:
   una cella di azioni non manda a capo i suoi pulsanti, in qualunque tabella. */
td.azioni { white-space: nowrap; }
/* F24-4d — nella cella delle azioni convivono collegamenti («Domande») e
   pulsanti: lo spazio va fra i `.bott`, non solo fra i <button>. */
table.configurabile td.azioni .bott + .bott { margin-left: .3rem; }
/* F24-4d — il codice e' un riferimento, non il contenuto della riga: piu'
   tenue, perche' il nome resti la cosa che si legge per prima. Mono resta:
   si confronta carattere per carattere. */
table.configurabile td.mono:not(.num):not(.numero) { color: var(--tenue); }

/* --- II · il profilo: un verdetto, e si vede che e' un verdetto --- */
.verdetto {
  display: flex; align-items: center; gap: .9rem;
  background: var(--carta); border: 1px solid var(--bordo-forte);
  border-radius: 6px; padding: .6rem .8rem; margin-bottom: .3rem;
}
/* Un punteggio e' un VALORE ⇒ bastone, anche qui che e' grande e in
   Garamond stava meglio. La riga che tiene in piedi il criterio e'
   quella che costa. */
.verdetto .n {
  font-family: var(--corpo); font-size: 34px; font-weight: 600;
  letter-spacing: -.03em; line-height: .95; font-variant-numeric: tabular-nums;
}
.verdetto .fianco { line-height: 1.3; }
.verdetto .su { display: block; font-size: 10.5px; color: var(--fioco); margin-top: .28rem; }
.verdetto .meta {
  margin-left: auto; text-align: right; font-size: 11px;
  color: var(--tenue); line-height: 1.35;
}
.barretta {
  display: block; height: 5px; background: var(--bordo-lieve);
  border-radius: 3px; overflow: hidden; min-width: 70px;
}
.barretta i { display: block; height: 100%; background: var(--accento); border-radius: 3px; }

.avv {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .34rem .6rem; font-size: 12px;
  border-left: 3px solid transparent; border-bottom: 1px solid var(--bordo-lieve);
}
.avv:last-child { border-bottom: none; }
.avv.alta  { border-left-color: var(--alto);  background: var(--sf-alto); }
.avv.media { border-left-color: var(--medio); background: var(--sf-medio); }
.avv .eff { margin-left: auto; color: var(--tenue); font-size: 10.5px; white-space: nowrap; }

/* --- IV · il percorso di un PROCESSO (i passi), e ne ha la forma --- */
/* ⚠️ Si chiamava `.percorso` e da E61 si chiama `.passi-percorso`: in
   questo prodotto «percorso» vuol dire un'altra cosa — il cammino di una
   pagina nel menu della fonte (E60) — e quella e' una CELLA di tabella e
   un CAMPO di un modulo. Col nome vecchio si prendevano il fondo, il
   bordo e il padding di questo componente, che non c'entra niente: e' la
   lezione n. 53 (`td.voce` ereditava l'elenco a schede) che torna, e
   l'ha vista la FOTO, non una prova. Nessun template serve questo
   componente: e' eredita' della piattaforma AML, e si tiene. */
.passi-percorso {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 6px; padding: .8rem .9rem .6rem;
}
.passi { display: flex; align-items: flex-start; }
.passi .passo { flex: 1; text-align: center; position: relative; min-width: 0; }
.passi .passo::before {
  content: ""; position: absolute; top: 6px; left: -50%; width: 100%;
  height: 1.5px; background: var(--bordo-forte);
}
.passi .passo:first-child::before { display: none; }
.passi .passo.fatto::before { background: var(--accento); }
.passi .bollo {
  position: relative; z-index: 1; display: block; margin: 0 auto .32rem;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--sfondo); border: 1.5px solid var(--bordo-forte);
}
.passi .passo.fatto .bollo { background: var(--accento); border-color: var(--accento); }
.passi .passo.ora .bollo {
  background: var(--carta); border-color: var(--accento); border-width: 4px;
  width: 15px; height: 15px; margin-top: -1px;
}
.passi .eti { font-size: 11px; color: var(--fioco); line-height: 1.25; padding: 0 .2rem; }
.passi .passo.fatto .eti { color: var(--tenue); }
.passi .passo.ora .eti { color: var(--testo); font-weight: 600; }

.due-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; align-items: start; }
@media (max-width: 1080px) { .due-col { grid-template-columns: 1fr; } }


/* =====================================================================
   ELENCO
   ===================================================================== */

.cercona {
  font: inherit; font-family: var(--corpo); font-size: 12.5px;
  padding: .34rem .6rem; width: 100%;
  border: 1px solid var(--bordo-forte); border-radius: 5px;
  background: var(--carta); color: var(--testo); margin-bottom: .45rem;
}
.cercona::placeholder { color: var(--fioco); }

.chips { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: .7rem; font-size: 12px; }
.chips a {
  text-decoration: none; color: var(--tenue); padding: .12rem 0;
  border-bottom: 1.5px solid transparent; transition: color 120ms ease-out;
}
.chips a:hover { color: var(--testo); }
.chips a.attivo { color: var(--testo); font-weight: 600; border-bottom-color: var(--testo); }
.chips .n { font-variant-numeric: tabular-nums; color: var(--fioco); font-size: 11px; }
/* WE5 — le due SEZIONI dell'anagrafica non sono filtri fra gli altri: sono la
   struttura dell'elenco. Un filetto le stacca da cio' che viene dopo, senza
   una didascalia che spieghi la differenza (regola 16). */
.chips .stacco {
  width: 1px; align-self: stretch; background: var(--bordo); margin: 0 .2rem;
}

.elenco {
  border-top: 1px solid var(--bordo); background: var(--carta);
  border-radius: 6px 6px 0 0;
}
.voce {
  display: flex; align-items: center; gap: .9rem;
  padding: .38rem .7rem; border-bottom: 1px solid var(--bordo-lieve);
  text-decoration: none; color: inherit;
  transition: background-color 120ms ease-out;
}
.voce:hover { background: var(--carta-2); }
.voce .testo { min-width: 0; flex: 1; }
/* Il nome del soggetto in Garamond: nell'elenco e' l'unica cosa che si
   legge, tutto il resto e' riferimento. */
.voce .nome {
  font-family: var(--titolo); font-size: 16px; font-weight: 500;
  color: var(--testo); letter-spacing: -.005em; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voce:hover .nome { color: var(--accento); }
.voce .meta {
  font-size: 11px; color: var(--tenue); margin-top: .04rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 🛡️ Larghezza fissa e testo che non va a capo: senza `overflow` un'etichetta
   piu' lunga della colonna si stampa **sopra** quella accanto — non si
   schianta niente, si legge una parola sovrapposta a un'altra (difetto n. 458,
   trovato guardando la pagina). Il taglio coi puntini e' la differenza fra
   un'etichetta troncata, che si vede, e due sovrapposte, che non si capiscono. */
.voce .stato {
  font-size: 11.5px; color: var(--tenue); white-space: nowrap;
  width: 118px; text-align: right; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}
.voce .stato small { color: var(--fioco); font-size: 10.5px; }
/* Colonna di numeri da CONFRONTARE: cifre tabulari del bastone. Qui il
   criterio e la funzione dicono la stessa cosa. */
.voce .punteggio {
  width: 96px; text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--corpo); font-size: 17px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1;
}
/* L'etichetta della fascia torna al bastone: un graziato in maiuscoletto
   a 9 px perde le grazie e si legge peggio del numero che accompagna. */
.voce .punteggio small {
  display: block; font-family: var(--corpo); font-size: 9px;
  font-weight: 600; letter-spacing: .08em; margin-top: .2rem; white-space: nowrap;
}
/* 🔴 **WE1, e l'ha trovato lo scatto della pagina.** Le regole qui sopra sono
   scoped su `.voce`, cioe' sul vecchio elenco a lista: nella TABELLA delle
   pratiche il `<small>` della fascia restava in linea e usciva incollato al
   numero — «31,00MEDIO». Invisibile nel sorgente e in ogni prova, perche' le
   prove cercano i due pezzi e li trovano tutti e due. */
td.punteggio {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--corpo); font-weight: 600; white-space: nowrap;
}
td.punteggio small {
  display: block; font-family: var(--corpo); font-size: 9px;
  font-weight: 600; letter-spacing: .08em; margin-top: .15rem;
}
.f-basso .punteggio { color: var(--basso); }
.f-medio .punteggio { color: var(--medio); }
.f-alto  .punteggio { color: var(--alto); }
.f-nessuna .punteggio { color: var(--fioco); font-weight: 400; }

.pie {
  padding: .5rem .7rem; font-size: 11.5px; color: var(--tenue);
  font-variant-numeric: tabular-nums; background: var(--carta);
  border: 1px solid var(--bordo); border-top: none; border-radius: 0 0 6px 6px;
}

/* E65 — i due comandi che portano via la tabella filtrata: lo zip dei file e il
   foglio di calcolo. Stanno fra la tabella e il pie', su una riga loro, e non
   dentro il pie': quello e' un conteggio, questi sono gesti. Il `form` del primo
   non deve occupare una riga per se' (`display: contents` lo fa sparire dal
   flusso e lascia il bottone dentro il flex, come se il modulo non ci fosse). */
.comandi-tabella {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .7rem 0 0;
}
.comandi-tabella form { display: contents; }
.comandi-tabella .nota { margin: 0; }


/* =====================================================================
   MODULI
   ---------------------------------------------------------------------
   ⚠️ `password` e `date` vanno vestiti come gli altri. Il foglio vecchio
   nasceva per il cartone, che non aveva campi di quel tipo: sulla pagina
   di accesso il campo della parola usciva piu' stretto di quello del
   nome. Visto fotografando la pagina, il 2 agosto 2026.
   ===================================================================== */

.scheda {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 6px; padding: .8rem .9rem;
}

label {
  display: block; font-size: 11.5px; color: var(--tenue); margin-bottom: .18rem;
}

input[type=text], input[type=search], input[type=number], input[type=password],
input[type=date], input[type=email], select, textarea {
  font: inherit; font-family: var(--corpo); width: 100%;
  padding: .32rem .5rem; border-radius: 5px;
  border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo);
}
/* Il campo file (C11b): vestito come gli altri, e non piu' largo della sua
   colonna — il pulsante nativo «Scegli il file» faceva sbordare la riga. */
input[type=file] {
  font: inherit; font-family: var(--corpo); font-size: 12px; width: 100%; max-width: 100%;
  padding: .22rem .3rem; border-radius: 5px;
  border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accento); outline-offset: -1px; border-color: var(--accento);
}
.campo { margin-bottom: .6rem; }
.campo:last-child { margin-bottom: 0; }
.campo .aiuto { font-size: 10.5px; color: var(--fioco); margin-top: .12rem; }

/* Un INDIRIZZO (18 ago 2026): provincia → comune dalle tendine ISTAT, via e
   civico a mano — quattro campi separati sotto un'etichetta sola, con il
   pulsante «Aggiorna i comuni» accanto alla provincia (niente JavaScript). */
fieldset.indirizzo {
  border: 1px solid var(--bordo-lieve); border-radius: 5px;
  padding: .45rem .6rem .5rem; margin: 0 0 .6rem; min-width: 0;
}
fieldset.indirizzo legend { font-size: 11.5px; color: var(--tenue); padding: 0 .3rem; }
.indirizzo-righe {
  display: grid; grid-template-columns: minmax(150px, 1.2fr) auto minmax(150px, 1.6fr);
  gap: .4rem .6rem; align-items: end;
}
.indirizzo-righe .campo { margin: 0; min-width: 0; }
.indirizzo-righe .campo.via { grid-column: 1 / 3; }
.indirizzo-righe .campo.civico { grid-column: 3; }
.indirizzo-righe .aggiorna .bott { white-space: nowrap; }
/* La cittadinanza ha DUE caselle, non tre: la griglia dell'indirizzo lasciava
   la prima stretta (`auto` sulla seconda colonna) e «Altro paese (extra UE)»
   arrivava tagliato. Visto nella pagina resa, non nei dati — FB-19 · A5. */
.cittadinanza-righe { grid-template-columns: minmax(190px, 1fr) minmax(190px, 1.4fr); }
@media (max-width: 720px) {
  .indirizzo-righe { grid-template-columns: 1fr; }
  .indirizzo-righe .campo.via, .indirizzo-righe .campo.civico { grid-column: 1; }
}

/* Un modulo di una riga sola: il campo e il pulsante che lo esegue stanno
   accanto, allineati in basso. Il pulsante sotto, a tutta larghezza,
   peserebbe come il salvataggio di una scheda intera — e cambiare
   tipologia non lo e'. */
.cambio-tipologia {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  margin: .5rem 0 0;
}
.cambio-tipologia .campo { margin: 0; min-width: 220px; }

/* Un modulo non si stira per tutta la larghezza dello schermo: una riga di
   testo lunga 1300 px non si legge, e un campo largo quanto la pagina fa
   sembrare che ci vada dentro molto piu' di quel che ci va. */
.modulo-stretto { max-width: 460px; }

/* Un modulo che sta DENTRO un blocco della scheda: i campi in riga, il
   pulsante in fondo alla riga. In colonna occuperebbe mezza schermata per
   tre campi, e la scheda intera smetterebbe di stare sotto l'occhio — che
   e' la proprieta' per cui il disegno e' stato scelto (805 px). */
/* 🔄 F3 (screenshot 094155) — era `align-items: flex-end`, e con un campo alto
   accanto (la tendina «Accende l'avviso» piu' la fisarmonica «oppure creane
   uno») i campi corti venivano spinti IN FONDO, lasciando vuota la prima riga.
   Sue parole: *«si legge da sinistra a destra e dall'alto verso il basso: non
   puo' stare in basso qualcosa che e' principale»*.
   ✋ Il pulsante resta in basso — e' l'ultimo gesto della riga, non il primo. */
.modulo-in-riga {
  display: flex; gap: .6rem; align-items: flex-start; flex-wrap: wrap;
}
.modulo-in-riga .campo { margin: 0; min-width: 170px; flex: 1 1 170px; }
.modulo-in-riga .bott { flex: none; align-self: flex-end; }
/* E25 — «Filtra» e «Azzera i filtri» sono **una cosa sola** e vanno a capo insieme. Senza questo
   involucro, sulla Knowledge Base (sei campi in riga) il secondo scavallava da solo e finiva al
   bordo sinistro della riga sotto, lontanissimo dal primo: `blocchi.md` §E25 lo vuole «accanto a
   Filtra», e l'ha visto la foto e non una prova (docs/foto/2026-09-02/knowledge-base_*). */
.modulo-in-riga .comandi-filtro { display: flex; gap: .5rem; flex: none; align-items: flex-end; align-self: flex-end; }
/* La ricerca dell'elenco (C5a): stessa riga dei moduli, sotto i filtri rapidi. */
.modulo-in-riga.ricerca { margin-bottom: .9rem; }
.modulo-in-riga.ricerca .campo:first-child { flex: 2 1 320px; }

/* La scheda che contiene una tabella a tutta larghezza: il bordo della carta
   e quello della tabella non devono raddoppiarsi. */
.scheda.a-filo { padding: 0; overflow: hidden; }

/* Un conteggio in una lista di dati e' un VALORE ⇒ cifre tabulari, cosi' una
   colonna di numeri si confronta invece di ballare. */
.num-riga { font-variant-numeric: tabular-nums; }

/* La colonna che dice PERCHE' una riga sta in una coda, e quella che offre le
   mosse. Larghezza fissa: incolonnate si leggono, al vento no. */
.voce .manca, .voce .mosse {
  display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end;
  width: 210px; flex: none;
}
/* 🔴 20 ago 2026 — l'etichetta di una mossa LA SCRIVE IL CLIENTE, e «Completa e
   manda in valutazione AD» non sta in 210 px. `.pill` non manda a capo (ed e'
   giusto: per una fascia di tre lettere andare a capo sarebbe un difetto),
   quindi la pastiglia usciva dalla sua colonna e si sedeva SOPRA il punteggio —
   «ALTO» si leggeva «AL». Cioe' proprio il dato per cui esiste la scrivania.
   Visto fotografando la pagina, non leggendo il foglio.
   ⇒ Qui dentro, e solo qui, l'etichetta va a capo. La riga cresce in altezza,
   che e' l'unica direzione in cui puo' crescere senza mangiarsi una colonna. */
.voce .manca .pill, .voce .mosse .pill {
  white-space: normal; max-width: 100%; text-align: right;
}
/* 19 ago 2026 (FB-19 · P10) — qui c'erano due regole che spegnevano il cursore
   sulle voci non cliccabili: quando l'elenco dei profili fu scritto, la scheda
   del profilo non esisteva ancora. Adesso esiste (C6-C8) e ogni riga porta da
   qualche parte ⇒ le regole se ne vanno con la ragione che le teneva in piedi.
   Una spiegazione rimasta in giro dopo che ha smesso di essere vera e' peggio
   di nessuna spiegazione: la prossima persona la legge e ci crede. */
.modulo-stretto.sotto { margin-top: .7rem; }
.errore-campo { color: var(--alto); font-size: 11.5px; }
.errore-campo ul { margin: .1rem 0 0; padding-left: 1.1rem; }


/* =====================================================================
   MESSAGGI
   ---------------------------------------------------------------------
   Un messaggio e' un MESSAGGIO ⇒ bastone. E ha un ruolo `status` nel
   modello, non solo un colore: chi legge con un lettore di schermo deve
   sapere che e' successo qualcosa.
   ===================================================================== */

.messaggi { margin-bottom: .8rem; display: grid; gap: .3rem; }
.messaggio {
  padding: .4rem .7rem; border-radius: 5px; font-size: 12px;
  border: 1px solid var(--bordo-forte); background: var(--carta);
  border-left-width: 3px;
}
.messaggio.successo { border-left-color: var(--basso); background: var(--sf-basso); }
.messaggio.attenzione { border-left-color: var(--medio); background: var(--sf-medio); }
.messaggio.errore { border-left-color: var(--alto); background: var(--sf-alto); color: var(--alto); }


/* =====================================================================
   ACCESSO — la porta. Volutamente spoglia: da qui non si va da nessuna
   parte se non dentro.
   ===================================================================== */

.porta {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sfondo); padding: 1.5rem;
}
.porta .riquadro { width: 100%; max-width: 340px; }
.porta .marchio-t {
  font-family: var(--titolo); font-size: 24px; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.1;
}
.porta .qualifica {
  display: block; font-family: var(--titolo); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em; color: var(--tenue);
  margin: .3rem 0 1.1rem;
}
/* Il nome della PAGINA, sotto il nome della piattaforma. Piccolo perche' qui
   la gerarchia e' quella: si sta entrando in un posto che ha gia' un nome. */
.porta .titolo-porta { font-size: 15px; font-weight: 500; margin-bottom: .45rem; }
.porta .bott { width: 100%; text-align: center; margin-top: .3rem; }

/* --- il box di completamento dell'anagrafica: workflow, in testa (18 ago) --- */
.passi-percorso.completamento {
  display: grid; grid-template-columns: 260px 1fr; gap: 0 1.2rem;
  align-items: start; margin-bottom: 1.05rem;
  border-left: 3px solid var(--accento);
}
.passi-percorso.completamento .passi { padding-top: .2rem; }
.passi-percorso.completamento .completamento-corpo .nota { margin: 0 0 .3rem; }
.passi-percorso.completamento .comandi { margin-top: .5rem; }
/* O2 — sulla pratica la barra a tappe non c'e' piu' (la timeline sta a destra):
   senza la prima colonna il box e' una colonna sola, non una griglia mezza vuota. */
.passi-percorso.completamento.senza-passi { grid-template-columns: 1fr; }
@media (max-width: 1080px) { .passi-percorso.completamento { grid-template-columns: 1fr; } }

/* --- l'elenco a colonne (18 ago): il nome resta in Garamond --- */
table.elenco-tabella td { vertical-align: middle; }
table.elenco-tabella .nome-in-tabella {
  font-family: var(--titolo); font-size: 15px; font-weight: 500;
  color: var(--testo); text-decoration: none; letter-spacing: -.005em;
}
table.elenco-tabella .nome-in-tabella:hover { color: var(--accento); }
.voce .stato-scheda { width: 80px; }

/* --- il profilo di rischio (C6a, 19 ago): due colonne, il riepilogo a DESTRA che segue lo scroll --- */
.pagina-con-lato {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0 1.1rem;
  align-items: start;
}
.pagina-corpo { min-width: 0; }
.lato-fisso { position: sticky; top: 1rem; }
.riepilogo { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.riepilogo .cella {
  border: 1px solid var(--bordo); border-radius: 6px; padding: .5rem .65rem;
  background: var(--carta);
}
.riepilogo .cella-larga { grid-column: 1 / -1; }
.riepilogo .k { font-size: 11px; color: var(--tenue); }
.riepilogo .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.riepilogo .v small { font-size: 11px; color: var(--tenue); font-weight: 400; }
.riepilogo .attesa { color: var(--medio); font-weight: 600; }

/* --- la timeline dell'iter (O2, F24-B1): la strada PERCORSA, sotto il punteggio ---
   Il nastro verticale e' fatto col bordo sinistro della lista: un pallino per
   passaggio, e la linea che li unisce non e' un elemento in piu' da tenere
   allineato. L'ultima tappa e' quella in corso — piena, come la tappa «ora»
   della barra a tappe di cui questa prende il posto. */
.linea-iter { margin-top: .6rem; }
.linea-iter .linea-capo {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: .35rem;
}
.linea-iter .linea-capo .k { font-size: 11px; color: var(--tenue); }
.linea-iter .linea-capo a { font-size: 11px; }
.linea-iter ol {
  list-style: none; margin: 0; padding: 0 0 0 .9rem;
  border-left: 1.5px solid var(--bordo-forte);
}
.linea-iter .linea-tappa { position: relative; padding-bottom: .5rem; }
.linea-iter .linea-tappa:last-child { padding-bottom: 0; }
.linea-iter .linea-bollo {
  position: absolute; left: calc(-.9rem - 1.5px); top: 4px;
  transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accento); border: 1.5px solid var(--accento);
}
.linea-iter .linea-ora .linea-bollo {
  background: var(--carta); border-width: 3px; width: 11px; height: 11px;
}
.linea-iter .linea-stato {
  display: block; font-size: 12px; line-height: 1.25; color: var(--tenue);
}
.linea-iter .linea-ora .linea-stato { color: var(--testo); font-weight: 600; }
.linea-iter .linea-sotto { display: block; font-size: 10.5px; color: var(--fioco); }

@media (max-width: 1080px) {
  .pagina-con-lato { grid-template-columns: 1fr; }
  .lato-fisso { position: static; }
}

/* --- la cronistoria (O2, F24-B1): una riga PER PASSAGGIO, il commento a capo ---
   La riga del passaggio sta in una griglia a tre (stato · quando · chi); il
   commento esce dalla griglia e prende quasi tutta la larghezza, perche' e'
   li' che ci va il testo lungo. */
.cronistoria { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 1.5px solid var(--bordo-forte); }
.cronistoria .crono-riga { position: relative; padding: 0 0 .9rem; }
.cronistoria .crono-riga:last-child { padding-bottom: 0; }
.cronistoria .crono-bollo {
  position: absolute; left: calc(-1.1rem - 1.5px); top: 5px;
  transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accento); border: 1.5px solid var(--accento);
}
.cronistoria .crono-ora .crono-bollo {
  background: var(--carta); border-width: 3px; width: 12px; height: 12px;
}
.cronistoria .crono-capo {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr);
  gap: 0 .8rem; align-items: baseline;
}
.cronistoria .crono-stato { font-weight: 600; }
.cronistoria .crono-quando { font-size: 12px; color: var(--tenue); }
.cronistoria .crono-chi { font-size: 12.5px; }
.cronistoria .crono-nota { margin: .15rem 0 0; font-size: 11.5px; color: var(--fioco); }
/* 🔄 F3 · voce 25 — il riquadro aveva il bordo di un `input`, e *«l'occhio ci
   prova a cliccare»*. Un commento gia' scritto non e' un campo da compilare:
   si rende come una CITAZIONE — sfondo tenue e barra a sinistra, niente
   cornice. La forma dice cosa si puo' fare prima che il testo lo spieghi. */
.cronistoria .crono-commento {
  margin: .35rem 1.2rem 0 1.2rem; padding: .35rem .7rem;
  background: var(--carta-2); border: 0; border-left: 3px solid var(--bordo-forte);
  border-radius: 0 3px 3px 0;
  font-size: 13px; line-height: 1.5; white-space: normal;
}
@media (max-width: 780px) {
  .cronistoria .crono-capo { grid-template-columns: 1fr; }
  .cronistoria .crono-commento { margin-left: 0; margin-right: 0; }
}

/* --- il questionario dinamico (C6b): riquadri numerati, figlie rientrate, tendine --- */
.dom {
  border: 1px solid var(--bordo); border-radius: 6px; padding: .55rem .7rem;
  margin-bottom: .5rem; background: var(--carta);
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) 260px 5rem; gap: .2rem .8rem;
  align-items: center;
}
.dom .num { color: var(--fioco); font-family: var(--mono); font-size: 11px; }
.dom .testo { font-weight: 600; }
.dom .punti { text-align: right; font-variant-numeric: tabular-nums; color: var(--tenue); font-size: 12px; }
.dom.figlia { margin-left: 2.4rem; border-left: 3px solid var(--accento); background: var(--accento-tenue); }
.dom.figlia .num { color: var(--accento); }
@media (max-width: 900px) { .dom { grid-template-columns: 2rem minmax(0, 1fr); } .dom select { grid-column: 2; } }

/* C7 — la scomposizione dell'esito: la riga di sezione e le domande rientrate. */
.fitta tr.capo-sezione th { text-align: left; background: var(--sfondo-tenue, transparent); }
.fitta td.rientro { padding-left: 1.6em; }
.fitta tr.nascosta td { color: var(--tenue); }

/* C8 + S7 (P3) — le mosse nel box del workflow: pulsanti in fila, larghi quanto
   la loro parola. Erano moduli impilati, uno per riga, con dentro la tendina e
   la casella del motivo; da S7 la raccolta sta nella pagina della mossa e qui
   restano i pulsanti. ⚠️ In colonna, `.bott` (inline-block) diventa un elemento
   flessibile e **si stira per tutta la larghezza**: tre blocchi impilati che non
   somigliano piu' a pulsanti. Trovato guardando la pagina resa, non il foglio. */
.mosse-pagina { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 10px; }


/* --- lo stepper del Supporto alla pesatura (F4 · voce 19) ---------------
   🔴 La classe `attivo` c'era dal giorno in cui il wizard e' nato, e NESSUNA
   regola la disegnava: marcare senza mostrare e' marcare per niente. Il passo
   corrente si legge dal peso e dal colore, e non e' un collegamento — quello
   lo dice il modello, qui si dice solo che si vede. */
.stepper { margin: 0 0 1.1rem; }
.stepper ol {
  display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
  margin: 0; padding: 0 0 0 1.1rem;
  font-size: 13px; color: var(--tenue);
}
.stepper li { padding-left: .2rem; }
.stepper li.attivo { color: var(--testo); font-weight: 600; }
.stepper li.attivo::marker { font-weight: 600; }



/* =====================================================================
   ERDA — REGOLE PROPRIE (mock-up 31 ago 2026)
   ---------------------------------------------------------------------
   Tutto cio' che AML non ha: la striscia di copertura, il giorno come
   fisarmonica, la riga di pubblicazione con il suo stato, il modulo
   «Segnala link» (E63), il nastro del mock-up. Nessun colore scritto qui:
   solo variabili del tema.
   ===================================================================== */

/* Il nastro: questa e' una prova con esecuzioni simulate, e si deve
   leggere su ogni pagina. Titoli e link sono VERI (letti il 31 ago 2026). */
.nastro {
  font-size: 11px; color: var(--tenue); background: var(--carta-2);
  border: 1px dashed var(--bordo-forte); border-radius: 5px;
  padding: .3rem .6rem; margin-bottom: .7rem;
}
.nastro b { color: var(--testo); font-weight: 600; }

/* La STRISCIA di copertura: cinque valori in testa alla pagina. Sono numeri
   ⇒ bastone, cifre tabulari (stesse regole di `.riepilogo`). */
.striscia {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem;
  margin-bottom: 1rem;
}
.striscia .cella {
  border: 1px solid var(--bordo); border-radius: 6px; padding: .5rem .65rem;
  background: var(--carta);
}
.striscia .k { font-size: 11px; color: var(--tenue); }
.striscia .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: .1rem; }
.striscia .v small { font-size: 11px; color: var(--tenue); font-weight: 400; margin-left: .2rem; }
.striscia .cella.attesa .v { color: var(--medio); }
.striscia .cella.allarme .v { color: var(--alto); }
.striscia .cella.mano .v { color: var(--accento); }
.striscia .barretta { margin-top: .35rem; }
@media (max-width: 900px) { .striscia { grid-template-columns: repeat(2, 1fr); } }

/* Il GIORNO e' un blocco apribile (stessa forma dei blocchi AML): a sinistra
   la data in Garamond (e' il nome del giorno), a destra i conteggi. */
details.giorno > summary .tit { min-width: 15rem; }
details.giorno > summary .quando {
  font-family: var(--corpo); font-size: 11px; color: var(--fioco);
}
details.giorno > summary .conta .pill { margin-left: .35rem; vertical-align: middle; }
details.giorno.oggi { border-color: var(--accento-filo); }

/* La riga di PUBBLICAZIONE nella tabella del giorno. Il titolo e' il nome di
   una cosa ⇒ Garamond (come il nome del soggetto nell'elenco AML). */
/* --- E61 (12 set 2026): «Percorso» al posto di «Sezione», via «Provenienza». ---

   La colonna larga e' il titolo, e la larghezza sta QUI e non in un `style=`
   (regola 12). `min-width` e non `width`: il titolo e' l'unica colonna che
   deve poter crescere quando il foglio e' largo, e a 1440 px deve tenere una
   riga da 60 caratteri senza andare a capo (prova della foto, §E61 d).
   Il percorso e' la seconda per larghezza e va a capo dove ha gli spazi —
   niente `anywhere`: «Supervisione e normativa antiriciclaggio» si spezza fra
   le parole, e spezzarlo dentro una parola lo renderebbe illeggibile. Corpo
   piccolo e colore tenue perche' e' il contorno del titolo, non il titolo. */
table.pubblicazioni td.titolo, table.pubblicazioni thead th.titolo { min-width: 26rem; }
table.pubblicazioni td.percorso, table.pubblicazioni thead th.percorso {
  width: 15rem; font-size: 11px; color: var(--tenue); white-space: normal;
}
table.pubblicazioni .titolo {
  font-family: var(--titolo); font-size: 15px; font-weight: 500;
  color: var(--testo); text-decoration: none; letter-spacing: -.005em; line-height: 1.2;
}
table.pubblicazioni .titolo:hover { color: var(--accento); }
table.pubblicazioni .meta { font-size: 11px; color: var(--tenue); margin-top: .12rem; }
table.pubblicazioni .meta .mono { font-size: 10.5px; }
table.pubblicazioni td.azione { width: 7.5rem; text-align: right; white-space: nowrap; }
table.pubblicazioni tr.a-mano td { background: var(--accento-tenue); }
table.pubblicazioni ul.allegati { margin: .15rem 0 0; padding-left: 1rem; font-size: 11px; color: var(--tenue); }
table.pubblicazioni ul.allegati li { margin: 0; }

/* Un giorno senza pubblicazioni non e' un giorno vuoto: e' un'esecuzione
   andata a buon fine con zero novita', e va detto (altrimenti si legge
   come un guasto — stessa ragione della spalla «senza ruolo» in AML). */
.giorno-vuoto { padding: .6rem .7rem; font-size: 12px; color: var(--tenue); }

/* La FONTE MUTA: quando una sezione monitorata sta a zero oltre la sua
   frequenza attesa. Rosso: e' un allarme, non uno stato. */
.pill-muta { color: var(--alto); background: var(--sf-alto); border-color: var(--filo-alto); }

/* La natura della sezione (A elenco · B pagina con versioni · C hub · D registro · E cessata) */
.natura { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

/* Il modulo «Segnala link» in fondo al giorno: una riga, il pulsante in coda.
   Le classi restano quelle di E9 (`.aggiungi`, `.aggiungi-link`): e' cambiato il nome
   a schermo, non la forma del modulo, e una classe rinominata e' un foglio che si
   riscrive per una parola. */
.aggiungi { padding: .55rem .7rem .65rem; border-top: 1px solid var(--bordo-lieve); }
.aggiungi .modulo-in-riga .campo.url { flex: 3 1 320px; }
.aggiungi .aiuto { margin-top: .3rem; }

/* La scheda-fonte nella pagina d'insieme */
.fonte-scheda .capo-fonte { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .45rem; }
.fonte-scheda .capo-fonte h3 { font-size: 19px; font-weight: 600; }
.fonte-scheda .capo-fonte .nota { margin-left: auto; }
.fonte-scheda dl.dati { max-width: none; grid-template-columns: 150px minmax(0, 1fr); }

/* Il registro delle esecuzioni (in coda alla pagina d'insieme) */
table.esecuzioni td.esito-ok { color: var(--basso); }
table.esecuzioni td.esito-ko { color: var(--alto); }

/* Voci di spalla che nel mock-up non portano da nessuna parte: si vedono, spente. */
.lato a.spenta { opacity: .38; cursor: default; }
.lato a.spenta:hover { background: none; opacity: .38; }

/* Larghezze della barretta: classi, non style= in linea (stessa guardia di AML). */
.barretta i.q100 { width: 100%; } .barretta i.q93 { width: 93%; } .barretta i.q87 { width: 87%; }
/* La scala a decine di E10: la quota di file scaricati si arrotonda per difetto, e `q100`
   si accende solo quando non ne manca nessuno. */
.barretta i.q0 { width: 0%; } .barretta i.q10 { width: 10%; } .barretta i.q20 { width: 20%; } .barretta i.q30 { width: 30%; } .barretta i.q40 { width: 40%; } .barretta i.q50 { width: 50%; } .barretta i.q60 { width: 60%; } .barretta i.q70 { width: 70%; } .barretta i.q80 { width: 80%; } .barretta i.q90 { width: 90%; }

/* Un pulsante spento si vede spento (AML non ne aveva). */
.bott:disabled { opacity: .45; cursor: default; }
.bott:disabled:hover { border-color: var(--bordo-forte); }


/* --- Secondo giro (31 ago, sera): tre pagine per fonte, tabella al posto della fisarmonica --- */

/* Le SCHEDE in testa alle pagine di una fonte: Fonte · Monitoraggio · Download storico.
   Sono nomi di luoghi ⇒ Garamond, come le voci della spalla. Visibili su tutte e tre,
   così da qualunque pagina si vede dove si è e dove si può andare. */
.schede { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordo); margin: 0 0 1rem; }
.schede a {
  font-family: var(--titolo); font-size: 15.5px; font-weight: 500; padding: .42rem 1rem;
  text-decoration: none; color: var(--tenue); border: 1px solid transparent; border-bottom: 0;
  border-radius: 6px 6px 0 0; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .45rem;
}
.schede a:hover { color: var(--testo); }
.schede a.attiva { color: var(--testo); background: var(--carta); border-color: var(--bordo); font-weight: 600; }
.schede a .badge {
  font-family: var(--corpo); font-size: 10.5px; font-weight: 600; padding: 0 .32rem; border-radius: 3px;
  background: var(--sf-medio); color: var(--medio); font-variant-numeric: tabular-nums;
}
.schede a .badge.muta { background: var(--sf-alto); color: var(--alto); }

/* La tabella del monitoraggio: una riga per pubblicazione; le due date sono valori ⇒ bastone. */
/* 🔄 E58 — erano 6.8rem, dimensionate sul caso peggiore di «28 ago 2026»: una
   forma che cambiava larghezza da una riga all'altra. Da E58 la data e'
   `gg/mm/aaaa`, dieci caratteri fissi, e la colonna e' larga quanto loro. */
table.pubblicazioni td.quando { width: 6rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.pubblicazioni td.quando small { display: block; color: var(--fioco); font-size: 10.5px; }
table.pubblicazioni thead th.quando { width: 6rem; }
/* Il cambio di giorno di ritrovamento si vede da un filetto più forte: è quel che resta della fisarmonica. */
table.pubblicazioni tr.nuovo-giorno td { border-top: 2px solid var(--bordo-forte); }

/* I filtri stanno in una scheda sopra la tabella: le chips per lo stato, la riga di moduli per il resto. */
.filtri { margin-bottom: .6rem; }
.filtri .chips { margin-bottom: .5rem; }
.filtri .modulo-in-riga .campo { min-width: 150px; flex: 1 1 150px; }
.filtri .modulo-in-riga .campo.cerca { flex: 2 1 280px; }
/* E35 — una casella di data ha una larghezza NATURALE (gg/mm/aaaa piu' l'icona del calendario) e
   non ha niente da farci con lo spazio in piu'. Finche' i filtri erano sei stavano tutti in una
   riga e non si vedeva; con «Categoria» e «Tipologia» la Knowledge Base ne ha otto, la riga va a
   capo, e sulla riga di sotto l'unico `.campo` rimasto — «al» — si prendeva quattrocento pixel per
   dieci caratteri. L'ha visto la foto e non una prova, come per E25
   (docs/foto/2026-09-03/knowledge-base_e35.png).
   Sta QUI e non accanto a `.modulo-in-riga .campo`: la riga sopra ha la stessa specificita' e viene
   dopo nel foglio, quindi vincerebbe lei. Un foglio solo vuol dire anche che l'ordine conta. */
.filtri .modulo-in-riga .campo.data { flex: 0 0 170px; }
/* --- E61 (12 set 2026): le due tendine del percorso vogliono piu' spazio. ---

   La foto di E60 (docs/foto/2026-09-12/bdi_monitoraggio_e60.png) ha trovato
   «Vigilanza sul sistema bancario e finanziario» letto «Vigilanza sul sistema
   b»: a 150 px il valore scelto non si riconosce a colpo d'occhio, e una
   tendina che non dice che cosa e' scelto e' una tendina che mente. Le altre
   restano come stanno: «Pubblicato dal», «al» e la fonte ci entrano.

   ⚠️ Sta QUI, sotto `.filtri`, per la ragione scritta tre righe piu' su, e
   la prima stesura di E61 ci e' cascata: messa accanto a `.modulo-in-riga
   .campo`, con tre classi come `.filtri .modulo-in-riga .campo`, perdeva -
   stessa specificita' e la riga di `.filtri` viene dopo. L'HTML era giusto,
   la regola c'era, e la tendina restava stretta. L'ha visto la FOTO. */
.filtri .modulo-in-riga .campo.percorso { min-width: 300px; flex: 2 1 300px; }
/* E36 aveva una riga qui: con «Target» e «Argomento» i filtri della Knowledge Base erano dieci, la
   riga andava a capo, e sulla riga di sotto «Argomento» era l'unico `.campo` che potesse crescere —
   si prendeva 270 px contro i 110 degli altri. E59 ha tolto le quattro tendine della classificazione
   (Categoria, Tipologia, Target, Argomento): i filtri sono sette, la riga sta di nuovo su una sola, e
   `.campo.tassonomia` non e' piu' in nessun template. La regola se ne va con loro: una riga di foglio
   che non trova piu' niente e' quella che un giorno qualcuno rimette in un template sbagliato. La
   riga qui sopra, `.campo.data`, resta: le due date ci sono ancora. */

/* Il download storico: quattro celle, e la legenda delle nature nella pagina Fonte. */
.striscia.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* I tre numeri dell'archivio importato (E15b): si leggono insieme, sono una riga sola.
   Cifre tabulari come tutti i numeri del prodotto. */
.conti {
  font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--testo); margin: 0 0 .7rem;
}
.legenda { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: 11.5px; color: var(--tenue); margin: .5rem 0 0; }
.legenda .natura { color: var(--testo); margin-right: .25rem; }


/* --- Terzo giro (31 ago, sera): niente conferma. La persona interviene solo sulle eccezioni. --- */

/* «Segnala» sta su ogni riga ma non deve pesare come un comando: piccolo e tenue. */
.bott.lieve { font-size: 11px; padding: .12rem .45rem; color: var(--tenue); border-color: var(--bordo); }
.bott.lieve:hover { color: var(--alto); border-color: var(--alto); }

/* E25 — «Azzera i filtri» quando non c'è niente da azzerare. È un `<a>`, e un `<a>` non può essere
   `:disabled`: si spegne togliendogli l'`href` (così non lo prende nemmeno la tastiera) e si **vede**
   spento con la stessa opacità dei pulsanti spenti, sopra. Anche il passaggio del mouse deve tacere:
   senza questa riga vincerebbe `.bott.lieve:hover` e il comando si accenderebbe sotto il dito. */
.bott.spento { opacity: .45; cursor: default; }
.bott.lieve.spento:hover { color: var(--tenue); border-color: var(--bordo); }

/* Una riga segnalata resta al suo posto (non si cancella niente) ma si spegne.
   Fino a E60 una cella restava accesa — quella della pill «Segnalata», che era
   la notizia. Da E61 quella colonna non c'e' piu' e la notizia e' il commento
   in `.meta` sotto il titolo (§E61 c): sta DENTRO una cella spenta, e
   `opacity` non si annulla dall'interno (crea un contesto di composizione, e
   un figlio non puo' essere piu' opaco del padre). La riga e' spenta tutta,
   che e' quello che §E61 (c) chiede: il commento si legge lo stesso. */
table.pubblicazioni tr.segnalata td { opacity: .55; }


/* --- E62 (12 set 2026): «Pagine in monitoraggio», nella pagina Fonte. ---

   La tabella del censimento (17 righe su Consob) sta in una piega chiusa, e
   la sua prima colonna e' il CAMMINO col nome della sezione in `.meta` sotto.
   Le regole si ripetono invece di estendere `table.pubblicazioni` come dice
   il commento di E17 qui sotto: sono tre tabelle con colonne diverse, e un
   selettore comune legherebbe tre schermate che cambiano per motivi diversi.
   ⚠️ La classe e' `pagine` e il selettore comincia da `table.`: `.pagine` da
   sola e' gia' il paginatore del pie' (`.pie .pagine`), ed e' la lezione 129
   — un nome di dominio puo' essere gia' preso. */
table.pagine td.percorso, table.pagine thead th.percorso {
  width: 20rem; white-space: normal;
}
table.pagine .meta { font-size: 11px; color: var(--tenue); margin-top: .12rem; }
/* «Muta» e' un si' o un `—`: stretta, e la frase intera sta nel `title=`. */
table.pagine td.muta, table.pagine thead th.muta { width: 3.5rem; }
table.pagine td.quando, table.pagine thead th.quando {
  width: 6rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* --- E17 (1 set 2026): la «Knowledge Base», l'archivio guardato per documento. ---

   La tabella e' quella di «Monitoraggio» con un'altra unita': li' una riga e'
   una voce di una fonte, qui una riga e' un file. Le regole si ripetono invece
   di estendere `table.pubblicazioni` con una seconda classe: le due tabelle
   hanno colonne diverse, e un selettore comune legherebbe due schermate che
   possono cambiare per motivi diversi. */
table.documenti td.quando { width: 6rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.documenti thead th.quando { width: 6rem; }
/* E61: le stesse due colonne del Monitoraggio, strette di un passo — qui in
   mezzo c'e' anche la Fonte, perche' la tabella guarda tutte le fonti insieme. */
table.documenti td.percorso, table.documenti thead th.percorso {
  width: 12rem; font-size: 11px; color: var(--tenue); white-space: normal;
}
table.documenti .titolo { color: var(--testo); text-decoration: none; }
table.documenti .titolo:hover { color: var(--accento); }
/* --- E20 (1 set 2026, 16:00): quattro colonne in meno. ---

   Il 1 set le colonne erano undici e si contendevano il foglio: il nome file
   voleva una larghezza minima sua (senza, veniva strizzato a sette caratteri e
   `break-all` lo spezzava in una colonnina verticale, otto righe per riga di
   tabella), il titolo ne voleva un'altra, e ne restava poco per tutti. Adesso
   File, Versione, Tipo e Peso non sono colonne: sono due righe piccole sotto il
   titolo, dentro «Pubblicazione», che si prende la larghezza che quelle
   lasciano. `anywhere` e non `break-all` perche' un nome con i trattini va
   spezzato dove ce li ha. */
/* ⚠️ La classe si chiama `pub` e non `voce`, e non e' un capriccio: `.voce` e'
   gia' un componente di questo foglio (l'elenco a schede) ed e' `display:
   flex`. Chiamando la cella `voce` il titolo e le due righe piccole si
   mettevano **in fila**, una accanto all'altra, invece che una sotto l'altra —
   nessuna prova poteva vederlo (l'HTML era giusto) e si e' visto FOTOGRAFANDO
   la pagina, il 1 set 2026. Il foglio e' uno solo: un nome riusato eredita un
   componente che non c'entra (`LEZIONI.md` n. 53). */
table.documenti td.pub, table.documenti thead th.pub { min-width: 22rem; }
table.documenti .meta { font-size: 11px; color: var(--tenue); margin-top: .12rem; }
table.documenti .meta.mono { font-size: 10.5px; overflow-wrap: anywhere; }
/* La Fonte. Una CLASSE e non un `nth-child`: fino a E60 era la terza colonna,
   da E61 e' la quarta, e un selettore che conta le colonne si rompe in
   silenzio ogni volta che l'ordine cambia — si e' rotto qui. E 8rem e non
   5,4: a 5,4 «Banca d'Italia» andava a capo in «Banca / d'Italia» su OGNI
   riga della tabella, e l'ha visto la foto di E61. */
table.documenti td.fonte, table.documenti thead th.fonte { width: 8rem; }

/* ⚠️ Sette colonne stanno meglio di undici, ma un foglio stretto resta stretto:
   l'ultima colonna e' quella dei comandi, e `.scheda.a-filo` la **tagliava** —
   «Apri» c'era e non si poteva premere. Meglio scorrere che sparire. */
.scheda.a-filo.scorre { overflow-x: auto; }
table.documenti td.azione { width: 8.5rem; text-align: right; white-space: nowrap; }
table.documenti td.azione form { display: inline; }

/* La spunta sta sulla riga dei filtri come gli altri campi, ma la sua etichetta
   sta accanto alla casella e non sopra: e' una domanda si'/no, non un valore. */
.campo.spunta { display: flex; align-items: flex-end; }
.campo.spunta label { display: flex; align-items: center; gap: .35rem; margin: 0; }

/* Le pagine stanno nel pie', a destra del conteggio: sono un modo di leggere lo
   stesso elenco, non un'altra regione della pagina. */
.pie .pagine { float: right; display: inline-flex; align-items: center; gap: .25rem; }
/* E20: la fila dei numeri. La pagina che si guarda non e' un bersaglio — stesso
   posto di un numero premibile, ma senza bordo: si legge «sei qui». I puntini
   sono un segno e non un comando, e non si selezionano. */
.pie .pagine .qui {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--testo);
  padding: .12rem .45rem; font-size: 11px;
}
.pie .pagine .salto { color: var(--fioco); padding: 0 .1rem; user-select: none; }
.pie .pagine .bott.lieve { font-variant-numeric: tabular-nums; }


/* --- E31 (3 set 2026): «Segnala» con un motivo e con un effetto. ---
   Il modulo non e' una finestra sopra la pagina: e' una scheda che si apre sotto
   la tabella, allo stesso posto sia con HTMX sia senza (li' ci si arriva con un
   indirizzo). Senza JavaScript non c'e' niente da chiudere, e con il JavaScript
   la si chiude aprendone un'altra o ricaricando: e' la stessa cosa che fa un
   filtro, e non serve un comando in piu' per disfarla. */
.scheda.segnala { margin-top: .7rem; }
.scheda.segnala .reg-nome { margin: 0 0 .6rem; }

/* I tre motivi sono una scelta sola: una riga per scelta, la casella accanto
   alla parola come nella spunta dei filtri — non sopra, perche' e' un valore in
   un elenco e non un campo con un'etichetta. */
.campo .scelta { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.campo .scelta:last-child { margin-bottom: 0; }

/* E64 - i due generi dell'helpdesk sono UN campo con due valori, non due campi.
   Il gruppo e' un `fieldset` perche' chi legge con la voce deve sentire «Tipo»
   prima delle due scelte, e la sua intestazione prende l'aspetto dell'etichetta
   di ogni altro campo: una seconda forma per la stessa cosa si vedrebbe. Il
   riquadro che il navigatore disegna da se' si toglie - qui un gruppo si legge
   dalla spaziatura, come dappertutto in questo foglio. */
fieldset.campo { border: 0; padding: 0; margin-inline: 0; min-inline-size: 0; }
fieldset.campo > legend {
  padding: 0; font-size: 11.5px; color: var(--tenue); margin-bottom: .18rem;
}

/* E64 - l'elenco dell'helpdesk e' una tabella fitta come «Esecuzioni», ma le sue
   celle portano una riga piccola sotto (chi ha scritto, il titolo della voce, da
   dove veniva): la stessa `.meta` della tabella delle pubblicazioni, che li' e'
   scoped e qui non arriverebbe. Le celle si allineano in alto, se no la riga
   grande e quella piccola ballano. */
table.segnalazioni td { vertical-align: top; }
table.segnalazioni .meta { font-size: 11px; color: var(--tenue); margin-top: .12rem; }
table.segnalazioni .meta.mono { font-size: 10.5px; }
table.segnalazioni details.piega { margin-top: .3rem; }

/* «Ritira la segnalazione» e' piu' lungo di «Segnala», e va a capo invece di
   spingere fuori la colonna del titolo: la larghezza della colonna dei comandi
   e' un fatto della tabella, non del comando piu' lungo che ci capita dentro. */
table.pubblicazioni td.azione { white-space: normal; }
/* La riga segnalata e' spenta, ma il suo comando no: e' l'unica cosa che ci si
   puo' ancora fare, e un comando al 55 % sembrerebbe disabilitato. */
table.pubblicazioni tr.segnalata td.azione { opacity: 1; }


/* --- E30 · le barre del cruscotto ---------------------------------------------------------------
   Due `<rect>` per sezione (pubblicazioni, file) rese dal template: niente librerie, e niente
   `fill=` sulla riga — sarebbe `style=` con un altro nome (regola 12). La larghezza la scrive il
   template in percentuale, il colore lo prende da qui: accento per le pubblicazioni, verde per i
   file, che sono due serie e non due stati. I tre semantici restano dove significano qualcosa
   (`.allarme` sulle celle che contano ciò che manca). */
.barra { display: block; width: 100%; margin-top: .22rem; overflow: visible; }
.barra rect.pub  { fill: var(--accento); }
.barra rect.file { fill: var(--basso); }
td.con-barra { vertical-align: top; }


/* --- E68 · la barra dell'avanzamento -------------------------------------------------------------
   Un `<progress>` e non due `<div>` annidati: la larghezza la calcola il navigatore
   da `value` e `max`, e quella e' esattamente la riga che altrimenti finirebbe in
   uno `style=` nel template (regola 12). Il prezzo e' che si stila due volte -
   Chrome e Safari usano gli pseudo-elementi `-webkit-`, Firefox `::-moz-`, e
   l'`appearance: none` serve a togliere il rilievo di sistema prima di poterlo fare.
   Le due righe `-webkit-` sono la vasca e il liquido, in quest'ordine: senza la
   prima il fondo resta grigio-sistema e la barra si legge al contrario.
   Sta nella striscia, in riga coi numeri: alta come una `.nota` e larga poco piu' di
   una parola - se occupasse la riga direbbe di essere il contenuto, e il contenuto
   sono i numeri accanto. */
progress.avanza {
  appearance: none; -webkit-appearance: none;
  inline-size: 7rem; block-size: .38rem; vertical-align: middle;
  margin-inline-start: .15rem;
  border: 0; border-radius: 999px; background: var(--bordo-lieve); color: var(--accento);
}
progress.avanza::-webkit-progress-bar { background: var(--bordo-lieve); border-radius: 999px; }
progress.avanza::-webkit-progress-value { background: var(--accento); border-radius: 999px; }
progress.avanza::-moz-progress-bar { background: var(--accento); border-radius: 999px; }