/* ════════════════════════════════════════════════════════════════════════════
   HEADER — INGRANAGGIO (preferenze) e BANDIERINA (lingua/fuso), popover del
   player. Era un <style> inline dentro theme_family/lingua.html: spostato qui
   (regola Dav: CSS in file, mai inline) quando l'ingranaggio ha preso il blocco
   «Orologio e fuso» e la lista lingue i codici-bandiera (Angelo 24/07).
   Servito su ogni pagina /player via FOGLI (dopo il CSS del tema: vince).
   ──────────────────────────────────────────────────────────────────────────── */

/* DA LOGGATO l'header è quello del TEMA (icone .hu-ic) e la nostra pill lingua è nascosta
   (il tema ha già la sua bandiera): resta la nostra ⚙ rotellina, vestita come icona-pillola
   del tema, centrata, col pannello sempre sopra tutto. Scoped a .hd-top-header--right →
   non tocca la resa da sloggato. */
.hd-top-header--right .menu-list{display:inline-flex;align-items:center;flex:0 0 auto}
/* 🔴 LA ROTELLINA SPORGEVA DI 10px FUORI DALLO SCHERMO — carta `D/MENU-ACTIVATOR-da-telefono…`,
   aperta il 13/08 e rimisurata SEI volte in cinque giorni senza che nessuno cambiasse una riga.
   Il tema dà a questo `.menu-list` una larghezza di 35px; la nostra pillola ne misura 55 (17 di
   icona + 3 di gap + 18 di imbottitura). I 20 in eccesso escono a destra perché lo slot non taglia
   (`overflow-x:visible`), e siccome il suo bordo destro sta a 10px dal bordo dello schermo, DIECI
   di quei venti finiscono fuori: a 320 · 390 · 430px la stessa identica cifra, sempre dallo stesso
   lato, cioè il 18% del bersaglio del dito tagliato via.
   👉 La cura è dare allo slot la larghezza di quello che ci sta dentro: la pillola resta larga 55
   e si sposta a sinistra di 20, dentro lo schermo.
   🧪 PROVATA INIETTANDOLA SULLA PAGINA VIVA PRIMA DI SCRIVERLA (7 larghezze × 2 pagine, da conto
   di prova dichiarato): 14 misure su 14 dentro con 10px di margine · zero elementi della testata
   che sforano, a destra E a sinistra · e l'ESCI premibile 5/5 in tutti i punti — che è il
   controllo della carta gemella `ESCI-COPERTO`, dove era proprio questa pillola a coprirlo.
   ⛔ L'altra strada della carta (stringere l'imbottitura a 3px) è stata misurata e funziona
   anch'essa — 42px, dentro di 3 — ma paga 13px di bersaglio: rimpicciolisce il bottone invece di
   dargli il suo posto. Scartata per quello, non per gusto.
   ⚠️ `!important` come i popover qui sotto, e per la stessa ragione: la larghezza dello slot è del
   tema, e senza si perde la cascata su una regola che non è nostra. */
.hd-top-header--right .menu-list{width:auto !important}
.hd-top-header--right .menu-list .menu-activator{display:inline-flex;align-items:center;gap:3px;
  padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.12);cursor:pointer;
  transition:background .15s;line-height:1}
.hd-top-header--right .menu-list .menu-activator:hover{background:rgba(255,255,255,.22)}
.hd-top-header--right .menu-list .menu-activator .mdi{font-size:17px;line-height:1}
#menuPrefsHeader.tb-hd-pop{z-index:200 !important}

/* trigger nell'header: pillole coerenti, non icone nude */
.tb-hd-trig{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);cursor:pointer;font-weight:700;transition:background .15s;
  white-space:nowrap}
.tb-hd-trig:hover{background:rgba(255,255,255,.22)}
.tb-hd-pop{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:14px;
  box-shadow:0 14px 40px rgba(10,25,45,.30);width:288px;z-index:70;color:#1c4267;
  overflow:hidden}

/* i pannelli header si ancorano al loro trigger e si aprono verso SINISTRA: così non escono
   mai dal bordo destro (era quello a tagliare «Americane», «Completo»). `!important` +
   `left:auto` battono la regola del tema (.menu-list--submenu); `max-width` li tiene dentro
   il viewport. Sempre fuori-flusso (absolute): un pannello chiuso non allarga la riga
   dell'header — era quello a far scrollare la pagina di lato (~82px a 1280). */
.menu-list--language .tb-hd-pop, #menuPrefsHeader{position:absolute !important;right:0 !important;
  left:auto !important;top:calc(100% + 8px);max-width:calc(100vw - 24px)}
/* il tema clampa i submenu a ~350px e la lista lingue usciva TAGLIATA a 5 righe: il pannello
   può crescere fino al viewport, e a scrollare — se serve — è la lista, non il pannello. */
#menuLanguageHeader{max-height:calc(100vh - 90px) !important;overflow:visible}
#menuLanguageHeader ul{max-height:calc(100vh - 240px) !important}
/* i contenitori del selettore non devono mai sforare: se lo spazio è poco, si stringono. */
.menu-list--language, .menu-list--language .tb-hd-trig{max-width:100%;min-width:0}
/* B54: overflow orizzontale @1280 (QA di D). Sotto i 1360 si sacrifica la SIGLA lingua
   (bandiera e orologio restano): l'ORA DEL SITO è sempre visibile (Angelo 25/07 —
   prima qui si nascondeva #tbClock). `overflow-x:clip` toglie definitivamente lo
   scroll orizzontale senza toccare quello verticale. */
@media (max-width:1360px){ .menu-list--language .tb-lang-abbr{display:none} }
html, body{ overflow-x:clip }

.tb-hd-pop *{color:#1c4267}
.tb-hd-pop .ttl{font-size:.7em;font-weight:800;letter-spacing:.07em;opacity:.6;
  text-transform:uppercase;margin:14px 16px 6px}
.tb-hd-pop select{width:calc(100% - 32px);margin:0 16px;border:1px solid rgba(28,66,103,.3);
  border-radius:9px;padding:8px 10px;background:#fff;font-weight:600}
/* le tendine che seggono ACCANTO a una scritta (Vista mercati, Fuso orario) non prendono
   tutta la riga: si stringono sul contenuto e vivono nella stessa riga dell'etichetta. */
.tb-hd-pop label.sel{display:flex;gap:8px;align-items:center;margin:4px 16px;font-weight:600}
.tb-hd-pop label.sel select{flex:1;width:auto;margin:0;min-width:0}

/* il FORMATO QUOTE: bottoni segmentati, non una tendina */
.tb-seg{display:flex;gap:5px;margin:0 16px;flex-wrap:wrap}
.tb-seg label{flex:1 1 30%;text-align:center;border:1px solid rgba(28,66,103,.28);border-radius:9px;
  padding:8px 4px;font-weight:800;cursor:pointer;font-size:.85em;transition:all .12s}
.tb-seg label small{display:block;font-weight:600;opacity:.55;font-size:.82em}
.tb-seg input{display:none}
.tb-seg input:checked+span, .tb-seg label:has(input:checked){background:linear-gradient(135deg,#1c4267,#276aa6);color:#fff;border-color:transparent}
.tb-seg label:has(input:checked) small{opacity:.8;color:#fff}
.tb-hd-pop label.rad{display:inline-flex;gap:6px;align-items:center;margin:4px 0 4px 16px;
  cursor:pointer;font-weight:600}
.tb-hd-pop .salva{display:block;width:calc(100% - 32px);margin:14px 16px 16px;border:0;
  cursor:pointer;background:linear-gradient(180deg,#8cc63e,#7ab829);color:#fff !important;
  font-weight:900;border-radius:10px;padding:10px 0;letter-spacing:.04em}
.tb-hd-pop .salva:hover{filter:brightness(1.06)}

/* lingua: tab pieni, ricerca col bordo, righe con hover */
.tb-lang-tabs{display:flex;background:rgba(28,66,103,.07)}
.tb-lang-tabs span{flex:1;text-align:center;padding:11px 4px;font-weight:800;cursor:pointer;
  border-bottom:3px solid transparent;transition:all .12s}
.tb-lang-tabs span.on{background:#fff;border-bottom-color:#f60}
.tb-hd-pop input[type=text]{width:calc(100% - 32px);margin:10px 16px 4px;
  border:1px solid rgba(28,66,103,.3);border-radius:9px;padding:8px 12px;font-weight:600}
.tb-hd-pop ul{margin:4px 0 8px;padding:0;list-style:none;max-height:70vh;overflow-y:auto}
/* il nome sta ATTACCATO al codice (il tema mette justify space-between e lo spingeva
   al bordo destro: «IT ......... Italiano» non si legge come una riga sola) */
.tb-hd-pop li a{display:flex;align-items:center;justify-content:flex-start !important;
  gap:10px;padding:9px 16px;font-weight:600}
.tb-hd-pop li a:hover{background:rgba(39,106,166,.08)}
/* 🔴 `max-width:none` E `flex:none` NON SONO PIGNOLERIA: senza, la bandiera in testata esce
 * larga ZERO. Misurato sul servito (timerbet.digitaltre.com, skin 11 «24248»), ed è lo scatto
 * che ha mandato Dav il 04/08 — il quadratino vuoto accanto all'orologio è QUESTO.
 * La catena, tutta misurata: `.tb-hd-trig` si ritrova largo 18px con `padding:6px 9px`, quindi
 * la sua scatola di contenuto è 0; la reimpostazione del tema porta `img{max-width:100%}`, e
 * 100% di zero è zero. Risultato: `width:22px` qui sotto veniva scavalcato e l'immagine
 * spariva pur essendo ARRIVATA (`naturalWidth` > 0: non è un 404, non è un font).
 * ⚠️ Non si tocca il `min-width:0` qui sopra: è la correzione B54 dell'overflow a 1280, e
 * rimetterlo in discussione riaprirebbe quel difetto. Si rende INCOMPRIMIBILE la bandiera,
 * che è il pezzo che non ha senso rimpicciolire: una bandiera a 0px non informa nessuno. */
.tb-flag-r{width:22px;height:22px;max-width:none;flex:none;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(28,66,103,.15)}
/* Sotto i 900 la testata è davvero stretta e la bandiera incomprimibile chiede 6px che non ci
 * sono: si scende a 18px e ne restano 2. Stessa logica della riga qui sopra sulla sigla —
 * quando lo spazio finisce si sacrifica la DIMENSIONE, non la presenza. */
@media (max-width:900px){ .menu-list--language .tb-flag-r{width:18px;height:18px} }
.tb-lang-code{min-width:28px;font-weight:900;border-right:1px solid rgba(28,66,103,.2);
  padding-right:9px;font-size:.85em}

/* ── L'OROLOGIO FUORI DAL BOTTONE DELLA LINGUA (lavorazione 3-d, Dav 30/07 09:54) ──────────
   «Qui dove compare la lingua metti solo immagine della lingua. L'orario mettilo in un div a
   parte.» Il bottone apre la tendina delle lingue: tenerci dentro l'ora significava mettere
   un'informazione da leggere dentro un bersaglio da premere.
   Qui l'ora sta accanto, allineata alla stessa riga, e NON è cliccabile — così leggerla non
   apre più niente. Le misure sono quelle del resto della testata, non inventate. */
.menu-list--language + .tb-hd-clock,
.tb-hd-clock{display:inline-flex;align-items:center;padding:0 8px;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:.82em;line-height:1;white-space:nowrap;opacity:.9;cursor:default}
/* Sotto i 1360px la sigla della lingua era già nascosta per far stare la testata: l'ora resta,
   perché è un dato che serve a chi gioca (Angelo, 25/07) e occupa meno di una parola. */
@media (max-width:520px){ .tb-hd-clock{padding:0 5px;font-size:.78em} }