/* Vista pubblica dell'area tecnica.
   =======================================================================

   LO STILE NON È INVENTATO QUI: viene da `info.cucineturi.com`, il sito che
   questa vista sostituisce. Chi lo consulta oggi deve ritrovarsi in un posto
   che riconosce — stesso fondo velato, stesse superfici bianche ad angoli
   larghi, stessa pastiglia oro, stesse micro-transizioni brevi.

   MA QUELLA È UNA PAGINA CON UN PULSANTE, E QUESTA È UNO STRUMENTO. Il sito
   attuale ha due colori, un'ombra e una transizione: basta per una card con
   una CTA, non per un elenco con ricerca, filtri, albero e cento documenti.
   Quindi il vocabolario di partenza resta e viene esteso, non sostituito: le
   misure diventano una scala invece di numeri sparsi, gli stati diventano
   tutti dichiarati, il movimento acquista un ritmo unico. Chi arriva dalla
   landing riconosce il marchio; chi apre questa pagina in cantiere ha uno
   strumento.

   I COLORI SONO DEL MARCHIO, NON DI TURI. Il navy e l'oro arrivano da
   `--colore-primario` e `--colore-secondario`, che la pagina riceve dal suo
   indice: la stessa regola veste Turi di blu ed EVO di quello che sceglierà.
   Scrivere qui `#284858` funzionerebbe oggi e pubblicherebbe il marchio
   sbagliato domani.

   NESSUN CARATTERE DA SCARICARE, ed è una scelta del brand che è anche
   quella giusta per l'uso: questa pagina si apre in cantiere, su una
   connessione mobile, con i guanti. Una richiesta in meno è mezzo secondo in
   meno davanti a un montaggio fermo.

   Le misure sono in `rem` e in `clamp()`: chi ingrandisce il testo dal
   telefono ingrandisce anche gli spazi, e niente si accavalla. */

/* --- Fondamenta --------------------------------------------------------- */

:root {
    /* Ripieghi: valgono solo se la pagina arriva senza il blocco del marchio
       — pagina d'errore, indice illeggibile. Sono i colori di Turi perché è
       il marchio predefinito, non perché lo stile sia suo. */
    --colore-primario: #284858;
    --colore-secondario: #b89858;
    --testo-su-primario: #ffffff;
    --testo-su-secondario: #1d3744;
    --rgb-primario: 40 72 88;
    --rgb-secondario: 184 152 88;

    /* IL COLORE DEL MARCHIO QUANDO FA DA TESTO, che non è lo stesso problema
       di «che cosa scrivo sopra il colore del marchio». Lo calcola `Aspetto`
       scurendo la tinta finché non regge 4,5:1 sul fondo. Per Turi coincide
       col primario — quel blu legge già — e per questo il buco è rimasto
       aperto cinque sessioni: con un marchio giallo i titoli sarebbero usciti
       a 1,19:1, invisibili, senza un errore da nessuna parte.
       Ovunque il colore del marchio sia SCRITTURA si usa questa variabile;
       dove è SFONDO resta `--colore-primario`. */
    --marchio-testo: #284858;

    /* Il fondo del sito attuale, alla lettera. */
    --fondo: #f4f6f7;
    --superficie: #ffffff;
    /* Il grigio appena accennato delle zone di servizio: separa senza
       disegnare un bordo in più. */
    --superficie-tenue: #f7f9fa;

    --inchiostro: #0f172a;
    --inchiostro-tenue: rgb(15 23 42 / 0.75);

    /* IL TESTO DI SERVIZIO NON SEGUE IL MARCHIO, ed è una regola, non una
       svista. Legarlo a `--rgb-primario` sembrava elegante e produceva due
       guasti: su Turi scendeva a 3,7:1 — sotto il minimo di 4,5:1 di WCAG, e
       questa pagina si legge al sole con i guanti — e su un marchio che
       scegliesse un giallo diventava illeggibile a qualunque opacità. Il
       colore del marchio veste superfici e accenti; il testo resta un
       grigio-blu neutro che regge su qualunque fondo chiaro.
       Misurato: 7,29:1 su bianco, 6,73:1 sul fondo. */
    --inchiostro-lieve: #4a5866;

    /* Il bordo è il colore del marchio molto diluito: su ogni marchio resta
       un bordo «di famiglia» invece di un grigio che non c'entra niente. */
    --bordo: rgb(var(--rgb-primario) / 0.14);
    --bordo-tenue: rgb(var(--rgb-primario) / 0.08);
    --bordo-acceso: rgb(var(--rgb-secondario) / 0.55);

    /* IL BORDO DI CIO' CHE SI TOCCA E' UN'ALTRA COSA. Quello qui sopra e' un
       separatore e vale 1,26:1 sul bianco, che per separare basta. Ma sul
       campo di ricerca — un rettangolo bianco su una card bianca — il bordo e'
       l'UNICA cosa che dice dove comincia il campo, e WCAG 1.4.11 chiede 3:1
       a un componente il cui confine e' la sua sola definizione.
       Misurato appiattendo su #ffffff: (126,145,155) → 3,23:1. */
    --bordo-campo: rgb(var(--rgb-primario) / 0.60);

    /* LA SCALA DELLE MISURE. Prima erano ventitré valori letterali diversi
       fra 0,1 e 3 rem, scelti uno per uno: nessuno sbagliato, nessuno in
       relazione con gli altri. Un ritmo si riconosce anche senza saperlo
       nominare, e la sua assenza pure — è la differenza fra una pagina
       ordinata e una pagina che «non si capisce perché non convince». */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;

    --raggio-foglio: 22px;
    --raggio: 14px;
    --raggio-piccolo: 10px;
    --raggio-pillola: 999px;

    --ombra-alzata: 0 12px 24px rgb(0 0 0 / 0.1);
    --ombra-premuta: 0 8px 16px rgb(0 0 0 / 0.1);
    --ombra-bottone: 0 10px 20px rgb(0 0 0 / 0.12);
    /* L'ombra della barra che resta in alto: appena percettibile, serve solo
       a dire che il contenuto le passa sotto. Solo SOTTO la barra — la
       diffusione negativa la tiene dentro i suoi lati: la barra sta dentro il
       foglio bianco, e un'ombra che uscisse di lato sporcherebbe il fondo
       velato accanto al foglio. */
    --ombra-barra: 0 1px 0 rgb(var(--rgb-primario) / 0.08), 0 10px 12px -10px rgb(0 0 0 / 0.14);

    /* IL RITMO DEL MOVIMENTO, in un posto solo. Tre durate e una curva: le
       transizioni che rispondono a un gesto sono immediate (120 ms), quelle
       di stato stanno nella finestra in cui il movimento si legge come
       intenzione e non come ritardo (180 ms), l'unica animazione d'ingresso
       è più lunga perché deve essere notata una volta e poi dimenticata. */
    --tempo-svelto: 120ms;
    --tempo: 180ms;
    --tempo-lento: 320ms;
    /* Parte decisa e si posa: è la curva del movimento che sembra fisico. */
    --curva: cubic-bezier(0.2, 0.8, 0.25, 1);
    --transizione: var(--tempo) var(--curva);

    /* Sopra la soglia di WCAG 2.2 (criterio 2.5.8, che chiede 44px), e di
       proposito: si preme con i guanti, in piedi, con una mano sola. Ha un
       nome perché il numero da solo, sparso fra i `padding`, si erode senza
       che nessuno se ne accorga — ed è successo davvero: riscrivendo questo
       foglio era sceso da 48 a 44, cioè dalla scelta del progetto al minimo di
       legge, e il test che presidia la variabile non poteva vederlo perché
       verifica `>= 44`. Ora quel test pretende esattamente 48. */
    --bersaglio-minimo: 48px;

    /* Le pastiglie di tipi e categorie si DISEGNANO a 36px, e lo
       strato sensibile le riporta al bersaglio:
       `--estensione` è quanto manca, per lato, ed è calcolata invece che
       scritta perché cambiando una delle due misure l'altra la segua. Con
       il testo ingrandito dal telefono la pastiglia può superare il
       bersaglio: allora l'estensione vale zero, non un numero negativo.
       IL PIXEL IN PIÙ È MISURATO, NON PRUDENZIALE: a posizioni di mezzo
       pixel il navigatore arrotonda verso l'interno i bordi dello strato, e
       con l'estensione esatta (6px) `elementFromPoint` trovava 46,75px
       sensibili invece di 48. Il campo di ricerca, che è alto 48 di suo e
       non ha strato, ne misura 48,25. */
    --pastiglia: 2.25rem;
    --estensione: max(0px, calc((var(--bersaglio-minimo) - var(--pastiglia)) / 2 + 1px));

    /* Le icone della barra: una misura sola, tratto 1,8. */
    --icona: 1.25rem;

    /* Quanto è alta la barra che resta in cima. La misura vera la scrive il
       JavaScript su questa variabile, perché dipende da quante righe occupano
       i filtri e dal corpo del testo scelto dall'utente. Il valore qui è il
       ripiego per il primo istante e per il caso in cui lo script non parta:
       sbagliarlo di poco sposta le intestazioni di gruppo, non rompe niente.
       Misurata il 16/09/2026 a 1440px: 12 + 50 + 12 = 74px, con la sola fila
       delle pastiglie dei tipi su una riga. */
    --altezza-barra: 4.625rem;

    /* La pagina è chiara e lo dichiara: senza, su un telefono in tema scuro
       il sistema disegna scrollbar e controlli scuri dentro una pagina
       bianca. Non è un tema scuro — è dire quale dei due si sta usando. */
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Chi arriva da un collegamento a una categoria non deve trovarsi il
       titolo sotto la barra che resta in cima. */
    scroll-padding-top: calc(var(--altezza-barra) + var(--s4));
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--inchiostro);

    /* I due veli del sito attuale, posati con i colori del marchio: l'oro in
       alto a sinistra, il blu a destra. Sono fissi rispetto alla finestra e
       non al foglio, così non «scorrono via» su una pagina lunga. */
    background:
        radial-gradient(900px 500px at 20% 20%, rgb(var(--rgb-secondario) / 0.14), transparent 60%),
        radial-gradient(900px 500px at 80% 30%, rgb(var(--rgb-primario) / 0.12), transparent 55%),
        var(--fondo);
    background-attachment: fixed;
}

a {
    color: var(--marchio-testo);
}

img {
    max-width: 100%;
    height: auto;
}

/* UNA COLONNA SOLA, E PIÙ STRETTA. Era 74rem perché conteneva l'albero
   (19rem) e i risultati affiancati. Tolta la colonna laterale, a 74rem la
   riga di un documento misurava 1.120px con il titolo a sinistra e i dati a
   destra: un occhio che attraversa mezzo schermo per sapere quanto pesa un
   PDF. A 60rem testata, barra e risultati stanno sullo stesso asse. */
.contenitore {
    width: min(60rem, 100%);
    margin-inline: auto;
    /* Fino a 44px, come la card di info.cucineturi.com (`clamp(26px, 4vw,
       44px)`): dentro il foglio bianco è la distanza fra il bordo del
       riquadro e le cose che contiene. */
    padding-inline: clamp(var(--s4), 4vw, 2.75rem);
}

/* --- Il foglio ------------------------------------------------------------
   IL RIQUADRO BIANCO DEL SITO CHE SOSTITUIAMO, ripreso alla lettera:
   fondo bianco, angoli di 22px, bordo del colore del brand al 14%, nessuna
   ombra, posato sul fondo velato con 28px di margine. Tolto nella prima
   impaginazione di questa pagina e riportato il 14 settembre 2026 su
   richiesta del cliente: è l'elemento che chi apre l'indirizzo di sempre
   riconosce per primo.
   UNA DIFFERENZA, VOLUTA: la card del vecchio sito era larga 760px, e qui
   non basterebbe — le cinque pastiglie dei tipi ne occupano 725 e andrebbero
   a capo, e la riga di un documento perderebbe i dati a destra del titolo.
   58rem (928px) tengono tutto su una riga.
   SUL TELEFONO VA DA BORDO A BORDO, senza cornice: 28px di margine per lato
   a 390px sono il 14% della larghezza tolto ai documenti. Resta bianco, e
   copre tutto lo schermo anche quando i documenti sono pochi.
   E NIENTE `overflow: hidden` PER ARROTONDARE GLI ANGOLI, né `transform` o
   `filter`: il primo spegne la barra che resta in cima — un antenato con
   `hidden` diventa il suo contenitore di scorrimento, e misurato la barra
   finisce a −340px invece che a 0 — gli altri due farebbero del foglio il
   riferimento degli elementi fissi. (`overflow: clip` ritaglia senza quel
   danno, ma non serve: il contenuto non esce dai bordi.) C'è un test. */
.foglio {
    min-height: 100vh;
    background: var(--superficie);
}

@media (min-width: 48rem) {
    .foglio {
        width: min(58rem, 100% - 2 * 1.75rem);
        min-height: 0;
        margin: 1.75rem auto;
        border: 1px solid var(--bordo);
        border-radius: var(--raggio-foglio);
    }
}

/* --- Accessibilità ------------------------------------------------------ */

.sr-solo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.salta {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 40;
}

.salta:focus {
    left: var(--s4);
    top: var(--s4);
    padding: var(--s3) var(--s5);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-pillola);
    box-shadow: var(--ombra-alzata);
    text-decoration: none;
    font-weight: 700;
    color: var(--marchio-testo);
}

/* Il contorno di messa a fuoco è del colore del marchio e non del browser:
   su un fondo velato quello di sistema sparisce, e chi naviga da tastiera
   perde il segno di dove si trova. Usa la variante leggibile: un marchio
   chiaro darebbe un anello che non si distingue dal fondo. */
:focus-visible {
    outline: 3px solid var(--marchio-testo);
    outline-offset: 2px;
    border-radius: var(--raggio-piccolo);
}

/* --- Testata ------------------------------------------------------------ */

/* UNA COLONNA CENTRATA: logo grande, titolo, sottotitolo, e sotto i
   filtri. Deciso con il cliente il 14 settembre 2026.
   Prima era una riga compatta con il logo a sinistra, e la ragione era
   misurata: sul telefono logo, titolo, sottotitolo e il riquadro degli
   argomenti portavano il primo documento a 800px. Il riquadro degli argomenti
   non c'è più — le categorie stanno nei passi — e quei pixel li prende
   adesso la testata. Il sottotitolo si vede anche sul telefono, perché la
   testata centrata senza la sua riga di spiegazione è un logo e un titolo
   generico. */
/* LA SPAZIATURA DEL VECCHIO SITO, RISCRITTA IN CSS. In info.cucineturi.com
   l'aria attorno al logo non stava nel foglio di stile: stava DENTRO IL FILE,
   un PNG quadrato con il 31,4% di trasparente sopra e sotto il marchio,
   mostrato largo `min(350px, 75vw)`. Il risultato erano 110px di bianco sopra
   e sotto il marchio sul desktop, 92 a 390px — e il cliente vuole quella
   spaziatura (14 settembre 2026).
   Qui il logo va caricato ritagliato, e allora l'aria la scrive il CSS, con
   la stessa legge: `--aria-logo` è il 31,4% di `min(350px, 75vw)`, cioè
   `min(110px, 23,5vw)`. Scritta così vale per qualunque logo, invece che
   solo per un file che per caso ha i margini giusti. Il resto è copiato dal
   vecchio foglio: la card aveva `clamp(26px, 4vw, 44px)` di imbottitura, il
   logo 18px di margine sotto, il titolo `margin: 8px 0 10px`, il paragrafo
   26px prima dell'elenco (qui 14 + i 12 della barra).
   Replicata alla lettera e misurata contro la pagina vecchia (155px sopra il
   marchio in tutte e due a 1440), poi RIDOTTA DI UN TERZO su richiesta del
   cliente: `min(72px, 16vw)`, cioè 116px sopra il marchio e 90 sotto sul
   desktop, 88 e 80 a 390. */
.testata {
    --aria-logo: min(4.5rem, 16vw);

    padding: clamp(1.625rem, 4vw, 2.75rem) 0 0.875rem;
    text-align: center;
}

/* L'aria sopra c'è solo se c'è il logo: attorno al solo nome del brand, in
   lettere, 110px di bianco farebbero una pagina vuota con un'etichetta in
   mezzo. Dove `:has()` non esiste la testata resta compatta, che è il danno
   minore. */
.testata:has(.testata__logo) {
    padding-top: calc(clamp(1.625rem, 4vw, 2.75rem) + var(--aria-logo));
}

.testata__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* L'ALTEZZA È FISSA E LA LARGHEZZA SEGUE, non il contrario. Il template non
   conosce le dimensioni del logo — arriva dall'indice, e può essere un
   indirizzo di un altro sito — quindi `<img>` non ha `width` e `height`: con
   un'altezza dichiarata qui lo spazio è riservato prima che il file arrivi, e
   la pagina non salta giù di cento pixel a caricamento finito.
   `object-fit: contain` tiene le proporzioni di un logo lungo e basso che
   sbatte contro `max-width`.
   ATTENZIONE AI MARGINI DEL FILE: la misura vale per il disegno del logo,
   non per il quadrato che lo contiene. Il logo di Turi caricato oggi è un
   quadrato 1182×1182 con il 31% di trasparente sopra e sotto: a questa
   altezza il marchio vero ne occupa poco più di un terzo. Il rimedio è il
   file ritagliato, non un numero più grande qui.
   Ingrandito il 14 settembre 2026 su richiesta del cliente: 108px sul
   telefono — l'altezza che il marchio aveva nel vecchio sito a 390px — e
   144 sul desktop, poco più dei 130 di allora. */
.testata__logo {
    display: block;
    height: clamp(6.75rem, 3.5rem + 12vw, 9rem);
    width: auto;
    max-width: min(20rem, 80%);
    /* L'aria sotto il marchio (quella che nel vecchio sito era trasparenza
       del file) più i 18px di margine del suo contenitore. Il titolo sotto non
       aggiunge i suoi 8px: nel vecchio foglio i due margini si sovrapponevano
       — due margini verticali adiacenti si fondono nel maggiore — mentre in
       una colonna flessibile si sommerebbero. */
    margin-bottom: calc(var(--aria-logo) + 1.125rem);
    object-fit: contain;
}

/* Il nome del marchio compare solo quando NON c'è il logo: con entrambi si
   leggerebbe due volte la stessa cosa. Il template lo decide, qui si
   stabilisce solo come si vede — e al posto del logo deve farsi notare
   quanto basta per dire di chi è la pagina. */
.testata__nome {
    margin: 0 0 var(--s2);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--marchio-testo);
}

.testata__titolo {
    margin: 0 0 0.625rem;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--marchio-testo);
}

.testata__sottotitolo {
    margin: 0;
    max-width: 40rem;
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    color: var(--inchiostro-tenue);
}

/* --- La barra che resta in cima ----------------------------------------- */

/* Cambiare tipo è la cosa che si fa più spesso, e finiva fuori schermo al
   primo scorrimento: si tornava su, si cambiava, si ripartiva da capo.
   Restando in vista costa un gesto invece di tre.

   IN CIMA ALLA PAGINA NON È UNA FASCIA. Finché la testata si vede, la barra
   sta nel flusso sotto il sottotitolo e non ha niente da coprire: velo e
   ombra disegnavano una striscia grigia fra la testata e l'elenco, un bordo
   in più che non separava niente. Compaiono quando la barra si attacca in
   cima e il contenuto comincia a passarle sotto — lì servono, perché senza
   il velo i titoli dei documenti scorrerebbero dietro le pastiglie.
   `data-in-cima` nasce nel template e lo toglie il JavaScript, che guarda la
   testata; dove l'osservatore non c'è, lo toglie subito e la barra resta
   com'era: sempre velata. */
.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: var(--s3) 0;

    /* Il velo dietro la barra: il contenuto le passa sotto e si intravede,
       invece di sparire contro un rettangolo pieno. Dove `backdrop-filter`
       non c'è, resta il fondo semi-opaco, che basta. È bianco perché la barra
       sta sul foglio: un velo grigio disegnerebbe una fascia di un altro
       colore dentro il riquadro. */
    background-color: rgb(255 255 255 / 0.9);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--ombra-barra);

    transition: background-color var(--transizione), box-shadow var(--transizione);
}

.barra[data-in-cima] {
    background-color: rgb(255 255 255 / 0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* I bersagli restano sopra i 44px anche quando il testo è piccolo: si preme
   con i guanti, in piedi, su un ponteggio. */
.bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: var(--s2);
    min-height: var(--bersaglio-minimo);
    padding: var(--s2) var(--s5);

    font: inherit;
    font-weight: 700;
    color: var(--marchio-testo);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-pillola);
    cursor: pointer;

    transition: transform var(--transizione), box-shadow var(--transizione),
        border-color var(--transizione);
}

.bottone:hover {
    border-color: var(--bordo-acceso);
    box-shadow: var(--ombra-alzata);
}

.bottone:active {
    transform: translateY(1px);
    box-shadow: var(--ombra-premuta);
}

.bottone[hidden] {
    display: none;
}

/* Disabilitato finché il catalogo non è arrivato: si vede che c'è, si vede
   che ancora non risponde. Il testo di un comando disabilitato è esente dal
   minimo di contrasto (WCAG 1.4.3), ma resta leggibile lo stesso. */
.bottone:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    border-color: var(--bordo);
    transform: none;
}

/* --- Le pastiglie di tipi e categorie ---
   Sono la stessa pastiglia nella barra (i tipi) e nei passi (le categorie):
   scegliere un tipo e scegliere una categoria sono lo stesso gesto, e hanno
   lo stesso aspetto. Dal 16 settembre 2026 si vedono a ogni larghezza: prima,
   sotto i 60rem, al loro posto c'erano la tendina del tipo e il pulsante
   «Categorie», tolti su richiesta del cliente. */
.filtri {
    min-width: 0;
}

/* Le pastiglie vanno a capo invece di scorrere: la fila che scorreva di lato
   è stata bocciata dal cliente — a 390px se ne vedevano una e mezza, e
   niente diceva quante fossero. Due righe sono un degrado accettabile, una
   fila tagliata no. */
.filtri__elenco {
    display: flex;
    flex-wrap: wrap;

    /* FRA DUE RIGHE A CAPO LO STACCO È IL DOPPIO DELL'ESTENSIONE. Con lo
       stesso stacco dei lati (8px) lo strato della pastiglia sotto copriva
       il fondo di quella sopra: misurate a 390px, «Tutti» e altre tre
       rispondevano su 44px invece di 48. Prima non si vedeva perché sotto i
       60rem la fila non c'era e sopra stava su una riga. */
    gap: calc(2 * var(--estensione)) var(--s2);
    margin: 0;
    list-style: none;

    /* L'imbottitura verticale è l'estensione del bersaglio: tiene lo strato
       che porta le pastiglie a 48px lontano da ciò che sta sopra e sotto,
       così il dito che preme appena fuori da una pastiglia non finisce
       altrove. Fra due righe di passi fa lo stesso lavoro. */
    padding: var(--estensione) 0;

    /* LA RIGA È ALTA ANCHE VUOTA. Le pastiglie le disegna il JavaScript
       quando l'indice è arrivato: prima la lista è vuota, e la barra nasceva
       più bassa e saliva un attimo dopo, spingendo giù tutta la pagina sotto
       il dito di chi stava già leggendo. Il posto per una fila di pastiglie è
       tenuto da subito. */
    min-height: calc(var(--pastiglia) + 2 * var(--estensione));
}

.filtri__elenco > li {
    flex: 0 0 auto;
}

/* LE PASTIGLIE SI DISEGNANO PIÙ PICCOLE DEL BERSAGLIO, E NON PIÙ PICCOLE
   DI COSÌ. Erano alte 48px con il testo in grassetto a 16: cinque pulsanti
   pieni che pesavano quanto il campo di ricerca, in una barra che resta
   sempre in vista. Ora sono 36px disegnati con il testo a 14, e l'area che
   risponde al dito resta di 48 — lo strato `::after` la allarga di
   `--estensione` sopra e sotto, e di metà dello spazio fra due pastiglie ai
   lati, così due aree vicine si toccano senza sovrapporsi.
   Il bersaglio non si è ristretto: si è ristretto il disegno. */
.filtro {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    min-height: var(--pastiglia);
    padding: 0 var(--s3);

    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--marchio-testo);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-pillola);
    cursor: pointer;

    transition: color var(--tempo-svelto) var(--curva),
        background-color var(--tempo-svelto) var(--curva),
        border-color var(--transizione);
}

.filtro::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--estensione)) calc(-1 * var(--s1));
}

.filtro:hover {
    border-color: var(--bordo-acceso);
}

/* Il filtro scelto si riconosce dal PIENO, non da una sfumatura: alla luce
   del sole la differenza fra due grigi non si vede. L'ombra che lo
   sollevava se n'è andata: il pieno basta a distinguerlo, e un'ombra sotto
   una pastiglia da 36px la faceva sembrare un pulsante da premere invece di
   uno stato. */
.filtro[aria-current="true"] {
    color: var(--testo-su-primario);
    background: var(--colore-primario);
    border-color: var(--colore-primario);
}

/* LE CATEGORIE SONO UN PASSO SOTTO IL TIPO, e si vede: stessa pastiglia,
   stesso bersaglio, ma tono più basso — fondo appena velato del colore del
   marchio, niente bordo, testo meno pesante. La scelta non si riempie del
   colore pieno, che resta al tipo: si vela di più e prende un bordo. A
   distinguerla non è solo il tono: c'è la × e, per chi non vede, `aria-current`.
   Il testo resta `--marchio-testo`, che regge 4,5:1 anche sul velo più scuro. */
.filtro--secondario {
    font-weight: 500;
    background: rgb(var(--rgb-primario) / 0.10);
    border-color: transparent;
}

.filtro--secondario:hover {
    border-color: var(--bordo-acceso);
}

.filtro--secondario[aria-current="true"] {
    color: var(--marchio-testo);
    background: rgb(var(--rgb-primario) / 0.20);
    border-color: rgb(var(--rgb-primario) / 0.60);
}

/* La × della categoria scelta: dice, prima di premere, che premere toglie
   la scelta. È disegnata, non scritta, e non si annuncia: la frase per il
   lettore di schermo sta nel collegamento. */
.filtro__togli {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-left: var(--s2);
    margin-right: calc(-1 * var(--s1));
}

/* --- I risultati, in colonna unica ------------------------------------- */

.risultati {
    display: block;
    padding-block: var(--s4) clamp(var(--s6), 6vw, var(--s7));
}

/* --- Risultati ---------------------------------------------------------- */

/* I PASSI: una riga di pastiglie per livello di categoria. Stanno in testa
   ai risultati e non nella barra che resta in cima: tre righe a capo, su un
   telefono, coprirebbero mezzo schermo mentre si scorre l'elenco. Le righe
   sono `.filtri__elenco`, quindi ognuna tiene lo spazio dello strato che
   porta le pastiglie al bersaglio, e due righe vicine non si rubano il
   tocco.
   NIENTE FILETTO A SINISTRA: c'era, e il cliente non lo voleva (16/09/2026).
   Le righe stanno allineate a quelle dei tipi. */
.passi {
    margin: calc(-1 * var(--s2)) 0 var(--s3);
}

.intestazione-risultati {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s3);
}

.conteggio {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--inchiostro-lieve);
}

.avviso {
    margin: 0 0 var(--s4);
    padding: var(--s4) var(--s5);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    color: var(--inchiostro-tenue);
}

/* «STO CARICANDO» E «NON CE L'HO FATTA» NON POSSONO ESSERE LO STESSO
   RIQUADRO. Lo erano: stessa classe, stesso fondo, stesso bordo, e a
   distinguerli restava il solo `role="alert"`, cioe' qualcosa che si sente e
   non si vede. In cantiere, senza rete, chi apre la pagina vedeva la stessa
   cosa di chi la vede caricare — e aspettava invece di ricaricare.
   Il rosso e' quello del pannello: `#9b2c2c` su bianco vale 7,53:1. */
.avviso--errore {
    border-color: rgb(155 44 44 / 0.55);
    border-left-width: 4px;
    border-left-color: #9b2c2c;
    color: #7f2424;
}

/* Il caricamento e' un'attesa, non una notizia: resta discreto e dice che
   qualcosa sta succedendo. */
.avviso--attesa {
    border-style: dashed;
}

/* --- Gruppi di documenti ------------------------------------------------- */

/* PERCHÉ RAGGRUPPATI. Con cento documenti in vista «Tutti» un elenco continuo
   è un muro: si scorre senza sapere se si è ancora fra le istruzioni di
   montaggio o già fra le schede prodotto. Il titolo di gruppo resta in vista
   mentre il suo gruppo scorre, così la domanda «dove sono» ha sempre una
   risposta sullo schermo. È anche la forma della landing, che separa le
   schede PDF dai video con due `h2`: qui i gruppi li decide l'albero invece
   dell'autore, ma il gesto di lettura è lo stesso. */
.gruppi {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* SUL FOGLIO BIANCO IL TITOLO DI GRUPPO È UN'ETICHETTA, NON UNA FASCIA: a
   filo delle righe, come «SCHEDE IN PDF» nel vecchio sito. Il fondo bianco
   resta perché, quando il titolo si ferma sotto la barra, le righe gli
   passano dietro e non devono trasparire. Si ferma a filo della barra e non
   8px più sotto: con il fondo grigio di prima lo stacco serviva a non farli
   sembrare incollati; con tutti e due bianchi, quegli 8px erano una fessura
   da cui si vedevano le righe scorrere fra la barra e il titolo. */
.gruppo__titolo {
    position: sticky;
    /* Sotto la barra, non dietro: l'altezza vera la misura il JavaScript. */
    top: var(--altezza-barra);
    z-index: 10;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin: 0 0 var(--s1);
    padding: var(--s3) 0 var(--s2);

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--marchio-testo);

    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gruppo__quanti {
    flex: 0 0 auto;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--inchiostro-lieve);
}

.elenco {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- La riga di un documento --------------------------------------------
   Era una card di 190px con dentro un titolo, tre etichette e un percorso
   ripetuto identico su cinque voci su sette: sette documenti occupavano 1700px
   su desktop e 2400px su telefono. Ora è una riga di 64px — l'altezza della
   voce `.doc` della landing, che è esattamente questa cosa qui — con il
   formato a sinistra, il titolo che domina e i dati di servizio in coda.
   Il percorso sparisce dalla riga perché lo dice il titolo del gruppo, che sta
   appena sopra e resta in vista.
   TUTTA la riga è il collegamento: lo era anche prima, ma sembrava un link
   dentro un riquadro e la gente premeva il titolo. */

.documento__collegamento {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0 var(--s3);

    padding: var(--s2) var(--s3);
    text-decoration: none;
    color: var(--inchiostro);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);

    transition: transform var(--transizione), box-shadow var(--transizione),
        border-color var(--transizione);
}

/* Il quadrato del formato: dice PDF o video prima che si legga il titolo, ed
   è la distinzione che serve davvero in cantiere — un video non si stampa e
   non si consulta con le mani sporche. */
.documento__formato {
    grid-column: 1;
    grid-row: 1 / -1;

    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;

    color: var(--marchio-testo);
    background: var(--superficie-tenue);
    border: 1px solid var(--bordo-tenue);
    border-radius: var(--raggio-piccolo);

    transition: background var(--transizione), border-color var(--transizione);
}

/* I video portano l'oro del marchio: sono l'eccezione dell'elenco, e la
   landing li segnava già così. */
.documento__formato--video {
    color: var(--testo-su-secondario);
    background: var(--colore-secondario);
    border-color: rgb(0 0 0 / 0.08);
}

.documento__formato svg {
    width: 1.35rem;
    height: 1.35rem;
}

.documento__corpo {
    grid-column: 2;
    min-width: 0;
}

/* I DATI VANNO IN FONDO ALLA RIGA, DOVE C'ERA IL VUOTO.
   Misurato a 1440px: la riga del documento e' larga 784px, il titolo ne usa
   novanta, e fra la fine del titolo e la freccia di apertura restavano
   seicentoventisei pixel di niente. Una riga cosi' non si legge come una riga:
   si legge come due cose lontane, e l'occhio deve attraversare mezzo schermo
   per sapere se il documento pesa 110 KB o 1,2 MB.
   Il rimedio non e' avvicinare la freccia — sta al bordo destro perche' li'
   sta in ogni elenco — ma riempire quello spazio con l'informazione che
   c'era gia', spostandola. Il tipo, il formato e il peso vanno a destra, e la
   riga acquista due estremi invece di un inizio e un vuoto.
   Solo da 64rem in su: sotto, i dati stanno bene dove sono, sotto il titolo. */
@media (min-width: 64rem) {
    .documento__corpo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: baseline;
        column-gap: var(--s5);
    }

    .documento__titolo { grid-column: 1; grid-row: 1; }
    .documento__descrizione { grid-column: 1; grid-row: 2; }

    .documento__dati {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        margin: 0;
    }
}

.documento__titolo {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    line-height: 1.35;
    color: var(--marchio-testo);
}

.documento__descrizione {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--inchiostro-tenue);

    /* Una riga sola: la descrizione aiuta a scegliere fra due titoli simili,
       non è il documento. Su tre righe rimetterebbe l'elenco dov'era. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.documento__dati {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--inchiostro-lieve);
}

/* Il puntino fra i dati: separa senza disegnare quattro riquadri per riga.
   Le etichette a pastiglia erano tre per documento — tipo, formato, peso —
   e su sette righe facevano ventun riquadri per un elenco di sette voci.

   STA IN CODA ALL'ELEMENTO CHE PRECEDE, non in testa a quello che segue, e
   la differenza si vede solo su uno schermo stretto: scritto in testa, il
   puntino andava a capo insieme alla parola successiva e apriva la riga —
   «· 1,2 MB» — come se mancasse qualcosa prima. In coda va a capo con la
   parola a cui appartiene, e l'ultima riga finisce pulita. */
.documento__dati > *:not(:last-child)::after {
    content: "\00B7";
    margin-left: var(--s2);
    color: var(--bordo-acceso);
}

/* Il tipo è l'unico dato che porta il colore del marchio: distingue a colpo
   d'occhio un'istruzione di montaggio da una scheda di pulizia, che è la
   domanda che l'installatore si fa davvero. */
.documento__tipo {
    font-weight: 700;
    color: var(--marchio-testo);
}

/* IL NOME DEL FORMATO SPARISCE ALLA VISTA, NON DALLA PAGINA. Su 390px la riga
   «Istruzioni di montaggio · PDF · 1,2 MB» va a capo e il documento diventa
   alto 89px invece di 64: su cento documenti sono duemila pixel di
   scorrimento per ripetere una parola che l'icona a sinistra ha già detto.
   Ma l'icona è `aria-hidden` — è un disegno, non un'informazione — quindi la
   parola resta nell'albero di accessibilità: chi non vede l'icona continua a
   sapere che è un PDF. Torna visibile appena c'è la larghezza per contenerla
   sulla stessa riga. */
@media (max-width: 47.999rem) {
    .documento__formato-nome {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Senza questa riga il puntino resterebbe attaccato al nome nascosto e
       la riga si aprirebbe con un separatore che non separa niente. */
    .documento__formato-nome::after {
        content: none;
    }
}

/* La pastiglia «apri», identica a quella del sito attuale. È un `::after` e
   non un elemento: il markup lo costruisce il JavaScript, che ha i suoi
   test, e un segno decorativo non vale una modifica là dentro. */
.documento__collegamento::after {
    content: "\2197";
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;

    min-width: var(--bersaglio-minimo);
    min-height: var(--bersaglio-minimo);
    display: grid;
    place-items: center;

    font-weight: 900;
    color: var(--marchio-testo);
    background: none;
    border-radius: var(--raggio-pillola);

    transition: transform var(--transizione), background var(--transizione),
        color var(--transizione);
}

.documento__collegamento:hover {
    transform: translateY(-1px);
    border-color: var(--bordo-acceso);
    box-shadow: var(--ombra-alzata);
}

/* Al passaggio la pastiglia si accende d'oro e la freccia parte nella
   direzione in cui porta: il movimento dice dove va a finire il gesto, non
   decora la riga. */
.documento__collegamento:hover::after {
    color: var(--testo-su-secondario);
    background: var(--colore-secondario);
    transform: translate(2px, -2px);
}

.documento__collegamento:active {
    transform: translateY(0);
    box-shadow: var(--ombra-premuta);
}

/* --- Quando non c'è niente ---------------------------------------------- */

/* Prima lo stato vuoto era una riga di testo in mezzo alla pagina: «Nessun
   documento per «xyz».» e sotto il bianco. Chi ha sbagliato una parola non
   sapeva se il documento non c'era o se il filtro attivo — che magari aveva
   scelto due minuti prima — lo stava nascondendo. Una via d'uscita è la
   differenza fra un vicolo cieco e una ricerca da rifare. */
.vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);

    margin: 0;
    padding: var(--s7) var(--s5);
    text-align: center;

    background: var(--superficie);
    border: 1px dashed var(--bordo);
    border-radius: var(--raggio);
}

.vuoto__titolo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--marchio-testo);
}

.vuoto__spiegazione {
    margin: 0;
    max-width: 32rem;
    color: var(--inchiostro-tenue);
}

/* --- Piede -------------------------------------------------------------- */

.piede {
    padding: clamp(var(--s5), 4vw, var(--s6)) 0;
    border-top: 1px solid var(--bordo);
    font-size: 0.8rem;
    color: var(--inchiostro-lieve);
}

/* Due righe, il brand e la società, strette una sull'altra: con i margini di
   paragrafo del navigatore erano 13px sopra e sotto ciascuna, e il piede
   diventava alto quanto un documento. */
.piede p {
    margin: 0;
}

.piede p + p {
    margin-top: var(--s1);
}

/* --- Pagina d'errore ---------------------------------------------------- */

.errore {
    max-width: 34rem;
    margin: clamp(var(--s7), 12vw, 7rem) auto;
    padding: clamp(var(--s5), 5vw, var(--s7));
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-foglio);
}

.errore__codice {
    margin: 0;
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--marchio-testo);
}

/* --- Schermi larghi ------------------------------------------------------
   Il blocco sta DOPO le regole che ritocca e non prima: a parità di
   specificità vince l'ultima regola scritta. */

@media (min-width: 48rem) {
    .documento__collegamento {
        padding: var(--s3) var(--s4);
        gap: 0 var(--s4);
    }
}

/* --- Stampa ------------------------------------------------------------- */

@media print {
    .barra,
    .passi,
    .salta {
        display: none;
    }

    body {
        background: #ffffff;
    }

    .foglio {
        width: auto;
        margin: 0;
        border: 0;
    }

    .documento {
        break-inside: avoid;
    }

    .gruppo__titolo {
        position: static;
        background: none;
    }

    /* Su carta la pastiglia «apri» non ha senso: niente da premere. */
    .documento__collegamento::after {
        content: none;
    }
}

/* --- L'unica animazione che parte da sola ------------------------------
   L'elenco compare in cascata, una riga dopo l'altra, e succede UNA VOLTA
   SOLA: al primo caricamento. Ripeterla a ogni tasto premuto durante una
   ricerca — che è ciò che accade se si anima a ogni ridisegno — trasforma
   l'unico movimento gradito della pagina nel motivo per cui si smette di
   cercare. Il ritardo lo assegna il JavaScript riga per riga, e si ferma
   dopo le prime: una cascata di cento elementi non è più una cascata, è
   un'attesa. */
@keyframes comparsa {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .elenco--nuovo .documento {
        animation: comparsa var(--tempo-lento) var(--curva) backwards;
        animation-delay: var(--ritardo, 0ms);
    }
}

/* --- Chi ha chiesto meno movimento ------------------------------------
   Il sistema operativo lo dichiara, e qui si ubbidisce in un posto solo.
   Le transizioni di questo foglio sono brevi e tutte su `transform` e
   `box-shadow` — nessuna gira da sola, tutte rispondono a un gesto — ma
   «breve» non è una scusa: chi soffre di disturbi vestibolari ha chiesto di
   non vedere le cose muoversi, e il sollevamento di un pixel su ogni card di
   un elenco lungo È movimento.
   Non si azzera la durata a zero con `animation: none`: alcune animazioni
   portano stati (un `open` che si apre) e toglierle del tutto le romperebbe.
   Si riduce a un tempo impercettibile, che conserva il passaggio di stato. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* E soprattutto: niente spostamenti. La transizione ridotta a zero
       lascerebbe comunque il salto di posizione, che è proprio la cosa da
       togliere. */
    .documento__collegamento:hover,
    .documento__collegamento:active,
    .documento__collegamento:hover::after,
    .bottone:hover,
    .bottone:active,
    .filtro:hover,
    .filtro:active {
        transform: none;
    }
}