/*
 * La veste del portale (avvio pacchetto 1 §7.1).
 *
 * Scritto a mano e servito da public/risorse, come i caratteri e il marchio
 * della pagina di apertura: nessun passo di compilazione. Un `npm run build`
 * dimenticato produrrebbe pagine senza veste senza che nulla lo segnali, e
 * starebbe sul percorso del rilascio, dove i difetti costano di piu'.
 *
 * Qui dentro ci sono i sei componenti di §7.1 e nient'altro. Se una pagina
 * chiede qualcosa che qui non c'e', ci si ferma e lo si segnala invece di
 * aggiungere una regola nata da un caso solo.
 *
 * --------------------------------------------------------------------------
 *
 * **GLI ELEMENTI SI VESTONO ANCHE NUDI, E LA CLASSE DISTINGUE LE VARIANTI.**
 *
 * Un elemento vestito **solo** attraverso una classe funziona finche' qualcuno
 * si ricorda di scriverla: il giorno in cui una pagina nuova usa una tabella o
 * un blocco richiudibile senza quel nome, **risponde il browser al posto
 * nostro** — bordo di sistema, freccetta di sistema, corpo di sistema.
 *
 * *E' la stessa forma dell'attributo `required` scritto a mano: una regola che
 * dipende dalla memoria di chi scrive. Chi fa una pagina nuova non deve sapere
 * niente di tutto questo perche' la pagina venga giusta.*
 *
 * Percio' `table`, `details`, `fieldset` e gli altri hanno la loro veste da
 * elemento; `.tabella` e `.rifiuto` restano per **cio' che quella variante ha
 * in piu'**, non per farla esistere.
 */

/* --- I colori, dalla palette approvata (DRF §10.1) --------------------- */

:root {
    /*
     * **La pagina e' scura, e finora il browser non lo sapeva** (punto 6.3).
     *
     * Il foglio dipinge il proprio fondo, ma i **controlli nativi** li disegna il
     * browser: l'icona del calendario dei campi data, la freccetta dei menu a
     * tendina, le barre di scorrimento, il riempimento automatico. Senza questa
     * riga li disegna con la tavolozza chiara, cioe' **scuri su fondo scuro**.
     *
     * *L'icona del calendario c'era e funzionava: non si vedeva. Il difetto e'
     * stato trovato provando a mano il modulo del certificato, e cercando la
     * differenza fra tre pagine che usano lo stesso campo — quando tre pagine si
     * comportano uguale, la risposta non e' in nessuna delle tre.*
     *
     * **Sta qui e non sui campi**: e' una proprieta' della pagina, e vale per
     * ogni controllo nativo che il portale avra' — la stessa scelta della scala
     * dei colori, *si decide dove vive e vale dappertutto*.
     *
     * **Il limite che resta, e non e' nostro.** Un campo `type="date"` mostra e
     * legge la data **nel formato del browser**, non in quello della pagina: a
     * un browser italiano `gg/mm/aaaa`, a uno inglese `mm/gg/aaaa`. Il valore
     * che viaggia e' sempre `aaaa-mm-gg`, quindi il portale non converte niente
     * — ma *un collaudo su un campo data e' verde per chi ha il browser giusto*,
     * ed e' la stessa specie dell'importo scritto `60.00`.
     */
    color-scheme: dark;

    /*
     * **La tavolozza, e il contrasto che ciascun colore tiene** (RNF-013, misurato
     * al punto 7.7).
     *
     * *Prima non era mai stato misurato: la tavolozza e' nata **per somiglianza** —
     * tutto virato al verde — e il testo tenue e' finito **sotto la soglia** senza
     * che nessun numero lo dicesse. Non era un errore: era una misura che nessuno
     * prendeva.*
     *
     * Rapporto **peggiore** di ciascun testo sui tre fondi (`--fondo`,
     * `--superficie`, `--superficie-alta`), con la soglia a **4,5**:
     *
     * | | peggiore | margine |
     * |---|---|---|
     * | `--testo` | 15,09 | ampio |
     * | `--accento` | 12,05 | ampio |
     * | `--attenzione` | 7,65 | ampio |
     * | `--in-ordine` | 7,59 | ampio |
     * | `--manca` | 7,48 | ampio |
     * | `--chiuso` | 5,48 | comodo |
     * | `--testo-tenue` | 4,76 | **stretto** |
     * | `--testo-secondario` | 4,64 | **il piu' stretto** |
     *
     * **Le ultime due righe sono quelle da guardare prima di ritoccare un
     * grigio.** *`IlContrastoDeiColoriTest` le sorveglia e diventa rosso se
     * scendono — ma il numero sta qui perche' **chi cambia un colore legge il
     * foglio, non i collaudi**.*
     *
     * **E il collaudo verifica solo le coppie dichiarate**: un testo dentro una
     * fascia colorata o sopra un pulsante pieno gli sfugge. *Un verde li' non dice
     * «il portale rispetta RNF-013»: dice che questa tabella lo rispetta.*
     */
    --fondo: #0b0f0a;
    --superficie: #141a11;
    --accento: #c8e86a;
    --bordo: #2a331f;
    --bordo-attivo: #3e4c2b;
    --testo: #f2f5ec;
    --testo-secondario: #7e8c6b;
    /*
     * **Il testo tenue, e il verde che portava era sotto la soglia** (punto 7.7).
     *
     * *Era `#5f6b51` — un grigio virato al verde come tutto il resto della
     * tavolozza — e **contro i tre fondi del portale dava fra 2,94 e 3,41 a uno**:
     * RNF-013 ne chiede **4,5**. Non era una scelta di gusto contro una regola: era
     * una regola non rispettata, e nessuno l'aveva misurata.*
     *
     * **`#898989` sta fra 4,76 e 5,52 a uno** sugli stessi tre fondi. *Il grigio
     * neutro perde la parentela con il verde della tavolozza, e la guadagna con
     * cio' che deve fare: **stare sotto la soglia dell'attenzione senza scendere
     * sotto quella della leggibilita'**.*
     *
     * **Il margine e' 4,76 sulla superficie alta**, cioe' **ventisei centesimi**: e'
     * la coppia piu' stretta di tutta la tavolozza, e chi ritocca questo colore la
     * sta toccando. *`IlContrastoDeiColoriTest` sorveglia quel margine e diventa
     * rosso quando scende — ma il numero sta scritto qui perche' **chi cambia il
     * colore lo legge prima di eseguire i collaudi, non dopo**.*
     */
    --testo-tenue: #898989;

    /*
     * **Il verde degli stati, che non e' quello dei comandi** (punto 7.7).
     *
     * *La scala diceva «**In ordine** (`--accento`)», cioe' **la stessa tinta di
     * «Carica il nuovo»**: «va tutto bene» e «premi qui» con lo stesso colore. **E'
     * la seconda volta che questa confusione produce un difetto** — la prima e' il
     * `+` che sull'ambra spariva.*
     *
     * **Piu' spento e piu' verde dell'accento**: uno stato in ordine non chiede
     * niente, e non deve tirare l'occhio come un comando. *E' la stessa ragione per
     * cui `--chiuso` e' spento apposta.*
     */
    --in-ordine: #7bbf7a;

    --attenzione: #ef9f27;
    --manca: #f09595;
    --chiuso: #8c9880;

    /*
     * **LE TRE TINTE DEI LIVELLI DI ISCRIZIONE** (D73), e sono di **specie diversa**
     * da quelle qui sopra.
     *
     * *La scala dice **come sta** una cosa — in ordine, attenzione, manca, chiuso.
     * Queste dicono **quale** cosa e': non sono stati, sono nomi. Per questo non
     * entrano nella legenda dei colori e non si mescolano alle pastiglie di stato —
     * un Gold accanto a un «In attesa» non deve leggersi come due stati.*
     *
     * **La misura, presa prima di scegliere i valori** (RNF-013, soglia 4,5:1), sui
     * tre fondi del portale:
     *
     * | | fondo | superficie | superficie-alta | peggiore |
     * |---|---|---|---|---|
     * | `--argento` | 11,88 | 10,89 | 10,23 | 10,23 |
     * | `--oro` | 11,61 | 10,64 | 10,00 | 10,00 |
     * | `--bronzo` | 5,27 | 4,83 | **4,54** | **4,54** |
     *
     * **`--bronzo` passa per quattro centesimi, ed e' il margine piu' stretto della
     * tavolozza** — piu' stretto di `--testo-tenue`, che teneva il primato con 4,76.
     * *Chi ritoccasse il bronzo per renderlo piu' caldo lo porterebbe sotto soglia:
     * il ritocco si fa per ragioni estetiche, che non guardano il numero, e questa
     * riga e' l'unica cosa che glielo dira' prima.*
     *
     * **E la pastiglia del livello e' a CONTORNO e non piena, per due ragioni che
     * vanno lette insieme.** *La prima e' di significato, ed e' quella qui sopra. La
     * seconda e' misurata: `.stato` mette il testo sopra `color-mix(… 18%,
     * transparent)`, cioe' **sopra una diluizione di se' stesso**, e li' il bronzo
     * scende a **3,59:1** — sotto soglia. **Armonizzare le due forme, un giorno,
     * porterebbe il bronzo fuori regola senza che niente protesti**:
     * `IlContrastoDeiColoriTest` dichiara di se' di non guardare «un testo dentro una
     * fascia colorata».*
     */
    --bronzo: #b07a4a;
    --argento: #c3ccd4;
    --oro: #f0c419;

    /*
     * Il verde bosco #6C9C00 non compare: con testo chiaro sopra darebbe un
     * contrasto di 2,98:1 (RNF-013). Dove serve un pieno si usa l'accento con
     * testo scuro, ed e' l'unica regola di colore che vale sempre.
     *
     * **Ne discende che la scala dei colori dice gli stati, non i comandi**: un
     * pulsante e' dell'accento **anche dentro una fascia di un altro colore**.
     * [punto 6.3]
     *
     * *Un pieno ambra o rosso non e' mai stato misurato, e RNF-013 pretende il
     * contrasto. Ma la ragione vera non e' la misura: farebbe dire al colore di
     * un pulsante **due cose insieme** — che cosa fa, e quanto e' grave cio' che
     * gli sta accanto. Due significati su un segno solo e' come si perde un
     * vocabolario.*
     *
     * **Sta scritto qui perche' a schermo sembra un errore**: un pulsante verde
     * dentro un avviso ambra si «corregge» al primo sguardo, e con lui
     * sparirebbe la sola forma piena che il portale abbia misurato.
     */
}

/* --- Il vocabolario, letto dai mockup (punto 12) ----------------------- */

/*
 * **Sono STIME lette da un'immagine, non misure.** I mockup sono sette
 * fotografie dentro un documento: da li' si ricava che i pannelli sono piu'
 * arrotondati dei campi e che le righe di elenco stanno su una superficie
 * appena piu' chiara — non che il raggio sia sedici e non quattordici.
 *
 * *Va detto perche' il giorno in cui guarderemo una pagina e correggeremo un
 * valore, nessuno debba chiedersi se stia contraddicendo un dato certo: qui
 * dentro non ce n'e' nessuno. Il dato certo sono i colori, che vengono dalla
 * palette approvata del DRF, e stanno nel blocco qui sopra.*
 *
 * **Sono un vocabolario e non uno stile**: nomi che le pagine usano, cosi' due
 * pagine non inventano due ritmi diversi. Se una pagina ha bisogno di una
 * misura che qui non c'e', ci si ferma e lo si segnala — vale la stessa regola
 * dei sei componenti.
 */
:root {
    /*
     * **Tre superfici e non due.** Il fondo, il pannello, e la riga dentro il
     * pannello: e' la terza a rendere leggibili gli elenchi dei mockup — il
     * diario, i documenti, le voci con la pastiglia. Con due sole superfici
     * quelle righe si appiattiscono e l'elenco diventa un muro.
     */
    --superficie-alta: #1a2016;

    /*
     * **Tre raggi e non uno.** Nei mockup i pannelli sono piu' arrotondati dei
     * campi, e le pastiglie sono ovali: un raggio unico farebbe sembrare tutto
     * lo stesso oggetto, e la gerarchia fra contenitore e contenuto sparirebbe.
     */
    --raggio-scheda: 16px;
    --raggio-campo: 10px;
    --raggio-pastiglia: 999px;

    /*
     * **L'imbottitura della scheda sta qui e non nella scheda**, perche' non la
     * usa solo lei: la fascia dei passi ne esce con un margine negativo, e il
     * piede la eredita. *Scritta a mano in due punti coincideva per fortuna —
     * il giorno in cui uno dei due cambiasse, la fascia rientrerebbe della
     * differenza e nessuno saprebbe perche'.*
     *
     * Due rem e' la stima letta dal mockup, dove il titolo sta visibilmente piu'
     * lontano dal bordo di quanto stesse da noi.
     */
    --imbottitura-scheda: 2rem;

    /*
     * **L'altezza dell'etichetta dentro una riga.**
     *
     * In una riga i campi partono dall'alto, e se un'etichetta va a capo il suo
     * campo scende di una riga rispetto agli altri: e' accaduto con «La
     * provincia di nascita» e con «Importo versato», e sarebbe tornato su ogni
     * riga in cui un'etichetta e' piu' lunga della propria colonna.
     *
     * Riservando **due righe a tutte**, i campi partono dalla stessa quota. Il
     * costo e' un po' d'aria dove l'etichetta e' corta — *visibile e uguale
     * ovunque*, mentre il disallineamento e' casuale e dipende da quanto e'
     * lungo un testo: fra un difetto sempre uguale e uno che appare quando meno
     * te lo aspetti, il primo e' governabile.
     */
    --altezza-etichetta: 2.75rem;

    /*
     * Una scala sola per le distanze: due pagine, un ritmo.
     *
     * **I due gradini grandi sono stati stretti al punto 6.3** — 24→20 e 32→28 —
     * perche' l'area del socio respirava troppo: per vedere tre documenti si
     * scorreva. *Si cambia qui e vale dappertutto: stringere solo su quella
     * pagina avrebbe dato all'area e al cruscotto due ritmi diversi, e la
     * prossima pagina sarebbe nata con la spaziatura vecchia.*
     *
     * **Il confine, perche' il rimedio non diventi il difetto.** I gradini
     * piccoli non si toccano: `--spazio-3` e' l'aria **dentro** le righe di un
     * elenco, e `--spazio-4` e' il vuoto **fra** due riquadri affiancati — quello
     * fa il lavoro di dire che sono due cose diverse. *Su un elenco di documenti,
     * righe attaccate diventano un blocco in cui non si distingue dove finisce
     * l'una.*
     */
    /*
     * **Il piu' piccolo: due cose che si leggono come una** (punto 7.7).
     *
     * *La scala partiva da quattro pixel, che e' gia' una separazione: una riga di
     * dettaglio staccata cosi' dal fatto si legge come **una frase a parte**. Qui
     * serve il contrario — che si legga come sua.*
     */
    --spazio-minimo: 2px;

    --spazio-1: 4px;
    --spazio-2: 8px;
    --spazio-3: 12px;
    --spazio-4: 16px;
    --spazio-5: 20px;
    --spazio-6: 28px;

    /*
     * **La misura di un'icona di riga** [punto 7.58]: *la porta `.icona`, e la usa
     * anche il rientro di cio' che va a capo sotto una riga — **il testo si allinea
     * al testo**, non al bordo. Scritta due volte, il giorno in cui l'icona cambia
     * il rientro resterebbe indietro.*
     */
    --misura-icona: 1.25rem;

    /* Cinque gradi di testo, come nei mockup. */
    --testo-minuto: 13px;
    --testo-base: 15px;
    --testo-medio: 17px;
    --testo-grande: 22px;
    --testo-cifra: 32px;

    /*
     * Non ci sono misure per la **barra laterale** ne' per la **tabella**:
     * arrivano con le pagine che le hanno, e inventarle adesso significherebbe
     * fissare numeri su qualcosa che nessuno ha ancora guardato.
     */
}

/* --- I caratteri, dal nostro dominio (RNF-016) ------------------------- */

@font-face {
    font-family: 'Inter';
    src: url('inter-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2192, U+2212;
}

@font-face {
    font-family: 'Inter';
    src: url('inter-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

/* --- La pagina --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 2rem 1rem 3rem;
    background: var(--fondo);
    color: var(--testo);
    font: 400 1rem/1.5 'Inter', system-ui, sans-serif;
}

h1 {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/*
 * **Il titolo, e il comando che gli sta a destra.**
 *
 * Nel mockup del libro soci «Registra delibera» e' in cima a destra, alla quota
 * del titolo: e' **una porta verso un'altra pagina**, non un atto di questa —
 * e in fondo, dopo la tabella, sarebbe un comando che si trova solo scorrendo.
 *
 * *Va a capo su uno schermo stretto invece di stringersi: un pulsante
 * schiacciato accanto a un titolo spezzato e' il modo in cui due elementi
 * corretti diventano una riga sbagliata.*
 */
.intestazione-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
}

/*
 * **I titoletti di sezione sono etichette, non titoli** (punto 12).
 *
 * Nei mockup «Chi sei», «Dove abiti», «Come contattarti» sono piccoli e tenui:
 * separano i gruppi di campi senza competere con il titolo della pagina, che e'
 * l'unico che deve saltare all'occhio.
 *
 * *Un titoletto grande quanto un titolo divide la pagina in tre pagine: chi la
 * guarda non sa piu' che cosa sta compilando.*
 */
h2 {
    margin: var(--spazio-6) 0 var(--spazio-3);
    color: var(--testo-secondario);
    font-size: var(--testo-base);
    font-weight: 600;
    letter-spacing: .02em;
}

/*
 * Il titolo di un riquadro: un piano sotto le intestazioni di sezione. Nei
 * mockup e' il nome della persona in cima alla propria scheda, quindi si legge
 * come un nome e non come un'etichetta.
 */
h3 {
    margin: 0 0 var(--spazio-3);
    color: var(--testo);
    font-size: var(--testo-medio);
    font-weight: 600;
}

/*
 * **La linea che chiude una sezione.**
 *
 * Serve dove due blocchi di rango diverso si toccano: nella delibera separa gli
 * estremi del verbale — che valgono per l'atto intero — dall'elenco dei
 * candidati. *L'alternativa era dare al verbale un riquadro come quello dei
 * candidati, e avrebbe detto che sono fratelli: non lo sono, uno inquadra
 * l'altro.*
 *
 * L'aria sopra e sotto viene dal vocabolario, e non e' uguale: sopra chiude,
 * sotto apre — e cio' che apre sta piu' vicino a cio' che introduce.
 *
 * **Vestita e non lasciata al browser**, che le darebbe un rilievo di sistema:
 * e' la seconda applicazione della regola nata dal censimento.
 */
hr {
    margin: var(--spazio-6) 0 var(--spazio-5);
    border: 0;
    border-top: 1px solid var(--bordo);
}

a {
    color: var(--accento);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

/*
 * Il contorno di messa a fuoco non si toglie mai: chi naviga da tastiera deve
 * sapere dove si trova, e toglierlo e' il modo piu' rapido di rendere una
 * pagina inutilizzabile senza che nessuno se ne accorga guardandola.
 */
:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

/* --- Componente: intestazione con il marchio --------------------------- */

/*
 * Due trattamenti, ed e' una regola per le pagine future: **fuori** — le
 * pagine che si aprono senza essere entrati — il marchio e' grande e centrato
 * sopra la scheda; **dentro** e' piccolo, a sinistra, in una barra che regge
 * anche il nome della sezione.
 *
 * Nei mockup il marchio di fuori stava dentro un cerchio, ma quel cerchio
 * conteneva le tre lettere: `marchio.svg` e' il logo intero — figura piu' nome
 * — largo quasi quattro volte la propria altezza, e in un cerchio non ci sta.
 * Resta la distinzione, cambia la forma con cui si ottiene.
 *
 * Il marchio e' una maschera e non un <img> (RNF-026): resta in cache fra le
 * pagine e prende il colore da qui, senza un file per ogni tinta.
 */
.marchio {
    display: block;
    background: currentColor;
    mask: url('marchio.svg') no-repeat center / contain;
    -webkit-mask: url('marchio.svg') no-repeat center / contain;
}

.intestazione-fuori {
    margin: 0 auto 1.5rem;
    max-width: 26rem;
    text-align: center;
    color: var(--accento);
}

.intestazione-fuori .marchio {
    width: 11rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
}

/*
 * **LA VIA DI RITORNO AL SITO PUBBLICO** [28/08].
 *
 * Sta in fondo e non accanto all'insegna, ed e' la ragione per cui non disturba:
 * *chi e' sulla pagina di accesso per entrare guarda i campi; chi non sa piu' dove
 * andare scorre fino in fondo e la trova.*
 *
 * **Si chiamava `.piede-fuori` e compariva solo fuori dall'accesso.** *Il nome e la
 * condizione sono caduti insieme: anche in area riservata non c'era nessuna uscita,
 * e un nome che dice «fuori» su un elemento che sta anche dentro e' la specie che
 * il progetto toglie da giorni.*
 *
 * **Stessa misura della scheda** — `26rem`, come `.intestazione-fuori` — cosi'
 * cade sotto il modulo e non a mezza pagina.
 *
 * `--testo-tenue` e non `--accento`: **e' un'uscita, non un comando**, e non
 * deve contendere l'occhio al pulsante che completa l'accesso. Misurato, 5,52:1
 * su `--fondo`, sopra la soglia di RNF-013. Al passaggio sale a `--testo`, che
 * e' quanto basta per dire che si puo' premere.
 */
.torna-al-sito {
    margin: 2.5rem auto 0;
    max-width: 26rem;
    text-align: center;
}

/*
 * **Dentro la scheda e' larga come il contenuto**, non come il modulo di accesso:
 * `.dentro .lingue` sale a `60rem`, e questa riga la segue. *Senza, la via di
 * ritorno cadrebbe incolonnata al centro sotto una pagina larga il doppio.*
 */
.dentro .torna-al-sito {
    max-width: 60rem;
}

.torna-al-sito a {
    color: var(--testo-tenue);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.torna-al-sito a:hover,
.torna-al-sito a:focus-visible {
    color: var(--testo);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.intestazione-dentro {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 0 auto 1.5rem;
    padding-bottom: 1rem;
    max-width: 60rem;
    border-bottom: 1px solid var(--bordo);
    color: var(--accento);
}

.intestazione-dentro .marchio {
    width: 7.5rem;
    height: 2rem;
    flex: none;
}

/* Il nome della sezione: il nome dell'Associazione lo dice gia' il marchio. */
.sezione {
    color: var(--testo-secondario);
    font-size: .875rem;
}

/*
 * **Chi sta operando** (RNF-053), all'estremita' opposta del marchio: un cerchio
 * con le iniziali e, accanto, il nome con sotto i gruppi.
 *
 * *E' entrata al punto 11 senza veste, ed era una riga di testo lunga in verde
 * acceso: ereditava l'accento — che qui serve al marchio — e si accodava al nome
 * della sezione finche' c'era spazio, andando a capo su due righe verdi.*
 *
 * **La frase «Stai operando come» non si vede piu'**, ed e' lei che faceva
 * rumore: guardando, il nome in alto a destra si spiega da solo. Resta per chi
 * ascolta, che senza di lei sentirebbe un nome e basta.
 *
 * Il nome e' del colore del testo normale e i gruppi sono tenui come una
 * didascalia: **non sono un titolo**, sono la risposta a una domanda che ci si
 * fa solo quando serve — *a nome di chi sto facendo questa cosa?*
 *
 * Le misure vengono dal mockup e sono **stime lette dall'immagine**, non valori
 * dichiarati: 34px il cerchio, 13px il nome, 11px il gruppo.
 */
/*
 * L'ingresso al cruscotto sta all'estremita' destra, prima di chi opera: e' una
 * via, non un'identita', e le due cose non si mescolano.
 */
/*
 * **Il ritorno al cruscotto: e' un comando, e va colorato come tale.**
 *
 * *Era `--testo-secondario`, lo stesso grigio del nome della sezione che gli sta
 * accanto, mentre ogni altro collegamento del portale e' color accento. Il
 * risultato: finito di lavorare in una coda, l'unica via indietro **sembrava
 * un'intestazione** — c'era e non si vedeva, la stessa specie dell'icona del
 * calendario.*
 *
 * Resta minuto, perche' e' un comando di servizio: **si deve trovare, non farsi
 * guardare.**
 */
.al-cruscotto {
    margin-left: auto;
    color: var(--accento);
    font-size: var(--testo-minuto);
}

.al-cruscotto:hover {
    color: var(--testo);
}

/* Con l'ingresso accanto, e' lui a spingere: qui il margine non serve piu'. */
.al-cruscotto + .chi-opera {
    margin-left: 0;
}

.chi-opera {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--spazio-2);
}

/*
 * **L'uscita, in fondo all'intestazione e accanto all'identita'.**
 *
 * *Quando non c'e' nessuno che opera — cioe' mai, dietro l'accesso — resta
 * comunque all'estremo destro: `margin-left: auto` non dipende da cio' che le sta
 * prima.* Il pulsante e' minuto perche' e' un comando di servizio: **si deve
 * trovare, non farsi guardare.**
 */
.intestazione-dentro .uscita {
    margin-left: auto;
    flex: none;
}

.chi-opera + .uscita {
    margin-left: var(--spazio-3);
}

/*
 * Il cerchio: fondo appena staccato da quello della barra, bordo sottile,
 * iniziali nel colore d'accento. **Non e' una pastiglia colorata** — l'accento
 * sta nelle lettere, non dietro.
 */
.chi-opera .iniziali {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--bordo);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--accento);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Nome e gruppo incolonnati a sinistra, non centrati sul cerchio. */
.chi-opera .identita {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
}

.chi-opera .nome {
    color: var(--testo);
    font-size: 13px;
}

/*
 * **Ha un nome suo, e non `gruppi`.**
 *
 * `gruppi` veste l'elenco a pastiglie della pagina dei permessi, e finche' la
 * riga in intestazione ha portato quella classe si e' presa anche il margine
 * dell'elenco: dodici pixel sopra, che alzavano il blocco di testo e lo facevano
 * scendere rispetto al cerchio. *Il cerchio era centrato davvero — era il testo
 * a essere piu' alto di quanto sembrasse.*
 *
 * Non si e' corretto con un `margin: 0` qui dentro: la collisione sarebbe
 * rimasta, e il contorno o il fondo aggiunti domani alle pastiglie sarebbero
 * arrivati anche qui **senza che nulla lo segnali**.
 */
.chi-opera .suoi-gruppi {
    color: var(--testo-tenue);
    font-size: 11px;
    white-space: nowrap;
}

/*
 * **Si sente e non si vede.**
 *
 * Non e' `display: none` ne' `visibility: hidden`: quelli tolgono l'elemento
 * anche a chi ascolta, che e' l'opposto di cio' che serve. Il testo resta nel
 * flusso, ridotto a un punto e ritagliato.
 */
.solo-per-chi-ascolta {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Su schermi stretti scende sotto il marchio invece di stringere la sezione. */
@media (max-width: 40rem) {
    .intestazione-dentro {
        flex-wrap: wrap;
    }

    .chi-opera {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        text-align: left;
    }
}

/* --- La scheda --------------------------------------------------------- */

.scheda {
    margin: 0 auto;
    padding: var(--imbottitura-scheda);
    max-width: 26rem;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: .875rem;
}

.dentro .scheda,
.larga {
    max-width: 60rem;
}

.sottotitolo {
    margin: 0 0 1.5rem;
    color: var(--testo-secondario);
}

/* --- Componente: le domande a un elenco -------------------------------- */

/*
 * **La casella e il suo comando stanno sulla stessa riga**, e il comando si
 * appoggia in basso: sopra la casella c'e' un'etichetta, e allineando in alto il
 * pulsante finirebbe accanto alla parola invece che accanto a cio' che fa.
 *
 * **La casella cede per prima.** Su schermo stretto il pulsante non si stringe —
 * ha una parola dentro — mentre la casella si allarga fin dove c'e' posto e va a
 * capo solo quando non ce n'e' piu'. *E' l'ordine in cui si guardano: prima
 * dove si scrive.*
 */
.domande {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spazio-3);
    margin-bottom: var(--spazio-3);
}

/*
 * Il campo perde il margine che porta dentro ai moduli: qui a separare e' lo
 * spazio della riga, e sommandoli il pulsante si scollerebbe dalla casella.
 */
.domande .campo {
    flex: 1 1 22rem;
    margin: 0;
}

/*
 * **La fila dei filtri.** Sono collegamenti — ognuno e' un'altra domanda allo
 * stesso elenco — e si vestono da pastiglia perche' **una sta accesa**: la fila
 * dice sempre che cosa si sta guardando, e chi arriva da un collegamento altrui
 * non lo deve indovinare dall'elenco.
 *
 * *Non riusa `.pastiglia`, che in questo portale e' il numero dentro a una
 * pillola — la coda del riepilogo, il conteggio della delibera. Stessa forma,
 * altro mestiere: una porta un numero e non si preme, queste portano una parola
 * e si premono.*
 */
/*
 * **Le file sono piu' d'una, e ciascuna porta il proprio nome** [RF-141, RF-142].
 *
 * *Il libro soci ne ha tre — che cosa manca, livello, chi — e l'anagrafica due.
 * **Senza un nome visibile si leggerebbero come una fila sola andata a capo**, e
 * chi guarda non saprebbe che sta facendo tre domande invece di una.*
 *
 * **Il nome e' un trasloco e non un'aggiunta**: *`aria-label` lo diceva gia' a chi
 * ascolta la pagina e a nessun altro. Adesso e' un elemento con un identificativo,
 * e la fila lo indica con `aria-labelledby` — **una casa sola invece di due**.*
 *
 * *`align-items: baseline` e non `center`: il nome e le pastiglie hanno altezze
 * diverse, e allineati al centro il nome galleggia di un pixel su ogni fila.*
 */
/*
 * **La barra dei filtri delle tre liste del cruscotto** [punti 7.97, 7.98, 7.99].
 *
 * *Nata per il libro soci, dove gli assi sono sei e le pastiglie andrebbero a capo,
 * e passata alla vista «Tesseramenti» e all'anagrafica nei due punti successivi.*
 * **Le file di pastiglie che c'erano prima sono uscite**: la nota accanto alle regole
 * che le disegnavano dice che cosa e' rimasto vivo e perche'.
 *
 * **Tutte della stessa larghezza, che vadano su una riga o su due** [difetto visto a
 * occhio, punto 7.97].
 *
 * *Qui c'era `display: flex` con `flex: 1` su ciascuna: **su una riga sola tornava**,
 * e appena una andava a capo `flex-grow` le dava **tutto lo spazio residuo della sua
 * riga**. La sesta — «Chi» — usciva larga quanto tre, e la fila sembrava rotta.*
 *
 * **La griglia non ha quel difetto per costruzione**: *`auto-fit` misura **le
 * colonne**, non gli elementi, e chi finisce da solo sull'ultima riga occupa **una
 * colonna** come gli altri.* *`minmax` tiene la larghezza minima che serve a non
 * troncare le parole, e `1fr` divide il resto in parti uguali.*
 *
 * *Il comando e «Azzera» sono celle come le altre: **stanno in fondo alla scelta**, e
 * `align-items: end` li allinea al piede delle tendine invece che alla loro etichetta.*
 */
.filtri-a-tendina {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    align-items: end;
    gap: var(--spazio-3);
    margin: 0 0 var(--spazio-4);
}

/*
 * *L'etichetta dell'asse ha ereditato la veste del nome di una fila — maiuscoletto
 * spaziato, tinta secondaria — perche' **dice la stessa cosa**: di che cosa parla la
 * scelta accanto. **Quella regola non c'e' piu'** (punto 7.99), e i valori vivono
 * qui.*
 */
.filtri-a-tendina .filtro label {
    display: block;
    margin-bottom: var(--spazio-1);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/*
 * **La freccia e' disegnata qui, e non e' un vezzo** [dal mockup]: *quella di sistema
 * e' grigia su ogni motore e **non segue la tavolozza** — accanto a un bordo che si
 * accende d'accento resterebbe l'unico pezzo estraneo della pagina.*
 *
 * *`appearance: none` toglie la freccia del browser: senza, se ne vedrebbero due.*
 */
/*
 * *`select.tendina` e non `.tendina`, e serve: **la casella condivisa sta piu' in
 * basso e riscrive `padding` per intero**. Con la sola classe, lo spazio che tiene le
 * parole lontane dalla freccia si perderebbe e il testo finirebbe sotto il disegno —
 * **e' la stessa forma breve che aveva gia' cancellato la freccia**, vista una riga
 * piu' in la'.*
 */
select.tendina {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 2.125rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237e8c6b' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--spazio-3) center;
    background-size: 11px;
}

/*
 * **Il bordo si accende quando quel filtro sta filtrando** [dal mockup]: *cosi' si
 * vede **quali** assi stanno restringendo senza leggerli uno per uno — con sei
 * tendine, «che cosa sto guardando» e' una domanda che si fa a colpo d'occhio.*
 *
 * *Si accende il bordo e la parola, non il fondo: **non e' uno stato del registro, e'
 * una scelta di chi guarda** — un fondo pieno d'accento direbbe «attenzione» dove il
 * portale dice «attenzione» per altro.*
 */
.tendina.scelta {
    border-color: var(--accento);
    color: var(--accento);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c8e86a' stroke-width='1.6' stroke-linecap='round'/></svg>");
}

/*
 * *«Azzera i filtri» e' un collegamento e sta in fondo alla fila, dove finisce la
 * scelta: **non manda niente**, riporta il registro a com'era.*
 */
.filtri-a-tendina .azzera {
    color: var(--accento);
    font-size: var(--testo-minuto);
    font-weight: 600;
    /* *Al piede della casella accanto, non al suo bordo: e' l'altezza del testo dentro la tendina.* */
    padding-bottom: .625rem;
}

/*
 * **Le regole della fila di pastiglie sono uscite al punto 7.99**, e con loro il
 * componente che la disegnava.
 *
 * *`.fila-filtri`, `.file-filtri` e `.nome-fila` servivano il libro soci,
 * l'anagrafica e la vista «Tesseramenti». **Le tre liste sono passate alle tendine
 * in tre punti** — 7.97, 7.98, 7.99 — e da qui non le usa piu' nessuno.*
 *
 * **`.filtri` invece resta, ed e' stato verificato prima di toccarlo**: *il giornale
 * del fascicolo ha ancora due file di pastiglie — il tipo di atto e l'anno — e resta
 * fuori dalla sequenza perche' non e' una lista del cruscotto e le sue voci nascono
 * dai dati. La ragione per esteso sta in `STATO.md`.*
 */
.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-2);
    margin: 0 0 var(--spazio-5);
}

/*
 * **Il pallino della tinta, nella fila e nella riga dell'anagrafica** (D73).
 *
 * *E' un'**ancora per l'occhio** e non porta significato da solo: la parola gli sta
 * sempre accanto (RNF-013). **Per questo e' `aria-hidden`** — chi ascolta la pagina
 * sente «Gold», e un cerchio senza nome sarebbe rumore.*
 *
 * *Non ha contorno e non ha fondo: **non e' una pastiglia**, e la differenza di
 * forma e' cio' che impedisce di leggerlo come uno stato.*
 */
.pallino-livello {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: middle;

    /*
     * *Il colore viene dalla classe del livello — `.livello-gold` e le sue sorelle
     * — che porta gia' `color`. `currentColor` lo raccoglie invece di ripetere le
     * tre tinte: **una seconda casa di tre colori diverge alla prima cura**.*
     */
    background: currentColor;
}

/*
 * **La riga del livello sotto il nome, nell'anagrafica** (RF-138).
 *
 * *Piccola e tenue: e' cio' che qualifica il nome, non un dato da confrontare fra
 * righe — la stessa specie della data di ammissione nel libro soci.*
 *
 * *Il colore del testo resta `--testo-tenue` e **non la tinta del livello**: in oro
 * peserebbe quanto il nome, e la riga smetterebbe di essere una qualifica per
 * diventare un titolo. **La tinta sta nel pallino**, che e' grande otto pixel.*
 */
.livello-riga {
    display: block;
    margin-top: .15rem;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    font-weight: 400;
}

.filtri a {
    padding: .3125rem .75rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    text-decoration: none;
}

.filtri a:hover {
    border-color: var(--accento);
    color: var(--accento);
}

/*
 * **L'accesa non e' distinta dal solo colore** (RNF-013): ha il fondo pieno, e
 * porta `aria-current` per chi non guarda lo schermo. *Un contorno piu' scuro
 * sarebbe l'unica differenza per chi distingue male le tinte, e la fila
 * smetterebbe di dire che cosa si sta guardando proprio a chi non puo'
 * dedurlo dall'elenco.*
 */
.filtri a.accesa {
    background: var(--accento);
    border-color: var(--accento);
    color: var(--fondo);
    font-weight: 600;
}

/* --- Componente: campo di modulo --------------------------------------- */

/*
 * **Il respiro sta fra i gruppi, non fra i campi.**
 *
 * Nei mockup le righe di campi sono vicine: a separare sono i titoletti di
 * sezione — «Chi sei», «Dove abiti», «Come contattarti» — che hanno sopra di se'
 * lo spazio grande. *Distanziando anche i campi, ogni riga diventa un gruppo a
 * se' e i gruppi veri smettono di distinguersi: la pagina si allunga e non dice
 * piu' niente sulla struttura.*
 *
 * E' una misura del vocabolario e non di una pagina: vale per ogni modulo.
 */
.campo {
    margin: 0 0 var(--spazio-3);
}

/*
 * **L'aria in avanzo sta sopra l'etichetta, non sotto.**
 *
 * L'altezza riservata serve ad allineare i campi; su un'etichetta di una riga
 * sola pero' avanza spazio, e lasciandolo sotto **allontanava l'etichetta dal
 * proprio campo** — un buco fra il nome e la casella che nomina.
 *
 * Le etichette si appoggiano in basso: il campo comincia subito dopo, l'avanzo
 * si accumula sopra dove non separa niente, e tutti i campi della riga restano
 * alla stessa quota.
 */
/*
 * **L'altezza riservata vale anche per una `legend`** [punto 7.109].
 *
 * *E' questa regola a tenere allineati i campi di una riga: l'etichetta si
 * prende `--altezza-etichetta` e si appoggia in basso, cosi' che le caselle
 * comincino tutte alla stessa quota. **Una `legend` non e' una `label`**, e
 * senza questo selettore «Luogo di nascita» partiva piu' in alto degli altri
 * due della sua riga — l'altezza non era riservata da nessuno.*
 */
.riga .campo > label,
.riga .campo > legend {
    display: flex;
    align-items: flex-end;
    min-height: var(--altezza-etichetta);
}

/*
 * **Dentro un campo, una `legend` e' l'etichetta di quel campo** [punto 7.109].
 *
 * *Un gruppo di radio si nomina con `<fieldset><legend>`, che e' la forma che
 * HTML ha per questo — ma la `legend` porta la veste dichiarata piu' sotto, che
 * la fa **piu' grande e piu' marcata** delle etichette accanto: dentro un
 * riquadro di quattro campi si leggerebbe come un titolo, e la domanda che
 * nomina sembrerebbe di rango diverso dalle altre.*
 *
 * **Percio' le due si vestono insieme**, e le due dichiarazioni in coda
 * riportano cio' che la regola di `legend` aveva cambiato: *senza, la specificita'
 * basterebbe per le prime quattro e non per il peso e la spaziatura fra le
 * lettere — un'etichetta quasi uguale alle altre e' peggio di una diversa.*
 */
.campo label,
.campo legend {
    display: block;
    margin-bottom: .375rem;
    color: var(--testo-secondario);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: normal;
}

/*
 * I campi si prendono per **natura e non per elenco**.
 *
 * Fino al punto 1 del pacchetto 2 questa regola nominava i tipi uno per uno —
 * email, password, text — e il primo campo dichiarato altrimenti restava
 * vestito dal browser: sfondo bianco, bordo suo, larghezza sua. E' successo con
 * il cellulare, dichiarato `tel`.
 *
 * Un elenco di tipi e' un elenco da allungare, e il modulo di adesione porta
 * date, numeri e un campo per il file: si sarebbe ripetuto su tre campi
 * diversi. Qui si dice invece il contrario — **tutti i campi**, tranne quelli
 * che una scatola di testo non sono: caselle da spuntare, scelte singole e
 * pulsanti, che hanno una veste propria altrove.
 */
.campo input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button']),
.campo select,
/*
 * **La tendina dei filtri prende questa casella e non se ne fa una** [punto 7.97]:
 * *la veste non e' nuova — e' quella che il portale usa gia' nella trascrizione del
 * tesseramento. **Scriverne una seconda con gli stessi valori** significherebbe due
 * caselle che divergono il giorno in cui una delle due si tocca.*
 */
.tendina,
.campo textarea {
    width: 100%;
    padding: .625rem .75rem;
    /*
     * **`background-color` e non `background`, ed e' la cura di un difetto visto a
     * occhio** [punto 7.97]: *la forma breve **azzera anche lo sfondo disegnato**, e
     * questa regola sta piu' in basso di quella che disegna la freccia della tendina.*
     *
     * **Le sei tendine sembravano campi di testo**: *nessuna freccia, e chi guardava
     * non capiva che si aprissero.* **Nessun collaudo poteva dirlo** — *la classe
     * c'era, il file era giusto, e a cancellare il disegno era una parola in una
     * regola che parla d'altro.*
     */
    background-color: var(--fondo);
    color: var(--testo);
    border: 1px solid var(--bordo);
    border-radius: .5rem;
    font: inherit;
}

/*
 * **Il campo su cui si scrive si accende** [punto 7.62].
 *
 * *Il bordo passava da `--bordo` a `--bordo-attivo`: due verdi scuri a un passo
 * l'uno dall'altro — **su un modulo di venti campi non si vede dove si sta**.*
 *
 * **La tinta e' quella che il portale usa gia' per dire «qui»**: `--accento`, la
 * stessa del contorno di messa a fuoco da tastiera (`:focus-visible`). *Il
 * contorno pero' arriva **solo da tastiera**: chi entra nel campo con un clic non
 * lo vede, e questa riga e' la meta' che mancava.*
 *
 * **E l'alone si ricava dall'accento, non si scrive accanto**: `color-mix` con lo
 * stesso valore — *un secondo verde scritto a mano sarebbe la seconda casa della
 * scala, e il giorno in cui l'accento cambia resterebbe indietro.*
 */
.campo input:not([type='checkbox'], [type='radio'], [type='submit'], [type='button']):focus,
.campo select:focus,
.tendina:focus,
.campo textarea:focus {
    border-color: var(--accento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent);
}

/*
 * **La «veste propria altrove» delle scelte singole, e adesso e' sull'elemento**
 * [punto 7.64].
 *
 * La regola qui sopra esclude caselle e scelte singole dicendo che *«hanno una
 * veste propria altrove»*. **Quell'altrove era una classe — `.campo-scelta` — e
 * la promessa valeva finche' qualcuno si ricordava di scriverla.**
 *
 * *Non se l'e' ricordata il riquadro dei livelli di iscrizione: `.livello` non e'
 * un `.campo-scelta`, e i suoi tre cerchi sono nati **grigi di sistema** in una
 * pagina dove i quattro dei consensi erano verdi. **Due forme nella stessa
 * schermata**, e nessuna delle due scelta da nessuno.*
 *
 * **E' esattamente il difetto che l'intestazione di questo foglio descrive**:
 * *«un elemento vestito **solo** attraverso una classe funziona finche' qualcuno
 * si ricorda di scriverla: il giorno in cui una pagina nuova usa una scelta
 * singola senza quel nome, **risponde il browser al posto nostro**».* La regola
 * c'era, l'applicazione no.
 *
 * **Percio' la vestizione del controllo sta sull'elemento**, e la classe conserva
 * solo cio' che la sua variante ha in piu' — l'allineamento con la riga di testo,
 * che e' una proprieta' della disposizione e non del controllo. *Da qui in avanti
 * una scelta singola nasce vestita ovunque la si metta, e chi disegna un riquadro
 * scegliebile nuovo non deve sapere niente di questa riga perche' valga.*
 *
 * **`accent-color` e non un segno disegnato**, ed e' una decisione: *dipinge il
 * controllo **nativo** — con il suo contorno da tastiera, il suo comportamento
 * con i lettori di schermo, la sua area di tocco. Il segno del mockup ha in piu'
 * la spunta dentro il cerchio, e per averla si sostituirebbe il controllo nativo
 * con uno disegnato **su cinque schermate**, prendendosi la manutenzione di tutto
 * cio' che oggi arriva gratis.*
 */
input[type='radio'],
input[type='checkbox'] {
    accent-color: var(--accento);
}

/*
 * **Il campo del file: il riquadro e' nostro, il pulsante dentro anche.**
 *
 * E' l'unico controllo della pagina che il browser disegna a modo proprio, e su
 * un modulo dove ogni altro campo ha la stessa forma **sembra rotto** — proprio
 * sul gesto finale, dove chi guarda si chiede se stia funzionando.
 *
 * *Si veste il pulsante interno con `::file-selector-button`, e non si nasconde
 * niente. La strada corrente — controllo vero invisibile e un'etichetta travestita
 * sopra — costa la tastiera e la lettura della pagina: il campo sparisce
 * dall'ordine di tabulazione o resta annunciato come qualcos'altro. **Un campo
 * brutto che funziona e' meglio di uno bello che esclude qualcuno**, e qui non
 * serve scegliere.*
 *
 * Resta del browser una cosa sola, e va saputa: la scritta accanto al pulsante —
 * «Nessun file selezionato» — non e' toccabile da nessun foglio di stile, e
 * segue la lingua del browser e non quella della pagina.
 */
.campo input[type='file'] {
    padding: .375rem;
}

.campo input[type='file']::file-selector-button {
    margin-right: .75rem;
    padding: .5rem .875rem;
    background: transparent;
    color: var(--testo);
    border: 1px solid var(--bordo);
    border-radius: .375rem;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.campo input[type='file']::file-selector-button:hover {
    border-color: var(--bordo-attivo);
}

/*
 * Il riempimento automatico del browser, che scavalca la veste.
 *
 * Quando e' il browser a ricompilare un campo — indirizzo, password salvata —
 * si riserva di dipingerlo come vuole: fondo bianco o giallo, testo nero. Non
 * e' un difetto del foglio di stile ed e' voluto dai browser, ma su un fondo
 * scuro produce un campo illeggibile in mezzo agli altri.
 *
 * Il fondo non si puo' cambiare: si copre con un'ombra interna larga quanto il
 * campo, che e' il modo che i browser lasciano. Il colore del testo va detto
 * con la sua proprieta' apposita, e la transizione lunghissima serve a impedire
 * che il fondo del browser ricompaia per un istante.
 *
 * Le due regole sono separate e non unite da una virgola: `:autofill` e
 * `:-webkit-autofill` non li conoscono tutti, e un selettore ignoto in un
 * elenco fa cadere l'intera regola — anche la parte che il browser capirebbe.
 */
.campo input:-webkit-autofill,
.campo input:-webkit-autofill:hover,
.campo input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--testo);
    -webkit-box-shadow: 0 0 0 3rem var(--fondo) inset;
    caret-color: var(--testo);
    transition: background-color 9999s ease-out;
}

.campo input:autofill,
.campo input:autofill:hover,
.campo input:autofill:focus {
    -webkit-text-fill-color: var(--testo);
    box-shadow: 0 0 0 3rem var(--fondo) inset;
    caret-color: var(--testo);
    transition: background-color 9999s ease-out;
}

/* La nota sotto il campo: spiega, non ammonisce. */
/*
 * **La nota d'aiuto porta il suo segno** (punto 12).
 *
 * Nei mockup ogni riga d'aiuto comincia con una «i» in un cerchietto: e' quel
 * segno a distinguerla dal testo della pagina, e a farla riconoscere come una
 * spiegazione prima ancora di leggerla.
 *
 * **Il cerchietto e' disegnato con il bordo e non preso da un carattere**: il
 * simbolo tipografico ⓘ sta fuori dai due sottoinsiemi di Inter che serviamo
 * (RNF-016), quindi il browser andrebbe a pescarlo da un carattere di sistema —
 * diverso su ogni macchina, e su qualcuna assente. *Un segno che appare in tre
 * forme diverse su tre computer non e' un segno.*
 *
 * E' decorativo, quindi resta fuori dal testo letto ad alta voce: chi ascolta
 * sente la spiegazione e non la parola «i».
 */
/*
 * **DUE NOMI, PERCHE' SONO DUE COSE.**
 *
 * `aiuto` dice **come si compila** — «Nella forma gg/mm/aaaa», «Come lo cita il
 * libro dei verbali» — e si legge **mentre** si scrive: sta **sotto** il campo.
 *
 * `avvertenza` dice **che cosa succede se scrivi** — «Lo leggera' la persona nel
 * messaggio che riceve», e finisce nel giornale, che non si corregge: va letta
 * **prima**, quindi sta **sopra** il campo (D51).
 *
 * *Il difetto che ha prodotto questa distinzione non era una nota nel posto
 * sbagliato: era che **nessuna regola diceva quando**. Con un nome solo, la
 * posizione la sceglieva chi scriveva la pagina — e una nota finita sopra un
 * campo di una riga a tre colonne spingeva quel campo piu' in basso degli altri
 * due. Con i due nomi, chi scrive una pagina nuova non deve piu' scegliere.*
 *
 * E non e' una coincidenza che le avvertenze stiano su campi soli in riga:
 * **un'avvertenza riguarda un atto**, e un atto raramente sta in una colonna di
 * tre.
 */
.aiuto,
.avvertenza {
    display: flex;
    align-items: baseline;
    gap: var(--spazio-2);
    margin: .375rem 0 0;
    color: var(--testo-tenue);
    font-size: .8125rem;
}

/*
 * **Un'avvertenza si distingue da una nota, e fino a qui non lo faceva** [prova a
 * occhio del committente, punto 2 del trasferimento].
 *
 * *Il commento qui sopra lo dichiarava gia' — «un aiuto accompagna un campo,
 * **un'avvertenza riguarda un atto**» — e **le due erano identiche a vedersi**:
 * stesso grigio tenue, stesso corpo minuto, stesso distintivo. **Una distinzione
 * dichiarata e mai resa e' una distinzione che nessuno legge**, e chi scriveva
 * `.avvertenza` credeva di aver detto qualcosa.*
 *
 * **Il caso che l'ha trovata**: *nel riquadro del trasferimento l'avvertenza e'
 * **l'unica riga che chiede un'azione** — «il tipo scritto non concorda con il
 * caso riconosciuto» — e stava in mezzo a tre note accessorie, vestita come loro.*
 *
 * **Non e' un allarme, ed e' la parte da non sbagliare** [decisione del
 * committente]. *Niente rosso, niente fondo: **il colore pieno e il corpo del
 * testo**. Un'avvertenza dice «guarda questo», non «qualcosa e' rotto» — e un
 * portale che gridasse ogni volta che ha qualcosa da dire smetterebbe di essere
 * ascoltato quando grida davvero.*
 *
 * *Il distintivo «i» resta condiviso: **e' la stessa famiglia**, ed e' il peso a
 * separarle, non il segno.*
 */
.avvertenza {
    color: var(--testo);
    font-size: var(--testo-base);
}

/*
 * **Un comando non si appoggia all'aiuto che lo precede** [punto 7.52].
 *
 * *La distanza fra i campi e il pulsante che chiude un modulo **non e' scritta
 * sul pulsante**: la porta `.campo`, con il proprio margine sotto. Un aiuto o
 * un'avvertenza pero' e' l'ultima riga di un discorso e **non ha margine
 * sotto** — chiude il campo cui appartiene, non il modulo — e il comando che
 * segue gli finisce contro.*
 *
 * **Cosi' il pulsante sembra appartenere all'aiuto** invece di chiudere l'atto.
 *
 * *Il difetto non e' di una pagina: e' di ogni punto in cui un aiuto sta **fuori**
 * dal proprio `.campo`, e ce n'e' un altro nel fascicolo — il pannello della
 * correzione, dove la riga che spiega perche' i campi sono due su tre e' seguita
 * subito dal comando. **Dentro un `.campo` il difetto non c'e'**, perche' li' a
 * distanziare e' il margine del campo.*
 *
 * La misura e' quella del vocabolario, non un valore scritto qui: e' la stessa
 * che `.campo` lascia sotto di se'.
 *
 * ## E vale anche quando il comando sta dentro un modulo [punto 8 del trasferimento]
 *
 * *Il selettore `+` guarda il **fratello immediato**, e un comando che compie un
 * `POST` sta dentro un `<form>`: **il fratello della nota e' il modulo, non il
 * bottone**, e la distanza non scattava.* **E' il caso del comando che ricomincia
 * una pratica respinta**, dove la nota dice che i fogli vanno ricaricati tutti.
 *
 * ***E' la stessa forma — una nota seguita dal comando che la esegue*** [decisione
 * del committente]: *che il comando stia dentro un modulo e' un dettaglio del
 * **come**, non del **cosa**.*
 *
 * **E l'allargamento futuro non e' accidentale, ed e' il motivo per cui questa riga
 * e' scritta**: *oggi succede in un posto solo — altrove le note stanno dentro i
 * campi, e li' a distanziare e' il margine del campo.* **Il giorno in cui un modulo
 * nascera' sotto una nota, quella distanza e' quella che serve.**
 */
/*
 * **E la famiglia si allarga come quella riga aveva previsto** [punto 2 del diario].
 *
 * *«Il giorno in cui un modulo nascera' sotto una nota, quella distanza e' quella che
 * serve» — e il giorno e' arrivato da un'altra parte: **nel dettaglio di un'uscita la
 * riga «data · tipo · percorso · meteo» e' seguita dalle quattro misure**, e le due si
 * toccavano.*
 *
 * *`.dati` porta `margin: 0`, quindi non c'era niente che le staccasse. **Non serviva una
 * misura nuova**: e' la stessa nota seguita da cio' che le sta sotto.*
 */
/*
 * **E si allarga una terza volta, dallo stesso posto** [punto A del consenso, a occhio].
 *
 * *Nel modulo dell'uscita la nota «sono dati sulla salute…» e' seguita dai tre campi
 * dell'Art. 9 in `.campi-in-fila`, e **le due si toccavano**: quella griglia ha `gap: 0`
 * in verticale, quindi il primo campo comincia dove la nota finisce.*
 *
 * **Nessuna misura nuova**: e' la stessa nota seguita da cio' che le sta sotto, ed e' la
 * terza famiglia che entra in questa riga invece di portarsi un numero proprio.
 */
.aiuto + form,
.avvertenza + form,
.aiuto + .pulsante,
.avvertenza + .pulsante,
.aiuto + .dati,
.avvertenza + .dati,
.aiuto + .campi-in-fila,
.avvertenza + .campi-in-fila {
    margin-top: var(--spazio-3);
}

.aiuto::before,
.avvertenza::before {
    content: 'i';
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    border: 1px solid currentColor;
    border-radius: var(--raggio-pastiglia);
    font-size: .85em;
    font-style: italic;
    line-height: 1;
    transform: translateY(.1em);
}

/*
 * **La nota del certificato porta una croce nel cerchietto** [punto 7.183 · decisione del
 * committente].
 *
 * *Dice che il certificato è non agonistico, sotto il riquadro della pratica: lo stesso
 * cerchietto disegnato delle note, con «+» invece della «i» — si legge come «sanitario» e resta
 * nella famiglia delle note.* **«+» e non ⚕**: *la ragione è quella del cerchietto qui sopra — un
 * carattere fuori dai sottoinsiemi di Inter cambia da macchina a macchina.* **Dritta e non
 * corsiva**, perché una croce inclinata non è più una croce.
 */
.aiuto-sanitario::before {
    content: '+';
    font-style: normal;
}

/*
 * **Una clausola non e' un aiuto** [punto 7.63].
 *
 * *L'aiuto dice **come si compila** un campo; la clausola dice **che cosa si sta
 * dichiarando** — e quella della rappresentanza porta con se' la nullita' della
 * rappresentanza e il rigetto della domanda. Vestite uguali, la seconda si legge
 * come la prima: una nota a margine.*
 *
 * **La veste non e' nuova**: e' quella dell'etichetta dei consensi del passo 3, che
 * sono le sole clausole che il portale aveva. *Cio' che impegna chi legge sta nel
 * colore in cui si legge, non in quello delle note — e **senza il segno ⓘ**, che
 * `.aiuto` mette davanti e che significa «a margine».*
 *
 * **Nasce con un uso solo, ed e' accettabile perche' nomina una forma** — non un
 * caso. *Ma il giudizio va rifatto: **se fra sei mesi la clausola e' ancora una
 * sola, questa non era una regola: era una riga scritta per un caso**, e chi la
 * trova deve poterlo giudicare senza rileggere la storia del deposito.*
 */
.clausola {
    margin-bottom: var(--spazio-4);
    color: var(--testo);
    font-size: .9375rem;
}

.campo-scelta {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0 0 1.25rem;
}

/*
 * *`accent-color` se n'e' andato di qui e sta sull'elemento [punto 7.64]: era la
 * vestizione del **controllo**, e viveva su una classe. **Resta cio' che questa
 * variante ha in piu'** — l'allineamento del cerchio con la prima riga
 * dell'etichetta, che e' una proprieta' della disposizione.*
 */
.campo-scelta input {
    margin-top: .2rem;
}

.campo-scelta label {
    color: var(--testo);
    font-size: .9375rem;
}

/* --- Componente: righe di campi (punto 12) ------------------------------ */

/*
 * **Le righe si dichiarano, non si deducono.**
 *
 * La prima forma di questo componente era una griglia di dodici colonne in cui
 * ogni campo diceva quante occuparne. Le righe non esistevano da nessuna parte:
 * erano il risultato di una somma, e bastava un numero storto perche' i campi
 * scivolassero su quelli vicini — «Sesso» e' finito accanto a «Data di nascita»,
 * che e' un'altra cosa. *Impaginava per riempire lo spazio invece di disporre
 * per significato, e il risultato sembrava intenzionale.*
 *
 * Adesso ogni riga e' un contenitore: **cio' che sta insieme e' scritto**, e un
 * campo non puo' cadere in una riga che non e' la sua. Nei mockup le righe sono
 * gruppi di senso — chi sei, quando e dove sei nato, dove abiti — e non
 * accostamenti di larghezze compatibili.
 *
 * **Mai piu' di tre campi per riga**: oltre, nessuna delle etichette si legge
 * piu' a colpo d'occhio.
 */
.riga {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--spazio-4);
}

/*
 * La larghezza dice **il ruolo del campo, non la sua quota di riga**: la base
 * flessibile e' la larghezza minima ragionevole del contenuto, e lo spazio che
 * avanza si divide fra i campi che possono usarlo.
 */
.riga > .campo {
    flex: 1 1 12rem;
}

/* Un indirizzo, un comune: prendono piu' spazio degli altri della loro riga. */
.riga > .campo-largo {
    flex: 2 1 16rem;
}

/* Due lettere, cinque cifre, un numero civico: non crescono. */
.riga > .campo-corto {
    flex: 0 1 7rem;
}

/*
 * Non c'e' una media query: la base flessibile fa scendere i campi in colonna
 * quando lo spazio non basta, e lo fa **alla larghezza in cui non ci stanno
 * davvero** invece che a una soglia decisa a tavolino.
 */

/* --- Componente: i quattro passi (punto 12) ----------------------------- */

/*
 * **Non e' navigazione**, e la veste lo deve dire: i passi non si aprono
 * cliccandoli, si arriva compilando. Percio' non hanno l'aspetto di
 * collegamenti — nessuna sottolineatura, nessun cambio al passaggio del mouse.
 *
 * Quello corrente e' l'unico chiaro; i fatti e quelli da fare restano tenui, e
 * si distinguono fra loro solo per il segno davanti.
 */
/*
 * **E' una fascia e non una riga di testo**: arriva ai bordi della scheda, con
 * una linea sopra e una sotto, e il titolo della pagina resta fuori.
 *
 * I margini negativi sono la larghezza dell'imbottitura della scheda: e' il modo
 * di uscire dal contenuto senza spostare la scheda stessa.
 */
.passi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spazio-3);
    margin: 0 calc(-1 * var(--imbottitura-scheda)) var(--spazio-5);
    padding: var(--spazio-4) var(--imbottitura-scheda);
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    list-style: none;
    color: var(--testo-tenue);
    font-size: var(--testo-base);
}

/*
 * La lineetta fra un passo e l'altro: separa senza indicare una direzione
 * cliccabile.
 *
 * **A prendersi lo spazio che avanza sono le lineette, non i testi**, come nel
 * mockup: i quattro passi occupano la fascia intera, e le linee si allungano
 * fra l'uno e l'altro.
 *
 * *Il difetto che ha prodotto queste due regole non era una larghezza sbagliata:
 * la lineetta e' un `::before`, cioe' contenuto **dentro** un oggetto del flex e
 * non un oggetto del flex — e l'avanzo era fuori dalla sua portata comunque la
 * si dimensionasse. La domanda che lo ha trovato non e' «quanto e' larga» ma
 * **chi puo' prendersi lo spazio**.*
 *
 * Percio' il passo che ha una lineetta davanti diventa a sua volta un
 * contenitore, con due oggetti dentro: la lineetta cresce, il testo resta della
 * sua larghezza naturale. I tre si dividono l'avanzo in parti uguali, e le tre
 * linee restano lunghe uguali.
 */
/*
 * **Contenitori tutti e quattro, e non solo quelli con la lineetta.**
 *
 * A crescere e' solo chi ha qualcosa da far crescere — il primo non ha lineetta
 * davanti, e allargarlo allargherebbe un vuoto — ma **la distanza dentro un
 * passo e' una sola**: il `gap`. Vestendo contenitore solo i tre, il cerchietto
 * del passo corrente si sarebbe trovato a 20px dal nome li' e a 8px sul primo,
 * cioe' due distanze per la stessa cosa a seconda di dove ti trovi nel modulo.
 *
 * *L'alternativa era tenere gli 8px sottraendo la differenza al margine del
 * cerchietto: non si sarebbe visto niente, e nel foglio sarebbe rimasto **un
 * numero che esiste solo per annullarne un altro**. Quelli si tolgono fra un
 * anno cambiando una cosa che non li stava guardando.*
 */
.passi li {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
}

.passi li + li {
    flex: 1;
}

/*
 * **La misura e' una base, non una larghezza**: quando la fascia si stringe e i
 * passi vanno a capo l'avanzo e' zero, e senza una lunghezza minima la linea
 * sparirebbe lasciando due testi attaccati.
 *
 * Il primo passo non cresce e non deve: non ha lineetta davanti, e allargarlo
 * allargherebbe un vuoto invece di una linea. Dopo l'ultimo non c'e' niente,
 * come nel mockup.
 */
.passi li + li::before {
    content: '';
    flex: 1 1 var(--spazio-5);
    height: 1px;
    background: var(--bordo);
}

.passi .passo-corrente {
    color: var(--testo);
}

/*
 * Il cerchietto acceso accanto al passo corrente, come nel mockup.
 *
 * **`flex: none` non e' una rifinitura**: un oggetto del flex si stringe quando
 * lo spazio manca, e un cerchio che si stringe diventa un ovale. Nella fascia e'
 * l'unica cosa che dice **dove sei**, e deformandosi e' esattamente il modo in
 * cui smette di dirlo. *La distanza dal nome la da' il `gap` del passo, non un
 * margine suo.*
 */
.passi .passo-corrente::after {
    content: '';
    flex: none;
    width: .5rem;
    height: .5rem;
    border-radius: var(--raggio-pastiglia);
    background: var(--accento);
}

.passi .passo-fatto {
    color: var(--testo-secondario);
}

/*
 * **La testa di un campo**: l'etichetta a sinistra e, all'altro capo, il
 * collegamento che riguarda quel campo — «Password dimenticata» accanto a
 * «Password», come nel mockup.
 *
 * Il collegamento e' minuto perche' e' una via d'uscita, non il gesto della
 * pagina: chi sa la propria password non deve inciamparci.
 */
.campo-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spazio-3);
}

.campo-testa a {
    font-size: var(--testo-minuto);
}

/*
 * **L'asterisco dei campi obbligatori** (RNF-055) e la legenda che lo spiega.
 *
 * L'asterisco e' nel colore d'accento e attaccato all'etichetta: staccato
 * sembrerebbe un carattere finito li' per sbaglio. Non e' un collegamento e non
 * si preme.
 *
 * La legenda e' minuta e tenue: e' una convenzione da leggere una volta, non
 * un'istruzione da tenere davanti agli occhi mentre si compila.
 */
.obbligatorio {
    margin-left: .125rem;
    color: var(--accento);
}

.legenda {
    margin: 0 0 var(--spazio-4);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * **La pastiglia del conteggio.**
 *
 * Dice **quante**, e di suo non ha colore: lo prende dalla scala dello stato —
 * `.stato-attenzione` e nessun'altra — quando la coda e' accesa e ha del lavoro
 * dentro. *La regola sta nella vista, dove si vede accanto alla condizione che
 * la applica; qui c'e' solo la forma.*
 *
 * Nei mockup le pastiglie sono di tre colori — verde, ambra, rossa. **Ne e'
 * arrivata una sola**, e le altre due sono decisioni prese: il verde non c'e'
 * perche' sette zeri verdi sono decorazione, e il rosso non c'e' perche' una
 * coda da smaltire non e' una mancanza di nessuno.
 */
.pastiglia {
    display: inline-block;
    margin-left: var(--spazio-2);
    padding: 0 var(--spazio-2);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-pastiglia);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    font-weight: 400;
}

/* --- Coppie nome-valore (punto 12) -------------------------------------- */

/*
 * **Etichetta tenue sopra, valore chiaro sotto**: e' la forma con cui i mockup
 * scrivono ogni dato che si legge e non si compila — i riquadri dell'area, le
 * coordinate del bonifico, il riepilogo prima dell'invio.
 *
 * *Non e' la forma dei campi: li' l'etichetta dice che cosa scrivere, qui dice
 * che cosa si sta guardando. Sono due gesti diversi e si somigliano abbastanza
 * da confondersi se hanno lo stesso aspetto.*
 */
dl {
    display: grid;
    gap: var(--spazio-1) var(--spazio-5);
    margin: 0;
}

/*
 * **Due colonne quando i valori sono brevi**, come i riquadri di stato dei
 * mockup: un intestatario e un IBAN, o un importo e una data, impilati lasciano
 * mezzo riquadro vuoto e si leggono come un elenco lungo il doppio di quello che
 * dicono.
 *
 * Le colonne sono **dichiarate due** e non calcolate: dentro un riquadro largo,
 * un `auto-fit` ne farebbe tre o quattro a seconda della pagina, e le stesse
 * quattro voci si disporrebbero diversamente da un punto all'altro del portale.
 * Sotto una certa larghezza tornano una sola, che e' l'unico modo in cui due
 * colonne stanno su un telefono.
 */

/*
 * **IL SECONDO MODO DI PAGARE** (D75 · 28/08).
 *
 * La linea sottile lo stacca da intestatario e IBAN, e dice che si cambia genere:
 * *quelli sono DATI da copiare, questo e' un COMANDO da premere.* `--bordo` qui e'
 * decorazione su un elemento largo, non il perimetro di un comando — la distinzione
 * e' in STATO.md dal 28/08.
 */
.oppure {
    margin-top: var(--spazio-4);
    padding-top: var(--spazio-4);
    border-top: 1px solid var(--bordo);
}

.oppure-eti {
    margin: 0 0 var(--spazio-3);
    color: var(--testo-secondario);
    font-size: .875rem;
}

/*
 * **Affiancati, e il testo va a capo da se' quando lo schermo stringe**: `flex-wrap`
 * senza nessuna interrogazione di schermo. *Su schermo largo l'avviso NON scende mai
 * sotto il comando — deve stare nell'occhio insieme a esso, perche' si legge prima
 * di premere e non dopo.*
 */
.oppure-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spazio-3);
}

/*
 * **A CONTORNO E NON PIENO, ed e' una regola che il progetto ha gia' tre volte**: il
 * pieno di questo passo e' «Avanti», e due pieni si contendono l'occhio. *E' la stessa
 * ragione del comando del piede del sito pubblico e della busta del Responsabile.*
 */
.btn-contorno {
    display: inline-flex;
    align-items: center;
    padding: var(--spazio-3) var(--spazio-4);
    border: 1px solid var(--accento);
    border-radius: 99px;
    color: var(--accento);
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}

.btn-contorno:hover,
.btn-contorno:focus-visible {
    background: var(--accento);
    color: var(--fondo);
}

.oppure-avviso {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--testo-secondario);
    font-size: .875rem;
    line-height: 1.5;
}

.a-due {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spazio-4) var(--spazio-5);
}

@media (max-width: 32rem) {
    .a-due {
        grid-template-columns: 1fr;
    }
}

/* Dentro le coppie affiancate, nome e valore restano incolonnati. */
.a-due dd {
    margin: 0;
}

dt {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

dd {
    margin: 0 0 var(--spazio-3);
    color: var(--testo);
}

dd:last-of-type {
    margin-bottom: 0;
}

/* --- Componente: la barra del cruscotto (punto 12) ---------------------- */

/*
 * **La scheda si divide in due**: le sezioni a sinistra, il lavoro a destra.
 * Nel mockup la barra sta dentro il riquadro e non sopra la pagina, separata da
 * una linea sola.
 *
 * L'imbottitura passa dalla scheda alle due parti, altrimenti la linea di mezzo
 * si fermerebbe prima del bordo: **una linea che non arriva in fondo non separa,
 * sembra un errore.**
 */
/*
 * **La barra e' larga quanto la sua voce piu' lunga.** A tredici rem «Torna alla
 * tua area» andava a capo, e una voce di navigazione spezzata su due righe si
 * legge peggio di qualunque altro testo: la si guarda di sfuggita, e due righe
 * la fanno sembrare due voci. Il corpo perde due rem e non se ne accorge
 * nessuno.
 */
/*
 * **La barra e' in piu', non in meno.**
 *
 * Con il tetto di `.larga` le pagine del cruscotto avevano quindici rem di
 * contenuto meno di tutte le altre, perche' la barra li mangiava dall'interno:
 * la stessa scheda dava sessanta rem a un modulo e quarantacinque a una tabella,
 * ed era la tabella a perderli. *«In regola» andava a capo in due righe, e uno
 * stato spezzato si legge come due stati.*
 *
 * Sommando la barra al tetto, **il contenuto e' sessanta rem dappertutto**: la
 * navigazione non toglie spazio a cio' che si e' venuti a leggere.
 */
.scheda.con-barra {
    display: grid;
    grid-template-columns: 15rem 1fr;
    max-width: 75rem;
    padding: 0;
}

.scheda.con-barra .corpo {
    padding: var(--imbottitura-scheda);
    min-width: 0;
}

.barra {
    padding: var(--spazio-4) var(--spazio-3);
    border-right: 1px solid var(--bordo);
}

.barra ul {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.barra a {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
    padding: var(--spazio-2) var(--spazio-3);
    border-radius: var(--raggio-campo);
    color: var(--testo-secondario);
    text-decoration: none;
}

.barra a:hover {
    background: var(--superficie-alta);
    color: var(--testo);
}

/*
 * **La voce accesa e' la pagina che si sta guardando.** Il pieno vuole testo
 * scuro sopra: e' l'unica regola di colore che vale sempre (RNF-013).
 */
.barra .qui {
    background: var(--accento);
    color: var(--fondo);
}

/* Il rientro all'area non e' una sezione del cruscotto: sta staccato, in fondo. */
.barra .rientro {
    margin-top: var(--spazio-4);
    padding-top: var(--spazio-4);
    border-top: 1px solid var(--bordo);
}

/* Sotto una certa larghezza le due colonne diventano due fasce sovrapposte. */
@media (max-width: 48rem) {
    .scheda.con-barra {
        grid-template-columns: 1fr;
    }

    .barra {
        border-right: 0;
        border-bottom: 1px solid var(--bordo);
    }

    .barra ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .barra .rientro {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}

/* --- Le icone (pacchetto 3) --------------------------------------------- */

/*
 * **Servono a distinguere, non a decorare.** Chi apre il cruscotto ogni giorno
 * le usa per saltare alla riga giusta senza leggere: sette tratti sottili troppo
 * simili sarebbero peggio di nessuna icona, quindi le siluette sono diverse fra
 * loro prima che belle — un martelletto, una banconota, un foglio, una croce,
 * una persona, una cartellina, una freccia che torna.
 *
 * *Quella dei rimborsi dice **un verso** invece di una cosa, ed e' voluto: e' la
 * voce che si spiega meno da se'.*
 *
 * **Sono maschere e non immagini** (come il marchio, RNF-026): il colore viene
 * da qui e non dal file, quindi la stessa icona serve al tenue di una riga che
 * non si apre e al chiaro di una che si apre — senza un file per tinta. E il
 * nome non si dichiara da nessuna parte: la classe lo ricava dalla voce, quindi
 * **una voce nuova porta con se' la propria icona** senza che nessuno la nomini.
 *
 * Per chi ascolta la pagina non esistono: il nome accanto dice gia' tutto, e
 * «icona documento» letto ad alta voce e' rumore.
 */
.icona {
    flex: none;
    display: inline-block;
    width: var(--misura-icona);
    height: var(--misura-icona);
    background: currentColor;
    mask: var(--disegno) no-repeat center / contain;
    -webkit-mask: var(--disegno) no-repeat center / contain;
}

.icona-riepilogo { --disegno: url('icone/riepilogo.svg'); }
.icona-domande { --disegno: url('icone/domande.svg'); }
.icona-quote { --disegno: url('icone/quote.svg'); }
.icona-documenti { --disegno: url('icone/documenti.svg'); }
/*
 * **Il file si chiama come la chiave della voce**, perche' la classe la compone
 * la pagina — `icona-{{ $voce->chiave }}` — e nessuno la scrive a mano. *Una
 * voce nuova senza la sua riga qui non da' nessun errore: da' un quadrato
 * vuoto.*
 */
/*
 * **Le icone dei tipi di documento** (punto 7.7), che sono un'altra famiglia: le
 * altre dicono **una pagina**, queste dicono **che cosa e' quel foglio**.
 *
 * *Il mockup dell'area del genitore non ne aveva — le righe erano nome e dettaglio
 * — e non ce n'erano nemmeno nell'altro disegno, che porta il marchio, un fulmine e
 * due frecce. **Sono nate qui**, nella forma delle quattordici: stesso `viewBox`,
 * stesso tratto, e il colore lo prendono dal testo perche' l'icona e' una maschera.*
 *
 * **La regola per i tipi nuovi, che e' la parte da tenere:** *un tipo senza la sua
 * riga qui **non da' un quadrato vuoto** — la pagina ricade su `documenti.svg`, il
 * foglio generico. Cosi' il quarto tipo nasce leggibile il giorno in cui nasce, e
 * la sua icona si aggiunge quando qualcuno decide che ne serva una.*
 */
.icona-certificato { --disegno: url('icone/certificato.svg'); }
.icona-ricevuta { --disegno: url('icone/ricevuta.svg'); }
.icona-attestazione { --disegno: url('icone/attestazione.svg'); }
.icona-documento { --disegno: url('icone/documenti.svg'); }

.icona-da_confermare { --disegno: url('icone/da_confermare.svg'); }
.icona-certificati { --disegno: url('icone/certificati.svg'); }
.icona-provvisori { --disegno: url('icone/provvisori.svg'); }
/*
 * **La voce «Tesseramenti» della barra, con l'icona che aspettava dal pacchetto
 * 0a** (RF-070 · passo A).
 *
 * *La classe si chiamava `.icona-pratiche` e vestiva la voce «Pratiche ferme» del
 * riepilogo, **uscita il 20/08/2026**: da allora non la portava piu' nessuno.*
 *
 * **E il disegno si chiama come la rotta**, che e' la convenzione di tutte le voci
 * — *scoperta il 21/08/2026 rompendola: qui stava scritto «il nome del file resta
 * `pratiche.svg`, e' il disegno di una pratica», e un collaudo che nessuno aveva
 * mai visto dichiarare quella regola l'ha nominata.* **La regola sta in `STATO.md`**,
 * e il guardiano in `AnagraficaTest`.
 */
.icona-tesseramenti { --disegno: url('icone/tesseramenti.svg'); }
.icona-rimborsi { --disegno: url('icone/rimborsi.svg'); }
/*
 * *La coda delle richieste di modifica (punto 7.103). **Il nome del file è quello della
 * voce**, che è quello della rotta: senza il file la voce esce come un quadrato vuoto,
 * e nessun collaudo lo direbbe — è una convenzione che tiene finché qualcuno la segue.*
 */
.icona-richieste { --disegno: url('icone/richieste.svg'); }
.icona-decaduti { --disegno: url('icone/decaduti.svg'); }
/*
 * **Lo scudo con la spunta: i documenti in attesa del controllo antivirus** (punto 7.156).
 * *La voce nasce soltanto con l'antivirus dichiarato presente, e per questo la rete delle
 * icone non l'aveva vista: camminava l'elenco con l'interruttore spento. In produzione era
 * un quadrato vuoto.*
 */
.icona-antivirus { --disegno: url('icone/antivirus.svg'); }
.icona-delibera { --disegno: url('icone/delibera.svg'); }
.icona-libro-soci { --disegno: url('icone/libro-soci.svg'); }

/*
 * **L'anagrafica: due persone, e la prima e' quella di `provvisori`** (punto
 * 7.22). *Non e' un disegno preso da fuori: e' il glifo della persona che
 * l'insieme ha gia', con una seconda figura accanto — **il libro soci elenca
 * posizioni, questa elenca persone**, e il plurale e' proprio la differenza.*
 */
.icona-anagrafica { --disegno: url('icone/anagrafica.svg'); }
.icona-permessi { --disegno: url('icone/permessi.svg'); }
.icona-area { --disegno: url('icone/area.svg'); }

/* --- Componente: l'elenco delle code (pacchetto 3) ---------------------- */

/*
 * **Le code del riepilogo**: una riga per coda, il nome a sinistra e a destra
 * quante ne aspettano.
 *
 * Le righe stanno sulla superficie alta, come le voci degli elenchi dei mockup:
 * senza, sette righe di seguito diventano un muro.
 */
.code {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-2);
    margin: var(--spazio-5) 0 0;
    padding: 0;
    list-style: none;
}

.coda {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
    padding: var(--spazio-3) var(--spazio-4);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-campo);
}

/* Il nome prende lo spazio che avanza, e la pastiglia resta all'altro capo. */
/*
 * **L'etichetta e la sua nota stanno in colonna**, ed e' la forma delle fasce
 * dell'area: il fatto sopra, la conseguenza sotto.
 *
 * *Il contenitore prende lo spazio che prima prendeva l'etichetta — e' lui a
 * spingere la pastiglia a destra — cosi' **l'etichetta resta su una riga sola**.
 * Senza, la nota entrava nella riga flex e comprimeva «Documenti da verificare»
 * su tre righe: la voce cresceva proprio dove non c'e' lavoro da fare.*
 */
.coda .voce {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spazio-minimo);
}

/*
 * **La nota e' tenue e minuta come la chiosa, ma non sta dove sta lei.** *La
 * chiosa e' corta e vive a destra, prima del numero; questa e' lunga il triplo,
 * e li' mangerebbe l'etichetta.*
 */
.coda .nota {
    color: var(--testo-tenue);
    font-size: .875rem;
}

/*
 * **La coda che non si apre si distingue per specie, non per un segnale in
 * piu'.**
 *
 * Tutta la riga e' tenue e non ha niente da premere: chi scorre la pagina in tre
 * secondi vede che quelle righe sono di un'altra natura senza doverle leggere.
 * *Niente colore d'allarme e niente «attenzione»: non e' un guasto, e' un lavoro
 * che non si puo' ancora fare.*
 *
 * Il numero pero' ce l'hanno, ed e' vero: uno zero su una coda vuota e' il dato,
 * non un dato falso.
 */
.coda.chiusa {
    color: var(--testo-tenue);
    background: transparent;
}

/* --- I quattro numeri in cima (pacchetto 3) ----------------------------- */

/*
 * Non sono code ma **totali**: dicono com'e' messa l'Associazione, non che cosa
 * c'e' da fare. Percio' non hanno icona e non si aprono — e stanno in cima, dove
 * si guardano prima del lavoro.
 */
/*
 * **Quattro su una riga sola, e si stringono insieme.**
 *
 * Sono un colpo d'occhio, non un elenco: su due righe smettono di esserlo, e il
 * quarto rimasto solo sembra meno importante degli altri tre. Le colonne sono
 * **dichiarate quattro** — con `auto-fit` andavano a capo appena il corpo si
 * stringeva — e vanno a due sole quando lo schermo non ne regge quattro
 * leggibili.
 */
.numeri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spazio-4);
    margin: var(--spazio-5) 0 0;
    padding: 0;
    list-style: none;
}

.numero {
    padding: var(--spazio-4);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-scheda);
}

.numero .nome {
    display: block;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

.numero .cifra {
    display: block;
    margin-top: var(--spazio-1);
    color: var(--testo);
    font-size: var(--testo-cifra);
    line-height: 1.1;
}

@media (max-width: 48rem) {
    .numeri {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Componente: la tabella (punto 12) ---------------------------------- */

/*
 * **La tabella del libro soci**, presa dal mockup e vestita su cio' che una
 * pagina ha davvero.
 *
 * L'intestazione e' tenue e minuta — nomina le colonne, non annuncia niente — e
 * ogni riga e' separata dalla successiva da una linea sola: nel mockup non ci
 * sono ne' bordi verticali ne' righe a fondo alternato, e la lettura ci guadagna.
 *
 * **Scorre per conto suo quando non ci sta**, ed e' `.tabella` a farlo: il
 * riquadro qui sotto.
 */

/*
 * **Il riquadro che scorre.**
 *
 * Una tabella e' l'unico contenuto che puo' essere piu' largo della pagina senza
 * che sia un difetto: senza questo riquadro sarebbe **la pagina intera** a
 * scorrere di lato, e con lei l'intestazione.
 *
 * *La classe era scritta nelle viste dal punto 12 e non aveva nessuna regola: il
 * commento qui sopra descriveva una protezione che non esisteva, e la tabella
 * mandava a capo invece di scorrere. **Una protezione descritta al posto di una
 * scritta non si segnala da sola** — per un foglio di stile non c'e' un rosso, e
 * il difetto e' venuto fuori perche' «In regola» si spezzava in due righe.*
 */
.tabella {
    overflow-x: auto;
}

table {
    width: 100%;
    margin-top: var(--spazio-5);
    border-collapse: collapse;
    text-align: left;
}

th,
td {
    padding: var(--spazio-3);
    vertical-align: top;
}

/*
 * **La riga d'intestazione ha un fondo suo**, la terza superficie del
 * vocabolario: nel mockup i nomi delle colonne stanno su una fascia appena piu'
 * chiara, e la ragione e' la stessa delle righe dentro un pannello — senza,
 * l'intestazione e' una riga come le altre scritta un po' piu' piccola, e
 * l'occhio che scende una colonna la conta fra i dati.
 *
 * *Sta qui e non sulla pagina che l'ha chiesta: le tabelle sono due oggi e
 * saranno di piu', e una fascia disegnata su una sola le farebbe sembrare due
 * componenti diversi.*
 */
thead th {
    background: var(--superficie-alta);
    border-bottom: 1px solid var(--bordo);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    font-weight: 600;
}

tbody th {
    font-weight: 400;
}

/*
 * **Una linea sotto ogni riga, e nient'altro.**
 *
 * Nel mockup non ci sono bordi verticali ne' fondo alternato: la linea e' del
 * colore dei bordi, tenue, e **separa senza disegnare una griglia**. *Una
 * griglia fa guardare le caselle; qui si guarda una riga per volta, e cio' che
 * serve e' sapere dove finisce.*
 *
 * **L'ultima non la porta**, o la tabella sembra continuare sotto il suo ultimo
 * dato.
 */
tbody tr {
    border-bottom: 1px solid var(--bordo);
}

/*
 * **Una riga continuata dalla propria riga di lavoro non porta la linea: la
 * porta l'ultima delle due.** Le due righe di una quota sono una cosa sola — la
 * prima dice che cosa e' arrivato, la seconda che cosa se ne puo' fare — e una
 * linea in mezzo staccherebbe la seconda dalla sua quota per attaccarla alla
 * successiva.
 */
tbody tr:has(+ .riga-lavoro) {
    border-bottom: 0;
}

tbody tr:last-child {
    border-bottom: 0;
}

/*
 * **La riga a due livelli**: il nome sopra, cio' che lo qualifica sotto, in
 * tenue. E' quello che rende leggibile un elenco lungo — un nome e una data
 * sulla stessa riga si confondono, uno sopra l'altro no.
 */
.principale {
    display: block;
    color: var(--testo);
}

.secondaria {
    display: block;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * **La scala dello stato: quattro colori e un silenzio.**
 *
 * Nasce con il libro soci — la prima pagina che li usa tutti insieme — ma **non
 * gli appartiene**: vale per tutto il portale.
 *
 * Percio' qui e' scritto **che cosa significa ciascun colore, non dove si usa**.
 * Una scala definita per esempi si allarga a somiglianza — *«assomiglia alla
 * quota, quindi ambra»* — e dopo tre somiglianze il colore non distingue piu'
 * niente. Chi domani ha una colonna che oggi non esiste deve poter scegliere
 * leggendo queste righe, senza chiedere a nessuno.
 *
 * **In ordine** (`--in-ordine`): la cosa e' a posto e **non chiede niente**. Nello
 * stato non e' un elogio, e' l'assenza di lavoro.
 *
 * *Fino al punto 7.7 era `--accento`, **la stessa tinta dei comandi**: «va tutto
 * bene» e «premi qui» si leggevano uguali. La scala non distingueva lo stato dal
 * comando, ed e' la variabile che mancava — non un uso sbagliato di una che c'era.*
 *
 * **Attenzione** (`--attenzione`): c'e' qualcosa **in corso, o da guardare**.
 * Non e' un guasto e non e' colpa di nessuno — qualcuno sta facendo la sua
 * parte, o la deve fare presto. *Chiama uno sguardo, non un intervento.*
 *
 * **Manca** (`--manca`): manca qualcosa che **dovrebbe esserci**, e finche'
 * manca c'e' qualcosa che non si puo' fare. E' l'unico che dice «qui c'e' del
 * lavoro», e va messo solo dove il lavoro esiste davvero: *un colore d'allarme
 * su cio' che nessuno deve fare insegna a ignorarlo anche dove conta.*
 *
 * **Chiuso** (`--chiuso`): la cosa **e' finita**. Non e' un problema da
 * risolvere ne' una mancanza da colmare: e' uno stato terminale, e resta
 * leggibile perche' e' un atto dell'Associazione. *Spento apposta — un decaduto
 * in rosso sembrerebbe un errore da correggere, e non lo e'.*
 *
 * **Nessun colore**: il valore e' **vero e non chiede niente a nessuno**. Un
 * socio che non gareggia non ha una posizione federale mancante: non ne ha una,
 * ed e' legittimo. *Il silenzio e' parte della scala — colorare tutto e' il modo
 * in cui una scala smette di distinguere.*
 *
 * **Il colore non e' mai l'unico portatore** (RNF-013): la parola c'e' sempre, e
 * il colore l'accompagna. Chi non distingue le tinte legge la stessa tabella.
 *
 * **Una scala non deve usare tutti e quattro i colori in ogni pagina: deve
 * significare la stessa cosa in tutte.** Il cruscotto non ha nessun «in ordine»
 * — e' una decisione, non una dimenticanza — perche' li' un verde vorrebbe dire
 * «questa coda e' smaltita», e con sette code diventerebbe il fondo su cui
 * l'ambra si stacca. *Una scala che si sente in obbligo di essere completa
 * inventa significati per riempire i posti vuoti, ed e' cosi' che lo stesso
 * colore finisce per dire due cose in due pagine.*
 */
/*
 * **Lo stato e' una pastiglia, ed e' un dato: non si preme.**
 *
 * Sopra la stessa tabella corre la fila dei filtri, che sono **comandi** e hanno
 * la forma della pillola — bordo, raggio pieno, e quella accesa riempita
 * d'accento. *Due cose che si somigliano e si comportano in modo diverso sono
 * peggio di due cose diverse*, quindi la distinzione e' per costruzione e non
 * per sfumatura:
 *
 * | | Il filtro, che si preme | Lo stato, che si legge |
 * |---|---|---|
 * | forma | pillola, raggio pieno | rettangolo arrotondato |
 * | bordo | c'e' | non c'e' |
 * | fondo | trasparente, pieno se acceso | **tinta del proprio colore** |
 * | al passaggio del puntatore | cambia | non cambia |
 *
 * **Non c'e' nulla che inviti a premerla**: nessun `cursor`, nessuna variazione
 * al passaggio del puntatore, e per chi ascolta la pagina resta cio' che e' —
 * *un pezzo di testo dentro una cella, senza ruolo e senza posizione fra i
 * comandi.*
 *
 * **Il fondo si ricava dal colore, non si scrive accanto.** `color-mix` prende
 * la stessa variabile della scala e la stende al diciotto per cento: quattro
 * tinte scritte a mano sarebbero **la seconda casa della scala**, e il giorno in
 * cui un colore cambia resterebbero indietro dicendo esattamente il falso.
 *
 * **Il quinto posto resta l'assenza di colore.** Chi non ha colore ha la stessa
 * forma e **nessun fondo**: non e' una dimenticanza — *chi non e' tesserato non
 * ha una posizione federale mancante, non ne ha una*, e dargli un fondo sarebbe
 * dargli un colore.
 */
.stato {
    display: inline-block;
    padding: .125rem var(--spazio-2);
    border-radius: var(--raggio-campo);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);

    /*
     * **Uno stato non va mai a capo**: «In regola» spezzato su due righe si
     * legge come due stati, ed e' peggio di una colonna stretta. Puo' essere
     * intero perche' la tabella sta in un riquadro che scorre — *senza quello
     * questa riga spingerebbe la pagina di lato, ed e' il motivo per cui le due
     * regole si tengono insieme.*
     */
    white-space: nowrap;
}

.stato-ordine {
    background: color-mix(in srgb, var(--in-ordine) 18%, transparent);
    color: var(--in-ordine);
}

.stato-attenzione {
    background: color-mix(in srgb, var(--attenzione) 18%, transparent);
    color: var(--attenzione);
}

.stato-manca {
    background: color-mix(in srgb, var(--manca) 18%, transparent);
    color: var(--manca);
}

.stato-chiuso {
    background: color-mix(in srgb, var(--chiuso) 18%, transparent);
    color: var(--chiuso);
}

/*
 * ==========================================================================
 * IL LIVELLO DI ISCRIZIONE (D73)
 * ==========================================================================
 *
 * **La pastiglia del livello, e la sua forma dice che non e' uno stato.**
 *
 * *A contorno invece che piena: le quattro qui sopra dicono **come sta** una
 * cosa, questa dice **quale** e'. La differenza si vede quando stanno accanto —
 * nell'area del socio «Attivo» e «Gold» sono sulla stessa riga — ed e' li' che
 * serve vedersi.*
 *
 * **E la forma non e' solo semantica: e' anche cio' che tiene il bronzo sopra la
 * soglia.** *Piena, il testo starebbe sopra una diluizione di se' stesso e il
 * bronzo scenderebbe a 3,59:1. La misura sta accanto alle tre variabili, in
 * testa a questo foglio.*
 *
 * **Porta sempre la parola** (RNF-013): la tinta accompagna il nome, non lo
 * sostituisce — *«Gold» in oro senza parola non si distingue da «Bronze» in
 * bronzo per chi non vede i colori, ed e' il caso in cui la tentazione del solo
 * colore e' massima, perche' qui il colore **e'** il nome.*
 */
.livello-pastiglia {
    display: inline-block;
    padding: .0625rem var(--spazio-2);
    border: 1px solid;
    border-radius: 999px;
    font-size: var(--testo-minuto);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;

    /* Come per gli stati: un nome spezzato su due righe si legge come due nomi. */
    white-space: nowrap;
}

/*
 * *Il bordo e' la tinta smorzata e non la tinta piena: **un contorno pieno
 * peserebbe quanto la parola**, e la pastiglia sembrerebbe un comando.*
 */
.livello-bronze { color: var(--bronzo); border-color: color-mix(in srgb, var(--bronzo) 45%, transparent); }
.livello-silver { color: var(--argento); border-color: color-mix(in srgb, var(--argento) 45%, transparent); }
.livello-gold { color: var(--oro); border-color: color-mix(in srgb, var(--oro) 45%, transparent); }

/*
 * **La scelta del livello al terzo passo della domanda** (RF-136).
 *
 * *Tre riquadri impilati e non una tendina: quello che distingue i livelli non e'
 * il nome ma **cio' che comprendono**, e una tendina mostrerebbe tre parole
 * nascondendo la sola cosa su cui si decide.*
 */
.livelli {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-2);
}

/*
 * **Tutto il riquadro e' il bersaglio, non il solo pallino.** *Un bersaglio che
 * copre meta' del riquadro lascia l'altra meta' inerte, e chi preme sul prezzo
 * non sceglie niente — e' il difetto gia' corretto sull'eta' nell'anagrafica.*
 *
 * **Perche' `.livello` non e' un `.campo-scelta`, e non lo diventa** [punto
 * 7.64]. *`.campo-scelta` veste **un campo con la sua etichetta**: un cerchio, una
 * riga di testo accanto, allineati. `.livello` veste **un riquadro scegliebile
 * intero** — un nome, un prezzo, una frase su due righe, e un bordo che cambia
 * quando la scelta cade li'. Sono due disposizioni diverse, e infilare la seconda
 * dentro la prima obbligherebbe a disfare quel che la prima fa.*
 *
 * **Ma la vestizione del controllo e' la stessa, e infatti non e' qui**: sta
 * sull'elemento, con le caselle da spuntare. *La classe dice come le cose sono
 * disposte; il controllo si veste da se' ovunque lo si metta.*
 */
.livello {
    display: flex;
    align-items: flex-start;
    gap: var(--spazio-3);
    padding: var(--spazio-3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-campo);
    cursor: pointer;
}

/*
 * **Scelto: l'accento sul bordo, e il pallino resta quello del browser.**
 *
 * *L'accento dice «questo l'hai scelto tu»; la tinta del livello dice «quale».
 * **Le due cose devono restare distinte**, o un Gold non scelto sembrerebbe
 * scelto — ed e' la ragione per cui il riquadro selezionato non prende l'oro.*
 */
.livello:has(input:checked) {
    border-color: var(--accento);
    background: color-mix(in srgb, var(--accento) 8%, transparent);
}

/*
 * *Il contorno da tastiera sta sul riquadro e non sul pallino, che dentro un
 * bersaglio grande sarebbe un segno di due millimetri.*
 */
.livello:has(input:focus-visible) {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

.livello-testi {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.livello-riga {
    display: flex;
    align-items: baseline;
    gap: var(--spazio-3);
    flex-wrap: wrap;
}

.livello-nome {
    font-size: var(--testo-minuto);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/*
 * *Il prezzo prende il testo pieno e non la tinta del livello: **e' un numero da
 * leggere, non un nome da riconoscere**, e in oro peserebbe quanto il nome.*
 */
.livello-prezzo {
    font-weight: 700;
    color: var(--testo);
}

.livello-comprende {
    color: var(--testo-secondario);
}

/*
 * **La legenda: un colore senza spiegazione e' un colore che ciascuno
 * interpreta.**
 *
 * Sta in fondo alla pagina che usa la scala, come nel mockup — dopo la tabella,
 * perche' si consulta quando una riga non si capisce, e prima della tabella
 * sarebbe una lezione da studiare per leggere un elenco.
 *
 * **Il campione prende il colore dalla stessa classe che colora le parole**
 * (`currentColor`), e non da un valore suo: una legenda con i colori riscritti a
 * mano e' la seconda casa piu' facile da far divergere, e diverge dicendo
 * esattamente il falso.
 */
.legenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-2) var(--spazio-5);
    margin: var(--spazio-5) 0 0;
    padding: 0;
    list-style: none;
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

.legenda li {
    display: flex;
    align-items: center;
    gap: var(--spazio-2);
}

/*
 * Il campione e' **decorativo**: la parola gli sta accanto e dice tutto. Non ha
 * testo dentro, quindi va dimensionato — un elemento vuoto senza misure non
 * occupa niente.
 */
.legenda .campione {
    flex: none;
    width: var(--spazio-3);
    height: var(--spazio-3);
    /* Il campione resta un quadrato pieno e **non** prende la forma della
       pastiglia: nella tabella il colore veste una parola, qui e' il colore
       stesso a essere il soggetto. */
    padding: 0;
    border-radius: var(--raggio-pastiglia);
    background: currentColor;
}

/*
 * **La riga del lavoro**: sotto ogni quota, cio' che se ne puo' fare. Non ha
 * linea sopra — appartiene alla riga precedente, e una linea la staccherebbe
 * da lei per attaccarla alla successiva.
 *
 * **Chiusa e' alta una riga di comandi**, ed e' cio' che tiene la tabella una
 * tabella: con il motivo sempre aperto ogni quota era alta quanto una scheda, e
 * confrontare una colonna di voci che non stanno nello stesso schermo non e'
 * confrontare niente.
 */
/*
 * La linea che chiudeva la coppia stava qui, ed era la stessa del vocabolario
 * scritta una seconda volta: ora la porta `tbody tr` per tutte le tabelle, e
 * questa riga ne e' una come le altre. *Le resta solo cio' che ha di suo —
 * attaccarsi alla riga di sopra invece di respirare come una riga nuova.*
 */
.riga-lavoro > td {
    padding-top: 0;
}

.lavoro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spazio-4);
}

/*
 * Il rifiuto: chiuso e' un titolo su cui si preme, aperto prende la riga intera
 * — **scrivere un motivo vuole larghezza**, e in fondo a una fila di pulsanti
 * ne resterebbe una striscia.
 */
summary {
    padding: var(--spazio-2) 0;
    color: var(--testo-secondario);
    cursor: pointer;
}

summary:hover {
    color: var(--testo);
}

.rifiuto[open] {
    flex: 1 1 100%;
    margin-bottom: var(--spazio-3);
}

/*
 * **Un pieghevole che apre un atto ha la forma di un comando** [punto 7.50].
 *
 * *Sulla coda dei certificati i due atti hanno lo stesso peso — uno dei due
 * toglie l'idoneita' a una persona — e un pulsante pieno accanto a un testo
 * grigio dice che il secondo conta meno.*
 *
 * **Cambia la veste e non la natura**: *premendolo non si rifiuta niente, si apre
 * il passo in cui si rifiuta — e chi ascolta la pagina lo sente ancora come un
 * gruppo che si espande, che e' la verita'. Il comando che compie l'atto sta
 * dentro, e porta un nome suo.*
 *
 * *Il triangolo del browser se ne va: dentro un pulsante sarebbe un segno di
 * troppo, e le due regole servono perche' i motori lo disegnano in due modi.*
 */
summary.pulsante {
    list-style: none;
}

summary.pulsante::-webkit-details-marker {
    display: none;
}

/*
 * **Due comandi che sono un'alternativa stanno affiancati** [punto 7.51].
 *
 * *Sulla coda dei certificati se ne compie **uno solo**: o si conferma, o non si
 * conferma. Incolonnati i due si leggono come una sequenza — prima questo, poi
 * quello — e affiancati dicono «scegli».*
 *
 * **A incolonnarli era `.rifiuto[open]`**, che prende la riga intera: giusto per
 * il contenuto — *scrivere un motivo vuole larghezza* — e sbagliato per il
 * titolo, che e' il secondo dei due comandi e finiva sotto il primo **proprio nel
 * momento in cui la scelta si sta compiendo**.
 *
 * **La griglia separa le due cose**: i due comandi sulla prima riga, e cio' che il
 * secondo apre **a tutta larghezza sotto tutt'e due** [punto 7.52] — che e' la
 * forma della pagina della delibera. *`start` allinea i due titoli in alto:
 * senza, il pulsante di sinistra scivolerebbe a mezza altezza della riga.*
 *
 * **Dentro il pieghevole il blocco finiva nella colonna del suo titolo**: a
 * sinistra un vuoto grande quanto il campo, e il campo largo mezzo riquadro —
 * stretto per un testo che il socio leggera'. *Un `<details>` e' **una scatola
 * sola**: o scende il titolo, o resta il contenuto. Per questo il pieghevole
 * tiene lo stato e il blocco sta fuori, legato da `:has()` — la stessa lettura
 * che scopre il motivo del rigetto sulla delibera.*
 *
 * **`flex` sui figli non si toglie e non fa danno**: in una griglia non ha
 * effetto, e la coda delle quote — che e' una riga di tabella e non un riquadro —
 * continua a leggerlo com'e' sempre stato.
 */
/*
 * **Fra i comandi e cio' che si apre c'e' lo stacco di una fase nuova**, e non
 * quello fra due cose affiancate: *`.lavoro` dà lo stesso vuoto in tutt'e due i
 * versi — `--spazio-4` e' il vuoto **fra due riquadri accanto** — e in verticale
 * quel poco faceva sembrare il blocco un seguito della riga dei pulsanti. La
 * misura di una sezione nuova il vocabolario ce l'ha, ed e' quella dei titoli.*
 */
.lavoro-alternativa {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    row-gap: var(--spazio-6);
}

.lavoro-alternativa > .rifiuto {
    grid-column: 1 / -1;
    display: none;
}

.lavoro-alternativa:has(.apre-il-rifiuto[open]) > .rifiuto {
    display: block;
}

.rifiuto .campo {
    max-width: 40rem;
}

.rifiuto .avvertenza {
    max-width: 40rem;
}

/*
 * **Il motivo appartiene al rigetto, e si vede solo quando il rigetto e' la
 * scelta.**
 *
 * *Sulla pagina della delibera il motivo compariva sotto ogni candidato, anche
 * ammesso e anche non deciso: chiedeva la ragione di un rigetto che non c'era,
 * e chi non sapeva se compilarlo. **Su una seduta con piu' domande era
 * peggio** — i motivi restavano visibili sotto ognuna, e chi scorreva non
 * distingueva quali stesse respingendo.*
 *
 * **Nascondere non cancella**: il campo resta nel modulo con il suo testo, e
 * chi torna su «Respinta» ritrova quello che aveva scritto. *Che quel testo non
 * finisca in colonna quando la domanda e' ammessa non lo decide questa riga:
 * lo decide `Delibere::respingi()`, che e' il solo punto che scrive
 * `motivo_rigetto`.*
 *
 * **La regola vale sui soli riquadri che portano le tre scelte** — `.riga-scelte`
 * esiste sulla sola pagina della delibera — cosi' il `.rifiuto` della coda delle
 * quote, che e' un'altra cosa, non la vede.
 *
 * *Nessuno script: la scelta e' gia' nel documento, e `:has()` la legge. E
 * l'ordine aiuta chi ascolta la pagina — il campo segue immediatamente le tre
 * risposte, quindi compare dove il percorso di lettura sta gia' passando.*
 */
.pannello:has(.riga-scelte) .rifiuto {
    display: none;
}

.pannello:has(.riga-scelte input[value="respinta"]:checked) .rifiuto {
    display: block;
}

/*
 * **Il blocco della provenienza compare quando la risposta e' «Si'»** [punto
 * 7.109, decisione del committente]. *Stessa forma della regola qui sopra:
 * nessuno script, la scelta e' gia' nel documento e `:has()` la legge.*
 *
 * ## Perche' e' la prima regola a nascondere, e non l'ultima a mostrare
 *
 * **La riga che nasconde e' gia' dentro un `:has()`**, ed e' la sola forma
 * sicura: *dove `:has()` non funziona **quella regola non e' valida**, quindi non
 * nasconde niente — e il candidato vede i quattro campi come li vedeva prima.*
 * **Nasconderli con una regola semplice sarebbe un vicolo cieco**: su un browser
 * senza `:has()` il blocco resterebbe invisibile per sempre, e chi viene da
 * un'altra societa' non potrebbe dichiararlo.
 *
 * *E' la stessa protezione della regola sopra, riscoperta da un'altra strada: li'
 * il costo di un `:has()` mancante e' un riquadro sempre visibile, qui sarebbe un
 * modulo che non si puo' compilare — **la forma giusta e' la stessa, il prezzo
 * dello sbaglio no**.*
 *
 * ## `.mostrata` la scrive il portale, e vince sulla riga che nasconde
 *
 * **Un errore su un campo del blocco lo rende visibile comunque**: *un messaggio
 * che nomina un campo nascosto e' il difetto peggiore che questa forma possa
 * avere.* La classe arriva dalla vista, e **porta lo stesso `:has()`** perche' le
 * serve il peso dell'identificativo: *senza, la riga che nasconde vincerebbe, e
 * la difesa non difenderebbe.*
 */
.pannello:has(#provenienza_no) ~ .provenienza-blocco {
    display: none;
}

.pannello:has(#provenienza_si:checked) ~ .provenienza-blocco,
.pannello:has(#provenienza_no) ~ .provenienza-blocco.mostrata {
    display: block;
}

/*
 * **E «No» acceso vince anche su `mostrata`** [prova a occhio del committente,
 * punto 7.109].
 *
 * ## Il difetto, ed e' di fondo
 *
 * ***La classe la decide il server, il radio cambia nel browser.*** *Chi fa
 * scattare un errore riceve una pagina con `mostrata` scritta dentro: da quel
 * momento la regola qui sopra vince **sempre**, e mettere «No» non nascondeva
 * piu' niente. **La pagina resa non sa che l'utente ha appena cambiato
 * risposta.***
 *
 * **La cura sta nello stesso strato del difetto**: questa regola legge il radio
 * **dal vivo**, come quella del «si'». *Indebolire `mostrata` avrebbe riaperto il
 * caso per cui esiste — un errore su un campo del blocco quando nessuno ha
 * ancora risposto — e sarebbe stata una cura nello strato sbagliato.*
 *
 * ## Perche' vince, e perche' non tocca il caso di `mostrata`
 *
 * *Il `:checked` dentro il `:has()` aggiunge il peso che serve: **(1,4,0) contro
 * (1,3,0)**, quindi batte la riga sopra **senza modificarla**.* **E si applica
 * solo dove un «No» e' acceso**: con nessuna risposta e un errore, `mostrata`
 * resta padrona e il blocco si vede — che e' esattamente il caso da non
 * riaprire.
 *
 * ## Cio' che resta, ed e' stato guardato e lasciato
 *
 * *Con «No» appena scelto nel browser e gli errori ancora a schermo, **i messaggi
 * in cima nominano campi non piu' visibili**. Non si cura, per due ragioni:
 * quegli errori riguardano **un invio precedente che l'utente sta superando** —
 * al prossimo invio spariscono, perche' con «No» `exclude_unless` toglie quei
 * campi dalla validazione — e nascondere anche il riquadro dei messaggi
 * spegnerebbe un errore legittimo sulla prima domanda.*
 *
 * **Sta scritto perche' chi rileggera' sappia che e' stato guardato e lasciato,
 * non che non e' stato visto.**
 */
.pannello:has(#provenienza_no:checked) ~ .provenienza-blocco.mostrata {
    display: none;
}

/*
 * **Il gruppo di campi**, che fin qui era l'unico contenitore vestito dal
 * browser: senza una regola, `fieldset` porta il proprio bordo di sistema e
 * nessuna distanza da cio' che segue — sulla pagina della delibera si
 * appiccicava al primo candidato, e i due sembravano un blocco solo.
 *
 * La distanza sotto e' la stessa dei riquadri: sono contenitori dello stesso
 * rango, e due distanze diverse per la stessa cosa si notano.
 */
fieldset {
    margin: 0 0 var(--spazio-5);
    padding: 0;
    border: 0;
    /*
     * **La quarta cosa che il browser mette su un `fieldset`, e la sola che non
     * si vede** [punto 7.109]: `min-inline-size: min-content`.
     *
     * *Bordo, margine e riempimento erano gia' azzerati perche' **si vedono**.
     * Questa no: e' una larghezza minima che nessun altro elemento ha, e in una
     * riga flessibile impedisce al campo di stringersi come fanno i suoi
     * vicini — **la riga va a capo, e sotto resta un vuoto**.*
     *
     * *E' successo al primo passo, dove il gruppo «nato in Italia o all'estero»
     * e' diventato un `fieldset`: `.campo` vince su margine e riempimento
     * perche' li dichiara, ma **una regola non puo' vincere su una proprieta'
     * che non nomina**.*
     */
    min-inline-size: 0;
}

legend {
    padding: 0;
    margin-bottom: var(--spazio-3);
    color: var(--testo-secondario);
    font-size: var(--testo-base);
    font-weight: 600;
    letter-spacing: .02em;
}

/* --- Componente: i pannelli (punto 12) ---------------------------------- */

/*
 * **I riquadri affiancati dei mockup**: nell'area sono il diario e i documenti,
 * nel cruscotto i numeri in cima. Stanno su una superficie piu' alta di quella
 * della scheda che li contiene — e' la terza superficie dichiarata nel
 * vocabolario, e senza di lei un riquadro dentro una scheda non si vede.
 *
 * **Quanti stiano per riga lo decide la larghezza, non un numero scritto qui.**
 * Con `auto-fit` due riquadri stanno affiancati finche' ci stanno e vanno a capo
 * quando non ci stanno piu': dichiarare «due colonne» costringerebbe a
 * un'interrogazione di schermo per ogni pagina che ne ha un numero diverso, e
 * l'area ne ha uno o due a seconda che l'attestazione ci sia.
 */
/*
 * **I riquadri si impaccano, non si allineano** [18/08/2026, punto 7.34].
 *
 * *Con una griglia il numero dispari lascia un buco: tre riquadri su due colonne ne
 * riempiono quattro posti meno uno, e il quarto resta deserto. E la griglia stira le
 * celle di una riga alla piu' alta, cosi' un riquadro corto accanto a uno lungo
 * diventa una scatola per meta' bianca.*
 *
 * **`break-inside: avoid` sul riquadro e' meta' della regola**: senza, un riquadro si
 * spezzerebbe a meta' fra due colonne.
 *
 * ## Il fascicolo non passa piu' di qui [punto 7.36]
 *
 * *Con **quattro** riquadri e due colonne restava **la coda**: una colonna finisce
 * prima, l'altezza del blocco e' quella della piu' alta, e cio' che segue comincia da
 * li'. Il buco in mezzo era sparito; quello in fondo no.*
 *
 * **Il fascicolo e' passato alla colonna sola** — dove non ci sono colonne da
 * pareggiare — *e la regola restava per l'area, «che di riquadri ne ha due».*
 *
 * ## E dal punto 7.77 non la usa piu' nessuna veduta
 *
 * **Quella ragione era diventata falsa**: *nell'area la fila conteneva **un riquadro
 * solo** — i documenti — e un figlio unico in un contenitore a colonne **non si
 * allarga alla fila: sta nella prima colonna**. A schermo largo restava largo quanto
 * una colonna, e la fascia del tesseramento sotto — larga quanto la pagina — non gli
 * si allineava.*
 *
 * **Anche l'area e' passata alla colonna sola**, con `.pannello.primo` a portare lo
 * stacco, ed e' la scelta che il fascicolo aveva gia' fatto al 7.36.
 *
 * ## Il diario e' arrivato e NON l'ha riaccesa [punto 2 del diario]
 *
 * **Qui stava scritto:** *«La riaccende il pacchetto del diario delle uscite
 * (RF-083÷089): quel giorno i riquadri tornano due — il diario a sinistra, i documenti
 * a destra — e questa fila fa cio' per cui esiste.»*
 *
 * **I riquadri sono tornati due, e la fila non serviva.** *`columns: 18rem` e'
 * impaginazione a giornale, e il browser **spezza un riquadro fra le due colonne** per
 * pareggiarle: il diario e' alto sei righe e sarebbe stato tagliato a meta'. Li affianca
 * `.due-riquadri`, una griglia, che li tiene interi e della stessa altezza.*
 *
 * **La previsione era giusta sul numero e sbagliata sullo strumento**, ed e' il motivo
 * per cui non e' stata cancellata: *chi incontrera' questa regola deve sapere che il
 * diario l'ha guardata e ha scelto un'altra cosa — o la riproverebbe.*
 *
 * **La fascia del tesseramento resta sotto, a tutta pagina**, e quella parte tiene: *e'
 * la ragione per cui e' stata messa larga allora.*
 *
 * *E la fila resta viva: **il fascicolo la usa**. Sta scritto perche' una regola che
 * nessuno usa e non dice perche' e' una regola che qualcuno toglie.*
 */
.pannelli {
    columns: 18rem;
    column-gap: var(--spazio-4);
    margin-top: var(--spazio-5);
}

/*
 * ==========================================================================
 * IL DIARIO DELLE USCITE (RF-083÷092)
 * ==========================================================================
 */

/*
 * **Il diario e i documenti, affiancati** [punto 2 del diario].
 *
 * ## E NON e' `.pannelli`, che qui sopra dice di aspettare il diario
 *
 * **Quella riga diceva:** *«La riaccende il pacchetto del diario delle uscite: quel
 * giorno i riquadri tornano due — il diario a sinistra, i documenti a destra — e questa
 * fila fa cio' per cui esiste.»* **Il giorno e' arrivato e la fila non si e'
 * riaccesa**, e la ragione l'ha trovata il mockup: *`columns: 18rem` e' impaginazione a
 * giornale, e il browser **spezza un riquadro fra le due colonne** per pareggiarle. Il
 * diario e' alto sei righe: sarebbe stato tagliato a meta', con i documenti sotto il
 * suo troncone.*
 *
 * **La previsione era giusta sul numero e sbagliata sullo strumento**, e non e' una
 * regola morta: *il fascicolo la usa ancora, e chi la incontrera' deve sapere che il
 * diario l'ha guardata e ha scelto un'altra cosa — o la riproverebbe.*
 *
 * ## Le due colonne hanno la stessa altezza, ed e' cio' che serve
 *
 * *E' il difetto di `grid`, e qui e' la funzione: **si vedono pari anche quando i
 * documenti hanno meno contenuto**, invece di rimpicciolirsi. Il vuoto sta DENTRO il
 * riquadro piu' corto, non sotto.*
 *
 * **Su schermo stretto vanno a capo con il diario per primo**: *e' la cosa che il socio
 * viene a fare, i documenti sono un adempimento. In `grid` l'ordine del sorgente e'
 * l'ordine del capo, e non serve nessuna regola in piu'.*
 */
.due-riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--spazio-4);
    margin-top: var(--spazio-5);
}

/*
 * *Dentro la griglia il pannello non porta il proprio margine: **la distanza fra le due
 * colonne la da' gia' il `gap`**, e sommarli farebbe due vuoti diversi fra le righe e le
 * colonne della stessa fila.*
 */
.due-riquadri > .pannello {
    margin-bottom: 0;
}

/*
 * **E il margine tolto ai figli lo porta la griglia** [prova a occhio del committente].
 *
 * *Senza questa riga la fascia del tesseramento restava **appiccicata** ai due riquadri:
 * la distanza sotto l'ultimo pannello la dava il suo `margin-bottom`, e la riga qui sopra
 * gliel'ha tolto — **la griglia non ne aveva uno proprio**, e nessuno ha rimesso quello
 * che spariva.*
 *
 * **E' la misura del pannello, non una nuova**: `--spazio-5` e' cio' che `.pannello`
 * porta, quindi la fascia sta dalla griglia esattamente come stava dai riquadri.
 */
.due-riquadri {
    margin-bottom: var(--spazio-5);
}

/*
 * **Tre colonne uguali, e quattro** [prove a occhio del committente].
 *
 * *`.dati` dimensiona sul contenuto, e **il contenuto di una fila di numeri e' corto per
 * costruzione**: le tre statistiche stavano accostate a sinistra e lasciavano mezzo
 * riquadro vuoto, le quattro misure un quarto.*
 *
 * **E `.due-colonne` non serviva**, benche' sia la forma giusta — quella del riquadro
 * della tessera: *`.colonna` porta `min-width: 16rem`, **calibrato su un riquadro a
 * scheda intera**. Nel pannello del diario, che e' mezza scheda, tre colonne da 16rem
 * non ci stanno e si impilano.*
 *
 * **`repeat(N, 1fr)` e non `auto-fit`**: *le colonne sono tre, o quattro, a QUALUNQUE
 * larghezza. Con `auto-fit` il numero dipende dalla finestra, e la stessa fila si legge
 * diversa da schermo a schermo.*
 */
/*
 * **Lo stacco dalla testa del pannello lo porta il blocco che la segue**, ed e' la
 * convenzione che il foglio ha gia' [prova a occhio del committente].
 *
 * *`.pannello-testa` **non ha `margin-bottom`**: a distanziare e' `.elenco-documenti`, con
 * `margin: var(--spazio-4) 0 0`. Ecco perche' «I tuoi documenti» non ha questo problema e
 * «Il tuo diario» ce l'aveva — **`.tre-colonne` nasceva senza margine**, e si toccavano.*
 *
 * *Stessa misura, stessa direzione: nessuna regola nuova, una riga che mancava.*
 *
 * ## E il `gap` e' doppio, che non e' una minuzia
 *
 * *Con `subgrid` le righe sono due, e un `gap` solo metterebbe **sedici pixel fra ogni
 * etichetta e il suo valore** — la distanza pensata per separare tre colonne, spesa a
 * separare una coppia che si legge insieme.*
 *
 * *Fra le colonne resta sedici; fra l'etichetta e il numero quattro.*
 */
.tre-colonne {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: var(--spazio-1) var(--spazio-4);
    margin-top: var(--spazio-4);
}

/*
 * **Etichette in alto sulla stessa quota, valori sotto sulla stessa riga**
 * [prova a occhio del committente].
 *
 * *«Uscite» sta su una riga e «Chilometri nel 2026» su due: senza `subgrid` **il numero
 * sotto l'etichetta corta finiva piu' in alto degli altri due**.*
 *
 * *`subgrid` allinea tutt'e due le righe **senza un numero fissato a mano**: la riga
 * delle etichette e' alta quanto la piu' alta delle tre, e i valori cominciano dove
 * quella finisce.*
 *
 * ## E l'avanzo sta SOTTO l'etichetta corta, non sopra
 *
 * **Qui c'era `align-self: end`**, presa dalla regola dei campi di un modulo — *«l'aria
 * in avanzo sta sopra l'etichetta, non sotto: cosi' il campo comincia subito dopo»* —
 * e **quel precedente risolve un altro problema**: *la' si allinea **una** riga, le
 * caselle, e l'etichetta le sta attaccata; qui se ne allineano **due**, e appoggiare
 * l'etichetta corta in basso la disallineava dalle altre.*
 *
 * ***Un precedente citato non e' un precedente che si applica***: la regola era la stessa,
 * il problema no.
 */
.tre-colonne > .colonna {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
}

/*
 * *Dopo una fila di numeri il sotto-titolo che apre l'elenco vuole meno aria della regola
 * generale: **`* + .sotto-titolo` ne mette sedici**, e li' sopra c'e' gia' lo stacco che
 * i valori grandi si portano dietro.*
 */
.tre-colonne + .sotto-titolo {
    margin-top: var(--spazio-2);
}

/*
 * **E LA FILA DEI CAMPI DI UN MODULO SEGUE UN'ALTRA REGOLA, ED E' VOLUTO**
 * [punto 2 del diario].
 *
 * *Questa riga sta accanto a `.tre-colonne` apposta: **le due sembrano
 * un'incoerenza**, e senza la ragione scritta qui la prossima persona ne
 * uniformerebbe una all'altra.*
 *
 * | | `.tre-colonne` | `.campi-in-fila` |
 * |---|---|---|
 * | che cosa contiene | **numeri da leggere** | **caselle in cui scrivere** |
 * | quante colonne | tre, a qualunque larghezza | quante ce ne stanno |
 *
 * **Sono due mestieri.** *Una fila di numeri che cambia forma da schermo a schermo si
 * legge diversa ogni volta, e per questo le colonne sono tre e restano tre. **Una
 * casella invece serve a scrivere**: a 320 px tre campi da 90 px non ospitano ne' una
 * data ne' un menu, e il modulo diventa inutilizzabile.*
 *
 * **E il socio il portale lo usa dal telefono** [ragione del committente]: *la
 * segreteria sta al computer, lui no.* **Il difetto non si vede provando a occhio su
 * uno schermo grande**, ed e' la ragione per cui la regola sta scritta e non dedotta.
 *
 * *`11rem` e' la larghezza sotto la quale un campo data non si compila: tre stanno in
 * fila da 35rem in su, due sotto, uno su un telefono stretto.*
 */
.campi-in-fila {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0 var(--spazio-4);
}

/*
 * *La distanza fra le righe la da' gia' il margine del campo: **sommarla al `gap`
 * verticale farebbe due vuoti diversi** fra le righe e le colonne della stessa fila.*
 */
.campi-in-fila > .campo {
    margin-bottom: var(--spazio-3);
}

/*
 * **LE TRE CASELLE DELLA DURATA, E LA RIGA CHE STAVA QUI ERA FALSA**
 * [punto B del consenso · prova a occhio del committente].
 *
 * *Diceva: «**dentro un terzo di riga le tre caselle della durata si stringono: tengono
 * due cifre**, che e' tutto cio' che ci va».*
 *
 * **Era vera con TRE campi nella fila, ed e' diventata falsa con quattro** — *durata,
 * meteo, tipo di percorso, dislivello.* **Nessuna decisione e' cambiata**: *e' stato
 * aggiunto un campo accanto, e la traccia si e' accorciata da se'.* **Ne tenevano una**,
 * e il valore si troncava.
 *
 * ## Il conto, perche' «troppo stretto» non e' una misura
 *
 * *Traccia a quattro colonne ≈ **188 px**. Meno due `gap` da `--spazio-3` fa 164, diviso
 * tre fa **54,7** per casella. Meno l'imbottitura (`.75rem` per lato = 24), meno il bordo
 * (2), meno le frecce dello spinner (≈16): **restano 13 px**. Una cifra ne vuole nove.*
 *
 * ## Perche' non si allarga la cella
 *
 * **`grid-column: span 2` romperebbe il telefono**: *a 320 px la griglia ha **una**
 * colonna, e un item che ne chiede due **forza una traccia implicita** — le altre caselle
 * scenderebbero sotto gli 11rem, cioe' sotto la larghezza a cui un campo data non si
 * compila. E' il difetto che `.campi-in-fila` esiste per impedire.*
 *
 * **E «un minimo suo» non e' esprimibile**: *in `minmax(11rem, 1fr)` il minimo e' **della
 * traccia, non dell'item**, e le tracce di `repeat()` sono tutte uguali. Alzarlo
 * cambierebbe il numero di colonne di ogni fila di ogni modulo.*
 *
 * **Si recupera dentro la cella**, e cosi' il telefono non e' nemmeno in gioco: *a una
 * colonna le tre caselle passano da 67 px di testo a 79.*
 */
.campi-in-fila .durata input {
    width: auto;
    min-width: 0;
    /*
     * *Imbottitura dimezzata **su queste tre soltanto**: dodici pixel per lato su una
     * casella da due cifre sono piu' spazio di quanto ne occupi il dato.*
     */
    padding-left: var(--spazio-1);
    padding-right: var(--spazio-1);
}

/*
 * **LE FRECCE VIA, E SERVONO DUE REGOLE PERCHE' NESSUNA VALE OVUNQUE**
 * [verifica chiesta dal committente].
 *
 * *`appearance: textfield` da sola sarebbe stata **un recupero su un browser solo**:
 * copre Firefox e **non** Chrome, dove quel valore su `input[type=number]` e' deprecato e
 * la via che regge e' lo pseudo-elemento. Su Safari anteriore alla 15.4 nemmeno
 * `appearance` senza prefisso arriva.*
 *
 * | | chi la ascolta |
 * |---|---|
 * | `-moz-appearance` | Firefox anteriore all'80 |
 * | `appearance` | Firefox dall'80 in poi |
 * | `::-webkit-…-spin-button` | **Chrome e Safari**, che sull'altra non rispondono |
 *
 * *`margin: 0` sugli pseudo non e' ornamento: **Safari da' loro un margine proprio**, e
 * nasconderli senza toglierlo lascerebbe il vuoto che occupavano.*
 *
 * **E il telefono non ci guadagna niente, perche' li' le frecce non ci sono gia'**: *sono
 * sedici pixel che pagava soltanto chi sta al computer — cioe' l'unico caso in cui la fila
 * arriva a quattro colonne e lo spazio manca davvero.*
 */
.campi-in-fila .durata input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.campi-in-fila .durata input::-webkit-outer-spin-button,
.campi-in-fila .durata input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*
 * **E il selettore e' doppio, per una ragione che il mockup nascondeva**
 * [prova a occhio del committente].
 *
 * *`.dati` porta `display: flex`, e sta **piu' in basso in questo foglio**: a parita' di
 * specificita' vince l'ultima, quindi `.quattro-colonne` da sola non arrivava a
 * cambiarle la disposizione. **Le quattro misure del dettaglio restavano accostate a
 * sinistra**, con un quarto di pagina vuoto a destra.*
 *
 * **Nel mockup funzionava, ed e' il punto**: *li' le regole nuove stanno in un `<style>`
 * **dopo** il collegamento al foglio, quindi vincevano per posizione. Portandole dentro
 * il foglio sono finite **prima** di `.dati`, e la stessa classe ha smesso di funzionare
 * senza che nulla cambiasse nel markup.*
 *
 * ***Una regola che vale nel mockup non vale nel portale per il solo fatto di essere la
 * stessa riga***: nel mockup l'ordine e' a favore per costruzione.
 *
 * *`.dati.quattro-colonne` porta due classi e non dipende piu' dall'ordine — che e' la
 * cura giusta: **spostare il blocco piu' in basso lo rimetterebbe in gioco** al prossimo
 * riordino del foglio.*
 */
.quattro-colonne,
.dati.quattro-colonne {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spazio-4);
}

/*
 * **Le righe delle uscite.**
 *
 * *Ogni riga si apre sul dettaglio, quindi e' un collegamento intero e non un testo con
 * un comando accanto: **il bersaglio e' tutta la riga**, che e' cio' che la mano cerca
 * su un telefono.*
 */
/*
 * **Il diario sta stretto** [prova a occhio del committente].
 *
 * *Il riquadro dei documenti porta cinque righe nell'altezza in cui il diario ne portava
 * due, ed erano tre arie sommate: **quella sopra il sotto-titolo, quella sopra l'elenco,
 * e l'imbottitura di ogni riga**.*
 *
 * *Una riga di documento sta su **una** riga di testo; una del diario su **due** — il
 * titolo e cio' che le sta sotto — quindi partiva gia' piu' alta. **Non si toglie la
 * seconda riga**: e' il dato che si viene a leggere. Si toglie l'aria intorno.*
 *
 * *L'imbottitura scende da `--spazio-3` a `--spazio-2`: **otto pixel invece di dodici,
 * sopra e sotto**, cioe' otto risparmiati per uscita. Le due liste non hanno piu' lo
 * stesso passo, ed e' voluto — quella dei documenti ha una riga per voce.*
 */
.uscite {
    list-style: none;
    margin: var(--spazio-2) 0 0;
    padding: 0;
}

/*
 * **La riga si chiama `.riga-uscita` e non `.uscita`, e il nome e' la cura di un difetto
 * vivo** [ricognizione sul mockup].
 *
 * ***`.uscita` era gia' preso***: e' il modulo con cui si esce, in `impianto.blade.php`,
 * **su ogni pagina del portale dietro l'accesso**. *La regola che segue gli dava
 * `display: flex`, un `gap`, e **un'imbottitura verticale** — e `:hover` gli metteva un
 * fondo. Le due regole che il comando aveva — `.intestazione-dentro .uscita` e
 * `.chi-opera + .uscita` — sono piu' specifiche ma **dicono altro**: margine e `flex`, non
 * imbottitura.*
 *
 * **Nel mockup non si vedeva, e non poteva vedersi**: *quel file non ha l'intestazione del
 * portale, quindi la classe non collideva con niente.* **E nessun collaudo poteva
 * coglierlo**: *il modulo c'era, il comando funzionava — era piu' alto.*
 *
 * *Il gesto che l'ha trovato: **cercare la classe nel foglio prima di sceglierne il
 * nome**, che costa un `grep` e vale ogni volta che un mockup nasce senza l'impianto
 * intorno.*
 */
.uscite li + li .riga-uscita {
    border-top: 1px solid var(--bordo);
}

.riga-uscita {
    display: flex;
    align-items: baseline;
    gap: var(--spazio-4);
    padding: var(--spazio-2) 0;
    color: inherit;
    text-decoration: none;
}

.riga-uscita:hover {
    background: var(--superficie-alta);
}

.uscita-corpo {
    flex: 1;
    min-width: 0;
}

.uscita-titolo {
    display: block;
    font-size: var(--testo-medio);
}

.uscita-quando {
    display: block;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * *La distanza a destra: **e' il numero che si cerca scorrendo**, e le cifre tabulari
 * lo tengono incolonnato fra una riga e l'altra.*
 */
.uscita-distanza {
    flex: none;
    font-size: var(--testo-medio);
    font-variant-numeric: tabular-nums;
}

/*
 * **Le tre caselle della durata**, che stanno su una riga sola.
 *
 * *Ore, minuti e secondi sono **un dato solo scritto in tre pezzi**: incolonnati
 * sembrerebbero tre campi, e chi ne compila uno crederebbe di aver finito.*
 *
 * **E il `gap` era `--spazio-3`, cioe' dodici pixel** [ratificato dal committente]:
 * *quella distanza faceva sembrare tre campi cio' che la riga qui sopra dichiara essere
 * un dato solo.* **Quattro li tengono vicini e ne restituiscono sedici alla cella**, che
 * e' il gesto che vale doppio: *ripara una misura e **rafforza una ragione gia'
 * scritta**, invece di contraddirla.*
 */
.durata {
    display: flex;
    gap: var(--spazio-1);
}

/*
 * **Questa regola non si applica quasi mai, e va saputo prima di toccarla.**
 *
 * *Il solo posto in cui `.durata` vive e' il modulo dell'uscita, **dentro
 * `.campi-in-fila`** — e li' vince `.campi-in-fila .durata input`, che ha specificita'
 * maggiore pur stando **piu' in alto** in questo foglio.* **Le sei rem non sono la
 * larghezza vera di nessuna casella del portale**: sono il ripiego per il giorno in cui
 * la durata comparira' fuori da una fila.
 */
.durata input {
    width: 6rem;
}

/*
 * **I dati di un riquadro stanno in fila, non incolonnati** [punto 7.36].
 *
 * *Cognome, nome, sesso e codice fiscale su una riga sola: **e' cio' che toglie il
 * bianco a destra e accorcia la pagina**, che era la sola cosa che le due colonne
 * facevano bene.*
 *
 * **Le coppie vanno a capo da se'** quando lo schermo stringe: nessuna interrogazione
 * di schermo e nessun numero di colonne da tenere aggiornato.
 *
 * *L'etichetta sta sopra il valore e non accanto: **si legge il valore**, e
 * l'etichetta serve a sapere che cos'e' — accanto, le due si contenderebbero la
 * stessa riga e i valori non si allineerebbero fra loro.*
 */
.dati {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-3) var(--spazio-5);
    margin: 0;
}

.dato {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-minimo);
}

.dati .etichetta {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

.dati .valore {
    margin: 0;
}

/*
 * **I numeri di una fila di misure si leggono grandi** [ricognizione sul mockup].
 *
 * *Il mockup del diario le mostrava cosi' e il portale no: la regola viveva **solo li'**,
 * e la pagina vera rendeva distanza, tempo, passo e dislivello **al corpo del testo**.
 * Il disegno affermava una veste che il portale non produceva.*
 *
 * *Vale dentro una fila e non su ogni `.dati`: **e' li' che i numeri sono cio' che si
 * viene a leggere**, e l'etichetta serve solo a sapere che cosa sono.*
 */
.tre-colonne .valore,
.dati.quattro-colonne .valore {
    font-size: var(--testo-grande);
    line-height: 1.2;
}

/*
 * **La parola che qualifica un numero sta sotto di esso, e in tenue.**
 *
 * *«Calcolato: tempo diviso distanza» dice che il passo non l'ha scritto il socio. **La
 * regola stava solo nel mockup**: nella pagina vera quella riga arrivava con il corpo e
 * il colore del testo normale, e si leggeva come un dato accanto agli altri.*
 *
 * *Sotto il numero e non accanto all'etichetta: **accanto si leggerebbe come parte del
 * nome del dato**.*
 */
.dati .qualifica {
    margin: var(--spazio-minimo) 0 0;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * **Un riquadro stacca da cio' che lo segue**, e la distanza e' del vocabolario:
 * un riquadro e' un blocco, non un campo, e la stessa distanza dei campi lo
 * farebbe sembrare uno di loro — l'etichetta sotto apparterrebbe al riquadro
 * invece che al proprio campo.
 *
 * *Mancava del tutto: sul quarto passo il riepilogo toccava «Ricevuta del
 * versamento», e nella pagina della delibera i riquadri dei candidati si
 * toccavano fra loro.*
 *
 * Quando i riquadri stanno affiancati la distanza la da' gia' la griglia, e qui
 * si toglie: sommate, farebbero due vuoti diversi fra le righe e le colonne
 * della stessa cosa.
 */
/*
 * **I dati che si copiano, dentro una sezione gia' incorniciata** [punto 7.61].
 *
 * *Le coordinate del bonifico stavano in un `.pannello` loro: **da quando la
 * sezione intera e' incorniciata, sarebbe una scatola dentro una scatola**. A
 * distinguerle basta la forma dei dati — `dl.a-due` — che e' come il portale mostra
 * i valori dentro un pannello, nel fascicolo e nell'area.*
 *
 * *Resta un contenitore perche' la coppia di valori ha bisogno di **respiro sopra e
 * sotto**: e' cio' che il socio cerca a colpo d'occhio quando torna sulla pagina.*
 */
.dati-da-copiare {
    margin: var(--spazio-4) 0;
}

.pannello {
    margin-bottom: var(--spazio-5);
    padding: var(--spazio-5);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-scheda);
}

/*
 * **Il primo riquadro di una colonna stacca da cio' che sta sopra** [punto 7.36].
 *
 * *Con la fila era `.pannelli` a portare il margine in testa. Senza fila quel
 * contenitore non c'e', e il primo riquadro si appoggerebbe alla fascia — **lo stacco
 * appartiene al blocco e non al suo ultimo figlio**, che era il difetto della versione
 * a colonne, e vale anche dalla parte di sopra.*
 */
.pannello.primo {
    margin-top: var(--spazio-5);
}

.pannelli .pannello {
    /*
     * *La distanza fra i riquadri di una colonna la da' questo margine, non piu'
     * la griglia.*
     */
    margin-bottom: var(--spazio-4);
    break-inside: avoid;
}

/*
 * **La fila tiene i riquadri che esistono, e non si tiene un posto per quelli che
 * verranno.**
 *
 * *C'era un segnaposto a tenere la colonna del diario, ed era la scelta
 * sbagliata: mezza fila deserta non dice se aspetti qualcosa o se qualcosa sia
 * andato storto. E riempirla con «il tuo diario, presto» sarebbe stato
 * costruirlo vuoto — una promessa a schermo senza una data dietro.*
 *
 * **Il giorno in cui il diario si aggiunge prima dei documenti la fila diventa
 * quella del mockup senza che questa regola cambi.**
 *
 * *Qui c'era scritto «con uno solo e' largo quanto la fila» e «**`auto-fit`** dispone
 * cio' che trova» [corretto al punto 7.77]: **`auto-fit` e' di `grid`, e questa regola
 * e' `columns`** da quando e' passata alla fila impaccata — la riga qui sotto lo dice,
 * «non piu' la griglia». **Con `columns` un figlio unico sta nella prima colonna**, e
 * quel comportamento promesso era precisamente cio' che mancava: e' il difetto che il
 * 7.77 ha trovato nell'area.*
 */

/*
 * La testa del riquadro: il titolo a sinistra e, quando c'e', **il comando a
 * destra** — dove il mockup mette «Carica» e «Aggiungi uscita». Allineati alla
 * linea di base, perche' sono due testi e non due blocchi.
 */
/*
 * **Allineati al centro e non alla linea di base.**
 *
 * *Con `baseline` il browser allinea la **riga di testo** del pulsante a quella
 * del titolo — e il pulsante ha imbottitura e bordo sopra la propria riga,
 * quindi la sua scatola sporge in alto: a schermo «+ Carica» stava piu' su di
 * «I tuoi documenti».* Andava bene finche' il comando era un collegamento, cioe'
 * due testi; con un pulsante sono un testo e una scatola.
 */
.pannello-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
}

/*
 * Nella testa di un riquadro il pulsante e' largo quanto la sua parola: la
 * larghezza piena del principale serve nei moduli, dove chiude una colonna di
 * campi.
 */
.pannello-testa .pulsante-principale {
    width: auto;
    flex: none;
}

/*
 * Dentro un riquadro il titolo non stacca da cio' che sta sopra: e' il primo.
 *
 * **E vale anche per un `h3`** [punto 2 del trasferimento]: *un riquadro dentro
 * un riquadro — il riconoscimento del caso dentro la fascia — porta un titolo di
 * rango piu' basso, e **il livello dell'intestazione e' una gerarchia di
 * contenuto, non una misura di margine**. Senza questa riga l'`h3` teneva i
 * margini del browser e la testa si staccava dal proprio riquadro.*
 */
.pannello-testa h2,
.pannello-testa h3 {
    margin: 0;
}

/*
 * **Un riquadro annidato subito sotto la testa ne prende lo stacco** [prova a occhio del
 * committente · punto 7.150]: *la testa non ha margine sotto — lo porta il blocco che la
 * segue, come `.elenco-documenti` e `.tre-colonne` — e `.pannello` ha margine solo sotto.
 * Nel varco non spingeva nessuno.* **Stessa misura degli altri, stessa direzione**: *la
 * regola rispetta la convenzione invece di romperla, ed e' per questo che non tocca i
 * pannelli in cui il blocco che segue lo stacco lo porta gia'.*
 *
 * **Oggi vale soltanto nella fascia del tesseramento, e ne corregge due**: *il riquadro
 * «Che cosa ha consegnato» del primo tesseramento, visto oggi, e il riquadro dello scenario
 * del trasferimento — **appiccicato anche lui dal punto 3 del trasferimento**, e nessuno
 * l'aveva guardato.* Non e' un difetto nato oggi.
 */
.pannello-testa + .pannello {
    margin-top: var(--spazio-4);
}

/*
 * **Una pastiglia dentro il titolo sta accanto alle parole, non in fondo alla
 * riga** [21/08/2026].
 *
 * *`.pannello-testa` e' un `flex` con `space-between`: una pastiglia messa li'
 * dentro come fratello del titolo finisce **in alto a destra**, e su uno schermo
 * largo ha tutto il pannello in mezzo — **lontana dal punto in cui l'occhio
 * comincia a leggere**.*
 *
 * *Dentro l'`h2` invece segue le parole. **La misura del testo la porta gia'
 * `.stato`**, quindi non cresce con il titolo: qui serve il solo stacco.*
 *
 * **Lo stacco e' `--spazio-3`, ed era `--spazio-2`** [prova a occhio del committente ·
 * punto 7.150]: *la pastiglia stava appiccicata al titolo.* **Non e' un difetto nato
 * oggi**: *era cosi' anche prima, con «Modulo inviato» — oggi si e' solo guardato, sulla
 * pastiglia nuova dello stato.* **E la correzione vale anche per il trasferimento**, dove
 * «Modulo inviato» c'e' ancora.
 */
.pannello-testa h2 .stato {
    margin-left: var(--spazio-3);
    vertical-align: middle;
}

.pannello .sottotitolo {
    margin: var(--spazio-3) 0 0;
}

/*
 * **La chiosa di una voce del riepilogo**: dice a chi tocca il lavoro senza
 * spezzare il numero (RF-119).
 *
 * **Sta accanto al nome e non sotto**, perche' la riga e' una fila e non una
 * griglia: tenue e piu' piccola, cosi' si legge come una precisazione del nome e
 * non come una seconda voce. *`flex: 0 1 auto` la lascia stringere prima del
 * nome quando lo spazio manca — e' la parte che si puo' troncare.*
 */
.coda .chiosa {
    flex: 0 1 auto;
    color: var(--testo-tenue);
    font-size: .875rem;
}

/* --- Componente: la fascia dell'area del socio ------------------------- */

/*
 * **La fascia in alto del mockup**: il fatto, la conseguenza sotto, il comando a
 * destra.
 *
 * **La conseguenza e' la parte che fa muovere qualcuno**, e per questo non e' un
 * `aiuto` piccolo in fondo: sta sotto il titolo, nella stessa fascia, e si legge
 * di seguito. *«Scade fra 18 giorni» da solo non dice perche' dovrebbe
 * importare.*
 *
 * La barra di sinistra e' la stessa dell'avviso, e per la stessa ragione: **il
 * colore non basta mai da solo**, e la fascia porta comunque la propria parola
 * nel testo.
 */
/*
 * **E' un riquadro come gli altri, e ne prende la superficie.**
 *
 * *Era nata con `--superficie` e senza bordo: su fondo pagina la differenza e'
 * quasi invisibile, e la fascia sembrava una barra colorata appoggiata sul
 * nulla mentre «I tuoi documenti» accanto e' un blocco. Stessa superficie e
 * stesso bordo degli altri riquadri; cio' che la distingue e' **la barra a
 * sinistra**, che porta il colore dello stato.*
 */
.fascia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-4);
    margin: var(--spazio-5) 0 0;
    padding: var(--spazio-4) var(--spazio-5);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--accento);
    border-radius: var(--raggio-scheda);
}

/*
 * **I nomi sono quelli della scala**, gli stessi delle pastiglie del libro soci:
 * la fascia non inventa un colore proprio, e il codice le passa il nome che
 * `StatiDelSocio::scala()` usa per gli stati.
 */
.fascia-ordine {
    border-left-color: var(--in-ordine);
}

.fascia-attenzione {
    border-left-color: var(--attenzione);
}

.fascia-manca {
    border-left-color: var(--manca);
}

.fascia-testo {
    flex: 1 1 20rem;
}

/*
 * **La fascia di un'altra scheda, sopra la fila** (punto 7.4).
 *
 * *Non e' una fascia nuova: e' la stessa, resa **cliccabile**, perche' porta a
 * dove si rimedia — la scheda di chi riguarda. Non aggiunge una forma, toglie un
 * gesto.*
 *
 * **Il solo scarto e' che il testo non e' del colore dei collegamenti**: un
 * collegamento azzurro dentro una fascia con la barra ambra direbbe due stati
 * accanto. *Che si prema lo dice il cursore e il bordo che si accende, come per
 * le pastiglie della fila.*
 */
/*
 * **Un collegamento a blocco: si accende il bordo, non si sottolinea il testo.**
 *
 * *La regola globale sottolinea ogni `a:hover`, ed e' giusta per un collegamento
 * dentro una frase — e' **una parola** che si stacca. Su un blocco di tre righe la
 * sottolineatura le prende tutte, e cio' che era un riquadro informativo diventa un
 * pulsante: **promette un'azione diversa da quella che fa.***
 *
 * **L'eccezione sta su questa classe e non sulla regola**, e la classe si chiama
 * per quello che e' — non per dove sta oggi: *il prossimo blocco che dovra' portare
 * da qualche parte la riusa invece di rifare la stessa cura con un altro nome.*
 */
.collegamento-blocco {
    text-decoration: none;
    color: inherit;
}

.collegamento-blocco:hover,
.collegamento-blocco:focus-visible {
    text-decoration: none;
    border-color: var(--accento);
}

/*
 * **La fascia di un figlio e' un collegamento, quella propria no, ed e' voluto.**
 *
 * *La sua porta alla scheda di chi riguarda, che e' dove si rimedia; la propria non
 * ha nessun «la'» dove portare — **quella scheda e' gia' aperta**.*
 *
 * **Sta scritto perche' il prossimo non le uniformi**: farne due collegamenti
 * significherebbe averne uno che non porta da nessuna parte.
 */
.fascia-altrui {
    cursor: pointer;
}

/*
 * **Il nome di chi la fascia riguarda, sopra il fatto** (mockup).
 *
 * *Sopra la fila stanno gli avvisi di piu' persone, e la prima cosa da sapere e'
 * **di chi**: cercarlo in mezzo a una riga costa una lettura in piu' proprio a
 * chi sta scorrendo.* Maiuscoletto e tenue, come le etichette dei riquadri: dice
 * a chi appartiene senza competere con il fatto.
 *
 * **Il colore e' `--testo-tenue`, e la prima stesura diceva `--testo-terziario`:
 * un nome preso dal mockup, che ha una tavolozza sua.** *Una variabile che non
 * esiste non applica niente — il testo eredita, e l'eta' accanto al nome usciva
 * **verde d'accento** sulla linguetta aperta. **Nessun collaudo poteva dirlo**: un
 * colore mancante non e' un errore, e' una regola che non c'e'.*
 */
.fascia-chi {
    font-size: var(--testo-minuto);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--testo-tenue);
    margin: 0 0 .125rem;
}

/*
 * **Le linguette** (mockup dell'area del genitore), e sono l'unica forma nuova
 * del disegno.
 *
 * *Erano state fatte con `.filtri`, ed era **lo stesso mestiere con un'altra
 * veste**: la fila del libro soci porta domande allo stesso elenco e si veste da
 * pastiglia perche' una e' accesa; questa porta **persone**, e il mockup la fa di
 * testo con il sottolineato sotto quella aperta. Una fila di pastiglie piene
 * peserebbe quanto i comandi, e queste non comandano: dicono dove si e'.*
 */
.linguette {
    display: flex;
    gap: var(--spazio-2);
    margin-top: var(--spazio-5);
    border-bottom: 1px solid var(--bordo);
}

/*
 * *`align-items: baseline` non basta: nome ed eta' hanno due misure diverse, e la
 * linea di base allinea i piedi delle lettere — l'eta' finiva **piu' in alto** del
 * nome. **Center** le mette sulla stessa mezzeria, che e' cio' che il mockup mostra.*
 */
.linguetta {
    display: flex;
    align-items: center;
    gap: var(--spazio-2);
    padding: var(--spazio-3) var(--spazio-4);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--testo-secondario);
    font-weight: 600;
    text-decoration: none;
}

.linguetta:hover {
    color: var(--accento);
}

.linguetta.attiva {
    color: var(--accento);
    border-bottom-color: var(--accento);
}

/*
 * *L'altezza di riga ereditata e' calcolata sul testo normale: su un testo minuto
 * lascia sopra e sotto piu' spazio di quanto ne serva, e la parola galleggia. **A
 * uno** la scatola torna alta quanto la parola, e la mezzeria del `flex` la mette
 * davvero in mezzo.*
 */
.linguetta .eta,
.linguetta .stato-linguetta {
    line-height: 1;
}

.linguetta .eta {
    font-weight: 400;
    font-size: var(--testo-minuto);
    color: var(--testo-tenue);
}

/*
 * **Lo stato prende il posto dell'eta', e prende un colore della scala** (mockup):
 * *ambra per chi aspetta, rosa per chi e' stato respinto — gli stessi due delle
 * fasce, perche' **la scala dice gli stati** dovunque compaiano.*
 *
 * *E non e' un pallino: e' una parola. Il pallino dice «qui c'e' qualcosa da fare»,
 * e a chi aspetta il Consiglio non c'e' niente da fare.*
 */
.linguetta .stato-linguetta {
    font-weight: 400;
    font-size: var(--testo-minuto);
}

.linguetta .stato-in_attesa {
    color: var(--attenzione);
}

.linguetta .stato-respinta {
    color: var(--manca);
}

/*
 * **La fila va a capo su schermo stretto, e il bordo passa al blocco sotto.**
 *
 * *Le linguette sono navigazione, come la barra laterale del cruscotto, che sotto
 * 48rem va a capo: una fila che scorre nasconde cio' che sta a destra, e su un
 * elenco di persone la cosa nascosta e' **un figlio**.*
 *
 * E su due righe il sottolineato della fila non reggerebbe — quella sopra si
 * troverebbe un bordo in mezzo alla pagina — quindi il bordo scende, ed e' la
 * stessa cura della barra.
 */
@media (max-width: 51.25rem) {
    .linguette {
        flex-wrap: wrap;
        border-bottom: none;
        padding-bottom: var(--spazio-2);
    }

    .intestazione-scheda {
        border-top: 1px solid var(--bordo);
        padding-top: var(--spazio-5);
    }
}

/*
 * **L'intestazione della scheda: di chi sono i dati che seguono.**
 *
 * *Sta **dentro** il contenuto e non sopra le linguette, ed e' la ragione del
 * mockup: il numero di libro soci e' la posizione di chi la scheda dichiara —
 * sopra diceva il numero del padre mentre si guardava il figlio.*
 */
.intestazione-scheda {
    margin: var(--spazio-5) 0 var(--spazio-4);
}

.intestazione-scheda .di-chi {
    font-size: var(--testo-grande);
    font-weight: 700;
    margin: 0;
}

.intestazione-scheda .riga {
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    margin: .125rem 0 0;
}

/*
 * **Il segno sulla linguetta** (mockup dell'area del genitore).
 *
 * *Dice **in quale scheda guardare**, non che c'e' un problema: quello lo dice la
 * fascia qui sopra, per esteso e col nome. Per questo e' `aria-hidden` — chi
 * ascolta la pagina ha gia' letto la fascia, e un «pallino» annunciato sarebbe
 * rumore.*
 *
 * **I colori sono quelli della scala**, gli stessi della fascia che accompagna: la
 * forma nuova non ne inventa uno proprio.
 */
.segno {
    display: inline-block;
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
}

.segno-attenzione {
    background: var(--attenzione);
}

.segno-manca {
    background: var(--manca);
}

/*
 * **Il comando della fascia e' un pulsante pieno, e non largo quanto la fila.**
 *
 * *`.pulsante` da solo ha bordo trasparente e nessun fondo: e' la base, e come
 * `<a>` prendeva il colore dei collegamenti — cioe' sembrava testo. Accanto a
 * «+ Carica», che nella stessa schermata e' un pulsante vero, **due comandi
 * adiacenti con due forme diverse insegnano che la forma non significa
 * niente.***
 *
 * La larghezza piena del principale serve nei moduli, dove il pulsante chiude
 * una colonna di campi: qui sta **accanto a un testo**, e va largo quanto la sua
 * parola.
 */
.fascia .pulsante-principale {
    width: auto;
    flex: none;
}

/*
 * **Un pieghevole aperto dentro una fascia prende tutta la riga** (punto 7.150 · prova
 * a occhio del committente). *La fascia mette i comandi accanto al testo, ciascuno largo
 * quanto la sua parola: aperto, il pieghevole restava largo quanto il suo pulsante, e il
 * campo del file — che è già al 100% — era il 100% di una scatola stretta.* **Si allarga
 * il contenitore e non il campo**: *il campo era già giusto.*
 *
 * **Vale per qualunque pieghevole entri in una fascia**, non per il solo controfirmato:
 * *chiuso resta un comando accanto al testo; aperto va a capo, e il modulo prende la
 * larghezza del riquadro.*
 */
.fascia > details[open] {
    flex-basis: 100%;
}

.fascia-titolo {
    margin: 0;
    font-weight: 600;
}

/*
 * **La riga di dettaglio sta attaccata al fatto, e si legge come sua** (punto 7.7).
 *
 * *Con `--spazio-2` sopra e la misura quasi del testo normale, si leggeva come **una
 * frase a parte**: due affermazioni invece di una cosa detta e spiegata.*
 *
 * **Vale per tutte le righe di dettaglio della pagina** — la conseguenza della
 * fascia, la nota di un riquadro di stato, il dettaglio di un documento: *se una e'
 * staccata lo sono tutte, e la pagina diventa un elenco di frasi sciolte.*
 *
 * *Le misure vengono dalle variabili: `--spazio-minimo` nasce qui perche' la scala
 * partiva da quattro pixel e questo accostamento ne vuole meno.*
 */
.fascia-conseguenza {
    margin: var(--spazio-minimo) 0 0;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/* --- Componente: i riquadri di stato dell'area ------------------------- */

/*
 * La fila di riquadri del mockup — posizione, tessera, chilometri. **Oggi ce
 * n'e' uno**, e la griglia lo tiene alla larghezza di uno dei tre invece di
 * stirarlo per tutta la pagina: *un riquadro largo quanto la scheda direbbe che
 * quella e' la sua forma, e non lo e'.*
 */
.stati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 18rem));
    gap: var(--spazio-4);
    margin-top: var(--spazio-5);
}

.stato-riquadro {
    padding: var(--spazio-4) var(--spazio-5);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-scheda);
}

.stato-nome {
    margin: 0;
    color: var(--testo-tenue);
    font-size: .875rem;
}

/*
 * *Il valore di un riquadro di stato e' **uno stato**, non un comando: prende il
 * verde della scala.*
 */
.stato-valore {
    margin: var(--spazio-1) 0 0;
    color: var(--in-ordine);
    font-size: 1.375rem;
}

/*
 * **Il valore di un riquadro prende il colore dello stato che dice** (punto 7.7).
 *
 * *«In ordine» resta il verde di prima; **attenzione e manca lo cambiano**, o il
 * riquadro direbbe in verde una cosa che la fascia sopra dice in ambra — **due
 * letture dello stesso fatto che non concordano**.*
 */
.stato-valore-attenzione {
    color: var(--attenzione);
}

/*
 * **La quarta variante: un riquadro che NON GIUDICA** [mockup del diario del 25/08/2026,
 * ratificato · punto A del consenso].
 *
 * *Le tre varianti che c'erano — in ordine, attenzione, manca — **sono tutte stati**, e
 * la riga qui sopra dice perche' prendono il colore del proprio: «il valore di un riquadro
 * di stato e' uno stato, non un comando».* **Quella riga resta vera e non si cancella**:
 * *i quattro stati continuano a fare cosi'.*
 *
 * ***Ma un battito di 148 non e' uno stato***: *e' una misura, e **il portale non ha
 * nessun criterio per dire se sia buona**. Il verde affermerebbe una cosa che nessuno puo'
 * stabilire.*
 *
 * **E il danno non starebbe qui** [ragione del committente]: *un colore che significa
 * qualcosa in dieci posti e niente nell'undicesimo **perde il significato in tutti e
 * undici**.*
 *
 * *Nessuna tinta nuova — `--testo`, il colore del testo del portale — e **il fondo non si
 * tocca affatto**: `.stato-riquadro` porta gia' `--superficie-alta`, che e' neutra per
 * costruzione.*
 */
.stato-valore-neutro {
    color: var(--testo);
}

/*
 * **La faccina dello sforzo percepito** [mockup del diario, ratificato].
 *
 * *Sta **dentro** il valore, fra il numero e la parola: «3 [faccina] Medio». I tre pezzi
 * sono una cosa sola — **il numero da' la scala, la parola la dice, la faccina la si legge
 * da lontano**, che e' il mestiere di questo riquadro.*
 *
 * *`vertical-align` la porta sulla linea di base del numero: senza, un'icona in linea
 * siede sul fondo del testo e la riga sembra storta.*
 */
.faccina {
    width: var(--misura-icona);
    height: var(--misura-icona);
    vertical-align: -.15em;
}

/*
 * **Il colore della faccina segue lo sforzo, e sono le TINTE CHE IL PORTALE HA GIA'**
 * [decisione del committente · a occhio].
 *
 * *Nessuna scala nuova: `--in-ordine`, `--attenzione`, `--manca` sono le tre della scala
 * di stato, e una quarta tinta inventata qui varrebbe in un posto solo.*
 *
 * ## Il colore e' un RINFORZO, non l'informazione
 *
 * **Accanto restano il numero e la parola**: *chi non distingue i colori legge «3 ·
 * Medio» esattamente come prima.* *E' la stessa disciplina delle pastiglie di stato, dove
 * il colore accompagna una parola e non la sostituisce.*
 *
 * ## E il VALORE resta neutro, che e' un'altra cosa
 *
 * *`.stato-valore-neutro` toglie il verde al numero perche' **un battito di 148 non e' uno
 * stato**. Qui invece il colore sta sulla **faccina**, e la faccina dice la scala che il
 * socio stesso ha dichiarato: non giudica una misura, **rispecchia una risposta**.*
 *
 * **La tensione con la riga di `--in-ordine` va detta**, perche' e' vera: *su uno sforzo
 * di 5 questa regola usa `--manca`, che altrove significa «qualcosa non c'e'». **Uno
 * sforzo massimale non e' un difetto.*** *Le tinte pero' sono tre e i gradi cinque: o si
 * usa la scala che c'e', o ne nasce una che vive in questa sola regola. La prima e' la
 * decisione presa; se un giorno servisse un arancio distinto dal rosso, quella e' una
 * tinta nuova e si decide per se'.*
 */
.faccina-1,
.faccina-2 {
    color: var(--in-ordine);
}

.faccina-3 {
    color: var(--attenzione);
}

.faccina-4,
.faccina-5 {
    color: var(--manca);
}

.stato-valore-manca {
    color: var(--manca);
}

.stato-valore-chiuso {
    color: var(--chiuso);
}

.stato-riga {
    margin: var(--spazio-minimo) 0 0;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/* --- Componente: l'elenco dei documenti del socio ---------------------- */

/*
 * Ogni riga porta **il nome e, sotto, lo stato o la scadenza**, come nel
 * mockup. *Il dettaglio sotto e non accanto: affiancati, un nome lungo e una
 * data si spingerebbero a vicenda su due colonne che cambiano larghezza a ogni
 * riga.*
 */
.elenco-documenti {
    margin: var(--spazio-4) 0 0;
    padding: 0;
    list-style: none;
}

/*
 * **La riga di un documento: l'icona a sinistra, il testo accanto** (punto 7.7).
 *
 * *L'icona sta **in mezzeria** rispetto al blocco di testo. La prima stesura la
 * teneva sulla prima riga, con l'argomento che centrata sarebbe finita **fra** nome
 * e dettaglio — accanto a nessuno dei due: l'argomento non regge alla prova, perche'
 * le due righe insieme **sono un blocco solo**, e l'icona accompagna quello.*
 */
.elenco-documenti li {
    display: flex;
    align-items: center;
    /*
     * **Va a capo perche' una riga puo' portare un blocco intero** [punto 7.57]:
     * *il rifiuto dice che cosa fare — «Serve una fotografia nuova», il motivo, e
     * che la precedente non torna — e quello **non sta accanto al nome**: prende
     * la riga sotto, tutta.*
     */
    flex-wrap: wrap;
    gap: var(--spazio-3);
    padding: var(--spazio-3) 0;
    border-top: 1px solid var(--bordo);
}

/*
 * **Cio' che va a capo dentro una riga si allinea al testo, non all'icona**
 * [punto 7.58].
 *
 * *Il riquadro del rifiuto e la sua storia prendono la riga sotto, e senza rientro
 * cominciavano **sotto l'icona**: sembravano appartenere al pannello invece che al
 * documento di sopra.*
 *
 * **Il rientro e' quello che l'icona occupa** — `--misura-icona` piu' il vuoto della
 * riga — *e si ricava dalle due misure che lo producono, invece di essere un numero
 * indovinato: il giorno in cui l'icona cambia, il rientro la segue.*
 */
.elenco-documenti li > .avviso,
.elenco-documenti li > .storia-del-rifiuto {
    flex: 1 1 100%;
    margin: 0 0 0 calc(var(--misura-icona) + var(--spazio-3));
}

/*
 * **Il rifiuto a cui qualcuno ha gia' rimediato: storia, non lavoro** [punto 7.58].
 *
 * *Prende la riga sotto come il riquadro rosso, ma **non ne ha il peso**: nessun
 * colore d'allarme, il titolo grigio e minuto, e nasce chiuso. **Il motivo non si
 * cancella: si mette via** — chi ha ricaricato potrebbe non aver rifatto bene, e
 * l'unica cosa che glielo dice e' la frase di prima.*
 *
 * *Compare solo dove un motivo c'e': su un superato mai respinto **non c'e' niente
 * da aprire**, e un comando che non apre niente insegna a non premerlo.*
 */
.storia-del-rifiuto {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

.storia-del-rifiuto p {
    margin-top: var(--spazio-1);
}

/*
 * **Il raccoglitore delle versioni superate** [punto 7.59].
 *
 * **Non e' «vedi tutti»**: *quel gesto apre altre pagine dello stesso elenco —
 * altre uscite del diario, altri atti del giornale — **questo apre la storia di
 * cio' che sta sopra**. Sono due cose diverse, e vestirle uguali le confonderebbe:
 * il «vedi tutti» del giornale e' un **comando** in fondo a una lista, questo e'
 * una **riga che si apre**.*
 *
 * *Sta sotto l'elenco, separato da una linea come le altre chiuse del portale, e
 * **non ha il colore di un comando**: e' storia, e chi la cerca la trova.*
 *
 * **Il triangolo del browser resta**, a differenza del pieghevole della coda dei
 * certificati: *li' il titolo era un **comando** e il segno era di troppo; qui la
 * riga dice «c'e' dell'altro sotto», ed e' esattamente quello che il triangolo
 * disegna.*
 */
.raccoglitore {
    margin-top: var(--spazio-3);
    padding-top: var(--spazio-3);
    border-top: 1px solid var(--bordo);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

/*
 * *Le righe raccolte sono piu' minute di quelle che valgono: **il pannello dice
 * con la misura che quella e' storia**, senza doverlo scrivere.*
 */
.raccoglitore .elenco-documenti {
    margin-top: var(--spazio-2);
}

.raccoglitore .documento-nome {
    color: var(--testo-secondario);
}

/*
 * **I documenti per anno** (RF-162 · punto 7.170 · mockup «Documenti per anno»).
 *
 * *Ogni gruppo — l'Identità e ciascun anno — sta sotto una linea, come il raccoglitore:
 * il pannello si legge a blocchi.* **Il capo dell'anno porta il numero in evidenza e il
 * resto in tenue**: *il conto e «in corso» qualificano il numero, non gli fanno
 * concorrenza.* **L'esito andato male è l'unica cosa colorata del capo**, *perché è
 * l'eccezione che chi scorre deve notare.*
 *
 * **I nomi cominciano tutti per `anno-` e `identita-`**: *`.gruppo` è già il modulo con
 * cui si esce, su ogni pagina dietro l'accesso.*
 */
.identita-documenti,
.anno-documenti {
    margin-top: var(--spazio-3);
    padding-top: var(--spazio-2);
    border-top: 1px solid var(--bordo);
}

.anno-capo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spazio-2);
    margin: 0;
    font-size: var(--testo-medio);
    font-weight: 600;
}

.anno-documenti > summary.anno-capo {
    cursor: pointer;
}

.anno-documenti:not([open]) .anno-numero {
    color: var(--testo-secondario);
}

.anno-conto {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    font-weight: 400;
}

.anno-in-corso {
    color: var(--accento);
    font-size: var(--testo-minuto);
    font-weight: 400;
}

.anno-esito {
    color: var(--manca);
    font-size: var(--testo-minuto);
    font-weight: 400;
}

/*
 * **Il contrassegno della riga che il socio non vede** [decisione del committente]: *sta
 * accanto al nome, minuto, e non è una pastiglia di stato — non dice come sta il
 * documento, dice chi lo vede.*
 */
.non-la-vede-il-socio {
    margin-left: var(--spazio-2);
    color: var(--attenzione);
    font-size: var(--testo-minuto);
}

/*
 * **L'anteprima della fotografia, sulla sola schermata dell'atto** [punto 7.57].
 *
 * *Il gestore deve **vederla** per accettarla — se il viso si riconosce, se e' a
 * fuoco, se e' quella persona — e un atto compiuto senza guardarla e' una firma
 * su niente.*
 *
 * **Sta qui e in nessun elenco**: *ogni consegna scrive una riga in
 * `accessi_documento` (RNF-051), e un'anteprima in una coda di venti sarebbe
 * venti decifrazioni e venti righe scritte da chi stava solo scorrendo.*
 *
 * *La misura e' generosa ma non piena: una fotografia da tessera guardata a
 * schermo intero non si giudica meglio, e la pagina deve restare leggibile con i
 * due comandi sotto.*
 */
.anteprima {
    margin-top: var(--spazio-4);
}

.anteprima img {
    max-width: min(100%, 18rem);
    height: auto;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-campo);
}

/*
 * *Il testo prende lo spazio che resta: senza, un nome lungo spingerebbe l'icona
 * fuori dalla riga invece di andare a capo.*
 */
.documento-testo {
    flex: 1;
    min-width: 0;
}

.elenco-documenti li:first-child {
    border-top: 0;
}

.documento-nome {
    display: block;
}

.documento-dettaglio {
    display: block;
    margin-top: var(--spazio-minimo);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * **Un pezzo del dettaglio non si spezza dentro** [punto 7.56].
 *
 * *La riga andava a capo in mezzo a una data — «caricato il / 19/08/2026» — perche'
 * il dettaglio era **un blocco di testo solo**, e un blocco va a capo dove capita.
 * A pezzi, l'unico punto in cui puo' spezzarsi e' **fra** un pezzo e l'altro.*
 *
 * **E succedeva dove c'era piu' da leggere**: *i riquadri stanno in colonne da
 * `18rem` — `.pannelli` — la pastiglia dello stato non si stringe, e il testo prende
 * cio' che resta. **Le righe lunghe sono quelle che si spezzano**, ed erano proprio
 * quelle da leggere.*
 *
 * **Il puntino sta qui e non nella veduta**: *e' il segno con cui questo elenco
 * separa i suoi pezzi, e scritto in una pagina la seconda che elenca documenti ne
 * userebbe un altro.*
 *
 * **E chiude il pezzo invece di aprire il successivo**: *cosi' resta in fondo alla
 * prima riga. Davanti al secondo pezzo, andando a capo comincerebbe la riga nuova
 * con un puntino sospeso.*
 */
.documento-dettaglio .pezzo {
    white-space: nowrap;
}

.documento-dettaglio .pezzo:not(:last-child)::after {
    content: ' ·';
}

/*
 * **Che cosa e' cambiato, sotto la riga di un atto** (RF-130, punto 7.33).
 *
 * *Non e' un elenco puntato: i pallini direbbero «ecco delle cose», e queste sono
 * **una cosa sola letta due volte** — prima e dopo. Vanno in fila, con la freccia
 * in mezzo.*
 *
 * **Il valore precedente e' tenue e quello nuovo no**: *chi guarda cerca cio' che
 * c'e' adesso, e trova il prima solo se lo cerca. Nessun barrato — un dato
 * corretto non e' un dato cancellato.*
 *
 * *Va a capo su schermo stretto: sono valori di lunghezza qualunque, e uno
 * `nowrap` li spingerebbe fuori dalla scheda.*
 */
.cambiamenti {
    list-style: none;
    margin: var(--spazio-minimo) 0 0;
    padding: 0;
}

.cambiamenti li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-minimo);
    align-items: baseline;
    font-size: var(--testo-minuto);
}

.cambiato-campo {
    color: var(--testo-tenue);
}

.cambiato-campo::after {
    content: ':';
}

.cambiato-prima {
    color: var(--testo-tenue);
}

.cambiato-freccia {
    color: var(--testo-tenue);
}

/*
 * La correzione sta chiusa e si apre: **e' un rimedio, non un passo del
 * percorso**, e aperta di suo raddoppierebbe la pagina di chi non ha niente da
 * correggere.
 */
.correzione {
    margin-top: var(--spazio-5);
}

.correzione summary {
    cursor: pointer;
    color: var(--accento);
}

/* Il comando che segue una spiegazione ha bisogno d'aria; da solo no. */
.pannello .sottotitolo + form {
    margin-top: var(--spazio-4);
}

/* --- Componente: piede della scheda (punto 12) -------------------------- */

/*
 * Dove si e' e che cosa si fa, sulla stessa riga: a sinistra «Passo 1 di 4», a
 * destra il pulsante che porta avanti.
 *
 * *Nel mockup e' separato dal contenuto da una riga sottile, ed e' l'unico
 * posto della pagina in cui il pulsante principale compare: chi scorre fino in
 * fondo sa di aver finito.*
 */
.piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spazio-3);
    margin-top: var(--spazio-5);
    padding-top: var(--spazio-4);
    border-top: 1px solid var(--bordo);
}

/*
 * **Nel piede il pulsante ha la sua larghezza naturale.**
 *
 * `.pulsante-principale` porta `width: 100%` dal pacchetto 1, dove il pulsante
 * principale era «Entra» su una scheda stretta e occupare la riga era giusto.
 * *La larghezza pero' e' una proprieta' del contenitore e non del pulsante: qui
 * accanto c'e' «Passo 1 di 4», e un pulsante largo quanto la pagina lo
 * spingerebbe su un'altra riga.*
 *
 * Quando anche le pagine di accesso e registrazione saranno vestite, quella
 * larghezza si spostera' dove appartiene — sulla scheda stretta — e questa riga
 * potra' sparire.
 */
/*
 * **Il piede della pagina, dove le schede sono piu' d'una** (punto 7.7).
 *
 * *Con le linguette, un piede appoggiato subito sotto il contenuto sembra parte
 * della scheda aperta — e «Aggiungi un figlio» dentro la scheda di un figlio e'
 * fuori posto. **Non si nasconde**: un genitore non socio non ha la scheda «Tu» e
 * lo perderebbe del tutto. **Si separa**, e la distanza dice dove finisce la
 * scheda.*
 */
/*
 * *Sta **fuori** dal riquadro della scheda, quindi non ha piu' bisogno di una riga
 * che lo separi: a chiuderlo e' il bordo del riquadro stesso.*
 *
 * **Ma fuori dal riquadro perdeva anche la colonna**, e finiva contro il bordo
 * della finestra mentre il riquadro sopra restava centrato. *La larghezza non si
 * riscrive qui: la porta `.larga`, che e' **la colonna della pagina** — un secondo
 * `60rem` scritto in questa regola diverge il giorno in cui quello cambia.* Qui
 * resta solo il centramento, che `.scheda` dava e che questo blocco non eredita.
 */
/*
 * **Il piede dell'area, dove le schede sono piu' d'una** (punto 7.7).
 *
 * *L'unica cosa che serviva era **piu' distanza dal contenuto della scheda**: la
 * riga sopra ce l'ha gia' `.piede`, ed e' quella a dargli casa. Toglierla — e
 * portarlo fuori dal riquadro — lasciava il pulsante nudo sul fondo della pagina,
 * e **un comando senza casa si attacca a cio' che gli sta piu' vicino**.*
 *
 * **E' anche la forma del mockup**, che qui non inventa niente: `margin-top`,
 * `padding-top` e una riga sopra — cioe' esattamente cio' che `.piede` porta gia'
 * per le altre pagine.
 */
.piede-della-pagina {
    margin-top: var(--spazio-6);
    padding-top: 0;
    border-top: none;
}

/*
 * **La riga sta SOTTO il comando, non sopra**, e la differenza e' tutta nella
 * lettura.
 *
 * *Sopra, il comando **apriva il piede**: chi guardava la scheda di un figlio
 * leggeva «Aggiungi un figlio» come un atto su quel figlio. Sotto, **chiude cio'
 * che sta sopra** — e cio' che sta sopra sono le schede, tutte.*
 *
 * **Il portale fa la cosa giusta e la pagina ne suggeriva un'altra**: chi preme e'
 * sempre chi e' entrato. *Non era sbagliato: era frainteso, ed e' il difetto
 * peggiore perche' nessun collaudo puo' vederlo.*
 */
.comando-che-chiude {
    padding-bottom: var(--spazio-5);
    border-bottom: 1px solid var(--bordo);
    margin-bottom: var(--spazio-5);
    width: 100%;
}

/*
 * **I comandi della persona che e' entrata, su una riga sola** [punto 7.102, dalla
 * prova a occhio del committente].
 *
 * *«Aggiungi chi rappresenti» e «I miei dati» sono i due comandi che non appartengono
 * a nessuna scheda, e il mockup li disegna **accostati**. Ciascuno con la propria
 * `.comando-che-chiude` produceva **una linea per comando**: il secondo finiva oltre
 * la linea del primo, e **sembrava appartenere al pannello che gli sta sotto**.*
 *
 * **La linea adesso e' del gruppo**, che e' cio' che quella classe voleva dire: chiude
 * i comandi della persona e li separa da cio' che viene dopo.
 *
 * *`flex-wrap` perche' su schermo stretto tre comandi su una riga non ci stanno, e
 * andare a capo e' meglio che restringersi: e' la scelta gia' fatta per la fila delle
 * linguette al punto 7.5.*
 */
.comandi-della-persona {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-3);
    align-items: center;
}

.comandi-della-persona form {
    margin: 0;
}

.piede .pulsante {
    width: auto;
}

/*
 * «Indietro» e «Continua» stanno insieme, all'estremita' opposta del «dove sei»
 * — e quando il «dove sei» non c'e', vanno a destra lo stesso: nel mockup i
 * comandi che concludono stanno **sempre** a quell'angolo, e cambiare lato a
 * seconda di cio' che li accompagna li farebbe cercare ogni volta.
 */
.piede .comandi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-3);
    margin-left: auto;
}

/*
 * **Le alternative di una scelta stanno vicine.** In colonna, con il passo
 * stretto: la distanza fra due risposte dice se sono due risposte alla stessa
 * domanda o due domande.
 */
.scelte {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-2);
    margin-bottom: var(--spazio-3);
}

.scelte .campo-scelta {
    margin: 0;
}

/*
 * Affiancate quando la riga e' larga e le voci sono corte: e' il caso della
 * delibera, dove le tre risposte stanno accanto al nome.
 *
 * **Staccate da cio' che le precede**: sono la decisione da prendere, non la
 * coda dei dati che stanno sopra. Attaccate al valore della quota sembravano
 * l'ultima riga di quell'elenco.
 */
.riga-scelte {
    gap: var(--spazio-5);
    margin-top: var(--spazio-4);
}

.riga-scelte .campo-scelta {
    flex: none;
}

.piede .dove-sono {
    margin: 0;
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

/* --- Componente: pulsanti ---------------------------------------------- */

/*
 * **`.pulsante` da sola non veste niente, e questo e' il difetto sotto il difetto**
 * [18/08/2026, punto 7.39].
 *
 * *Qui ci sono le **misure** — riempimento, raggio, peso, cursore — e non il fondo
 * ne' la tinta: quelli li mettono le due varianti. **Chi scrive `class="pulsante"`
 * e si ferma non vede un pulsante mezzo vestito: ne vede uno vestito dal browser**,
 * grigio di sistema, che nessuno ha scelto.*
 *
 * **Ed e' peggio di un colore sbagliato**: *nel fascicolo quel grigio somigliava a
 * `.spento`, che e' un grigio **deciso** — due significati opposti convergevano su
 * una tinta perche' uno dei due non ne aveva una.*
 *
 * **Non si puo' rendere impossibile con il CSS**: *dare un fondo a `.pulsante`
 * significherebbe che una delle due varianti diventa il valore di partenza, e chi
 * vuole l'altra deve **disfare** invece di scegliere — la stessa forma del predefinito
 * che sceglie da se'.* **La difesa e' un collaudo**: `VesteDelPortaleTest` pretende
 * che nessuna veduta usi `.pulsante` senza una delle due varianti.
 *
 * **Chi ne inventa una terza deve aggiungerla a quell'elenco**, e in quel momento si
 * accorge di stare inventando un terzo aspetto.
 */
.pulsante {
    display: inline-block;
    padding: .625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

/*
 * **Un comando puo' essere un collegamento**, quando non compie un atto ma porta
 * altrove: «Annulla» accanto a «Registra delibera» torna alla pagina di prima e
 * non manda niente. Ha l'aspetto di un pulsante perche' **sta in una fila di
 * pulsanti** — e li' un testo sottolineato sembrerebbe un ripensamento del
 * disegno, non una scelta.
 *
 * *Resta un collegamento anche per il browser: si apre in una scheda nuova, si
 * copia, e chi torna indietro non rimanda niente.*
 */
a.pulsante {
    text-decoration: none;
}

/* Il principale e' pieno d'accento, con testo scuro sopra: mai il contrario. */
.pulsante-principale {
    background: var(--accento);
    color: var(--fondo);
}

/*
 * **La barra piena e' un mestiere a parte** [18/08/2026, punto 7.40].
 *
 * *`width: 100%` stava dentro `.pulsante-principale`, e li' due mestieri diversi
 * portavano una parola sola: **«principale» dice quanto conta, la larghezza dice come
 * si dispone**. Il portale separa gia' le altre — `.pulsante-minuto` e' la misura,
 * `.spento` e' lo stato — e questa era rimasta attaccata.*
 *
 * **Il difetto si vedeva a meta', ed e' la ragione per cui e' durato.** *Dove il
 * genitore e' **flex** — `.piede`, `.fascia`, `.lavoro` — il pulsante e' un elemento
 * flessibile e **si restringe**: la larghezza piena non si vede. Dove il genitore e' un
 * blocco — una `form`, una `.scheda` — il pulsante e' solo sulla riga e **si allarga
 * per intero**. **La stessa classe produceva due larghezze a seconda del genitore.***
 *
 * **Resta dov'era voluta**: i moduli a colonna sola che chiudono una pagina — entrare,
 * registrarsi, la password nuova, la riconferma. *Li' la barra piena e' il disegno, non
 * un effetto: e' l'ultima cosa di una colonna di campi, e ne prende la larghezza.*
 *
 * *Altrove un pulsante prende la larghezza del proprio testo, che e' la larghezza
 * naturale di un pulsante.*
 */
.pulsante-a-riga {
    width: 100%;
}

.pulsante-secondario {
    background: transparent;
    color: var(--testo);
    border-color: var(--bordo);
}

.pulsante-secondario:hover {
    border-color: var(--bordo-attivo);
}

/*
 * **La misura minuta, che era scritta in tre punti.**
 *
 * Un pulsante **accanto a un testo** — nella testa di un riquadro, dentro una
 * fascia, in fondo all'intestazione — non ha la misura di quelli che chiudono un
 * modulo: li' il pulsante e' l'ultima cosa di una colonna di campi, qui sta di
 * fianco a una parola.
 *
 * *Le due misure erano ricopiate tre volte, e la terza le avrebbe date un nome
 * diverso: da qui in poi la misura ha un nome, e chi ne vuole una nuova deve
 * accorgersi di stare inventando un terzo formato.*
 */
.pulsante-minuto {
    padding: .375rem .75rem;
    font-size: var(--testo-minuto);
}

/*
 * **Il comando che aggiunge porta un `+` davanti**, come nel mockup — «Carica»
 * nei documenti, «Aggiungi uscita» nel diario quando arrivera'.
 *
 * *Il segno non sostituisce la parola: da solo si interpreta, e due comandi
 * diversi avrebbero la stessa icona. Sta **fuori dalla lettura** perche' la
 * parola dice gia' tutto, e chi ascolta sentirebbe «piu' Carica».*
 *
 * Prende il colore del testo del pulsante: su un pieno d'accento e' scuro come
 * la parola accanto. *Colorarlo d'accento lo renderebbe invisibile proprio dove
 * il pulsante e' pieno.*
 */
.pulsante-aggiunge::before {
    content: '+';
    margin-right: .375rem;
}

/* --- Componente: riquadro di avviso, tre gradazioni -------------------- */

/*
 * Il colore non basta mai da solo: ogni riquadro porta la propria parola nel
 * testo, e la barra di sinistra e' un secondo segnale per chi il colore non lo
 * distingue.
 */
.avviso {
    margin: 0 0 1.25rem;
    padding: .75rem 1rem;
    background: var(--superficie);
    border-left: 3px solid var(--accento);
    border-radius: .375rem;
    font-size: .9375rem;
}

/*
 * **Fra una fascia e l'avviso che la segue la distanza non c'era**, e i due si
 * toccavano [secondo tempo del pacchetto federale, dalla prova a occhio].
 *
 * **Non era un contenitore: sono fratelli.** *Era che **ciascuno porta la propria
 * distanza dalla parte opposta all'altro** — `.fascia` ha margine solo sopra,
 * `.avviso` solo sotto — e nel varco in mezzo non spingeva nessuno.*
 *
 * **Altrove non si vedeva perche' il varco lo copriva cio' che segue**: *nell'area
 * dopo la fascia viene `.pannelli`, che porta `margin-top`. Nel fascicolo dopo la
 * fascia viene un avviso, che un margine sopra non ce l'ha.*
 *
 * **E la cura non allarga ne' l'una ne' l'altro**: *un margine inferiore sulla
 * fascia raddoppierebbe lo spazio nell'area — venti piu' venti — e uno superiore
 * sull'avviso lo farebbe dove gli avvisi sono gia' distanziati da cio' che li
 * precede. **Si curerebbe un varco creandone due sbagliati.***
 *
 * *La distanza sta **fra i due**, che e' la forma gia' usata quattro volte in
 * questo foglio — `.al-cruscotto + .chi-opera`, `.chi-opera + .uscita`,
 * `.avvertenza + .pulsante`, `.larga + .lingue` — e il valore e' quello che la
 * fascia dichiara gia' per se'.*
 *
 * **E lo stesso varco fra la fascia e un pieghevole che la segue** [prova a occhio del
 * committente · punto 7.150]: *la porta secondaria dello stato «da verificare», sotto il
 * riquadro della verifica, gli stava appiccicata.* **Un secondo selettore e non una
 * regola nuova**: *e' lo stesso accostamento, con la stessa cura.*
 *
 * **Non vale per la riga d'aiuto che segue la fascia, ed e' una scelta** [decisione del
 * committente]: *«Senza il modulo controfirmato non si puo' registrare la tessera»
 * COMMENTA il riquadro, non e' un elemento a se'. **Lo stacco minimo dice che le due cose
 * si leggono insieme**, e allontanarla la farebbe sembrare un'altra affermazione.* Chi la
 * trovasse stretta sappia che e' voluto.
 *
 * **[Punto 7.163] Tre stacchi mancanti, una causa sola, e la regola si allarga invece di
 * moltiplicarsi** [decisione del committente: «curala con una regola sola invece che con
 * tre margini a mano»]. *Nel fascicolo «… ha dichiarato che carica i fogli dal portale»
 * toccava «Di che caso si tratta»; nella pagina del socio la scelta dei motivi del nulla osta
 * toccava il form del caricamento, e l'avviso d'esito il sottotitolo.* **Era sempre questo
 * varco**: *la fascia porta la distanza sopra, e il fratello che segue non la porta dalla
 * sua parte.* **Qui stavano due selettori, `.fascia + .avviso` e `.fascia + details`**: *erano
 * due casi dello stesso varco scritti uno per uno, e il terzo — un riquadro — mancava.*
 * **Ora è qualunque fratello tranne la riga d'aiuto**, *che resta attaccata per la decisione
 * scritta qui sopra.* **E l'avviso d'esito in riquadro prende la stessa distanza da ciò che lo
 * precede**: *è il caso della pagina del socio, dove sopra c'è la riga d'aiuto del titolo.*
 */
.fascia + :not(.aiuto),
* + .avviso-riquadro {
    margin-top: var(--spazio-5);
}

/*
 * **L'avviso d'esito in riquadro** [punto 7.163 · mockup «Ritocchi pagina socio», pannello
 * B]. *Nella pagina del tesseramento l'esito era una riga nuda, attaccata al sottotitolo e
 * sporgente a sinistra rispetto ai riquadri dei passi.* **Prende la forma dei riquadri** —
 * *bordo, raggio, superficie — e la barra di sinistra nel colore dell'ordine: è un fatto
 * andato a buon fine.* **La distanza sopra viene dalla regola dei varchi, qui sopra**: *una
 * seconda casa della stessa misura divergerebbe.*
 */
.avviso.avviso-riquadro {
    margin-bottom: var(--spazio-5);
    padding: var(--spazio-4) var(--spazio-5);
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--in-ordine);
    border-radius: var(--raggio-scheda);
}

.avviso-attenzione {
    border-left-color: var(--attenzione);
    color: var(--attenzione);
}

.avviso-manca {
    border-left-color: var(--manca);
    color: var(--manca);
}

/*
 * **I due rami del pieghevole della risposta** (punto 4 del trasferimento).
 *
 * *Il gestore dice prima com'e' andata, e **i campi che compaiono sono quelli di
 * quella risposta**: cinque insieme farebbero cercare quali dei cinque riempire.*
 *
 * **Senza JavaScript, ed e' l'idioma che questo foglio usa gia' due volte**: il
 * motivo del rifiuto nella delibera (`.pannello:has(… [value="respinta"]:checked)`)
 * e il blocco della provenienza nella domanda. *Il portale non ha uno script — e il
 * primo non nasce per far comparire due campi.*
 *
 * **La forma e' `:has()` sul modulo e non `~` sui fratelli**: i due rami stanno
 * dentro `<div>` che non sono fratelli dei radio, e il selettore di fratello non li
 * raggiungerebbe. `:has()` sale al modulo e ridiscende.
 *
 * *E il ripiego e' NASCOSTO: chi non ha ancora scelto non vede nessun campo, che e'
 * cio' che la scelta esiste per ottenere.*
 */
.risposta-federale .ramo-autorizzato,
.risposta-federale .ramo-respinto {
    display: none;
}

.risposta-federale form:has(#risposta-autorizzato:checked) .ramo-autorizzato,
.risposta-federale form:has(#risposta-respinto:checked) .ramo-respinto {
    display: block;
}

/*
 * **Quando la validazione rimanda indietro, il ramo giusto si riapre da se'.**
 *
 * *`old('risposta')` rimarca il radio, e il ramo ricompare con dentro i suoi errori:
 * **senza, chi ha sbagliato un campo tornerebbe a un pieghevole aperto e vuoto**, con
 * i messaggi d'errore nascosti sotto un ramo chiuso — e non saprebbe che cosa
 * correggere.*
 *
 * *E' la ragione per cui il pieghevole si apre su **tutte e cinque** le chiavi
 * d'errore, non su tre.*
 */

/* --- Componente: selettore di lingua ----------------------------------- */

/*
 * Compare su ogni pagina (§7.1). Fuori scrive nel cookie, dentro sulla
 * preferenza del socio: a deciderlo e' la rotta, non questo foglio.
 */
.lingue {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem auto 0;
    max-width: 26rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordo);
}

.dentro .lingue,
.larga + .lingue {
    max-width: 60rem;
}

.lingue p {
    margin: 0 auto 0 0;
    color: var(--testo-secondario);
    font-size: .875rem;
}

.lingue ul {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lingue button {
    padding: .375rem .875rem;
    background: transparent;
    color: var(--testo);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

/* La lingua in corso e' piena d'accento con testo scuro, e lo dichiara anche
   a chi non vede il colore, con aria-current. */
.lingue button[aria-current] {
    background: var(--accento);
    color: var(--fondo);
    border-color: var(--accento);
}

/* --- Elenchi di riquadri ----------------------------------------------- */

/*
 * La pagina dei permessi elenca utenze, e nel mockup del libro soci quegli
 * elenchi sono tabelle. Una tabella pero' non e' fra i sei componenti di §7.1:
 * inventarne lo stile qui significherebbe fissare una regola guardando un caso
 * solo, ed e' cio' che il paragrafo dice di non fare. Si usano i riquadri, che
 * i componenti coprono — e su un telefono si leggono meglio.
 */
.riquadri {
    display: grid;
    gap: .75rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.riquadro {
    padding: 1rem;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: .625rem;
}

.riquadro-titolo {
    font-weight: 600;
}

.riquadro-nota {
    color: var(--testo-secondario);
    font-size: .875rem;
}

.gruppi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.gruppo {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .25rem .25rem .75rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    font-size: .875rem;
}

.gruppo form {
    display: inline;
}

.gruppo button {
    padding: .125rem .625rem;
    background: transparent;
    color: var(--testo-secondario);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
}

.gruppo button:hover {
    color: var(--manca);
    border-color: var(--manca);
}

/* Cio' che non e' piu' attivo si legge, ma non chiama. */
.spento {
    color: var(--chiuso);
}


.in-fondo {
    margin: 2rem 0 0;
    color: var(--testo-secondario);
    font-size: .875rem;
}

/* --- L'anagrafica: le persone, non le posizioni (RF-129 · punto 7.19) ------
 *
 * **L'unica forma che nasce qui e' la pastiglia dentro una cella.** Nel portale
 * le pastiglie esistono come *filtri* — `.filtri a` — e prendono da la' la
 * misura, il raggio e il bordo. *Non si riusa quella classe: un filtro e' un
 * collegamento che cambia la pagina, e questa e' un'etichetta che non si preme.
 * Due cose che si somigliano e fanno l'opposto non condividono un nome.*
 *
 * **Nessun valore di colore e' scritto qui**: la scala e' quella di
 * `StatiDelSocio`, e le quattro varianti prendono le stesse variabili della
 * legenda.
 */
.relazioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-1);
}

.pastiglia-relazione {
    padding: var(--spazio-minimo) var(--spazio-2);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-pastiglia);
    background: var(--superficie-alta);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

/*
 * **Nessun `white-space: nowrap`, e il mockup ne aveva uno** (punto 7.23).
 *
 * *Serviva quando la pastiglia diceva «rappresentata da Marta»: corta, e su una
 * riga sola. **Con un cognome dentro e' proprio la ragione per cui la colonna si
 * allargherebbe** — la cella non puo' stringersi, e le altre due si schiacciano.*
 *
 * **La pastiglia va a capo dentro la cella**, come fa gia' la fila dei tre gruppi
 * di chi amministra il portale: *la colonna resta larga quanto era, e la riga
 * cresce in altezza — che e' la direzione in cui una tabella ha spazio.*
 */

.pastiglia-relazione-ordine {
    color: var(--in-ordine);
    border-color: var(--in-ordine);
}

.pastiglia-relazione-attenzione {
    color: var(--attenzione);
    border-color: var(--attenzione);
}

.pastiglia-relazione-manca {
    color: var(--manca);
    border-color: var(--manca);
}

.pastiglia-relazione-chiuso,
.pastiglia-relazione-altre {
    color: var(--chiuso);
}

/* Chi non ha relazioni non porta un'etichetta: la cella lo dice in corsivo,
   perche' e' una constatazione e non un valore. */
.senza-relazioni {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    font-style: italic;
}

/*
 * **Il nome pesa quanto il resto della tabella** (punto 7.24).
 *
 * *Portava 600, ed era la sola cella grassa del cruscotto: il libro soci scrive
 * il nome del socio in `.principale`, che il peso non lo tocca affatto.* **Una
 * pagina piu' marcata delle altre non e' piu' leggibile: e' un'altra pagina** —
 * e chi le apre di seguito legge la differenza come un significato che non c'e'.
 *
 * *A distinguere il nome bastano il colore pieno e la posizione: e' la prima
 * colonna.*
 */
.persona-nome {
    font-weight: 400;
}

/*
 * **Il bersaglio che apre il fascicolo** (punto 7.20).
 *
 * *E' un pulsante perche' l'apertura e' una `POST` — RNF-039 non ammette
 * l'identificativo nell'indirizzo — ma **non deve sembrare un pulsante**: in una
 * tabella lo sarebbe due volte, una per riga, e la pagina diventerebbe una fila
 * di comandi invece di un elenco.*
 *
 * *Prende quindi l'aspetto del testo che sostituisce e si dichiara al passaggio,
 * come farebbe un collegamento.*
 */
.apre-fascicolo {
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/*
 * **Il bersaglio si dichiara al passaggio, e il nome ha due nomi** [punto 7.107].
 *
 * *`.persona-nome` e' quello dell'anagrafica; **il libro soci e i tesseramenti scrivono
 * `.principale`**, che e' la riga a due livelli — nome sopra, cio' che lo qualifica
 * sotto.* **Senza la seconda riga di questo selettore il pulsante del libro soci non
 * direbbe di essere un comando**: *sarebbe un nome che al passaggio non fa niente, cioe'
 * esattamente il testo morto che il punto ha appena tolto.*
 *
 * *E vale anche per i tesseramenti, che la usavano da prima: **era una difesa gia'
 * mancante in un posto**, e a trovarla e' stata la stessa domanda — «dove manca?».*
 */
.apre-fascicolo:hover .persona-nome,
.apre-fascicolo:focus-visible .persona-nome,
.apre-fascicolo:hover .principale,
.apre-fascicolo:focus-visible .principale {
    color: var(--accento);
}

/*
 * *Il bersaglio prende la cella intera: **un pulsante largo quanto il testo lascia inerte
 * il resto della cella**, e chi preme accanto al nome non apre niente. E' la ragione per
 * cui la pastiglia del livello sta dentro invece che fuori.*
 */
.apre-fascicolo {
    display: block;
    width: 100%;
}

/*
 * **Lo spento su un comando** (punto 7.20).
 *
 * *`.spento` esisteva gia' e significa «cio' che non e' piu' attivo si legge, ma
 * non chiama» — qui gli si da' il proprio effetto su un pulsante, che non aveva:
 * **in tutto questo foglio non c'era una sola regola `:disabled`**, e `.pulsante`
 * fissa fondo e colore espliciti, quindi l'attributo nativo da solo non si
 * vedrebbe.*
 *
 * **Non e' una forma nuova**: e' una parola esistente su un componente esistente.
 *
 * ## E dal punto 7.39 non si distingue piu' dal solo colore (RNF-013)
 *
 * *Nel fascicolo «Registra il certificato» e «Crea l'utenza» stavano a poche righe
 * l'uno dall'altro con **la stessa forma a un colore di distanza**: chi distingue male
 * le tinte vedeva due comandi identici, e ne premeva uno che non risponde.*
 *
 * **Il bordo tratteggiato e' una differenza di forma**, e si vede anche in bianco e
 * nero: *un contorno interrotto dice che quel contorno non chiude niente.* **E' la
 * stessa scelta della pastiglia accesa del libro soci** — *li' il fondo pieno, qui il
 * bordo spezzato: mai il solo colore.*
 *
 * *`not-allowed` c'era gia' ed e' il terzo segnale, per chi passa con il puntatore:
 * non sostituisce gli altri due, perche' chi tocca uno schermo non ha un puntatore.*
 */
.pulsante.spento {
    border-color: var(--bordo);
    border-style: dashed;
    cursor: not-allowed;
}

/*
 * La riga che dice perche' i comandi sono spenti sta sotto di loro, e va tolta
 * insieme allo spento: il giorno in cui i comandi si accendono, «arrivano piu'
 * avanti» e' gia' arrivata.
 */
.comandi-spenti {
    margin-top: var(--spazio-2);
}

/* L'eta' si scrive solo sotto i diciotto, e li' e' un'aggiunta al nome: piu'
   minuta, e dello stesso colore delle constatazioni. */
.persona-eta {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    font-weight: 400;
}

.recapito-posta,
.recapito-assente,
.recapito-telefono {
    display: block;
}

.recapito-telefono {
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

/* «Nessuna utenza» non e' un trattino: e' un fatto, e si legge come tale. */
.recapito-assente {
    color: var(--testo-tenue);
    font-style: italic;
}

/*
 * **La fascia del tesseramento FIDAL** (RF-147 · punto 7.76).
 *
 * **Sta fuori da `.pannelli` ed e' larga quanto la pagina**, ed e' deliberato:
 * *quella fila e' a colonne — `columns: 18rem` — e un riquadro dentro di essa
 * prende la larghezza di una colonna. **Il diario delle uscite spostera' i
 * documenti a destra e questa fascia restera' dov'e'**: metterla stretta adesso
 * vorrebbe dire spostarla dopo.*
 */

/*
 * **Dentro la fascia le due voci stanno affiancate.**
 *
 * *A tutta pagina due righe impilate lascerebbero mezzo riquadro vuoto, e **un
 * riquadro mezzo vuoto sembra rotto invece che pronto**.* Le colonne non sono
 * simmetria: separano **cio' che si fa** da **cio' che si aspetta**.
 *
 * *`flex` con `min-width` e non `columns`: qui le due parti sono **due cose
 * diverse** e devono restare separate quando lo schermo stringe — vanno a capo,
 * non si spezzano.*
 */
.due-colonne {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-4) var(--spazio-5);
}

.due-colonne > .colonna {
    flex: 1;
    min-width: 16rem;
}

/*
 * **Una colonna che occupa la riga intera, sotto le altre** [punto 6 del
 * trasferimento].
 *
 * *La provenienza sta nel riquadro della tessera, sotto numero e categoria: **e' un
 * dato alla pari dei due**, non una nota — e in `.aiuto` si leggerebbe come una
 * spiegazione, di quelle che chi scorre non vede.*
 *
 * **Senza questa riga sarebbe diventata una terza colonna stretta** su schermo largo:
 * *`.colonna` porta `flex: 1` e va a capo solo quando non ci sta, e tre colonne su un
 * pannello che ne ha due dappertutto sono un'altra forma.*
 *
 * *Il `gap` verticale della griglia la distanzia gia' da quelle sopra: **nessun
 * margine scritto qui**, o sarebbe una seconda casa di una misura che c'e'.*
 */
.due-colonne > .colonna.piena {
    flex-basis: 100%;
}

/*
 * **Le due strade del bivio sono due riquadri, non due paragrafi** [punto 7.163 · mockup
 * «Ritocchi pagina socio», pannello A]. *Nel mockup del bivio avevano un contorno, e si è
 * perso con «nessuna classe CSS nuova»: senza, due colonne di testo affiancate non si leggono
 * come un'alternativa.* **Qui una classe nuova ci vuole** [decisione del committente].
 *
 * *Il comando va in fondo al riquadro (`margin-top: auto`): quando una strada ha la frase più
 * lunga dell'altra, i due pulsanti restano allineati.*
 */
.due-colonne > .colonna.strada {
    display: flex;
    flex-direction: column;
    gap: var(--spazio-2);
    padding: var(--spazio-4);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-scheda);
}

.colonna.strada .aiuto {
    margin: 0;
}

.colonna.strada form {
    margin-top: auto;
}

/*
 * **Una riga che vale per tutto il passo, a tutta larghezza** [punto 7.163 · mockup, pannelli
 * A e C]. *«Poi consegna i fogli originali in segreteria» stava in fondo al passo come riga
 * d'aiuto, allineata a sinistra sotto la prima strada del bivio, e si leggeva come una
 * condizione di quella sola.* **Centrata e staccata da un filo**: *chiude il passo, e vale per
 * tutt'e due.*
 */
.riga-piena {
    margin: var(--spazio-5) 0 0;
    padding-top: var(--spazio-4);
    border-top: 1px solid var(--bordo);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    text-align: center;
}

/*
 * **Una scelta con la sua spiegazione sotto, rientrata e in corpo minore** [punto 7.163 ·
 * mockup, pannello E]. *Le due voci del nulla osta portavano la spiegazione come riga a sé,
 * allo stesso livello della voce: quattro righe pari, e la spiegazione non si legava a niente.*
 * **Il controllo resta nativo** — *`accent-color` sta sull'elemento, e qui non si tocca.*
 * *`.campo .scelta-con-aiuto` e non la classe sola: `.campo label` porta `display: block`, e
 * la specificità deve vincerla.*
 */
.campo .scelta-con-aiuto {
    display: flex;
    align-items: flex-start;
    gap: var(--spazio-2);
    color: var(--testo);
    font-size: .9375rem;
}

.campo .scelta-con-aiuto + .scelta-con-aiuto {
    margin-top: var(--spazio-3);
}

.scelta-con-aiuto input {
    margin-top: .2rem;
}

.scelta-aiuto {
    display: block;
    margin-top: var(--spazio-minimo);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * *L'etichetta di sezione dentro un riquadro: la stessa voce di `.dati
 * .etichetta`, che dice «questo e' il nome di cio' che segue» senza contendere
 * il valore.*
 */
.sotto-titolo {
    margin: 0 0 var(--spazio-minimo);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/*
 * **Un sotto-titolo che non apre la colonna apre un gruppo, e vuole aria sopra**
 * [prova a occhio del committente].
 *
 * *«I fogli da allegare» stava attaccato a «Che cosa aspetta», e la colonna
 * sembrava avere **due intestazioni una sull'altra**: due righe della stessa
 * voce, maiuscole e tenui, senza niente in mezzo che dicesse quale governasse
 * l'altra.*
 *
 * **La regola guarda la posizione e non una classe in piu'**: *il primo di una
 * colonna la intitola, ogni altro divide cio' che lo precede da cio' che segue —
 * e resta vera il giorno in cui qualcuno ne aggiunge un terzo.*
 */
* + .sotto-titolo {
    margin-top: var(--spazio-4);
}

.due-colonne .valore {
    margin: 0;
}

/*
 * **Le due condizioni della pratica** [passo 2 del pacchetto federale]: *una
 * riga per fatto, e ciascuna porta il dato che la identifica — la data e chi.*
 *
 * **Nessun segno di spunta e nessun colore**: *una riga fatta e una che manca si
 * distinguono per il PESO del testo, non per un verde e un rosso.* La ragione e'
 * quella gia' scritta sulle pastiglie del riepilogo: **cio' che manca non e' una
 * mancanza di qualcuno**, e un rosso lo direbbe.
 */
.condizioni {
    margin: var(--spazio-3) 0 0;
    padding: 0;
    list-style: none;
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

.condizioni li + li {
    margin-top: var(--spazio-minimo);
}

.condizioni .fatta {
    color: var(--testo);
}

/*
 * *La collocazione sta sotto la riga a cui appartiene, non accanto: **e' un
 * dettaglio del fatto**, e in fila diventerebbe una seconda frase della stessa
 * lunghezza.*
 */
.condizioni .aiuto {
    display: block;
    margin: 0;
}

/*
 * **I comandi che fanno AVANZARE la pratica stanno dentro la colonna in cui si
 * lavora, e quello che CHIUDE oltre la linea del piede** [dalla prova a occhio].
 *
 * *I tre erano in fila con lo stesso aspetto: chi lavora in fretta li
 * distingueva solo leggendo. **Due portano avanti e uno chiude.***
 *
 * **La distinzione e' la collocazione, non una tinta**, ed e' una decisione: *le
 * tinte di stato non vanno sui comandi — `--in-ordine` e' spento apposta perche'
 * «non deve tirare l'occhio come un comando», e nessuna pastiglia e' mai rossa.
 * **Un rosso sul gesto di chi lavora rovescerebbe quella decisione**, e per un
 * fastidio invece che per un difetto.*
 *
 * **E non e' nemmeno la veste**: *per un'ora i due che avanzano hanno avuto il
 * sommario a pulsante, e quella forma **toglie il triangolo del browser** — che e'
 * l'unico segnale con cui questo portale dice che un pieghevole e' aperto.
 * Restano `.correzione` come le tre correzioni del fascicolo.*
 *
 * *Qui non c'e' nessuna classe: i tre pieghevoli sono `.correzione`, e a separarli
 * bastano l'intestazione della colonna, il contenitore e il filo del piede.*
 */

/*
 * **E il comando che CHIUDE sta oltre la linea del piede.**
 *
 * *`.piede-pannello` disegna gia' il filo: quello che segue non e' l'ultima voce
 * dell'elenco — e' un'altra cosa, e la distanza lo dice.*
 */
.chiude {
    margin-top: var(--spazio-5);
}

/*
 * **Il piede di un riquadro dice perche'**, e si stacca con una linea: *senza,
 * si leggerebbe come l'ultima voce dell'elenco invece che come la sua chiosa.*
 */
.piede-pannello {
    margin: var(--spazio-4) 0 0;
    padding-top: var(--spazio-3);
    border-top: 1px solid var(--bordo);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

/*
 * **La coda delle richieste** (punto 7.103), e la veste segue la regola che il portale
 * ha gia': **il grigio per le etichette, il bianco per i valori**.
 *
 * *Alla prova a occhio erano bianchi il nome, il motivo, la data e la modifica — e **la
 * cosa che conta, «cosa diventa cosa», non si distingueva dal resto**. Quando tutto e'
 * in evidenza niente lo e', e il gestore deve leggere ogni riga per trovare quella che
 * decide.*
 */
.gruppo-richiesta {
    padding: var(--spazio-4) 0;
    border-bottom: 1px solid var(--bordo);
}

.gruppo-richiesta:last-of-type {
    border-bottom: 0;
}

/*
 * *Il nome resta leggibile ma non grida: **e' il contesto della decisione, non la
 * decisione**.*
 */
.gruppo-richiesta h3 {
    margin: 0 0 var(--spazio-2);
    font-size: var(--testo-medio);
}

.gruppo-richiesta h3 .quando {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    font-weight: 400;
    margin-left: var(--spazio-3);
}

/*
 * *Il motivo di chi chiede e' **una voce riportata**, e il corsivo lo dice senza
 * bisogno di un'etichetta che lo introduca.*
 */
.motivo-di-chi-chiede {
    color: var(--testo-tenue);
    font-style: italic;
    margin: 0 0 var(--spazio-3);
}

.richiesta {
    margin-bottom: var(--spazio-4);
}

/*
 * **La riga che decide, e l'unica in evidenza.**
 *
 * *L'etichetta del campo in grigio — dice **quale** dato, non **che cosa** diventa — e i
 * due valori pieni, con la parola in mezzo tenue: **cosi' l'occhio cade sui due valori**
 * e la freccia non compete con loro.*
 */
.differenza {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spazio-2) var(--spazio-3);
    margin: 0 0 var(--spazio-2);
}

.differenza .etichetta {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    min-width: 9rem;
}

.differenza .valore {
    color: var(--testo);
    font-weight: 600;
}

/*
 * *La parola «diventa» sta nel testo e non nella veste — chi ascolta la pagina la sente
 * leggere — ma **non e' un valore**, quindi non ne prende il peso.*
 */
.differenza .diventa {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * *L'elenco dei recapiti gia' cambiati: **non chiede niente**, e la veste lo dice —
 * nomi leggibili, tutto il resto tenue.*
 */
.elenco-recapiti {
    list-style: none;
    margin: 0;
    padding: 0;
}

.elenco-recapiti li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-2) var(--spazio-3);
    padding: var(--spazio-2) 0;
    border-bottom: 1px solid var(--bordo);
}

.elenco-recapiti li:last-child {
    border-bottom: 0;
}

.elenco-recapiti .quando,
.elenco-recapiti .attore {
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * **La tessera virtuale** (RF-095 · punto 7.108).
 *
 * **E' disegnata per il telefono, e non e' un accorgimento a posteriori** [richiesta
 * esplicita del committente]: *si aprira' quasi sempre li' — a una gara, in mano, davanti
 * a chi la guarda. **Il caso d'uso principale e' lo schermo stretto**, e la larghezza
 * grande e' quella che si adatta al secondo caso.*
 *
 * *Da qui la misura: `max-width` e non `width`, cosi' su un telefono la tessera prende la
 * riga intera e su uno schermo largo non si stira in una fascia — **una tessera larga
 * quanto un monitor non somiglia piu' a una tessera**.*
 */
.tessera-pagina {
    max-width: 26rem;
    margin: 0 auto;
}

.tessera {
    padding: var(--spazio-4);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-scheda);
}

.tessera-testa {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
    margin-bottom: var(--spazio-4);
}

/*
 * *Il marchio porta **il proprio fondo** — l'icona e' un rettangolo arrotondato pieno
 * d'accento con la figura dentro — quindi qui non si dipinge niente: **ne' fondo ne'
 * raggio**, o si vedrebbero due bordi arrotondati uno dentro l'altro.*
 */
.tessera-marchio {
    flex: none;
    display: block;
    width: 2.2rem;
    height: 2.2rem;
}

.tessera-ente {
    display: block;
    line-height: 1.25;
}

/*
 * *La qualifica e' tenue e sta sotto la denominazione: **dice che cosa e' questo foglio**,
 * e chi guarda la tessera di un altro legge la prima riga, non l'ultima.*
 */
.tessera-qualifica {
    display: block;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

.tessera-persona {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
    margin-bottom: var(--spazio-4);
}

/*
 * *Il ritratto ha le proporzioni della fototessera — 3:4 — e **occupa il suo posto anche
 * quando non c'e'**: senza, la riga del nome ballerebbe fra chi ha la fotografia e chi
 * no, e la tessera sembrerebbe due schermate diverse.*
 */
.tessera-ritratto {
    flex: none;
    display: block;
    width: 4.5rem;
    height: 6rem;
    overflow: hidden;
    background: var(--superficie-alta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-campo);
}

.tessera-ritratto img,
.tessera-ritratto svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * *La silhouette prende il colore del bordo attivo e non quello del testo: **non e' un
 * dato, e' il posto di un dato**. Piu' chiara sembrerebbe un ritratto vero visto male.*
 */
.tessera-ritratto svg {
    fill: var(--bordo-attivo);
}

.tessera-identita {
    display: block;
    min-width: 0;
}

/*
 * **Il nome e la pastiglia del livello sulla stessa riga** [prova a occhio del
 * committente]: *sotto, la pastiglia occupava una riga sua e si leggeva come un secondo
 * dato — **accanto e' una qualita' del nome**, che e' cio' che e'.*
 */
.tessera-nome {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spazio-2);
    font-size: var(--testo-medio);
}

.tessera-posizione {
    display: block;
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    margin-bottom: var(--spazio-1);
}

/*
 * **Ogni blocco è un riquadro con fondo proprio, e non una riga fra due linee** [prova a
 * occhio del committente]: *con le sole linee **il numero di tessera non si distingueva
 * dal resto** — tre righe uguali, e la ragione per cui la tessera si apre in mezzo alle
 * altre due.*
 */
.tessera-blocco {
    padding: var(--spazio-3);
    margin-bottom: var(--spazio-2);
    background: var(--superficie-alta);
    border-radius: var(--raggio-campo);
}

/*
 * *La riga porta i testi a sinistra e lo stato a destra: **la pastiglia non va a capo** —
 * `flex: none` — e su uno schermo stretto sono i testi ad accorciarsi, perche' la parola
 * dello stato e' quella che si legge da lontano.*
 */
.tessera-riga {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
}

.tessera-testi {
    flex: 1;
    min-width: 0;
}

.tessera-riga .stato {
    flex: none;
}

.tessera-etichetta {
    display: block;
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
}

/*
 * **Il numero di tessera e' il dato che si va a cercare**, e la misura lo dice: *chi apre
 * la tessera a una gara la apre per quello.* **La scadenza del certificato invece si dice
 * e non si grida** [prova a occhio del committente sul mockup]: *nel primo disegno era il
 * colore piu' vivo della schermata, e prendeva l'occhio al posto del numero.*
 */
.tessera-numero {
    display: block;
    margin: var(--spazio-1) 0 var(--spazio-3);
    /*
     * **Il colore dell'accento, e non il bianco di tutto il resto** [prova a occhio del
     * committente]: *nel mockup e' verde e grande, ed **e' la ragione per cui la tessera
     * si apre** — chi la mostra a una segreteria di gara legge quello e basta. Bianco come
     * il resto, era un dato fra i dati.*
     */
    color: var(--accento);
    font-size: var(--testo-grande);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
}

/*
 * *Le due voci si affiancano e **vanno a capo da sole** su uno schermo stretto: e' la
 * ragione del `flex-wrap`, e non un ripiego — su un telefono in verticale «Categoria» e
 * «Societa'» non ci stanno accanto.*
 */
.tessera-coppia {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-2) var(--spazio-5);
    margin-top: var(--spazio-2);
}

.tessera-voce {
    display: block;
}

.tessera-valore {
    display: block;
}

.tessera-manca {
    display: block;
    color: var(--attenzione);
    font-size: var(--testo-medio);
}

.tessera-spiega {
    display: block;
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    margin-top: var(--spazio-1);
}

/*
 * *La riga dell'ora e' tenue e sta in fondo: **non e' un dato della tessera, e' la prova
 * che la tessera e' viva**. Grande direbbe che conta piu' del numero; assente lascerebbe
 * uno screenshot indistinguibile da una tessera vera.*
 */
.tessera-piede {
    margin-top: var(--spazio-3);
    padding-top: var(--spazio-3);
    border-top: 1px solid var(--bordo);
    color: var(--testo-tenue);
    font-size: var(--testo-minuto);
    line-height: 1.45;
}

/*
 * *«Aperta il …» sta **nel piede e dopo la linea**, insieme alla riga che nega [prova a
 * occhio del committente]: prima della linea si leggeva come un dato della tessera, e non
 * lo e' — **e' la prova che la tessera e' viva**.*
 */
.tessera-aperta {
    display: block;
    margin-bottom: var(--spazio-1);
    color: var(--testo-secondario);
}

/*
 * *La riga che nega e' il testo del piede stesso: **non ha una classe sua** perche' non e'
 * un elemento a parte — e' cio' che il piede dice, e «Aperta il …» e' la riga che la
 * precede.*
 */

/*
 * **I tre passi della modulistica** (D76 · mockup del 05/10/2026).
 *
 * *Ogni passo e' un `.pannello`, e il numero sta nel cerchio a sinistra del titolo.*
 * **Il numero lo scrive il contatore dell'elenco**, non il testo: *un passo aggiunto in
 * mezzo rinumera da se', e nessuna frase dice «il terzo passo».* **Il nome non e' `.passi`**:
 * *quello e' la barra dei quattro passi della domanda, e collidere con lei le cambierebbe
 * la forma.*
 */
.modulistica-passi {
    counter-reset: passo;
    margin: var(--spazio-5) 0 0;
    padding: 0;
    list-style: none;
}

.modulistica-passi > li {
    counter-increment: passo;
}

.modulistica-passi > li > h2 {
    display: flex;
    align-items: center;
    gap: var(--spazio-3);
}

.modulistica-passi > li > h2::before {
    content: counter(passo);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accento);
    color: var(--fondo);
    font-size: .875rem;
    font-weight: 700;
}

/* *I due scaricamenti affiancati, e a capo da se' quando lo schermo stringe.* */
.modulistica-comandi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spazio-3);
}

/*
 * **I documenti non dovuti, in un blocco con un capo** [punto 7.164 · mockup «Ritocchi
 * fascicolo», difetto 7]. *Erano righe di prosa di fila, e chi le leggeva non sapeva che
 * cosa avessero in comune.* **Il fondo è quello della pagina**, *un gradino sotto la
 * superficie del riquadro che lo contiene: è un elenco di cose che non servono, e non deve
 * chiamare lo sguardo come un riquadro di lavoro.* **Il capo ha la forma delle etichette
 * dei filtri** — *minuto, maiuscolo, tenue* — **e il nome di ciascun foglio torna al colore
 * del testo**, *perché è ciò che l'occhio cerca scorrendo la lista.*
 */
.non-dovuti {
    margin-top: var(--spazio-4);
    padding: var(--spazio-4) var(--spazio-5);
    background: var(--fondo);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-campo);
}

.non-dovuti-capo {
    margin: 0 0 var(--spazio-2);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.non-dovuti ul {
    margin: 0;
    padding-left: var(--spazio-5);
    color: var(--testo-secondario);
    font-size: var(--testo-minuto);
}

.non-dovuti li + li {
    margin-top: var(--spazio-2);
}

.non-dovuti strong {
    color: var(--testo);
}