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

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

  /* 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;
  --dt-riga-x: var(--dt-sp-4);
  --dt-passo: calc(var(--dt-riga-x) + var(--dt-corsia) / 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. */
  --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;
  /* La stessa tinta a riposo, in una mattonella non ancora scelta: solo un
     velo sopra la pagina. Deve bastare a distinguere dodici caselle a colpo
     d'occhio e non deve sembrare gia' premuta. */
  --dt-mattonella-l: 95%;
  --dt-mattonella-c-scala: 0.45;
  --dt-mattonella-l-bordo: 87%;
}

/* 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 — la mattonella a riposo 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-mattonella-l: 23%;
  --dt-mattonella-c-scala: 0.55;
  --dt-mattonella-l-bordo: 33%;
}

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

.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);
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-bold);
  line-height: 1;
  user-select: none;
}
.dt-avatar--sm { width: 24px; height: 24px; font-size: var(--dt-fs-xs); }
.dt-avatar--lg { width: 38px; height: 38px; font-size: var(--dt-fs-lg); }

/* 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); }
/* 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-sm); height: var(--dt-h-sm); }
.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);
}

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

/* Maschera a due colonne: a sinistra quello che si scrive, a destra quello che
   si sceglie guardando. Sono due gesti diversi — battere e riconoscere — e in
   colonna unica il secondo spinge il primo fuori dalla finestra, tanto che per
   rileggere il nome appena scritto bisognava risalire oltre la tavolozza.
   La colonna di destra e' larga quanto le sue griglie e non un terzo dello
   spazio: si dimensiona sui quadretti che deve contenere. Stretta la finestra,
   torna sotto — sopra ci va quello che va compilato per forza. */
.dt-maschera {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dt-sp-6);
}
@media (min-width: 720px) {
  .dt-maschera { grid-template-columns: minmax(0, 1fr) 288px; gap: var(--dt-sp-7); }
}

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

/* Mattonelle: la scelta fra una dozzina di voci pari fra loro, col dito e
   senza mirare. Due colonne sul telefono, quattro appena c'e' spazio: e'
   l'unico punto in cui la disposizione cambia davvero, quindi e' l'unica
   soglia — tutto il resto scorre.

   Scelta, la mattonella ha esattamente il fondo che avra' il blocco in
   giornata: si sceglie il colore che si vedra', non un nome. A riposo la
   stessa tonalita' resta ma appena accennata, cosi' la griglia si legge per
   colore prima che per etichetta e il montaggio si trova all'ambra senza
   rileggere dodici parole. Tonalita' e carica arrivano dallo `style` inline
   come per i blocchi, per lo stesso motivo: fin dove ogni tonalita' arriva lo
   sa chi ha scelto i colori, non il foglio di stile. */
.dt-mattonelle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dt-sp-2);
}
@media (min-width: 520px) {
  .dt-mattonelle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.dt-mattonella {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dt-sp-2);
  min-height: calc(var(--dt-h-tocco) + var(--dt-sp-6));
  padding: var(--dt-sp-3) var(--dt-sp-2);
  border: 1px solid oklch(var(--dt-mattonella-l-bordo) calc(var(--dt-blocco-c) * 0.6) var(--dt-blocco-tinta));
  border-radius: var(--dt-r-md);
  background: oklch(var(--dt-mattonella-l) calc(var(--dt-blocco-c) * var(--dt-mattonella-c-scala)) var(--dt-blocco-tinta));
  color: var(--dt-text);
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
    color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}
.dt-mattonella:hover:not(:disabled) {
  border-color: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
}
.dt-mattonella:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dt-accent-soft);
}
/* L'anello e non solo il fondo pieno: su dodici campiture accennate il salto
   di tinta da solo si vede, ma su due tonalita' vicine no, e la scelta e' una
   sola cosa da vedere in mezzo secondo.
   L'anello e' d'inchiostro e sta dentro al quadretto. Della stessa tinta del
   fondo — com'era — spariva proprio dove serviva: su un pastello chiaro un
   anello un po' meno chiaro non e' un segno, e la mattonella scelta si
   distingueva dalle altre solo perche' era un filo piu' colorata. L'anello e'
   della stessa tinta della scritta che gli sta dentro — nera su tutti e due i
   temi, perche' il fondo del quadretto resta chiaro comunque — e non
   dell'accento di pagina, che sul tema scuro e' quasi bianco e su un pastello
   chiaro non si vedrebbe. Dentro e non fuori perche' fra un quadretto e
   l'altro ci sono quattro pixel, e un anello esterno toccherebbe i vicini. */
.dt-mattonella--scelta {
  background: oklch(var(--dt-tinta-l) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-color: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
  box-shadow: inset 0 0 0 2px oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
.dt-mattonella:disabled { opacity: 0.4; cursor: not-allowed; }
.dt-mattonella__etichetta {
  font-size: var(--dt-fs-sm);
  line-height: 1.15;
  text-align: center;
}

/* Le due griglie con cui l'anagrafica veste una mattonella: la tavolozza e i
   segni. Sono quadretti e non mattonelle perche' qui non preme nessuno col
   guanto — si sceglie col mouse, guardando — e con la mattonella da dito
   dodici colori piu' quarantacinque icone erano due schermate di finestra da
   scorrere per compilare cinque campi di testo.

   Le colonne sono un numero fisso e non `auto-fill`: cosi' le righe restano
   piene fino all'ultima (due da sei, cinque da nove) invece di finire con tre
   quadretti spaiati appena la finestra cambia di venti pixel. Il `minmax` da'
   il tetto, non la misura: nella colonna della maschera i quadretti stanno
   larghi quanto entrano, altrove non crescono oltre. */
.dt-tinte,
.dt-icone {
  display: grid;
  gap: var(--dt-sp-2);
  justify-content: start;
}
.dt-tinte { grid-template-columns: repeat(6, minmax(0, 48px)); }
/* I segni in una griglia sola, quanti ce ne stanno per riga: l'ordine in cui
   sono scritti basta a orientarsi, e spezzarli in pezzi intestati faceva di
   una scelta di due secondi un elenco da leggere. */
.dt-icone {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 32px));
  gap: var(--dt-sp-2);
  justify-content: start;
}

.dt-tinta,
.dt-icona {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast),
    color var(--dt-t-fast), box-shadow var(--dt-t-fast);
}

/* La tavolozza porta le campiture piene, tutte e dodici: e' un elenco di
   colori, e dei colori accennati si leggono male proprio nella cosa che devono
   dire. Il fondo quindi non e' libero di segnare anche la scelta, e la scelta
   la fa un anello staccato da un filo di pagina. */
.dt-tinta {
  background: oklch(var(--dt-tinta-l) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-color: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
}
/* Il quadretto vuoto: nessuna campitura. La sbarra e non il bianco, perche' un
   quadretto bianco in una fila di colori si legge come "bianco". */
.dt-tinta--nessuna {
  background: var(--dt-surface);
  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)
  );
}
.dt-tinta--scelta {
  box-shadow: 0 0 0 2px var(--dt-surface), 0 0 0 4px var(--dt-accent);
}
.dt-tinta:hover { border-color: var(--dt-text-2); }

/* I segni a riposo restano sul grigio della pagina: colorarli tutti e
   quarantacinque faceva della griglia una macchia unica dove il segno scelto
   spariva dentro ai vicini, e sono i disegni che vanno confrontati fra loro,
   non i fondi, che li' sono tutti uguali. La campitura la prende solo quello
   scelto — ed e' esattamente come si vedra' in giornata — piu' un velo della
   stessa tinta sotto al puntatore, che vale da anteprima prima di decidere. */
.dt-icona {
  background: var(--dt-surface-2);
  color: var(--dt-text-2);
}
.dt-icona:hover {
  background: oklch(var(--dt-mattonella-l) calc(var(--dt-blocco-c) * var(--dt-mattonella-c-scala)) var(--dt-blocco-tinta));
  border-color: oklch(var(--dt-mattonella-l-bordo) calc(var(--dt-blocco-c) * 0.6) var(--dt-blocco-tinta));
  color: var(--dt-text);
}
.dt-icona--scelta,
.dt-icona--scelta:hover {
  background: oklch(var(--dt-tinta-l) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-color: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
/* Il fuoco e' un contorno e non un'ombra come altrove: qui l'ombra la sta gia'
   usando l'anello della scelta, e la seconda cancellerebbe la prima proprio
   mentre ci si muove dentro con il tabulatore. */
.dt-tinta:focus-visible,
.dt-icona:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
}

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

   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-piega {
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface-2);
}
.dt-piega__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-piega__testa:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dt-accent-border);
  border-radius: var(--dt-r-md);
}
.dt-piega__freccia {
  display: inline-flex;
  color: var(--dt-text-3);
  transform: rotate(-90deg);
  transition: transform var(--dt-t-med);
}
.dt-piega--aperta .dt-piega__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-piega__titolo { flex: 0 1 auto; }
.dt-piega__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-piega__pancia {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dt-t-med);
}
.dt-piega--aperta .dt-piega__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-piega__dentro {
  overflow: hidden;
  min-height: 0;
}
.dt-piega__corpo { padding: 0 var(--dt-sp-4) var(--dt-sp-4); }

/* --------------------------------------------------------------------------
   11-bis. La barra del periodo
   -------------------------------------------------------------------------- */

/* Di che mese si sta parlando: sta sopra alle linguette perche' la domanda e'
   una sola per tutti e tre i fogli che ci stanno sotto.
   E' un riquadro solo, come la barra della giornata: un fondo, un bordo, e
   dentro i comandi piatti. Quello che non e' un comando — la parola "Periodo",
   il mese scritto per esteso — si separa con un filo verticale rientrato, non
   con un secondo riquadro. */
.dt-periodo {
  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 periodo scritto com'e' davvero. Con "Tutto" acceso le due tendine mostrano
   comunque un mese, e senza questa riga si leggerebbero i numeri sotto come se
   fossero i suoi. */
.dt-periodo__detto {
  padding-left: var(--dt-sp-2);
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-text);
}
/* Le frecce e le due tendine sono un gruppo solo: sul largo il gruppo e'
   trasparente alla barra — i quattro comandi stanno in fila come gli altri —
   e quando la barra va a capo si porta dietro tutti e quattro invece di
   lasciare una freccia di qua e una di la'. */
.dt-periodo__quando { display: contents; }
@media (max-width: 720px) {
  .dt-periodo__quando {
    display: flex;
    align-items: center;
    gap: var(--dt-sp-2);
  }
  /* Il filo che stacca "Tutto" dal gruppo della data: quando il gruppo va a
     capo il filo resta in fondo alla riga di sopra, a separare una cosa da
     niente. */
  .dt-periodo__filo:has(+ .dt-periodo__quando) { display: none; }
}
/* Le tendine del mese e dell'anno non si stirano: sono due parole, e larghe
   quanto la barra sembrerebbero due campi da compilare. */
.dt-periodo .dt-select { width: auto; min-width: 96px; }
.dt-periodo .dt-select + .dt-select { min-width: 78px; }
/* 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 mese 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. */
@media print {
  .dt-periodo {
    padding: 0;
    border: 0;
    box-shadow: none;
  }
  .dt-periodo .dt-select,
  .dt-periodo__filo { display: none; }
  .dt-periodo__voce { padding-left: 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; }

.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); }
.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(var(--dt-tinta-l) 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); }

/* --------------------------------------------------------------------------
   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: scelta identita' 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;
}
.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);
}
.dt-gate__box--largo { max-width: 420px; }

.dt-gate__lista {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
  max-height: 46vh;
  overflow: auto;
}
.dt-gate__utente {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-4);
  width: 100%;
  text-align: left;
  padding: var(--dt-sp-4) var(--dt-sp-5);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  color: var(--dt-text);
  font-size: var(--dt-fs-md);
  cursor: pointer;
  transition: background var(--dt-t-fast), border-color var(--dt-t-fast);
}
.dt-gate__utente:hover {
  background: var(--dt-surface-3);
  border-color: var(--dt-border-strong);
}
.dt-gate__utente:active { background: var(--dt-selected); }

/* Chi si sta facendo entrare: resta in testa al tastierino, con la via
   d'uscita per chi ha toccato il riquadro sbagliato. */
.dt-gate__scelto {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-4);
  padding: var(--dt-sp-4) var(--dt-sp-5);
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  font-size: var(--dt-fs-md);
}
.dt-gate__cambia {
  flex: none;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dt-text-3);
  font: inherit;
  font-size: var(--dt-fs-xs);
  text-decoration: underline;
  cursor: pointer;
}
.dt-gate__cambia:hover { color: var(--dt-text); }

/* 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, cosi' l'elenco
   lungo scorre nella pagina invece che dentro a se stesso. */
@media (max-width: 420px) {
  .dt-gate { place-items: start center; }
  .dt-gate__lista { max-height: none; }
}

/* --------------------------------------------------------------------------
   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 il consuntivo e basta: quanto e' venuto fuori dalla giornata.
   Va a capo da sola su una finestra stretta.
   La riga sta ferma da un giorno all'altro — non c'e' niente che compaia o
   sparisca a seconda di dov'e' finito il dito nel calendario. */
.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); }

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

/* Il numero della giornata: e' quello che finisce in busta paga, ed e' il
   motivo per cui si apre la schermata.
   Cresce con la finestra invece di saltare a una soglia, come la data. */
.dt-giorno__totale {
  display: inline-flex;
  align-items: baseline;
  gap: var(--dt-sp-2);
  flex: 0 0 auto;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
}
.dt-giorno__totale b {
  font-size: clamp(var(--dt-fs-lg), 0.25vw + 12px, var(--dt-fs-xl));
  font-weight: var(--dt-fw-semibold);
  color: var(--dt-text);
  font-variant-numeric: tabular-nums;
}

.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 verso l'interno:
   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. */
.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);
  left: auto;
  right: 0;
  animation-name: dt-pop-su;
}
@keyframes dt-pop-su { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
.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;
  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);
}

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

/* Il blocco smorzato: quello che in giornata non e' ancora successo — messo in
   calendario, e da fare. Non e' incompleto ed e' scritto per intero: e' solo di
   piu' tardi, e finche' quell'ora non arriva sta indietro rispetto a quelle in
   cui si e' lavorato davvero.
   Il viaggio calcolato di qui non passa piu': porta la sua tinta come tutti
   (vedi `.dt-blocco--calcolato`). */
.dt-blocco--tenue {
  background: var(--dt-surface-inset);
  border-style: dashed;
  border-left: 3px dashed var(--dt-border-strong);
  color: var(--dt-text-2);
}
.dt-blocco--tenue: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) e quanto e' carica (`--dt-blocco-croma`): 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(var(--dt-tinta-l) 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(var(--dt-tinta-l-bordo) 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(var(--dt-tinta-l-forte) var(--dt-blocco-c) var(--dt-blocco-tinta));
}

/* 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--calcolato {
  --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(
    var(--dt-tinta-l-tratto)
    calc(var(--dt-blocco-c) * var(--dt-tinta-c-tratto))
    var(--dt-blocco-tinta)
  );
}
/* Il blocco che non ha scritto nessuno: il tragitto fra un lavoro e l'altro,
   che il programma tira da se' guardando il buco fra due ore.
   Tratteggiato come le ore che non si pagano, e per un motivo vicino ma non
   uguale: li' il vuoto dice «queste ore non entrano nel conto», qui dice
   «questo lo sta dicendo il programma, non chi c'era». A separarli e' il
   fondo: il viaggio ne ha uno, velato — le sue ore si pagano come le altre —
   la pausa no. Cosi' i tre stati della colonna si leggono in fila senza
   didascalie: campitura piena = scritto e pagato, velata = calcolato, niente
   = scritto e non pagato.
   Toccabile come tutti: si prende, si tira, si apre. Al primo gesto la riga
   diventa un blocco vero e il fondo si riempie. */
.dt-blocco--calcolato {
  background: oklch(
    var(--dt-mattonella-l)
    calc(var(--dt-blocco-c) * var(--dt-mattonella-c-scala))
    var(--dt-blocco-tinta)
  );
}
button.dt-blocco--calcolato:hover {
  background: oklch(
    var(--dt-mattonella-l-bordo)
    calc(var(--dt-blocco-c) * var(--dt-mattonella-c-scala))
    var(--dt-blocco-tinta)
  );
}

/* 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,
.dt-blocco--tinta.dt-blocco--calcolato { color: var(--dt-text); }
/* Una pausa messa in calendario e non ancora fatta resta smorzata come tutto
   quello che non e' ancora successo: il contorno dice che non si paga, la
   scritta chiara che non e' successo. */
.dt-blocco--tenue.dt-blocco--fuori-conto { color: var(--dt-text-2); }
button.dt-blocco--fuori-conto:hover { background: var(--dt-surface-2); }

/* 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;
}
/* 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. Cosa manca,
   per nome, resta nel `title`.
   Un segno e non una parola perche' mezz'ora di blocco e' alta trentaquattro
   pixel, e una riga in piu' toglierebbe il posto dove si e' stati. Alto quanto
   l'icona dell'attivita' che gli sta di fianco: piu' piccolo si impasterebbe,
   piu' grande si mangerebbe il titolo.
   `currentColor`: dentro a un blocco tinto la scritta e' nera e il triangolo
   con lei, in uno grigio e' l'inchiostro della pagina. Un giallo d'avviso qui
   sarebbe un colore che litiga con la tinta dell'attivita' — e su quella ambra
   sparirebbe del tutto. */
.dt-blocco__bollino {
  flex: none;
  display: inline-flex;
  align-items: center;
}
/* 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; }
/* 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;
}
/* 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);
}

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

/* --------------------------------------------------------------------------
   23. Scheda del blocco: 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 {
  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 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); }

/* Una riga da cui si sceglie dove si sta lavorando.
   Non e' un bottone con dentro del testo ma due righe: sopra il posto, sotto
   la commessa. Le due cose prima stavano impastate ("Rossi — Tende Bianchi") e
   chi leggeva non sapeva quale delle due stesse prendendo; separate, il nome
   grosso e' il cancello che si ha davanti e la riga sotto e' quello che lo
   distingue da se' stesso di sei mesi fa. Il testo va a sinistra e non al
   centro: si scorre una colonna di nomi, e i nomi devono partire tutti dallo
   stesso punto. */
.dt-scelta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  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);
}
.dt-scelta:hover { background: var(--dt-surface-2); border-color: var(--dt-border); }
.dt-scelta:active { background: var(--dt-surface-3); }
.dt-scelta__nome {
  font-weight: var(--dt-fw-semibold);
  line-height: var(--dt-lh-tight);
}
.dt-scelta__sotto {
  color: var(--dt-text-2);
  font-size: var(--dt-fs-sm);
  line-height: var(--dt-lh-normal);
}
/* Il posto che una commessa aperta non ce l'ha. Sceglierlo apre la commessa li'
   sopra, e non e' un ripiego: e' il cancello dove si torna dopo sei mesi. Il
   filo a sinistra lo distingue senza spegnerlo — smorzarlo avrebbe detto "non
   e' questo che cerchi", cioe' il contrario di quello che serve. */
.dt-scelta--libero { border-left: 3px solid var(--dt-accent); }

/* Cose gia' scritte in tabella su cui si puo' anche premere: il distintivo che
   dice cosa manca, il numero delle commesse di un posto, il nome del posto
   dentro a una commessa. 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,
.dt-legame {
  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;
}
/* Il puntinato dice "qui si va da un'altra parte" senza gridarlo come farebbe
   un link pieno: la tabella si legge per colonne, e una colonna sottolineata da
   cima a fondo diventa rumore. */
.dt-legame {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.dt-legame:hover { text-decoration: underline solid; }

/* 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 di posa o di materiale: nome a sinistra, il −/+ a destra, il
   cestino in fondo. Il nome si stringe e i comandi no: sono loro che il dito
   deve trovare sempre nello stesso punto, riga dopo riga. */
.dt-riga-qta {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-2) var(--dt-sp-3);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
}
.dt-riga-qta__nome {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 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-riga-qta .dt-stepper { flex: 0 0 clamp(132px, 34%, 160px); }

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

/* Il cartellino, in testa alla scheda di un blocco.
   E' il cartellino spillato addosso a una tenda: cosa e', per quando, e il
   bollino se c'e' ancora da metterci mano. Porta la campitura dell'attivita'
   scelta — la stessa che il blocco avra' in colonna — e cambia colore sotto al
   dito mentre si preme una mattonella: e' l'unica conferma immediata che la
   scheda dia di quella scelta.
   Sta fuori dal corpo che scorre e sotto alla testata, quindi niente raggi ne'
   bordo tutt'intorno: e' una fascia 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 {
  --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(var(--dt-tinta-l) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-bottom: 1px solid oklch(var(--dt-tinta-l-bordo) 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);
}
/* 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 finestra: e' cosa si sta
   segnando, e prima si leggeva solo dall'anello intorno a una mattonella in
   mezzo ad altre undici. */
.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; }

/* 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; }
.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 procedura: una domanda per schermata

   La scheda di un blocco era una colonna che scorreva, e chiedeva tutto
   insieme. Chi la compila pero' non e' seduto: e' in piedi su una scala, con
   una mano sola e la luce di fuori, e in quelle condizioni una colonna di nove
   campi vuol dire scorrere avanti e indietro per capire dove si e' arrivati.
   Adesso e' una fila di schermate, una domanda ciascuna, e a tenerle insieme
   c'e' la fettuccia.

   Quali domande si facciano, in che ordine e quali pretendano una risposta non
   sta scritto qui: sta nel catalogo, riga per riga. Questo foglio disegna una
   procedura qualunque, di qualunque lunghezza.
   =========================================================================== */

/* La fettuccia: la fila delle domande, sotto al cartellino.

   Non e' una barra di avanzamento e non e' una fila di numeri. E' la fila dei
   **segni** delle domande — l'orologio, la puntina, le persone, la tenda, la
   scatola — e dice tre cose insieme che un numero non direbbe: quante ne
   restano, *quali* sono, e dove si e' adesso. Sono gli stessi segni che
   l'operatore ha gia' imparato sulle mattonelle e sulle righe del listino:
   niente da imparare due volte.

   Porta la campitura di quello che si sta segnando, come il cartellino che le
   sta sopra: le due fasce sono un pezzo solo, e cambiando mattonella cambiano
   colore insieme. Sta fuori dal corpo che scorre — `flex: none` — perche' dove
   si e' arrivati deve restare vero anche in fondo ai materiali. */
.dt-fettuccia {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--dt-sp-4) var(--dt-sp-6);
  border-bottom: 1px solid var(--dt-border-soft);
  background: var(--dt-surface-2);
}

/* Un segno della fila. Ventotto pixel: sotto non si prendono col pollice, e
   sopra non ci starebbero nove domande sulla larghezza di un telefono.
   Davanti a se' una domanda e' un filo di contorno sul fondo della pagina —
   c'e', ma non chiede niente. */
.dt-fettuccia__passo {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface);
  color: var(--dt-text-3);
  cursor: pointer;
  transition: background var(--dt-t-med), border-color var(--dt-t-med),
    color var(--dt-t-med), box-shadow var(--dt-t-med), transform var(--dt-t-med);
}
.dt-fettuccia__passo:hover { border-color: var(--dt-border-strong); color: var(--dt-text); }
.dt-fettuccia__passo:focus-visible {
  outline: 2px solid var(--dt-accent);
  outline-offset: 2px;
}

/* Risposto: la campitura dell'attivita', piena. E' la stessa tinta del
   cartellino e del blocco in colonna, quindi quello che si e' gia' detto si
   riconosce dal colore di quello che si sta segnando — non da una spunta
   verde, che sarebbe un secondo vocabolario per la stessa idea. */
.dt-fettuccia__passo--fatto {
  background: oklch(var(--dt-tinta-l) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-color: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}

/* Dove si e' adesso: l'anello d'inchiostro, che e' il segno piu' forte della
   fascia perche' e' l'unica cosa che dice "qui". Il segno cresce di un filo
   invece di cambiare colore: il colore in questa fila e' gia' occupato a dire
   un'altra cosa. */
.dt-fettuccia__passo--qui {
  box-shadow: 0 0 0 2px var(--dt-accent);
  border-color: transparent;
  color: var(--dt-text);
  transform: scale(1.08);
}
.dt-fettuccia__passo--qui.dt-fettuccia__passo--fatto {
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}

/* Il filo che lega due domande: e' quello che fa di una fila di bollini una
   strada. Si riempie fino a dove si e' arrivati, ed e' l'unica barra di
   avanzamento che serva. */
.dt-fettuccia__filo {
  flex: 1 1 4px;
  min-width: 4px;
  height: 2px;
  background: var(--dt-border);
  transition: background var(--dt-t-med);
}
.dt-fettuccia__filo--fatto {
  background: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
}

/* 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 piano su cui i fogli si posano.

   L'altezza minima non e' aria sprecata: senza, la fila dei tasti in fondo
   salterebbe su e giu' passando da "Quanti chilometri?" — un campo — a "Cosa
   hai usato?" — una griglia — e il tasto "Avanti" finirebbe ogni volta in un
   posto diverso da quello in cui il pollice l'ha lasciato. */
.dt-scena {
  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 32vh, 300px);
}
/* Il foglio che arriva. Il contenitore resta lo stesso e a entrare e' solo
   quello che c'e' dentro: non e' un movimento finto che copre una sostituzione,
   e' la sostituzione stessa — un foglio nuovo che si posa. Da destra andando
   avanti, da sinistra tornando indietro, e lo dice `--dt-verso`. */
.dt-scena__foglio {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--dt-sp-6);
  animation: dt-foglio var(--dt-t-slitta);
}
@keyframes dt-foglio {
  from { opacity: 0; transform: translateX(calc(var(--dt-verso, 1) * 16px)); }
  to { opacity: 1; transform: none; }
}
/* Chi ha chiesto di non vedere movimento non ne vede: il foglio c'e' e basta. */
@media (prefers-reduced-motion: reduce) {
  .dt-scena__foglio { animation: none; }
  .dt-fettuccia__passo { transition: none; }
}

/* 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;
}
/* Dentro alla fettuccia il segno e' il riferimento del punto. */
.dt-fettuccia__passo { position: relative; }

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

/* 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(var(--dt-tinta-l-tratto) 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(var(--dt-tinta-l-tratto) 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(var(--dt-tinta-l-tratto) 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 tessera di un collega: la sua faccia, e per quanto c'era.

   L'avatar e non un segno generico, perche' le persone si riconoscono per nome
   e la lettera colorata e' il nome ridotto a un colpo d'occhio — la stessa che
   sta in fondo alla barra laterale, quindi gia' imparata. Il colore nasce dal
   nome: la stessa persona ha sempre la stessa tinta, su qualunque telefono,
   senza che nessuno l'abbia scelta. */
.dt-tessera--persona { align-items: center; text-align: center; }
.dt-tessera--persona .dt-tessera__nome { align-self: center; }
/* Dentro per tutto il blocco: e' il caso di nove su dieci, e non si scrive.
   Quello che si scrive e' l'eccezione — la fetta — e sta dove stava il conto
   delle quantita', cioe' in alto a destra sulla tessera che si e' toccata. */
.dt-tessera__ore {
  position: absolute;
  top: var(--dt-sp-2);
  right: var(--dt-sp-2);
  padding: 0 var(--dt-sp-2);
  border-radius: var(--dt-r-full);
  background: var(--dt-surface-3);
  color: var(--dt-text-2);
  font-size: var(--dt-fs-xs);
  font-variant-numeric: tabular-nums;
}
.dt-tessera--presa .dt-tessera__ore { background: var(--dt-accent); color: var(--dt-text-inv); }

/* La fetta di un collega, aperta sotto alla sua tessera.
   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); }

/* L'albero da cui si sceglie la commessa, dentro alla scheda del blocco.

   E' lo stesso albero dei Lavori: si cerca, i riferimenti si aprono, dentro ci
   sono le loro commesse. Prima era un elenco piatto dove commesse e cancelli
   stavano mescolati, e chi cercava "i Rossi" non capiva se la riga che aveva
   davanti fosse il posto o il lavoro. Qui i due piani sono due piani, come in
   ufficio: quello che si impara di la' vale di qua.

   Sta dentro a un corpo che scorre e non a una scheda, quindi ha un tetto: sei
   righe e mezza, poi scorre da solo. Senza, con venti riferimenti aperti la
   fila dei tasti finiva fuori dallo schermo. */
.dt-dove {
  max-height: clamp(180px, 38vh, 320px);
  overflow: auto;
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  background: var(--dt-surface);
}
/* Le righe qui dentro sono piu' alte che in ufficio: si premono col pollice. */
.dt-dove .dt-voce { min-height: var(--dt-h-tocco); }

/* Il gruppo di una griglia: il ramo di catalogo da cui vengono le tessere.

   Con diciotto articoli una griglia piatta si legge; con un listino vero —
   centinaia di codici — e' una macchia. Le intestazioni sono le stesse sezioni
   che l'ufficio ha composto, e si aprono e si chiudono come nel catalogo:
   cercando si aprono da sole, perche' trovare una riga e poi dover aprire a
   mano il ramo in cui sta vuol dire cercarla due volte. */
.dt-gruppo {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-3);
}
.dt-gruppo__testa {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  width: 100%;
  min-height: var(--dt-h-lg);
  padding: 0;
  border: 0;
  background: none;
  color: var(--dt-text-3);
  font: inherit;
  font-size: var(--dt-fs-xs);
  font-weight: var(--dt-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
.dt-gruppo__testa:hover { color: var(--dt-text); }
.dt-gruppo__testa svg { flex: none; transition: transform var(--dt-t-fast); }
.dt-gruppo__testa[aria-expanded="false"] svg { transform: rotate(-90deg); }
/* Il filo che porta il nome del ramo fino al bordo: dice dove finisce un
   gruppo e comincia l'altro senza una riga di fondo grigia per ciascuno. */
.dt-gruppo__filo {
  flex: 1 1 auto;
  height: 1px;
  background: var(--dt-border-soft);
}
.dt-gruppo__quanti {
  flex: none;
  color: var(--dt-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
/* Quelli che si usano davvero, in cima a tutto. Non e' una sezione del
   catalogo: e' quello che quell'operatore ha bruciato negli ultimi tre mesi, ed
   e' il motivo per cui quasi sempre non serve nemmeno cercare. */
.dt-gruppo--usati .dt-gruppo__testa { color: var(--dt-text); }

/* La griglia da cui si sceglie una cosa: un articolo, un tendaggio, un collega.

   Tessere e non una tendina, e non e' una preferenza. Una `<select>` in
   cantiere sono tre gesti — aprila, scorri, scegli — piu' il tasto "Aggiungi"
   che e' il quarto, e per tutto il tempo quello che si sta scegliendo copre
   quello che si e' gia' scelto. Qui la scelta e' **un tocco**, e quel che si e'
   preso resta scritto sopra alla griglia, dove lo si controlla.

   Le colonne le conta lo spazio che c'e', non una soglia della finestra: la
   griglia sta dentro a una maschera larga la sua, e legarla alla finestra
   vorrebbe dire tessere grandi il doppio quando la maschera e' stretta. */
.dt-tessere {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(104px, 26vw, 132px), 1fr));
  gap: var(--dt-sp-3);
}
.dt-tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dt-sp-2);
  min-height: 84px;
  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-tessera:hover { background: var(--dt-surface-2); border-color: var(--dt-border); }
.dt-tessera:active { background: var(--dt-surface-3); }
.dt-tessera:focus-visible { outline: 2px solid var(--dt-accent); outline-offset: 2px; }

/* Il segno prima del nome: qui non si legge, si riconosce, ed e' lo stesso
   segno che quella cosa ha in ufficio. Quasi sempre e' nudo sul grigio della
   pagina — un listino di mille codici tinto tutto e' mille macchie — e la
   campitura ce l'hanno quei pochi che si cercano dieci volte al giorno. */
.dt-tessera__segno {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-r-sm);
  background: var(--dt-surface-2);
  color: var(--dt-text-2);
}
.dt-tessera--tinta .dt-tessera__segno {
  background: oklch(var(--dt-tinta-l) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-color: oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
  color: oklch(var(--dt-tinta-l-testo) var(--dt-tinta-c-testo) var(--dt-blocco-tinta));
}
/* Il nome va a capo dentro alla tessera, e se una parola non ci sta si spezza:
   in un listino vero ci sono "Guaina termorestringente" e "Controtelaio
   zanzariera", e su una colonna larga un pollice una parola sola e' piu' larga
   della tessera che la contiene. Senza questo usciva dal bordo e finiva sotto
   la tessera accanto. */
.dt-tessera__nome {
  max-width: 100%;
  font-size: var(--dt-fs-md);
  font-weight: var(--dt-fw-medium);
  line-height: var(--dt-lh-tight);
  overflow-wrap: anywhere;
}
/* Il modello, o il ramo di catalogo da cui viene: e' quello che distingue due
   cose che si chiamano uguale, ed e' proprio qui che serve. */
.dt-tessera__sotto {
  max-width: 100%;
  color: var(--dt-text-3);
  font-size: var(--dt-fs-xs);
  line-height: var(--dt-lh-normal);
  overflow-wrap: anywhere;
}
/* Presa: il contorno d'inchiostro, e in alto a destra quanto se n'e' preso. Il
   numero e' la conferma che il tocco e' arrivato, e sta sulla tessera che si e'
   toccata invece che in un elenco piu' su. */
.dt-tessera--presa {
  border-color: var(--dt-accent-border);
  box-shadow: inset 0 0 0 1px var(--dt-accent-border);
  background: var(--dt-accent-soft);
}
.dt-tessera__quanti {
  position: absolute;
  top: var(--dt-sp-2);
  right: var(--dt-sp-2);
  min-width: 20px;
  height: 20px;
  padding: 0 var(--dt-sp-2);
  display: grid;
  place-items: center;
  border-radius: var(--dt-r-full);
  background: var(--dt-accent);
  color: var(--dt-text-inv);
  font-size: var(--dt-fs-xs);
  font-variant-numeric: tabular-nums;
}

/* 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 fila dei tasti in fondo alla procedura.

   Un riquadro solo, che e' gia' il piede del modale: dentro, le frecce a
   sinistra e quello che porta avanti a destra. Le due frecce stanno insieme
   perche' sono lo stesso gesto in due direzioni, e stanno lontane da "Salva"
   perche' quello e' un gesto diverso e non si preme per sbaglio. */
.dt-modal__foot--procedura { justify-content: space-between; }
.dt-procedura__frecce { display: flex; align-items: center; gap: var(--dt-sp-3); }
/* Quante domande restano, scritto: la fettuccia lo dice a colpo d'occhio, ma
   "3 di 7" e' l'unica forma che si legge senza contare. */
.dt-procedura__conto {
  color: var(--dt-text-3);
  font-size: var(--dt-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* I comandi che riguardano il blocco intero e non la domanda a schermo:
   buttarlo, o uscirne lasciandolo ai colleghi. Stanno in coda alla prima
   schermata — quella che chiede cos'e' stato — perche' e' li' che si scopre che
   quel blocco non doveva esserci, e non fra le frecce, dove una mano che corre
   finirebbe per premerli. */
.dt-procedura__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dt-sp-3);
  margin-top: auto;
  padding-top: var(--dt-sp-5);
  border-top: 1px solid var(--dt-border-soft);
}

/* Quello che si e' gia' preso, sopra alla griglia da cui lo si prende.
   Le righe restano quelle di prima — nome, −/+, la X — e non cambiano faccia
   fra la scheda e la procedura: e' la stessa riga, guardata da piu' vicino. */
.dt-presi {
  display: flex;
  flex-direction: column;
  gap: var(--dt-sp-2);
}
/* 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;
}

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

/* La campitura di un'attivita', grande come la mattonella che sara' in
   cantiere: sulla scheda di una riga che *decide uno schermo*, il colore e' il
   dato, non l'illustrazione del dato. Stesse variabili dei blocchi — dal codice
   arriva la sola tonalita', il resto lo decide il tema — cosi' il quadretto qui
   e la mattonella la' non possono scollarsi. */
.dt-campione {
  --dt-blocco-c: calc(var(--dt-blocco-croma, var(--dt-tinta-c)) * var(--dt-tinta-c-scala));
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--dt-r-md);
  background: oklch(var(--dt-tinta-l) 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: 1px solid oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
}

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

/* --------------------------------------------------------------------------
   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. 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;
    --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); }
  .dt-iconbtn--sm { width: var(--dt-h-tocco); height: var(--dt-h-tocco); }
  .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-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); }

  /* 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 i due di ogni giorno: l'occhio che apre la riga in lettura,
     e la matita che la corregge. `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
     dodici mattonelle in una finestra di seicento vogliono due scorrimenti
     prima di arrivare a "Dove". 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. */

/* Il campo che stringe un elenco sta sopra all'elenco e dentro allo stesso
   riquadro: e' quello che si guarda, non un comando a parte. */
.dt-cerca-elenco {
  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-soft);
}
.dt-cerca-elenco > :first-child { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------------------------------------
   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); }
.dt-tendina__barra {
  display: flex;
  align-items: center;
  gap: var(--dt-sp-3);
  padding: 0 var(--dt-riga-x);
  background: var(--dt-surface);
}
/* **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;
  gap: var(--dt-sp-3);
  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;
}
.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);
}
/* Quanto e' grosso quello che quel nome contiene, detto dal nome stesso.
   Il reparto si legge come l'intestazione di un elenco, la famiglia come un
   titolo, il ripiano come una voce: tre pesi, e chi ne vede due di fila sa
   quale sta sopra all'altro senza dover cercare il rientro. E' l'unica cosa che
   funziona anche a meta' schermata, dove il piano di sopra e' gia' scorso via.
   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;
  color: var(--dt-text-2);
}
.dt-tendina--ripiano > .dt-tendina__barra .dt-tendina__titolo {
  font-size: var(--dt-fs-sm);
  font-weight: var(--dt-fw-medium);
  color: var(--dt-text-2);
}
.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 binario: il filo da cui pende un piano dell'albero.
   Cade a mezza corsia dal bordo della riga che l'ha aperto — sotto alla
   freccia se la riga non si trascina, sotto alla maniglia se si trascina — e
   quello e' il punto da cui l'occhio lo vede partire. Un filo e non due pixel:
   deve dire "queste righe stanno li' sotto", non fare una colonna. */
.dt-tendina__corpo {
  position: relative;
  margin-left: var(--dt-passo);
  border-left: 1px solid var(--dt-border-strong);
  background: var(--dt-surface);
}
/* Il piede del binario: la stanghetta che dice dove finisce il gruppo.
   Senza, un piano che si chiude e il piano di sopra che riprende sono la stessa
   cosa — il filo semplicemente smette — e per capire se la riga dopo sta
   ancora dentro bisogna risalire a cercare i rientri. */
.dt-tendina__corpo::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 7px;
  height: 1px;
  background: var(--dt-border-strong);
}

/* 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;
  /* 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);
  min-height: var(--dt-h-tocco);
  padding: var(--dt-sp-2) var(--dt-riga-x);
}
.dt-voce + .dt-voce { border-top: 1px solid var(--dt-border-soft); }
.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;
}
/* Due righe dove il nome da solo non basta: una commessa si riconosce dal
   negozio, ma quale delle tre dello stesso cancello sia lo dicono cosa resta da
   montare e da quando non ci si va. */
.dt-voce__testo {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}
.dt-voce__testo > .dt-voce__nome { flex: 0 1 auto; }
.dt-voce__sotto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--dt-fs-sm);
  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;
  font-size: var(--dt-fs-sm);
  color: var(--dt-text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dt-voce__nome,
.dt-voce__testo { min-width: clamp(96px, 30%, 180px); }
.dt-voce__prezzo {
  flex: 0 0 clamp(72px, 12%, 96px);
  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; }
}

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

/* --------------------------------------------------------------------------
   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);
  align-self: stretch;
  min-height: var(--dt-h-tocco);
  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;
}

/* 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' una mattonella con dentro il
   suo segno, e questa e' quella mattonella rimpicciolita — stessa campitura,
   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: 1px solid oklch(var(--dt-tinta-l-bordo) var(--dt-blocco-c) var(--dt-blocco-tinta));
  border-radius: var(--dt-r-sm);
  background: oklch(var(--dt-tinta-l) 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 campitura il segno resta nudo, sul grigio della pagina. E' il caso
   normale del listino, non un ripiego: le poche righe colorate sono quelle che
   qualcuno ha deciso di far trovare al volo, e si vedono perche' intorno hanno
   il grigio. */
.dt-tinta-segno--nuda {
  border-color: transparent;
  background: none;
  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 {
  border-color: var(--dt-warn-border);
  background: var(--dt-warn-soft);
  color: var(--dt-warn);
}

/* 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);
  padding: var(--dt-sp-3);
  border: 1px solid var(--dt-border-soft);
  border-radius: var(--dt-r-md);
  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;
  }
}

/* Stampa: sul foglio deve restare il contenuto e nient'altro.
   Sparisce quel che serve solo a comandare l'applicazione (barra laterale,
   pulsanti, avvisi passeggeri) e i colori tornano nero su bianco, perche'
   il tema scuro in stampa e' illeggibile e svuota la cartuccia. */
@media print {
  :root, [data-tema] {
    --dt-bg: #fff;
    --dt-surface: #fff;
    --dt-surface-2: #fff;
    --dt-surface-inset: #fff;
    --dt-text: #000;
    --dt-text-2: #333;
    --dt-text-3: #555;
    --dt-border: #bbb;
    --dt-border-strong: #888;
  }

  .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 {
    border-color: #bbb;
    box-shadow: none;
    break-inside: avoid;
  }

  .dt-table { max-height: none; }
  .dt-table tr { break-inside: avoid; }
  .dt-table thead th { border-bottom: 1px solid #888; }

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