/* IL MENU DEGLI EVENTI LIVE — la specifica di Jesper del 06/08, tradotta in quattro regole.
 *
 *   «il menu prende l'altezza rimanente del monitor»   → height: calc(100vh - quanto sta sopra)
 *   «contenuto interno scrollabile»                    → .lvm-corpo { overflow-y: auto }
 *   «la pagina non si deve scrollare per vederlo»      → position: sticky + overscroll-behavior
 *   «tendine che nascono gia' aperte»                  → <details open>, nel markup
 *
 * 🔴 LE DUE RIGHE CHE FANNO TUTTO IL LAVORO, e che si tolgono per sbaglio:
 *
 *   `min-height: 0` su `.lvm-corpo`. In una colonna flex la misura minima di un figlio e' il suo
 *   CONTENUTO, non zero: senza questa riga il corpo si allarga fino alle 178 partite, sfonda
 *   l'altezza del menu e a scrollare finisce per essere la PAGINA — cioe' esattamente la cosa che
 *   la specifica vieta. E' il difetto classico del flex, e non da' nessun errore.
 *
 *   `overscroll-behavior: contain`. Senza, arrivati in fondo all'elenco il browser passa lo
 *   scorrimento alla pagina («scroll chaining»): l'utente continua a girare la rotella e a
 *   muoversi e' la scheda dell'evento sotto. Il menu sembrerebbe rispettare la specifica e la
 *   romperebbe all'ultima riga.
 *
 * ⚠️ `--lvm-top` e' quanto sta sopra il menu (testata + navigazione). Il ripiego di 168px e' una
 * misura ragionevole, non un indovinello: se lo script non gira, il menu e' un po' piu' corto del
 * dovuto — mai piu' lungo, che sarebbe la pagina che scrolla.
 *
 * 📌 DA DOVE ARRIVA `--lvm-top`: dal CONTENITORE `.lvm-pagina`, non da qui. Serve a due elementi
 * — il menu e il centro (punto 6, sotto) — e un numero che deve restare uguale in due posti si
 * scrive in UN posto solo. Qui resta il ripiego nel `var()`, che copre il caso in cui questo
 * menu finisca un giorno fuori da quel contenitore: mai un'altezza calcolata su `NaN`.
 */
.lvm{
  position: sticky;
  top: 8px;
  height: calc(100vh - var(--lvm-top, 168px) - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;                 /* la cornice non scorre mai: scorre solo il corpo */
  border-radius: var(--r, 12px);
  background: var(--qt-background, rgba(255,255,255,.04));
  border: 1px solid var(--primary-border, rgba(255,255,255,.10));
}

/* ── l'intestazione: resta ferma, e' fuori dalla zona che scorre ── */
.lvm-testa{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 1px solid var(--primary-border, rgba(255,255,255,.10));
}
.lvm-pallino{ width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--live, currentColor); }
.lvm-tot{ margin-inline-start: auto; font-weight: 600; opacity: .75; }

/* ── il corpo: L'UNICO pezzo che scorre ── */
.lvm-corpo{
  flex: 1 1 auto;
  min-height: 0;                    /* ⬅ senza questa, scrolla la pagina. Vedi sopra. */
  overflow-y: auto;
  overscroll-behavior: contain;     /* ⬅ senza questa, in fondo scrolla la pagina. Vedi sopra. */
  padding: 4px;
}
.lvm-corpo:focus-visible{ outline: 2px solid var(--btn-primary, currentColor); outline-offset: -2px; }

/* ── le tendine ── */
.lvm-sport > summary, .lvm-lega > summary{
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; cursor: pointer; list-style: none;
  border-radius: var(--r-s, 9px); user-select: none;
}
.lvm-sport > summary::-webkit-details-marker,
.lvm-lega  > summary::-webkit-details-marker{ display: none; }
.lvm-sport > summary{ font-weight: 700; font-size: 13px; }
.lvm-lega  > summary{ font-size: 12px; opacity: .85; padding-inline-start: 14px; }
.lvm-sport > summary:hover, .lvm-lega > summary:hover{
  background: var(--primary-background, rgba(255,255,255,.06)); }
.lvm-nome{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lvm-n{ flex: none; font-size: 11px; opacity: .7; font-variant-numeric: tabular-nums; }
.lvm .ico{ width: 18px; height: 18px; flex: none; object-fit: contain; }

/* ══════════ LA RIGA, come nella schermata di Jesper (06/08 16:18) ══════════
 *
 *      [★]  Entebbe             0
 *           NEC FC Bugolobi     1
 *
 * Nomi uno sotto l'altro, punteggio incolonnato a destra, stella in alto a destra. Le tre quote
 * arrivano qui sotto quando il PM conferma quali sono: il posto e' gia' previsto dalla griglia.
 *
 * ⛔ ZERO COLORI SCRITTI A MANO. Ogni colore e' una variabile della skin con un ripiego neutro —
 * e' la regola che ci e' costata la skin 11: un esadecimale in un foglio condiviso e' un colore
 * di casa nostra addosso al sito di un cliente.
 *
 * 🔴 E NEMMENO NEI RIPIEGHI. Il primo giro aveva `var(--btn-primary, #ff7900)`: un ripiego scatta
 * solo dove la skin quel token NON lo dichiara — cioe' esattamente sulla skin dove il nostro
 * arancione non c'entra niente. Un colore di marca nascosto in un ripiego e' peggio di uno
 * scritto in chiaro, perche' non lo trova la ricerca di «#». Adesso il ripiego e' `currentColor`:
 * qualunque cosa sia il colore del testo di quella skin, e mai il nostro.
 * L'unico valore fisso qui e' una MISURA. */
.lvm-eventi{ list-style: none; margin: 0; padding: 0 0 4px; }
.lvm-ev{ position: relative; margin: 2px 0; }
.lvm-ev-in{
  display: block; padding: 6px 26px 6px 10px; border-radius: var(--r-s, 9px);
  font-size: 12.5px; line-height: 1.35;
}
.lvm-ev > a.lvm-ev-in:hover{ background: var(--primary-background, rgba(255,255,255,.06)); }
/* la coppia nome+punteggio: il numero e' incolonnato a destra, i nomi si accorciano se serve */
.lvm-sq{ display: flex; align-items: baseline; gap: 8px; }
.lvm-nomesq{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lvm-punti{ flex: none; min-width: 14px; text-align: end; font-weight: 700;
  font-variant-numeric: tabular-nums; }
/* LA STELLA: in alto a destra, come nella sua immagine — non davanti al nome.
   `position:absolute` e non un posto nel flusso: cosi' non ruba larghezza ai nomi delle squadre,
   che su una colonna di 280px e' proprio quello che manca. */
.lvm-star{
  position: absolute; top: 5px; inset-inline-end: 6px; z-index: 1;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: .6;
}
.lvm-star:hover, .lvm-star.mdi-star{ opacity: 1; }
/* VUOTA o PIENA, dalle stesse due classi che ribalta `_fav_gesto.html`. Il disegno e' un SVG
   perche' il carattere `mdi` su studio5 non e' caricato (misurato: zero occorrenze fra i suoi
   fogli) e una stella-carattere li' sarebbe invisibile. */
.lvm-star svg{ display: block; fill: none; }
.lvm-star.mdi-star svg{ fill: currentColor; }
.lvm-star:focus-visible{ outline: 2px solid var(--btn-primary, currentColor); outline-offset: 2px;
  border-radius: 3px; }
/* La partita che si sta guardando: bordo pieno tutto attorno, come nella sua immagine.
   E non e' un link: portare a se stessi e' un clic che non fa niente, e chi lo prova pensa che il
   menu sia rotto. */
.lvm-ev--corrente > .lvm-ev-in{
  cursor: default; font-weight: 700;
  background: var(--primary-background, rgba(255,255,255,.08));
  box-shadow: inset 0 0 0 1px var(--btn-primary, currentColor);
}

/* ══════════ PUNTO 6 — LA PARTE CENTRALE SCORRE DENTRO DI SE' ══════════
 *
 *   Jesper, 07/08 20:06: «cosi' il menu live rimane dove e' e scrolla internamente»
 *
 * 🔴 LA MISURA CHE HA DECISO LA STRADA (studio5, `sr:match:67691788`, 1440x900, prima di toccare):
 *
 *     la pagina puo' scrollare   7.548px
 *     `.cms-main`                8.128px alta, `overflow-y: visible` — non scorre da se'
 *     dopo 1.500px di rotella    `.lvm` a top **-1311** → il menu e' fuori dallo schermo
 *
 * Il `sticky` del menu non teneva niente, e non per un errore di scrittura: il suo blocco
 * contenitore (`.cms-rail_left`) e' alto **esattamente quanto lui**, quindi non ha un millimetro
 * in cui restare fermo. Uno `sticky` senza spazio in cui scorrere e' una riga che si legge come
 * una promessa e non fa nulla — ed e' il motivo per cui il difetto e' arrivato fino a Jesper
 * nonostante la parola `sticky` fosse gia' nel foglio. **Leggere `sticky` non e' misurare che
 * qualcosa resta fermo.**
 *
 * 👉 Quindi non si aggiusta lo `sticky`: si toglie alla PAGINA il compito di scorrere e lo si
 * da' al CENTRO. Sono le stesse quattro righe che il menu ha gia' addosso — altezza fissa,
 * `min-height: 0`, `overflow-y: auto`, `overscroll-behavior: contain` — e valgono per lo stesso
 * motivo, spiegato in cima a questo foglio. Con la pagina ferma, il menu resta dov'e' **per
 * costruzione**: non c'e' piu' niente che possa portarlo via.
 *
 * ⚠️ `min-height: 0` QUI serve al contrario che nel menu. `.cms-region` e' `display:flex`
 * column, e il centro e' insieme figlio flex (della griglia no: e' un grid item) e contenitore:
 * senza, il conto della sua altezza minima torna a essere il contenuto — cioe' 8.128px, cioe'
 * di nuovo la pagina che scorre.
 *
 * 📌 IL COSTO, dichiarato invece che scoperto dopo: la pagina non e' piu' alta 8.448px ma poco
 * piu' di una finestra, quindi il PIE' DI PAGINA (`footer.ftr`, 101px, misurato) resta sotto la
 * piega e ci si arriva con un filo di rotella — durante il quale il menu si alza di altrettanto.
 * E' l'unico scorrimento di pagina rimasto, ed e' quello che serve a vedere il piede.
 * ⚠️ E le bolle dei suggerimenti (`.tb-tip`, che si aprono VERSO L'ALTO) su una quota a ridosso
 * del bordo alto del centro adesso vengono tagliate dal contenitore che scorre: prima non lo
 * erano perche' non c'era nessun contenitore. Non e' un effetto collaterale nascosto, e' il
 * prezzo di questa richiesta — si toglie solo rinunciando allo scorrimento interno. */
.lvm-pagina{ --lvm-top: 168px; }        /* lo script lo riscrive col numero vero, per tutt'e due */
.lvm-pagina > .cms-main{
  height: calc(100vh - var(--lvm-top, 168px) - 16px);
  min-height: 0;                    /* ⬅ senza questa, torna a scrollare la pagina. Vedi sopra. */
  overflow-y: auto;
  overscroll-behavior: contain;     /* ⬅ senza questa, in fondo scrolla la pagina. Vedi sopra. */
}

/* ── sotto i 980px la colonna non c'e': il menu torna un blocco normale ──
 * Su un telefono «l'altezza rimanente del monitor» sarebbe tutto lo schermo, e il menu
 * coprirebbe la partita che si e' appena aperta. Li' l'elenco sta sopra il contenuto, chiuso
 * quanto basta a non spingere la scheda sotto la piega.
 *
 * 🔴 E IL CENTRO TORNA NEL FLUSSO INSIEME A LUI, nella STESSA media query e non in una sua.
 * Su un telefono le due colonne sono impilate: un centro alto quanto la finestra sarebbe una
 * finestrella che scorre dentro una pagina che scorre — due scorrimenti sovrapposti sotto lo
 * stesso pollice, che e' il difetto peggiore dell'originale, non la sua cura. Le due regole
 * stanno insieme perche' descrivono la stessa decisione: sotto i 980px questo layout non c'e'. */
@media (max-width: 980px){
  .lvm{ position: static; height: auto; max-height: 60vh; }
  .lvm-pagina > .cms-main{ height: auto; overflow-y: visible; }
}

/* ── LE QUOTE, quante sono ──
 * `--lvm-q` la scrive il template: tante colonne quanti sono gli esiti che il mercato principale
 * ha in questo momento. Tre nel calcio (1X2), due nel tennis (vincente). Nessuna classe per ogni
 * numero possibile, e nessun posto vuoto che aspetta un prezzo che non c'e'.
 * ⛔ Zero colori scritti a mano, nemmeno nei ripieghi: solo variabili della skin. */
.lvm-quote{
  display: grid; grid-template-columns: repeat(var(--lvm-q, 3), 1fr);
  gap: 4px; margin-top: 5px;
}
.lvm-q{
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 2px; border-radius: var(--r-s, 9px);
  background: var(--qt-background, rgba(255,255,255,.06));
  border: 1px solid var(--primary-border, rgba(255,255,255,.10));
  min-width: 0;
}
.lvm-q b{ font-size: 12px; font-variant-numeric: tabular-nums; }
.lvm-q small{
  font-size: 9.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--secondary-text, currentColor); opacity: .85;
}
a.lvm-ev-in:hover .lvm-q{ border-color: var(--btn-primary, currentColor); }

/* ── L'ETICHETTA E IL TEMPO, sopra i nomi ──
 * «LIVE» + minuti/set per chi sta giocando, l'ORARIO per chi comincia piu' tardi.
 * ⛔ Zero colori scritti a mano: `--live` e' il token della skin, e dove non c'e' si eredita il
 *    colore del testo — mai il rosso di casa nostra addosso al sito di un cliente. */
.lvm-alto{
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px; font-size: 10px; line-height: 1.2; letter-spacing: .03em;
}
.lvm-vivo{
  font-weight: 800; text-transform: uppercase;
  color: var(--live, currentColor);
}
/* il pallino davanti a LIVE: lo stesso segno dell'intestazione, in piccolo */
.lvm-vivo::before{
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  margin-inline-end: 4px; vertical-align: middle;
  background: var(--live, currentColor);
}
.lvm-tempo{ font-variant-numeric: tabular-nums; opacity: .8; }
.lvm-ora{ font-variant-numeric: tabular-nums; font-weight: 700; opacity: .85; }

/* ── LA BANDIERA DEL GRUPPO e IL CAMPIONATO DENTRO LA RIGA (Jesper, 06/08) ──
 * La bandiera esce solo dove ce l'abbiamo: misurato, 6 gruppi su 15 non sono nazioni (ATP,
 * Challenger, International Clubs, Simulated Reality League…) e li' non esce nessuna immagine —
 * resta il nome. Mai un riquadro rotto, e nessun mappamondo finto che faccia sembrare una
 * nazione quello che non lo e'. */
.lvm-bandiera{
  width: 16px; height: 12px; flex: none; border-radius: 2px; object-fit: cover;
}
/* Il campionato dentro la riga, sopra l'etichetta LIVE. Piccolo e smorzato: e' un'etichetta di
   contesto, non il titolo — sopra ci sono gia' il tempo e sotto i nomi delle squadre. */
.lvm-lega-riga{
  display: block; margin-bottom: 1px;
  font-size: 9.5px; line-height: 1.25; font-weight: 600; letter-spacing: .02em;
  color: var(--secondary-text, currentColor); opacity: .85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════ IL CERCA (solo sui nomi delle squadre) ══════════ */
.lvm-cerca{
  flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
  margin: 6px; padding: 5px 9px; border-radius: 999px;
  color: var(--secondary-text, currentColor);
  background: var(--primary-background, transparent);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
}
.lvm-cerca-in{
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 12px; color: var(--primary-text, currentColor);
}
.lvm-cerca-in::placeholder{ color: var(--secondary-text, currentColor); opacity: .8; }

/* Chi non combacia sparisce — righe, gruppi e sport. */
.lvm-fuori{ display: none !important; }

/* 🔴 LA RIGA CHE FA TORNARE TUTTO COM'ERA, e vale la pena capirla.
 * Mentre si cerca, il contenuto delle tendine CHIUSE si mostra lo stesso: cosi' un risultato
 * dentro una nazione chiusa si vede senza dover APRIRE la tendina. E non aprendola, l'attributo
 * `open` di ognuna resta quello di prima: svuotato il cerca, il menu torna identico da se' —
 * niente stato da salvare, niente da ripristinare, niente da sbagliare.
 * (`details:not([open]) > *:not(summary)` e' la regola del browser che qui si scavalca.) */
.lvm-cercando details:not([open]) > *:not(summary){ display: block; }

/* ── LA SEZIONE «PREFERITI», in cima ──
 * Stessa scatola di uno sport, cosi' il menu resta un elenco solo invece di due cose diverse
 * impilate. Il colore lo da' l'azione della skin: e' l'unica riga del menu che l'utente ha messo
 * li' lui, e si vede. ⛔ Zero colori scritti a mano, nemmeno nei ripieghi. */
.lvm-pref > summary { color: var(--btn-primary, currentColor); }
.lvm-pref-ico { display: inline-flex; flex: none; }
.lvm-pref-lista { padding-bottom: 6px; }

/* ══════════ L'INTERRUTTORE DELLA TV, accanto al cerca ══════════
 * Jesper (08/08, ricordato il 09/08 11:32) e la sua schermata: «Cerca», il bottone, e accanto
 * un tasto TV. Qui è un vero interruttore, non un'etichetta: filtra le righe con `data-tv="1"`.
 *
 * ⛔ E quando non lascia niente, il vuoto PARLA (`.lvm-tv-nota`, testo scritto dal server, che
 * sa se la sala ha lo streaming spento o se semplicemente adesso non c'è nessuna partita con la
 * TV). Un filtro che svuota l'elenco in silenzio è il difetto chiuso tre volte stanotte. */
.lvm-tv{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  margin: 6px 6px 6px 0; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  color: var(--secondary-text, currentColor);
  background: var(--primary-background, transparent);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  /* Il cerca ha `flex:1`, questo no: l'interruttore sta alla sua destra e non si allarga. */
  user-select: none;
}
/* La casella vera resta nel DOM e raggiungibile da tastiera: sparirebbe l'unico modo di
 * accendere l'interruttore per chi non usa il mouse. Si nasconde alla VISTA, non all'uso. */
.lvm-tv-in{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lvm-tv-et{ font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.lvm-tv:hover{ color: var(--primary-text, currentColor); }
.lvm-tv:has(.lvm-tv-in:checked){
  color: var(--btn-primary, currentColor);
  border-color: var(--btn-primary, currentColor);
}
/* …e il contorno quando ci si arriva col TAB: senza, chi naviga da tastiera non sa dov'è. */
.lvm-tv:has(.lvm-tv-in:focus-visible){ outline: 2px solid var(--btn-primary, currentColor);
  outline-offset: 2px; }

/* Chi non ha la TV sparisce mentre il filtro è acceso — righe, gruppi e sport, come il cerca. */
.lvm-senza-tv{ display: none !important; }

.lvm-tv-nota{
  margin: 2px 10px 8px; font-size: 11.5px; line-height: 1.3;
  color: var(--secondary-text, currentColor);
}

/* 📺 L'ICONA TV ACCANTO ALLA STELLA — Jesper, 09/08 12:30.
 * Solo dove la partita ha davvero lo streaming (`ev.tv`, dalla vista): e' un'indicazione, non un
 * ornamento. Sta accanto a `.lvm-star` e ne segue la colonna, cosi' le righe restano allineate
 * anche quando l'icona non c'e' — una riga che si sposta perche' la vicina ha la TV si legge
 * peggio di due righe uguali. */
.lvm-tvico{
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 15px; height: 15px; margin-left: 2px;
  color: var(--secondary-text, currentColor); opacity: .9;
}
/* Nel filtro «solo TV» l'icona e' su tutte le righe rimaste: li' non distingue piu' niente, e
 * si abbassa per non gridare. Resta visibile — toglierla del tutto farebbe pensare che il
 * filtro abbia cambiato le righe. */
.lvm-solo-tv .lvm-tvico{ opacity: .55; }

/* Il NUMERO sull'interruttore TV — la stessa regola delle linguette del calendario, dove una
 * giornata a zero mostra «0 eventi» invece di sparire: si sa PRIMA di premere. */
.lvm-tv-n{
  font-size: 10.5px; font-weight: 800; line-height: 1;
  margin-left: 5px; padding: 2px 5px; border-radius: 999px;
  background: var(--primary-border, rgba(128,128,128,.30));
  color: inherit;
}
/* A zero l'interruttore resta PREMIBILE (il perche' e' scritto nel template) ma si vede che non
 * ha niente da filtrare: e' un'informazione, non un divieto. */
.lvm-tv--zero{ opacity: .72; }
.lvm-tv--zero .lvm-tv-n{ background: transparent; }

/* Le due note del vuoto. `hidden` le tiene fuori finche' non servono; quando servono devono
 * comportarsi da paragrafo, e senza questa riga `display:flex` di un antenato le schiaccerebbe. */
.lvm-tv-nota[hidden]{ display: none; }

/* La riga «cerca + TV»: `.lvm` e' una colonna, quindi senza questo contenitore i due comandi si
 * impilano. Nella schermata di Jesper sono affiancati, e «accanto al cerca» era la sua parola. */
.lvm-riga-cerca{ flex: 0 0 auto; display: flex; align-items: stretch; }
.lvm-riga-cerca .lvm-cerca{ flex: 1 1 auto; min-width: 0; }
/* L'interruttore non si allarga e non si stringe: il numero dentro non deve mai andare a capo. */
.lvm-riga-cerca .lvm-tv{ flex: 0 0 auto; }