/* ════════════════════════════════════════════════════════════════════════════
   APP ATLETI — l'aspetto

   🔴 PALETTE UNLTD, scelta da Matteo il 14/09/2026. L'app non veste piu'
   THE.NOMADCOACH: quello e' il suo brand personale, racconta lui. Questo allena
   gli altri, e si chiama UNLTD — Human Performance for Life.
   Il brief e i vincoli stanno in ~/Desktop/CLAUDE/unltd/identita.md.

   🔴 UNLTD E' DARK-FIRST, E NON E' UN GUSTO: E' MISURATO.
   Nella palette del brand OCEAN ed EARTH su fondo chiaro stanno a 2.3 e 3.0 di
   contrasto, cioe' illeggibili. Su CHARCOAL, OCEAN sale a 5.1 e regge i numeri.
   Il fondo scuro e' l'unico verso in cui questi cinque colori funzionano
   insieme — per questo qui non c'e' piu' un tema chiaro da mantenere.

   Le regole d'uso:
     1. CHARCOAL e' il fondo, SAND e' il testo, FOREST COSTRUISCE (i blocchi in
        negativo), OCEAN SEGNA i numeri;
     2. ⚠️ I NUMERI NON VANNO MAI SU FOREST: OCEAN su FOREST sta a 3.1. Su
        quel verde ci va solo il testo in SAND;
     3. ⚠️ EARTH NON ENTRA NELL'APP. E' il secondo accento del brand e vive sui
        materiali: in un'interfaccia un marrone caldo compete col segnale
        «attenzione, c'e' un vincolo», e quel registro deve restare di uno solo;
     4. le superfici non si distinguono schiarendo — sul nero rubare luce
        al fondo significa rubare contrasto ai numeri. Si distinguono con
        --riga, un filetto. E' anche cio' che fanno le tavole del brand;
     5. i tre colori di stato (--ok --warn --stop) non sono del brand: sono
        aggiunti apposta, sordi e imparentati, e non entrano mai nel marchio.
        Un colore che non significa una condizione non si usa;
     6. angoli squadrati, mai arrotondati;
     7. i numeri sono monospace — ogni cifra, peso, tempo, misura.

   🚦 LA GUARDIA: scripts/palette-controllo.py legge le variabili DA QUESTO
   FILE e verifica ogni accoppiata. Si lancia prima di pubblicare. Cambiare un
   colore qui senza rilanciarla e' il modo per rendere illeggibile un carico.
   ════════════════════════════════════════════════════════════════════════════ */

/* I font viaggiano con l'app, non da un sito esterno: in palestra senza campo un
   font che arriva da fuori sarebbe l'unico pezzo mancante.
   ⚠️ Il peso 400 di Open Sauce e' rotto all'origine (nel pacchetto c'e' un file
   PostScript etichettato woff2, su tutte le versioni e due CDN): il testo usa il
   500, che su schermo e' anche piu' leggibile. */
@font-face { font-family:"Open Sauce"; font-style:normal; font-weight:500;
  font-display:swap; src:url("font/open-sauce-500.woff2") format("woff2"); }
@font-face { font-family:"Open Sauce"; font-style:normal; font-weight:600;
  font-display:swap; src:url("font/open-sauce-600.woff2") format("woff2"); }
@font-face { font-family:"Open Sauce"; font-style:normal; font-weight:700;
  font-display:swap; src:url("font/open-sauce-700.woff2") format("woff2"); }
@font-face { font-family:"Numeri"; font-style:normal; font-weight:400;
  font-display:swap; src:url("font/mono-400.woff2") format("woff2"); }
@font-face { font-family:"Numeri"; font-style:normal; font-weight:600;
  font-display:swap; src:url("font/mono-600.woff2") format("woff2"); }

:root {
  /* i cinque del brand */
  --fondo:      #0E0F10;   /* CHARCOAL — il fondo */
  --testo:      #D0C9B8;   /* SAND — il testo */
  --struttura:  #2E3A2F;   /* FOREST — costruisce: blocchi in negativo */
  --accento:    #6B8797;   /* OCEAN — segna i numeri. 5.1 sul fondo */
  /* EARTH #8A6B52 esiste nel brand ma NON si usa qui: vedi regola 3 */

  /* le superfici: tre gradini appena accennati, con una punta di forest dentro */
  --superficie: #131614;
  --superficie2:#181C19;
  --riga:       #262B27;   /* il filetto che fa il lavoro delle ombre */

  --struttura-testo: #D0C9B8;
  --testo-2:    #9A9488;
  --testo-3:    #7C7970;

  /* gli stati: non sono del brand, sono aggiunti apposta */
  --ok:   #7FA88A;   /* salvia sordo */
  --warn: #CBA24A;   /* oro spento */
  --stop: #C2685A;   /* mattone — l'unico caldo, e solo per i vincoli */

  --sans: "Open Sauce", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Numeri", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* Senza questa riga l'app non cambia schermata: `hidden` vale display:none ma e'
   una regola debole, e qualsiasi classe con un display la batte. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--fondo); color: var(--testo);
  font-family: var(--sans); font-weight: 500; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100dvh;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* 🔢 regola 5: ogni cifra in monospace */
input[type="number"], input[type="date"], .mono { font-family: var(--mono); }

/* ── gli schermi ─────────────────────────────────────────────────────────── */
.schermo {
  min-height: 100dvh; max-width: 560px; margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 20px;
}
.schermo.largo { max-width: 640px; }
.colonna { margin: auto 0; display: flex; flex-direction: column; gap: 14px; }

/* ── il marchio ───────────────────────────────────────────────────────────
   Il simbolo e' un SVG in linea e non un <img>: cosi' eredita currentColor e
   resta dello stesso colore del testo ovunque lo si metta, senza una seconda
   copia del file da tenere allineata. La parola e' testo vero, non
   un'immagine: si legge con lo screen reader e non sgrana. */
.marchio { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* 🔑 IL SIMBOLO E' UN'IMMAGINE NORMALE, e il colore e' gia' dentro il file.
   Avevo provato con una maschera CSS, per lasciare il colore al foglio di stile
   e avere un file solo: su un motore piu' vecchio la regola @supports non
   passava e IL MARCHIO NON COMPARIVA. Un logo che dipende da una funzione
   recente e' un logo che a volte non c'e'. Dove serve piu' spento — le
   linguette — ci pensa opacity, che funziona ovunque.
   ⚠️ width e height stanno anche nell'HTML: cosi' lo spazio e' riservato prima
   che l'immagine arrivi, e la schermata non sussulta. */
.marchio-segno { width: 58px; height: 27px; display: block; }   /* 274:129 */

}
.marchio-nome {
  margin: 0; font-size: 27px; font-weight: 500; line-height: 1;
  /* la spaziatura larga e' il marchio. text-indent recupera lo spazio che
     letter-spacing aggiunge DOPO l'ultima lettera, se no il blocco sembra
     spostato a sinistra. */
  letter-spacing: .34em; text-indent: .34em; color: var(--testo);
}
.marchio .occhiello { margin: 0; }

/* Il marchio piccolo, in cima a ogni schermata interna. Non e' il lockup: la
   riga sotto lo separa dal contenuto, cosi' si legge come intestazione della
   pagina e non come un titolo di sezione in piu'. */
.marchio-riga {
  display: flex; align-items: center; gap: 9px; margin: 0;
  padding-bottom: 13px; border-bottom: 1px solid var(--riga); color: var(--testo-3);
}
.marchio-mini { width: 26px; height: 12px; display: block; flex: 0 0 auto;
                opacity: .62; }   /* al livello di --testo-3 */
.marchio-riga span {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .24em; text-indent: .24em;
}

.occhiello {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--testo-3); margin: 0;
}
h1 { font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1.02;
     letter-spacing: -.025em; margin: 0; }
h2 { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .13em;
     text-transform: uppercase; color: var(--testo-2); margin: 0 0 10px; }
.spiega { color: var(--testo-2); margin: 0; max-width: 36em; }
.vuoto { font-size: 14.5px; color: var(--testo-3); margin: 0; }
.attesa { color: var(--testo-3); margin: 0; }

/* ── il codice d'ingresso ────────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.etichetta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--testo-3); }
#codice {
  font-family: var(--mono); font-size: 30px; letter-spacing: .34em; text-align: center;
  padding: 15px 10px; background: var(--superficie);
  border: 1.5px solid var(--riga); border-radius: 0; width: 100%;
}
#codice:focus-visible, .s-campo:focus-visible, .campo-valore:focus-visible,
#c-cerca:focus-visible, .nota:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2.5px solid var(--accento); outline-offset: 2px;
}
button {
  font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .01em;
  padding: 15px 18px; background: var(--struttura); color: var(--struttura-testo);
  border: 1.5px solid var(--struttura); border-radius: 0; cursor: pointer;
}
button[disabled] { opacity: .45; cursor: default; }
button.secondario { background: transparent; color: var(--testo); border-color: var(--riga); }
button.piccolo { font-size: 14px; padding: 10px 14px; align-self: flex-start; }
button.nudo {
  background: none; border: 0; padding: 0; font-family: var(--mono); font-size: 11px;
  font-weight: 400; letter-spacing: .08em; color: var(--testo-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.errore { color: var(--stop); font-size: 15px; margin: 0;
          border-left: 3px solid var(--stop); padding-left: 12px; }

/* ── la seduta ───────────────────────────────────────────────────────────── */
.testa { display: flex; flex-direction: column; gap: 6px; }
.testa-seduta { display: flex; flex-direction: row; justify-content: space-between;
                align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.testa-seduta h1 { font-size: 28px; }
.scelta-giorno { display: flex; flex-direction: column; gap: 4px; }
select { font-family: var(--sans); font-weight: 600; font-size: 15px;
         background: var(--superficie); color: var(--testo);
         border: 1.5px solid var(--riga); border-radius: 0; padding: 9px 10px; }
.scelta-giorno select { max-width: 46vw; }
.avviso-riga { font-size: 15px; color: var(--warn); border-left: 3px solid currentColor;
               padding: 9px 12px; margin: 0; background: var(--superficie); }

.esercizi { display: flex; flex-direction: column; gap: 16px; }
.esercizio { background: var(--superficie); border: 1px solid var(--riga);
             padding: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.esercizio > *:not(.es-testa) { margin-left: 14px; margin-right: 14px; }

/* 🔵 la testata dell'esercizio e' un BLOCCO IN NEGATIVO: e' il blu abisso che
   costruisce la struttura (regola 1), ed e' quello che rende la pagina
   riconoscibile come sua invece che come una pagina qualsiasi. */
.es-testa { display: flex; justify-content: space-between; align-items: flex-start;
            gap: 12px; background: var(--struttura); color: var(--struttura-testo); padding: 12px 14px; }
.es-titoli { min-width: 0; }
.es-gruppo { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
             text-transform: uppercase; color: var(--accento); margin: 0 0 3px; }
.es-nome { font-family: var(--sans); font-weight: 700; font-size: 19px;
           letter-spacing: -.02em; text-transform: none; color: var(--struttura-testo);
           margin: 0; line-height: 1.12; }
.es-video { flex: none; font-family: var(--sans); font-weight: 600; font-size: 13px;
            color: var(--struttura-testo); text-decoration: none;
            border: 1.5px solid var(--struttura-testo); padding: 6px 11px; white-space: nowrap; }

.correzione { border-left: 3px solid var(--accento); padding: 2px 0 2px 12px; }
.correzione p { margin: 0; font-size: 16px; }
.cor-cap { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
           text-transform: uppercase; color: var(--accento); margin-bottom: 3px; }

.prescritto { display: flex; flex-wrap: wrap; gap: 7px; }
.pill { font-family: var(--mono); font-size: 13px; background: var(--superficie2);
        border: 1px solid var(--riga); padding: 6px 9px; color: var(--testo-2); }
.pill-tempo { cursor: pointer; color: var(--testo); font-weight: 600; }
.pill-tempo[disabled] { cursor: default; opacity: .5; }
.pill-intento { border-color: var(--accento); color: var(--accento); font-weight: 600;
                text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; }

.ultima { background: var(--superficie2); padding: 10px 12px; }
.u-cap { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--testo-3); margin-bottom: 4px; }
.u-serie { font-family: var(--mono); font-size: 15px; margin: 0; color: var(--accento);
           font-variant-numeric: tabular-nums; word-break: break-word; }
.u-somma { font-size: 13px; color: var(--testo-2); margin: 3px 0 0; }

.serie { display: flex; flex-direction: column; gap: 7px; }
.serie-riga { display: flex; align-items: center; gap: 8px; }
.serie-riga.extra { opacity: .5; }
.serie-riga.extra .s-campo { border-style: dashed; }
.s-n { font-family: var(--mono); font-size: 12px; color: var(--testo-3); width: 24px; flex: none; }
.s-campo { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums;
           text-align: center; width: 100%; min-width: 0; padding: 11px 6px;
           background: var(--superficie); color: var(--testo);
           border: 1.5px solid var(--riga); border-radius: 0; }
.s-campo::placeholder { color: var(--testo-3); opacity: .6; }
.s-per { font-family: var(--mono); font-size: 12px; color: var(--testo-3); flex: none; }
.s-esito { font-family: var(--mono); font-size: 15px; width: 18px; flex: none; text-align: center; }
.s-esito.fatto { color: var(--ok); }
.s-esito.male { color: var(--stop); }
.s-esito.attesa { color: var(--testo-3); }

.nota-pie { display: flex; align-items: center; gap: 8px; }
.n-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
         text-transform: uppercase; color: var(--testo-3); }
.nota { font-family: var(--sans); font-size: 16px; width: 100%;
        background: var(--superficie); color: var(--testo);
        border: 1.5px solid var(--riga); border-radius: 0; padding: 10px; resize: vertical; }
.video-blocco { display: flex; flex-direction: column; gap: 8px; }
.v-elenco { display: flex; flex-direction: column; gap: 5px; }
.v-riga { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono);
          font-size: 12px; color: var(--testo-2); }
.v-quando { font-variant-numeric: tabular-nums; }
.v-apri { color: var(--accento); text-decoration: underline; text-underline-offset: 3px; }
.v-stato { font-family: var(--mono); font-size: 11.5px; }
.v-stato.fatto { color: var(--ok); }
.v-stato.male { color: var(--stop); }
.v-stato.attesa { color: var(--testo-3); }

/* ── piede, lingua, stati ────────────────────────────────────────────────── */
.piede { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--riga);
         display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between;
         align-items: center; font-family: var(--mono); font-size: 11px; color: var(--testo-3); }
.lingue { display: inline-flex; gap: 2px; }
.lin { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em;
       background: none; color: var(--testo-3); border: 1px solid var(--riga);
       padding: 2px 7px; cursor: pointer; }
.lin.scelta { background: var(--struttura); color: var(--struttura-testo); border-color: var(--struttura); }
.coda { font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--warn);
        border: 1px solid currentColor; padding: 3px 8px; }
.striscia { position: fixed; left: 0; right: 0; bottom: 0; background: var(--warn);
            color: var(--fondo); font-family: var(--sans); font-weight: 700; font-size: 14px;
            text-align: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.stato-salva { position: fixed; left: 50%; transform: translateX(-50%);
               bottom: calc(14px + env(safe-area-inset-bottom));
               font-family: var(--mono); font-size: 12px;
               background: var(--struttura); color: var(--struttura-testo); padding: 7px 14px;
               z-index: 60; max-width: 88vw; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.stato-salva.fatto { background: var(--ok); color: var(--fondo); }
.stato-salva.male { background: var(--stop); color: var(--fondo); }

.riquadro { background: var(--superficie); border: 1px solid var(--riga);
            padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.passi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.passi li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
            font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--riga); }
.passi li:last-child { border-bottom: 0; padding-bottom: 0; }
.passi .segno { font-family: var(--mono); font-size: 14px; }
.passi .segno.si { color: var(--ok); }
.passi .segno.no { color: var(--stop); }
.passi .segno.forse { color: var(--warn); }
.passi .dettaglio { display: block; font-family: var(--mono); font-size: 12px;
                    color: var(--testo-3); word-break: break-word; margin-top: 2px; }
.prossime { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.prossime li { display: grid; grid-template-columns: 34px 1fr; gap: 10px;
               align-items: baseline; font-size: 16px; color: var(--testo-2); }
.sigla { font-family: var(--mono); font-size: 12px; color: var(--accento); }

/* ── il cronometro ───────────────────────────────────────────────────────── */
.cronometro { position: fixed; left: 0; right: 0; bottom: 0; display: flex;
              align-items: center; gap: 14px; background: var(--struttura); color: var(--struttura-testo);
              padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
              max-width: 640px; margin: 0 auto; }
.cronometro.ultimi { background: var(--warn); color: var(--fondo); }
.cronometro.finito { background: var(--stop); color: var(--fondo); }
.cr-quale { font-family: var(--sans); font-weight: 600; font-size: 13px; flex: 1;
            min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-tempo { font-family: var(--mono); font-size: 28px; font-variant-numeric: tabular-nums; }
.cr-stop { font-family: var(--sans); font-weight: 700; font-size: 12px; background: none;
           color: inherit; border: 1.5px solid currentColor; padding: 6px 10px;
           cursor: pointer; flex: none; }

/* ── lato coach ──────────────────────────────────────────────────────────── */
.riga-atleta, .riga-mezzo, .prescrizione, .kpi-riga {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  width: 100%; text-align: left; font-family: var(--sans); font-weight: 500;
  background: var(--superficie); color: var(--testo);
  border: 1px solid var(--riga); border-left: 3px solid var(--struttura);
  padding: 11px 13px; cursor: pointer;
}
.ra-nome, .rm-nome, .pr-nome, .k-nome { font-family: var(--sans); font-weight: 700;
                                        font-size: 17px; letter-spacing: -.015em; }
.ra-avviso, .rm-dati, .pr-dati, .k-dati { font-family: var(--mono); font-size: 12px;
                                          color: var(--testo-3); font-variant-numeric: tabular-nums; }
.rm-avviso, .k-avviso { font-family: var(--mono); font-size: 11.5px; color: var(--warn); }
.pr-nota { font-size: 14.5px; color: var(--testo-2); }
.k-n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--accento); }
.k-delta { font-family: var(--mono); font-size: 14px; font-weight: 600;
           font-variant-numeric: tabular-nums; color: var(--testo-2); }
.k-delta.su { color: var(--ok); }
.k-delta.giu { color: var(--stop); }

/* I DUE LIVELLI DI KPI (17/09/2026). L'intestazione separa, la spiegazione dice
   all'atleta cosa sta guardando: senza, sono sette numeri in fila e il livello 1
   smette di essere una stella polare. Il filetto fa il lavoro di un titolo. */
.kpi-livello { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
               text-transform: uppercase; color: var(--accento);
               margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--riga); }
.kpi-livello:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.kpi-spiega { font-size: 13.5px; line-height: 1.5; color: var(--testo-2); margin: 6px 0 12px; }

/* MACROCICLO (22/09/2026). Un blocco per riquadro, e dentro le barre del volume
   per distretto: il confronto fra distretti si legge con l'occhio, non leggendo
   dodici numeri in fila. La barra e' relativa al distretto piu' allenato del
   blocco — serve a vedere lo SQUILIBRIO, non il valore assoluto. */
.macro-blocco { border: 1px solid var(--riga); border-radius: 2px; padding: 14px 14px 10px;
                margin-bottom: 12px; background: var(--superficie); }
.macro-testa { display: flex; flex-direction: column; gap: 3px; }
.macro-nome { font-size: 16px; font-weight: 600; color: var(--testo); }
.macro-obiettivo { font-size: 13.5px; color: var(--testo-2); margin: 8px 0 0; }
.macro-etichetta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
                   text-transform: uppercase; color: var(--testo-3);
                   margin: 16px 0 8px; }
.macro-barre { display: flex; flex-direction: column; gap: 5px; }
.macro-barra { display: grid; grid-template-columns: 8.5em 1fr 2.2em; align-items: center; gap: 8px; }
.mb-nome { font-size: 12px; color: var(--testo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pista { height: 7px; background: var(--superficie2); border-radius: 1px; overflow: hidden; }
.mb-piena { display: block; height: 100%; background: var(--accento); }
.mb-n { font-family: var(--mono); font-size: 12px; color: var(--testo-2);
        text-align: right; font-variant-numeric: tabular-nums; }
.macro-kpi { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: baseline;
             gap: 8px; padding: 3px 0; }
.mk-nome { font-size: 13.5px; color: var(--testo); }
.kpi-elenco { display: flex; flex-direction: column; gap: 6px; }

.riga-doppia { display: flex; gap: 6px; align-items: stretch; }
.riga-doppia .riga-atleta { flex: 1; min-width: 0; }
.riga-comandi { display: flex; flex-direction: column; gap: 6px; }
.comando { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1;
           background: var(--superficie2); color: var(--testo-2);
           border: 1px solid var(--riga); padding: 0 12px; cursor: pointer; flex: 1; }
.comando.male { color: var(--stop); }

.giorni { display: flex; flex-direction: column; gap: 20px; }
.giorno { display: flex; flex-direction: column; gap: 8px; }
.g-testa { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; }
/* anche il titolo del giorno e' un blocco in negativo: struttura, non decorazione */
.g-titolo { font-family: var(--sans); font-weight: 700; font-size: 12px;
            letter-spacing: .13em; text-transform: uppercase;
            background: var(--struttura); color: var(--struttura-testo);
            margin: 0; padding: 9px 12px; flex: 1; }

/* ── le tende ────────────────────────────────────────────────────────────── */
.tenda { position: fixed; inset: 0; background: rgba(15, 53, 67, .55);
         display: flex; align-items: flex-end; justify-content: center; z-index: 50; }

.tenda-foglio { background: var(--fondo); width: 100%; max-width: 640px; max-height: 92dvh;
                overflow-y: auto; padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
                display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--struttura); }
.tenda-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tenda-testa h2 { font-family: var(--sans); font-weight: 700; font-size: 18px;
                  text-transform: none; letter-spacing: -.02em; color: var(--testo); margin: 0; }
#c-cerca { font-family: var(--sans); font-size: 17px; width: 100%; padding: 11px 12px;
           background: var(--superficie); color: var(--testo);
           border: 1.5px solid var(--riga); border-radius: 0; }
.filtri { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtri select { min-width: 0; }
.risultati { display: flex; flex-direction: column; gap: 6px; }

.campi { display: flex; flex-direction: column; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo-nome { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
              text-transform: uppercase; color: var(--testo-3); }
.campo-valore { font-family: var(--sans); font-size: 16px; width: 100%; padding: 10px 11px;
                background: var(--superficie); color: var(--testo);
                border: 1.5px solid var(--riga); border-radius: 0; resize: vertical; }
.campi .dettaglio { display: none; }
.campi.mostra-dettagli .dettaglio { display: flex; }
.apri-dettagli { align-self: flex-start; margin-top: 2px; }
.p-comandi { display: flex; gap: 10px; flex-wrap: wrap; }
.p-comandi button { flex: 1; min-width: 140px; }

@media (prefers-reduced-motion: no-preference) {
  .schermo { animation: entra .16s ease-out both; }
  @keyframes entra { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .schermo { padding-left: 16px; padding-right: 16px; }
}

/* ── il check ────────────────────────────────────────────────────────────── */

/* Il richiamo sulla seduta. E' un bottone a tutta larghezza e non un'icona in
   un angolo: in palestra si guarda la scheda, e una cosa da fare deve stare
   sulla strada degli occhi, non aspettare di essere cercata. */
.richiamo {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  color: var(--fondo); background: var(--accento);
  border: 0; border-radius: 0; padding: 13px 15px;
}
.richiamo:hover { filter: brightness(1.08); }

.domande { display: flex; flex-direction: column; gap: 14px; }

.domanda {
  background: var(--superficie); border: 1px solid var(--riga);
  border-left: 3px solid var(--accento); padding: 15px 16px;
  display: flex; flex-direction: column; gap: 9px;
}
.domanda.risposta-data { border-left-color: var(--ok); }
.domanda-testo { margin: 0; font-size: 17px; font-weight: 600; }
.domanda .spiega { margin: 0; }

/* 🔑 Da dove nasce la domanda, sempre, attaccata alla domanda. E' la stessa
   regola dei numeri: un dato senza la sua fonte non si puo' giudicare. Una
   domanda senza il suo motivo sembra un modulo, e un modulo non si compila. */
.domanda-fonte {
  margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.45;
  color: var(--testo-3); border-left: 2px solid var(--riga); padding-left: 10px;
}

.scala { display: flex; flex-wrap: wrap; gap: 6px; }
.scala button, .duebottoni button {
  font-family: var(--mono); font-size: 15px; cursor: pointer;
  background: var(--superficie2); color: var(--testo);
  border: 1px solid var(--riga); border-radius: 0; padding: 10px 0; min-width: 42px;
}
.duebottoni { display: flex; gap: 8px; }
.duebottoni button { flex: 1; font-family: var(--sans); font-weight: 600; }
.scala button[aria-pressed="true"], .duebottoni button[aria-pressed="true"] {
  background: var(--accento); color: var(--fondo); border-color: var(--accento);
}
.domanda textarea, .domanda input[type="number"] {
  background: var(--superficie2); color: var(--testo);
  border: 1px solid var(--riga); border-radius: 0; padding: 11px 12px; width: 100%;
}
.domanda textarea { min-height: 84px; resize: vertical; font-family: var(--sans); }
.domanda input[type="number"] { font-family: var(--mono); }
.domanda-esito { margin: 0; font-size: 13px; color: var(--ok); }
.finito { margin: 0; font-size: 16px; color: var(--ok); }

/* ── le schede ───────────────────────────────────────────────────────────────
   Linguette da foglio di calcolo: in fondo, testuali, squadrate. La scheda
   attiva e' l'unica che tocca il fondo della pagina, come una linguetta tirata
   in avanti — lo dice la forma, non solo il colore, cosi' si capisce anche
   guardandola di sfuggita o senza distinguere bene i colori. */
/* ⚠️ IN ALTO, NON IN FONDO. In fondo a destra Netlify appiccica il suo bollo
   «powered by», che copre l'ultima linguetta (Matteo, 15/09/2026). Non e' una
   cosa che si toglie dal nostro lato: si sposta la barra. */
.schede {
  position: fixed; left: 0; right: 0; top: 0; z-index: 20;
  display: flex; gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--superficie); border-bottom: 1px solid var(--riga);
  padding-top: env(safe-area-inset-top);
}
.schede::-webkit-scrollbar { display: none; }
.scheda {
  flex: 1 0 auto; min-width: 84px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--testo-3); background: transparent;
  border: 0; border-right: 1px solid var(--riga); border-top: 2px solid transparent;
  border-radius: 0; padding: 14px 10px 13px;
}
.scheda:last-child { border-right: 0; }
.scheda[aria-current="page"] {
  color: var(--testo); background: var(--fondo);
  border-top-color: var(--accento);
}
/* la linguetta attiva tocca il BASSO della barra, cioe' il foglio che sta sotto */
.scheda { border-bottom: 2px solid transparent; border-top: 0; }
.scheda[aria-current="page"] { border-bottom-color: var(--accento); }
/* lo spazio perche' le schede non coprano la prima riga di contenuto */
body.con-schede .schermo { padding-top: calc(52px + env(safe-area-inset-top)); }

/* ── programma, diario, numeri ───────────────────────────────────────────── */
.elenco-giorni, .settimane, .kpi-atleta { display: flex; flex-direction: column; gap: 10px; }

.giorno-riga {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--superficie); color: var(--testo);
  border: 1px solid var(--riga); border-left: 3px solid var(--riga);
  border-radius: 0; padding: 14px 15px; font-family: var(--sans); font-size: 16px;
  font-weight: 600;
}
.giorno-riga:hover { border-left-color: var(--accento); }
.giorno-riga[aria-current="true"] { border-left-color: var(--accento); }
.giorno-riga .quando { font-family: var(--mono); font-size: 12px; color: var(--testo-3);
                       font-weight: 400; }

.settimana { background: var(--superficie); border: 1px solid var(--riga); padding: 14px 15px; }
.settimana h2 { margin: 0 0 3px; font-size: 16px; }
.settimana .occhiello { margin: 0 0 9px; }
.settimana ul { list-style: none; margin: 0; padding: 0;
                display: flex; flex-direction: column; gap: 6px; }
.settimana li { display: flex; justify-content: space-between; gap: 12px;
                font-size: 15px; border-top: 1px solid var(--riga); padding-top: 6px; }
.settimana li:first-child { border-top: 0; padding-top: 0; }
.settimana li span { font-family: var(--mono); font-size: 12px; color: var(--testo-3); }

/* 🔑 Un KPI e' tre numeri e un verso: da dove sei partito, dove sei adesso,
   dove si va. Non un cruscotto. */
.kpi-carta { background: var(--superficie); border: 1px solid var(--riga);
             border-left: 3px solid var(--accento); padding: 15px 16px; }
.kpi-carta h2 { margin: 0 0 11px; font-size: 17px; }
.kpi-tre { display: flex; gap: 20px; flex-wrap: wrap; }
.kpi-tre div { display: flex; flex-direction: column; gap: 2px; }
.kpi-tre b { font-family: var(--mono); font-size: 21px; font-weight: 400; color: var(--accento); }
.kpi-tre b.spento { color: var(--testo-3); font-size: 15px; }
.kpi-delta { margin: 11px 0 0; font-family: var(--mono); font-size: 13px; }
.kpi-delta.su { color: var(--ok); }
.kpi-delta.giu { color: var(--warn); }
.vuoto { margin: 0; color: var(--testo-2); font-size: 15px; }

/* ── il piano: cosa FARO' ─────────────────────────────────────────────────────
   🔑 Si legge diverso dalle serie di oggi, e deve. Quelle sono un fatto: e'
   successo. Questo e' un'intenzione: potrebbe non succedere. Il bordo
   tratteggiato lo dice senza una parola in piu' — e' la stessa distinzione che
   nel foglio di Matteo passa per "carico senza ripetizioni". */
.piano {
  border: 1px dashed var(--riga); border-left: 3px dashed var(--accento);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 9px;
}
.p-cap { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
         text-transform: uppercase; color: var(--testo-3); }
.piano .spiega { margin: 0; font-size: 13px; }
.piano-righe { display: flex; flex-wrap: wrap; gap: 8px; }
.piano-riga { display: flex; align-items: center; gap: 5px; }
.piano-riga .s-n { min-width: 18px; }
.p-campo {
  width: 62px; font-family: var(--mono); font-size: 15px; text-align: right;
  background: var(--fondo); color: var(--testo);
  border: 1px solid var(--riga); border-radius: 0; padding: 7px 8px;
}
.p-campo::placeholder { color: var(--testo-3); }
/* 🔑 Il compagno di «Cosa farò»: li' l'intenzione, qui il fatto. Era l'unica
   delle otto sezioni senza un nome sopra — e appena sopra ne e' comparsa una
   con l'intestazione, due file di caselle una sotto l'altra sono diventate
   indistinguibili (Matteo, 15/09/2026). Un'etichetta non e' decorazione quando
   due cose si somigliano. */
.serie-cap { font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--testo-3); }

.piano-riga .p-unita { font-family: var(--mono); font-size: 12px; color: var(--testo-3); }

/* ── segnala: il canale sempre aperto ────────────────────────────────────── */
.segnala {
  border: 1px solid var(--riga); border-left: 3px solid var(--warn);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 10px;
}
.segnala textarea {
  background: var(--superficie2); color: var(--testo); font-family: var(--sans);
  border: 1px solid var(--riga); border-radius: 0; padding: 11px 12px;
  width: 100%; min-height: 80px; resize: vertical;
}
.segnala .duebottoni button { font-size: 15px; }
#c-vissuto { display: flex; flex-direction: column; gap: 10px; margin-top: 22px;
             border-top: 1px solid var(--riga); padding-top: 20px; }
#c-vissuto .occhiello { margin: 0; }
.segnalazione { background: var(--superficie); border: 1px solid var(--riga);
                border-left: 3px solid var(--riga); padding: 13px 15px;
                display: flex; flex-direction: column; gap: 6px; }
.segnalazione.dolore { border-left-color: var(--stop); }
.segnalazione.nuova { border-left-color: var(--warn); }
.segnalazione .quando { font-family: var(--mono); font-size: 12px; color: var(--testo-3); }

/* ── il diario: la griglia del foglio, una colonna diventata una riga ────────
   🔑 Nel foglio ogni esercizio e' una riga e le settimane corrono a destra: la
   settimana prima e' il blocco accanto, perche' il principio scritto nel foglio
   e' «ANNOTA OGNI SESSIONE E PRIMA DI INIZIARE LEGGI QUELLA PRECEDENTE». Su un
   telefono a destra non si va, quindi le settimane scendono — ma l'ULTIMA STA
   IN CIMA, che e' la stessa cosa: la prima che incontri e' quella da leggere. */
.es-diario { background: var(--superficie); border: 1px solid var(--riga);
             border-left: 3px solid var(--riga); padding: 14px 15px;
             display: flex; flex-direction: column; gap: 3px; }
.es-diario h2 { margin: 0; font-size: 16px; }
.es-diario .es-gruppo { margin: 0; }
.es-diario .tecnica { margin: 2px 0 8px; font-family: var(--mono); font-size: 12px;
                      color: var(--testo-3); }
.dw { display: flex; flex-direction: column; gap: 2px;
      border-top: 1px solid var(--riga); padding: 8px 0 7px; }
.dw:first-of-type { border-top: 0; }
.dw-capo { display: flex; align-items: baseline; gap: 9px; }
.dw-sett { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
           text-transform: uppercase; color: var(--testo-3); min-width: 74px; }
.dw-serie { font-family: var(--mono); font-size: 15px; color: var(--testo); }
.dw-somma { font-family: var(--mono); font-size: 12px; color: var(--testo-3);
            margin-left: 83px; }
/* 🪤 il carico sale e il lavoro cala: nel foglio e' la colonna PROGRESSIONE che
   lo dice. Qui lo dice una riga, e non si puo' non vederla. */
.dw-avviso { font-size: 13px; color: var(--warn); margin-left: 83px; }
.dw-nota { font-size: 13px; color: var(--testo-2); margin-left: 83px;
           border-left: 2px solid var(--riga); padding-left: 9px; }
.dw.ultima .dw-serie { color: var(--accento); }

/* ── il programma: la settimana tipo ─────────────────────────────────────────
   🔑 Nel foglio, in cima, i giorni stanno in ORIZZONTALE e sotto ognuno gli
   esercizi: e' il programma a colpo d'occhio. Su un telefono l'orizzontale non
   c'e', quindi diventano colonne che scendono — ma resta la cosa che conta:
   ogni giorno mostra COSA C'E' DENTRO, non solo il suo nome. Prima era un
   elenco di titoli, e per sapere cosa ti aspettava dovevi aprirli uno per uno. */
.giorno-carta { background: var(--superficie); border: 1px solid var(--riga);
                border-left: 3px solid var(--riga); padding: 0; overflow: hidden; }
.giorno-carta.oggi { border-left-color: var(--accento); }
.giorno-capo { display: flex; align-items: baseline; justify-content: space-between;
               gap: 12px; width: 100%; text-align: left; cursor: pointer;
               background: var(--superficie2); color: var(--testo); border: 0;
               border-radius: 0; padding: 12px 15px; font-family: var(--sans);
               font-size: 16px; font-weight: 600; }
.giorno-capo:hover { background: var(--struttura); }
.giorno-capo .quanti { font-family: var(--mono); font-size: 11px; font-weight: 400;
                       letter-spacing: .1em; text-transform: uppercase; color: var(--testo-3); }
.giorno-carta.oggi .giorno-capo .quanti { color: var(--accento); }
.giorno-lista { list-style: none; margin: 0; padding: 4px 15px 12px;
                display: flex; flex-direction: column; }
.giorno-lista li { display: flex; align-items: baseline; justify-content: space-between;
                   gap: 12px; padding: 7px 0; border-top: 1px solid var(--riga); }
.giorno-lista li:first-child { border-top: 0; }
.giorno-lista .nome { font-size: 15px; }
.giorno-lista .distretto { display: block; font-family: var(--mono); font-size: 10px;
                           letter-spacing: .1em; text-transform: uppercase;
                           color: var(--testo-3); }
.giorno-lista .quanto { font-family: var(--mono); font-size: 13px; color: var(--accento);
                        white-space: nowrap; }
.giorno-nota { margin: 0; padding: 0 15px 12px; font-size: 13px; color: var(--testo-2); }

/* ── il diario quotidiano ────────────────────────────────────────────────────
   🪤 Le colonne di questo diario esistono nel foglio da 312 giorni e sono state
   compilate ZERO volte. Non per pigrizia: undici celle ogni sera non le riempie
   nessuno. Quindi qui tutto e' a TOCCHI — cinque righe da cinque quadrati — e
   si chiede solo cio' che nessun altro sa. Se compilarlo costa piu' di trenta
   secondi, fra un mese e' vuoto come il foglio. */
.giorno-oggi { background: var(--superficie); border: 1px solid var(--riga);
               border-left: 3px solid var(--accento); padding: 15px 16px;
               display: flex; flex-direction: column; gap: 13px; }
.d-riga { display: flex; flex-direction: column; gap: 6px; }
.d-eti { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
         text-transform: uppercase; color: var(--testo-3); }
.d-scala { display: flex; gap: 6px; align-items: center; }
.d-scala button {
  flex: 1; font-family: var(--mono); font-size: 15px; cursor: pointer;
  background: var(--superficie2); color: var(--testo);
  border: 1px solid var(--riga); border-radius: 0; padding: 12px 0;
}
.d-scala button[aria-pressed="true"] {
  background: var(--accento); color: var(--fondo); border-color: var(--accento);
}
.d-estremi { display: flex; justify-content: space-between;
             font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
             text-transform: uppercase; color: var(--testo-3); }
.d-peso { display: flex; align-items: baseline; gap: 10px; }
.d-peso b { font-family: var(--mono); font-size: 26px; font-weight: 400;
            color: var(--accento); }
.d-peso span { font-family: var(--mono); font-size: 11px; color: var(--testo-3); }
.giorno-oggi textarea {
  background: var(--superficie2); color: var(--testo); font-family: var(--sans);
  border: 1px solid var(--riga); border-radius: 0; padding: 10px 12px;
  width: 100%; min-height: 62px; resize: vertical;
}
.giorni-passati { display: flex; flex-direction: column; }
.gp { display: flex; flex-direction: column; gap: 3px;
      border-top: 1px solid var(--riga); padding: 10px 0; }
.gp-capo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gp-data { font-family: var(--mono); font-size: 12px; color: var(--testo-3);
           min-width: 96px; }
.gp-peso { font-family: var(--mono); font-size: 15px; color: var(--accento); }
.gp-voci { display: flex; gap: 12px; flex-wrap: wrap;
           font-family: var(--mono); font-size: 12px; color: var(--testo-2); }
.gp-nota { font-size: 13px; color: var(--testo-2); margin: 2px 0 0 96px; }
.gp.vuoto-giorno .gp-peso, .gp.vuoto-giorno .gp-voci { color: var(--testo-3); }

/* la riga che dice che sta rinfrescando: un dato letto da una copia non deve
   mai sembrare fresco, e questa e' la differenza tra una cache e una bugia */
.rinfresco { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
             text-transform: uppercase; color: var(--testo-3); margin: 0; }