/* ferro — foglio di stile unico, niente build. Pensato prima per iPhone.
   I colori, i caratteri, lo spazio e le durate NON stanno qui: stanno in
   tokens.css, che e' la sorgente della design language (design/LINGUAGGIO.md).
   Qui ci sono solo i componenti. Se stai per scrivere un colore letterale in
   questo file, quasi sempre manca un token. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* senza questo un display:flex esplicito batte il [hidden] del browser
   e gli elementi nascosti restano visibili (il timer di recupero, per dire) */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font);
  font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1 { font-size: 2rem; margin: 0 0 2px; letter-spacing: -0.02em; }
h2 { font: var(--t-sezione); letter-spacing: var(--tracking-titolo); margin: 0 0 6px; }
h3 { font-size: 1rem; margin: 0 0 10px; }
/* i titoli delle schede sono h2 ma non devono gridare quanto quello della
   schermata: l'ordine e' semantico, la scala e' visiva e resta la sua */
.card h2, .view h2 { font-size: 1.25rem; margin: 0 0 8px; letter-spacing: var(--tracking-titolo); }
/* l'etichetta di sezione dentro una scheda: in mono, maiuscoletto, e non
   compete con il titolo della scheda che le sta sopra */
.card h3, h4 {
  font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase; color: var(--fumo); margin: 18px 0 8px;
}
p { margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 0.86rem; }
.fineprint { color: var(--muted); font-size: 0.86rem; padding: 4px var(--pad) 0; line-height: 1.5; }
/* Dentro una scheda il rientro c'e' gia': quello della scheda. Il `padding` di `.fineprint` e' fatto
   per le note FUORI dalle schede, e dentro le raddoppiava (16 px in piu' del titolo e dei bottoni). */
.card > .fineprint { padding-left: 0; padding-right: 0; }
/* il dato a destra di una riga (i giorni di una scheda) non va a capo: «4» sopra e «giorni» sotto */
.row__meta { flex: none; white-space: nowrap; }

/* ------------------------------------------------------------- struttura */

/* LA BARRA IN ALTO E' DI VETRO, non opaca (richiesta di Eugenio, 30/09). Lo scorrimento
   passa sotto e si sfoca; il fondo e' la ghisa del tema al 62%. Il saluto e' in
   --magnesite: sulla ghisa piena fa 15.9 (scuro) e 13.5 (chiaro). CALCOLATO, non
   guardato, col fondo al 62% e dietro il caso peggiore (bianco puro nel tema scuro, nero
   puro nel chiaro): 4.49 e 5.16. Dietro ai colori veri dei token (schede, ruggine piena)
   resta sopra 6, e il blur li media. Se il browser non sa sfocare si torna alla ghisa
   piena, come prima: meglio opaca che illeggibile. La barra in basso resta com'e' (si fa
   dopo). */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 8px) var(--pad) 8px;
  background: var(--ghisa);
  border-bottom: 1px solid var(--line);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .appbar {
    background: color-mix(in srgb, var(--ghisa) 62%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    border-bottom-color: color-mix(in srgb, var(--magnesite) 9%, transparent);
    /* il filo di luce in alto, come il bordo di una lastra di vetro */
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--magnesite) 7%, transparent);
  }
}
/* il saluto: una riga grande, come il titolo grande di iOS, e non un'etichetta */
.appbar__saluto {
  font: var(--t-sezione); font-size: 1.5rem; line-height: 1.15;
  letter-spacing: var(--tracking-titolo); color: var(--magnesite);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* l'ingranaggio e' una lastra di vetro tonda da 48 punti (il bersaglio minimo e' 44) */
.appbar__gear {
  appearance: none; flex: 0 0 auto; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; margin: 0 -4px 0 12px; cursor: pointer;
  color: var(--magnesite); border-radius: 50%;
  background: color-mix(in srgb, var(--ghisa-3) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--magnesite) 14%, transparent);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .appbar__gear {
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
    background: color-mix(in srgb, var(--ghisa-3) 45%, transparent);
  }
}
.appbar__gear:active { transform: scale(0.94); }
.appbar__gear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.appbar__gear .nav-icon { width: 30px; height: 30px; }

.view {
  padding: 12px var(--pad) calc(96px + var(--safe-bottom));
  display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; margin: 0 auto;
}

/* Il limite di riga si misura in caratteri, non in pixel: a 720 px di colonna
   il testo grande sta sui 45 caratteri ma quello piccolo arriva a 90, e sopra i
   75 l'occhio perde il capo riga tornando indietro. */
.view p, .view li, .muted, .fineprint, .field__hint, .stat__sub { max-width: 68ch; }

.page-head { padding: 4px 2px 0; }
/* L'h1 e un tasto accanto — oggi solo la libreria (LOTTO-EW, «Allenati con
   qualcuno»), quando c'e' un contatto verificato. Le altre schermate usano
   ancora `.page-head` da sola, impilata: questa riga non le tocca. */
.page-head__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.page-head__row h1 { margin: 0; }
/* Icona e testo affiancati, dentro un .btn--ghost normale: senza, l'icona e
   la scritta di `insieme.quick` cadrebbero una sopra l'altra (il tasto non e'
   flex di suo — vedi `.btn` qui sotto). */
.btn--icona { display: inline-flex; align-items: center; gap: 8px; }
/* Sotto ~400px il testo di `insieme.quick` accanto all'h1 andava a capo su
   due righe (visto nel browser a 375px, EW-2): l'aria-label c'e' gia' su
   questo tasto, quindi sotto la soglia si nasconde solo il testo VISIBILE e
   resta l'icona sola — un lettore di schermo continua a leggere lo stesso
   nome, e l'h1 non perde piu' la riga. */
@media (max-width: 400px) {
  .btn--icona span { display: none; }
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--tight { gap: 6px; }

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex; flex-direction: column; gap: 10px;
}
.card--accent { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.card--qr { align-items: center; background: var(--bg-elev); }

/* --------------------------------------------------------------- tabbar */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* Una colonna per scheda, tutte uguali, QUALUNQUE sia il numero. Era
     `repeat(5, 1fr)`, avanzo di quando le schede erano cinque: con quattro
     lasciava un quinto della barra vuoto a destra, e la web app pubblicata ha
     tre schede (senza Badge, composizione.js), che finivano schiacciate a
     sinistra sotto un vuoto di due colonne. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 6px 4px calc(6px + var(--safe-bottom));
  /* Fondo pieno, non velato. Con un color-mix trasparente piu' il vetro, il
     contrasto della scheda attiva dipendeva da cosa le scorreva sotto: nel caso
     peggiore la ruggine scendeva a 4.24, cioe' sotto il minimo, e a schermo non
     sembrava rotto — sembrava solo un po' faticoso. Con un fondo opaco il
     numero e' fisso: 5.05 sul tema scuro, 4.92 sul chiaro. Il backdrop-filter
     se n'e' andato insieme alla trasparenza, perche' dietro a un fondo pieno
     non c'e' piu' niente da sfocare. */
  background: var(--ghisa);
  border-top: 1px solid var(--line);
}
.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; text-decoration: none; color: var(--muted);
  font-size: 0.7rem; letter-spacing: 0.01em;
}
.tab.is-active { color: var(--accent); }
/* le icone della barra sono disegnate, non emoji: stesso tratto delle icone
   degli esercizi, e seguono il tema invece di portarsi dietro colori propri */
.nav-icon { display: block; flex: 0 0 auto; }
.tab__dot {
  position: absolute; top: 4px; right: calc(50% - 16px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* -------------------------------------------------------------- comandi */

.btn {
  appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2);
  color: var(--text); font: inherit; font-weight: 560;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
  /* R026: l'unico <a class="btn"> dell'app (Impostazioni, «Scarica il
     comando») restava sottolineato — l'unico tasto della web app con una
     riga sotto il testo, perche' un <a> porta la sottolineatura di default
     e nessuna regola qui la toglieva. */
  text-decoration: none;
}
.btn:active { transform: scale(0.975); }
/* Un tasto spento e' un ALTRO tasto, non lo stesso tasto piu' pallido.
   L'opacita' sbiadiva testo e fondo insieme verso quello che c'e' sotto, quindi
   il rapporto scendeva sempre: 4.36 sul tema scuro e 2.79 sul chiaro per il
   tasto normale, 2.90 e 2.07 per il primario — il punto piu' basso di tutta la
   web app. Qui lo stato spento e' DIPINTO, cosi' il contrasto e' quello dei
   token e non dipende dal fondo. La regola vale anche per .btn--primary e
   .btn--on senza scrivere una riga in piu': classe piu' pseudo-classe pesa piu'
   di una classe sola, quindi il primario disattivato smette di essere ruggine
   invece di essere ruggine sbiadita. */
.btn:disabled {
  color: var(--fumo);
  background: var(--ghisa-2);
  border-color: var(--linea);
  cursor: not-allowed;
}
.btn--block { width: 100%; display: block; text-align: center; }
.btn--primary { background: var(--ruggine-piena); border-color: var(--ruggine-piena); color: #fff; }
.btn--ghost { background: transparent; }
.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.btn--tiny { padding: 7px 12px; font-size: 0.86rem; border-radius: 10px; }
/* Un tasto che porta con se' uno stato acceso — «Filtri · 2». Prende gli stessi
   colori del gettone attivo: e' la stessa idea, «questo sta filtrando». */
.btn--on { background: var(--ruggine-piena); border-color: var(--ruggine-piena); color: #fff; }

/* Quanti esercizi restano, e da dove si cambiano i filtri. Senza sfondo: e' una
   didascalia sotto la ricerca, non un'altra riga della lista. */
.filtri { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.filtri .muted { margin: 0; }

/* La barra che compare mentre scegli gli esercizi per un piano. Sta fissa in
   fondo, sopra la barra di navigazione: il conto di quanti ne hai presi deve
   restare sotto gli occhi mentre scorri duecento righe, non in cima da dove
   sei partito. */
.sceglio {
  position: sticky; bottom: calc(70px + var(--safe-bottom) + 8px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--bg-elev-2) 92%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.sceglio__tasti { display: flex; gap: 8px; }
.sceglio .muted { margin: 0; }

.icon-btn {
  appearance: none; background: none; border: 0; color: var(--muted);
  font-size: 1.25rem; padding: 6px 8px; cursor: pointer; border-radius: 8px;
}
.icon-btn:active { background: var(--bg-elev-2); }

.input {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.input--num {
  width: 82px; text-align: center; padding: 8px 6px;
  font-variant-numeric: tabular-nums; font-weight: 650;
  font-stretch: var(--condensata); font-size: 1.6rem;
}

.field { display: flex; flex-direction: column; gap: 5px; }
.field__label {
  font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase; color: var(--fumo);
}
.field__hint { font-size: 0.86rem; color: var(--muted); line-height: 1.4; }

/* La piega di `dettaglio()` in ui.js: un titolo cliccabile e sotto il resto.
   Il cappello e' l'unica cosa che si vede da chiuso, quindi deve sembrare
   toccabile senza sembrare un tasto: un tasto prometterebbe che succede
   qualcosa, e qui non succede niente — si apre e basta. La zona toccabile e'
   alta 44px come tutto il resto (vedi .btn), perche' un `<summary>` di una riga
   sola e' il bersaglio piu' piccolo di una schermata piena di dita sporche. */
.piega { border-top: 1px solid var(--line); margin-top: 4px; }
.piega__cap {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; cursor: pointer;
  font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta);
  text-transform: uppercase; color: var(--fumo);
}
.piega__cap:hover { color: var(--text); }
.piega__in { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }

.switch { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; }
.switch input { width: 20px; height: 20px; accent-color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips--scroll::-webkit-scrollbar { display: none; }
/* R063: la sfumatura compare SOLO quando c'e' davvero altro da scorrere
   (classe `is-scrollable`, aggiunta da `markScrollable` in ui.js — lotto
   W2-E), non sempre: altrimenti l'ultimo gettone visibile risulterebbe
   sbiadito anche quando e' l'ultimo di tutti. Innocua senza la classe. */
.chips--scroll.is-scrollable {
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}
.chip {
  appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2);
  color: var(--text); font: inherit; font-size: 0.86rem;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap; cursor: pointer;
}
.chip--active { background: var(--ruggine-piena); border-color: var(--ruggine-piena); color: #fff; }

.pill {
  font-size: 0.7rem; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elev-2); color: var(--muted); white-space: nowrap;
}
.pill--live { background: var(--ruggine-piena); color: #fff; align-self: flex-start; }

.row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; background: var(--bg-elev-2); border-radius: 12px;
  border: 0; color: inherit; font: inherit; text-align: left; width: 100%;
  /* la riga si usa anche come <a>: senza questo il link sottolinea tutto */
  text-decoration: none;
}
.row--tap { cursor: pointer; }
.row__main {
  flex: 1; min-width: 0; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer;
}
.row--tap:active { background: var(--line); }

/* --------------------------------------------------------------- numeri */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; gap: 1px; padding: 10px; background: var(--bg-elev-2); border-radius: 12px; }
.stat strong {
  font: var(--t-numero); font-stretch: var(--condensata);
  letter-spacing: var(--tracking-titolo);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  /* qui l'etichetta sta in una cella da un terzo di schermo: alla spaziatura
     piena "RIPETIZIONI" sfonda la cella. Scende di corpo e di tracking, e
     `anywhere` e' la rete se un giorno arriva una parola ancora piu' lunga. */
  font: 600 0.7rem/1.25 var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fumo); overflow-wrap: anywhere;
}
.stat__sub { font-size: 0.86rem; color: var(--muted); }
.summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.chart-wrap { display: flex; flex-direction: column; gap: 4px; }
.chart { width: 100%; display: block; }
.chart__labels {
  display: flex; justify-content: space-between; color: var(--fumo);
  font: 500 0.7rem/1.2 var(--mono); letter-spacing: 0.04em;
}

.meter { height: 6px; background: var(--bg-elev-2); border-radius: 999px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter i.is-over { background: var(--danger); }

/* ------------------------------------------------------------ abitudini */

.habits { display: flex; flex-wrap: wrap; gap: 6px; }
.habit {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  color: var(--text); font: inherit; font-size: 0.86rem;
}
.habit.is-done { background: color-mix(in srgb, var(--good) 20%, transparent); border-color: var(--good); }
.habit__icon { display: grid; place-items: center; }

.quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quicklink {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border-radius: 12px; cursor: pointer;
  background: var(--bg-elev-2); border: 0; color: var(--text); font: inherit; font-size: 0.7rem;
}
.quicklink__icon { display: grid; place-items: center; }

/* ------------------------------------------------------------------ icone */

.ex-icon { flex: 0 0 auto; display: block; color: var(--fumo); }
/* il corpo e' grigio, il peso e' ruggine: l'occhio va prima a quello che si
   muove, che e' anche quello che ti dice qual e' l'esercizio */
.ex-icon__corpo { opacity: 0.85; }
.ex-icon__move { stroke: var(--ruggine); }
/* nelle pose si muove tutta la figura, quindi il colore lo porta l'intera
   icona: separare corpo e peso qui non avrebbe senso */
.ex-icon__posa { stroke: var(--ruggine); }

/* --- il movimento delle icone ---------------------------------------------
   La freccia non c'e' piu': il peso si muove davvero. Solo sulle icone grandi
   (--anima), perche' in una lista da 62 righe sessantadue animazioni sono
   rumore e batteria. Da fermo il disegno resta leggibile, quindi chi ha chiesto
   meno movimento non perde niente. */
.ex-icon__move { transform-box: view-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  .ex-icon--anima .ex-icon__move { animation: 2.4s var(--ease) infinite; }

  .ex-icon--anima [data-moto="sale"]            { animation-name: ex-sale; }
  .ex-icon--anima [data-moto="sale-poco"]       { animation-name: ex-sale-poco; }
  .ex-icon--anima [data-moto="scende"]          { animation-name: ex-scende; }
  .ex-icon--anima [data-moto="spinge"]          { animation-name: ex-spinge; }
  .ex-icon--anima [data-moto="tira"]            { animation-name: ex-tira; }
  .ex-icon--anima [data-moto="apre-sx"]         { animation-name: ex-apre-sx; }
  .ex-icon--anima [data-moto="apre-dx"]         { animation-name: ex-apre-dx; }
  .ex-icon--anima [data-moto="alza-sx"]         { animation-name: ex-alza-sx; }
  .ex-icon--anima [data-moto="alza-dx"]         { animation-name: ex-alza-dx; }
  .ex-icon--anima [data-moto="arco"]            { animation-name: ex-arco; }
  .ex-icon--anima [data-moto="arco-su"]         { animation-name: ex-arco-su; }
  .ex-icon--anima [data-moto="oscilla"]         { animation-name: ex-oscilla; }
  .ex-icon--anima [data-moto="oscilla-x"]       { animation-name: ex-oscilla-x; }
  .ex-icon--anima [data-moto="gira"]            { animation-name: ex-gira; }
  .ex-icon--anima [data-moto="ruota"]           { animation-name: ex-ruota; animation-timing-function: linear; }
  .ex-icon--anima [data-moto="passo"]           { animation-name: ex-passo; }
  .ex-icon--anima [data-moto="scende-obliquo"]  { animation-name: ex-scende-obliquo; }
  .ex-icon--anima [data-moto="spinge-obliquo"]  { animation-name: ex-spinge-obliquo; }
  .ex-icon--anima [data-moto="spinge-ruota"]    { animation-name: ex-spinge-ruota; }
  .ex-icon--anima [data-moto="fermo"]           { animation-name: none; }
}

@keyframes ex-sale          { 0%, 100% { transform: none } 50% { transform: translateY(-3.4px) } }
@keyframes ex-sale-poco     { 0%, 100% { transform: none } 50% { transform: translateY(-1.6px) } }
@keyframes ex-scende        { 0%, 100% { transform: none } 50% { transform: translateY(3.4px) } }
@keyframes ex-spinge        { 0%, 100% { transform: none } 50% { transform: translateX(3.4px) } }
@keyframes ex-tira          { 0%, 100% { transform: none } 50% { transform: translateX(-3.4px) } }
@keyframes ex-apre-sx       { 0%, 100% { transform: none } 50% { transform: translateX(-2.6px) } }
@keyframes ex-apre-dx       { 0%, 100% { transform: none } 50% { transform: translateX(2.6px) } }
@keyframes ex-alza-sx       { 0%, 100% { transform: none } 50% { transform: translate(-1.6px, -4px) } }
@keyframes ex-alza-dx       { 0%, 100% { transform: none } 50% { transform: translate(1.6px, -4px) } }
@keyframes ex-arco          { 0%, 100% { transform: none } 50% { transform: rotate(-52deg) } }
@keyframes ex-arco-su       { 0%, 100% { transform: none } 50% { transform: rotate(-68deg) } }
@keyframes ex-oscilla       { 0%, 100% { transform: none } 50% { transform: rotate(-26deg) } }
@keyframes ex-oscilla-x     { 0%, 100% { transform: translateX(-3px) } 50% { transform: translateX(3px) } }
@keyframes ex-gira          { 0%, 100% { transform: none } 50% { transform: translateY(-3.2px) rotate(28deg) } }
@keyframes ex-ruota         { to { transform: rotate(360deg) } }
@keyframes ex-passo         { 0%, 100% { transform: translateX(-1.4px) } 50% { transform: translateX(1.4px) } }
@keyframes ex-scende-obliquo{ 0%, 100% { transform: none } 50% { transform: translate(-2.6px, 3px) } }
@keyframes ex-spinge-obliquo{ 0%, 100% { transform: none } 50% { transform: translate(2.6px, -2.6px) } }
@keyframes ex-spinge-ruota  { 0%, 100% { transform: none } 50% { transform: translateX(3px) } }

.ex-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ex-row__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ex-row__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.entry__head .ex-icon { color: var(--accent); }

/* -------------------------------------------------------------- allenamento */

.session-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 4px 2px;
}
.entry__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

.sets { display: flex; flex-direction: column; gap: 6px; }
.set {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 4px;
  padding: 6px; border-radius: 12px; background: var(--bg-elev-2);
}
.set.is-done { background: color-mix(in srgb, var(--ruggine) 10%, var(--ghisa-3)); }
.set__done {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--muted); font: inherit; font-weight: 600; cursor: pointer;
}
.set__done.is-done { background: var(--ruggine-piena); border-color: var(--ruggine-piena); color: #fff; }
/* Saltata: c'e' ancora, ma sbarrata. Tre stati e non due — «non l'ho ancora
   fatta» e «non la faro'» sono cose diverse, e a rileggere l'allenamento fra
   un mese la differenza e' l'unica cosa che conta.

   Sbarrata, pero', non sbiadita. L'opacita' spegneva riga e fondo insieme verso
   la scheda sotto, e portava il testo secondario a 2.93 sul tema scuro e 2.44
   sul chiaro. Non era il valore a essere scelto male: sotto un'opacita' il
   rapporto scende SEMPRE, e per restare sopra 4.5 servirebbe 0.93, cioe'
   un'opacita' che non si vede. Il «non la faro'» lo dice la riga tirata sopra,
   che si legge senza togliere luce: cosi' il testo resta a 5.35 e 5.33. */
.set.is-skipped { text-decoration: line-through; color: var(--fumo); }
.set__done.is-skipped { text-decoration: line-through; }
.set__x { color: var(--muted); font-size: 0.86rem; }
.pr-badge {
  flex: 0 0 auto; margin-left: 46px;      /* allineato sotto i campi, mai tagliato */
  font-size: 0.7rem; padding: 3px 8px; border-radius: 999px;
  /* Il testo del gettone e' il fondo del tema, non un marrone scritto a mano.
     #1a1206 era fisso mentre l'ottone si muove: appena l'ottone scende di
     luminosita' sul tema chiaro, quel nero sopra ci finisce a 2.97. Con --ghisa
     il gettone e la sua scritta si muovono insieme e restano sopra il minimo in
     tutti e due i temi. */
  background: var(--ottone); color: var(--ghisa); white-space: nowrap;
  font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta); text-transform: uppercase;
}

.rest {
  position: sticky; top: calc(var(--safe-top) + 44px); z-index: 15;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  /* IL VELO SOPRA IL FONDO PIENO, non da solo. `--riposo-velo` e' un colore al
     16%: su una scheda ferma va bene, ma questo elemento e' `sticky` e le
     schede degli esercizi gli scorrono SOTTO — e attraverso un velo si
     vedono. Il tester finale del 15/09 ha fotografato «2:11» e «Panca piana»
     scritti uno sull'altro, due volte su due, in scuro e in chiaro. Il velo
     resta (e' la tinta del recupero), ma posato sul fondo della pagina: tinge,
     non trasparisce. */
  background: linear-gradient(var(--riposo-velo), var(--riposo-velo)), var(--bg);
  border: 1px solid var(--riposo);
}
/* l'unica cosa in tutta l'app alla scala display: si guarda da lontano,
   respirando, e non deve chiedere di mettere a fuoco */
.rest__time {
  font: var(--t-numero); font-stretch: var(--condensata);
  letter-spacing: var(--tracking-titolo);
  font-variant-numeric: tabular-nums; min-width: 64px;
}
.rest__bar { flex: 1; height: 5px; background: color-mix(in srgb, var(--riposo) 24%, transparent); border-radius: 999px; overflow: hidden; }
.rest__bar i { display: block; height: 100%; background: var(--riposo); transition: width .25s linear; }

.block { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--bg-elev-2); border-radius: 12px; }
.block__inputs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.86rem; color: var(--muted); }

.plates { display: flex; flex-wrap: wrap; gap: 6px; }
.plate {
  display: grid; place-items: center; min-width: 46px; padding: 10px 8px;
  background: var(--ruggine-piena); color: #fff; border-radius: 10px; font-weight: 700;
}

/* ------------------------------------------------------------------ video */

.videos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.videos::-webkit-scrollbar { display: none; }
.videos--grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; }
.video {
  flex: 0 0 148px; display: flex; flex-direction: column; gap: 5px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left;
}
.video__thumb { position: relative; display: block; }
.video__at {
  position: absolute; right: 4px; bottom: 4px;
  padding: 1px 5px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.78); color: #fff;
  font-size: 0.7rem; font-variant-numeric: tabular-nums;
}

.video img, .video__ph {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px; background: var(--bg-elev-2);
  display: grid; place-items: center; color: var(--muted);
}
.video--pinned img { outline: 2px solid var(--accent); outline-offset: -2px; }
.video__variant { font-size: 0.86rem; color: var(--ruggine); }
/* il credito al canale: i video non vengono piu' da un autore solo.
   Senza opacita'. E' gia' testo secondario, e per giunta a 11.2px: sbiadirlo
   ancora lo portava a 3.74 sul tema scuro e 3.56 sul chiaro, sotto il minimo.
   A piena opacita' il grigio del token si legge da solo — 5.99 e 6.89. */
.video__author {
  font-size: 0.7rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video__title {
  font-size: 0.86rem; line-height: 1.3; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* MINIMO 200 DI ALTEZZA (verificatore Opus, 29/09). YouTube chiede che il lettore
   incorporato abbia almeno 200x200 di viewport. Nel foglio, con `--pad` per lato,
   su un telefono largo 375 la larghezza e' ~341 e il 16:9 da' ~192 di altezza:
   sotto. `min-height` vince sull'aspect-ratio e tiene il lettore a 200. Vale
   quanto `Lettore.altezzaMinima` su iOS (la guardia le legge tutte e due). */
.video__frame { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; border: 0; border-radius: 12px; background: #000; }
.video-link { color: var(--accent); font-size: 0.86rem; text-decoration: none; }

/* Il consenso ai video (lotto VL). I due tasti stanno in due colonne UGUALI:
   «Mostra i video» e «Non ora» pesano lo stesso, dire di no non costa un tasto
   piu' piccolo. */
.consenso-video { display: flex; flex-direction: column; gap: 8px; }
.consenso-video h4 { margin: 0; }
.consenso-video p { margin: 0; }
.consenso-video .fineprint { padding: 0; }
.consenso-video__tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Il testo integrale di una licenza (schermata Licenze): mono, a capo, e scorre
   dentro il proprio riquadro invece di allungare la pagina di quattro schermate. */
.licenza-testo {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.5;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-piccolo); padding: 12px; margin: 0;
  white-space: pre-wrap; max-height: 50vh; overflow: auto;
}

/* -------------------------------------------------------------------- QR */

.qr { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.qr__frame {
  background: #fff; padding: 14px; border-radius: 18px;
  width: min(78vw, 320px); aspect-ratio: 1;
  display: grid; place-items: center;
}
.qr__canvas { width: 100%; height: auto; image-rendering: pixelated; display: block; }
/* Lo stesso QR, una misura sotto: la carta del profilo in Insieme (`ioSono()`,
   `views/insieme.js`), non un foglio a schermo intero. E' un `<button>`, non
   un `<div>`: tocca farlo inquadrare O premerlo, ed e' lo stesso gesto del
   tasto «Il mio QR» sotto — deve avere la stessa semantica di quel tasto,
   raggiungibile da tastiera compresa. */
.qr__frame--small {
  width: 130px; padding: 8px; border-radius: 14px;
  border: 0; cursor: pointer; margin: 4px 0;
}
.qr__meta { display: flex; align-items: center; gap: 10px; }
.qr__countdown {
  font-variant-numeric: tabular-nums; font-size: 0.86rem;
  padding: 3px 9px; border-radius: 999px; background: var(--bg-elev-2); color: var(--muted);
}
.qr__status { text-align: center; }
body[data-route="badge"] { --bg: #000; }
/* ------------------------------------------------------------- Tessera
   La «Tessera» generica (lotto TG). Il codice sta su un riquadro BIANCO pieno,
   come il QR: un lettore misura il contrasto e il tema scuro non lo tocca. La
   larghezza e' quella del QR per non far saltare il foglio fra un codice e
   l'altro; la foto tenuta al posto di un codice non ridisegnabile sta nello
   stesso riquadro. Niente stile in linea: la CSP dell'app lo blocca. */
.tessera__cornice {
  background: #fff; padding: 14px; border-radius: 18px;
  width: min(92vw, 420px); margin: 0 auto;
  display: grid; place-items: center;
}
.tessera__cornice .qr__canvas { width: 100%; height: auto; }
.tessera__foto { width: 100%; height: auto; display: block; border-radius: 8px; }
.tessera__testo {
  font-family: var(--mono); text-align: center; overflow-wrap: anywhere;
  margin: 10px 0 0; font-size: 0.95rem;
}
/* Il QR nel foglio: `.qr__frame` e' pensato per stare dentro `.qr` (una colonna
   centrata, come nel badge); dentro un foglio da solo restava incollato a sinistra
   (visto a 375px il 29/09). */
.tessera__qr { margin: 0 auto; }
.tessera__file { display: none; }
/* Il video della fotocamera nel foglio «Aggiungi con la fotocamera»
   (LOTTO-BA): stessa misura del QR che disegna, per non far saltare la
   larghezza del foglio quando il codice viene letto e il video sparisce. */
.qr-scan__video {
  width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover;
  border-radius: 18px; background: #000; display: block; margin: 0 auto;
}
/* `display: block` qui sopra batte l'attributo `hidden`: senza questa riga il
   video di una fotocamera negata (o assente) restava un quadrato nero di 320 px
   sopra la frase che dice cosa fare (lotto TG). */
.qr-scan__video[hidden] { display: none; }

/* ---------------------------------------------------------------- schede */

.backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 1; animation: sheet-fade .2s ease;
}
.backdrop.is-closing { opacity: 0; transition: opacity .2s ease; }
.sheet {
  width: 100%; max-width: 640px; max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-elev); border-radius: 20px 20px 0 0;
  border: 1px solid var(--line); border-bottom: 0;
  animation: sheet-rise .22s ease;
}
.backdrop.is-closing .sheet { transform: translateY(16px); transition: transform .2s ease; }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-rise { from { transform: translateY(20px); } to { transform: translateY(0); } }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad) 8px; border-bottom: 1px solid var(--line);
}
.sheet__head h2 { margin: 0; }
/* un foglio fatto solo di tasti (le opzioni dell'esercizio) ha il corpo vuoto: senza questo restava
   una fascia vuota di 32 px fra il titolo e i tasti */
.sheet__body:empty { display: none; }
.sheet__body {
  padding: var(--pad); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  -webkit-overflow-scrolling: touch;
}
.sheet__foot {
  display: flex; gap: 8px; padding: 12px var(--pad) calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--line);
}
.sheet__foot .btn { flex: 1; }

.picker { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.picker__row {
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--bg-elev-2); color: inherit; font: inherit; cursor: pointer;
}
.picker__row--icon { flex-direction: row; align-items: center; gap: 10px; }

.steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.steps li { margin-bottom: 6px; }
.daynav { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 12px; text-align: center; }
.empty__icon { color: var(--fumo); opacity: 0.75; display: grid; place-items: center; }
.empty__title { font-weight: 600; margin: 0; }

/* -------------------------------------------------------------- messaggi */

.toast {
  position: fixed; left: 50%; bottom: calc(88px + var(--safe-bottom));
  transform: translate(-50%, 12px); z-index: 60;
  max-width: min(92vw, 460px);
  padding: 11px 16px; border-radius: 12px;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  color: var(--text); font-size: 0.86rem; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { border-color: var(--danger); }
.toast--success { border-color: var(--good); }

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

/* ---------------------------------------------------------------- insieme */

/* Il codice di sicurezza e le impronte. Sessanta cifre si leggono ad alta voce
   in coppia, quindi vanno spaziate a gruppi e in mono: in proporzionale il 1 e
   il 7 si somigliano abbastanza da far dire «coincide» a chi vuole finire. */
.codice-lungo {
  font: var(--t-numero); font-family: var(--mono);
  letter-spacing: 0.06em; line-height: 1.7;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-piccolo); padding: 12px 14px; margin: 0;
  white-space: pre-wrap; word-break: break-all; user-select: all;
}

.nome-utente {
  font: var(--t-sezione); font-family: var(--mono);
  letter-spacing: var(--tracking-etichetta); margin: 0;
}

/* Un avviso non e' un errore: e' una cosa da leggere prima di decidere. Colore
   dell'ottone, non del rosso, perche' il rosso qui vorrebbe dire «non si puo'
   fare» e invece si puo' — e' solo che va guardato. */
.avviso {
  color: var(--ottone); background: var(--ottone-velo);
  border-left: 2px solid var(--ottone);
  border-radius: 0 var(--r-piccolo) var(--r-piccolo) 0;
  padding: 8px 10px; margin: 0; font-size: 0.86rem; line-height: 1.5;
}

.lista-segni { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-segni li { display: grid; grid-template-columns: 1.4em 1fr; gap: 8px; align-items: start;
                  font-size: 0.86rem; line-height: 1.5; }
.lista-segni .segno { font-family: var(--mono); font-weight: 700; text-align: center; }
.lista-segni .si .segno { color: var(--riposo); }
.lista-segni .no .segno { color: var(--ottone); }
.lista-segni .no { color: var(--muted); }

.riga-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.riga-azioni .btn { flex: 1 1 auto; }

/* Una scheda dentro una scheda: si distingue dal fondo, non da un'altra
   cornice, se no si finisce con tre bordi concentrici. */
.card--nested {
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-piccolo); padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.card--nested h3 { font: var(--t-titolo); text-transform: none; color: var(--text); margin: 0; }

.btn--small { font-size: 0.86rem; padding: 6px 12px; min-height: 0; }

/* ------------------------------------------------------------- dal vivo */

.vivo__capo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vivo__capo h2 { margin: 0; }

/* Un pallino che dice «c'e'» senza scriverlo. Chi non c'e' non sparisce
   dall'elenco: resta, spento — se no non si capisce se e' uscito o se non
   c'e' mai stato. */
.vivo__punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--riposo); flex: 0 0 auto;
}
/* .72 e non .5: il pallino non e' testo, quindi il minimo e' 3:1 (WCAG 1.4.11)
   e non 4.5 — ma a meta' opacita' stava a 2.40 sulla riga in cui vive, spento
   fino a non vedersi, e «non c'e'» diventava indistinguibile da «non esiste».
   Il valore e' tarato sul caso peggiore, che e' il tema CHIARO: li' il grigio
   sbiadisce verso una carta luminosa, e sotto .72 non ci arriva (a .66 fa 2.74).
   A .72 stanno tutti e due i temi: 3.48 sullo scuro, 3.07 sul chiaro. */
.vivo__punto--via { background: var(--fumo); opacity: .72; }

/* L'avviso che non si puo' leggere di sfuggita: e' quello che dice che stai
   dando via una chiave che non potrai piu' cambiare. */
.avviso--forte {
  color: var(--magnesite); background: var(--ruggine-velo);
  border-left-width: 3px; border-left-color: var(--ruggine);
  font-size: 0.95rem; font-weight: 600;
}

.row--tap.is-active { background: var(--ruggine-velo); border-color: var(--ruggine); }

/* Una chiave pubblica accorciata: in mono, se no due chiavi diverse si
   somigliano abbastanza da confonderle. */
/* `anywhere` e non il default: da quando la scheda del ponte mostra l'indirizzo
   intero (non piu' tagliato a dieci cifre come la chiave qui sopra), un ponte
   scritto a mano senza trattini ne' punti - un IP nudo con la porta, per dire -
   non avrebbe nessun punto in cui il motore di layout puo' spezzare la riga: il
   testo uscirebbe dalla scheda invece di andare a capo. */
.mono { font-family: var(--mono); font-size: 0.86rem; letter-spacing: 0.02em; overflow-wrap: anywhere; }

/* ------------------------------------------------------- il corpo dei muscoli */

/* Due figure affiancate, davanti e dietro. Il contenitore non ha un'altezza
   sua: la detta il rapporto del viewBox, cosi' non c'e' un numero da tenere
   allineato in due posti. */
.corpo__scatola { margin: 12px 0 4px; }
.corpo { display: block; width: 100%; max-width: 420px; margin: 0 auto; }

/* La sagoma non e' un comando: non risponde al tocco e non prende il fuoco.
   `pointer-events: none` conta davvero — senza, un tocco appena fuori da una
   zona finirebbe sulla sagoma e non succederebbe niente, che si legge come
   «il tocco non ha funzionato». */
/* TRE COLORI QUI DENTRO NON ESISTEVANO, e il risultato era una figura che non
   si vedeva. Vale la pena scriverli tutti e tre, perche' sono lo stesso
   errore in tre forme e nessuno dei tre da' un messaggio in console:
   una variabile CSS che non esiste non e' un errore, e' il valore di ripiego.

     1. `--bg-elev-3` non e' definito da nessuna parte, quindi le zone
        prendevano il ripiego `--bg-elev-2` — cioe' ESATTAMENTE il colore della
        sagoma su cui stanno. Zone invisibili sopra un corpo invisibile.
     2. `--rust` non e' definito: il nome vero e' `--ruggine`. Il ripiego era
        `#cc6839` scritto a mano, cioe' la ruggine del tema SCURO inchiodata
        anche nel tema chiaro, dove il token vale #9e4e29.
     3. i tratti erano `--linea`, che sulla cella fa 1.34:1. Un contorno che
        non si vede non e' un contorno.

   Adesso: la sagoma e' una lastra con il suo bordo vivo, le zone sono contorni
   in `--fumo` (5.35:1 sulla cella) come in una tavola anatomica, e quella
   scelta si riempie di ruggine vera, che segue il tema. */
.corpo__sagoma { fill: var(--ghisa-3); stroke: var(--linea-viva); stroke-width: 1.2; pointer-events: none; }
.corpo__lato { fill: var(--muted); font-size: 9px; letter-spacing: .06em; pointer-events: none; }

.corpo__zona {
  fill: transparent;
  stroke: var(--fumo); stroke-width: 1;
  cursor: pointer;
  transition: fill .12s ease;
}
/* Il fuoco si vede: e' l'unico modo in cui chi naviga da tastiera sa dov'e'.
   `outline` su un elemento SVG non disegna in tutti i motori, quindi si usa il
   tratto — che disegna sempre. */
.corpo__zona:focus-visible { stroke: var(--ruggine); stroke-width: 2.2; outline: none; }
@media (hover: hover) { .corpo__zona:hover { fill: var(--ruggine-velo); } }
.corpo__zona.is-scelta { fill: var(--ruggine); stroke: var(--ruggine); }

@media (prefers-reduced-motion: reduce) { .corpo__zona { transition: none; } }

/* Il messaggio per chi ha JavaScript spento. Era uno style in linea, che la CSP dell app pubblicata blocca (tools/componi-web.mjs). */
.senza-js { padding: 2rem; }

/* ------------------------------------------------------- il cancello (lotto IW)
   La schermata «Continua con Apple / Google» della web app pubblicata
   (js/views/ingresso.js). Finche' non si e' entrati non c'e' niente da navigare:
   niente barra in basso, niente ingranaggio. */
body[data-route="ingresso"] .tabbar,
body[data-route="ingresso"] #settings-btn { display: none; }

.ingresso { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.ingresso h1 { margin: 0; letter-spacing: var(--tracking-titolo); }
.ingresso__lead { margin: 0; font-size: 1.05rem; }
.ingresso__info h2 { font-size: 1rem; margin: 0; }
.ingresso__info p { margin: 0; }
.ingresso__link { padding: 0; }
.ingresso__eta-riga { display: flex; align-items: center; gap: 10px; min-height: var(--tocco); cursor: pointer; }
.ingresso__eta { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--ruggine-piena); }
.ingresso__avviso { margin: 0; min-height: 1.4em; color: var(--allarme); font-size: 0.92rem; }
/* la frase fissa di «Sei uscito» / «Conto cancellato» (IW-T): sta nel cancello, non in un toast */
.ingresso__esito { margin: 0; font-weight: 600; }
.ingresso__locali { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ingresso__locali p { margin: 0; }
.ingresso__tasti { display: flex; flex-direction: column; gap: 10px; }
.ingresso__tasto { display: flex; flex-direction: column; gap: 4px; }
.ingresso__nota { color: var(--muted); font-size: 0.8rem; padding: 0 4px; }

/* I due tasti nelle forme dei marchi. Apple: nero su chiaro, bianco su scuro.
   Google: fondo bianco su chiaro, fondo scuro su scuro, con la G a colori. Il
   tasto spento resta riconoscibile ma si vede che non risponde. */
.btn-marchio {
  appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  border: 1px solid transparent;
}
.btn-marchio__logo { width: 20px; height: 20px; flex: 0 0 auto; display: block; }
.btn-marchio:disabled, .btn-marchio[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-marchio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-marchio--apple { background: #fff; color: #000; border-color: #fff; }
.btn-marchio--google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.btn-marchio--prova { background: transparent; color: var(--text); border: 1px dashed var(--linea-viva); font-weight: 500; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn-marchio--apple { background: #000; color: #fff; border-color: #000; }
  :root:not([data-theme="dark"]) .btn-marchio--google { background: #fff; color: #1f1f1f; border-color: #747775; }
}
:root[data-theme="light"] .btn-marchio--apple { background: #000; color: #fff; border-color: #000; }
:root[data-theme="light"] .btn-marchio--google { background: #fff; color: #1f1f1f; border-color: #747775; }

/* Impostazioni: la riga del conto */
.conto__riga { display: flex; gap: 8px; flex-wrap: wrap; }
.conto__riga .btn { flex: 1 1 140px; }
.conto__locali { display: flex; align-items: center; gap: 10px; min-height: var(--tocco); margin-top: 8px; }
.ingresso__attesa { padding: 24px 0; text-align: center; }

/* ------------------------------------------- le Condizioni d'uso (lotto TC, 30/09/2026)
   Il riassunto, le caselle e la conferma di js/views/condizioni.js. Le caselle e i tasti spenti
   sono quelli del cancello (.ingresso__eta-riga, aria-disabled): stessa regola, stesso aspetto. */
.cond__riassunto h2 { font-size: 1rem; margin: 0 0 8px; }
.cond__punti { margin: 0 0 8px; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; }
.cond__link { margin: 6px 0 0; padding: 0; }
.cond__cambia h2 { font-size: 1rem; margin: 0 0 6px; }
.cond__cambia p { margin: 0; }
.cond__nuova .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
/* --------------------------------------------------------------- annunci */

/* LO SPAZIO ANNUNCI (lotto AW, web/js/annunci.js). Sta dentro il flusso, in fondo
   agli elenchi di Programmi ed Esercizi, con l'ALTEZZA RISERVATA prima che
   l'iframe risponda (niente salto di pagina quando arriva) e l'etichetta
   «Annuncio» sempre sopra. `display: flex` vincerebbe su `hidden`, che e' come lo
   smonta la vista mentre e' aperto un foglio: la riga [hidden] serve. */
.annuncio { display: flex; flex-direction: column; gap: var(--s1); min-height: 132px; }
.annuncio[hidden] { display: none; }
.annuncio__etichetta {
  margin: 0; color: var(--muted);
  font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta); text-transform: uppercase;
}
.annuncio__corpo { min-height: 112px; }
.annuncio__cornice { display: block; width: 100%; height: 112px; border: 0; background: transparent; }

/* La stampa della conferma delle Condizioni (lotto TC): solo la conferma, senza barra, schede e tasti. */
@media print {
  .appbar, .tabbar, .cond__conferma .btn { display: none !important; }
}

/* «Sperimentale» accanto al titolo di una funzione che puo' non funzionare ovunque
   (Impostazioni › Apple Watch e Salute). Maiuscoletto in mono come le altre etichette. */
.tag-sperimentale {
  display: inline-block; vertical-align: middle; margin-left: 4px;
  font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta); text-transform: uppercase;
  color: var(--ottone); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px;
}