/* ============================================================================
 * Pannello demo — interfaccia chiara, materiali in vetro
 * ----------------------------------------------------------------------------
 * Costruita sul design system Apple: colori di sistema in versione chiara,
 * tipografia SF, angoli continui, controlli a capsula, aree toccabili da 44
 * punti, materiali traslucidi.
 *
 * Una regola guida tutto il resto: il vetro sta sulla STRUTTURA — barra alta,
 * colonne, fogli, avvisi — e mai sotto il contenuto da leggere. Il testo, il
 * codice e le tabelle stanno su superfici piene, perché la traslucenza sotto un
 * paragrafo lo rende faticoso e abbassa il contrasto sotto la soglia.
 *
 * Il vetro è fatto di quattro cose insieme, non solo di sfocatura: un velo
 * chiaro, la sfocatura con un po' di saturazione in più, un bordo luminoso di
 * mezzo pixel e un'ombra morbida che stacca il piano da quello sotto.
 * ========================================================================= */

:root {
    color-scheme: light;

    /* --- colori di sistema, versione chiara --- */
    --blu:      #007AFF;
    --blu-cupo: #0062CC;
    --verde:    #34C759;
    --rosso:    #FF3B30;
    --arancio:  #FF9500;
    --viola:    #5856D6;

    /* --- grigi di sistema --- */
    --grigio:   #8E8E93;
    --grigio-2: #AEAEB2;
    --grigio-3: #C7C7CC;
    --grigio-4: #D1D1D6;
    --grigio-5: #E5E5EA;
    --grigio-6: #F2F2F7;

    /* --- fondi --- */
    --fondo:      #F2F2F7;   /* la scrivania */
    --superficie: #FFFFFF;   /* le carte che ci stanno sopra */
    --superficie-2: #FBFBFD;

    /* --- etichette, con l'opacità che scala per importanza --- */
    --testo:   #1C1C1E;
    --testo-2: rgba(60, 60, 67, .68);
    --testo-3: rgba(60, 60, 67, .48);
    --testo-4: rgba(60, 60, 67, .28);

    --separatore: rgba(60, 60, 67, .18);
    --separatore-pieno: #D8D8DC;
    --riempimento:   rgba(120, 120, 128, .16);
    --riempimento-2: rgba(120, 120, 128, .12);
    --riempimento-3: rgba(120, 120, 128, .08);

    /* --- vetro --- */
    --vetro:        rgba(255, 255, 255, .72);
    --vetro-sottile:rgba(255, 255, 255, .58);
    --vetro-spesso: rgba(255, 255, 255, .86);
    --vetro-bordo:  rgba(255, 255, 255, .75);
    --vetro-orlo:   rgba(0, 0, 0, .06);
    --sfoca: saturate(180%) blur(20px);

    --ombra-1: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
    --ombra-2: 0 8px 30px rgba(0,0,0,.12);
    --ombra-3: 0 20px 60px rgba(0,0,0,.18);

    --velatura: rgba(0, 0, 0, .28);

    --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif;

    /* Angoli continui: generosi sui contenitori, capsula sui controlli. */
    --r-piccolo: 10px;
    --r:         14px;
    --r-grande:  20px;
    --r-foglio:  26px;
    --capsula:   999px;

    --capo-h: 56px;
    --molla: cubic-bezier(.32, .72, 0, 1);

    /* Il telefono simulato nell'anteprima: iPhone 16, in punti CSS. */
    --tel-largo: 393px;
    --tel-alto:  852px;
}

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

html, body { height: 100%; }

body {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(0, 122, 255, .10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(88, 86, 214, .10), transparent 55%),
        var(--fondo);
    background-attachment: fixed;
    color: var(--testo);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
body.is-fuori { overflow: auto; display: grid; place-items: center; }

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blu); }

/* L'anello di messa a fuoco è quello di sistema: sempre visibile, mai invadente. */
:focus-visible { outline: 3px solid rgba(0, 122, 255, .5); outline-offset: 2px; border-radius: 6px; }

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

/* Il materiale, in un posto solo: chi lo usa eredita tutto. */
.vetro {
    background: var(--vetro);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border: .5px solid var(--vetro-orlo);
    box-shadow: inset 0 .5px 0 var(--vetro-bordo), var(--ombra-1);
}

/* ================================================================ soglia = */
.soglia { width: 100%; max-width: 27rem; padding: 2rem 1.25rem; }
.soglia__scheda {
    display: grid; gap: 1rem;
    padding: clamp(1.5rem, 5vw, 2.25rem);
    background: var(--vetro-spesso);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border: .5px solid var(--vetro-orlo);
    border-radius: var(--r-foglio);
    box-shadow: inset 0 .5px 0 var(--vetro-bordo), var(--ombra-3);
}
/*
 | Il marchio in testa alla soglia.
 |
 | Sta da solo su una riga sua, centrato, con un po' d'aria sotto: è la prima
 | cosa che si guarda entrando, e messo in riga con il testo sarebbe diventato
 | una decorazione di fianco a una scritta. Il margine negativo in cima gli
 | ruba un pezzo del respiro della scheda, perché il riquadro dell'icona ne
 | porta già di suo dentro il disegno.
 */
.soglia__logo {
    justify-self: center;
    width: 64px; height: 64px;
    margin-top: -.35rem; margin-bottom: -.35rem;
    border-radius: 15px;
}

.soglia__occhiello { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blu); text-align: center; }
.soglia h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; text-align: center; }
.soglia__testo { color: var(--testo-2); font-size: 15px; }

/* Il pulsante d'ingresso ha un po' più di corpo degli altri: è l'unica cosa
   da premere in questa schermata. */
.soglia__entra { min-height: 48px; margin-top: .15rem; }
.soglia__esito { min-height: 1.4em; font-size: 14px; color: var(--rosso); }
.soglia__esito.is-buono { color: #1E8E3E; }
/* L'attesa non è un errore: «Un attimo…» è l'app che lavora, e in rosso
   sembrava che l'accesso fosse già andato storto. */
.soglia__esito.is-attesa { color: var(--testo-3); }
.soglia__firma { font-size: 12px; color: var(--testo-3); text-align: center; }

.campo { display: grid; gap: .35rem; }
.campo > span { font-size: 12px; font-weight: 600; color: var(--testo-3); }

/*
 | Un'etichetta che c'è ma non si vede.
 |
 | Serve dove il nome del campo sta nel segnaposto: il segnaposto sparisce
 | appena si scrive e i lettori vocali non sempre lo annunciano, quindi da
 | solo lascerebbe un campo senza nome. Questa riga lo tiene per chi ne ha
 | bisogno senza occupare un pixel.
 |
 | Non si usa «display: none» né «visibility: hidden»: tolgono l'elemento
 | anche alla voce, che è esattamente il contrario di quello che serve.
 | Fuori dal flusso non lascia nemmeno il vuoto della griglia.
 */
.solo-voce {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
}
.campo input, .campo select, .campo textarea {
    min-height: 44px;
    padding: .6rem .85rem;
    background: var(--superficie);
    border: .5px solid var(--separatore-pieno);
    border-radius: var(--r-piccolo);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 88px; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
    outline: none;
    border-color: var(--blu);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, .16);
}

/* =============================================================== controlli */
.bottone {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: 44px; padding: 0 1rem;
    background: var(--superficie);
    color: var(--blu);
    border: .5px solid var(--vetro-orlo);
    border-radius: var(--capsula);
    box-shadow: var(--ombra-1);
    cursor: pointer; white-space: nowrap;
    font-size: 15px; font-weight: 500;
    /* Alcuni comandi sono collegamenti veri, perché aprono una scheda nuova:
       senza questa riga si portano dietro la sottolineatura del browser. */
    text-decoration: none;
    transition: transform .16s var(--molla), background .2s ease, box-shadow .2s ease;
}
a.bottone, a.bottone:hover, a.bottone:visited { text-decoration: none; }

/*
 | Il passaggio del puntatore non tocca i comandi spenti.
 |
 | Prima li toccava, e su un pulsante pieno era un guaio: il testo di quelli
 | resta bianco, e la regola del passaggio gli metteva sotto una superficie
 | chiara. Bianco su bianco, per giunta a fondo trasparenza: il comando
 | spariva proprio mentre ci si passava sopra per capire perché non funziona.
 | Si vedeva su «Manda in produzione» e «Porta nella demo», che stanno spenti
 | finché non si segna qualcosa — cioè esattamente quando li si guarda.
 */
.bottone:hover:not(:disabled) { background: #fff; box-shadow: var(--ombra-2); }
.bottone:active:not(:disabled) { transform: scale(.96); }
.bottone:disabled { opacity: .4; cursor: default; box-shadow: none; }

.bottone--pieno { background: var(--blu); color: #fff; border-color: transparent; font-weight: 600; }
.bottone--pieno:hover:not(:disabled) { background: var(--blu-cupo); }
.bottone--rosso { background: var(--rosso); color: #fff; border-color: transparent; font-weight: 600; }
.bottone--rosso:hover:not(:disabled) { background: #E0342A; }
.bottone--nudo { background: transparent; box-shadow: none; border-color: transparent; }
.bottone--nudo:hover { background: var(--riempimento-3); box-shadow: none; }

/* Verde per "Apri nel web": porta fuori dal pannello, verso il sito
   pubblicato, e il colore lo distingue dalle azioni che restano qui dentro.
   Il verde di sistema è troppo chiaro per reggere il bianco sopra, quindi si
   usa la sua versione cupa, che arriva a 4,6:1.
   Sta dopo .bottone:hover di proposito: hanno la stessa specificità, e a
   parità di peso decide l'ordine. Messo prima, all'hover diventava bianco. */
.bottone--verde { background: #1E8E3E; color: #fff; border-color: transparent; font-weight: 600; }
.bottone--verde:hover:not(:disabled) { background: #19752F; color: #fff; box-shadow: var(--ombra-2); }
/* Sotto i 44 punti si scende solo dove il comando sta dentro una riga già
   toccabile: il minimo resta 34, con l'area cliccabile allargata dal padding. */
.bottone--piccolo { min-height: 34px; padding: 0 .75rem; font-size: 13px; }

/*
 | Le icone dentro i comandi.
 |
 | Prendono il colore del testo che le accompagna — su un pulsante pieno sono
 | bianche, su uno rosso pure — e non si stringono quando la parola accanto è
 | lunga. Un filo sotto la linea di base ottica: un disegno alto quanto la
 | maiuscola sembra sempre un po' troppo in alto.
 */
.icona { width: 15px; height: 15px; flex: none; }
.bottone--piccolo .icona { width: 14px; height: 14px; }

/*
 | Le voci di un menu: icona a sinistra, testo allineato, tutta la larghezza.
 |
 | Erano scritte a mano con uno stile in riga su ogni pulsante di tre menu
 | diversi, che è il modo più sicuro di ritrovarseli un giorno diversi.
 |
 | La riga che conta è «white-space: normal». Un pulsante, di regola, tiene il
 | testo su una riga sola: è quello che si vuole per «Salva» o per «Apri», che
 | non devono spezzarsi in due. Ma queste voci portano una spiegazione dopo il
 | nome — «Elimina — per sempre, con tutto il contenuto» — e su un telefono
 | quella frase è più larga dello schermo: non potendo andare a capo, usciva
 | dalla finestra e bisognava trascinare di lato per leggerla. Qui il testo va
 | a capo e il pulsante si alza quanto serve.
 */
.bottone--voce {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    gap: .55rem;
    white-space: normal;
    overflow-wrap: break-word;
    height: auto;
    min-height: 44px;
    padding-block: .55rem;
    line-height: 1.35;
}
/* Con due righe di testo il disegno resta in mezzo, dove lo si cerca. */
.bottone--voce .icona { align-self: center; }

/* ================================================================ telaio = */
#pannello { height: 100%; }

/* La riga della barra cresce col contenuto invece di stare a un'altezza
   fissa: su iPhone ci si aggiunge sotto il margine della tacca, e con una
   riga rigida quel margine avrebbe schiacciato il contenuto invece di
   allargare la barra. Il minimo resta quello di prima. */
.telaio { height: 100%; display: grid; grid-template-rows: auto 1fr; min-height: 0; }

/* La barra alta è chrome: vetro, e sta sopra tutto il resto. */
.capo {
    display: flex; align-items: center; gap: .6rem;
    min-height: var(--capo-h);
    padding-inline: .85rem;
    background: var(--vetro);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border-bottom: .5px solid var(--separatore);
    box-shadow: inset 0 .5px 0 var(--vetro-bordo);
    position: relative; z-index: 10;
}
.capo__marchio { font-weight: 700; letter-spacing: -.01em; font-size: 15px; }
.capo__marchio small { display: block; font-size: 11px; font-weight: 500; color: var(--testo-3); letter-spacing: 0; }
.capo__briciole { display: flex; align-items: center; gap: .4rem; color: var(--testo-2); font-size: 14px; min-width: 0; }
.capo__briciole b { color: var(--testo); font-weight: 600; }
.capo__spazio { flex: 1; }
.capo__stato { font-size: 13px; color: var(--testo-3); }
.capo__stato.is-modificato { color: var(--arancio); font-weight: 600; }
.capo__stato.is-salvato { color: #1E8E3E; }
.capo__utente { display: flex; align-items: center; gap: .4rem; font-size: 13px; }
.capo__utente b { font-weight: 600; }

/*
 | Nella barra non si schiaccia niente: si accorcia solo ciò che si può
 | leggere accorciato.
 |
 | Tutto quello che sta in una riga flessibile, se lo spazio manca, si stringe.
 | Vale anche per i pulsanti, che però hanno il testo su una riga sola e non
 | possono accorciarlo: il risultato era «Esci» dentro una pillola più stretta
 | della parola, con le lettere a filo dei bordi — deformato, appunto. Bastava
 | il nome di una demo un po' lungo, e capitava su qualunque schermo.
 |
 | Un comando o c'è tutto o non c'è. Quello che cede sono le briciole, che
 | hanno i puntini di sospensione apposta, e il nome di chi è entrato.
 */
.capo .bottone, .capo__utente, .capo__stato, .capo__marchio { flex: none; }

/*
 | I comandi della barra sono alti 34 e non 44.
 |
 | È l'unico posto dove si scende sotto la misura di sistema, e la ragione è
 | che qui il bersaglio non è solo il pulsante: la barra è alta il doppio e
 | attorno a ogni comando c'è aria che fa da margine di errore per il dito.
 | Con 44 punti, in una riga che ne è alta una sessantina, «Salva» ed «Esci»
 | diventavano due blocchi che si prendevano tutta l'altezza e facevano
 | sembrare la barra un cassetto pieno.
 */
.capo .bottone { min-height: 34px; }
.capo__briciole { flex: 0 1 auto; }
.capo__briciole > span, .capo__briciole > b {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.capo__utente b { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 | La barra alta su schermo stretto.
 |
 | Aperto un file, qui dentro convivono otto gruppi: marchio, briciole, spazio
 | elastico, File, Ispettore, stato, utente, Esci. In trecentonovanta punti non
 | ci stanno, e non potendo restringersi sfondavano la riga: la pagina
 | diventava più larga dello schermo e tutto scorreva di lato.
 |
 | Le linee guida Apple per iOS sono esplicite sul punto — limitare il numero
 | di controlli a schermo e rendere il resto raggiungibile con poca
 | interazione — quindi qui non si rimpicciolisce: si toglie.
 |
 |   il marchio sparisce SOLO quando ci sono le briciole, perché lì il
 |   contesto lo dà già «← Demo»; sul cruscotto, dove briciole non ce ne sono,
 |   resta l'unica cosa che dice dove ti trovi;
 |
 |   lo stato mostra soltanto l'avviso «modifiche non salvate» e tace quando è
 |   tutto salvato: su uno schermo stretto la rassicurazione non vale lo
 |   spazio che occupa, l'allarme sì;
 |
 |   il nome di chi è entrato sparisce: è un'informazione da scrivania.
 */
@media (max-width: 720px) {
    .capo {
        gap: .45rem;
        padding-inline: max(.6rem, env(safe-area-inset-left)) max(.6rem, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
    }

    .capo__marchio { font-size: 14px; white-space: nowrap; }
    .capo:has(.capo__briciole:not(:empty)) .capo__marchio { display: none; }

    /*
     | Il conto non tornava, e non era questione di far accorciare le briciole.
     |
     | Con un file aperto i pulsanti da soli — «← Demo», File, Ispettore,
     | Salva, Esci — misurano più di trecentonovanta punti: anche riducendo le
     | briciole a zero la barra sfondava comunque. Quindi si stringe il
     | contorno e si toglie ciò che è ripetuto.
     |
     | Il nome della demo sparisce dalle briciole quando c'è un file aperto:
     | da dove vieni lo dice già «← Demo», e restare significava ripetere la
     | stessa parola due volte in una riga che non ha spazio. Resta il nome del
     | file, che è l'unica cosa che quella riga deve dire.
     */
    .capo__briciole { flex: 1 1 auto; min-width: 0; overflow: hidden; }
    .capo__briciole > * { min-width: 0; }
    .capo__briciole > span,
    .capo__briciole > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Gli span esistono solo quando un file è aperto: è il modo per
       distinguere «demo aperta» da «file aperto» senza aiuto dal codice. */
    .capo__briciole:has(> span) > b,
    .capo__briciole:has(> span) > span:first-of-type { display: none; }

    /* Il contorno si stringe: è quello che restituisce i punti che servono. */
    .capo .bottone { padding-inline: .55rem; font-size: 12.5px; }
    .capo .bottone--piccolo { padding-inline: .5rem; }

    .capo__spazio { flex: 0 1 auto; }

    /*
     | Rete di sicurezza. Se un domani in questa barra finisse un comando in
     | più, meglio che venga tagliato lui piuttosto che l'intera pagina diventi
     | più larga dello schermo e tutto cominci a scorrere di lato — che è il
     | difetto da cui siamo partiti. Il contorno del fuoco si sposta all'interno
     | per non essere tagliato insieme.
     */
    .capo { overflow: hidden; }
    .capo .bottone:focus-visible { outline-offset: -2px; }

    .capo__stato { display: none; }
    .capo__stato.is-modificato { display: inline; font-size: 12px; }

    .capo__utente { display: none; }
}

/* =============================================================== colonne = */
/* La colonna dei file è larga 370 punti, anche quando si apre l'ispettore:
   se si restringesse solo in quel caso, passare all'editor visuale farebbe
   saltare di lato tutto l'albero. */
.corpo { display: grid; grid-template-columns: 370px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.corpo.ha-ispettore { grid-template-columns: 370px minmax(0, 1fr) 300px; }

.solo-stretto { display: none; }

/*
 | Schermo stretto: una colonna per volta, non tre impilate.
 |
 | I selettori nominano il genitore — «.corpo > .fianco» invece di «.fianco» —
 | e non è pedanteria. Le regole che danno a queste colonne il loro
 | «display: flex» stanno più in basso in questo foglio: a parità di
 | specificità vincerebbe l'ultima scritta, e il «display: none» qui sopra non
 | entrerebbe mai in vigore. È esattamente quello che succedeva, ed è il
 | motivo per cui sul telefono comparivano tutte e tre le colonne una sotto
 | l'altra, con la pagina più larga dello schermo.
 |
 | Nominare il genitore alza la specificità quanto basta perché queste regole
 | vincano a prescindere dall'ordine.
 */
@media (max-width: 960px) {
    .corpo, .corpo.ha-ispettore { grid-template-columns: minmax(0, 1fr); }

    .corpo > .fianco,
    .corpo > .ispettore { display: none; }

    .corpo.mostra-fianco > .fianco { display: flex; }
    .corpo.mostra-fianco > .centro { display: none; }
    .corpo.mostra-ispettore > .ispettore { display: flex; }
    .corpo.mostra-ispettore > .centro { display: none; }

    .solo-stretto { display: inline-flex; }
    .capo__marchio small { display: none; }

    /* A colonna piena il bordo laterale non separa più niente. */
    .corpo > .fianco { border-right: 0; }
    .corpo > .ispettore { border-left: 0; }
}

.fianco, .centro, .ispettore { min-height: 0; overflow: hidden; }

.fianco {
    display: flex; flex-direction: column;
    background: var(--vetro-sottile);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border-right: .5px solid var(--separatore);
}
.fianco__capo {
    display: flex; align-items: center; gap: .4rem;
    padding: .75rem .85rem;
    border-bottom: .5px solid var(--separatore);
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3);
}
.fianco__corpo {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: .5rem;
}
/*
 | I comandi in fondo al fianco.
 |
 | Una riga che va a capo, non una colonna di pulsanti a tutta larghezza: le
 | linee guida Apple mettono il pulsante largo quanto lo schermo fra le cose da
 | evitare, e il motivo si vede appena lo si prova — perde la forma di
 | pulsante e il pollice non sa dove mirare, perché il bersaglio è ovunque.
 | Sulla colonna stretta della scrivania vanno a capo da soli e si impilano
 | comunque, ma stretti sul contenuto invece che tirati da parte a parte.
 |
 | Il margine in fondo tiene conto dell'indicatore Home dell'iPhone: a colonna
 | piena questa è l'ultima cosa della pagina, e senza finirebbe sotto.
 |
 | ---------------------------------------------------------------------------
 | I due «flex» qui sotto ci sono perché senza di loro i comandi sparivano, e
 | vale la pena sapere come.
 |
 | La colonna dispone i suoi pezzi in verticale: intestazione, elenco dei file,
 | comandi. Quando l'elenco è più alto dello spazio disponibile — e su una demo
 | vera lo è sempre — il browser deve recuperare quei punti, e li toglie a
 | TUTTI i pezzi che possono cedere, ciascuno in proporzione alla propria
 | altezza. L'elenco, che è il più alto, ne perde di più; ma questa fascia ne
 | perdeva la sua parte, e siccome sta in fondo quello che le veniva tolto
 | finiva oltre il bordo: i pulsanti c'erano ancora, tagliati via.
 |
 | Con «flex: none» questa fascia è fuori dal conto e resta intera. A cedere è
 | soltanto l'elenco, che ha la sua barra per scorrere.
 |
 | I pulsanti, a loro volta, non si restringono: il testo è su una riga sola e
 | stringerli vorrebbe dire tagliare la parola invece di mandarla a capo.
 | Vanno a capo interi, quanti ce ne stanno per riga.
 */
.fianco__pie {
    flex: none;
    padding: .7rem .85rem;
    padding-bottom: max(.7rem, env(safe-area-inset-bottom));
    border-top: .5px solid var(--separatore);
    display: flex; flex-wrap: wrap; gap: .45rem;
}
.fianco__pie .bottone { flex: 0 0 auto; }

.centro { display: flex; flex-direction: column; min-width: 0; }

/* Barre di scorrimento discrete, come quelle di sistema. */
.fianco__corpo, .ispettore__corpo, .pagina, .anteprima__scatola {
    scrollbar-width: thin; scrollbar-color: var(--grigio-3) transparent;
}
.fianco__corpo::-webkit-scrollbar, .ispettore__corpo::-webkit-scrollbar,
.pagina::-webkit-scrollbar, .anteprima__scatola::-webkit-scrollbar { width: 11px; height: 11px; }
.fianco__corpo::-webkit-scrollbar-thumb, .ispettore__corpo::-webkit-scrollbar-thumb,
.pagina::-webkit-scrollbar-thumb, .anteprima__scatola::-webkit-scrollbar-thumb {
    background: var(--grigio-3); border-radius: var(--capsula);
    border: 3px solid transparent; background-clip: content-box;
}

/* =============================================================== schede == */
.schede {
    display: flex; gap: .2rem; padding: .4rem .5rem;
    border-bottom: .5px solid var(--separatore);
    background: var(--vetro-sottile);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
}
/* Il selettore a schede di iOS: sfondo grigio tenue, pillola bianca su quella
   attiva. Non un bordo: una lastra che scivola sotto la voce scelta. */
.scheda {
    min-height: 34px; padding: 0 .85rem;
    border-radius: var(--capsula); cursor: pointer;
    background: transparent; border: none;
    color: var(--testo-2); font-size: 14px; font-weight: 500;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.scheda:hover { color: var(--testo); background: var(--riempimento-3); }
.scheda.is-attiva { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-1); font-weight: 600; }
.scheda:disabled { opacity: .38; cursor: default; }
.scheda:disabled:hover { background: transparent; color: var(--testo-2); }

.pagina { flex: 1; overflow: auto; min-height: 0; }
.pagina--pieno { overflow: hidden; display: flex; min-height: 0; }
.pagina--pieno > * { flex: 1; min-width: 0; min-height: 0; }

/* ============================================================== cruscotto */
.cruscotto { padding: clamp(1rem, 3vw, 2rem); }
.cruscotto__capo { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cruscotto h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }

/* Il titolo della schermata con la sua icona. L'icona è grande quanto la
   maiuscola e porta il colore d'accento: dice di che schermata si tratta
   prima che si legga la parola. */
.cruscotto__titolo { display: flex; align-items: center; gap: .55rem; }
.cruscotto__titolo .icona { width: 26px; height: 26px; color: var(--blu); }

/*
 | Su schermo stretto il titolo prende la sua riga e i comandi la successiva.
 |
 | Affiancati, «Dashboard» e tre pulsanti non ci stavano: andavano a capo dove
 | capitava, con «Nuova demo» che finiva in riga col titolo e gli altri due
 | sotto, sfalsati. Il riempitivo che su schermo largo spinge i comandi a
 | destra qui non serve e sparisce, così i tre si dividono la larghezza.
 */
@media (max-width: 700px) {
    .cruscotto__capo { gap: .5rem; }
    .cruscotto__titolo { flex: 1 0 100%; }
    .cruscotto__capo .capo__spazio { display: none; }
    .cruscotto__capo .bottone { flex: 1 1 auto; }
}
.cruscotto__nota { color: var(--testo-3); font-size: 13px; }

/* I filtri sopra l'elenco. Riga sola, sommessa: sono comandi di servizio e non
   devono competere con le demo, che sono il contenuto. Il conteggio si stacca
   a destra, dove l'occhio lo cerca dopo aver cambiato un filtro. */
.setaccio {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    margin-bottom: 1rem; padding-bottom: .85rem;
    border-bottom: .5px solid var(--separatore);
}
.setaccio__campo { display: flex; align-items: center; gap: .45rem; font-size: 12px; }
.setaccio__campo > span { color: var(--testo-3); font-weight: 600; white-space: nowrap; }
.setaccio__esito { margin-left: auto; font-size: 12px; color: var(--testo-3); font-variant-numeric: tabular-nums; }

/*
 | L'elenco delle demo: un blocco solo, righe separate da un filo.
 |
 | Non più una griglia di tessere. Con quattro demo la griglia era piacevole;
 | con venti costringeva a percorrere lo schermo in due direzioni per leggere
 | quattro numeri, e l'anteprima grande prendeva lo spazio che serviva alle
 | informazioni. In colonna i valori si incolonnano fra loro: due date, due
 | pesi, due stati si confrontano con lo sguardo fermo.
 |
 | Il contorno e l'ombra stanno sul contenitore e non sulle righe: è un oggetto
 | solo, come un elenco di sistema, e non venti schede appoggiate una sotto
 | l'altra.
 */
.elenco-demo {
    background: var(--superficie);
    border: .5px solid var(--vetro-orlo);
    border-radius: var(--r-grande);
    box-shadow: var(--ombra-1);
    overflow: hidden;
}
.elenco-demo > .vuoto { padding: 2.5rem 1rem; }

/* --- le demo divise per autore (solo per il proprietario) --------------- */

/* Lo spazio fra un gruppo e l'altro: basta a separarli, e con i gruppi chiusi
   non lascia una colonna di intestazioni sperdute nel bianco. */
.gruppi { display: grid; gap: 1.1rem; }

/*
 | Il nome di chi le ha fatte è anche il comando che apre e chiude il gruppo.
 |
 | Prima era una fascia appiccicata in alto che scorreva con la pagina. Con
 | due autori era una gentilezza; con sei diventava una barra che si
 | sostituiva a un'altra a ogni scorrimento, e sopra un elenco già intestato
 | non aggiungeva niente. Adesso sta ferma al suo posto, arrotondata come le
 | altre superfici del pannello, e si chiude: chi amministra il lavoro di
 | cinque persone quasi sempre ne sta guardando una.
 */
.gruppo__titolo { margin: 0 0 .6rem; font-size: inherit; font-weight: inherit; }

.gruppo__capo {
    display: flex; align-items: center; gap: .55rem;
    width: 100%; padding: .6rem .85rem;
    background: var(--riempimento-3);
    border: .5px solid var(--separatore);
    border-radius: var(--r);
    cursor: pointer; text-align: left;
    transition: background .16s ease;
}
.gruppo__capo:hover { background: var(--riempimento-2); }
.gruppo__capo:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* La freccia guarda in giù quando il gruppo è aperto e a destra quando è
   chiuso: è il verso in cui si aprirebbe, non lo stato in cui si trova. */
.gruppo__freccia { display: grid; place-items: center; color: var(--testo-3); transition: transform .2s ease; }
.gruppo__freccia .icona { width: 13px; height: 13px; }
.gruppo__capo.is-chiuso .gruppo__freccia { transform: rotate(-90deg); }

.gruppo__nome {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 15px; font-weight: 650; color: var(--testo);
}
.gruppo__conto { flex: none; font-size: 13px; color: var(--testo-3); }

/* --- la riga di una demo ------------------------------------------------ */
/*
 | Tre colonne: l'anteprima, quello che c'è da leggere, i comandi. Le prime due
 | sono anche il bersaglio per aprire — sono la parte grande della riga, ed è
 | lì che va il dito.
 */
.riga-demo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    padding: .7rem .9rem;
    border-top: .5px solid var(--separatore);
    transition: background .16s ease;
}
.riga-demo:first-child { border-top: 0; }
.riga-demo:hover { background: var(--riempimento-3); }

/*
 | Lo stemma della demo: la sua icona, come su una schermata di applicazioni.
 |
 | Al suo posto c'era l'anteprima dal vivo, un iframe con dentro il sito
 | rimpicciolito. Se n'è andata per due motivi, e il secondo pesa più del
 | primo: apriva dieci siti interi a ogni visita al cruscotto, e — stando sulla
 | stessa origine del pannello — permetteva al codice di una demo di leggere la
 | pagina che lo ospitava.
 |
 | Quadrato con gli angoli smussati, come un'icona di applicazione, e un filo
 | di contorno che la stacca dal fondo anche quando l'icona è bianca.
 */
.riga-demo__stemma {
    flex: none;
    width: 52px; height: 52px; padding: 5px;
    display: grid; place-items: center;
    cursor: pointer; overflow: hidden;
    border-radius: 13px;
    background: var(--superficie-2, var(--riempimento-3));
    border: .5px solid var(--separatore);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s var(--molla);
}
.riga-demo__stemma:hover { border-color: var(--grigio-3); box-shadow: var(--ombra-1); transform: scale(1.04); }
.riga-demo__stemma:active { transform: scale(.97); }
.riga-demo__stemma img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}

/* Quando l'icona è quella del pannello — cioè la demo non ne ha una sua — si
   tiene più sommessa: dice «non c'è», e non deve sembrare un marchio. */
.riga-demo__stemma.is-ripiego { background: var(--riempimento-3); }
.riga-demo__stemma.is-ripiego img { opacity: .45; }

/* Una demo ritirata si vede a colpo d'occhio: il suo stemma perde il colore. */
.riga-demo.is-ritirata .riga-demo__stemma img { filter: grayscale(1); opacity: .45; }

.riga-demo__corpo { display: grid; gap: .15rem; min-width: 0; }
.riga-demo__testa { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; }

.riga-demo__nome {
    background: none; border: 0; padding: 0; cursor: pointer;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 16px; font-weight: 600; letter-spacing: -.01em;
    color: var(--testo); text-align: left;
    transition: color .16s ease;
}
.riga-demo__nome:hover { color: var(--blu); }

/* I dati in riga, con le cifre a larghezza fissa: è quello che permette di
   confrontare due righe senza leggerle davvero. */
.riga-demo__dati {
    display: flex; flex-wrap: wrap; gap: .05rem .7rem;
    font-size: 12px; color: var(--testo-3);
    font-variant-numeric: tabular-nums;
}
.riga-demo__indirizzo {
    color: var(--blu); text-decoration: none;
    max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.riga-demo__indirizzo:hover { text-decoration: underline; }
.riga-demo__indirizzo.is-spento { color: var(--testo-3); text-decoration: line-through; }

.riga-demo__coda { display: flex; align-items: center; gap: .55rem; flex: none; }
.riga-demo .voce__azioni { min-height: 34px; }
.riga-demo:hover .voce__azioni { opacity: 1; }

/* ------------------------------------------------------- interruttore --- */
/* Le misure sono quelle di sistema: pista 51x31, pomello 27, corsa 20. */
.interruttore { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; }
.interruttore input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruttore__pista {
    position: relative; flex: 0 0 51px;
    width: 51px; height: 31px; border-radius: var(--capsula);
    background: var(--grigio-4);
    transition: background .28s var(--molla);
}
.interruttore__pomello {
    position: absolute; top: 2px; left: 2px;
    width: 27px; height: 27px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16);
    transition: transform .28s var(--molla);
}
.interruttore input:checked + .interruttore__pista { background: #34C759; }
.interruttore input:checked + .interruttore__pista .interruttore__pomello { transform: translateX(20px); }
.interruttore input:focus-visible + .interruttore__pista { outline: 3px solid rgba(0,122,255,.5); outline-offset: 3px; }
.interruttore input:disabled + .interruttore__pista { opacity: .5; }
.interruttore__etichetta { font-size: 13px; font-weight: 500; color: var(--testo-2); }
.interruttore input:checked ~ .interruttore__etichetta { color: var(--testo); }

/*
 | L'interruttore in formato ridotto, per le righe dell'elenco.
 |
 | Stesse proporzioni di quello di sistema, tolto un quarto: in una riga alta
 | una sessantina di punti, quello grande sarebbe stato l'elemento più
 | appariscente dello schermo pur essendo uno fra i venti uguali.
 */
.interruttore--piccolo .interruttore__pista { flex: 0 0 38px; width: 38px; height: 23px; }
.interruttore--piccolo .interruttore__pomello { width: 19px; height: 19px; }
.interruttore--piccolo input:checked + .interruttore__pista .interruttore__pomello { transform: translateX(15px); }

/* Una fila di comandi piccoli, uno accanto all'altro: la usano l'ispettore
   dell'editor visuale e le tabelle. Si chiamava «tessera__azioni» quando le
   demo erano tessere; le tessere non ci sono più, il nome sì. */
.fila-azioni { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }

/* Chi vede la demo: riga da amministratore, quindi tono sommesso. Sta sotto i
   dati, dove l'occhio la trova senza cercarla ma non compete con il nome. */
.riga-demo__vista { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: 11px; margin-top: .1rem; }
.riga-demo__vista-capo { color: var(--testo-3); font-weight: 600; margin-right: .1rem; }
.riga-demo__vista-nessuno { color: var(--testo-3); font-style: italic; }

/* --- schermo stretto ---------------------------------------------------- */
/*
 | I comandi scendono su una riga loro, a tutta larghezza.
 |
 | Affiancarli al testo su un telefono voleva dire lasciare al nome della demo
 | una cinquantina di punti: il nome andava in puntini di sospensione proprio
 | nel posto in cui serve leggerlo.
 */
@media (max-width: 700px) {
    .riga-demo {
        grid-template-columns: auto minmax(0, 1fr);
        gap: .5rem .75rem;
        padding: .75rem .8rem;
    }
    .riga-demo__stemma { width: 44px; height: 44px; border-radius: 11px; }
    .riga-demo__coda {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: .55rem;
        border-top: .5px solid var(--separatore);
    }
    .riga-demo__indirizzo { max-width: 100%; }
}

/* ---------------------------------------------------- riga con azioni --- */
/*
 | Ogni voce dell'albero è una riga con tre bersagli: la casella, che la segna;
 | il nome, che apre; e il «⋮», che porta alle azioni. Nella colonna stretta
 | del fianco una fila di icone per riga diventerebbe illeggibile e col dito si
 | sbaglierebbe mira, quindi le azioni stanno in un menu.
 |
 | Il «⋮» si vede SEMPRE. Prima compariva solo passandoci sopra: sul telefono
 | era visibile — lì il passaggio non esiste e c'era una regola apposta — ma su
 | un computer restava invisibile finché il puntatore non ci finiva per caso, e
 | chi guardava la colonna non aveva modo di sapere che quelle azioni ci
 | fossero. Un comando che si mostra solo a chi già lo conosce non è un
 | comando. Ora è sempre lì in grigio tenue e si accende al passaggio, che è
 | quanto basta per non fare rumore su venti righe.
 */
.voce__riga { display: flex; align-items: stretch; gap: 2px; }
.voce__riga > .voce { flex: 1; min-width: 0; }

.voce__azioni {
    flex: none; width: 30px;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: var(--r-piccolo);
    color: var(--testo-3); font-size: 15px; line-height: 1; cursor: pointer;
    opacity: .6; transition: opacity .16s ease, background .16s ease, color .16s ease;
}
.voce__riga:hover .voce__azioni { opacity: 1; }
.voce__azioni:hover { background: var(--riempimento-2); color: var(--testo); }
.voce__azioni:focus-visible { opacity: 1; outline: 2px solid var(--blu); outline-offset: -2px; }

/* ------------------------------------------------ selezione di più voci - */
/*
 | La casella di selezione.
 |
 | Sta fuori dal pulsante che apre il file e non dentro: sono due gesti
 | diversi sulla stessa riga, e uno dentro l'altro vorrebbe dire aprire un file
 | ogni volta che lo si vuole soltanto segnare.
 */
.voce__spunta {
    flex: none; align-self: center;
    width: 15px; height: 15px; margin: 0 1px 0 3px;
    accent-color: var(--blu); cursor: pointer;
}

/*
 | La barra della selezione compare solo quando c'è qualcosa di segnato, e sta
 | sopra l'albero: parla dell'elenco qui sotto, mentre in fondo alla colonna
 | finirebbe accanto a «Nuovo file» e «Carica», che con la selezione non
 | c'entrano.
 */
.selezione {
    display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
    padding: .5rem .6rem;
    background: var(--riempimento-3);
    border-bottom: .5px solid var(--separatore);
}
/* Serve perché la regola qui sopra dà un display esplicito, che senza questa
   batterebbe il «display: none» che il browser associa a hidden. */
.selezione[hidden] { display: none; }
.selezione__conto {
    flex: 1 1 auto; min-width: 0;
    font-size: 12px; font-weight: 600; color: var(--testo-2);
}

/* ================================================================ albero = */
.albero { display: grid; gap: 2px; font-size: 14px; }
.voce {
    display: flex; align-items: center; gap: .5rem;
    min-height: 34px; padding: .3rem .55rem;
    border-radius: var(--r-piccolo); cursor: pointer;
    color: var(--testo-2); background: none; border: none;
    text-align: left; width: 100%;
    transition: background .16s ease, color .16s ease;
}
.voce:hover { background: var(--riempimento-3); color: var(--testo); }
.voce.is-attiva { background: var(--blu); color: #fff; font-weight: 600; }
.voce.is-attiva .voce__peso, .voce.is-attiva .voce__icona { color: rgba(255,255,255,.8); }
.voce__icona { flex: 0 0 16px; color: var(--grigio); font-size: 12px; }
/* Nel gestore dei file l'icona della riga è un disegno e non un carattere:
   va centrata nei sedici punti che le spettano. */
.voce__icona .icona { width: 14px; height: 14px; display: block; margin: 0 auto; }
.voce__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce__peso { font-size: 11px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.voce--cartella > .voce__nome { font-weight: 600; color: var(--testo); }
.ramo { margin-left: .55rem; padding-left: .55rem; border-left: 1px solid var(--separatore); display: grid; gap: 2px; }

/* ============================================================ immagine === */
/*
 | La schermata di un'immagine.
 |
 | Il fondo a quadretti non è un vezzo: su fondo bianco un png con lo sfondo
 | trasparente e uno con lo sfondo bianco si vedono uguali, e sono due file
 | diversi — uno si può mettere ovunque, l'altro funziona solo sul bianco.
 | Coi quadretti la differenza si vede subito.
 |
 | L'immagine non viene mai ingrandita oltre la sua misura vera: una favicon
 | da sedici pixel stirata a tutto schermo sarebbe una macchia, e direbbe di
 | quel file qualcosa che non è.
 */
.immagine { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

.immagine__scacchi {
    flex: 1; min-height: 0; overflow: auto;
    display: grid; place-items: center;
    padding: clamp(.75rem, 3vw, 2rem);
    background-color: var(--superficie);
    background-image:
        linear-gradient(45deg,  var(--grigio-6) 25%, transparent 25%),
        linear-gradient(-45deg, var(--grigio-6) 25%, transparent 25%),
        linear-gradient(45deg,  transparent 75%, var(--grigio-6) 75%),
        linear-gradient(-45deg, transparent 75%, var(--grigio-6) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.immagine__vera {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: var(--r-piccolo);
    box-shadow: var(--ombra-1);
}

.immagine__pie {
    flex: none;
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    padding: .6rem .85rem;
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
    border-top: .5px solid var(--separatore);
    background: var(--vetro-sottile);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    font-size: 13px;
}
.immagine__nome {
    flex: 1 1 auto; min-width: 0;
    font-weight: 600; color: var(--testo);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.immagine__dato { color: var(--testo-3); font-variant-numeric: tabular-nums; }

/* ============================================================== editor === */
/* Il codice sta su fondo pieno: sotto il testo la traslucenza fa solo danni. */
.editor { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); height: 100%; min-height: 0; min-width: 0; background: var(--superficie); }
.editor__righe {
    padding: .85rem .55rem .85rem 0; text-align: right;
    font-family: var(--mono); font-size: 13px; line-height: 1.6;
    color: var(--testo-4); background: var(--superficie-2);
    border-right: .5px solid var(--separatore);
    overflow: hidden; user-select: none; font-variant-numeric: tabular-nums;
    /*
     | I numeri arrivano come un testo solo, «1\n2\n3».
     |
     | Senza questa riga gli a capo valevano come spazi — è così che si
     | comporta un div qualunque — e i numeri si accodavano l'uno all'altro
     | andando a capo dove capitava: la colonna sembrava numerata a caso e
     | nessun numero stava davvero accanto alla sua riga. La textarea
     | accanto non ha il problema perché il testo dentro un campo va a capo
     | dove c'è scritto.
     */
    white-space: pre;
}
.editor__area {
    width: 100%; height: 100%; min-width: 0;
    padding: .85rem 1rem;
    font-family: var(--mono); font-size: 13px; line-height: 1.6;
    background: var(--superficie); color: #24292F;
    border: none; outline: none; resize: none;
    tab-size: 4; white-space: pre; overflow: auto;
}

/*
 | Un campo non allarga la finestra oltre lo schermo.
 |
 | Un campo di testo ha una larghezza minima sua — venti caratteri, per
 | difetto — e il contenitore si allarga fino a contenerla: con dentro un
 | indirizzo lungo, su un telefono la finestra usciva dal bordo e il campo
 | finiva mezzo fuori. Con min-width azzerato il campo sta nello spazio che
 | ha e il testo gli scorre dentro, che è quello che ci si aspetta.
 */
.campo input, .campo select { min-width: 0; }

/* ============================================================ anteprima = */
.anteprima { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--grigio-6); }
.anteprima__barra {
    display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem;
    border-bottom: .5px solid var(--separatore);
    background: var(--vetro-sottile);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
}
.misura-schermo {
    display: flex; gap: 2px; padding: 2px;
    background: var(--riempimento-2); border-radius: var(--capsula);
}
.misura-schermo .bottone { background: transparent; box-shadow: none; border-color: transparent; color: var(--testo-2); }
.misura-schermo .bottone.is-attiva { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-1); font-weight: 600; }

.anteprima__scatola {
    flex: 1; min-height: 0;
    display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
    overflow: hidden; padding: 0;
}
.anteprima__telaio { border: none; width: 100%; height: 100%; background: #fff; display: block; }

/* Modalità telefono: si simula un iPhone 16, 393x852 punti.
 *
 * Le misure sono FISSE, e a rimpicciolire è una scala applicata dopo. È tutta
 * la differenza: restringendo l'iframe per farlo entrare nello spazio, la
 * pagina dentro crede di stare su uno schermo da duecentocinquanta punti e si
 * dispone come non farebbe su nessun telefono vero — sembra a bassa
 * risoluzione, ma in realtà è un telefono che non esiste.
 *
 * La scocca è disegnata con ombre esterne e non con un bordo: un bordo
 * ruberebbe spazio al viewport e falserebbe di nuovo la misura. */
.anteprima__scatola.is-stretto {
    place-items: center; padding: 1.25rem; overflow: hidden;
    background:
        radial-gradient(700px 380px at 50% 0%, rgba(0,122,255,.12), transparent 65%),
        var(--grigio-6);
}
.anteprima__scatola.is-stretto .anteprima__telaio {
    width: var(--tel-largo, 393px);
    height: var(--tel-alto, 852px);
    max-width: none; max-height: none;
    transform: scale(var(--scala-tel, 1));
    transform-origin: center center;
    border-radius: 47px;
    box-shadow:
        0 0 0 11px #1C1C1E,
        0 0 0 12px rgba(255, 255, 255, .35),
        0 30px 70px rgba(0, 0, 0, .28);
}

/* ============================================================ ispettore = */
.ispettore {
    display: flex; flex-direction: column;
    background: var(--vetro-sottile);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border-left: .5px solid var(--separatore);
}
.ispettore__corpo {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: .85rem; display: grid; gap: 1.1rem; align-content: start;
}
.ispettore__vuoto { color: var(--testo-3); font-size: 14px; padding: .5rem; }

/* Ogni gruppo di controlli è una carta bianca: è il modo in cui iOS raggruppa
   le impostazioni, e qui aiuta a capire dove finisce una sezione. */
.gruppo {
    display: grid; gap: .55rem; min-width: 0;
    padding: .8rem;
    background: var(--superficie);
    border: .5px solid var(--vetro-orlo);
    border-radius: var(--r);
    box-shadow: var(--ombra-1);
}
.gruppo > h3 { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--testo-3); }
.coppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.mini { display: grid; gap: .2rem; min-width: 0; }
.mini > span { font-size: 11px; color: var(--testo-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini input, .mini select {
    width: 100%; min-width: 0; max-width: 100%;
    min-height: 34px; padding: .3rem .5rem; font-size: 13px;
    background: var(--superficie); color: var(--testo);
    border: .5px solid var(--separatore-pieno); border-radius: var(--r-piccolo);
}
.mini input:focus, .mini select:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(0,122,255,.16); }
.mini input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
.ispettore textarea {
    width: 100%; min-width: 0; resize: vertical; min-height: 76px;
    padding: .5rem .6rem; font-size: 13px; line-height: 1.5;
    background: var(--superficie); border: .5px solid var(--separatore-pieno); border-radius: var(--r-piccolo);
}
.ispettore .fila-azioni { flex-wrap: wrap; }
.bersaglio {
    font-family: var(--mono); font-size: 12px; color: var(--viola);
    background: var(--riempimento-3); border-radius: var(--r-piccolo);
    padding: .45rem .55rem; overflow-wrap: anywhere;
}

/* ============================================================== versioni = */
.versioni { padding: 1.25rem; display: grid; gap: .5rem; align-content: start; }
.versione {
    display: flex; align-items: center; gap: .75rem;
    min-height: 52px; padding: .6rem .9rem;
    background: var(--superficie); border: .5px solid var(--vetro-orlo);
    border-radius: var(--r); box-shadow: var(--ombra-1);
}
.versione { align-items: flex-start; }
.versione__quando {
    flex: 1; min-width: 0;
    font-variant-numeric: tabular-nums; font-weight: 500;
}
/* Che cosa è stato fatto subito dopo questa copia: sotto la data, più
   piccolo, perché la data resta il modo con cui si riconosce la riga e la
   descrizione serve a decidere se è quella giusta. */
.versione__cosa {
    display: block; margin-top: .1rem;
    font-size: 12px; font-weight: 400; color: var(--testo-3);
    font-variant-numeric: normal;
}
.versione__peso { color: var(--testo-3); font-size: 13px; padding-top: .15rem; }
.versione__spazio { flex: 1; }

/* ================================================================ tabella */
.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th, .tabella td { padding: .6rem .7rem; border-bottom: .5px solid var(--separatore); text-align: left; vertical-align: middle; }
.tabella th { color: var(--testo-3); font-weight: 600; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.tabella td.mono { font-family: var(--mono); font-size: 12px; color: var(--testo-2); }
tr.is-sospeso td { opacity: .5; }
.tabella td .fila-azioni { margin: 0; flex-wrap: nowrap; }

/* ---------------------------------------------- tabella che si apre ---- */
/*
 | Cinque colonne su un telefono non ci stanno in nessun modo: o si scorre di
 | lato per leggere una riga, o si tagliano le colonne e l'informazione si
 | perde. Qui la tabella si APRE: ogni riga diventa una scheda e ogni cella si
 | porta dietro il nome della sua colonna, letto dall'attributo che il codice
 | le ha messo. Nessun dato viene nascosto.
 |
 | Vale solo per le tabelle marcate: quella degli utenti ha dentro comandi e
 | menu, e va lasciata a scorrere per conto suo.
 */
@media (max-width: 720px) {
    .tabella--schede thead { display: none; }

    .tabella--schede,
    .tabella--schede tbody,
    .tabella--schede tr,
    .tabella--schede td { display: block; width: 100%; }

    .tabella--schede tr {
        padding: .75rem 0;
        border-bottom: .5px solid var(--separatore);
    }
    .tabella--schede tr:last-child { border-bottom: 0; }

    .tabella--schede td {
        border: 0; padding: .1rem 0;
        display: flex; gap: .5rem; align-items: baseline;
    }
    .tabella--schede td::before {
        content: attr(data-voce);
        flex: none; width: 5.5rem;
        font-size: 11px; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; color: var(--testo-3);
    }

    /* Una voce senza contenuto è rumore: la riga sparisce del tutto. */
    .tabella--schede td.is-vuota { display: none; }

    /* L'azione è il perno della riga: si legge per prima. */
    .tabella--schede td.registro__azione { font-weight: 600; }

    /* Aperta a schede, la tabella non è più larga di niente. */
    .tavolo { overflow-x: visible; }
}

/* ============================================================== avvisi === */
.brindisi { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); display: grid; gap: .5rem; z-index: 60; pointer-events: none; }
.brindisi > div {
    padding: .7rem 1.1rem;
    background: var(--vetro-spesso);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border: .5px solid var(--vetro-orlo);
    border-radius: var(--capsula);
    box-shadow: inset 0 .5px 0 var(--vetro-bordo), var(--ombra-2);
    font-size: 14px; font-weight: 500;
    animation: sale .32s var(--molla);
}
@keyframes sale { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.brindisi .is-errore { color: var(--rosso); }
.brindisi .is-buono { color: #1E8E3E; }

/* ============================================================== finestra = */
.velo {
    position: fixed; inset: 0; z-index: 70;
    background: var(--velatura);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    display: grid; place-items: center;
    /* Il margine tiene conto della tacca e della barra di casa: su iPhone una
       finestra alta arrivava sotto la riga scura in fondo, e l'ultimo comando
       finiva dove il dito apre il selettore delle app invece di premerlo. */
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    animation: comparsa .2s ease;
}
@keyframes comparsa { from { opacity: 0; } to { opacity: 1; } }
.finestra {
    width: 100%; max-width: 27rem;
    /*
     | Una finestra più alta dello schermo deve scorrere.
     |
     | Prima ce l'aveva solo la variante larga — registro, utenti — e le altre
     | si affidavano al fatto di essere corte. Su un telefono non lo sono: una
     | finestra con diversi campi finisce sotto il bordo dello schermo, e con
     | lei i tasti che stanno in fondo, senza nessun modo di arrivarci. Il
     | velo dietro è fisso e non scorre, quindi non c'era nemmeno un ripiego.
     |
     | L'intestazione appiccicata continua a funzionare: qui dentro è questa
     | la scatola che scorre.
     */
    /* Il tetto sconta anche la tacca e la barra di casa, che il velo qui sopra
       aggiunge al proprio riempimento: senza, su iPhone la finestra alta
       sarebbe cresciuta di quei punti e il fondo sarebbe uscito dallo schermo. */
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--vetro-spesso);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border: .5px solid var(--vetro-orlo);
    border-radius: var(--r-foglio);
    /*
     | Niente riempimento in cima.
     |
     | Lo spazio sopra lo mette chi sta per primo dentro la finestra:
     | l'intestazione appiccicata ha il suo, e le finestre che cominciano
     | direttamente con il titolo se lo prendono con la regola qui sotto.
     | Averlo sulla finestra voleva dire sommarlo a quello dell'intestazione
     | ogni volta che c'era, e toglierlo da lì con un margine negativo —
     | due misure da tenere allineate a mano per ottenere zero.
     */
    padding: 0 1.4rem 1.4rem; display: grid; gap: .85rem;
    box-shadow: inset 0 .5px 0 var(--vetro-bordo), var(--ombra-3);
    animation: sale .32s var(--molla);
}
/* Le finestre senza intestazione appiccicata: il primo elemento si stacca da
   solo dal bordo, con la stessa misura dei lati. */
.finestra > :first-child:not(.finestra__capo) { margin-top: 1.4rem; }
.finestra h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.finestra p { color: var(--testo-2); font-size: 14px; }
/* I titoli e i testi delle finestre portano spesso un nome di file o un
   indirizzo, che non ha spazi dove spezzarsi: senza questa riga allargano la
   finestra oltre lo schermo invece di andare a capo. */
.finestra h2, .finestra p { overflow-wrap: break-word; min-width: 0; }
.finestra__azioni { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .25rem; }
.finestra--larga { max-width: 56rem; max-height: 84vh; overflow: auto; }

/* ------------------------------------------------- intestazione e croce - */
/*
 | Il titolo e la X restano attaccati in alto mentre il contenuto scorre.
 |
 | Serve alle finestre lunghe — il registro, gli utenti — dove prima per
 | uscire bisognava scorrere fino all'ultima riga a cercare «Chiudi». Su un
 | telefono erano decine di scorrimenti per annullare un gesto magari partito
 | per sbaglio: la via d'uscita deve stare sempre dove si può raggiungere.
 |
 | I margini negativi servono a far uscire l'intestazione dal riempimento
 | della finestra, così la striscia appiccicata copre tutta la larghezza e non
 | lascia vedere il testo che le scorre di fianco.
 */
.finestra__capo {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: .6rem;
    margin: 0 -1.4rem .1rem;
    padding: 1.1rem 1.4rem .8rem;
    background: var(--vetro-spesso);
    -webkit-backdrop-filter: var(--sfoca);
    backdrop-filter: var(--sfoca);
    border-bottom: .5px solid var(--separatore);
    border-radius: var(--r-foglio) var(--r-foglio) 0 0;
}
.finestra__capo h2 { flex: 1; min-width: 0; }

.finestra__chiudi {
    flex: none;
    /* Quarantaquattro punti: è la misura minima delle linee guida Apple per
       qualunque cosa si tocchi col dito, e una croce piccola è il bersaglio
       che si manca più spesso. */
    width: 44px; height: 44px; margin: -.35rem -.5rem -.35rem 0;
    display: grid; place-items: center;
    background: transparent; border: 0; border-radius: 50%;
    font-size: 24px; line-height: 1; color: var(--testo-3);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.finestra__chiudi:hover { background: var(--riempimento-2); color: var(--testo); }
.finestra__chiudi:active { transform: scale(.92); }
.finestra__chiudi:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }

/* Una tabella larga scorre dentro il proprio riquadro, non trascina la
   finestra intera. */
.tavolo { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.vuoto { padding: 2.5rem 1rem; text-align: center; color: var(--testo-3); }

/* Una nota che segnala un ostacolo, non un dato: stesso posto, colore diverso.
   Serve alla finestra di caricamento, quando un file supera il limite del
   server e conviene dirlo prima di partire invece che dopo il viaggio. */
.is-guaio { color: var(--rosso); font-weight: 500; }

/* =============================================================== pillole = */
.pillola {
    font-size: 11px; font-weight: 600; padding: .15rem .5rem;
    border-radius: var(--capsula);
    background: var(--riempimento-2); color: var(--testo-2);
    white-space: nowrap;
}
.pillola--php  { background: rgba(255,149,0,.16); color: #B36A00; }
.pillola--html { background: rgba(52,199,89,.18); color: #1E8E3E; }
.pillola--proprietario { background: rgba(255,149,0,.16); color: #B36A00; }
.pillola--redattore    { background: rgba(0,122,255,.14); color: var(--blu-cupo); }
.pillola--osservatore  { background: var(--riempimento-2); color: var(--testo-2); }
.pillola--sospeso      { background: rgba(255,59,48,.14); color: #C4271E; }

.mini-scelta {
    min-height: 34px; padding: .3rem .5rem; font-size: 13px;
    background: var(--superficie); border: .5px solid var(--separatore-pieno); border-radius: var(--r-piccolo);
}
.legenda { margin-top: 1rem; display: grid; gap: .35rem; font-size: 13px; color: var(--testo-3); }
.legenda b { color: var(--testo-2); }

/* ======================================================== scelta delle demo */
/* L'etichetta avvolge il segno di spunta: si può cliccare anche il nome, che
   allarga l'area toccabile a tutta la riga senza aggiungere niente a schermo. */
.spunta { display: flex; align-items: center; gap: .6rem; font-size: 14px; cursor: pointer; }
.spunta input { width: 16px; height: 16px; flex: none; accent-color: var(--blu); cursor: pointer; }
.spunta__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le demo create dall'utente: spuntate e bloccate, perché sue di nascita. Il
   segno resta leggibile invece di sbiadire come un controllo disattivato
   qualunque: non è un comando spento per errore, è un fatto. */
.spunta--sua { cursor: default; }
.spunta--sua input { opacity: .75; cursor: default; }
.pillola--sua { background: rgba(52,199,89,.18); color: #1E8E3E; }

.spunte {
    display: grid; gap: .1rem;
    max-height: 15rem; overflow: auto;
    padding: .55rem .7rem;
    /* Superficie piena, non vetro: qui si legge un elenco di nomi. */
    background: var(--superficie-2);
    border: .5px solid var(--separatore-pieno);
    border-radius: var(--r-piccolo);
}
.spunte .spunta { padding: .3rem 0; }
.spunte .vuoto { padding: 1rem; }

/* ============================================================ produzione = */
/*
 | Il collegamento con l'hosting dove vive il sito vero.
 |
 | Nella riga è una pillola, e il comando sta nel menu del «⋯»: è una cosa che
 | si imposta una volta e poi si usa da dentro la demo, non un comando da
 | mettere in evidenza accanto ad «Apri».
 */
.pillola--produzione { background: rgba(0,122,255,.14); color: #0A5FC2; }
.pillola--dati { background: rgba(255,149,0,.16); color: #B36A00; }

/* Il tasto FTP quando un collegamento c'è già: un filo di colore, non un
   pulsante pieno, perché resta un comando di servizio. */
.bottone--ftp { border-color: rgba(0,122,255,.45); color: #0A5FC2; font-weight: 600; }

.produzione__modulo { display: grid; gap: .9rem; }

/*
 | I campi del collegamento, tutti della stessa forma.
 |
 | «align-items: start» e un'etichetta che non va mai a capo: sono le due righe
 | che tengono le caselle sulla stessa linea. Senza la prima, un campo più alto
 | stira i vicini; senza la seconda, basta una finestra un po' stretta perché
 | «Indirizzo pubblico» occupi due righe e spinga la sua casella più in basso
 | di quella accanto.
 */
.produzione__griglia {
    display: grid; gap: .85rem 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: start;
}
.produzione__griglia .campo > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* L'interruttore dell'FTPS sta su una riga sua, con il suo respiro: è una
   scelta di sicurezza e non deve sembrare l'ultimo campo del modulo. */
.interruttore--riga { padding: .3rem 0; }

.produzione__esito { font-size: 13px; color: var(--testo-3); min-height: 1.2em; }
.produzione__esito.is-bene { color: #1E8E3E; }
.produzione__esito.is-male { color: var(--rosso); }

/* ================================================== gestore dei file FTP = */
/*
 | Due colonne affiancate: la demo e l'hosting.
 |
 | Ognuna scorre per conto suo e resta alta quanto l'area centrale, perché il
 | confronto fra le due sponde è tutto il senso di questa schermata: se
 | scorresse la pagina intera, guardando il fondo di una si perderebbe di vista
 | l'altra.
 */
.ponte { display: flex; flex-direction: column; min-height: 0; }

.ponte__vani {
    flex: 1; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.vano {
    display: flex; flex-direction: column; min-height: 0; min-width: 0;
    border-right: .5px solid var(--separatore);
}
.vano:last-child { border-right: 0; }

.vano__capo {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    padding: .6rem .8rem .35rem;
}
.vano__titolo {
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--testo-3);
}
.vano__dove { flex: 1; min-width: 0; overflow: hidden; }

/* Le briciole di pane: dove si è, e con un tocco si risale. Non vanno a capo —
   su un percorso lungo scorrono di lato, come la barra di un browser. */
.briciole {
    display: flex; align-items: center; gap: .15rem;
    overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.briciole::-webkit-scrollbar { display: none; }
.briciola {
    background: none; border: 0; padding: .1rem .25rem; cursor: pointer;
    font-size: 13px; color: var(--testo-2); border-radius: var(--r-piccolo);
    max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.briciola:hover { background: var(--riempimento-3); color: var(--testo); }
.briciola:last-child { color: var(--testo); font-weight: 600; }
.briciola__sbarra { color: var(--testo-3); font-size: 12px; }

.vano__comandi {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    padding: 0 .8rem .5rem;
    border-bottom: .5px solid var(--separatore);
}

.vano__corpo {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: .45rem;
    scrollbar-width: thin; scrollbar-color: var(--grigio-3) transparent;
    transition: background .16s ease, box-shadow .16s ease;
}
.vano__corpo::-webkit-scrollbar { width: 11px; }
.vano__corpo::-webkit-scrollbar-thumb {
    background: var(--grigio-3); border-radius: var(--capsula);
    border: 3px solid transparent; background-clip: content-box;
}

.vano__pie {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .8rem;
    padding-bottom: max(.6rem, env(safe-area-inset-bottom));
    border-top: .5px solid var(--separatore);
    background: var(--vetro-sottile);
}
.vano__conto { flex: 1; min-width: 0; font-size: 12px; color: var(--testo-3); }
.vano__pie .bottone { flex: none; }

/* --- il trascinamento ---------------------------------------------------
 | Chi trascina sbiadisce, il bersaglio si accende. Sono gli unici due segnali
 | che il browser non dà da solo, e senza di essi lasciare la presa nel posto
 | giusto diventa un tiro a indovinare.
 |
 | Su un dispositivo a tocco tutto questo non esiste — il trascinamento HTML5
 | non parte — e infatti non è l'unico modo di spostare: le spunte più il
 | pulsante in fondo fanno esattamente la stessa cosa, e sono lì anche su
 | desktop per chi preferisce lavorare così.
 */
.voce__riga--ponte { border-radius: var(--r-piccolo); }
.voce__riga--ponte.is-trascinata { opacity: .45; }
.voce__riga--ponte.is-bersaglio {
    background: rgba(0,122,255,.12);
    box-shadow: inset 0 0 0 2px var(--blu);
}
.vano__corpo.is-bersaglio {
    background: rgba(0,122,255,.06);
    box-shadow: inset 0 0 0 2px var(--blu);
}
.voce__riga--ponte .pillola { flex: none; }

/* La data dell'ultima modifica, accanto al peso. Cifre a larghezza fissa, così
   una colonna di date resta incolonnata invece di ballare riga per riga. */
.voce__data {
    flex: none;
    font-size: 11px; color: var(--testo-3);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.voce.is-attiva .voce__data { color: rgba(255,255,255,.8); }

/* Sotto una certa larghezza il nome del file conta più della data: la seconda
   se ne va, e resta nel titolo della riga per chi la cerca. */
@media (max-width: 380px) {
    .voce__data { display: none; }
}

/* --- una colonna per volta, su schermo stretto -------------------------- */
.ponte__scelta { display: none; }

@media (max-width: 760px) {
    .ponte__scelta {
        display: flex; gap: .2rem; padding: .45rem .5rem;
        border-bottom: .5px solid var(--separatore);
    }
    .ponte__scelta .scheda { flex: 1; }

    .ponte__vani { grid-template-columns: minmax(0, 1fr); }
    .ponte.is-demo .vano--host { display: none; }
    .ponte.is-host .vano--demo { display: none; }
    .vano { border-right: 0; }

    /* Il pulsante che sposta è la cosa che si cerca: a tutta larghezza, sotto
       il conteggio, invece che stretto in un angolo. */
    .vano__pie { flex-wrap: wrap; }
    .vano__pie .bottone { flex: 1 0 100%; }
}

/* ================================================== storico delle versioni */
.versioni__capo {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    margin-bottom: .25rem;
}
.versioni__capo .cruscotto__nota { flex: 1; min-width: 12rem; }
.versione__azioni { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }