/* stile-foglio — foglio di stile di RitMo Coach.
   IL FOGLIO A TUTTO SCHERMO (14 settembre 2026).

   Un modulo con quattro campi dentro un riquadro centrato di 520px e' un
   compromesso vecchio: sul telefono la tastiera se ne mangia meta', e i campi
   a due colonne («Giorno | Ora») fanno due etichette sfalsate su una riga da
   170 pixel l'una. Il modello e' il «Nuovo evento» del Calendario di Apple:
   una schermata sola, la ✕ e il segno di spunta in alto, i campi in blocchi
   grandi e distanziati, e dentro ogni blocco l'etichetta a sinistra e il
   valore a destra.

   IL CONTENITORE E' «.foglio-pieno», ED E' FATTO PER ESSERE RIUSATO: sta
   dentro un «.overlay» come «.modal», quindi openModal/closeModals, l'Esc e
   il tasto indietro del telefono continuano a funzionare senza saperne
   niente. Oggi lo usano «Nuova sessione» e il giorno del calendario sul
   telefono; gli altri moduli restano «.modal» finche' non si decide di
   spostarli — uno alla volta, non tutti insieme.

   Sul telefono e' pieno schermo davvero (l'overlay perde il suo margine).
   Sul computer un modulo largo 1600px non si legge: resta un foglio alto e
   stretto al centro, con la stessa testata e gli stessi blocchi. */

/* l'overlay che ospita un foglio non ha margini sul telefono: il foglio
   arriva ai bordi dello schermo, come una schermata vera */
.overlay-foglio { padding: 0; align-items: stretch; justify-content: center; }

/* CON LA TASTIERA ALZATA IL SEGNO DI SPUNTA DEVE RESTARE VISIBILE.
   iOS non rimpicciolisce la pagina quando la tastiera sale: la fa scorrere
   sotto. Un foglio alto quanto lo schermo finisce quindi mezzo sopra il bordo,
   e il tasto che salva esce di scena proprio mentre si scrive. Si fa come per
   il pannello dell'assistente, che la stessa cosa l'ha gia' pagata il 27
   agosto: ci si ancora alla finestra VISIBILE («top» e «height», mai un
   transform), cosi' la testata resta ferma e quello che si accorcia e' il
   corpo che scorre. */
@media (max-width: 700px) {
  body.tastiera-aperta .overlay-foglio {
    top: var(--vvtop, 0px);
    height: var(--vvh, calc(100% - var(--tastiera, 0px)));
    bottom: auto;
  }
}

.foglio-pieno {
  display: flex; flex-direction: column;
  width: 100%; min-width: 0; max-height: 100%;
  background: var(--scheda); color: var(--ink);
}

/* ---------- la testata: ✕ a sinistra, ✓ a destra ---------- */
/* Resta ferma mentre il modulo scorre: il tasto che salva non deve essere
   una cosa da cercare in fondo alla pagina. */
.fp-testa {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + var(--sat, 0px)) 10px 10px;
  background: var(--scheda);
  border-bottom: 1px solid var(--line);
}
.fp-tit {
  flex: 1; min-width: 0; text-align: center;
  font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-testa button {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--ink);
  cursor: pointer; font-family: inherit;
  transition: background var(--fast, .18s) ease, color var(--fast, .18s) ease;
}
.fp-testa button svg { width: 21px; height: 21px; }
.fp-testa button:hover, .fp-testa button:focus-visible { background: var(--campo); }
/* IL SEGNO DI SPUNTA DA SOLO NON SI CAPIVA.
   Era un'icona verde in alto a destra, della stessa taglia della croce che
   chiude: si leggeva come una decorazione, e chi apriva il foglio la prima
   volta cercava «Salva» in fondo — dove non c'e', perche' in fondo ci arriva
   la tastiera. Adesso e' una pillola piena con la parola scritta: l'unico
   elemento pieno della testata, quindi l'unico posto dove l'occhio capisce
   che li' si conclude. La croce resta nuda, perche' annullare non e' l'azione
   che si cerca. */
.fp-testa .fp-ok {
  flex: 0 0 auto; width: auto; height: 38px; gap: 6px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px 0 11px; border-radius: 21px;
  background: var(--accento); color: var(--su-accento);
  font-size: 14px; font-weight: 800; letter-spacing: -.01em;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accento) 34%, transparent);
}
.fp-testa .fp-ok svg { width: 19px; height: 19px; }
.fp-testa .fp-ok:hover, .fp-testa .fp-ok:focus-visible {
  background: color-mix(in srgb, var(--accento) 86%, var(--nero-pece, #000)); }

/* ---------- il corpo che scorre ---------- */
.fp-corpo {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(28px + var(--sab, 0px));
}
.fp-nota { color: var(--gray); font-size: 13px; line-height: 1.5; margin: 0 2px 16px; }

/* ---------- i blocchi dei campi ---------- */
/* Grandi, arrotondati, staccati fra loro: si vede a colpo d'occhio dove
   finisce una cosa e comincia l'altra, senza righe di separazione. */
.fp-gruppo {
  background: var(--campo); border: 1px solid var(--line); border-radius: 16px;
  margin-bottom: 12px; overflow: hidden;
}
.fp-campo {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  min-height: 58px; padding: 11px 16px; margin: 0;
}
.fp-campo > .fp-lab {
  flex: 0 0 auto; min-width: 78px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: var(--gray);
}
/* i campi dentro un blocco non hanno un vestito loro: il vestito e' il blocco.
   Va detto per esteso perche' «.modal input» non li tocca piu' — questo
   foglio non e' un «.modal» — e senza si vedrebbero i bordi del browser. */
.fp-campo input, .fp-campo select, .fp-campo textarea {
  flex: 1 1 140px; min-width: 0; width: auto;
  border: 0; outline: none; background: none; color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 6px 0; text-align: right;
}
.fp-campo select { text-align: left; text-align-last: right; }
.fp-campo input::placeholder { font-weight: 500; color: var(--gray); }
/* QUANDO SI SCRIVE, SI ACCENDE LA RIGA INTERA.
   Prima l'anello stava intorno alla casella, che pero' un bordo suo non ce
   l'ha: compariva un rettangolo verde a meta' riga, intorno a una scatola che
   fino a un attimo prima non si vedeva. Adesso si illumina la riga — il modo
   in cui si legge «sono dentro Fianchi» — e l'anello resta per chi gira coi
   tasti, che senza non saprebbe dov'e' finito. */
.fp-campo:focus-within { background: color-mix(in srgb, var(--accento) 8%, transparent); }
.fp-campo input:focus-visible, .fp-campo select:focus-visible { outline: none; }
.fp-campo:has(:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--accento) 50%, transparent);
  outline-offset: -2px; border-radius: 14px; }

/* PIU' CAMPI NELLO STESSO BLOCCO.
   Le quattro misure stanno insieme perche' sono una cosa sola — il corpo di
   quel giorno — e si separano con un filo, non con quattro riquadri: quattro
   riquadri le farebbero sembrare quattro compiti diversi. */
.fp-gruppo .fp-campo + .fp-campo { border-top: 1px solid var(--line); }
/* l'unita' sta attaccata al numero, non dentro l'etichetta: «Peso … 75,1 kg»
   si legge come una misura, «Peso (kg) … 75,1» come un modulo da ufficio */
.fp-unita { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--gray); }

/* le due pillole di «Inizio»: giorno e ora sulla stessa riga dell'etichetta */
/* «1 1 0» e non «1 1 auto»: con base automatica le due pillole chiedono la
   loro larghezza intera, non ci stanno di fianco all'etichetta e se la
   portano via tutta, riga sotto. Con base zero prendono lo spazio che
   avanza e si stringono dentro quello. Per lo stesso motivo qui
   l'etichetta non ha la larghezza minima delle altre: «Inizio» e' corta e
   quei pixel servono alle pillole. */
.fp-quando > .fp-lab { min-width: 0; }
/* «nowrap», e non e' un dettaglio: con «wrap» il flex manda le pillole a capo
   PRIMA di provare a stringerle, quindi restavano larghe 176 e 139 pixel una
   sotto l'altra — cioe' le due righe di partenza, con un vestito nuovo. */
.fp-pillole { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-end; }
/* «0 1 auto» e non «0 0 auto»: un campo data lasciato a se' stesso in Chrome
   e' largo 178 pixel qualunque cosa ci scrivi, e due pillole cosi' non
   stanno su una riga da 390. Devono potersi stringere — il contenuto
   («14/09/2026», «18:00») ne chiede la meta' — se no vanno a capo e tornano
   le due righe che si volevano togliere. */
.fp-pillole input {
  flex: 0 1 auto; min-width: 0; width: auto; text-align: center;
  background: var(--scheda); border-radius: 11px; padding: 9px 9px;
  font-size: 14.5px; font-variant-numeric: tabular-nums;
}

/* il pallino del colore accanto al tipo: lo stesso verde/blu che le sessioni
   hanno gia' nel calendario (palestra verde, videochiamata blu) */
.fp-scelta { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; justify-content: flex-end; min-width: 0; }
.fp-scelta select { flex: 0 1 auto; }
.fp-tinta {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accento); transition: background .2s ease;
}

/* il campo lungo (la nota) sta sotto la sua etichetta, non di fianco:
   di fianco restavano nove caratteri */
.fp-campo.fp-lungo { flex-direction: column; align-items: stretch; gap: 4px; }
.fp-campo.fp-lungo input { text-align: left; flex: 1 1 auto; }

/* ---------- sul computer: un foglio, non una parete ---------- */
@media (min-width: 701px) {
  .overlay-foglio { padding: 24px; align-items: center; justify-content: center; }
  .foglio-pieno {
    width: min(560px, 100%); max-height: min(760px, 92dvh);
    border-radius: 22px; box-shadow: var(--e3); overflow: hidden;
  }
  .fp-testa { padding: 10px; }
}
@supports not (height: 1dvh) {
  @media (min-width: 701px) { .foglio-pieno { max-height: min(760px, 92vh); } }
}

/* ==========================================================================
   IL GIORNO DEL CALENDARIO, SUL TELEFONO
   Prima il giorno scelto compariva in un riquadro sotto la griglia: toccavi
   un giorno in cima allo schermo e la risposta arrivava fuori campo, e
   bisognava scorrere per leggerla. Adesso e' una schermata sua, con la data
   in testata e la freccia per tornare al mese dove sta in tutte le altre —
   in alto a sinistra. Sul computer non cambia niente: li' il riquadro sta di
   fianco alla griglia e si vede senza toccare niente.
   ========================================================================== */
/* «.fp-testa .fp-indietro» e non «.fp-indietro»: piu' su c'e'
   «.fp-testa button{display:grid}», che vale quanto una classe piu' un tipo e
   batte una classe sola — con il nome corto la freccia finiva SOPRA la parola,
   incolonnate, invece che di fianco. */
.fp-testa .fp-indietro {
  flex: 0 0 auto; width: auto; height: 40px; gap: 3px;
  padding: 0 12px 0 6px; display: flex; align-items: center; justify-content: flex-start;
  font-size: 13.5px; font-weight: 700; color: var(--accento-testo);
  border-radius: 22px;
}
.fp-testa .fp-indietro svg { width: 19px; height: 19px; }
.fp-testa .fp-indietro:hover, .fp-testa .fp-indietro:focus-visible {
  background: color-mix(in srgb, var(--accento) 14%, transparent); }

/* dentro il foglio l'elenco non e' una scheda dentro una scheda: niente
   fondo, niente ombra, niente angoli — la scheda e' lo schermo */
.fp-corpo > .day-list {
  background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0;
}
/* la data e' gia' in testata, dove resta ferma mentre si scorre: scritta
   anche qui sotto era la stessa riga due volte, a due centimetri di distanza */
.fp-corpo > .day-list h4 { display: none; }
.fp-corpo > .day-list .dl-sub { font-size: 13.5px; margin-bottom: 12px; }
.fp-corpo > .day-list .appunt { padding: 14px 0; }
.fp-corpo > .day-list .appunt .ora { flex: 0 0 58px; font-size: 15px; }
.fp-corpo > .day-list .appunt .chi b { font-size: 15.5px; }

/* il riquadro del giorno sotto la griglia serviva quando non c'era altro
   posto dove metterlo. Da qui in giu' c'e' la schermata: se restasse, la
   stessa cosa si vedrebbe due volte. */
@media (max-width: 899px) {
  #pg-cal > .cal-due > .day-list { display: none; }
}

/* il posto vuoto a destra della testata del giorno: tiene la data al centro
   senza un tasto che non serve (la ✕ e' gia' la freccia, a sinistra) */
.fp-vuoto { flex: 0 0 44px; }