/* ==========================================================================
   IL CALENDARIO, RIFATTO SUL CALENDARIO DELL'IPHONE (24 settembre 2026)
   ==========================================================================
   Jacopo ha registrato il Calendario del suo telefono: «farei il calendario
   uguale ma con lo stile di RitMo Coach». Dal telefono si prende il modo di
   funzionare — il mese che scorre, la testata ferma, i quattro modi di
   vedere il mese, l'anno, i calendari a colori, il modulo Nuovo. Da RitMo
   Coach si prende tutto il resto: fondo neutro, Archivo per titoli e numeri,
   IBM Plex Mono per orari ed etichette, l'accento solo dove sei e
   sull'azione principale.
   Tutto sta sotto #pg-cal e #calGrid: le regole vecchie del calendario
   (.cal-grid, .pill u, .cal-sett…) sono state tolte, e un id tiene lontane
   quelle generiche che fossero rimaste in giro. Le tinte dei calendari
   arrivano nell'HTML come --t. */

/* ---------- la testata, ferma in cima ---------- */
/* LA TESTATA NON SI ALZA SOPRA L'INTESTAZIONE (24 settembre 2026).
   Prima aveva un margine negativo grande quanto la striscia dell'iPhone, per
   coprirla quando restava ferma in cima: ma a pagina ferma quel margine la
   faceva salire sopra il marchio «RitMo Coach», che spariva lasciando solo il
   bagliore del logo e una riga — visto da Jacopo sul telefono, invisibile sul
   computer, dove la striscia vale zero. Adesso si ferma SOTTO la striscia
   (top: --sat) e la striscia la copre un pezzo che compare solo quando la
   testata e' davvero ferma in cima (classe «ferma», messa dallo script). */
#pg-cal .cal-testa {
  position: sticky; top: var(--sat, 0px); z-index: 30;
  background: var(--fondo);
  padding: 6px 0 0;
}
#pg-cal .cal-testa.ferma::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: calc(var(--sat, 0px) + 1px); background: var(--fondo);
}
@media (max-width: 899px) {
  /* sul telefono il fondo della testata arriva ai due bordi dello schermo,
     se no il mese che scorre si vede passare ai lati */
  #pg-cal .cal-testa { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}
#pg-cal .cal-r1 { display: flex; align-items: center; gap: 8px; min-height: 44px; }
/* sul telefono il tasto di Mo sta fisso in alto a destra: la fila dei tasti
   gli lascia il posto, se no il «+» ci finisce sotto */
/* 24 settembre 2026, Jacopo: «sono tutti troppo attaccati a Mo». Mo occupa
   44 px piu' il suo alone: il «+» gli sta ad almeno 24 px */
#pg-cal .cal-r1 { padding-right: 80px; gap: 10px; }
#pg-cal .cal-sp { flex: 1 1 auto; }
#pg-cal .cal-su {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0;
  border: 0; background: none; color: var(--accento-testo); cursor: pointer;
  font-family: var(--f-display); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums;
}
#pg-cal .cal-su svg { width: 22px; height: 22px; }
#pg-cal .cal-su[hidden] { display: inline-flex; visibility: hidden; }
#pg-cal .cal-oggi {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--filo-forte); background: none; color: var(--inchiostro);
  font-family: var(--f-testo); font-size: 14px; font-weight: 600;
}
#pg-cal .cal-ic, #pg-cal .cal-piu {
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
}
#pg-cal .cal-ic { border: 1px solid var(--filo); background: var(--campo); color: var(--inchiostro); }
#pg-cal .cal-ic[hidden] { display: none; }
#pg-cal .cal-ic svg { width: 21px; height: 21px; }
#pg-cal .cal-ic-col svg { width: 20px; height: 20px; }
#pg-cal .cal-piu { min-height: 0; margin: 0; }
#pg-cal .cal-piu svg { width: 20px; height: 20px; margin: 0; }
#pg-cal .cal-oggi:hover, #pg-cal .cal-ic:hover { background: var(--rialzo, var(--campo)); }

#pg-cal .cal-r2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 40px; }
#pg-cal .cal-r2 .cal-oggi { flex: 0 0 auto; }
/* piu' basso (24 settembre 2026, Jacopo): il mese in testata e' un
   riferimento mentre si scorre, non un titolo di pagina */
#pg-cal .cal-titolo {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-family: var(--f-display); font-size: 22px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--inchiostro);
}
#pg-cal .cal-frecce { display: flex; gap: 6px; }
#pg-cal .cal-frecce[hidden] { display: none; }
#pg-cal .cal-frecce button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--filo);
  background: var(--campo); color: var(--inchiostro); display: grid; place-items: center; cursor: pointer;
}
#pg-cal .cal-frecce svg { width: 18px; height: 18px; }
/* nell'anno il nome dell'anno sta dentro la pagina che scorre: in testata
   sarebbe la stessa scritta due volte */
body[data-cal-vista="anno"] #pg-cal .cal-r2 { display: none; }

#pg-cal .cal-dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 4px 0 7px; border-bottom: 1px solid var(--filo);
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--grigio); text-align: center;
}
#pg-cal .cal-dow[hidden] { display: none; }

/* ---------- il menu «come vedere il mese» ---------- */
#pg-cal .cal-menu {
  position: absolute; right: 0; top: calc(var(--sat, 0px) + 54px); z-index: 40;
  min-width: 220px; padding: 6px; border-radius: 16px;
  background: color-mix(in srgb, var(--scheda) 92%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--filo); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  transform-origin: top right; animation: cx-menu .16s ease-out;
}
@media (max-width: 899px) { #pg-cal .cal-menu { right: 12px; } }
#pg-cal .cal-menu[hidden] { display: none; }
@keyframes cx-menu { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
#pg-cal .cal-menu button {
  display: grid; grid-template-columns: 24px 1fr 18px; align-items: center; gap: 12px;
  width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--inchiostro); text-align: left; cursor: pointer;
  font-family: var(--f-testo); font-size: 15px; font-weight: 500;
}
#pg-cal .cal-menu button + button { box-shadow: inset 0 1px 0 var(--filo); }
#pg-cal .cal-menu button:hover, #pg-cal .cal-menu button:focus-visible { background: var(--campo); outline: none; }
#pg-cal .cal-menu svg { width: 22px; height: 22px; color: var(--grigio); }
#pg-cal .cal-menu i { font-style: normal; font-weight: 700; color: var(--accento-testo); opacity: 0; }
#pg-cal .cal-menu [aria-checked="true"] i { opacity: 1; }
#pg-cal .cal-menu [aria-checked="true"] svg { color: var(--inchiostro); }

/* ---------- il mese che scorre ---------- */
#pg-cal .cal-sx { min-width: 0; }
#calGrid[hidden], #calAnno[hidden] { display: none; }
#calGrid { touch-action: pan-y; }
#calGrid .cx-mese {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  padding-bottom: 10px;
}
/* il nome del mese occupa una riga sua e comincia sopra la colonna del primo
   giorno; se il mese comincia di sabato o domenica non ci starebbe, e si
   appoggia a destra */
#calGrid .cx-mese-t {
  grid-column: 1 / -1; margin: 18px 0 6px; white-space: nowrap; min-width: 0;
  padding-left: calc(var(--s, 0) * 100% / 7 + 6px);
  font-family: var(--f-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  color: var(--inchiostro);
}
#calGrid .cx-mese-t.fondo { padding-left: 0; padding-right: 6px; text-align: right; }
#calGrid .cx-mese.questo .cx-mese-t { color: var(--accento-testo); }
#calGrid.uno .cx-mese-t { display: none; }
#calGrid.uno .cx-mese { padding-top: 4px; }

#calGrid .cal-day {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  min-width: 0; overflow: hidden; cursor: pointer; text-align: center;
  min-height: 58px; padding: 5px 2px 6px;
  border-top: 1px solid var(--filo); border-radius: 0;
  background: none; box-shadow: none; color: var(--inchiostro); font-weight: 500;
}
/* solo dove c'e' un mouse: sul telefono il passaggio resta attaccato al
   giorno toccato e lo accende per sempre */
@media (hover: hover) { #calGrid .cal-day:hover { background: color-mix(in srgb, var(--inchiostro) 4%, transparent); } }
#calGrid .cal-day:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
#calGrid .cal-day > i {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; margin: 0 auto 3px; border-radius: 50%;
  font-style: normal; font-family: var(--f-display); font-size: 16px; font-weight: 500;
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* oggi: il numero in accento. Il giorno scelto: il segnale «dove sei» di
   tutta l'app, il tondo grigio rialzato col filetto d'accento. Oggi e
   scelto insieme: pieno, come sul telefono. */
#calGrid .cal-day.today > i { color: var(--accento-testo); font-weight: 700; }
#calGrid .cal-day.scelto > i { background: var(--rialzo, var(--campo)); box-shadow: inset 0 0 0 1.5px var(--accento); font-weight: 700; }
#calGrid .cal-day.today.scelto > i { background: var(--accento); color: var(--su-accento, #00291A); box-shadow: none; }

#calGrid .cx-ev { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#calGrid .cx-ev u { display: block; min-width: 0; text-decoration: none; }
#calGrid .cx-ev u b, #calGrid .cx-ev u s { display: none; }
#calGrid .cx-ev em {
  font-style: normal; font-family: var(--f-mono); font-size: 9.5px; line-height: 1.2; color: var(--grigio);
}

/* Compatta ed Elenco: un pallino per appuntamento, col colore del suo
   calendario. Si tocca il giorno, non il pallino. */
body[data-cal-modo="compatta"] #calGrid .cx-ev,
body[data-cal-modo="elenco"] #calGrid .cx-ev { flex-direction: row; justify-content: center; gap: 3px; height: 7px; }
body[data-cal-modo="compatta"] #calGrid .cx-ev u,
body[data-cal-modo="elenco"] #calGrid .cx-ev u {
  flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--t); pointer-events: none;
}
body[data-cal-modo="compatta"] #calGrid .cx-ev em,
body[data-cal-modo="elenco"] #calGrid .cx-ev em { display: none; }
body[data-cal-modo="elenco"] #calGrid .cal-day { min-height: 50px; }

/* In pila: una barretta per appuntamento, uno sopra l'altro. Si vede quanto
   e' pieno un giorno senza leggere niente. */
body[data-cal-modo="pila"] #calGrid .cal-day { min-height: 66px; }
body[data-cal-modo="pila"] #calGrid .cx-ev { padding: 0 3px; gap: 2px; }
body[data-cal-modo="pila"] #calGrid .cx-ev u { height: 5px; border-radius: 3px; background: var(--t); pointer-events: none; }
body[data-cal-modo="pila"] #calGrid .cx-ev em { font-size: 9px; }

/* Dettagli: il nome e l'ora dentro la cella, sul fondo appena tinto del suo
   calendario. Il nome si taglia in fondo coi puntini: «Beatric…» dice chi
   e', «Beatric / e» no (trappola del 14 settembre). */
body[data-cal-modo="dettagli"] #calGrid .cal-day { min-height: 104px; }
body[data-cal-modo="dettagli"] #calGrid .cx-ev { padding: 0 1px; }
body[data-cal-modo="dettagli"] #calGrid .cx-ev u {
  padding: 2px 4px 3px; border-radius: 5px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--t) 22%, transparent);
}
body[data-cal-modo="dettagli"] #calGrid .cx-ev u:hover { background: color-mix(in srgb, var(--t) 34%, transparent); }
body[data-cal-modo="dettagli"] #calGrid .cx-ev u b {
  display: block; font-family: var(--f-testo); font-size: 10.5px; font-weight: 600; line-height: 1.25;
  color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-cal-modo="dettagli"] #calGrid .cx-ev u s {
  display: block; text-decoration: none; font-family: var(--f-mono); font-size: 9px; line-height: 1.2;
  color: var(--grigio); white-space: nowrap; overflow: hidden;
}
body[data-cal-modo="dettagli"] #calGrid .cx-ev em { text-align: left; padding-left: 4px; }

@media (min-width: 900px) {
  #calGrid .cal-day { min-height: 76px; padding: 6px 4px 8px; }
  #calGrid .cal-day > i { margin-left: auto; margin-right: 0; }
  body[data-cal-modo="pila"] #calGrid .cal-day { min-height: 92px; }
  body[data-cal-modo="dettagli"] #calGrid .cal-day { min-height: 128px; }
  body[data-cal-modo="dettagli"] #calGrid .cx-ev u { padding: 3px 6px 4px; }
  body[data-cal-modo="dettagli"] #calGrid .cx-ev u b { font-size: 12px; }
  body[data-cal-modo="dettagli"] #calGrid .cx-ev u s { font-size: 10.5px; }
  body[data-cal-modo="compatta"] #calGrid .cx-ev, body[data-cal-modo="elenco"] #calGrid .cx-ev { justify-content: flex-end; padding-right: 8px; }
  #calGrid .cx-mese-t { font-size: 22px; }
}

/* ---------- l'anno ---------- */
#calAnno .cx-an { padding-bottom: 24px; }
#calAnno .cx-an-t {
  margin: 12px 0 14px; padding: 0 2px 8px; border-bottom: 1px solid var(--filo);
  font-family: var(--f-display); font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--inchiostro);
}
#calAnno .cx-an-t.questo { color: var(--accento-testo); }
#calAnno .cx-an-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
#calAnno .cx-mm {
  display: block; min-width: 0; padding: 6px 4px; border: 0; border-radius: 12px;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
#calAnno .cx-mm:focus-visible { background: var(--campo); outline: none; }
@media (hover: hover) { #calAnno .cx-mm:hover { background: var(--campo); } }
#calAnno .cx-mm > b {
  display: block; margin: 0 0 5px 2px;
  font-family: var(--f-display); font-size: 16px; font-weight: 700; color: var(--inchiostro);
}
#calAnno .cx-mm.questo > b { color: var(--accento-testo); }
#calAnno .cx-mm-g {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px 0; text-align: center;
  font-family: var(--f-mono); font-size: 8.5px; line-height: 13px; color: var(--grigio-tenue, var(--grigio));
}
/* un giorno con qualcosa in agenda si legge piu' chiaro degli altri */
#calAnno .cx-mm-g .c { color: var(--inchiostro); font-weight: 600; }
#calAnno .cx-mm-g .o { width: 13px; margin: 0 auto; border-radius: 50%; background: var(--accento); color: var(--su-accento, #00291A); font-weight: 700; }
@media (min-width: 900px) {
  #calAnno .cx-an-g { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; }
  #calAnno .cx-mm-g { font-size: 11px; line-height: 20px; }
  #calAnno .cx-mm-g .o { width: 20px; }
  #calAnno .cx-mm > b { font-size: 19px; }
}

/* ---------- il giorno ---------- */
@media (min-width: 900px) {
  /* il riquadro del giorno resta fermo sotto la testata mentre il mese scorre */
  #pg-cal .cal-due { margin-top: 10px; }
  #pg-cal > .cal-due > .day-list { position: sticky; top: calc(var(--cx-testa, 150px) + 12px); }
}
/* sul telefono il giorno si apre a tutto schermo; in «Elenco» invece sta
   sotto il mese, come sul telefono */
body[data-cal-modo="elenco"]:not([data-cal-vista="anno"]) #pg-cal > .cal-due > .day-list { display: block; }
body[data-cal-vista="anno"] #pg-cal > .cal-due > .day-list { display: none; }
@media (min-width: 900px) {
  body[data-cal-vista="anno"] #pg-cal .cal-due { grid-template-columns: minmax(0, 1fr); }
}
.day-list .appunt[data-i] { cursor: pointer; }
.day-list .appunt .chi b .dt-tinta { margin-right: 7px; }
.dt-tinta {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--t, var(--accento)); vertical-align: 1px; margin-right: 7px;
}
.appunt .dt-tinta { background: var(--t, var(--accento)); }

/* ---------- la finestra «Calendari» ---------- */
#calCalendari { padding: 0; }
#calCalendari .cx-cal {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 16px;
  border: 0; background: none; color: var(--inchiostro); text-align: left; cursor: pointer; font-family: var(--f-testo);
}
#calCalendari .cx-cal + .cx-cal { border-top: 1px solid var(--filo); }
#calCalendari .cx-cal > i {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--t); display: grid; place-items: center; box-sizing: border-box;
}
#calCalendari .cx-cal[aria-checked="true"] > i { background: var(--t); }
#calCalendari .cx-cal[aria-checked="true"] > i::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--fondo); border-bottom: 2px solid var(--fondo); transform: rotate(-45deg);
}
#calCalendari .cx-cal > span { min-width: 0; }
#calCalendari .cx-cal b { display: block; font-size: 15.5px; font-weight: 600; }
#calCalendari .cx-cal em { display: block; font-style: normal; font-family: var(--f-mono); font-size: 11.5px; color: var(--grigio); margin-top: 2px; }
#calCalendari .cx-cal[aria-checked="false"] b { color: var(--grigio); }
#mCalendari .cal-tutti { margin-top: 14px; width: 100%; justify-content: center; }

/* ---------- il modulo Nuovo ---------- */
#mSess .fp-interr { justify-content: space-between; }
#mSess .fp-sw {
  -webkit-appearance: none; appearance: none; flex: 0 0 51px; width: 51px; height: 31px; margin: 0;
  border-radius: 16px; background: var(--filo-forte); position: relative; cursor: pointer;
}
#mSess .fp-sw::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
#mSess .fp-sw:checked { background: var(--accento); }
#mSess .fp-sw:checked::before { transform: translateX(20px); }
#mSess .fp-sw:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
#mSess.tutto-giorno .fp-ora { display: none; }
#sFineCampo.sbagliata input { text-decoration: line-through; color: var(--ritardo); }
#mSess .fp-errore { margin: -4px 4px 16px; color: var(--ritardo); font-size: 13px; line-height: 1.45; }
#mSess .fp-errore[hidden] { display: none; }
#mSess .fp-ok[disabled] { opacity: .38; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  #pg-cal .cal-menu { animation: none; }
  #mSess .fp-sw::before { transition: none; }
}

/* la fine dell'appuntamento sotto l'inizio, piu' piccola */
.appunt .ora small { display: block; font-size: 11px; font-weight: 500; color: var(--grigio); margin-top: 1px; }

/* sul computer i giorni della settimana stanno sopra la griglia, non sopra
   anche il riquadro del giorno: stesse misure di .cal-due (330 + 14) */
@media (min-width: 900px) {
  #pg-cal .cal-dow { margin-right: 344px; }
}

/* il nome del modo che compare mentre si allarga o si stringe il mese con due dita */
#pg-cal .cal-pizzico {
  position: fixed; left: 50%; top: 45%; z-index: 70; pointer-events: none;
  transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--scheda) 92%, transparent); border: 1px solid var(--filo);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  font-family: var(--f-testo); font-size: 15px; font-weight: 600; color: var(--inchiostro);
  opacity: 0; transition: opacity .18s ease;
}
#pg-cal .cal-pizzico.on { opacity: 1; }

/* ==========================================================================
   LA RIGA DEL MESE, IL VETRO E L'ELENCO DEL MESE (24 settembre 2026 sera)
   ==========================================================================
   Jacopo, guardando le schermate:
   - «tutti i tasti in stile glass»: i tasti tondi della testata, «Oggi» e
     le frecce sono di vetro (gli stessi gettoni --vetro-* della barra in
     basso). Il «+» resta pieno d'accento: e' l'azione principale, una per
     schermata.
   - la testata e' di vetro anche lei: il calendario le scorre sotto.
   - SUL TELEFONO «Oggi» e le frecce galleggiano in basso a sinistra, poco
     sopra la barra: in alto c'era «troppa roba» vicino a Mo.
   - SUL COMPUTER la testata sta all'altezza di Mo in tutti i modi (in
     «Elenco» scendeva di 60 px), il mese ha «Oggi» accanto e le frecce in
     fondo alla riga, allineate al «+»: «se no cosi' e' orribile».
   - in «Elenco» sul computer il mese prende tutta la larghezza e sotto c'e'
     l'elenco di TUTTI gli appuntamenti del mese, non di fianco. */

/* il vetro della testata sta su uno strato suo e non sulla testata: un
   backdrop-filter sulla testata farebbe da contenitore a tutto quello che
   c'e' dentro in «position:fixed», e «Oggi» sul telefono resterebbe
   inchiodato alla testata invece che allo schermo */
#pg-cal .cal-testa { background: none; }
#pg-cal .cal-testa::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
@media (max-width: 899px) { #pg-cal .cal-testa::after { left: 0; right: 0; } }
#pg-cal .cal-testa.ferma::before { background: color-mix(in srgb, var(--fondo) 84%, transparent); }

/* i tasti di vetro */
#pg-cal .cal-ic, #pg-cal .cal-frecce button {
  border: 0; color: var(--inchiostro);
  background: var(--vetro-fondo, color-mix(in srgb, var(--scheda) 70%, transparent));
  -webkit-backdrop-filter: var(--vetro-sfoca, blur(24px)); backdrop-filter: var(--vetro-sfoca, blur(24px));
  box-shadow: var(--vetro-orlo, inset 0 0 0 1px rgba(255, 255, 255, .12));
}
#pg-cal .cal-piu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px color-mix(in srgb, var(--accento) 25%, transparent); }
@media (hover: hover) {
  #pg-cal .cal-ic:hover, #pg-cal .cal-frecce button:hover {
    background: color-mix(in srgb, var(--inchiostro) 12%, transparent);
  }
}

#pg-cal .cal-r2 { gap: 0; margin: 4px 0 8px; }
#pg-cal .cal-titolo { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* UGUALE SUL TELEFONO E SUL COMPUTER (24 settembre 2026 sera, Jacopo:
   «dovrebbe rimanere uguale su telefono e su pc»). In cima: l'anno e i tre
   tasti, all'altezza di Mo; sotto, il mese. «‹ Oggi ›» galleggia in basso a
   sinistra: sopra la barra sul telefono, nell'angolo della pagina sul
   computer. Il marchio «RitMo Coach» in testa alla pagina, nel calendario,
   non c'e': scorrendo compariva sopra la testata. */
.main:has(> #pg-cal.on) > .ph { height: 0; min-height: 0; margin: 0; }
.main:has(> #pg-cal.on) > .ph > :not(.tasto-ai) { display: none; }
#pg-cal.on .cal-vai {
  display: flex; align-items: center; gap: 6px; margin: 0;
  position: fixed; z-index: 45; left: calc(248px + max(0px, (100vw - 1328px) / 2) + 14px); bottom: 24px;
}
#pg-cal .cal-vai[hidden] { display: none; }
#pg-cal .cal-vai button { width: 44px; height: 44px; }
#pg-cal .cal-vai .cal-oggi {
  width: auto; height: 44px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-family: var(--f-testo); font-size: 15px; font-weight: 600;
}
#pg-cal .cal-vai button {
  box-shadow: var(--vetro-orlo, inset 0 0 0 1px rgba(255, 255, 255, .12)), var(--vetro-ombra, 0 12px 30px rgba(0, 0, 0, .45));
}
body[data-cal-vista="anno"] #pg-cal .cal-vai { display: none; }
/* l'ultima riga non finisce sotto i tasti che galleggiano */
#pg-cal.on { padding-bottom: 64px; }

@media (max-width: 899px) {
  #pg-cal .cal-titolo { flex: 1 1 auto; }
  /* sopra la barra (alta 66 px, a 12 px dal fondo) */
  #pg-cal.on .cal-vai { left: 12px; bottom: calc(var(--sab, 0px) + 12px + 66px + 12px); }
}

@media (min-width: 900px) {
  /* la testata all'altezza di Mo in tutti i modi: la riga vuota in testa
     alla pagina (quella del marchio, che sul computer sta nella colonna)
     non spinge giu' il calendario */
  .main > #pg-cal.on { margin-top: -16px; }
  /* «Elenco»: il mese a tutta larghezza, l'elenco sotto */
  body[data-cal-modo="elenco"]:not([data-cal-vista="anno"]) #pg-cal .cal-due { grid-template-columns: minmax(0, 1fr); }
  body[data-cal-modo="elenco"]:not([data-cal-vista="anno"]) #pg-cal .cal-dow { margin-right: 0; }
  body[data-cal-modo="elenco"]:not([data-cal-vista="anno"]) #pg-cal > .cal-due > .day-list { position: static; }
  body[data-cal-modo="elenco"] #calGrid .cal-day { min-height: 64px; }
}

/* l'elenco del mese: un gruppo per giorno */
.day-list.dl-mese .dl-gio { padding: 10px 0 4px; border-top: 1px solid var(--filo); scroll-margin-top: calc(var(--cx-testa, 150px) + 16px); }
.day-list.dl-mese .dl-gio h5 {
  margin: 0 0 4px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em; color: var(--grigio);
}
.day-list.dl-mese .dl-gio.scelto h5 { color: var(--accento-testo); }

/* IL GIORNO NON STA PIU' DI FIANCO (24 settembre 2026 sera, Jacopo: uguale su
   telefono e computer). Il mese a tutta larghezza in tutti i modi; toccando un
   giorno si apre la sua schermata, come sul telefono. Il riquadro sotto resta
   solo in «Elenco», dove porta tutti gli appuntamenti del mese. */
@media (min-width: 900px) {
  #pg-cal .cal-due { grid-template-columns: minmax(0, 1fr); }
  #pg-cal .cal-dow { margin-right: 0; }
  #pg-cal > .cal-due > .day-list { display: none; }
}