/* ============================================================
   ATTIVITÀ — IL TELEFONO

   Stava in fondo a `tasks.css`, come la parte del telefono di Contatti
   stava in fondo a `contacts.css`: si carica **subito dopo** di lui, quindi
   la cascata e' quella di quando stavano nello stesso file.
   ============================================================ */

/* ============================================================
   ATTIVITÀ SU UN TELEFONO

   Sulla scrivania l'elenco dei ticket è una griglia di `.trow` larga
   almeno `.tlist-minw` (più di mille pixel, `tasks.css`): su un telefono
   si trascinava di lato, e la prima cosa utile — il titolo — usciva dallo
   schermo al primo dito.

   Per un giro qui c'era quella stessa riga rimessa su una griglia a
   cinque colonne: niente scorrimento, titolo intero, e le quattro celle
   mute con davanti il nome della loro colonna. Funzionava, ma restava
   una tabella travestita — e le tre cose che su un telefono si guardano
   davvero (di quale progetto è, a che punto è, se ha dei sottoticket)
   non c'erano, perché nella tabella non ci sono.

   Adesso il disegno è un altro (`tasks/card.js`): una scheda, come nel
   resto dell'app e come la Bacheca ha sempre avuto. Il markup del
   desktop non lo tocca nessuno — sono due funzioni, e la soglia la sa
   `mshellStretto()`.
   ============================================================ */
@media (max-width:640px){
  /* La cornice esterna sparisce: le schede **sono** le righe, e una
     scheda dentro a una scheda è una cornice di troppo. */
  /* **La cornice sparisce, il margine no.** `padding:0` su un id batte
     il `padding-inline:12px` che `.main > *` da' a ogni blocco della
     pagina, e le schede finivano a filo dello schermo mentre la barra
     degli strumenti sopra restava rientrata: due allineamenti diversi
     nella stessa schermata. */
  #taskListCard{background:none;border:none;box-shadow:none;padding:0 12px;}
  #taskListCard .table-wrap{overflow:visible;}
  .tlist-head{display:none;}
  .tlist-minw{min-width:0;}
  /* Le schede non sono righe della griglia della scrivania. */
  .tlist-grid{display:block;}

  /* ---- i due gesti ----
     Sotto alla scheda ci stanno le due azioni, una per lato; la scheda
     ci scivola sopra e le scopre. Quella che si sta per fare si accende
     (`armed-*`): il colore arriva **prima** che il dito si stacchi, che
     e' l'unico momento in cui serve saperlo. */
  .tk-swipe{position:relative;overflow:hidden;border-radius:14px;margin-bottom:11px;}
  .tk-swipe-act{
    position:absolute;top:0;bottom:0;display:none;align-items:center;gap:6px;
    padding:0 18px;font-size:12.5px;font-weight:700;
    background:var(--primary-soft);color:var(--primary-dark);
  }
  .tk-swipe-act svg{width:16px;height:16px;}
  .tk-swipe-act.go{left:0;}
  .tk-swipe-act.done{right:0;}
  .tk-swipe.to-go .tk-swipe-act.go,.tk-swipe.to-done .tk-swipe-act.done{display:flex;}
  .tk-swipe.armed-go .tk-swipe-act.go,.tk-swipe.armed-done .tk-swipe-act.done{
    background:var(--primary);color:var(--on-accent);
  }
  /* Mentre il dito e' giu' la scheda segue senza animazione; quando si
     stacca torna al suo posto con un tempo, se no sparisce di scatto. */
  /* Niente selezione del testo: un dito che trascina una scheda
     selezionava le parole sotto, e restavano evidenziate in blu. */
  .tk-swipe .tk-card{transition:transform .18s ease;touch-action:pan-y;
    -webkit-user-select:none;user-select:none;}
  .tk-swipe.is-swiping .tk-card{transition:none;}
  .tk-swipe .tk-card{margin-bottom:0;}

  /* La riga che spiega i gesti: si legge una volta e poi si smette, ed
     e' giusto cosi' — serve al primo giro. */
  .tk-swhint{
    display:flex;align-items:center;gap:6px;margin:0 0 8px;
    padding:0 4px;font-size:11px;color:var(--muted);
  }
  .tk-swhint svg{width:13px;height:13px;color:var(--dim);flex:0 0 13px;}

  /* ---- la scheda ----
     Le misure vengono dal disegno mobile: scheda con quattordici di
     aria e raggio quattordici, gap nove fra i blocchi, titolo a 14 di
     peso 600, numeri a 11,5. Non sono numeri a caso: una scheda con
     l'aria del desktop ne fa stare due per schermata invece di tre, e
     su un telefono la schermata e' tutto quello che c'e'. */
  .tk-card{
    background:var(--card);border:1px solid var(--border);
    border-radius:14px;box-shadow:var(--shadow);
    padding:14px;margin-bottom:11px;
    display:flex;flex-direction:column;gap:9px;
  }
  .tk-card{cursor:pointer;}
  .tk-card:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .tk-card.on{outline:2px solid var(--primary);outline-offset:-1px;}
  .tk-card.dragging{opacity:.4;}
  /* Un sottoticket è rientrato: sul desktop con il `padding-left`, qui
     con un filetto, perché dentro a una scheda un rientro non si vede. */
  .tk-card.sub{margin-left:16px;border-left:3px solid var(--primary-soft);}

  .tk-card-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .tk-card-head .type-icon{width:18px;height:18px;border-radius:5px;flex:0 0 18px;}
  .tk-card-head .type-icon svg{width:11px;height:11px;}
  .tk-card-head .chk{width:20px;height:20px;border-radius:6px;flex:0 0 20px;}
  .tk-card-head .expand-btn{width:18px;height:18px;display:flex;align-items:center;
    justify-content:center;color:var(--muted);flex:0 0 18px;cursor:pointer;}

  /* **La chiave e' un pieno con il bianco sopra, e qui si puo'.** La
     regola di §2 vale per i **token** che di notte si schiariscono; il
     colore di un cliente e' un esadecimale che sta nel record e non
     cambia con il tema, ed e' la stessa ragione per cui `clientChip`
     scrive da sempre le iniziali in bianco sul colore del cliente.
     Prima era una coppia lavata: leggibile, ma su una scheda dove ogni
     riga comincia con la chiave serviva l'ancora forte del disegno. */
  .tk-card-key{
    background:var(--tint,var(--muted));color:var(--on-accent);
    font-size:10.5px;padding:3px 7px;border-radius:6px;letter-spacing:.02em;
  }

  /* Il tasto del timer: **contornato, non pieno**. Su una scheda in un
     elenco di sei, sei quadrati arancioni pieni sono sei inviti a
     premere; il gesto principale resta il tondo in basso. Sta a destra e
     ci resta anche quando le etichette vanno a capo: `margin-left:auto`
     su un elemento che va a capo lo porterebbe da solo su una riga sua. */
  .tk-card-play{
    margin-left:auto;flex:0 0 30px;width:30px;height:30px;border-radius:9px;
    background:var(--card);border:1px solid var(--border);color:var(--primary-dark);
  }
  .tk-card-play svg{width:14px;height:14px;fill:currentColor;stroke:none;}

  .tk-card-title{
    margin:0;font-size:14px;font-weight:600;line-height:1.3;
    letter-spacing:-.1px;cursor:pointer;
  }
  .tk-card-title.done-text{text-decoration:line-through;color:var(--muted);}
  /* Il progetto sta attaccato al titolo: sono una cosa sola, e il gap di
     nove fra i blocchi li separerebbe come se fossero due. */
  .tk-card-proj{margin:-6px 0 0;font-size:11.5px;color:var(--muted);}

  .tk-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .tk-card-meta .app-select{min-width:0;}

  .tk-card-time{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .tk-card-num{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}
  .tk-card-num small{font-size:11.5px;font-weight:600;color:var(--muted);}
  .tk-card-num.over{color:var(--red-dark);}
  .tk-card-due{
    display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
    font-weight:600;color:var(--neutral-ink);flex:0 0 auto;
  }
  .tk-card-due svg{width:13px;height:13px;}
  .tk-card-due.late{color:var(--red-dark);}

  /* La barra sta attaccata ai numeri che spiega, non a nove pixel. */
  .tk-card-bar{height:5px;border-radius:3px;background:var(--track);margin-top:-3px;overflow:hidden;}
  .tk-card-bar i{display:block;height:100%;background:var(--primary);border-radius:3px;}
  .tk-card-bar.over i{background:var(--red);}

  /* Il piede è separato da una linea, come nelle schede dei progetti:
     dice chi ci lavora e se il ticket è diviso, che sono due cose sul
     lavoro e non sul ticket. */
  .tk-card-foot{
    display:flex;align-items:center;gap:10px;
    padding-top:9px;border-top:1px solid var(--border);
    font-size:11.5px;color:var(--muted);
  }
  .tk-card-foot .avatar.sm{width:22px;height:22px;font-size:9.5px;}
  .tk-card-noone{
    width:22px;height:22px;flex:0 0 22px;border-radius:50%;border:1px dashed var(--dim);
    font-size:0;
  }

  /* ---- la barra degli strumenti ---- */
  /* La striscia si prende la riga e il tasto dei filtri sta in fondo,
     quadrato: e' il taglio del disegno, ed e' anche l'unico modo perche'
     con tre viste (il Calendario ne ha tre) non vada a capo niente. */
  .tk-ctx{display:flex;align-items:center;gap:8px;width:100%;min-width:0;}
  .tk-ctx .tabbtns{flex:1;min-width:0;}

  /* **Le pastiglie rapide scorrono su una riga sola, e arrivano al
     bordo.** Non contraddice «le sezioni vanno a capo, non scorrono»:
     una sezione e' una destinazione, e nasconderne una vuol dire una
     pagina che non si raggiunge; un filtro rapido e' un affinamento, e
     qui sono sette. Quello che rendeva lo scorrimento il gesto che
     nessuno prova era la striscia **chiusa dentro** a una cornice: qui
     la fila esce dai margini della pagina, e una pastiglia tagliata a
     meta' sul bordo dice da sola che ce n'e' dell'altra. */
  /* La fila esce dai margini, non la barra: la barra sta direttamente
     nella pagina e porta i suoi dodici pixel di rientro, e con il margine
     negativo su di lei usciva dallo schermo di dodici pixel. */
  .tk-toolbar-m{margin:0 0 8px;}
  .tk-toolbar-m .quick-filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:7px;margin:0 -12px;padding:2px 12px 4px;
  }
  .tk-toolbar-m .quick-filters::-webkit-scrollbar{display:none;}
  .tk-toolbar-m .qf-chip{flex:0 0 auto;}

  .tk-count{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:0 2px 8px;font-size:12px;color:var(--muted);
  }
  .tk-count b{color:var(--neutral-ink);font-weight:700;}
  /* L'ordinamento e' un comando, non una scatola: apre lo stesso foglio
     del pulsante dei filtri, e una cornice intorno lo farebbe sembrare
     un terzo posto dove guardare. */
  .tk-count .lnk{
    display:inline-flex;align-items:center;gap:4px;
    font-size:12px;font-weight:600;color:var(--primary-dark);
    background:none;border:none;padding:0;font-family:inherit;cursor:pointer;
  }
  .tk-count .lnk svg{width:12px;height:12px;}

  /* La barra delle azioni di gruppo resta attaccata in basso, ma sopra
     alla barra di navigazione: sotto ci finirebbe mezza. */
  .bulk-bar{position:sticky;bottom:calc(80px + env(safe-area-inset-bottom,0px));}

  /* La bacheca scorre di lato, ed è giusto così: una colonna di stato è
     una colonna, e impilarle vorrebbe dire perdere l'unica cosa che una
     bacheca dice. Le corsie si stringono a quanto basta al dito. */
  .tkb-board{grid-auto-columns:minmax(258px,1fr);gap:10px;}

  /* ============================================================
     LA SCHEDA DI UN TICKET, SUL TELEFONO
     ============================================================ */
  /* La barra da cinquantadue: si **torna indietro**, non si chiude — qui
     il pannello e' la schermata. Le stesse misure della testata di una
     pagina, perche' e' la stessa cosa vista da dentro. */
  .td-bar{
    display:flex;align-items:center;gap:6px;
    margin:0 0 6px;min-height:52px;
  }
  .td-bar .icon-btn{width:40px;height:40px;flex:0 0 40px;border:none;background:transparent;}
  .td-bar .icon-btn svg{width:21px;height:21px;}
  /* La chiave sta in mezzo e fa da titolo della barra: scorrendo e'
     l'unica cosa che resta a dire di quale ticket si tratta. */
  .td-bar-key{
    flex:1;min-width:0;font-size:15.5px;font-weight:700;letter-spacing:-.2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .td-bar .tdetail-actions{margin:0;flex:0 0 auto;}
  .td-bar .topbar-me{display:flex;}

  .td-head{padding:0;border:none;margin-bottom:2px;}
  .td-head .breadcrumb{font-size:11.5px;}
  /* **Le linguette esistono solo qui.** Sul desktop la scheda è due
     colonne e ci sta tutto: dodici sezioni si scorrono con la rotella, e
     la colonna di destra tiene sott'occhio cliente, scadenza e tariffa.
     Su un telefono diventano dodici blocchi in fila, e per arrivare ai
     commenti si scorrono otto schermate. Il markup è lo stesso nelle due
     forme — a nascondere quello che non è della linguetta scelta è
     questo foglio, quindi sopra ai 640 non c'è niente di nascosto. */
  .td-tabs{
    display:flex;gap:2px;padding:3px;margin:0 0 14px;
    background:var(--track);border-radius:11px;
  }
  .td-tabs button{
    flex:1;min-height:36px;border:none;background:transparent;border-radius:9px;
    font:inherit;font-size:13px;font-weight:600;color:var(--neutral-ink);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:5px;
  }
  .td-tabs button.active{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);}
  .td-tabs .n{font-size:10.5px;font-weight:700;color:var(--muted);}
  .td-tabs button.active .n{color:var(--primary-dark);}

  .td-on-dettagli .td-t-tempo,.td-on-dettagli .td-t-commenti,
  .td-on-tempo .td-t-dettagli,.td-on-tempo .td-t-commenti,
  .td-on-commenti .td-t-dettagli,.td-on-commenti .td-t-tempo{display:none;}
  /* Una linguetta senza niente dentro non lascia lo schermo vuoto. */
  .td-on-tempo .tdetail-layout > div:first-child:empty::after,
  .td-on-tempo .tdetail-layout > div:first-child > *:only-child:not(.td-section){display:none;}

  /* **Ogni sezione diventa una scheda**, con il suo titolo dentro. In
     fila separate da una linea sono dodici blocchi che si somigliano
     tutti; a schede si vede dove finisce una cosa e comincia l'altra
     senza contare le righe. */
  .tdetail-layout > div:first-child{gap:11px;}
  .td-section{
    padding:14px;border:1px solid var(--border);border-top:1px solid var(--border);
    border-radius:14px;background:var(--card);box-shadow:var(--shadow);
  }
  .td-section:first-child{padding-top:14px;border-top:1px solid var(--border);}
  .td-section:empty{display:none;}
  /* **Il titolo di una scheda e' un titolo.** Sul desktop le sezioni
     sono separate da una linea, e l'etichetta in maiuscoletto grigio con
     l'icona davanti e' un'intestazione di colonna: serve a dire dove
     finisce una e comincia l'altra. Dentro a una scheda quel mestiere lo
     fa gia' la cornice, e quello che resta e' un titolo scritto piccolo
     e sbiadito sopra a del testo nero — cioe' una gerarchia al
     contrario. */
  .tdetail-section-head{
    margin-bottom:10px;font-size:14px;font-weight:700;
    text-transform:none;letter-spacing:-.1px;color:var(--text);
  }
  .tdetail-section-head > svg,.tdetail-section-head > i{display:none;}
  .tdetail-section-head .muted-count{margin-left:auto;font-size:12.5px;}
  .side-group-label{
    margin-bottom:8px;font-size:14px;font-weight:700;
    text-transform:none;letter-spacing:-.1px;color:var(--text);
  }

  /* Una riga della scheda porta la freccetta: dice che si tocca. Solo
     dove porta da qualche parte — un valore che si cambia ha gia' il suo
     comando, e due segni sulla stessa riga sono due promesse diverse. */
  .side-group .dr{padding:9px 0;border-top:1px solid var(--line-soft);}
  .side-group .dr:first-of-type{border-top:none;}
  .side-group .dr-label{font-size:12.5px;}
  /* Il tempo la sua cornice ce l'ha gia' (`.tt-hero`, il riquadro
     arancione): una scheda intorno sarebbe una cornice dentro a una
     cornice, e si vedeva. */
  .td-time{padding:0;border:none;box-shadow:none;background:none;}
  .tt-hero{border-radius:14px;}
  /* Il titolo di questa scheda e' un titolo come gli altri. Sul desktop
     e' arancione perche' li' le sezioni sono separate da una linea e
     quella tinta dice «questa e' diversa»; qui ogni sezione e' una
     scheda a se', il riquadro lo dice gia', e un titolo colorato in
     mezzo a sette neri diventa solo il piu' rumoroso. */
  .tt-hero .tdetail-section-head{color:var(--text);}

  /* La barra laterale scende in fondo alla linguetta «Dettagli», e i
     suoi quattro gruppi diventano quattro schede come le altre: qui non
     è più una colonna che sta a fianco, è altra roba da leggere. */
  /* Il quaranta di distacco fra le due colonne, a una colonna sola
     diventa un buco di quaranta pixel in mezzo alla pagina: le schede
     hanno gia' il loro undici. */
  /* **Una colonna di griglia ha `min-width:auto`.** A una colonna sola
     sembra che non possa piu' succedere niente, e invece il figlio piu'
     largo la fa crescere oltre lo schermo: in «Tempo» la colonna si
     allargava a 456 dentro a 354, e quello che usciva era il bordo
     destro di ogni scheda — la terza cifra del riepilogo tagliata a
     meta', la durata di ogni registrazione fuori dallo schermo. La
     pagina non scorreva di lato, quindi non se ne vedeva la causa: si
     vedeva solo che mancava un pezzo.

     E' la stessa famiglia di `.adm-split` in `admin.css`. */
  .tdetail-layout{gap:11px;}
  .tdetail-layout > div{min-width:0;}
  .td-section{min-width:0;}
  .td-side{position:static;}
  .side-panel{background:none;padding:0;display:flex;flex-direction:column;gap:11px;border-radius:0;}
  .side-group{
    padding:14px;border-top:none;border:1px solid var(--border);
    border-radius:14px;background:var(--card);box-shadow:var(--shadow);
  }
  .side-group-label{margin-bottom:6px;}

  /* **Il tempo sta in cima.** Sul desktop l'ordine non si nota;
     qui per arrivare a «a che punto sono» e «avvia il timer» — la
     ragione per cui un ticket si apre dal telefono — bisognava scorrere
     tre schermate. Lo sposta un `order` sulla sezione, che si riconosce
     da una **classe** e non da una posizione: un `:nth-child` si sposta
     al primo blocco aggiunto sopra. */
  .tdetail-layout > div:first-child{display:flex;flex-direction:column;}
  .td-time{order:-1;}

  /* **Le tre cifre sono una striscia sola, non tre schede.** Restano
     tre — sono corte («4h», «2h») e a due più una la terza resta sola in
     fondo a metà riga — ma dentro a una cornice unica: tre riquadri con
     bordo e ombra dentro a un quarto riquadro sono quattro cornici
     annidate, e in trecentosessantasei pixel si vedono tutte.

     Cadono anche le icone delle etichette. In un terzo di schermo
     «REGISTRATO» a 9,5 non ci sta con un'icona davanti, e il rimedio di
     prima — stringere la spaziatura e lasciarlo andare a capo — faceva
     due righe dove le altre due ne avevano una. L'icona lì non dice
     niente che la parola non dica già. */
  .tt-stats-grid{
    display:flex;gap:0;margin-bottom:11px;padding:10px 0;
    border:1px solid var(--primary-mid);border-radius:12px;background:var(--card);
  }
  .tt-stat{
    flex:1 1 33%;min-width:0;padding:4px 6px;gap:2px;
    display:flex;flex-direction:column;align-items:center;
    background:none;border:none;border-radius:0;box-shadow:none;
  }
  .tt-stat b{font-size:13.5px;}
  .tts-label{margin-bottom:0;font-size:9.5px;letter-spacing:.04em;line-height:1.2;text-align:center;}
  .tts-label svg{display:none;}

  /* **L'avanzamento si dice prima di disegnarlo.** Una barra con «50%»
     accanto e niente altro è un numero senza soggetto: al cinquanta per
     cento di cosa? Il nome va sopra, e la barra prende la riga tutta —
     a metà larghezza, sotto a una striscia di tre numeri, sembrava la
     quarta cifra. */
  .tt-progress-wrap{flex-wrap:wrap;gap:0 10px;margin-bottom:12px;}
  .tt-progress-lab{display:block;order:1;flex:1;min-width:0;font-size:12px;color:var(--muted);}
  .tt-progress-pct{order:2;font-size:13px;color:var(--text);}
  .tt-progress-pct.over{color:var(--red-dark);}
  .tt-progress-wrap .progress{order:3;flex:1 0 100%;margin-top:6px;}

  /* I due pulsanti del tempo si dividono la riga: sono il gesto per cui
     si è aperto il ticket, e a metà larghezza ci arriva il pollice. */
  .td-timeacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .td-timeacts .btn{justify-content:center;min-height:46px;font-size:14px;border-radius:13px;}

  /* Le quattro pastiglie di azione uscivano dallo schermo, e con loro il
     cestino: vanno a capo, e non si incollano ai badge sopra. */
  /* Le cinque azioni sono un menu (`tkAzioniHtml`), quindi qui resta
     solo il posto dove sta: in fondo alla riga dei badge. */
  /* **Uno stato vuoto dentro a una scheda non ha una cornice sua.** Il
     riquadro tratteggiato serviva a dire «qui non c'e' niente» quando le
     sezioni erano separate da una linea; dentro a una scheda e' una
     cornice dentro a una cornice, ed e' la stessa famiglia delle tre
     cifre qui sopra. Resta il contenuto, centrato, con l'icona sopra. */
  .td-empty-mini{
    flex-direction:column;align-items:center;text-align:center;gap:7px;
    padding:22px 14px;background:none;border:none;
  }
  .td-empty-mini svg{width:26px;height:26px;}
  .td-empty-mini b{font-size:13.5px;margin-bottom:0;}
  .td-empty-mini span{display:block;max-width:32ch;font-size:12px;line-height:1.5;}

  /* La descrizione, qui, e' del testo che si legge (vedi `detail.js`). */
  .td-desc{margin:0;font-size:13px;line-height:1.5;}
  .td-desc.td-none{color:var(--dim);}

  /* **La riga della checklist prende la sua riga.** Titolo, campo e
     pulsante sulla stessa riga lasciavano al campo centoventi pixel:
     «Nuova voce…» ci sta a malapena, e quello che ci si scrive dentro
     no. E il piu' e' un pieno primario, perche' e' l'unico gesto di
     quella scheda. */
  .td-sechead{flex-wrap:wrap;gap:8px 10px;margin-bottom:10px;}
  /* Il gesto della scheda sta in fondo alla riga del titolo, non
     attaccato al titolo: incollato sembra parte del nome della sezione. */
  .td-sechead > .th-action{margin-left:auto;}
  .td-chkadd{flex:1 0 100%;gap:8px;}
  .td-chkadd .td-chkin{flex:1;min-width:0;min-height:42px;}
  .td-chkadd .btn{
    flex:0 0 42px;width:42px;min-height:42px;padding:0;justify-content:center;
    background:var(--primary);border-color:var(--primary);color:var(--on-accent);
  }
  .td-chkadd .btn svg{width:17px;height:17px;}

  /* **Il gesto principale di un ticket e' registrare il tempo**, ed e'
     quello che il tondo fa qui — non «nuovo ticket», che e' il gesto
     della pagina che sta sotto. Stesse misure del tondo della pagina
     (`mobile.css`), perche' e' lo stesso oggetto in un'altra schermata. */
  .td-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px));
    width:54px;height:54px;border-radius:19px;border:none;padding:0;
    background:var(--primary);color:var(--on-accent);cursor:pointer;
    box-shadow:0 6px 18px -4px color-mix(in srgb,var(--primary) 55%,transparent);
  }
  .td-fab svg{width:25px;height:25px;}

  /* **Due parole corte si leggono da sole**, e l'icona accanto mangia i
     pixel che servono al testo. E' la striscia dei ticket e basta: la
     classe generica la usano anche i selettori di sola icona di altre
     pagine, dove togliere l'icona lascerebbe un pulsante muto. */
  .tk-viewtabs button svg{display:none;}

  .tdetail-actions{margin-left:auto;}
  .tdetail-title{font-size:19px;margin:8px 0 12px;}
  .td-head .breadcrumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* ---- la testata ferma e il corpo che scorre ----
     Come nel disegno: barra, blocco del titolo e linguette stanno fermi,
     e scorre solo `.td-mbody`. Scorrendo il blocco del titolo si chiude
     (`.td-compact`, messo da `tkTestaScorre()`) e la chiave sale nella
     barra. Il pannello smette di scorrere lui: due contenitori che
     scorrono uno dentro l'altro trascinano la testata con il resto.
     L'id due volte serve a battere `#drawerOverlay .modal.drawer` di
     `mobile.css`, che il browser legge dopo. */
  #drawerOverlay #drawerBody:has(> .td-mtop){
    padding:0;display:flex;flex-direction:column;overflow:hidden;
  }
  .td-mtop{flex:0 0 auto;position:relative;z-index:3;background:var(--bg);transition:box-shadow .18s;}
  .td-compact .td-mtop{box-shadow:0 1px 0 var(--border);}
  .td-mtop .td-bar{margin:0;padding:8px 8px 0 12px;}
  .td-mtop .td-bar-key{opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;}
  .td-compact .td-mtop .td-bar-key{opacity:1;transform:none;}
  .td-hero{
    padding:1px 16px 11px;overflow:hidden;max-height:220px;
    transition:max-height .22s ease,opacity .16s ease,padding .22s ease;
  }
  .td-compact .td-hero{max-height:0;opacity:0;padding-top:0;padding-bottom:0;}
  .td-hero .td-head{margin:0 0 3px;}
  .td-hero .td-head .breadcrumb{font-size:11px;font-weight:600;color:var(--muted);margin:0;}
  .td-hero .tdetail-title{margin:0;font-size:19px;line-height:1.15;letter-spacing:-.4px;}
  .td-hero .tdetail-head{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:8px 0 0;}
  .td-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
  .td-mtop .td-tabs{margin:0 12px 10px;}
  /* Il fondo si riserva la barra in basso **e** il tondo, che le sta
     sopra: senza, l'ultima riga di «Dettagli» — la tariffa — restava
     sotto al tondo e non si leggeva. */
  .td-mbody{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    padding:2px 12px calc(150px + env(safe-area-inset-bottom,0px));
  }
  body.has-mtimer .td-mbody{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px));}

  /* ---- le schede della colonna di destra, come quelle del disegno ----
     Il primo gruppo perdeva il margine in alto per una regola del desktop
     (`.side-group:first-child`), e il titolo finiva sul bordo. E sotto al
     titolo non c'e' una linea: la prima riga non ha il filo sopra. */
  .side-group:first-child{padding-top:14px;}
  .side-group-label{margin-bottom:2px;}
  .side-group-label + .dr{border-top:none;}
  .side-group .dr{padding:10px 0;font-size:13px;}
  .side-group .dr-label{font-size:12px;}
  .side-group .dr-value{font-weight:600;}
  /* **Un valore che si cambia e' un valore, con la freccetta.** Tendina e
     data dentro a una riga avevano la loro cornice: due caselle in mezzo
     a righe di testo sembravano un modulo. Il comando resta lo stesso, si
     tocca la riga del valore. */
  .side-group .dr-value .aselect,.side-group .dr-value .adate{
    border:none;background:transparent;box-shadow:none;padding:0;min-height:0;
    justify-content:flex-end;font-weight:600;
  }
  .side-group .dr-value .aselect > svg,.side-group .dr-value .adate-icon{display:none;}
  .side-group .dr-value .aselect::after,.side-group .dr-value .adate::after{
    content:"›";margin-left:7px;color:var(--dim);font-weight:400;
  }
  .side-group .dr-value .aselect .placeholder,.side-group .dr-value .adate-value.placeholder{color:var(--dim);font-weight:500;}
  /* «Fatturabile» e' un interruttore a due, neutro: il verde in questa app
     non vuol dire «a posto» (solo la barra della password lo fa). */
  .side-group .seg-toggle{background:var(--track);border:none;border-radius:9px;padding:2px;width:112px;}
  .side-group .seg-toggle button{flex:1;justify-content:center;height:26px;padding:0;font-size:11.5px;border-radius:7px;}
  .side-group .seg-toggle button svg{display:none;}
  .side-group .seg-toggle button.active.yes,.side-group .seg-toggle button.active.no{
    background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.08);
  }

  /* Il gesto sotto al contenuto della scheda dei sottoticket, centrato. */
  .td-subadd{display:flex;justify-content:center;margin-top:4px;}
  .td-subadd .btn{min-height:38px;padding:0 16px;}
  .td-sechead > .muted-count{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
}