/* ==========================================================================
   dt-ui — Design system Design Tessile ERP
   Stile: denso / professionale. Temi: light + dark via [data-theme].
   Tutti i moduli ERP devono usare SOLO queste variabili e classi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Tipografia */
  --dt-font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --dt-font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", ui-monospace, monospace;
  /* Il carattere della carta. Un foglio stampato non e' una schermata
     scolorita: l'intestazione di un documento si scrive con un grazie, che e'
     quello che distingue una carta da un tabulato. Lo usa solo la sezione 31,
     ma sta qui perche' e' un token come gli altri. */
  --dt-font-carta: Georgia, "Times New Roman", "Liberation Serif", serif;

  /* La scala e' salita di mezzo gradino su tutta la riga. Denso resta denso —
     una riga di tabella cresce di due pixel — ma il programma si legge in
     furgone, su un tablet appoggiato al cruscotto e con la luce di fuori, e
     lassu' i dieci pixel e mezzo delle scritte minute (l'indirizzo, l'orario
     dentro al blocco, la data in tabella) erano il primo pezzo di interfaccia
     a diventare una macchia grigia.
     Il rapporto fra i gradini e' rimasto quello: quello che era secondario si
     legge ancora come secondario.

     Stretta la finestra la scala sale, e sale scorrendo. Un telefono tenuto in
     mano sta a meta' della distanza di un monitor ma ha un quarto della sua
     larghezza: le stesse tredici unita' che in ufficio sono dense, lassu' sono
     piccole. Non c'e' una soglia in cui il testo diventa grande di colpo — la
     misura si interpola fra i 720px, dove resta quella dell'ufficio, e i 360px
     di un telefono stretto, dove e' un gradino e mezzo piu' su. Un gradino di
     mezzo, non due: quello che deve restare denso resta denso, e i rapporti
     fra i gradini non si toccano, cosi' il secondario si legge ancora come
     secondario.
     La pendenza e' la stessa per tutti (`- 0.56vw`), che e' l'unico modo per
     cui la scala si alza tutta insieme invece di stringersi a fisarmonica. */
  --dt-fs-xs: clamp(11px, 15px - 0.56vw, 12.5px);
  --dt-fs-sm: clamp(12px, 16px - 0.56vw, 13.5px);
  --dt-fs-md: clamp(13px, 17px - 0.56vw, 15px);     /* base ERP: denso ma leggibile */
  --dt-fs-lg: clamp(15px, 19px - 0.56vw, 17px);
  --dt-fs-xl: clamp(18px, 22px - 0.56vw, 20px);
  /* Le due misure grosse non salgono: sono i numeri dei riquadri e i titoli, e
     a ventitre pixel non erano piccoli nemmeno in furgone. Farli crescere
     sullo stretto vuol dire solo che due riquadri di numeri non ci stanno piu'
     affiancati — il contrario di quello che serve su un telefono. */
  --dt-fs-2xl: 23px;
  --dt-fs-3xl: 31px;

  --dt-lh-tight: 1.2;
  --dt-lh-normal: 1.45;

  --dt-fw-regular: 400;
  --dt-fw-medium: 500;
  --dt-fw-semibold: 600;
  --dt-fw-bold: 700;

  /* Spaziature (scala 2px, densa) */
  --dt-sp-0: 0px;
  --dt-sp-1: 2px;
  --dt-sp-2: 4px;
  --dt-sp-3: 6px;
  --dt-sp-4: 8px;
  --dt-sp-5: 12px;
  --dt-sp-6: 16px;
  --dt-sp-7: 20px;
  --dt-sp-8: 24px;
  --dt-sp-9: 32px;
  --dt-sp-10: 48px;

  /* Raggi.
     Tre gradini e non quattro sfumature: il quadretto (una casella di spunta,
     un campione di colore), la cosa che si preme o si scrive, e il riquadro
     che contiene le altre. Sono saliti di un pixel ciascuno perche' col corpo
     del testo cresciuto un raggio da tre pixel su una casella alta ventotto
     tornava a sembrare uno spigolo vivo. */
  --dt-r-xs: 2px;
  --dt-r-sm: 4px;
  --dt-r-md: 6px;
  --dt-r-lg: 10px;
  --dt-r-full: 999px;

  /* Altezze controlli — coerenza verticale su tutta la piattaforma */
  --dt-h-sm: 22px;
  --dt-h-md: 28px;
  --dt-h-lg: 34px;
  /* Fuori dall'ufficio si preme col pollice e senza mirare: i controlli che
     l'operatore usa in cantiere non stanno sulla scala densa, hanno la loro. */
  --dt-h-tocco: 40px;
  /* Quanto e' alto un tastino dentro alla barra di comandi di una riga. E' una
     misura sua e non `--dt-h-sm` perche' sul telefono passa al pollice mentre
     un bollino resta un bollino — e perche' la riga che lo contiene deve
     saperlo: sotto ai 560px e' la barra dei comandi, non il testo, a decidere
     quanto e' alta una riga d'elenco. Vedi `--dt-riga-h`. */
  --dt-h-comando: var(--dt-h-sm);

  /* Layout.
     Le misure che dipendono dalla finestra non saltano a una soglia: si
     interpolano. `clamp` tiene fermi un minimo e un massimo e in mezzo lascia
     scorrere la misura con la larghezza, cosi' fra uno stadio e l'altro del
     responsive non c'e' uno scatto ma una salita, e chi ridimensiona la
     finestra vede il disegno seguirlo invece di riassestarsi di colpo.
     Le soglie restano dove a cambiare e' la disposizione — una colonna che
     va sotto, una barra che passa in fondo: quello e' un altro disegno, non
     lo stesso piu' stretto. */
  --dt-sidebar-w: clamp(168px, 10vw + 40px, 208px);
  --dt-topbar-h: 40px;
  /* Respiro del corpo pagina e dei riquadri che lo riempiono. */
  --dt-pad-body: clamp(12px, 1.4vw, 20px);
  /* Il righello degli orari di una giornata: lo stesso numero dentro alla
     colonna e nell'asse comune alle tre colonne affiancate, se no gli orari
     non cadono sopra alle tacche delle tele. */
  --dt-asse-w: clamp(34px, 3vw, 44px);
  /* Il nome del giorno sopra a ogni colonna, quando sono piu' d'una. Lo sa
     anche l'avviso dei sovrapposti, che in quel caso gli sta sotto. */
  --dt-giorno-testa-h: 30px;
  /* Quanto e' alta una voce della barra bassa, e quindi la barra stessa. Un
     numero solo perche' non lo usa solo lei: quello che galleggia sopra alla
     pagina (gli avvisi) deve sapere dove finisce la barra per non finirci
     sotto, e due misure separate si scordano l'una dell'altra. */
  --dt-voce-h: 46px;
  /* Il respiro sopra e sotto alle voci, uguale sul tablet e sul telefono: la
     barra e' alta voce piu' due volte questo, e l'avviso che ci galleggia
     sopra lo conta con lo stesso numero. */
  --dt-barra-pad: var(--dt-sp-3);
  --dt-barra-bassa-h: calc(
    var(--dt-voce-h) + var(--dt-barra-pad) * 2 + env(safe-area-inset-bottom, 0px)
  );

  /* Il binario degli elenchi: riferimenti e catalogo.
     Una riga d'elenco comincia sempre con le stesse corsie, larghe uguali e
     sempre allo stesso posto: la maniglia da cui si prende, la freccia che
     apre, e — su una riga che non ha ne' l'una ne' l'altra — il vuoto che ne
     tiene la misura. Sono queste tre misure a incolonnare il bordo sinistro di
     tutte le righe di tutte le schermate: prima ogni riga se lo decideva da
     se', e due elenchi accanto non cominciavano nella stessa colonna.
     Il passo e' di quanto rientra un piano dell'albero, ed e' anche dove cade
     il filo che regge quel piano: mezza corsia dal bordo della riga sopra, cioe'
     sotto al segno da cui quel piano si e' aperto. */
  --dt-corsia: 22px;
  /* Quanto la corsia del segno sta staccata dal nome. Piu' del passo fra le
     corsie — che restano attaccate fra loro, sono due segni — perche' li'
     comincia la parte che si legge: sei pixel da tutte e due le parti facevano
     del segno la prima lettera del nome. Una misura sola, usata dalla voce e
     dalla tendina, se no i nomi delle due escono da colonne diverse. */
  --dt-corsia-testo: 10px;
  --dt-riga-x: var(--dt-sp-4);
  --dt-passo: calc(var(--dt-riga-x) + var(--dt-corsia) / 2);

  /* **Quanto e' alta una riga d'elenco. Una misura sola, in tutte le schede.**
     L'altezza se la decideva il contenuto: una riga col solo nome era alta
     quarantotto, una col nome e una scritta sotto quarantaquattro, e le
     attivita' — che sotto al nome ne hanno due — sessantadue. Tre passi
     diversi in tre linguette della stessa barra, e scorrendo da una all'altra
     l'elenco cambiava respiro senza che fosse cambiato niente di quello che
     c'era scritto.
     Qui il passo lo decide la misura, e il contenuto ci sta dentro: e' il nome
     piu' **una** riga di sottotitolo, e resta quello anche dove il sottotitolo
     non c'e' e dove ne servirebbero due (vedi `.dt-voce__sotti`, che le mette
     in fila invece che in colonna).
     Cresce col carattere invece di essere un numero fisso, perche' la scala
     tipografica sale stringendo la finestra: a un numero fisso il testo di un
     telefono sfonderebbe la riga proprio dove la riga conta di piu'. Il pixel
     in piu' e' per gli arrotondamenti del motore, che tira su la riga di testo
     al centesimo: senza, una riga poteva restare piu' alta delle altre di
     mezzo capello.
     I tre numeri fra cui sceglie sono le tre cose che una riga contiene: il
     pollice (`--dt-h-tocco`, il pavimento: sotto quello non si scende), quello
     che c'e' scritto, e la barra dei comandi col suo filo intorno — che in
     ufficio e' la piu' bassa delle tre e sul telefono la piu' alta, ed e' il
     motivo per cui una misura scritta a mano qui si sarebbe scollata da sola
     alla prima soglia. */
  --dt-riga-testo: calc((var(--dt-fs-md) + var(--dt-fs-sm)) * var(--dt-lh-normal) + 1px);
  --dt-riga-h: calc(
    max(
      var(--dt-h-tocco),
      var(--dt-riga-testo),
      calc(var(--dt-h-comando) + 2px)
    ) + var(--dt-sp-2) * 2
  );

  /* Motion */
  --dt-t-fast: 90ms ease;
  --dt-t-med: 160ms ease;
  /* Quando a spostarsi e' una cosa larga quanto una colonna: la stessa
     velocita' di un colore che cambia, su quella distanza, sarebbe uno strappo.
     Parte svelta e si posa piano, come una cosa che ha una massa. */
  --dt-t-slitta: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --dt-z-sticky: 100;
  --dt-z-menu: 200;
  --dt-z-modal: 900;
  --dt-z-toast: 1000;
  --dt-z-tooltip: 1100;
}

/* Tema chiaro (default).
   Palette "inchiostro": monocromatica, l'accento e' il nero.
   L'unico colore in pagina e' quello di stato, cosi' un errore o un avviso
   si vede subito anche in una griglia dati fitta. */
:root,
[data-theme="light"] {
  color-scheme: light;

  --dt-bg: #f2f2f0;
  --dt-surface: #ffffff;
  --dt-surface-2: #f8f8f7;
  --dt-surface-3: #e9e9e6;
  --dt-surface-inset: #f2f2f0;

  --dt-border: #d9d9d5;
  --dt-border-soft: #e9e9e6;
  --dt-border-strong: #ababa5;

  /* Tre gradini di grigio, non quattro sfumature dello stesso.
     Il terzo era #85857f: sul bianco fa 3,6 a 1, e sotto ci stavano gli
     indirizzi, le date e gli orari — roba piccola, che si legge di sguincio e
     che a quel contrasto in cantiere spariva. Adesso il secondo sta a 9,6 e il
     terzo a 5,3: restano tre pesi diversi e riconoscibili, ma anche il piu'
     smorto e' sopra alla soglia di leggibilita' per le scritte piccole. */
  --dt-text: #131313;
  --dt-text-2: #45453f;
  --dt-text-3: #6c6c65;
  /* La freccia delle tendine a discesa: la stessa `chevron-down` del set di
     icone, col colore scritto per esteso perche' dentro a un `<select>` non ci
     va un elemento da cui ereditarlo. */
  --dt-freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c6c65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --dt-text-inv: #ffffff;

  --dt-accent: #1c1c1a;
  --dt-accent-hover: #333330;
  --dt-accent-active: #000000;
  --dt-accent-soft: #ececea;
  --dt-accent-border: #b8b8b2;

  --dt-danger: #b3382f;
  --dt-danger-hover: #962e26;
  --dt-danger-soft: #fae9e6;
  --dt-danger-border: #ebb3ac;

  --dt-warn: #96660c;
  --dt-warn-soft: #faf0da;
  --dt-warn-border: #e3c489;

  --dt-ok: #2c6e49;
  --dt-ok-hover: #235a3b;
  --dt-ok-soft: #e3f1e8;
  --dt-ok-border: #a7cfb6;

  --dt-info: #2b6382;
  --dt-info-soft: #e4eff5;
  --dt-info-border: #a8c8db;

  --dt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --dt-shadow-md: 0 3px 8px rgba(0, 0, 0, 0.11), 0 1px 2px rgba(0, 0, 0, 0.07);
  --dt-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);
  --dt-overlay: rgba(18, 18, 17, 0.45);

  /* La riga pari di una tabella. Era #f9f9f8, un punto e mezzo di grigio: sul
     monitor dell'ufficio non si vedeva affatto, e una zebratura che non si
     vede e' solo un valore in piu' da mantenere. */
  --dt-zebra: #f5f5f2;
  --dt-hover: rgba(0, 0, 0, 0.055);
  --dt-selected: #ececea;

  /* La carta dello scontrino (sezione 32): un bianco appena caldo, libera
     sullo sfondo scurito della maschera, con l'ombra che ricalca lo strappo.
     I fili tratteggiati e i puntini sono un tono sopra al bordo. */
  --dt-conto-carta: #fdfcf8;
  --dt-conto-filo: var(--dt-border-strong);
  --dt-conto-punti: var(--dt-border-strong);
  --dt-conto-ombra: 0 8px 18px rgba(0, 0, 0, 0.14);

  /* Tinte dei blocchi della giornata: dal codice arriva solo la tonalita', il
     resto lo decide il tema. Campiture pastello — chiare e poco cariche — con
     la scritta scura sopra: la tonalita' resta quella che distingue un viaggio
     da un montaggio dall'altra parte del furgone, ma il colore poggia sotto la
     scritta invece di gridare, e una giornata piena non diventa un muro di
     campiture accese.
     In OKLCH e non in HSL: due tinte HSL con la stessa luminosita' scritta
     non hanno la stessa luminosita' vista — un ciano al 50% acceca dove un
     blu al 50% e' cupo — e le quattro tinte finirebbero una piu' carica
     dell'altra senza che nessuno l'abbia voluto. In OKLCH la luminosita' e'
     quella percepita, quindi un numero solo vale per tutte e quattro. */
  /* La luminosita' e' scesa da 86 a 82, e non per smorzare: e' il contrario.
     In OKLCH il tetto di croma che lo schermo sa fare dipende dalla
     luminosita', e a 86 quel tetto strozzava mezza ruota — il turchese si
     fermava a 0,156 e il cielo a 0,069, cioe' meno della meta' di quello che
     l'occhio sa distinguere. Quattro punti piu' in basso il tetto si alza per
     tutte, e le tinte in `tinte.rs` sono salite di conseguenza (dal 19% del
     cielo al 50% della menta). Il fondo e' piu' colorato, non piu' scuro: la
     scritta nera sopra tiene comunque un contrasto fra 11 e 12 a uno. */
  /* **La luminosita' e' del tema, non della tinta** — con una sola eccezione,
     ed e' la scala di grigi. Un grigio tonalita' non ne ha, quindi l'unica
     cosa che puo' distinguerlo da un altro grigio e' quanto e' chiaro:
     `--dt-blocco-luce` arriva dallo stile in linea insieme a tonalita' e
     carica, e dice di quanti punti la campitura sta sopra o sotto a questo
     numero. Zero — cioe' assente — per tutte le ventisei tinte colorate, che
     restano dove sono sempre state.
     La somma si scrive dove la campitura si compone e non qui, perche' qui
     `--dt-blocco-luce` non c'e' ancora: una proprieta' personalizzata risolve
     i suoi `var()` dove e' scritta, e scritta su `:root` si porterebbe dietro
     lo zero fino in fondo alla pagina.
     La banda in cui i grigi possono muoversi la fissa `tinte.rs`: otto punti
     per parte, che sul tema scuro vuol dire un fondo mai sotto al 68% — sotto,
     il velo dell'orario smetterebbe di reggere sopra al pastello. */
  --dt-tinta-l: 82%;
  --dt-tinta-c: 0.08;
  --dt-tinta-c-scala: 1;
  /* Il fondo del blocco che si sta per premere: piu' scuro, non piu' chiaro.
     Sul chiaro schiarire vorrebbe dire andare verso la pagina. */
  --dt-tinta-l-forte: 76%;
  --dt-tinta-l-bordo: 68%;
  /* Il tratteggio del blocco che le ore non le conta. Non e' il bordo di un
     blocco pieno: quello poggia su un pastello, questo sulla pagina, e a 68%
     un contorno su un fondo quasi bianco e' un colore che si indovina invece
     di vederlo. Piu' scuro il pastello si riconosce lo stesso — la tonalita'
     non cambia — e il tratteggio regge anche da un metro.
     Piu' in basso c'e' anche piu' gamut: le cariche di `tinte.rs` sono tarate
     sull'82% dei blocchi pieni, e a 55 le quattro tinte piu' pallide — cielo,
     pervinca, ghiaccio, pesca — ci starebbero larghe. Il moltiplicatore le
     tira su; quelle che a questa luminosita' sono gia' al tetto (sabbia,
     turchese, oliva) restano dove sono, che e' comunque il loro massimo. */
  --dt-tinta-l-tratto: 55%;
  --dt-tinta-c-tratto: 1.4;
  /* La scritta e' nera, non una tinta scura: su quattro pastelli diversi
     quattro scritte diverse facevano leggere ogni colonna con un peso suo, e
     il nero e' l'unico che pesa uguale su tutti e quattro. Nero anche sul
     tema scuro: il fondo del blocco resta chiaro comunque, e la scritta segue
     il blocco, non la pagina. */
  --dt-tinta-l-testo: 0%;
  --dt-tinta-c-testo: 0;
  /* **Il velo**: la stessa tinta appena accennata sopra alla pagina. Serve
     dove il colore deve dire *quale*, non *quanto*: il segno del catalogo
     sotto al puntatore, che vale da anteprima della campitura piena, e la
     campitura di un appuntamento, che di colore ne porta appena un accenno.
     Come campitura di un blocco in colonna non ci va: li' la campitura dice
     quanto della giornata e' lavoro pagato, e una tinta a meta' si legge come
     un conto a meta'.
     Il velo lo scostamento dei grigi se lo prende a meta' e non tutto, e senza
     mai passare il 96%: qui si parte gia' dal 95, e un grigio chiaro sommato
     per intero uscirebbe piu' bianco della pagina — cioe' un velo che non si
     vede. A meta' la scala si legge lo stesso, e il pieno — dove i grigi
     contano davvero — resta quello vero. */
  --dt-velo-l: 95%;
  --dt-velo-c-scala: 0.45;
  --dt-velo-l-bordo: 87%;
  /* **La sagoma**: la tinta di un blocco consegnato e non ancora fatto,
     disegnata invece che stesa. Il riquadro e' tracciato — contorno
     tratteggiato, doppio di spessore — e dentro c'e' appena un accenno di
     colore: il posto e' preso, sopra non e' ancora successo niente.

     Prima erano puntini, cioe' un retino: la tinta del negozio stampata a
     mezzatinta. Da vicino erano grana, ma alla distanza da cui si guarda una
     giornata i puntini sparivano, e del segno restava gia' solo la campitura
     chiara sotto — mentre sul fondo scuro dodici tinte puntinate erano dodici
     rettangoli sporchi. Quello che regge a tutte e due le distanze e' la
     sagoma: piena e' successo, vuota col contorno tracciato deve ancora
     succedere. E' lo stesso salto che c'e' fra una casella riempita e una
     appena segnata su un foglio.

     Il contorno e' tratteggiato, e il tratteggio in colonna vuol dire una
     cosa sola: **queste ore nel pieno non ci sono**. Una pausa non ce le
     mette mai (`--fuori-conto`), un appuntamento non ce le ha ancora messe.
     A dire quale dei due e' la campitura: vuota come la pagina non ci entra
     e non ci entrera', appena tinta ci entrera' quando qualcuno l'avra'
     fatta. Il segno e la campitura non si pestano i piedi, e una pausa in
     programma li porta tutti e due.

     La campitura e' il velo tirato su di due punti e caricato un filo di piu':
     il velo nasce per dire *quale* colore sotto a un puntatore, qui deve dirlo
     in mezzo a una colonna di blocchi pieni, che gli tirano via saturazione a
     stare vicini. */
  --dt-sagoma-l: 93%;
  --dt-sagoma-c: 0.6;
  /* Il contorno tracciato e' quello dei blocchi pieni, non uno piu' chiaro:
     con dentro quasi niente, il contorno e' tutto quello che disegna il
     blocco. Il tratto e' doppio — due pixel — perche' un tratteggio da uno
     alla distanza da cui si guarda una giornata si sfarina in una riga
     chiara. L'altezza interna pero' resta quella di un blocco pieno: il
     pixel che il bordo prende glielo rende il padding, ed e' li' che si
     misurano le soglie di `@container blocco`. */
  --dt-sagoma-l-tratto: 68%;
  /* Il gradino dell'hover: sotto al dito la campitura scende di poco, senza
     diventare il pieno che ancora non e'. Sul chiaro si scende verso il
     pieno, sullo scuro si sale — verso il basso c'e' la pagina. */
  --dt-sagoma-giu: 3%;
}

/* Tema scuro: stessa monocromia, accento quasi bianco. */
[data-theme="dark"] {
  color-scheme: dark;

  --dt-bg: #0e0e0d;
  --dt-surface: #161615;
  --dt-surface-2: #1d1d1c;
  --dt-surface-3: #282826;
  --dt-surface-inset: #0b0b0a;

  --dt-border: #2c2c2a;
  --dt-border-soft: #212120;
  --dt-border-strong: #454542;

  /* Stessa correzione del tema chiaro, nell'altro verso: il terzo grigio era
     #757570, 4,2 a uno sul fondo delle superfici, e sul nero le scritte
     piccole si spengono prima ancora che sul bianco. */
  --dt-text: #f0f0ee;
  --dt-text-2: #b6b6b0;
  --dt-text-3: #8f8f89;
  --dt-freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8f89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --dt-text-inv: #0e0e0d;

  --dt-accent: #e8e8e4;
  --dt-accent-hover: #ffffff;
  --dt-accent-active: #cfcfca;
  --dt-accent-soft: #232322;
  --dt-accent-border: #43433f;

  --dt-danger: #ef6a5f;
  --dt-danger-hover: #f4837a;
  --dt-danger-soft: #331c1a;
  --dt-danger-border: #6a3630;

  --dt-warn: #dda63f;
  --dt-warn-soft: #302713;
  --dt-warn-border: #675026;

  --dt-ok: #4dbb84;
  --dt-ok-hover: #62c996;
  --dt-ok-soft: #12291e;
  --dt-ok-border: #2b5740;

  --dt-info: #56b0cf;
  --dt-info-soft: #12262d;
  --dt-info-border: #2a5261;

  --dt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dt-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
  --dt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --dt-overlay: rgba(0, 0, 0, 0.62);

  --dt-zebra: #1a1a19;
  --dt-hover: rgba(255, 255, 255, 0.07);
  --dt-selected: #242422;

  /* Al buio la carta e' un grigio appena piu' chiaro del banco, non un
     foglio bianco: i campi e i tastini che ci stanno sopra sono quelli del
     tema, e su un bianco vero sarebbero neri su bianco. */
  --dt-conto-carta: #222221;
  --dt-conto-filo: var(--dt-border-strong);
  --dt-conto-punti: var(--dt-border-strong);
  --dt-conto-ombra: 0 8px 18px rgba(0, 0, 0, 0.55);

  /* Gli stessi pastelli, appena piu' scuri e un filo meno carichi: sul quasi
     nero un pastello chiaro sembra illuminato da dietro e ogni blocco diventa
     una lampada. Qui il blocco che si sta per premere schiarisce invece di
     scurire: verso il basso finirebbe nella pagina. */
  --dt-tinta-l: 76%;
  --dt-tinta-c: 0.08;
  --dt-tinta-c-scala: 0.95;
  --dt-tinta-l-forte: 82%;
  --dt-tinta-l-bordo: 62%;
  /* Qui il tratteggio va nell'altro verso: sotto c'e' la pagina quasi nera, e
     scurirlo lo spegnerebbe. Piu' chiaro del pastello pieno, cosi' il contorno
     resta la cosa piu' accesa di un blocco che dentro non ha niente. Qui la
     carica resta quella dei blocchi pieni: a 78% il tetto e' quello di
     partenza, e caricare di piu' vorrebbe dire solo farla tagliare allo
     schermo. */
  --dt-tinta-l-tratto: 78%;
  --dt-tinta-c-tratto: 1;
  --dt-tinta-l-testo: 0%;
  --dt-tinta-c-testo: 0;
  /* Sul quasi nero il velo va nell'altro verso — e' un fondo scuro colorato,
     con la scritta chiara della pagina sopra — e va caricato di piu': a queste
     luminosita' la stessa carica non si vede. */
  --dt-velo-l: 23%;
  --dt-velo-c-scala: 0.55;
  --dt-velo-l-bordo: 33%;
  /* Sul quasi nero la sagoma va nell'altro verso: la campitura e' un fondo
     scuro colorato — il velo appena schiarito, perche' in mezzo a una colonna
     di pastelli accesi un blocco troppo vicino alla pagina si legge come un
     buco e non come un blocco — e il contorno resta la cosa piu' chiara che
     ha. */
  --dt-sagoma-l: 28%;
  --dt-sagoma-c: 0.7;
  --dt-sagoma-l-tratto: 62%;
  --dt-sagoma-giu: -4%;
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Il trackpad a due dita, arrivato a fondo corsa, fa scivolare via la pagina
   con l'animazione di "indietro" del browser: qui non c'e' cronologia da
   sfogliare, e l'ERP sembra rotto. Il gesto si ferma dentro al contenitore.
   Nella finestra desktop la stessa cosa la spegne `additionalBrowserArgs`. */
html,
body,
.dt-app__body,
.dt-nav,
.dt-scroll {
  overscroll-behavior: none;
}

body {
  background: var(--dt-bg);
  color: var(--dt-text);
  font-family: var(--dt-font-ui);
  font-size: var(--dt-fs-md);
  line-height: var(--dt-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure {
  margin: 0;
}

a {
  color: var(--dt-accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

::selection {
  background: var(--dt-accent);
  color: var(--dt-text-inv);
}

:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: 1px;
}

/* Scrollbar coerente col tema */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--dt-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--dt-border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--dt-r-full);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--dt-text-3); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. Tipografia utility
   -------------------------------------------------------------------------- */

.dt-h1 { font-size: var(--dt-fs-3xl); font-weight: var(--dt-fw-bold); line-height: var(--dt-lh-tight); letter-spacing: -0.02em; }
.dt-h2 { font-size: var(--dt-fs-2xl); font-weight: var(--dt-fw-semibold); line-height: var(--dt-lh-tight); letter-spacing: -0.01em; }
.dt-h3 { font-size: var(--dt-fs-xl); font-weight: var(--dt-fw-semibold); line-height: var(--dt-lh-tight); }
.dt-h4 { font-size: var(--dt-fs-lg); font-weight: var(--dt-fw-semibold); }
.dt-body { font-size: var(--dt-fs-md); }
.dt-small { font-size: var(--dt-fs-sm); }
.dt-caption { font-size: var(--dt-fs-xs); }
.dt-muted { color: var(--dt-text-2); }
.dt-faint { color: var(--dt-text-3); }
.dt-mono { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; }
.dt-num { font-variant-numeric: tabular-nums; }
/* Un numero sotto zero: in una colonna di importi il segno meno da solo si
   perde, e un margine in perdita e' la cella che va vista per prima. */
.dt-negativo { color: var(--dt-danger); font-weight: var(--dt-fw-semibold); }
.dt-overline {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-truncate { white-space: nowrap; }

/* ===== Il testo che non ci sta scorre di lato =====
   Una scritta piu' lunga del suo posto non si taglia coi puntini: si sposta
   col dito (o di lato con la rotella), e il bordo da cui continua sfuma. Coi
   puntini «Sigillante siliconic…» era tutto quello che un telefono diceva di
   un materiale appena preso, e il resto non c'era modo di leggerlo.
   I puntini se ne sono andati del tutto perche' con lo scorrimento non vanno
   d'accordo: Chrome li lascia inchiodati in fondo alla scatola, e scorrendo
   fino alla fine l'ultimo pezzo della scritta resta coperto lo stesso.
   A dire «continua» e' la sfumatura, e a muoverla e' lo scorrimento stesso
   (`animation-timeline: scroll(self inline)`): all'inizio sfuma a destra, in
   fondo a sinistra, in mezzo da tutte e due le parti. Non e' un'animazione nel
   tempo: i fotogrammi sono le posizioni dello scorrimento, e a dito fermo la
   sfumatura sta ferma. Una scritta che ci sta non ha niente da scorrere, il
   suo `scroll()` e' spento e la maschera non c'e' proprio: le righe che si
   leggono gia' intere, cioe' quasi tutte, non pagano niente.
   Due strati di maschera fissi, uno per lato, piu' larghi della scatola di
   una sfumatura: a muoversi e' solo dove stanno, e ogni lato entra o esce dal
   bordo. Una sfumatura sola coi `var()` animati dentro sembrava uguale, ma
   Chrome i `var()` di un fotogramma li legge una volta sola: scorrendo restava
   quella di partenza, e in fondo la fine della scritta sfumava ancora.
   In verticale non scorre: il dito che scende passa alla pagina, e un pixel
   di discendente non diventa uno scorrimento.
   Restano coi puntini le scritte dove un gesto di lato vuol gia' dire un'altra
   cosa — i blocchi della giornata, dove sfoglia i giorni — e quelle che si
   guardano un istante senza toccarle: la targhetta, l'ombra di quello che si
   trascina, il nome breve nella barra in basso. */
@keyframes dt-sfuma-lati {
  0%, 100% {
    mask-image:
      linear-gradient(to right, transparent, #000 var(--dt-sp-7)),
      linear-gradient(to left, transparent, #000 var(--dt-sp-7));
    mask-size: calc(100% + var(--dt-sp-7)) 100%;
    mask-repeat: no-repeat;
    mask-composite: intersect;
  }
  0% { mask-position: calc(-1 * var(--dt-sp-7)) 0, calc(-1 * var(--dt-sp-7)) 0; }
  10%, 90% { mask-position: 0 0, calc(-1 * var(--dt-sp-7)) 0; }
  100% { mask-position: 0 0, 0 0; }
}
.dt-truncate,
.dt-faccia__nome,
.dt-elenco__nome,
.dt-breadcrumb__item,
.dt-breadcrumb__testo,
.dt-commessa__negozio > span,
.dt-testatina__nome,
.dt-testatina__dove,
.dt-testatina__riferimento > span,
.dt-cartellino__negozio > span,
.dt-cartellino__riferimento > span,
.dt-giorno__data-pila,
.dt-allegato__nome,
.dt-chiamata__nota,
.dt-passaggio__testo,
.dt-calendari__nome,
.dt-calendari__niente,
.dt-scambio__nome,
.dt-tendina__titolo,
.dt-tendina__sotto,
.dt-voce__nome,
.dt-voce__sotto,
.dt-voce__dato,
.dt-voce__prezzo,
.dt-clausola__valore,
.dt-quota__testo,
.dt-presenza__nome,
.dt-conto__voce {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}
/* L'animazione c'e' solo dove c'e' anche lo scorrimento che la guida. Un
   motore senza `animation-timeline` (Firefox, Safari prima del 26) terrebbe
   lo stesso l'animazione, ma nel tempo: durata zero e riempimento `both`, cioe'
   il fotogramma d'arrivo per sempre — le prime lettere di ogni nome sfumate, su
   tutti gli elenchi. Li' la scritta resta pulita: scorre lo stesso, solo senza
   sfumatura.
   L'elenco e' lo stesso di sopra, ripetuto: chi aggiunge una scritta a un
   elenco la aggiunge anche all'altro. */
@supports (animation-timeline: scroll()) {
  .dt-truncate,
  .dt-faccia__nome,
  .dt-elenco__nome,
  .dt-breadcrumb__item,
  .dt-breadcrumb__testo,
  .dt-commessa__negozio > span,
  .dt-testatina__nome,
  .dt-testatina__dove,
  .dt-testatina__riferimento > span,
  .dt-cartellino__negozio > span,
  .dt-cartellino__riferimento > span,
  .dt-giorno__data-pila,
  .dt-allegato__nome,
  .dt-chiamata__nota,
  .dt-passaggio__testo,
  .dt-calendari__nome,
  .dt-calendari__niente,
  .dt-scambio__nome,
  .dt-tendina__titolo,
  .dt-tendina__sotto,
  .dt-voce__nome,
  .dt-voce__sotto,
  .dt-voce__dato,
  .dt-voce__prezzo,
  .dt-clausola__valore,
  .dt-quota__testo,
  .dt-presenza__nome,
  .dt-conto__voce {
    animation: dt-sfuma-lati linear both;
    animation-timeline: scroll(self inline);
  }
}
/* Il blocco sta nella colonna delle ore, dove un colpo di lato sfoglia i
   giorni: un titolo che si prendesse quel gesto per scorrere se stesso
   ruberebbe il giorno dopo. Li' si taglia, e intero si legge aprendolo. */
.dt-blocco .dt-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  animation: none;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.dt-stack { display: flex; flex-direction: column; }
.dt-row { display: flex; flex-direction: row; align-items: center; }
.dt-row--top { align-items: flex-start; }
.dt-row--wrap { flex-wrap: wrap; }
.dt-grow { flex: 1 1 auto; min-width: 0; }
/* Il contrario: un campo che non deve crescere. Un numero di due cifre in fila
   con due nomi lunghi si prenderebbe comunque un terzo della riga, e una
   casella larga promette un valore lungo che non arrivera' mai. Largo quanto
   basta a tenere su una riga l'aiuto che gli sta sotto: piu' stretto, la riga
   di aiuto va a capo e sfalsa il fondo di tutta la fila di campi. */
.dt-corto { flex: 0 0 120px; }
.dt-spacer { flex: 1 1 auto; }
/* Spazio riservato, invisibile: il contenuto tiene la sua misura naturale e
   sta al centro, ma la colonna occupa sempre lo stesso posto anche quando
   l'etichetta cambia. Serve nelle tabelle, perche' non si riassestino. */
.dt-fisso { display: inline-flex; align-items: center; justify-content: center; }

.dt-gap-1 { gap: var(--dt-sp-1); }
.dt-gap-2 { gap: var(--dt-sp-2); }
.dt-gap-3 { gap: var(--dt-sp-3); }
.dt-gap-4 { gap: var(--dt-sp-4); }
.dt-gap-5 { gap: var(--dt-sp-5); }
.dt-gap-6 { gap: var(--dt-sp-6); }
.dt-gap-7 { gap: var(--dt-sp-7); }
.dt-gap-8 { gap: var(--dt-sp-8); }

.dt-divider {
  border: 0;
  border-top: 1px solid var(--dt-border);
  margin: 0;
  width: 100%;
}
.dt-divider--v {
  border-top: 0;
  border-left: 1px solid var(--dt-border);
  width: 0;
  align-self: stretch;
  min-height: 16px;
}

.dt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  background: var(--dt-surface-2);
  border-bottom: 1px solid var(--dt-border);
  min-height: var(--dt-topbar-h);
}
/* La barra in cima all'applicazione — quella da cui si trascina la finestra sul
   desktop — e' anche la prima fascia della pagina sul telefono, dove installata
   passa sotto all'orologio e alla batteria: il posto per quella roba lo fa lei.
   Le altre barre no: stanno in mezzo alla pagina, e li' sopra non c'e' niente
   da scansare. Fuori dal telefono `env()` vale zero e non cambia niente. */
.dt-toolbar[data-tauri-drag-region="deep"] {
  padding-top: calc(var(--dt-sp-3) + env(safe-area-inset-top, 0px));
}

/* Riduci / ingrandisci / chiudi della finestra desktop: in fondo alla barra,
   staccati dai comandi della piattaforma. */
.dt-finestra { display: flex; align-items: center; gap: var(--dt-sp-1); flex: none; }
/* Le zone che spostano la finestra non devono sembrare testo da selezionare. */
[data-tauri-drag-region] { user-select: none; -webkit-user-select: none; }

/* Shell applicativa: usata dal launcher e da ogni modulo */
.dt-app {
  display: grid;
  grid-template-columns: var(--dt-sidebar-w) 1fr;
  /* `dvh` e non `vh`: nel browser di un telefono la barra dell'indirizzo si
     ritira scorrendo, e `vh` resta fermo sull'altezza di quando non era
     ritirata — la barra bassa dell'applicazione finiva sotto al bordo. `vh`
     prima come rete per chi non sa l'altra unita'. Installata la differenza non
     c'e' proprio: li' la barra del browser non esiste. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Installata, la pagina arriva ai bordi dello schermo (`viewport-fit=cover`)
     e di lato puo' finirci sotto la tacca quando il telefono e' coricato. Le
     due fasce alte e basse se le prendono la barra in cima e quella in fondo,
     che sono loro a toccare quei bordi. */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.dt-app__side {
  background: var(--dt-surface);
  border-right: 1px solid var(--dt-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dt-app__main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dt-bg);
  /* La colonna del contenuto non si allarga per far posto a quello che ci sta
     dentro: e' `1fr` di una griglia, e una casella di griglia di suo non
     scende sotto il minimo del suo contenuto — una tabella larga o una fila di
     giornate spingeva la casella oltre la finestra, e a scorrere in
     orizzontale finiva la pagina intera, barra laterale compresa. Con lo zero
     la misura la detta la finestra, e a scorrere e' il riquadro che deve
     (`dt-app__body`, che ha gia' il suo `overflow`). */
  min-width: 0;
}
/* Colonna, cosi' un modulo puo' chiedere di riempire l'altezza rimasta
   (`dt-card--pieno`) invece di indovinarla con un calcolo. */
.dt-app__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--dt-pad-body);
  display: flex;
  flex-direction: column;
}
/* Quello che sta dentro a un riquadro che scorre non si schiaccia per starci.
   La colonna e' un `flex`, e un figlio di `flex` di suo si lascia stringere: di
   norma non sotto al proprio contenuto, ma quella rete salta per chi ha un
   `overflow` diverso da `visible` — ed e' il caso di ogni scheda
   (`.dt-card { overflow: hidden }`). Una scheda piu' alta della finestra
   veniva schiacciata all'altezza rimasta e il resto delle righe tagliato via:
   niente sporgeva, e quindi non c'era niente da scorrere. Impedito il
   restringimento la scheda resta alta quanto le sue righe, sporge, e a scorrere
   e' il riquadro come deve.
   Il peso zero (`:where`) serve a chi l'altezza rimasta la vuole per davvero —
   `dt-card--pieno`, `dt-giorno__pagina` — che si riprende il `flex` con la sua
   sola classe, senza dover rincorrere questa regola. */
:where(.dt-app__body) > * {
  flex-shrink: 0;
}

.dt-brand {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4) var(--dt-sp-5);
  border-bottom: 1px solid var(--dt-border);
  min-height: var(--dt-topbar-h);
}
.dt-brand__name { font-size: var(--dt-fs-md); font-weight: var(--dt-fw-semibold); letter-spacing: -0.01em; }

/* Sigla che ondeggia: grigio smorzato, lettere sfasate fra loro. */
.dt-onda {
  display: inline-flex;
  margin-left: 0.35em;
  color: var(--dt-text-3);
  font-weight: var(--dt-fw-bold);
  letter-spacing: 0.02em;
}
.dt-onda__lettera {
  display: inline-block;
  animation: dt-onda 2.4s ease-in-out infinite;
}
@keyframes dt-onda {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.18em); }
}

.dt-nav { padding: var(--dt-sp-3); overflow: auto; flex: 1 1 auto; }
.dt-nav__group { margin-bottom: var(--dt-sp-4); }
.dt-nav__label {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
  padding: var(--dt-sp-2) var(--dt-sp-3);
}
.dt-nav__item {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  width: 100%;
  /* Sei pixel sopra e sotto e non quattro: la voce viene alta trentadue, che
     e' il minimo con cui si prende col pollice senza mirare. Sono quattro voci
     in tutto il programma, lo spazio c'e'. */
  padding: var(--dt-sp-3) var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-md);
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-nav__item:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-nav__item--active {
  background: var(--dt-selected);
  color: var(--dt-accent);
  font-weight: var(--dt-fw-medium);
}
.dt-nav__item svg { flex: none; opacity: 0.85; }

/* Quante cose aspettano dentro a quella schermata: il lavoro arretrato si
   legge dalla barra, senza entrare. Tinto come il conto sulla linguetta a cui
   corrisponde — e' lo stesso numero visto da due distanze — e spinto contro il
   bordo destro della voce, dove l'occhio scorre la colonna. */
.dt-nav__conto {
  flex: none;
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--dt-r-full);
  background: var(--dt-warn-soft);
  border: 1px solid var(--dt-warn-border);
  color: var(--dt-warn);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  font-variant-numeric: tabular-nums;
}
/* Etichetta minuta in coda a un nome: dice a chi e' riservata una voce
   senza rubarle spazio. Stessa altezza e stesso peso di un badge neutro,
   cosi' non sembra un elemento di un'altra interfaccia; in grigio e non a
   colori perche' non e' uno stato, e' una nota. */
.dt-tag {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--dt-sp-2);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface-3);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Piede della barra laterale: chi ha la sessione aperta e le impostazioni.
   `margin-top: auto` lo tiene incollato in fondo anche quando sopra non c'e'
   la navigazione (l'operatore ha una vista sola e la barra resta vuota). */
.dt-app__sidefoot {
  position: relative;
  margin-top: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4) var(--dt-sp-5);
  min-height: var(--dt-topbar-h);
  border-top: 1px solid var(--dt-border);
}
/* Chi ha la sessione aperta e' un tasto che apre le impostazioni, ma non deve
   sembrarlo: dentro alla barra e' una scritta, e un bordo o una campitura
   attorno al nome farebbero un secondo comando di fianco all'ingranaggio.
   Si accende sotto al dito, come le voci di un menu. */
.dt-sideuser {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--dt-sp-1) var(--dt-sp-2);
  margin: 0 calc(var(--dt-sp-2) * -1);
  border: 0;
  border-radius: var(--dt-r-md);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
.dt-sideuser:hover { background: var(--dt-hover); }
.dt-sideuser__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
/* La prima parola del nome: serve solo allo slot della barra bassa. */
.dt-sideuser__breve { display: none; }

/* Cerchietto con l'iniziale: il colore arriva da uno `style` inline,
   perche' e' calcolato dal nome. */
.dt-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--dt-r-full);
  /* La misura della scritta passa da una variabile perche' due cose la vogliono
     decidere insieme e non si devono pestare i piedi: la misura del cerchietto
     dice quanto e' grande la lettera, la sigla lunga dice di quanto stringerla.
     Con due `font-size` uno dei due perderebbe, e a perdere sarebbe sempre lo
     stesso — quello scritto piu' in su nel foglio. */
  font-size: calc(var(--dt-avatar-fs, var(--dt-fs-md)) * var(--dt-avatar-fs-scala, 1));
  font-weight: var(--dt-fw-bold);
  line-height: 1;
  user-select: none;
}
.dt-avatar--sm { width: 24px; height: 24px; --dt-avatar-fs: var(--dt-fs-xs); }
.dt-avatar--lg { width: 38px; height: 38px; --dt-avatar-fs: var(--dt-fs-lg); }
/* Tre lettere dentro al cerchietto tagliato per due: si stringe la scritta e si
   stringono le lettere fra loro, il cerchietto resta quello. Allargarlo
   vorrebbe dire, in una colonna di facce, una faccia piu' grossa delle altre
   per una ragione che non riguarda chi guarda. */
.dt-avatar--tre { --dt-avatar-fs-scala: 0.76; letter-spacing: -0.03em; }

/* ==========================================================================
   Le facce: una cosa, un negozio, una persona
   ==========================================================================
   Tre facce con una grammatica sola — segno a sinistra, nome a destra,
   allineati sulla mezzeria — perche' la stessa cosa deve avere lo stesso
   disegno in qualunque schermata compaia. Le misure stanno qui e non nelle
   schermate: e' l'unico modo perche' il negozio dell'elenco e quello della
   scheda escano davvero identici. */
.dt-faccia {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  min-width: 0;
  vertical-align: middle;
}
/* Il nome cede, la faccia no: e' il pezzo che si riconosce anche
   dimezzato, mentre mezzo nome non e' un nome. Quello che non ci sta scorre
   di lato (vedi `.dt-truncate`). */
.dt-faccia__nome {
  min-width: 0;
  white-space: nowrap;
}
.dt-faccia--sm { gap: var(--dt-sp-1); font-size: var(--dt-fs-xs); }
.dt-faccia--lg { gap: var(--dt-sp-3); font-size: var(--dt-fs-lg); }

/* Il negozio in mezzo a una riga di testo: la sua campitura non deve crescere
   col testo intorno, se no la stessa faccia esce di due misure diverse in due
   elenchi che si somigliano. Le misure sono quelle del cerchietto di una
   persona — 24, 30, 38 — perche' le facce si contano a colpo d'occhio solo se
   sono grandi uguali. */
.dt-faccia--negozio > .dt-tinta-segno { --dt-corsia: 30px; }
.dt-faccia--sm.dt-faccia--negozio > .dt-tinta-segno { --dt-corsia: 24px; }
.dt-faccia--lg.dt-faccia--negozio > .dt-tinta-segno { --dt-corsia: 38px; }

/* Piu' persone: accavallate di un terzo, cosi' quattro facce stanno dove ne
   starebbero due e mezzo e l'iniziale di sotto resta leggibile. L'anello del
   colore di fondo e' quello che le stacca l'una dall'altra: senza, tre
   cerchietti sovrapposti diventano una macchia sola. */
.dt-facce {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.dt-facce > .dt-faccia + .dt-faccia { margin-left: -10px; }
.dt-facce--sm > .dt-faccia + .dt-faccia { margin-left: -8px; }
.dt-facce--lg > .dt-faccia + .dt-faccia { margin-left: -13px; }
.dt-facce .dt-avatar {
  box-shadow: 0 0 0 2px var(--dt-facce-anello, var(--dt-surface));
}
/* Il conto di quelle che non si disegnano. Sta sulla riga come una faccia in
   piu' — stessa altezza, stesso anello — perche' e' quello che e': le altre. */
.dt-facce__resto {
  display: inline-grid;
  place-items: center;
  flex: none;
  height: 24px;
  min-width: 24px;
  margin-left: -8px;
  padding: 0 var(--dt-sp-1);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface-2);
  box-shadow: 0 0 0 2px var(--dt-facce-anello, var(--dt-surface));
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-bold);
  line-height: 1;
}
.dt-facce--lg .dt-facce__resto { height: 30px; min-width: 30px; font-size: var(--dt-fs-sm); }

/* Pannello che si apre dal piede della barra: si chiude cliccando ovunque. */
.dt-menu__velo {
  position: fixed;
  inset: 0;
  z-index: var(--dt-z-menu);
}
.dt-menu {
  position: absolute;
  z-index: calc(var(--dt-z-menu) + 1);
  bottom: calc(100% + var(--dt-sp-3));
  /* Il pannello sta dentro la barra laterale, con lo stesso margine su tutti
     e due i lati: non sborda mai sul contenuto. */
  left: var(--dt-sp-3);
  right: var(--dt-sp-3);
  display: flex;
  flex-direction: column;
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-lg);
  overflow: hidden;
}
/* Il pannello e' fatto di fasce separate da una riga, non di voci sparse:
   ogni fascia si prende lo stesso respiro, cosi' il riquadro resta ordinato
   anche quando ci si aggiunge qualcosa. */
.dt-menu > * + * { border-top: 1px solid var(--dt-border-soft); }

/* Chi e' entrato e, subito a fianco, la via d'uscita. */
.dt-menu__testa {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4);
  background: var(--dt-surface-3);
}
.dt-menu__chi {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--dt-fw-semibold);
}

/* Etichetta a sinistra, controllo a destra. */
.dt-menu__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-2);
}

.dt-menu__label {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
  padding: var(--dt-sp-2) var(--dt-sp-2) var(--dt-sp-1);
}
.dt-menu__item {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  width: 100%;
  padding: var(--dt-sp-3) var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-sm);
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-md);
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-menu__item:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-menu__item svg { flex: none; opacity: 0.85; }
.dt-menu__item--danger { color: var(--dt-danger); }
/* La voce che non fa una cosa e finisce li' ma accende un modo si porta in
   coda, spinta a destra, la casella di spunta della sezione 7 — la stessa,
   disegnata una volta sola — e se la porta anche da spenta. Una spunta che
   comparisse solo da accesa direbbe lo stato a chi lo conosce gia' e niente a
   chi apre il menu la prima volta: fra le voci che stampano appena premute e
   questa, che invece si mette da parte e aspetta, a riposo non si vedrebbe
   nessuna differenza. La casella vuota e' quella differenza.
   Accesa, in piu', si veste come il bottone premuto — fondo pieno di pagina,
   scritta a piena forza — cosi' il modo in corso si trova anche di sbieco. */
.dt-menu__item > .dt-check__box { margin-left: auto; }
.dt-menu__item--premuto {
  background: var(--dt-selected);
  color: var(--dt-text);
  font-weight: var(--dt-fw-semibold);
}
.dt-menu__item--premuto > .dt-check__box {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
}
.dt-menu__item--premuto > .dt-check__box::after { transform: rotate(-45deg) scale(1); }
/* Spenta perche' non c'e' niente su cui lavorare: resta scritta, non risponde. */
.dt-menu__item:disabled { color: var(--dt-text-3); cursor: default; }
.dt-menu__item:disabled:hover { background: transparent; color: var(--dt-text-3); }
.dt-menu__item:disabled svg { opacity: 0.5; }
.dt-menu__item:disabled > .dt-check__box { opacity: 0.45; }
/* Dentro al menu il segmentato fa da controllo di riga: niente margini
   propri, ci pensa la fascia che lo contiene. */
.dt-menu__riga .dt-segmented { flex: none; }

/* Schermo verticale (tablet, monitor ruotato) o finestra stretta: la
   navigazione passa da colonna a sinistra a barra in basso, sempre a portata
   di pollice. Le etichette dei gruppi spariscono, le voci diventano
   icona + testo. Sotto gli 820px la colonna da 208px si mangerebbe un quarto
   della finestra. */
@media (orientation: portrait), (max-width: 820px) {
  .dt-app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .dt-app__main { grid-row: 1; }

  /* La fascia e' un binario: il filo in cima e' la guida, e quello che ci sta
     sotto ci sta appeso. La voce aperta lo dice con un gancio — un tratto
     pieno attaccato al filo, sopra alla sua icona — e i gruppi con un fermo,
     la tacca corta che scende dal filo dove finisce l'uno e comincia l'altro.
     Niente pastiglie e niente campiture dietro alle voci: da ferma la barra si
     legge dall'alto, come un righello, e il colore compare solo sotto al dito.
     Il gancio si apre dal centro verso i lati, come una tenda: e' una
     `transition` sul suo stesso nodo, non un'altra cosa che finge di scorrere.
     Il respiro sopra e sotto sta sulla navigazione e sul piede, non sulla
     fascia: sul tablet le voci scorrono di lato, e un gancio che sporge sopra
     alla navigazione verrebbe tagliato dallo scorrimento se stesse fuori dal
     suo riquadro. */
  .dt-app__side {
    grid-row: 2;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--dt-sp-3) env(safe-area-inset-bottom, 0px);
    /* Il pannello delle impostazioni esce dalla barra verso l'alto: se qui
       restasse `hidden` verrebbe tagliato. */
    overflow: visible;
    border-right: 0;
    border-top: 1px solid var(--dt-border);
    /* Gli angoli in alto arrotondati: la fascia e' una tavoletta appoggiata
       sopra alla pagina, non il bordo dello schermo. In basso restano vivi,
       perche' li' lo schermo finisce davvero. */
    border-radius: var(--dt-r-lg) var(--dt-r-lg) 0 0;
    background: var(--dt-surface);
    box-shadow: var(--dt-shadow-md);
  }
  .dt-app__side .dt-brand { display: none; }

  .dt-nav {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: var(--dt-barra-pad) 0;
    /* `min-width: 0` o la lista lunga sfonda la fascia invece di scorrere. */
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* La barra e' alta quanto una voce: una scrollbar orizzontale la
       taglierebbe in due. Si scorre col dito. */
    scrollbar-width: none;
  }
  .dt-nav::-webkit-scrollbar { display: none; }
  .dt-nav__group {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  .dt-nav__group + .dt-nav__group {
    position: relative;
    margin-left: var(--dt-sp-2);
    padding-left: var(--dt-sp-2);
  }
  /* Il fermo: la tacca che scende dal filo dove cambia gruppo. Sta in cima e
     non a mezza altezza, perche' e' del binario e non delle voci. */
  .dt-nav__group + .dt-nav__group::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(-1 * var(--dt-barra-pad));
    width: 1px;
    height: var(--dt-sp-4);
    background: var(--dt-border-strong);
  }
  .dt-nav__label { display: none; }
  .dt-nav__item {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: var(--dt-sp-1);
    width: auto;
    /* La voce si stringe con la fascia invece di aspettare una seconda
       soglia: fra il telefono stretto e il tablet largo passa per tutte le
       misure di mezzo. */
    min-width: clamp(54px, 7vw, 64px);
    max-width: clamp(84px, 13vw, 104px);
    /* Bersaglio da pollice: la voce e' alta quanto le due righe piu' l'aria,
       e la fascia si adatta a lei. */
    min-height: var(--dt-voce-h);
    padding: var(--dt-sp-2) clamp(4px, 1vw, 8px);
    border-radius: var(--dt-r-md);
    background: transparent;
    color: var(--dt-text-2);
    text-align: center;
    font-size: var(--dt-fs-sm);
    /* Il peso non cambia con lo stato: sul telefono lo slot e' largo quanto
       la parola, e una parola che ingrassa sposterebbe tutte le altre. */
    font-weight: var(--dt-fw-regular);
    line-height: 1.15;
    white-space: nowrap;
    transition: background var(--dt-t-fast), color var(--dt-t-fast);
  }
  .dt-nav__item > span { max-width: 100%; }
  /* L'icona cresce: quattordici pixel stanno in una riga da monitor, in
     furgone sotto al pollice ce ne vogliono diciotto. Niente pieno dietro. */
  .dt-nav__item svg {
    width: 18px;
    height: 18px;
    box-sizing: content-box;
    /* Tre pixel d'aria: la casella viene ventiquattro, quanto il cerchietto
       di chi sei nell'ultimo slot, e i nomi sotto cadono sulla stessa riga. */
    padding: 3px;
    border-radius: 0;
    background: transparent;
    opacity: 1;
  }
  /* Il gancio: appeso al filo, largo quanto l'icona. Chiuso e' un punto senza
     larghezza, aperto e' il tratto intero; in mezzo si apre dal centro. */
  .dt-nav__item::before,
  .dt-sideuser::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--dt-barra-pad));
    left: 50%;
    width: 22px;
    height: 3px;
    margin-left: -11px;
    border-radius: 0 0 var(--dt-r-xs) var(--dt-r-xs);
    background: var(--dt-accent);
    transform: scaleX(0);
    transition: transform var(--dt-t-med);
  }
  .dt-nav__item--active,
  .dt-sideuser--aperto { color: var(--dt-text); }
  .dt-nav__item--active::before,
  .dt-sideuser--aperto::before { transform: scaleX(1); }
  /* Il colore sotto al dito, finche' il dito c'e'. Il passaggio del mouse
     solo dove un mouse esiste: col dito lo stato resterebbe appiccicato alla
     voce appena premuta, e sarebbe di nuovo una campitura ferma. */
  .dt-nav__item:active,
  .dt-sideuser:active { background: var(--dt-hover); }
  @media (hover: hover) {
    .dt-nav__item:hover { background: var(--dt-hover); color: var(--dt-text); }
  }
  /* Nella barra bassa lo spazio e' poco: il tag sparisce, il gruppo
     "Amministratore" dice gia' la stessa cosa. */
  .dt-nav__item .dt-tag { display: none; }
  /* Il conto invece resta: e' lavoro che aspetta, ed e' l'unica cosa della
     barra che cambia da sola. In colonna non puo' stare in fondo alla riga —
     finirebbe sotto al nome — quindi si appoggia alla spalla dell'icona, come
     il numerino sopra a un'applicazione. Misurato dal centro e non dal bordo:
     lo slot e' largo quanto la sua parola, e dal bordo cadrebbe ogni volta in
     un posto diverso. */
  .dt-nav__item .dt-nav__conto {
    position: absolute;
    top: 0;
    left: calc(50% + 3px);
    margin: 0;
  }

  /* Il piede e' l'ultimo slot del binario, con lo stesso respiro delle voci:
     cosi' il gancio di chi sei, quando il pannello e' aperto, cade sul filo
     come gli altri. */
  .dt-app__sidefoot {
    position: relative;
    margin: 0 0 0 var(--dt-sp-2);
    align-self: stretch;
    gap: var(--dt-sp-2);
    min-height: 0;
    padding: var(--dt-barra-pad) 0 var(--dt-barra-pad) var(--dt-sp-4);
    border-top: 0;
  }
  .dt-sideuser {
    position: relative;
    align-self: stretch;
  }
  /* Chi sta usando il programma resta scritto, nome e ruolo, anche nella
     fascia bassa: su un dispositivo condiviso e' l'unico modo di accorgersi
     di stare segnando le ore nella giornata di un altro, e la sola iniziale
     nel cerchietto non basta a farsene una domanda. Si stringe invece di
     sparire, e si stringe di continuo: il nome si taglia un po' di piu' a
     ogni pollice di finestra in meno, la barra non si sfonda mai. */
  .dt-sideuser__testo {
    flex: 0 1 auto;
    max-width: clamp(88px, 14vw + 30px, 168px);
  }
  /* Lo stesso fermo che separa i gruppi: il piede e' l'ultimo gruppo del
     binario, non un riquadro a parte. Se la navigazione non c'e' (operatore)
     non c'e' niente da separare e la tacca non compare. */
  .dt-nav ~ .dt-app__sidefoot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: var(--dt-sp-4);
    background: var(--dt-border-strong);
  }
  /* Il pannello si apre verso l'alto e si ancora a destra, sopra la barra. */
  .dt-menu {
    left: auto;
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - var(--dt-sp-6));
  }
}

/* --------------------------------------------------------------------------
   5. Bottoni
   -------------------------------------------------------------------------- */

.dt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-2);
  height: var(--dt-h-md);
  padding: 0 var(--dt-sp-5);
  border: 1px solid transparent;
  border-radius: var(--dt-r-md);
  font-family: inherit;
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
              color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-btn:disabled,
.dt-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dt-btn:active:not(:disabled) { transform: translateY(0.5px); }

/* Varianti */
.dt-btn--primary {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color: var(--dt-text-inv);
  box-shadow: var(--dt-shadow-sm);
}
.dt-btn--primary:hover { background: var(--dt-accent-hover); border-color: var(--dt-accent-hover); }
.dt-btn--primary:active { background: var(--dt-accent-active); }

.dt-btn--secondary {
  background: var(--dt-surface);
  border-color: var(--dt-border-strong);
  color: var(--dt-text);
  box-shadow: var(--dt-shadow-sm);
}
.dt-btn--secondary:hover { background: var(--dt-surface-3); }

.dt-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--dt-text-2);
}
.dt-btn--ghost:hover { background: var(--dt-hover); color: var(--dt-text); }
/* Un tasto piatto spento e' grigio, non sbiadito: l'opacita' dimezza anche il
   fondo e il bordo, e dove non ce ne sono si legge come una cosa rotta invece
   che come una cosa che adesso non si fa. */
.dt-btn--ghost:disabled,
.dt-btn--ghost[aria-disabled="true"] {
  opacity: 1;
  color: var(--dt-text-3);
}

.dt-btn--danger {
  background: var(--dt-danger);
  border-color: var(--dt-danger);
  color: var(--dt-text-inv);
}
.dt-btn--danger:hover { background: var(--dt-danger-hover); border-color: var(--dt-danger-hover); }

/* La stessa azione dove non e' la protagonista: il rosso resta, la campitura
   no. Un "Elimina" pieno di fianco a un "Salva" pieno fa due tasti che gridano
   uguale, e il piu' pericoloso dei due grida di piu' perche' e' rosso. */
.dt-btn--danger-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--dt-danger);
}
.dt-btn--danger-ghost:hover { background: var(--dt-danger-soft); }

.dt-btn--success {
  background: var(--dt-ok);
  border-color: var(--dt-ok);
  color: var(--dt-text-inv);
}
.dt-btn--success:hover { background: var(--dt-ok-hover); border-color: var(--dt-ok-hover); }

.dt-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--dt-accent);
  padding: 0 var(--dt-sp-1);
  height: auto;
}
.dt-btn--link:hover { text-decoration: underline; }

/* Il bottone che resta premuto.
   Non e' il passaggio del dito e non e' il fuoco: e' uno stato che dura, e per
   questo si veste come la voce scelta di un segmentato — fondo pieno di
   pagina, scritta a piena forza — invece di prendersi un colore suo. Cosi'
   dentro a una barra "acceso" si legge allo stesso modo dovunque. */
.dt-btn--premuto,
.dt-btn--ghost.dt-btn--premuto {
  background: var(--dt-selected);
  border-color: var(--dt-accent-border);
  color: var(--dt-text);
  font-weight: var(--dt-fw-semibold);
}

/* Taglie */
.dt-btn--sm { height: var(--dt-h-sm); padding: 0 var(--dt-sp-4); font-size: var(--dt-fs-sm); border-radius: var(--dt-r-sm); }
.dt-btn--lg { height: var(--dt-h-lg); padding: 0 var(--dt-sp-6); font-size: var(--dt-fs-lg); }
.dt-btn--block { width: 100%; }

/* Bottone solo icona */
.dt-iconbtn {
  display: inline-grid;
  place-items: center;
  width: var(--dt-h-md);
  height: var(--dt-h-md);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--dt-r-md);
  background: transparent;
  color: var(--dt-text-2);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-iconbtn:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-iconbtn--sm { width: var(--dt-h-comando); height: var(--dt-h-comando); }
.dt-iconbtn--lg { width: var(--dt-h-lg); height: var(--dt-h-lg); }
.dt-iconbtn--bordered { border-color: var(--dt-border-strong); background: var(--dt-surface); }
.dt-iconbtn--danger { color: var(--dt-danger); }
.dt-iconbtn--danger:hover { color: var(--dt-danger); background: var(--dt-danger-soft); }
.dt-iconbtn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Gruppo bottoni / segmented control */
.dt-btngroup { display: inline-flex; }
.dt-btngroup > .dt-btn { border-radius: 0; margin-left: -1px; }
.dt-btngroup > .dt-btn:first-child { border-radius: var(--dt-r-md) 0 0 var(--dt-r-md); margin-left: 0; }
.dt-btngroup > .dt-btn:last-child { border-radius: 0 var(--dt-r-md) var(--dt-r-md) 0; }
.dt-btngroup > .dt-btn:only-child { border-radius: var(--dt-r-md); }

.dt-segmented {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--dt-surface-inset);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
}
.dt-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-2);
  border: 0;
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  padding: 0 var(--dt-sp-4);
  height: calc(var(--dt-h-md) - 6px);
  border-radius: var(--dt-r-sm);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
/* Sole icone: due quadratini, giusto lo spazio del simbolo. */
.dt-segmented--icone .dt-segmented__item {
  width: calc(var(--dt-h-md) - 6px);
  padding: 0;
}
.dt-segmented__item:hover { color: var(--dt-text); }
.dt-segmented__item--active {
  background: var(--dt-surface);
  color: var(--dt-text);
  box-shadow: var(--dt-shadow-sm);
}
/* Un segmentato che non si tocca piu': la scelta del tema, da quando lo scuro
   e' spento. Resta a schermo e resta leggibile — dice ancora quale dei due si
   sta usando — ma smorta e senza il dito che cambia forma sopra. Sparita,
   avrebbe lasciato chi la usava a cercare un pannello; smorta dice da sola
   che quella strada c'era. */
.dt-segmented--spento {
  opacity: 0.55;
  background: var(--dt-surface-2);
}
.dt-segmented__item:disabled { cursor: default; }
.dt-segmented__item:disabled:hover { color: var(--dt-text-2); }
.dt-segmented__item--active:disabled:hover { color: var(--dt-text); }
/* La fila dei gettoni: come il segmentato, ma se ne accendono quanti si
   vuole. Stesso riquadro incassato e stessi tasti piatti dentro — e' la stessa
   famiglia, e una seconda forma per la stessa cosa si imparerebbe due volte.
   Va a capo: i gettoni sono tanti quante le persone, e a finestra stretta una
   fila che scorre nasconde proprio quello che si sta cercando. */
.dt-gettoni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px;
  gap: 2px;
  background: var(--dt-surface-inset);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
}
.dt-gettone {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  border: 0;
  background: transparent;
  color: var(--dt-text-3);
  font: inherit;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  padding: 0 var(--dt-sp-4);
  height: calc(var(--dt-h-md) - 6px);
  border-radius: var(--dt-r-sm);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-gettone:hover { color: var(--dt-text); }
/* Spento perche' non c'e' niente da fare: "Tutti" quando ci sono gia' tutti.
   Resta al suo posto e si ingrigisce — un comando che sparisce farebbe ballare
   la fila ogni volta che si accende l'ultimo. */
.dt-gettone:disabled {
  cursor: default;
  opacity: 0.45;
}
.dt-gettone:disabled:hover { color: var(--dt-text-3); }
/* Acceso: il fondo pieno del segmentato scelto. Spento resta piatto e grigio —
   c'e', ma e' stato messo via. */
.dt-gettone--acceso {
  background: var(--dt-surface);
  color: var(--dt-text);
  box-shadow: var(--dt-shadow-sm);
}
/* L'ultimo comando della fila non e' un gettone e non si accende: sta di la'
   dal filo. */
.dt-gettoni__filo {
  width: 1px;
  align-self: stretch;
  margin: 2px var(--dt-sp-3);
  background: var(--dt-border);
}

/* --------------------------------------------------------------------------
   6. Campi form
   -------------------------------------------------------------------------- */

/* L'etichetta sta staccata dal suo campo di sei pixel e non di quattro: sotto
   al campo, di aiuto, ce ne sono altri quattro, e con la stessa misura sopra e
   sotto non si capiva a quale dei due campi appartenesse una riga. */
.dt-field { display: flex; flex-direction: column; gap: var(--dt-sp-3); }
.dt-field__label {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-text-2);
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
}
.dt-field__req { color: var(--dt-danger); }
.dt-field__hint { font-size: var(--dt-fs-xs); color: var(--dt-text-3); }
.dt-field__error { font-size: var(--dt-fs-xs); color: var(--dt-danger); display: flex; align-items: center; gap: var(--dt-sp-2); }

/* Form orizzontale denso (label a sinistra) — tipico data entry ERP */
.dt-formgrid {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: var(--dt-sp-3) var(--dt-sp-5);
  align-items: center;
}
.dt-formgrid > .dt-field__label { justify-content: flex-end; text-align: right; }

/* Griglia di campi a colonne uguali. Le larghezze le decide la griglia, non i
   controlli: `1fr` a testa, cosi' la casella di testo, la tendina e il gruppo
   con l'unita' attaccata vengono tutti della stessa misura e le righe si
   incolonnano. Il `minmax(0, ...)` e' quello che tiene: senza, una tendina con
   una voce lunga porta la sua colonna oltre l'`1fr` e sbilancia la riga.
   Lo stacco fra le righe e' piu' largo di quello fra le colonne, perche' sotto
   ogni campo c'e' il suo hint e serve aria per non attaccarlo alla label di
   sotto. `align-items: start` perche' un campo con l'hint su due righe non
   deve tirare in mezzo il vicino che l'hint non ce l'ha. */
.dt-campi {
  /* Le righe stanno in cima e non si stirano: di fianco c'e' la colonna della
     tavolozza, che e' alta il doppio, e senza questo i due campi in fondo
     scendevano a meta' maschera per riempire il vuoto. */
  align-content: start;
  display: grid;
  grid-template-columns: repeat(var(--dt-campi-colonne, 2), minmax(0, 1fr));
  gap: var(--dt-sp-5) var(--dt-sp-4);
  align-items: start;
}
/* Il campo che vale per tutta la riga: il nome, di solito, che e' lungo e non
   ha senso stringerlo a meta' finestra. */
.dt-campi > .dt-tutta { grid-column: 1 / -1; }
/* Due gradini, non uno. A tre colonne si sta solo nella maschera larga con la
   finestra larga; appena si stringe, tre caselle in fila diventano tre caselle
   troppo corte per quello che ci va dentro (un nome di negozio, una data) e
   allora si scende a due. Le griglie gia' a due colonne questo gradino non lo
   sentono: `repeat(2, ...)` su una griglia da due non cambia niente. */
@media (max-width: 900px) {
  .dt-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dt-campi { grid-template-columns: minmax(0, 1fr); }
}


.dt-input,
.dt-select,
.dt-textarea {
  width: 100%;
  height: var(--dt-h-md);
  padding: 0 var(--dt-sp-3);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-sm);
  color: var(--dt-text);
  font-family: inherit;
  font-size: var(--dt-fs-md);
  transition: border-color var(--dt-t-fast), box-shadow var(--dt-t-fast), background var(--dt-t-fast);
}
.dt-textarea { height: auto; padding: var(--dt-sp-3); resize: vertical; min-height: 64px; line-height: var(--dt-lh-normal); }

.dt-input::placeholder,
.dt-textarea::placeholder { color: var(--dt-text-3); }

.dt-input:hover:not(:disabled),
.dt-select:hover:not(:disabled),
.dt-textarea:hover:not(:disabled) { border-color: var(--dt-text-3); }

.dt-input:focus,
.dt-select:focus,
.dt-textarea:focus {
  outline: none;
  border-color: var(--dt-accent);
  box-shadow: 0 0 0 3px var(--dt-accent-soft);
}

.dt-input:disabled,
.dt-select:disabled,
.dt-textarea:disabled {
  background: var(--dt-surface-inset);
  color: var(--dt-text-3);
  cursor: not-allowed;
}
.dt-input[readonly] { background: var(--dt-surface-inset); }

.dt-input--invalid,
.dt-select--invalid,
.dt-textarea--invalid {
  border-color: var(--dt-danger);
}
.dt-input--invalid:focus { box-shadow: 0 0 0 3px var(--dt-danger-soft); }

.dt-input--sm { height: var(--dt-h-sm); font-size: var(--dt-fs-sm); }
.dt-input--lg { height: var(--dt-h-lg); font-size: var(--dt-fs-lg); }
.dt-input--num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--dt-font-mono); }

/* La tendina a discesa porta la stessa freccia di tutto il resto.
   Era un triangolino pieno, disegnato con due sfumature incrociate: l'unico
   segno "si apre in giu'" di tutta l'interfaccia a non essere la `chevron-down`
   del set: le sezioni, le linguette e le tendine dell'albero hanno sempre avuto
   quella. Due segni per la stessa cosa vogliono dire che chi guarda deve
   impararli tutti e due.
   Sta in un `url()` e non in un'icona vera perche' dentro a un `<select>` non
   ci si mettono elementi: il colore quindi non puo' arrivare da `currentColor`
   e sta scritto nel token, un valore per tema. */
.dt-select {
  appearance: none;
  padding-right: var(--dt-sp-8);
  background-image: var(--dt-freccia-giu);
  background-position: right var(--dt-sp-3) center;
  background-size: 13px 13px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Input con affissi (icona, unita di misura, valuta) */
.dt-inputgroup {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface);
  overflow: hidden;
  transition: border-color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-inputgroup:focus-within {
  border-color: var(--dt-accent);
  box-shadow: 0 0 0 3px var(--dt-accent-soft);
}
/* Il campo che non si legge: il bordo e' del riquadro, come per la casella
   sola in `.dt-input--invalid`, e resta rosso anche col fuoco dentro. */
.dt-inputgroup--invalid,
.dt-inputgroup--invalid:focus-within { border-color: var(--dt-danger); }
.dt-inputgroup--invalid:focus-within { box-shadow: 0 0 0 3px var(--dt-danger-soft); }
.dt-inputgroup .dt-input {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.dt-inputgroup .dt-input:focus { box-shadow: none; }
.dt-inputgroup__affix {
  display: grid;
  place-items: center;
  padding: 0 var(--dt-sp-3);
  background: var(--dt-surface-inset);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-sm);
  white-space: nowrap;
  flex: none;
}
.dt-inputgroup__affix--plain { background: transparent; }
/* Il tastino dentro al riquadro di un campo: l'occhio che scopre il PIN.
   Quadrato e alto quanto la casella, che col dito e' il bersaglio pieno.
   Premuto resta acceso, come ogni tasto che accende uno stato. */
.dt-inputgroup__tasto {
  min-width: var(--dt-h-md);
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--dt-text-3);
}
.dt-inputgroup__tasto:hover:not(:disabled) { color: var(--dt-text); }
.dt-inputgroup__tasto[aria-pressed="true"] { color: var(--dt-accent); }
.dt-inputgroup__tasto:disabled { cursor: default; }
/* Le cifre del PIN coperte dai puntini. Resta un campo di testo, e non da
   password: vedi `CampoPin`. */
.dt-input--coperto { -webkit-text-security: disc; }
/* Il PIN sta accanto al nome utente, e la cornice non lo deve far crescere
   di un filo sopra e uno sotto: la casella dentro glieli cede. */
.dt-inputgroup--pin .dt-input { height: calc(var(--dt-h-md) - 2px); }
/* La barra di ricerca la ✕ ce l'ha gia' sua, dentro il riquadro e con la lente
   in pari: quella che il motore attacca da solo a `type=search` sarebbe la
   seconda, con un altro disegno e in un altro posto. Via anche le decorazioni
   di WebKit, che sull'altro motore comparirebbero al suo posto. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* Numero col dito: `−` e `+` ai lati, larghi quanto un pollice, e il campo
   scrivibile in mezzo — da 1 a 24 a colpi di `+` non ci si arriva.
   Un riquadro solo con i pezzi divisi da un filo, come le barre di comandi:
   e' un oggetto, non tre bottoni vicini. */
.dt-stepper {
  display: flex;
  align-items: stretch;
  height: var(--dt-h-tocco);
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface);
  overflow: hidden;
  transition: border-color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-stepper:focus-within {
  border-color: var(--dt-accent);
  box-shadow: 0 0 0 3px var(--dt-accent-soft);
}
.dt-stepper__passo {
  flex: none;
  width: var(--dt-h-tocco);
  display: grid;
  place-items: center;
  border: 0;
  background: var(--dt-surface-inset);
  color: var(--dt-text-2);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast), opacity var(--dt-t-fast);
}
.dt-stepper__passo:first-child { border-right: 1px solid var(--dt-border); }
.dt-stepper__passo:last-child { border-left: 1px solid var(--dt-border); }
.dt-stepper__passo:hover:not(:disabled) { background: var(--dt-hover); color: var(--dt-text); }
/* Arrivato al fondo della scala il tasto resta dov'e' e si spegne: sparendo
   sposterebbe l'altro sotto al dito che sta gia' scendendo. */
.dt-stepper__passo:disabled { opacity: 0.35; cursor: not-allowed; }
.dt-stepper__campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--dt-text);
  text-align: center;
  font-family: var(--dt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--dt-fs-lg);
}
.dt-stepper__campo:focus { outline: none; }
.dt-stepper__campo:disabled { opacity: 0.45; }
.dt-stepper__unita {
  display: grid;
  place-items: center;
  padding-right: var(--dt-sp-3);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-sm);
  white-space: nowrap;
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Checkbox / radio / switch
   -------------------------------------------------------------------------- */

.dt-check {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-3);
  cursor: pointer;
  font-size: var(--dt-fs-md);
  user-select: none;
}
.dt-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.dt-check__box {
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-xs);
  background: var(--dt-surface);
  display: grid;
  place-items: center;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast);
}
.dt-check__box::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--dt-text-inv);
  border-bottom: 2px solid var(--dt-text-inv);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform var(--dt-t-fast);
  margin-top: -2px;
}
.dt-check input:checked + .dt-check__box {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
}
.dt-check input:checked + .dt-check__box::after { transform: rotate(-45deg) scale(1); }
.dt-check input:indeterminate + .dt-check__box {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
}
.dt-check input:indeterminate + .dt-check__box::after {
  transform: none;
  width: 8px;
  height: 0;
  border-left: 0;
  border-bottom: 2px solid var(--dt-text-inv);
  margin-top: 0;
}
.dt-check input:focus-visible + .dt-check__box { box-shadow: 0 0 0 3px var(--dt-accent-soft); }
.dt-check input:disabled + .dt-check__box { opacity: 0.45; }
.dt-check:has(input:disabled) { cursor: not-allowed; color: var(--dt-text-3); }

/* radio */
.dt-check--radio .dt-check__box { border-radius: var(--dt-r-full); }
.dt-check--radio .dt-check__box::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: var(--dt-r-full);
  background: var(--dt-text-inv);
  transform: scale(0);
  margin: 0;
}
.dt-check--radio input:checked + .dt-check__box::after { transform: scale(1); }

/* switch */
.dt-switch { display: inline-flex; align-items: center; gap: var(--dt-sp-3); cursor: pointer; user-select: none; }
.dt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dt-switch__track {
  width: 30px;
  height: 17px;
  flex: none;
  border-radius: var(--dt-r-full);
  background: var(--dt-border-strong);
  position: relative;
  transition: background var(--dt-t-med);
}
.dt-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: var(--dt-r-full);
  background: #fff;
  box-shadow: var(--dt-shadow-sm);
  transition: transform var(--dt-t-med);
}
.dt-switch input:checked + .dt-switch__track { background: var(--dt-accent); }
.dt-switch input:checked + .dt-switch__track::after {
  transform: translateX(13px);
  background: var(--dt-text-inv);
}
.dt-switch input:focus-visible + .dt-switch__track { box-shadow: 0 0 0 3px var(--dt-accent-soft); }
.dt-switch input:disabled + .dt-switch__track { opacity: 0.45; }

/* L'elenco: la scelta di **una** voce fra una dozzina, in colonna.

   Erano mattonelle — caselle grosse quanto un pollice, in griglia, ognuna con
   la sua campitura velata. Due conti sbagliati insieme: dodici campiture
   insegnavano una corrispondenza fra colore e attivita' che nel programma non
   esiste piu' (il colore e' del negozio, e di nessun altro), e dodici caselle
   da dito riempivano la finestra prima ancora della prima domanda. Un elenco
   costa una riga per voce, e il bersaglio non si stringe: una riga intera e'
   piu' larga di una casella in griglia.

   **Bianco.** Nessun fondo, ne' pieno ne' velato: la pagina, e basta. A dire
   quale voce si e' presa e' la spunta a destra — un segno d'inchiostro, che si
   vede da mezza stanza e non chiede un colore per farsi notare.

   Un filo fra una riga e l'altra e una cornice sola intorno a tutte: sono un
   elenco, non dodici scatole. Oltre le sei righe scorre per conto suo invece
   di allungare la finestra — le domande che vengono dopo devono restare in
   vista, e un elenco che si scorre lo dice da se' con la riga tagliata in
   fondo. */
.dt-elenco {
  display: flex;
  flex-direction: column;
  /* Cinque righe e mezza, non sei: la mezza riga tagliata in fondo e' l'unica
     cosa che dice "ce ne sono altre" senza scriverlo. A sei tonde l'elenco
     finisce pulito sul bordo e sembra finito davvero — e chi cerca la pausa
     pranzo smette di cercarla. */
  max-height: calc(var(--dt-h-tocco) * 5.5);
  overflow-y: auto;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  /* Qui non si trattiene niente. C'era un `overscroll-behavior: contain`, e in
     un elenco piu' corto del suo tetto — cinque attivita' in tutto, e di righe
     da scorrere non ce n'e' nemmeno una — fermava la rotella in un riquadro
     che non aveva dove andare: col puntatore sopra all'elenco non si muoveva
     niente, due dita piu' in la' sullo sfondo la stessa rotella muoveva la
     maschera. Un elenco che scorre davvero, arrivato in fondo, adesso passa il
     gesto alla maschera dietro: e' quello che fa ogni altro elenco al mondo, e
     costa infinitamente meno di un elenco che sembra rotto. */
}
/* La copertina se lo toglie, il tetto: li' l'elenco e' l'unico contenuto e le
   domande dopo non esistono ancora — la ragione del tetto non c'e', e uno
   scorrimento dentro a una finestra che scorre sarebbe il muro dentro al
   muro. Nelle altre schermate il tetto resta.

   E col tetto se ne va anche lo scorrimento, non solo il suo motivo: senza
   tetto l'elenco non ha mai niente da scorrere, e un riquadro che scorre a
   vuoto e' un posto dove la rotella si perde. `clip` taglia gli spigoli delle
   righe sotto agli angoli tondi come faceva `auto`, ma non e' un riquadro che
   scorre — e quello che non scorre lascia passare. */
.dt-elenco--pieno {
  max-height: none;
  overflow: clip;
}
.dt-elenco__voce {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--dt-sp-4);
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  border: none;
  background: none;
  color: var(--dt-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-elenco__voce + .dt-elenco__voce { border-top: 1px solid var(--dt-border-soft); }
/* Sotto al dito non si accende un fondo: si accende un filo d'inchiostro sul
   bordo sinistro. Un velo grigio sulla riga sarebbe la stessa campitura smorta
   che si e' appena tolta, e per mezzo secondo direbbe "presa" al posto della
   spunta. */
.dt-elenco__voce:hover:not(:disabled) {
  box-shadow: inset 2px 0 0 var(--dt-border-strong);
}
.dt-elenco__voce:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
.dt-elenco__voce:disabled { opacity: 0.4; cursor: not-allowed; }
/* La riga presa: il nome pesa un gradino di piu' e il bordo sinistro porta il
   pieno d'inchiostro. Sono due segni oltre alla spunta perche' scorrendo
   l'elenco con il pollice sopra la spunta e' il pollice a coprirla. */
.dt-elenco__voce--scelta {
  box-shadow: inset 3px 0 0 var(--dt-accent);
}
.dt-elenco__voce--scelta:hover:not(:disabled) {
  box-shadow: inset 3px 0 0 var(--dt-accent);
}
.dt-elenco__voce--scelta .dt-elenco__nome { font-weight: var(--dt-fw-semibold); }
/* Il segno sta nella sua corsia, come nell'albero del catalogo: i nomi devono
   cominciare tutti dalla stessa colonna, se no l'elenco non si legge in
   colonna affatto. Smorto finche' la riga non e' quella presa — e' un
   contorno, non il dato. */
.dt-elenco__segno {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: var(--dt-text-3);
}
.dt-elenco__voce--scelta .dt-elenco__segno { color: var(--dt-text); }
.dt-elenco__nome {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--dt-fs-md);
  line-height: var(--dt-lh-tight);
}
/* Il posto della spunta c'e' sempre, anche vuoto: comparendo dal nulla
   sposterebbe il nome a ogni tocco. */
.dt-elenco__spunta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--dt-accent);
}
/* Un titoletto dentro all'elenco: da qui in giu' le righe sono di un altro
   genere. Sta dentro al riquadro e non sopra a tre riquadri — le famiglie di
   una scelta sola sono un elenco solo con tre capitoli — e veste come il
   reparto di una tendina: maiuscoletto smorto, e di fianco, ancora piu'
   piano, cosa distingue questo capitolo. Il primo non ha filo sopra: sopra
   c'e' il bordo del riquadro. */
.dt-elenco__titolo {
  display: flex;
  flex: none;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dt-sp-2) var(--dt-sp-3);
  padding: var(--dt-sp-3) var(--dt-sp-4) var(--dt-sp-2);
  border-top: 1px solid var(--dt-border-soft);
  background: var(--dt-surface-2);
}
.dt-elenco__titolo:first-child { border-top: 0; }
.dt-elenco__capitolo {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-elenco__sotto {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
}
/* Il filo fra le righe lo tiene la riga che segue un'altra riga; dopo un
   titoletto il filo ce l'ha gia' lui sotto ai piedi, e uno in piu' sarebbe
   due. */
.dt-elenco__titolo + .dt-elenco__voce { border-top: 1px solid var(--dt-border-soft); }

/* --------------------------------------------------------------------------
   8. Slider
   -------------------------------------------------------------------------- */

.dt-slider { display: flex; flex-direction: column; gap: var(--dt-sp-2); width: 100%; }
.dt-slider__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--dt-sp-3); }
.dt-slider__value {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dt-text);
  background: var(--dt-surface-inset);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-sm);
  padding: 0 var(--dt-sp-2);
}
.dt-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.dt-slider__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--dt-r-full);
  background: linear-gradient(
    to right,
    var(--dt-accent) 0%,
    var(--dt-accent) var(--dt-slider-pct, 50%),
    var(--dt-border) var(--dt-slider-pct, 50%),
    var(--dt-border) 100%
  );
}
.dt-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border-radius: var(--dt-r-full);
  background: var(--dt-surface);
  border: 2px solid var(--dt-accent);
  box-shadow: var(--dt-shadow-sm);
  transition: transform var(--dt-t-fast);
}
.dt-slider__input:hover::-webkit-slider-thumb { transform: scale(1.12); }
.dt-slider__input:active::-webkit-slider-thumb { transform: scale(1.2); }
.dt-slider__input::-moz-range-track {
  height: 4px;
  border-radius: var(--dt-r-full);
  background: var(--dt-border);
}
.dt-slider__input::-moz-range-progress {
  height: 4px;
  border-radius: var(--dt-r-full);
  background: var(--dt-accent);
}
.dt-slider__input::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: var(--dt-r-full);
  background: var(--dt-surface);
  border: 2px solid var(--dt-accent);
}
.dt-slider__input:disabled { opacity: 0.45; cursor: not-allowed; }
.dt-slider__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   9. Badge / pill / stato
   -------------------------------------------------------------------------- */

.dt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  height: 20px;
  padding: 0 var(--dt-sp-3);
  border-radius: var(--dt-r-sm);
  border: 1px solid transparent;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.dt-badge--pill { border-radius: var(--dt-r-full); padding: 0 var(--dt-sp-4); }
.dt-badge--neutral { background: var(--dt-surface-3); border-color: var(--dt-border); color: var(--dt-text-2); }
.dt-badge--accent  { background: var(--dt-accent-soft); border-color: var(--dt-accent-border); color: var(--dt-accent); }
.dt-badge--success { background: var(--dt-ok-soft); border-color: var(--dt-ok-border); color: var(--dt-ok); }
.dt-badge--warning { background: var(--dt-warn-soft); border-color: var(--dt-warn-border); color: var(--dt-warn); }
.dt-badge--danger  { background: var(--dt-danger-soft); border-color: var(--dt-danger-border); color: var(--dt-danger); }
.dt-badge--info    { background: var(--dt-info-soft); border-color: var(--dt-info-border); color: var(--dt-info); }

.dt-dot { width: 6px; height: 6px; border-radius: var(--dt-r-full); background: currentColor; flex: none; }

.dt-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--dt-r-full);
  background: var(--dt-danger);
  color: var(--dt-text-inv);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-bold);
}

/* --------------------------------------------------------------------------
   10. Superfici: card, panel, kpi, empty
   -------------------------------------------------------------------------- */

.dt-card {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-sm);
  overflow: hidden;
}
/* Due fasce, non una riga di tre cose: sopra il titolo con i comandi in fondo,
   sotto la descrizione a tutta larghezza. Il perche' sta nel componente
   `CardHead` — la descrizione era l'unica delle tre che sa andare a capo, e a
   finestra stretta era sempre lei a cedere.
   Non c'e' una soglia: la fascia di sopra si spezza da se' quando i comandi non
   stanno di fianco al titolo, la descrizione sta larga come il riquadro
   sempre. */
.dt-card__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-5) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border-soft);
  background: var(--dt-surface-2);
}
.dt-card__head__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-4) var(--dt-sp-5);
}
/* Il titolo non si stira, i comandi stanno in fondo per conto loro: fra i due
   spinge il vuoto. Stirandosi (`dt-grow`) il titolo si prendeva lo spazio
   libero della riga, e a quel punto la fila dei comandi era larga quel che
   restava invece di quel che le serve.
   A spingere e' il titolo e non i comandi: la regola era scritta sulla fila
   (`.dt-row`), e una testata che di comandi ne ha uno solo — «Nuova attivita'»
   — il tasto non lo mette in fila, lo passa nudo. Quel tasto restava appiccicato
   al titolo, in mezzo alla testata, mentre su tutte le altre schede stava a
   destra. Col margine sul titolo va in fondo qualunque cosa gli si passi. */
.dt-card__head__riga > .dt-grow { flex-grow: 0; }
.dt-card__head__riga > .dt-card__title { margin-right: auto; }
/* Sotto i 900px la fila dei comandi va a capo dentro di se'. Sopra no, e la
   differenza conta: stretta la finestra, i comandi che non ci stanno vanno
   spezzati su due righe; larga, mandare a capo un tasto quando basterebbe
   stringere di trenta pixel il campo di ricerca fa due righe dove ne bastava
   una. Una casella di ricerca stretta si scrive uguale. */
@media (max-width: 900px) {
  .dt-card__head__riga > .dt-row { flex-wrap: wrap; }
}
/* Il campo di ricerca dentro a una testata nasce largo quattordici caratteri e
   da li' si stira per prendere quel che avanza. Di suo e' larga il cento per
   cento del posto che ha — buono in una maschera, dove sta da solo in colonna —
   e in una barra di comandi quel cento per cento e' la misura con cui il flex
   decide se la riga ci sta: la riga non ci stava mai, e i filtri finivano a capo
   anche su un monitor dove c'era posto per tutti. Che si stringa e' giusto: una
   casella di ricerca stretta si scrive uguale, una fila di filtri spezzata in
   due si legge peggio. */
.dt-card__head__riga .dt-inputgroup { flex: 1 1 14rem; width: auto; }
.dt-card__title { font-size: var(--dt-fs-lg); font-weight: var(--dt-fw-semibold); letter-spacing: -0.01em; }
.dt-card__sub { font-size: var(--dt-fs-sm); color: var(--dt-text-2); }
.dt-card__body { padding: var(--dt-sp-6); }
.dt-card__body--flush { padding: 0; }
/* Card alta quanto lo spazio rimasto: dentro ci sta chi scorre per conto
   proprio, e la pagina non prende altezza in piu'. */
.dt-card--pieno {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.dt-card--pieno .dt-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.dt-card__foot {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4) var(--dt-sp-6);
  border-top: 1px solid var(--dt-border-soft);
  background: var(--dt-surface-2);
}

.dt-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-5);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  min-width: 150px;
  /* In fila, tutti alti uguale: la terza cifra non ha il confronto col mese
     prima da scrivere sotto, e senza questo il suo riquadro finiva un gradino
     piu' corto degli altri — una fila di quattro con un dente in mezzo. */
  align-self: stretch;
}
.dt-kpi__label { font-size: var(--dt-fs-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--dt-text-3); font-weight: var(--dt-fw-semibold); }
.dt-kpi__value { font-size: var(--dt-fs-2xl); font-weight: var(--dt-fw-semibold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dt-kpi__delta { font-size: var(--dt-fs-sm); display: inline-flex; align-items: center; gap: var(--dt-sp-2); }
.dt-kpi__delta--up { color: var(--dt-ok); }
.dt-kpi__delta--down { color: var(--dt-danger); }

.dt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-10) var(--dt-sp-6);
  text-align: center;
  color: var(--dt-text-2);
}
.dt-empty__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--dt-r-full);
  background: var(--dt-surface-3);
  color: var(--dt-text-3);
}
.dt-empty__title { font-size: var(--dt-fs-lg); font-weight: var(--dt-fw-semibold); color: var(--dt-text); }

/* Campione colore (utile per moduli tessili: cartelle colore, filati) */
.dt-swatch { display: flex; flex-direction: column; gap: var(--dt-sp-2); width: 92px; }
.dt-swatch__chip {
  height: 46px;
  border-radius: var(--dt-r-md);
  border: 1px solid var(--dt-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.dt-swatch__name { font-size: var(--dt-fs-xs); font-weight: var(--dt-fw-medium); }
.dt-swatch__code { font-size: var(--dt-fs-xs); color: var(--dt-text-3); font-family: var(--dt-font-mono); }

/* Mattonella di modulo: il launcher la usa per aprire i moduli dell'ERP. */
.dt-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: var(--dt-sp-4);
}
.dt-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-sp-4);
  width: 100%;
  padding: var(--dt-sp-5);
  text-align: left;
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-sm);
  color: inherit;
  font: inherit;
  font-size: var(--dt-fs-md);
  cursor: pointer;
  transition: border-color var(--dt-t-fast), background var(--dt-t-fast),
    box-shadow var(--dt-t-fast);
}
.dt-tile:hover {
  border-color: var(--dt-accent-border);
  background: var(--dt-hover);
  box-shadow: var(--dt-shadow-md);
}
.dt-tile:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 1px; }
.dt-tile--disabled,
.dt-tile--disabled:hover {
  cursor: not-allowed;
  background: var(--dt-surface);
  border-color: var(--dt-border);
  box-shadow: none;
  color: var(--dt-text-3);
}
.dt-tile__icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--dt-r-md);
  background: var(--dt-accent-soft);
  color: var(--dt-accent);
}
.dt-tile--disabled .dt-tile__icon { background: var(--dt-surface-3); color: var(--dt-text-3); }
.dt-tile__body { display: flex; flex-direction: column; gap: var(--dt-sp-2); min-width: 0; flex: 1; }
.dt-tile__title {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  font-size: var(--dt-fs-lg);
  font-weight: var(--dt-fw-semibold);
}
.dt-tile__desc { font-size: var(--dt-fs-sm); color: var(--dt-text-2); line-height: var(--dt-lh-normal); }
.dt-tile__foot { display: flex; align-items: center; gap: var(--dt-sp-3); margin-top: var(--dt-sp-1); }

/* --------------------------------------------------------------------------
   11. Tabs
   -------------------------------------------------------------------------- */

/* La riga sta ferma dove l'ha messa il filo, e le linguette scorrono di lato
   quando non ci stanno: mandarle a capo farebbe scendere di venti pixel tutta
   la schermata mentre si stringe la finestra. Il padding si interpola con la
   larghezza invece di scattare a una soglia. */
.dt-tabs { position: relative; border-bottom: 1px solid var(--dt-border); }
.dt-tabs__lista {
  display: flex;
  align-items: stretch;
  gap: var(--dt-sp-1);
  /* La sottolineatura della linguetta attiva copre il filo invece di
     galleggiarci sopra: dentro al riquadro che scorre, cosi' non viene
     tagliata. */
  margin-bottom: -1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.dt-tabs__lista::-webkit-scrollbar { display: none; }
.dt-tabs__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  flex: none;
  border: 0;
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-medium);
  padding: var(--dt-sp-3) clamp(var(--dt-sp-3), 1.3vw, var(--dt-sp-5));
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dt-t-fast);
}
.dt-tabs__item:hover { color: var(--dt-text); }
.dt-tabs__item--active { color: var(--dt-accent); }
.dt-tabs__item--active::after {
  content: "";
  position: absolute;
  left: var(--dt-sp-3);
  right: var(--dt-sp-3);
  bottom: 0;
  height: 2px;
  background: var(--dt-accent);
  border-radius: var(--dt-r-full) var(--dt-r-full) 0 0;
}
.dt-tabs__item:disabled { opacity: 0.45; cursor: not-allowed; }
.dt-tabs__item svg { flex: none; opacity: 0.9; }

/* Il filo che separa due gruppi di linguette: rientrato sopra e sotto, come i
   divisori dentro alle barre di comandi. */
.dt-tabs__filo {
  flex: none;
  width: 1px;
  margin: var(--dt-sp-3) var(--dt-sp-2);
  background: var(--dt-border);
}

/* Il conto sulla linguetta: smorto per default, perche' quasi sempre e' solo
   quante righe ci sono. Prende una tinta solo quando dice che c'e' del lavoro
   fermo. */
.dt-tabs__conto {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 17px;
  padding: 0 5px;
  border-radius: var(--dt-r-full);
  background: var(--dt-surface-3);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.dt-tabs__conto--avviso { background: var(--dt-warn-soft); color: var(--dt-warn); }
.dt-tabs__conto--rosso { background: var(--dt-danger-soft); color: var(--dt-danger); }
.dt-tabs__item--active .dt-tabs__conto { background: var(--dt-accent-soft); color: var(--dt-accent); }
.dt-tabs__item--active .dt-tabs__conto--avviso { background: var(--dt-warn-soft); color: var(--dt-warn); }

/* Sezione che si apre e si chiude: il soffietto.

   Si chiamava `dt-piega`, ed era il nome sbagliato: la piega e' la riga in
   cui il foglio della bolla si gira (`.dt-piega`, piu' sotto), questa e' la
   sezione a soffietto di una maschera.

   L'altezza si interpola sugli stessi nodi: la pancia e' una griglia a una
   riga che passa da 0fr a 1fr, cioe' da "quanto serve, moltiplicato zero" a
   "quanto serve". E' l'unico modo di animare fino al contenuto vero senza
   misurarlo in JavaScript e senza un max-height a occhio, che o taglia il
   contenuto lungo o fa partire la chiusura in ritardo su quello corto. */
.dt-soffietto {
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
}
.dt-soffietto__testa {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  width: 100%;
  min-height: var(--dt-h-lg);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  border: 0;
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  text-align: left;
  cursor: pointer;
}
.dt-soffietto__testa:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent-border);
  border-radius: var(--dt-r-md);
}
.dt-soffietto__freccia {
  display: inline-flex;
  color: var(--dt-text-3);
  transform: rotate(-90deg);
  transition: transform var(--dt-t-med);
}
.dt-soffietto--aperto .dt-soffietto__freccia { transform: rotate(0deg); }
/* Il conto sta appiccicato al titolo e non in fondo alla barra: e' il titolo
   che conta, e un numero solo dall'altra parte del riquadro non si capisce a
   che cosa si riferisca. E' `margin-right: auto` a tenere vuoto il resto. */
.dt-soffietto__titolo { flex: 0 1 auto; }
.dt-soffietto__conto {
  margin-right: auto;
  padding: 0 var(--dt-sp-3);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface-3);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}
.dt-soffietto__pancia {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dt-t-med);
}
.dt-soffietto--aperto .dt-soffietto__pancia { grid-template-rows: 1fr; }
/* Nudo di proposito: e' la cella che si schiaccia, e con `border-box` un
   padding qui non si schiaccerebbe con lei — resterebbero i suoi pixel aperti
   anche a sezione chiusa. Il margine sta un livello piu' sotto. */
.dt-soffietto__dentro {
  overflow: hidden;
  min-height: 0;
}
.dt-soffietto__corpo { padding: 0 var(--dt-sp-4) var(--dt-sp-4); }

/* --------------------------------------------------------------------------
   11-bis. La barra del periodo e il quadrante
   -------------------------------------------------------------------------- */

/* Di che periodo si sta parlando. Sta in cima al report perche' la domanda e'
   una sola per tutto quello che le sta sotto — l'elenco, i conti, i fogli del
   resoconto — ed e' la prima che si fa.

   **Il periodo e' una cosa sola che si preme, con un passo per parte.** Prima
   la barra era una fila di comandi diversi a seconda della forma — due
   tendine per il mese, una sola per l'anno, due caselle di data — e scegliendo
   una forma la barra si rifaceva sotto il dito: le frecce si spostavano, la
   riga in coda si allungava, e quello che si stava per premere finiva da
   un'altra parte. Adesso la barra ha sempre lo stesso disegno — un passo, il
   nome, un passo — e a cambiare e' solo quello che c'e' scritto sul tasto in
   mezzo. La forma si sceglie dentro al quadrante, il pannello appeso al
   tasto: quello che cambia sta dentro al pannello, che si apre apposta per
   farlo cambiare.

   Il nome del periodo e' la scritta piu' grande della schermata, perche' e'
   il titolo del foglio. Sotto, in piccolo, i giorni che comprende e quanti
   sono: e' la riga che prima stava in coda alla barra, di la' da un filo,
   dove nessuno la leggeva.

   Lo storico delle ricerche sta *fuori* dalla barra, a fianco. Dentro
   sembrava un pezzo del periodo, e non lo e': rimette su una ricerca intera —
   periodo, parola, clausole, colonne — cioe' tutto quello che le due barre
   dicono insieme. */
.dt-periodo-riga {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-4);
}
.dt-periodo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-sm);
}
/* Dice di cosa parla la fila, e non si preme: peso da etichetta, non da
   titolo. */
.dt-periodo__voce {
  padding-left: var(--dt-sp-2);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-periodo__filo {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin: var(--dt-sp-2) var(--dt-sp-1);
  background: var(--dt-border);
}
/* Il passo indietro, il nome, il passo avanti: un gruppo solo, cosi' quando la
   barra va a capo non resta una freccia di qua e una di la'. Ed e' lui a
   reggere il quadrante, che si apre incolonnato col tasto e non con la
   barra. */
.dt-periodo__passo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dt-sp-1);
  min-width: 0;
}
.dt-periodo__tasto {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-width: 0;
  padding: var(--dt-sp-2) var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-md);
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
.dt-periodo__tasto:hover { background: var(--dt-hover); }
.dt-periodo__tasto[aria-expanded="true"] { background: var(--dt-selected); }
.dt-periodo__scritte {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dt-periodo__nome {
  font-size: var(--dt-fs-lg);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
  letter-spacing: -0.01em;
}
/* I giorni compresi e quanti sono. Sotto al nome e non a fianco: a fianco
   sarebbe una seconda cosa da leggere, sotto e' la stessa cosa detta per
   esteso. */
.dt-periodo__esteso {
  font-size: var(--dt-fs-xs);
  line-height: var(--dt-lh-tight);
  color: var(--dt-text-3);
}
.dt-periodo__caret {
  flex: none;
  color: var(--dt-text-3);
  transition: transform var(--dt-t-fast);
}
.dt-periodo__tasto[aria-expanded="true"] .dt-periodo__caret { transform: rotate(180deg); }
/* «Oggi» in fondo alla barra, come il conto in fondo alla barra della ricerca.
   Quando il periodo comprende gia' oggi non sparisce: si ingrigisce, e cosi'
   dice da sola dove si e'. */
.dt-periodo__coda {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  margin-left: auto;
}

/* Il quadrante: la forma in cima, e sotto le caselle fra cui scegliere. Una
   fascia per mestiere, separate dal filo che il pannello mette da se'. */
.dt-quadrante {
  top: calc(100% + var(--dt-sp-2));
  bottom: auto;
  left: 0;
  right: auto;
  width: clamp(15rem, 78vw, 18.5rem);
  background: var(--dt-surface);
}
.dt-quadrante__modi { padding: var(--dt-sp-3); }
.dt-quadrante__modi .dt-segmented { display: flex; width: 100%; }
.dt-quadrante__modi .dt-segmented__item { flex: 1 1 0; padding: 0 var(--dt-sp-2); }
/* Da che anno — o da che mese, con le settimane — si stanno guardando le
   caselle. Non e' il periodo scelto: e' dove si sta sfogliando. */
.dt-quadrante__sfoglia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-2) var(--dt-sp-3);
}
.dt-quadrante__perno {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-text-2);
}
.dt-quadrante__griglia {
  display: grid;
  gap: var(--dt-sp-1);
  padding: var(--dt-sp-3);
}
.dt-quadrante__griglia--mesi,
.dt-quadrante__griglia--anni { grid-template-columns: repeat(4, 1fr); }
/* Le settimane sono piu' larghe di un mese — ci stanno due numeri e un
   trattino — e allora la griglia ne mette due per riga invece di quattro. Il
   disegno resta quello: caselle, non un elenco. */
.dt-quadrante__griglia--settimane { grid-template-columns: repeat(2, 1fr); }
.dt-quadrante__cella {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-2);
  height: var(--dt-h-md);
  padding: 0 var(--dt-sp-2);
  border: 0;
  border-radius: var(--dt-r-sm);
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-sm);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-quadrante__cella:hover { background: var(--dt-hover); color: var(--dt-text); }
/* Dov'e' oggi: un filo intorno, non una campitura. La campitura dice
   «scelto», e oggi non e' scelto finche' non lo si preme. */
.dt-quadrante__cella--oggi { box-shadow: inset 0 0 0 1px var(--dt-border-strong); }
.dt-quadrante__cella--scelta {
  background: var(--dt-accent);
  color: var(--dt-text-inv);
  font-weight: var(--dt-fw-medium);
}
.dt-quadrante__cella--scelta:hover { background: var(--dt-accent-hover); color: var(--dt-text-inv); }
/* Le due date: etichetta a sinistra, casella a destra, incolonnate. */
.dt-quadrante__date {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--dt-sp-3) var(--dt-sp-4);
  padding: var(--dt-sp-4);
}
.dt-quadrante__etichetta { font-size: var(--dt-fs-sm); color: var(--dt-text-3); }

/* Stretto: lo storico non resta appeso a destra di una barra alta due righe,
   passa sotto; e la barra si dispone su due righe — in alto la parola e
   «Oggi», sotto il periodo per tutta la larghezza, coi due passi ai due capi,
   dove il pollice li trova senza mirare. */
@media (max-width: 560px) {
  .dt-periodo-riga { flex-wrap: wrap; }
  .dt-periodo { flex-basis: 100%; }
  .dt-periodo > .dt-periodo__filo,
  .dt-periodo__coda .dt-periodo__filo { display: none; }
  .dt-periodo__coda { order: 1; }
  .dt-periodo__passo { order: 2; flex: 1 1 100%; }
  .dt-periodo__tasto { flex: 1 1 auto; justify-content: space-between; }
  .dt-quadrante { width: auto; right: 0; }
  /* Lo storico va a capo, a sinistra sotto alla barra: il suo pannello non
     puo' piu' stare appeso al bordo destro del tasto — finiva per due terzi
     fuori dallo schermo, a sinistra — e si stende sotto a tutta la riga,
     largo quanto lei, come il quadrante sotto al periodo. */
  .dt-periodo-riga { position: relative; }
  .dt-periodo-riga .dt-storico { position: static; }
  .dt-periodo-riga .dt-storico__pannello { left: 0; right: 0; width: auto; }
}

/* Sulla carta i comandi se ne vanno (li toglie gia' la regola generale sui
   tasti) ma il periodo **resta scritto**: un foglio di numeri senza il periodo
   a cui si riferiscono, una volta staccato dallo schermo, non si sa piu'
   leggere. Quel che resta e' una riga di testo, non un riquadro: il nome e i
   giorni che comprende. */
@media print {
  .dt-periodo {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .dt-periodo__filo,
  .dt-periodo__coda,
  .dt-periodo__caret { display: none; }
  .dt-periodo__voce { padding-left: 0; }
  .dt-periodo__tasto { padding: 0; }
}

/* --------------------------------------------------------------------------
   12. Tabella dati (densa)
   -------------------------------------------------------------------------- */

.dt-tablewrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
}
.dt-card__body--flush .dt-tablewrap { border: 0; border-radius: 0; }

/* Il binario: la barra dello scorrimento di lato staccata dal fondo della
   tabella e appoggiata al fondo della finestra, finche' la tabella si vede.
   Il riquadro non scorre piu' lui: scorre il foglio dentro, con la barra sua
   nascosta, e sotto c'e' il binario — un secondo scorrevole alto quanto una
   barra, `sticky` sul fondo di chi scorre la pagina — con dentro una corsa
   larga quanto la tabella. I due si specchiano via codice (`Table`, in
   `data.rs`, che dice anche perche' si fa cosi').
   Il riquadro deve restare `visible`: un `overflow` qui farebbe da
   scorritore al binario, che si appenderebbe al fondo del riquadro — cioe'
   dov'era la barra prima. */
.dt-tablewrap--binario { overflow: visible; }
.dt-tablewrap__foglio {
  overflow-x: auto;
  scrollbar-width: none;
}
.dt-tablewrap__foglio::-webkit-scrollbar { display: none; }
.dt-tablewrap__binario {
  position: sticky;
  /* Al bordo della finestra, non del contenuto: chi scorre la pagina e'
     `dt-app__body`, col suo margine (`--dt-pad-body`) tutto intorno, e uno
     `sticky` si ferma al margine. Il binario invece e' una barra di
     scorrimento, e una barra sta sul bordo: si scavalca il margine di
     altrettanto, e la barra e' a filo come quella verticale accanto. */
  bottom: calc(-1 * var(--dt-pad-body, 0px));
  z-index: var(--dt-z-sticky);
  overflow-x: auto;
  overflow-y: hidden;
  /* Alto quanto una barra sottile piu' il filo sopra: la barra e' del
     browser, e questa e' la misura che le lascia il posto senza tagliarla.
     La stessa misura dice al totale di quanto stargli sopra (qui sotto). */
  height: var(--dt-binario-alto);
  border-top: 1px solid var(--dt-border);
  background: var(--dt-surface-2);
  scrollbar-width: thin;
  scrollbar-color: var(--dt-border-strong) var(--dt-surface-2);
}
.dt-tablewrap__binario[hidden] { display: none; }
.dt-tablewrap__corsa { height: 1px; }
/* La testata e il totale restano in vista scorrendo la pagina. Lo `sticky`
   qui sotto (sezione della tabella e riga del totale) si appende al foglio,
   che con `overflow-x: auto` per i CSS scorre anche in verticale — alto
   quanto la tabella, non si muove mai — e non ferma niente: di quanto
   spostarli lo misura `Table` (in `data.rs`) a ogni scorrimento, e lo scrive
   sulla testata e sul piede. Uno spostamento, non un cambio di posto: la
   tabella non si rifa' mentre il dito scorre. Il totale sta sopra alle
   righe che gli passano sotto come la testata: anche sopra alla prima
   colonna, che al telefono resta ferma di lato un piano piu' su. */
.dt-tablewrap--binario .dt-table thead th {
  transform: translateY(var(--dt-testa-giu, 0px));
}
.dt-tablewrap--binario .dt-table tfoot td {
  z-index: var(--dt-z-sticky);
  transform: translateY(calc(-1 * var(--dt-piede-su, 0px)));
}
/* Dove il browser sa legare un'animazione allo scorrimento, lo spostamento lo
   fa lui, e non il codice della pagina: il codice arriva dopo che la pagina e'
   gia' scorsa — col dito che la lancia, e anche con la rotella — e testata e
   totale restavano indietro di un fotogramma, e tremavano. Qui li muove il
   compositore insieme alle righe.
   Il tempo lo da' il foglio, visto da chi scorre la pagina: il foglio scorre
   solo di lato, e la sua vista si prende dal primo antenato che scorre. La
   testata scende un pixel per pixel da quando la cima del foglio passa la cima
   della finestra, per quanto e' alto il corpo della tabella
   (`--dt-corpo-alto`, che `Table` misura quando la tabella cambia) e poi si
   ferma; il totale fa lo stesso dal fondo, sopra al binario quando c'e' — il
   fondo della vista si alza di quanto e' alto lui. Senza la misura la corsa e'
   zero e non si muove niente.
   Dove una di queste cose manca resta lo spostamento di `Table` (qui sopra):
   stesso posto, col fotogramma di ritardo. Le due strade stanno insieme, e
   l'animazione, quando c'e', vince. */
.dt-tablewrap--binario { --dt-binario-alto: var(--dt-sp-5); }
@supports (animation-timeline: view()) and (animation-range: exit-crossing 0px exit-crossing 1px) and (view-timeline-inset: 0px 1px) {
  .dt-tablewrap--binario > .dt-tablewrap__foglio {
    view-timeline-name: --dt-foglio;
    view-timeline-axis: block;
    view-timeline-inset: 0px 0px;
  }
  .dt-tablewrap--binario:has(> .dt-tablewrap__binario:not([hidden])) > .dt-tablewrap__foglio {
    view-timeline-inset: 0px var(--dt-binario-alto);
  }
  .dt-tablewrap--binario .dt-table thead th {
    animation: dt-testa-giu linear both;
    animation-timeline: --dt-foglio;
    animation-range: exit-crossing 0px exit-crossing var(--dt-corpo-alto, 0px);
  }
  .dt-tablewrap--binario .dt-table tfoot td {
    animation: dt-piede-su linear both;
    animation-timeline: --dt-foglio;
    animation-range: entry-crossing calc(100% - var(--dt-corpo-alto, 0px)) entry-crossing 100%;
  }
}
@keyframes dt-testa-giu {
  from { transform: translateY(0); }
  to { transform: translateY(var(--dt-corpo-alto, 0px)); }
}
@keyframes dt-piede-su {
  from { transform: translateY(calc(-1 * var(--dt-corpo-alto, 0px))); }
  to { transform: translateY(0); }
}
/* La scheda taglia ai suoi angoli con `overflow: hidden`, e `hidden` fa da
   scorritore: il binario si appenderebbe al fondo della scheda. `clip` taglia
   uguale senza fare da scorritore, e il binario passa fino alla pagina. */
.dt-card:has(.dt-tablewrap--binario) { overflow: clip; }

.dt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--dt-fs-md);
}
/* L'incolonnamento: tutto a sinistra, tranne quello che si confronta cifra a
   cifra.
   Prima titolo e contenuto stavano al centro della cella, per far leggere la
   colonna come un blocco unico. Su una tabella larga fa il contrario: ogni
   cella parte da un punto suo — "Rossi" e "Condominio Aurora" cominciano a
   quindici pixel di distanza — e per scorrere una colonna di nomi l'occhio
   deve ritrovare ogni volta da dove attaccano le parole. A sinistra il bordo
   d'attacco e' uno solo e la colonna si legge scendendo dritti.
   Restano a destra i numeri e le date (`dt-td--num`, `dt-mono`): li' quello
   che conta e' l'ultima cifra, e allineare a destra e' quello che incolonna
   unita' con unita'. */
.dt-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--dt-z-sticky);
  background: var(--dt-surface-2);
  border-bottom: 1px solid var(--dt-border);
  padding: var(--dt-sp-4) var(--dt-sp-4);
  text-align: left;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dt-text-3);
  white-space: nowrap;
  user-select: none;
}
.dt-table th.dt-th--sortable { cursor: pointer; }
.dt-table th.dt-th--sortable:hover { color: var(--dt-text); background: var(--dt-surface-3); }
.dt-table tbody td {
  padding: var(--dt-sp-4) var(--dt-sp-4);
  border-bottom: 1px solid var(--dt-border-soft);
  vertical-align: middle;
  white-space: nowrap;
  text-align: left;
}
/* Le celle che mettono in fila piu' cose (avatar + nome, gruppi di bottoni)
   sono flex: l'attacco a sinistra glielo deve dire il flex, non il
   text-align. */
.dt-table tbody td > .dt-row { justify-content: flex-start; }
/* La prima colonna e' quella che si legge per trovare la riga: appoggiata al
   bordo con un po' d'aria, e col peso del testo normale invece che smorto —
   e' il nome che si cerca scorrendo, non un dato fra gli altri. */
.dt-table thead th:first-child,
.dt-table tbody td:first-child { padding-left: var(--dt-sp-5); }
.dt-table tbody td:first-child { font-weight: var(--dt-fw-medium); }
.dt-table tbody tr:last-child td { border-bottom: 0; }
.dt-table--zebra tbody tr:nth-child(even) { background: var(--dt-zebra); }
.dt-table--hover tbody tr:hover { background: var(--dt-hover); }

/* L'ancora: l'ultima riga di una tabella che non e' ancora tutta (`Ancora`,
   in `data.rs`). Sta su un filo pieno come una riga di gruppo, perche' non e'
   una riga dell'elenco: e' il punto dove l'elenco finisce per ora. Il conto e
   il tasto restano attaccati al bordo sinistro anche scorrendo di lato: la
   cella e' larga quanto tutte le colonne, e senza `sticky` a meta' tabella
   si vedrebbe una riga vuota. */
.dt-table tbody tr.dt-ancora td {
  padding: var(--dt-sp-3) var(--dt-sp-4);
  background: var(--dt-surface-2);
  border-top: 1px solid var(--dt-border);
}
.dt-ancora__dentro {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-4);
}
.dt-ancora__conto {
  color: var(--dt-text-3);
  font-variant-numeric: tabular-nums;
}
.dt-table tbody tr.dt-tr--selected { background: var(--dt-selected); }
.dt-table--compact tbody td,
.dt-table--compact thead th { padding: var(--dt-sp-3) var(--dt-sp-4); }
/* Il numero e' l'unica cosa che si incolonna a destra, e il suo titolo lo
   segue (`dt-th--num`): quello che si confronta e' l'ultima cifra. Le date e i
   codici restano a sinistra come il resto — in monospazio si incolonnano gia'
   da soli, carattere per carattere. */
.dt-td--num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--dt-font-mono); }
/* Ripetuti sulla cella: `.dt-table tbody td` pesa piu' di una classe da sola,
   e senza questa riga l'incolonnamento generale vincerebbe sul modificatore
   della singola colonna — che e' come le cifre stavano al centro insieme a
   tutto il resto anche quando erano marcate come numeri. */
.dt-table thead th.dt-th--num,
.dt-table tbody td.dt-td--num { text-align: right; }
/* Le cifre del piede non vanno a capo, come quelle del corpo (`tbody td` e'
   `nowrap`): in una colonna stretta il totale delle ore si spezzava in
   «817h» sopra e «45m» sotto, e non si leggeva piu' come un numero. */
.dt-table tfoot td.dt-td--num { white-space: nowrap; }
/* I comandi di riga stanno sempre appoggiati al bordo destro, mai al centro
   della loro colonna. Il centro li fa ballare: ogni riga ne ha un numero
   diverso (il cestino manca dove non si puo' cancellare, lo sblocco compare
   solo se l'utente e' bloccato) e centrati finiscono ognuno in un punto suo,
   cosi' per premere lo stesso tasto su due righe vicine il dito si sposta.
   A destra invece l'ultimo tasto e' incolonnato e il pollice lo ritrova.
   Il `width: 1%` stringe la colonna sul contenuto; il `text-align` e il
   `justify-content` servono per le tabelle che quella colonna la allargano
   lo stesso, perche' non hanno altrove dove mettere lo spazio che avanza. */
.dt-td--actions { width: 1%; }
/* La maschera di cosa tiene una riga: i nomi vanno a capo dentro alla loro
   cella. Sono titoli scritti dal server — l'attivita' col giorno e le ore, un
   riferimento col suo indirizzo — e su una riga sola portavano la tabella
   oltre il bordo della maschera, e con lei i cestini, che sul largo non stanno
   inchiodati a destra. */
.dt-conflitti .dt-table tbody td:not(.dt-td--actions):not(.dt-col--sec) {
  white-space: normal;
  overflow-wrap: anywhere;
}
.dt-table tbody td.dt-td--actions { text-align: right; }
.dt-table tbody td.dt-td--actions > .dt-row { justify-content: flex-end; }
.dt-th--num { text-align: right; }

/* La colonna che dice di che colore e' una cosa e' quel colore.
   Scriverci la chiave della tavolozza — "ambra", "menta" — voleva dire dodici
   parole in colonna al posto di dodici campiture, e per sapere che faccia
   avesse un'attivita' bisognava tradurre il nome a mente. Qui la cella e' la
   campitura stessa: la stessa che il blocco avra' in giornata, dagli stessi
   `--dt-blocco-tinta` / `--dt-blocco-croma` che arrivano dallo stile in linea.
   Il nome resta nel `title`, per chi lo cerca.
   Stretta sul contenuto: e' un campione, non un dato da leggere, e allargarla
   toglierebbe spazio alle colonne che si leggono davvero. */
.dt-table tbody td.dt-td--tinta {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  width: 1%;
  min-width: var(--dt-sp-8);
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  background-clip: padding-box;
}

/* --------------------------------------------------------------------------
   13. Paginazione / breadcrumb
   -------------------------------------------------------------------------- */

.dt-pagination {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-2);
}
.dt-pagination__page {
  min-width: var(--dt-h-sm);
  height: var(--dt-h-sm);
  padding: 0 var(--dt-sp-2);
  border: 1px solid transparent;
  border-radius: var(--dt-r-sm);
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.dt-pagination__page:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-pagination__page--active {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color: var(--dt-text-inv);
  font-weight: var(--dt-fw-semibold);
}
.dt-pagination__page:disabled { opacity: 0.4; cursor: not-allowed; }

/* `min-width: 0`: nella finestra senza cornice il percorso divide la barra
   coi comandi di riduci/ingrandisci/chiudi, e stringendo la finestra sarebbero
   quelli a finire fuori schermo. Cede il percorso, che scorre di lato, mai
   loro. */
.dt-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  min-width: 0;
  overflow: hidden;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}
.dt-breadcrumb__item,
.dt-breadcrumb__testo { white-space: nowrap; }
.dt-breadcrumb__item { color: var(--dt-text-2); cursor: pointer; background: none; border: 0; font: inherit; padding: 0; }
.dt-breadcrumb__item:hover { color: var(--dt-accent); }
/* Tappa che non porta da nessuna parte: si legge, non si clicca. */
.dt-breadcrumb__testo { color: var(--dt-text-3); }
.dt-breadcrumb__item--current { color: var(--dt-text); font-weight: var(--dt-fw-medium); cursor: default; }
.dt-breadcrumb__sep { opacity: 0.6; }
/* Dentro a una maschera il percorso va a capo invece di tagliarsi: e' la
   traccia dei piani scesi, e l'ultimo pezzo — dove si e' adesso — e' quello
   che si perdeva oltre il bordo. */
.dt-modal .dt-breadcrumb { flex-wrap: wrap; row-gap: var(--dt-sp-1); }

/* --------------------------------------------------------------------------
   14. Alert / progress / spinner
   -------------------------------------------------------------------------- */

.dt-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-4) var(--dt-sp-5);
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--dt-r-md);
  font-size: var(--dt-fs-md);
}
.dt-alert__icon { flex: none; margin-top: 1px; }
.dt-alert__title { font-weight: var(--dt-fw-semibold); }
.dt-alert__body { color: var(--dt-text-2); }
.dt-alert--info    { background: var(--dt-info-soft); border-color: var(--dt-info-border); color: var(--dt-info); }
.dt-alert--success { background: var(--dt-ok-soft); border-color: var(--dt-ok-border); color: var(--dt-ok); }
.dt-alert--warning { background: var(--dt-warn-soft); border-color: var(--dt-warn-border); color: var(--dt-warn); }
.dt-alert--danger  { background: var(--dt-danger-soft); border-color: var(--dt-danger-border); color: var(--dt-danger); }
.dt-alert .dt-alert__title { color: var(--dt-text); }

.dt-progress {
  width: 100%;
  height: 6px;
  background: var(--dt-surface-3);
  border-radius: var(--dt-r-full);
  overflow: hidden;
}
.dt-progress__bar {
  height: 100%;
  background: var(--dt-accent);
  border-radius: var(--dt-r-full);
  transition: width var(--dt-t-med);
}
.dt-progress__bar--success { background: var(--dt-ok); }
.dt-progress__bar--warning { background: var(--dt-warn); }
.dt-progress__bar--danger { background: var(--dt-danger); }
.dt-progress--indeterminate .dt-progress__bar {
  width: 35% !important;
  animation: dt-indet 1.1s ease-in-out infinite;
}
@keyframes dt-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

.dt-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--dt-border-strong);
  border-top-color: var(--dt-accent);
  border-radius: var(--dt-r-full);
  animation: dt-spin 0.65s linear infinite;
  flex: none;
}
.dt-spinner--sm { width: 11px; height: 11px; border-width: 1.5px; }
.dt-spinner--lg { width: 22px; height: 22px; border-width: 3px; }
.dt-spinner--on-accent { border-color: color-mix(in srgb, var(--dt-text-inv) 35%, transparent); border-top-color: var(--dt-text-inv); }
@keyframes dt-spin { to { transform: rotate(360deg); } }

.dt-skeleton {
  background: linear-gradient(90deg, var(--dt-surface-3) 25%, var(--dt-surface-2) 37%, var(--dt-surface-3) 63%);
  background-size: 400% 100%;
  animation: dt-shimmer 1.3s ease infinite;
  border-radius: var(--dt-r-sm);
  height: 12px;
}
@keyframes dt-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* --------------------------------------------------------------------------
   15. Modal
   -------------------------------------------------------------------------- */

.dt-modal__backdrop {
  position: fixed;
  inset: 0;
  background: var(--dt-overlay);
  z-index: var(--dt-z-modal);
  display: grid;
  place-items: center;
  padding: var(--dt-sp-8);
  animation: dt-fade var(--dt-t-med);
}
.dt-modal {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-lg);
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dt-pop var(--dt-t-med);
}
.dt-modal--md { max-width: 620px; }
.dt-modal--lg { max-width: 880px; }
/* La maschera prende il fuoco quando si apre, perche' il tabulatore parta da
   li' e non dalla pagina dietro: e' un contenitore, e l'anello lo portano i
   campi e i tasti che ha dentro. */
.dt-modal:focus,
.dt-banco:focus { outline: none; }
.dt-modal__head {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-5) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border-soft);
}
.dt-modal__title { font-size: var(--dt-fs-lg); font-weight: var(--dt-fw-semibold); flex: 1 1 auto; letter-spacing: -0.01em; }
.dt-modal__body { padding: var(--dt-sp-6); overflow: auto; flex: 1 1 auto; }
/* La striscia dell'avviso: `flex: 0 0 auto` di suo, quindi non scorre col
   corpo e resta appiccicata sopra ai tasti. Niente bordo e niente fondo
   proprio: quello che ci va dentro e' un `Alert`, che il suo colore ce l'ha
   gia'; una cornice attorno alla cornice farebbe due scatole. */
.dt-modal__avviso { padding: var(--dt-sp-4) var(--dt-sp-6) 0; }
/* Va a capo quando i tasti non ci stanno: allineati a destra, quello che
   avanza usciva dal bordo di sinistra, dove non si arriva nemmeno scorrendo —
   sul telefono «Costi» nella scheda di un blocco restava «sti». A capo scende
   l'ultimo tasto, che su un telefono si prende tutta la riga. */
.dt-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4) var(--dt-sp-6);
  border-top: 1px solid var(--dt-border-soft);
  background: var(--dt-surface-2);
}
/* Quello che sta in fondo ma non porta avanti: un comando che apre un'altra
   cosa, staccato dai tasti che decidono. A sinistra, all'altro capo della
   barra, perche' una fila sola di tre tasti fa sembrare che siano tre modi
   di chiudere la scheda. */
.dt-modal__foot-sinistra { display: inline-flex; gap: var(--dt-sp-2); margin-right: auto; }

/* ---- Le ore tagliate (`AvvisoTagli`) --------------------------------------

   Chi perde ore quando il lavoro si accorcia, una riga a testa: il nome, le
   ore com'erano e come diventano. Si legge come si dice — «Luca: 11:00 →
   12:00 diventa 11:00 → 11:30» — e va a capo fra un pezzo e l'altro, non a
   meta' di un orario. Le ore di prima sono barrate e smorzate: sono quelle
   che se ne vanno, e quelle che restano stanno in nero pieno. */
.dt-tagli__detto { margin: 0 0 var(--dt-sp-5); }
.dt-tagli__poi { margin: var(--dt-sp-5) 0 0; color: var(--dt-text-2); }
.dt-tagli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-4);
}
.dt-tagli__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dt-sp-1) var(--dt-sp-3);
}
.dt-tagli__nome { font-weight: var(--dt-fw-semibold); }
.dt-tagli__prima,
.dt-tagli__dopo { white-space: nowrap; }
.dt-tagli__prima { color: var(--dt-text-3); text-decoration: line-through; }
/* Chi resterebbe senza ore non le perde: il cambio non si fa, e le sue ore
   restano dove sono. Si leggono piene, e accanto c'e' scritto dove stanno. */
.dt-tagli__riga--fuori .dt-tagli__prima { color: var(--dt-text); text-decoration: none; }
.dt-tagli__a { color: var(--dt-text-2); }
.dt-tagli__dopo { font-weight: var(--dt-fw-semibold); }

/* ---- La maschera libera: il banco ----------------------------------------

   Niente riquadro: quello che c'e' dentro sta appoggiato sullo sfondo scurito,
   che qui e' il banco, e i tasti galleggiano sotto. E' per le cose che una
   forma ce l'hanno gia' — lo scontrino del libro dei costi — e che in una
   scheda bianca erano una carta dentro a un'altra carta.
   Il banco scorre lui, non un corpo dentro alla scheda: la carta e' lunga
   quanto le sue righe, e quando supera la finestra si tira giu' il banco come
   una pagina. Corta, sta in mezzo: i margini automatici di una colonna flex
   la centrano, e appena non ci sta piu' si azzerano da soli e la carta parte
   dall'alto, senza che nessuno debba decidere quando. */
.dt-modal__backdrop--banco {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  /* La gola della barra di scorrimento da tutte e due le parti: se no la
     carta e' in mezzo a quello che resta, e a destra manca la barra. */
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  padding: var(--dt-sp-8) var(--dt-sp-4);
}
.dt-banco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-sp-6);
  width: 100%;
  margin: auto 0;
  animation: dt-pop var(--dt-t-med);
}
/* La barra dei tasti: appiccicata in fondo alla finestra mentre il banco
   scorre, davanti alla carta che le passa dietro; arrivati in fondo torna in
   fila sotto all'ultima riga, cosi' il codice a barre non resta mai coperto.
   Un riquadro solo, tasti piatti dentro, come la barra della giornata; il
   solo pieno e' «Salva», che e' l'unico tasto principale della schermata. */
.dt-banco__comandi {
  position: sticky;
  bottom: 0;
  z-index: var(--dt-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-2);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-lg);
}
.dt-banco__comandi .dt-btn {
  border-radius: var(--dt-r-md);
  box-shadow: none;
}
@keyframes dt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dt-pop { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   16. Toast
   -------------------------------------------------------------------------- */

.dt-toaster {
  position: fixed;
  right: var(--dt-sp-6);
  bottom: var(--dt-sp-6);
  z-index: var(--dt-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
  pointer-events: none;
  max-width: 340px;
}
.dt-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-left: 3px solid var(--dt-accent);
  border-radius: var(--dt-r-md);
  box-shadow: var(--dt-shadow-lg);
  animation: dt-slidein var(--dt-t-med);
}
.dt-toast--success { border-left-color: var(--dt-ok); }
.dt-toast--warning { border-left-color: var(--dt-warn); }
.dt-toast--danger  { border-left-color: var(--dt-danger); }
.dt-toast__title { font-weight: var(--dt-fw-semibold); font-size: var(--dt-fs-md); }
.dt-toast__msg { font-size: var(--dt-fs-sm); color: var(--dt-text-2); }
/* Dove la navigazione scende in fondo allo schermo — il tablet in piedi, la
   finestra stretta — l'avviso sale sopra alla barra invece di coprirne le
   voci. Al telefono prende anche la riga intera (piu' sotto). */
@media (orientation: portrait), (max-width: 820px) {
  .dt-toaster { bottom: calc(var(--dt-barra-bassa-h) + var(--dt-sp-6)); }
}
@keyframes dt-slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   17. Tooltip (CSS only)
   -------------------------------------------------------------------------- */

.dt-tip { position: relative; display: inline-flex; }
.dt-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: var(--dt-text);
  color: var(--dt-surface);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-medium);
  padding: 3px var(--dt-sp-3);
  border-radius: var(--dt-r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dt-t-fast), transform var(--dt-t-fast);
  z-index: var(--dt-z-tooltip);
  box-shadow: var(--dt-shadow-md);
}
.dt-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.dt-tip--bottom::after { bottom: auto; top: calc(100% + 6px); transform: translateX(-50%) translateY(-3px); }
.dt-tip--bottom:hover::after { transform: translateX(-50%) translateY(0); }
/* In fondo alla barra la targhetta si appoggia al bordo destro del tasto invece
   di stargli a cavallo: a cavallo sporgeva oltre la finestra, tagliata a meta',
   e anche spenta allargava la barra quanto bastava a farla scorrere di lato. */
.dt-toolbar > .dt-tip:last-child::after { left: auto; right: 0; transform: translateY(3px); }
.dt-toolbar > .dt-tip--bottom:last-child::after { transform: translateY(-3px); }
.dt-toolbar > .dt-tip:last-child:hover::after { transform: none; }

/* La targhetta: il nome per intero appeso al cerchietto di una persona.

   E' la stessa placchetta scura di `.dt-tip` — stesso fondo, stessa misura,
   stesso stacco — perche' e' la stessa cosa: quello che finora diceva il
   `title` del browser. Cambiano due cose sole, e sono le due che servivano.

   **Sta nel piano di sopra** (`popover`), non dentro al riquadro da cui esce.
   Un blocco in colonna e' `overflow: hidden` e le tre facce stanno proprio sul
   suo bordo: una targhetta disegnata li' dentro verrebbe tagliata a meta'.
   Nel piano di sopra non la taglia nessuno, e per lo stesso motivo non ha
   bisogno di uno `z-index`: sta sopra a tutto per costruzione.

   **Si apre anche col dito.** Un `title` col dito non esiste — e meta' del
   programma si usa in piedi, con una mano sola — ed e' la ragione per cui non
   e' un `::after` in CSS ma un elemento vero, che qualcuno apre e chiude.

   `left` e `top` li scrive Rust al momento di aprirla (vedi `targhetta.rs`):
   qui non c'e' piu' nessun genitore su cui appoggiarsi, e dov'e' il cerchietto
   si sa solo misurandolo. Qui restano il vestito e il verso in cui cresce. */
.dt-targhetta {
  position: fixed;
  inset: auto;
  width: max-content;
  max-width: min(240px, 84vw);
  margin: 0;
  padding: 3px var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-sm);
  background: var(--dt-text);
  color: var(--dt-surface);
  font-family: var(--dt-font-ui);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-medium);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--dt-shadow-md);
  /* Cresce dal cerchietto, che e' il punto da cui la si e' chiesta: l'origine
     e' il lato con cui lo tocca, e non il suo centro. */
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(0.96);
  opacity: 0;
  /* `allow-discrete` sulle due proprieta' che il piano di sopra accende e
     spegne di scatto: senza, la targhetta comparirebbe gia' fatta e la
     transizione varrebbe solo in chiusura — mezza animazione, che si legge
     come un difetto. */
  transition: opacity var(--dt-t-fast), transform var(--dt-t-fast),
    overlay var(--dt-t-fast) allow-discrete, display var(--dt-t-fast) allow-discrete;
}
/* Sotto, quando sopra non c'e' posto: in cima alla finestra una targhetta
   verso l'alto finirebbe fuori dallo schermo. */
.dt-targhetta[data-sotto] { transform-origin: 50% 0; transform: translate(-50%, 0) scale(0.96); }
.dt-targhetta:popover-open { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.dt-targhetta[data-sotto]:popover-open { transform: translate(-50%, 0) scale(1); }
@starting-style {
  .dt-targhetta:popover-open { opacity: 0; transform: translate(-50%, -100%) scale(0.96); }
  .dt-targhetta[data-sotto]:popover-open { opacity: 0; transform: translate(-50%, 0) scale(0.96); }
}
/* Un cerchietto che ha qualcosa da dire lo dichiara col puntatore: non e' un
   tasto — non si apre niente — e la freccia normale non distinguerebbe questa
   faccia da un disegno qualunque. */
.dt-avatar--dice, .dt-facce__resto--dice { cursor: help; }

/* --------------------------------------------------------------------------
   Lo sportello: i comandi rari di una barra, dietro a tre puntini
   --------------------------------------------------------------------------
   Un tasto sempre in vista dice «questo si fa spesso». «Scarica» e «Carica» del
   catalogo non lo sono — si premono due volte l'anno e toccano tutto il
   catalogo in un colpo — e in fila con «Nuova sezione» sembravano altrettanto
   ordinari, oltre a prendersi due slot di barra che sul telefono sono mezza
   riga.

   Come la targhetta, il pannello sta nel piano di sopra del documento
   (`popover`): la barra vive dentro a una `.dt-card`, che e' `overflow: hidden`,
   e li' dentro verrebbe tagliato sul bordo del riquadro. `left` e `top` li
   scrive Rust al momento di aprirlo (vedi `sportello.rs`), perche' nel piano di
   sopra non c'e' piu' nessun genitore su cui appoggiarsi. Qui restano il
   vestito e il verso in cui cresce. */
.dt-sportello { display: inline-flex; }

/* Il foglio trasparente che lo chiude. Copre anche il tastino da cui e' uscito:
   e' quello che rende il gesto uno solo — premi fuori, si chiude — invece di
   una chiusura e una riapertura nello stesso click. */
.dt-sportello__velo {
  position: fixed;
  inset: 0;
  z-index: var(--dt-z-menu);
}

.dt-sportello__pannello {
  position: fixed;
  inset: auto;
  /* Il `display` non si scrive qui. Chiuso, il pannello e' spento dalla regola
     del browser (`[popover]:not(:popover-open) { display: none }`), che una
     riga d'autore — anche solo `display: flex` — coprirebbe: il pannello
     resterebbe disegnato accanto al tastino, trasparente ma buono al click, e
     premere alla destra dei tre puntini scaricherebbe il catalogo. Aperto lo
     rimette la regola qui sotto; il `flex-direction` non da' fastidio a un
     elemento spento. */
  flex-direction: column;
  gap: 1px;
  width: max-content;
  min-width: 232px;
  max-width: min(320px, calc(100vw - var(--dt-sp-6)));
  margin: 0;
  padding: var(--dt-sp-2);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  background: var(--dt-surface-2);
  box-shadow: var(--dt-shadow-lg);
  color: var(--dt-text);
  font-family: var(--dt-font-ui);
  /* Cresce dal tastino, che e' il punto da cui lo si e' chiesto: l'origine e'
     l'angolo con cui lo tocca, e non il centro del pannello. */
  transform-origin: 100% 0;
  transform: scale(0.96);
  opacity: 0;
  /* `allow-discrete` sulle due proprieta' che il piano di sopra accende e
     spegne di scatto: senza, il pannello comparirebbe gia' fatto e la
     transizione varrebbe solo in chiusura. */
  transition: opacity var(--dt-t-fast), transform var(--dt-t-fast),
    overlay var(--dt-t-fast) allow-discrete, display var(--dt-t-fast) allow-discrete;
}
/* Sopra, quando sotto non c'e' posto: in fondo alla finestra un pannello verso
   il basso finirebbe fuori dallo schermo. */
.dt-sportello__pannello[data-sopra] { transform-origin: 100% 100%; }
.dt-sportello__pannello:popover-open { display: flex; opacity: 1; transform: scale(1); }
@starting-style {
  .dt-sportello__pannello:popover-open { opacity: 0; transform: scale(0.96); }
}
/* Il pannello prende il fuoco per far girare il tabulatore sulle voci: e' un
   contenitore, non un bersaglio, e l'anello lo portano le voci. */
.dt-sportello__pannello:focus { outline: none; }

/* Una voce: il segno, il nome, e sotto cosa succede a premerla. La riga sotto
   e' il motivo per cui lo sportello esiste — in barra quella spiegazione era il
   `title` del browser, che col dito non si vede mai. */
.dt-sportello__voce {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-sp-3);
  width: 100%;
  padding: var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-sm);
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-sportello__voce:hover { background: var(--dt-hover); }
.dt-sportello__voce:disabled { opacity: 0.45; cursor: not-allowed; }
/* Il segno resta in cima alla voce, incolonnato col nome: centrato sui due
   righi scenderebbe in mezzo alla spiegazione. */
.dt-sportello__voce > svg,
.dt-sportello__voce > .dt-spinner {
  flex: none;
  margin-top: 1px;
  opacity: 0.85;
}
.dt-sportello__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dt-sportello__nome { font-weight: var(--dt-fw-medium); }
.dt-sportello__sotto {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  line-height: 1.45;
}

/* La voce che sceglie invece di fare: la spunta di quella in uso, in fondo alla
   riga. Il posto se lo prende sempre, anche da spenta — se no passando da una
   voce all'altra le due righe si allargherebbero e stringerebbero a turno, e il
   pannello cambierebbe misura sotto al dito. Il testo si allarga per spingerla
   contro il bordo destro. */
.dt-sportello__testo { flex: 1; }
.dt-sportello__spunta {
  display: inline-flex;
  flex: none;
  align-self: center;
  color: var(--dt-accent);
  opacity: 0;
  transition: opacity var(--dt-t-fast);
}
.dt-sportello__voce--scelta .dt-sportello__spunta { opacity: 1; }
.dt-sportello__voce--scelta > svg { opacity: 1; }

/* --------------------------------------------------------------------------
   18. Utility varie
   -------------------------------------------------------------------------- */

.dt-scroll { overflow: auto; }
.dt-hidden { display: none !important; }
.dt-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dt-code {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
  background: var(--dt-surface-inset);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-sm);
  padding: var(--dt-sp-4);
  color: var(--dt-text-2);
  overflow: auto;
  white-space: pre;
  margin: 0;
  line-height: 1.5;
}
.dt-kbd {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  background: var(--dt-surface-3);
  border: 1px solid var(--dt-border);
  border-bottom-width: 2px;
  border-radius: var(--dt-r-sm);
  padding: 1px 5px;
  color: var(--dt-text-2);
}

/* --------------------------------------------------------------------------
   19. Accesso: nome utente e tastierino del PIN
   -------------------------------------------------------------------------- */

.dt-gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 3vw, 16px);
  background: var(--dt-bg);
  overflow: auto;
}
/* I comandi della finestra desktop, dove starebbe la cornice che manca. Sul
   telefono la fascia in cima e' dell'orologio: si scansa come la barra. */
.dt-gate__angolo {
  position: fixed;
  top: calc(var(--dt-sp-2) + env(safe-area-inset-top, 0px));
  right: var(--dt-sp-2);
}
.dt-gate__angolo:empty { display: none; }
/* Il rientro dopo una sessione scaduta: sotto c'e' ancora la scrivania, con le
   sue maschere e i tastini di servizio, e il riquadro sta davanti a tutto. */
.dt-gate--sopra { z-index: calc(var(--dt-z-tooltip) + 200); }
/* La scrivania ferma sotto al rientro: il contenitore non ha una scatola sua,
   serve solo a tenerla `inert` tutta insieme. */
.dt-dietro { display: contents; }
.dt-gate__box {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vw, 16px);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-lg);
  padding: clamp(16px, 4vw, 24px);
}
/* La casella del nome utente: e' la stessa casella delle maschere, solo che
   qui non c'e' un'etichetta sopra e la scritta sta in mezzo, come i pallini e
   le cifre sotto di lei. */
.dt-gate__utente {
  text-align: center;
  font-family: var(--dt-font-mono);
}
/* Il titolo e l'avviso stanno nello stesso posto, uno sopra l'altro: l'avviso
   arriva col pollice gia' sul tastierino, e se entrasse in fila spingerebbe
   giu' i tasti proprio sotto al dito. Al suo posto il titolo sparisce, e la
   casella e i tasti restano dove sono.

   La cella e' alta da sola quanto un avviso su due righe (le due righe di
   testo, il cuscino e il filo di `.dt-alert`): senza, era alta quanto il
   titolo, e l'errore lungo — «Troppi tentativi…», il server che non
   risponde — la allungava lo stesso, di una riga. I messaggi che possono
   arrivare qui stanno tutti in due righe fino a 320px: prove/accesso.html. */
.dt-gate__testa {
  display: grid;
  align-items: center;
  min-height: calc(2 * var(--dt-fs-md) * var(--dt-lh-normal) + 2 * var(--dt-sp-4) + 2px);
}
.dt-gate__testa > * { grid-area: 1 / 1; }
.dt-gate__testa--avviso > .dt-gate__titolo,
.dt-gate__testa--errore > .dt-gate__avviso { visibility: hidden; }

/* Tastierino: cifre grandi, usabile anche col dito su un tablet in reparto. */
.dt-pin__punti {
  display: flex;
  justify-content: center;
  gap: var(--dt-sp-4);
  min-height: 11px;
}
.dt-pin__punto {
  width: 9px;
  height: 9px;
  border-radius: var(--dt-r-full);
  border: 1px solid var(--dt-border-strong);
}
.dt-pin__punto--pieno {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
}
.dt-pin__tasti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dt-sp-4);
}
.dt-pin__tasto {
  /* Sul telefono il tasto e' un bersaglio da pollice, sul monitor non serve
     alto quanto: cresce da solo mentre la finestra si stringe, invece di
     allungarsi di sei pixel al passaggio di una soglia. */
  height: clamp(46px, 46px + (420px - 100vw) * 0.067, 54px);
  display: grid;
  place-items: center;
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  color: var(--dt-text);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-lg);
  cursor: pointer;
  user-select: none;
  transition: background var(--dt-t-fast);
}
.dt-pin__tasto:hover { background: var(--dt-surface-3); }
.dt-pin__tasto:active { background: var(--dt-selected); }
.dt-pin__tasto:disabled { opacity: 0.4; cursor: not-allowed; }

/* Telefono: margini e misure ci arrivano gia' stretti per conto loro (vedi i
   `clamp` qui sopra); resta la sola cosa che una misura non sa fare — il
   riquadro smette di stare in mezzo e si appoggia in alto, sopra alla
   tastiera del telefono. */
@media (max-width: 420px) {
  .dt-gate { place-items: start center; }
}

/* --------------------------------------------------------------------------
   20. Registro del server: elenco dei giorni e righe del file
   -------------------------------------------------------------------------- */

/* Due colonne dentro la card: l'elenco non si allarga a spese delle righe del
   registro, ma nemmeno resta di un palmo su una finestra stretta — si stringe
   con lei, senza aspettare la soglia in cui va sopra. */
.dt-registro {
  display: grid;
  grid-template-columns: clamp(150px, 16vw, 220px) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 320px;
}
.dt-registro__elenco {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--dt-sp-3);
  border-right: 1px solid var(--dt-border);
  overflow: auto;
}
.dt-registro__file {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  padding-right: var(--dt-sp-2);
  border-radius: var(--dt-r-md);
}
.dt-registro__file:hover { background: var(--dt-hover); }
.dt-registro__file--scelto { background: var(--dt-selected); }
.dt-registro__apri {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: flex-start;
  padding: var(--dt-sp-3) var(--dt-sp-4);
  background: none;
  border: 0;
  border-radius: var(--dt-r-md);
  color: var(--dt-text);
  cursor: pointer;
  text-align: left;
}
.dt-registro__giorno {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
}
.dt-registro__peso { font-size: var(--dt-fs-xs); color: var(--dt-text-3); }

.dt-registro__vista {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.dt-registro__stato { padding: var(--dt-sp-5); }
.dt-registro__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-3) var(--dt-sp-5);
  border-bottom: 1px solid var(--dt-border-soft);
  font-size: var(--dt-fs-sm);
}
/* Tipologie da mostrare: si accendono e si spengono, e ognuna dice quante
   righe porta con se'. */
.dt-registro__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-3) var(--dt-sp-5);
  border-bottom: 1px solid var(--dt-border-soft);
}
.dt-registro__filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: 2px var(--dt-sp-3);
  background: none;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  color: var(--dt-text-3);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast), border-color var(--dt-t-fast);
}
.dt-registro__filtro:hover { border-color: var(--dt-border-strong); }
.dt-registro__filtro--acceso {
  background: var(--dt-selected);
  border-color: var(--dt-border-strong);
  color: var(--dt-text);
}
.dt-registro__conta { color: var(--dt-text-3); font-variant-numeric: tabular-nums; }

.dt-registro__righe {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--dt-sp-3) 0;
  background: var(--dt-surface-inset);
}
/* Una riga per riga di file: niente a capo, si scorre in orizzontale come in
   un terminale, cosi' le colonne restano allineate. */
.dt-registro__riga {
  padding: 1px var(--dt-sp-5);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  line-height: 1.6;
  color: var(--dt-text-3);
  white-space: pre;
}
/* Il traffico resta smorzato: risaltano i fatti e cio' che si e' rotto. */
.dt-registro__riga--operazione { color: var(--dt-text); }
.dt-registro__riga--errore { color: var(--dt-danger); background: var(--dt-danger-soft); }
.dt-registro__vuoto {
  padding: var(--dt-sp-5);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}

/* Schermo stretto: l'elenco passa sopra e il file sotto. */
@media (max-width: 720px) {
  .dt-registro { grid-template-columns: 1fr; }
  .dt-registro__elenco {
    border-right: 0;
    border-bottom: 1px solid var(--dt-border);
    max-height: 220px;
  }
  .dt-registro__righe { max-height: 50vh; }
}

/* --------------------------------------------------------------------------
   21. Lavori: intestazione di una giornata
   -------------------------------------------------------------------------- */

/* La giornata si apre con la sua data scritta per esteso, i comandi che la
   muovono di fianco e i totali di seguito, ognuno con la propria icona.
   Nessun colore: la gerarchia la fanno peso, superficie e bordo. */
/* La pagina della giornata e' alta quanto lo spazio rimasto: la testata e il
   tasto per segnare un'ora restano fermi in cima, e a scorrere e' solo la
   colonna delle ore. In una giornata lunga il comando che si cerca di piu'
   non deve costringere a risalire. */
.dt-giorno__pagina {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-6);
  flex: 1 1 auto;
  min-height: 0;
  /* Il lato del tasto "piu'", che qui e' anche una misura di posto: la barra
     della data gli sta di fianco e si ancora al bordo tenendone conto, la
     giornata sotto si lascia in fondo l'aria per non finirci sotto. Un numero
     solo, cosi' le tre cose non possono scordarsi l'una dell'altra.
     Il minimo e' cinquanta e non quarantasei: dentro alla barra ci sta la data,
     e togliendo il bordo e l'aria a quarantasei restavano trentasei pixel di
     tasto — si prende mirando, e la si preme in piedi. Non e' una soglia, e'
     il fondo del `clamp`: da un telefono a un tablet stretto la misura e'
     questa, e piu' su sale come prima. */
  --dt-piu: clamp(50px, 3vw + 26px, 58px);
  /* Quanto stanno staccati dal bordo della pagina, e fra loro. */
  --dt-piu-orlo: var(--dt-sp-6);
}
.dt-giorno__scorri {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* `clip` e non `auto`: la colonna che entra scivolando esce di diciotto
     pixel dal bordo, e con `auto` per un attimo comparirebbe una barra di
     scorrimento orizzontale che nessuno ha chiesto. `clip` taglia e basta,
     senza rendere la cosa scorribile. */
  overflow-x: clip;
  overscroll-behavior: none;
  /* L'etichetta della prima ora e' centrata sulla sua riga, quindi meta' di
     essa sta sopra al principio della colonna: senza questo respiro finisce
     tagliata contro la testata e la giornata sembra cominciare un'ora dopo.
     La stessa misura la sanno i bolli: un elemento appiccicato si ferma al
     bordo del contenuto, cioe' sotto a questo respiro, e per stare sul bordo
     vero deve risalirlo. Una misura sola per le due cose. */
  --dt-sopra-orlo: var(--dt-sp-5);
  padding-top: var(--dt-sopra-orlo);
  /* In fondo l'aria che serve alla barra della data per non coprire l'ultimo
     blocco: la sua altezza piu' i due orli. La sa anche la fila di bolli di
     sotto, che deve **scendere** questo respiro per arrivare al bordo vero del
     riquadro — l'opposto di quello che fa quella di sopra, e la stessa
     ragione: un elemento appiccicato si ferma al bordo del contenuto. Vedi
     `.dt-giorno__sotto`. */
  --dt-sotto-orlo: calc(var(--dt-piu) + var(--dt-piu-orlo) * 2);
  padding-bottom: var(--dt-sotto-orlo);
}

/* Su una finestra larga la colonna del giorno non si stira all'infinito: al
   suo fianco compaiono i giorni prima e quelli dopo, da guardare e su cui
   saltare. Una colonna larga mezzo schermo non direbbe niente di piu' di una
   larga un palmo, e quello spazio in una giornata si usa per capire dove si e'
   arrivati.
   La regola e' una misura sola, `--dt-giorno-max`: nessuna giornata la supera,
   ne' quella su cui si scrive ne' quelle di fianco. Allargando la finestra ci
   arriva per prima quella in mezzo e li' si ferma; quello che avanza va alle
   colonne di lato, che crescono di continuo — non a scatti — fino allo stesso
   massimo; quando ci sono arrivate anche loro e avanza ancora spazio, compare
   un'altra coppia di giornate e si ricomincia. Sotto `--dt-lato-min` una
   giornata di fianco non si legge piu', e sotto quella misura non compare.
   Quante colonne siano, e quanto larghe, lo calcola il modulo Ore e lo scrive
   in uno `style` sopra questa regola: dipende da quante giornate e' andato a
   prendere, e qui non si puo' sapere. Qui restano solo le due misure. */
.dt-giorno__accanto {
  --dt-giorno-max: 380px;
  --dt-lato-min: 96px;
  /* Una fila e non una griglia. Le caselle di una griglia sono posti fissi: il
     giorno che cambia dovrebbe saltare da una casella all'altra, e fra una
     casella e l'altra non c'e' niente da percorrere. In fila invece ogni
     colonna porta con se' la propria larghezza, e cambiare giorno vuol dire
     cambiarle il valore: da li' in poi ci pensa la transizione. */
  display: flex;
  /* Arrivate tutte al massimo, quel che avanza si divide fra i due bordi
     invece di restare tutto a destra: la giornata aperta resta in mezzo. */
  justify-content: center;
  align-items: flex-start;
}
/* Il righello degli orari non scorre con le giornate: e' il fondo su cui
   passano. Quando pero' compare per la prima volta — la finestra si allarga e
   nasce la fila — sfuma dentro invece di apparire di colpo. */
.dt-giorno__asse {
  flex: 0 0 auto;
  animation: dt-arriva-lato var(--dt-t-med);
}
@keyframes dt-arriva-lato {
  from { opacity: 0; }
}

/* Cambiando giorno le giornate scorrono di una colonna, come si spinge di
   lato un calendario: avanti si spostano tutte a sinistra e quella nuova entra
   da destra, indietro il contrario. Non e' un vezzo — due giornate vicine si
   somigliano, e senza il movimento che dice da che parte si e' andati si
   finisce per scrivere sul giorno sbagliato.
   Lo scorrimento non e' uno spostamento: nessuna colonna si muove. Ogni
   colonna sta sempre alla sua data e cambia solo *ruolo* — chi era di fianco
   diventa quella aperta e si allarga, chi era aperta si stringe a lato, chi
   era fuori dal bordo entra da larghezza zero. Le somme tornano: quello che
   una perde lo prende l'altra, la fila resta larga uguale, e stando centrata
   non si sposta di un pixel mentre dentro tutto trasla. Il movimento che si
   vede e' l'effetto di larghezze che cambiano insieme, non una traslazione,
   e per questo non ha ne' un principio ne' una fine da far combaciare: si
   puo' cambiare giorno a meta' del cambio e la fila prende la nuova strada da
   dove si trova.
   Le tre misure — passo, lato, centro — le calcola il modulo Ore e le scrive
   in uno `style` qui sopra: dipendono da quante giornate ci stanno, e qui non
   si puo' sapere. */
.dt-giorno__quota {
  flex: 0 0 auto;
  width: var(--dt-lato);
  margin-left: var(--dt-giorno-gap);
  /* La colonna che si stringe taglia quello che non ci sta piu': una scritta
     non si accorcia come il riquadro che la contiene, e a colonna quasi chiusa
     uscirebbe sopra la giornata di fianco.
     Solo in orizzontale, e `clip` e non `hidden`: l'etichetta della prima ora
     e' centrata sulla sua riga e mezza sta sopra al principio della colonna.
     `hidden` porterebbe con se' anche il taglio verticale, e la giornata
     sembrerebbe cominciare un'ora dopo. */
  overflow-x: clip;
  cursor: pointer;
  transition: width var(--dt-t-slitta), margin-left var(--dt-t-slitta),
    opacity var(--dt-t-slitta);
}
.dt-giorno__quota--centro {
  width: var(--dt-centro);
  cursor: default;
}
/* Le due colonne oltre il bordo ci sono gia', con i loro blocchi dentro, larghe
   zero e invisibili. Servono a questo: una colonna che nasce nel momento in cui
   deve entrare non ha da dove venire, e comparirebbe di colpo. Cosi' invece
   quella nuova non nasce, cresce. */
.dt-giorno__quota--fuori {
  width: 0;
  margin-left: 0;
  opacity: 0;
}
/* Con piu' giornate in vista gli orari si scrivono una volta sola, nella
   colonnina di sinistra: e' quello che fa la settimana di un calendario, e
   righelli identici affiancati direbbero ogni volta la stessa cosa togliendo
   spazio ai blocchi. Perche' funzioni le tele devono partire dalla stessa
   altezza e dallo stesso minuto: alla prima ci pensa l'intestazione, che e'
   alta uguale su tutte le colonne; al secondo l'asse comune calcolato dal
   modulo Ore. */
/* Il nome del giorno sopra alla sua colonna. L'altezza e' fissa e non dettata
   dal testo: e' l'unica cosa che tiene allineate le tele, e sopra al righello
   degli orari lo stesso ingombro resta vuoto. */
.dt-giorno__intestazione {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--dt-giorno-testa-h);
  margin-bottom: var(--dt-sp-3);
  padding: 0 var(--dt-sp-2);
  border-radius: var(--dt-r-md);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-text-3);
}
/* La giornata su cui si sta scrivendo: nome pieno, non sbiadito. */
.dt-giorno__intestazione--questa {
  background: var(--dt-surface-2);
  color: var(--dt-text);
}
/* Sbiadita e' la giornata, non il suo nome: se il velo prendesse anche
   l'intestazione il segno del passaggio nascerebbe gia' mezzo spento, e un
   segno mezzo spento non si vede.
   Anche il velo si accende e si spegne sfumando, e nello stesso tempo delle
   larghezze: la colonna che si allarga si sta schiarendo, quella che si
   stringe si sta velando, e alla fine sono passate l'una nel ruolo
   dell'altra senza che si veda un momento in cui erano due cose diverse. */
.dt-giorno__quota > :not(.dt-giorno__quota-testa) {
  opacity: 0.55;
  transition: opacity var(--dt-t-slitta);
}
.dt-giorno__quota--centro > :not(.dt-giorno__quota-testa) { opacity: 1; }
/* Dentro ai blocchi, quel che si legge solo sulla giornata aperta: chi ha
   fatto quel lavoro, a che ora, e il comando per togliere una pausa. In una
   colonna larga un palmo non ci starebbero, e in una colonna che si guarda e
   basta un comando non ha nessuno che lo prema.
   Nascosti sfumando e non tolti: la colonna che si allarga sta diventando
   quella su cui si scrive, e queste sono le cose che le crescono addosso
   mentre lo diventa. Toglierle dal DOM vorrebbe dire rifare i blocchi proprio
   nell'istante in cui si stanno spostando. */
.dt-blocco__ore,
.dt-blocco__info { transition: opacity var(--dt-t-slitta); }
.dt-giorno__quota:not(.dt-giorno__quota--centro) .dt-blocco__ore,
.dt-giorno__quota:not(.dt-giorno__quota--centro) .dt-blocco__info {
  opacity: 0;
  pointer-events: none;
}
.dt-giorno__quota-testa {
  width: 100%;
  background: transparent;
  border: 0;
  /* `font: inherit` da solo si riprenderebbe anche la misura del corpo del
     testo, e l'intestazione di ieri verrebbe piu' grande di quella di oggi. */
  font: inherit;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast),
    transform var(--dt-t-fast);
}
/* Le giornate di fianco restano sbiadite anche col dito sopra: sono li' per
   dare il colpo d'occhio, non per essere lette una alla volta, e accendere una
   colonna intera al passaggio del mouse spostava l'occhio via da quella su cui
   si sta scrivendo. A rispondere e' solo il nome in cima — "mar 4" — che e'
   anche l'unica cosa su cui si sta per premere.
   Il nome si riempie e si alza di un pelo: alzarsi e' quello che fa la cosa
   che si sta per prendere, e un pixel basta perche' la colonna sotto non si
   muova. Stesso segno per il dito e per la tastiera. */
.dt-giorno__quota:not(.dt-giorno__quota--centro):hover .dt-giorno__quota-testa,
.dt-giorno__quota-testa:focus-visible {
  /* Il velo del passaggio e non la superficie piena: piena e' l'intestazione
     della giornata aperta, e due nomi vestiti uguale direbbero che si e' gia'
     li'. */
  background: var(--dt-hover);
  color: var(--dt-text);
  transform: translateY(-1px);
}

/* Segnare un'ora e' l'unica cosa che si fa da questa schermata: il tasto sta
   appoggiato in basso a destra, dove arriva il pollice, invece che in fondo
   alla fila di comandi della testata, dove era il quarto bottone da sinistra.
   Sta fuori dalla colonna che scorre: la giornata gli passa sotto.
   Non e' un cerchio ma un quadrato dagli angoli tondi: il cerchio e' la forma
   dei cerchietti con l'iniziale, e qui era l'unica cosa premibile fatta come
   una cosa da leggere.
   Gli angoli sono quelli della barra che gli sta di fianco, e sono i soliti
   otto pixel di tutta la piattaforma: un raggio in percentuale li faceva
   crescere col tasto, e su un tasto alto cinquantotto pixel diventava una
   pastiglia che in questa interfaccia non assomiglia a niente. */
.dt-giorno__aggiungi {
  position: absolute;
  right: var(--dt-piu-orlo);
  bottom: var(--dt-piu-orlo);
  z-index: var(--dt-z-sticky);
  display: grid;
  place-items: center;
  width: var(--dt-piu);
  height: var(--dt-piu);
  padding: 0;
  border: 1px solid var(--dt-accent);
  border-radius: var(--dt-r-lg);
  background: var(--dt-accent);
  color: var(--dt-text-inv);
  box-shadow: var(--dt-shadow-lg);
  cursor: pointer;
  transition: background var(--dt-t-fast), transform var(--dt-t-fast);
}
.dt-giorno__aggiungi:hover { background: var(--dt-accent-hover); }
.dt-giorno__aggiungi:active { transform: scale(0.94); }

/* In cima resta quello che non va e basta: i blocchi accavallati. Le ore
   segnate le scrive gia' la colonna qui sotto, blocco per blocco, e ripeterle
   in testata era un numero da rileggere e non una cosa da fare.
   Quando non c'e' niente da segnalare l'avviso non c'e' affatto, e la giornata
   comincia in cima alla pagina.
   **Galleggia, e non spinge.** Stava in fila sopra alla giornata, e comparendo
   la faceva scendere di una riga: proprio al rilascio di un trascinamento — il
   momento in cui due blocchi si accavallano — la griglia scattava sotto al
   dito, e il blocco appena posato finiva un'ora piu' in basso di dove lo si
   guardava. Adesso sta appoggiato nell'angolo in alto a destra, dove stava
   anche prima, come la barra della data sta appoggiata in basso: la giornata
   sotto non si muove di un pixel.
   Sopra a cosa sta: a scorrimento fermo in cima, sull'aria che la colonna
   lascia prima del primo blocco (mezz'ora almeno, vedi `RESPIRO`) e sulla
   fila delle persone dei Calendari; scorrendo, sulla giornata che gli passa
   sotto, come sotto alla barra della data. Per questo il dito lo attraversa:
   e' una cosa da leggere e non da premere, e quello che copre — un nome in
   cima a una colonna, un gettone — resta premibile anche li'. */
.dt-giorno__head {
  position: absolute;
  top: 0;
  right: 0;
  z-index: var(--dt-z-sticky);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3) var(--dt-sp-5);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  box-shadow: var(--dt-shadow-md);
}
/* Con piu' giornate affiancate in cima a ogni colonna c'e' il suo nome, e
   nell'angolo l'avviso copriva meta' di quello della colonna di destra: da 660
   a 950 pixel di finestra, dove quella colonna arriva al bordo. Li' sta sotto
   alla fila dei nomi — l'orlo del riquadro (`--dt-sopra-orlo`), il nome e il
   suo distacco — sull'aria che la colonna lascia prima del primo blocco, come
   da sola sta sopra. */
.dt-giorno__pagina:has(.dt-giorno__quota-testa) > .dt-giorno__head {
  top: calc(var(--dt-sp-5) + var(--dt-giorno-testa-h) + var(--dt-sp-3));
}

/* La barra della giornata: la data e i comandi che la muovono, appoggiati in
   basso a destra di fianco al tasto che aggiunge. Stava in cima alla pagina,
   all'angolo opposto dell'unica altra cosa che si fa da qui — e fra un giorno
   sfogliato e un'ora segnata c'era da attraversare tutto lo schermo.
   Galleggia sopra alla giornata invece di starle sopra in colonna: la fila
   dei giorni scorre a tutta altezza e la barra le passa davanti, come i
   comandi sopra a un video.
   Il fianco destro non e' il bordo della pagina ma il posto che il tasto
   "piu'" occupa, largo e staccato quanto lui: cosi' i due sono una coppia, e
   quando il tasto sparisce a mese chiuso la barra non si sposta di un pixel
   per andare a occupare il vuoto che ha lasciato.
   E' un riquadro solo — una barra vera, come i comandi sotto a un video — e
   non piu' quattro pastiglie sciolte, ognuna col suo bordo e la sua ombra:
   quattro ombre in venti pixel sporcavano la colonna che ci scorre sotto, e
   tre cose staccate non dicevano di parlare tutte della stessa data.
   Che la data non sia un tasto come gli altri lo dice un filo verticale e non
   un secondo riquadro: a sinistra del filo c'e' cosa stai guardando, a destra
   i comandi che lo cambiano. */
.dt-giorno__timone {
  position: absolute;
  z-index: var(--dt-z-sticky);
  right: calc(var(--dt-piu-orlo) + var(--dt-piu) + var(--dt-sp-4));
  bottom: var(--dt-piu-orlo);
  /* Non oltre il bordo di sinistra: su un telefono la barra arriva a filo
     della pagina e la data dentro si stringe da sola. */
  max-width: calc(100% - var(--dt-piu-orlo) * 2 - var(--dt-piu) - var(--dt-sp-4));
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  /* Alta quanto il "piu'" che le sta di fianco: i due sono la stessa coppia
     di comandi e stanno su una riga sola. */
  height: var(--dt-piu);
  padding: var(--dt-sp-2);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-lg);
  /* L'altezza di quello che ci sta dentro: quel che resta della barra tolti
     il bordo e l'aria sopra e sotto. Un numero solo, cosi' la data, le frecce
     e "Oggi" non possono venire su di tre altezze diverse. */
  --dt-timone-h: calc(var(--dt-piu) - var(--dt-sp-2) * 2 - 2px);
  /* Quanto stringere i comandi su un telefono: zero da 424 pixel in su, otto
     da 380 in giu', e in mezzo un pixel ogni cinque e mezzo. Sedici tolti alle
     due frecce, dodici all'aria di "Oggi", otto a quella della data e otto al
     filo fanno quarantaquattro, un pixel risparmiato per ogni pixel di
     finestra in meno: "mercoledi' 23 settembre" ci sta intera fino a 370.
     A misura piena su un telefono da 390 ne mancavano ventitre: "Oggi" usciva
     dalla barra a destra, e a 360 finiva sotto al tasto "piu'". Sotto ai 370
     quello che manca ancora lo cede la data, che scorre di lato. */
  --dt-timone-stretto: clamp(0px, (424px - 100vw) / 5.5, var(--dt-sp-4));
}
/* Col calendario aperto la barra sale al piano dei menu. Il velo che chiude il
   calendario sta dentro alla barra, e un velo non puo' coprire piu' in alto del
   piano di chi lo porta: alla pari col tasto «piu'», che viene dopo nella
   pagina, il tasto restava scoperto e premerlo apriva un blocco nuovo invece
   di richiudere il calendario. */
.dt-giorno__timone--aperto { z-index: var(--dt-z-menu); }

/* Dentro alla barra i comandi sono piatti: il riquadro ce l'ha gia' la barra,
   e un bordo per tasto sarebbe una cornice dentro la cornice. Si accendono
   sotto al dito, come le voci di un menu. */
.dt-giorno__timone .dt-iconbtn,
.dt-giorno__timone .dt-btn {
  height: var(--dt-timone-h);
  border-radius: var(--dt-r-md);
  box-shadow: none;
}
.dt-giorno__timone .dt-iconbtn { width: calc(var(--dt-timone-h) - var(--dt-timone-stretto)); }
/* Il tasto e' grande quanto ci vuole per il pollice, e il segno dentro va
   grande di conseguenza: la freccia da quattordici pixel in un quadrato da
   quasi cinquanta si perdeva in mezzo al vuoto. */
.dt-giorno__timone .dt-iconbtn svg { width: 20px; height: 20px; }

/* La data scritta per intero, su due righe: il giorno della settimana sopra e
   "6 agosto 2026" sotto. Prima stava in due pezzi lontani — il foglietto col
   numero da una parte, il mese e l'anno dall'altra, con le frecce in mezzo —
   e per sapere che giorno fosse bisognava rimetterli insieme a mente; poi
   tutta di fila, e "giovedi'" si metteva davanti al numero che si viene a
   cercare.
   E' un tasto: ci si clicca sopra per saltare a un giorno preciso. Si vede
   che lo e' quando ci si passa sopra, non prima: dentro alla barra un bordo
   pieno sarebbe solo una cornice dentro la cornice.
   Alto quanto le frecce che gli stanno a fianco, cosi' il velo che si accende
   al passaggio e' un rettangolo della stessa taglia dei loro e non un
   francobollo in mezzo alla riga. */
.dt-giorno__data {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  /* Le righe sono quelle due e non vanno mai a capo da sole: le due insieme
     stanno nell'altezza della barra, una terza la farebbe crescere in su
     sopra alla giornata. Quando lo spazio finisce a togliersi e' l'anno. */
  white-space: nowrap;
  /* Quando la barra non ci sta intera e' la data a stringersi — i comandi
     no, sono bersagli per il pollice — e le sue due righe scorrono di lato. */
  min-width: 0;
  max-width: 100%;
  height: var(--dt-timone-h);
  padding: 0 calc(var(--dt-sp-4) - var(--dt-timone-stretto) / 2);
  color: var(--dt-text);
  background: transparent;
  border: 0;
  border-radius: var(--dt-r-md);
  line-height: var(--dt-lh-tight);
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
.dt-giorno__data:hover { background: var(--dt-hover); }

/* Le due righe della data, impilate e centrate nell'altezza del tasto: il
   giorno della settimana fa da cappello, sotto c'e' la data vera. In fila
   erano quattro parole da attraversare per arrivare al numero.
   Allineate a sinistra e non centrate una sull'altra: le due righe cominciano
   dallo stesso punto, e cambiando giorno il numero non balla di qua e di la'
   per stare in mezzo a un nome che si accorcia. */
.dt-giorno__data-pila {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: var(--dt-lh-tight);
}
/* La data e il suo anno sulla stessa linea di base: hanno due corpi diversi,
   e centrati uno sull'altro il "2026" verrebbe su a mezz'aria.
   Si chiama `data-riga` e non `riga` perche' `.dt-giorno__riga` e' gia' la
   riga di un'ora nella colonna qui sotto, che sta in `absolute`: due nomi
   uguali e le due scritte della data finivano una sopra all'altra. */
.dt-giorno__data-riga {
  display: flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
}
.dt-giorno__dow {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.06em;
  color: var(--dt-text-3);
}
/* Cresce con la finestra invece di saltare a una soglia: e' la scritta piu'
   grande della schermata, e su un telefono in verticale deve stare comunque
   in riga coi suoi comandi.
   Il massimo e' sceso da ventidue a diciassette: adesso sopra ha una riga
   sua, e le due insieme devono stare nell'altezza della barra senza che la
   barra cresca — la barra e' alta quanto il tasto "piu'", e quello non si
   muove. */
.dt-giorno__quando {
  font-size: clamp(var(--dt-fs-lg), 0.35vw + 11px, var(--dt-fs-xl));
  font-weight: var(--dt-fw-semibold);
  font-variant-numeric: tabular-nums;
}
/* L'anno e' contorno, non notizia: sta con la data ma pesa come il giorno
   della settimana. Sotto alla soglia in cui la giornata si prende tutta la
   pagina non c'e' piu' spazio per lui nella barra, e se ne va: in che anno si
   e' lo si sa gia', e il calendario qui sotto lo scrive comunque. */
.dt-giorno__anno {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-text-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 660px) {
  .dt-giorno__anno { display: none; }
}
/* Il segno che sotto c'e' un pannello: va con la riga, non con le lettere. */
.dt-giorno__data svg { flex: none; align-self: center; color: var(--dt-text-3); }

/* Le cifre chiudono la riga e si prendono quello che avanza. */
.dt-giorno__cifre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  gap: var(--dt-sp-2) var(--dt-sp-5);
}

.dt-cifra {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}
/* Dentro alla riga delle cifre la cifra va in riga, e lo si ripete: `.dt-cifra`
   e' anche il numero grande in fondo alla scheda di una commessa, che va in
   colonna e viene dopo nel foglio (vedi `.dt-cifre`). A pari peso vinceva
   quella, e l'avviso dei sovrapposti usciva impilato su tre righe — segno,
   numero e parola una sotto l'altra. Il resto la cifra della commessa lo
   prende ancora da qui sopra: per questo la regola nuda resta nuda. */
.dt-giorno__cifre .dt-cifra {
  display: inline-flex;
  flex-direction: row;
  gap: var(--dt-sp-2);
}
.dt-cifra b {
  font-weight: var(--dt-fw-medium);
  color: var(--dt-text-2);
  font-variant-numeric: tabular-nums;
}
/* Un avviso in mezzo ai totali: e' un numero come gli altri, ma parla di
   qualcosa che non torna, quindi si tinge invece di stare grigio.
   Sta in fondo alla riga, spinto contro il bordo: e' l'unica cosa della
   testata che va e viene col giorno aperto, e da li' quando arriva non ha
   niente da spostare. In mezzo alle quote allontanava di uno scatto la
   giornata di ieri da quella di oggi. */
.dt-cifra--guaio { color: var(--dt-warn); margin-left: auto; }
.dt-cifra--guaio b { color: var(--dt-warn); }

/* I comandi stanno a fianco della data: sono quelli che la muovono, e messi
   in fondo alla riga sembrerebbero comandare la schermata. Le due frecce
   vicine e "Oggi" di seguito: indietro, avanti, torna. */
.dt-giorno__comandi {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-1);
  flex: 0 0 auto;
}
/* Il filo che separa la data dai suoi comandi: e' quanto basta per dire che
   di la' si legge e di qua si preme. Non arriva ai bordi della barra ma si
   ferma prima, come i separatori dei menu: toccando sopra e sotto sembrerebbe
   che la barra sia tagliata in due scatole. */
.dt-giorno__comandi::before {
  content: "";
  align-self: center;
  width: 1px;
  height: calc(var(--dt-timone-h) - var(--dt-sp-3) * 2);
  margin: 0 calc(var(--dt-sp-3) - var(--dt-timone-stretto) / 2);
  background: var(--dt-border);
}
/* "Oggi" e' l'unica cosa della testata che cambia col giorno aperto: quando
   sei gia' su oggi resta dov'e' e ingrigisce, invece di richiudersi. Un tasto
   che spariva accorciava la fila dei comandi proprio mentre la si stava
   usando, e "avanti" finiva sotto un dito che cercava "Oggi". Ingrigisce
   sfumando, coi colori che il bottone interpola gia' di suo. */
.dt-giorno__oggi { display: flex; flex: 0 0 auto; }
/* E' l'unica scritta premibile della barra: viva sta scritta col nero pieno
   del testo, non col grigio delle icone, se no in mezzo a due frecce
   sembrerebbe l'etichetta di qualcos'altro. */
.dt-giorno__oggi .dt-btn {
  padding: 0 calc(var(--dt-sp-5) - var(--dt-timone-stretto) * 0.75);
  color: var(--dt-text);
}
.dt-giorno__oggi .dt-btn:disabled {
  /* Grigia, non sbiadita: sbiadire vuol dire mezzo tono di tutto quanto, e su
     un tasto piatto si legge come una cosa rotta invece che spenta. */
  opacity: 1;
  background: transparent;
  color: var(--dt-text-3);
}

/* Dove sta la data dentro alla barra, e il gancio a cui il pannello dei
   giorni si appende quando si apre. Non ha piu' un riquadro suo: il riquadro
   e' la barra, e uno dentro l'altro erano due cornici per una cosa sola. */
.dt-giorno__scelta {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

/* --- Il calendario a comparsa ------------------------------------------- */

.dt-mese {
  position: absolute;
  z-index: calc(var(--dt-z-menu) + 1);
  top: calc(100% + var(--dt-sp-3));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-lg);
  animation: dt-pop var(--dt-t-med);
}
/* Nella barra della giornata il pannello si apre all'insu' e si allinea al
   bordo sinistro della barra: sotto c'e' il bordo della finestra e a destra il
   tasto "piu'", e da tutte e due le parti uscirebbe di pagina. Anche il piccolo
   scatto d'entrata cambia verso: sale da sotto invece di scendere, se no il
   pannello si aprirebbe venendo dalla parte in cui non c'e' il tasto che l'ha
   aperto.

   **Si ancora alla barra, non alla data.** Stava appeso al bordo destro della
   data, e verso sinistra si allargava nel vuoto: su un telefono quel vuoto non
   c'e'. La barra e' spinta a destra dal tasto "piu'" e la data e' la prima
   cosa che ci sta dentro, quindi il suo bordo destro cade a un terzo dello
   schermo — e un pannello da duecentoventisei pixel appeso li' cominciava a
   meno ottantacinque: due settimane su quattro finivano fuori dallo schermo, e
   la parte tagliata era proprio quella con lunedi'. Il bordo sinistro della
   barra invece un limite ce l'ha gia' (`max-width` sulla barra), ed e' anche
   il punto da cui comincia la data che apre il pannello: il pannello esce da
   sotto al tasto che lo ha aperto, allineato con lui.
   Dall'altra parte c'e' spazio da vendere: il pannello e' largo quanto un mese
   e la barra quasi sempre di piu', e dove non lo e' — sui telefoni piu'
   stretti — il pannello la supera di una dozzina di pixel restando comunque
   dentro allo schermo, che e' la misura che conta. */
.dt-giorno__timone .dt-mese {
  top: auto;
  /* Il filo d'aria si misura dal bordo della barra e non da quello della
     data: la data adesso sta dentro alla barra, e sei pixel presi da lei
     lasciavano il pannello appiccicato al bordo di sopra. */
  bottom: calc(100% + var(--dt-sp-3) + var(--dt-sp-2) + 1px);
  /* Il pannello e la data sono fratelli, tutt'e due dentro alla scelta, e la
     scelta sta nella barra staccata dal suo bordo di un'aria e di un filo:
     tornare indietro di tanto quanto vuol dire cadere esattamente sul bordo
     della barra. */
  left: calc(-1 * (var(--dt-sp-2) + 1px));
  right: auto;
  animation-name: dt-pop-su;
}
@keyframes dt-pop-su { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
/* Coricato, il telefono e' basso quanto e' largo: sopra alla barra non ci sta
   un mese intero, e il pannello appeso li' usciva dal bordo di sopra — con
   dentro il titolo e le frecce, cioe' l'unico modo di cambiare mese. Sotto una
   certa altezza allora smette di appendersi e si mette in mezzo allo schermo,
   sopra al velo che c'e' gia': e' l'unico posto dove ci sta tutto. In piedi non
   cambia niente, che e' come lo si tiene quasi sempre. */
@media (max-height: 480px) {
  .dt-giorno__timone .dt-mese {
    position: fixed;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    /* Sotto ai trecentoventi di uno schermo vecchio nemmeno in mezzo ci sta:
       quello che avanza scorre dentro al pannello invece di uscire. */
    max-height: calc(100dvh - 2 * var(--dt-sp-4));
    overflow-y: auto;
    animation-name: dt-pop-mezzo;
  }
  /* Lo scatto d'entrata sale come l'altro, ma senza perdere la mezzeria. */
  @keyframes dt-pop-mezzo {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)) scale(0.985); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
}
.dt-mese__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-3);
}
.dt-mese__mese {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  text-transform: capitalize;
}
/* L'intestazione cade sulle stesse sette colonne della griglia, se no le
   iniziali non stanno sopra ai loro giorni. */
.dt-mese__settimana,
.dt-mese__griglia {
  display: grid;
  /* Colonne di misura fissa, e non `minmax(0, ...)`: il pannello sta in
     `absolute` e la sua larghezza gliela detta quello che ci sta dentro. Con
     un minimo a zero le sette colonne smettono di contare, e il mese si
     stringe sulla riga del titolo — un calendario largo centocinquanta pixel
     con dentro sette colonne da diciotto. */
  grid-template-columns: repeat(7, clamp(28px, 6vw, 34px));
  gap: var(--dt-sp-1);
}
.dt-mese__settimana span {
  text-align: center;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dt-mese__giorno,
.dt-mese__riempi {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(28px, 6vw, 34px);
  border-radius: var(--dt-r-sm);
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
}
.dt-mese__giorno {
  border: 1px solid transparent;
  background: transparent;
  color: var(--dt-text);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-mese__giorno:hover { background: var(--dt-hover); }
/* Oggi si segna con un bordo: e' un riferimento, non una scelta. */
.dt-mese__giorno--oggi { border-color: var(--dt-accent-border); font-weight: var(--dt-fw-semibold); }
/* Il giorno aperto invece e' una scelta gia' fatta: si inverte. */
.dt-mese__giorno--aperto {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color: var(--dt-text-inv);
}
.dt-mese__giorno--aperto:hover { background: var(--dt-accent-hover); }

/* --------------------------------------------------------------------------
   22. Colonna della giornata: le ore in verticale
   -------------------------------------------------------------------------- */

/* La giornata si legge come un calendario, non come una tabella: l'altezza di
   un blocco *e'* la sua durata, quindi il buco fra un lavoro e l'altro si vede
   invece di doverlo calcolare. L'altezza di un minuto e' una variabile perche'
   il pollice ha bisogno di piu' spazio del mouse. */
.dt-giorno {
  --dt-min: 1.15px;
  display: grid;
  grid-template-columns: var(--dt-asse-w) 1fr;
  gap: var(--dt-sp-2);
}
/* Colonna senza righello: gli orari li scrive qualcun altro, di fianco a
   tutte. Vedi `.dt-giorno__accanto`. */
.dt-giorno--nuda { grid-template-columns: 1fr; }
/* Anche l'altezza si interpola, ed e' meta' del movimento.
   Le ore mostrate non sono sempre le stesse: la colonna si apre mezz'ora prima
   di chi ha cominciato per primo, e cambiando giornata quel primo puo' essere
   un altro. Allora la finestra si allarga o si stringe, e con lei l'altezza
   della colonna, la distanza fra le righe delle ore e la quota di ogni blocco.
   Senza transizione tutto questo succede in un fotogramma, mentre di fianco le
   larghezze stanno ancora scorrendo: e un giorno che scorre orizzontale ma
   salta in verticale si legge come un errore, non come un movimento.
   Le durate sono le stesse dello scorrimento, cosi' le due meta' finiscono
   insieme e si vedono come una cosa sola. */
.dt-giorno__ore {
  position: relative;
  transition: height var(--dt-t-slitta);
}
/* Il righello che sta per conto suo, a sinistra delle giornate affiancate:
   stessa larghezza della colonnina che avrebbero avuto dentro, cosi' gli
   orari restano dove l'occhio li cerca. In cima si tiene il posto vuoto
   dell'intestazione, altrimenti partirebbe un'intestazione piu' in alto delle
   tele che deve misurare. */
.dt-giorno__asse { width: var(--dt-asse-w); }
.dt-giorno__ora {
  position: absolute;
  right: 0;
  transition: top var(--dt-t-slitta);
  transform: translateY(-50%);
  font-size: var(--dt-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dt-text-3);
}
.dt-giorno__tela {
  position: relative;
  border-left: 1px solid var(--dt-border);
  transition: height var(--dt-t-slitta);
}
.dt-giorno__riga {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--dt-border-soft);
  transition: top var(--dt-t-slitta);
}
/* Dove siamo arrivati adesso: sopra a tutto, perche' e' la riga che si cerca
   per prima, e senza pointer-events perche' passa in mezzo ai blocchi e non
   deve rubare il dito a nessuno di loro. */
.dt-giorno__adesso {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  border-top: 2px solid var(--dt-danger);
  transition: top var(--dt-t-slitta);
}
.dt-giorno__adesso::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dt-danger);
}
.dt-giorno__adesso-ora {
  position: absolute;
  top: -9px;
  right: 3px;
  padding: 0 var(--dt-sp-2);
  border-radius: var(--dt-r-sm);
  background: var(--dt-danger);
  color: #fff;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 16px;
}
/* Ora fuori dalla colonna: la riga sta in cima ma non e' li' che siamo, e
   tratteggiata si distingue da quella che indica un punto vero. */
.dt-giorno__adesso--fuori {
  border-top-style: dashed;
  opacity: 0.7;
}

/* Quello che sta fuori dallo schermo: **un bollo per blocco, su ognuno dei due
   bordi**.
   Una giornata e' piu' alta dello schermo: scorrendo verso sera la mattina
   sparisce sopra al bordo, e a schermo pieno di mattina la sera non e' ancora
   arrivata. Da fermi, cosa c'e' oltre i due bordi si sa solo andando a vedere.
   I bolli restano sui bordi, uno per ogni blocco uscito: **di sopra quello che
   e' passato, di sotto quello che deve ancora venire**. Che verso sia lo dice
   il posto in cui la fila sta — appesa in cima parla di sopra, appesa in fondo
   parla di sotto — e non una freccia; il numero dei blocchi lo si conta.

   Un bollo dice due cose. **La tinta per conto di chi** si stava lavorando, con
   la campitura del blocco — piena, a sagoma, tratteggiata, bianca — che e' la
   stessa qui e in colonna. **Il segno che lavoro era**: l'icona
   dell'attivita', la stessa che il blocco porta in testa. Il colore da solo
   diceva soltanto la prima, e due montaggi di negozi diversi li distingueva
   mentre un montaggio da un sopralluogo no: e' il segno che risponde alla
   domanda con cui si guarda un bordo.

   In fila per orario, staccati da un filo d'aria: prima si impilavano come le
   facce, e sovrapposti l'icona la si vedeva solo all'ultimo. Quando i bolli
   accesi sono piu' di quanti la colonna ne tiene — sei di mattina in una
   colonna dei Calendari larga un palmo — si **stringono** invece di sbordare
   sulla persona di fianco: il segno dentro si taglia e resta una scaglia della
   sua tinta, cioe' esattamente quello che c'era prima che i bolli avessero un
   segno. Solo gli accesi si stringono (`flex-shrink`), che a uno spento il
   margine negativo deve togliere esattamente il posto che occupa.

   Un bollo c'e' per ogni blocco, sempre, e finche' il blocco e' in vista sta
   nascosto sotto a quello che lo precede, invisibile e senza prendere posto;
   quando il blocco passa il bordo il bollo **ne sguscia fuori** — stesso nodo,
   `margin-left` e `opacity` in transizione — e lo si vede staccarsi dal blocco
   che scivola via. Gli accesi sono i primi della fila di sopra e gli ultimi di
   quella di sotto: chi comincia prima esce prima di sopra, chi comincia dopo
   rientra per ultimo di sotto.
   Le file non prendono il dito — i gesti sotto sono della tela — e lo prendono
   solo i bolli accesi, che riportano al loro blocco. */
/* La cornice che tiene le due file ai capi della tela, dentro a cui stanno
   appiccicate ai bordi del riquadro.
   Serve per una ragione sola, e non e' impaginazione: un elemento appiccicato
   al bordo di **sotto** viene tirato su da sotto — e' quello che fa un piede
   di pagina che resta in vista finche' non si arriva in fondo — e non spinto
   giu' da sopra. Nata in cima alla tela, la fila di sotto ci resterebbe. Qui
   invece nasce in fondo (`margin-top: auto`), dove finisce la giornata, e da
   la' viene tirata su fino al bordo del riquadro.
   Alta come la tela, e in flusso: e' l'unica cosa in flusso dentro alla tela —
   righi e blocchi sono tutti assoluti — e non sposta niente. */
.dt-giorno__fuori {
  display: flex;
  flex-direction: column;
  height: 100%;
  pointer-events: none;
}
.dt-giorno__sopra,
.dt-giorno__sotto {
  position: sticky;
  /* Sopra alla riga di adesso: sono i bordi, e sul bordo si guarda per primo
     quello che sta appeso al bordo. */
  z-index: 4;
  display: flex;
  align-items: center;
  /* Il lato del bollo, una misura sola per le due file e per i bolli dentro.
     Diciotto e non dodici: dentro ci sta un segno che si riconosce, ed e' la
     misura piu' piccola alla quale un'icona a undici pixel non e' un
     francobollo. */
  --dt-bollo: 18px;
  height: calc(var(--dt-bollo) + var(--dt-sp-2));
  /* Larga quanto la colonna, e per il **conto** delle larghezze larga zero.
     Senza, una fila di sei bolli fa da larghezza minima a tutta la colonna: la
     tela e' una traccia `1fr`, la traccia non scende sotto al contenuto, e la
     colonna dei Calendari si allargherebbe per far stare i bolli invece di
     stringerli. Lo zero rompe il giro — nel conto la fila non pesa — e il
     `min-width` la riporta larga quanto la colonna quando si disegna. */
  width: 0;
  min-width: 100%;
  /* A sinistra niente: l'aria dal bordo della colonna la mette il margine del
     bollo, che e' anche quello che li stacca fra loro — una misura sola invece
     di due che devono coincidere. A destra un filo, cosi' l'ultimo non tocca
     la persona di fianco. */
  padding: var(--dt-sp-2) var(--dt-sp-2) 0 0;
  box-sizing: border-box;
  pointer-events: none;
}
.dt-giorno__sopra {
  /* Al bordo vero del riquadro, non a quello del suo contenuto: vedi
     `--dt-sopra-orlo` su `.dt-giorno__scorri`. */
  top: calc(0px - var(--dt-sopra-orlo, 0px));
}
/* La fila di sotto sta sul bordo di sotto del riquadro, come quella di sopra
   sta su quello di sopra: un bordo dice cosa c'e' oltre a se stesso, e per
   dirlo deve essere il bordo — fermata in cima all'aria che la barra della
   data si tiene, la fila galleggiava a cento pixel dal fondo, in mezzo ai
   blocchi, e il bollo sembrava appartenere al blocco che si trovava li'
   accanto invece che alla fine della giornata.
   Scende il respiro di sotto (`--dt-sotto-orlo`) per la stessa ragione per cui
   quella di sopra risale il suo: un elemento appiccicato si ferma al bordo del
   **contenuto**, e il bordo vero sta oltre. */
.dt-giorno__sotto {
  /* In fondo alla cornice: e' da la' che il bordo la tira su. */
  margin-top: auto;
  bottom: calc(0px - var(--dt-sotto-orlo, 0px));
  padding-top: 0;
  padding-bottom: var(--dt-sp-2);
}
/* Su uno schermo stretto la barra della data non sta piu' in un angolo: prende
   la riga intera, e al fondo del riquadro non resta niente di scoperto dove
   appendere un bollo. Li' la fila si ferma di nuovo sopra all'aria che la
   barra si tiene — meglio un dito piu' su che dietro. Cambia la disposizione,
   non la misura: per questo e' una `@media` e non un `clamp`. */
@media (max-width: 720px) {
  .dt-giorno__sotto { bottom: 0; }
}
.dt-giorno__bollo {
  /* Le stesse manopole del blocco (vedi `.dt-blocco--tinta`): il bollo e' il
     blocco in piccolo, e i suoi colori si compongono dagli stessi numeri.
     Il pieno pero' e' al tono del bordo e non della campitura: diciotto pixel
     di pastello sul fondo di pagina si perderebbero, e un segno piccolo vuole
     piu' inchiostro di uno grande. Il segno dentro resta nero come la scritta
     del blocco (`--dt-tinta-l-testo`), che su quel tono tiene otto a uno. */
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  --dt-bollo-pieno: oklch(
    calc(var(--dt-tinta-l-bordo) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  --dt-bollo-tratto: oklch(
    calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%))
    calc(var(--dt-blocco-c) * var(--dt-tinta-c-tratto))
    var(--dt-blocco-tinta)
  );
  --dt-bollo-velo: oklch(
    calc(var(--dt-sagoma-l) + var(--dt-blocco-luce, 0%) * 0.5)
    calc(var(--dt-blocco-c) * var(--dt-sagoma-c))
    var(--dt-blocco-tinta)
  );
  /* Spento non si stringe: il margine negativo gli toglie esattamente il posto
     che occupa, e se si stringesse il conto non tornerebbe piu' — gli accesi
     gli scivolerebbero addosso. */
  flex: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dt-bollo);
  height: var(--dt-bollo);
  /* Spento: sotto a chi lo precede, e per la fila largo zero. */
  margin-left: calc(0px - var(--dt-bollo));
  padding: 0;
  /* Il posto del tocco allargato (vedi `.dt-giorno__bollo::before`). */
  position: relative;
  border: 2px solid var(--dt-surface-inset);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface-inset);
  /* L'anello del fondo su cui la fila sta: e' quello che stacca il bollo da
     quello che gli passa dietro. Senza, un bollo ambra appeso sopra al blocco
     ambra da cui e' appena uscito sparisce dentro alla sua stessa tinta —
     proprio nel momento in cui compare. Largo quanto l'aria fra un bollo e
     l'altro, cosi' fra due bolli la striscia di fondo e' continua e la fila si
     legge come una cosa sola anche passando su un blocco. */
  box-shadow: 0 0 0 var(--dt-sp-2) var(--dt-bollo-anello, var(--dt-bg));
  color: var(--dt-text-2);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: margin-left var(--dt-t-med), opacity var(--dt-t-med),
    transform var(--dt-t-fast);
}
/* Stretto, il segno si taglia: vedi il commento in testa. Lo taglia il suo
   riquadro e non il bollo, che tagliando si porterebbe via anche il tocco
   allargato. Il segno non si schiaccia quando il bollo si stringe: si taglia.
   Uno schiacciato sarebbe un altro segno. */
.dt-giorno__bollo-segno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.dt-giorno__bollo-segno > svg { flex: none; }
.dt-giorno__bollo--fuori {
  /* Acceso prende il suo posto e l'aria che lo stacca dal precedente; se il
     posto non c'e', si stringe. */
  flex-shrink: 1;
  min-width: 0;
  margin-left: var(--dt-sp-2);
  opacity: 1;
  pointer-events: auto;
}
/* Sotto al mouse si alza di un pelo, come il nome di una giornata di fianco:
   e' quello che fa la cosa che si sta per prendere. */
.dt-giorno__bollo--fuori:hover,
.dt-giorno__bollo--fuori:focus-visible { transform: translateY(-1px); }
/* Le quattro campiture, nello stesso ordine e con le stesse regole del
   blocco: piena, a sagoma (tratteggio, dentro un velo), fuori conto
   (tratteggio, dentro la superficie), bianca (il foglio). Il segno dentro
   segue: nero sul pieno, del colore del tratteggio dentro ai due vuoti. */
.dt-giorno__bollo--tinta {
  border-color: var(--dt-bollo-pieno);
  background: var(--dt-bollo-pieno);
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
.dt-giorno__bollo--sagoma {
  border-style: dashed;
  border-color: var(--dt-bollo-tratto);
  background: var(--dt-bollo-velo);
  color: var(--dt-bollo-tratto);
}
.dt-giorno__bollo--sagoma:not(.dt-giorno__bollo--tinta) {
  border-color: var(--dt-border-strong);
  background: var(--dt-surface-inset);
  color: var(--dt-text-2);
}
.dt-giorno__bollo--tratto {
  border-style: dashed;
  border-color: var(--dt-bollo-tratto);
  background: var(--dt-surface);
  color: var(--dt-bollo-tratto);
}
/* Il bianco: il foglio, come il blocco. Il filo intorno pero' e' piu' scuro
   di quello del blocco (88% e 78%): diciotto pixel di bianco su una pagina
   quasi bianca si tengono solo con un contorno che si vede, e un segno piccolo
   vuole piu' inchiostro di uno grande. Il segno dentro e' nero come la scritta
   del blocco bianco, e vince sul grigio del tratteggio: sta su un foglio. */
.dt-giorno__bollo--bianco {
  border-color: oklch(66% 0 0);
  background: #fff;
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) 0);
}
.dt-giorno__bollo--bianco.dt-giorno__bollo--sagoma { border-color: oklch(56% 0 0); }
/* Dentro a un cartellino la fila non e' appiccicata a niente: fermo e' il
   cartellino intero, e la fila e' la sua terza riga. Alta quanto un bollo e
   basta — l'aria fra le righe la mette gia' il cartellino — e alta uguale
   anche quando e' vuota: se crescesse comparendo, i cartellini si alzerebbero
   mentre si scorre, cioe' proprio nel momento in cui si guarda sotto di loro. */
.dt-calendari__testa .dt-giorno__sopra {
  position: static;
  height: var(--dt-bollo);
  padding: 0;
  /* Qui dietro non c'e' la pagina ma il cartellino: l'anello prende il fondo
     di quello, se no si vedrebbe un alone intorno a ogni bollo. */
  --dt-bollo-anello: var(--dt-surface-2);
}

.dt-giorno__vuoto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--dt-sp-6);
  text-align: center;
  color: var(--dt-text-3);
  font-size: var(--dt-fs-sm);
}

/* Il buco fra un pezzo di giornata e l'altro: una domanda, non un blocco.

   Fermo non si vede — un buco e' il posto dove non e' successo niente, e due
   parole in ogni buco della settimana riempirebbero di testo proprio le parti
   vuote della colonna. Col mouse sopra si accende appena, e dentro compaiono le
   risposte sottolineate.

   Si sposta e si ridimensiona come un blocco, e per lo stesso motivo: quando la
   finestra delle ore cambia, o quando il lavoro di fianco si trascina, il buco
   e' lo stesso buco che si stringe. */
.dt-buco {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--dt-r-md);
  transition: background var(--dt-t-fast), top var(--dt-t-slitta),
    height var(--dt-t-slitta);
}
.dt-buco:hover,
.dt-buco:focus-within { background: var(--dt-hover); }

.dt-buco__scelte {
  display: flex;
  align-items: center;
  gap: 0.4em;
  max-width: 100%;
  padding: 0 var(--dt-sp-2);
  font-size: var(--dt-fs-xs);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dt-t-fast);
}
.dt-buco:hover .dt-buco__scelte,
.dt-buco:focus-within .dt-buco__scelte { opacity: 1; }

/* La congiunzione: non si preme, e non deve sembrare che si prema. */
.dt-buco__o { color: var(--dt-text-3); }

.dt-buco__scelta {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dt-text-2);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.dt-buco__scelta:hover { color: var(--dt-accent); }
/* Col dito le risposte stanno sempre in vista, velate: il passaggio del mouse
   non esiste, e una domanda che non si vede non e' una domanda. A dirlo e' la
   mano che si sta usando (`--dito`, vedi `BucoOre`) e non lo schermo: un
   due-in-uno dichiara di avere un sopra anche quando lo si tiene col pollice. */
.dt-buco--dito .dt-buco__scelte { opacity: 0.75; }
/* E col dito il posto dove premere e' piu' grande della parola: scritta in
   corpo minimo e alta una riga sola era un bersaglio da tredici pixel, ed e'
   l'unico modo di dire un viaggio col dito. Si allarga senza che la scritta si
   muova — un foglio trasparente attaccato alla parola — su e giu' di quanto
   serve a fare un pollice, e di lato fino a meta' della congiunzione, cosi' le
   due risposte non si rubano il tocco. Oltre al buco non va: il riquadro
   taglia quello che sborda, e quello che sborderebbe sono i due lavori che lo
   chiudono. Col mouse no: la freccia la parola la prende, e il resto del buco
   resta a chi ci trascina sopra un blocco nuovo. */
.dt-buco--dito .dt-buco__scelta::before {
  content: "";
  position: absolute;
  inset: calc(0px - var(--dt-sp-6)) calc(0px - var(--dt-sp-3));
}

/* La colonna che si guarda e basta: la domanda non si fa. */
.dt-buco--fermo { pointer-events: none; }
.dt-buco--fermo .dt-buco__scelte { display: none; }

/* Un blocco corto resta leggibile: il testo si taglia, il riquadro no. */
.dt-blocco {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-height: 16px;
  /* Piu' aria di lato che sopra e sotto: sopra e sotto la misura la detta il
     blocco piu' corto che si possa disegnare (cinque minuti), di lato no. */
  padding: var(--dt-sp-2) var(--dt-sp-4);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  color: var(--dt-text);
  text-align: left;
  /* Il blocco si sposta e si ridimensiona invece di riapparire altrove: quando
     la finestra delle ore cambia cambiano quota e altezza di tutti, e quando
     due lavori smettono di accavallarsi cambiano corsia e larghezza. In tutti
     e tre i casi il blocco e' lo stesso — e' quello che uno guarda per capire
     dove sta andando la giornata — e un blocco che si teletrasporta va
     ritrovato ogni volta da capo. */
  transition: background var(--dt-t-fast), top var(--dt-t-slitta),
    height var(--dt-t-slitta), left var(--dt-t-slitta), width var(--dt-t-slitta);
}
button.dt-blocco { cursor: pointer; font: inherit; }
button.dt-blocco:hover { background: var(--dt-surface-2); }

/* Blocco colorato, come l'evento di un calendario: ogni tipo di lavoro ha il
   suo pastello, e la giornata si legge dai colori prima che dalle scritte.
   Dallo `style` inline arrivano la tonalita' (`--dt-blocco-tinta`, gradi
   OKLCH), quanto e' carica (`--dt-blocco-croma`) e — solo per i grigi, che
   tonalita' non ne hanno — di quanto si scosta dalla luminosita' del tema
   (`--dt-blocco-luce`): le sa solo chi ha scelto i colori, perche' fin dove
   ogni tonalita' arriva dipende dalla tonalita'.
   Quanto accenderla resta al tema, e la coppia fondo/scritta resta leggibile
   su tutti e due perche' il blocco non segue la pagina ma porta con se' il
   proprio contrasto.

   La carica del tema (`--dt-tinta-c`) e' il ripiego per chi la tonalita' la
   passa e basta: un valore prudente, che sta dentro al gamut di qualunque
   grado. `--dt-tinta-c-scala` e' invece il tocco del tema sopra alla scelta
   di chi disegna — sul fondo scuro si scarica un filo, dove la stessa
   campitura sembra accesa da dietro. */
.dt-blocco--tinta {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
  border-color: oklch(
    calc(var(--dt-tinta-l-bordo) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
}
/* Le righe minori sono la stessa scritta velata: il grigio di pagina su un
   fondo colorato sparirebbe. Velate di quanto basta a metterle sotto al
   titolo, non tanto da toglierle dal fondo: il posto tiene otto a uno sul suo
   pastello, l'orario cinque e mezzo — sopra la soglia anche per le scritte
   piccole, e sul piu' chiaro dei dodici.
   Due veli e non uno: il posto dove si e' lavorato si legge quasi sempre,
   l'orario solo quando si va a cercarlo. */
.dt-blocco--tinta .dt-blocco__info {
  color: inherit;
  opacity: 0.78;
}
.dt-blocco--tinta .dt-blocco__ore {
  color: inherit;
  opacity: 0.65;
}
button.dt-blocco--tinta:hover {
  background: oklch(
    calc(var(--dt-tinta-l-forte) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
}

/* **Il blocco che un colore non ce l'ha e' bianco.** Sono le ore che non si
   vanno a fare per conto di nessuno — l'ora d'ufficio, un negozio a cui
   nessuno ha ancora scelto la tinta — e prima erano di un grigio chiaro, che
   e' quello che i numeri dell'assenza (`NESSUNA` in `tinte.rs`) rendono da
   soli. Il grigio pero' la tavolozza ce l'ha per davvero: quattro grigi,
   scelti come le altre ventisei, e un negozio col cenere addosso faceva in
   colonna lo stesso identico blocco di uno senza niente. Il bianco non e' di
   nessuno — e' il foglio — e la colonna si divide in due senza doverci
   pensare.

   Scritto e non preso dal tema: la campitura di un blocco non segue la pagina,
   si porta dietro il proprio contrasto — e' il motivo per cui la scritta e'
   nera su tutti e due i temi — e un blocco che sullo scuro diventasse scuro
   sarebbe l'unico della colonna a cambiare faccia. Il filo intorno e' quello
   della pagina chiara: su un fondo bianco e' l'unico modo di vedere dove
   finisce un blocco e comincia quello che gli sta attaccato.

   Solo la campitura piena: la pausa tratteggiata e l'appuntamento a sagoma
   vengono dopo e si tengono i loro fondi, che sono i segni che dicono in che
   stato sono quelle ore. */
.dt-blocco--bianca {
  background: #fff;
  border-color: oklch(88% 0 0);
}
button.dt-blocco--bianca:hover { background: oklch(96% 0 0); }

/* Le ore che nel totale pagato non entrano — la pausa, il fermo — non portano
   la campitura: portano il contorno, tratteggiato, e il colore va li' dentro.
   Il pieno in colonna e' quanto della giornata e' lavoro pagato, e una pausa
   piena come un montaggio lo faceva contare a mente; vuota, la colonna si
   legge a occhio. Il colore pero' resta quello dell'attivita' — il tratteggio
   e' la sua tinta e non un grigio — se no la pausa smetterebbe di essere
   riconoscibile proprio come le altre undici.
   Piu' scuro del pastello (`--dt-tinta-l-tratto`) perche' sotto non c'e' piu'
   il pastello ma la pagina: un contorno chiaro su un fondo quasi bianco e' un
   colore che si indovina. Sul fondo scuro va nell'altro verso, e il token lo
   sa. Il tratto largo resta a sinistra, come nei blocchi smorzati: e' l'unico
   lato che si puo' ingrossare senza toccare l'altezza interna, da cui
   dipendono le soglie che decidono cosa ci sta scritto dentro. */
.dt-blocco--fuori-conto {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  background: var(--dt-surface);
  border-style: dashed;
  border-left-width: 3px;
  border-color: oklch(
    calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%))
    calc(var(--dt-blocco-c) * var(--dt-tinta-c-tratto))
    var(--dt-blocco-tinta)
  );
}
/* Il tragitto fra un lavoro e l'altro, che nessuno ha scritto e il programma
   tira da se' guardando il buco fra due ore, **non ha una campitura sua**: e'
   pieno come tutti gli altri blocchi, con la tinta del negozio a cui si va.

   Era velato, cioe' campito di una tinta *proposta*, e come definizione di un
   viaggio calcolato era giusta. Ma in colonna la campitura si legge prima
   della scritta, e delle tre — piena, velata, vuota e tratteggiata — quella
   di mezzo la si prende per una via di mezzo anche del conto: una giornata di
   furgone diventava una colonna di blocchi sbiaditi in mezzo ai lavori,
   quando quelle ore sono vere, si pagano come le altre e nel totale ci sono
   gia'. Che sia il programma a proporlo lo dice il nome della sua attivita' —
   *Viaggio* — e che non abbia ore proprie da tirare lo dicono le maniglie che
   non ci sono: due cose che si vedono dove servono, invece di un colore piu'
   chiaro addosso a tutta la giornata.

   La pausa scritta in un buco resta vuota e tratteggiata come ogni altra
   pausa: il tratteggio non dice chi l'ha scritta, dice che quelle ore nel
   conto non entrano, ed e' una domanda che vale sempre (`--fuori-conto`). */

/* **L'appuntamento: consegnato, non ancora fatto.** Il posto e' riservato,
   sopra non e' ancora successo niente — quindi il blocco e' **la sua
   sagoma**: il riquadro tracciato nella tinta del negozio, a tratteggio, e
   dentro solo un accenno della stessa tinta.

   **Perche' la sagoma e non una campitura.** Fra due campiture lisce parla
   solo la luminosita', e in una colonna di dodici tinte diverse sette punti di
   scarto non si vedono: la campitura di prima (l'acquerello) aveva bisogno di
   un filo pieno in cima al blocco per farsi riconoscere da lontano, cioe' di
   un secondo segno. Fra pieno e vuoto invece cambia la **sagoma**, e una
   sagoma si legge a qualunque distanza: da vicino e' un riquadro disegnato con
   dentro un velo, da mezza stanza e' un buco chiaro in mezzo ai pastelli. Un
   segno solo, su tutto il blocco, che dice una cosa sola: queste ore devono
   ancora succedere.

   Era un retino, cioe' la stessa tinta stampata a puntini. Come materia
   funzionava da vicino, ma i puntini erano un pixel e un quarto: alla distanza
   da cui si guarda una giornata intera sparivano, e a reggere il segno restava
   comunque la campitura chiara sotto — il retino si pagava una grana sporca
   addosso a dodici tinte, sul fondo scuro soprattutto, per dire una cosa che
   stava gia' dicendo il fondo. Tolti i puntini, quel fondo si tira su di due
   punti e il contorno si raddoppia: il posto e' segnato, il lavoro dentro non
   c'e' ancora.

   **Il contorno e' tratteggiato**, e prima era un filo pieno raddoppiato da un
   anello interno. Un riquadro chiuso da un filo pieno e' un riquadro che c'e';
   il tratteggio e' la stessa figura disegnata a matita, ed e' quello che una
   giornata ancora da fare e'. Il segno lo si aveva gia' in casa: la bozza che
   nasce sotto il dito e' tratteggiata da sempre, e un appuntamento e' quella
   bozza che ha smesso di muoversi.

   **Porta il colore del suo negozio**, campitura e contorno: la settimana che
   deve ancora succedere e' esattamente quella in cui serve sapere per conto di
   chi si va — la mattina in cui ci si prepara. Un piano che non si legge per
   negozio e' un piano che si legge una riga per volta.

   **Il tratteggio non si scontra con la pausa**, e non perche' si sia trovato
   il modo di farceli stare tutti e due: perche' dicono la stessa cosa. In
   colonna il pieno e' quanto della giornata e' lavoro pagato e gia' fatto, e
   il tratteggio segna il resto — le ore che li' dentro non ci sono. La pausa
   non ce le mettera' mai, l'appuntamento non ce le ha ancora messe, e a dire
   quale dei due e' la campitura: vuota come la pagina la prima, appena tinta
   il secondo. Segno e campitura su due piani, e una pausa in programma si
   legge per intero (`--fuori-conto`).

   Il tratto e' da due pixel e il tratteggio va cosi': a un pixel i trattini
   sono lunghi due e da mezza stanza tornano una riga chiara, cioe' il filo
   pieno di prima con meno inchiostro. I due pixel il blocco non li paga in
   altezza — il padding ne rende uno per lato — perche' l'altezza interna e'
   quella su cui si misurano le soglie di `@container blocco`: un appuntamento
   deve scrivere dentro quello che scrive un blocco pieno della stessa
   altezza.

   La campitura si compone in due manopole — il tratto e il fondo — e le
   varianti che seguono (senza tinta, bianca, bozza) riscrivono quelle: il
   disegno lo trovano gia' fatto. */
.dt-blocco--appuntamento {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  /* Di quanto scende la campitura sotto al dito: una manopola sola, cosi'
     l'hover resta un gradino e non una campitura terza. */
  --dt-sagoma-vai: 0%;
  /* Il fondo lo scostamento dei grigi se lo prende a meta', come il velo da
     cui viene: sommato per intero un grigio chiaro uscirebbe piu' bianco della
     pagina, e del blocco resterebbe il solo contorno. */
  --dt-sagoma-fondo: oklch(
    min(96%, calc(var(--dt-sagoma-l) + var(--dt-blocco-luce, 0%) * 0.5 - var(--dt-sagoma-vai)))
    calc(var(--dt-blocco-c) * var(--dt-sagoma-c))
    var(--dt-blocco-tinta)
  );
  --dt-sagoma-tratto: oklch(
    calc(var(--dt-sagoma-l-tratto) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  background: var(--dt-sagoma-fondo);
  border-style: dashed;
  border-width: 2px;
  padding: calc(var(--dt-sp-2) - 1px) calc(var(--dt-sp-4) - 1px);
  border-color: var(--dt-sagoma-tratto);
  color: var(--dt-text);
}
/* Sotto al dito la campitura scende di un gradino. Va riscritta e non basta la
   manopola: `--tinta` ha il suo hover, ed e' scritto su un selettore con un
   elemento davanti — pesa quanto la classe che disegna l'appuntamento, e senza
   questa regola un blocco da fare sotto al dito si accendeva del pieno che
   ancora non e'. */
button.dt-blocco--appuntamento:hover {
  --dt-sagoma-vai: var(--dt-sagoma-giu);
  background: var(--dt-sagoma-fondo);
}
/* Senza tinta — nessun negozio, nessuna attivita' colorata — resta comunque un
   riquadro che si distingue da uno pieno: il tratto e il fondo passano nei
   grigi della pagina, che e' quanto di piu' marcato c'e' senza un colore da
   dire. */
.dt-blocco--appuntamento:not(.dt-blocco--tinta) {
  --dt-sagoma-fondo: var(--dt-surface-inset);
  --dt-sagoma-tratto: var(--dt-border-strong);
}
button.dt-blocco--appuntamento:not(.dt-blocco--tinta):hover {
  --dt-sagoma-fondo: var(--dt-surface-2);
}
/* Il blocco bianco resta bianco: il foglio non si tinge, se no un negozio
   senza colore scelto si prenderebbe un grigio che nella colonna vale come
   tinta (vedi `.dt-blocco--bianca`). Qui il segno lo porta tutto il contorno,
   ed e' l'unico caso in cui deve farlo da solo: si scurisce di dieci punti
   sotto a quello di un bianco gia' fatto, e col tratteggio i due si
   riconoscono anche senza averli uno accanto all'altro — un filo pieno e uno
   tirato a trattini si distinguono senza avere il termine di paragone.
   E col foglio resta la scritta nera dei blocchi campiti: bianco su bianco non
   si legge. */
.dt-blocco--bianca.dt-blocco--appuntamento {
  --dt-sagoma-fondo: #fff;
  --dt-sagoma-tratto: oklch(78% 0 0);
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) 0);
}
button.dt-blocco--bianca.dt-blocco--appuntamento:hover {
  --dt-sagoma-fondo: oklch(96% 0 0);
}
/* L'ora prevista sta nell'inchiostro smorto; confermata passa in quello pieno.
   E' il secondo segno, e non aggiunge niente da disegnare: si legge da vicino,
   quando il colpo d'occhio ha gia' detto il resto. */
.dt-blocco--appuntamento .dt-blocco__ore { opacity: 0.6; }

/* Tolta la campitura, la scritta torna l'inchiostro della pagina: il nero del
   blocco tinto seguiva il pastello, e senza pastello sotto sul tema scuro
   sarebbe nero su nero. */
.dt-blocco--tinta.dt-blocco--fuori-conto { color: var(--dt-text); }
button.dt-blocco--fuori-conto:hover { background: var(--dt-surface-2); }
/* Una pausa messa in calendario e non ancora fatta: il tratteggio ce l'hanno
   tutti e due — nel pieno non ci sta ne' l'una ne' l'altra — e a separarli
   restano i due segni che il tratteggio non porta. La campitura dice quale
   dei due: vuota come la pagina non ci entrera' mai, appena tinta ci entrera'
   quando qualcuno l'avra' fatta; e il binario largo a sinistra resta quello
   della pausa, che e' il segno che si porta dietro anche fatta. Prima si
   sommavano due campiture piene e una doveva perdere; un accenno di tinta
   invece non e' un pieno — in colonna il pieno resta quanto della giornata e'
   lavoro pagato, e un velo non lo gonfia.
   Il binario va riscritto perche' l'appuntamento porta un bordo da due su
   tutti e quattro i lati e viene dopo nel foglio: senza questa riga la pausa
   in programma perdeva il lato largo. Il fondo invece se lo tiene la sagoma, e
   per tenerselo anche sotto al dito serve scavalcare l'hover del fuori conto:
   viene prima nel foglio, ma pesa uguale e ripagherebbe di grigio una pausa
   che una tinta ce l'ha.
   Il bordo pero' pesa quanto una classe sola (`:where`): e' l'ordine del
   foglio a farlo vincere sui due da cui nasce, e cosi' perde ancora contro
   quelli che vengono dopo — l'avviso dei sovrapposti, il blocco in mano. Con
   due classi piene una pausa in programma accavallata restava senza il bordo
   giallo, l'unica delle due. */
:where(.dt-blocco--appuntamento).dt-blocco--fuori-conto {
  border-left-width: 3px;
  border-color: oklch(
    calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%))
    calc(var(--dt-blocco-c) * var(--dt-tinta-c-tratto))
    var(--dt-blocco-tinta)
  );
}
button.dt-blocco--appuntamento.dt-blocco--fuori-conto:hover {
  --dt-sagoma-vai: var(--dt-sagoma-giu);
  background: var(--dt-sagoma-fondo);
}

/* Accavallato con un altro: si segnala, non si vieta. Il bordo intero e non
   solo un lato: e' l'unico modo di farsi vedere anche sopra a un blocco che ha
   gia' un colore suo. */
.dt-blocco--avviso { border-color: var(--dt-warn); }

/* Dentro al blocco ci sono tre cose e vanno lette in quest'ordine: che lavoro
   e', dove, e a che ora. Prima erano quasi la stessa scritta — undici pixel e
   mezzo il titolo, dieci e mezzo le altre due, tutte con lo stesso peso — e in
   una colonna di dieci blocchi non c'era niente che venisse letto per primo.
   Adesso il titolo e' il corpo pieno della piattaforma in semigrassetto,
   il posto un gradino sotto, l'orario un gradino sotto ancora: si guarda la
   colonna e si vede cosa si e' fatto, non sei righe da sillabare. */
.dt-blocco__testa {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  line-height: 1.25;
}

/* Chi c'era, in cima al blocco e a destra.

   Sta nella testa e non fra i dati per un motivo di misura: i dati stanno su
   una riga che si taglia quando il blocco e' corto, e «con chi» era proprio
   quello che si andava a cercare guardando la giornata di ieri. Le facce non
   si tagliano — tre cerchietti stanno dove non sta una parola — e restano al
   loro posto anche su un blocco di mezz'ora.

   L'anello che stacca una faccia dall'altra deve essere del colore che il
   blocco ha davvero sotto, se no su una campitura ambra si vede un contorno
   bianco intorno a ogni testa. */
.dt-blocco { --dt-facce-anello: var(--dt-surface); }
.dt-blocco--tinta {
  --dt-facce-anello: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
}
/* E sul blocco bianco l'anello e' bianco: sta piu' avanti nel foglio della
   regola qui sopra apposta, che a parita' di peso vince l'ultima scritta. */
.dt-blocco--bianca { --dt-facce-anello: #fff; }
.dt-blocco__testa .dt-facce { margin-left: auto; }
.dt-blocco__testa .dt-avatar {
  width: 18px;
  height: 18px;
  font-size: 10px;
  box-shadow: 0 0 0 1.5px var(--dt-facce-anello);
}
.dt-blocco__testa .dt-facce > .dt-faccia + .dt-faccia { margin-left: -6px; }
/* Il conto di quelle che non si disegnano, dentro a un blocco: una macchia
   dello stesso colore, un po' piu' carica. Col fondo della pagina — che e'
   quasi bianco — su una campitura ambra usciva un bollo bianco, e in una
   colonna di blocchi era la cosa piu' luminosa dello schermo per dire «e altri
   due». */
.dt-blocco__testa .dt-facce__resto {
  height: 18px;
  min-width: 18px;
  margin-left: -6px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
  box-shadow: 0 0 0 1.5px var(--dt-facce-anello);
}
/* L'avviso: a questo blocco manca qualcosa che era preteso.
   Era un pallino pieno, e un pallino e' un segno muto — vuol dire quello che
   uno ha imparato che vuol dire, e chi apre il programma la prima volta lo
   legge come una decorazione. Il triangolo invece si sa gia' leggere: da
   fermo, senza didascalia, dice che li' c'e' qualcosa che non va.
   **Adesso porta anche la parola**, ed e' una fetta come le altre
   (`.dt-stato--manca`). Prima erano due segni per una cosa sola: il triangolo
   muto qui a sinistra, e due centimetri piu' in la' la fetta «Da finire», che
   di suo non diceva niente di piu' — «da finire» *e'* «manca qualcosa». Morta
   quella, la parola e' venuta dove sta il triangolo, che e' il posto giusto:
   sul bordo sinistro gli avvisi si incolonnano, e la colonna si legge
   scorrendola.
   Il posto per la parola c'e' perche' l'ha lasciato la fetta: dove il blocco e'
   stretto o basso cade lei per prima (vedi le regole di contenitore in fondo
   alla sezione) e resta il triangolo, che era tutto quello che c'era.
   `currentColor` no, qui: e' l'unica fetta piena d'inchiostro, e la parola
   dentro e' bianca. Un giallo d'avviso sarebbe un colore che litiga con la
   tinta del negozio — e su quella ambra sparirebbe del tutto — mentre
   l'inchiostro pieno sta su tutte e ventisei. */
.dt-blocco__bollino {
  flex: none;
}
/* L'orario, in coda al titolo. `nowrap` e non a capo: e' una misura sola —
   `08:00 - 12:00` — e spezzata in due righe raddoppia l'altezza del titolo,
   che e' l'altezza da cui dipende quanti dati ci stanno sotto. A stringersi
   dev'essere il titolo, che sa andare a puntini. */
.dt-blocco__ore {
  flex: none;
  margin-left: auto;
  padding-left: var(--dt-sp-3);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-regular);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dt-text-3);
}
/* Quello che il blocco si porta scritto dentro: il posto, il negozio, chi
   c'era, i chilometri, quanti tendaggi, quanti materiali, le foto, le note.
   Era una riga sola con i pezzi attaccati da un punto, e a puntini finiva
   sempre nello stesso posto: il primo dato si leggeva, gli altri si
   indovinavano. Adesso ogni dato e' un riquadro suo, col proprio segno
   davanti, e vanno a capo finche' il blocco e' alto abbastanza per tenerli.
   Quelli che non ci stanno restano fuori, e va bene: arrivano in ordine di
   importanza, quindi a cadere e' sempre il meno urgente.
   `align-content: flex-start` tiene le righe attaccate in alto invece di
   spaziarle in verticale: un dato solo dev'essere sotto al titolo, non in
   mezzo al blocco. */
.dt-blocco__info {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0 var(--dt-sp-4);
  overflow: hidden;
  /* Sotto la prima soglia non c'e' posto per niente: vedi le regole di
     contenitore in fondo alla sezione. */
  max-height: 0;
  color: var(--dt-text-2);
}
/* Un dato: il segno, e quello che dice. L'altezza della riga e' un numero
   fisso e non un multiplo del corpo del testo perche' e' l'unita' con cui si
   contano le righe che ci stanno: se cambiasse col testo, le soglie qui sotto
   taglierebbero l'ultima riga a meta'. */
.dt-blocco__dato {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-1);
  max-width: 100%;
  min-width: 0;
  height: 15px;
  font-size: var(--dt-fs-xs);
  line-height: 15px;
}
.dt-blocco__dato > svg { flex: none; opacity: 0.75; }

/* La fetta: «Da fare», «Manca», e il silenzio per tutto il resto.
   Un disegno solo per un elemento solo: la stessa fetta sta in testa al blocco
   in colonna, sulla testata della sua scheda e sulla testatina della bolla.
   E' inchiostro e mai una tinta: il colore del blocco dice per conto di chi si
   lavora, e una fetta colorata gli parlerebbe sopra. `currentColor` fa il
   resto: sul pastello la scritta e' nera e la fetta con lei, sul grigio e'
   l'inchiostro della pagina.
   **Due toni, e prima erano tre.** «Fatto» era la regola — nove blocchi su
   dieci — e una fetta sulla regola invece che sull'eccezione e' rumore;
   «Da finire» era il nome lungo di quello che il triangolo dice gia' per nome,
   e due modi di dire la stessa cosa sulla stessa riga si leggono come due cose
   diverse. Quello che resta e' un fatto per fetta:
   - `--fare` e' un contorno: il posto c'e', dentro non c'e' ancora niente —
     la stessa cosa che dicono le righe della campitura, da vicino;
   - `--manca` e' piena d'inchiostro: e' l'unica cosa del blocco che chiede di
     tornarci, si vede per prima, e la targhetta dice cosa manca per nome. */
.dt-stato {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-1);
  height: 18px;
  padding: 0 var(--dt-sp-3);
  border-radius: var(--dt-r-full);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-medium);
  line-height: 1;
  white-space: nowrap;
}
.dt-stato--fare {
  border: 1px solid currentColor;
  opacity: 0.85;
}
.dt-stato--manca {
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
}
/* La misura da testata: sulla scheda di un blocco la fetta e' un titolo. */
.dt-stato--grande {
  height: 24px;
  padding: 0 var(--dt-sp-4);
  font-size: var(--dt-fs-sm);
}
/* Trascinamento.
   `touch-action` decide di chi e' il gesto quando a premere e' un dito o una
   penna: del browser, che scorre, o nostro, che sposta. Non si puo' avere tutti
   e due. Del mouse non dice niente — la freccia non scorre, per quello c'e' la
   rotella — e infatti qui non compare nessuna `@media` sulla punta: sarebbe una
   domanda sulla macchina, e su un due-in-uno la stessa macchina riceve il
   pollice e la freccia nello stesso pomeriggio. Chi deve distinguere sono i
   gesti, e lo fanno guardandosi il `pointerType` (`di_dito`, in `giorno.rs`).
   Qui si lascia scorrere e basta.
   La giornata e' piu' alta dello schermo, e il dito la scorre passando **da
   dovunque**: dal vuoto (`pan-y` sulla tela) e da sopra ai blocchi (`pan-y` sui
   blocchi, che su un telefono coprono quasi tutta la colonna — se se lo
   tenessero loro, per arrivare alla sera bisognerebbe indovinare i buchi fra
   l'uno e l'altro).
   Il gesto torna nostro in due modi, e nessuno dei due e' questa proprieta'
   quando il dito e' gia' sceso — a meta' gesto il browser non cambia idea:
   - sul vuoto **prima**, col doppio colpo: la finestra che apre `Doppio` mette
     `--armata` fra un tocco e l'altro, cioe' in tempo;
   - sul blocco **durante**, con la pressione tenuta: li' a fermare lo
     scorrimento e' il `preventDefault` sul `touchmove`, che vale perche' una
     pressione ferma non ha ancora fatto scorrere niente.
   L'ordine conta: dev'essere l'elemento toccato a dire `none`, e non un suo
   antenato, se no la tela spegnerebbe lo scorrimento anche sopra a se
   stessa.
   Per questo armata non e' la tela a dire `none`: il `touch-action` di un
   elemento si somma a quello di tutti i suoi antenati, e con la tela a
   `none` per il tempo della finestra non scorreva nemmeno chi partiva da un
   blocco. Lo dicono le cose del vuoto che il dito puo' toccare — il fondo
   (`.dt-giorno__fondo`, sotto a tutto), le righe delle ore, la scritta della
   colonna vuota, i buchi — e i blocchi restano a `pan-y`. */
.dt-giorno__tela--viva { touch-action: pan-y; }
.dt-giorno__fondo {
  position: absolute;
  inset: 0;
}
.dt-giorno__tela--armata :is(.dt-giorno__fondo, .dt-giorno__riga, .dt-giorno__vuoto, .dt-buco) {
  touch-action: none;
}
.dt-blocco--mobile {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  /* Tenere premuto e' il nostro gesto: il telefono non ci deve appiccicare
     sopra la sua lente sul testo. */
  -webkit-touch-callout: none;
}
/* Il viaggio rimasto senza buco, lungo zero dove comincia il lavoro che
   raggiunge: sopra ai blocchi, se no quei due lo coprirebbero del tutto. Sotto
   a quello che si sta spostando, che sta sopra a tutto. */
.dt-blocco--sopra { z-index: 1; }
/* Ed e' sempre alto sedici pixel: il padding di sopra e di sotto, pensato per
   i blocchi veri, lasciava alla testa sei pixel, e la testa taglia quello che
   le esce (vedi `.dt-blocco__testa` piu' giu'): «Viaggio» si leggeva a meta'.
   Senza, la riga del titolo ci sta intera. */
.dt-blocco--sopra { padding-block: 0; }
/* Mentre e' in mano: sopra a tutti gli altri, altrimenti sparisce sotto il
   blocco che sta scavalcando proprio nel momento in cui serve vederlo. */
.dt-blocco--preso {
  z-index: 2;
  cursor: grabbing;
  border-color: var(--dt-accent);
  box-shadow: var(--dt-shadow-md);
  transition: none;
}
/* Preso, un appuntamento resta un appuntamento senza che nessuno lo scriva:
   `--preso` cambia il colore del contorno, non come e' tirato, e il tratteggio
   se ne sta dov'e' per tutto il tempo in cui il blocco e' in mano — cioe'
   proprio mentre lo si guarda. Quando il segno era un anello interno invece
   l'ombra del blocco preso lo sostituiva, e serviva una regola apposta. */
/* Il blocco che si sta disegnando col dito: non esiste ancora, e si vede. */
.dt-blocco--bozza {
  z-index: 2;
  pointer-events: none;
  background: var(--dt-accent-soft);
  border: 1px dashed var(--dt-accent);
  border-left: 3px solid var(--dt-accent);
  transition: none;
}
/* Mentre una mano e' sulla tela, li' dentro non si interpola piu' niente.
   Sotto al dito il ritardo non e' un movimento ma una gomma: il blocco resta
   indietro rispetto a dove si sta tirando, e la pausa che si stringe di fianco
   arriva un attimo dopo il bordo che l'ha stretta. Un blocco preso lo sa gia'
   per conto suo (`--preso`); questa regola lo dice a tutti gli altri della
   stessa tela, che si muovono per colpa sua. */
.dt-giorno__tela:has(.dt-blocco--preso) .dt-blocco,
.dt-giorno__tela:has(.dt-blocco--bozza) .dt-blocco {
  transition: background var(--dt-t-fast);
}
/* La bozza tirata oltre la riga di adesso: quel blocco nascera' da fare, e a
   dirlo sotto al dito e' il tratto che si ingrossa — la stessa lingua dei
   blocchi in colonna, nell'accento della bozza e non nella tinta di un negozio
   che ancora non c'e'. Vince sulla regola dei blocchi senza tinta perche'
   viene dopo.
   Una bozza e' tratteggiata da sempre — non esiste ancora — quindi qui il
   tratteggio da solo non direbbe niente di nuovo: e' il suo spessore a dire
   che il blocco nascera' da fare, ed e' esattamente quello che poi si
   ritrovera' in colonna. Il fondo la bozza ce l'ha gia', l'accento smorzato, e
   resta quello.
   Il binario a sinistra resta pieno e da tre: e' il segno della bozza, non
   dello stato, e sopravvive alla nascita del blocco. */
.dt-blocco--bozza.dt-blocco--appuntamento {
  --dt-sagoma-fondo: var(--dt-accent-soft);
  --dt-sagoma-tratto: var(--dt-accent);
  background: var(--dt-sagoma-fondo);
  border-color: var(--dt-accent);
  border-width: 2px;
  border-left: 3px solid var(--dt-accent);
  padding: calc(var(--dt-sp-2) - 1px) calc(var(--dt-sp-4) - 1px);
}

/* Le maniglie sono strisce invisibili sui bordi: si vedrebbero solo come
   ingombro, e su un blocco di mezz'ora l'ingombro e' meta' del blocco.
   Alte 14px perche' sotto non si prendono col pollice. */
.dt-blocco__maniglia {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  cursor: ns-resize;
  /* Come il blocco su cui stanno: col dito si scorre, il bordo si tira dopo
     averlo tenuto premuto. */
  touch-action: pan-y;
}
.dt-blocco__maniglia--su { top: 0; }
.dt-blocco__maniglia--giu { bottom: 0; }

/* Quanto ci sta scritto dentro dipende da quanto e' alto, e alto quanto dura.
   Il blocco e' alto quanto la sua durata: mezz'ora fa trentaquattro pixel, e
   li' dentro il titolo e il posto non ci stanno tutti e due — il secondo
   finiva tagliato a meta' contro il bordo, che e' peggio che non esserci.
   Sotto le due soglie le righe se ne vanno per intero, la piu' minuta per
   prima. Non e' una `@media`: la finestra non cambia, cambia il blocco, e a
   dirlo e' l'altezza sua (`@container`), quella che gli e' stata messa in
   `style` dagli orari.
   Cosa resta: sempre il titolo, che e' cosa si e' fatto; poi il posto; per
   ultimo l'orario, che nella colonna si legge gia' da dove sta il blocco. */
.dt-blocco {
  container-type: size;
  container-name: blocco;
}
/* Le soglie sono sull'altezza *interna*: una richiesta al contenitore misura
   il suo riquadro di contenuto, quindi i dieci pixel fra padding e orli sono
   gia' fuori dal conto. Trentaquattro dentro sono quarantaquattro di blocco,
   cioe' poco piu' di mezz'ora segnata. */
/* Le righe di dati si contano, non si tagliano a meta'. Il titolo si prende
   ventuno pixel — diciannove di riga piu' due di stacco — e quello che avanza
   si divide per quindici, che e' l'altezza di una riga di dati. Da qui le
   soglie: trentasei per la prima riga, quindici in piu' per ognuna delle
   altre.
   Sono `min-height` e non `max-height` perche' la regola cresce col blocco:
   sotto la prima soglia il tetto a zero lascia il titolo da solo, e da li' in
   su ogni soglia scoperchia una riga. Oltre le quattro il tetto sparisce: di
   righe di dati un blocco non ne ha piu' di quattro. */
@container blocco (min-height: 36px) {
  .dt-blocco__info { max-height: 15px; }
}
@container blocco (min-height: 51px) {
  .dt-blocco__info { max-height: 30px; }
}
@container blocco (min-height: 66px) {
  .dt-blocco__info { max-height: 45px; }
}
@container blocco (min-height: 81px) {
  .dt-blocco__info { max-height: 60px; }
}
@container blocco (min-height: 96px) {
  .dt-blocco__info { max-height: none; }
}
@container blocco (max-height: 16px) {
  .dt-blocco__testa { font-size: var(--dt-fs-sm); line-height: 1.1; }
  /* I dati qui non si vedono comunque (tetto a zero), ma da presenti si
     prendevano lo stacco della colonna: due pixel tolti al titolo. */
  .dt-blocco__info { display: none; }
  .dt-blocco__ore { display: none; }
  /* Su una fettina di cinque minuti che il lavoro debba ancora succedere lo
     dice gia' il tratteggio del contorno: la fetta si toglie prima che si mangi
     il titolo. */
  .dt-stato { display: none; }
  /* L'avviso no: che a un blocco manchi qualcosa non lo dice nient'altro, e una
     fettina che se lo tiene per se' e' un debito che sparisce. Torna il
     triangolo nudo, che e' quello che c'era prima della parola. */
  .dt-blocco__bollino {
    display: inline-flex;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
  }
  .dt-blocco__bollino .dt-stato__parola { display: none; }
}
/* Stretto: l'orario se ne va per primo. Dentro a un blocco largo un pollice
   `08:00 - 12:00` si prende due terzi della riga e del titolo resta
   un'iniziale, e a che ora sta un blocco lo dice gia' dove sta nella colonna —
   e' l'unica cosa che la colonna sa dire da se'. Succede in due posti: nelle
   giornate di fianco, che sono strette per mestiere, e nei blocchi che si
   accavallano, che si dividono la larghezza in due. */
@container blocco (max-width: 165px) {
  .dt-blocco__ore { display: none; }
  /* Stretta, la fetta tiene il segno e lascia la parola: le righe della
     campitura dicono gia' il grosso, il segno conferma da vicino. L'avviso
     torna il triangolo nudo — la stessa cosa che gli succede su una fettina —
     perche' una pillola nera larga un pollice dentro a un blocco stretto
     mangerebbe il titolo per dire quello che il segno dice da solo. */
  .dt-stato__parola { display: none; }
  .dt-stato { padding: 0 var(--dt-sp-2); }
  .dt-blocco__bollino {
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
  }
}

/* --------------------------------------------------------------------------
   23. Scheda del blocco: testatina, cartellino, commessa, righe a quantita',
       foto
   -------------------------------------------------------------------------- */

/* La commessa scelta non e' un campo ma un riquadro: una volta trovata resta
   li' e si legge, invece di restare dentro a una casella di ricerca che invita
   a ridigitarla. Il comando per cambiarla sta dentro al riquadro stesso —
   attaccato alla cosa che cambia, non in una barra da un'altra parte. */
.dt-commessa {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-5);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
}
/* **Il filo a sinistra e' il colore del negozio**, ed e' lo stesso che il
   blocco avra' in colonna fra un momento: si sceglie «Tende & Design» qui, e in
   giornata compare un blocco di quel colore. Nessuno deve imparare la
   corrispondenza, la si vede succedere.

   Sta in una classe sua e non nella regola di sopra con un valore di ripiego,
   ed e' una precauzione vera e non pulizia: un `var()` senza valore non
   *ignora* la dichiarazione, la rende **invalida al momento del calcolo**, e
   una `border-left` invalida non ricade su quella di prima — torna al valore
   iniziale, cioe' `none`. Il riquadro di un negozio senza colore si sarebbe
   ritrovato con tre bordi su quattro. */
.dt-commessa--tinta {
  border-left-width: 4px;
  border-left-color: oklch(
    calc(var(--dt-tinta-l-bordo) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  padding-left: calc(var(--dt-sp-5) - 3px);
}
/* Il nome del posto e' la cosa piu' grande della scheda dopo il titolo della
   finestra: e' l'unica riga che dice se si sta segnando l'ora sul lavoro
   giusto, e stava scritta come le tre righe di contorno che ha sotto. */
.dt-commessa__nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--dt-fs-lg);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
/* Indirizzo e resti stanno sotto e piu' smorti: servono a confermare di aver
   preso la commessa giusta, non a essere letti ogni volta. */
.dt-commessa__riga,
.dt-commessa__dove,
.dt-commessa__resta {
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
}
/* L'indirizzo sta su una riga sola con la sua puntina; i resti sono un elenco
   che va a capo, quindi restano testo che scorre. */
.dt-commessa__dove {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
}
.dt-commessa__dove svg { flex: 0 0 auto; color: var(--dt-text-3); }
/* Chi paga sta sulla riga sotto al posto, e non e' smorto come l'indirizzo:
   e' la seconda cosa che si legge, non la terza. Il pallino davanti porta il
   suo colore — lo stesso del filo — cosi' la riga dice il nome e il colore
   insieme, ed e' li' che i due si imparano uno per l'altro. */
.dt-commessa__negozio {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-width: 0;
  color: var(--dt-text);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  line-height: var(--dt-lh-normal);
}
.dt-commessa__negozio > span { white-space: nowrap; }
/* Il negozio che non c'e' ancora: e' un fatto, non un difetto di scrittura, e
   va detto con parole invece che con un vuoto. Corsivo e smorto perche' non e'
   un nome — leggerlo come tale manderebbe a cercare in archivio un negozio che
   si chiama cosi'. */
.dt-commessa__senza {
  color: var(--dt-text-2);
  font-style: italic;
  font-weight: var(--dt-fw-regular);
}
/* Il codice d'ordine e' un codice: si legge cifra per cifra, si detta al
   telefono, e in tondo proporzionale il numero uno e la elle sono lo stesso
   segno. Sta in coda alla riga del negozio e non su una riga sua: e' la stessa
   informazione — quale ordine, di chi — spezzata in due meta'. */
.dt-commessa__codice {
  flex: 0 0 auto;
  color: var(--dt-text-2);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
}
/* Cosa resta da montare e' l'unica riga per cui valga la pena tenere aperto il
   riquadro dopo aver scelto, e sta staccata dalle altre da un filo: sopra c'e'
   *quale lavoro*, sotto *cosa c'e' da fare*. Erano quattro righe di seguito, e
   la quarta si leggeva come la coda della terza. */
.dt-commessa__resta {
  margin-top: var(--dt-sp-2);
  padding-top: var(--dt-sp-3);
  border-top: 1px solid var(--dt-border-soft);
}

/* La testata della maschera con cui in cantiere nasce del lavoro nuovo.

   Non e' una finestra dentro alla finestra: prende il posto dell'albero nello
   stesso foglio. Su un telefono una seconda maschera sopra alla scheda del
   blocco e' un francobollo dentro a un francobollo, e la via d'uscita — il
   tasto che chiude quella di sopra senza chiudere quella di sotto — e' due
   tasti uguali a due centimetri di distanza.

   Titolo e riga sotto ripetono la coppia della `.dt-domanda`, un gradino piu'
   in basso: quella e' la domanda della schermata, questa e' cosa si sta
   facendo dentro alla risposta. Stesso ritmo, peso diverso, e non c'e' un
   secondo modo di intitolare qualcosa da imparare. */
.dt-apri {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  padding-bottom: var(--dt-sp-4);
  border-bottom: 1px solid var(--dt-border-soft);
}
.dt-apri__titolo {
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
.dt-apri__sotto {
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
}
/* Il colore del negozio appena scelto non si scrive qui sotto, ed e' una
   rinuncia decisa e non una dimenticanza: c'era, ed era un pallino con di
   fianco «in calendario i suoi blocchi sono ambra».
   Se n'e' andato per due motivi. Il primo e' che nominava la chiave della
   tavolozza, che e' vocabolario del programma: chi monta le tende non ha
   nessun motivo di sapere che quel colore si chiama ambra. Il secondo e' che
   arrivava tardi e diceva poco — un istante dopo, chiusa la maschera, quel
   colore riempie il cartellino in cima alla scheda e poi il blocco in colonna,
   che e' un modo molto piu' forte di dire la stessa cosa. */

/* Cose gia' scritte in tabella su cui si puo' anche premere: il distintivo che
   dice cosa manca, il numero delle commesse di un posto. Leggere e andare a
   vedere erano due gesti scollegati — si leggeva qui e si ricominciava a
   cercare lo stesso nome dall'altra parte — e bastava che la cosa scritta fosse
   anche il comando.

   Niente aspetto da bottone: sono testo dentro a una riga di tabella, e
   incorniciarli li farebbe pesare piu' della riga che li contiene. */
/* Guscio senza forma per i comandi che su un telefono non ci sono (vedi la
   sezione 26): sul largo e' trasparente al flex che lo contiene, cosi' i tasti
   che avvolge stanno nella riga come se il guscio non ci fosse. */
.dt-solo-largo { display: contents; }

.dt-premibile {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  /* Un tasto centra il proprio testo, e questi tasti sono nomi dentro a una
     cella: finche' stanno su una riga sola non si vede, ma appena il nome va a
     capo — e su un telefono va a capo — la seconda riga finisce centrata sotto
     la prima, in una colonna dove tutto il resto attacca a sinistra. */
  text-align: left;
}
/* Una riga d'ordine: cosa montare, quanti, e il cestino in fondo. In flex
   ognuna si spezzava dove le capitava — la riga col tendaggio dal nome lungo
   mandava la quantita' a capo e le altre no — e un ordine si legge in
   verticale: quante tende di ogni tipo. Le colonne le decide la griglia, e le
   quantita' restano incolonnate.
   Misurata e' la quantita', che sono cifre e non testo: quattro cifre non
   hanno bisogno di un quinto della riga, e lasciarle crescere toglierebbe
   spazio proprio al nome del tendaggio. */
.dt-riga-ordine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(112px, 21%, 132px) auto;
  gap: var(--dt-sp-3);
  align-items: center;
}
/* Senza, il campo dentro lo stepper pretende le sue venti battute e sfonda la
   colonna che gli si e' data. */
.dt-riga-ordine > * { min-width: 0; }
/* Stretti, il tendaggio si prende la riga sua e sotto resta la coppia
   quantita' col cestino: il nome di una tenda a questa larghezza non sta in
   mezza riga. */
@media (max-width: 640px) {
  .dt-riga-ordine { grid-template-columns: minmax(0, 1fr) auto; }
  .dt-riga-ordine > :first-child { grid-column: 1 / -1; }
  /* Due campi in fila per riga d'ordine: senza un filo in mezzo, i campi di
     due tendaggi diversi sembrano una lista sola e non si vede piu' dove
     finisce una tenda e comincia l'altra. Largo non serve: li' ogni riga sta
     su una riga. */
  .dt-riga-ordine + .dt-riga-ordine {
    padding-top: var(--dt-sp-4);
    border-top: 1px solid var(--dt-border-soft);
  }
}

/* Una riga della fila dei numeri: il numero, chi risponde, e il cestino in
   fondo. Stessa griglia della riga d'ordine e per lo stesso motivo — in flex il
   numero lungo manderebbe la nota a capo solo su quella riga — con le due
   colonne invertite: qui a misura sta il primo campo, perche' un numero e'
   quindici caratteri sempre, e a crescere e' la nota, che va da «Mario» a
   «amministratore del condominio». */
.dt-riga-telefono {
  display: grid;
  grid-template-columns: clamp(130px, 34%, 190px) minmax(0, 1fr) auto;
  gap: var(--dt-sp-3);
  align-items: center;
}
.dt-riga-telefono > * { min-width: 0; }
/* Stretti, il numero si prende la riga sua e sotto restano la nota e il
   cestino: a questa larghezza due campi affiancati sono due campi in cui non ci
   sta niente. Il filo separa un numero dall'altro, se no quattro caselle in
   colonna sembrano una lista sola. */
@media (max-width: 640px) {
  .dt-riga-telefono { grid-template-columns: minmax(0, 1fr) auto; }
  .dt-riga-telefono > :first-child { grid-column: 1 / -1; }
  .dt-riga-telefono + .dt-riga-telefono {
    padding-top: var(--dt-sp-4);
    border-top: 1px solid var(--dt-border-soft);
  }
}

/* La testatina della bolla: una riga sola, bianca, sotto alla testata.

   **Era una fascia.** Novanta pixel di campitura piena in cima a un foglio da
   compilare, e su un blocco appena disegnato quella campitura non c'era: il
   negozio non e' ancora stato scelto, quindi la fascia usciva grigia. Il primo
   terzo della finestra era una macchia di grigio che non voleva dire niente —
   e su un foglio bianco il grigio si legge come una cosa spenta, non come una
   cosa vuota.

   Adesso e' **una riga**, e su fondo bianco: cosa si sta segnando, per conto di
   chi, e cosa manca ancora. Le stesse cose di prima, sulla riga di un elenco
   invece che dentro a un riquadro. Le ore se ne sono andate a loro volta — si
   leggevano e basta, e adesso stanno sulla riga da cui si correggono, in cima
   alla faccia. Nessun fondo, nessun
   raggio, nessun bordo tutt'intorno: un filo sotto, e finisce li'. Lo spazio
   che si e' liberato e' spazio in cui si vede la prima domanda senza scorrere,
   che su un tablet appoggiato al cruscotto e' la sola cosa che conti.

   `flex: none` perche' nel modale il corpo e' l'unico che deve allungarsi. */
.dt-testatina {
  position: relative;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dt-sp-1) var(--dt-sp-4);
  padding: var(--dt-sp-3) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text);
}

/* **La cimosa**: il colore del negozio, ridotto al bordo del foglio.

   E' l'orlo tessuto che corre lungo il lato della pezza, quello che porta il
   marchio di chi l'ha fatta — e qui fa lo stesso mestiere: dice per conto di
   chi si sta scrivendo, con un colore e senza una parola. Tre pixel bastano
   perche' e' l'unica cosa colorata della bolla: in mezzo al bianco non ha
   niente con cui competere, mentre dentro a una fascia dello stesso colore
   spariva.

   Al livello del tratto e non del pastello: tre pixel di pastello su una
   pagina quasi bianca sono un colore che si indovina.

   Senza negozio non c'e', e non diventa grigia. Un blocco che non sa ancora
   per chi e' non ha un colore — e il modo di dirlo e' non metterne nessuno,
   non metterne uno che non vuol dire niente. */
.dt-testatina__cimosa {
  position: absolute;
  left: 0;
  top: 0;
  bottom: -1px;
  width: 3px;
  background: oklch(
    calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%))
    calc(var(--dt-blocco-c, var(--dt-tinta-c)) * var(--dt-tinta-c-tratto))
    var(--dt-blocco-tinta)
  );
}

/* Cosa si sta segnando: il segno e il nome, attaccati, e non si separano
   andando a capo. E' la coppia che l'elenco delle attivita' ha appena
   consegnato — stesso segno, stesso nome — cosi' la scelta si vede arrivare
   quassu' nell'istante in cui la si fa. */
.dt-testatina__cosa {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-width: 0;
}
.dt-testatina__cosa > svg {
  flex: none;
  align-self: center;
}
.dt-testatina__nome {
  white-space: nowrap;
  font-size: var(--dt-fs-lg);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
  letter-spacing: -0.01em;
}
/* La matitina accanto al nome dell'attivita': riapre la copertina, cioe' si
   cambia «che lavoro e'» dal punto in cui c'e' scritto che lavoro e'. Solo
   sulla bolla in scrittura — sulla scheda che si legge non c'e'. */
.dt-testatina__matita {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--dt-r-sm);
  background: none;
  color: var(--dt-text-3);
  cursor: pointer;
  transition: color var(--dt-t-fast), background var(--dt-t-fast);
}
.dt-testatina__matita:hover {
  background: var(--dt-surface-inset);
  color: var(--dt-text);
}
.dt-testatina__matita:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
/* Per conto di chi si va: il negozio, di seguito e piu' smorto — conferma,
   non si legge ogni volta. Base al contenuto e non zero: con `flex-basis: 0`
   questo pezzo si stringe fino a sparire e la riga non va **mai** a capo — le
   ore restavano attaccate al nome e uscivano dal bordo destro su una finestra
   stretta. Con la base misurata la riga si spezza dove non ci sta piu', e si
   spezza scorrendo: nessuna soglia, nessuno scatto. */
.dt-testatina__dove {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
}
/* **Il tassello del riferimento**: il nome del cancello, e la citta', dentro a
   un riquadro col contorno e col segno «i» in coda. Si preme, e apre la scheda
   del riferimento — i numeri da chiamare, per primi.
   Era un cerchietto smorto di fianco al testo, lo stesso della matitina; ma la
   matitina sta accanto a un nome grande e si vede per contrasto, mentre
   accanto a una riga piccola e grigia il cerchietto spariva, e pareva la coda
   del testo tagliato. Il tassello e' il testo stesso: largo quanto il nome,
   si prende anche con un guanto, e il contorno dice da solo che si preme.
   Il raggio e' quello di un tasto e non della pillola: in coda alla stessa
   riga sta la fetta di stato, che e' una pillola col contorno, e due pillole
   uguali direbbero che anche lo stato si preme. Qui il contorno forte e gli
   angoli di un tasto dicono «comando», la pillola dice «stato».
   Si stringe come il negozio accanto — un riferimento tagliato a meta' si
   riconosce lo stesso, un orario tagliato a meta' e' un altro orario. */
.dt-testatina__riferimento {
  flex: 0 1 auto;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  height: 24px;
  padding: 0 var(--dt-sp-2) 0 var(--dt-sp-3);
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-sm);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dt-t-fast), background var(--dt-t-fast),
    border-color var(--dt-t-fast);
}
.dt-testatina__riferimento > span {
  min-width: 0;
  white-space: nowrap;
}
.dt-testatina__riferimento > svg {
  flex: none;
  color: var(--dt-text-3);
}
.dt-testatina__riferimento:hover {
  background: var(--dt-surface-inset);
  border-color: var(--dt-accent-border);
  color: var(--dt-text);
}
.dt-testatina__riferimento:hover > svg { color: var(--dt-text); }
.dt-testatina__riferimento:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dt-accent);
}
/* Cosa manca ancora chiude la riga a destra: e' l'unica cosa quassu' che si
   muove mentre si compila, e sta dalla parte opposta a quelle ferme. Le ore
   stavano qui, e si leggevano e basta: adesso hanno la loro riga in cima alla
   faccia, con la matita, come ogni altra cosa del foglio. */
.dt-testatina .dt-stato {
  flex: none;
  align-self: center;
  margin-left: auto;
}

/* La riga ferma della copertina: l'ora che il gesto ha gia' detto.

   Sta dove starebbe la testatina — stesso posto, stesso filo sotto — ma non
   e' una testatina: il blocco non ha ancora un'identita', e non se ne inventa
   una. Niente segno, niente fetta di stato, niente «Fatto» su una cosa appena
   nata: solo le ore, smorte, e la riga che dice da dove vengono. */
.dt-copertina__quando {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dt-sp-1) var(--dt-sp-4);
  padding: var(--dt-sp-3) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border);
  background: var(--dt-surface);
}
.dt-copertina__ore {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dt-copertina__a { color: var(--dt-text-3); }
.dt-copertina__durata {
  color: var(--dt-text);
  font-weight: var(--dt-fw-semibold);
}
.dt-copertina__nota {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  font-style: italic;
}
/* Il cartellino, in testa alla **scheda che si legge**: il blocco ingrandito.
   E' il cartellino spillato addosso a una tenda: cosa e', per conto di chi, per
   quando. Porta la campitura del blocco — quella del negozio, la stessa che ha
   in colonna — perche' quello che si e' toccato in giornata e quello che si sta
   guardando devono essere riconoscibilmente la stessa cosa.
   La bolla che si **compila** non ce l'ha: li' la testa e' una riga sola e
   bianca (`.dt-testatina`), perche' sopra a un foglio da riempire una fascia
   di colore alta novanta pixel e' la cosa piu' grossa della finestra e non e'
   quella che si deve guardare.
   Sta fuori dal corpo che scorre e sotto alla testata, quindi niente raggi ne'
   bordo tutt'intorno: e' una striscia saldata alla finestra, non una scatola
   dentro un'altra. `flex: none` perche' nel modale il corpo e' l'unico che
   deve allungarsi.
   Fondo e inchiostro sono quelli dei blocchi: la campitura resta chiara su
   tutti e due i temi e la scritta sopra e' nera in tutti e due, percio' quello
   che ci sta dentro non ha bisogno di sapere che tema sia. */
.dt-cartellino {
  position: relative;
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4) var(--dt-sp-6);
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  border-bottom: 1px solid oklch(
    calc(var(--dt-tinta-l-bordo) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
  color-scheme: light;
  transition: background var(--dt-t-med), border-color var(--dt-t-med);
}
/* La stessa regola del blocco da cui si e' arrivati: senza colore da dire la
   striscia e' bianca, non grigia (vedi `.dt-blocco--bianca`). Il filo sotto
   resta, se no la striscia si salderebbe al foglio della scheda — che e' bianco
   anche lui — e la testata smetterebbe di essere una cosa a se'. */
.dt-cartellino--bianco {
  background: #fff;
  border-bottom-color: oklch(88% 0 0);
}
/* Due righe fisse e non una che va a capo dove capita: sopra cosa si sta
   segnando, sotto quando. Andando a capo per conto loro, su una finestra
   stretta il bollino finiva sotto agli orari e sopra restava una riga mezza
   vuota. Dentro alla riga si va a capo, che e' un'altra cosa: li' i pezzi sono
   pari fra loro. */
.dt-cartellino__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-2) var(--dt-sp-4);
  min-height: var(--dt-h-lg);
}
/* Il nome dell'attivita' e' la cosa piu' grande della fascia: e' cosa e' quel
   blocco, ed e' la prima cosa che si legge aprendolo. */
.dt-cartellino__nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--dt-fs-xl);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
  letter-spacing: -0.01em;
}
.dt-cartellino__riga svg { flex: none; }
/* La fetta di stato chiude la prima riga a destra, dove su un blocco in
   colonna sta l'orario: stesso posto, stessa cosa da cercare. */
.dt-cartellino__riga .dt-stato { margin-left: auto; }

/* Per conto di chi si va: la faccia del negozio col suo nome, sulla riga di
   mezzo del cartellino. E' il negozio a dare la campitura a tutta la fascia,
   e questa riga gli mette il nome accanto al colore — e' qui che i due si
   imparano uno per l'altro. Senza commessa la riga non c'e': il grigio non ha
   bisogno di una didascalia. */
.dt-cartellino__negozio {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-width: 0;
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-medium);
}
.dt-cartellino__negozio > span { white-space: nowrap; }
/* Il tassello del riferimento — nome e citta', e il segno «i» in coda — di
   fianco al negozio: lo stesso della testatina, e si preme per la stessa
   scheda. Sta su una campitura che puo' essere di qualunque tinta, quindi non
   ha un colore suo: e' l'inchiostro della fascia, contorno compreso, smorto
   quanto una didascalia, e si accende sotto il dito. */
.dt-cartellino__riferimento {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  height: 24px;
  padding: 0 var(--dt-sp-2) 0 var(--dt-sp-3);
  border: 1px solid currentColor;
  border-radius: var(--dt-r-md);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-regular);
  line-height: 1;
  opacity: 0.72;
  cursor: pointer;
  transition: opacity var(--dt-t-fast);
}
.dt-cartellino__riferimento > span {
  min-width: 0;
  white-space: nowrap;
}
.dt-cartellino__riferimento > svg { flex: none; }
.dt-cartellino__riferimento:hover { opacity: 1; }
.dt-cartellino__riferimento:focus-visible {
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px currentColor;
}

/* Il cartellino a sagoma: la testata di un blocco che deve ancora succedere.
   Lo stesso segno del blocco in colonna — la campitura appena accennata e il
   contorno tratteggiato — cosi' si tocca un blocco a sagoma e si apre una
   scheda a sagoma, cioe' quel blocco ingrandito.
   Il tratteggio qui sta sul filo di sotto, che e' l'unico contorno che la
   striscia ha, e a tre pixel: sotto a una testata larga una scheda i trattini
   devono avere la stessa presenza che hanno intorno a un blocco. Un contorno
   tutto intorno no: gli altri tre lati della striscia sono i bordi della
   scheda, e ci disegnerebbe dentro una cornice che la scheda non ha.
   Solo sulla scheda che si guarda (`--fermo`): sulla bolla che si compila la
   testata sta ferma, e lo stato lo dice la fetta. */
.dt-cartellino--sagoma {
  background: oklch(
    min(96%, calc(var(--dt-sagoma-l) + var(--dt-blocco-luce, 0%) * 0.5))
    calc(var(--dt-blocco-c) * var(--dt-sagoma-c))
    var(--dt-blocco-tinta)
  );
  border-bottom: 3px dashed oklch(
    calc(var(--dt-sagoma-l-tratto) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  color: var(--dt-text);
  color-scheme: normal;
}
/* Senza negozio la striscia resta bianca come il blocco da cui si arriva, e a
   dire che deve ancora succedere e' il solo filo tratteggiato. */
.dt-cartellino--bianco.dt-cartellino--sagoma {
  background: #fff;
  border-bottom-color: oklch(78% 0 0);
}

/* Le ore e i chilometri: campi veri, ma senza etichetta e appoggiati alla
   campitura invece che alla pagina. Il fondo e' un velo di bianco e non la
   superficie del tema: sul tema scuro una casella quasi nera dentro a una
   campitura chiara sarebbe un buco. */
.dt-cartellino__ora,
.dt-cartellino__km {
  height: var(--dt-h-lg);
  padding: 0 var(--dt-sp-3);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: var(--dt-r-sm);
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  font: inherit;
  font-size: var(--dt-fs-md);
  font-variant-numeric: tabular-nums;
}
.dt-cartellino__ora:focus-visible,
.dt-cartellino__km:focus-within {
  outline: 2px solid oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
  outline-offset: 1px;
}
/* Il campo dentro all'etichetta dei chilometri non ha vestito suo: il riquadro
   ce l'ha gia' l'etichetta, che tiene insieme il numero e la sua unita'. */
.dt-cartellino__cifra {
  width: 3.5em;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
}
/* Le frecce del campo numerico rubano meta' della casella per due mezzi tasti
   che nessuno prende col pollice. */
.dt-cartellino__cifra::-webkit-outer-spin-button,
.dt-cartellino__cifra::-webkit-inner-spin-button { appearance: none; margin: 0; }
.dt-cartellino__cifra { appearance: textfield; -moz-appearance: textfield; }
.dt-cartellino__a {
  opacity: 0.5;
  user-select: none;
}
/* La durata sta dalla parte del risultato: non si batte, si legge. */
.dt-cartellino__durata {
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.dt-cartellino__km {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
}
.dt-cartellino__km > span { opacity: 0.6; font-size: var(--dt-fs-sm); }

/* Il bollino: il lavoro non e' finito.
   Ha preso il posto della scelta fra tre parole — "Da fare", "Da finire",
   "Fatto" — che erano tre etichette da rileggere ogni volta per dire quasi
   sempre la stessa cosa. Qui non c'e' niente da scegliere: o lo si mette o non
   c'e'.
   Messo, e' pieno d'inchiostro: sulla campitura chiara di qualunque delle
   dodici tinte e' il segno piu' forte della finestra, ed e' giusto che lo sia
   perche' e' l'unica cosa che chiede di tornare qui. */
.dt-cartellino__bollino {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-3);
  height: var(--dt-h-lg);
  padding: 0 var(--dt-sp-5);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: var(--dt-r-full);
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  font: inherit;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
    color var(--dt-t-fast);
}
.dt-cartellino__bollino:hover { background: rgba(255, 255, 255, 0.85); }
.dt-cartellino__bollino:focus-visible {
  outline: 2px solid oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
  outline-offset: 2px;
}
.dt-cartellino__punto {
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: var(--dt-r-full);
  opacity: 0.55;
  transition: background var(--dt-t-fast), opacity var(--dt-t-fast);
}
.dt-cartellino__bollino--messo {
  background: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
  border-color: transparent;
  /* Bianco fisso e non `--dt-text-inv`: la campitura sotto e' chiara su tutti e
     due i temi, quindi qui sopra il tema non c'entra niente. */
  color: #fff;
}
.dt-cartellino__bollino--messo:hover { background: rgba(0, 0, 0, 0.78); }
.dt-cartellino__bollino--messo .dt-cartellino__punto {
  background: currentColor;
  opacity: 1;
}

/* Lo stesso cartellino su una scheda che si guarda e basta: gli orari e il
   bollino tengono la loro forma — e' quello che lega la maschera al blocco che
   si e' appena toccato — ma non si accendono sotto al dito, perche' non c'e'
   niente da premere. Le caselle diventano etichette: stessa scatola, senza il
   cursore che invita a scriverci dentro. */
.dt-cartellino--fermo .dt-cartellino__ora,
.dt-cartellino--fermo .dt-cartellino__km {
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.dt-cartellino--fermo .dt-cartellino__bollino { cursor: default; }

/* Le ore che non sono di questa cosa: gliele danno i vicini.

   E' il caso del viaggio, che ha quelle del buco fra i due lavori che lo
   chiudono. Restano scritte — servono a sapere di quale pezzo di giornata si
   sta parlando — ma perdono la scatola: una casella dice «puoi cambiarmi», e
   qui non si puo', perche' non c'e' niente da cambiare. Il carattere resta lo
   stesso, cosi' la riga si legge come su ogni altro cartellino. */
.dt-cartellino__ora--ferma {
  display: inline-flex;
  align-items: center;
  border-color: transparent;
  background: none;
  cursor: default;
}
.dt-cartellino--fermo .dt-cartellino__bollino--messo:hover {
  background: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}

/* ===========================================================================
   La bolla: un foglio con due facce

   La scheda di un blocco era una colonna che scorreva e chiedeva tutto insieme;
   poi e' stata una fila di schermate con una fettuccia in cima. Nessuna delle
   due diceva la cosa vera: che le meta' sono **due**, e hanno mestieri diversi.
   L'appuntamento si consegna — lo scrive chi manda, lo legge chi va — il
   resoconto torna indietro, e lo scrive chi c'e' stato.

   Da qui scendono le forme di questo pezzo di foglio:

   * tutte e due le facce sono **scritte**, righe e non campi
     (`.dt-consegna`), e ogni riga porta la sua matita
     (`.dt-consegna__matita`): si corregge un campo alla volta, in una
     finestra sua;
   * fra le due c'e' una porta sola, ed e' l'ora (`.dt-porta`) — passata, e'
     una riga come le altre;
   * le due facce e la porta si vedono sempre: e' la piega (`.dt-piega`),
     ferma sotto la testatina, e la faccia si gira da li' o dal tasto in
     fondo.

   Quali sezioni ci siano, su quale faccia e in che ordine non sta scritto qui:
   sta nel catalogo, riga per riga.
   =========================================================================== */

/* Una sezione di una faccia: un riquadro grosso, da premere col guanto.

   Il filo che le divide e non una cornice per ognuna: sono pezzi dello stesso
   foglio, e incorniciarli uno per uno farebbe una fila di schede dentro a una
   scheda. L'ultima non ha filo, perche' sotto non c'e' niente da dividere. */
.dt-sezione {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-4);
  padding-bottom: var(--dt-sp-7);
  border-bottom: 1px solid var(--dt-border-soft);
}
.dt-sezione:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Piu' sezioni in fila dentro alla stessa finestra.

   Nella bolla la sezione e' una per volta: la copertina, o la finestra di un
   campo solo. Dove invece le domande si fanno tutte insieme — la consegna
   dell'ufficio, che compone un appuntamento in un colpo — ne servono quattro
   in colonna, e allora conta l'aria: **dentro** a una sezione otto pixel fra
   la domanda e la sua risposta, **fra** una sezione e l'altra venti piu' il
   filo. Il gruppo lo fa la distanza, non una cornice, ed e' quella differenza
   a dire quale risposta appartiene a quale domanda.

   Simmetrica sul filo — venti sopra e venti sotto — perche' un filo appoggiato
   alla domanda che viene dopo si legge come la sua sottolineatura invece che
   come la fine di quella prima. */
.dt-sezioni {
  display: flex;
  flex-direction: column;
}
.dt-sezioni > .dt-sezione + .dt-sezione { padding-top: var(--dt-sp-7); }

/* I comandi che riguardano il blocco intero e non la sezione: buttarlo, o
   uscirne lasciandolo ai colleghi. Stanno in coda a «cosa hai fatto» perche' e'
   li' che si scopre che quel blocco non doveva esserci, e non in fondo alla
   bolla, dove una mano che corre finirebbe per premerli. */
.dt-sezione__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-3);
  padding-top: var(--dt-sp-5);
  border-top: 1px solid var(--dt-border-soft);
}

/* La riga smorta in testa a una faccia, col suo unico comando.

   Il nome grosso non c'e' piu': «Appuntamento» lo dice gia' la piega, qui
   sopra, e ripeterlo sarebbe la stessa parola due volte a quaranta pixel di
   distanza. Resta il sottotitolo — cosa sia questo foglio — e il comando:
   cambia il segno e cambia la parola (la matita apre, la spunta chiude), e
   non cambia niente altro, cosi' passare da una all'altra non sposta niente
   sotto agli occhi. */
.dt-faccia-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-4);
  padding-bottom: var(--dt-sp-4);
  border-bottom: 1px solid var(--dt-border-soft);
  /* L'aria fra il filo e la prima riga del foglio: la stessa che le righe
     tengono fra loro, cosi' la testa non sembra attaccata alla prima. */
  margin-bottom: var(--dt-sp-3);
}
.dt-faccia-testa__sotto {
  min-width: 0;
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  line-height: var(--dt-lh-normal);
}

/* La piega: la riga in cui il foglio si gira.

   Fissa sotto la testatina, fuori dal corpo che scorre: arrivati alle foto si
   vede ancora dove si e', e la strada per l'altra faccia e' sempre a un
   tocco. Ha preso il posto del tastino `dt-gira`, che era gia' un comando di
   navigazione — solo troppo piccolo, senza il nome della faccia corrente e
   presente su una faccia sola.

   Due meta' dentro un contenitore unico col filo divisorio, come da regola
   delle barre di comandi. La meta' attiva porta l'inchiostro e il filo
   d'accento sotto; l'altra e' grigia, e premerla gira il foglio. Le
   transizioni stanno sugli stessi nodi: niente scatti. */
.dt-piega {
  position: relative;
  flex: none;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--dt-border);
  background: var(--dt-surface);
}
.dt-piega__faccia {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: none;
  background: none;
  color: var(--dt-text-3);
  cursor: pointer;
  font: inherit;
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-tight);
  white-space: nowrap;
  transition: color var(--dt-t-fast), background var(--dt-t-fast),
    box-shadow var(--dt-t-fast);
}
/* Il filo divisorio sta sulla seconda meta' e non fra i fratelli adiacenti:
   in mezzo ai due tasti c'e' il tondino, e un selettore col `+` non
   scatterebbe mai. */
.dt-piega__faccia:last-of-type { border-left: 1px solid var(--dt-border-soft); }
.dt-piega__faccia:hover {
  background: var(--dt-surface-inset);
  color: var(--dt-text);
}
.dt-piega__faccia:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
.dt-piega__faccia--attiva {
  color: var(--dt-text);
  font-weight: var(--dt-fw-semibold);
  box-shadow: inset 0 -2px 0 var(--dt-accent);
}
.dt-piega__faccia--attiva:focus-visible { box-shadow: inset 0 0 0 2px var(--dt-accent); }
/* Il campione: la lingua delle campiture della colonna, ridotta a un
   quadretto. Vuoto e tratteggiato = deve ancora succedere, pieno = successo —
   imparata la', riusata qui, gratis. Su undici pixel il tratteggio ci sta —
   tre trattini per lato — e il tratto resta da uno: due pixel su un quadretto
   cosi' sarebbero quasi tutto il quadretto. */
.dt-piega__campione {
  flex: none;
  width: 11px;
  height: 11px;
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-xs);
}
.dt-piega__campione--sagoma {
  border-style: dashed;
  border-color: var(--dt-text-3);
  background: var(--dt-surface);
}
.dt-piega__campione--pieno {
  border-color: var(--dt-text-2);
  background: var(--dt-text-2);
}
.dt-piega__faccia--attiva .dt-piega__campione { border-color: var(--dt-text-2); }
.dt-piega__faccia--attiva .dt-piega__campione--pieno {
  border-color: var(--dt-text);
  background: var(--dt-text);
}
/* Il tondino: la porta, vista come cio' che sta fra le due facce. A cavallo
   del filo, col fondo pieno che lo copre nel punto in cui lo attraversa. Non
   e' un tasto — e' un segno: aperto con l'orologio finche' l'ora e' da
   confermare, pieno d'inchiostro con la spunta quando e' passata. */
.dt-piega__porta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface);
  color: var(--dt-text-2);
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
    color var(--dt-t-fast);
}
.dt-piega__porta--passata {
  border-color: var(--dt-accent);
  background: var(--dt-accent);
  color: var(--dt-text-inv);
}

/* ---------------------------------------------------------------------------
   L'appuntamento, scritto
   --------------------------------------------------------------------------- */

/* Il foglio delle consegne. Righe e non campi: chi lo apre sta per andarci, non
   sta per correggerlo, e su un tablet appoggiato al cruscotto una colonna di
   caselle e' anche il modo piu' facile di cambiare per sbaglio un'ora giusta. */
.dt-consegne {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-5);
}
/* Una riga: il segno a sinistra, e a destra la parola sopra e la consegna
   sotto. Il segno in colonna sua e allineato al testo e non centrato: le
   consegne lunghe — un indirizzo su due righe — scendono, e un segno che
   scivolasse a meta' non punterebbe piu' a niente. */
.dt-consegna {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--dt-sp-4);
}
.dt-consegna__segno {
  display: inline-flex;
  padding-top: 1px;
  color: var(--dt-text-3);
}
/* Il segno di una riga a meta' torna nell'inchiostro pieno: non un colore
   d'allarme — non e' un errore, e' un debito — ma il peso che serve perche' fra
   sei righe grigie quella si veda. */
.dt-consegna--manca .dt-consegna__segno { color: var(--dt-text); }
.dt-consegna__parole {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--dt-sp-1);
}
.dt-consegna__parola {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Lo stesso punto della sezione da riempire e del blocco in colonna: non e' un
   asterisco e non e' la parola "obbligatoria" — nessuno sta esigendo niente —
   e' che quel pezzo tornera' indietro. */
.dt-consegna__punto {
  width: 6px;
  height: 6px;
  border-radius: var(--dt-r-full);
  /* Lo stesso inchiostro del punto sulla sezione e sul blocco in colonna: un
     segno solo, tre posti, niente da imparare due volte. */
  background: var(--dt-accent);
}
/* La consegna com'e' scritta. `pre-line` perche' un indirizzo va a capo dopo il
   nome: e' una riga sola di informazione, letta su due righe come sulla busta. */
.dt-consegna__testo {
  font-size: var(--dt-fs-md);
  line-height: var(--dt-lh-normal);
  white-space: pre-line;
  /* Un indirizzo di Maps incollato nelle istruzioni e' una parola sola di
     trecento lettere: va a capo dove capita, come le altre righe scritte a
     mano, invece di spingere di lato tutta la bolla. */
  overflow-wrap: anywhere;
}
/* Il buco, detto. Non si nasconde la riga: un buco nella consegna e'
   esattamente la cosa che chi legge deve vedere, ed e' il motivo per cui quel
   blocco porta il triangolo in colonna. */
.dt-consegna__vuoto {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-md);
  font-style: italic;
}

/* La riga che si corregge: tutta la riga e' il bersaglio, la matita e' il
   segno. Il rientro negativo tiene i testi nella colonna di tutti mentre il
   fondo del passaggio del mouse si allarga oltre, fino al bordo del foglio:
   e' lo stesso trucco delle voci d'elenco. */
.dt-consegna--tocca {
  grid-template-columns: auto 1fr auto;
  padding: var(--dt-sp-4);
  margin-inline: calc(-1 * var(--dt-sp-4));
  border-radius: var(--dt-r-md);
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
.dt-consegna--tocca:hover { background: var(--dt-surface-inset); }
/* Nel foglio con le matite le righe si toccano: l'aria fra l'una e l'altra
   e' gia' nel loro imbottito, e sommarci il passo intero del foglio letto
   farebbe una scala coi gradini doppi. */
.dt-consegne--matite { gap: var(--dt-sp-3); }
/* La matita della riga: apre la finestra di quel campo solo. Gemella di
   quella in testatina, appena piu' larga perche' qui si preme col guanto. I
   margini negativi la tengono dentro all'altezza della prima riga di testo,
   cosi' una riga corta non si alza per farle posto. */
.dt-consegna__matita {
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -5px 0;
  padding: 0;
  border: none;
  border-radius: var(--dt-r-sm);
  background: none;
  color: var(--dt-text-3);
  cursor: pointer;
  transition: color var(--dt-t-fast), background var(--dt-t-fast);
}
.dt-consegna--tocca:hover .dt-consegna__matita { color: var(--dt-text); }
.dt-consegna__matita:hover { background: var(--dt-border-soft); }
.dt-consegna__matita:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}

/* Le ore come riga del foglio: si leggono come si dicono, e la durata sta
   dalla parte del risultato. E' la riga in cui la porta si distende una
   volta passata. */
.dt-consegna__ore {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  font-variant-numeric: tabular-nums;
}
.dt-consegna__a { color: var(--dt-text-3); }
.dt-consegna__durata { font-weight: var(--dt-fw-semibold); }
/* Una riga sotto alle ore, per dire da dove vengono: sul viaggio condiviso,
   «il viaggio e' 8:00 → 11:00: questa e' la tua parte». Grigia come la parola
   in testa alla riga: e' un'informazione, non un debito. */
.dt-consegna__nota {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
  font-variant-numeric: tabular-nums;
}

/* I comandi che riguardano il blocco intero, in fondo al foglio: buttarlo, o
   uscirne lasciandolo ai colleghi. Staccati da un filo e da un salto d'aria,
   perche' la cosa piu' facile da premere quaggiu' deve restare il tasto nel
   piede, non il cestino. */
.dt-bolla__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-3);
  margin-top: var(--dt-sp-8);
  padding-top: var(--dt-sp-5);
  border-top: 1px solid var(--dt-border-soft);
}

/* ---------------------------------------------------------------------------
   La porta: l'ora, e il comando che la conferma
   --------------------------------------------------------------------------- */

/* La sezione degli orari, e le sue due nature.

   Finche' la porta e' da passare e' **l'unico riquadro incassato del
   foglio**: bordo, raggio dai token, fondo incassato, subito sotto la piega —
   visivamente appesa al tondino che le sta sopra. Dentro ci stanno la
   domanda, le due caselle e la primaria che conferma. Confermata l'ora, il
   riquadro **si distende** nella sezione quieta: stessi nodi, transizione
   sulle dimensioni — niente keyframe che finti-traslano mentre il contenuto
   cambia. */
.dt-porta {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-4);
  border: 1px solid transparent;
  border-radius: var(--dt-r-lg);
  transition: padding var(--dt-t-med), background var(--dt-t-med),
    border-color var(--dt-t-med);
}
.dt-porta--soglia {
  padding: var(--dt-sp-5);
  border-color: var(--dt-border);
  background: var(--dt-surface-inset);
}
/* Le due caselle e il comando, su una riga sola finche' ci stanno.

   Sotto ai 360 il comando va a capo e si posa sotto alle ore, allineato a
   sinistra con loro: e' il gesto piu' importante della bolla — quello che dice
   *ci sono stato* — e su uno schermo stretto sta meglio da solo su una riga sua
   che schiacciato di fianco a due caselle. A mandarcelo e' l'andare a capo del
   flex, non una soglia scritta: la riga si spezza dove non ci sta piu', e fra
   una larghezza e l'altra non c'e' nessuno scatto. */
.dt-porta__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-4) var(--dt-sp-5);
}
.dt-porta__ore {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--dt-sp-3);
}
.dt-porta__ora {
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--dt-lh-tight);
}
.dt-porta__ora:focus-visible {
  border-color: var(--dt-accent);
  outline: none;
}
/* Un viaggio le ore non le ha sue: gliele danno i lavori che lo chiudono. Si
   leggono lo stesso — serve sapere di quale pezzo di giornata si parla — ma
   senza il contorno, che direbbe «puoi cambiarmi». */
.dt-porta__ora--ferma {
  border-color: transparent;
  background: none;
}
.dt-porta__a { color: var(--dt-text-3); }
/* La durata sta dalla parte del risultato e non si batte: e' la sottrazione di
   quello che si e' appena scritto a sinistra. */
.dt-porta__durata {
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* La domanda in cima alla schermata.

   E' una domanda vera — "Dove hai lavorato?" — e non l'etichetta di un campo.
   Una schermata sola per volta se lo puo' permettere, e chiedere invece che
   intitolare e' la differenza che si sente stando in piedi: a un'etichetta si
   risponde solo se si e' gia' capito cosa si sta compilando. */
.dt-domanda {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
}
.dt-domanda__riga {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-4);
  color: var(--dt-text-3);
}
.dt-domanda__riga > svg { flex: none; }
.dt-domanda__testo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--dt-text);
  font-size: var(--dt-fs-xl);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
  letter-spacing: -0.015em;
}
.dt-domanda__sotto {
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
}

/* Il punto: un debito, non un divieto.

   E' il segno che tiene insieme tre schermate che prima non si parlavano. In
   catalogo l'amministratore lo mette su una domanda per dire "questa la
   pretendo"; in giornata compare sulla fettuccia finche' quella domanda e'
   senza risposta; e se il blocco si salva lo stesso — che si puo', sempre — lo
   si ritrova identico sul blocco in colonna.

   **Il punto e' il debito: quando lo paghi, sparisce.** Non e' rosso e non e'
   un asterisco: tutti e due direbbero che qualcuno esige qualcosa, e qui invece
   non esige nessuno. E' inchiostro, come il resto della piattaforma, perche' la
   cosa che dice non e' un errore ma una nota — questo pezzo torna indietro.

   Fuori dal segno e non dentro: dentro coprirebbe l'icona, che e' quella che
   dice *quale* domanda. */
.dt-debito {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: var(--dt-r-full);
  background: var(--dt-accent);
  /* L'anello del colore di sotto: su una campitura piena il punto d'inchiostro
     senza stacco si legge come un buco nell'icona. */
  box-shadow: 0 0 0 2px var(--dt-surface-2);
}
/* Sulla domanda in cima alla schermata sta in fila col titolo, non appeso a un
   angolo: li' non c'e' un segno da non coprire, c'e' una riga da leggere. */
.dt-debito--grande {
  position: static;
  flex: none;
  width: 10px;
  height: 10px;
  box-shadow: none;
}
/* Il tastino con cui l'amministratore mette il punto su una domanda.
   E' il punto stesso dentro a un bersaglio da pollice: quello che si preme e'
   quello che si vedra', e non c'e' una seconda forma da imparare fra chi scrive
   la regola e chi la subisce. Spento e' un contorno — la domanda c'e' ma non
   pretende niente — messo e' pieno d'inchiostro. */
.dt-pretendi {
  display: grid;
  place-items: center;
  width: var(--dt-h-md);
  height: var(--dt-h-md);
  padding: 0;
  border: 0;
  border-radius: var(--dt-r-sm);
  background: none;
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
.dt-pretendi:hover { background: var(--dt-hover); }
.dt-pretendi:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: -2px; }
/* Spento: contorno e basta. Il punto pieno lo prende quando lo si preme. */
.dt-pretendi .dt-debito {
  position: static;
  width: 11px;
  height: 11px;
  background: none;
  border: 2px solid var(--dt-border-strong);
  box-shadow: none;
}
.dt-pretendi--messo .dt-debito { background: var(--dt-accent); border-color: var(--dt-accent); }

/* I due secchi delle facce: cosa si consegna, cosa torna indietro.
   Affiancati e non uno sotto l'altro finche' c'e' spazio, perche' la domanda
   che si fa qui e' **di confronto** — questa domanda la chiedo prima o dopo? —
   e due elenchi incolonnati la fanno rispondere a memoria. Sotto la soglia si
   impilano: due colonne da centosessanta pixel non si leggono, e l'ordine
   verticale dice comunque la cosa giusta, cioe' che prima c'e' la consegna. */
.dt-facce-due {
  display: grid;
  gap: var(--dt-sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .dt-facce-due { grid-template-columns: 1fr 1fr; align-items: start; }
}

.dt-fase {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
  min-width: 0;
}
.dt-fase__testa {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: var(--dt-sp-2);
  border-bottom: 1px solid var(--dt-border);
}
.dt-fase__nome {
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
.dt-fase__sotto {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
  line-height: var(--dt-lh-normal);
}

/* Il secchio riceve anche da vuoto, quindi ha bisogno di un'altezza sua: senza,
   una faccia senza righe sarebbe un bersaglio alto zero pixel e l'unico modo di
   riempirla sarebbe premere una tessera. */
.dt-fase__fila {
  min-height: 64px;
  border-radius: var(--dt-r-md);
  transition: background var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
/* La corsia accesa: qui dentro la sezione andrebbe a finire. E' lo stesso segno
   che una sezione di catalogo accende quando le si porta sopra un materiale. */
.dt-fase__fila.dt-cade--dentro {
  background: var(--dt-accent-soft);
  box-shadow: inset 0 0 0 1px var(--dt-accent-border);
}
/* Da vuoto lo stato vuoto occupa gia' il riquadro: gli si toglie l'aria che si
   prenderebbe in mezzo a una pagina, perche' qui e' una casella da riempire e
   non una schermata da leggere. */
.dt-fase__fila .dt-empty { padding: var(--dt-sp-5) var(--dt-sp-4); }

/* La coda: dove il lavoro c'era, ma questa persona no.

   Un blocco condiviso e' una riga sola, e fino a ieri voleva dire anche "tutti
   dalle stesse ore alle stesse ore". Adesso ognuno puo' avere la sua fetta, e
   nella sua giornata il blocco e' alto **quanto la sua fetta** — sono le sue
   ore, ed e' quello che il totale conta.

   Ma il lavoro e' andato avanti anche senza di lui, e farlo sparire sarebbe
   l'altra meta' della bugia. Da qui la coda: un filo tratteggiato della stessa
   tinta che sale o scende fino a dove il montaggio e' arrivato. Tratteggiata e
   non piena per lo stesso motivo per cui lo e' una pausa — c'e' qualcosa, ma
   non e' roba sua — e larga la meta' del blocco, appoggiata al bordo sinistro,
   cosi' non si confonde con un blocco vero e non copre quello accanto. */
.dt-blocco__coda {
  position: absolute;
  left: -1px;
  width: 34%;
  min-width: 10px;
  pointer-events: none;
  border-left: 2px dashed
    oklch(calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%)) var(--dt-blocco-c, var(--dt-tinta-c)) var(--dt-blocco-tinta));
  opacity: 0.75;
}
.dt-blocco__coda--su {
  bottom: 100%;
  border-top: 2px dashed
    oklch(calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%)) var(--dt-blocco-c, var(--dt-tinta-c)) var(--dt-blocco-tinta));
  border-top-left-radius: var(--dt-r-sm);
}
.dt-blocco__coda--giu {
  top: 100%;
  border-bottom: 2px dashed
    oklch(calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%)) var(--dt-blocco-c, var(--dt-tinta-c)) var(--dt-blocco-tinta));
  border-bottom-left-radius: var(--dt-r-sm);
}
/* L'ora in punta alla coda: fin dove e' arrivato il lavoro senza di lui. E'
   quello che rende la coda un'informazione invece di una decorazione — un
   tratteggio senza numero dice "e' andato avanti" e non fino a quando. Smorta e
   piccola: e' un dato di contorno, e il blocco vero resta quello pieno. */
.dt-blocco__coda-ora {
  position: absolute;
  left: calc(100% + var(--dt-sp-2));
  font-size: var(--dt-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dt-text-3);
  white-space: nowrap;
}
.dt-blocco__coda--su .dt-blocco__coda-ora { top: -2px; }
.dt-blocco__coda--giu .dt-blocco__coda-ora { bottom: -2px; }

/* Il blocco taglia quello che gli esce fuori: la coda no. */
.dt-blocco { overflow: visible; }
.dt-blocco__testa { overflow: hidden; }

/* --------------------------------------------------------------------------
   Il nastro della squadra
   --------------------------------------------------------------------------
   Chi c'era, e quando, uno sotto l'altro: la colonna della giornata girata di
   lato. Ogni riga e' la riga dell'anagrafica — la faccia nella corsia, il nome
   di fianco, i comandi in fondo — e sotto ha la sua pista, tutte sulla stessa
   scala e quindi incolonnate: l'elenco *e'* il grafico.

   Le campiture sono quelle della colonna. Il lavoro intero e' un binario
   tratteggiato, la stessa coda che in colonna dice «il lavoro c'era, tu no»;
   le ore di ognuno sono pieni del colore della sua faccia, col filo un tono
   sotto come un blocco. Chi c'e' stato tutto il tempo copre il binario da un
   capo all'altro, e il tratteggio sparisce sotto.

   Dove comincia la pista lo dice la riga, non un numero a parte: dopo la
   corsia della faccia e il suo stacco (`--dt-corsia-testo`), cioe' dove
   comincia il nome. E' la stessa misura della riga delle ore in cima, che
   cosi' cade sopra alle piste. */
.dt-nastro {
  --dt-nastro-x: var(--dt-riga-x);
  --dt-nastro-dentro: calc(var(--dt-corsia) + var(--dt-corsia-testo));
  --dt-nastro-pista: var(--dt-h-md);
  --dt-nastro-fetta: 12px;
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  overflow: hidden;
}
/* La riga delle ore: le ore intere, scritte piccole sopra alle piste. */
.dt-nastro__asse {
  position: relative;
  height: calc(var(--dt-fs-xs) + var(--dt-sp-5));
  margin: 0 var(--dt-nastro-x) 0 calc(var(--dt-nastro-x) + var(--dt-nastro-dentro));
}
.dt-nastro__tacca {
  position: absolute;
  bottom: var(--dt-sp-2);
  transform: translateX(-50%);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  /* L'ultima sta a left:100%, dove di posto non ne resta: senza, «18» va a
     capo cifra per cifra. */
  white-space: nowrap;
  transition: left var(--dt-t-med);
}
/* Le due in punta si appoggiano dentro: centrate sborderebbero. */
.dt-nastro__tacca--prima { transform: none; }
.dt-nastro__tacca--ultima { transform: translateX(-100%); }

.dt-nastro__riga {
  display: grid;
  grid-template-columns: var(--dt-corsia) minmax(0, 1fr) auto auto;
  grid-template-areas:
    "segno nome bollini comandi"
    ".     pista pista  pista"
    ".     apre  apre   apre";
  align-items: center;
  column-gap: var(--dt-sp-3);
  min-height: var(--dt-riga-h);
  padding: var(--dt-sp-2) var(--dt-nastro-x);
  border-top: 1px solid var(--dt-border-soft);
  transition: background var(--dt-t-fast);
}
.dt-nastro__riga > .dt-corsia { grid-area: segno; margin-right: 0; }
.dt-nastro__riga > .dt-nastro__nome { grid-area: nome; min-width: 0; }
/* Lo stacco fra la faccia e il nome. In una riga d'elenco lo fa il margine
   della corsia, ma in una griglia un margine non sposta le colonne: qui lo
   prendono il nome, la pista e le ore aperte, cosi' cominciano tutti dove
   comincia il nome di una `.dt-voce`, e la riga delle ore in cima ci cade
   sopra. */
.dt-nastro__riga > .dt-nastro__nome,
.dt-nastro__riga > .dt-nastro__pista,
.dt-nastro__riga > .dt-nastro__apre {
  margin-left: calc(var(--dt-corsia-testo) - var(--dt-sp-3));
}
.dt-nastro__riga > .dt-voce__bollini { grid-area: bollini; margin-left: 0; }
.dt-nastro__riga > .dt-comandi { grid-area: comandi; margin-left: 0; }
.dt-nastro__riga:hover > .dt-comandi {
  border-color: var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text-2);
}
/* Le ore dette sotto al nome sono un numero: in colonna con quelle sopra. */
.dt-nastro__ore-dette { font-variant-numeric: tabular-nums; }
/* Chi non e' in squadra si legge meno, come chi e' stato messo via in
   anagrafica: c'e' in elenco, e non e' la risposta. La faccia resta piena. */
.dt-nastro__riga--fuori .dt-voce__nome { color: var(--dt-text-3); }
/* La riga con le ore aperte sotto: si capisce di chi sono le caselle. */
.dt-nastro__riga--aperta { background: var(--dt-surface-2); }

/* La pista: tutta la larghezza sotto al nome, e un tasto. Premerla apre le
   ore di quella persona. Alta abbastanza per il pollice; la fetta dentro e'
   sottile, e il resto e' aria da premere. Un filo ogni ora intera, la stessa
   scala per tutti. */
.dt-nastro__pista {
  grid-area: pista;
  position: relative;
  display: block;
  justify-self: stretch;
  height: var(--dt-nastro-pista);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--dt-r-sm);
  background-color: transparent;
  background-image: linear-gradient(to right, var(--dt-border-soft) 1px, transparent 1px);
  background-size: calc(100% / var(--dt-nastro-ore, 1)) 100%;
  cursor: pointer;
}
.dt-nastro__pista:disabled { cursor: default; }
.dt-nastro__pista:focus-visible {
  outline: 2px solid var(--dt-accent-border);
  outline-offset: 2px;
}
.dt-nastro__binario {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--dt-nastro-fetta);
  transform: translateY(-50%);
}
/* Il lavoro intero: il binario tratteggiato. Tratteggiato e non pieno per la
   stessa ragione della coda in colonna — c'e' qualcosa, ma non e' roba sua. */
.dt-nastro__lavoro,
.dt-nastro__fetta {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--dt-r-xs);
  transition: left var(--dt-t-med), width var(--dt-t-med);
}
.dt-nastro__lavoro { border: 1px dashed var(--dt-border-strong); }
.dt-nastro__pista:hover:not(:disabled) .dt-nastro__lavoro { border-color: var(--dt-text-3); }
.dt-nastro__fetta { border: 1px solid transparent; }
/* Le ore di chi c'era, nel colore della sua faccia: la campitura piena di un
   blocco, col filo un tono sotto. */
.dt-nastro__fetta--tinta {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  border-color: oklch(
    calc(var(--dt-tinta-l-bordo) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
}
/* Chi una faccia colorata non ce l'ha: bianco col filo, come il suo
   cerchietto. */
.dt-nastro__fetta--senza {
  background: var(--dt-surface);
  border-color: var(--dt-text-3);
}

/* Le ore di una persona, aperte sotto alla sua riga: una fascia per ogni
   volta che c'era, e in fondo i due modi di cambiarne il numero. */
.dt-nastro__apre {
  grid-area: apre;
  padding: var(--dt-sp-3) 0 var(--dt-sp-2);
}
.dt-fasce {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
}
/* Le due caselle e quanto fa, su una riga sola: e' la stessa riga della porta
   degli orari, con le caselle alte quanto un pollice. */
.dt-fascia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-3);
}
.dt-fascia__ora {
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--dt-lh-tight);
}
.dt-fascia__ora:focus-visible {
  border-color: var(--dt-accent);
  outline: none;
}
/* Al contrario: la fine prima dell'inizio. Non si scrive un numero storto
   accanto — la durata resta vuota — e il filo dice dove guardare. */
.dt-fascia--storta .dt-fascia__ora { border-color: var(--dt-danger-border); }
.dt-fascia__a { color: var(--dt-text-3); }
.dt-fascia__durata {
  min-width: 5ch;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-regular);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dt-fasce__piede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-sp-2);
}

/* Il nastro da leggere: sul foglio della bolla e sulla scheda del blocco.
   Nessun riquadro — sta sotto alla sua riga come le foto — righe basse, e la
   pista sottile: qui non si preme niente. */
.dt-nastro--stretto {
  --dt-nastro-x: 0px;
  --dt-nastro-pista: calc(var(--dt-nastro-fetta) + var(--dt-sp-3));
  border: 0;
  background: none;
}
.dt-nastro--stretto .dt-nastro__riga {
  min-height: 0;
  padding-block: var(--dt-sp-1);
  border-top: 0;
}
.dt-nastro--stretto .dt-voce__nome { font-size: var(--dt-fs-sm); }

/* Il riquadro da cui si sceglie: dentro alla scheda di un blocco, l'elenco
   che in ufficio riempie una scheda intera.

   **E' lo stesso elenco di la'**, e non gli somiglia: la barra della ricerca in
   cima, le sezioni che si aprono, e in fondo le righe col segno nella corsia e
   il nome di fianco. Vale per i Lavori — i posti si aprono, dentro ci sono le
   loro commesse — e vale per il catalogo dei tendaggi e per il listino, che
   qui erano diventati una griglia di caselle con le sezioni appiattite in
   un'intestazione sola. Chi impara a trovare un tassello alla scrivania sa gia'
   trovarlo su una scala.

   Il filo intorno fa quello che fa la `.dt-card` in ufficio: tiene insieme la
   barra e le righe, se no la barra galleggia sopra a un elenco che comincia dal
   niente. Non ha un tetto e non scorre per conto suo: le sezioni nascono
   chiuse, quindi l'elenco a riposo e' alto quanto i suoi reparti, e uno
   scorrimento dentro alla finestra che scorre gia' e' il muro dentro al muro. */
.dt-scelte {
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  overflow: hidden;
}
/* La barra della ricerca, in cima al riquadro: il filo sotto ce l'ha gia', e
   qui dentro non c'e' la `.dt-card` che le da' il respiro dei lati. */
.dt-scelte > .dt-barra-elenco { padding: var(--dt-sp-3) var(--dt-sp-4); }
/* Il tetto ce l'ha il solo albero dei Lavori: li' le righe sono i posti in
   archivio, e non si chiudono da sole come le sezioni di un catalogo — con
   venti riferimenti aperti la fila dei tasti finiva fuori dallo schermo. */
.dt-scelte--tetto {
  max-height: clamp(180px, 38vh, 320px);
  overflow: auto;
}
/* Il −/+ su una riga gia' presa, dove il listino tiene il prezzo. Il campo di
   un `<input>` misura una ventina di caratteri se nessuno gli dice il
   contrario, e il − finirebbe a mezza riga di distanza dal +. Qui la quantita'
   e' al massimo quattro cifre: si tiene stretta, e i due tasti restano dove il
   pollice li ha trovati sulla riga di sopra. */
.dt-voce__qta {
  /* Misurata con `width` e non con la base del flex: dentro alla base una
     percentuale il motore la risolve quando gli pare, e il −/+ si prendeva
     la riga intera. */
  flex: 0 1 auto;
  width: clamp(132px, 34%, 160px);
  min-width: 0;
}
/* Le righe qui dentro sono le righe di sempre, col passo di sempre: vedi
   `--dt-riga-h`, che il pollice ce l'ha gia' dentro. Qui c'era una misura
   apposta, e diceva quaranta pixel dove l'ufficio ne diceva gia' quaranta —
   una riga in piu' da tenere allineata a mano con quella vera. */

/* La via d'uscita in fondo a una griglia: quello che si cercava non c'e'.

   Sta sotto e non sopra, ed e' quello che si fa **dopo** aver guardato: in cima
   sarebbe una scorciatoia per riscrivere a mano roba che in catalogo c'e' gia'.
   Il contorno tratteggiato dice che quella riga il catalogo non ce l'ha ancora,
   ed e' lo stesso tratteggio con cui la giornata disegna le ore che non si
   pagano: qualcosa che c'e' ma non e' pieno. Due righe invece di una perche' la
   seconda dice cosa comporta — fra "lo apro in catalogo" e "lo segno solo per
   oggi" la differenza la deve capire chi e' su una scala. */
.dt-via-uscita {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-sp-3);
  width: 100%;
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: 1px dashed var(--dt-border);
  border-radius: var(--dt-r-md);
  background: none;
  color: var(--dt-text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--dt-t-fast), background var(--dt-t-fast),
    border-color var(--dt-t-fast);
}
.dt-via-uscita:hover:not(:disabled) {
  color: var(--dt-text);
  background: var(--dt-hover);
  border-color: var(--dt-border-strong);
}
.dt-via-uscita:disabled { opacity: 0.5; cursor: default; }
.dt-via-uscita > svg { flex: none; margin-top: 2px; }
.dt-via-uscita__testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-via-uscita__nome { font-size: var(--dt-fs-sm); font-weight: var(--dt-fw-medium); }
.dt-via-uscita__sotto { color: var(--dt-text-3); font-size: var(--dt-fs-xs); }
/* La sorella corta, in fondo a una fila di caselle: una riga sola, alta come
   una casella, in colonna con le righe che ha sopra. Stesso tratteggio, stessa
   voce: quello che ancora non c'e'. */
.dt-via-uscita--riga {
  align-items: center;
  min-height: var(--dt-h-md);
  padding: 0 var(--dt-sp-3);
}
.dt-via-uscita--riga > svg { margin-top: 0; }

/* Quello che si e' gia' preso, sopra all'elenco da cui lo si prende.

   E' lo stesso riquadro di `.dt-scelte` con le stesse righe dentro: quello che
   si e' preso e quello da cui lo si prende non sono due disegni diversi, e al
   posto del `+` c'e' il −/+. Erano riquadri sciolti uno per riga, e in colonna
   facevano una pila di scatole dove sotto c'era un elenco con un filo solo.
   Non cambia faccia fra una faccia e l'altra: sulla consegna dice cosa
   caricare, sul resoconto cosa si e' bruciato, ed e' la stessa riga guardata in
   due momenti. */
.dt-presi {
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  overflow: hidden;
}
/* Il filo fra una riga e l'altra, dentro al riquadro: le `.dt-voce` ce l'hanno
   fra loro, e una riga scritta a mano che sta in mezzo lo deve avere uguale. */
.dt-presi > .dt-voce + .dt-riga-fuori,
.dt-presi > .dt-riga-fuori + .dt-voce,
.dt-presi > .dt-riga-fuori + .dt-riga-fuori {
  border-top: 1px solid var(--dt-border-soft);
}
/* Le due ore, grandi. Non e' vezzo: e' la sola schermata in cui si batte un
   numero che si legge da un orologio, e i campi alti quanto una riga di
   tabella qui si mancano col pollice. */
.dt-quando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-4);
}
.dt-quando__ora {
  flex: 1 1 120px;
  min-width: 0;
  height: var(--dt-h-tocco);
  padding: 0 var(--dt-sp-4);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-xl);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dt-quando__ora:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 1px; }
.dt-quando__a { flex: none; color: var(--dt-text-3); user-select: none; }
/* Le durate che si segnano piu' spesso, da premere invece che da comporre
   spostando due orari. La fine si sposta, l'inizio no: e' l'inizio quello che
   si sa con certezza, perche' e' l'ora in cui si e' arrivati. */
.dt-durate { display: flex; flex-wrap: wrap; gap: var(--dt-sp-2); }
.dt-durata {
  min-height: var(--dt-h-tocco);
  padding: 0 var(--dt-sp-5);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface);
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
    color var(--dt-t-fast);
}
.dt-durata:hover { background: var(--dt-surface-2); color: var(--dt-text); }
.dt-durata--questa {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color: var(--dt-text-inv);
}
/* Il numero grosso di una schermata che chiede un numero solo — i chilometri.
   Batterlo e non contarlo col −/+: sono quarantasette, non tre. */
.dt-cifrone {
  display: flex;
  align-items: baseline;
  gap: var(--dt-sp-4);
}
.dt-cifrone__campo {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 56px;
  padding: 0 var(--dt-sp-5);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-3xl);
  font-weight: var(--dt-fw-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
.dt-cifrone__campo::-webkit-outer-spin-button,
.dt-cifrone__campo::-webkit-inner-spin-button { appearance: none; margin: 0; }
.dt-cifrone__campo:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 1px; }
.dt-cifrone__unita { flex: none; color: var(--dt-text-3); font-size: var(--dt-fs-lg); }

/* Le foto: quadrate e fitte, perche' quello che si guarda qui e' "quante ne ho
   fatte" e non il dettaglio. Il dettaglio si guarda dall'ufficio, su uno
   schermo vero.
   La misura minima e' in pixel e non in `vw`: la griglia sta dentro a una
   maschera larga la sua, e legarla alla finestra vorrebbe dire due foto grandi
   il doppio quando la maschera e' stretta e la finestra no. Cosi' invece le
   colonne le conta lo spazio che c'e' davvero. */
.dt-foto-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--dt-sp-3);
}
.dt-foto {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-3);
}
.dt-foto__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* La miniatura si apre a grandezza piena, in un'altra pagina, come un
   documento: una bolla firmata fotografata si deve poter leggere. */
.dt-foto__apri {
  display: block;
  width: 100%;
  height: 100%;
}
.dt-foto__apri:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: -2px;
}
/* Il tastino per togliere sta sull'angolo della foto e non sotto: e' quella
   foto che si toglie, e a fianco ce ne sono altre cinque uguali. Fondo scuro
   fisso perche' sopra ci puo' essere qualsiasi cosa, anche un muro bianco. */
.dt-foto__togli {
  position: absolute;
  top: var(--dt-sp-2);
  right: var(--dt-sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--dt-r-full);
  background: rgba(18, 18, 17, 0.62);
  color: #fff;
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
.dt-foto__togli:hover { background: rgba(18, 18, 17, 0.85); }
.dt-foto__togli:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
}
/* Il bersaglio e' piu' grande del tondino: un quadrato alto come un tocco,
   dall'angolo della foto verso il suo centro. Si vede lo stesso tondino di
   prima; e' il dito — in piedi su una scala, coi guanti — che non deve piu'
   centrare ventidue pixel. Verso l'interno e non tutto intorno, perche' la
   foto taglia quello che le esce dai bordi. */
.dt-foto__togli::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--dt-sp-2));
  right: calc(-1 * var(--dt-sp-2));
  width: var(--dt-h-tocco);
  height: var(--dt-h-tocco);
}
/* Il primo colpo arma, il secondo toglie: armato il tondino si fa rosso e
   mostra il cestino, e se il secondo colpo non arriva torna com'era. */
.dt-foto__togli--armato,
.dt-foto__togli--armato:hover {
  background: var(--dt-danger);
  color: var(--dt-text-inv);
}

/* Scattare e' un'azione da pollice in cima a una scala: la riga intera e'
   bersaglio, non un'icona da 16px. E' una `<label>` perche' il campo file vero
   deve restare invisibile ma raggiungibile — nascosto con `display: none` non
   lo troverebbe piu' nemmeno chi naviga da tastiera. */
.dt-foto-aggiungi {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-3);
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-3) var(--dt-sp-5);
  border: 1px dashed var(--dt-border-strong);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-md);
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-foto-aggiungi:hover {
  border-color: var(--dt-accent-border);
  background: var(--dt-surface-3);
  color: var(--dt-text);
}
.dt-foto-aggiungi:has(input:focus-visible) {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
}
/* Mentre carica non si preme piu': il campo e' spento, e la riga lo dice. */
.dt-foto-aggiungi:has(input:disabled) {
  cursor: default;
  opacity: 0.6;
}
.dt-foto-aggiungi input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Il tastone a due meta', «Scatta» e «Allega»: un riquadro solo col filo in
   mezzo, come ogni barra di comandi, e non due tasti staccati. Il riquadro
   perde il suo imbottito e lo passa alle meta', cosi' ognuna e' un bersaglio
   largo quanto la sua parte e alto quanto il tastone di sempre. Il fuoco e lo
   spento restano sul riquadro intero: quello che si sta caricando non si sa da
   quale meta' e' arrivato, e mentre carica non si preme nessuna delle due. */
.dt-foto-aggiungi--doppio {
  padding: 0;
  gap: 0;
  align-items: stretch;
  cursor: default;
}
.dt-foto-aggiungi__voce {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-3);
  /* Niente altezza minima propria: la da' il riquadro, che e' alto come il
     tastone singolo, e le meta' lo riempiono. Con una loro il filo del
     riquadro si sommerebbe e il doppio verrebbe due pixel piu' alto. */
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border-radius: var(--dt-r-md);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-foto-aggiungi__voce + .dt-foto-aggiungi__voce {
  border-left: 1px dashed var(--dt-border-strong);
  border-radius: 0 var(--dt-r-md) var(--dt-r-md) 0;
}
.dt-foto-aggiungi__voce:first-child { border-radius: var(--dt-r-md) 0 0 var(--dt-r-md); }
/* Il riquadro non si accende piu' tutto insieme: e' la meta' sotto al mouse. */
.dt-foto-aggiungi--doppio:hover { background: var(--dt-surface-2); }
.dt-foto-aggiungi__voce:hover {
  background: var(--dt-surface-3);
  color: var(--dt-text);
}
.dt-foto-aggiungi--doppio:hover .dt-foto-aggiungi__voce + .dt-foto-aggiungi__voce {
  border-left-color: var(--dt-accent-border);
}
.dt-foto-aggiungi:has(input:disabled) .dt-foto-aggiungi__voce { cursor: default; }

/* Un documento allegato: una riga, non un riquadro. Di un PDF non c'e' niente
   da mostrare, e un rettangolo grigio con dentro un'icona direbbe meno del suo
   nome. La riga intera apre — il bersaglio e' quanto la riga, come tutto il
   resto che si tocca col guanto — e il tastino che stacca sta in fondo,
   staccato dal nome cosi' che il dito non se lo trovi sotto per sbaglio. */
.dt-allegati {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
}
.dt-allegato {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
}
.dt-allegato__apri {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  flex: 1 1 auto;
  min-width: 0;
  color: var(--dt-text);
  text-decoration: none;
  transition: color var(--dt-t-fast);
}
.dt-allegato__apri:hover { color: var(--dt-text-2); }
/* Il segno del documento tiene la sua misura: un nome lungo prende lo spazio
   che resta, e non quello del segno, che si schiacciava fino a sparire. */
.dt-allegato__apri > svg { flex: none; }
.dt-allegato__apri:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
  border-radius: var(--dt-r-sm);
}
/* Il nome per intero su una riga sola: un documento si chiama
   «bolla-20260904.pdf», e mandarlo a capo sarebbe una riga alta il doppio per
   dire la stessa cosa. Quello che non ci sta scorre di lato, e il nome
   intero resta anche nel titolo. */
.dt-allegato__nome {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--dt-fs-md);
}
.dt-allegato__togli {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--dt-r-full);
  background: transparent;
  color: var(--dt-text-3);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-allegato__togli:hover { background: var(--dt-surface-3); color: var(--dt-text); }
.dt-allegato__togli:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
}
/* Come il tondino delle foto: si vede la stessa x, ma il dito la prende in un
   quadrato alto come un tocco, centrato su di lei. Sta dentro all'altezza
   della riga, che e' gia' alta un tocco. */
.dt-allegato__togli::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--dt-h-tocco);
  height: var(--dt-h-tocco);
  transform: translate(-50%, -50%);
}
/* Armato dal primo colpo, come il tondino delle foto: rosso, col cestino. */
.dt-allegato__togli--armato,
.dt-allegato__togli--armato:hover {
  background: var(--dt-danger);
  color: var(--dt-text-inv);
}

/* --------------------------------------------------------------------------
   24. Vetrina: la scheda che si guarda e basta
   -------------------------------------------------------------------------- */

/* Una maschera da compilare e una da leggere non si disegnano uguali. Nella
   prima ogni dato sta dentro a una casella, e la casella e' il segno che li'
   si scrive; qui le caselle non ci sono, e a tenere insieme i dati restano
   soltanto la scala del testo e tre filetti. Il risultato assomiglia al foglio
   di lavoro da cui questi dati arrivano, che e' esattamente da dove chi guarda
   li ha copiati. */
.dt-vetrina {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-7);
}

.dt-vetrina__testa { display: flex; flex-direction: column; gap: var(--dt-sp-2); }
/* Nome e bollini sulla stessa linea di base: il bollino e' un pezzo del nome,
   non una decorazione che gli galleggia accanto. Sotto la finestra stretta va
   a capo per conto suo invece di stringere il nome. */
.dt-vetrina__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dt-sp-3) var(--dt-sp-4);
}
.dt-vetrina__nome {
  font-size: var(--dt-fs-2xl);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: -0.02em;
  line-height: var(--dt-lh-tight);
  overflow-wrap: anywhere;
}
.dt-vetrina__bollini { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dt-sp-2); }
.dt-vetrina__sotto { font-size: var(--dt-fs-sm); color: var(--dt-text-2); }

/* L'occhiello del gruppo tira il suo filo fino al bordo: e' quello a dire dove
   comincia un discorso e dove finisce il precedente. I fatti dentro non hanno
   filetti loro — quattro righe di filo per sei dati sarebbero una grata. */
.dt-fatti { display: flex; flex-direction: column; gap: var(--dt-sp-4); }
.dt-fatti__occhiello {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-4);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-fatti__occhiello::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--dt-border-soft);
}
/* Le colonne le decide la griglia e non il contenuto, come nella maschera dei
   campi: la misura si interpola con la finestra, cosi' passando da largo a
   stretto i fatti si ricompongono senza scatti. */
.dt-fatti__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(132px, 15vw, 176px), 1fr));
  gap: var(--dt-sp-5) var(--dt-sp-6);
}
.dt-fatto { display: flex; flex-direction: column; gap: var(--dt-sp-1); min-width: 0; }
.dt-fatto--tutta { grid-column: 1 / -1; }
.dt-fatto__etichetta { font-size: var(--dt-fs-xs); color: var(--dt-text-3); }
.dt-fatto__valore {
  font-size: var(--dt-fs-md);
  color: var(--dt-text);
  line-height: var(--dt-lh-normal);
  /* Le note sono scritte a mano andando a capo: sulla scheda vanno lette come
     sono state battute. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dt-fatto__valore--mono { font-family: var(--dt-font-mono); font-variant-numeric: tabular-nums; }
/* Una faccia come valore — il negozio nella sua scheda — resta dentro alla
   sua colonna: il nome non va a capo, e senza tetto usciva dalla cella e si
   sovrapponeva al fatto accanto. Col tetto e' il nome a cedere, e scorre di
   lato come ogni nome che non ci sta. */
.dt-fatto__valore > .dt-faccia { max-width: 100%; }
/* Quello che nessuno ha scritto si legge come tale, e non come una cella che
   il programma non e' riuscito a riempire. */
.dt-fatto__vuoto { font-size: var(--dt-fs-md); color: var(--dt-text-3); }

/* I numeri di un riferimento: uno per riga, e accanto chi risponde.

   E' un elenco sotto a un occhiello e non una griglia di fatti, per la stessa
   ragione per cui non lo sono le righe d'ordine. Con la nota per etichetta e il
   numero sotto, una nota lunga — «l'amministratore del condominio» — va a capo
   e fa scendere il suo numero di una riga mentre i vicini restano su: tre
   numeri da leggere in colonna smettono di essere in colonna proprio dove
   serve. Qui la colonna del numero e' larga quanto il piu' lungo dei numeri e
   basta, quindi le cifre si incolonnano da sole e a crescere e' la nota.

   Stretti passano in due righe: il numero sopra, la nota rientrata sotto. Due
   colonne a questa larghezza vorrebbero dire una nota larga cinque caratteri. */
.dt-telefoni {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--dt-sp-1) var(--dt-sp-5);
  align-items: baseline;
}
.dt-telefoni__numero {
  font-size: var(--dt-fs-md);
  font-family: var(--dt-font-mono);
  font-variant-numeric: tabular-nums;
}
.dt-telefoni__nota { font-size: var(--dt-fs-sm); color: var(--dt-text-2); }
@media (max-width: 480px) {
  .dt-telefoni { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dt-telefoni__nota { padding-bottom: var(--dt-sp-3); }
}

/* La riga dei numeri: l'unico punto della scheda che alza la voce, perche' e'
   quello che si viene a cercare. Il filo qui e' quello pieno, non il tenue dei
   gruppi: sotto ci sta un totale, e un totale si stacca da quello che lo fa. */
.dt-cifre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-sp-5) var(--dt-sp-9);
  padding-top: var(--dt-sp-5);
  border-top: 1px solid var(--dt-border);
}
.dt-cifra { display: flex; flex-direction: column; gap: var(--dt-sp-1); }
.dt-cifra__valore {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-2xl);
  font-weight: var(--dt-fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--dt-lh-tight);
}
.dt-cifra__etichetta {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-cifra__nota { font-size: var(--dt-fs-sm); color: var(--dt-text-2); }

/* I numeri da chiamare: un riquadro di righe, e ogni riga e' la chiamata.
   Il numero e' in tabellare e piu' grande di un fatto — e' quello che si viene
   a cercare, e si legge da lontano con una mano sulla scala — la nota di chi
   risponde sta a destra, smorta. Le righe sono alte quanto un tasto: sono
   tasti. */
.dt-chiamate {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  overflow: hidden;
}
.dt-chiamata {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-height: var(--dt-h-lg);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  color: var(--dt-text);
  text-decoration: none;
  transition: background var(--dt-t-fast);
}
.dt-chiamata + .dt-chiamata { border-top: 1px solid var(--dt-border-soft); }
.dt-chiamata:hover { background: var(--dt-surface-2); }
.dt-chiamata:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
.dt-chiamata svg { flex: none; color: var(--dt-accent); }
.dt-chiamata__numero {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dt-chiamata__nota {
  margin-left: auto;
  min-width: 0;
  white-space: nowrap;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
}
/* Le righe che portano dentro: la stessa forma delle chiamate, perche' e' la
   stessa promessa — premi e succede qualcosa. Il riquadro e' uno solo e il filo
   sta fra le righe; la freccia in fondo e' l'unica cosa che la riga dice di se'
   e non del lavoro che racconta. */
.dt-passaggi {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  overflow: hidden;
}
.dt-passaggio {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  width: 100%;
  min-height: var(--dt-h-lg);
  padding: var(--dt-sp-2) var(--dt-sp-4);
  border: 0;
  background: none;
  color: var(--dt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast);
}
/* Le misure si leggono intere: a cedere e' solo il nome. */
.dt-passaggio > * { flex: none; }
.dt-passaggio + .dt-passaggio { border-top: 1px solid var(--dt-border-soft); }
.dt-passaggio:hover { background: var(--dt-surface-2); }
.dt-passaggio:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
.dt-passaggio__testo {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}
/* La coda tiene il fondo; senza di lei ci va la freccia da sola. Due margini
   automatici si spartirebbero lo spazio, e la coda finirebbe in mezzo. */
.dt-passaggio__coda { margin-left: auto; }
.dt-passaggio__freccia { display: flex; margin-left: auto; color: var(--dt-text-3); }
.dt-passaggio__coda + .dt-passaggio__freccia { margin-left: 0; }

/* --------------------------------------------------------------------------
   25. Calendari: le giornate di tutti affiancate
   -------------------------------------------------------------------------- */

/* E' la stessa colonna della giornata, girata sull'altro asse: li' erano i
   giorni di una persona, qui sono le persone di un giorno. Il righello degli
   orari resta uno solo a sinistra, e questo e' tutto il punto — le 10:00 di
   Anna cadono alla stessa altezza delle 10:00 di Mario, e "chi e' dove a meta'
   mattina" si legge in orizzontale senza contare niente.
   Niente colori per persona: il colore in colonna vuol gia' dire un'altra
   cosa — che lavoro e' — e una seconda scala di tinte sulle stesse colonne
   renderebbe illeggibili tutte e due. Le persone si distinguono per nome, che
   e' come si distinguono anche fuori dal programma.

   **La pagina e' fatta di due file sovrapposte**: sopra i cartellini con i
   nomi, sotto le tele con le ore. Non e' un dettaglio di impaginazione — e' il
   motivo per cui i nomi non finiscono dentro alla griglia: li' dentro passano
   la riga rossa di adesso, i blocchi che si trascinano e le righe delle ore, e
   un nome in mezzo a quella roba viene scavalcato. Le due file stanno pero'
   dentro allo **stesso** riquadro che scorre, e con le stesse misure di
   colonna: cosi' scorrono di lato insieme, senza niente da tenere allineato a
   mano. */
.dt-calendari__scorri {
  flex: 1 1 auto;
  min-height: 0;
  /* Scorre in tutte e due i versi: in giu' le ore, di lato le persone quando
     sono piu' di quante ne tiene la finestra. */
  overflow: auto;
  overscroll-behavior: contain;
  /* In fondo l'aria che serve alla barra della data per non coprire l'ultimo
     blocco: la sua altezza piu' i due orli. E' la stessa misura della
     giornata, e con lo stesso nome: la fila di bolli di sotto la legge per
     scendere fino al bordo vero del riquadro (vedi `.dt-giorno__sotto`).
     Senza, qui si fermava cento pixel piu' su, in mezzo ai blocchi, e ne
     copriva segno e titolo contandoli per usciti mentre si vedevano ancora. */
  --dt-sotto-orlo: calc(var(--dt-piu) + var(--dt-piu-orlo) * 2);
  padding-bottom: var(--dt-sotto-orlo);
}
/* Le due file, incolonnate. Le misure stanno qui e non su ognuna: sono le
   stesse per i cartellini e per le tele, ed e' proprio questo che le tiene
   allineate. */
.dt-calendari__quadro {
  display: flex;
  flex-direction: column;
  /* Larga almeno quanto la pagina, cosi' in due o in tre le colonne si
     allargano invece di ammucchiarsi a sinistra; e almeno quanto le colonne,
     cosi' in dieci si scorre di lato invece di stringerle fino a non leggerle
     piu'. */
  min-width: min-content;
  /* Sotto questa larghezza un blocco non dice piu' ne' che lavoro era ne'
     dove: da li' in poi si scorre. Il massimo tiene una colonna larga un palmo
     anche quando in squadra c'e' una persona sola. */
  --dt-persona-min: clamp(124px, 11vw, 168px);
  --dt-persona-max: 300px;
  --dt-persona-gap: var(--dt-sp-4);
}
/* La fila dei cartellini: sta in cima e ci resta anche scorrendo la giornata.
   Fondo pieno, perche' le ore le passano sotto. */
.dt-calendari__testate {
  display: flex;
  align-items: stretch;
  gap: var(--dt-persona-gap);
  position: sticky;
  top: 0;
  z-index: var(--dt-z-sticky);
  background: var(--dt-bg);
  /* L'aria fra i nomi e la prima ora. Sta qui e non sul riquadro che scorre
     perche' e' aria che deve restare anche quando la fila e' appiccicata in
     cima: l'etichetta della prima ora e' centrata sulla sua riga, e meta' di
     essa sta sopra al principio della tela. */
  padding-bottom: var(--dt-sp-5);
  /* E il fondo non ci si stende: e' l'aria della prima etichetta. Da quando
     la fila sta sopra al righello (le ore passano sotto all'angolo dei nomi)
     il fondo dipinto fin qui ne copriva la meta' di sopra, e «06:00» si
     leggeva a meta'. Scorrendo, in quest'aria si vede passare la giornata
     prima che sparisca sotto ai nomi. */
  background-clip: content-box;
}
.dt-calendari__fila {
  display: flex;
  align-items: flex-start;
  gap: var(--dt-persona-gap);
}
/* Il posto del righello, in cima: vuoto, ma largo uguale, se no i cartellini
   partono mezzo pollice piu' a sinistra delle tele che intestano. Sta fermo
   anche di lato, come il righello sotto. */
.dt-calendari__vuoto {
  flex: 0 0 var(--dt-asse-w);
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--dt-bg);
}
/* Il righello resta fermo mentre le persone scorrono di lato: e' la scala su
   cui si legge tutto il resto, e una scala che scorre via non misura piu'
   niente. */
.dt-calendari__fila .dt-giorno__asse {
  position: sticky;
  left: 0;
  /* Un gradino sotto alla fila dei cartellini, che e' appiccicata anche lei
     ma in cima: scorrendo in giu' le ore devono passare sotto all'angolo dei
     nomi. A pari altezza vinceva il righello, che viene dopo nella pagina, e
     le ore scivolavano sopra al cartellino. Sopra alle tele resta lo stesso:
     i blocchi stanno piu' in basso di cosi' di parecchi gradini. */
  z-index: calc(var(--dt-z-sticky) - 1);
  background: var(--dt-bg);
}
/* Il posto vuoto che il righello si tiene in cima qui non serve: le
   intestazioni stanno nella fila di sopra, e questo lascerebbe le ore piu'
   basse dei blocchi che misurano. */
.dt-calendari__fila .dt-giorno__intestazione { display: none; }

/* Qui il dito deve poter andare anche di lato, e le tele da sole non lo
   sanno: nella propria giornata non c'e' niente da scorrere in orizzontale, e
   `pan-y` — sulla tela e sui blocchi, che su un telefono la coprono quasi
   tutta — era la risposta giusta a una pagina che scorre in un verso solo. In
   una fila di persone piu' larga della finestra la stessa risposta inchioda
   tutto quello che sta sotto ai nomi: si scorreva di lato solo passando il
   dito sui cartellini, cioe' su una striscia alta un pollice, mentre la parte
   grande della pagina non rispondeva.
   `pan-x pan-y` lascia al browser tutte e due i versi e non toglie niente a
   noi: i due gesti che sono nostri non passano da questa proprieta' — il
   doppio colpo sul vuoto arma la tela **prima** che il dito scenda
   (`--armata`, qui sotto), e la pressione tenuta su un blocco ferma lo
   scorrimento **durante**, col `preventDefault` sul primo `touchmove`. */
.dt-calendari__fila .dt-giorno__tela--viva,
.dt-calendari__fila .dt-blocco--mobile,
.dt-calendari__fila .dt-blocco__maniglia { touch-action: pan-x pan-y; }
/* Armata, il gesto sul vuoto e' nostro anche qui: a dirlo sono il fondo e le
   altre cose del vuoto, con la regola generale (vedi `.dt-giorno__fondo`). La
   tela resta a `pan-x pan-y`, cosi' un blocco porta la fila anche mentre la
   tela aspetta il secondo colpo. */

/* Le due colonne di una persona — il cartellino e la tela — larghe uguali per
   forza: la stessa regola, scritta una volta per tutte e due. */
.dt-calendari__testa,
.dt-calendari__persona {
  flex: 1 1 var(--dt-persona-min);
  min-width: var(--dt-persona-min);
  max-width: var(--dt-persona-max);
}
.dt-calendari__persona {
  /* Un blocco stretto taglia il testo invece di sbordare sulla persona di
     fianco. */
  overflow-x: clip;
}

/* Il cartellino: chi e', e come e' andata la sua giornata. Sta fermo com'e' —
   non si accende, non si inverte, non cambia cornice a seconda di quello che
   c'e' sotto: a dire com'e' andata sono il numero e i blocchi, non il riquadro
   che li intesta. */
.dt-calendari__testa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
  color: var(--dt-text);
}
.dt-calendari__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-2);
  min-width: 0;
}
/* Chi e': la riga piu' grossa del cartellino, perche' e' quello che si cerca
   scorrendo la fila. Per intero finche' ci sta, poi scorre di lato — due
   colleghi che si chiamano uguale si distinguono dal cognome, e mandarlo a
   capo alzerebbe il cartellino di una persona sola scollando tutta la fila. */
.dt-calendari__nome {
  min-width: 0;
  white-space: nowrap;
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
/* Sotto al nome, una frase e non un numero nudo: "7h 45 segnate". Il numero da
   solo era la cosa piu' grossa del cartellino e non diceva di cosa fosse il
   conto. */
.dt-calendari__conto {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  min-width: 0;
}
/* Le ore in cifre tabellari: i cartellini stanno in fila, e due conti si
   confrontano a occhio solo se cadono incolonnati. */
.dt-calendari__ore {
  font-family: var(--dt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
/* La parola che dice di cosa e' il conto: sta al numero come un'unita' di
   misura, quindi piu' piccola e piu' spenta di lui. */
.dt-calendari__detto {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
  white-space: nowrap;
}
/* Chi non ha segnato niente lo dice a parole. Un trattino si legge tanto come
   uno zero quanto come un dato che non e' arrivato, e a fine mese sono due
   cose molto diverse. */
.dt-calendari__niente {
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
  white-space: nowrap;
}
/* Il segno che qualcosa non torna in quella giornata — blocchi accavallati,
   domande rimaste vuote. E' l'unica cosa colorata del cartellino, quindi si
   vede da sola in fondo alla riga. */
.dt-calendari__guaio {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  flex: 0 0 auto;
  font-size: var(--dt-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--dt-warn);
}
/* La fila dei nomi da accendere, sopra a tutto. Va a capo con i suoi gettoni:
   l'etichetta resta attaccata alla fila anche quando questa occupa tre righe. */
.dt-calendari__filtro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dt-sp-3) var(--dt-sp-5);
}

/* Su un telefono questa e' una schermata da ufficio, ma ci si finisce lo
   stesso — dal furgone si controlla se il collega ha segnato. Le colonne si
   stringono al minimo che resta leggibile e si scorre: mostrarne una sola per
   volta vorrebbe dire perdere il confronto, che e' l'unico motivo per cui
   questa schermata esiste. */
@media screen and (max-width: 560px) {
  .dt-calendari__quadro { --dt-persona-min: 124px; }
}

/* --------------------------------------------------------------------------
   26. Versione: il segno in barra e il pannello delle novita'
   --------------------------------------------------------------------------

   Il segno sta nelle impostazioni, sulla riga della versione, di fianco al
   tema: la testata dice che programma e' questo e non cambia mai, mentre la
   versione e' una cosa che si va a cercare. Non e' un comando e non ne ha
   l'aspetto — nessun fondo pieno, nessuna icona — ma si preme, e quindi si
   accende sotto al dito come una voce di menu.

   Il numero e' in monospaziato come tutti i numeri del programma: gli orari
   nella colonna del giorno, gli importi in tabella. Un numero di versione
   scritto col carattere del testo si legge come una parola, e le sue tre
   cifre non si incolonnano con niente.
   -------------------------------------------------------------------------- */

.dt-versione {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  flex: none;
  /* In coda all'etichetta della riga, contro il bordo destro del pannello:
     e' il controllo di quella riga, come il tema e' quello della sua. */
  margin-left: auto;
  height: 20px;
  padding: 0 var(--dt-sp-2);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface-2);
  color: var(--dt-text-3);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dt-t-fast), border-color var(--dt-t-fast),
    background var(--dt-t-fast);
}
.dt-versione:hover {
  background: var(--dt-surface-3);
  border-color: var(--dt-border-strong);
  color: var(--dt-text);
}
.dt-versione:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 1px; }
/* Il segno e' alto venti pixel, il dito no: il bersaglio si allarga di nascosto
   a tutta l'altezza della riga del pannello (e un po' ai lati), senza che il
   segno cambi di un pixel. */
.dt-versione::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--dt-sp-5)) calc(-1 * var(--dt-sp-3));
}
/* Il server risponde un numero diverso: la pagina aperta e' vecchia. Un punto
   e non un colore su tutto il segno — il numero deve restare leggibile, ed e'
   il pannello che ha lo spazio per dire cosa sia successo. */
.dt-versione__punto {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: var(--dt-r-full);
  background: var(--dt-warn);
}

/* Le due versioni in testa al pannello: questa pagina, e quello che risponde
   il server. Stanno appaiate perche' la domanda e' il loro confronto. */
.dt-novita__stato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-sp-6);
  padding-bottom: var(--dt-sp-5);
  border-bottom: 1px solid var(--dt-border-soft);
}
.dt-novita__quale { display: flex; flex-direction: column; gap: var(--dt-sp-1); }
.dt-novita__etichetta {
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-novita__num {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text);
}
.dt-novita__scarto { padding-top: var(--dt-sp-5); }

/* L'elenco dei rilasci e' una colonna del tempo, come la giornata: un filo
   verticale, e su quel filo una tacca per ogni versione. La piu' recente ha la
   tacca piena, le altre vuote — e' la stessa grammatica dei blocchi, dove il
   pieno e' quello che c'e' e il contorno quello che e' solo segnato.
   Il filo dell'ultima si spegne invece di fermarsi netto: sotto non c'e' un
   rilascio piu' vecchio, c'e' il fondo di quello che sappiamo. */
.dt-novita {
  list-style: none;
  margin: var(--dt-sp-7) 0 0;
  padding: 0;
}
.dt-novita__rilascio {
  position: relative;
  padding-left: calc(var(--dt-corsia) + var(--dt-sp-2));
  padding-bottom: var(--dt-sp-8);
}
.dt-novita__rilascio:last-child { padding-bottom: 0; }
.dt-novita__rilascio::before {
  content: "";
  position: absolute;
  left: calc(var(--dt-corsia) / 2);
  top: var(--dt-sp-2);
  bottom: 0;
  width: 1px;
  background: var(--dt-border);
}
.dt-novita__rilascio:last-child::before {
  height: var(--dt-sp-9);
  bottom: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}
.dt-novita__rilascio::after {
  content: "";
  position: absolute;
  left: calc(var(--dt-corsia) / 2 - 3px);
  top: var(--dt-sp-2);
  width: 7px;
  height: 7px;
  border-radius: var(--dt-r-full);
  background: var(--dt-bg);
  box-shadow: inset 0 0 0 1.5px var(--dt-border-strong);
}
.dt-novita__rilascio:first-child::after {
  background: var(--dt-accent);
  box-shadow: inset 0 0 0 1.5px var(--dt-accent);
}

.dt-novita__capo {
  display: flex;
  align-items: baseline;
  gap: var(--dt-sp-4);
  margin-top: -2px;
}
.dt-novita__numero {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-lg);
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-text-3);
  letter-spacing: -0.01em;
}
/* La versione di adesso e' l'unica scritta in inchiostro pieno: le altre sono
   storia, e la storia si legge dopo. */
.dt-novita__rilascio:first-child .dt-novita__numero { color: var(--dt-text); }
.dt-novita__data {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
}
/* Una riga per modifica, e la riga e' il titolo: niente pallini davanti — la
   colonna delle tacche sta gia' a sinistra e ne fa le veci — e niente
   descrizione sotto. Chi apre questo pannello sta scorrendo un elenco, non
   leggendo un documento. */
.dt-novita__voci {
  list-style: none;
  margin: var(--dt-sp-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
}
.dt-novita__voci > li {
  max-width: 62ch;
  font-size: var(--dt-fs-md);
  line-height: var(--dt-lh-normal);
  color: var(--dt-text-2);
}
/* Le modifiche dell'ultima versione sono quelle che si e' venuti a leggere. */
.dt-novita__rilascio:first-child .dt-novita__voci > li { color: var(--dt-text); }
.dt-novita__cod {
  font-family: var(--dt-font-mono);
  font-size: 0.92em;
  padding: 1px var(--dt-sp-2);
  border-radius: var(--dt-r-xs);
  background: var(--dt-surface-3);
  color: var(--dt-text);
  /* Un percorso lungo va a capo dove capita invece di sfondare il pannello. */
  overflow-wrap: anywhere;
}

/* Lo spostamento: da che numero a che numero. E' la prima cosa che si legge
   entrando la mattina dopo l'aggiornamento, quindi e' scritta grossa e in
   monospaziato — due numeri di versione si confrontano cifra per cifra, e in
   proporzionale le cifre non stanno incolonnate.
   Quello di prima e' storia gia' un secondo dopo averlo letto: sta in grigio e
   piu' piccolo, e l'inchiostro pieno ce l'ha solo dove si e' arrivati. */
.dt-salto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--dt-sp-3);
  font-family: var(--dt-font-mono);
  padding-bottom: var(--dt-sp-5);
  border-bottom: 1px solid var(--dt-border-soft);
}
.dt-salto__prima {
  font-size: var(--dt-fs-lg);
  color: var(--dt-text-3);
}
.dt-salto__freccia {
  font-size: var(--dt-fs-lg);
  color: var(--dt-accent);
}
.dt-salto__adesso {
  font-size: var(--dt-fs-2xl);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: -0.01em;
  color: var(--dt-text);
}

/* Una versione sola: il numero sta gia' scritto sopra a caratteri grossi, e la
   colonna delle tacche segnerebbe il tempo di un punto solo. Restano le righe
   di cosa e' cambiato, che sono quelle che si e' venuti a leggere. */
.dt-novita--secche { margin-top: var(--dt-sp-5); }
.dt-novita--secche .dt-novita__rilascio { padding: 0; }
.dt-novita--secche .dt-novita__rilascio::before,
.dt-novita--secche .dt-novita__rilascio::after,
.dt-novita--secche .dt-novita__capo { display: none; }
.dt-novita--secche .dt-novita__voci { margin-top: 0; }

/* --------------------------------------------------------------------------
   27. Scambio del catalogo: il file che esce e quello che entra
   --------------------------------------------------------------------------

   Scaricare non chiede niente: si preme e il file e' li'. Caricare invece e'
   l'unico gesto del programma che tocca tutto il catalogo in un colpo, e le due
   strade — aggiungere e rimpiazzare — non si somigliano per niente.

   Da qui la forma: **non due voci in una tendina, ma due riquadri affiancati**,
   con dentro i numeri veri di quel file su questo catalogo. Il nome della strada
   e' la riga piu' piccola dei tre; quella che fa scegliere e' l'ultima, dove
   sta scritto quante righe entrano e quante si spengono. Si sceglie leggendo
   cosa succede, non il nome di cosa succede.

   Scelto, il riquadro prende il fondo e il bordo dell'accento invece di una
   spunta sola in un angolo: e' la stessa differenza fra acceso e spento che
   fanno gia' il segmentato e i gettoni.
   -------------------------------------------------------------------------- */

/* Il tasto che apre la finestra dei file. La finestra la puo' aprire solo il
   campo, quindi il campo sta qui dentro e non si vede — ma resta raggiungibile
   col tabulatore, e l'anello del fuoco lo disegna l'etichetta per lui. */
.dt-btn-file { position: relative; }
.dt-btn-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dt-btn-file:has(input:focus-visible) {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
}

/* Il file scelto, in cima alla maschera: come si chiama e cosa c'e' dentro. */
.dt-scambio__file {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-width: 0;
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
  color: var(--dt-text-2);
}
.dt-scambio__nome {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text);
}
.dt-scambio__dentro { flex: 0 0 auto; font-size: var(--dt-fs-sm); }

/* I due riquadri, affiancati finche' c'e' posto. */
.dt-modi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--dt-sp-4);
}
.dt-modo {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-4);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
              box-shadow var(--dt-t-fast);
}
.dt-modo:hover { border-color: var(--dt-border); background: var(--dt-surface-2); }
.dt-modo--preso {
  border-color: var(--dt-accent);
  background: var(--dt-accent-soft);
  box-shadow: var(--dt-shadow-sm);
}
.dt-modo__capo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-3);
  color: var(--dt-accent);
}
.dt-modo__nome { font-weight: var(--dt-fw-semibold); line-height: var(--dt-lh-tight); }
.dt-modo__sotto { color: var(--dt-text-2); font-size: var(--dt-fs-sm); }
/* I numeri: staccati da un filo, perche' sono l'unica cosa qui dentro che
   cambia da un file all'altro. */
.dt-modo__conti {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-1);
  margin-top: var(--dt-sp-2);
  padding-top: var(--dt-sp-3);
  border-top: 1px dashed var(--dt-border-soft);
  font-size: var(--dt-fs-sm);
}
.dt-modo__conto { display: flex; gap: var(--dt-sp-2); }
/* La parola a sinistra tiene una colonna sua: tre righe che cominciano tutte
   allo stesso punto si confrontano fra i due riquadri senza rileggerle. */
.dt-modo__cosa {
  flex: 0 0 4.5rem;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   28. Telefono
   --------------------------------------------------------------------------

   Non e' l'ufficio piu' stretto: e' la stessa applicazione presa in una mano
   sola. Quello che cambia qui e' la disposizione, e per questo e' una soglia e
   non un `clamp` — le misure che possono scorrere scorrono gia' da sole piu'
   su. Sotto i 560px cambiano quattro cose, e ognuna perche' a quella larghezza
   la regola dell'ufficio produce qualcosa di rotto:

   1. la testata di un riquadro non e' piu' una riga (titolo a sinistra,
      comandi a destra): a 390px i comandi non ci stanno e spingono la
      descrizione in una colonna larga una parola;
   2. la barra bassa non scorre: cinque voci e chi sei ci stanno tutte, a slot
      uguali, perche' una barra di navigazione da cercare scorrendo non e' una
      barra di navigazione;
   3. la prima colonna di una tabella resta ferma mentre le altre scorrono: e'
      il nome, ed e' l'unica cosa che dice di che riga si sta leggendo il dato;
   4. una modale diventa il foglio intero, perche' un riquadro con l'aria
      intorno su uno schermo alto ottocento pixel e' un francobollo che scorre.

   `screen and`: sulla carta niente di tutto questo vale, e un foglio A4
   stretto non deve prendersi la barra bassa a slot ne' le colonne spente.
   -------------------------------------------------------------------------- */

@media screen and (max-width: 560px) {
  :root {
    /* Le altezze dei controlli passano alla scala del pollice. Non e' un
       ingrandimento: `--dt-h-tocco` e' la misura che l'operatore in cantiere
       aveva gia', e qui la prendono tutti perche' qui sono tutti in cantiere.
       `--dt-h-sm` resta com'e': la usano anche dei bollini (il conto su una
       linguetta), e un bollino alto quaranta pixel e' una pastiglia. */
    --dt-h-md: var(--dt-h-tocco);
    --dt-h-lg: 46px;
    /* E con loro i tastini di una riga d'elenco — che qui e' la cosa piu' alta
       della riga, e quindi quella che ne detta il passo (`--dt-riga-h`). */
    --dt-h-comando: var(--dt-h-tocco);
    --dt-topbar-h: 44px;
    /* Il corpo pagina si stringe: a 390px ogni pixel di margine e' un pixel
       tolto al nome che ci deve stare dentro. */
    --dt-pad-body: 8px;
  }

  /* I controlli minuti sono minuti perche' in ufficio stanno in fila dentro a
     una barra. Qui la fila e' andata a capo e non c'e' niente da comprimere:
     un tasto da ventidue pixel si manca col pollice. */
  .dt-btn--sm { height: var(--dt-h-tocco); padding: 0 var(--dt-sp-5); font-size: var(--dt-fs-md); }
  /* Il tastino solo icona lo fa gia' `--dt-h-comando` qui sopra: una misura
     sola, che la sa anche la riga che lo contiene. */
  .dt-input--sm { height: var(--dt-h-tocco); font-size: var(--dt-fs-md); }
  /* Sedici pixel e non quindici: sotto questa misura il telefono ingrandisce
     la pagina da solo quando il campo prende il fuoco, e non la rimpicciolisce
     piu' quando lo perde. Vale per quello in cui si scrive, non per i tasti. */
  .dt-input, .dt-select, .dt-textarea { font-size: 16px; }

  /* ---- La barra in cima: dove sei, e nient'altro --------------------------

     Il percorso diceva "Conti › Ore", e la fila di linguette subito sotto
     diceva "Ore" un'altra volta: su uno schermo alto ottocento pixel due righe
     di navigazione per la stessa informazione sono una riga di troppo. Resta
     il modulo — che le linguette non dicono — e la scheda la dice la linguetta
     accesa. Chi ha una schermata sola (l'operatore) ha un solo pezzo di
     percorso, che e' anche l'ultimo: quello resta, o non resterebbe niente. */
  .dt-toolbar { gap: var(--dt-sp-2); padding: var(--dt-sp-2) var(--dt-sp-4); }
  /* Solo il percorso della barra: quello della maschera dei conflitti dice a
     che piano si e' scesi, e senza frecce e senza l'ultimo pezzo non lo diceva
     piu'. */
  .dt-toolbar .dt-breadcrumb__sep { display: none; }
  .dt-toolbar .dt-breadcrumb__item--current:not(:first-child) { display: none; }
  .dt-toolbar .dt-breadcrumb > :first-child {
    font-size: var(--dt-fs-lg);
    font-weight: var(--dt-fw-semibold);
    color: var(--dt-text);
  }

  /* ---- Testata di un riquadro ---------------------------------------------

     Il titolo si prende la sua riga e i comandi la loro: a questa larghezza di
     fianco al titolo non ci sta nemmeno il solo campo di ricerca, e mezzo campo
     di ricerca non ci sta un indirizzo. La descrizione sta sotto a tutti e due,
     come sul largo. */
  .dt-card__head { padding: var(--dt-sp-5); gap: var(--dt-sp-3); }
  .dt-card__head__riga {
    flex-direction: column;
    align-items: stretch;
    gap: var(--dt-sp-4);
  }
  /* In colonna il margine automatico che sul largo spinge i comandi a destra
     annullerebbe lo `stretch`: la fila tornerebbe larga quanto il contenuto e
     appoggiata al bordo destro invece di prendersi la riga. */
  .dt-card__head__riga > .dt-row { margin-left: 0; }
  .dt-card__foot { flex-wrap: wrap; row-gap: var(--dt-sp-3); }
  /* La ricerca si prende la riga intera: e' il primo comando che si tocca in un
     elenco. */
  .dt-card__head .dt-inputgroup { flex: 1 1 100%; }
  /* Il segmentato resta un riquadro solo e scorre dentro di se': cinque stati
     ("Tutte, Aperta, Sospesa, Finita, Fatturata") a 390px non ci stanno, e
     spezzarli su due righe farebbe due riquadri di una cosa sola. */
  .dt-segmented {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dt-segmented::-webkit-scrollbar { display: none; }
  /* Quello che avanza va ai tasti, che diventano larghi quanto la riga: sono
     l'azione della schermata, non una voce di una barra. */
  .dt-card__head__riga > .dt-row > .dt-btn,
  .dt-card__foot > .dt-btn { flex: 1 1 auto; }
  /* Il filo verticale che stacca "quello che filtra" da "quello che porta
     fuori" sparisce: fra due cose che sono andate a capo non c'e' piu' niente
     da separare di fianco, e resterebbe una stanghetta in mezzo alla riga. */
  .dt-card__head .dt-divider--v { display: none; }

  /* ---- Tabelle -----------------------------------------------------------

     La prima colonna sta ferma, le altre le scorre il dito. E' il compromesso
     che una tabella da ufficio su uno schermo da telefono permette: le colonne
     non ci stanno, ma senza il nome davanti un numero non si sa di chi sia.
     Il resto della riga si legge tutto in una volta dall'occhio, che apre la
     scheda in lettura — e li' non c'e' niente di tagliato.
     La pagina invece non scorre mai di lato: scorre il riquadro. */
  .dt-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dt-tablewrap--binario { overflow: visible; }
  .dt-tablewrap__foglio { -webkit-overflow-scrolling: touch; }
  /* L'ancora ha una cella sola, larga tutta la tabella: non e' la colonna
     del nome, e non si tiene ferma come lei. */
  .dt-table tbody tr.dt-ancora td:first-child {
    position: static;
    max-width: none;
    border-right: 0;
    font-weight: var(--dt-fw-regular);
    background-color: var(--dt-surface-2);
  }
  .dt-table thead th,
  .dt-table tbody td { padding: var(--dt-sp-4) var(--dt-sp-3); }
  /* Le colonne di contorno si spengono. Quali siano lo dice ogni elenco per
     conto suo (`dt-col--sec`): e' una decisione su cosa serve per riconoscere
     una riga stando in piedi, non una regola generale. Quello che si spegne
     non se ne va: sta nella scheda che apre l'occhio, a un dito di distanza. */
  .dt-col--sec { display: none; }
  /* La colonna che sta ferma e' la **prima che si vede**, non la prima che
     c'e': nei materiali la prima e' il codice e si spegne, e la colonna da
     tenere sotto gli occhi diventa il nome. Due casi bastano — nessun elenco
     spegne le prime due — e scritti cosi' non c'e' un secondo posto dove
     ricordarsi quale sia la colonna del nome. */
  .dt-table thead th:first-child:not(.dt-col--sec),
  .dt-table tbody td:first-child:not(.dt-col--sec),
  .dt-table thead th.dt-col--sec:first-child + th,
  .dt-table tbody td.dt-col--sec:first-child + td {
    position: sticky;
    left: 0;
    padding-left: var(--dt-sp-4);
    /* Un filo, non un'ombra: il resto della piattaforma separa con dei fili, e
       un'ombra qui sembrerebbe che la colonna galleggia sopra alle altre. */
    border-right: 1px solid var(--dt-border-soft);
    /* Il nome va a capo invece di allargare la tabella: "Condominio Le
       Magnolie" su una riga sola sono duecento pixel di colonna, cioe' meta'
       dello schermo per una riga su dieci. */
    white-space: normal;
    min-width: 7.5rem;
    max-width: 11rem;
    /* Il peso della prima colonna: e' il nome che si cerca scorrendo. Sul largo
       ce l'ha `td:first-child`, che qui puo' essere la cella spenta. */
    font-weight: var(--dt-fw-medium);
  }
  /* Una cella che sta ferma sopra a quelle che le passano sotto deve essere
     opaca, e dello stesso colore della sua riga: la zebratura e la riga scelta
     se la portano dietro, altrimenti scorrendo si vedrebbe il testo delle
     altre colonne passare sotto al nome. */
  .dt-table tbody td:first-child:not(.dt-col--sec),
  .dt-table tbody td.dt-col--sec:first-child + td {
    z-index: 1;
    background-color: var(--dt-surface);
  }
  .dt-table--zebra tbody tr:nth-child(even) td:first-child:not(.dt-col--sec),
  .dt-table--zebra tbody tr:nth-child(even) td.dt-col--sec:first-child + td {
    background-color: var(--dt-zebra);
  }
  .dt-table tbody tr.dt-tr--selected td:first-child:not(.dt-col--sec),
  .dt-table tbody tr.dt-tr--selected td.dt-col--sec:first-child + td {
    background-color: var(--dt-selected);
  }
  .dt-table thead th:first-child:not(.dt-col--sec),
  .dt-table thead th.dt-col--sec:first-child + th {
    z-index: calc(var(--dt-z-sticky) + 1);
  }
  /* I comandi di riga sono l'unica cosa della tabella che si preme, e stanno
     appoggiati al bordo destro come il nome sta al sinistro: fra i due anchori
     scorre quello che non ci sta. Senza, per premere l'occhio di una riga
     bisognava prima portare la tabella fino in fondo. */
  .dt-table .dt-iconbtn { width: var(--dt-h-tocco); height: var(--dt-h-tocco); }
  /* Solo le celle, non la loro intestazione: l'intestazione della colonna dei
     comandi e' vuota, quindi non c'e' niente da tenere fermo, e inchiodare a
     destra l'ultima `th` di ogni tabella staccherebbe il titolo dalla sua
     colonna in tutti i fogli che di comandi non ne hanno (le tre estrazioni
     finiscono con un numero). */
  .dt-table tbody td.dt-td--actions {
    position: sticky;
    right: 0;
    z-index: 1;
    padding-left: var(--dt-sp-2);
    padding-right: var(--dt-sp-3);
    border-left: 1px solid var(--dt-border-soft);
    background-color: var(--dt-surface);
  }
  .dt-table--zebra tbody tr:nth-child(even) td.dt-td--actions { background-color: var(--dt-zebra); }
  .dt-table tbody tr.dt-tr--selected td.dt-td--actions { background-color: var(--dt-selected); }
  /* Un bollino dentro a una tabella e' una frase e non una parola — «manca
     l'indirizzo», «fuori catalogo» — e su una riga sola porta la tabella una
     ventina di pixel oltre il bordo del riquadro: si scorre di lato per venti
     pixel, che e' il peggior modo di scorrere. Qui va a capo dentro alla sua
     cella, come fa gia' il nome nella prima colonna, e la coda dell'ufficio ci
     sta tutta anche su uno schermo da trecentoventi. Alto quanto serve invece
     che venti fissi: due righe dentro a un'altezza da una si sfondano. */
  .dt-table tbody td .dt-badge {
    height: auto;
    min-height: 20px;
    padding-block: 2px;
    white-space: normal;
  }

  /* Comandi che restano all'ufficio.
     Fondere due doppioni e buttare via una riga sono decisioni da scrivania: si
     prendono guardando due schede insieme, non in piedi con una mano sul
     furgone. Quattro tasti in fila su una riga larga un pollice, poi, sono
     quattro bersagli attaccati di cui uno cancella — e quello sbagliato si
     preme. Restano quelli di ogni giorno: l'interruttore e la matita. Guardare
     non e' piu' un tastino da nessuna parte — si preme il nome, che e' il
     bersaglio piu' largo della riga. `display: contents` sul largo, cosi' i
     tasti stanno nella riga come se il guscio non ci fosse. */
  .dt-solo-largo { display: none; }

  /* ---- Barra bassa: ogni slot largo quanto la sua parola -----------------

     In portrait la barra scorreva di lato: i moduli piu' il piede non ci
     stavano, e il nome finiva tagliato a meta' parola ("Miche…"). Una barra di
     navigazione che si scorre non e' una barra: le voci devono stare tutte
     sotto gli occhi. A slot uguali ci stavano, ma la parola piu' lunga
     dettava la misura di tutte e la scritta scendeva a dieci pixel, che e' la
     misura che il resto del programma ha smesso di usare in furgone. Qui lo
     slot lo detta la parola: ogni colonna e' larga almeno quanto il suo nome
     (`minmax(max-content, 1fr)`) e l'aria che avanza si divide in parti
     uguali, cosi' "Lavori" non ruba a "Calendari" e i sei nomi ci stanno a
     dodici pixel e mezzo da 375 in su. Sotto la scritta scende con la
     finestra, e la barra non si sfonda.
     I gruppi (Cantiere, Ufficio, Impostazioni) diventano trasparenti alla
     griglia — `display: contents` — cosi' a spartirsi la riga sono le voci e
     non i tre gruppi. Il fermo passa sul primo tasto del gruppo nuovo: e' lo
     stesso segno, appeso a un'altra cosa (`::after`, perche' `::before` e'
     il gancio). */
  .dt-app__side {
    /* La scritta scende con la finestra, ripida: dodici e mezzo da 380 in su,
       dieci a 320. Sono i sei nomi piu' chi sei che devono starci, e la
       pendenza e' quella per cui ci stanno a ogni larghezza in mezzo. */
    --dt-barra-fs: clamp(10px, 5vw - 6.5px, 12.5px);
    padding: 0 var(--dt-sp-3) env(safe-area-inset-bottom, 0px);
  }
  .dt-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 0;
    overflow: visible;
  }
  .dt-nav__group { display: contents; }
  .dt-nav__group + .dt-nav__group { margin-left: 0; padding-left: 0; }
  .dt-nav__group + .dt-nav__group::before { content: none; }
  /* `first-of-type` e non `first-child`: il primo figlio del gruppo e' la sua
     etichetta, spenta ma presente. */
  .dt-nav__group + .dt-nav__group > .dt-nav__item:first-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(-1 * var(--dt-barra-pad));
    width: 1px;
    height: var(--dt-sp-4);
    background: var(--dt-border-strong);
  }
  .dt-nav__item {
    min-width: 0;
    max-width: none;
    /* L'aria ai lati del nome scende con la scritta: otto pixel fra due nomi
       da 460 in su, quattro a 320, perche' "Giornata" e "Calendari" non si
       leggano come una parola e a 320 la fascia non si sfondi. */
    padding: var(--dt-sp-2) clamp(2px, 1.2vw - 1.5px, 4px);
    font-size: var(--dt-barra-fs);
  }

  /* Chi sei e' l'ultimo slot della barra, fatto come gli altri: il cerchietto
     al posto dell'icona e il nome sotto, nella stessa misura dei moduli. Il
     nome per intero non ci sta e tagliato non si legge, quindi resta la prima
     parola — che e' come si chiamano fra loro — e il resto sta nel pannello
     che il cerchietto apre. Il cerchietto e' anche il tasto: l'ingranaggio di
     fianco era un bersaglio in piu' per la stessa cosa, e a questa larghezza
     costava uno slot. */
  .dt-app__sidefoot {
    margin-left: 0;
    padding: var(--dt-barra-pad) 0 var(--dt-barra-pad) var(--dt-sp-3);
  }
  .dt-app__sidefoot > .dt-iconbtn { display: none; }
  .dt-sideuser {
    flex-direction: column;
    justify-content: center;
    gap: var(--dt-sp-1);
    width: auto;
    min-width: 44px;
    max-width: clamp(60px, 17vw, 80px);
    height: 100%;
    margin: 0;
    padding: var(--dt-sp-2) var(--dt-sp-1);
  }
  .dt-sideuser__testo { display: none; }
  .dt-sideuser__breve {
    display: block;
    max-width: 100%;
    font-size: var(--dt-barra-fs);
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Modali: il foglio intero -----------------------------------------

     La scheda di un blocco e' la maschera piu' lunga del programma, e su un
     telefono la si compila in piedi su una scala. Dentro a un riquadro con
     l'aria intorno restavano seicento pixel di altezza utile su ottocento, e
     in una finestra di seicento si arriva a "Dove" solo scorrendo. A tutto
     schermo il foglio e' il foglio.
     Sale dal basso invece di apparire al centro: e' da la' che arriva il
     pollice, ed e' il verso in cui si chiude. */
  .dt-modal__backdrop { padding: 0; place-items: stretch; }
  .dt-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    animation: dt-sale var(--dt-t-med);
  }
  .dt-modal__head {
    padding: var(--dt-sp-4) var(--dt-sp-5);
    padding-top: calc(var(--dt-sp-4) + env(safe-area-inset-top, 0px));
  }
  .dt-modal__body { padding: var(--dt-sp-5); }
  .dt-modal__avviso { padding: var(--dt-sp-4) var(--dt-sp-5) 0; }
  .dt-modal__foot {
    padding: var(--dt-sp-4) var(--dt-sp-5);
    padding-bottom: calc(var(--dt-sp-4) + env(safe-area-inset-bottom, 0px));
  }
  /* Due tasti in fondo a un foglio si dividono la riga: cosi' stanno dove il
     pollice arriva senza spostare la mano, invece che appallottolati a destra. */
  .dt-modal__foot > .dt-btn { flex: 1 1 auto; }
  /* Quello di sinistra no: non e' uno dei due, e prendendosi un terzo di riga
     lo sembrerebbe. Resta della misura sua e lascia la riga alla coppia. */
  .dt-modal__foot-sinistra { flex: 0 0 auto; }
  /* Il banco libero non e' un foglio: la carta resta una carta, con un dito
     d'aria dai bordi, e la barra dei tasti prende tutta la riga sopra al
     bordo del telefono, dove arriva il pollice. */
  .dt-modal__backdrop--banco {
    padding: var(--dt-sp-5) var(--dt-sp-4) calc(var(--dt-sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .dt-banco { animation: dt-sale var(--dt-t-med); }
  .dt-banco__comandi { width: 100%; }
  .dt-banco__comandi > .dt-btn { flex: 1 1 auto; }

  /* ---- Il resto ---------------------------------------------------------- */

  /* Le linguette sono il modo con cui si cambia scheda, e a sei pixel sopra e
     sotto il testo la fascia e' alta trentadue: si prende, ma mirando. Qui
     l'altezza la detta il pollice e non il testo. */
  .dt-tabs__item {
    min-height: var(--dt-h-tocco);
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: var(--dt-sp-5);
  }

  /* Le griglie con l'etichetta a sinistra vanno in colonna: centodieci pixel
     di etichetta piu' un campo, a questa larghezza, e' un campo largo un
     pollice. */
  .dt-formgrid { grid-template-columns: minmax(0, 1fr); gap: var(--dt-sp-2); }
  .dt-formgrid > .dt-field__label { justify-content: flex-start; text-align: left; }
  /* I riquadri dei numeri: due per riga e larghi uguali. Il minimo da monitor
     (centocinquanta pixel) ne faceva stare uno solo, e lasciati alla loro
     misura naturale venivano di larghezze diverse uno sopra l'altro — che di
     una fila di numeri e' la cosa che si nota per prima. */
  .dt-kpi {
    flex: 1 1 40%;
    min-width: 0;
    padding: var(--dt-sp-4);
  }

  /* Gli avvisi passeggeri stanno sopra alla barra bassa, non sopra alle sue
     voci: in basso a destra coprivano "Account" e il tasto che segna un'ora,
     cioe' proprio quello che si stava per premere dopo aver salvato. E prendono
     la riga intera, perche' a 390px un riquadro da 340 e' quasi tutta. */
  .dt-toaster {
    left: var(--dt-sp-3);
    right: var(--dt-sp-3);
    bottom: calc(var(--dt-barra-bassa-h) + var(--dt-sp-3));
    max-width: none;
  }

  /* ---- I bersagli piccoli: il pollice li prende lo stesso ------------------

     Sotto al pollice un bersaglio e' largo e alto almeno `--dt-h-tocco`, ma
     non tutti possono diventarlo nella scatola che si vede. Dove intorno c'e'
     aria — testo che non si preme, il bordo di chi li contiene — si allarga
     di nascosto il pezzo che si prende (un `::before` trasparente) e il segno
     resta com'e'. Dove i vicini sono altri bersagli attaccati — le voci di un
     elenco, le facce della piega — di nascosto non si puo': ci si prenderebbe
     un pezzo del vicino. Li' cresce la scatola, come crescono le linguette qui
     sopra. Il metro e' prove/tocco.html. */

  /* La matitina accanto al nome dell'attivita': ventiquattro pixel. Si prende
     un quadrato da pollice largo quanto lei piu' l'aria ai lati, e alto
     spostato in su. Sopra c'e' l'aria della testatina e la testa della
     maschera, dove non c'e' niente da premere; sotto, spesso, c'e' subito il
     tassello del riferimento: col nome corto il negozio sta sulla stessa riga
     del nome («Montaggio», il caso di tutti i giorni), e senza negozio non
     c'e' proprio. Il tassello il suo quadrato lo prende anche sulla riga del
     nome (vedi sotto), e il confine fra i due e' dove comincia il suo: sale di
     quaranta meno i suoi ventiquattro meno l'aria sotto di lui, e sta a una
     fessura dalla riga del nome. Matita e tassello sono alti uguali, per
     questo il 100%. Dove il tassello non c'e', sotto alla matita resta lei. */
  .dt-testatina__matita { position: relative; }
  .dt-testatina__matita::before {
    content: "";
    position: absolute;
    left: calc((100% - var(--dt-h-tocco)) / 2);
    right: calc((100% - var(--dt-h-tocco)) / 2);
    height: var(--dt-h-tocco);
    bottom: calc(var(--dt-h-tocco) - 100% - var(--dt-sp-3) - var(--dt-sp-1));
  }
  /* Con un nome lungo la matita arriva sotto alla x che chiude la maschera: la
     x ha il suo quadrato, e dove i due si toccano vince lei. */
  .dt-modal__head .dt-iconbtn {
    position: relative;
    z-index: 1;
  }
  /* Il tassello del riferimento: largo quanto il nome del cancello e alto
     ventiquattro. Nella testatina sotto di lui c'e' la piega, che e' un
     bersaglio: di la' si allarga fino al bordo della testatina e non oltre,
     il resto lo prende sopra, sulla riga del negozio o su quella del nome. */
  .dt-testatina__riferimento,
  .dt-cartellino__riferimento { position: relative; }
  .dt-testatina__riferimento::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1 * var(--dt-sp-3) - 1px);
    top: calc(100% - var(--dt-h-tocco) + var(--dt-sp-3) + 1px);
  }
  /* Nel cartellino il tassello sta in mezzo a una riga alta quanto un comando
     grande: l'aria c'e' sopra e sotto, dentro alla riga sua. */
  .dt-cartellino__riferimento::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc((100% - var(--dt-h-tocco)) / 2);
    bottom: calc((100% - var(--dt-h-tocco)) / 2);
  }

  /* Il segno della versione, nell'ultima riga del pannello di chi sei: alto
     venti, e si allarga di nascosto di dieci sopra e sotto (vedi
     `.dt-versione`). Sopra arriva fino al segmentato del tema e non oltre;
     sotto il pannello lo tagliava al suo bordo — taglia quello che sborda per
     arrotondare gli angoli della sua testa, che ha un fondo suo — e ne
     restavano trentasette. Qui gli angoli la testa se li arrotonda da se', col
     raggio che il taglio le dava (quello del pannello meno il filo), e il
     pannello non taglia piu': il pezzo in piu' scende sul velo, che chiude il
     pannello e basta. */
  .dt-app__sidefoot .dt-menu { overflow: visible; }
  .dt-app__sidefoot .dt-menu__testa {
    border-top-left-radius: calc(var(--dt-r-lg) - 1px);
    border-top-right-radius: calc(var(--dt-r-lg) - 1px);
  }

  /* Le due facce della bolla sono linguette: si cambia faccia come si cambia
     scheda, e come le linguette qui l'altezza la detta il pollice. Di nascosto
     non si poteva: sopra c'e' il tassello del riferimento, e sotto il foglio
     che scorre, che passandoci sotto si farebbe prendere le righe. */
  .dt-piega__faccia { min-height: var(--dt-h-tocco); }

  /* Le voci da spuntare nel pannello di una clausola (il report): una sotto
     l'altra a due pixel, e ognuna alta ventotto. L'aria per allargarle di
     nascosto non c'e' — sarebbe quella della voce di fianco. */
  .dt-scelta { min-height: var(--dt-h-tocco); }

  /* Il segmentato: il riquadro e' gia' alto quanto il pollice, i tasti dentro
     no. In altezza si prendono tutto il riquadro, in larghezza fino a meta'
     della fessura fra l'uno e l'altro, e il primo e l'ultimo fino al filo.
     Qui il riquadro scorre di lato (vedi sopra), e chi scorre taglia quello
     che sborda dall'aria sua: il filo intorno diventa un contorno disegnato
     sopra, nello stesso posto, e l'aria si prende il suo pixel — cosi' l'aria
     arriva al bordo, e i tasti fin la'. Sopra e non sotto: un tasto che
     scorre sotto al filo non lo interrompe. E sono larghi almeno quanto alti:
     «Si'» e «No» erano ventotto pixel, e allargarli di nascosto voleva dire
     rubare al vicino. */
  .dt-segmented {
    border-width: 0;
    padding: 3px;
    outline: 1px solid var(--dt-border);
    outline-offset: -1px;
  }
  /* Il minimo scritto a mano pero' toglierebbe quello che un elemento
     flessibile ha da se' — la sua scritta —, e in un segmentato troppo lungo
     per la riga i tasti si stringerebbero sotto alle parole invece di far
     scorrere il riquadro: per questo non si stringono. Nel quadrante del
     periodo, dove si dividono la riga in parti uguali, il minimo resta la
     scritta. */
  .dt-segmented__item {
    position: relative;
    flex-shrink: 0;
    min-width: var(--dt-h-tocco);
  }
  .dt-quadrante__modi .dt-segmented__item { min-width: auto; }
  .dt-segmented__item::before {
    content: "";
    position: absolute;
    inset: -3px -1px;
  }
  .dt-segmented__item:first-child::before { left: -3px; }
  .dt-segmented__item:last-child::before { right: -3px; }

  /* Le frecce della barra del giorno: per far stare la data intera la barra
     le stringe (`--dt-timone-stretto`), e a 390 pixel erano larghe trentaquattro.
     Il pezzo che si prende torna largo quanto il pollice: la prima si allarga
     verso il filo che la separa dalla data, dove non c'e' niente da premere; la
     seconda si prende la meta' sua della fessura e il margine di «Oggi», che
     ha l'aria prima della scritta. Il pixel in piu' e' il bordo trasparente del
     tasto: il `::before` si misura dall'aria dentro al bordo, non dal filo. */
  .dt-giorno__comandi .dt-iconbtn { position: relative; }
  .dt-giorno__comandi .dt-iconbtn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--dt-sp-1) / -2 - 1px);
    right: calc(-1 * var(--dt-timone-stretto));
  }
  .dt-giorno__comandi .dt-iconbtn:first-child::before {
    left: calc(-1 * var(--dt-timone-stretto) - 1px);
    right: calc(var(--dt-sp-1) / -2 - 1px);
  }

  /* I bolli restano da diciotto a vederli: stanno in fila a ventidue pixel
     l'uno dall'altro, e quando sono piu' di quanti la colonna ne tiene si
     stringono (vedi `.dt-giorno__bollo`). Da quaranta andrebbero staccati di
     quaranta, e sei di mattina non starebbero in una colonna dei Calendari
     larga un palmo. Il tocco invece si allarga di nascosto: alto quanto il
     pollice, e largo fino a meta' dell'aria fra un bollo e l'altro, cosi' due
     bolli vicini non si rubano il colpo. Il segno lo taglia il suo riquadro
     (`.dt-giorno__bollo-segno`), non il bollo, che se no taglierebbe anche
     questo. Un bollo spento non si prende (`pointer-events: none`, e il
     `::before` lo eredita), e uno acceso c'e' solo quando il suo blocco e'
     fuori vista: sotto alla fila di sopra, a undici pixel dal bordo, il colpo
     va al bollo e non al blocco che ci scorre sotto. */
  .dt-giorno__bollo::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--dt-sp-2));
    right: calc(-1 * var(--dt-sp-2));
    top: 50%;
    height: var(--dt-h-tocco);
    translate: 0 -50%;
  }
}

/* ===========================================================================
   Il catalogo a scala
   ===========================================================================
   Materiali e tendaggi stanno su quattro gradini — reparto, famiglia, prodotto,
   modello — e i due larghi non sono colonne: sono la fascia che apre ogni
   gruppo. Ripeterli su ogni riga farebbe un elenco in cui tutte le righe
   cominciano uguale e il nome, che e' l'unica cosa che si sta cercando, finisce
   spinto a destra. */

/* --------------------------------------------------------------------------
   La barra dell'elenco: cercare, filtrare, e gli attrezzi della schermata
   --------------------------------------------------------------------------
   Una fascia sola, sotto alla testata e dentro allo stesso riquadro, uguale in
   tutte le schede dei Lavori, del Catalogo e degli Account.

   Prima non c'era una regola. Due schede si cercavano da qui, due dalla riga
   del titolo — dove il campo restava largo un pollice fra un filtro e un tasto,
   e il segmentato dei riferimenti si spezzava su due righe a milleduecento
   pixel — e due non si cercavano affatto. Tre posti per la stessa cosa, e chi
   passava da una linguetta all'altra doveva ritrovare il campo ogni volta.

   Adesso la riga del titolo tiene **una primaria e nient'altro** — «Nuovo
   negozio», «Nuova attivita'» — e tutto il resto scende qui: il campo che
   stringe l'elenco a sinistra, i filtri che valgono su tutto, e in fondo, oltre
   un filo, gli attrezzi della schermata (aprire l'albero, portarlo via,
   riportarlo dentro). Da sinistra a destra si va da «quale riga cerco» a «cosa
   faccio a questo elenco», che e' anche l'ordine in cui le due cose servono. */
.dt-barra-elenco {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border-soft);
  background: var(--dt-surface);
}
/* Il campo prende quello che avanza e si stringe per primo: una casella di
   ricerca stretta si scrive uguale, una fila di filtri spezzata in due si
   legge peggio. */
.dt-barra-elenco__cerca {
  flex: 1 1 12rem;
  min-width: 0;
}
.dt-barra-elenco__cerca .dt-inputgroup { width: 100%; }
.dt-barra-elenco__filtri,
.dt-barra-elenco__attrezzi {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  flex: 0 0 auto;
}
/* Il filo che stacca gli attrezzi dai filtri: di la' si sceglie cosa vedere,
   di qua si tocca l'elenco. */
.dt-barra-elenco__filo {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 0 var(--dt-sp-2);
  background: var(--dt-border-soft);
}
/* Stretta, il campo si prende la sua riga e gli attrezzi scendono sotto: sono
   due cose diverse, e schiacciarle sulla stessa riga vorrebbe dire un campo di
   ricerca largo tre lettere. */
@media (max-width: 760px) {
  .dt-barra-elenco { flex-wrap: wrap; }
  .dt-barra-elenco__cerca { flex: 1 1 100%; }
  .dt-barra-elenco__filo { display: none; }
  .dt-barra-elenco__attrezzi { margin-left: auto; }
  /* E andati a capo si stringono: fin qui erano `flex: 0 0 auto`, cioe' larghi
     quanto il loro contenuto qualunque cosa succedesse. Su un telefono i
     quattro attrezzi del catalogo — apri tutto, nuova sezione, scarica,
     carica — fanno cinquecento pixel su una riga larga trecento, e i due in
     fondo finivano oltre il bordo della scheda: non tagliati e scorribili, ma
     tagliati e basta (`.dt-card` ha `overflow: hidden`), cioe' impossibili da
     premere. Adesso la fila si stringe alla riga e i tasti che non ci stanno
     vanno a capo fra loro. */
  .dt-barra-elenco__filtri,
  .dt-barra-elenco__attrezzi { flex: 0 1 auto; min-width: 0; }
  .dt-barra-elenco__attrezzi { flex-wrap: wrap; justify-content: flex-end; }
  /* I filtri no: un segmentato spezzato su due righe sono due riquadri di una
     cosa sola. Quello scorre dentro di se' (vedi la fascia del telefono), e
     per farlo gli serve solo che il suo guscio possa stringersi — che e' la
     riga qui sopra. */
  .dt-barra-elenco__filtri { flex-wrap: nowrap; }
}

/* --------------------------------------------------------------------------
   L'elenco a binario: la tendina, la voce, i comandi
   --------------------------------------------------------------------------
   Un catalogo e' un albero, e un riferimento non e' una riga ma un cancello con
   appeso del lavoro: per questo la riga si apre e quello che contiene sta sotto,
   rientrato. Quello che qui e' cambiato non e' che si apra — e' **dove
   comincia**. Ogni riga, di ogni elenco di queste schermate, comincia con le
   stesse corsie: la maniglia, la freccia, e il vuoto che ne tiene il posto
   quando non c'e' ne' l'una ne' l'altra. Prima le corsie andavano e venivano
   riga per riga — una sezione con la maniglia, la fila «senza sezione» senza,
   un riferimento con la freccia e la sua commessa con niente — e il bordo
   sinistro dell'elenco era una scaletta storta in cui non si incolonnava
   nulla.

   Da questo viene il **binario**: il filo verticale che regge un piano
   dell'albero cade a mezza corsia dal bordo della riga che l'ha aperto, cioe'
   sotto al segno che si e' premuto per aprirlo. Quello che si vede e' che le
   righe di dentro pendono da quella riga li', e non che sono un secondo elenco
   che comincia piu' a destra.

   Come in `.dt-piega`, la pancia passa da `0fr` a `1fr` sugli stessi nodi: e'
   l'unico modo di arrivare all'altezza vera senza misurarla in JavaScript e
   senza un `max-height` a occhio. */

/* Il contenitore dell'albero: un filo fra un ramo e l'altro e niente intorno.
   Sta dentro a un `.dt-card__body--flush`, che il bordo ce l'ha gia'. */
.dt-albero > .dt-tendina + .dt-tendina,
.dt-tendina + .dt-tendina,
.dt-albero > .dt-voce + .dt-voce { border-top: 1px solid var(--dt-border-soft); }

/* Le due forme di un elenco, e il passaggio dall'una all'altra.

   Cambiando forma l'elenco non sparisce. Le righe che c'erano si smorzano e
   restano al loro posto finche' non arrivano quelle nuove, che prendono il
   loro posto e tornano a pieno inchiostro **sullo stesso nodo**: e' il guscio
   che resta, non le righe, e la sola cosa che si muove e' la sua opacita'.
   Prima al cambio la scheda si svuotava, mostrava la rotellina e si riempiva
   di righe fatte in un altro modo: tre stati in mezzo secondo, e l'occhio non
   sapeva piu' dove stava guardando. Cosi' lo stato in mezzo e' uno solo — le
   righe vecchie, smorte — e dice quello che succede davvero: si sta chiedendo
   la stessa cosa in un'altra forma. Sotto al dito, intanto, non si preme
   niente. */
.dt-forme { transition: opacity var(--dt-t-med); }
.dt-forme--in-arrivo {
  opacity: 0.4;
  pointer-events: none;
}

/* ===== La costola: come si vede che una cartellina e' aperta =====
   E' la cosa che nella vecchia grafica non si vedeva. Aperta e chiusa si
   distinguevano per una freccia da quattordici pixel che ruotava, e quello che
   la cartellina conteneva pendeva da un filo di un pixel che cominciava *sotto*
   alla riga che l'aveva aperta — cioe' staccato da lei. Con tre piani si
   contavano tre fili identici ai fili che separano le righe, sullo stesso
   grigio e nella stessa pagina: da qui «confusionarie».

   La costola e' quel filo portato a due pixel e **tirato su fino a comprendere
   la testa**. Una cartellina aperta e' una staffa: il coperchio, il fianco, il
   piedino. Quello che ci sta dentro non e' un secondo elenco che comincia piu'
   a destra — e' roba tenuta da quella riga li', e si vede.

   Chiusa non ha niente: il posto dei due pixel lo tiene un bordo trasparente,
   cosi' aprire non sposta di un capello quello che c'e' scritto. Un catalogo
   quasi tutto chiuso resta la pagina bianca di prima, e le costole che si
   vedono sono esattamente le cartelline che qualcuno ha aperto. E' l'opposto
   della fascia grigia sulle sezioni, che si provo' e si tolse: quella tingeva
   anche quello che nessuno aveva chiesto di vedere. */
.dt-tendina { position: relative; }
/* Il fianco. Non tocca il bordo del riquadro — sei pixel di stacco — se no
   sull'ultimo piano si legge come un bordo di riquadro ispessito invece che
   come il fianco di qualcosa che sta li' dentro. */
.dt-tendina--aperta::before,
.dt-tendina--aperta::after {
  content: "";
  position: absolute;
  left: var(--dt-sp-3);
  background: var(--dt-border-strong);
  border-radius: 1px;
}
.dt-tendina--aperta::before {
  top: 0;
  bottom: 0;
  width: 2px;
}
/* Il piedino: dove il gruppo finisce. Senza, una cartellina che si chiude e
   quella che ricomincia sotto sono la stessa cosa — il fianco smette e basta —
   e per sapere se la riga dopo sta ancora dentro bisogna risalire a cercare i
   rientri. */
.dt-tendina--aperta::after {
  bottom: 0;
  width: 9px;
  height: 2px;
}
.dt-tendina__barra {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  /* Lo stesso passo di una voce: una sezione e una cosa sono due righe dello
     stesso elenco, e una sezione col sottotitolo — "Senza sezione", un
     riferimento col suo indirizzo — era alta quattro pixel piu' di una senza.
     Vedi `--dt-riga-h`. */
  min-height: var(--dt-riga-h);
  padding: 0 var(--dt-riga-x);
  background: var(--dt-surface);
}
/* Il nome di una cartellina aperta va a inchiostro pieno, quello di una chiusa
   sta un tono sotto. Non e' decorazione: e' la stessa distinzione della
   costola, detta dove l'occhio sta gia' guardando — sul nome. */
.dt-tendina--aperta > .dt-tendina__barra .dt-tendina__titolo { color: var(--dt-text); }
.dt-tendina__titolo { color: var(--dt-text-2); }
/* **Chi contiene e chi sta dentro si distinguono nella corsia, non dal fondo.**
   Una sezione ci tiene la freccia, una cosa ci tiene la sua faccia; non ci sono
   righe che hanno tutte e due, e non c'e' altro da imparare. Il fondo resta
   bianco per tutti, come nei riferimenti: le sezioni tinte di grigio facevano
   di un catalogo aperto mezzo schermo di fasce con dentro qualche riga chiara,
   e il grigio finiva per pesare piu' della cosa che doveva dire.
   Il resto della gerarchia lo dicono il peso del nome — reparto, famiglia,
   ripiano — e il binario che regge ogni piano. */
.dt-tendina__barra:hover {
  background-image: linear-gradient(var(--dt-hover), var(--dt-hover));
}

/* Il tasto che apre si prende tutta la riga tranne i comandi: su un elenco si
   preme il nome, non la freccia da otto pixel. */
.dt-tendina__scatto {
  display: flex;
  align-items: center;
  /* La freccia e' il segno di questa riga: si stacca dal nome come il segno di
     una voce si stacca dal suo. */
  gap: var(--dt-corsia-testo);
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-2) 0;
  border: 0;
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dt-tendina__scatto:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent-border);
}
/* La corsia del segno: la seconda colonna di ogni riga d'elenco. Ci sta la
   freccia se la riga si apre, il segno che la riga porta con se' — la
   campitura di un'attivita' — se ne ha uno, e il vuoto se non ha ne' l'una ne'
   l'altro. Larga sempre uguale, che e' tutto il punto. */
.dt-tendina__freccia,
.dt-corsia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--dt-corsia);
  align-self: stretch;
}
/* La faccia di una persona sta nella corsia con la stessa misura del segno di
   una cosa e della campitura di un negozio. Tre facce di tre misure diverse in
   tre linguette diverse sono esattamente quello che si e' venuti a togliere:
   la corsia e' una colonna sola, e chi la guarda scorrendo deve trovarci
   sempre un segno grande uguale. */
/* La corsia del segno: e' l'ultima prima del nome, e si stacca. La corsia
   della presa no — presa e segno sono due segni di fila, e allontanarli
   spezzerebbe in due il bordo sinistro della riga. */
.dt-corsia--segno { margin-right: calc(var(--dt-corsia-testo) - var(--dt-sp-3)); }
.dt-corsia > .dt-avatar {
  width: var(--dt-corsia);
  height: var(--dt-corsia);
  font-size: var(--dt-fs-xs);
}
.dt-tendina__freccia {
  color: var(--dt-text-3);
  transform: rotate(-90deg);
  transition: transform var(--dt-t-med), color var(--dt-t-fast);
}
.dt-tendina__barra:hover .dt-tendina__freccia { color: var(--dt-text-2); }
.dt-tendina--aperta > .dt-tendina__barra > .dt-tendina__scatto .dt-tendina__freccia {
  transform: rotate(0deg);
  color: var(--dt-text-2);
}
.dt-tendina__testo {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
}
.dt-tendina__titolo {
  white-space: nowrap;
  font-weight: var(--dt-fw-semibold);
}
/* Il reparto — il primo piano di un catalogo — si legge come l'intestazione di
   un elenco e non come un nome: e' l'unica riga che intitola invece di
   nominare. Sotto di lui non ci sono piu' tre pesi ma uno solo: a dire a che
   piano si sta ci pensano le costole, che si contano, e un terzo peso di
   carattere diceva la stessa cosa una seconda volta e peggio.
   Un nome di cosa — un riferimento, "Villa Rossi" — non entra in questa scala:
   non e' l'intestazione di niente, e scriverlo maiuscoletto lo trasformerebbe
   in un'etichetta. */
.dt-tendina--reparto > .dt-tendina__barra .dt-tendina__titolo {
  font-size: var(--dt-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dt-tendina__sotto {
  white-space: nowrap;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}
/* Il conto sta appiccicato al titolo e non in fondo alla riga, come gia' fa
   `.dt-piega`: e' il titolo che ne ha uno, e un numero dall'altra parte del
   riquadro — dopo i bollini, prima dei tastini, a un'ascissa diversa in ogni
   riga — non si capisce a che cosa si riferisca.
   Sulla riga del titolo e non in fondo al blocco di testo: sotto al nome c'e'
   l'indirizzo, che e' piu' lungo del nome, e un conto appoggiato al blocco
   intero finiva in fondo all'indirizzo — accanto a un numero di telefono, che
   e' l'ultimo posto in cui si vuole leggere un altro numero. */
.dt-tendina__capo {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  min-width: 0;
}
.dt-tendina__conto {
  flex: 0 0 auto;
  padding: 0 var(--dt-sp-3);
  border-radius: var(--dt-r-full);
  /* Un velo e non un grigio scritto: la pastiglia sta sul bianco di una riga e
     sulla fascia di una sezione, e un grigio fisso su una delle due sparisce.
     Cosi' e' sempre un gradino piu' scura di quello che ha sotto. */
  background: var(--dt-hover);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}
/* I bollini stanno appoggiati ai comandi e non dietro al titolo: sono pochi e
   larghi quanto la parola che ci sta dentro, e attaccati al titolo ballavano
   da una riga all'altra. Da qui in poi la riga si legge da destra. */
.dt-tendina__segni {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  flex: 0 0 auto;
}
.dt-tendina__pancia {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dt-t-med);
}
.dt-tendina--aperta > .dt-tendina__pancia { grid-template-rows: 1fr; }
/* Nuda di proposito: e' la cella che si schiaccia, e con `border-box` un
   padding qui resterebbe aperto anche a tendina chiusa. */
.dt-tendina__dentro {
  overflow: hidden;
  min-height: 0;
}
/* Il rientro di un piano dell'albero. Il filo che lo reggeva se n'e' andato:
   adesso a reggerlo c'e' la costola della cartellina che l'ha aperto, che parte
   dalla sua testa e gli sta a fianco per tutta l'altezza. Due segni per la
   stessa cosa — un fianco e un filo, a due ascisse diverse — erano il motivo
   per cui non si capiva a che piano si stesse. */
.dt-tendina__corpo {
  position: relative;
  margin-left: var(--dt-passo);
  background: var(--dt-surface);
}

/* Una voce in fondo all'albero: il nome a sinistra, i dati misurati a destra.
   Non e' una tabella e non deve esserlo — le colonne che contano sono le
   ultime, e quelle restano incolonnate perche' hanno tutte la stessa misura in
   ogni riga dell'albero, dentro a qualunque ramo stiano.
   Le corsie di sinistra le tiene anche lei, vuote: una voce non si apre, ma se
   il suo nome cominciasse una corsia piu' a sinistra di quello della sezione
   che le sta accanto, i due nomi non starebbero in colonna — ed e' l'unica
   colonna che conta davvero, perche' e' quella che si legge. */
.dt-voce {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Da destra si legge, e a destra restano: sulla prima riga il nome si prende
     lo spazio libero e questo non si vede, ma quando la riga va a capo — un
     telefono, due bollini larghi — la coda che scende sotto resta appoggiata al
     bordo destro invece di ricominciare da sinistra, dove sarebbe un riquadro
     sciolto all ascissa sbagliata. */
  justify-content: flex-end;
  /* Sei pixel fra una corsia e l'altra e fra la corsia e il nome, gli stessi
     della barra di una sezione: e' quella misura a tenere in colonna i nomi
     delle voci con quelli delle sezioni accanto. A quattro il segno di
     un'attivita' stava appiccicato alla sua etichetta. */
  gap: var(--dt-sp-2) var(--dt-sp-3);
  /* Il passo di tutte le righe di tutte le schede: vedi `--dt-riga-h`. Non e'
     un'altezza fissa perche' stretta la riga va a capo — i bollini scendono
     sotto ai comandi — e li' a essere cambiata e' la disposizione, non quanto
     si e' scritto dentro. */
  min-height: var(--dt-riga-h);
  padding: var(--dt-sp-2) var(--dt-riga-x);
}
/* Il filo si somma al passo, non se lo mangia. Le misure di questa pagina sono
   tutte `border-box`, quindi un bordo di un pixel viene contato *dentro*
   all'altezza minima: senza questa riga la prima voce di un elenco era alta un
   pixel piu' delle sue sorelle, che e' esattamente il genere di scarto per cui
   una fila di righe smette di sembrare una fila. Le sezioni non ne hanno
   bisogno: li' il filo sta sul contenitore (`.dt-tendina + .dt-tendina`), cioe'
   gia' fuori dalla barra. */
.dt-voce + .dt-voce {
  border-top: 1px solid var(--dt-border-soft);
  min-height: calc(var(--dt-riga-h) + 1px);
}
.dt-voce:hover { background-image: linear-gradient(var(--dt-hover), var(--dt-hover)); }
/* `flex-basis: 0` e non `auto`: in una riga che va a capo, a decidere se un
   pezzo ci sta e' la sua misura naturale — non quella a cui si e' disposto a
   stringersi. Il sottotitolo di una commessa naturale e' lungo mezza riga di
   testo, e con `auto` si portava a capo da solo trascinandosi dietro tutto il
   resto: la corsia restava sopra, sola, e il nome ricominciava dal bordo.
   Con base zero il nome si prende quello che avanza, e quello che non ci sta
   scorre di lato: e' quello che deve fare. */
.dt-voce__nome {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}
/* **Il sottotitolo di una riga e' alto una riga, sempre.**
   Le due facce di un'attivita' — cosa si consegna, cosa torna indietro — sono
   due scritte e restano due: si leggono confrontandole, e appese di seguito
   sarebbero una fila sola di quattordici parole in cui non si vede dove
   finisce l'una. Ma stanno **in fila e non in colonna**, divise da un filo,
   come i due gruppi di una barra di comandi. In colonna erano la sola cosa che
   faceva l'elenco delle attivita' piu' alto di passo di tutti gli altri.
   Il filo, e non un punto o una barra battuta: un separatore scritto e' un
   carattere che si legge, e qui non c'e' niente da leggere fra le due — c'e'
   solo da vedere che sono due. */
.dt-voce__sotti {
  display: flex;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
}
.dt-voce__sotti > .dt-voce__sotto + .dt-voce__sotto {
  margin-left: var(--dt-sp-3);
  padding-left: var(--dt-sp-3);
  border-left: 1px solid var(--dt-border-soft);
}
.dt-voce__sotto {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}
/* Chi cede per primo. La prima scritta e' quella che dice cos'e' quella riga —
   sulle attivita' e' la chiave piu' cosa si consegna — e le altre la
   completano: stringendo si accorciano tre volte piu' in fretta, cosi' a
   restare leggibile e' quella che si sta cercando. Con la stessa cedevolezza
   si riducevano a due monconi appaiati, che sono due cose non lette invece di
   una letta. */
.dt-voce__sotti > .dt-voce__sotto ~ .dt-voce__sotto { flex-shrink: 3; }

/* ===== Il nome e' il tasto =====
   Una regola sola, in tutte e sei le schede: **premere il nome apre quello che
   c'e' dentro**. Cosa ci sia dentro lo dice la corsia, che e' li' di fianco.
   Se c'e' la freccia, dentro c'e' un elenco, e il nome lo apre. Se c'e' la
   faccia — o se la corsia e' vuota — dentro c'e' la scheda, e il nome apre
   quella.

   Cosi' l'occhio se n'e' andato da cinque schede su sei. C'era, ed era il primo
   di quattro tastini in fondo alla riga: il gesto che si fa piu' spesso era il
   bersaglio piu' piccolo della riga, e stava dall'altra parte rispetto alla
   cosa che si voleva guardare. Resta solo dove il nome e' gia' preso — sui
   riferimenti, che si aprono *e* hanno una scheda.

   Niente aspetto da bottone: e' il nome di una riga, e incorniciarlo lo
   farebbe pesare piu' della riga che lo contiene. */
.dt-voce__apri {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: clamp(96px, 30%, 180px);
  align-self: stretch;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dt-voce__apri--fermo { cursor: default; }
.dt-voce__apri:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent-border);
  border-radius: var(--dt-r-sm);
}
.dt-voce__apri > .dt-voce__nome { flex: 0 1 auto; }

/* I bollini stanno appoggiati ai comandi, come sulla barra di una cartellina
   (`.dt-tendina__segni`): sono pochi, larghi quanto la parola che ci sta
   dentro, e attaccati al nome ballavano da una riga all'altra. Da qui in poi la
   riga si legge da destra, ed e' la stessa lettura in tutte e sei le schede. */
.dt-voce__bollini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--dt-sp-2);
  /* Si stringe, e dentro i bollini vanno a capo fra loro. Con la base fissa
     erano loro a restare interi e a mandare a capo la barra dei comandi, che
     finiva su una riga sua in fondo a sinistra: un riquadro sciolto sotto alla
     riga, all'ascissa sbagliata. Due bollini larghi si impilano; la barra dei
     comandi resta dov'e' in tutte le altre righe. */
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.dt-voce__bollini + .dt-comandi { margin-left: 0; }

/* Chi e' stato messo via si legge meno: c'e', e non e' quello che si sta
   cercando. La faccia no — quella resta piena, perche' e' come lo si
   riconosce. Vale su un account come su un materiale o un negozio: e' lo stesso
   interruttore, e non c'e' motivo che dica una cosa diversa a seconda della
   linguetta. */
.dt-voce--via .dt-voce__nome,
.dt-voce--via .dt-voce__dato,
.dt-voce--via .dt-voce__prezzo { color: var(--dt-text-3); }
/* Una tendina aperta e vuota deve dire perche' e cosa farci: lasciarla vuota
   fa sembrare che stia ancora caricando. */
.dt-vuoto-dentro {
  padding: var(--dt-sp-4) calc(var(--dt-riga-x) + var(--dt-corsia));
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}
/* Il modello sta attaccato al nome ma non pesa come lui: e' quello che
   distingue due righe che si chiamano uguale, non quello che si cerca. */
.dt-voce__modello { color: var(--dt-text-3); }
/* Si stringono prima del nome: `min-width` sul nome fa cedere questi, e non il
   contrario. Un codice tagliato a meta' si legge lo stesso; un nome ridotto a
   "Tas…" non dice piu' niente, ed e' l'unica cosa per cui si sta guardando. */
.dt-voce__dato {
  flex: 0 1 clamp(48px, 9%, 72px);
  min-width: 0;
  /* Su una riga sola, sempre: un codice lungo che va a capo si porta dietro
     l'altezza della riga — quaranta righe di catalogo tutte da 48 pixel e in
     mezzo una da 96, che e' lo scarto per cui una fila smette di sembrare una
     fila. Quello che non ci sta scorre di lato, ed e' la stessa regola che il
     nome ha gia' qui sopra. */
  white-space: nowrap;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dt-voce__nome { min-width: clamp(96px, 30%, 180px); }
.dt-voce__prezzo {
  flex: 0 0 clamp(72px, 12%, 96px);
  /* Stessa regola del dato qui sopra: una cifra grossa col simbolo appresso
     non si spezza fra il numero e l'euro. */
  min-width: 0;
  white-space: nowrap;
  font-size: var(--dt-fs-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Stretti se ne vanno i dati misurati e resta il nome coi comandi: su un
   telefono l'unita' di misura e la posizione in elenco non sono quello per cui
   si e' aperto il catalogo. */
@media (max-width: 720px) {
  .dt-voce__dato { display: none; }
}
/* E sotto ai 560, dove i tastini passano al pollice e al testo restano due dita
   di riga, se ne va tutto quello che veniva dopo la prima scritta: due monconi
   di quattro lettere l'uno non sono due informazioni, sono nessuna. Resta la
   prima intera, che e' quella che dice di che riga si tratta — e la seconda
   faccia di un'attivita' si legge dov'e' scritta per esteso, cioe' nella sua
   scheda. Stessa regola dei dati misurati qui sopra, una soglia piu' giu'. */
@media (max-width: 560px) {
  .dt-voce__sotti > .dt-voce__sotto ~ .dt-voce__sotto { display: none; }
}

/* --------------------------------------------------------------------------
   La barra dei comandi di una riga
   --------------------------------------------------------------------------
   Un riquadro solo, non cinque tastini sciolti. Erano sciolti, tutti dello
   stesso grigio e della stessa forza del testo intorno, e su venti righe
   facevano una nuvola di segni lungo tutto il fianco destro dell'elenco: la
   cosa piu' rumorosa della schermata era il contorno. Qui sono un oggetto
   solo, uno per riga, sempre alla stessa ascissa: l'occhio ne conta venti
   uguali invece di cento sparsi, e chi cerca un comando sa gia' dov'e'.

   A riposo il riquadro e' un filo e i segni sono smorti; sulla riga sotto al
   dito il filo si fa vedere e i segni salgono di un tono. La forma non cambia
   mai — niente compare e niente sparisce — perche' un comando che si vede solo
   passandoci sopra col mouse su un tablet non esiste. */
.dt-comandi {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: transparent;
  color: var(--dt-text-3);
  transition: border-color var(--dt-t-fast), background var(--dt-t-fast),
    color var(--dt-t-fast);
}
.dt-voce:hover > .dt-comandi,
.dt-tendina__barra:hover > .dt-comandi,
.dt-comandi:focus-within {
  border-color: var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text-2);
}
/* Dentro sono piatti: il riquadro ce l'ha gia' il gruppo, e un secondo bordo
   per tastino farebbe una scacchiera. Gli spigoli di testa e di coda seguono
   quelli del gruppo, meno il filo. */
.dt-comandi .dt-iconbtn {
  border: 0;
  border-radius: 0;
  color: inherit;
}
.dt-comandi > :first-child,
.dt-comandi > :first-child > .dt-iconbtn:first-child {
  border-top-left-radius: calc(var(--dt-r-md) - 1px);
  border-bottom-left-radius: calc(var(--dt-r-md) - 1px);
}
.dt-comandi > :last-child,
.dt-comandi > :last-child > .dt-iconbtn:last-child {
  border-top-right-radius: calc(var(--dt-r-md) - 1px);
  border-bottom-right-radius: calc(var(--dt-r-md) - 1px);
}
.dt-comandi .dt-iconbtn:hover { background: var(--dt-hover); color: var(--dt-text); }
/* Dentro a un elenco il rosso arriva quando ci si arriva sopra, non prima.
   Il cestino c'e' su ogni riga: venti cestini rossi in colonna sono la cosa piu'
   accesa della schermata, e quello che dicono — "qui si cancella" — lo dice gia'
   la forma del segno, su una riga sola come su venti. Reggerlo col colore a
   riposo vuol dire tingere di rosso l'unica colonna che non parla di lavoro.
   Vale anche per l'interruttore spento, e li' e' una correzione: "messo via" e'
   uno stato, non un gesto distruttivo, e a dirlo c'e' la crocetta al posto della
   spunta. */
.dt-comandi .dt-iconbtn--danger { color: inherit; }
.dt-comandi .dt-iconbtn--danger:hover:not(:disabled) {
  color: var(--dt-danger);
  background: var(--dt-danger-soft);
}
.dt-comandi .dt-iconbtn:disabled { color: var(--dt-text-3); }
/* Il filo che stacca la coda: quello che cancella non sta appiccicato a quello
   che apre. La coda e' `.dt-solo-largo`, cioe' proprio i gesti che sullo
   stretto se ne vanno — fondere e buttare — e il filo se ne va con loro senza
   che nessuno debba ricordarsene. E' un'ombra e non un bordo perche' il bordo
   sposterebbe i tastini di un pixel. */
.dt-comandi .dt-solo-largo > .dt-iconbtn:first-child {
  box-shadow: inset 1px 0 0 var(--dt-border-soft);
}

/* I due tastini di servizio: in cima, nella barra, di fianco a Ricarica. Un
   posto solo, a ogni larghezza. Erano due nodi — uno in fondo alla barra
   laterale, uno quassu' per lo stretto — e il foglio di stile ne spegneva uno:
   due copie da tenere allineate, e sullo stretto la barra laterale e' comunque
   una fascia a slot dove non c'e' un fondo su cui appoggiarli.

   E' una barra di comandi come le altre — stesso riquadro, stessi tastini
   piatti, stesso filo a dividerli — e per questo si scrive addosso a
   `.dt-comandi` invece di rifarne una. Sta qui e non su nella barra in cima
   proprio per quello: le poche righe che seguono correggono quelle sopra, e
   scritte prima perderebbero.

   Il tratteggio e' l'unica cosa che cambia, e non e' un vezzo: e' un attrezzo
   di passaggio — serve a chi sta segnalando un problema, non a chi lavora — e
   il filo spezzato lo dice senza doverci scrivere sopra "debug".

   Il fondo pieno: sullo stretto la modale e' il foglio intero e questo
   riquadro le resta sopra, quindi sta appoggiato al titolo di sotto. Da
   trasparente le lettere gli passavano dentro. Il colore e' quello della barra
   in cui vive, cosi' quando non c'e' nessuna modale il riquadro non si stacca.

   Il numero alto e' il punto della faccenda: quando c'e' una modale aperta il
   velo copre tutto, e quello e' esattamente il momento in cui serve
   fotografare — sul telefono ancora di piu', che li' la modale e' il foglio
   intero. Sta sopra anche al suggerimento, che e' il piu' alto del programma.
   Funziona perche' ne' `.dt-app`, ne' la barra in cima aprono un contesto
   d'impilamento: il numero si confronta con quello del velo, non con quello di
   un antenato. */
.dt-debug {
  position: relative;
  z-index: calc(var(--dt-z-tooltip) + 100);
  border-style: dashed;
  border-color: var(--dt-border-strong);
  background-color: var(--dt-surface-2);
}
.dt-debug:hover,
.dt-debug:focus-within {
  background: var(--dt-surface);
  color: var(--dt-text-2);
}
.dt-debug .dt-iconbtn + .dt-iconbtn {
  box-shadow: inset 1px 0 0 var(--dt-border-strong);
}

/* Sul telefono non passano al pollice: restano alti come in ufficio.
   `--dt-h-comando` porta tutti i tastini di comando a quaranta pixel perche'
   li' si preme col dito e senza mirare — ma quello vale per chi lavora, e
   questi due non sono lavoro. A quaranta la striscia tratteggiata diventava
   alta quarantadue in una barra che ne vuole quarantaquattro: l'oggetto piu'
   grosso della prima fascia della schermata era l'attrezzo di passaggio.
   Alti `--dt-h-sm`, che sotto i 560 non cresce (lo dicono i commenti di
   quella soglia), e larghi come prima: la larghezza non la pagava nessuno, e
   un bersaglio largo si sbaglia meno di uno stretto anche se e' basso. */
@media screen and (max-width: 560px) {
  .dt-debug .dt-iconbtn { height: var(--dt-h-sm); }
}

/* --------------------------------------------------------------------------
   Il trascinamento: dove sta una riga si dice spostandola
   --------------------------------------------------------------------------
   Prima "dentro a quale sezione" e "in che posizione" erano due caselle in una
   maschera: una tendina coi percorsi scritti per esteso e un numero. Sono due
   traduzioni di una cosa che si ha gia' davanti, e per farle bisognava chiudere
   l'elenco, aprire una scheda, e tornare a guardare se era venuto come si
   voleva. Qui la risposta e' il gesto: si prende la riga e la si posa dove va.

   Tre segni, e ognuno risponde a una domanda diversa. La **maniglia** dice che
   quella riga si sposta e da dove si prende. Il **filo col nodo** dice fra
   quali due righe finirebbe — e a che piano, perche' comincia dal binario di
   quel piano invece che dal bordo della schermata. La **corsia accesa** dice
   dentro a quale sezione entrerebbe. Tutti e tre nel blu di `--dt-info`, che in
   questa interfaccia quasi tutta grigia e' l'unico colore che non vuol dire ne'
   allarme ne' conferma: vuol dire soltanto «qui». */

/* La maniglia si vede sempre, non solo passandoci sopra col mouse: su un
   telefono non c'e' nessun "passarci sopra", e una maniglia che compare solo
   col mouse e' una maniglia che sul telefono non esiste. Sottovoce pero' —
   sono tante quante le righe, e a piena forza sarebbero una colonna di
   puntini che grida piu' dei nomi. */
.dt-maniglia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--dt-corsia);
  /* Alta quanto la riga, e non un'altezza sua: si tira su da se' (`stretch`) e
     il pollice ce l'ha gia' dentro, perche' una riga non scende sotto a
     `--dt-riga-h`. Con un minimo suo era lei a decidere il passo delle righe
     che si trascinano — un pixel piu' alte delle altre — e le sei schede
     tornavano a due misure. */
  align-self: stretch;
  color: var(--dt-text-3);
  opacity: 0.45;
  cursor: grab;
  /* Col dito la corsia scorre come il resto della riga: la riga si prende
     tenendola premuta, e uno scorrimento che parte da qui scorre l'elenco. A
     riga presa il primo movimento lo ferma il codice (`trascina.rs`), che e'
     l'unico a sapere quando la pressione e' maturata. Il menu e la lente del
     telefono, che nascono dalla stessa pressione, qui non servono. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: opacity var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-maniglia:hover {
  opacity: 1;
  color: var(--dt-text-2);
}
.dt-maniglia:active {
  cursor: grabbing;
}
/* I puntini di una riga che non si sposta: si vedono uguali a quelli di una
   che si sposta — e' tutto il punto, il bordo sinistro non si interrompe
   passando di scheda in scheda — ma non fanno niente e non promettono niente.
   Da fermi sono identici, ed e' cosi' che li si incontra scorrendo un elenco;
   avvicinandoci la mano non si accendono e non cambiano freccia, che e' dove
   la differenza si scopre e dove non costa niente saperla.
   `touch-action` torna quello di tutti: la maniglia vera si prende il gesto
   del dito perche' ci deve partire un trascinamento, e questa senza il ritorno
   sarebbe una striscia di ventidue pixel in cui un elenco non scorre. */
.dt-maniglia--finta,
.dt-maniglia--finta:hover {
  color: var(--dt-text-3);
  opacity: 0.45;
  cursor: inherit;
  touch-action: auto;
}

/* La riga che si ha in mano resta al suo posto e sbiadisce: toglierla di mezzo
   farebbe saltare in su tutto quello che ha sotto, e il posto in cui si sta
   mirando si sposterebbe da solo mentre ci si mira. Sbiadisce tutta insieme —
   `opacity` prende anche i figli, quindi non c'e' modo di tenerne acceso uno — e
   quello che si ha in mano lo dice l'etichetta attaccata al dito, che ha il blu
   sul fianco. */
.dt-presa {
  opacity: 0.45;
  background: var(--dt-surface-2);
}

/* Il filo: fra queste due righe, e a questo piano. Comincia dal binario del
   piano su cui cadrebbe — non dal bordo della schermata — perche' "in fondo a
   questa sezione" e "dopo questa sezione" sono due posti diversi che con un
   filo lungo tutta la riga si disegnavano uguali. Il nodo di testa e' il punto
   in cui si aggancia. */
.dt-cade {
  position: relative;
}
.dt-cade--prima::after,
.dt-cade--dopo::after {
  content: "";
  position: absolute;
  left: var(--dt-riga-x);
  right: var(--dt-riga-x);
  height: 2px;
  border-radius: 1px;
  background: var(--dt-info);
  pointer-events: none;
}
.dt-cade--prima::before,
.dt-cade--dopo::before {
  content: "";
  position: absolute;
  left: calc(var(--dt-riga-x) - 2px);
  width: 7px;
  height: 7px;
  border-radius: var(--dt-r-full);
  background: var(--dt-info);
  pointer-events: none;
}
.dt-cade--prima::after { top: -1px; }
.dt-cade--prima::before { top: -4px; }
.dt-cade--dopo::after { bottom: -1px; }
.dt-cade--dopo::before { bottom: -4px; }
/* Dentro: non un filo ma tutta la riga accesa e la corsia piena, perche' quello
   che si sta per fare non e' infilarsi fra due cose, e' entrare in una. Scritta
   dopo il `:hover` della barra e con la stessa forza, cosi' vince: passarci
   sopra col dito pieno non deve dire la stessa cosa che passarci sopra a mani
   vuote. */
.dt-voce.dt-cade--dentro,
.dt-tendina__barra.dt-cade--dentro {
  background: var(--dt-info-soft);
  box-shadow: inset 3px 0 0 var(--dt-info);
}

/* Quello che si ha in mano, attaccato al dito.
   Serve piu' dell'evidenziare la riga di partenza: dopo mezza schermata di
   scorrimento quella riga non si vede piu', e senza niente sotto al dito non si
   sa piu' cosa si sta posando. Non riceve tocchi: se li ricevesse sarebbe lei
   la cosa sotto al dito a ogni movimento, e non si troverebbe mai nient'altro. */
.dt-ombra {
  position: fixed;
  z-index: var(--dt-z-modal);
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  max-width: min(260px, 60vw);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  /* Scostata dal dito, se no sta sotto al polpastrello e non si legge. */
  transform: translate(14px, 12px);
  border: 1px solid var(--dt-border);
  /* Lo stesso blu del filo e della corsia: e' la stessa cosa che si sta
     facendo, vista dall'altra parte. */
  border-left: 3px solid var(--dt-info);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  box-shadow: var(--dt-shadow-md);
  color: var(--dt-text);
  font-size: var(--dt-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.dt-ombra > :first-child {
  flex: 0 0 auto;
  color: var(--dt-info);
}
.dt-ombra > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La faccia di una cosa, in miniatura: la sua campitura col suo segno dentro.
   Ce l'hanno tutte e tre le anagrafiche del catalogo — attivita', materiali,
   tipi di tendaggio — perche' sono tre elenchi ma un solo paio d'occhi: chi in
   giornata riconosce il montaggio dall'ambra non ha motivo di dover leggere
   "Tassello SX 8x40" per trovare il tassello.
   Sull'attivita' era una colonna di tabella tinta per intero, larga un pollice
   e piu' forte di ogni altra cosa nella schermata. Ma quello che l'operatore
   avra' davanti non e' una fascia di colore: e' un segno dentro a una
   campitura, e questa e' quella campitura rimpicciolita — stesso fondo, stesso
   bordo, stesso segno.
   In elenco fa anche un secondo lavoro, ed e' quello che tiene in piedi
   l'albero: **chi ha la faccia e' una cosa, chi ha la freccia e' un posto in
   cui le cose stanno.** Le due occupano la stessa corsia, e non ci sono righe
   che hanno tutte e due.
   Tonalita' e carica arrivano dallo `style` inline, come per i blocchi e per la
   tavolozza: fin dove ogni tonalita' arriva lo sa chi ha scelto i colori, non
   il foglio di stile. */
.dt-tinta-segno {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--dt-corsia);
  height: var(--dt-corsia);
  border-radius: var(--dt-r-sm);
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
/* Senza tinta non c'e' un colore da mostrare, ma la campitura resta: e' la
   forma a dire che quella riga e' una cosa da riconoscere, e una forma che
   sparisce nel caso normale — che nel listino e' quasi ogni riga — non dice
   piu' niente. Qui il fondo e' bianco, ed e' **il solo posto dove ci va un
   filo**: senza, un quadrato bianco sul bianco della scheda non e' un
   quadrato. Le campiture tinte il filo non ce l'hanno, che il colore si dice
   da se'. Stesso vestito del cerchietto di chi il colore non se l'e' visto
   scegliere. */
.dt-tinta-segno--nuda {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  color: var(--dt-text-3);
}
/* Una tinta che nella tavolozza non c'e' non ha campitura da mostrare: e' un
   dato da sistemare, non un colore da riconoscere, e si scrive. */
.dt-tinta-segno--rotta {
  background: var(--dt-warn-soft);
  color: var(--dt-warn);
}
/* L'iniziale di un negozio, al posto del simbolo di una cosa: stessa
   campitura, stessa misura, e dentro l'unica cosa che cambia. La misura viene
   dalla corsia e non da chi disegna, se no la stessa faccia esce di due
   grandezze in due elenchi che si somigliano. */
.dt-tinta-segno__lettera {
  font-size: calc(var(--dt-corsia) * 0.5);
  font-weight: var(--dt-fw-bold);
  line-height: 1;
  user-select: none;
}

/* ===== La tessera: un pezzo dell'ordine =====
   La faccia del tendaggio, con il numero del pezzo al posto del disegno e il
   riempimento al posto del pieno: vuota da montare, tracciata prevista, a
   meta' da finire, piena montata. E' la lingua della colonna — pieno e'
   successo, tracciato deve ancora succedere — detta di un pezzo, con gli
   stessi colori del blocco: il pieno, il tratto e il velo della sagoma sono
   le stesse formule, sulla tinta del tendaggio invece che del negozio.

   Il riempimento e' un piano sotto al numero (`::before`) ritagliato da un
   poligono di quattro punti che sono gli stessi in tutti gli stati: vuota e'
   il poligono schiacciato nell'angolo, a meta' il triangolo sotto la
   diagonale, piena il quadrato. Un `clip-path` fra poligoni con lo stesso
   numero di punti si interpola, e toccare un pezzo lo si vede riempirsi
   dall'angolo invece di cambiare di colpo. */
.dt-tessera {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  --dt-tessera-pieno: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  --dt-tessera-tratto: oklch(
    calc(var(--dt-tinta-l-tratto) + var(--dt-blocco-luce, 0%))
    calc(var(--dt-blocco-c) * var(--dt-tinta-c-tratto))
    var(--dt-blocco-tinta)
  );
  --dt-tessera-velo: oklch(
    calc(var(--dt-sagoma-l) + var(--dt-blocco-luce, 0%) * 0.5)
    calc(var(--dt-blocco-c) * var(--dt-sagoma-c))
    var(--dt-blocco-tinta)
  );
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--dt-corsia);
  height: var(--dt-corsia);
  border: 1px solid var(--dt-tessera-tratto);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface);
  color: var(--dt-text-2);
  font-family: var(--dt-font-mono);
  font-size: calc(var(--dt-corsia) * 0.46);
  font-weight: var(--dt-fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  user-select: none;
  transition: border-color var(--dt-t-med), box-shadow var(--dt-t-med),
    background-color var(--dt-t-med), color var(--dt-t-med);
}
.dt-tessera::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--dt-r-sm) - 1px);
  background: var(--dt-tessera-pieno);
  clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
  transition: clip-path var(--dt-t-slitta);
}
/* Il numero sopra al riempimento. A meta' la diagonale gli passa in mezzo:
   l'alone del colore della pagina lo stacca da tutte e due le meta'. */
.dt-tessera__n { position: relative; }
.dt-tessera--a-meta::before { clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%); }
.dt-tessera--a-meta > .dt-tessera__n {
  color: var(--dt-text);
  text-shadow: 0 0 2px var(--dt-surface), 0 0 2px var(--dt-surface);
}
/* Piena il bordo e' il pieno stesso: il colore si dice da se', come sul
   segno di catalogo. La scritta e' quella di un blocco pieno, nera su tutti i
   pastelli e su tutti e due i temi. */
.dt-tessera--piena {
  border-color: var(--dt-tessera-pieno);
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
.dt-tessera--piena::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
/* Prevista: la sagoma di un appuntamento — il tratto tracciato, appena un
   velo dentro. Il posto e' preso, sopra non e' successo niente. */
.dt-tessera--prevista {
  border-style: dashed;
  background: var(--dt-tessera-velo);
}
/* Senza tinta, o con una che la tavolozza non ha: l'inchiostro, come il
   campione pieno della piega. Un grigio di superficie sul tema scuro stava a
   un soffio dalla pagina, e una tessera piena sembrava vuota. Sopra
   all'inchiostro la cifra e' del colore della pagina. */
.dt-tessera--nuda {
  --dt-tessera-pieno: var(--dt-text-2);
  --dt-tessera-tratto: var(--dt-border-strong);
  --dt-tessera-velo: var(--dt-surface-2);
}
.dt-tessera--nuda.dt-tessera--piena { color: var(--dt-surface); }
/* Toccata da questo blocco: l'anello d'inchiostro, staccato di un filo di
   pagina. E' la sola cosa che dice «qui»: il riempimento dice come sta il
   pezzo, l'anello chi lo sta dicendo. */
.dt-tessera--qui {
  box-shadow: 0 0 0 2px var(--dt-surface), 0 0 0 3.5px var(--dt-accent);
}

/* Le tessere di una riga d'ordine in fila: vanno a capo, e fra l'una e
   l'altra il posto dell'anello. */
.dt-tessere {
  --dt-corsia: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-sp-2);
  padding: 2px;
}

/* ===== L'ordine a pezzi =====
   «Cosa hai montato?» con una commessa: le righe d'ordine una sotto l'altra,
   ognuna col suo tendaggio in testa e i suoi pezzi sotto, rientrati di un
   passo come le voci dentro a una sezione del catalogo. E' lo stesso riquadro
   (`.dt-scelte`) e sono le stesse righe (`.dt-voce`): cambia solo che qui una
   riga e' un pezzo, e il segno nella corsia e' la sua tessera. */
.dt-pezzi__gruppo + .dt-pezzi__gruppo,
.dt-pezzi__gruppo + .dt-voce {
  border-top: 1px solid var(--dt-border-soft);
}
/* La testa pesa come il nome di una sezione: e' il gruppo, non un pezzo. */
.dt-pezzi__testa .dt-voce__nome { font-weight: var(--dt-fw-semibold); }
/* Quanti pezzi della riga saranno montati, su quanti: in coda, dove le righe
   tengono i numeri, e su ogni larghezza — e' il conto che si guarda. */
.dt-pezzi__conto {
  flex: none;
  margin-left: auto;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
  font-variant-numeric: tabular-nums;
}
/* I pezzi rientrano di un passo sotto alla loro testa, come le voci di una
   sezione. Il filo fra l'uno e l'altro e' quello di sempre (`.dt-voce +
   .dt-voce`); sopra al primo lo stacca dalla testa, e si somma al passo come
   la' (vedi `.dt-voce + .dt-voce`). */
.dt-pezzi__dentro { margin-left: var(--dt-passo); }
.dt-pezzi__dentro > .dt-voce:first-child {
  border-top: 1px solid var(--dt-border-soft);
  min-height: calc(var(--dt-riga-h) + 1px);
}
/* Il nome e sotto le sue tessere, dove una tabella legge una riga d'ordine o
   quello che un blocco ha montato. */
.dt-pezzi__letti {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dt-sp-2);
}
/* «Da finire» nella barra dei comandi di una riga: un gettone piatto come i
   tastini che gli stanno accanto, alto come loro, col filo che li divide.
   Premuto ha il fondo pieno: e' lo stato della riga, non un gesto. */
.dt-comandi > .dt-gettone {
  height: var(--dt-h-comando);
  padding: 0 var(--dt-sp-3);
  border-radius: 0;
  font-size: var(--dt-fs-xs);
  box-shadow: inset -1px 0 0 var(--dt-border-soft);
}
.dt-comandi > .dt-gettone--acceso {
  background: var(--dt-accent-soft);
  color: var(--dt-text);
  box-shadow: inset -1px 0 0 var(--dt-border-soft);
}

/* Il tastino che apre una riga scritta a mano.
   Piatto e sottovoce: sta sotto alla tendina perche' e' quello che si fa DOPO
   aver guardato e non aver trovato, e un tasto pieno la' sotto sarebbe una
   scorciatoia per riscrivere roba che in catalogo c'e' gia'. */
.dt-fuori-catalogo {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  align-self: flex-start;
  padding: var(--dt-sp-2) var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-md);
  background: none;
  color: var(--dt-text-3);
  font: inherit;
  font-size: var(--dt-fs-sm);
  text-align: left;
  cursor: pointer;
  transition: color var(--dt-t-fast), background var(--dt-t-fast);
}
.dt-fuori-catalogo:hover { color: var(--dt-text); background: var(--dt-hover); }

/* Una riga di materiale scritta a mano: il listino qui non c'e', quindi nome,
   unita' e prezzo sono campi. Due piani e non uno — il nome si prende la riga
   sua perche' e' lungo quanto una frase, e sotto restano i tre numeri
   incolonnati. In una fila sola su un telefono il prezzo andava a capo da solo
   e il −/+ cambiava posto da una riga all'altra. */
.dt-riga-fuori {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  /* I fianchi sono quelli di una riga d'elenco: sta in fila con le righe di
     listino, e un rientro suo la farebbe leggere come un'altra cosa. Il
     riquadro intorno ce l'ha gia' `.dt-presi`. */
  padding: var(--dt-sp-2) var(--dt-riga-x);
  background: var(--dt-surface);
}
.dt-riga-fuori__testa {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-height: var(--dt-h-tocco);
}
/* Il nome mangia lo spazio che avanza; il bollino e la X no: sono loro che il
   dito deve trovare sempre nello stesso punto, riga dopo riga. */
.dt-riga-fuori__testa > .dt-input { flex: 1 1 auto; min-width: 0; }
/* Unita' e prezzo sono misurati e la quantita' si prende quello che avanza:
   sono tre campi al passo delle cifre che ci vanno dentro — due lettere, un
   prezzo, un numero col −/+ — e un prezzo largo mezza riga per cinque cifre
   spingerebbe il −/+ fuori dal pollice. E' la stessa scelta gia' fatta su
   `.dt-riga-ordine`, dove a misura sta la quantita'.

   Va a capo da se' invece che a una soglia: la scheda del blocco e' dentro a
   una maschera, e quanto e' larga la maschera non e' quanto e' larga la
   finestra. Una media query misurerebbe la cosa sbagliata e romperebbe la riga
   dove non serviva, o non la romperebbe dove serviva. */
.dt-riga-fuori__conti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-sp-2);
  align-items: center;
}
.dt-riga-fuori__conti > * { min-width: 0; }
/* L'unita' non si muove (due lettere e una freccia), il prezzo si prende quel
   che avanza, la quantita' resta larga quanto sulla riga di listino qui sopra:
   cosi' il −/+ cade sempre nella stessa colonna, riga dopo riga, ed e' quello
   che il pollice cerca senza guardare. Quando scende sotto, `margin-left:auto`
   la tiene lo stesso a destra invece di rimandarla a capo riga. */
.dt-riga-fuori__conti > :nth-child(1) { flex: 0 0 clamp(64px, 18%, 84px); }
.dt-riga-fuori__conti > :nth-child(2) { flex: 1 1 clamp(96px, 26%, 128px); }
.dt-riga-fuori__conti > :nth-child(3) {
  flex: 0 0 clamp(132px, 34%, 160px);
  margin-left: auto;
}
.dt-riga-fuori__nota {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
}

@keyframes dt-sale { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Il cerchietto di una persona
   --------------------------------------------------------------------------
   Gli account non hanno piu' una grafica loro: sono un elenco a corsie come i
   negozi, i riferimenti e il catalogo — vedi `.dt-albero` e `.dt-voce`. Quello
   che era il `.dt-ruolino`, con la sua riga-tasto e i suoi bollini, e' stato
   sciolto li' dentro: era l'ultima schermata dell'ufficio che si disegnava da
   se', e la sua idea buona — toccare il nome per leggere la scheda — e' passata
   a tutte le altre (`.dt-voce__apri`).

   Resta qui il cerchietto, che e' roba della faccia e non dell'elenco. */

/* Il cerchietto di chi il colore se l'e' visto scegliere: la campitura della
   tavolozza, la stessa dei blocchi e dei negozi, con sopra la scritta scura
   che quella campitura si porta dietro. */
.dt-avatar--tinta {
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c, var(--dt-tinta-c))
    var(--dt-blocco-tinta)
  );
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
/* E il cerchietto di tutti gli altri: bianco, col filo intorno e l'iniziale
   smorta. Il bianco e' quello del tema — sul chiaro e' bianco, sullo scuro e'
   il bianco che ha lui — perche' un `#fff` scritto a mano sul tema scuro
   sarebbe l'unica macchia accesa della pagina.

   Prima qui usciva un pastello calcolato dal nome. Nessuno l'aveva scelto e
   nessuno poteva cambiarlo: due colleghi finivano per caso sulla stessa
   tonalita' senza rimedio, e sopratutto erano tinti *tutti*, cioe' nessuno.

   Il filo e' un `border` e non un'ombra: nelle file accavallate l'ombra e' gia'
   presa dall'anello che stacca una faccia dall'altra, e un secondo `box-shadow`
   la cancellerebbe — un cerchietto bianco con l'anello bianco, sul bianco, non
   e' piu' un cerchietto. Il bordo non tocca la misura, che le facce sono tutte
   `border-box`. */
.dt-avatar--senza {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  color: var(--dt-text-3);
  font-weight: var(--dt-fw-semibold);
}
.dt-avatar {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
}


/* Stampa: sul foglio deve restare il contenuto e nient'altro.
   Qui sparisce quel che serve solo a comandare l'applicazione — barra
   laterale, pulsanti, avvisi passeggeri — e la pagina si srotola, che sulla
   carta non c'e' niente da scorrere. Come si veste quel che resta lo dice la
   sezione 31: qui si decide **cosa** va sul foglio, la' **com'e' fatto** il
   foglio. */
@media print {
  .dt-app__side,
  .dt-toolbar,
  .dt-btn,
  .dt-iconbtn,
  .dt-toaster,
  .dt-modal__backdrop,
  .dt-segmented,
  .dt-tabs,
  .dt-td--actions,
  /* Il filo verticale separa dei comandi, e i comandi sulla carta non ci sono:
     restava una stanghetta in mezzo al niente, in cima al foglio. */
  .dt-divider--v,
  .dt-nostampa {
    display: none !important;
  }

  .dt-app,
  .dt-app__main,
  .dt-app__body {
    display: block;
    height: auto;
    overflow: visible;
  }

  .dt-card,
  .dt-kpi { break-inside: avoid; }

  .dt-table { max-height: none; }
  .dt-table tr { break-inside: avoid; }

  /* Stampa di una sola giornata: chi la chiede marca il corpo e la scheda
     scelta, e tutto il resto dell'elenco esce di pagina. */
  body.dt-stampa-uno .dt-giornata:not(.dt-giornata--scelta) {
    display: none !important;
  }

  /* La data resta — e' l'intestazione del foglio — ma senza il segno del
     pannello: su carta non c'e' niente da aprire. Il riquadro che la stacca
     dal fondo dello schermo non serve piu': sulla carta il fondo e' bianco,
     e resterebbe un rettangolo intorno al titolo. */
  .dt-giorno__timone {
    position: static;
    max-width: none;
    height: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
  }
  .dt-giorno__data { background: none; height: auto; padding: 0; }
  .dt-giorno__data svg { display: none; }
  /* Su carta non c'e' niente da premere: restano la data e basta, senza il
     filo che la divideva da comandi che qui non ci sono. */
  .dt-giorno__comandi { display: none; }
}

/* ==========================================================================
   LA BARRA CHE SI TIRA
   ==========================================================================

   Il filo sta sopra al confine fra le due colonne e non dentro alla griglia:
   una terza colonna larga sei pixel avrebbe cambiato il disegno di tutte le
   schermate — e ognuna di loro avrebbe dovuto saperne qualcosa — mentre qui la
   griglia resta quella di prima e il filo ci si appoggia sopra.

   La larghezza la scrive il codice sul guscio (`--dt-sidebar-w` in linea) solo
   dopo che qualcuno l'ha tirata: finche' nessuno tocca niente vale il `clamp`
   dei token, che si muove con la finestra. */

.dt-app { position: relative; }

/* Larghezza e filo si spostano insieme e sugli stessi nodi: sono la stessa
   misura vista da due parti. Mentre si tira la transizione si spegne — con lei
   accesa la barra inseguirebbe il dito con due decimi di ritardo, che si legge
   come una barra che non sta dietro. */
.dt-app,
.dt-app__tira {
  transition: grid-template-columns var(--dt-t-slitta), left var(--dt-t-slitta);
}
.dt-app--barra-tirata,
.dt-app--barra-tirata .dt-app__tira {
  transition: none;
}

.dt-app__tira {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--dt-sidebar-w);
  width: 11px;
  /* Centrato sul confine: la presa cade sul filo, non di fianco. */
  transform: translateX(-5px);
  z-index: var(--dt-z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  /* Da qui il gesto e' dell'applicazione: senza, il primo movimento del dito
     se lo prende lo scorrimento e la barra non parte mai. */
  touch-action: none;
  background: transparent;
  transition: background var(--dt-t-fast);
}
.dt-app__tira:focus-visible { outline-offset: -2px; }
.dt-app__tira:hover,
.dt-app--barra-tirata .dt-app__tira {
  background: var(--dt-hover);
}

/* La presa: un segno corto in mezzo al filo. Da ferma non c'e' — il bordo
   della barra basta a dire dove finisce — e compare quando ci si avvicina, che
   e' l'unico momento in cui serve saperlo. */
.dt-app__tira__presa {
  width: 3px;
  height: 28px;
  border-radius: var(--dt-r-full);
  background: var(--dt-border-strong);
  opacity: 0;
  transition: opacity var(--dt-t-fast), background var(--dt-t-fast);
}
.dt-app__tira:hover .dt-app__tira__presa,
.dt-app__tira:focus-visible .dt-app__tira__presa,
.dt-app--barra-tirata .dt-app__tira__presa {
  opacity: 1;
}
.dt-app--barra-tirata .dt-app__tira__presa { background: var(--dt-accent); }

/* Barra chiusa. Il filo diventa una costola: si vede sempre, ha la presa
   accesa e la stessa faccia della barra che ha preso il posto di. E' la strada
   per tornare indietro, e sta esattamente dove stava quello che si e' chiuso.

   Solo dove le due cose sono affiancate: in verticale e sulle finestre strette
   la barra e' una fascia in fondo allo schermo, e li' non c'e' nessuna
   larghezza da chiudere — nascondere la fascia vorrebbe dire togliere la
   navigazione a chi tiene il tablet in piedi. */
@media (min-width: 821px) and (orientation: landscape) {
  .dt-app--barra-chiusa .dt-app__side {
    border-right: 0;
    /* Nascosta e non solo larga zero: larga zero resterebbe nella fila del
       tabulatore, e si finirebbe a girare dentro a una barra che non c'e'. */
    visibility: hidden;
  }
  /* La costola sta *dentro* alla colonna che la barra ha lasciato, non sopra
     al lavoro: la larghezza qui e quella scritta dal codice sono la stessa
     misura, e separate finirebbero per coprire le prime lettere di quello che
     c'e' scritto sotto. */
  .dt-app--barra-chiusa .dt-app__tira {
    left: 0;
    width: 14px;
    transform: none;
    /* Un grigio pieno e non il fondo della barra: chiusa, questa striscia deve
       leggersi come una cosa che c'e' e si puo' aprire, non come il bordo
       della finestra. */
    background: var(--dt-surface-3);
    border-right: 1px solid var(--dt-border);
    cursor: e-resize;
  }
  .dt-app--barra-chiusa .dt-app__tira:hover { background: var(--dt-selected); }
  /* La presa e' l'unico segno rimasto della barra: si vede sempre, e piu'
     lunga — su quattordici pixel di larghezza e' quella a dire che li' c'e'
     qualcosa da prendere. */
  .dt-app--barra-chiusa .dt-app__tira__presa {
    opacity: 1;
    width: 4px;
    height: 44px;
    background: var(--dt-border-strong);
  }
  .dt-app--barra-chiusa .dt-app__tira:hover .dt-app__tira__presa {
    background: var(--dt-accent);
  }
}

/* Il filo della barra laterale non esiste in verticale e sulle finestre
   strette: li' la barra e' una fascia in fondo allo schermo e non ha nessuna
   larghezza da decidere. Il codice non lo monta proprio; questa riga vale per
   l'istante in cui la finestra e' appena girata e il codice non lo sa ancora. */
@media (orientation: portrait), (max-width: 820px) {
  .dt-app__tira { display: none; }
}

/* --------------------------------------------------------------------------
   29. Le domande dell'amministratore: il compositore delle facce, la
       tavolozza dei tipi di risposta, l'anteprima
   -------------------------------------------------------------------------- */

/* La copertina di una scheda: la faccia e il nome sulla stessa riga, come
   stanno sulla riga d'elenco e sulla mattonella che l'operatore preme. Il
   tasto **e'** la faccia — la stessa campitura col suo segno, alta quanto la
   casella accanto — e premuto apre la cartella qui sotto, che altrimenti sta
   chiusa: cinquanta quadretti sopra al nome erano la prima cosa che si vedeva
   aprendo la scheda, e non sono la prima cosa che si cambia. */
.dt-copertina {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
}
.dt-copertina-riga {
  display: flex;
  align-items: flex-end;
  gap: var(--dt-sp-3);
}
.dt-copertina-riga > .dt-field { flex: 1 1 auto; min-width: 0; }
.dt-segno-tasto {
  display: grid;
  place-items: center;
  flex: none;
  /* Alto quanto la casella che gli sta accanto: e' la stessa riga. */
  width: var(--dt-h-md);
  height: var(--dt-h-md);
  padding: 0;
  border: 0;
  border-radius: var(--dt-r-sm);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--dt-t-fast);
}
/* Dentro c'e' la faccia com'e' in elenco, a riempire il tasto: nessun secondo
   riquadro intorno, il filo ce l'ha gia' la faccia nuda e le tinte non lo
   vogliono. La corsia e' il tasto. */
.dt-segno-tasto > .dt-tinta-segno,
.dt-segno-tasto .dt-avatar {
  --dt-corsia: var(--dt-h-md);
  width: var(--dt-h-md);
  height: var(--dt-h-md);
}
.dt-segno-tasto:hover { box-shadow: 0 0 0 2px var(--dt-surface), 0 0 0 3px var(--dt-border-strong); }
.dt-segno-tasto:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 2px; }
.dt-segno-tasto[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--dt-surface), 0 0 0 4px var(--dt-accent);
}

/* La cartella campioni: le tinte e i segni fra cui scegliere, in un riquadro
   solo — lo stesso di ogni elenco da cui si prende qualcosa (`.dt-scelte`).
   Celle piatte, a filo, divise da un filo: non cinquanta bottoni con cinquanta
   bordi ma una cartella, cioe' dei campioni affiancati dentro a una cornice.
   Il filo fra le celle lo fa un `outline` per cella su uno spazio di un pixel:
   due vicine lo disegnano nello stesso pixel, e dove una fila resta corta il
   fondo e' quello della cartella, non un buco grigio. Sul bordo l'outline
   esce dal riquadro e lo taglia l'`overflow`: la cornice resta una. */
.dt-cartella {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  overflow: hidden;
}
.dt-cartella__tinte,
.dt-cartella__icone {
  display: grid;
  gap: 1px;
  background: var(--dt-surface);
}
/* Le tinte: celle un po' piu' larghe che alte, come i campioni di una
   cartella. Quante per riga lo dice lo spazio: nella maschera media stanno in
   due file. */
.dt-cartella__tinte {
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  grid-auto-rows: 30px;
}
/* I segni: piu' di cento, in celle quadrate; la cartella si ferma a
   un'altezza che lascia vedere il resto della scheda e scorre dentro di se'.
   Sta sul fondo della tinta scelta solo nella cella scelta: cento celle tinte
   uguali sono una macchia in cui il segno preso non si trova piu'. */
.dt-cartella__icone {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  grid-auto-rows: 30px;
  max-height: clamp(150px, 30vh, 240px);
  overflow-y: auto;
  border-top: 1px solid var(--dt-border-soft);
}
.dt-cartella__cerca {
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border-top: 1px solid var(--dt-border-soft);
}
.dt-cartella__cerca:first-child { border-top: 0; }
.dt-cartella__cella {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  outline: 1px solid var(--dt-border-soft);
  background: var(--dt-surface);
  color: var(--dt-text-2);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
/* Le tinte, piene: e' un elenco di colori, e dei colori accennati si leggono
   male proprio nella cosa che devono dire. */
.dt-cartella__cella--tinta {
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
/* La cella vuota: nessun colore. La sbarra e non il bianco, perche' una cella
   bianca in una fila di colori si legge come "bianco". */
.dt-cartella__cella--nessuna {
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--dt-text-3) calc(50% - 1px),
    var(--dt-text-3) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}
/* I segni a riposo sul grigio della pagina; sotto al puntatore il fondo si
   accende appena, e il segno sale di un tono. */
.dt-cartella__cella--segno:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-cartella__cella--tinta:hover { box-shadow: inset 0 0 0 2px var(--dt-surface); }
/* La cella scelta porta addosso la faccia com'e': sulla tinta compare il
   segno scelto, in inchiostro; sul segno compare la tinta scelta (la classe
   `--tinta` sul segno la mette chi sa quale). L'anello dentro alla cella e' il
   secondo segno, per quando il primo da solo non basta a dire "presa" — una
   griglia di segni ne ha cento. */
.dt-cartella__cella--scelta,
.dt-cartella__cella--scelta:hover {
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
.dt-cartella__cella--segno.dt-cartella__cella--scelta,
.dt-cartella__cella--segno.dt-cartella__cella--scelta:hover {
  background: var(--dt-accent-soft);
  color: var(--dt-text);
}
/* Sul segno la tinta c'e' solo se e' quello scelto: gli altri restano sul
   grigio della pagina, con la tinta gia' pronta nelle variabili. */
.dt-cartella__cella--segno.dt-cartella__cella--tinta {
  background: var(--dt-surface);
  color: var(--dt-text-2);
}
.dt-cartella__cella--segno.dt-cartella__cella--tinta:hover {
  background: var(--dt-hover);
  color: var(--dt-text);
}
.dt-cartella__cella--segno.dt-cartella__cella--tinta.dt-cartella__cella--scelta,
.dt-cartella__cella--segno.dt-cartella__cella--tinta.dt-cartella__cella--scelta:hover {
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
.dt-cartella__cella:focus-visible {
  outline: 1px solid var(--dt-border-soft);
  box-shadow: inset 0 0 0 2px var(--dt-accent);
}
.dt-cartella__vuoto {
  grid-column: 1 / -1;
  padding: var(--dt-sp-4);
}
/* Un campo in piu' in coda alla cartella — la lettera di una persona — e
   sotto a tutto i nomi per esteso di quello che si e' preso: fra `glicine` e
   `lavanda` ci sono quattordici gradi, e la parola dice quale si e' presa
   meglio della cella. */
.dt-cartella__coda {
  padding: var(--dt-sp-4);
  border-top: 1px solid var(--dt-border-soft);
}
.dt-cartella__nomi {
  padding: var(--dt-sp-2) var(--dt-sp-4);
  border-top: 1px solid var(--dt-border-soft);
  background: var(--dt-surface-2);
}

/* Il compositore: la piega della bolla, sotto la fila della faccia che si
   sta componendo, sotto ancora la tavolozza da cui si prende. E' la bolla
   stessa guardata da chi la scrive: la stessa piega, la stessa fila di
   righe, e quello che si vede qui e' quello che l'operatore si trovera'
   davanti. Erano due secchi affiancati con due tavolozze sotto — quattordici
   tessere per dire sette cose — e la domanda «questa la chiedo prima o
   dopo?» si risponde girando il foglio, che e' il gesto che fara' anche lui. */
.dt-compositore {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-4);
}
.dt-compositore__sotto {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
  line-height: var(--dt-lh-normal);
}
/* Il riquadro da cui si prende, quando non c'e' piu' niente da prendere:
   una riga smorta al posto delle righe, coi fianchi di una riga. */
.dt-compositore__vuoto { display: block; padding: var(--dt-sp-3) var(--dt-riga-x); }
/* La fila riceve anche da vuota, quindi ha un'altezza sua: senza, una faccia
   senza righe sarebbe un bersaglio alto zero pixel. */
.dt-compositore__fila {
  min-height: 64px;
  border-radius: var(--dt-r-md);
  transition: background var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-compositore__fila.dt-cade--dentro {
  background: var(--dt-accent-soft);
  box-shadow: inset 0 0 0 1px var(--dt-accent-border);
}
.dt-compositore__fila .dt-empty { padding: var(--dt-sp-5) var(--dt-sp-4); }

/* La pretesa, detta con una parola accanto al punto. Il punto da solo era un
   tastino con un pallino dentro, e chi non aveva letto la mappa non sapeva
   che premerlo voleva dire «questa la pretendo»: adesso lo dice. Piatto
   dentro alla barra dei comandi come gli altri tasti; messo, prende il fondo
   d'accento e il punto si riempie d'inchiostro — lo stesso punto che si
   rivedra' sul blocco in colonna. */
.dt-pretesa {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  height: var(--dt-h-comando);
  padding: 0 var(--dt-sp-3) 0 var(--dt-sp-2);
  border: 0;
  border-radius: var(--dt-r-sm);
  background: none;
  color: var(--dt-text-3);
  font: inherit;
  font-size: var(--dt-fs-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-pretesa .dt-debito {
  position: static;
  width: 10px;
  height: 10px;
  background: none;
  border: 2px solid var(--dt-border-strong);
  box-shadow: none;
}
.dt-pretesa:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-pretesa:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: -2px; }
.dt-pretesa--messa {
  background: var(--dt-accent-soft);
  color: var(--dt-text);
}
.dt-pretesa--messa .dt-debito { background: var(--dt-accent); border-color: var(--dt-accent); }

/* Un numero non vuole un campo largo tutta la maschera: e' una cifra e la
   sua unita', e un campo largo un metro per scriverci «12» dice che ci si
   aspetta un romanzo. */
.dt-risposta-numero { max-width: clamp(160px, 50%, 260px); }

/* Le voci di una scelta, una per riga, col tastino che la toglie. */
.dt-opzione {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
}
.dt-opzione > .dt-input { flex: 1 1 auto; min-width: 0; }

/* Un extra del blocco: la voce mangia lo spazio che avanza, l'importo sta a
   misura di cifra — un prezzo largo mezza riga per cinque cifre — e la X in
   fondo cade sempre nella stessa colonna, riga dopo riga. Stessa scelta della
   riga fuori catalogo dei materiali. */
.dt-riga-costo {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
}
.dt-riga-costo > .dt-input { flex: 1 1 auto; min-width: 0; }
.dt-riga-costo > .dt-inputgroup { flex: 0 0 clamp(96px, 30%, 128px); }

/* --------------------------------------------------------------------------
   30. Il report: la ricerca e le sue clausole, lo storico, la frase, la fila
       dei blocchi, il foglio del resoconto, e come tutto questo va sulla carta
   -------------------------------------------------------------------------- */

/* La barra della ricerca: lo stesso riquadro della barra del periodo — un
   contenitore solo col filo divisorio, comandi piatti dentro — perche' sono
   la stessa cosa detta in due righe: di che periodo, di che cosa. Il campo
   della parola non ha un riquadro suo: e' una casella *della* barra, con la
   lente, e stira quanto le clausole gli lasciano. */
.dt-ricerca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dt-sp-2);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-sm);
}
.dt-ricerca__filo {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin: var(--dt-sp-2) var(--dt-sp-1);
  background: var(--dt-border);
}
.dt-ricerca__cerca {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 26rem;
  /* Alta quanto una voce del segmentato del periodo: col dito cresce con
     lei. */
  height: calc(var(--dt-h-md) - 6px);
  padding: 0 var(--dt-sp-2) 0 var(--dt-sp-3);
  border-radius: var(--dt-r-sm);
  color: var(--dt-text-3);
  cursor: text;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-ricerca__cerca:hover { color: var(--dt-text-2); }
.dt-ricerca__cerca:focus-within { background: var(--dt-surface-inset); color: var(--dt-text); }
.dt-ricerca__campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-sm);
  outline: none;
}
.dt-ricerca__campo::placeholder { color: var(--dt-text-3); }
.dt-ricerca__campo::-webkit-search-decoration,
.dt-ricerca__campo::-webkit-search-cancel-button { appearance: none; }

/* ---- Sedici pixel in ogni campo dove si scrive, dove serve ------------------

   Sotto i sedici pixel il Safari dell'iPhone ingrandisce la pagina quando un
   campo prende il fuoco, e non la rimpicciolisce piu' quando lo lascia: il
   guscio e' alto quanto lo schermo e non scorre, e resta ingrandito a meta'.
   La regola del telefono stretto (sopra, coi controlli a misura di pollice)
   lo diceva gia' per `.dt-input`, `.dt-select` e `.dt-textarea`; qui la
   stessa cosa per i campi che hanno una classe loro — la ricerca del report,
   le ore della bolla, il numero dello stepper — che venendo dopo in questo
   foglio se la riprendevano.

   Col telefono coricato la finestra e' piu' larga della soglia e la regola
   non valeva piu'. Li' la misura non basta a dire se si sta su un iPhone, e
   ingrandire i campi su ogni finestra bassa sarebbe uno scatto anche in
   ufficio: lo dice il motore stesso — `-webkit-touch-callout` lo conosce solo
   il WebKit di iPhone e iPad, cioe' proprio quello che ingrandisce. */
@media screen and (max-width: 560px) {
  .dt-ricerca__campo { font-size: 16px; }
  .dt-porta__ora,
  .dt-fascia__ora,
  .dt-stepper__campo { font-size: max(16px, var(--dt-fs-lg)); }
}
@supports (-webkit-touch-callout: none) {
  .dt-input,
  .dt-select,
  .dt-textarea,
  .dt-ricerca__campo { font-size: 16px; }
  .dt-porta__ora,
  .dt-fascia__ora,
  .dt-stepper__campo { font-size: max(16px, var(--dt-fs-lg)); }
}
.dt-ricerca__via {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: var(--dt-r-full);
  background: transparent;
  color: var(--dt-text-3);
  cursor: pointer;
}
.dt-ricerca__via:hover { background: var(--dt-hover); color: var(--dt-text); }
/* Il conto dei blocchi che passano, e «Azzera»: in fondo, di la' dal filo,
   e non si stirano. */
.dt-ricerca__conto { flex: none; margin-left: auto; font-size: var(--dt-fs-sm); color: var(--dt-text-3); white-space: nowrap; }
.dt-ricerca > .dt-btn { flex: none; }

/* Le clausole: una fila che va a capo, dentro alla barra. */
.dt-clausole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-2);
  flex: 1 1 auto;
  min-width: 0;
}

/* Una clausola: si legge come un pezzo di frase — «Negozio · e' · Tende
   Bianchi» — col campo e l'operatore smorzati e il valore in evidenza, cosi'
   una fila di clausole si scorre leggendo i valori. E' un riquadro pieno, non
   un gettone piatto: un gettone dice «acceso o spento», una clausola dice
   «c'e'», e si toglie con la ✕ che ha attaccata. */
.dt-clausola {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: calc(var(--dt-h-md) - 6px);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface-2);
  color: var(--dt-text);
  font-size: var(--dt-fs-sm);
  transition: border-color var(--dt-t-fast), background var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-clausola:hover { border-color: var(--dt-border-strong); }
.dt-clausola--aperta { border-color: var(--dt-accent); box-shadow: 0 0 0 3px var(--dt-accent-soft); }
/* Vuota: messa e non ancora riempita. Tratteggiata, e non stringe niente. */
.dt-clausola--vuota { border-style: dashed; background: transparent; }
.dt-clausola__corpo {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  padding: 0 var(--dt-sp-3);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
}
.dt-clausola__corpo--ferma { cursor: default; }
.dt-clausola__corpo > svg { flex: none; color: var(--dt-text-3); }
.dt-clausola__campo { color: var(--dt-text-2); }
.dt-clausola__op { color: var(--dt-text-3); font-style: italic; }
.dt-clausola__valore {
  font-weight: var(--dt-fw-semibold);
  max-width: 18rem;
}
.dt-clausola__valore--vuoto { font-weight: var(--dt-fw-regular); color: var(--dt-text-3); }
.dt-clausola__via {
  display: inline-grid;
  place-items: center;
  width: 24px;
  border: 0;
  border-left: 1px solid var(--dt-border-soft);
  background: transparent;
  color: var(--dt-text-3);
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-clausola__via:hover { background: var(--dt-hover); color: var(--dt-danger); }
/* «Filtro»: la clausola che non c'e' ancora. Tratteggiata come una vuota,
   senza ✕, col piu' davanti. */
.dt-clausola--nuova { border-style: dashed; background: transparent; }
.dt-clausola--nuova .dt-clausola__campo { color: var(--dt-text); font-weight: var(--dt-fw-medium); }

/* Il pannello di una clausola: lo stesso pannello dei menu, appeso sotto al
   gettone e allineato al suo bordo sinistro. Largo quanto un elenco di nomi,
   mai piu' della finestra. Da un gettone in fondo alla riga non ci sta: allora
   si sposta a sinistra quanto basta per finire dove finisce la barra — di
   quanto, lo misura `Clausola` (dt-ui, report.rs) aprendolo, perche' dove
   stia il gettone nella riga, che va a capo come capita, lo sa solo lei. */
.dt-clausola__pannello {
  top: calc(100% + var(--dt-sp-2));
  bottom: auto;
  left: var(--dt-clausola-sposta, 0px);
  right: auto;
  width: clamp(16rem, 60vw, 22rem);
  max-height: min(70vh, 26rem);
  overflow: auto;
}
.dt-clausola__pannello--campi { width: clamp(16rem, 60vw, 20rem); }
.dt-clausola__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-3) var(--dt-sp-4);
  background: var(--dt-surface-3);
  position: sticky;
  top: 0;
  z-index: 1;
}
.dt-clausola__titolo { font-weight: var(--dt-fw-semibold); font-size: var(--dt-fs-sm); }
.dt-clausola__testa .dt-segmented { flex: none; }
.dt-clausola__scelte {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-1);
  padding: var(--dt-sp-2);
}
.dt-clausola__scelte .dt-inputgroup,
.dt-clausola__scelte .dt-input,
.dt-clausola__scelte .dt-select { width: 100%; }
.dt-clausola__scelte .dt-segmented { align-self: flex-start; }
.dt-clausola__nota {
  padding: var(--dt-sp-2) var(--dt-sp-4) var(--dt-sp-3);
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
}
/* Quello che non va in quello che si e' appena scritto, sotto al campo: il
   rosso dell'errore di un campo di maschera, dentro al pannello. */
.dt-ricerca__errore {
  padding: 0 var(--dt-sp-4) var(--dt-sp-3);
  font-size: var(--dt-fs-xs);
  color: var(--dt-danger);
}
/* E' del campo di sopra, non una fascia sua: il filo che nel pannello divide
   le fasce la staccava dalla casella a cui si riferisce, e la scritta ci
   restava schiacciata sotto. */
.dt-menu > .dt-ricerca__errore { border-top: 0; }
/* Le voci del menu dei campi hanno due righe: il nome e cosa fa. */
.dt-vocecampo { align-items: flex-start; }
.dt-vocecampo > svg { margin-top: 3px; }
.dt-vocecampo__testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-vocecampo__sotto { font-size: var(--dt-fs-xs); color: var(--dt-text-3); }
.dt-clausola__pannello--campi .dt-menu__label { padding-top: var(--dt-sp-3); }

/* Una voce fra cui scegliere: una riga intera, la spunta a sinistra. La
   spunta e' un quadratino che si riempie, non una casella di modulo: qui si
   accendono nomi, non si compila. */
.dt-scelta {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  width: 100%;
  padding: var(--dt-sp-2) var(--dt-sp-3);
  border: 0;
  border-radius: var(--dt-r-sm);
  background: transparent;
  color: var(--dt-text-2);
  font: inherit;
  font-size: var(--dt-fs-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-scelta:hover { background: var(--dt-hover); color: var(--dt-text); }
.dt-scelta--si { color: var(--dt-text); }
.dt-scelta__spunta {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--dt-border-strong);
  border-radius: var(--dt-r-xs);
  background: var(--dt-surface);
  color: transparent;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast), color var(--dt-t-fast);
}
.dt-scelta--si .dt-scelta__spunta {
  background: var(--dt-accent);
  border-color: var(--dt-accent);
  color: var(--dt-text-inv);
}
.dt-scelta .dt-tinta-segno { --dt-corsia: 20px; }
.dt-scelta .dt-avatar--sm { width: 20px; height: 20px; --dt-avatar-fs: 10px; }

/* Lo storico: il tasto a fianco della barra del periodo — fuori, che e' una
   cosa sua — e il pannello appeso sotto, allineato a destra. Una voce e' la
   frase, con sotto quando; a destra i tre comandi, smorti finche' non ci si
   passa sopra. Smorti e non spariti: col dito non si passa sopra a niente, e
   un comando che si vede solo col mouse su un telefono si preme senza
   saperlo. */
.dt-storico { position: relative; flex: none; }
.dt-storico__pannello {
  top: calc(100% + var(--dt-sp-2));
  bottom: auto;
  left: auto;
  right: 0;
  width: clamp(18rem, 70vw, 30rem);
  max-height: min(70vh, 32rem);
  overflow: auto;
}
.dt-storico__voce {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  padding: 0 var(--dt-sp-2) 0 0;
  border-top: 0 !important;
}
.dt-storico__voce + .dt-storico__voce { border-top: 1px solid var(--dt-border-soft) !important; }
.dt-storico__corpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--dt-sp-3) var(--dt-sp-4);
  border: 0;
  background: transparent;
  color: var(--dt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dt-storico__voce:hover { background: var(--dt-hover); }
/* Un nome o una frase lunga va a capo, anche senza spazi: una parola che
   non ci sta allargava il pannello e lo faceva scorrere di lato. */
.dt-storico__titolo { font-size: var(--dt-fs-sm); line-height: var(--dt-lh-tight); overflow-wrap: anywhere; }
.dt-storico__voce--fissa .dt-storico__titolo { font-weight: var(--dt-fw-semibold); }
.dt-storico__sotto { font-size: var(--dt-fs-xs); color: var(--dt-text-2); }
.dt-storico__quando { font-size: var(--dt-fs-xs); color: var(--dt-text-3); }
.dt-storico__comandi {
  flex: none;
  display: inline-flex;
  gap: 2px;
  opacity: 0.55;
  transition: opacity var(--dt-t-fast);
}
.dt-storico__voce:hover .dt-storico__comandi,
.dt-storico__voce:focus-within .dt-storico__comandi,
.dt-storico__voce--fissa .dt-storico__comandi { opacity: 1; }
.dt-storico__fissa--si { color: var(--dt-accent); }
/* Elimina, premuto una volta: il secondo colpo e' quello che butta. */
.dt-storico__via--armato { color: var(--dt-danger); background: var(--dt-danger-soft); }
.dt-storico__vuoto {
  padding: var(--dt-sp-5) var(--dt-sp-4);
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
  text-align: center;
}
/* Sotto i 720px la parola cercata prende la riga intera e le clausole vanno
   sotto: e' l'unico punto in cui cambia la disposizione.
   E il pannello di una clausola non sta piu' appeso sotto al suo gettone: si
   stende sotto a tutta la barra, largo quanto lei, come il quadrante sotto al
   periodo. Lo spostamento misurato qui non conta. */
@media (max-width: 720px) {
  .dt-ricerca__cerca { flex-basis: 100%; max-width: none; }
  .dt-ricerca__filo:has(+ .dt-clausole) { display: none; }
  .dt-ricerca__conto { margin-left: 0; }
  .dt-ricerca { position: relative; }
  .dt-ricerca .dt-clausola { position: static; }
  .dt-ricerca .dt-clausola__pannello { left: 0; right: 0; width: auto; }
}
/* Il segno dentro a un gettone e' piu' piccolo della corsia di un elenco. */
.dt-gettone .dt-tinta-segno { --dt-corsia: 20px; }
.dt-gettone .dt-avatar--sm { width: 20px; height: 20px; --dt-avatar-fs: 10px; }
.dt-gettone > svg { flex: none; }

/* La barra della ricerca e, attaccata sotto, la frase: sono la stessa cosa
   scritta due volte — quello che si e' scelto, e quello che si e' scelto
   riletto in italiano — e stanno vicine quanto una didascalia sta alla sua
   figura, non a un respiro di sezione. */
.dt-filtri {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
}

/* La frase. A schermo e' la didascalia della barra sopra: piccola, che si
   legge di sguincio per controllare di aver chiesto quello che si voleva. Il
   titolo del foglio, adesso, e' il nome del periodo lassu' in cima.
   Sulla carta torna a essere un titolo, perche' lassu' non c'e' piu' niente
   da controllare e un foglio di numeri senza la frase non si sa leggere. */
.dt-frase {
  margin: 0;
  padding-left: var(--dt-sp-3);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-regular);
  line-height: var(--dt-lh-normal);
  color: var(--dt-text-3);
}
.dt-frase b { font-weight: var(--dt-fw-semibold); color: var(--dt-text-2); }
/* Come si veste sulla carta lo dice la sezione 31, con tutto il resto del
   foglio: qui la frase e' una didascalia, li' e' il titolo del prospetto. */
/* Quanto fa: un riquadro solo con le **quote**: di chi sono le ore, per
   chi, di che cosa. Tre colonne finche' ci stanno, poi una sotto l'altra.
   Una barra per riga, la lunghezza in centesimi della piu' lunga della sua
   colonna. La barra porta la tinta di chi rappresenta — la stessa del suo
   cerchietto in fila, dagli stessi `--dt-blocco-tinta` / `--dt-blocco-croma`
   in linea — e sotto non c'e' una pista: e' l'aria a dire quanto manca alla
   piu' lunga. Le attivita' una tinta non ce l'hanno, e la loro barra e'
   grigia con l'icona davanti al nome.

   Niente cifre e niente colonne delle ore qui sopra: i totali stanno in
   fondo alla tabella, e questo riquadro dice solo *di chi*, *per chi* e
   *di che cosa* sono le ore.

   La lunghezza di una barra arriva come `--dt-quota` dallo stile in linea,
   la stessa strada della tinta: il dato in linea, la misura nel foglio. */
.dt-quanto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--dt-sp-6) var(--dt-sp-9);
  padding: var(--dt-sp-6);
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-lg);
  box-shadow: var(--dt-shadow-sm);
}
.dt-quote {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  min-width: 0;
}
.dt-quote__titolo {
  margin-bottom: var(--dt-sp-1);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dt-text-3);
}
.dt-quota {
  display: grid;
  grid-template-columns: minmax(0, 8em) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dt-sp-3);
  font-size: var(--dt-fs-sm);
}
.dt-quota__nome {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-2);
  min-width: 0;
  color: var(--dt-text-2);
}
.dt-quota__nome > svg { flex: none; color: var(--dt-text-3); }
.dt-quota__testo {
  min-width: 0;
  white-space: nowrap;
}
.dt-quota__barra { min-width: 0; height: var(--dt-sp-5); }
.dt-quota__pieno {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: block;
  height: 100%;
  width: var(--dt-quota);
  min-width: var(--dt-sp-1);
  border-radius: 0 var(--dt-r-sm) var(--dt-r-sm) 0;
  background: oklch(
    calc(var(--dt-tinta-l) + var(--dt-blocco-luce, 0%))
    var(--dt-blocco-c)
    var(--dt-blocco-tinta)
  );
  transition: width var(--dt-t-med);
}
.dt-quota__pieno--nuda { background: var(--dt-border-strong); }
.dt-quota__valore {
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--dt-text);
}
.dt-quota--resto .dt-quota__nome,
.dt-quota--resto .dt-quota__valore { color: var(--dt-text-3); }
/* Quello che si legge solo sulla carta: chi ha stampato, e quando. */
.dt-solostampa { display: none; }

/* La riga di gruppo: il nome a sinistra e i subtotali sotto alle loro
   colonne. Sta sopra un filo pieno, non sotto uno tenue: non e' un blocco,
   e' la somma dei blocchi che le stanno sotto. */
.dt-table tbody tr.dt-report__gruppo td {
  background: var(--dt-surface-2);
  border-top: 1px solid var(--dt-border);
  font-weight: var(--dt-fw-semibold);
  padding-top: var(--dt-sp-3);
  padding-bottom: var(--dt-sp-3);
}
.dt-table tbody tr.dt-report__gruppo:first-child td { border-top: 0; }
.dt-report__conto {
  font-weight: var(--dt-fw-regular);
  color: var(--dt-text-3);
  margin-left: var(--dt-sp-2);
}
.dt-table tfoot tr.dt-report__totale td {
  position: sticky;
  bottom: 0;
  background: var(--dt-surface-2);
  border-top: 2px solid var(--dt-border-strong);
  font-weight: var(--dt-fw-semibold);
  padding: var(--dt-sp-4);
}
.dt-table tfoot tr.dt-report__totale td:first-child { padding-left: var(--dt-sp-5); }
/* Un viaggio o una pausa non sono blocchi: stanno in fila perche' fanno ore,
   ma smorzati, cosi' l'occhio scorre i lavori e non i buchi. */
.dt-table tbody tr.dt-report__buco td { color: var(--dt-text-3); }
.dt-table tbody tr.dt-report__blocco { cursor: pointer; }
.dt-table tbody tr.dt-report__blocco--aperto td { border-bottom: 0; background: var(--dt-selected); }
/* Un debito o una bozza: il triangolo dice cosa manca nel title. */
.dt-report__manca {
  color: var(--dt-warn);
  display: inline-flex;
  vertical-align: middle;
  margin-left: var(--dt-sp-2);
}
.dt-report__manca--nudo { margin-left: 0; }
.dt-report__vuoto { color: var(--dt-text-3); }
.dt-report__note { max-width: 18rem; display: inline-block; vertical-align: bottom; }
/* La cella di una colonna numerica lasciata alla prima riga del blocco. */

/* La riga di dettaglio: il blocco aperto, su due facce. A sinistra la
   scheda del cantiere, a destra il libro dei costi.

   Il dettaglio non e' largo quanto la tabella ma quanto la finestra su cui
   la tabella scorre, e ci resta appeso (`sticky`) quando si scorre di lato:
   undici colonne sono piu' larghe dello schermo, e un dettaglio largo quanto
   loro metteva il conto oltre il bordo destro, dove non si vede. Quanto e'
   larga la finestra lo dice il foglio, che e' il contenitore (`100cqw`); ed
   e' lui, non il dettaglio, a rispondere alle domande sulla larghezza. */
.dt-report .dt-tablewrap__foglio { container-type: inline-size; }
.dt-table tbody tr.dt-report__dettaglio td {
  padding: 0;
  white-space: normal;
  /* E' la prima cella della sua riga, e la prima cella pesa di piu' perche'
     e' il nome che si cerca: qui dentro non c'e' un nome, c'e' un blocco
     intero, e il peso lo danno le sue parti. */
  font-weight: var(--dt-fw-regular);
  background: var(--dt-surface-inset);
  box-shadow: inset 3px 0 0 var(--dt-border-strong);
}
.dt-dettaglio {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: 100cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--dt-sp-6) var(--dt-sp-8);
  padding: var(--dt-sp-5) var(--dt-sp-5) var(--dt-sp-6) calc(var(--dt-sp-5) + var(--dt-sp-3));
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
}

/* La scheda: una riga per cosa, l'etichetta a sinistra in una colonna fissa
   e il valore a destra, sempre le stesse righe nello stesso ordine. E' una
   scheda, non una griglia di riquadri: l'occhio scende lungo le etichette e
   trova ogni cosa dove l'ha trovata nel blocco prima. */
.dt-dettaglio__cantiere {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-4);
  min-width: 0;
}
.dt-dettaglio__riga {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: var(--dt-sp-5);
  align-items: baseline;
}
.dt-dettaglio__etichetta { line-height: inherit; }
.dt-dettaglio__valore {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-1);
  min-width: 0;
}
.dt-dettaglio__sotto { color: var(--dt-text-2); }
/* Una persona: la faccia, il nome che si accorcia se non ci sta, e a destra
   quando. Tre colonne di griglia, non un `inline-flex` in mezzo a un
   discorso: un inline non stringe, e un nome lungo con di fianco un orario
   usciva dalla sua colonna e finiva sopra alla vicina. */
.dt-presenza {
  display: grid;
  grid-template-columns: auto minmax(0, max-content) auto;
  justify-content: start;
  align-items: center;
  column-gap: var(--dt-sp-2);
}
.dt-presenza__nome {
  min-width: 0;
  white-space: nowrap;
}
.dt-presenza__quando {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  white-space: nowrap;
}
.dt-presenza--fuori { color: var(--dt-text-3); }
.dt-presenza--fuori .dt-avatar { opacity: 0.55; }
/* Le righe della posa: il tendaggio, la fase, il numero. Le colonne stanno
   attaccate a sinistra — il numero segue la parola, non va al bordo destro
   di una colonna larga mezzo schermo — e restano incolonnate fra le righe. */
.dt-dettaglio__righe {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto auto;
  justify-content: start;
  gap: var(--dt-sp-1) var(--dt-sp-4);
  align-items: baseline;
}
.dt-dettaglio__righe .dt-td--num { padding: 0; }
.dt-dettaglio__fase { color: var(--dt-text-3); font-size: var(--dt-fs-xs); }
/* Le risposte alle domande: la domanda smorzata davanti, la risposta di
   seguito. Una riga di testo che va a capo come una frase — una risposta
   puo' essere lunga — e un nome di file senza spazi va a capo lo stesso,
   invece di allargare la scheda. Il documento e' un collegamento come gli
   altri. */
.dt-dettaglio__risposta { min-width: 0; overflow-wrap: anywhere; }
.dt-dettaglio__domanda { color: var(--dt-text-3); }

/* Il libro: un foglio appoggiato sul fondo della riga, coi reparti in
   maiuscolo, le righe coi puntini che portano l'occhio dal nome alla cifra,
   e il costo in fondo sopra al filo pieno. E' lo stesso dialetto dello
   scontrino della scheda del blocco (sezione 32), senza la carta strappata:
   qui non e' una finestra, e' una riga fra le righe. Le cifre in tabellare
   e in colonna: la colonna e' larga quanto la cifra piu' larga. */
.dt-libro {
  align-self: start;
  min-width: 0;
  padding: var(--dt-sp-4) var(--dt-sp-5) var(--dt-sp-5);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
  font-variant-numeric: tabular-nums;
}
.dt-libro__reparto,
.dt-libro__riga,
.dt-libro__totale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--dt-sp-3);
  align-items: baseline;
}
.dt-libro__reparto {
  padding: var(--dt-sp-2) 0 var(--dt-sp-1);
  border-bottom: 1px solid var(--dt-border-soft);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dt-libro__riga + .dt-libro__reparto,
.dt-libro__reparto + .dt-libro__reparto { margin-top: var(--dt-sp-4); }
.dt-libro__reparto--vuoto { color: var(--dt-text-3); }
.dt-libro__riga { padding: var(--dt-sp-1) 0; }
.dt-libro__reparto + .dt-libro__riga { padding-top: var(--dt-sp-2); }
.dt-libro__riga--prevista { color: var(--dt-text-3); }
.dt-libro__nome {
  display: flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  min-width: 0;
}
/* Il nome va a capo se e' lungo: e' un report, si legge per intero. L'inciso
   gli sta attaccato in coda e segue il testo, non la riga. */
.dt-libro__voce { min-width: 0; overflow-wrap: anywhere; }
.dt-libro__inciso {
  margin-left: var(--dt-sp-2);
  color: var(--dt-text-3);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.dt-libro__punti {
  flex: 1 1 auto;
  min-width: 2ch;
  border-bottom: 1px dotted var(--dt-conto-punti);
  transform: translateY(-0.3em);
}
.dt-libro__importo {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  justify-content: flex-end;
  color: var(--dt-text);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.dt-libro__reparto .dt-libro__importo { font-weight: var(--dt-fw-medium); }
.dt-libro__reparto--vuoto .dt-libro__importo,
.dt-libro__riga--prevista .dt-libro__importo { color: var(--dt-text-3); }
.dt-libro__importo .dt-report__manca { margin-left: 0; }
.dt-libro__totale {
  margin-top: var(--dt-sp-5);
  padding-top: var(--dt-sp-3);
  border-top: 1px solid var(--dt-border-strong);
  font-weight: var(--dt-fw-semibold);
}
.dt-libro__totale .dt-libro__importo {
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-bold);
}

/* Stretto — la finestra del telefono, o una colonna sola — le due facce si
   mettono una sotto l'altra, e nella scheda l'etichetta sale sopra al
   valore. La domanda e' al foglio, che e' quanto e' largo il dettaglio. */
@container (max-width: 44rem) {
  .dt-dettaglio { grid-template-columns: minmax(0, 1fr); }
  .dt-dettaglio__riga { grid-template-columns: minmax(0, 1fr); row-gap: var(--dt-sp-1); }
}

/* Il menu di stampa: lo stesso pannello della barra laterale, ma appeso
   sotto al tasto e non sopra. */
.dt-report__stampa { position: relative; }
/* Ed esce dalla scheda, che a schermo taglia ai suoi angoli: con una riga
   sola in tabella la scheda e' piu' bassa del menu, e «Copia negli appunti»
   restava tagliata a meta' — un clic sulla meta' nascosta chiudeva il menu
   senza copiare. Gli angoli li tagliano allora le due parti che hanno un
   fondo, la testata e la tabella, e la scheda lascia uscire il menu. */
.dt-card:has(.dt-report__stampa) { overflow: visible; }
.dt-card:has(.dt-report__stampa) > .dt-card__head {
  border-radius: calc(var(--dt-r-lg) - 1px) calc(var(--dt-r-lg) - 1px) 0 0;
}
.dt-card:has(.dt-report__stampa) .dt-tablewrap--binario {
  overflow: clip;
  border-radius: 0 0 calc(var(--dt-r-lg) - 1px) calc(var(--dt-r-lg) - 1px);
}
/* «Raggruppa per» e «Righe» al telefono scorrono dentro di se' (sezione 28):
   il bordo da cui continuano sfuma, come le scritte che non ci stanno, se no
   «Giorno» stava oltre il bordo senza niente che lo dicesse. Dove ci stanno
   non scorrono, e la sfumatura non c'e'. Solo dove c'e' la timeline: senza,
   l'animazione durerebbe zero e terrebbe il fotogramma d'arrivo per sempre,
   col bordo sinistro sfumato anche a controllo fermo. */
@supports (animation-timeline: scroll()) {
  .dt-report__comandi .dt-segmented {
    animation: dt-sfuma-lati linear both;
    animation-timeline: scroll(self inline);
  }
}
.dt-report__stampa .dt-menu {
  top: calc(100% + var(--dt-sp-2));
  bottom: auto;
  left: auto;
  right: 0;
  min-width: 16rem;
}

/* La stampa: via il pannello dei filtri (dt-nostampa), via i comandi, e la
   riga di dettaglio esce solo se la si e' chiesta. Le due classi sul body le
   mette la schermata un istante prima di stampare e le toglie subito dopo:
   `dt-stampa-dettagli` per il modo scelto nel menu, `dt-stampa-per-gruppo`
   per la voce «Una pagina per gruppo», accesa nello stesso menu, che vale
   per tutti e due i modi. */
@media print {
  .dt-report__comandi { display: none !important; }
  .dt-solostampa { display: block; }
  tr.dt-report__dettaglio { display: none; }
  body.dt-stampa-dettagli tr.dt-report__dettaglio { display: table-row; }
  /* Il dettaglio resta attaccato alla sua riga: senza, cominciava in cima
     alla pagina dopo, sotto a «Chi c'era», senza piu' la data ne' il nome
     del lavoro a cui apparteneva. */
  body.dt-stampa-dettagli tr.dt-report__blocco--aperto { break-after: avoid; }
  body.dt-stampa-per-gruppo tbody tr.dt-report__gruppo { break-before: page; }
  body.dt-stampa-per-gruppo tbody tr.dt-report__gruppo:first-child { break-before: auto; }
  .dt-table tbody tr.dt-report__blocco--aperto td { background: none; }
  .dt-table tbody tr.dt-report__dettaglio td { background: none; box-shadow: none; border-bottom: 1px solid var(--dt-border); }
  .dt-table tbody tr.dt-report__gruppo td { background: none; }
  .dt-table tfoot tr.dt-report__totale td { position: static; background: none; }
  .dt-report .dt-tablewrap { border: 0; overflow: visible; }
  /* A capo la prosa, non le cifre: una cella «337h 20m» spezzata in due
     righe non si legge piu' come un numero (la regola delle cifre sta nella
     sezione 31, e questa qui, piu' pesante, la scavalcava). */
  .dt-report .dt-table tbody td:not(.dt-td--num),
  .dt-report .dt-table thead th { white-space: normal; }
  .dt-ricerca, .dt-storico { display: none !important; }
}

/* --------------------------------------------------------------------------
   31. La carta: com'e' fatto il foglio che esce dalla stampante
   --------------------------------------------------------------------------

   Sul foglio non ci va la schermata scolorita: ci va un prospetto.

   A schermo il dato si riconosce dalla grafica — il cerchietto colorato e' una
   persona, il quadretto e' un negozio, il triangolo giallo e' qualcosa che
   manca, il riquadro tiene insieme un pezzo di pagina. Stampata, quella
   grafica non funziona piu': il colore in bianco e nero e' quattro grigi che
   si somigliano, il cerchietto diventa un anello con dentro una lettera, il
   triangolo non si puo' interrogare col mouse, i riquadri sono cornici intorno
   al niente. Quindi qui la grafica si scioglie in testo, e la pagina torna
   quella di sempre: intestazione, prospetto delle cifre, tabella, totali.

   Tre regole reggono il foglio.

   1. **Un solo inchiostro.** Niente campiture, niente cornici, niente smussi:
      a tenere insieme la pagina sono i fili e il bianco. Quello che a schermo
      si distingue col colore, sulla carta si distingue col peso e col posto.
   2. **Quello che il disegno diceva, la carta lo scrive.** Il nome della
      persona sotto al cerchietto e' gia' nella pagina: e' l'etichetta che la
      faccia dice a chi si fa leggere lo schermo (`aria-label`), e sul foglio
      diventa il testo della cella — la carta e la voce hanno lo stesso
      problema, che il disegno non lo sanno guardare. Dove invece a parlare era
      un `title` da interrogare col mouse resta un asterisco, con la sua
      legenda in fondo.
   3. **La misura e' quella della carta.** La scala tipografica dello schermo
      scorre con la larghezza della finestra (`clamp` su `vw`), e su un A4 non
      vuol dire niente: qui le stesse variabili sono in punti, scritte una
      volta sola, e tutto quello che le usa — tabella, cifre, titoli — cala
      insieme e in proporzione.

   La tabella e' la cosa che deve starci per intero. A schermo scorre di lato
   dentro al suo riquadro; sulla carta quel che sporge non scorre, si perde — e
   a sporgere erano le colonne dei numeri, che stanno in fondo. Per questo il
   corpo scende, i margini delle celle si stringono e il testo va a capo: una
   riga alta due righe si legge, una colonna che non e' stata stampata no.
   -------------------------------------------------------------------------- */

@media print {
  /* Il foglio. I margini di lato sono stretti apposta: ogni millimetro di
     margine e' una colonna in meno che ci sta, e un prospetto e' fatto di
     colonne. Sopra e sotto restano larghi, che li' ci va la pinzatura e
     l'intestazione della stampante. */
  @page {
    size: A4 portrait;
    margin: 14mm 10mm 15mm;
  }

  /* Il tema si spegne: la stampa e' nera su bianco anche a schermo scuro, che
     sulla carta sarebbe illeggibile e svuoterebbe la cartuccia. */
  :root,
  [data-theme] {
    /* Un inchiostro solo. I fondi non si stampano comunque — li toglie il
       browser — ma dichiararli bianchi evita che chi accende «grafica di
       sfondo» si ritrovi la zebratura dello schermo sul foglio. */
    --dt-bg: #fff;
    --dt-surface: #fff;
    --dt-surface-2: #fff;
    --dt-surface-3: #fff;
    --dt-surface-inset: #fff;
    --dt-zebra: transparent;
    --dt-hover: transparent;
    --dt-selected: transparent;
    --dt-text: #000;
    --dt-text-2: #333;
    --dt-text-3: #5a5a5a;
    /* I fili: quello fra due righe tenue, quello che divide una parte dalla
       successiva nero. Il grigio chiaro dello schermo, stampato, e' una riga
       che non c'e'. */
    --dt-border: #9a9a9a;
    --dt-border-soft: #c9c9c9;
    --dt-border-strong: #000;
    --dt-shadow-sm: none;
    --dt-shadow-md: none;
    --dt-shadow-lg: none;
    /* Lo smusso e' il modo di dire «questo e' un oggetto dell'interfaccia»:
       sulla carta non ci sono oggetti. */
    --dt-r-xs: 0;
    --dt-r-sm: 0;
    --dt-r-md: 0;
    --dt-r-lg: 0;
    /* La scala in punti: da qui in giu' tutto e' misurato per la carta. */
    --dt-fs-xs: 7pt;
    --dt-fs-sm: 8pt;
    --dt-fs-md: 8.5pt;
    --dt-fs-lg: 10pt;
    --dt-fs-xl: 12pt;
    --dt-fs-2xl: 14pt;
    --dt-fs-3xl: 17pt;
    --dt-lh-normal: 1.3;
    --dt-pad-body: 0;
  }

  body {
    background: #fff;
    color: #000;
    font-size: var(--dt-fs-md);
  }
  .dt-app__body { padding: 0; }

  /* Le superfici si sciolgono: quello che era un riquadro diventa una parte
     del foglio, staccata dalla successiva dal bianco e basta. */
  .dt-card,
  .dt-kpi,
  .dt-panel,
  .dt-tablewrap,
  .dt-tablewrap__foglio,
  .dt-card__body,
  .dt-card__body--flush {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    overflow: visible;
  }
  /* Il binario e l'ancora sono cose dello schermo: sulla carta la tabella e'
     tutta, e non scorre. */
  .dt-tablewrap__binario,
  tr.dt-ancora { display: none !important; }
  /* La scheda che porta il binario a schermo taglia ai suoi angoli
     (`overflow: clip`, sezione 12), e quella regola pesa piu' del riquadro
     sciolto qui sopra: sulla carta tagliava le colonne che sporgono — con
     dodici colonne accese Costo, Benzina ed Extra finivano oltre il bordo,
     senza avviso. Qui non taglia, e il browser rimpicciolisce il foglio
     finche' la tabella ci sta.
     E non si tiene intera: una tabella di cento righe non ci sta in una
     pagina, e «tutta insieme» voleva dire cominciarla a pagina due lasciando
     la prima mezza vuota. Si spezza fra le righe come un prospetto. */
  .dt-card:has(.dt-tablewrap--binario) {
    overflow: visible;
    break-inside: auto;
  }
  .dt-card:has(.dt-report__stampa) .dt-tablewrap--binario {
    overflow: visible;
    border-radius: 0;
  }
  .dt-card__head {
    padding: 0 0 var(--dt-sp-3);
    border: 0;
    background: none;
  }
  .dt-card__title {
    font-size: var(--dt-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .dt-card__sub { font-size: var(--dt-fs-xs); color: var(--dt-text-3); }
  /* Nel report la testatina del riquadro e' un doppione: «Blocchi — 21
     blocchi, 0 fra viaggi e pause» la frase due righe piu' su lo dice gia', e
     a dire cosa c'e' in colonna ci pensa la testata della tabella. */
  .dt-report .dt-card__head { display: none; }

  /* Un avviso e' una nota, non un riquadro giallo: sulla carta il colore che
     lo faceva notare non c'e', e resta solo la cornice. */
  .dt-alert {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--dt-text-2);
    font-size: var(--dt-fs-sm);
    gap: var(--dt-sp-2);
  }
  .dt-alert__icon { display: none; }
  .dt-alert__title { color: #000; }

  /* ---- L'intestazione del foglio ---------------------------------------- */

  /* Chi lo stampa e quando: una riga spaziata sopra a un filo nero, come la
     testatina di un documento. E' l'unica cosa che sulla carta c'e' e a
     schermo no. */
  .dt-carta__testa {
    color: #000;
    font-size: var(--dt-fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: var(--dt-sp-3);
    border-bottom: 1px solid var(--dt-border-strong);
  }

  /* La frase e' il titolo del foglio, ed e' l'unica riga che si legge come
     prosa: col grazie della carta, non col carattere dell'interfaccia. */
  .dt-frase { font-family: var(--dt-font-carta); }
  .dt-frase {
    padding-left: 0;
    font-size: var(--dt-fs-2xl);
    line-height: var(--dt-lh-tight);
    color: #000;
  }
  .dt-frase b { color: #000; }

  /* Quanto fa: il riquadro si scioglie nel foglio, e restano le tre colonne
     delle quote, in un inchiostro solo: le barre nere e basse — la tinta di
     chi rappresentano sparisce come sparisce dal cerchietto, e resta il
     nome. */
  .dt-quanto {
    padding: var(--dt-sp-5) 0 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    break-inside: avoid;
  }
  .dt-quota__barra { height: var(--dt-sp-3); }
  /* La barra e' un fondo, e i fondi il browser di suo non li stampa
     («grafica di sfondo» e' spenta di partenza): restava una colonna vuota.
     Questa si stampa comunque, perche' non e' un fondo: e' il dato. */
  .dt-quota__pieno {
    background: #000;
    border-radius: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .dt-quota__nome, .dt-quota__valore, .dt-quote__titolo { color: #000; }
  .dt-quota--resto .dt-quota__nome,
  .dt-quota--resto .dt-quota__valore { color: var(--dt-text-3); }

  /* ---- La tabella -------------------------------------------------------- */

  .dt-table { font-size: var(--dt-fs-sm); }
  /* La testata si ripete in cima a ogni pagina: dalla seconda in poi una
     colonna di numeri senza il suo titolo non si sa piu' leggere. Lo
     spostamento che a schermo la tiene in vista sulla carta non c'e'. */
  .dt-table thead { display: table-header-group; }
  .dt-table thead th {
    position: static;
    background: none;
    color: #000;
    padding: var(--dt-sp-2);
    border-top: 1px solid var(--dt-border-strong);
    border-bottom: 1px solid var(--dt-border-strong);
    white-space: normal;
  }
  /* Il totale invece esce una volta sola, in fondo: come piede di tabella il
     browser lo ripeteva in fondo a ogni pagina, e con «Una pagina per
     gruppo» sotto a una riga sola di Luca si leggeva il totale di tutti come
     se fosse il suo. */
  .dt-table tfoot { display: table-row-group; }
  .dt-tablewrap--binario .dt-table thead th,
  .dt-tablewrap--binario .dt-table tfoot td { transform: none; animation: none; }
  .dt-table tbody td {
    padding: var(--dt-sp-2);
    border-bottom: 1px solid var(--dt-border-soft);
    vertical-align: top;
    background: none;
  }
  /* Il foglio comincia al margine: la prima e l'ultima colonna non hanno il
     rientro che a schermo le stacca dal bordo del riquadro. */
  .dt-table thead th:first-child,
  .dt-table tbody td:first-child { padding-left: 0; }
  .dt-table thead th:last-child,
  .dt-table tbody td:last-child { padding-right: 0; }
  .dt-table tbody tr:last-child td { border-bottom: 1px solid var(--dt-border-soft); }
  /* Le date, gli orari e le cifre non vanno a capo: «11:00–11:45» spezzato in
     due righe non e' piu' un orario, e una colonna di numeri mandata a capo
     non si somma piu' con l'occhio. A capo ci va la prosa — i nomi, gli
     indirizzi, le note — che e' quello che allarga la tabella. */
  .dt-table td > .dt-mono,
  .dt-table td.dt-td--num,
  .dt-table th.dt-th--num { white-space: nowrap; }
  /* Le date, gli orari e i codici scendono di un gradino: sono i riferimenti
     della riga, non quello che si legge, e in monospazio occupano piu' del
     doppio di una parola della stessa lunghezza — quella larghezza serve ai
     nomi, che sono la parte che va a capo. */
  .dt-table td > .dt-mono,
  .dt-table td.dt-td--num { font-size: var(--dt-fs-xs); }

  /* La riga di gruppo: un filo nero sopra e il nome in evidenza, che e' come
     si stacca una sezione di un prospetto senza campirla. */
  .dt-table tbody tr.dt-report__gruppo td {
    border-top: 1px solid var(--dt-border-strong);
    border-bottom: 0;
    padding-top: var(--dt-sp-3);
    padding-bottom: var(--dt-sp-2);
  }
  /* Il totale porta il filo doppio del registro: e' la convenzione con cui una
     somma si stacca dalle righe che l'hanno fatta, e non chiede colore. */
  .dt-table tfoot tr.dt-report__totale td {
    border-top: 3px double var(--dt-border-strong);
    padding: var(--dt-sp-3);
  }
  .dt-table tfoot tr.dt-report__totale td:first-child { padding-left: 0; }
  .dt-table tfoot tr.dt-report__totale td:last-child { padding-right: 0; }

  /* ---- Il disegno che diventa testo -------------------------------------- */

  /* Le facce, le campiture, i segni delle attivita': a schermo dicono chi e
     cosa, sulla carta sono anelli e quadretti grigi. Spariscono, e resta
     quello che dicevano. */
  .dt-avatar,
  .dt-tinta-segno,
  .dt-facce__resto,
  .dt-table svg,
  .dt-dettaglio svg { display: none !important; }
  /* Il nome e' l'etichetta che la faccia dice gia' a chi si fa leggere la
     pagina: sul foglio diventa il testo della cella. */
  .dt-faccia[aria-label]::after,
  .dt-facce[aria-label]::after { content: attr(aria-label); }
  /* Dentro a una fila il nome lo dice la fila, e dentro a una riga di
     dettaglio e' gia' scritto di fianco: li' la faccia esce e basta, se no il
     nome si stampa due volte. */
  .dt-facce .dt-faccia,
  .dt-faccia .dt-faccia,
  .dt-presenza .dt-faccia { display: none; }

  /* Lo stato di un blocco e le targhette dei materiali: la pillola era il modo
     di dirlo in mezzo a una riga colorata. Sulla carta e' un inciso. */
  .dt-stato,
  .dt-badge {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--dt-text-2);
    font-size: var(--dt-fs-xs);
    font-weight: var(--dt-fw-regular);
    opacity: 1;
  }
  .dt-stato::before { content: "· "; }
  .dt-badge::before { content: "("; }
  .dt-badge::after { content: ")"; }

  /* Il triangolo dice «qui manca qualcosa», e cosa manca lo dice il `title`,
     che sulla carta non si puo' chiedere. Resta il segno che da sempre vuol
     dire «vedi sotto»: l'asterisco, con la sua legenda in fondo al foglio. */
  .dt-report__manca {
    display: inline;
    color: #000;
    margin-left: 0;
  }
  .dt-report__manca::after {
    content: "*";
    font-weight: var(--dt-fw-bold);
  }
  .dt-carta__legenda {
    margin-top: var(--dt-sp-3);
    font-size: var(--dt-fs-xs);
    color: var(--dt-text-2);
  }

  /* Niente da scorrere: una cella tagliata a schermo si allarga scorrendo di
     lato, sul foglio no. Quello che non sta in riga va a capo — vale anche per
     i nomi delle quote, delle presenze e del conto, che a schermo scorrono. */
  .dt-truncate,
  .dt-report__note,
  .dt-faccia__nome,
  .dt-quota__testo,
  .dt-presenza__nome,
  .dt-conto__voce {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    max-width: none;
  }

  /* La riga di dettaglio (stampa «con i dettagli»): rientrata sotto al suo
     blocco, senza la campitura e senza il filo spesso che a schermo la tengono
     attaccata alla riga di sopra. Sul foglio non c'e' niente da scorrere: e'
     larga quanto la riga, e le due facce restano una accanto all'altra. Il
     libro perde il riquadro, e resta il conto. */
  .dt-table tbody tr.dt-report__dettaglio td {
    padding: 0;
    box-shadow: none;
  }
  .dt-dettaglio {
    position: static;
    width: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--dt-sp-4) var(--dt-sp-7);
    padding: var(--dt-sp-3) 0 var(--dt-sp-4) var(--dt-sp-6);
    font-size: var(--dt-fs-xs);
    break-inside: avoid;
  }
  .dt-dettaglio__riga { grid-template-columns: 6rem minmax(0, 1fr); }
  .dt-libro {
    padding: 0;
    border: 0;
    background: none;
  }
  .dt-libro__importo,
  .dt-libro__totale .dt-libro__importo { font-size: var(--dt-fs-xs); }
}

/* --------------------------------------------------------------------------
   32. I soldi fermati: il libro dei costi di un blocco, e il prezzo nel tempo
   -------------------------------------------------------------------------- */

/* Il libro dei costi e' uno scontrino, e lo sembra: una striscia di carta
   stretta, strappata sopra e sotto, appoggiata sul banco della maschera.
   Tutto a passo fisso — e' quello che esce da una stampante termica — con le
   cifre in colonna a destra e i puntini che portano l'occhio dal nome
   all'importo. In testa chi e dove, come l'insegna; in fondo, sopra al filo
   pieno, il totale; poi i quattro addendi come la tabella dell'IVA, e il
   codice a barre col numero del blocco.

   Non ci sono sezioni: i quattro gruppi sono quattro righe in maiuscolo,
   come i reparti, e i loro numeri stanno tutti insieme in fondo. Chi legge
   il libro ritrova i quattro numeri del report in un posto solo.

   E' un elenco: i prezzi sono scritti, sotto al nome, e a correggerli e' la
   matita a margine. Premuta, il campo prende il posto del numero sulla sua
   riga — che e' alta gia' quanto il campo, cosi' niente si sposta — e la
   matita diventa la spunta, nello stesso punto. */
.dt-conto {
  /* Il passo del dente dello strappo: largo cosi', alto la meta'. */
  --dt-conto-dente: 10px;
  /* Il margine delle correzioni: la colonna a destra degli importi dove
     stanno le matite, come quella delle aliquote sugli scontrini veri. E'
     larga quanto il tastino da scrivania piu' il suo stacco dal numero, e
     lo resta anche col dito: li' il tasto e' piu' grande del segno, e
     sborda nel vuoto intorno — lo stacco davanti, il bordo della carta
     dietro — invece di togliere una colonna al nome. Gli addendi e il
     totale la lasciano vuota, cosi' tutti i numeri stanno in una colonna. */
  --dt-conto-margine: calc(var(--dt-h-sm) + var(--dt-sp-5));
  width: min(100%, 420px);
  margin: 0 auto;
  color: var(--dt-text);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
  line-height: var(--dt-lh-normal);
  /* L'ombra segue lo strappo: un `box-shadow` sulla carta verrebbe tagliato
     dalla maschera insieme a lei, il filtro sta fuori e la ricalca. Sta
     libera sul banco della maschera (`.dt-modal__backdrop--banco`): il fondo
     scuro e' il banco, e l'ombra e' quello che la stacca da li'. */
  filter: drop-shadow(var(--dt-conto-ombra));
  /* Quanto e' larga lo sa lei: il campo del prezzo si misura sulla carta,
     non sulla finestra. */
  container-type: inline-size;
}
/* La carta: i due strappi sono una maschera a tre strati — i denti in cima
   (puntano su), i denti in fondo (puntano giu'), e il pieno in mezzo. Ogni
   dente e' un cono di novanta gradi centrato sul bordo della sua tessera. */
.dt-conto__carta {
  padding: calc(var(--dt-conto-dente) + var(--dt-sp-7)) var(--dt-sp-8);
  background: var(--dt-conto-carta);
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg)
      top / var(--dt-conto-dente) calc(var(--dt-conto-dente) / 2) repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg)
      bottom / var(--dt-conto-dente) calc(var(--dt-conto-dente) / 2) repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - var(--dt-conto-dente)) no-repeat;
}

/* ---- L'insegna ------------------------------------------------------------ */

/* Chi e dove, centrati come sulla carta della cassa: l'attivita' in
   maiuscolo spaziato, sotto il posto, poi la data e il numero. Chiude un
   filo tratteggiato, che e' il segno di riga di ogni scontrino. */
.dt-conto__testa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-sp-1);
  padding-bottom: var(--dt-sp-5);
  margin-bottom: var(--dt-sp-5);
  border-bottom: 1px dashed var(--dt-conto-filo);
  text-align: center;
}
.dt-conto__insegna {
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dt-conto__dove { color: var(--dt-text-2); }
.dt-conto__quando {
  margin-top: var(--dt-sp-3);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  letter-spacing: 0.08em;
}

/* ---- I reparti e le righe --------------------------------------------------- */

.dt-conto__gruppo { display: flex; flex-direction: column; }
.dt-conto__gruppo + .dt-conto__gruppo { margin-top: var(--dt-sp-5); }
.dt-conto__titolo {
  padding-bottom: var(--dt-sp-1);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Due righe: sopra il nome, i puntini, l'importo e la matita a margine;
   sotto, rientrata, la quantita' per il prezzo. Tre colonne: quello che
   avanza al nome, l'importo largo quanto la cifra, il margine.
   Alta almeno quanto il tasto della matita, e con dentro una riga sola la
   riga sta in mezzo: col dito due extra in fila hanno due tasti da quaranta
   che si toccano, non che si coprono. Con due righe l'altezza c'e' gia'. */
.dt-conto__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto calc(var(--dt-conto-margine) - var(--dt-sp-3));
  column-gap: var(--dt-sp-3);
  align-items: baseline;
  align-content: center;
  min-height: calc(var(--dt-h-comando) + 2 * var(--dt-sp-1));
  padding: var(--dt-sp-1) 0;
}
/* Una riga di due dopo una riga sola — un extra previsto, con la sua nota,
   dopo quelli del resoconto: col dito il suo tasto sborda sopra al nome, e
   finirebbe sul tasto della riga di prima, che la sua riga la riempie. Qui
   la riga gli fa posto in cima; dopo una riga di due sopra c'e' il vuoto
   della riga sotto, e il posto c'e' gia'. */
.dt-conto__riga:not(:has(> .dt-conto__sotto)) + .dt-conto__riga:has(> .dt-conto__sotto) {
  padding-top: max(var(--dt-sp-1), (var(--dt-h-comando) - var(--dt-lh-normal) * 1em) / 2);
}
.dt-conto__nome {
  display: flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  min-width: 0;
}
.dt-conto__voce { white-space: nowrap; }
/* I puntini fra il nome e l'importo: si allungano quanto serve, e sotto
   a un nome lungo restano almeno due. */
.dt-conto__punti {
  flex: 1 1 auto;
  min-width: 2ch;
  border-bottom: 1px dotted var(--dt-conto-punti);
  transform: translateY(-0.3em);
}
.dt-conto__importo {
  text-align: right;
  font-weight: var(--dt-fw-medium);
  white-space: nowrap;
}
/* Il margine: alto una riga di testo e in mezzo alla riga del nome — anche
   quando al posto del nome c'e' il campo, che e' piu' alto — e il tasto ci
   sta centrato dentro. Col dito il tasto e' piu' grande della sua cella e
   sborda tutto intorno in parti uguali: la riga non cresce per lui. */
.dt-conto__margine {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dt-h-sm);
  height: calc(var(--dt-lh-normal) * 1em);
}
/* La matita a riposo e' un segno leggero, come la matita sulla carta; si
   scurisce passandoci sopra, e premuta — quando e' la spunta — e' piena. */
.dt-conto__matita { flex: none; color: var(--dt-text-3); }
.dt-conto__riga:hover .dt-conto__matita,
.dt-conto__riga--aperta .dt-conto__matita { color: var(--dt-text); }
/* La riga sotto: alta quanto il campo anche quando dentro c'e' solo il
   numero scritto, cosi' la matita premuta non alza niente. Non entra nel
   margine: la' sborda il tasto della matita, e sopra di lui non ci va
   niente che gli rubi il tocco. */
.dt-conto__sotto {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dt-sp-1) var(--dt-sp-3);
  min-height: var(--dt-h-md);
  padding-left: 2ch;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
}
.dt-conto__nota { color: var(--dt-text-3); }
/* Fra la nota e il conto un punto, se no «08:30-10:00 1h 30» si legge tutto
   attaccato. */
.dt-conto__nota:has(+ .dt-conto__conto)::after { content: "\00b7"; margin-left: var(--dt-sp-3); }
.dt-conto__conto { display: inline-flex; align-items: center; gap: var(--dt-sp-2); white-space: nowrap; }
/* Il campo al posto del numero: stretto quanto un prezzo, non quanto un
   campo qualunque, e su una carta stretta si stringe con lei — se no la
   matita andrebbe a capo e la riga crescerebbe. Alto quanto la riga che lo
   ospita, bordo compreso. */
.dt-conto__prezzo > .dt-inputgroup { width: clamp(84px, 26cqw, 124px); }
.dt-conto__importo > .dt-inputgroup { width: 108px; }
.dt-conto__nome > .dt-input { min-width: 0; }
.dt-conto .dt-input { font-family: var(--dt-font-mono); }
.dt-conto__sotto .dt-inputgroup .dt-input { height: calc(var(--dt-h-md) - 2px); }
/* «Togli», sulla riga sotto di un extra aperto: scritto come «Un altro
   extra» che lo aggiunge — il segno davanti e la parola — e rosso solo
   quando ci si passa sopra. */
.dt-conto__togli {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-2);
  min-height: var(--dt-h-md);
  padding: 0;
  border: 0;
  background: none;
  color: var(--dt-text-3);
  font: inherit;
  cursor: pointer;
}
.dt-conto__togli:hover { color: var(--dt-danger); }
/* Quello che non conta e' stampato piu' chiaro, tutto. */
.dt-conto__riga--fuori .dt-conto__voce,
.dt-conto__riga--fuori .dt-conto__sotto,
.dt-conto__riga--fuori .dt-conto__importo { color: var(--dt-text-3); }
.dt-conto__riga--fuori .dt-conto__importo { font-weight: var(--dt-fw-regular); }
/* La riga che aggiunge un extra: sulla carta e' una riga di testo col
   piu' davanti, non un riquadro tratteggiato. */
.dt-conto__riga--libera { display: block; padding: 0; }
.dt-conto .dt-via-uscita--riga {
  min-height: var(--dt-h-md);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--dt-text-3);
  font-family: inherit;
}
.dt-conto .dt-via-uscita--riga:hover:not(:disabled) { background: none; color: var(--dt-text); }
.dt-conto .dt-via-uscita__nome { font-size: var(--dt-fs-xs); font-weight: var(--dt-fw-regular); }

/* ---- In fondo -------------------------------------------------------------- */

/* I quattro addendi, come la tabella dell'IVA sotto all'extra: piccoli,
   sopra a un filo tratteggiato. */
.dt-conto__riepilogo {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-1);
  margin-top: var(--dt-sp-6);
  padding-top: var(--dt-sp-4);
  padding-right: var(--dt-conto-margine);
  border-top: 1px dashed var(--dt-conto-filo);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
}
.dt-conto__addendo { display: flex; justify-content: space-between; gap: var(--dt-sp-3); }
/* Il totale: sopra un filo pieno, in maiuscolo, il numero grande. */
.dt-conto__totale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--dt-sp-4);
  margin-top: var(--dt-sp-4);
  padding-top: var(--dt-sp-4);
  padding-right: var(--dt-conto-margine);
  border-top: 2px solid var(--dt-text);
  font-weight: var(--dt-fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dt-conto__totale b { font-size: var(--dt-fs-xl); letter-spacing: 0; }
/* Il codice a barre: le barre le disegna il numero del blocco, e sotto c'e'
   scritto. Non lo legge nessuna pistola: dice che questa carta e' di quel
   blocco, come sullo scontrino. */
.dt-conto__codice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-sp-2);
  margin-top: var(--dt-sp-8);
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  letter-spacing: 0.2em;
}
.dt-conto__barre { display: flex; align-items: stretch; height: 26px; }
.dt-conto__barre > i { display: block; flex: none; background: var(--dt-text); }

/* Il prezzo nel tempo: il pannello sta nel piano di sopra come lo sportello,
   e ne prende la vestizione; qui e' solo piu' largo — dentro c'e' una figura —
   e ha il respiro di una scheda, non di un menu.
   Le classi `dt-storico` sono anche quelle dello storico delle ricerche del
   report (sezione 30): queste regole valgono solo dentro allo sportello, se
   no stringevano quel pannello a 360 pixel e facevano tutte le sue voci in
   grassetto, fissate o no. */
.dt-sportello.dt-storico { display: inline-flex; }
.dt-sportello__pannello.dt-storico__pannello {
  min-width: 264px;
  max-width: min(380px, calc(100vw - var(--dt-sp-6)));
  width: min(360px, calc(100vw - var(--dt-sp-6)));
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-5);
}
.dt-sportello__pannello .dt-storico__titolo {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-semibold);
}

/* La scala: tratti pieni finche' il prezzo e' stato quello, salti
   tratteggiati dove e' cambiato. Mai una linea inclinata — un prezzo non
   cresce piano, cambia un giorno. L'area sotto e' la stessa campitura tenue
   delle quote del report: e' la stessa famiglia di figure. */
.dt-andamento {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
}
.dt-andamento__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.dt-andamento__area { fill: var(--dt-accent-soft); }
.dt-andamento__asse { stroke: var(--dt-border); stroke-width: 1; }
.dt-andamento__linea {
  fill: none;
  stroke: var(--dt-accent);
  stroke-width: 2;
  stroke-linecap: round;
}
.dt-andamento__salto {
  fill: none;
  stroke: var(--dt-accent);
  stroke-width: 1.25;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}
.dt-andamento__nodo {
  fill: var(--dt-surface);
  stroke: var(--dt-accent);
  stroke-width: 2;
}
.dt-andamento__data {
  fill: var(--dt-text-3);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
}
.dt-andamento__valore {
  fill: var(--dt-text);
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
}
/* La stessa storia scritta, dal gradino piu' recente in giu'. */
.dt-andamento__gradini {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dt-fs-sm);
}
.dt-andamento__gradino {
  display: flex;
  justify-content: space-between;
  gap: var(--dt-sp-4);
  color: var(--dt-text-2);
}
.dt-andamento__gradino--oggi {
  color: var(--dt-text);
  font-weight: var(--dt-fw-medium);
}
.dt-andamento__vuoto {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-sm);
}

/* Il prezzo accanto a un fatto, nelle schede in lettura: il numero e il suo
   tastino sulla stessa riga. */
.dt-fatto__valore--storico {
  display: inline-flex;
  align-items: center;
  gap: var(--dt-sp-3);
}
/* La targa della benzina, in cima al catalogo dei materiali.

   **Non e' una riga d'elenco**, ed e' tutta qui la differenza con quello che
   c'era prima. Prima era una voce come le altre — la maniglia finta, la
   corsia, il codice vuoto, «km» nella colonna dell'unita', e due posti
   trasparenti larghi quanto l'interruttore e il cestino che non ha — messa
   pero' sopra alla casella di ricerca, dove nessun elenco comincia: una riga
   di catalogo fuori dal catalogo, che fingeva sei corsie per incolonnare un
   numero con righe che stanno dall'altra parte di un filo.

   La benzina non e' una cosa in magazzino: e' quanto costa un chilometro, il
   solo prezzo del listino che non ha ne' sezione ne' scorta. Qui si presenta
   per quello che e' — una targa appoggiata sopra all'elenco, alle stesse
   ascisse della barra di ricerca (`--dt-sp-6`), con cui fa una pila sola sotto
   alla testata — e il prezzo sta dentro alla sua finestrella, come sulla
   colonnina del distributore: un numero grosso, tabellare, con l'unita'
   appresso in piccolo.

   E' l'unica campitura tinta di tutto il listino, dove le mille righe sono
   nude: a colorarne una sola il colore torna a voler dire «guarda qui». */
.dt-benzina {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dt-sp-3) var(--dt-sp-4);
  padding: var(--dt-sp-4) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border);
  background: var(--dt-surface-2);
}
/* Il nome apre la sua scheda, come su ogni riga del programma: niente aspetto
   da bottone, che qui il riquadro ce l'ha gia' la targa. Il segno ci sta
   dentro perche' il bersaglio sia tutto quello che si legge. */
.dt-benzina__apri {
  display: flex;
  align-items: center;
  gap: var(--dt-corsia-testo);
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dt-benzina__apri:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--dt-accent-border);
  border-radius: var(--dt-r-sm);
}
.dt-benzina__testo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dt-benzina__nome {
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
/* Da quando vale: un prezzo al chilometro e' una cosa che cambia, e la data e'
   quello che lo distingue da quello di prima. Sta sotto al nome perche' e' il
   nome che apre la scala di tutti i gradini. */
.dt-benzina__dal {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
}
/* La finestrella del prezzo: incassata — fondo piu' scuro della targa e filo
   intorno — come il vetro dove la pompa scrive quanto sta segnando. */
.dt-benzina__lettura {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  flex: 0 0 auto;
  padding: var(--dt-sp-2) var(--dt-sp-4);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface-inset);
}
.dt-benzina__cifra {
  font-family: var(--dt-font-mono);
  font-size: var(--dt-fs-xl);
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
  font-variant-numeric: tabular-nums;
}
.dt-benzina__unita {
  font-size: var(--dt-fs-xs);
  color: var(--dt-text-3);
}
/* Senza prezzo la finestrella resta, con il trattino dentro: e' il posto dove
   il numero andra' a stare, e toglierlo vorrebbe dire non far vedere che
   manca. */
.dt-benzina__cifra--vuota { color: var(--dt-text-3); }
/* La barra dei comandi si accende passando sulla targa, come sulle righe e
   sulle barre delle sezioni. */
.dt-benzina:hover > .dt-comandi {
  border-color: var(--dt-border);
  background: var(--dt-surface);
  color: var(--dt-text-2);
}