/* Il Calendario sotto ai 640. Stava in `calendar.css` e si carica subito dopo di lui,
   nello stesso ordine: la cascata e' quella di prima. */
/* ============================================================
   CALENDARIO SU UN TELEFONO

   La griglia oraria a sette colonne non si stringe: a trecentonovanta
   pixel ogni giorno ha settantadue pixel, dentro non ci sta ne' un
   titolo ne' un orario, e una registrazione diventava una pastiglia con
   scritto «11:» tagliato. La settimana diventa un'**agenda**
   (`calendar/agenda.js`); il giorno resta una griglia, perche' li' la
   colonna e' una sola ed e' larga tutto lo schermo; il mese resta una
   griglia di numeri, ma le righe degli eventi lasciano il posto a dei
   pallini — a cinquanta pixel un titolo non e' un titolo.
   ============================================================ */
@media (max-width:640px){
  /* ---- l'agenda ---- */
  .cal-agenda{display:flex;flex-direction:column;}
  .cal-ag-head{display:flex;justify-content:flex-end;padding:0 2px 2px;}
  .cal-ag-head span{color:var(--muted);font-size:12px;}
  /* Come nel disegno: piccola, maiuscola, spaziata. Il maiuscolo tocca il
     nome del giorno e «oggi» (`.cal-ag-dn`), non la durata: «50m» in
     maiuscolo diventa «50M», che non e' un'unita' di misura di niente. */
  .cal-ag-day{
    margin:14px 2px 7px;font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.05em;
  }
  .cal-ag-dn{text-transform:uppercase;}
  .cal-ag-dur{font-variant-numeric:tabular-nums;}
  .cal-ag-day:first-of-type{margin-top:8px;}
  /* Il giorno senza niente: una scheda quieta, senza filetto — non e' un
     elemento da toccare. */
  .cal-ag-empty{
    margin-bottom:8px;padding:11px 13px;font-size:12px;color:var(--muted);
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  }
  /* Il filetto a sinistra porta la tinta dell'elemento: e' quello che
     nella griglia dice a colpo d'occhio se una riga e' una
     registrazione, un pianificato o un follow-up. */
  .cal-ag-item{
    display:flex;align-items:flex-start;gap:10px;width:100%;
    margin-bottom:8px;padding:11px 13px;text-align:left;font-family:inherit;
    background:var(--card);border:1px solid var(--border);
    border-left:3px solid var(--tint,var(--primary));
    border-radius:var(--radius);cursor:pointer;color:var(--text);
  }
  .cal-ag-item:active{background:var(--hover);}
  .cal-ag-g{flex:1;min-width:0;}
  .cal-ag-g b{display:block;font-size:13.5px;font-weight:700;line-height:1.3;}
  .cal-ag-meta{display:block;margin-top:3px;font-size:11.5px;color:var(--muted);}
  /* L'ora a destra e incolonnata: a sinistra sta quello che cambia
     lunghezza, a destra quello che si legge scorrendo con l'occhio. */
  .cal-ag-when{
    flex:0 0 auto;font-size:12px;font-weight:600;color:var(--muted);
    font-variant-numeric:tabular-nums;padding-top:1px;
  }

  /* Il riquadro che scorre resta per il calendario dentro a un'altra
     pagina (la scheda di un cliente): li' la settimana e' una griglia
     alta quanto lo schermo, meno la testata. */
  .cal-scroll{height:calc(100dvh - 300px);min-height:380px;}

  /* ============================================================
     LA PAGINA DEL TELEFONO (`calendar/mobile.js`)
     ============================================================ */
  .cal-m{--hrpx:52px;}
  .cal-m-today{flex:0 0 auto;height:40px;padding:0 14px;border-radius:20px;justify-content:center;}

  /* ---- la striscia della settimana ----
     Sette giorni alti un dito. Quello scelto e' pieno; il trattino sotto
     dice che quel giorno c'e' qualcosa; oggi, se non e' quello scelto,
     ha il numero nel primario. */
  /* **Non scorre**: i sette giorni si stringono fino a starci, anche a
     360. Il trascinamento orizzontale sulla striscia cambia settimana
     (`calmStrisciaGesto`), e una striscia che scorresse di lato se lo
     prenderebbe lei; `touch-action` lascia al browser solo lo scorrimento
     della pagina. */
  .cal-strip{gap:4px;touch-action:pan-y;}
  .cal-wday{flex:1 1 0;min-width:0;height:56px;padding:0;border-radius:12px;border:1px solid var(--border);
    background:var(--card);color:var(--text);font:inherit;cursor:pointer;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;}
  .cal-wday span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .cal-wday b{font-size:15px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums;}
  .cal-wday.today b{color:var(--primary-dark);}
  .cal-wday.on{background:var(--primary);border-color:var(--primary);}
  .cal-wday.on b,.cal-wday.on span{color:var(--on-accent);}
  .cal-wday.dot::after{content:'';position:absolute;bottom:7px;width:14px;height:2px;border-radius:2px;
    background:var(--primary);}
  .cal-wday.on.dot::after{background:var(--on-accent);}
  .cal-wday:focus-visible{outline:2px solid var(--primary-mid);outline-offset:2px;}

  /* ---- la riga delle frecce ---- */
  .cal-m-nav{display:flex;align-items:center;gap:0;min-height:36px;margin:-4px -8px 6px;}
  .cal-m-nav .icon-btn{width:36px;height:36px;color:var(--text);}
  .cal-m-nav .icon-btn svg{width:18px;height:18px;}
  /* Il nome del giorno comincia minuscolo in italiano («martedì 22
     settembre»): la prima lettera la alza il foglio, che tocca il nome
     e non il numero. */
  .cal-m-lbl{display:inline-block;font-size:13.5px;font-weight:700;min-width:0;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
  .cal-m-lbl::first-letter{text-transform:uppercase;}
  .cal-m-tot{margin-left:auto;padding-right:8px;font-size:12px;color:var(--muted);white-space:nowrap;
    font-variant-numeric:tabular-nums;}
  .cal-m-nav.centrata{justify-content:space-between;}
  /* La settimana: l'intervallo e' un pulsante che non sembra un pulsante
     (apre «Vai alla data»), a sinistra come nel disegno. */
  .cal-m-range{margin:-2px 0 6px;}
  .cal-m-pick{border:0;background:none;padding:6px 0;margin:0;font:inherit;font-size:13.5px;font-weight:700;
    color:var(--text);cursor:pointer;text-align:left;}
  .cal-m-pick:focus-visible{outline:2px solid var(--primary-mid);outline-offset:2px;border-radius:6px;}
  .cal-m-range .cal-m-tot{padding-right:0;}
  .cal-m-nav.centrata .cal-m-lbl{font-size:14px;}

  /* ---- il giorno ---- */
  .cal-m-allday{display:flex;align-items:center;gap:8px;padding:4px 0 10px;margin-bottom:14px;
    border-bottom:1px solid var(--border);}
  .cal-m-k{flex:0 0 40px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .cal-m-none{flex:1;font-size:12px;color:var(--muted);}
  .cal-m-ad{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
  .cal-m-ad .cal-ad-item{min-height:30px;font-size:12px;}
  .cal-m-tl{position:relative;margin:0 0 18px 44px;}
  .cal-m-hr{height:var(--hrpx);border-top:1px solid var(--border);position:relative;}
  .cal-m-hr span{position:absolute;left:-44px;top:-7px;width:36px;text-align:right;font-size:10.5px;
    font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;}
  /* Il contenitore degli eventi parte dalla mezzanotte, come la griglia
     del desktop, e sale di quanto la giornata comincia dopo: cosi' le
     posizioni degli eventi restano quelle di `renderCalEvent`. Non si
     tocca: sopra e sotto e' vuoto, e i tocchi li prendono gli eventi.
     `touch-action` torna quello di sempre: sul desktop un evento si
     trascina e la pagina non deve scorrere sotto al mouse, qui un dito
     che parte da un evento sta scorrendo la giornata. */
  .cal-m-evs{position:absolute;left:4px;right:0;pointer-events:none;}
  .cal-m-evs .cal-event{pointer-events:auto;cursor:pointer;touch-action:auto;
    border-left-width:3px;border-radius:10px;padding:6px 9px;font-size:12px;}
  .cal-m-evs .cal-event.tiny{padding:2px 8px;}
  .cal-m-evs .cal-event:hover{box-shadow:var(--shadow);}
  .cal-m .cal-resize-handle{display:none;}
  .cal-m .cal-now-line{left:-6px;}

  /* ---- il riepilogo, sotto al giorno e sotto al mese ---- */
  .cal-m-sum{padding:14px;}
  .cal-m-sumh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
  .cal-m-sumh b{font-size:14px;}
  .cal-m-sumh span{font-size:12px;color:var(--muted);}
  .cal-m-sum .day-summary-row{font-size:13px;padding:9px 0;}
  .cal-m-sum .m-figs{margin-top:8px;}

  /* ---- la settimana ----
     Il totale sta sulla riga delle frecce: quello sotto sarebbe il
     secondo. */
  .cal-m .cal-ag-head{display:none;}
  .cal-m .cal-ag-day:first-of-type{margin-top:4px;}

  /* ---- il mese ----
     Un quadretto per giorno: il numero, una barretta per impegno e in
     fondo le ore registrate. Oggi e' pieno; un giorno senza niente si
     spegne, cosi' quelli che contano si trovano senza leggere. */
  .cal-m .month-card{height:auto;min-height:0;padding:12px 10px;}
  .cal-m .month-weekdays{gap:3px;margin-bottom:4px;font-size:9px;text-transform:uppercase;}
  .cal-m .month-grid{grid-template-rows:none;gap:3px;flex:0 0 auto;}
  .cal-m .month-cell{aspect-ratio:1/1.12;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:4px 2px;border:0;border-radius:9px;background:var(--field);}
  .cal-m .month-cell.empty{background:transparent;}
  .cal-m .month-cell:not(.empty):not(.today):not(:has(.month-event)){opacity:.4;}
  .cal-m .month-cell .num{margin:0;font-size:11.5px;font-weight:600;color:var(--text);text-align:center;
    font-variant-numeric:tabular-nums;}
  .cal-m .month-event{display:block;width:calc(100% - 8px);height:3px;margin:0;padding:0;border:0;
    border-radius:2px;font-size:0;line-height:0;background:var(--tint,var(--muted));}
  .cal-m .month-more{display:none;}
  .cal-m .month-total{margin-top:auto;font-size:8px;font-weight:700;color:var(--muted);
    font-variant-numeric:tabular-nums;}
  .cal-m .month-cell.today{background:var(--primary);}
  .cal-m .month-cell.today .num,.cal-m .month-cell.today .month-total{color:var(--on-accent);}
  .cal-m .month-cell.today .month-event{background:color-mix(in srgb, var(--on-accent) 80%, transparent);}
  .cal-m-hint{margin:11px 2px 0;font-size:12px;line-height:1.45;color:var(--muted);}

  /* ---- il foglio dei tre puntini ---- */
  .cal-m-sheet .cal-m-sec{margin:6px 0 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);}
  .cal-m-sheet .cal-m-mini{border:1px solid var(--border);border-radius:14px;padding:10px 10px 12px;margin-bottom:14px;}
  .cal-m-sheet .cal-mini-grid .day{min-height:34px;display:flex;align-items:center;justify-content:center;}
  .cal-m-sheet .cal-legend{gap:10px;}
  .cal-m-sheet .cal-legend-item{font-size:13px;color:var(--neutral-ink);}
}