/* ==========================================================================
   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);
  /* 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;
  --dt-barra-bassa-h: calc(
    var(--dt-voce-h) + var(--dt-sp-3) * 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;

  /* 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;

  /* 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 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   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 si taglia, la faccia no: e' il pezzo che si riconosce anche
   dimezzato, mentre mezzo nome non e' un nome. */
.dt-faccia__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  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; }

  .dt-app__side {
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    gap: var(--dt-sp-2);
    /* La barra e' una fascia sola: la spaziatura sta qui, cosi' voci e piede
       stanno sulla stessa linea invece di avere ognuno il proprio bordo. */
    padding: var(--dt-sp-4) var(--dt-sp-3);
    padding-bottom: calc(var(--dt-sp-4) + 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: center;
    gap: var(--dt-sp-2);
    padding: 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: center;
    gap: var(--dt-sp-2);
    margin: 0;
  }
  /* Fra un gruppo e l'altro un puntino: il trattino verticale rigava la
     fascia in colonne, e con le pastiglie tonde delle voci era l'unica linea
     dritta rimasta. Un punto separa lo stesso e non disegna niente. */
  .dt-nav__group + .dt-nav__group {
    position: relative;
    margin-left: var(--dt-sp-3);
    padding-left: var(--dt-sp-4);
  }
  .dt-nav__group + .dt-nav__group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: var(--dt-r-full);
    transform: translateY(-50%);
    background: var(--dt-border-strong);
  }
  .dt-nav__label { display: none; }
  .dt-nav__item {
    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);
    /* Il pieno non e' piu' il tasto intero: sta dietro all'icona (sotto), e
       qui resta trasparente. Il raggio serve solo al contorno del fuoco. */
    background: transparent;
    border-radius: var(--dt-r-lg);
    text-align: center;
    font-size: var(--dt-fs-sm);
    line-height: 1.15;
    white-space: nowrap;
  }
  .dt-nav__item > span { max-width: 100%; }
  /* Il segno di dove si e' e' una pastiglia tonda dietro all'icona, col nome
     scritto sotto sul fondo della barra. Il rettangolo pieno alto quanto la
     voce faceva della fascia una fila di mattonelle attaccate, e da fermo non
     si capiva se il colore fosse il tasto o la selezione. La pastiglia sta
     dentro alla voce, quindi il dito continua a premere su tutto il tasto. */
  .dt-nav__item svg {
    box-sizing: content-box;
    padding: var(--dt-sp-2) clamp(10px, 2.6vw, 16px);
    border-radius: var(--dt-r-full);
    background: transparent;
    opacity: 1;
    transition: background var(--dt-t-fast), color var(--dt-t-fast);
  }
  .dt-nav__item:hover { background: transparent; }
  .dt-nav__item:hover svg { background: var(--dt-hover); }
  .dt-nav__item--active { background: transparent; }
  .dt-nav__item--active svg { background: var(--dt-selected); }
  /* 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 all'angolo dell'icona, come
     il numerino sopra a un'applicazione. */
  .dt-nav__item { position: relative; }
  .dt-nav__item .dt-nav__conto {
    position: absolute;
    top: 0;
    right: clamp(2px, 1.5vw, 10px);
    margin: 0;
  }

  .dt-app__sidefoot {
    position: relative;
    margin-top: 0;
    margin-left: auto;
    align-self: center;
    gap: var(--dt-sp-2);
    min-height: 0;
    padding: 0 0 0 var(--dt-sp-4);
    border-top: 0;
  }
  /* 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);
  }
  /* Stesso puntino che separa i gruppi: il piede e' l'ultimo gruppo della
     fascia, non un riquadro a parte. Se la navigazione non c'e' (operatore)
     non c'e' niente da separare e il punto non compare. */
  .dt-nav ~ .dt-app__sidefoot::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: var(--dt-r-full);
    transform: translateY(-50%);
    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); }

.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);
}
.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; }
/* 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;
  overflow: hidden;
  text-overflow: ellipsis;
  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; }
}

/* 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. */
  height: var(--dt-sp-5);
  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 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; }
/* 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%; }
.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` e ellissi: 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. Si tronca il percorso, 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 { overflow: hidden; text-overflow: ellipsis; 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; }

/* --------------------------------------------------------------------------
   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; }
.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; }
.dt-modal__foot {
  display: flex;
  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);
}
@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); }
@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); }

/* 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; }
.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);
}

/* 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. */
  padding-top: var(--dt-sp-5);
  /* In fondo l'aria che serve alla barra della data per non coprire l'ultimo
     blocco: la sua altezza piu' i due orli. */
  padding-bottom: calc(var(--dt-piu) + var(--dt-piu-orlo) * 2);
}

/* 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: 30px;
  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 la riga non c'e' affatto, e la giornata
   comincia in cima alla pagina. Va a capo da sola su una finestra stretta. */
.dt-giorno__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--dt-sp-3) var(--dt-sp-5);
}

/* 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);
}

/* 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: var(--dt-timone-h); }
/* 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;
  height: var(--dt-timone-h);
  padding: 0 var(--dt-sp-4);
  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 { 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);
}
.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 var(--dt-sp-3);
  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 { 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 0 auto;
}

/* --- 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;
}

.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 {
  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); }

/* Dove non c'e' un sopra le risposte stanno sempre in vista, velate: col dito
   il passaggio del mouse non esiste, e una domanda che non si vede non e' una
   domanda. Lo decide lo schermo e non un segnale, perche' cambia da schermo a
   schermo e non da giornata a giornata. */
@media (hover: none) {
  .dt-buco__scelte { opacity: 0.75; }
}

/* 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. */
.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. */
.dt-giorno__tela--viva { touch-action: pan-y; }
.dt-giorno__tela--armata { 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;
}
/* 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; }
  .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 {
  overflow: hidden;
  text-overflow: ellipsis;
  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;
}
/* Le tabelle orarie dentro alla scheda di una commessa: per ogni persona i
   totali che finiranno nel foglio di fine mese, e sotto i blocchi da cui
   vengono.

   Una griglia sola per tutte le persone, non una per ciascuna: le quattro
   colonne di un blocco — giorno, cosa, orario, quanto — devono incolonnarsi
   *fra* le persone, se no due tabelle una sotto l'altra si leggono come due
   tabelle diverse e le ore non si confrontano piu' a occhio. Le teste stanno
   nella stessa griglia e si prendono tutta la riga.
   `auto` alle colonne di cifre e `1fr` a quella del testo: sono le cifre che
   vanno tenute in colonna, e il nome dell'attivita' e' l'unico che puo' andare
   a capo senza far danni. */
.dt-oraria {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--dt-sp-1) var(--dt-sp-4);
  align-items: baseline;
}
.dt-oraria__testa {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dt-sp-1) var(--dt-sp-3);
  margin-top: var(--dt-sp-3);
  padding-bottom: var(--dt-sp-2);
  border-bottom: 1px solid var(--dt-border-soft);
}
/* Il nome tiene la riga da solo quando lo spazio finisce: i numeri vanno a
   capo tutti insieme invece di spezzarsi uno per riga. */
.dt-oraria__testa > b:first-child { flex: 0 1 auto; }
.dt-oraria__testa:first-child { margin-top: 0; }
/* Il totale di tutti chiude la fila: sta sopra un filo pieno invece che sotto
   uno tenue, perche' non e' un'altra persona — e' la somma delle persone, ed e'
   il numero che deve tornare con la manodopera scritta qui sotto. */
.dt-oraria__testa--totale {
  margin-top: var(--dt-sp-4);
  padding: var(--dt-sp-3) 0 0;
  border-bottom: 0;
  border-top: 1px solid var(--dt-border);
}
/* Il giorno rientra: e' quello che stacca i blocchi di una persona dalla riga
   che li riassume, senza bisogno di un secondo riquadro. */
.dt-oraria__giorno { padding-left: var(--dt-sp-4); }

/* 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, da che ora a che ora, e a che punto e'. Le stesse quattro cose di prima,
   sulla riga di un elenco invece che dentro a un riquadro. 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 {
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  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);
}
/* Le ore chiudono la riga a destra, dove su un blocco in colonna stanno: stesso
   posto, stessa cosa da cercare. Si leggono e basta — a batterle e' la porta,
   in cima al resoconto. */
.dt-testatina__quando {
  flex: none;
  margin-left: auto;
  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-testatina__a { color: var(--dt-text-3); }
.dt-testatina__durata {
  color: var(--dt-text);
  font-weight: var(--dt-fw-semibold);
}
.dt-testatina .dt-stato { flex: none; align-self: center; }

/* 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 {
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  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;
}
/* 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 articolo. */
.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; }

/* La fetta di un collega, aperta sotto alla sua riga.
   Due ore e una via di ritorno: "c'era per tutto" e' il caso normale, e ci si
   deve poter tornare senza indovinare quali ore rimettere. */
.dt-fetta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: var(--dt-sp-4);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
}
.dt-fetta__ora {
  flex: 1 1 96px;
  min-width: 0;
  height: var(--dt-h-tocco);
  padding: 0 var(--dt-sp-3);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface);
  color: var(--dt-text);
  font: inherit;
  font-size: var(--dt-fs-lg);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.dt-fetta__chi {
  flex: 1 1 100%;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
}
.dt-fetta__chi b { color: var(--dt-text); }

/* 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;
}
/* 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;
}

/* 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;
}

/* 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); }
.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 si taglia con i puntini, e il
   nome intero resta nel titolo. */
.dt-allegato__nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--dt-fs-md);
}
.dt-allegato__togli {
  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;
}

/* --------------------------------------------------------------------------
   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; }
/* 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;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
}

/* --------------------------------------------------------------------------
   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. */
  padding-bottom: calc(var(--dt-piu) + var(--dt-piu-orlo) * 2);
}
/* 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);
}
.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;
  z-index: var(--dt-z-sticky);
  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; }

/* 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 troncato — 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;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 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 {
  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 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;
  overflow: hidden;
  text-overflow: ellipsis;
  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); }
  .dt-breadcrumb__sep { display: none; }
  .dt-breadcrumb__item--current:not(:first-child) { display: none; }
  .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': negli articoli 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: cinque voci e chi sei, a slot uguali ------------------

     In portrait la barra scorreva di lato: cinque 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, e a slot uguali stanno anche sul telefono piu' stretto.
     I gruppi (Cantiere, Scrivania, Fondamenta) diventano trasparenti alla
     griglia — `display: contents` — cosi' a spartirsi la riga sono le voci e
     non i tre gruppi, che sono di due, due e una voce e verrebbero larghi
     uguali fra loro invece che le voci. Il puntino che li separava passa sul
     primo tasto del gruppo nuovo: e' lo stesso segno, appeso a un'altra cosa. */
  .dt-app__side {
    gap: 0;
    padding: var(--dt-sp-3);
    padding-bottom: calc(var(--dt-sp-3) + env(safe-area-inset-bottom, 0px));
  }
  .dt-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 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; }
  .dt-nav__group + .dt-nav__group > .dt-nav__item:first-child::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: var(--dt-r-full);
    transform: translateY(-50%);
    background: var(--dt-border-strong);
  }
  .dt-nav__item {
    min-width: 0;
    max-width: none;
    padding: var(--dt-sp-2) 2px;
    /* Il nome del modulo non si accorcia — "Catal…" non e' un nome — quindi la
       misura del testo la detta lo slot: cinque nomi piu' chi sei, divisi per
       la larghezza che c'e'. Scorre con la finestra invece di aspettare
       un'altra soglia, e "Catalogo", che e' il piu' lungo, ci sta intero. */
    font-size: clamp(10px, 2.9vw, 12.5px);
  }
  .dt-nav__item svg { padding: var(--dt-sp-2) var(--dt-sp-5); }

  /* Chi sei e' l'ultimo slot della barra, fatto come gli altri: il cerchietto
     al posto dell'icona e il nome sotto. 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 {
    /* Un filo di respiro a sinistra e non zero: il puntino che stacca il piede
       dalla navigazione sta li', e senza cadrebbe sopra al cerchietto. */
    width: clamp(60px, 17vw, 80px);
    padding: 0 var(--dt-sp-1) 0 var(--dt-sp-4);
    align-self: stretch;
  }
  .dt-app__sidefoot > .dt-iconbtn { display: none; }
  .dt-sideuser {
    flex-direction: column;
    justify-content: center;
    gap: var(--dt-sp-1);
    width: 100%;
    height: 100%;
    padding: var(--dt-sp-2) 2px;
  }
  .dt-sideuser__testo { display: none; }
  .dt-sideuser__breve {
    display: block;
    max-width: 100%;
    font-size: var(--dt-fs-xs);
    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; }

  /* ---- 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;
  }
}

/* ===========================================================================
   Il catalogo a scala
   ===========================================================================
   Articoli 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 {
  overflow: hidden;
  text-overflow: ellipsis;
  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 {
  overflow: hidden;
  text-overflow: ellipsis;
  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 si accorcia col
   puntolino, che e' quello che deve fare. */
.dt-voce__nome {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  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 articolo 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;
  overflow: hidden;
  /* 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. Tagliato col puntolino resta quello che si legge per primo, ed e'
     la stessa regola che il nome ha gia' qui sopra. */
  white-space: nowrap;
  text-overflow: ellipsis;
  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;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  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);
}

/* --------------------------------------------------------------------------
   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;
  /* Da qui il gesto e' dell'applicazione e non del browser. Senza, il primo
     movimento del dito se lo prende lo scorrimento e la riga non parte mai —
     ed e' solo su questa corsia: il resto della riga deve continuare a
     scorrere, se no un elenco lungo non si sfoglia piu'. */
  touch-action: 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', articoli,
   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;
}

/* 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; }

/* --------------------------------------------------------------------------
   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; }
.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;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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. */
.dt-clausola__pannello {
  top: calc(100% + var(--dt-sp-2));
  bottom: auto;
  left: 0;
  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);
}
/* 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, che compaiono passandoci
   sopra. */
.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); }
.dt-storico__titolo { font-size: var(--dt-fs-sm); line-height: var(--dt-lh-tight); }
.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;
  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); }
.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. */
@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; }
}
/* 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;
  overflow: hidden;
  text-overflow: ellipsis;
  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 (come dt-oraria__testa). */
.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. */
.dt-report__altrove { color: var(--dt-text-3); }

/* La riga di dettaglio: quello che non sta in colonna, in tre colonne. */
.dt-table tbody tr.dt-report__dettaglio td {
  white-space: normal;
  padding: var(--dt-sp-3) var(--dt-sp-5) var(--dt-sp-5) calc(var(--dt-sp-5) + var(--dt-sp-6));
  background: var(--dt-surface-inset);
  box-shadow: inset 3px 0 0 var(--dt-border-strong);
}
.dt-dettaglio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--dt-sp-4) var(--dt-sp-7);
  font-size: var(--dt-fs-sm);
}
.dt-dettaglio__voce { display: flex; flex-direction: column; gap: var(--dt-sp-2); min-width: 0; }
.dt-dettaglio__voce .dt-overline { color: var(--dt-text-3); }
.dt-dettaglio__righe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--dt-sp-1) var(--dt-sp-4);
}
.dt-dettaglio__righe .dt-td--num { padding: 0; }
.dt-dettaglio__fase { color: var(--dt-text-3); font-size: var(--dt-fs-xs); }
.dt-dettaglio__fase--tutta { grid-column: 1 / -1; }

/* Il menu di stampa: lo stesso pannello della barra laterale, ma appeso
   sotto al tasto e non sopra. */
.dt-report__stampa { position: relative; }
.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; }
  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; }
  .dt-report .dt-table tbody td,
  .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; }
  .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); }
  .dt-quota__pieno { background: #000; border-radius: 0; }
  .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. */
  .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;
  }
  .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 { 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 puntini di sospensione: una cella tagliata a schermo si allarga
     tirando la colonna, sul foglio no. Quello che non sta in riga va a capo. */
  .dt-truncate,
  .dt-report__note {
    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. */
  .dt-table tbody tr.dt-report__dettaglio td {
    padding: var(--dt-sp-3) 0 var(--dt-sp-4) var(--dt-sp-6);
    box-shadow: none;
  }
  /* Il dettaglio a schermo e' una griglia di riquadri alti uguali: sulla
     carta le celle piu' corte lasciano buchi, e un blocco che a schermo sta in
     tre righe si mangia mezzo foglio. Qui le voci scorrono in due colonne di
     testo e si impaginano da se', ognuna intera. */
  .dt-dettaglio {
    display: block;
    columns: 2;
    column-gap: var(--dt-sp-7);
    font-size: var(--dt-fs-xs);
  }
  .dt-dettaglio__voce {
    break-inside: avoid;
    margin-bottom: var(--dt-sp-3);
  }
  .dt-dettaglio__voce:last-child { margin-bottom: 0; }
}