/* IL CHROME NOSTRO DENTRO UN TEMA IMPORTATO — testata, menu e PIÈ DI PAGINA.
 * Solo la STRUTTURA, mai i colori.
 *
 * Angelo, 31/07, guardando studio51 vestita dal tema 24248: «fai attenzione anche alla
 * navigazione». In cima alla pagina c'erano due riquadri di accesso appiccicati nell'angolo a
 * sinistra e il menu principale usciva come testo nudo — «Inizio Sport In diretta Il conto» —
 * alto 22px in mezzo a una fascia arancione.
 *
 * ⚠️ NON ERA UN DIFETTO DEL TEMA. Misurato: `.wdg-header`, `.wdg-topnav` e `.wdg-utility_bar`
 * non hanno MAI avuto una riga di CSS, in nessun foglio del progetto. Su una pagina vestita da
 * un tema importato la nostra testata è sempre uscita così, su ogni skin e ogni tema — e si
 * notava poco solo perché finora si guardava il palinsesto. Un tema non può vestirle: sono
 * markup nostro, generato dai widget, e il grafico non sa che esistono.
 *
 * 🔴 QUI DENTRO NON C'È UN COLORE, ed è la regola che tiene in piedi tutto il resto. Questo
 * foglio entra fra gli strutturali (`player_ui/mobile.py`, `FOGLI_STRUTTURALI`), che si
 * caricano PRIMA dello `<style>` del tema: la struttura è nostra, l'ultima parola sul colore
 * resta del tema. Se qui ci finisse un `background` o un `color`, un tema chiaro si ritroverebbe
 * la testata scura e nessuno capirebbe da dove arriva.
 *
 * Le misure sono quelle del wireframe che i widget già presuppongono: barra utility sottile,
 * intestazione col marchio a sinistra e le azioni a destra, menu a fila sotto.
 */

/* ── RIEMPIRE LA PROPRIA ZONA ──
 * ⚠️ Misurato dopo il primo giro: la barra utility usciva larga 166px e l'intestazione 279px,
 * schiacciate nell'angolo, mentre le zone del tema che le contengono sono larghe 1400. Il
 * motivo: dove la zona del grafico è un contenitore flex, il nostro blocco diventa un elemento
 * flex e si stringe sul contenuto. `width:100%` da solo non basta (in un flex row conta la
 * base, non la larghezza), quindi va detto in tutt'e due i modi. Resta struttura: nessun colore.
 */
.wdg-utility_bar, .wdg-header, .wdg-topnav {
  box-sizing: border-box;
  width: 100%;
  flex: 1 1 100%;
}

/* ── LA BARRA UTILITY: orario, poi bandiera; conto/saldo a destra ──
 *
 * 🔴 QUESTI NUMERI DEVONO COMBACIARE CON QUELLI DI `widgets/_cms.html`, e non è pignoleria:
 * la stessa barra è descritta DUE VOLTE — qui (foglio strutturale, servito su ogni skin) e nel
 * foglio in linea del compositore. Le pagine composte prendono il secondo, tutte le altre solo
 * questo. Finché i due dicevano numeri diversi, la stessa striscia usciva DIVERSA da pagina a
 * pagina: misurato sul servito di studio5 il 04/08 — alta 34px su /player/ e 26px su
 * /player/casino e /player/registro, con padding 5px 12px contro 3px 14px. È esattamente il
 * «fai sicuro che usi questo design in TUTTE le pagine» di Dav, ed è la seconda volta che
 * questa doppia scrittura morde: la prima è stata il margine che teneva l'orario attaccato
 * alla bandiera, che viveva solo nell'altro foglio.
 * I valori qui sotto sono quelli della PAGINA DI RIFERIMENTO (la composta, quella della sua
 * foto): si allinea il resto a lei, non lei al resto.
 * ⚠️ Chi cambia un numero qui lo cambi anche là — c'è un test che confronta i due fogli e
 * fallisce se divergono (`tests/test_barra_alta_stessa_su_tutte_le_pagine.py`). */
.wdg-utility_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 12px;
  font-size: 12.5px;
  line-height: 1.2;
  min-height: 26px;
}
/* i gruppi dentro la barra restano in riga: senza, ogni voce va a capo per conto suo.
 * 🔴 `:not(script)` NON è pignoleria — misurato il 03/08 con l'orologio: un `> *` che prende
 * TUTTI i figli prende anche i `<script>`, e `display:flex` su uno script lo rende VISIBILE:
 * in testata usciva il codice sorgente dell'orologio, stampato come testo sotto la barra.
 * Un selettore universale dentro un contenitore che ospita anche codice è una trappola che
 * scatta il giorno in cui qualcuno ci mette dentro uno script. */
.wdg-utility_bar > *:not(script) { display: flex; align-items: center; gap: 8px; }
.wdg-ub-lang, .wdg-ub-tz { position: relative; }
/* Il sottomenu del FUSO ha la stessa forma di quello della lingua: stessa struttura, la
 * differenza sta nella classe — è la regola di Dav. L'elenco è un pannello SOPRA la pagina:
 * senza `position` allargherebbe la barra e spingerebbe giù il sito a ogni apertura, ed è lo
 * stesso motivo scritto per `.wdg-ub-langlist`. */
/* I due sommari hanno la STESSA forma — e la stessa del foglio del compositore: era il
 * `padding: 4px 8px` del sommario, presente solo là, a rendere la barra 8px più alta sulle
 * pagine composte. La differenza fra lingua e fuso sta nella classe, non nella misura. */
.wdg-ub-lang > summary, .wdg-ub-tz > summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 4px 8px; border-radius: 999px; white-space: nowrap; user-select: none; }
.wdg-ub-lang > summary::-webkit-details-marker,
.wdg-ub-tz > summary::-webkit-details-marker { display: none; }
/* l'elenco è un pannello che si apre SOPRA la pagina: senza `position` allargherebbe la barra
   e spingerebbe giù tutto il sito ogni volta che lo si apre.
   ⚠️ `z-index:60` e non 30: il foglio del compositore diceva 30 e questo 60, cioè lo stesso
   pannello passava sopra o sotto la pagina a seconda di dove si apriva. Si tiene il più alto —
   un elenco che finisce dietro al contenuto è un elenco che non si può usare. */
.wdg-ub-langlist, .wdg-ub-tzlist {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 160px; margin: 0; padding: 4px;
  list-style: none; }
.wdg-ub-tzlist { max-height: 60vh; overflow-y: auto; }
.wdg-ub-langlist li, .wdg-ub-tzlist li { margin: 0; }
.wdg-ub-langlist a, .wdg-ub-tzlist a {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  white-space: nowrap; font-size: 13px; text-decoration: none; }
/* il chip della lingua non si allarga oltre misura: un nome lungo spingerebbe l'orario */
.wdg-ub-cur { display: inline-flex; align-items: center;
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
/* il gruppo di destra si stacca da solo, e dentro resta una riga */
.wdg-ub-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 🔴 È QUESTA RIGA CHE TIENE L'OROLOGIO ATTACCATO AL SELETTORE, e mancava proprio qui.
 * La barra è `justify-content:space-between`: con tre figli e nessun margine automatico, il
 * secondo (l'orologio) va a finire in mezzo alla striscia, lontano dalla lingua. Il gruppo di
 * destra si stacca da solo col margine automatico, e allora i due di sinistra restano una
 * coppia. La regola c'era SOLO nel foglio in linea di `_cms.html`: cioè l'accostamento chiesto
 * da Dav valeva dove si carica quello e non altrove. Trovata misurando, non leggendo — nella
 * prova l'orologio è uscito a 173px con la lingua a 14px. Le due strade ora dicono la stessa
 * cosa. */
.wdg-ub-right { margin-inline-start: auto; }
/* 🔴 LA MISURA NON È DECORAZIONE: le bandiere sono `<img>` di SVG che dichiarano
 * `viewBox="0 0 640 480"`, cioè senza width/height uscirebbero larghe mezzo schermo e
 * spaccherebbero la barra. Erano caratteri emoji (li dimensionava `font-size`) e ora sono
 * immagini nostre, quindi la misura va detta qui.
 * Tonda e `object-fit:cover` come le altre bandiere di casa (`.tb-flag-r`): la stessa cosa si
 * disegna in un modo solo. 16px perché questa striscia è sottile per definizione — la barra
 * misura 33px in tutto, misurato sul vivo. `flex:none` così non si schiaccia quando la voce
 * dell'elenco ha un nome di lingua lungo. */
.wdg-ub-flag { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: cover; }

/* ── L'INTESTAZIONE: marchio a sinistra, azioni a destra ── */
.wdg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 14px;
  min-height: 48px;
}
.wdg-brand { font-size: 20px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.wdg-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* i due bottoni Accedi/Registrati non devono spezzarsi a metà parola: era il motivo per cui
   nell'angolo sembravano due riquadri accavallati invece di due bottoni in fila. */
.wdg-header-actions .btn { white-space: nowrap; }
.wdg-balance { font-weight: 700; white-space: nowrap; }
/* IL BLOCCO DEL CONTO nella testata composta (Dav, 03/08 21:48): username sopra, e sotto la
   riga [icona account] [saldo]. Sono due righe dentro l'altezza che la testata ha già: il
   nome è piccolo e smorzato, la cifra tiene il peso che aveva prima.
   ⚠️ Solo `.wdg-acct*`: `.wdg-balance` non cambia, perché foglio e script la cercano per nome. */
.wdg-acct { display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; gap: 1px; }
.wdg-acct-user { font-size: .74rem; opacity: .7; max-width: 14ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.wdg-acct-row { display: inline-flex; align-items: center; gap: 5px; }
.wdg-acct-row .wdg-nav-ic { width: 15px; height: 15px; flex: 0 0 auto; }
/* Sotto i 560px la testata è già stretta: il nome sparisce e resta la cifra, che è la cosa
   per cui si guarda lì. Alzare la testata di una riga su ogni pagina del telefono non è
   quello che Dav ha chiesto — l'ha chiesto guardando il desktop. */
@media (max-width: 560px) { .wdg-acct-user { display: none; } }

/* I CAMPI DI ACCESSO IN LINEA (come il sito di riferimento). Solo struttura: misura e
   allineamento. Sotto i 900px spariscono — due campi in una testata stretta non ci stanno, e
   lì il bottone «Accedi» torna a essere l'unica via, che è quella che funziona sul telefono. */
/* i bottoni delle zone nostre: forma qui, colore nel tema */
.wdg .btn, .wdg-header-actions .btn, .wdg-login-inline .btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.wdg-login-inline { display: flex; align-items: center; gap: 6px; margin: 0; }
.wdg-login-inline .input-box { width: 130px; min-width: 0; padding: 6px 9px; }
.wdg-login-inline + .btn { display: none; }        /* col form in linea il bottone è di troppo */
@media (max-width: 900px) {
  .wdg-login-inline { display: none; }
  .wdg-login-inline + .btn { display: inline-flex; }
}

/* ══════════════════════ GLI STILI DELL'HEADER (strada C, Dav 02/08) ══════════════════════
 * Un solo widget `header_bar`, e l'opzione «stile» sceglie la variante. Qui c'è SOLO la FORMA di
 * ognuna — disposizione, misura, scorrimento. Nessun colore: quello resta del tema, come tutto il
 * resto di questo foglio. Le varianti condividono i pezzi vivi (`_brand`,`_auth`,`_lang`,
 * `_search`,`_sports_inline`); cambia la griglia in cui vivono, non i dati.
 */

/* La RICERCA in testata (variante «classica con ricerca»): cresce fino a un tetto e sta al
 * centro; sotto i 720px sparisce (in una barra stretta la ricerca vive nella pagina). */
.wdg-header-search { display: flex; align-items: center; gap: 6px; flex: 1 1 240px;
  max-width: 420px; min-width: 0; margin: 0; }
.wdg-header-search-in { flex: 1 1 auto; min-width: 0; padding: 7px 10px; }
.wdg-header-search-go { flex: 0 0 auto; }

/* La LINGUA nella testata (varianti «doppia» e «centrata»): stessa meccanica del selettore della
 * barra utility — <details> nativo, pannello in `position:absolute` per non allargare la barra. */
.wdg-header-lang { position: relative; }
.wdg-header-lang > summary { display: flex; align-items: center; gap: 4px; cursor: pointer;
  list-style: none; }
.wdg-header-lang > summary::-webkit-details-marker { display: none; }

/* «minimale»: marchio a sinistra, una sola azione a destra — la base già fa `space-between`,
 * qui si toglie solo l'eventuale a-capo per tenerla su una riga sola. */
.wdg-header--minimale { flex-wrap: nowrap; }

/* «doppia riga con barra utility»: due fasce impilate. Il padding torico va sulle righe interne,
 * non sul contenitore, così le due bande vanno da bordo a bordo. */
.wdg-header--doppia { flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  flex-wrap: nowrap; }
.wdg-header-utility { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 3px 14px; min-height: 26px; font-size: 12px; }
.wdg-header-utility-right { display: flex; align-items: center; gap: 10px; }
.wdg-header-main { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 8px 14px; min-height: 48px; }

/* «centrata col logo grande»: tre zone, il marchio grande al centro. La griglia 1fr auto 1fr
 * tiene il centro centrato davvero anche quando i due lati hanno larghezze diverse. */
.wdg-header--centrata { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; }
.wdg-header-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wdg-header-side--start { justify-content: flex-start; }
.wdg-header-side--end { justify-content: flex-end; }
.wdg-header-center { display: flex; justify-content: center; align-items: center; min-width: 0; }
.wdg-header--centrata .wdg-brand { font-size: 28px; }
.wdg-header--centrata .wdg-brand-logo { max-height: 52px; }

/* «con menu sport in linea»: la riga principale, e sotto la fila degli sport che scorre. */
.wdg-header--menu-sport { flex-direction: column; align-items: stretch; gap: 0; padding: 0;
  flex-wrap: nowrap; }
.wdg-header--menu-sport .wdg-header-main { min-height: 44px; }
.wdg-header-sports { display: flex; align-items: center; gap: 4px; padding: 0 8px 6px;
  overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
.wdg-header-sports::-webkit-scrollbar { display: none; }
.wdg-header-sport { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  white-space: nowrap; font-size: 13px; font-weight: 600; }
.wdg-header-sport.on { font-weight: 800; box-shadow: inset 0 -3px 0 0 currentColor; }
/* 🔴 L'ICONA VA MISURATA, sempre. `.ico img` in `tb.css` è `width:100%`: dentro un contenitore
 * senza misura il pallone del calcio diventa alto quanto la fila — è il difetto «icone grandi
 * come palloni veri» di Dav (01/08), già curato per il menu laterale (`.wdg-sports-menu .ico`,
 * qui sotto) e ricomparso identico nella fila in testata. Misurato nel proof: 340px di pallone. */
.wdg-header-sport .ico { flex: 0 0 18px; width: 18px; height: 18px; }
.wdg-header-sport .ico img { width: 100%; height: 100%; object-fit: contain; }

/* «compatta mobile-first»: marchio a sinistra, saldo o un solo bottone a destra. Non nasconde
 * niente con un media query — non ci mette proprio il form in linea né la ricerca. */
.wdg-header--compatta { gap: 10px; flex-wrap: nowrap; }

/* I TELEFONI (390px): la ricerca in barra sparisce, il resto regge. La regola del contrasto e
 * quella dei 390px valgono su TUTTE le varianti perché il colore e la struttura di base sono
 * condivisi (`.wdg-header`, `.btn`, `.money`): le varianti cambiano la griglia, non i pezzi. */
@media (max-width: 720px) {
  .wdg-header-search { display: none; }
  .wdg-header-main { padding: 6px 10px; }
  .wdg-header--centrata .wdg-brand { font-size: 20px; }
  .wdg-header--centrata .wdg-brand-logo { max-height: 34px; }
}

/* ── IL MENU PRINCIPALE: una fila di voci, non una frase ── */
.wdg-topnav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 8px;
  min-height: 38px;
}
.wdg-topnav > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
}
/* l'icona della voce: misura fissa e colore ereditato (`currentColor` nell'SVG), così la
   stessa nav funziona su un tema scuro e su uno chiaro senza due set di icone.
   📏 15px, non 18 (Jesper, 04/08: «fai le icone svg del nav menu 15px per 15px, che sono troppo
   grandi fatte a 18px per 18px»). Misurato sul servito prima di cambiarle: uscivano davvero a
   18×18 su tutte e sette le voci.
   ⚠️ Tocca SOLO la nav. L'altra regola con lo stesso nome — `.wdg-btn-ico .wdg-nav-ic`, in
   fondo a questo foglio — veste i BOTTONI del conto, che lui non ha nominato: là restano 18px.
   Una richiesta su un pezzo non si allarga agli altri per simmetria. */
.wdg-nav-ic { width: 15px; height: 15px; flex: 0 0 15px; display: block; }

/* la voce attiva si vede col PESO e con una riga sotto, non con un colore: il colore è del
   tema, e un tema che colora `.on` a modo suo continua a funzionare sopra questa regola. */
.wdg-topnav > a.on { font-weight: 800; box-shadow: inset 0 -3px 0 0 currentColor; }

/* ── I TELEFONI: il menu scorre invece di impilarsi in dieci righe ── */
@media (max-width: 720px) {
  /* ⚠️ `min-width: 0` NON È DECORATIVO: senza, un contenitore flex non scende sotto la
     larghezza del suo contenuto, quindi `overflow-x: auto` non contiene niente e a spingere è
     la PAGINA. L'e2e l'ha beccato a 390px appena ho aggiunto le icone alla nav — le voci sono
     diventate più larghe e il menu ha portato con sé tutto il documento. */
  .wdg-topnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    min-width: 0; max-width: 100%; }
  .wdg-topnav::-webkit-scrollbar { display: none; }
  .wdg-header { padding: 6px 10px; }
  .wdg-brand { font-size: 17px; }
}

/* ══════════════════════ IL PIÈ DI PAGINA ══════════════════════
 * Angelo, 31/07, incollando quello che vedeva: «c'è tutta questa sezione rotta nel footer che
 * dovrebbero essere colonne credo» — e aveva ragione, era una lista sola in colonna, coi
 * pallini di sistema: Sport, Inizio, Tutti gli sport… fino a «Serve aiuto?», tutto di fila.
 *
 * ⚠️ Stessa causa della testata, ed è il motivo per cui sono nello stesso foglio: `.wdg-fl-*` e
 * `.wdg-legal-*` sono markup NOSTRO, generato dai widget, e nessun tema può conoscerle. Il
 * grafico disegna il suo footer; il nostro gli entra dentro senza una riga di stile e si
 * srotola. Le quattro colonne che l'operatore si aspettava sono già nel markup
 * (`section.wdg-fl-col`): mancava solo chi le mettesse in fila.
 *
 * Anche qui: nessun colore. La griglia è `auto-fit`, così le colonne diventano due sul tablet
 * e una sul telefono senza che nessuno decida un numero.
 */
.wdg-footer_links, .wdg-footer_legal { box-sizing: border-box; width: 100%; }

.wdg-fl-grid {
  display: grid;
  /* 165px e non 180: con la larghezza del footer del tema, a 180 le cinque colonne non ci
     stavano per una dozzina di pixel e «Assistenza» andava a capo da sola sotto «Sport»,
     lasciando mezzo footer vuoto. */
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 18px 24px;
  padding: 22px 16px;
}
.wdg-fl-col { min-width: 0; }
.wdg-fl-h { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
/* 🔴 I PALLINI: erano il segno più visibile che qui non era passato nessuno stile. Un elenco
   di navigazione non è una lista puntata — è una colonna di destinazioni. */
.wdg-fl-grid ul { margin: 0; padding: 0; list-style: none; }
.wdg-fl-grid li { margin: 0 0 7px; }
.wdg-fl-grid a { display: inline-block; font-size: 12.5px; line-height: 1.45; }

/* la riga in fondo: marchio, 18+, gioco responsabile */
.wdg-fl-base {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 16px;
  padding: 12px 16px; font-size: 12px;
}
.wdg-fl-brand { font-weight: 700; }
.wdg-fl-age { display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11px;
  font-weight: 700; }

/* ── IL BLOCCO LEGALE: distintivo a sinistra, testo al centro, strumenti a destra ── */
.wdg-footer_legal {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 18px 16px; font-size: 12px; line-height: 1.6;
}
.wdg-legal-badge { flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; min-width: 42px; height: 42px; border-radius: 50%;
  font-weight: 800; font-size: 15px; }
.wdg-legal-body { flex: 1 1 340px; min-width: 0; }
/* ⚠️ L'ALLINEAMENTO SI EREDITA, e il tema qui centra tutto: i tre paragrafi di legge uscivano
   centrati su tutta la larghezza, che è il modo più faticoso di leggere un testo lungo. È
   struttura (dove va il testo), non colore, quindi si può dire — e va detto, se no la riga
   sotto continua a partire da un punto diverso da quella sopra. */
.wdg-legal-body, .wdg-legal-side { text-align: left; }
.wdg-legal-body p { margin: 0 0 8px; }
.wdg-legal-lead { font-weight: 700; }
/* gli strumenti (limiti, autoesclusione, pausa) sono AZIONI messe in fila, non un elenco:
   incolonnate coi pallini sembravano la coda della lista di sopra. */
.wdg-legal-tools { display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 8px 0 0; padding: 0; list-style: none; }
.wdg-legal-tools li { display: inline-flex; align-items: center; }
.wdg-legal-side { flex: 0 1 240px; display: flex; flex-direction: column; gap: 8px; }
.wdg-legal-help { display: inline-flex; align-items: center; align-self: flex-start;
  padding: 7px 14px; border-radius: 8px; font-weight: 600; }

@media (max-width: 720px) {
  .wdg-fl-grid { gap: 14px 18px; padding: 18px 12px; }
  .wdg-footer_legal { padding: 14px 12px; }
}

/* ══════════════ I MENU DELLA BARRA LATERALE ══════════════
 * Angelo, 31/07, dopo che le zone della colonna hanno cominciato a portare i nostri dati: le
 * voci c'erano e i link funzionavano, ma MENU SPORT usciva come un blocco di testo di fila —
 * «Calcio Tennis Basket Pallavolo Hockey su ghiaccio Rugby…» — perché i nostri `<a>` sono
 * `inline` e il tema stila `li.widget-list-item`, che nel nostro markup non c'è.
 *
 * Stessa regola di sempre: qui solo la struttura (uno per riga, spaziatura), il colore resta
 * del tema. Sono le classi dei widget — `.wdg-sports-menu`, `.wdg-top-league`, `.wdg-live` —
 * che nessun grafico può conoscere.
 */
.wdg-sports-menu { display: flex; flex-direction: column; }
/* la voce sport: icona a sinistra, nome accanto — come il riferimento */
.wdg-sports-menu > .wdg-sport { display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; line-height: 1.3; }
.wdg-sports-menu .ico, .wdg-league-list .ico { flex: 0 0 20px; width: 20px; height: 20px;
  object-fit: contain; }

.wdg-league-list { display: flex; flex-direction: column; margin: 0; padding: 0;
  list-style: none; }
.wdg-league-list > li { margin: 0; }
.wdg-league-list a { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  line-height: 1.3; }
/* La riga spenta del pannello sta in `pannello_leghe.css`: la' arriva anche ai temi
   importati, qui no. (PM, 06/08) */
.wdg-league-name { flex: 1 1 auto; min-width: 0; }

/* la barretta col titolo di sezione dei nostri widget («Campionati top», «In diretta ora») */
.wdg .sec-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  font-weight: 700; }

/* le partite in diretta nella colonna: una sotto l'altra, non incolonnate a caso */
.wdg-live .matches { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.wdg-live .match { display: block; }
.wdg-live .match-top { display: block; padding: 4px 10px; line-height: 1.3; }

/* ══════════ LE TRE ZONE DEL CENTRO ══════════
 * Angelo, 31/07: «tutto layout sminchiato — pezzi senza css». Erano le ultime tre zone rimaste
 * senza una riga: `.wdg-hero` (la partita in evidenza), `.wdg-movers` (i tab + le quote) e
 * `.wdg-most-played`. Il difetto si vedeva come un riquadro nero alto e vuoto con una partita
 * che galleggia, e due elenchi di testo di fila.
 *
 * Stessa causa di testata, footer, barra laterale e casinò — markup nostro che il grafico non
 * ha mai visto — e stessa regola: qui la forma, il colore nel tema.
 */
.wdg-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 12px 14px; }
.wdg-hero-ev { display: flex; flex-direction: column; gap: 3px; flex: 1 1 260px; min-width: 0; }
.wdg-hero .odds { display: flex; flex-wrap: wrap; gap: 8px; }
.wdg-hero .odds form { margin: 0; }

.wdg-movers { padding-bottom: 8px; }
.mov-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; }
.mov-tab { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
/* 🔴 UN PANNELLO PER VOLTA. Il widget marca con `on` quello scelto dai tab e conta su noi per
   nascondere gli altri: senza questa riga si vedevano TUTTE e quattro le partite impilate, coi
   loro tab in cima che non sembravano fare niente — Angelo: «in evidenza è tutto sballato».
   Avevo stilato `.mov-body`, che nel markup non esiste: una classe sbagliata non dà errore da
   nessuna parte, semplicemente non veste niente. */
.mov-pane { display: none; padding: 4px 14px 10px; }
.mov-pane.on { display: block; }
.mov-ev { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.wdg-movers .odds { display: flex; flex-wrap: wrap; gap: 8px; }
.wdg-movers .odds form { margin: 0; }

/* i più giocati: le colonne del riferimento, una per partita */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; padding: 10px 14px; align-items: stretch; }
.mp-cell { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px; text-align: center; margin: 0; }
.mp-cell .lbl { font-size: 12px; line-height: 1.25; }
.mp-cell .px { font-size: 15px; font-weight: 800; }
@media (max-width: 560px) {
  .mp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* IL CONFRONTO DELLE QUOTE (Market Movers): due colonne, partenza e attuale. Solo forma. */
.mov-cmp { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 8px 14px 12px; }
.mov-cmp-col { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mov-cmp-tit { font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-right: 4px; }
.mov-old, .mov-new { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 6px; font-size: 12.5px; font-weight: 700; }
.mov-old b, .mov-new b { font-weight: 600; opacity: .8; }
.mov-new i { font-style: normal; font-size: 10px; }
/* il testo per chi usa un lettore di schermo: la direzione non può stare solo in una freccia */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* LA FASCIA ASSISTENZA (`help_band`) — Angelo 31/07: «sotto tenta la fortuna non si legge».
   Nella colonna del tema usciva come un riquadro bianco con due faccine e nessun testo
   leggibile: le voci sono `<a>` con emoji + etichetta, e senza una riga di layout finivano
   una sull'altra in 215px di larghezza. */
.wdg-help_band { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.hb-intro { display: flex; align-items: flex-start; gap: 8px; }
.hb-ico { flex: 0 0 auto; font-size: 18px; line-height: 1.1; }
.hb-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-title { font-size: 13px; font-weight: 700; }
.hb-sub { font-size: 11.5px; line-height: 1.35; }
.hb-links { display: flex; flex-direction: column; gap: 4px; }
.hb-links a { display: flex; align-items: center; gap: 7px; padding: 6px 8px;
  border-radius: 6px; font-size: 12.5px; line-height: 1.3; }
.hb-emo { flex: 0 0 auto; font-size: 15px; }
.hb-txt { min-width: 0; }

/* LA SPEZZATA DEL MARKET MOVERS. Forma soltanto: il tratto e la misura del riquadro. I colori
   delle linee stanno nel CSS del tema — sono una scelta d'aspetto, non di struttura. */
.mov-graf { margin: 0; padding: 6px 14px 10px; }
.mov-graf svg { display: block; width: 100%; height: 90px; }
.mov-linea { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; }
.mov-graf-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 6px;
  font-size: 11.5px; }
.mov-leg { display: inline-flex; align-items: center; gap: 6px; }
.mov-leg i { width: 14px; height: 3px; border-radius: 2px; background: currentColor; }

/* IL LOGO nell'intestazione a widget (Dav, 01/08). Solo misura: l'altezza la decide la barra,
   la larghezza segue in proporzione. Nessun colore — quello e' del tema.

   🔴 04/08 — IL LOGO LARGO USCIVA DAL SUO POSTO. Dav se l'era corretto da solo nel CSS della sua
   skin con `.wdg-brand-logo{width:100%}`, e il PM ha ragione a volerlo qui: una riga nel CSS di
   skin sparisce alla prima rigenerazione e il difetto torna senza che lui capisca perche'.
   Ma `width:100%` NON e' la riga giusta, ed e' misurato — tre loghi in un contenitore da 260px:

       regola             logo 1000x100      logo 300x67       logo 80x80
       oggi               340x34 ESCE        152x34            34x34
       width:100% (Dav)   260x26 ok          260x34 STIRATO    260x34 STIRATO
       max-width:100%     260x26 ok          152x34 uguale     34x34 uguale

   Cioe': la sua riga risolve il caso suo e DEFORMA tutti gli altri loghi — e siccome questo
   foglio veste ogni skin, avremmo scambiato il difetto di uno per il difetto di tutti.
   `max-width:100%` gli da' esattamente quello che voleva senza toccare nessun altro.
   `height:auto` + `object-fit:contain` tengono le proporzioni anche se un giorno qualcuno
   fissera' un'altezza. */
.wdg-brand-logo{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}

/* 🔴 LA MISURA DEL MARCHIO DEVE BATTERE QUELLA DELLA SKIN (06/08, Dav: «questa pagina si vede
   male»). Il foglio della skin 150 porta `.wdg-brand{font-size:100px}` — pensato per un
   marchio-immagine, non per il marchio-testo. La nostra riga 132 dice 20px, ma ha **la stessa
   specificità** (`0,1,0`): vince chi si carica dopo, e su alcune pagine è la skin.

   Il risultato, misurato sul servito di studio5 a 1440px:

       /player/                    marchio  79 px  (20px)   ← qui vinciamo noi
       /player/eventi-giorno/…     marchio  79 px  (20px)
       /player/eventi-giorno       marchio 387 px (100px)   ← qui vince la skin, e COPRE
                                                              le voci INIZIO e SPORT del menu

   Cioè la stessa testata usciva in due modi a seconda della pagina, e su quella che Dav guarda il
   marchio si mangiava il menu. Qui si dà a quella misura la specificità (`0,2,0`) per vincere
   ovunque, **senza cambiarne il valore**: 20px era e 20px resta, quindi le pagine che oggi stanno
   bene non si muovono di un pixel. */
.wdg-header .wdg-brand{font-size:20px}

/* 🔴 LE COLONNE DELLE PAGINE COMPOSTE CHE NON SONO LA HOME (06/08, Dav: «questa pagina si vede
   male»). `_colonne_apri.html` disegna `.cms-page` e le regioni anche fuori dalla home, ma le
   regole che le rendono una GRIGLIA vivevano solo nello `<style>` di `widgets/_cms.html` — e
   quelle pagine quello `<style>` non ce l'hanno (verificato sul servito: 0 occorrenze). Risultato
   misurato su `/player/eventi-giorno`:

       grid-template-columns: none      rail_left 1280 · main 1280 · rail_right 1280   pagina 3.529px
       con queste regole                     236 ·  716 ·  300                          pagina 2.260px

   cioè le tre regioni erano impilate a piena larghezza: nessuna barra laterale, nessun coupon a
   destra, e la lista sport che scendeva oltre lo schermo.

   ⚠️ La home NON si muove: il suo `<style>` porta le stesse identiche regole e viene DOPO questo
   foglio, quindi continua a vincere lui con gli stessi valori. Qui si dà una griglia a chi non ce
   l'aveva, non se ne cambia una a chi ce l'ha.

   📌 Le aree si dichiarano solo da 900px in su, come nell'originale: sotto, la pagina impila. E
   vale la lezione di stanotte — un figlio con `grid-area` che nomina un'area **inesistente** a
   quella larghezza fabbrica colonne implicite (è il difetto che rendeva «In diretta» invisibile
   sul telefono). Perciò le aree e i loro nomi stanno nella STESSA media query. */
.cms-page{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start;width:100%}
.cms-region{min-width:0;display:flex;flex-direction:column;gap:14px}

/* 🔴 A TUTTA LARGHEZZA COME LA HOME (Dav, 06/08: «questa pagina deve essere FULLWIDTH come la
   home, il sito deve mantenere sempre LO STESSO LAYOUT in tutte le pagine»).

   La causa, misurata sul servito di studio5 risalendo i genitori:

       home            .cms-page dentro `main.cms-full-main`   x0  1440px   (max-width:100%, 0 pad)
       eventi-giorno   .cms-page dentro `main.shell`           x80 1280px   (min(1320px), pad 20)

   Cioe' la home composta NON passa da `base.html`: la rende `widgets/_cms.html` col suo `main`
   a tutta larghezza, mentre ogni altra pagina sta nel `main.shell` che e' largo al massimo
   1320px e centrato. Stessa `.cms-page`, due contenitori diversi: il centro perdeva 160px
   (716 invece di 876) e la pagina risultava rientrata di 80px per lato.

   ⚠️ Si stringe la regola a `main.shell` CHE CONTIENE UNA PAGINA COMPOSTA: le pagine senza
   composizione (e le skin senza composizione — misurato su s1, che qui non ha `.cms-page`)
   restano nel loro `shell` di sempre. E la home non viene toccata: non ha `.shell` addosso.
   Verificato per iniezione prima di scrivere: home identica (x0 1440, colonne 236/876/300),
   eventi-giorno e quote-favorite da x80/1280 a x0/1440 con le STESSE colonne della home. */
main.shell:has(> .cols > .cms-page){width:100%;max-width:none;margin-inline:0;padding-inline:0}
@media(min-width:900px){
  .cms-page{grid-template-columns:var(--cms-cols,236px minmax(0,1fr) 300px);
    grid-template-areas:"header header header" "barra barra barra" "railL main railR" "footer footer footer"}
  .cms-header{grid-area:header}.cms-rail_left{grid-area:railL}.cms-main{grid-area:main}
  .cms-rail_right{grid-area:railR}.cms-footer{grid-area:footer}
}
@media(max-width:720px){.wdg-brand-logo{max-height:26px}}

/* ⏰ L'OROLOGIO della barra utility (Dav 03/08): cifre tabellari, così i numeri non ballano a ogni
 * secondo — un orologio che si allarga e si stringe mentre lo guardi si legge peggio di uno fermo.
 * Nessun colore: lo prende dalla barra che lo ospita. */
.wdg-ub-ora { font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }

/* Un bottone con l'icona dentro: icona e parola sulla stessa linea, e l'icona alla misura del
 * testo (mai `.ico` senza misura — è il difetto delle icone grandi mezzo schermo, curato tre
 * volte in un giorno). */
.wdg-btn-ico { display: inline-flex; align-items: center; gap: 6px; }
.wdg-btn-ico .wdg-nav-ic { flex: 0 0 18px; width: 18px; height: 18px; }

/* ── MARKET MOVERS: le tre vesti dell'opzione DESIGN (Dav, 04/08) ─────────────────────────────
 * `default` non ha regole sue: è il widget com'è sempre stato, e va bene così — una variante
 * che riscrive anche il caso normale è una riscrittura travestita da opzione.
 *
 * `line` — la colonna stretta. Gli stessi dati, una riga per esito invece dei blocchi affiancati:
 * il chip diventa largo quanto la colonna, con nome a sinistra e prezzo a destra. Serve dove il
 * widget sta in un rail da 236px, dove due blocchi affiancati diventano due francobolli — la
 * stessa lezione della griglia del casinò misurata oggi.
 * `graph` — la spezzata prima di tutto: si porta il grafico in cima al pannello e gli dà aria.
 * ⚠️ Se i campioni non ci sono il grafico NON viene reso dal template, e questa variante mostra
 * esattamente quello che mostrerebbe `default`: nessun riquadro vuoto col titolo «andamento».
 * Qui c'è solo struttura, nessun colore: il vestito è del tema. */
.wdg-movers--line .odds { flex-direction: column; align-items: stretch; }
.wdg-movers--line .odds form { width: 100%; }
.wdg-movers--line .odds .chip { width: 100%; justify-content: space-between; }
.wdg-movers--line .mov-cmp { flex-direction: column; gap: 4px; }
.wdg-movers--line .mov-tabs { flex-wrap: nowrap; overflow-x: auto; }

.wdg-movers--graph .mov-pane { display: none; }
.wdg-movers--graph .mov-pane.on { display: flex; flex-direction: column; }
.wdg-movers--graph .mov-graf { order: -1; }
.wdg-movers--graph .mov-graf svg { height: 140px; }

/* Il blocco che si toglie di mezzo quando la sua immagine esterna non arriva (vedi chrome.js).
   `!important` perché deve vincere sulle regole del tema del cliente: un banner rotto non è
   una questione di aspetto, è un buco in mezzo alla pagina. */
.tb-img-rotta{display:none!important}

/* LA BARRA SPORT DELLA PAGINA «IN DIRETTA» (Jesper 04/08) — solo STRUTTURA, mai colori: questo
   foglio è strutturale e su una pagina vestita vincerebbe sul tema del cliente. Il colore lo
   mette il tema, qui c'è la forma: una riga sola che scorre di lato invece di andare a capo,
   così su un telefono la barra resta alta una riga e non mangia la pagina delle partite. */
/* La barra vive nella sua AREA: senza, la griglia la manda in una riga implicita in
   fondo alla pagina — il difetto che Jesper ha visto sopra il footer. `grid-column`
   da solo non basta: dice quanto è larga, non in che riga sta.

   🔴 …MA SOLO DOVE QUELL'AREA ESISTE (06/08). Le aree della pagina composta sono dichiarate
   dentro `@media(min-width:900px)`; questa riga invece valeva **sempre**. Sotto i 900px l'area
   `barra` non c'è, e un `grid-area` che nomina un'area inesistente non viene ignorato: il
   browser crea **righe e colonne implicite** per ospitarlo. Misurato sul servito di studio5, in
   diretta:

       390 / 608 / 820 px   grid-template-columns: 0px 0px 362px   ← la colonna degli eventi è ZERO
       1440 px              1112px                                  ← a schermo largo tutto bene

   Cioè su **telefono e tablet** la lista delle partite era larga zero: restavano il coupon e la
   barra, e la pagina «In diretta» sembrava vuota. Non era il tennis e non era il palinsesto — era
   questa riga, e valeva su **tutte le skin composte**.

   📌 È lo stesso difetto del commento qui sopra, un gradino più giù: là un figlio **senza** area
   finiva in una riga implicita, qui un figlio **con** un'area che a quella larghezza non esiste
   ne fabbrica di nuove. La cura è la stessa: l'area si nomina dove l'area c'è. */
@media (min-width: 900px) {
  .cms-page>.lvb{grid-area:barra}
}
.lvb{display:flex;gap:6px;align-items:stretch;overflow-x:auto;scrollbar-width:thin;
     padding:6px 0;margin-block-end:8px}
.lvb-voce{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
          padding:6px 12px;border-radius:999px;border:1px solid currentColor;
          text-decoration:none;color:inherit;font-size:14px;opacity:.75}
.lvb-voce.on,.lvb-voce:hover{opacity:1}
/* Il numero è un dato, non una decorazione: resta leggibile anche quando la voce è spenta. */
.lvb-n{font-weight:700;font-size:.85em;opacity:.9}

/* LA FASCIA DEI GRUPPI sopra le colonne della tabella (Jesper 04/08): dice di che mercato sono
   le sigle sotto. Solo struttura — il colore lo mette il tema, come tutto in questo foglio. */
.tb-palinsesto .tb-gruppi th{font-size:.75em;letter-spacing:.04em;text-transform:uppercase;
                             opacity:.7;font-weight:700;padding-block:4px}
.tb-palinsesto .tb-gruppo{text-align:center;border-inline:1px solid currentColor}

/* ── L'OCCHIO CHE NASCONDE IL SALDO (Dav, 10/08) ──────────────────────────────
   Solo STRUTTURA, come tutto questo foglio: il bottone prende il colore di chi lo ospita
   (`currentColor`), così su una skin chiara è scuro e su una scura è chiaro senza saperne niente.

   📌 La barra sull'occhio (`.tb-occhio-x`) esiste sempre nel disegno e si accende solo quando il
   saldo è nascosto: due icone diverse sarebbero due SVG da tenere d'accordo, e prima o poi uno
   dei due resta indietro. */
.tb-occhio{display:inline-flex;align-items:center;justify-content:center;flex:none;
           width:30px;height:30px;padding:0;margin-inline-start:2px;
           background:none;border:0;border-radius:8px;color:inherit;cursor:pointer;opacity:.7}
.tb-occhio:hover,.tb-occhio:focus-visible{opacity:1}
.tb-occhio svg{width:19px;height:19px;display:block}
.tb-occhio .tb-occhio-x{opacity:0}
.tb-occhio--off .tb-occhio-x{opacity:1}
/* i punti al posto delle cifre: stessa larghezza a occhio, così la testata non balla quando si
   nasconde e si rimostra. */
.tb-saldo-punti{letter-spacing:.12em}

/* L'etichetta «live» accanto allo sport nel menu (Dav, 10/08). Solo struttura, come tutto questo
   foglio: il colore lo prende dal tema (`currentColor`) — un rosso scritto a mano qui entrerebbe
   nel disegno di 57 skin, e su una skin chiara sarebbe illeggibile. */
.wdg-sport-live{display:inline-flex;align-items:center;margin-inline-start:6px;padding:1px 6px;
  border:1px solid currentColor;border-radius:999px;font-size:9.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.5;opacity:.85;flex:none}