/* Il vestito delle pagine pubbliche.
   Stessa lingua visiva della vetrina: gli stessi colori, gli stessi caratteri,
   righe sottili al posto delle cornici. Sta in un punto solo e si cambia qui.
   I caratteri li serviamo noi da /caratteri: nessuna richiesta a terzi, che per
   un prodotto che dichiara «archivio nell'Unione Europea» non e un dettaglio. */

@font-face{font-family:"Archivo";src:url("/caratteri/Archivo_400Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url("/caratteri/Archivo_700Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/caratteri/IBMPlexMono-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/caratteri/IBMPlexMono-Medium.woff") format("woff");font-weight:500;font-display:swap}

:root{
  --paper:#EDEFEB; --sheet:#F8F9F6; --ink:#171B1E; --ink-2:#4E575E; --ink-3:#7A838A;
  --rule:#D3D7D0; --mark:#F0CF45; --mark-ink:#3A3000; --flag:#B42F24; --ok:#2F6B45;
  --btn:#171B1E; --btn-ink:#F4F5F2; --faint:#C3C8C1; --warn:#C2712A;
  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-tema="chiaro"]){
  color-scheme:dark;
  --paper:#15181A; --sheet:#1D2124; --ink:#E9ECE7; --ink-2:#A8B0B5; --ink-3:#7F888E;
  --rule:#2E3438; --mark:#E2C048; --mark-ink:#2A2300; --flag:#E4675B; --ok:#6DBB88;
  --btn:#E9ECE7; --btn-ink:#15181A; --faint:#3A4145; --warn:#E0955A;
}}
:root[data-tema="scuro"]{
  color-scheme:dark;
  --paper:#15181A; --sheet:#1D2124; --ink:#E9ECE7; --ink-2:#A8B0B5; --ink-3:#7F888E;
  --rule:#2E3438; --mark:#E2C048; --mark-ink:#2A2300; --flag:#E4675B; --ok:#6DBB88;
  --btn:#E9ECE7; --btn-ink:#15181A; --faint:#3A4145; --warn:#E0955A;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.mono{font-family:var(--m);font-size:.9em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

/* La misura si adatta alla finestra invece di stare ferma su un numero.
   Il testo lungo resta comunque dentro una misura leggibile (--misura piu
   sotto): una riga di novanta parole non la legge nessuno, per larga che sia
   la pagina. Le pagine con le tabelle chiedono .largo e prendono piu spazio. */
/* La colonna cresce con la finestra ma non arriva ai bordi: su uno schermo da
   2560 il testo attaccato al vetro non si legge, e una tabella tirata da parte
   a parte si sfilaccia. Le pagine con le tabelle (.largo) prendono di piu. */
/* 24 settembre, dopo le voci 047 e 049: nessun tetto fisso. La colonna prende
   tutta la finestra meno un margine che cresce con lei, e sugli schermi grandi
   **cresce tutto in proporzione** (zoom, qui sotto): caratteri, moduli,
   tabelle, misure del testo. Un tetto in pixel lascia su un 2560 una colonna
   in mezzo al vuoto; togliere il tetto senza ingrandire lascia righe da
   novanta parole. Ingrandire tiene insieme le due cose. */
.wrap{width:100%;max-width:none;margin:0 auto;padding:0 clamp(16px,5vw,112px)}
.wrap.largo{max-width:none}
@media (min-width:1800px){html{zoom:1.15}}
@media (min-width:2200px){html{zoom:1.3}}
@media (min-width:2800px){html{zoom:1.5}}

/* La barra degli strumenti e la stessa su tutte le pagine: sta in
   _testa.html, la scrivono tutte allo stesso modo, e resta in alto mentre si
   scorre. Quello che cambia e solo l ultima voce: «Entra» per chi non e
   entrato, la pastiglia con il nome per chi c e. */
header.testa{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(8px)}
.testa .wrap{display:flex;align-items:center;gap:clamp(10px,2vw,22px);
  min-height:64px;max-width:none}
.marchio{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;
  text-decoration:none;letter-spacing:.01em}
.marchio svg{width:24px;height:24px}
.testa nav{margin-left:auto;display:flex;align-items:center;
  gap:clamp(10px,1.6vw,20px);font-size:15px;color:var(--ink-2)}
.testa nav>a{text-decoration:none;white-space:nowrap}
@media (max-width:620px){
  .testa .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .marchio{font-size:17px}
  .testa nav{width:100%;margin-left:0;justify-content:space-between;font-size:14px}
}
.testa nav a:hover,.testa nav a[aria-current]{color:var(--ink)}

main{padding:clamp(30px,5vw,56px) 0 80px}
h1{font-size:clamp(30px,5vw,44px);line-height:1.05;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
h2{font-size:21px;margin:40px 0 10px}
p{margin:0 0 16px;max-width:68ch}
h1{max-width:22ch}
h2,.guida,.minuta{max-width:68ch}
.guida{color:var(--ink-2);font-size:18px}
.minuta{font-size:14.5px;color:var(--ink-2)}

form{margin:28px 0 0;display:grid;gap:18px;max-width:min(560px,100%)}
label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
input,select,textarea{width:100%;font:15px/1.4 var(--f);padding:13px 13px;border-radius:6px;
  border:1.5px solid var(--ink-3);background:var(--sheet);color:var(--ink)}
input.mono{font-family:var(--m);font-size:14px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
.aiuto{font-size:13.5px;color:var(--ink-2);margin-top:6px}
button{appearance:none;border:0;cursor:pointer;font:700 15px/1 var(--f);
  padding:14px 22px;border-radius:6px;background:var(--btn);color:var(--btn-ink);justify-self:start}
button:active{transform:scale(.98)}

.esito{border-left:4px solid var(--ink-3);background:var(--sheet);
  border-radius:0 8px 8px 0;padding:18px 20px;margin:28px 0 0;max-width:min(680px,100%)}
.esito b{display:block;font-size:18px;margin-bottom:4px}
.esito.si{border-left-color:var(--ok)}
.esito.no{border-left-color:var(--flag)}
.esito.forse{border-left-color:var(--mark)}
.esito span{color:var(--ink-2);font-size:15px}

.riquadro{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;
  padding:20px 22px;margin:28px 0}
.righe{border-top:1px solid var(--rule);margin-top:28px}
.righe div{border-bottom:1px solid var(--rule);padding:14px 0}
.righe b{display:block;font-weight:700;margin-bottom:2px}
.righe span{color:var(--ink-2);font-size:15px}

footer{border-top:1px solid var(--rule);padding:26px 0 40px;color:var(--ink-3);font-size:13.5px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- la pastiglia di chi e entrato ---------------------------------------
   E un <details>: si apre e si chiude da sola, anche senza JavaScript. Il
   copione che sta in /pagine/interfaccia.js aggiunge solo le comodita, la
   chiusura con Esc e con un clic fuori. */

.pastiglia{position:relative;margin-left:2px}
.pastiglia>summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;padding:5px 10px 5px 5px;border:1px solid var(--rule);
  border-radius:999px;background:var(--sheet);color:var(--ink);font-size:14.5px;
  font-weight:700;user-select:none}
.pastiglia>summary::-webkit-details-marker{display:none}
.pastiglia>summary:hover{border-color:var(--ink-3)}
.pastiglia[open]>summary{border-color:var(--ink)}
.iniziali{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;
  background:var(--mark);color:var(--mark-ink);font-size:12px;font-weight:700;
  letter-spacing:.02em;flex:none}
.pastiglia .freccia{width:11px;height:11px;opacity:.6;flex:none}
/* Anche senza questo foglio la freccia resta piccola: ha width e height nel
   tag. Un SVG senza misure diventa 300 per 150 e mangia la barra. */
.pastiglia[open] .freccia{transform:rotate(180deg)}
@media (max-width:600px){.pastiglia .chi{display:none}}

.menu{position:absolute;right:0;top:calc(100% + 9px);z-index:40;min-width:246px;
  background:var(--sheet);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.14);padding:6px;font-weight:400}
.menu-capo{padding:10px 12px 12px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.menu-capo b{display:block;font-size:15px;color:var(--ink);line-height:1.3}
.menu-capo span{display:block;font-size:13px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis}
.menu a{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:7px;
  text-decoration:none;color:var(--ink);font-size:14.5px}
.menu a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.menu a .pallino{margin-left:auto;background:var(--mark);color:var(--mark-ink);
  font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 7px}
.menu hr{border:0;border-top:1px solid var(--rule);margin:6px 0}
.menu .esci{color:var(--flag)}

/* --- la password con lo occhio ------------------------------------------- */

.campo-password{position:relative;display:block}
.campo-password input{padding-right:48px}
.occhio{position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;padding:0;border-radius:6px;
  background:transparent;color:var(--ink-2);cursor:pointer;border:0}
.occhio:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.occhio svg{width:19px;height:19px}
.occhio .chiuso{display:none}
.occhio[aria-pressed="true"] .aperto{display:none}
.occhio[aria-pressed="true"] .chiuso{display:block}
/* Senza JavaScript il pulsante non serve a niente: si mostra solo quando c e. */
.occhio{display:none}
.con-copione .occhio{display:grid}

/* --- pagine di servizio: schede, tabelle, riquadri ------------------------ */

/* Su una pagina larga il modulo non si stira per tutto lo schermo: un campo di
   testo lungo due metri non si legge e non si compila. */
.largo form{max-width:min(880px,100%)}
/* Tranne quelli che sono una tabella: li la misura giusta e quella della
   tabella, e stringerli taglierebbe l ultima colonna. */
.largo form.pieno{max-width:100%}
.largo .griglia-due{align-items:start}

.schede{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin:26px 0 30px;
  flex-wrap:wrap}
.schede a{padding:10px 14px;text-decoration:none;color:var(--ink-2);font-size:14.5px;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.schede a[aria-current]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}

/* Su uno schermo stretto la tabella scorre dentro la sua cornice invece di
   allargare tutta la pagina. */
.tabella{overflow-x:auto;margin:22px 0;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px;
  min-width:520px}
.tabella table{margin:0}
th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);border-bottom:1px solid var(--rule);padding:0 28px 8px 0;font-weight:700}
td{padding:12px 28px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
td a{color:var(--ink)}
td form{margin:0}

/* Le colonne si comportano invece di allargarsi a caso.
   .quando e le colonne corte non vanno a capo; il testo lungo ha una misura,
   se no su uno schermo largo diventa una riga sola da novanta parole; il
   pulsante sta a destra, ma solo lui: un numero allineato a destra in fondo a
   una tabella si legge come se appartenesse a unaltra colonna. */
th.quando,td.quando,th.corta,td.corta{white-space:nowrap}
td.lunga{max-width:52ch}
td.azione,th.azione{text-align:right;white-space:nowrap;width:1%}
td.vuota{color:var(--ink-2);text-align:left}
/* Il nome del programma che ha aperto la sessione puo essere lunghissimo:
   si taglia invece di allargare la riga. */
td.stretta{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stato{display:inline-block;font-size:12.5px;font-weight:700;border-radius:999px;
  padding:2px 9px;border:1px solid var(--rule)}
.stato.inviata{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.stato.fallita{color:var(--flag);border-color:color-mix(in srgb,var(--flag) 45%,transparent)}
.stato.in_coda,.stato.non_configurato{color:var(--ink-2)}

.codice{font-family:var(--m);font-size:13px;line-height:1.5;background:var(--sheet);
  border:1px solid var(--rule);border-radius:8px;padding:14px 16px;overflow:auto;
  white-space:pre-wrap;word-break:break-word;margin:0 0 16px}
textarea.codice{width:100%;min-height:300px;white-space:pre;resize:vertical}
.griglia-due{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media (max-width:820px){.griglia-due{grid-template-columns:1fr}}

.anteprima{width:100%;height:560px;border:1px solid var(--rule);border-radius:8px;
  background:#fff}
.gettoni{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.gettoni code{font-family:var(--m);font-size:12.5px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:5px;padding:2px 7px;cursor:default}

.qr{background:#fff;padding:14px;border-radius:10px;border:1px solid var(--rule);
  width:214px;height:214px;display:grid;place-items:center}
.qr svg{width:100%;height:100%;display:block}
.recupero{font-family:var(--m);font-size:15px;line-height:2;letter-spacing:.04em;
  columns:2;column-gap:28px;background:var(--sheet);border:1px solid var(--rule);
  border-radius:8px;padding:16px 20px;margin:0 0 18px}
@media (max-width:560px){.recupero{columns:1}}

.riga-azione{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.riga-azione form{margin:0;display:inline}
button.minore{font-size:13.5px;padding:9px 14px;background:transparent;color:var(--ink);
  border:1.5px solid var(--ink-3)}
button.minore:hover{border-color:var(--ink)}
button.pericolo{color:var(--flag);border-color:color-mix(in srgb,var(--flag) 45%,transparent)}

/* --- la lista lavori ------------------------------------------------------ */

.riepilogo{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 8px}
.riepilogo div{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;
  padding:14px 18px;min-width:150px}
.riepilogo b{display:block;font-size:26px;line-height:1.1}
.riepilogo span{font-size:13.5px;color:var(--ink-2)}
.riepilogo div.tocca{border-color:var(--mark);background:color-mix(in srgb,var(--mark) 12%,var(--sheet))}

.gruppo{margin:38px 0 0}
.gruppo>h2{margin:0 0 4px}
.gruppo>.minuta{margin:0 0 18px}

.voce{border:1px solid var(--rule);border-radius:10px;background:var(--sheet);
  padding:18px 20px;margin:0 0 14px}
.voce.ferma{border-left:4px solid var(--flag)}
.voce>.capo{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.voce>.capo b{font-size:17px}
.voce .num{font-family:var(--m);font-size:12.5px;color:var(--ink-3)}
.segno{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;
  border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap}
.segno.ferma{color:var(--flag);border-color:color-mix(in srgb,var(--flag) 45%,transparent)}
.segno.alta{color:var(--mark-ink);background:var(--mark);border-color:transparent}
.voce details{margin:12px 0 0}
.voce details>summary{cursor:pointer;font-size:14px;color:var(--ink-2)}
.voce details .corpo{font-size:14.5px;color:var(--ink-2);white-space:pre-wrap;
  margin:10px 0 0;padding:0 0 0 14px;border-left:2px solid var(--rule);max-width:80ch}

.filo{margin:14px 0 0;border-top:1px solid var(--rule);padding:12px 0 0}
.filo .nota{margin:0 0 10px;font-size:14.5px}
.filo .nota b{color:var(--ink);font-size:13.5px}
.filo .nota span{color:var(--ink-3);font-size:12.5px;margin-left:6px}
.filo .nota p{margin:2px 0 0;color:var(--ink-2);white-space:pre-wrap;max-width:80ch}
.voce details.rispondi{margin:12px 0 0}
.voce details.rispondi>summary{font-weight:600;color:var(--ink)}
.voce details.rispondi textarea{min-height:76px}
.voce form{margin:12px 0 0;max-width:100%}
/* Un modulo di una riga sola: etichetta, campo e pulsante di fianco. Su uno
   schermo stretto va a capo invece di stringere il campo. */
form.riga{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0}
form.riga label{font-weight:400;margin:0}
form.riga select,form.riga input{width:auto;padding:8px 10px;font-size:13.5px;margin:0}
form.riga button{padding:9px 14px;font-size:13.5px;margin:0}
.voce textarea{min-height:70px}
.archivio .voce{padding:12px 16px;opacity:.75}

/* --- la matrice dei permessi ----------------------------------------------
   La prima colonna e una intestazione di riga, ma e anche il nome della pagina
   e la sua spiegazione: il maiuscoletto delle intestazioni qui va tolto, se no
   una frase intera arriva urlata. Le colonne dei ruoli prendono quello che
   resta in parti uguali, cosi l ultima non finisce fuori dal bordo. */

.matrice{table-layout:fixed;min-width:940px}
.matrice th[scope=row]{text-align:left;font-weight:400;vertical-align:top;
  width:30%;text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--ink-2);
  padding-right:24px}
.matrice th[scope=row] b{font-weight:700;color:var(--ink);font-size:15px}
.matrice th[scope=row] .mono{font-size:12.5px;color:var(--ink-3)}
.matrice th.ruolo{font-size:12px;white-space:normal;vertical-align:bottom;
  padding-right:12px}
.matrice td.cella{vertical-align:top;white-space:nowrap;padding-right:12px}
.matrice td.cella label{display:flex;gap:6px;align-items:center;font-weight:400;
  font-size:13.5px;color:var(--ink-2);margin:0 0 4px;cursor:pointer}
.matrice td.cella input{width:auto;margin:0}
.matrice td.cella input:disabled+span{color:var(--ink-3)}
.matrice td.cella label:has(input:disabled){cursor:default}

/* --- gli utenti ----------------------------------------------------------- */

/* Il filtro e una riga, non un modulo: sta in cima all elenco e si usa di
   sfuggita. Su uno schermo stretto va a capo invece di stringersi. */
.cerca{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:22px 0 0}
.cerca>div{flex:1 1 180px;margin:0}
.cerca>div:first-child{flex:2 1 260px}
.cerca button{flex:0 0 auto;margin:0}
.cerca label{font-size:13px}

/* --- il registro ---------------------------------------------------------- */

/* Le coppie chiave-valore del dettaglio: si leggono di sfuggita, quindi stanno
   sulla riga e non una sotto l altra. */
.coppia{white-space:nowrap;margin-right:10px}
.coppia b{font-weight:700;color:var(--ink-2)}
.minuta .mono{font-size:12.5px}

/* Una impronta e 64 caratteri senza spazi: dentro un riquadro stretto
   allargherebbe tutta la pagina. Va a capo dove capita, che per un numero
   esadecimale non e un problema di lettura. */
.esito .mono,.righe .mono{overflow-wrap:anywhere;word-break:break-all}

/* Piu pulsanti piccoli in fondo a una riga di tabella: stanno in fila e vanno
   a capo insieme, invece di allargare la colonna. */
.azioni{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.azioni form{margin:0}

/* --- la striscia di «entra come» ------------------------------------------ */

/* Rossa e in cima a ogni pagina, non solo a quelle di amministrazione: il
   momento in cui e piu facile scordarsi di essere nei panni di un altro e
   quando si sta guardando una pagina qualunque. */
.panni{background:var(--flag);color:#fff;font-size:14px;position:relative;z-index:30}
.panni .wrap{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  padding-top:10px;padding-bottom:10px}
.panni b{font-weight:700}
.panni span{opacity:.92;font-size:13.5px}
.panni form{margin:0 0 0 auto;max-width:none}
.panni button{background:#fff;color:var(--flag);padding:7px 14px;font-size:13.5px;margin:0;
  border:0;font-weight:700}
@media (max-width:640px){.panni form{margin-left:0}}

/* Una pagina con una cosa sola da dire — «accesso creato», «indirizzo
   confermato» — la dice al centro, non in fondo a un modulo che non serve
   piu (Simone, 24 settembre). */
main.centro{display:grid;place-items:center;min-height:calc(100vh - 64px - 120px);padding:40px 0}
main.centro .tessera{max-width:62ch;margin:0 auto;text-align:center;border:1px solid var(--rule);
  border-radius:14px;background:var(--sheet);padding:clamp(28px,5vw,56px) clamp(20px,5vw,48px)}
main.centro .tessera h1{margin:0 0 14px}
main.centro .tessera p{margin-left:auto;margin-right:auto}
main.centro .bottone{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:700;padding:13px 26px;border-radius:9px;margin:8px 0 18px}

/* La cassa in stablecoin: rete e moneta si scelgono, poi una cosa sola —
   importo, indirizzo, QR. */
.scelta-cassa{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:18px 0 0;max-width:100%}
.scelta-cassa>div{min-width:160px;flex:1 1 160px;max-width:260px}
.con-copione .senza-copione{display:none}
.cassa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:start;
  margin:22px 0 6px;padding:22px;border:1px solid var(--rule);border-radius:12px;background:var(--sheet);max-width:min(760px,100%)}
.cassa .qr{width:180px;height:180px;padding:8px;margin:0}
.cassa .qr svg{width:100%;height:100%;display:block}
.cassa-dati{display:grid;gap:12px;min-width:0}
.cassa-dati .importo{font-size:26px;font-weight:700;line-height:1.2}
.cassa-dati .importo .mono{font-size:1em}
.cassa-dati .importo small{display:block;font-size:14px;font-weight:400;color:var(--ink-2);margin-top:4px}
.cassa-dati b{display:block;font-size:13px;color:var(--ink-2);margin-bottom:3px}
.indirizzo-cassa{font-size:15px;word-break:break-all;user-select:all}
@media (max-width:620px){.cassa{grid-template-columns:1fr;justify-items:center;text-align:center}.cassa-dati b{text-align:center}}

/* La tabella degli ordini: il rimborso sta chiuso in un <details>, se no ogni
   riga e alta quanto un modulo. */
.tabella details{margin:4px 0 0}
.tabella details>summary{cursor:pointer;list-style:none;display:inline-block;font-size:13px;
  padding:5px 10px;border:1px solid var(--rule);border-radius:7px;background:var(--sheet)}
.tabella details>summary::-webkit-details-marker{display:none}
.tabella details form{display:grid;gap:6px;margin:8px 0 0;min-width:220px}
.tabella details form input{font-size:13.5px;padding:7px 9px}
.tabella td.azione form{margin:0}
.tabella td.azione{min-width:130px}

/* --- la pagina dell analisi (28 settembre, voce 085) ----------------------
   Lo stesso impianto del prototipo di Antonio (comune.css): barra del rischio,
   cifre grandi, rilievi, grafo. Tutto sotto .analisi, per non toccare le altre
   pagine. */
.analisi .muted{color:var(--ink-3)}
.analisi .small{font-size:14px}
.analisi .rosso{color:var(--flag)}
.analisi .evid{background:linear-gradient(transparent 55%,color-mix(in srgb,var(--mark) 70%,transparent) 55%)}
.analisi .sezione{margin-top:46px}
.analisi .sezione > h2{margin-bottom:6px}
.analisi .sezione > p.muted{margin-bottom:14px;max-width:72ch}
.analisi h3.sotto{font-size:17px;margin:26px 0 4px}
.analisi .foglio{background:var(--sheet);border:1px solid var(--rule);border-radius:10px;padding:8px 22px}
.analisi .foglio.identita{padding:16px 22px;margin-top:12px}
.analisi .foglio.identita h3{font-size:18px;margin:0 0 6px}
.analisi .tabella table{min-width:640px}
.analisi td.num,.analisi th.num{text-align:right}
.analisi td{padding:10px 18px 10px 0}
.analisi th{padding:0 18px 8px 0}
.analisi .elenco{margin:6px 0 14px;padding-left:18px;color:var(--ink-2);font-size:14.5px}
.analisi .elenco li{margin:4px 0}
.analisi .codice-verifica{font-size:20px;font-weight:500}

.analisi-testa{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin:26px 0 8px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.analisi-testa .indirizzo-grande{font-size:17px;margin:2px 0 6px;display:inline-block}
.analisi-testa .azioni{display:flex;gap:10px;flex-wrap:wrap}
.analisi .btn{display:inline-flex;align-items:center;font:700 15px/1 var(--f);padding:13px 18px;
  border-radius:6px;background:var(--btn);color:var(--btn-ink);text-decoration:none;white-space:nowrap}
.analisi .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.analisi .btn:active{transform:scale(.97)}

.analisi .tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2);white-space:nowrap;vertical-align:middle}
.analisi .tag.fatto{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.analisi .tag.inferenza,.analisi .tag.medio{background:color-mix(in srgb,var(--mark) 40%,transparent);color:var(--ink)}
.analisi .tag.critico{background:color-mix(in srgb,var(--flag) 16%,transparent);color:var(--flag)}
.analisi .tag.alto{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.analisi .tag.basso,.analisi .tag.minimo{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.analisi .cifre .tag{font-size:20px;padding:4px 10px}

.analisi .cifre{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:18px 0 12px}
@media (max-width:760px){.analisi .cifre{grid-template-columns:repeat(2,minmax(0,1fr))}}
.analisi .cifre b{display:block;font-size:30px;line-height:1.15}
.analisi .cifre span{font-size:13px;color:var(--ink-3)}

.analisi .misura-wrap{position:relative;padding-top:30px;margin:18px 0 14px}
.analisi .misura{position:relative;height:12px;border-radius:3px;display:flex}
.analisi .misura i{display:block;height:100%}
.analisi .misura .tacca{position:absolute;top:-6px;width:5px;height:24px;background:var(--ink);
  border-radius:2px;transform:translateX(-2.5px);box-shadow:0 0 0 2px var(--paper)}
.analisi .misura-wrap .valore{position:absolute;top:0;transform:translateX(-50%);font-weight:700;font-size:20px;line-height:1}
.analisi .misura-wrap .soglie{position:relative;height:16px;font-size:11px;color:var(--ink-3);margin-top:6px}
.analisi .misura-wrap .soglie span{position:absolute;top:0;padding-left:4px;border-left:1px solid var(--rule);white-space:nowrap}

.analisi .rilievo{padding:14px 0;border-bottom:1px solid var(--rule)}
.analisi .rilievo:last-child{border-bottom:0}
.analisi .rilievo .testa{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.analisi .rilievo .regola{font-family:var(--m);font-weight:500}
.analisi .rilievo .regola.rosso{color:var(--flag)}
.analisi .rilievo .numeri{font-family:var(--m);font-size:12.5px;color:var(--ink-3);margin:4px 0 6px}
.analisi .rilievo p{font-size:14.5px;margin:4px 0 0;max-width:80ch}
.analisi .rilievo .non-conta{font-size:13px;color:var(--ink-3)}

.analisi .scorri{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 4px}
.analisi .grafo{width:100%;height:auto;display:block}

/* Il profilo dell indirizzo, il saldo nel tempo e il tempo dell analisi
   (19 ottobre, voce 101). */
.analisi .saldo{width:100%;height:auto;display:block}
.analisi table.profilo{min-width:0}
.analisi table.profilo th{text-align:left;vertical-align:top;font-weight:700;white-space:nowrap;padding:10px 18px 10px 0;color:var(--ink-2)}
.analisi table.profilo td{max-width:72ch}
.analisi table.profilo td.rosso b{color:var(--flag)}
.analisi table.profilo td{overflow-wrap:anywhere}
/* Sul telefono l etichetta sopra e il valore sotto: due colonne strette
   tagliavano gli indirizzi. */
@media (max-width:640px){
  .analisi table.profilo,.analisi table.profilo tbody,.analisi table.profilo tr,
  .analisi table.profilo th,.analisi table.profilo td{display:block;width:auto}
  .analisi table.profilo th{white-space:normal;padding:12px 0 2px}
  .analisi table.profilo td{padding:0 0 12px}
}

/* Il rapporto approfondito sulla pagina (voce 107): la struttura del PDF r10. */
.analisi .tag.indizio{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.analisi .tag.ipotesi{background:color-mix(in srgb,var(--ink-2) 14%,transparent);color:var(--ink-2)}
.analisi .tag.non_dimostrato{background:transparent;color:var(--ink-3);border:1px solid var(--rule)}
.analisi .punteggi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 18px}
@media (max-width:760px){.analisi .punteggi{grid-template-columns:1fr}}
.analisi .punteggio{border:1px solid var(--rule);border-left:4px solid var(--ink-3);border-radius:6px;padding:12px 14px;background:var(--sheet)}
.analisi .punteggio.minimo,.analisi .punteggio.basso{border-left-color:var(--ok)}
.analisi .punteggio.medio{border-left-color:var(--mark)}
.analisi .punteggio.alto{border-left-color:var(--warn)}
.analisi .punteggio.critico{border-left-color:var(--flag)}
.analisi .punteggio .etichetta{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.analisi .punteggio b{display:block;font-size:36px;line-height:1.15;margin-top:4px}
.analisi .punteggio b small{font-size:15px;margin-left:6px;color:var(--ink-2)}
.analisi .punteggio .nota{display:block;font-size:13px;color:var(--ink-2);margin-top:4px}
.analisi .cosa-fare{margin:16px 0}
.analisi .indice ol{columns:2;column-gap:28px;padding-left:22px;margin:14px 0 0}
.analisi .indice li.allegato{list-style:none;margin-left:-22px}
@media (max-width:640px){.analisi .indice ol{columns:1}}
.analisi .barre{display:grid;gap:8px;margin:10px 0 16px}
.analisi .barra{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) 4.5em;gap:12px;align-items:center}
.analisi .barra .chi{overflow-wrap:anywhere;font-size:14px}
.analisi .barra .riga{height:12px;background:color-mix(in srgb,var(--rule) 60%,transparent);border-radius:3px;overflow:hidden}
.analisi .barra .riga i{display:block;height:100%;background:var(--ink)}
.analisi .barra.grandi .riga i{background:var(--ink-2)}
.analisi .barra.altri .riga i{background:var(--faint)}
.analisi .barra b{text-align:right}
@media (max-width:640px){.analisi .barra{grid-template-columns:1fr 4.5em}.analisi .barra .chi{grid-column:1 / -1}}
.analisi .orari-due{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:20px;align-items:end}
@media (max-width:760px){.analisi .orari-due{grid-template-columns:1fr}}
.analisi svg.orari{width:100%;height:auto;display:block}
.analisi .orari-due .scorri svg.orari{min-width:520px}
.analisi table.richieste .hash{margin-bottom:6px}
.analisi table.richieste .hash .mono,.analisi table.conclusioni td{overflow-wrap:anywhere}
.analisi tr:target{background:color-mix(in srgb,var(--mark) 22%,transparent)}
.analisi section[id^="sez-"],.analisi #allegato{scroll-margin-top:20px}
.analisi table.domande td:last-child{white-space:nowrap}
/* Sul telefono ogni domanda e un blocco: domanda, risposta, poi stato e rimando sulla stessa riga. */
@media (max-width:640px){
  .analisi table.domande,.analisi table.domande tbody,.analisi table.domande tr{display:block;width:auto;min-width:0}
  .analisi table.domande thead{display:none}
  .analisi table.domande tr{padding:10px 0;border-bottom:1px solid var(--rule)}
  .analisi table.domande th,.analisi table.domande td{display:block;border:0;padding:2px 0}
  .analisi table.domande td:nth-child(3),.analisi table.domande td:nth-child(4){display:inline-block;margin-right:12px}
}
/* Sul telefono gli indirizzi e le impronte vanno a capo invece di allargare la pagina. */
.analisi .indirizzo-grande,.analisi p .mono{overflow-wrap:anywhere;word-break:break-all}
.analisi-testa .azioni{justify-content:flex-end;margin-left:auto}
/* Emissione, codice e durata della perizia in un riquadro a celle (19 ottobre). */
.box-emissione{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);margin:12px 0 18px}
.box-emissione > div{padding:10px 14px;border-left:1px solid var(--rule)}
.box-emissione > div:first-child{border-left:0}
.analisi td.mono,.analisi td .mono{word-break:break-all}
.box-emissione span{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.box-emissione b{display:block;font-size:14px;margin-top:2px}
.analisi .sezione > p.non-conta{font-size:13px;color:var(--ink-3)}
.analisi .foglio p{max-width:80ch}


/* La tela (30 settembre, voce 087): il grafo dell analisi che si allarga con un
   clic. Solo con JavaScript: senza, il grafo resta quello disegnato dal server. */
.con-copione .analisi svg.grafo[data-tela] .nodo{cursor:pointer}
.con-copione .analisi svg.grafo[data-tela] .nodo:hover{fill:var(--ink);text-decoration:underline}
.analisi .tela{margin-top:14px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet);padding:14px 16px;overflow-x:auto}
.analisi .tela-testa{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.analisi .tela-testa h3{margin:0;font-size:16px}
.analisi .briciole{font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.analisi .briciole button,.analisi .tela-chiudi{font:inherit;font-size:13px;background:none;border:0;padding:0;color:var(--ink-2);text-decoration:underline;cursor:pointer;min-height:auto}
.analisi .briciole .qui{color:var(--ink);font-weight:600}
.analisi .tela svg{display:block;width:100%;height:auto;min-width:640px}
.analisi .tela svg .vicino{cursor:pointer}
.analisi .tela svg .vicino:hover text:first-of-type{text-decoration:underline}
.analisi .tela .messaggio{color:var(--ink-2);font-size:14px;margin:6px 0}