/* ============================================================
   BetBrain — ui.css
   I componenti del canone v4 (sessione 2a, 18/10/2026): il vestito di
   ciò che costruisce public/ui.js.

   REGOLA: qui dentro NON c'è un colore. Solo var(--token) di theme.css
   (lo prova test/site_ui_componenti.test.js: nessun esadecimale, nessun
   rgb(), nessun nome di colore, e ogni var() nomina un token che esiste).
   Unica eccezione, voluta: il blocco `forced-colors` in fondo usa i colori
   di SISTEMA (Canvas, CanvasText, GrayText), che non sono colori nostri.
   Per questo il tema scuro non costa una riga: i token cambiano, questi
   no.

   Il linguaggio (nell'altro repo, /opt/betbrain/docs/s1-redesign/fase1/LEGGIMI.md):
   · tre segni per tre esiti — PIENO (casa), TRATTEGGIATO (pari), VUOTO
     (trasferta) — leggibili anche in bianco e nero;
   · l'ottone è «la nostra stima» (--est), l'inchiostro «un fatto» (--fact);
   · gli stati vuoti sono disegnati con la stessa impronta della cosa che
     manca (niente salti di layout).
   Tutti i nomi iniziano per `ui-`: nessuna collisione con le pagine nate
   prima, che hanno `.chip`, `.state`, `.card`... loro.
   ============================================================ */

/* ---------- 1. I tre segni ---------- */
.ui-sign {
  --sz: var(--sign-m);
  --bw: 2px;
  --hatch: 1.6px;
  --hatch-gap: 2.8px;
  --c: var(--est);
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--sz);
  height: var(--sz);
  border: var(--bw) solid var(--c);
  border-radius: 50%;
  vertical-align: middle;
  /* in modalità contrasto forzato i fondi sparirebbero e i tre segni diventerebbero uno */
  forced-color-adjust: none;
}
.ui-sign--fact { --c: var(--fact); }
.ui-sign--m { --sz: var(--sign-m); }
.ui-sign--s { --sz: var(--sign-s); --bw: 1.5px; --hatch: 1.2px; --hatch-gap: 2.2px; }
.ui-sign--l { --sz: var(--sign-l); }
.ui-sign--full { background: var(--c); }
.ui-sign--hatch {
  background: repeating-linear-gradient(135deg, var(--c) 0 var(--hatch), transparent var(--hatch) calc(var(--hatch) + var(--hatch-gap)));
}
.ui-sign--empty { background: transparent; }
/* «non ancora»: lo stesso cerchio, tratteggiato e spento */
.ui-sign--pending { border-style: dashed; border-color: var(--pending-line); background: transparent; }
/* caricamento: lo stesso cerchio, pieno e quieto */
.ui-sign--skel { border-color: transparent; background: var(--skel-a); animation: ui-pulse 1.4s ease-in-out infinite; }

/* ---------- 2. Il campo dei 100 punti ---------- */
.ui-field { margin: 0; }
.ui-field__grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  justify-items: center;
  row-gap: var(--sp-2);
  max-width: 26rem;
}
/* il punto non supera la sua cella: a 280 px di colonna si stringe, a 1280 non si gonfia */
.ui-field__grid .ui-sign { width: min(var(--sz), 100%); height: auto; aspect-ratio: 1; }
.ui-field__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: .875rem;
  color: var(--ink);
}
.ui-field__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ui-field__item b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- 3. Il codice a barre: il campo in una riga ---------- */
.ui-barcode { display: block; width: 100%; height: var(--bc-h, 1.75rem); overflow: visible; }
.ui-barcode path { fill: none; stroke: var(--est); }
.ui-barcode__full, .ui-barcode__hatch, .ui-barcode__empty { stroke-width: .62; }
.ui-barcode__hatch { stroke-dasharray: 1.1 .9; }
.ui-barcode__empty { opacity: .8; }   /* .45 faceva 1,8:1 sulla carta: il dato «vince la trasferta» e' un segno, non decorazione (>= 3:1) */
.ui-barcode .ui-barcode__p { stroke: var(--pending-line); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* ---------- 4. La forma recente ---------- */
.ui-form { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- 5. Le barre (valori) ---------- */
.ui-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.ui-bars__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: .375rem; align-items: baseline; }
.ui-bars__label { font-weight: 500; color: var(--ink); }
.ui-bars__value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.ui-bars--est .ui-bars__value { color: var(--est-text); }
.ui-bars--fact .ui-bars__value { color: var(--ink); }
.ui-bars__track { grid-column: 1 / -1; display: block; height: .375rem; border-radius: var(--r-pill); background: var(--rule); overflow: hidden; }
.ui-bars__track i { display: block; height: 100%; border-radius: inherit; }
.ui-bars--est .ui-bars__track i { background: var(--est); }
.ui-bars--fact .ui-bars__track i { background: var(--fact); }
.ui-bars__row--na .ui-bars__value { font-family: var(--sans); font-weight: 400; color: var(--muted); }

/* ---------- 6. Il confronto casa / trasferta ---------- */
.ui-cmp { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.ui-cmp__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 1fr) 3.25rem;   /* valori a larghezza fissa: le barre si incontrano sempre al centro */
  column-gap: .25rem;
  row-gap: .25rem;
  align-items: center;
}
.ui-cmp__label { grid-column: 1 / -1; text-align: center; font-size: var(--t-small); color: var(--ink-2); }
.ui-cmp__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: .9375rem; color: var(--ink); }
.ui-cmp__v--h { text-align: left; }
.ui-cmp__v--a { text-align: right; }
.ui-cmp__track { display: flex; height: .5rem; background: var(--rule); }
.ui-cmp__track i { display: block; height: 100%; }
.ui-cmp__track--h { justify-content: flex-end; border-radius: var(--r-pill) 0 0 var(--r-pill); }
.ui-cmp__track--h i { background: var(--fact); border-radius: inherit; }
.ui-cmp__track--a { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.ui-cmp__track--a i { box-sizing: border-box; border: 1.5px solid var(--fact); background: transparent; border-radius: inherit; }
.ui-cmp__note { grid-column: 1 / -1; font-size: var(--t-small); color: var(--muted); }

/* ---------- 7. Le strisce: il numero dentro il suo campionato ---------- */
.ui-strip + .ui-strip { margin-top: var(--sp-5); }
.ui-strip__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 var(--sp-3); }
.ui-strip__label { font-weight: 600; color: var(--ink); }
.ui-strip__value { margin-left: auto; font-size: var(--t-small); color: var(--ink-2); text-align: right; }
.ui-strip__value b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.ui-strip[data-na] .ui-strip__value { color: var(--muted); }
.ui-strip__track { position: relative; height: 2rem; margin-top: .125rem; }
.ui-strip__plot { position: absolute; inset: 0 .625rem; }          /* il margine tiene il punto dentro il box */
.ui-strip__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--rule-2); }
.ui-strip__band { position: absolute; top: 50%; height: .875rem; transform: translateY(-50%); background: var(--rule); border-radius: 2px; }
.ui-strip__median { position: absolute; top: 50%; width: 2px; height: 1.25rem; transform: translate(-50%, -50%); background: var(--ink-2); }
.ui-strip__dot { position: absolute; top: 50%; width: 1rem; height: 1rem; box-sizing: border-box; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--fact); }
.ui-strip__dot--a { background: var(--fact); box-shadow: 0 0 0 2px var(--paper); }
.ui-strip__dot--b { background: var(--paper); box-shadow: 0 0 0 2px var(--paper); }
.ui-strip__track--na { border-top: 1px dashed var(--pending-line); margin-top: 1rem; height: 0; }
.ui-strip__note { margin: .25rem 0 0; font-size: var(--t-small); color: var(--muted); }

/* la legenda, una volta sopra il gruppo: chi e' il punto pieno, chi l'anello, cos'e' la fascia */
.ui-strip-key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--t-small); color: var(--ink-2); }
.ui-strip-key__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ui-strip__sw { display: inline-block; flex: none; box-sizing: border-box; }
.ui-strip__sw--a, .ui-strip__sw--b { width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--fact); }
.ui-strip__sw--a { background: var(--fact); }
.ui-strip__sw--b { background: var(--paper); }
.ui-strip__sw--band { width: 1.125rem; height: .625rem; border-radius: 2px; background: var(--rule); }
.ui-strip__sw--median { width: 2px; height: .875rem; background: var(--ink-2); }

/* ---------- 8. Le icone ---------- */
.ui-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }

/* ---------- 9. Stati: vuoto, «non ancora», errore ---------- */
.ui-state { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-5) 0; }
.ui-state__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--rule-2);
  border-radius: 50%;
  color: var(--ink-2);
}
.ui-state[data-kind="pending"] .ui-state__icon { border-style: dashed; border-color: var(--pending-line); }
.ui-state__body { min-width: 0; }
.ui-state__title { margin: 0 0 var(--sp-2); font-family: var(--serif); font-size: var(--t-h3); font-weight: 500; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.ui-state__text { margin: 0; max-width: 46ch; font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }
.ui-state__actions { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.ui-state--center { flex-direction: column; align-items: center; text-align: center; }
/* l'errore NON è rosso: il rosso è l'esito perso. Si distingue per l'icona e per «Riprova». */
.ui-state[data-kind="error"] .ui-state__icon { border-color: var(--ink-2); }

/* ---------- 10. Caricamento ---------- */
.ui-skel { display: grid; gap: var(--sp-3); }
.ui-skel__line { display: block; height: .875rem; border-radius: 6px; background: var(--skel-a); animation: ui-pulse 1.4s ease-in-out infinite; }
.ui-skel__line--short { width: 55%; }
.ui-skel__line--track { height: 2rem; }
.ui-skel__strip { display: grid; gap: .375rem; }
@keyframes ui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .ui-sign--skel, .ui-skel__line { animation: none; }
}

/* ---------- 11. Bottone e bollino ---------- */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: .5rem 1.25rem;               /* a due righe («Sblocca analisi completa · account gratuito» a 360 px) il testo non tocca il bordo */
  border: 1.5px solid var(--surface-ink);
  border-radius: var(--r-pill);
  background: var(--surface-ink);
  background-image: none;               /* gli <a> portano la sottolineatura animata del tema */
  color: var(--on-ink);
  font: 600 .9375rem/1.25 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ui-btn:hover { color: var(--on-ink); background-image: none; }
.ui-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.ui-btn--ghost:hover { color: var(--ink); background: var(--surface-2); }
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2rem;
  padding: 0 var(--sp-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
}
/* il tratteggio dice «attenzione, poco dato» (campione piccolo, stima provvisoria) */
.ui-chip--dashed { border-style: dashed; border-color: var(--ink-2); color: var(--ink-2); }

/* ---------- 12. Scheda e tipografia di lettura ---------- */
.ui-card { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 1.125rem 1rem; }
.ui-h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 1.7rem + 2.2vw, 3.25rem); line-height: 1.02; letter-spacing: -.018em; text-wrap: balance; }
.ui-h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); line-height: 1.1; letter-spacing: -.012em; text-wrap: balance; }
.ui-h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.3125rem; line-height: 1.15; letter-spacing: -.008em; }
.ui-lead { margin: var(--sp-3) 0 0; max-width: 36ch; font-size: 1rem; color: var(--ink-2); }
.ui-label { font-size: var(--t-small); color: var(--muted); }

/* ---------- 13. Il campo di gioco: le formazioni (2b) ----------
   Un disco per giocatore: ottone se la formazione e' PROBABILE (e' una stima), inchiostro se e' UFFICIALE (e' un fatto).
   Un'assenza e' un disco spento con la croce e il nome barrato, un dubbio un disco tratteggiato col punto interrogativo.
   Le misure in px sono unita' del viewBox (100 x 152): crescono e calano con la larghezza del campo. */
.ui-pitch { margin: 0; }
.ui-pitch__lead { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.ui-pitch__who { margin: 0; font-size: var(--t-small); color: var(--ink-2); }
.ui-pitch__who b { color: var(--ink); font-weight: 600; }
.ui-pitch__svg { display: block; width: 100%; height: auto; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-card); }
.ui-pitch__line { fill: none; stroke: var(--rule-2); stroke-width: .5; }
.ui-pitch__tok { fill: var(--paper); stroke-width: .9; }
.ui-pitch__team--probable .ui-pitch__tok { stroke: var(--est); }
.ui-pitch__team--official .ui-pitch__tok { stroke: var(--fact); }
.ui-pitch__no { font-family: var(--mono); font-size: 3.7px; font-weight: 500; fill: var(--ink); }
.ui-pitch__team--probable .ui-pitch__no { fill: var(--est-text); }
.ui-pitch__name { font-family: var(--sans); font-size: 3.3px; font-weight: 500; fill: var(--ink); }
.ui-pitch__p[data-status="out"] .ui-pitch__tok { stroke: var(--pending-line); fill: transparent; }
.ui-pitch__p[data-status="out"] .ui-pitch__name { fill: var(--muted); text-decoration: line-through; }
.ui-pitch__x { fill: none; stroke: var(--muted); stroke-width: .9; stroke-linecap: round; }
.ui-pitch__p[data-status="doubt"] .ui-pitch__tok { stroke-dasharray: 1.6 1.2; }
.ui-pitch__none { font-family: var(--sans); font-size: 3.6px; fill: var(--muted); }
.ui-pitch__cap { margin-top: var(--sp-3); }
.ui-pitch__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-2); font-size: var(--t-small); color: var(--ink-2); }
.ui-pitch__key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.ui-pitch__sw { display: inline-grid; place-items: center; box-sizing: border-box; width: var(--sign-s); height: var(--sign-s); border: 1.5px solid var(--pending-line); border-radius: 50%; color: var(--muted); }
.ui-pitch__note { margin: 0; font-size: var(--t-small); color: var(--muted); }

/* ---------- 14. Linea del tempo, linguette, risultati, «in breve» (2b) ---------- */
.ui-tl { list-style: none; margin: 0; padding: 0; }
.ui-tl__item { position: relative; display: grid; grid-template-columns: var(--sign-m) minmax(0, 1fr); column-gap: var(--sp-3); padding-bottom: var(--sp-5); }
.ui-tl__item:last-child { padding-bottom: 0; }
.ui-tl__item::before { content: ""; position: absolute; left: calc(var(--sign-m) / 2 - .5px); top: calc(var(--sign-m) + .25rem); bottom: .25rem; width: 1px; background: var(--rule-2); }
.ui-tl__item:last-child::before { display: none; }
.ui-tl__mark { display: grid; place-items: start center; }
.ui-tl__body { min-width: 0; }
.ui-tl__title { margin: 0; font-weight: 600; line-height: var(--sign-m); color: var(--ink); }
.ui-tl__item[data-state="later"] .ui-tl__title { color: var(--ink-2); }
.ui-tl__text { margin: .125rem 0 0; max-width: 46ch; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }

.ui-tabs { position: sticky; top: var(--mast-h, 3.5rem); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ui-tabs__list { display: flex; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ui-tabs__list::-webkit-scrollbar { display: none; }
.ui-tabs__list > li[hidden], .ui-tabs[hidden] { display: none; }
.ui-tabs__a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border-bottom: 2px solid transparent;
  background-image: none;               /* gli <a> portano la sottolineatura animata del tema */
  color: var(--muted);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ui-tabs__a:hover { color: var(--ink); background-image: none; }
.ui-tabs__a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.ui-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.ui-scores__item { display: grid; justify-items: center; gap: .125rem; padding: var(--sp-3) var(--sp-2); border: 1px solid var(--rule-2); border-radius: var(--r-card); background: var(--surface); }
.ui-scores__score { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.ui-scores__pct { font-family: var(--mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--est-text); }

.ui-facts { margin: 0; padding: 0; list-style: none; }
.ui-facts__row { padding: var(--sp-3) 0; border-top: 1px solid var(--rule); font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.ui-facts__row:last-child { border-bottom: 1px solid var(--rule); }
.ui-facts__label { font-weight: 600; color: var(--ink); }

/* ---------- 15. La cronaca (2c) ----------
   Una riga per fatto: minuto, icona, cosa e di chi, e — solo per un gol, e solo se i gol tornano col risultato — il punteggio.
   La squadra ha lo stesso segno di tutto il resto (pieno = casa, vuoto = ospite): si legge anche senza colore. */
.ui-log { list-style: none; margin: 0; padding: 0; }
.ui-log__row { display: grid; grid-template-columns: 3rem 1.25rem var(--sign-s) minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; border-top: 1px solid var(--rule); }
.ui-log__row:last-child { border-bottom: 1px solid var(--rule); }
.ui-log__min { font-family: var(--mono); font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ui-log__ico, .ui-log__sign { align-self: center; color: var(--ink-2); }
.ui-log__sign { display: grid; }
.ui-log__what { min-width: 0; color: var(--ink-2); }
.ui-log__what b { font-weight: 600; color: var(--ink); }
.ui-log__team { color: var(--ink-2); }
.ui-log__who { display: block; font-size: var(--t-small); color: var(--muted); }
.ui-log__score { font-family: var(--serif); font-size: 1.25rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.ui-log__row[data-kind="goal"] .ui-log__ico { color: var(--ink); }
.ui-log__row[data-kind="card"] .ui-log__what b, .ui-log__row[data-kind="red"] .ui-log__what b, .ui-log__row[data-kind="miss"] .ui-log__what b { font-weight: 500; }

/* ---------- 16. «Dentro la partita»: una riga per sezione, e ognuna dice la verita' su di se' (2c) ---------- */
.ui-inside { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-card); background: var(--surface-2); }
.ui-inside__row { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-3) var(--sp-4); }
.ui-inside__row + .ui-inside__row { border-top: 1px solid var(--rule); }
.ui-inside__ico { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 2rem; height: 2rem; border: 1px solid var(--rule-2); border-radius: 50%; color: var(--ink-2); }
.ui-inside__row[data-state="missing"] .ui-inside__ico { border-style: dashed; border-color: var(--pending-line); color: var(--muted); }
.ui-inside__body { display: grid; gap: .125rem; min-width: 0; }
.ui-inside__title { font-weight: 600; color: var(--ink); }
.ui-inside__row[data-state="missing"] .ui-inside__title { font-weight: 500; color: var(--ink-2); }
.ui-inside__text { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }
.ui-inside__st { font-size: var(--t-small); color: var(--muted); }

/* ---------- 17. Righe etichetta-valore: il meteo, le tendenze dell'arbitro (2c) ---------- */
.ui-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--sp-4) var(--sp-5); margin: 0; }
.ui-kv__item { min-width: 0; }
.ui-kv__label { font-size: var(--t-small); color: var(--muted); }
.ui-kv__value { display: flex; align-items: center; gap: var(--sp-2); margin: .125rem 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); }
.ui-kv__value .ui-icon { flex: none; color: var(--ink-2); }

/* ---------- 18. Una rosa: titolari quando il campo non si puo' disegnare, e la panchina (2c) ---------- */
.ui-roster { min-width: 0; }
.ui-roster__h { margin: 0 0 var(--sp-2); font-family: var(--sans); font-size: var(--t-small); font-weight: 400; color: var(--ink-2); }
.ui-roster__h b { font-weight: 600; color: var(--ink); }
.ui-roster__list { list-style: none; margin: 0; padding: 0; }
.ui-roster__row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--rule); }
.ui-roster__no { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-2); }
.ui-roster__name { overflow-wrap: anywhere; color: var(--ink); }
.ui-roster__note { font-size: var(--t-small); white-space: nowrap; color: var(--muted); }

/* ---------- 19. Contrasto forzato (Windows «alto contrasto», forced-colors) ----------
   Con forced-colors attivo il browser butta via i colori di sfondo: le barre, il riempimento del confronto, la fascia e
   la mediana delle strisce e i due punti (pieno e anello) diventerebbero tutti lo stesso bianco, e resterebbero i soli
   numeri. Qui ogni disegno che si regge su un FONDO torna a reggersi su un colore di sistema, scelto per il ruolo:
   il fatto e la stima in CanvasText, la fascia e la linea in GrayText, il vuoto in Canvas. (I tre segni si difendono
   da soli, sezione 1.) I test lo controllano due volte: sul testo (ogni selettore c'e') e in un browser con
   forced-colors emulato (i riempimenti sono diversi dai loro fondi). */
@media (forced-colors: active) {
  .ui-bars__track, .ui-cmp__track { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 1px GrayText; }
  .ui-bars__track i, .ui-cmp__track--h i { forced-color-adjust: none; background: CanvasText; }
  .ui-cmp__track--a i { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .ui-strip__line, .ui-strip__band, .ui-strip__sw--band { forced-color-adjust: none; background: GrayText; }
  .ui-strip__median, .ui-strip__sw--median { forced-color-adjust: none; background: CanvasText; }
  .ui-strip__dot--a, .ui-strip__sw--a { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; box-shadow: none; }
  .ui-strip__dot--b, .ui-strip__sw--b { forced-color-adjust: none; background: Canvas; border-color: CanvasText; box-shadow: none; }
  .ui-barcode path { forced-color-adjust: none; stroke: CanvasText; }
  .ui-barcode .ui-barcode__p { stroke: GrayText; }
  .ui-skel__line, .ui-sign--skel { forced-color-adjust: none; background: GrayText; }
  .ui-pitch__svg { forced-color-adjust: none; background: Canvas; border-color: GrayText; }
  .ui-pitch__line { forced-color-adjust: none; stroke: GrayText; }
  /* gli stessi selettori del foglio normale (stessa specificita', piu' in basso): con `.ui-pitch__tok` da solo perderebbe contro
     `.ui-pitch__team--probable .ui-pitch__tok`, e l'undici probabile (il caso comune) resterebbe a colori-token */
  .ui-pitch__tok, .ui-pitch__team--probable .ui-pitch__tok, .ui-pitch__team--official .ui-pitch__tok { forced-color-adjust: none; fill: Canvas; stroke: CanvasText; }
  .ui-pitch__no, .ui-pitch__name, .ui-pitch__team--probable .ui-pitch__no { forced-color-adjust: none; fill: CanvasText; }
  .ui-pitch__p[data-status="out"] .ui-pitch__tok { stroke: GrayText; }
  .ui-pitch__p[data-status="out"] .ui-pitch__name { fill: GrayText; }
  .ui-pitch__x { forced-color-adjust: none; stroke: GrayText; }
  .ui-tl__item::before { forced-color-adjust: none; background: GrayText; }
  /* «quando segnano» (match.css): la barra della casa e' un FONDO, quella dell'ospite un bordo; senza questa regola la prima sparisce */
  .pv-gt__bar--h { forced-color-adjust: none; background: CanvasText; }
  .pv-gt__bar--a { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
  .ui-tabs__a[aria-current="true"] { forced-color-adjust: none; border-bottom-color: CanvasText; }
}