/* Copia di webapp/design/sistema/stile.css (W-D2, W-D3) per la pagina pulita
   (W-A4a). Tolte la regola vecchia `.giro-testa h2` e `.demo`; aggiunte in fondo
   poche regole della pagina vera. Il riferimento resta webapp/design/. */
/* =====================================================================
   Sistema di stile — pagina dell'allenamento (W-D2 superfici, W-D3 testo)
   Scelte del committente: SCELTA_TORNATA_1.md (mix di A e C) e
   SCELTA_TORNATA_2.md (variante 2: titoli su verde, dati su bianco).
   Niente scala ne' quadrante dell'errore: numeri col segno, colore per
   anticipo e ritardo.

   SUPERFICI (W-D2). .su-scuro (verde), .su-nero (testata), .su-chiaro
   (bianco): stessi ruoli di colore, valori diversi.

   TESTO (W-D3). Sei livelli, non di piu'; ogni testo della pagina ne usa
   uno. Le gerarchie (.g-compatta, .g-ariosa) cambiano solo i valori:
     1 titolo        il titolo della pagina (uno per pagina)
     2 sezione       titoli delle fasce, titolo di un avviso, testo dei bottoni
     3 valore grande totali e errore del giro: il numero da leggere per primo
     4 valore        cifre della tabella, misure, programma dei giri
     5 etichetta     il nome di un dato o di una colonna, la testata
     6 testo         frasi: dati dell'ingresso, legenda, avvisi, note
   Regole d'uso per esteso in sistema/README.md.
   Contrasti misurati (WCAG 2.1) in sistema/README.md.
   ===================================================================== */

/* --- Caratteri serviti da noi (SIL OFL, licenze in caratteri/) --- */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("caratteri/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("caratteri/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("caratteri/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("caratteri/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("caratteri/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("caratteri/ibm-plex-mono-600.woff2") format("woff2"); }

/* Impaginazione: una colonna stretta da foglio dei tempi; nella pagina tutta
   verde, da tablet, la tabella e il dettaglio stanno affiancati; nelle pagine
   a fasce ogni sezione e' una fascia a tutta larghezza. */
:root {
  /* tinte (rapporti di contrasto in README.md) */
  --verde: #0E2A1F; --verde-2: #15382A; --nero: #050807; --bianco: #FFFFFF;
  --salvia: #B7C7BC; --ottone: #E0BE78; --ritardo-chiaro: #FF7A6B; --rosso: #A30F22; --linea-scura: #3F6352;
  --grigio-verde: #46564C; --ottone-scuro: #6E5110; --rosso-a: #C8102E; --carta-2: #F2F4F3; --linea-chiara: #D5DBD7;
  /* caratteri */
  --f-titolo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-testo: "Barlow", "Segoe UI", Arial, sans-serif;
  --f-cifre: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  /* spazi, raggi, tocco */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px;
  --raggio: 2px; --tocco: 48px;
  --margine: max(16px, env(safe-area-inset-left, 0px));
  --margine-d: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;

  /* --- I sei livelli: valori di partenza (W-D2) --- */
  --l1-f: var(--f-titolo); --l1-z: clamp(44px, 13vw, 64px); --l1-p: 800; --l1-m: uppercase; --l1-sp: -.005em; --l1-i: .92;
  --l2-f: var(--f-titolo); --l2-z: 26px; --l2-p: 800; --l2-m: uppercase; --l2-sp: .04em; --l2-i: 1;
  --l3-z: 44px; --l3-p: 600;
  --l4-z: 20px; --l4-p: 500;
  --l5-z: 12px; --l5-p: 600; --l5-m: uppercase; --l5-sp: .12em;
  --l6-z: 15px; --l6-i: 1.45;
  /* distanze */
  --spazio-fascia: var(--s-5); --spazio-blocchi: var(--s-4); --spazio-riga: var(--s-3);
}

/* Gerarchia compatta: foglio dei tempi. Tutto maiuscolo nei titoli, cifre
   protagoniste, spazi stretti: in uno schermo ci sta tutta la tabella. */
.g-compatta {
  --l1-f: var(--f-titolo); --l1-z: clamp(40px, 12vw, 56px); --l1-p: 800; --l1-m: uppercase; --l1-sp: 0; --l1-i: .9;
  /* W-D3: titoletti da 20 a 28 px, il committente: «troppo piccoli se comparati al resto» */
  --l2-f: var(--f-titolo); --l2-z: 28px; --l2-p: 800; --l2-m: uppercase; --l2-sp: .06em; --l2-i: 1.05;
  --l3-z: 44px; --l3-p: 600;
  --l4-z: 20px; --l4-p: 500;
  --l5-z: 12px; --l5-p: 600; --l5-m: uppercase; --l5-sp: .14em;
  --l6-z: 15px; --l6-i: 1.4;
  --spazio-fascia: 18px; --spazio-blocchi: 14px; --spazio-riga: 10px;
}
/* Gerarchia ariosa: rivista d'auto storiche. Titoli in maiuscolo e
   minuscolo, piu' grandi e con piu' aria; etichette non tutte maiuscole. */
.g-ariosa {
  --l1-f: var(--f-titolo); --l1-z: clamp(46px, 14vw, 64px); --l1-p: 600; --l1-m: none; --l1-sp: -.01em; --l1-i: 1;
  --l2-f: var(--f-titolo); --l2-z: 28px; --l2-p: 600; --l2-m: none; --l2-sp: 0; --l2-i: 1.1;
  --l3-z: 48px; --l3-p: 600;
  --l4-z: 21px; --l4-p: 500;
  --l5-z: 13px; --l5-p: 600; --l5-m: none; --l5-sp: .02em;
  --l6-z: 16px; --l6-i: 1.55;
  --spazio-fascia: 32px; --spazio-blocchi: 20px; --spazio-riga: 14px;
}

/* --- Le tre superfici: stessi ruoli, valori diversi --- */
.su-scuro, :root {
  --fondo: var(--verde); --testo: var(--bianco); --secondario: var(--salvia); --accento: var(--ottone);
  --anticipo: var(--ottone); --ritardo: var(--ritardo-chiaro); --evidenza: var(--verde-2); --linea: var(--linea-scura);
  --filetto: var(--bianco); --bott-fondo: var(--bianco); --bott-testo: var(--nero);
  --scelta-fondo: var(--ottone); --scelta-testo: var(--nero); --foto-fondo: var(--nero);
  --zero-fondo: var(--bianco); --zero-testo: var(--nero);
}
.su-nero {
  --fondo: var(--nero); --testo: var(--bianco); --secondario: var(--salvia); --accento: var(--ottone);
  --anticipo: var(--ottone); --ritardo: var(--ritardo-chiaro); --evidenza: var(--verde-2); --linea: var(--linea-scura);
  --filetto: var(--ottone); --bott-fondo: var(--bianco); --bott-testo: var(--nero);
  --scelta-fondo: var(--ottone); --scelta-testo: var(--nero); --foto-fondo: var(--nero);
  --zero-fondo: var(--bianco); --zero-testo: var(--nero);
}
.su-chiaro {
  --fondo: var(--bianco); --testo: var(--nero); --secondario: var(--grigio-verde); --accento: var(--verde);
  --anticipo: var(--ottone-scuro); --ritardo: var(--rosso-a); --evidenza: var(--carta-2); --linea: var(--linea-chiara);
  --filetto: var(--nero); --bott-fondo: var(--nero); --bott-testo: var(--bianco);
  --scelta-fondo: var(--verde); --scelta-testo: var(--bianco); --foto-fondo: var(--verde);
  --zero-fondo: var(--verde); --zero-testo: var(--bianco);
  color-scheme: light;
}
.su-scuro, .su-nero, .su-chiaro { background: var(--fondo); color: var(--testo); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--testo);
  font-family: var(--f-testo); font-weight: 400; font-size: var(--l6-z); line-height: var(--l6-i);
  padding-left: var(--margine); padding-right: var(--margine-d); padding-block: 0 var(--s-6); }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- I sei livelli come classi --- */
.l1, .titolo { margin: 0; font-family: var(--l1-f); font-size: var(--l1-z); font-weight: var(--l1-p); text-transform: var(--l1-m);
  letter-spacing: var(--l1-sp); line-height: var(--l1-i); text-wrap: balance; }
.l2, .sezione { margin: 0; font-family: var(--l2-f); font-size: var(--l2-z); font-weight: var(--l2-p); text-transform: var(--l2-m);
  letter-spacing: var(--l2-sp); line-height: var(--l2-i); text-wrap: balance; }
.l3 { font-family: var(--f-cifre); font-size: var(--l3-z); font-weight: var(--l3-p); line-height: 1; font-variant-numeric: tabular-nums slashed-zero; }
.l4, .cifre { font-family: var(--f-cifre); font-variant-numeric: tabular-nums slashed-zero; }
.l4 { font-size: var(--l4-z); font-weight: var(--l4-p); line-height: 1.1; }
.l5, .etichetta { font-family: var(--f-testo); font-size: var(--l5-z); font-weight: var(--l5-p); text-transform: var(--l5-m);
  letter-spacing: var(--l5-sp); line-height: 1.25; color: var(--secondario); }
.l6 { font-family: var(--f-testo); font-size: var(--l6-z); line-height: var(--l6-i); font-weight: 400; }


/* --- Testata --- */
.testata { margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-d));
  background: var(--fondo); color: var(--testo); border-bottom: 3px solid var(--filetto);
  padding: calc(var(--s-3) + env(safe-area-inset-top, 0px)) var(--margine-d) var(--s-3) var(--margine); }
.testata-dentro { max-width: 960px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.marchio { font-family: var(--f-titolo); font-size: 16px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.lingue { display: flex; gap: var(--s-1); }
.lingue a { min-width: var(--tocco); min-height: var(--tocco); display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--f-testo); color: var(--secondario); text-decoration: none; }
.lingue a[aria-current="true"] { color: var(--scelta-testo); background: var(--scelta-fondo); }

/* --- Titoli --- */
.titolo .acc { color: var(--accento); }
.sezione { border-bottom: 3px solid var(--filetto); padding-bottom: var(--s-2); }

/* --- Bottoni: il testo e' al livello 2 --- */
.bottone { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-5);
  background: var(--bott-fondo); color: var(--bott-testo); font-family: var(--l2-f); font-size: var(--l2-z);
  font-weight: var(--l2-p); text-transform: var(--l2-m); letter-spacing: var(--l2-sp);
  text-decoration: none; border: 0; border-radius: var(--raggio); cursor: pointer; }
.bottone-secondario { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tocco); padding: 0 var(--s-4);
  background: transparent; color: var(--testo); border: 2px solid var(--filetto); font: 600 var(--l6-z)/1.1 var(--f-testo);
  border-radius: var(--raggio); cursor: pointer; }

/* --- Dati dell'ingresso (livello 6) --- */
.dati { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.dati dt { color: var(--secondario); }
.dati dd { margin: 0; font-weight: 600; }
.programma { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 3px solid var(--filetto); }
.programma div { padding: var(--s-2) 0; border-bottom: 1px solid var(--linea); }
.programma b { display: block; margin-top: var(--s-1); font-family: var(--f-cifre); font-size: var(--l4-z); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums slashed-zero; }

/* --- Totali: valore grande + etichetta --- */
.totali { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 3px solid var(--filetto); }
.sezione + .totali { border-top: 0; }      /* un filetto solo sotto il titolo */
.totali div { padding: var(--spazio-riga) 0 var(--s-2); border-bottom: 1px solid var(--linea); }
.totali div:nth-child(odd) { padding-right: var(--s-3); border-right: 1px solid var(--linea); }
.totali div:nth-child(even) { padding-left: var(--s-3); }
.totali b { display: block; font-family: var(--f-cifre); font-size: var(--l3-z); font-weight: var(--l3-p); line-height: 1;
  font-variant-numeric: tabular-nums slashed-zero; margin-bottom: var(--s-1); }

/* --- Riga del giro: valore + etichette di colonna --- */
.giri { width: 100%; border-collapse: collapse; }
.giri th { padding: 0 0 var(--s-2); text-align: right; border-bottom: 3px solid var(--filetto); }
.giri th:first-child { text-align: left; }
.giri td { padding: var(--spazio-riga) 0; text-align: right; border-bottom: 1px solid var(--linea);
  font-family: var(--f-cifre); font-size: var(--l4-z); font-weight: var(--l4-p); line-height: 1; font-variant-numeric: tabular-nums slashed-zero; }
.giri td.n { text-align: left; font-weight: 600; width: 2.4ch; }
.giri td.imp, .giri td.pen { color: var(--secondario); }
.giri td.err { font-weight: 600; }
.giri tr.evidenza td { background: var(--evidenza); }
.giri a { color: inherit; text-decoration: none; display: inline-flex; min-height: 30px; align-items: center; }
/* Anticipo e ritardo: il segno c'e' sempre, il colore lo rinforza. */
.ritardo { color: var(--ritardo); }
.anticipo { color: var(--anticipo); }
.esatto { color: var(--testo); }
/* W-D3, richiesta del committente: penalita' zero (0,00 di scarto) in un
   riquadro pieno, da vedere a colpo d'occhio e da non confondere con anticipo
   o ritardo. Sta su ogni superficie (colori --zero-*). */
.zero { display: inline-block; min-width: 2.4ch; padding: 0 .35em; text-align: center; border-radius: var(--raggio);
  background: var(--zero-fondo); color: var(--zero-testo); font-weight: 600; }
.legenda { margin: 0; color: var(--secondario); }
.legenda .ritardo, .legenda .anticipo { font-weight: 600; }

/* --- Avvisi: fascia rossa piena, testo bianco, su ogni superficie --- */
.avviso { background: var(--rosso); color: var(--bianco); padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-1); border-radius: var(--raggio); }
.avviso .l2 { line-height: 1.1; }
.avviso .cifre { font-size: var(--l4-z); font-weight: 600; }
.avviso-in-piu { background: transparent; color: var(--testo); border: 2px solid var(--filetto); }

/* --- Dettaglio del giro e scheda foto --- */
.giro-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); border-bottom: 3px solid var(--filetto); padding-bottom: var(--s-2); }
/* Le pagine delle tornate 1-2 scrivono ancora `.cifre` e `b` senza livello: si
   agganciano ai livelli 3 e 2 qui, cosi' restano leggibili. */
.giro-testa .cifre { font-size: var(--l3-z); font-weight: var(--l3-p); line-height: 1; }
.avviso b { font-family: var(--l2-f); font-size: var(--l2-z); font-weight: var(--l2-p);
  text-transform: var(--l2-m); letter-spacing: var(--l2-sp); line-height: 1.1; }
.misure { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: 0; }
.misure dd { margin: var(--s-1) 0 0; font-family: var(--f-cifre); font-size: var(--l4-z); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums slashed-zero; }
.foto { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--foto-fondo); overflow: hidden; border: 2px solid var(--filetto); }
.foto svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease; }
.foto svg.attiva { opacity: 1; }
.foto .nome-foto { position: absolute; left: 0; bottom: 0; background: var(--nero); color: var(--bianco);
  font-family: var(--f-testo); font-size: var(--l5-z); font-weight: 600; letter-spacing: var(--l5-sp); text-transform: var(--l5-m);
  padding: var(--s-2) var(--s-3); }
.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.schede button { min-height: var(--tocco); padding: var(--s-1); background: transparent; color: var(--testo); border: 2px solid var(--filetto);
  font: 600 var(--l6-z)/1.1 var(--f-testo); border-radius: var(--raggio); cursor: pointer; }
.schede button[aria-pressed="true"] { background: var(--scelta-fondo); color: var(--scelta-testo); border-color: var(--scelta-fondo); }
.nota { margin: 0; color: var(--secondario); }

/* --- Pagina tutta su una superficie --- */
.pagina { max-width: 960px; margin: 0 auto; display: grid; gap: var(--s-6); padding-top: var(--s-5); }
.schermo { display: grid; gap: var(--spazio-blocchi); align-content: start; min-width: 0; }
@media (min-width: 760px) {
  .affiancati { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-6); align-items: start; }
}
.ingresso { max-width: 460px; }

/* --- Pagina a fasce: ogni fascia a tutta larghezza, contenuto centrato --- */
.fascia { margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-d));
  padding: var(--spazio-fascia) var(--margine-d) var(--spazio-fascia) var(--margine); }
.fascia > .dentro { max-width: 720px; margin: 0 auto; display: grid; gap: var(--spazio-blocchi); min-width: 0; }
.fascia-titolo { padding-bottom: calc(var(--spazio-fascia) * .6); }
.fascia-titolo + .fascia-dati { padding-top: calc(var(--spazio-fascia) * .75); }

/* W-D3: programma a cinque giri e misure del giro su due colonne. */
.programma.programma-5 { grid-template-columns: repeat(3, 1fr); column-gap: var(--s-3); }   /* telefono: 3 + 2 */
@media (min-width: 480px) { .programma.programma-5 { grid-template-columns: repeat(5, 1fr); } }
.misure.misure-2 { grid-template-columns: repeat(2, 1fr); }
.giro-testa .l3 .zero { font-size: inherit; }

/* --- Pagina vera (W-A4a) --- */
.sessioni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.sessioni .bottone { min-height: var(--tocco); }
.sessioni .l6 { display: block; color: var(--secondario); margin-top: var(--s-1); }
.foto-giro { display: grid; gap: var(--s-2); padding: var(--spazio-riga) 0; border-bottom: 1px solid var(--linea); }
.schede a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tocco);
  padding: var(--s-1); color: var(--testo); border: 2px solid var(--filetto); font: 600 var(--l6-z)/1.1 var(--f-testo);
  border-radius: var(--raggio); text-decoration: none; }
.incerto { color: var(--secondario); }
.installa[hidden], #aggiornamento[hidden] { display: none; }
#aggiornamento { max-width: 720px; margin: var(--s-4) auto 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; }