/* ============================================================
   IL VESTITO DEL TELEFONO

   Questo foglio non disegna nessuna pagina: rimette **una volta sola**,
   sotto ai 640, le misure che il disegno mobile dà ai componenti che
   tutte le pagine usano già. La scheda, la scheda di un numero, il
   tondino di un'icona, il pulsante-icona, la faccia piccola.

   Serviva perché le stesse otto o dieci misure stavano venendo fuori
   pagina per pagina: la pastiglia alta 31 invece di 34, il titolo a
   15/700 invece di 14/600, il tondino a 30 invece di 34. Ognuna è due o
   tre pixel, tutte insieme fanno entrare due schede per schermata invece
   di tre — ed è quello che si vede mettendo le due schermate una accanto
   all'altra. Riderivarle a ogni pagina vuol dire dodici occasioni di
   sbagliarne una.

   **Qui ci sta solo quello che è condiviso e che ha un numero nel
   disegno.** Quello che è di una pagina sta nel foglio di quella pagina;
   quello che cambia forma — una tabella che diventa schede, una
   settimana che diventa un'agenda — è un disegno diverso e sta nel suo
   codice, non qui.

   Si carica **dopo** `components.css` e prima delle pagine: a parità di
   peso vince chi il browser legge dopo, quindi queste misure passano
   sopra a quelle del desktop, e una pagina che avesse bisogno di
   scostarsene può ancora farlo dal foglio suo.
   ============================================================ */

@media (max-width:640px){
  /* ---- la scheda ----
     Raggio quattordici e quattordici di aria dentro: sul desktop il
     raggio viene da `--radius` e l'aria da `--card-y`, che seguono la
     densità scelta nelle impostazioni. Su un telefono la densità è una
     sola, ed è questa. */
  .card{border-radius:14px;padding:14px;margin-bottom:11px;}

  /* ---- la scheda di un numero ----
     Il numero è la cosa per cui la scheda esiste: trenta pixel, non
     ventidue. L'etichetta sopra e il contesto sotto restano piccoli —
     è la gerarchia che li fa leggere in quest'ordine. */
  .kpi-card{border-radius:14px;padding:14px;}
  .kpi-value{font-size:30px;letter-spacing:-.8px;margin-bottom:0;line-height:1.05;}
  .kpi-value small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;}
  .kpi-label{font-size:12.5px;color:var(--neutral-ink);}
  .kpi-sub{font-size:12px;margin-bottom:0;margin-top:8px;}
  /* Il tondino dell'icona cresce con la scheda: a trenta pixel dentro a
     una scheda da quattordici di aria sembra un segnaposto. */
  .kpi-icon{width:34px;height:34px;border-radius:11px;flex:0 0 34px;}
  .kpi-icon svg{width:17px;height:17px;}

  /* ---- le schede di un numero ----
     **Un carosello, non una griglia.** Quattro schede impilate si
     prendono tutta la prima schermata prima che si arrivi a quello che
     si era venuti a vedere, e a due per riga ne restano comunque due
     righe. In fila, al settantaquattro per cento, se ne vede una e si
     intravede la successiva: si sa che ce n'e' un'altra, e il resto
     della pagina comincia subito sotto.

     Restano impilate solo dove **sono** il contenuto della pagina e non
     un cappello: la Bacheca, che ha un blocco suo (`dsh-kpi`) e non
     passa di qui.

     **Niente margine negativo per arrivare al bordo.** Era il modo per
     far uscire le schede dai dodici pixel di aria della pagina, e su tre
     pagine su sei usciva dalla **pagina**: a 430 la seconda scheda si
     vedeva stampata sopra alla testata, fuori da tutto. Un margine
     negativo funziona solo se qualcuno taglia, e qui non taglia nessuno.

     L'affordance non si perde: le schede stanno al settantaquattro per
     cento, quindi la successiva spunta comunque. Il bordo a filo era la
     rifinitura; la pagina che non deborda e' il pavimento. */
  /* Il nome scritto due volte non e' un errore: e' un gradino di peso.
     Ogni pagina veste la sua griglia con una classe sua (`.adm-kpis`,
     `.pj-kpis`) e il suo foglio il browser lo legge **dopo** questo:
     a parita' di peso vincerebbe lei, e il carosello resterebbe una
     griglia sulle pagine che se la sono data. Costa un raddoppio e
     chiude la questione senza un solo `!important` — la stessa strada di
     `.table-cards` in `components.css`. */
  .kpis.kpis{
    display:flex;gap:10px;margin:0 0 12px;padding:2px 0 4px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .kpis.kpis::-webkit-scrollbar{display:none;}
  .kpis.kpis > *{flex:0 0 74%;scroll-snap-align:start;margin-bottom:0;}
  /* Una scheda sola non e' un carosello: si prende la riga. */
  .kpis.kpis > *:only-child{flex:1 1 100%;}
  /* Un nome al posto di una cifra (vedi `components/kpi-card.js`). */
  .kpi-value.kpi-nome{font-size:18px;letter-spacing:-.3px;line-height:1.2;}

  /* ---- la barra di un avanzamento ----
     Sei pixel invece di cinque, e il raggio che li segue: sotto a un
     numero da trenta, cinque pixel sono una riga. */
  .progress{height:6px;border-radius:4px;}

  /* ---- il pulsante di sola icona ----
     Ventotto pixel sono un bersaglio da mouse. Un dito ne vuole almeno
     quaranta, ed è la misura che il disegno dà a tutte le icone della
     testata. */
  .icon-btn{width:40px;height:40px;border-radius:12px;}
  .icon-btn svg{width:19px;height:19px;}

  /* ---- la faccia piccola ----
     Ventidue, come nel disegno: ventuno accanto a un testo da 11,5
     resta sotto alla riga. */
  .avatar.sm{width:22px;height:22px;font-size:9.5px;}

  /* ---- il titolo di una scheda ----
     Quattordici e grasso, in tondo. Dentro a una cornice il mestiere di
     separare lo fa già la cornice: quello che resta a un maiuscoletto
     grigio è farsi leggere meno del testo che introduce. */
  .card-title{font-size:14px;letter-spacing:-.1px;}

  /* ---- il foglio che sale dal basso (`components/mobile-sheet.js`) ----
     Il gesto unico del telefono per tutto quello che si sceglie: le
     varianti del «+», i tre puntini, il profilo, le notifiche. Le misure
     sono quelle del disegno: raggio ventidue in alto, maniglia 38x4,
     voci alte un dito con l'icona nel colore primario scuro. Sta sopra
     alle finestre (300) e alle conferme (360), perche' si apre anche da
     dentro a loro. */
  .msheet-scrim{position:fixed;inset:0;z-index:380;background:var(--scrim);opacity:0;transition:opacity .2s ease;}
  .msheet-scrim.on{opacity:1;}
  .msheet{position:fixed;left:0;right:0;bottom:0;z-index:381;background:var(--card);color:var(--text);
    border-radius:22px 22px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(102%);transition:transform .26s cubic-bezier(.22,1,.36,1);
    box-shadow:var(--shadow-lift);}
  .msheet.on{transform:none;}
  .msheet-grab{width:38px;height:4px;border-radius:3px;background:var(--dim);margin:0 auto 14px;}
  .msheet-t{margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.2px;}
  .msheet-sub{margin:0 0 12px;font-size:12px;color:var(--muted);}
  .msheet-t + .msheet-rows{margin-top:10px;}
  .msheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:13px 4px;margin:0;
    border:0;border-top:1px solid var(--border);background:transparent;font:inherit;font-size:14px;font-weight:600;
    color:var(--text);text-align:left;cursor:pointer;}
  .msheet-row:first-child{border-top:none;}
  .msheet-row svg{width:19px;height:19px;flex:0 0 19px;color:var(--primary-dark);}
  .msheet-row-l{flex:1;min-width:0;}
  .msheet-row-h{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--muted);}
  .msheet-row.danger,.msheet-row.danger svg{color:var(--red-dark);}
  .msheet-row:disabled{opacity:.45;cursor:default;}
  .msheet-row:active{background:var(--hover);}
  .msheet-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;border-radius:10px;}

  /* ---- il foglio dei filtri (`components/filter-sheet.js`) ----
     Le misure del disegno: etichetta 10,5 maiuscola spaziata, pastiglie
     alte 34 che vanno a capo, i due pulsanti in fondo affiancati e alti
     46, in fondo al contenuto come nel disegno: il foglio si ferma al
     78% dello schermo e scorre, e «Applica» arriva con l'ultimo gruppo.
     Accesa, una
     pastiglia è la coppia tenue e non il pieno: è la regola del telefono
     per `.qf-chip.active`, e qui sono dieci gruppi di pastiglie accese. */
  .fs-sheet{padding-bottom:0;max-height:78dvh;}
  .fs-sheet .msheet-sub{margin-bottom:16px;}
  .fs-grp{margin-bottom:16px;}
  .fs-lab{margin:0 0 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .fs-wrap{display:flex;flex-wrap:wrap;gap:7px;}
  .fs-chip{display:inline-flex;align-items:center;gap:6px;height:34px;max-width:100%;padding:0 13px;margin:0;
    border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--neutral-ink);
    font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
  .fs-chip > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fs-chip svg{width:15px;height:15px;flex:0 0 15px;}
  .fs-chip.on{background:var(--primary-soft);border-color:transparent;color:var(--primary-dark);}
  .fs-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .fs-chip.fs-more{border-style:dashed;color:var(--muted);}
  /* Un gesto fra le scelte («Salva come vista»): l'inchiostro pieno lo
     distingue dalle pastiglie che si accendono. */
  .fs-chip.fs-act{color:var(--text);}
  .fs-chip.fs-act svg{color:var(--primary-dark);}
  .fs-mini{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:-6px;
    border-radius:50%;background:var(--track);color:var(--neutral-ink);font-size:9.5px;font-weight:700;}
  .fs-chip.on .fs-mini{background:var(--card);color:var(--primary-dark);}
  .fs-chip .client-mark{margin-left:-6px;}
  .fs-foot{display:flex;gap:9px;margin-top:4px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));}
  .fs-foot .btn{flex:1 1 0;height:46px;justify-content:center;border-radius:13px;font-size:14px;}

  /* Il pulsante: quadrato da 40 con il bordo, e il numero in una
     pastiglia sull'angolo. Il pieno del numero è `--primary-deep`, che di
     notte non si schiarisce: è la regola della pastiglia delle notifiche. */
  .fs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;
    padding:0;margin:0;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;}
  .fs-btn svg{width:18px;height:18px;}
  .fs-btn.on{border-color:var(--primary-mid);color:var(--primary-dark);}
  .fs-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
  .fs-btn-n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:7px;
    background:var(--primary-deep);color:var(--on-accent);font-size:9.5px;font-weight:700;line-height:17px;text-align:center;}

  /* ---- il riquadro che si apre accanto a un pulsante sale dal basso ----
     `#genericPopover` sul desktop si appoggia a quello che l'ha aperto;
     qui diventa un foglio (`components/popover.js` lo marca `is-sheet` e
     ci mette sotto un velo). **Le coordinate hanno `!important`, ed e'
     l'unico posto**: chi apre il riquadro — i filtri dei Progetti, quelli
     dei Contatti, la scheda di un evento — dopo l'apertura lo rimette a
     posto scrivendo `left` e `top` sull'elemento, e un'altezza scritta
     dal codice batte qualunque regola del foglio che non lo dica. La
     classe e' ripetuta perche' le pagine gli danno una larghezza con un
     selettore da un id e una classe (`#genericPopover.pj-fpop`). */
  .gpop-scrim{position:fixed;inset:0;z-index:649;background:var(--scrim);animation:msheet-velo .2s ease;}
  #genericPopover.is-sheet.is-sheet{position:fixed !important;inset:auto 0 0 0 !important;width:auto;min-width:0;max-width:none;
    border:0;border-radius:22px 22px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 56px);box-shadow:var(--shadow-lift);animation:msheet-su .26s cubic-bezier(.22,1,.36,1);}
  #genericPopover.is-sheet::before{content:'';display:block;width:38px;height:4px;border-radius:3px;
    background:var(--dim);margin:0 auto 12px;}
  /* Il fuoco entra nel foglio perche' Esc e la tastiera lo trovino, ma il
     foglio non e' un comando: un anello attorno a meta' schermo dice
     «premimi» a una cosa che non si preme. I comandi dentro l'anello lo
     tengono. */
  #genericPopover.is-sheet:focus{outline:none;}

  /* ---- tre cifre in fila ----
     Il piede di un riepilogo: tre colonne con il filo in mezzo,
     l'etichetta in maiuscoletto sopra alla cifra. E' quello che il
     disegno mette sotto a un grafico, in fondo al mese del Calendario e
     nella scheda Sales della Bacheca. */
  .m-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .m-figs > div{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 8px 0 10px;}
  .m-figs > div:first-child{padding-left:0;}
  .m-figs > div + div{border-left:1px solid var(--border);}
  .m-figs span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .m-figs b{font-size:14px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- la scheda di un elenco ----
     Quello che sul desktop e' una riga di tabella, qui e' una scheda a
     piani: in cima il nome con il suo stato a destra, sotto una riga di
     contesto, poi i numeri, e in fondo — dopo un filo — chi e quando. E'
     la forma che il disegno da' alle liste e ai compiti dei Contatti, ai
     rinnovi, alle persone del Team: una sola, cosi' quattro pagine non
     divergono al primo ritocco. L'ultimo pezzo del piede va a destra. */
  .m-card{display:flex;flex-direction:column;gap:9px;}
  .m-card-top{display:flex;align-items:flex-start;gap:10px;min-width:0;}
  .m-card-t{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.3;color:var(--text);
    overflow-wrap:anywhere;text-decoration:none;}
  .m-card-top > :not(.m-card-t){flex:none;}
  /* I tre puntini sono un bersaglio da dito, quaranta pixel: il margine
     negativo li allinea alla prima riga del titolo invece di spingere
     giu' tutta la scheda. */
  .m-card-top > .action-menu{margin:-10px -8px -10px -2px;}
  .m-card-sub{margin:-4px 0 0;font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
  .m-card-foot{display:flex;align-items:center;gap:8px;min-width:0;padding-top:9px;border-top:1px solid var(--border);
    font-size:12px;color:var(--muted);}
  .m-card-foot > :last-child:not(:first-child){margin-left:auto;}

  /* ---- tre cifre in una cornice ----
     Il `statline` del disegno: tre colonne centrate su un fondo di
     campo, l'etichetta in maiuscoletto sopra alla cifra. Non e' `.m-figs`,
     che e' il piede di un riepilogo con i fili in mezzo: questa sta
     dentro a una scheda, e la cornice la stacca dal testo intorno. */
  .m-stat{display:flex;flex-wrap:wrap;padding:6px 0;border:1px solid var(--border);border-radius:12px;background:var(--field);}
  .m-stat > div{flex:1 0 33%;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 6px;}
  .m-stat span{max-width:100%;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .m-stat b{max-width:100%;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* ---- la riga di un documento ----
     Fatture, pagamenti, spese: un elenco dentro a una scheda sola, una
     riga per documento separata da un filo. A sinistra il tondino del
     tipo o la faccia del cliente, in mezzo il numero con lo stato, il
     titolo e il contesto, a destra l'importo — la colonna che si scorre
     con gli occhi, e per questo sempre allo stesso posto. */
  .m-docs{padding-top:2px;padding-bottom:2px;}
  .m-doc{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-top:1px solid var(--border);cursor:pointer;}
  .m-doc:first-child{border-top:none;}
  .m-doc:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px;}
  .m-doc-ic{flex:0 0 32px;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
  .m-doc-ic svg{width:16px;height:16px;}
  .m-doc-g{flex:1;min-width:0;}
  .m-doc-h{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px;}
  .m-doc-k{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:700;color:var(--neutral-ink);}
  .m-doc-g > b,.m-doc-h > b{display:block;font-size:13.5px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;}
  .m-doc-h > b{color:var(--text);}
  .m-doc-g small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;}
  .m-doc-r{flex:0 0 auto;max-width:42%;text-align:right;}
  .m-doc-r b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
  .m-doc-r small{display:block;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

  /* ---- una finestra su un telefono sale dal basso ----
     Le finestre dell'app al centro dello schermo, con dodici pixel di
     velo intorno, sono il modo del desktop: su un telefono il disegno le
     fa salire dal basso come ogni altra cosa che si sceglie o si compila,
     con il bordo di sopra arrotondato e la maniglia. Il contenuto resta
     quello — stessi campi, stessi pulsanti — cambia la cornice. Gli id
     servono a non toccare il pannello a tutto schermo (`#drawerOverlay`),
     che su un telefono e' una schermata e non un foglio. L'uscita la
     anima `closeModal()`, che aspetta la fine prima di togliere la
     finestra. */
  #modalOverlay.modal-overlay.centered,#confirmOverlay.modal-overlay.centered{align-items:flex-end;padding:0;}
  #modalOverlay .modal,#confirmOverlay .modal{width:100%;max-width:none;border-radius:22px 22px 0 0;
    padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 40px);
    box-shadow:var(--shadow-lift);}
  #modalOverlay .modal::before,#confirmOverlay .modal::before{content:'';display:block;width:38px;height:4px;
    border-radius:3px;background:var(--dim);margin:0 auto 14px;}
  #modalOverlay.open,#confirmOverlay.open{animation:msheet-velo .2s ease;}
  #modalOverlay.open .modal,#confirmOverlay.open .modal{animation:msheet-su .26s cubic-bezier(.22,1,.36,1);}
  #modalOverlay.closing{animation:msheet-velo-via .2s ease forwards;}
  #modalOverlay.closing .modal{animation:msheet-giu .2s ease forwards;}

  /* ---- il toast scende dall'alto ----
     In basso a destra, sul telefono, cadeva sopra alla barra di
     navigazione e al tondo del primario — cioe' sopra a quello che si
     sta per toccare. In alto, a tutta larghezza, si legge senza coprire
     niente che serva adesso, ed e' dove lo mette il disegno. */
  .toast-wrap{top:calc(10px + env(safe-area-inset-top,0px));left:14px;right:14px;bottom:auto;}
  .toast{border-radius:13px;padding:12px 14px;box-shadow:var(--shadow-lift);animation:mtoast-in .2s ease;}
}
@keyframes mtoast-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes msheet-velo{from{background-color:transparent;}}
@keyframes msheet-velo-via{to{background-color:transparent;}}
@keyframes msheet-su{from{transform:translateY(100%);}}
@keyframes msheet-giu{to{transform:translateY(100%);}}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .msheet,.msheet-scrim{transition:none;}
  #modalOverlay.open,#confirmOverlay.open,#modalOverlay.open .modal,#confirmOverlay.open .modal{animation:none;}
  .gpop-scrim,#genericPopover.is-sheet.is-sheet{animation:none;}
}