/* ============================================================
   IL TELEFONO

   Quello che esiste **solo** sotto ai 640. Fuori dalla soglia c'è una
   riga sola, ed è quella che **spegne** la barra in basso: il suo
   elemento sta nel markup a qualunque larghezza, e un `<nav>` vuoto
   senza regole resta un blocco che si prende la sua riga in fondo alla
   pagina — su desktop si vedeva come una striscia di niente. Tutto il
   resto sta dentro a `@media (max-width:640px)`, e si può controllare
   leggendo invece che fidandosi.

   Sopra i 640 comanda tutto quello che c'era prima: la barra laterale (o
   il suo cassetto fra 640 e 900), la testata, le pagine. Qui sotto
   comanda la regola del disegno mobile: **una barra in basso da cinque
   posti**, e il pollice che arriva a tutto quello che si tocca spesso.

   È un foglio del guscio, non di una pagina: veste `.app`, `.main` e la
   navigazione, cioè cose che valgono dappertutto. Per questo sta negli
   elenchi dei fogli del guscio di `ui-tests/` — se no i controlli che
   impediscono a una pagina di rivestire il guscio lo segnalerebbero, e
   avrebbero ragione.
   ============================================================ */

/* Le uniche righe fuori dalla soglia, e il motivo sta qui sopra: sono
   elementi che stanno nel markup a qualunque larghezza, e che senza una
   regola si vedrebbero anche dove non servono. L'avatar in testata e' il
   caso piu' insidioso — sul desktop il profilo sta gia' in fondo alla
   barra laterale, e due facce nella stessa schermata sono due posti da
   cui fare la stessa cosa. */
.mnav,.mnav-ovl,.msearch,.topbar-me,.mtimer-dock,.topbar-more,.topbar-back,.mcrumb,.topbar-ctx{display:none;}

@media (max-width:640px){
  .mnav{display:flex;}
  .topbar-me{display:flex;}
  /* ---- la barra in basso ----
     Fissa, sopra a tutto quello che scorre, e con il suo posto riservato
     in fondo alla pagina: senza, l'ultima riga di ogni elenco finisce
     sotto alla barra e non si riesce a toccarla. */
  .mnav{
    position:fixed;left:0;right:0;bottom:0;z-index:180;
    align-items:stretch;
    height:calc(62px + env(safe-area-inset-bottom,0px));
    padding:5px 4px calc(6px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
  }
  /* Il vetro smerigliato non c'è dappertutto: senza, un fondo
     semitrasparente lascerebbe leggere il testo che ci scorre sotto. */
  @supports not (backdrop-filter:blur(2px)){
    .mnav{background:var(--bg);}
  }
  .mnav-item{
    flex:1;min-width:0;border:none;background:transparent;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--muted);font:inherit;font-size:10px;font-weight:600;
    text-decoration:none;padding:0;border-radius:10px;
  }
  .mnav-item svg{width:21px;height:21px;}
  .mnav-item span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mnav-item.on{color:var(--primary-dark);}
  .mnav-item.on svg{stroke-width:2.1;}
  .mnav-item:active{background:var(--hover);}
  .mnav-item:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;}

  /* Lo spazio che la barra si prende, restituito a chi scorre. */
  .main{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));}

  /* ---- «Altro» ----
     Un velo a tutto schermo, non una rotta: si apre, si sceglie, sparisce.
     Sta **sotto** alle finestre (z-index 200) e sopra alla pagina. */
  .mnav-ovl{
    position:fixed;inset:0;z-index:170;background:var(--bg);
    display:flex;flex-direction:column;
    transform:translateY(12px);opacity:0;
    transition:transform .2s ease,opacity .16s ease;
  }
  .mnav-ovl.on{transform:none;opacity:1;}
  .mnav-ovl[hidden]{display:none;}
  .mnav-sheet{display:flex;flex-direction:column;min-height:0;flex:1;
    padding-top:env(safe-area-inset-top,0px);}
  .mnav-head{display:flex;align-items:flex-start;gap:6px;padding:10px 8px 11px 16px;}
  .mnav-htxt{flex:1;min-width:0;padding-top:4px;}
  .mnav-htxt h2{margin:0;font-size:22px;line-height:1.18;font-weight:700;letter-spacing:-.45px;}
  .mnav-htxt p{margin:4px 0 0;font-size:12.5px;color:var(--muted);}
  .mnav-hbtn{background:transparent;border-color:transparent;color:var(--text);}
  .mnav-hbtn svg{width:21px;height:21px;}
  .mnav-hme{margin:5px 4px 0 2px;}
  .mnav-scroll{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:flex;flex-direction:column;gap:11px;
    padding:2px 12px calc(80px + env(safe-area-inset-bottom,0px));
  }
  .mnav-sec{margin:6px 2px 0;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);}
  .mnav-list{padding:6px 14px;}

  /* Una riga di sezione: icona, nome, e **sotto il dato che fa capire se
     c'è da entrare** — è l'unica ragione per cui questa schermata esiste
     invece di un elenco di nomi. */
  .mnav-row{
    display:flex;align-items:center;gap:12px;padding:13px 2px;
    border-top:1px solid var(--line-soft);color:inherit;text-decoration:none;
  }
  .mnav-row:first-child{border-top:none;}
  .mnav-row .ic{width:34px;height:34px;flex:0 0 34px;border-radius:11px;
    background:var(--primary-soft);color:var(--primary-dark);
    display:flex;align-items:center;justify-content:center;}
  .mnav-row .ic svg{width:17px;height:17px;}
  .mnav-row .g{flex:1;min-width:0;}
  .mnav-row .g b{display:block;font-size:14px;font-weight:600;}
  .mnav-row .g span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mnav-row .ch{width:16px;height:16px;flex:0 0 16px;color:var(--dim);}
  .mnav-row:active{background:var(--hover);}

  .mnav-me{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;}
  .mnav-me .g{flex:1;min-width:0;}
  .mnav-me .g b{display:block;font-size:15px;font-weight:700;}
  .mnav-me .g span{display:block;font-size:12px;color:var(--muted);}
  .mnav-me .ch{width:16px;height:16px;flex:0 0 16px;color:var(--dim);}
  .mnav-mecard{display:flex;align-items:center;gap:10px;}
  .mnav-mecard .mnav-me{flex:1;min-width:0;}
  .mnav-me .g span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* La campanella: la stessa della barra laterale, con il dito al posto
     del mouse. */
  .mnav-bell{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:12px;
    border:1px solid var(--border);background:var(--card);color:var(--neutral-ink);
    display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
  .mnav-bell.on{color:var(--primary-dark);}
  .mnav-bell svg{width:18px;height:18px;}
  .mnav-bell .cnt{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;
    border-radius:20px;background:var(--primary-deep);color:var(--on-accent);border:2px solid var(--card);
    font-size:10.5px;font-weight:700;line-height:15px;font-variant-numeric:tabular-nums;
    display:inline-flex;align-items:center;justify-content:center;}
  .mnav-bell:active{background:var(--hover);}

  .mnav-week-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .mnav-week-l{font-size:11px;color:var(--muted);}
  .mnav-week-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;
    letter-spacing:.02em;color:var(--on-accent);background:var(--primary-deep);padding:3px 7px;border-radius:6px;}
  .mnav-week-v{display:flex;align-items:baseline;gap:5px;margin-top:1px;}
  .mnav-week-v b{font-size:22px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
  .mnav-week-v span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;}
  .mnav-week-bar{margin-top:10px;}
  .mnav-week-bar > div{background:var(--primary);}
  .mnav-week-go{width:100%;height:46px;margin-top:12px;justify-content:center;border-radius:13px;font-size:14px;}
  .mnav-week-go svg{width:17px;height:17px;}

  /* Il foglio del profilo (`msheet-profilo`): dentro c'è lo stesso menu
     che sta in fondo alla barra laterale sul desktop, con le voci alte un
     dito e l'icona nel colore delle voci di un foglio. */
  .msheet-profilo .sf-mhead{padding:0 2px 12px;margin-bottom:4px;}
  .msheet-profilo .sf-mi{min-height:48px;padding:12px 4px;font-size:14px;font-weight:600;border-radius:10px;}
  .msheet-profilo .sf-mi svg{width:19px;height:19px;color:var(--primary-dark);}
  .msheet-profilo .sf-mi.danger svg{color:var(--red-dark);}
  /* Le notifiche nel foglio: le stesse righe del riquadro del desktop. */
  .msheet-notif .sfn-body{padding:0;overflow:visible;}
  .msheet-notif .sfn-main{padding:10px 4px;}
  .msheet-notif .sfn-txt b{font-size:13px;}
  .msheet-notif .sfn-txt small{font-size:11.5px;}


  /* ---- la ricerca a tutto schermo ----
     Sopra ad Altro e sopra alla barra in basso: mentre si cerca, non c'è
     nient'altro da fare. Sotto alle finestre (200), come tutto il
     guscio. */
  .msearch{
    position:fixed;inset:0;z-index:190;background:var(--bg);
    display:flex;flex-direction:column;
    padding-top:env(safe-area-inset-top,0px);
    opacity:0;transition:opacity .14s ease;
  }
  .msearch.on{opacity:1;}
  .msearch[hidden]{display:none;}

  .msearch-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;}
  .msearch-field{
    flex:1;min-width:0;display:flex;align-items:center;gap:8px;
    height:42px;padding:0 12px;border-radius:13px;
    background:var(--field);border:1px solid var(--border);
  }
  .msearch-field:focus-within{border-color:var(--primary);}
  .msearch-field svg{width:17px;height:17px;flex:0 0 17px;color:var(--muted);}
  .msearch-field input{
    flex:1;min-width:0;border:0;background:transparent;color:var(--text);
    font-size:15px;font-family:inherit;outline:none;
  }
  .msearch-field input::placeholder{color:var(--dim);}
  /* Il campo di ricerca nativo si porta dietro una sua crocetta, che su
     un velo dove «Annulla» è già lì accanto è un secondo modo di fare
     quasi la stessa cosa — e si tocca per sbaglio. */
  .msearch-field input::-webkit-search-cancel-button{display:none;}
  .msearch-cancel{
    flex:0 0 auto;border:0;background:transparent;padding:0 2px;
    font-size:14.5px;font-family:inherit;color:var(--primary-dark);cursor:pointer;
  }

  .msearch-body{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:2px 12px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .msearch-sect{
    margin:14px 2px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);
  }
  .msearch-sug{
    width:100%;display:flex;align-items:center;gap:11px;
    min-height:48px;padding:6px 4px;border:0;background:transparent;
    border-top:1px solid var(--line-soft);
    font-size:14px;font-family:inherit;color:var(--text);text-align:left;cursor:pointer;
  }
  .msearch-sect + .msearch-sug{border-top:none;}
  .msearch-sug svg{width:17px;height:17px;flex:0 0 17px;color:var(--muted);}
  .msearch-sug span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .msearch-sug small{
    flex:0 0 auto;font-size:12px;font-weight:700;color:var(--primary-dark);
    background:var(--primary-soft);border-radius:8px;padding:2px 7px;
  }
  .msearch-sug:active{background:var(--hover);}

  /* I risultati sono le stesse righe della tendina del desktop
     (`.res-row`, `.grp-label`): qui prendono l'altezza del dito e
     perdono la cornice, perché la cornice è la schermata. */
  .msearch-res .grp-label{
    margin:14px 2px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);
  }
  .msearch-res .res-row{
    display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 4px;
    border-top:1px solid var(--line-soft);border-radius:0;font-size:14px;
  }
  .msearch-res .grp-label + .res-row{border-top:none;}
  .msearch-res .res-row:active{background:var(--hover);}

  .msearch-vuoto{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:56px 20px;text-align:center;color:var(--muted);
  }
  .msearch-vuoto svg{width:26px;height:26px;color:var(--dim);}
  .msearch-vuoto p{margin:0;font-size:13.5px;}

  /* ============================================================
     LA TESTATA: barra 52 + contesto, e il titolo che si ritira
     ============================================================
     Oggi su Contatti la testata impila titolo, sottotitolo, quattro
     schede, il pulsante primario con la sua tendina, la vista salvata,
     i filtri e la ricerca: circa 236 pixel prima che si veda il primo
     contatto, su ogni pagina, per sempre.

     Qui resta fisso quello che serve a orientarsi e a cercare — una
     barra da 52 — e il titolo grande vive **nel flusso**: c'è quando si
     apre la pagina, si ritira appena si scorre, e torna in forma
     compatta dentro alla barra. */
  .main{padding:0 0 calc(74px + env(safe-area-inset-bottom,0px));}
  .main > *:not(.topbar):not(.ct-head){padding-inline:12px;}
  /* Una pagina che si chiude in un contenitore suo (la Bacheca, i
     Progetti) si portava dentro anche la testata, che finiva rientrata
     due volte: titolo a ventiquattro pixel invece che a sedici, e ai lati
     una striscia dove quello che scorre sotto si vedeva passare. */
  .main > *:not(.topbar):not(.ct-head) > .topbar{margin-inline:-12px;}

  .topbar{
    position:sticky;top:0;z-index:90;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:start;gap:6px;margin:0 0 10px;padding:10px 8px 0 12px;
    /* **Niente `backdrop-filter` qui.** Un elemento che ne ha uno diventa
       il contenitore di riferimento per tutto quello che dentro è
       `position:fixed`: il pulsante primario, che deve andare sopra alla
       barra in basso, restava incollato in cima alla testata. */
    background:var(--bg);
  }
  .topbar.is-compact{box-shadow:0 1px 0 var(--border);padding-bottom:8px;}

  /* **La riga delle azioni sparisce come contenitore.** Su desktop è una
     fila a destra; qui i suoi pezzi vanno in tre posti diversi — la
     ricerca e il profilo accanto al titolo, il primario nel pollice,
     tutto il resto nella riga di contesto — e `display:contents` lascia
     che sia la griglia della testata a metterli, senza toccare il
     markup. */
  .topbar-actions{display:contents;}

  /* **Il titolo sta nella barra, non sotto.** Prima l'avevo messo su una
     riga sua e la ricerca e il profilo su quella sopra: una striscia
     vuota alta quaranta pixel in cima a ogni pagina, cioè il contrario
     di quello che questa testata serve a fare. Titolo a sinistra, le due
     icone a destra, sulla stessa riga. */
  /* Le misure del disegno: il titolo a sedici pixel dal bordo, le icone a
     otto, le strisce di contesto a dodici da tutti e due i lati — cosi'
     il loro bordo destro cade dove cade quello delle schede sotto. */
  .topbar-title{
    grid-row:1;grid-column:1;min-width:0;align-self:center;padding-left:4px;
    transition:font-size .18s ease;
  }
  .topbar-title h1{
    font-size:22px;line-height:1.18;letter-spacing:-.45px;
    /* Un titolo lungo va a capo **bilanciato**, non spezzato a meta'
       parola: «Buon pomeriggio, Jacopo» su due righe pari si legge,
       su tre righe zoppe sembra un errore. */
    text-wrap:balance;
  }
  /* Ritirandosi il titolo non sparisce: si accorcia. Resta dov'era —
     stessa riga, stesso posto — e chi scorre continua a sapere dove sta
     senza pagarlo per tutta la sessione. */
  .topbar.is-compact .topbar-title h1{
    font-size:15.5px;line-height:1.3;margin:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* Il margine sotto all'`h1` (la regola generica) lo spostava in alto di
     un pixel e mezzo rispetto alle icone accanto: ritirato, il titolo e'
     una riga sola centrata nella barra. E ci aggiunge il contesto della
     pagina (`pageHeader(…, contesto)`), come nel disegno. */
  .topbar.is-compact .topbar-ctx{display:inline;}
  .topbar-title .sub{
    font-size:12.5px;margin-top:3px;
    max-height:40px;overflow:hidden;
    transition:max-height .2s ease,opacity .15s ease,margin-top .2s ease;
  }
  .topbar.is-compact .topbar-title .sub{max-height:0;opacity:0;margin-top:0;}
  /* Un sottotitolo di sole parole si ferma alla seconda riga con i
     puntini: il tetto di quaranta pixel lo tagliava a meta' della terza
     riga, cioe' a meta' delle lettere. Quelli con dentro delle pastiglie
     (la riga di un progetto, di un cliente) non si toccano. */
  .topbar-title .sub:not(:has(> *)){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

  /* Le due icone, in alto a destra. */
  .topbar-menu{display:none;}
  .topbar-actions > .search-box,.topbar > .search-box{grid-row:1;grid-column:2;align-self:center;}
  .topbar-me{grid-row:1;grid-column:3;align-self:center;}
  .topbar{grid-template-columns:minmax(0,1fr) auto auto;}

  /* La riga di contesto: quello che resta delle azioni.
     **Si scrive `.topbar-actions > *`, non `.topbar > *`.** Con
     `display:contents` i figli diventano elementi della griglia, ma per
     un selettore restano figli del contenitore che è sparito: `.topbar >
     *` non li vede, e la striscia dei periodi restava in cima a
     sovrapporsi al titolo. È la cosa che si sbaglia sempre di
     `display:contents` — cambia l'impaginazione, non la parentela. */
  /* **Una riga per azione, e nessuna pinzata al fondo.** Per un giro qui
     c'era `grid-row:2` su tutte: con una sola azione funzionava — quasi
     tutte le pagine ne hanno una — ma due finivano **nella stessa
     cella**, una sopra all'altra. Senza la riga fissa le mette
     l'impaginazione, una per riga, a partire dalla seconda.

     E `justify-self:start` invece di `stretch`: un pulsante da solo
     largo trecentosessantasei pixel («Esporta» su Progetti) sembra
     l'azione principale della pagina, che sta nel tondo in basso. Le
     strisce si allargano da se' con il loro `min-width:100%`. */
  .topbar-actions > *:not(.search-box):not(.topbar-me):not(.btn-primary):not(.tabbtns):not(.mctx):not(.topbar-more):not(.topbar-back):not(.mcrumb){
    grid-column:1/-1;justify-self:start;max-width:calc(100% - 4px);min-width:0;
    overflow-x:auto;scrollbar-width:none;
  }
  .topbar-actions > *::-webkit-scrollbar{display:none;}
  /* **Una striscia di viste si prende la riga**: tre pulsanti larghi
     uguali sono tre bersagli da dito, e content-sized lasciano mezza riga
     vuota accanto che sembra un pulsante mancante. Sta fuori dalla regola
     qui sopra apposta: quella pesa quattro classi — i tre `:not()` — e
     per un giro il suo `min-width:0` si mangiava il `min-width:100%` di
     questa, e la striscia della Bacheca restava larga quanto il testo.
     Quando le voci sono tante la striscia scorre dentro alla sua riga
     (`components.css`), come nel disegno. */
  .topbar-actions > .tabbtns{grid-column:1/-1;justify-self:stretch;min-width:0;max-width:100%;margin-right:4px;}
  /* **Una riga di contesto fatta di piu' pezzi** (`.mctx`): le viste con
     accanto «Oggi» nel Calendario, la striscia della settimana. Si prende
     la riga come una striscia, e dentro i pezzi stanno in fila. */
  .topbar-actions > .mctx{grid-column:1/-1;justify-self:stretch;display:flex;align-items:center;gap:8px;
    min-width:0;max-width:100%;margin-right:4px;}
  .mctx > .tabbtns{flex:1 1 auto;min-width:0;}
  /* **I tre puntini** (`.topbar-more`): le azioni che sul desktop stanno
     sparse nella testata o in una colonna laterale, sul telefono in un
     foglio. Stanno fra la ricerca e il profilo, come nel disegno; la
     colonna in piu' c'e' solo dove c'e' il pulsante, se no il suo stacco
     spostava la lente di sei pixel su ogni pagina. */
  .topbar-more,.topbar-back{display:flex;}
  .topbar:has(.topbar-more){grid-template-columns:minmax(0,1fr) auto auto auto;}
  .topbar-actions > .topbar-more{grid-row:1;grid-column:3;align-self:center;color:var(--text);}
  .topbar-more svg{width:21px;height:21px;}
  .topbar:has(.topbar-more) .topbar-me{grid-column:4;}

  /* ---- la testata di una scheda (`.topbar-back`) ----
     Una scheda si apre da un elenco, e il primo gesto sul telefono e'
     tornarci: la freccia sta dove sta in ogni app, in alto a sinistra.
     Il titolo scende sotto, con il percorso sopra (`.mcrumb`) e la sua
     riga di dettagli sotto; scorrendo risale nella barra accanto alla
     freccia, accorciato, e il percorso si ritira. Le colonne si spostano
     di una: la freccia prende la prima, la seconda resta al titolo
     ritirato. */
  .topbar:has(.topbar-back){grid-template-columns:auto minmax(0,1fr) auto auto;}
  .topbar:has(.topbar-back):has(.topbar-more){grid-template-columns:auto minmax(0,1fr) auto auto auto;}
  .topbar-actions > .topbar-back{grid-row:1;grid-column:1;align-self:center;margin-left:-8px;color:var(--text);}
  .topbar-back svg{width:22px;height:22px;}
  .topbar:has(.topbar-back) .search-box{grid-column:3;}
  .topbar:has(.topbar-back) .topbar-more{grid-column:4;}
  .topbar:has(.topbar-back) .topbar-me{grid-column:4;}
  .topbar:has(.topbar-back):has(.topbar-more) .topbar-me{grid-column:5;}
  .topbar-actions > .mcrumb{grid-row:2;grid-column:1/-1;display:flex;align-items:center;gap:5px;min-width:0;padding-left:4px;
    font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;}
  .mcrumb a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;}
  .mcrumb a:active{color:var(--primary-dark);}
  .topbar:has(.topbar-back) .topbar-title{grid-row:3;grid-column:1/-1;}
  .topbar:has(.topbar-back):not(:has(.mcrumb)) .topbar-title{grid-row:2;}
  .topbar.is-compact:has(.topbar-back) .topbar-title{grid-row:1;grid-column:2;}
  .topbar.is-compact .mcrumb{display:none;}
  /* **Il titolo di una scheda con la sua faccia** (`.mhead`): un cliente,
     un contatto. Il quadrato a sinistra, il nome e sotto una riga piu'
     piccola (la ragione sociale, la citta'); sotto ancora le pastiglie
     (`.mhead-meta`). Ritirandosi resta solo il nome, accanto alla
     freccia: la faccia e la seconda riga non ci starebbero. */
  .mhead{display:flex;align-items:center;gap:12px;min-width:0;}
  .mhead-ava{flex:0 0 auto;display:flex;}
  .mhead-ava > *{width:48px;height:48px;border-radius:12px;font-size:16px;}
  .mhead-name{display:flex;flex-direction:column;min-width:0;}
  .mhead-name small{margin-top:2px;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted);}
  .topbar.is-compact .mhead-ava,.topbar.is-compact .mhead-name small{display:none;}
  .topbar.is-compact .mhead-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mhead-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;}
  /* Il timer sparisce dalla testata: sul telefono è il tondo in basso e
     la barra persistente, e ripeterlo qui è un terzo posto che dice la
     stessa cosa. */
  .topbar-actions > .header-timer,.topbar-actions > .header-start-btn{display:none;}

  /* ---- il profilo ---- */
  .topbar-me{
    width:32px;height:32px;flex:0 0 32px;border:none;border-radius:50%;padding:0;
    background:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .topbar-me:active{opacity:.8;}

  /* ---- la ricerca: un'icona ----
     Il campo costa quarantaquattro pixel fissi su cinque pagine su
     cinque, e su un telefono si scorre molto più di quanto si cerchi.
     Qui è un'icona, e apre la ricerca a tutto schermo (`.msearch`). */
  .search-box{
    /* `min-width` e `flex` vanno rimessi a mano: la soglia dei 640 in
       `base.css` allarga la casella a tutto lo spazio disponibile
       (`flex:1 1 auto;min-width:120px`), e a parita' di specificita'
       quello che non si riscrive resta. Senza, la casella si prendeva
       centoventi pixel e il titolo andava a capo tre volte. */
    flex:0 0 auto;width:40px;min-width:0;max-width:40px;
    height:40px;padding:0;justify-content:center;
    border-radius:12px;background:transparent;border-color:transparent;
  }
  .search-box input,.search-box .searchdrop{display:none;}
  .search-box svg,.search-box i{width:20px;height:20px;color:var(--text);}

  /* ---- l'azione primaria scende nel pollice ----
     «Nuovo ticket», «Nuovo contatto», «Nuovo progetto» stanno in alto a
     sinistra, cioè nell'angolo più lontano dal dito. Qui il pulsante
     primario della testata diventa il tondo sopra alla barra in basso:
     è lo stesso bottone — stesso gesto, stesso gestore — spostato dove
     si arriva. Il testo si spegne con `font-size:0` perché è un nodo di
     testo dentro al bottone, e un nodo di testo non si nasconde con una
     classe: l'icona si rimette la sua misura subito sotto. */
  .topbar-actions .btn-primary{
    position:fixed;right:14px;z-index:175;
    bottom:calc(76px + env(safe-area-inset-bottom,0px));
    width:54px;height:54px;padding:0;border-radius:19px;
    justify-content:center;font-size:0;gap:0;
    box-shadow:0 6px 18px -4px color-mix(in srgb,var(--primary) 55%,transparent);
  }
  .topbar-actions .btn-primary svg{width:25px;height:25px;}
  /* **Un tondo non ha la freccetta.** Dove il primario e' un pulsante
     diviso («Nuovo ⌄» in Amministrazione) la freccetta diceva «si apre un
     menu»; nel tondo il menu e' un foglio che sale, e la freccetta
     sarebbe un secondo segno sopra al «+». Il contenitore del menu si
     toglie di mezzo, se no si prende una riga vuota nella testata. */
  .topbar-actions .btn-primary .am-chev{display:none;}
  .topbar-actions > .action-menu:has(> .btn-primary){display:contents;}

  /* ---- il cassetto della barra laterale non serve più qui ----
     Sotto ai 640 la navigazione è quella in basso, e il richiamo nella
     testata aprirebbe un secondo elenco che dice le stesse cose. Il
     cassetto resta fra i 640 e i 900, dove una barra in basso sarebbe
     una striscia sola in mezzo a uno schermo largo. */
  .topbar-menu{display:none;}
  .sidebar,.nav-scrim{display:none;}

  /* ---- un pannello che copre lo schermo e' una schermata ----
     Sul desktop il cassetto e' un pannello **sopra** alla pagina, e la
     croce lo chiude: giusto che copra tutto, perche' quello che copre
     resta li' sotto e si torna indietro chiudendolo.

     Su un telefono copre lo schermo intero, quindi non e' un pannello:
     **e' una schermata**. E una schermata dell'app ha la barra in basso
     — se no da dentro a un ticket non si puo' piu' andare in Calendario
     senza prima chiuderlo, e la barra che c'era un attimo prima sparisce
     senza spiegazione. Basta metterlo **sotto** ai 180 della barra.

     Il tondo della pagina invece si spegne: sotto c'e' un'altra
     schermata, e il suo gesto principale non e' piu' «nuovo ticket». Al
     posto suo la schermata ne disegna uno suo (`.td-fab` in
     `tasks.css`), che e' come fa il disegno. */
  #drawerOverlay{z-index:160;}

  /* ============================================================
     IL TIMER CHE SEGUE (`layout/mobile-timer.js`)
     ============================================================
     Una barra scura sopra alla navigazione in basso, su ogni pagina,
     finche' il timer gira. **Il rovescio, non il testo**: una superficie
     scura fatta con `--text` di notte diventerebbe quasi bianca e
     sparirebbe (§2), `--inverse` resta scura in tutti e due i temi. Sta
     sopra al contenuto e ai pannelli a tutto schermo (160) e sotto alla
     navigazione (180), cosi' si vede anche dentro a un ticket. */
  .mtimer-dock{display:block;position:fixed;left:10px;right:10px;z-index:178;
    bottom:calc(69px + env(safe-area-inset-bottom,0px));}
  .mtimer-dock[hidden]{display:none;}
  /* **La barra di salvataggio delle Impostazioni sta sopra a queste due.**
     A venti pixel dal fondo finiva sotto alla navigazione, che le passa
     sopra: si leggeva «Modifiche non salvate» e il pulsante che salva non
     si vedeva. Nascosta scende di nuovo dietro alla navigazione. */
  .pf-savebar{bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:179;}
  body:has(.mtimer-dock:not([hidden])) .pf-savebar{bottom:calc(125px + env(safe-area-inset-bottom,0px));}
  .mtimer{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 13px;border-radius:14px;
    background:var(--inverse);color:var(--on-inverse);box-shadow:var(--shadow-lift);
    animation:mtimer-in .22s cubic-bezier(.22,1,.36,1);}
  .mtimer-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:none;
    padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:30px;}
  span.mtimer-info{cursor:default;}
  .mtimer-k{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:700;
    letter-spacing:.02em;background:color-mix(in srgb,var(--on-inverse) 16%,transparent);padding:2px 6px;border-radius:5px;}
  .mtimer-k:empty{display:none;}
  .mtimer-t{flex:1;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--on-inverse-dim);}
  .mtimer-c{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;
    font-variant-numeric:tabular-nums;}
  .mtimer.paused .mtimer-c{color:var(--on-inverse-dim);}
  .mtimer-b,.mtimer-stop{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:9px;padding:0;
    display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .mtimer-b{background:color-mix(in srgb,var(--on-inverse) 14%,transparent);color:var(--on-inverse);}
  .mtimer-stop{background:var(--primary);color:var(--on-accent);}
  .mtimer-b svg,.mtimer-stop svg{width:14px;height:14px;}
  .mtimer-stop svg{fill:currentColor;}
  .mtimer :focus-visible{outline:2px solid var(--primary-mid);outline-offset:2px;border-radius:9px;}
  @keyframes mtimer-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
  /* Con la barra del timer il tondo sale sopra di lei, e il fondo della
     pagina si riserva anche la sua altezza: se no l'ultima riga di ogni
     elenco finisce sotto alla barra e non si tocca. */
  body.has-mtimer .topbar-actions .btn-primary{bottom:calc(132px + env(safe-area-inset-bottom,0px));}
  body.has-mtimer .main{padding-bottom:calc(130px + env(safe-area-inset-bottom,0px));}
  #drawerOverlay .modal.drawer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));}
  body:has(#drawerOverlay.open) .topbar-actions .btn-primary{display:none;}
}