/* ─────────────────────────────────────────────────────────────────────────
   PALESTRA — mondo visivo: manuale d'officina.
   Token e primitive. Nessun valore grezzo fuori da qui.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Archivo';
  src: url('font/archivo.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Colore. La scena decide: palestra illuminata a giorno, sguardi di due
     secondi, schermo spesso al minimo. Fondo chiaro, inchiostro pesante,
     un solo segnale. */
  --carta:      #f4f2ed;
  --carta-2:    #e9e6df;
  --inchiostro: #14161a;
  --matita:     #6f6b64;
  --tratto:     #c9c4ba;
  --segnale:    #d8451c;   /* arancio di sicurezza: il passo corrente */
  /* Lo stesso arancio scurito quanto basta perché il testo sopra regga il
     contrasto: 5,3:1 col bianco, contro i 4,4:1 del segnale pieno. */
  --segnale-testo: #c23c14;
  --sopra-segnale: #ffffff;
  --segnale-eco:#f7e2da;

  /* Passo della griglia. Un solo ritmo su tutta la superficie. */
  --u: 4px;
  --s1: calc(var(--u) * 1);
  --s2: calc(var(--u) * 2);
  --s3: calc(var(--u) * 3);
  --s4: calc(var(--u) * 4);
  --s6: calc(var(--u) * 6);
  --s8: calc(var(--u) * 8);
  --s12: calc(var(--u) * 12);

  /* Il pollice, con le mani sudate, di fretta. */
  --tocco: 48px;

  --regola: 1px solid var(--tratto);
  --regola-forte: 2px solid var(--inchiostro);
  --misura: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #121316; --carta-2: #1b1d21;
    --inchiostro: #ecebe7; --matita: #9a968e; --tratto: #34373d;
    --segnale: #ff6b3d; --segnale-eco: #3a1f16;
    /* Su fondo scuro il segnale è chiaro: sopra ci va l'inchiostro, non il
       bianco, che darebbe 2,8:1. */
    --segnale-testo: #ff6b3d; --sopra-segnale: #121316;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px; line-height: 1.45;
  background: var(--carta); color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

/* Le superfici che non ho disegnato io portano lo stesso mondo. */
::selection { background: var(--segnale); color: var(--carta); }
:focus-visible { outline: var(--regola-forte); outline-offset: 2px; }
* { scrollbar-color: var(--tratto) transparent; scrollbar-width: thin; }

/* ── Primitive di testo ─────────────────────────────────────────────────── */
.eti {                      /* etichetta di campo, come sulle targhette */
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--matita);
}
.titolo { font-size: 19px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; }
.sotto  { font-size: 14px; color: var(--matita); }
.cifra  { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ── Impaginato ─────────────────────────────────────────────────────────── */
.pagina {
  max-width: var(--misura); margin: 0 auto;
  padding: 0 var(--s4) calc(var(--tocco) + var(--s6) + env(safe-area-inset-bottom));
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
}

/* ── Testata: l'avanzamento, che è la prima cosa da capire ──────────────── */
.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--carta);
  border-bottom: var(--regola-forte);
  padding-top: env(safe-area-inset-top);
}
.testata-riga {
  display: flex; align-items: center; gap: var(--s3);
  max-width: var(--misura); margin: 0 auto;
  padding: var(--s2) var(--s4);
  min-height: var(--tocco);
}
.testata-riga .cresci { flex: 1; min-width: 0; }
.testata h1 {
  font-size: 17px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Conta-passi: la quantità è l'interfaccia, non un'etichetta in un modulo. */
.avanzamento { display: flex; align-items: baseline; gap: var(--s2); }
.avanzamento .ora { font-size: 30px; line-height: 1; }
.avanzamento .tot { font-size: 15px; color: var(--matita); }

/* Il nastro dei passi: un unico substrato continuo, non contatori sparsi.
   Lo stato è portato dal riempimento E dal bordo, mai dal solo colore. */
.nastro { display: flex; gap: 2px; padding: 0 var(--s4) var(--s2);
          max-width: var(--misura); margin: 0 auto; }
.nastro i {
  flex: 1; height: 6px; border: 1px solid var(--tratto); background: transparent;
}
.nastro i[data-s="fatto"]   { background: var(--inchiostro); border-color: var(--inchiostro); }
.nastro i[data-s="ora"]     { background: var(--segnale); border-color: var(--segnale); }
.nastro i[data-s="pausa"]   { flex: 0 0 10px; border: none; background: repeating-linear-gradient(
                                90deg, var(--tratto) 0 2px, transparent 2px 4px); }

/* ── Passo della procedura ──────────────────────────────────────────────── */
.passo {
  border-top: var(--regola);
  padding: var(--s4) 0;
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s3);
  align-items: start;
}
.passo:first-of-type { border-top: none; }
.passo[data-stato="ora"] { border-top: var(--regola-forte); }

.passo-n {
  font-size: 15px; font-weight: 700; line-height: 30px; text-align: center;
  border: var(--regola-forte); min-height: 30px;
}
.passo[data-stato="fatto"] .passo-n { background: var(--inchiostro); color: var(--carta); }
.passo[data-stato="ora"]  .passo-n { background: var(--segnale-testo);
  border-color: var(--segnale-testo); color: var(--sopra-segnale); }

.passo-corpo { min-width: 0; }
.passo-testa { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.passo-testa .titolo { flex: 1; min-width: 0; }

/* Prescrizione: cifre grandi, etichette piccole. */
.prescrizione { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); }
.dato { display: flex; flex-direction: column; gap: 1px; }
.dato .v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.dato.forte .v { color: var(--segnale); }

.avviso {
  margin-top: var(--s3); padding: var(--s2) var(--s3);
  border: var(--regola); background: var(--carta-2);
  font-size: 14px;
}
.avviso b { font-weight: 650; }

/* ── Serie registrate: la riga di collaudo ──────────────────────────────── */
.collaudo { margin-top: var(--s3); border: var(--regola); }
.collaudo-riga {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-bottom: var(--regola);
}
.collaudo-riga:last-child { border-bottom: none; }
.collaudo-riga .n { width: 18px; font-size: 12px; color: var(--matita); }
.collaudo-riga .v { flex: 1; font-size: 17px; font-weight: 650; }

/* Il pulsante che registra porta la parola: era un quadrato muto, e
   accanto a un controllo largo sembrava il meno importante dei due. */
.registra { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s3); }
.registra .btn.pieno { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 2px; }
.campo input {
  font: inherit; font-size: 22px; font-weight: 700; text-align: center;
  min-height: var(--tocco); width: 100%;
  background: var(--carta); color: var(--inchiostro);
  border: var(--regola-forte); border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.campo input::placeholder { color: var(--matita); font-weight: 400; }

/* ── Bottoni ────────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: 14px; font-weight: 650; letter-spacing: .02em;
  min-height: var(--tocco); padding: 0 var(--s4);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: transparent; color: var(--inchiostro);
  border: var(--regola-forte); border-radius: 0; cursor: pointer;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn.pieno { background: var(--segnale-testo); border-color: var(--segnale-testo);
             color: var(--sopra-segnale); }
.btn.piano { border: var(--regola); font-weight: 500; color: var(--matita); min-height: 36px; padding: 0 var(--s3); }
.btn.largo { width: 100%; }
/* Le azioni che cancellano stanno da sole: in palestra si tocca per sbaglio. */
.btn.rimuovi { border-color: var(--tratto); color: var(--matita); margin-left: auto; }
.btn.rimuovi:hover { border-color: var(--segnale); color: var(--segnale); }

/* Misura delle icone: una regola sola. Senza, un SVG senza
   attributi prende il default 300×150 del browser. */
.ico { width: 20px; height: 20px; flex: none; }
.btn .ico { width: 16px; height: 16px; }

/* ── Indice degli allenamenti ───────────────────────────────────────────── */
.indice { border-top: var(--regola-forte); }
.voce {
  /* Quattro colonne: casella, titolo, conteggio, freccia. Con tre, il
     conteggio e la freccia si contendevano la stessa e una andava a capo. */
  display: grid; grid-template-columns: 34px 1fr auto auto; gap: var(--s3);
  align-items: center; width: 100%; text-align: left;
  padding: var(--s4) 0; border-bottom: var(--regola);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: inherit; cursor: pointer; min-height: var(--tocco);
}
.voce { text-decoration: none; }
.voce .ico { color: var(--matita); }
.voce .sigla { font-size: 15px; font-weight: 700; border: var(--regola-forte);
               min-height: 30px; line-height: 30px; text-align: center; }
.voce .cresci { min-width: 0; }

/* ── Figura ─────────────────────────────────────────────────────────────── */
.figura { margin-top: var(--s3); border: var(--regola); background: var(--carta-2); }
.figura img { display: block; width: 100%; max-height: 200px; object-fit: contain; }
.figura-azioni { display: flex; gap: var(--s2); padding: var(--s2); border-top: var(--regola); }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Note ───────────────────────────────────────────────────────────────── */
.note-blocco { margin-top: var(--s3); }
.note-blocco summary { list-style: none; cursor: pointer; min-height: 36px;
                       display: flex; align-items: center; gap: var(--s2); }
.note-blocco summary::-webkit-details-marker { display: none; }
textarea.note {
  font: inherit; font-size: 15px; width: 100%; margin-top: var(--s2);
  min-height: 76px; padding: var(--s3);
  background: var(--carta); color: var(--inchiostro);
  border: var(--regola); border-radius: 0; resize: vertical;
}

/* ── Pausa fra i gruppi ─────────────────────────────────────────────────── */
.pausa {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; color: var(--matita);
}
.pausa::before, .pausa::after {
  content: ''; flex: 1; height: 0;
  border-top: 1px dashed var(--tratto);
}

/* ── Barra in fondo ─────────────────────────────────────────────────────── */
.fondo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--carta); border-top: var(--regola-forte);
  padding: var(--s2) var(--s4);
  padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
}
.fondo-int { display: flex; gap: var(--s2); max-width: var(--misura); margin: 0 auto; }
.fondo-int > * { flex: 1; }

/* ── Stati vuoti ────────────────────────────────────────────────────────── */
.vuoto { padding: var(--s12) var(--s4); text-align: center; color: var(--matita); border: 1px dashed var(--tratto); margin-top: var(--s4); }

/* ── Foglio di scelta immagine ──────────────────────────────────────────── */
.velo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end;
        background: rgba(10,10,12,.55); }
.foglio { background: var(--carta); width: 100%; max-height: 90vh; overflow: auto;
          border-top: var(--regola-forte); padding: var(--s4);
          padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
@media (min-width: 640px) {
  .velo { align-items: center; justify-content: center; }
  .foglio { max-width: 560px; border: var(--regola-forte); }
}
.foglio-testa { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s3); }
.foglio-testa .cresci { flex: 1; min-width: 0; }
.fonti { display: flex; gap: var(--s2); }
.fonti .btn { flex: 1; }
.fonti .btn[aria-pressed="true"] { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
input.ricerca {
  font: inherit; width: 100%; min-height: var(--tocco); margin-top: var(--s2);
  padding: 0 var(--s3); background: var(--carta); color: var(--inchiostro);
  border: var(--regola-forte); border-radius: 0;
}
.risultati { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
             gap: var(--s2); margin-top: var(--s3); }
.risultato { border: var(--regola); background: var(--carta); padding: var(--s2);
             cursor: pointer; font: inherit; color: inherit; text-align: center; }
.risultato img { width: 100%; height: 104px; object-fit: contain; background: var(--carta-2); }
.risultato span { display: block; font-size: 12px; line-height: 1.3; margin-top: var(--s2); }

/* ── Storico ────────────────────────────────────────────────────────────── */
.storico-riga { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--s3);
                align-items: baseline; padding: var(--s3) 0; border-bottom: var(--regola); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Passo chiuso: una riga sola. Il manuale mostra il passo in cui sei. */
.passo-chiuso {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  background: none; border: 0; padding: 0; min-height: 30px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.passo-chiuso .cresci { flex: 1; min-width: 0; }
.passo-chiuso .titolo { font-size: 16px; font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.passo-chiuso .sotto { font-size: 13px; }
.passo-chiuso .ico { color: var(--tratto); }
.passo[data-stato="fatto"] .passo-chiuso .titolo { color: var(--matita); font-weight: 450; }
.passo[data-stato="fatto"] .passo-chiuso .sotto { color: var(--matita); }

/* Senza immagine la figura non è un riquadro: sono due azioni quiete. */
.figura.vuota { border: 0; background: none; }
.figura.vuota .figura-azioni { border-top: 0; padding: 0; }

/* La nota si tocca, quindi ha la cornice di un controllo: un'etichetta
   maiuscoletta era il bersaglio meno riconoscibile della schermata. */
.note-blocco summary .btn { pointer-events: none; }
.note-blocco[open] summary .btn { border-color: var(--inchiostro); }

/* La nota è un'azione secondaria: si stringe al suo contenuto invece di
   occupare tutta la riga come l'azione principale. */
.note-blocco summary { display: block; }
.note-blocco summary .btn { display: inline-flex; }