/* ── il carattere ───────────────────────────────────────────────────────────
   ⭐ **Inter, e uno solo.** Prima ogni foglio dichiarava la pila di sistema
   (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto…`): su Mac le
   intestazioni uscivano in San Francisco e i campi in un'altra cosa ancora, e
   fra una schermata e l'altra il testo cambiava disegno senza motivo. Con un
   carattere ospitato in casa la pagina si vede uguale su ogni macchina — ed è
   lo stesso file già usato da Giardino, Gestionale e Giandra.
   ⚠️ `font-display: swap`: il testo si legge subito col carattere di sistema e
   passa a Inter quando è pronto. Senza, per qualche decimo la pagina è muta.
   ⚠️ Ospitato, non chiesto a Google: una pagina di casa non deve raccontare a
   nessuno chi la sta aprendo, e senza rete deve funzionare lo stesso. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('font/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* FamilyHub — foglio minimo della Fase 2. Il design system vero arriva col
   layout definitivo (N20); qui basta che sia leggibile e non finto. */
/* ⚠️⚠️⚠️ **`hidden` deve vincere su qualunque `display`, e serve `!important`.**
   L'attributo `hidden` vale `display:none` **nel foglio del browser**, che ha la
   priorità più bassa che esista: *qualunque* regola scritta da noi lo scavalca.
   Quindi un elemento con `display:flex` o `display:grid` a cui il JavaScript
   mette `hidden` **resta a vista**, e nessuno segnala niente — la pagina dice il
   contrario di quello che il codice ha appena deciso.

   ⭐ Questa riga esiste perché la stessa toppa era già stata messa **quattro
   volte in quattro posti** (`.sottovoci`, `.gruppo-testa`, `.facet-pop`, i figli
   della griglia delle specie), ogni volta come se fosse un caso particolare. Non
   erano quattro casi: era una regola mancante — e la quinta volta è arrivata
   comunque, su un'intestazione di gruppo che restava lì col conteggio a zero.

   ⚠️ È **l'unico** `!important` che questo foglio si permette, e la ragione è
   precisa: `hidden` non è presentazione, è un'affermazione sul contenuto — «non
   c'è» — e un'affermazione deve battere una decorazione. Chi ha bisogno di
   mostrare qualcosa non gli toglie `hidden` con il CSS: gli toglie `hidden`. */
[hidden] { display: none !important }

:root{
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sf:#0b1420; --card:#141d29; --bordo:#222e3d; --testo:#e6f2fa; --fioco:#93a6b6;
  --voce:#cdd9e4;
  /* ⚠️⚠️ **`--muto` lo dichiarava solo `pannello.css`, e non su `:root`.** Lo
     metteva su `.pagina, dialog`: dentro la barra laterale — che sta fuori da
     `.pagina` — non arrivava mai. Il chevron delle sottovoci lo chiede come
     colore, quindi restava senza: `color` non valido eredita, e il segno che
     dice «questa voce si apre» prendeva il colore del testo accanto. Un token
     usato dal guscio si dichiara nel foglio del guscio. */
  --muto:#77889a;
  --campo:#101a26;
  --acc:#7fc7ea; --err:#ef4444; --raggio:14px;
  /* Il colore dell'accento sceglibile da Aspetto arriva come `--gc-accent`;
     `--acc-testo` è **l'inchiostro che sta sopra l'accento**, e cambia col tema.
     ⚠️⚠️ Di sera l'accento è il ghiaccio: il bianco sopra starebbe a 1,5:1 e
     sparirebbe. Di giorno è il blu d'acqua e l'inchiostro torna bianco (5,67:1) —
     dichiarato là sotto, perché un solo valore qui servirebbe un tema e tradirebbe
     l'altro. È la stessa coppia dell'app (16/09/2026). */
  --acc-testo:#06202b;
}
/* ⭐ **Il tema chiaro esisteva come impostazione e non come foglio di stile.**
   `data-theme="light"` finiva nell'HTML e la pagina restava scura: cioè una
   preferenza che si salva, si conferma, e non fa niente — il difetto peggiore
   di una schermata di impostazioni, perché nessuno va a cercare un guasto in
   una cosa che ha appena visto riuscire. */
:root[data-theme="light"]{
  --sf:#f2f7f9; --card:#fff; --bordo:#dde5ea; --testo:#16202a; --fioco:#56656f;
  --campo:#fff;
  --muto:#67757f;
  /* L'inchiostro sopra l'accento, di giorno: bianco sul blu d'acqua, 5,67:1. */
  --acc-testo:#fff;
  /* ⭐ **Blu d'acqua sul chiaro, ghiaccio sullo scuro.** Il valore del giorno su
     fondo notturno starebbe a 3,26:1 e si spegnerebbe: sono due valori scelti, non
     uno rovesciato. ⚠️⚠️ E il verde non è stato tolto per gusto — qui vuol dire
     «fatto», e un comando verde-acqua accanto a una spunta verde chiede di
     distinguere due verdi con le mani sporche. */
  --acc:#0b6e99;
  /* ⭐ Le voci principali del menu sono più scure delle sottovoci: sono i
     moduli, cioè le cose vere, e le sezioni che stanno sotto ne sono un
     dettaglio. Antracite e non nero: il nero pieno è del titolo di pagina. */
  --voce:#2f3a44;
}
*{box-sizing:border-box}
body{margin:0;background:var(--sf);color:var(--testo);
     font-family:var(--font);font-size:15px;line-height:1.55}

/* ── il fondo, neutro (18/09/2026) ────────────────────────────────────────────
   ⚠️⚠️ **Qui c'era una trama a puntini, e Mario l'ha disfatta il giorno dopo.**
   Scelta il 17/09 su un provino di cinque varianti, e tolta il 18 guardandola in
   uso: *«lo sfondo coi puntini sotto il Giardino non mi piace, deve essere tutto
   uguale, sfondo neutro»*. Un provino mostra **una** pagina; l'uso mostra tutte
   le altre — e la trama che sotto il ricettario faceva profondità, sotto un
   elenco del Giardino faceva rumore. Non è un ripensamento da correggere: è
   l'unica prova che un provino non può dare.
   ⚠️ **E si porta dietro una conseguenza dichiarata.** Le card e i pulsanti di
   `pannello.css` restano traslucidi (`blur(18px) saturate(1.5)`), e la riga «il
   vetro ha bisogno di qualcosa da sfocare» resta vera: adesso non c'è più niente
   da sfocare, quindi il vetro semplicemente non si vede. Non fa danno — il
   riempimento dei pulsanti era già rimasto opaco apposta, per il contrasto — ma
   se le card risulteranno piatte il rimedio è una sfumatura **senza disegno**,
   non il ritorno dei puntini. */
/* ⭐⭐ **I controlli di modulo NON ereditano il carattere.** Pulsanti, campi,
   menu a tendina e aree di testo partono dal font di sistema del browser —
   Arial su Windows, sistema su Mac — e nessuno lo dichiara, quindi il difetto
   non compare da nessuna parte nel codice: si vede solo guardando. È così che
   nelle Impostazioni si erano mescolati due caratteri, ed è così che
   l'etichetta «APRI CANCELLO» del pannello usciva in Arial mentre tutto il
   resto era Inter.
   ⚠️ **Deve restare a specificità di elemento** (`0,0,1`): `.mono` vale
   `0,1,0` e continua a vincere, così i Device ID e gli indirizzi IP restano
   monospaziati. Scritta dentro una regola con delle classi si mangerebbe
   `.mono` — è già successo. */
button,input,select,textarea{font-family:inherit}
body.centrato{min-height:100vh;display:grid;place-items:center;padding:24px}
h1{font-size:22px;margin:0 0 4px}
h2{font-size:17px;margin:0 0 8px}
.sotto{margin:0 0 20px;color:var(--fioco);font-size:13.5px}
.card{background:var(--card);border:1px solid var(--bordo);border-radius:var(--raggio);padding:22px}
.card.stretta{width:100%;max-width:400px}

/* ── il vetro liquido (DESIGN_SYSTEM §6-ter): la ricetta, in un posto solo ──────────────────────
   ⭐⭐ Velo chiaro che sfoca la pagina invece di oscurarla, finestra traslucida con due riflessi,
   ombre morbide, entrata a molla. La vestono **tutti i dialog** (dal 06/10/2026) e la **card
   dell'ingresso** (`.vetro-liquido`, §6-quater): sta qui e non in `pannello.css` perché la pagina
   d'ingresso carica solo questo foglio, e due copie della stessa ricetta sarebbero due vetri alla
   prima correzione. ⚠️⚠️ Velo chiaro e vetro vanno insieme o non vanno: sopra un velo scuro un
   vetro è grigio sporco. ⚠️ Il visore delle foto (`.ingranditore`) resta scuro.
   ⚠️ I token stanno sull'elemento di vetro e non su `:root`: un `<dialog>` aperto sta nel top
   layer, e con lui il suo `--muto`, che sul vetro è un passo diverso da quello di casa.
   ⚠️⚠️ **`:root dialog` e non `dialog`.** `pannello.css` arriva DOPO e dichiara `--muto` su
   `.pagina, dialog`: a pari specificità vince lui, e il tenue tarato sul vetro torna quello di casa.
   Finché la ricetta stava in `pannello.css` vinceva per ordine; spostandola qui è successo, misurato
   il 06/10/2026 aprendo un dialog (`#67757f`, circa 4,1:1 sul vetro chiaro). Lo guarda `prova-marchio`,
   che calcola chi vince fra i due fogli. */
:root dialog, .vetro-liquido {
  /* I valori della ricetta, per tema: scuro di serie… */
  --vetro-luce: rgba(255, 255, 255, .10); --vetro-tinta: 22%; --vetro-fondo: 62%;
  --vetro-bordo: rgba(255, 255, 255, .14);
  --vetro-filo-alto: rgba(255, 255, 255, .16); --vetro-filo-basso: rgba(255, 255, 255, .04);
  --vetro-ombra-lunga: rgba(2, 6, 23, .8); --vetro-ombra-corta: rgba(2, 6, 23, .35);
  --vetro-secondario: 8%;
  /* ⚠️ **Il testo tenue si misura SUL VETRO**, non sulla card: il fondo di un'etichetta qui dentro è la
     card a 62% sopra il velo e la pagina sfocata, e vicino al riflesso dell'accento il grigio di casa
     scendeva sotto i 4,5:1. Sul vetro il tenue è quello che fuori è «fioco». */
  --muto: #93a6b6;
}
/* …e chiaro. Due posti, come il resto del foglio: chi il chiaro l'ha scelto, e chi segue il sistema. */
:root[data-theme="light"] dialog, [data-theme="light"] .vetro-liquido {
  --vetro-luce: rgba(255, 255, 255, .6); --vetro-tinta: 16%; --vetro-fondo: 66%;
  --vetro-bordo: rgba(255, 255, 255, .65);
  --vetro-filo-alto: rgba(255, 255, 255, .9); --vetro-filo-basso: rgba(255, 255, 255, .25);
  --vetro-ombra-lunga: rgba(15, 23, 42, .45); --vetro-ombra-corta: rgba(15, 23, 42, .10);
  --vetro-secondario: 5%;
  /* Il grigio di casa (#67757f) sul vetro chiaro sta a circa 4,1:1: un passo più scuro, 4,8. */
  --muto: #5b6a74;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) dialog, :root:not([data-theme="dark"]) .vetro-liquido {
    --vetro-luce: rgba(255, 255, 255, .6); --vetro-tinta: 16%; --vetro-fondo: 66%;
    --vetro-bordo: rgba(255, 255, 255, .65);
    --vetro-filo-alto: rgba(255, 255, 255, .9); --vetro-filo-basso: rgba(255, 255, 255, .25);
    --vetro-ombra-lunga: rgba(15, 23, 42, .45); --vetro-ombra-corta: rgba(15, 23, 42, .10);
    --vetro-secondario: 5%; --muto: #5b6a74;
  }
}
/* ⚠️ Liste scritte per esteso e non `:is(…)`: per i dialog la specificità resta quella di sempre,
   (0,1,1) — e le misure in `pannello.css` (`dialog.dlg-conferma`, stessa specificità) vincono perché
   quel foglio arriva dopo —; la card vale (0,1,0) come `.card`, e vince perché sta scritta dopo di lei.
   E il presidio §16 di `prova-admin`, che divide le liste sulle virgole, legge giusto. */
dialog:not(.ingranditore), .vetro-liquido {
  border-radius: 26px; border: 1px solid var(--vetro-bordo);
  /* I due riflessi sono sfondi: restano fermi se il contenuto scorre. */
  background:
    radial-gradient(120% 55% at 0% 0%, var(--vetro-luce), transparent 58%),
    radial-gradient(70% 45% at 100% 100%, color-mix(in srgb, var(--acc) var(--vetro-tinta), transparent), transparent 65%),
    color-mix(in srgb, var(--card) var(--vetro-fondo), transparent);
  -webkit-backdrop-filter: blur(32px) saturate(1.9); backdrop-filter: blur(32px) saturate(1.9);
  box-shadow: inset 0 1px 0 var(--vetro-filo-alto), inset 0 -1px 0 var(--vetro-filo-basso),
              0 40px 90px -24px var(--vetro-ombra-lunga), 0 10px 28px var(--vetro-ombra-corta);
}
dialog:not(.ingranditore)[open], .vetro-liquido { animation: vetro-in .28s cubic-bezier(.2, .9, .3, 1.12) }
/* ⚠️ Il velo si scrive coi suoi valori e non coi token: `::backdrop` non li eredita dappertutto. */
dialog:not(.ingranditore)::backdrop {
  background: rgba(2, 6, 23, .45);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  animation: velo-in .2s ease-out;
}
[data-theme="light"] dialog:not(.ingranditore)::backdrop { background: rgba(15, 23, 42, .18) }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) dialog:not(.ingranditore)::backdrop { background: rgba(15, 23, 42, .18) }
}
@keyframes velo-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes vetro-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(4px) }
  to   { opacity: 1; transform: none; filter: none }
}
@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog::backdrop, .vetro-liquido { animation: none }
}

/* ── l'ingresso (DESIGN_SYSTEM §6-quater) ──────────────────────────────────────────────────────
   ⭐⭐ **I colori del marchio si CAMPIONANO dal suo file**, non si scelgono «somiglianti»: contati i
   pixel dell'icona dell'app (1024 × 1024, il solo file del marchio di FamilyHub al 06/10/2026),
   scartati i grigi e il bianco della casetta (escursione fra i canali sotto 40), le tre fasce più
   larghe del suo gradiente sono `#1b7aa4` (357.312 pixel), `#12739e` (168.882) e `#0c6e99`
   (121.503) — l'ultima è il blu d'acqua di casa. Caricato un marchio in *Impostazioni → Aspetto*,
   `Marchio::ricampiona()` rifà il conto sul file nuovo e la pagina li ridichiara. */
:root{--brand-1:#1b7aa4;--brand-2:#12739e;--brand-3:#0c6e99}
/* ⭐⭐ **Il fondo che dà al vetro qualcosa da sfocare.** `backdrop-filter` sfoca ciò che sta dietro, e
   sopra un fondo piatto la card sembra solo slavata: tre macchie sfumate che respirano piano. È un
   **blocco a sé**: il giorno dello sfondo vero — una foto, un video — si sostituisce lui. ⚠️ Fermo
   per chi ha chiesto meno movimento: il fondo resta, il respiro no. */
.ingresso-fondo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ingresso-fondo span{position:absolute;width:58vmax;height:58vmax;border-radius:50%;
  filter:blur(40px);opacity:.5;animation:ingresso-respiro 24s ease-in-out infinite alternate}
.ingresso-fondo span:nth-child(1){left:-24vmax;top:-26vmax;
  background:radial-gradient(circle,var(--brand-1) 0%,transparent 66%)}
.ingresso-fondo span:nth-child(2){right:-26vmax;top:12vh;animation-delay:-8s;
  background:radial-gradient(circle,var(--brand-2) 0%,transparent 66%)}
.ingresso-fondo span:nth-child(3){left:-6vmax;bottom:-34vmax;animation-delay:-16s;
  background:radial-gradient(circle,var(--brand-3,var(--brand-1)) 0%,transparent 66%)}
:root[data-theme="light"] .ingresso-fondo span{opacity:.4}
@keyframes ingresso-respiro{from{transform:translate3d(0,0,0) scale(1)}
                            to{transform:translate3d(3vmax,-2vmax,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.ingresso-fondo span{animation:none}}
/* Il marchio sta FUORI dalla card, sopra: dentro si leggerebbe come il titolo del modulo. Sotto, il
   titolo della schermata — è lui che dice dove sei, mentre il marchio resta.
   ⭐ **Al massimo 300 × 90**, regola di Mario del 06/10/2026 (DESIGN_SYSTEM §6-quater): a 260 × 72 il
   logo si leggeva piccolo sopra una card di 400 — «leggermente più grande». Il ripiego, bollino e
   nome, cresce nella stessa misura.
   ⭐ **E il blocco sta un po' sopra il centro** (Mario, la stessa sera): col marchio a 90 il blocco
   intero — marchio, titolo e card — centrato a metà spingeva la card troppo in basso. Il margine sotto
   (10vh) sposta in su il blocco di metà, 5vh, su ogni schermo. Il titolo sta a 6 punti dal marchio:
   a 12 si staccava, e si leggeva come una riga a sé. */
.ingresso{width:100%;max-width:400px;display:grid;gap:18px;margin-bottom:10vh}
.ingresso.larga{max-width:520px}
/* ⚠️⚠️ **La distanza che conta è quella che SI VEDE: 33 px** dal fondo del disegno del marchio alla cima
   delle maiuscole del titolo (DESIGN_SYSTEM §6-quater; Mario, 07/10/2026, guardando GridBoard: «non ha
   rispettato le distanze del logo con la scritta sotto»). Fra i riquadri erano 6 px, che ne facevano vedere
   33 solo perché il nostro logo ha 47 righe vuote su 200 in fondo: un logo senza margine si attaccava al
   titolo (9 visibili, su GridBoard). Adesso il distacco si CALCOLA dal file: `Marchio::ingresso()` misura
   il vuoto in fondo (`--vuoto`, quota dell'altezza) e la forma (`--forma`, alto su largo; `--alto`, i pixel),
   e qui lo si toglie dai 27 px — 33 meno i 5,8 fra la cima del riquadro del titolo e le sue maiuscole
   (14 px, peso 700, Inter) —, alla misura a cui l'immagine si disegna davvero: la più piccola fra 90 px,
   la larghezza massima per la forma, e il file stesso. Col ripiego composto il vuoto vale zero: 27. */
.ingresso-marchio{display:grid;justify-items:center;text-align:center;
  gap:max(0px,calc(27px - var(--vuoto,0) * min(90px,min(300px,80vw) * var(--forma,1),var(--alto,90px))))}
.ingresso-esteso{display:block;width:auto;height:auto;max-width:min(300px,80vw);max-height:90px}
.ingresso-composto{display:inline-flex;align-items:center;gap:14px}
.ingresso-bollino{display:block;width:54px;height:54px;border-radius:14px}
.ingresso-nome{font-size:29px;font-weight:800;letter-spacing:-.02em;color:var(--testo)}
/* ⚠️⚠️ **Il colore si misura nel pixel PEGGIORE**, non nella media (MIGLIORIE 7.507): l'etichetta sta
   sul fondo che respira. Misurato il 06/10/2026 sulla pagina vera, sei fasi del respiro, coi testi resi
   trasparenti: il «fioco» di casa regge di sera (5,92:1 sul telefono, 7,26 sul computer) e di giorno
   no — **4,17:1 sul telefono**, dove ci passa la macchia di destra. Lì si prende il grigio **secondario**
   di casa (`--voce`: 8,03 · 10,47), non un grigio scurito a mano: i colori di casa restano quelli. */
/* ⚠️⚠️ **Niente maiuscolo forzato** (Mario, 06/10/2026, DESIGN_SYSTEM §6-quater): l'etichetta la scrive
   chi amministra, in *Aspetto*, e un testo che compare diverso da come lo si è digitato si legge come un
   difetto — il maiuscolo, se lo vuole, lo preme. **14 · 700 · .08em**: a 12,5 sotto il marchio
   ingrandito si leggeva piccola, «leggermente più grande» (Mario, la stessa sera; la regola ora dice 14). */
.ingresso-etichetta{margin:0;font-size:14px;font-weight:700;letter-spacing:.08em;
  color:var(--fioco)}
:root[data-theme="light"] .ingresso-etichetta{color:var(--voce)}
.vetro-liquido.card{padding:24px}
.vetro-liquido h1{font-size:20px;letter-spacing:-.01em}
/* Il pulsante che manda il modulo, lucido come quelli dei dialog (§6-ter).
   ⚠️⚠️ **`.centrato` davanti, e non per gusto** (07/10/2026): `.centrato button[type=submit]`, più sotto,
   pesa lo stesso (0,2,1) e viene dopo, quindi il suo `background:var(--acc)` e il raggio 9 vincevano — il
   pulsante «Entra» era PIATTO dal 06/10, col commento qui sopra che diceva «lucido». È la 7.189 un'altra
   volta, trovata misurando: dietro le lettere c'era il pieno esatto, `rgb(11,110,153)`, cioè nessun
   gradiente. Lucido, il blu di casa regge 4,80 dietro le lettere (misurato nei dialog). */
.centrato .vetro-liquido button[type=submit],.vetro-liquido .bott-largo{border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc-lucido,var(--acc)) 82%,#fff),var(--acc-lucido,var(--acc)) 55%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -8px color-mix(in srgb,var(--acc-lucido,var(--acc)) 60%,transparent)}
/* ⭐ Un punto in più (era 11.5): maiuscole spaziate in grigio sopra un campo da
   16px non si leggevano, si indovinavano dalla posizione. Vedi `pannello.css`. */
label{display:block;margin:14px 0 5px;font-size:12.5px;color:var(--fioco);
      text-transform:uppercase;letter-spacing:.06em}
/* «opzionale» è un inciso, non parte del nome del campo: vedi `pannello.css`. */
.opz{font-size:.88em;font-weight:400;text-transform:none;letter-spacing:0;opacity:.9}
input,select{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--bordo);
             background:var(--campo);color:var(--testo);font-size:16px}
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
/* ⭐⭐ **I campi riempiti da Chrome non saltano più al primo clic** (MIGLIORIE 7.512, nucleo 1.43.0).
   Mario, sull'ingresso, il 06/10/2026: «quando aggiorno la pagina vedo il font dentro gli input piccolo;
   appena ci clicco diventa grande». Aprendo la pagina Chrome riempie nome e password ma li tiene come
   ANTEPRIMA fino al primo gesto, e l'anteprima la disegna in un elemento suo
   (`::-internal-input-suggested`) col carattere del suo foglio: `font: -webkit-small-control !important`
   e `font-family: sans-serif !important` — 13,33 px —, apposta: coi caratteri della pagina, la pagina ne
   ricaverebbe il testo (crbug.com/517710554). Quel carattere non si cambia, e la prima cura provata
   (`::first-line`) non faceva niente. ⭐ **Si cambia il nostro**: mentre il campo è «riempito» — e
   `:-webkit-autofill` vale GIÀ durante l'anteprima: Chrome lo segna così mentre aspetta il gesto — il
   valore vero si veste col carattere dell'anteprima, e `zoom`, che il foglio di Chrome non blocca, porta
   tutti e due a 16 px. Misurato col riempimento vero di Chrome 154 (un profilo di prova, credenziale
   finta): fra l'anteprima e il dopo-clic **zero pixel diversi**, contro 3464. Il riquadro non si muove:
   altezza, margini, bordo e raggio sono quelli della regola qui sopra divisi per lo zoom (42 = 10 + 20 +
   10 + 2, la riga di Inter a 16 px, misurata) — se cambiano lì cambiano qui, e `prova-marchio` li
   confronta.
   ⚠️ **`calc(16px / 1.2)`, non `13.3333px`**: è la misura esatta di `-webkit-small-control` (16 px meno
   2 pt). Con quattro decimali i pixel diversi erano 263, sui bordi delle lettere.
   ⚠️ **Il prezzo, dichiarato**: un valore riempito dal browser si legge nel sans-serif del browser
   (Helvetica sul Mac), della stessa misura di Inter; chi lo modifica lo riporta in Inter. E vale col
   corpo di serie di Chrome: chi lo ingrandisce nelle sue impostazioni ingrandisce anche l'anteprima, e il
   salto torna, più piccolo.
   ⚠️ **Solo sulle pagine prima dell'accesso** (`.centrato`: accesso, codice, recupero, secondo fattore,
   l'accesso del cancello): sono quelle dove Chrome riempie all'apertura, e i loro campi hanno le misure
   di qui sopra. */
.centrato input:-webkit-autofill{zoom:1.2;font:calc(16px / 1.2) sans-serif;
  height:calc(42px / 1.2);padding:0 calc(12px / 1.2);border-width:calc(1px / 1.2);border-radius:calc(9px / 1.2)}
.centrato .con-occhio input:-webkit-autofill{padding-right:calc(46px / 1.2)}
.centrato input:-webkit-autofill:focus{outline-width:calc(2px / 1.2);outline-offset:calc(1px / 1.2)}
/* ⚠️ Il testo del pulsante è **bianco**, non un verde scurissimo: quel colore
   funzionava solo finché l'accento era il verde di partenza, e col blu scelto
   in Aspetto diventava scuro su scuro — un «Entra» che si legge a fatica. */
/* ⚠️⚠️ **Questa regola vestiva OGNI pulsante della pagina.** Nasce per il
   modulo d'accesso, dove il pulsante è uno solo e va a tutta riga — ma da
   quando ogni schermata carica questo foglio insieme al suo, si prendeva anche
   «Rimuovi» dentro una card (largo 822px) e «Disconnetti» (932px). Un foglio di
   guscio non deve vestire gli elementi che stanno nel contenuto: si limita a
   ciò che è suo, cioè i moduli a tutta pagina prima dell'accesso. */
/* ⚠️⚠️⚠️ **`button[type=submit]`, non `button`.** Ristretta una volta da «ogni
   pulsante dell'applicazione» a «ogni pulsante di una pagina centrata» — e non
   bastava: dentro una pagina centrata c'è anche il **pulsante dell'occhio** del
   campo password, che è un `<button>`. Vestito così diventava una barra verde
   354×42 **sopra il campo**: la password non si vedeva mentre la si scriveva, e
   il bersaglio da premere per scriverci era coperto. Era in produzione sulla
   pagina di accesso.
   ⭐ La lezione, che il §8 dice già dall'altro lato: **un pulsante non si veste
   per dove sta, si veste per cosa fa.** «Sono dentro la pagina di accesso» non
   è una proprietà del pulsante; «sono io che mando il modulo» sì. */
.centrato button[type=submit]{width:100%;margin-top:20px;padding:12px;border:0;border-radius:9px;
       background:var(--acc);color:var(--acc-testo);font-size:15px;font-weight:700;cursor:pointer}
.avviso{margin:14px 0 0;padding:10px 12px;border-radius:9px;font-size:13.5px}
.avviso.errore{background:color-mix(in srgb,var(--err) 12%,transparent);
               color:var(--err);border:1px solid color-mix(in srgb,var(--err) 32%,transparent)}
/* Il guscio: menu a sinistra, contenuto a destra. Niente topbar — «Esci» sta
   in un posto solo, in fondo alla barra laterale. */
/* 264 e non 250: con la faccia, il nome e le due iconcine in fondo, a 250 il
   nome usciva troncato — «Mario Tum…», che è il posto peggiore in cui
   troncare, perché è l'unica riga che dice **con quale utenza** stai
   guardando. */
.guscio{display:grid;grid-template-columns:var(--barra,264px) 1fr;min-height:100vh}
/* ⚠️⚠️ **La barra sta ferma sullo schermo, non si allunga con la pagina.**
   Prima cresceva quanto il contenuto: su un registro lungo il blocco di chi sei
   — profilo, esci, tema — finiva **duemila pixel sotto la piega**, e per uscire
   bisognava scorrere fino in fondo alla pagina. Non si notava finché lì sotto
   c'era solo «Esci»; con la faccia e gli strumenti si nota subito.
   ⭐ `sticky` e non `fixed`: la griglia continua a riservarle la sua colonna, e
   sotto i 760px — dove diventa una fascia in cima — torna nel flusso da sé. */
.lato{background:var(--card);border-right:1px solid var(--bordo);padding:20px 16px;
      display:flex;flex-direction:column;gap:18px;
      position:sticky;top:0;height:100dvh;overflow:hidden}
/* Se i moduli sono tanti scorre **il menu**, non la barra: gli strumenti e chi
   sei restano dove sono, che è tutto il punto di averli in fondo. */
/* ⚠️⚠️ **Il menu scorre, quindi TAGLIA — e tagliava il segno di «sei qui».**
   `overflow-y:auto` fa del menu un contenitore di scorrimento, e un contenitore
   di scorrimento ritaglia su tutti e due gli assi (l'`overflow-x` che resta
   `visible` diventa `auto` da solo, per specifica). Il tratto verde sta a
   `left:-16px` dalla voce, cioè **fuori** dalla scatola del menu: c'era, era
   verde, era alto quanto la riga, e non lo ha mai visto nessuno.
   ⭐ Il rimedio non sposta niente: si allarga la scatola a sinistra di quei
   16px e si rimette dentro altrettanto padding, così il contenuto resta dov'era
   e il ritaglio comincia più a sinistra del tratto.
   ⚠️ Misurato, non dedotto: `getComputedStyle(v,'::before')` diceva
   `left:-16px; width:3px; background:rgb(21,128,61)` — la regola si applicava —
   e nella schermata resa non c'era nessuna riga verde. */
.menu{overflow-y:auto;min-height:0;margin-left:-16px;padding-left:16px}
/* ⭐ E dal 04/10 anche a destra, per la stessa ragione: la riga delle sezioni
   arriva al bordo destro della barra, e un contenitore che scorre l'avrebbe
   tagliata 16px prima. Il contenuto resta dov'era. */
.menu{margin-right:-16px;padding-right:16px}
.marchio{font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;
         display:flex;align-items:center;gap:10px;min-width:0}
.marchio-bollino{flex:none;display:block;width:26px;height:26px;border-radius:7px}
.capo{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ── gli strumenti della barra: tondi, piccoli, tutti uguali ─────────────── */
.sb-strumento{flex:none;width:32px;height:32px;margin:0;padding:0;display:grid;place-items:center;
              border:0;border-radius:9px;background:none;color:var(--fioco);cursor:pointer;
              text-decoration:none}
.sb-strumento svg{width:18px;height:18px}
.sb-strumento:hover{background:color-mix(in srgb,var(--fioco) 12%,transparent);color:var(--testo)}
.sb-esci:hover{color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}
.sb-strumenti{display:flex;align-items:center;gap:4px;padding:0 2px 8px}

/* ── chi sei, in fondo ───────────────────────────────────────────────────
   ⭐ Una riga sola: faccia, nome, e cosa puoi farci. Prima erano due voci di
   menu con la stessa forma dei moduli — «vai a una sezione» e «chiudi la
   sessione» disegnate uguali. */
.sb-chi{display:flex;align-items:center;gap:8px;padding:10px 0 0;
        border-top:1px solid var(--bordo)}
/* ⚠️ `touch-action:manipulation` toglie l'attesa dei 300 ms per il doppio
   tocco: senza, due tocchi rapidi sul telefono diventano uno zoom invece che
   due tocchi. `user-select:none` perché tocchi ripetuti su una lettera la
   selezionano e compare il menu di sistema. */
.sb-faccia{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
           touch-action:manipulation;-webkit-user-select:none;user-select:none;
           background:var(--acc);color:var(--acc-testo);font-weight:800;font-size:15px}
.sb-nome{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;
         text-decoration:none;color:inherit}
.sb-nome strong{font-size:14px;color:var(--testo);
                overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-nome span{font-size:12px;color:var(--fioco)}
/* Nella riga di chi sei le due iconcine sono più strette: lì lo spazio
   serve al nome, che è l'unica cosa che non si può indovinare. */
.sb-chi .sb-strumento{width:30px;height:30px}
.sb-chi .sb-strumento svg{width:17px;height:17px}

/* ── la barra compressa ──────────────────────────────────────────────────
   ⚠️⚠️ **Tutte le regole del compresso stanno in QUESTO blocco.** «Compresso»
   è un concetto da scrivania: sotto la soglia la barra è un'altra cosa, e le
   regole del compresso hanno specificità più alta — lasciate fuori, chi
   comprime sul computer si ritrova sul telefono un menu largo 64px e senza
   parole. Il sintomo inganna: il menu «si apre» e sembra vuoto.
   (DESIGN_SYSTEM §5, e MIGLIORIE: è già successo altrove.) */
@media (min-width:761px){
  :root.barra-stretta{--barra:64px}
  :root.barra-stretta .lato{padding:20px 8px;align-items:center}
  /* ⚠️ Compressa il padding è 8px: il tratto va riportato a filo, o resterebbe
     sospeso a metà del margine. */
  :root.barra-stretta .voce[aria-current]:not(.sottovoce)::before{left:-8px}
  /* E il ritaglio del menu si stringe di conseguenza: la compensazione deve
     valere quanto lo sporto, o il tratto torna fuori dalla scatola. */
  :root.barra-stretta .menu{margin-left:-8px;padding-left:8px;margin-right:-8px;padding-right:8px}
  /* Le sezioni: compressa la pillola sparisce (più sotto) e i due tratti si
     saldano in una riga sola, che tiene il ritmo dei gruppi anche a icone sole.
     12px sopra e non 16, come in ElettroMaster: senza la pillola la riga sta più
     vicina alle icone. Vale anche per le righe senza nome, che compresse sono
     identiche alle altre. */
  :root.barra-stretta .divisore{margin:12px -8px 7px}
  /* ⚠️ E il menu compresso si stende: la barra centra i suoi figli, quindi il menu
     era largo quanto le icone e la riga si fermava a 34px su 64. Le icone restano
     dove sono (si centrano da sé), misurato prima e dopo. */
  :root.barra-stretta .menu{align-self:stretch}
  /* Sparisce ogni parola: restano le icone, centrate. Il nome dell'app
     compreso — a 64px non ci sta, e tagliato a metà è peggio di assente. */
  :root.barra-stretta .marchio,
  :root.barra-stretta .voce span:not(.chevron),
  :root.barra-stretta .sottovoci,
  :root.barra-stretta .divisore span,
  :root.barra-stretta .sb-nome,
  :root.barra-stretta .vuoto-menu{display:none}
  :root.barra-stretta .capo{justify-content:center}
  :root.barra-stretta .voce{justify-content:center;padding-left:0;padding-right:0;border-left:0}
  :root.barra-stretta .voce .chevron{display:none}
  :root.barra-stretta .sb-strumenti{justify-content:center;flex-wrap:wrap}
  :root.barra-stretta .sb-chi{flex-wrap:wrap;justify-content:center;gap:6px}
  /* Il verso del chevron dice cosa fa il pulsante: chiudi ← / riapri → */
  :root.barra-stretta #sb-collassa .verso{transform:translateX(3px) scaleX(-1);
                                          transform-origin:center}
  :root.barra-stretta .lato{transition:width .18s ease}
}
.selettore label{margin-top:0}
.menu{flex:1}
.vuoto-menu{font-size:12.5px;color:var(--fioco);margin:0}
/* ⚠️⚠️ **Sottolineato da fermo, non solo al passaggio del mouse.** Era grigio,
   senza sottolineatura, e si accendeva solo con `:hover` — che **sul telefono non
   esiste**. Lì «Torna all'accesso» sembrava una didascalia, e sono le schermate di
   chi è fuori: chi ha sbagliato password e cerca la via di ritorno, dal telefono,
   che è il caso normale. Un'affordance affidata all'hover è un'affordance che
   metà delle persone non ha.
   ⭐ Resta **grigio** e non verde: è l'uscita secondaria, non l'azione della
   schermata — che è il pulsante sopra. La sottolineatura la rende un
   collegamento, il colore la tiene al suo posto.
   ⚠️ `text-underline-offset`: attaccata alle lettere passa dentro le discendenti
   e si legge come una riga barrata più che come un collegamento. */
.esci{color:var(--fioco);font-size:13.5px;
      text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.esci:hover{color:var(--testo)}
/* ⭐⭐ **Le pagine sono a larghezza intera. Sempre.** *(Decisione di Mario del
   13/08/2026.)* Prima c'erano due tetti — 900px e 1240px per le schermate «larghe»
   — e su un monitor da 1600 restava mezzo schermo vuoto a destra mentre un
   registro a sei colonne scorreva di lato. Un limite che si sceglie a mano è un
   limite che si sbaglia due volte: stretto dove servirebbe spazio, e comunque
   arbitrario dove non serve.
   ⚠️ **La riga di testo lunga NON si risolve limitando la pagina**: si limita il
   testo (`.desc`, `.aiuto`, i paragrafi dentro le card — vedi `pannello.css`).
   Limitare la pagina per proteggere due righe di didascalia significa stringere
   anche le tabelle, che di spazio ne vogliono tutto.
   `min-width:0` resta: senza, una tabella larga allarga la colonna della griglia
   e la barra laterale si stringe. */
/* ⚠️⚠️ Il padding è un **token**, non un numero scritto due volte: la testata
   di modulo esce da qui con un margine negativo per farsi barra a tutta
   larghezza, e due valori che devono combaciare scritti in due posti divergono
   alla prima modifica — con la barra che sporge o resta rientrata di qualche
   pixel, cioè un difetto che si vede e non si capisce. */
:root{--pad-contenuto:28px}
.contenuto{padding:var(--pad-contenuto);min-width:0}
@media (max-width:640px){:root{--pad-contenuto:16px}}
.stato{margin:14px 0 0;padding-left:18px;font-size:13.5px;color:var(--fioco)}
/* Il pulsante del cassetto e il velo non esistono su desktop. */
.apri-barra{display:none}
.velo{display:none}

@media(max-width:760px){
  .guscio{grid-template-columns:1fr}
  /* ⚠️⚠️ **Un cassetto, non un blocco in cima.** Prima la barra tornava nel
     flusso: ogni pagina cominciava con dodici voci di menu e il contenuto
     arrivava dopo — su uno schermo da 812 punti si scorreva oltre la
     navigazione **su ogni pagina, ogni volta**. Adesso sta fuori schermo e
     entra da sinistra quando la si chiama.
     ⚠️ `100dvh` e non `100vh`: su iPhone la barra degli indirizzi si ritira e
     `vh` resta grande, quindi il fondo del cassetto — dove c'è «Esci» — finisce
     sotto il bordo dello schermo. */
  /* ⚠️ `padding-top`: il pulsante sta **sopra** il cassetto e resta lì anche da
     aperto (è lo stesso comando che lo chiude). Senza, gli si siede sulla prima
     voce del menu, che si legge a metà. */
  .lato{position:fixed;top:0;left:0;height:100dvh;width:min(300px,86vw);
        z-index:var(--z-cassetto,300);transform:translateX(-100%);
        transition:transform .22s ease;border-right:1px solid var(--bordo);
        border-bottom:0;overflow-y:auto;padding-top:58px}
  body.barra-aperta .lato{transform:none;box-shadow:0 0 40px rgba(0,0,0,.45)}
  .velo{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);
        z-index:calc(var(--z-cassetto,300) - 1)}
  /* ⚠️ 44px: è il minimo perché un pollice lo prenda al primo colpo (§5.3). */
  .apri-barra{display:inline-flex;align-items:center;justify-content:center;
              position:fixed;top:8px;left:8px;width:44px;height:44px;
              z-index:calc(var(--z-cassetto,300) + 1);
              background:var(--card);color:var(--testo);
              border:1px solid var(--bordo);border-radius:var(--raggio-lg,12px)}
  .apri-barra svg{width:22px;height:22px}
  /* Il contenuto lascia il posto al pulsante, che gli sta sopra. */
  .contenuto{padding-top:58px}
}
/* Chi ha chiesto meno movimento non riceve lo scorrimento del cassetto: si
   apre e basta, che è tutta l'informazione che serve. */
@media (prefers-reduced-motion: reduce){ .lato{transition:none} }

/* ── il menu dei moduli ─────────────────────────────────────────────────── */
/* ⚠️ **Un menu è un elenco, non una serie di pulsanti distanziati.** Con 2px di
   gap e 9px di padding, dodici voci occupavano più di uno schermo di telefono e
   fra una e l'altra restava tanto bianco da farle leggere come blocchi separati.
   Si stringe: l'occhio le prende in gruppo, che è come si legge un menu. */
.menu{display:flex;flex-direction:column;gap:0}
/* ⭐ 15px dal 04/10/2026 (Mario: «visto che c'è lo spazio… un punto in più»), e lo
   stesso punto alle sottovoci, da 13,5 a 14,5 («sali anche le sottovoci»).
   ⚠️ L'altezza della riga è scritta (22px, quanto il chevron): un `<a>` eredita
   1,55 dal corpo e un `<button>` ha `normal`, quindi col corpo a 15 «Cerca» e
   «Impostazioni» venivano 35,3px e i moduli 34 — righe dello stesso menu alte
   diverse. Così sono 34 tutte. */
.voce{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;
      color:var(--voce);text-decoration:none;font-size:15px;font-weight:600;
      line-height:22px;border-left:3px solid transparent;position:relative}
.voce svg{width:18px;height:18px;flex:none}
.voce:hover{color:var(--testo);background:color-mix(in srgb,var(--fioco) 10%,transparent)}
/* La voce attiva non sposta il testo: il bordo c'è sempre, trasparente. */
/* ⚠️ **`[aria-current]`, non una classe `.attiva`.** La classe non la metteva
   nessuno: la barra dichiara la voce aperta con `aria-current="page"` — che è
   anche quello che sente chi legge con la sintesi vocale — e questa regola
   aspettava un nome che il markup non ha mai avuto. Due modi di dire la stessa
   cosa, e quello scritto nel foglio era il modo di nessuno. */
.voce[aria-current]{color:var(--acc);
                    background:color-mix(in srgb,var(--acc) 8%,transparent)}
/* ⚠️⚠️ **Il segno di «sei qui» era un `border-left` su una scatola arrotondata**,
   quindi non si leggeva come una barra: gli 8px di raggio se la mangiavano ai due
   capi e restava uno spicchio curvo, staccato dal bordo della barra laterale di
   tutti i 16px di padding. Un indicatore che non tocca un bordo non fa da
   indicatore: sembra una decorazione della voce.
   ⭐ Adesso è un tratto **a filo del bordo sinistro**, alto quanto la riga e
   squadrato: l'occhio scorre il margine della barra e si ferma dove è colorato.
   È lo stesso principio già usato dalle sottovoci, dove la riga di collegamento
   si ispessisce nel punto della voce aperta.
   ⚠️ `:not(.sottovoce)`: quelle hanno già il loro tratto, che è la riga che le
   unisce — due segni per la stessa cosa sarebbero due segni e nessun significato.
   ⚠️ Il `border-left` resta, trasparente: toglierlo sposterebbe il testo di 3px
   fra una voce e l'altra. */
.voce[aria-current]:not(.sottovoce)::before{content:"";position:absolute;
                    left:-16px;top:0;bottom:0;width:3px;background:var(--acc)}
/* La velatura è leggera (7%): il segno di «sei qui» lo dà la linea verde, non
   la macchia — e una macchia più forte toglie contrasto proprio al testo che
   deve risaltare. */
.voce.sottovoce[aria-current]{background:color-mix(in srgb,var(--acc) 7%,transparent);
                              border-left-color:transparent}
/* ── le sezioni del menu ─────────────────────────────────────────────────
   ⭐⭐ **Come in ElettroMaster** (richiesta di Mario, 04/10/2026, misure date
   dalla sua sessione): il nome della sezione sta in una **pillola** sulla riga,
   e la riga attraversa la barra da un bordo all'altro. Una sezione è
   un'etichetta che separa, non un contenitore: non si apre né si chiude, e
   non si preme (`pointer-events:none`).
   ⚠️ La riga non è un bordo sotto il testo: sono due tratti ai lati della
   pillola, con `gap:0` così la toccano. Quello prima è fisso, così la pillola
   sta sempre alla stessa distanza dal bordo; quello dopo si allunga.
   ⚠️ I margini negativi valgono quanto il margine interno della barra (16px,
   8px da compressa): sono quelli che portano la riga ai bordi veri. Cambiando
   il margine della barra si cambiano anche questi, o la riga si ferma prima.
   ⚠️ Niente doppio valore per i due temi: testo, bordo e righe sono il colore
   muto (il ruolo del `--text-muted` di ElettroMaster: più tenue delle voci),
   diluito, quindi seguono il tema da soli.
   ⚠️⚠️ **Le misure sono quelle di ElettroMaster, identiche** — 7px/600,
   maiuscolo, `.1em`, `line-height: normal` (lì la pillola non ne dichiara una e
   eredita quella del corpo, che non ne ha). Il 04/10 qui c'erano 9px e
   `line-height: 1.5`, scelti apposta «perché la nostra scala è più grande»: la
   pillola usciva alta 19,5px invece di 14,5, e Mario l'ha vista subito — *«la
   scritta è troppo grande, deve essere precisamente uguale»*. Un componente
   preso da un altro progetto si copia con le sue misure; adattarlo è una
   decisione da chiedere, non da prendere.
   Senza nome la sezione è solo la riga (`.muto`). */
.divisore{display:flex;align-items:center;gap:0;margin:16px -16px 7px;
          pointer-events:none;user-select:none}
.divisore::before,.divisore::after{content:"";height:1px;
          background:color-mix(in srgb,var(--muto) 25%,transparent)}
.divisore::before{flex:0 0 15px}
.divisore::after{flex:1 1 auto}
.divisore span{flex:0 0 auto;border:1px solid color-mix(in srgb,var(--muto) 42%,transparent);
          border-radius:999px;padding:2px 8px;font-size:7px;font-weight:600;
          letter-spacing:.1em;text-transform:uppercase;color:var(--muto);
          white-space:nowrap;line-height:normal}
.divisore.muto{margin:10px -16px}
.in-fondo{display:flex;flex-direction:column;gap:2px}

/* ⚠️ Senza una regola, un `<a>` esce **blu di sistema e sottolineato** dentro
   un pannello disegnato — l'ho visto sulla pagina del secondo fattore, dove
   «Usa un codice di recupero» e «Annulla» sembravano incollati da un'altra
   pagina. Il colore di un link è una scelta, non un default da ereditare. */
a{color:var(--acc)}
a:hover{text-decoration:underline}
/* ⚠️ `.esci` **non** è più qui: si sottolinea apposta (vedi sopra), e questa
   riga gliela toglieva vincendo per posizione. */
.voce,.bott{text-decoration:none}

/* ── il campo password con l'occhio ─────────────────────────────────────── */
.con-occhio{position:relative;display:block}
.con-occhio input{padding-right:46px}
/* ⚠️ Il pulsante è dentro il campo, quindi NON eredita lo stile dei bottoni
   (larghezza piena, fondo accento): si azzera tutto quello che il foglio dà a
   `button`, o esce un rettangolo verde sopra il campo. */
/* ⭐ Un campo che va mascherato ma NON deve finire nel gestore di password.
   `type="password"` è due cose in una: i pallini **e** «questa è una
   credenziale del sito». Dove serve solo la prima — una frase che non esce
   dalla pagina, un codice usa-e-getta — il tipo resta `text` e i pallini li
   fa questa regola. ⚠️ La maschera è in CSS apposta: senza JavaScript i
   pallini ci sono lo stesso, e si perde solo l'occhio. */
.mascherata { -webkit-text-security: disc }
.mascherata.svelata { -webkit-text-security: none }

.occhio{position:absolute;top:0;right:0;width:44px;height:100%;margin:0;padding:0;
        display:grid;place-items:center;background:none;border:0;border-radius:0 9px 9px 0;
        cursor:pointer;color:var(--fioco)}
.occhio svg{width:19px;height:19px}
/* ⚠️ Un'emoji 👁 esce a colori e stona dentro un modulo disegnato: l'icona è un
   SVG che segue il colore del testo. Il taglio compare quando la password è
   nascosta — cioè il pulsante mostra lo stato ATTUALE, non l'azione: è la
   convenzione che tutti hanno visto, e ribaltarla confonde. */
.occhio:hover{color:var(--testo)}
.occhio .taglio{transition:opacity .12s}
.occhio.aperto{color:var(--acc)}
/* il taglio lo comanda occhio.js: vedi il commento là */
.occhio:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}

.spunta{display:flex;align-items:center;gap:9px;margin:16px 0 0;font-size:14px;
        text-transform:none;letter-spacing:0;color:var(--testo);cursor:pointer}
.spunta input{width:17px;height:17px;accent-color:var(--acc);margin:0;flex:none}
.sotto-modulo{margin:16px 0 0;text-align:center;font-size:13.5px}
.bott-largo{display:block;width:100%;margin-top:20px;padding:12px;border-radius:9px;
            background:var(--acc);color:var(--acc-testo);font-size:15px;font-weight:700;
            text-align:center;text-decoration:none}
.aiutino{margin:6px 0 0;font-size:12.5px;color:var(--fioco)}

/* ⭐ Sale qui dal foglio del Giardino il giorno in cui è servita a un
   secondo posto: una regola che due parti dell'applicazione si copiano è
   una regola del guscio, e la seconda copia è quella che diverge. */
/* ⚠️ **Il testo per chi non vede resta nel documento**, non si nasconde con
   `display:none`: quello lo toglie anche ai lettori di schermo, cioè proprio a
   chi doveva leggerlo. Si porta fuori dallo schermo, che è un'altra cosa. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mono{font-family:var(--mono)}

/* ── la home: i moduli come schede ──────────────────────────────────────── */
.moduli{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.modulo{display:block;background:var(--card);border:1px solid var(--bordo);
        border-radius:var(--raggio);padding:18px;text-decoration:none;color:var(--testo)}
.modulo:hover{border-color:var(--acc);text-decoration:none}
.modulo svg{width:26px;height:26px;color:var(--acc);display:block;margin-bottom:12px}
.modulo .nome{display:block;font-size:17px;font-weight:700}
.modulo .descrizione{display:block;margin-top:3px;font-size:13.5px;color:var(--fioco)}

/* ── le cose da sistemare ───────────────────────────────────────────────── */
.avvisi{margin-bottom:18px}
.avvisi h2{margin:0 0 12px}
.da-fare{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:9px;
         text-decoration:none;color:var(--testo);background:color-mix(in srgb,var(--fioco) 8%,transparent)}
.da-fare + .da-fare{margin-top:8px}
.da-fare:hover{text-decoration:none;background:color-mix(in srgb,var(--fioco) 14%,transparent)}
.da-fare .perche{font-size:13.5px;color:var(--fioco)}
/* Il pallino distingue «va fatto» da «va fatto adesso» senza aggiungere parole
   — ma il colore da solo non è un'informazione: la ragione è scritta accanto. */
.da-fare .pallino{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;
                  background:var(--fioco)}
.da-fare.grave .pallino{background:var(--err);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 20%,transparent)}
/* ⭐ «Oggi» non è «da sistemare»: il pallino prende l'accento invece del grigio
   di una cosa in sospeso, perché è una cosa che **sta per succedere**, non una
   che aspetta di essere riparata. */
.da-fare.e-oggi .pallino{background:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent)}
/* ⚠️ La card di oggi sta sopra quella dei guasti e si stacca da lei: due
   riquadri uguali uno sull'altro si leggono come un elenco solo, ed è proprio
   la confusione che tenerli separati doveva togliere. */
.oggi-card{margin-bottom:16px}

/* ── un modulo con le sue sezioni: nome a sinistra, chevron a destra ──────
   ⚠️ Il chevron **non** è dentro il link del modulo: è un pulsante suo, con la
   sua area di tocco. Annidato, ogni clic sulla freccia avrebbe anche aperto il
   modulo — e la freccia sarebbe sparita dal giro del Tab. */
/* ── un modulo con le sue sezioni: la riga intera apre e chiude ───────────
   ⭐ **Un bersaglio, un'azione.** Prima il nome era un link e il chevron un
   pulsante accanto: premendo sul nome — che è il posto in cui si preme — si
   finiva su una pagina invece di vedere le sezioni. Ora la riga è un `<button>`
   solo, e la pagina del modulo è la prima delle sezioni. */
.ramo{display:flex;align-items:center}
.ramo > .voce{flex:1;min-width:0}
/* ⚠️ Un `<button>` non eredita niente dal foglio: font, colore, allineamento e
   fondo vanno rimessi, o esce un rettangolo di sistema in mezzo al menu. */
button.voce{width:100%;margin:0;background:none;border:0;border-left:3px solid transparent;
            font-family:inherit;font-size:15px;font-weight:600;text-align:left;
            color:var(--voce);cursor:pointer}
button.voce:hover{color:var(--testo);background:color-mix(in srgb,var(--fioco) 10%,transparent)}
button.voce:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
/* ⚠️ Il ramo che contiene la pagina aperta **non cambia colore**: ci ha già
   pensato la freccia girata e la lista aperta sotto. Scurendolo diventava più
   nero dell'antracite di tutte le altre voci, e la barra aveva tre livelli di
   grigio per dire due cose. */
/* Il chevron sta al **bordo destro**, non attaccato al nome: allineato in
   colonna su tutti i moduli si legge come un segno del menu; appeso al testo
   si sposta a ogni riga e sembra parte della parola. */
.chevron{display:grid;place-items:center;width:22px;height:22px;flex:none;
         margin-left:auto;color:var(--muto)}
.chevron svg{width:15px;height:15px;transition:transform .15s}
[aria-expanded="true"] .chevron svg{transform:rotate(90deg)}
.sottovoci{display:flex;flex-direction:column}

/* Una sottovoce di modulo: rientrata sotto il suo, e **con la sua icona**.
   ⚠️⚠️ Qui c'era scritto il contrario — «senza icona: l'icona ripetuta farebbe
   sembrare due voci sullo stesso piano» — ed è una decisione **rovesciata da
   Mario l'08/09/2026**: «ogni voce deve avere un'icona flat». La ragione
   scritta valeva se l'icona fosse stata *la stessa* del modulo; ognuna ha la
   propria, e a distinguere i due piani restano il rientro, il corpo più
   piccolo e la riga di collegamento — tre segni, non uno.
   ⭐ E c'è un guadagno che la nota di prima non vedeva: **da barra compressa**
   le sottovoci erano nomi che sparivano del tutto, perché a 64px resta solo la
   colonna delle icone. Adesso ci sono anche loro.
   ⚠️ L'icona è più piccola di quella del modulo (17 contro 20) e più tenue: il
   piano lo dice anche il segno, non solo il rientro. */
.voce.sottovoce svg{width:16px;height:16px;opacity:.75}
.voce.sottovoce[aria-current] svg{opacity:1}
/* Le sottovoci più fitte ancora: sono un elenco dentro un elenco, e
   allargandole quanto le voci il rientro non basta più a distinguerle. */
/* ⭐ **Lo sfondo comincia dove finisce la linea e arriva squadrato al bordo.**
   Prima era un riquadro arrotondato che partiva da sinistra della linea e la
   inglobava: la linea spariva dentro la macchia, e l'indicatore tornava a
   essere due cose. Ora la voce **comincia** dopo il tratto (`margin-left`), e
   la linea le corre accanto: si toccano senza sovrapporsi.
   ⚠️ Niente raggio a destra: la voce arriva al margine della barra, e un
   angolo tondo lì dentro fa sembrare che manchi qualcosa dopo. */
/* ⚠️ `margin-right` negativo quanto il padding della barra: lo sfondo arriva
   **al bordo**. Fermandosi 16px prima sembrava un riquadro che galleggia, e
   l'angolo vivo a destra — che è quello che lo fa leggere come una fascia —
   non toccava niente. */
.voce.sottovoce{margin-left:24px;margin-right:-16px;padding:5px 26px 5px 10px;
                font-size:14.5px;font-weight:500;line-height:1.55;position:relative;
                border-left:0;border-radius:0}
/* ⭐ **La riga di collegamento È l'indicatore.** Prima la voce aperta aveva un
   suo bordo arrotondato a sinistra, staccato dalla riga verticale che unisce le
   sottovoci: due segni per la stessa cosa, e nessuno dei due la toccava. Ora la
   riga c'è sempre, e **nel punto in cui incontra la voce aperta si ispessisce e
   diventa verde**: è lo stesso tratto, non un secondo elemento — l'occhio segue
   la linea e si ferma dove è cambiata. */
.voce.sottovoce::before{content:"";position:absolute;left:-1px;top:0;bottom:0;
                        width:1px;background:var(--bordo);border-radius:2px}
.voce.sottovoce[aria-current]::before{width:3px;left:-3px;background:var(--acc)}

/* Un modulo che esiste ma non si può ancora aprire. */
.modulo.non-pronto,.voce.non-pronto{opacity:.55;cursor:default}
.modulo.non-pronto:hover{border-color:var(--bordo)}
.pillola-attesa{display:inline-block;margin-top:10px;padding:2px 8px;border-radius:999px;
                font-size:12px;font-weight:700;background:color-mix(in srgb,var(--fioco) 16%,transparent);
                color:var(--fioco)}

/* ── interruttore (DESIGN_SYSTEM §8) ────────────────────────────────────── */
/* ⚠️ L'input non si nasconde con `display:none`: sparirebbe anche dal giro del
   Tab e da chi legge con uno screen reader. Si porta fuori schermo, resta
   focalizzabile, e il focus si vede sulla traccia. */
/* ⚠️ **`text-transform` e `letter-spacing` si azzerano qui, e non è cosmesi.**
   `.interruttore` è una `<label>`, quindi eredita la regola dei nomi di campo:
   MAIUSCOLO SPAZIATO. Ma il suo testo non è il nome di un campo, è una frase —
   «Resta collegato per 90 giorni» — e in maiuscolo va a capo, si legge peggio e
   sembra un'etichetta invece che una scelta. Era così su `/accedi` dal primo
   giorno e non se n'era accorto nessuno: il componente veste sé stesso, o ogni
   schermata che lo usa deve ricordarsi di rimediare (e una se lo dimentica). */
.interruttore{display:flex;align-items:center;gap:11px;margin:16px 0 0;cursor:pointer;
              font-size:14px;color:var(--testo);text-transform:none;letter-spacing:0}
.interruttore input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.interruttore .traccia{position:relative;flex:none;width:38px;height:22px;border-radius:999px;
                       background:var(--bordo);transition:background .16s}
.interruttore .traccia::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
                              border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
                              transition:transform .16s}
.interruttore input:checked + .traccia{background:var(--acc)}
.interruttore input:checked + .traccia::after{transform:translateX(16px)}
.interruttore input:focus-visible + .traccia{outline:2px solid var(--acc);outline-offset:2px}