/* ============================================================
   BetBrain — match.css
   La pagina partita nel canone v4 (sessione 2b, 18/10/2026): l'IMPAGINAZIONE. I componenti (campo dei 100 punti, barre,
   forma, campo di gioco, linguette, linea del tempo) stanno in ui.css e non si ridefiniscono qui; qui c'è solo ciò che
   è della pagina: la testata, le due colonne, i titoli di sezione, le note.

   REGOLA, come in ui.css: NESSUN colore. Solo var(--token) di theme.css (lo prova test/site_match_css.test.js: nessun
   esadecimale, nessuna funzione-colore, ogni var() nomina un token che esiste). Per questo il tema scuro non costa una
   riga e i due regimi del betting (legacy, prezzo_v1) non cambiano il foglio: cambia la copy, non il disegno.

   Le classi iniziano per `pv-` («partita view»): nessuna collisione con quelle di prima. Nel <style> della pagina resta solo cio'
   che usano ancora i cassetti dei dossier (squadra, giocatore, lega: li sostituiscono le pagine vere, 6a e 6b).
   ============================================================ */

/* ---------- 1. La testata ---------- */
.pv-head { padding: var(--sp-5) 0 var(--sp-3); }
.pv-kick { margin: 0 0 var(--sp-2); font-size: var(--t-small); color: var(--muted); }
.pv-title { overflow-wrap: anywhere; }
/* il nome di una squadra apre il suo dossier: un bottone vero, che nel titolo non ha l'aspetto di un bottone */
.pv-team {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}
.pv-team:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.pv-dash { padding: 0 .04em; }
.pv-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0 0; }
.pv-score__n { font-family: var(--serif); font-size: 3rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pv-score__t { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pv-sub { margin: var(--sp-3) 0 0; max-width: 52ch; font-size: .9375rem; color: var(--ink-2); }
.pv-sub a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; background-image: none; }

.pv-follow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0 var(--sp-3); }
.pv-follow .pv-note { flex: 1 1 18rem; margin: 0; }

/* ---------- 2. Le colonne ---------- */
/* Su telefono una colonna sola, nell'ordine: lettura, in breve, formazioni, forma, mercati, linea del tempo. Da 62 rem
   la lettura sta a sinistra e le formazioni e la forma a destra, i mercati e la linea del tempo sotto, a tutta larghezza. */
.pv-grid { display: grid; gap: var(--sp-7) var(--sp-8); margin-top: var(--sp-5); }
.pv-col { display: grid; align-content: start; gap: var(--sp-7); min-width: 0; }
.pv-wide { display: grid; gap: var(--sp-7); margin-top: var(--sp-7); }
@media (min-width: 62rem) {
  .pv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--sp-6); }
  .pv-wide { margin-top: var(--sp-8); }
}
/* chi salta a una sezione da una linguetta non la trova sotto la testata e la barra */
.pv-sec { min-width: 0; scroll-margin-top: calc(var(--mast-h) + var(--tap) + var(--sp-3)); }
.pv-sec[hidden] { display: none; }

/* ---------- 3. I testi ---------- */
.pv-h { margin: 0 0 var(--sp-2); font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.pv-h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: .9375rem; font-weight: 600; color: var(--ink); }
.pv-h-lead { margin: 0; }
.pv-lead { max-width: 46ch; margin: var(--sp-3) 0 var(--sp-5); font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.pv-sub-text { max-width: 52ch; margin: 0 0 var(--sp-4); font-size: .9375rem; color: var(--muted); }
.pv-note { max-width: 60ch; margin: var(--sp-3) 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.pv-note a { color: inherit; text-decoration: underline; text-underline-offset: .15em; background-image: none; }
.pv-field { margin: 0; }
.pv-verdict { margin-top: var(--sp-4); }
.pv-verdict .pv-note { margin-top: var(--sp-2); }

/* ---------- 4. In breve e i tre risultati ---------- */
.pv-two { display: grid; gap: var(--sp-6); }
.pv-res .pv-h, .pv-brief .pv-h { margin-bottom: var(--sp-3); }

/* ---------- 5. Forma e precedenti ---------- */
.pv-formrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--rule); }
.pv-formrow b { font-weight: 600; color: var(--ink); }

/* ---------- 6. Chi manca, quando segnano: cassetti ---------- */
.pv-det { margin-top: var(--sp-5); border-top: 1px solid var(--rule); }
.pv-det > summary { display: flex; align-items: center; min-height: var(--tap); list-style: none; cursor: pointer; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.pv-det > summary::-webkit-details-marker { display: none; }
.pv-det > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 500; color: var(--muted); }
.pv-det[open] > summary::after { content: "−"; }
.pv-abs__team { margin-top: var(--sp-3); }
.pv-abs__list { margin: 0; padding: 0; list-style: none; }
.pv-abs__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid var(--rule); }
.pv-abs__n { min-width: var(--tap); min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pv-abs__n:disabled { cursor: default; }
.pv-abs__d { flex: none; max-width: 55%; font-size: var(--t-small); color: var(--muted); text-align: right; }

/* ---------- 7. Salto di layout ---------- */
/* Il piede della pagina non deve essere in vista mentre la lettura arriva: la pagina si riempie e lo spingerebbe sotto la
   piega, e ogni spostamento di ciò che si vede conta come salto. Con il <main> alto almeno quanto lo schermo, il piede
   parte da sotto. Lo scheletro del pannello della giocata ha l'altezza che avrà il pannello. */
#main { min-height: 100svh; }
.pv-advice { min-height: 9rem; }

/* ---------- 8. I mercati e la linea del tempo, a tutta larghezza ---------- */
@media (min-width: 62rem) {
  .pv-bars .ui-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-8); }
  #quando .ui-tl { max-width: 40rem; }
}

/* ---------- 9. La giocata (regime legacy), la nota (prezzo_v1), l'archivio e la prosa «Perché» ----------
   Il markup è quello di prima (le funzioni renderAdvice, renderPanelNote e renderWhy non cambiano); cambia il vestito.
   DECISIONE (2b): l'ottone dice «ciò che dice il modello». La giocata discende dal modello (la nostra stima confrontata
   col prezzo), quindi in legacy il suo segno resta ottone e non serve un secondo colore per distinguerla dalla lettura:
   a distinguerla bastano il titolo, la forma (un pannello con lo scarto in punti) e il rombo. Il VERDE, che prima
   vestiva il valore, tornato a essere solo l'esito. In prezzo_v1 il pannello è una nota e l'ottone resta «la stima». */
.adv-value, .adv-none, .adv-locked, .adv-arch, .np, .why { background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: none; }
.adv-locked { border-style: dashed; border-color: var(--rule-2); }
.sec-sub { max-width: 52ch; margin: 0 0 var(--sp-3); font-size: .9375rem; color: var(--muted); }
.adv-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.adv-ico { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--est); border-radius: 50%; color: var(--est-text); font-size: .875rem; line-height: 1; }
.adv-main { flex: 1; min-width: 0; }
.adv-t { font-family: var(--serif); font-size: 1.125rem; font-weight: 500; line-height: 1.2; color: var(--ink); }
.adv-s { margin-top: .25rem; font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.adv-s b { color: var(--ink); }
.adv-edge { flex: none; margin-left: auto; padding-left: var(--sp-2); text-align: right; }
.adv-edge .n { font-family: var(--mono); font-size: 1.125rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--est-text); }
.adv-edge .l { font-size: var(--t-kicker); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.adv-sep { height: 1px; margin: var(--sp-3) 0; background: var(--rule); }
.adv-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule); font-size: var(--t-meta); line-height: 1.5; color: var(--muted); }
.adv-cta { display: inline-flex; align-items: center; min-height: var(--tap); margin-top: var(--sp-3); padding: 0 1.25rem; border-radius: var(--r-pill); background: var(--surface-ink); color: var(--on-ink); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.none-rule { width: 2.75rem; height: 2px; margin-bottom: var(--sp-3); background: var(--est); }
.none-t { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }
.none-s { max-width: 46ch; margin-top: var(--sp-2); font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
.none-s b { font-weight: 600; color: var(--ink); }
.np { padding: var(--sp-3) var(--sp-4); }
.np p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--muted); }
.np a { color: inherit; text-decoration: underline; text-underline-offset: .15em; background-image: none; }
.why-p { margin: 0 0 var(--sp-3); font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.why-p:last-of-type { margin-bottom: 0; }
.why-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--rule); font-size: var(--t-meta); line-height: 1.5; color: var(--muted); }

/* ---------- 10. La partita giocata (2c): cronaca, statistiche, formazioni, contesto ---------- */
/* Una colonna sul telefono; da 62 rem due colonne che si riempiono dall'alto in basso, per non lasciare il desktop a meta' vuoto.
   Una sezione non si spezza fra le colonne. */
.pv-post { margin-top: var(--sp-7); display: grid; gap: var(--sp-7); }
@media (min-width: 62rem) {
  .pv-post { display: block; column-count: 2; column-gap: var(--sp-8); margin-top: var(--sp-8); }
  .pv-post > .pv-sec { break-inside: avoid; margin-bottom: var(--sp-7); }
}
.pv-cta { margin: var(--sp-4) 0 0; }
.pv-ctx + .pv-ctx { margin-top: var(--sp-6); }
.pv-ctx > .pv-h3:first-child { margin-top: var(--sp-5); }
.pv-ctx .ui-kv { margin-top: var(--sp-2); }
/* gli undici in elenco (ruoli ignoti) e la panchina: una colonna sul telefono, due dove c'e' posto */
.pv-xi { display: grid; gap: var(--sp-6); }
@media (min-width: 40rem) { .pv-xi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); } }

/* gli incontri del testa a testa: il segno (casa pieno, pari tratteggiato, ospite vuoto), la data, il punteggio visto dalla casa di oggi */
.pv-meet { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.pv-meet__row { display: grid; grid-template-columns: var(--sign-m) minmax(0, 1fr) auto; column-gap: var(--sp-3); row-gap: .125rem; align-items: baseline; padding: var(--sp-3) 0; border-top: 1px solid var(--rule); }
.pv-meet__row:last-child { border-bottom: 1px solid var(--rule); }
.pv-meet__sign { align-self: center; }
.pv-meet__d { color: var(--ink-2); }
.pv-meet__s { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.pv-meet__w { grid-column: 2 / -1; font-size: var(--t-small); color: var(--muted); }

/* la classifica: due righe, tre numeri */
.pv-table { width: 100%; border-collapse: collapse; margin: var(--sp-2) 0 0; font-size: .9375rem; }
.pv-table th, .pv-table td { padding: var(--sp-3) var(--sp-2); border-top: 1px solid var(--rule); }
.pv-table thead th { padding-top: 0; border-top: 0; font-size: var(--t-small); font-weight: 500; text-align: right; color: var(--muted); }
.pv-table thead th:first-child, .pv-table tbody th { padding-left: 0; text-align: left; }
.pv-table tbody th { font-weight: 600; overflow-wrap: anywhere; color: var(--ink); }
.pv-table td { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pv-table th:last-child, .pv-table td:last-child { padding-right: 0; }

/* «quando segnano»: due barre per fascia di minuti, casa piena e ospite vuota (i due segni del resto). Nessun ottone: una fascia
   oraria non e' una stima. La fascia che spicca tiene il suo peso, le altre arretrano. */
.pv-gt { margin-top: var(--sp-3); }
.pv-gt__plot { display: flex; gap: var(--sp-1); height: 7rem; }
.pv-gt__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pv-gt__bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.pv-gt__bar { display: block; box-sizing: border-box; width: 44%; min-height: 2px; border-radius: 3px 3px 0 0; }
.pv-gt__bar--h { background: var(--fact); }
.pv-gt__bar--a { border: 1.5px solid var(--fact); background: transparent; }
.pv-gt__bar[data-dim] { opacity: .5; }
.pv-gt__l { font-family: var(--mono); font-size: var(--t-meta); color: var(--muted); white-space: nowrap; }
.pv-gt__key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: var(--sp-3) 0 0; font-size: var(--t-small); color: var(--ink-2); }
.pv-gt__key span { display: inline-flex; align-items: center; gap: var(--sp-2); }