/* ============================================================
   SISTEMA COLORE
   Costruito su token semantici (a che serve un colore), non su valori
   scritti a mano: prima c erano 151 colori fissi nel CSS e la modalita
   chiara ne correggeva solo una parte, per questo restavano macchie scure.

   Principi applicati, presi dalla ricerca:
   - LIVELLI DI SUPERFICIE: sfondo < card < card annidata < finestra.
     Nel tema scuro l altezza si esprime schiarendo, non con le ombre,
     perche su fondo scuro un ombra non si vede.
   - NEUTRI CROMATICI: i grigi hanno una punta di colore, mai grigio puro.
   - NIENTE NERO PURO (#000) ne BIANCO PURO di sfondo: affaticano la vista.
   - Nel tema scuro i colori del marchio si SCHIARISCONO e si desaturano
     un poco; nel chiaro si SCURISCONO, perche' su fondo chiaro perdono
     contrasto.
   - Ogni accoppiata e stata verificata col calcolo WCAG: 4.5:1 per il
     testo, 3:1 per i comandi, 1.3:1 tra i livelli di superficie.
   - Tinte calde (arancio, rosso): spingono e danno urgenza,
     che e' l emozione giusta per un app di allenamento.
   ============================================================ */
:root, html[data-theme="dark"] {
  /* TEMA PRINCIPALE «Brace e pietra» (data-mode="brace", il default). Gli altri temi
     (sotto, html[data-mode="..."]) cambiano solo superfici, bordi, testo e accento:
     stato, corpo e mappa dell anno restano uguali in tutti, e sono alias dei token.
     I contrasti di ogni tema x modalita li controlla tests/temi-contrasto.test.js. */
  /* mappa dell anno: fatto = quadrato pieno, saltato = anello, riposo = punto, vuoto = cella */
  --yr-fatto: var(--success); --yr-saltato: var(--muted); --yr-riposo: var(--border-strong); --yr-vuoto: var(--surface-3); --yr-bordo: var(--surface-3); --yr-segno: var(--surface-1);
  /* superfici, dalla piu profonda alla piu vicina */
  --bg: #100e0c;
  --surface-1: #1c1916;   /* card */
  --surface-2: #272420;   /* dentro una card, comandi */
  --surface-3: #322e2a;   /* finestre e pannelli sopra tutto */
  --border: #43403d;
  --border-strong: #79736d;
  /* bordo dei CAMPI e dei comandi (input, +/-, rotella): >= 3:1 sulla card in ogni tema.
     I bordi delle card restano --border: sono decorazione, non un comando. */
  --border-field: var(--border-strong);
  --binario: var(--surface-3);   /* la parte vuota di anello e barre di avanzamento: nello scuro e il riquadro di sempre */
  color-scheme: dark;   /* barre di scorrimento, campi e menu del browser */

  /* testo, tre livelli di importanza (--text-dim >= 4.5:1 sul riquadro --surface-2) */
  --text: #f5f3f1;
  --muted: #b3ada7;
  --text-dim: #908e8c;

  /* marchio 3in: braci, energia */
  --primary: #fb8b3c;
  --primary-glow: #c46c2f;
  --primary-shadow: rgba(251, 139, 60, 0.32);
  --accent: #fb8b3c;
  --on-primary: #14100c;   /* sul pieno chiaro serve testo scuro */
  --on-accent: #14100c;

  /* STATO: verde = fatto o giusto, ambra = attenzione, rosso = pericolo.
     UGUALI in tutti i temi (solo Neon Tokyo ha il pericolo piu arancio, per
     staccarsi dal suo fucsia): il colore di stato vuol dire sempre la stessa
     cosa, ovunque nell app, e va sempre con una forma o un simbolo. */
  --success: #34c99a;
  --warning: #f2c14e;
  --danger: #ff6b81;
  --on-status: #0c1410;
  /* CORPO dei gruppi muscolari (figura e legenda di «La tua settimana»): giallo =
     sotto il minimo, arancione = range utile, rosso = carico alto. Uguali in tutti i temi. */
  --corpo-basso: #f3da7a;
  --corpo-utile: #ed8100;
  --corpo-alto: #bd423a;
  /* sotto il minimo utile: blu-lavanda, stessa famiglia del riposo */
  --low: #8ea2dc;
  --tirata: #6ea8ff;   /* barra Tirata della scheda Oggi (Spinta usa --primary, Gambe --success) */

  /* TESTO SULLA PROPRIA TINTA (chip, badge, etichette con sfondo color-mix al
     10-18%): nel tema scuro il colore pieno basta gia (>= 4.5:1), nel chiaro
     si scurisce. Si usa al posto del colore pieno quando il fondo e una tinta
     dello stesso colore; sul fondo normale resta il colore pieno. */
  --primary-ink: var(--primary);
  --accent-ink: var(--accent);
  --success-ink: var(--success);
  --warning-ink: var(--warning);
  --danger-ink: var(--danger);
  --low-ink: color-mix(in srgb, var(--low) 75%, #fff);

  --card: var(--surface-1);
}

html[data-theme="light"] {
  /* «Brace e pietra» chiaro: fondo pietra caldo, card bianche che si staccano con
     un ombra leggera, testo quasi nero e secondario che fa un passo indietro. */
  --bg: #f6f5f3;
  --surface-1: #ffffff;
  --surface-2: #f1efec;
  --surface-3: #e3dfda;
  --border: #d6d6d5;
  --border-strong: #8b857e;
  --binario: var(--border-field);   /* nel chiaro il riquadro e troppo vicino alla card: il binario usa il bordo dei comandi (>= 3:1) */
  color-scheme: light;

  --text: #1c1917;
  --muted: #57534e;
  --text-dim: #6c6a68;

  --primary: #c43c0a;
  --primary-glow: #992f08;
  --primary-shadow: rgba(196, 60, 10, 0.2);
  --accent: #a73301;
  --on-primary: #ffffff;
  --on-accent: #ffffff;

  --success: #167a5c;
  --warning: #8a6400;
  --danger: #a80f39;
  --on-status: #ffffff;
  --corpo-basso: #947b05;
  --corpo-utile: #ec6d12;   /* #ed6e12 faceva 2,99:1 sulla card di Prugna e rame: un passo piu scuro per il 3:1 */
  --corpo-alto: #ac312c;
  --low: #4a63ad;
  --tirata: #1d4ed8;   /* il #6ea8ff dello scuro faceva 2.41:1 sulla card bianca (WCAG 1.4.11 chiede 3:1) */

  /* testo sulla propria tinta: 80% del colore + 20% nero */
  --primary-ink: color-mix(in srgb, var(--primary) 80%, #000);
  --accent-ink: color-mix(in srgb, var(--accent) 80%, #000);
  --success-ink: color-mix(in srgb, var(--success) 80%, #000);
  --warning-ink: color-mix(in srgb, var(--warning) 80%, #000);
  --danger-ink: color-mix(in srgb, var(--danger) 80%, #000);
  --low-ink: color-mix(in srgb, var(--low) 80%, #000);
}

/* ALTRI TEMI (Opzioni > Aspetto > Tema, chiave tz_tema): sovrascrivono solo questi
   token; il primo blocco vale nello scuro, il secondo (con data-theme="light") nel chiaro.
   Valori calcolati e verificati nelle anteprime del proprietario. */
/* Neon Tokyo */
html[data-mode="neon"] {
  --bg: #0a0814; --surface-1: #151027; --surface-2: #1e1a30; --surface-3: #282338;
  --border: #3c374e; --border-strong: #787288; --text: #f0e9ff; --muted: #9b8fc0; --text-dim: #8a8698;
  --primary: #ff2e88; --primary-glow: #c7246a; --primary-shadow: rgba(255, 46, 136, 0.32); --accent: #00f0c8; --on-primary: #14100c; --on-accent: #14100c; --danger: #ff7a45;
}
html[data-mode="neon"][data-theme="light"] {
  --bg: #f4f1fb; --surface-1: #ffffff; --surface-2: #f5f5f5; --surface-3: #ebebeb;
  --border: #d6d4da; --border-strong: #8e8a99; --text: #1a1230; --muted: #5e5480; --text-dim: #6f6980;
  --primary: #c4006a; --primary-glow: #990053; --primary-shadow: rgba(196, 0, 106, 0.2); --accent: #00806b; --on-primary: #ffffff; --on-accent: #ffffff; --danger: #b8401a;
}
/* Turchese guida */
html[data-mode="turchese"] {
  --bg: #061315; --surface-1: #0d2124; --surface-2: #172a2d; --surface-3: #203336;
  --border: #34484a; --border-strong: #6f8182; --text: #e6f7f5; --muted: #8cb0ad; --text-dim: #839292;
  --primary: #1fe0cf; --primary-glow: #18afa1; --primary-shadow: rgba(31, 224, 207, 0.32); --accent: #ff3352; --on-primary: #14100c; --on-accent: #14100c;
}
html[data-mode="turchese"][data-theme="light"] {
  --bg: #e9f6f5; --surface-1: #ffffff; --surface-2: #f5f5f5; --surface-3: #ebebeb;
  --border: #d3d7d8; --border-strong: #869292; --text: #0a2224; --muted: #496a68; --text-dim: #5c7071;
  --primary: #0a7c74; --primary-glow: #08615a; --primary-shadow: rgba(10, 124, 116, 0.2); --accent: #c8102e; --on-primary: #ffffff; --on-accent: #ffffff;
}
/* Falco bianco */
html[data-mode="falco"] {
  --bg: #0c0e14; --surface-1: #171a24; --surface-2: #20232d; --surface-3: #2a2c36;
  --border: #3e414a; --border-strong: #7a7c83; --text: #f2f3f8; --muted: #a2a7b8; --text-dim: #8c8e93;
  --primary: #c9d2ff; --primary-glow: #9da4c7; --primary-shadow: rgba(201, 210, 255, 0.32); --accent: #e8c66a; --on-primary: #14100c; --on-accent: #14100c;
}
html[data-mode="falco"][data-theme="light"] {
  --bg: #f4f5fa; --surface-1: #ffffff; --surface-2: #f5f5f5; --surface-3: #ebebeb;
  --border: #d5d5d8; --border-strong: #8b8d93; --text: #141826; --muted: #5a6077; --text-dim: #6b6e79;
  --primary: #3d4fa8; --primary-glow: #303e83; --primary-shadow: rgba(61, 79, 168, 0.2); --accent: #88660e; --on-primary: #ffffff; --on-accent: #ffffff;
}
/* Crepuscolo */
html[data-mode="crepuscolo"] {
  --bg: #120f1e; --surface-1: #1e1a30; --surface-2: #272338; --surface-3: #302c41;
  --border: #444054; --border-strong: #7d798b; --text: #f1ecfa; --muted: #a79fc0; --text-dim: #8f8b99;
  --primary: #ff9e7a; --primary-glow: #c77b5f; --primary-shadow: rgba(255, 158, 122, 0.32); --accent: #8f9cf0; --on-primary: #14100c; --on-accent: #14100c;
}
html[data-mode="crepuscolo"][data-theme="light"] {
  --bg: #f3f1fa; --surface-1: #ffffff; --surface-2: #f5f5f5; --surface-3: #ebebeb;
  --border: #d6d5da; --border-strong: #8f8d99; --text: #1d1830; --muted: #5f587a; --text-dim: #716d7f;
  --primary: #b34f2c; --primary-glow: #8c3e22; --primary-shadow: rgba(179, 79, 44, 0.2); --accent: #4b56c0; --on-primary: #ffffff; --on-accent: #ffffff;
}
/* Prugna e rame */
html[data-mode="prugna"] {
  --bg: #151016; --surface-1: #211a23; --surface-2: #2a232c; --surface-3: #332c35;
  --border: #473f48; --border-strong: #7f787f; --text: #f2eaef; --muted: #b5a5b0; --text-dim: #918a8f;
  --primary: #d98a5f; --primary-glow: #a96c4a; --primary-shadow: rgba(217, 138, 95, 0.32); --accent: #d98a5f; --on-primary: #14100c; --on-accent: #14100c;
}
html[data-mode="prugna"][data-theme="light"] {
  --bg: #f7f1f4; --surface-1: #fffbfd; --surface-2: #f5f1f3; --surface-3: #ebe7e9;
  --border: #d8d3d6; --border-strong: #938c91; --text: #261b24; --muted: #6b5a66; --text-dim: #736a70;
  --primary: #a8552b; --primary-glow: #834222; --primary-shadow: rgba(168, 85, 43, 0.2); --accent: #a8552b; --on-primary: #ffffff; --on-accent: #ffffff;
}

/* Nel chiaro la profondita si esprime con l ombra, come su iOS: il bordo
   si alleggerisce e card e riquadri prendono un ombra morbida. */
html[data-theme="light"] .card, html[data-theme="light"] .sr-list, html[data-theme="light"] .sr-profile,
html[data-theme="light"] .og-tile, html[data-theme="light"] .og-day, html[data-theme="light"] .mg-card,
html[data-theme="light"] .pg-kpi, html[data-theme="light"] .entry-btn, html[data-theme="light"] .hs-row,
html[data-theme="light"] .st-table, html[data-theme="light"] .pick-row {
  border-color: color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--text) 4%, transparent);
}
/* Il pannello del recupero ha testo bianco: nel chiaro la sfumatura verso
   il bianco della card lo rendeva illeggibile. Qui resta un pieno arancio. */
html[data-theme="light"] .recovery-overlay { background: linear-gradient(160deg, var(--primary), var(--primary-glow)); }
/* i pulsanti secondari: niente bordo rosso urlato, un grigio con testo del marchio */
html[data-theme="light"] .btn-archive { background: var(--surface-1); color: var(--primary); border-color: var(--border); }
html[data-theme="light"] .card .btn-archive { background: var(--surface-2); border-color: transparent; }
/* dentro una card bianca i riquadri annidati sono grigi e piatti */
html[data-theme="light"] .card .pg-kpi, html[data-theme="light"] .card .entry-btn, html[data-theme="light"] .card .hs-row,
html[data-theme="light"] .card .og-ex { box-shadow: none; background: var(--surface-2); border-color: transparent; }
html[data-theme="light"] .mg-card:not(.on), html[data-theme="light"] .pick-row:not(.on) { background: var(--surface-1); }


:root {
  /* Scala a 8 punti: tutte le distanze sono multipli di 8 (con mezzo passo
     da 4 per i dettagli fini). Le altezze di riga sono multipli di 4, cosi
     il testo resta agganciato allo stesso ritmo verticale.
     Regola "interno <= esterno": lo spazio DENTRO un gruppo e sempre minore
     di quello TRA i gruppi, altrimenti l occhio non capisce cosa sta con cosa
     ed e esattamente il motivo per cui le descrizioni sembravano attaccate. */
  --sp-1: 4px;    /* mezzo passo: icona-testo, dettagli */
  --sp-2: 8px;    /* titolo -> sua descrizione */
  --sp-3: 12px;   /* elementi vicini dentro lo stesso blocco */
  --sp-4: 16px;   /* padding interno delle card */
  --sp-5: 24px;   /* blocco -> blocco */
  --sp-6: 32px;   /* sezione -> sezione */
  --lh-tight: 20px;
  --lh-base: 24px;
  --lh-loose: 28px;
}

* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
/* niente zoom accidentale: il doppio tocco non ingrandisce piu la pagina */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, .group-card, .pick-row, .wk-row, .wday-card, .onb-opt { touch-action: manipulation; }
/* su iPhone un campo sotto i 16px fa zoomare la pagina al tocco */
input, select, textarea { font-size: 16px; }
html, body { background: var(--bg); }
body {
  color: var(--text); margin: 0; min-height: 100vh; user-select: none;
  transition: background 0.2s ease;   /* cambio di tema: breve, e niente con il movimento ridotto */
}

/* Movimento ridotto (T27, WCAG 2.3.3): con la preferenza attiva nessuna animazione e nessuna transizione in tutta l'app (aperture dei fogli, avvisi, grafici,
   cursori). Le animazioni che finiscono da sole (entrata di un foglio) finiscono subito; quelle infinite (respiro, impulsi) non partono. La scheda allievo
   ha la sua regola nello stile di stile.js; lo scorrimento animato si toglie anche qui. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* Aree di tocco (M16, WCAG 2.5.8/2.5.5): i comandi piccoli prendono il tocco anche attorno a sé con un ::after invisibile, senza cambiare ciò che si vede.
   I margini (alto destra basso sinistra) arrivano fin dove c'è spazio libero (padding della riga, spazio fra i vicini) e non entrano nel vicino. */
.info-btn, .set-check, .set-flame-btn, .recovery-icon-btn, .recovery-pill, .recovery-close-btn, .mc-nav, .plan-check, .reorder-btn, .wheel-btn, .lib-add-btn, .onb-skip, .og-link { position: relative; }
.recovery-mute-btn { position: relative; }   /* da aperto (.expanded) resta absolute: la sua regola ha più peso */
.info-btn::after, .set-check::after, .set-flame-btn::after, .recovery-icon-btn::after, .recovery-mute-btn::after, .recovery-pill::after, .recovery-close-btn::after,
.mc-nav::after, .mc-cell::after, .plan-check::after, .reorder-btn::after, .wheel-btn::after, .lib-add-btn::after, .onb-skip::after, .og-link::after { content: ''; position: absolute; }
.info-btn::after { inset: -9px -4px; }
.set-check::after { inset: -6px -9px -6px -3px; }
.set-flame-btn::after { inset: -7px -3px; }
.recovery-icon-btn::after { inset: -7px; }
.recovery-mute-btn::after { inset: -8px -5px; }
.recovery-pill::after, .recovery-close-btn::after { inset: -5px 0; }
.mc-nav::after { inset: -3px; }
.mc-cell::after { inset: -1px 0; }
.plan-check::after { inset: -9px; }
.reorder-btn:first-child::after { inset: -10px -7px -1px; }   /* le due frecce stanno a 2px una dall altra: ciascuna cresce verso l esterno */
.reorder-btn:last-child::after { inset: -1px -7px -10px; }
.wheel-btn::after { inset: -5px -6px -5px 0; }
.lib-add-btn::after { inset: -6px; }
.onb-skip::after { inset: -13px -4px; }
.og-link::after { inset: -7px 0; }

/* testo che si puo selezionare e copiare (per esempio l email del contatto privacy): il body ha user-select: none */
.selezionabile { -webkit-user-select: text; user-select: text; }