/* LE COLONNE DELLA PARTE CENTRALE della scheda evento — «Uno / Due / Tre» del cliente (06/08).
 *
 * Il gesto e la preferenza NON stanno qui: sono gia' del sito (`tbColPick`/`tbColApply` in
 * `_live_score_realtime.html`, chiave `event_cols` in `player_ui/prefs.py`). Qui c'e' solo il
 * VESTITO — il controllo e le colonne — perche' su studio5 mancava solo quello.
 *
 * ⛔ ZERO COLORI SCRITTI A MANO, nemmeno nei ripieghi: solo variabili della skin. Un ripiego
 * esadecimale scatta proprio dove la skin quel token non lo dichiara, cioe' dove il nostro
 * colore non c'entra niente — e non lo trova nemmeno la ricerca di «#».
 */

/* ══════════ LE COLONNE ══════════
 * Multi-colonna e non griglia: i mercati hanno altezze diversissime (un 1X2 e' tre chip, un
 * «punteggio esatto» ne ha trentasei) e le colonne CSS li impaginano da sole senza buchi.
 * `break-inside: avoid` e' la riga che tiene una card INTERA nella sua colonna: senza, un
 * mercato si spezza a meta' fra due colonne e le sue quote finiscono sotto un altro titolo —
 * cioe' un prezzo attaccato al mercato sbagliato. */
.qt-box--container { column-gap: 10px; }
.qt-box--container > .qt-box { break-inside: avoid; -webkit-column-break-inside: avoid; }
.qt-box--container[data-cols="1"] { columns: 1; }
.qt-box--container[data-cols="2"] { columns: 2; }
.qt-box--container[data-cols="3"] { columns: 3; }

/* ══════════ IL CONTROLLO ══════════ */
.tb-colpick { position: relative; float: inline-end; }
.tb-colpick-apri {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-s, 9px); cursor: pointer;
  color: var(--secondary-text, currentColor);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  background: var(--qt-background, transparent);
}
.tb-colpick-apri:hover { color: var(--primary-text, currentColor); }
.tb-colpick .pop {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 190px; padding: 10px; border-radius: var(--r, 12px);
  background: var(--primary-background, inherit);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.tb-colpick .pop.on { display: block; }
.tb-colpick .ttl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--secondary-text, currentColor); margin-bottom: 8px;
}
.tb-colpick .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tb-colpick .row button {
  padding: 7px 4px; border-radius: var(--r-s, 9px); cursor: pointer; font-weight: 700;
  font-size: 12.5px; color: var(--primary-text, currentColor);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  background: var(--qt-background, transparent);
}
/* la scelta attiva: si vede col colore dell'azione DELLA SKIN, mai col nostro */
.tb-colpick .row button.on {
  background: var(--btn-primary, currentColor);
  border-color: var(--btn-primary, currentColor);
  color: var(--btn-primary-text, var(--primary-background, inherit));
}
.tb-colpick .salva {
  display: block; width: 100%; margin-top: 9px; padding: 8px; cursor: pointer;
  border: 0; border-radius: var(--r-s, 9px); font-weight: 800; font-size: 12.5px;
  background: var(--btn-primary, currentColor);
  color: var(--btn-primary-text, var(--primary-background, inherit));
}

/* ══════════ SOTTO I 1100px: UNA COLONNA, E IL CONTROLLO NON C'E' ══════════
 * La soglia e' quella che l'implementazione di timerbet ha gia' («@media (max-width:1100px)
 * columns:1»): non se ne inventa una seconda.
 *
 * 🔴 E QUI IL CONTROLLO SPARISCE, deciso dal PM il 06/08. Sull'originale resta e non fa niente:
 * si preme «Tre» su un telefono e non cambia nulla. «Un'impostazione che non cambia niente e' un
 * bottone finto» — lo dice `player_ui/prefs.py` di se stesso. Chi lo preme pensa che sia rotto il
 * sito, non che sia una scelta. La preferenza resta ricordata e torna quando lo schermo si
 * allarga: non si perde niente, si smette solo di offrire una scelta che non esiste. */
@media (max-width: 1100px) {
  .qt-box--container[data-cols] { columns: 1; }
  .tb-colpick { display: none; }
}

/* ══════════ LA FRECCIA CHE APRE E CHIUDE LE QUOTE ══════════
 * Accanto al controllo delle colonne (il cliente, 06/08). Stessa forma del suo vicino: due bottoni
 * che stanno insieme e si comportano diversamente confondono piu' di due bottoni diversi.
 * ⛔ Zero colori scritti a mano, nemmeno nei ripieghi. */
.tb-apri-quote {
  float: inline-end; margin-inline-end: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-s, 9px); cursor: pointer;
  color: var(--secondary-text, currentColor);
  border: 1px solid var(--primary-border, rgba(128,128,128,.35));
  background: var(--qt-background, transparent);
}
.tb-apri-quote:hover { color: var(--primary-text, currentColor); }
/* chiuso: la freccia si gira. Il verso lo dice lo STATO, non un secondo bottone. */
.tb-apri-quote.tb-chiuso svg { transform: rotate(180deg); }
/* Il corpo di un mercato chiuso sparisce; il titolo resta, o non si saprebbe cosa si sta
   riaprendo. `.hidden` e' la classe che il gesto mette, la stessa del markup del tema. */
.qt-box--container > .qt-box > .card-b.hidden { display: none; }

/* 🔴 PUNTO 4 DEL cliente (07/08 20:06): i due bottoni — apri/chiudi quote e tendina delle colonne —
   «in basso a destra dentro .b-ev-live». La classe che ha nominato non esiste: quella vera e'
   `.tb-ev-live`, ed e' il frammento CONDIVISO con timerbet, che non si tocca. Percio' i bottoni
   restano dove sono nel markup e li porta qui il posizionamento: `.tb-ev-testa-wrap` avvolge la
   barra e la testata, la barra esce dal flusso e si appoggia in basso a destra del blocco.
   ⚠️ `position:relative` sul contenitore e non su `.tb-ev-live`: quello e' del frammento comune,
   e dargli una proprieta' da qui vorrebbe dire cambiarlo anche per timerbet dal foglio di casa. */
.tb-ev-testa-wrap{position:relative}
/* 🔴 il cliente, DUE FOTO E UNA CORREZIONE — e la seconda foto e' la specifica.
 *
 * 22:21, prima foto: freccia dai tre comandi (in basso a destra) verso un riquadro in alto a
 * sinistra. L'ho letta come «accanto alla riga Calcio · Torneo · punteggio» e li ho messi li'.
 * 23:29, seconda foto: *«ti avevo detto di metterli QUI»* — e mostra i comandi finiti DENTRO LA
 * PRIMA CARD DEL CAROSELLO (si vede l'icona delle colonne sopra «CA Tigre»), con la freccia che
 * porta a TRE RIQUADRI disegnati a mano **dentro la testata, sul lato DESTRO, nella fascia sotto
 * il punteggio** — all'altezza della riga «T1 T2».
 *
 * ⚠️ E il primo bersaglio l'ho mancato per una ragione precisa, non per distrazione: il carosello
 * era finito DENTRO `.tb-ev-testa-wrap`, che e' il sistema di riferimento di questi comandi. Col
 * carosello dentro, il wrap comincia piu' in alto e «in alto a sinistra» cade sopra la prima card.
 * ⇒ Curate tutt'e due: il carosello e' uscito dal wrap (`event.html`), e i comandi vanno dove li
 *   ha disegnati — a destra, sotto il punteggio, sopra la riga Formazioni/Statistiche/Posizioni.
 *
 * ⚠️ E QUI VA SCRITTO UN NUMERO CHE CAMBIA LA PROMESSA, misurato sul servito PRIMA di toccare
 * (studio5, sr:match:73746660):
 *
 *     1440px   testata 248px · la barra e' `position:absolute`, quindi FUORI DAL FLUSSO
 *              ⇒ spostarla non toglie un pixel: l'altezza la decide `.tb-ev-live` (bordo a 409),
 *                che e' il frammento CONDIVISO con timerbet e non si tocca.
 *      390px   testata 270px · la barra e' `static` (media query sotto i 700) e sta NEL FLUSSO:
 *              25px di altezza + 8 di margine ⇒ **li' 33px si recuperano davvero**.
 *
 * ⇒ Lo spostamento e' giusto e si fa: quello che cambia e' cosa promettiamo. Su desktop il
 *   guadagno e' di SPAZIO VISIVO (l'angolo in basso a destra si libera, il vuoto in alto si usa),
 *   non di altezza. L'altezza si recupera su telefono, ed e' scritto qui perche' nessuno vada a
 *   cercare due ore un accorciamento che a 1440 non puo' esistere. */
.tb-ev-testa-wrap > .tb-ev-barra{
  position:absolute; right:28px; bottom:52px; left:auto; top:auto; z-index:2;
  margin-block-end:0;                    /* annulla il margine in linea: fuori dal flusso non serve */
  display:flex; gap:6px; align-items:center;
}

/* ══════════ I TRE COMANDI SU UNA LINEA SOLA ══════════
 * 🔴 il cliente, 19/08 01:41: «invece ancora vedo che non sei riuscito a mettere questi 3 campi sulla
 * stessa linea come mai», con la riga rossa che parte dal segno delle statistiche in basso a
 * sinistra e sale fino ai due bottoni a destra. Misurato sul servito PRIMA (studio5,
 * sr:match:68096232, finestra 1280): il segno 442-463 (centro 452,5), i due bottoni 425-455
 * (centro 440) - **12,5 px di scarto**, cioe' tre bande diverse.
 *
 * La cura non e' un numero: il segno diventa il TERZO FIGLIO di questa barra, e tre figli di un
 * `flex` con `align-items:center` stanno sulla stessa linea per costruzione - qualunque cosa
 * cambi sopra. Qui resta solo da annullare il margine che il segno aveva da blocco in flusso.
 * ⛔ `margin-block-start` stava scritto in linea nell'html: e' stato tolto di la', non coperto da
 * qui. Una proprieta' dichiarata in due posti diverge al primo ritocco. */
.tb-ev-testa-wrap > .tb-ev-barra > .tb-ev-segno-stat{
  display:flex; align-items:center; margin:0; line-height:1;
}
/* Sotto i 700px la testata si stringe e i bottoni sopra il punteggio darebbero fastidio: tornano
   nel flusso, dove stavano prima. Meglio un comando che scende che un comando che copre.

   🔴 25/08 00:1x — QUESTA REGOLA C'ERA E NON COMANDAVA, e l'ho scoperto solo SCATTANDO a 390:
   i tre comandi finivano sopra la tabellina dei parziali. Chiesto a Chrome quali regole toccano
   quel `position`, in ordine:

       .body--single-event main.shell .feed.tb-scope .cms…   absolute   ← skin.css di studio5
       .tb-ev-testa-wrap > .tb-ev-barra                       absolute   ← il nostro foglio
       .tb-ev-testa-wrap > .tb-ev-barra   @media(max-width:700)  static  ← QUESTA, che perdeva

   Quattro classi contro due: vinceva la skin, e la media query non arrivava mai a parlare.
   ⛔ E la regola della skin NON si tocca: e' il foglio di un cliente. Si alza la specificita' di
   casa nostra, che e' l'unica parte che ci appartiene.
   ⚠️ LA CLASSE RIPETUTA E' VOLUTA, non un errore di battitura: `.a.a.a` vale tre classi e serve a
   superare le quattro della skin senza `!important`. Un `!important` qui chiuderebbe la porta
   anche a chi domani avra' una ragione legittima per spostarli — e la prossima battaglia si
   combatterebbe con due `!important`. ⛔ Chi "ripulisce" questa ripetizione rimette i bottoni
   sopra il punteggio su ogni telefono. */
@media (max-width:700px){
  /* 🔴 00:2x — E `position:static` NON BASTA, l'ho visto al secondo scatto: la skin vince
   * comunque sul `position`, e con `right/bottom:auto` la scatola si mette nella sua *static
   * position* — che qui e' l'inizio del wrap, cioe' **sopra la riga «Baseball · MLB»**. Tolta
   * una sovrapposizione, creata l'altra: i comandi coprivano l'icona info.
   * 👉 Quindi non si combatte sul `position`: si danno le COORDINATE. Sotto i 700px tornano
   *    dov'erano prima di tutto questo lavoro — in basso a destra — che e' lo stato che su
   *    telefono nessun cliente ha mai contestato. ⚖️ il cliente ha chiesto lo spostamento guardando
   *    il DESKTOP: la sua foto e' a 1600px, e la sua richiesta li' e' servita. */
  .tb-ev-testa-wrap.tb-ev-testa-wrap.tb-ev-testa-wrap > .tb-ev-barra.tb-ev-barra{
    right:8px; bottom:8px; left:auto; top:auto; justify-content:flex-end;
  }
}

/* ══ FORMAZIONI · STATISTICHE · POSIZIONI, A SINISTRA ══════════════════════════════════════
 * 🔴 il cliente, 25/08 00:23, terza foto: *«mettimi qui FORMAZIONI, STATISTICHE, POSIZIONI»*, con la
 * freccia che parte dalle tre voci (oggi al CENTRO, sotto il punteggio) e arriva a un riquadro
 * disegnato a SINISTRA, alla stessa altezza — la fascia libera sotto «Calcio · Primera LPF».
 * 📌 Nella stessa foto i tre comandi sono gia' a destra dove li voleva: quel pezzo e' a posto, e
 *    lo conferma lui.
 *
 * ⛔ E si sposta COL FOGLIO, non toccando il markup: le tre voci vivono in
 * `theme_family/intestazione_evento.html`, il frammento CONDIVISO che rende anche timerbet, e
 * `event.html` porta il divieto scritto («non si tocca»). E' la stessa strada gia' usata per i
 * tre comandi: restano dove sono nell'html, li porta qui il posizionamento.
 * ⚖️ Stessa fascia dei comandi (`bottom:52px`), lato opposto: cosi' le due file stanno sulla
 *    stessa linea per COSTRUZIONE e non per due numeri che si somigliano. */
/* 🔴 00:4x — LA PRIMA STESURA LE TOGLIEVA DAL FLUSSO (`position:absolute; bottom:52px`) E FINIVANO
 * SOPRA I PARZIALI. Visto guardando lo scatto: le etichette accavallate ai numeri degli inning,
 * illeggibili. E il motivo e' un inseguimento: togliendole dal flusso la testata si accorcia
 * (206 → 171), quindi il `bottom` a cui le avevo ancorate cade PIU' IN ALTO di dove l'avevo
 * misurato — dentro la fascia del punteggio. Ancorare una cosa a un contenitore che si accorcia
 * PERCHE' quella cosa e' uscita dal flusso e' una rincorsa che non finisce.
 *
 * 👉 E la sua freccia chiede uno spostamento ORIZZONTALE: stessa altezza, a sinistra. Quindi le
 *    voci RESTANO NEL FLUSSO — e si sposta solo l'allineamento della fila. Cosi' la testata non
 *    cambia altezza di un pixel e non c'e' niente da inseguire.
 * ⛔ E niente `position` in ballo: e' la terza volta stanotte che una battaglia sul `position`
 *    contro il foglio della skin produce una sovrapposizione diversa. */
.tb-ev-testa-wrap > .tb-ev-live .match-list--info-bottom{
  display:flex; justify-content:flex-start; align-items:center; gap:10px;
  padding-inline-start:12px;
}
/* ⬆️ il cliente, 25/08 00:47: *«METTILI PIU' SU come vedi nell'immagine»* — tre frecce che alzano le
 * voci nella stessa colonna, fino alla fascia della tabellina T1/T2, cioe' sulla riga dei tre
 * comandi a destra.
 *
 * 🔑 SI ALZA COL `transform`, NON TOGLIENDOLE DAL FLUSSO — ed e' la lezione di un'ora fa, scritta
 * nella carta: `position:absolute` le ha gia' mandate sopra i parziali, perche' uscendo dal flusso
 * la testata si accorcia (206 → 171) e il punto d'aggancio si sposta da solo. `translateY` muove
 * il DISEGNO e lascia il posto occupato: la testata resta 206px e non c'e' niente da inseguire.
 *
 * 📏 I 49px non sono a occhio: e' lo scarto MISURATO sul servito fra la riga dei comandi (top 492)
 *    e quella delle voci (top 542) a 1440. Alzandole di quello si allineano ai comandi, che e'
 *    esattamente la riga del riquadro che ha disegnato.
 * ⚠️ E le voci stanno a SINISTRA (x 11→320) mentre la tabellina dei parziali e' al CENTRO
 *    (x ~590): alla stessa altezza non si toccano. Misurato, non sperato.
 * ⛔ Sotto i 700px NON si alzano: li' lo scarto fra le due righe e' gia' 4px — sono di fatto sulla
 *    stessa linea — e sopra ci sono i parziali a 15px. Alzarle vorrebbe dire rifare la
 *    sovrapposizione che ho gia' pagato due volte stanotte. La foto del cliente e' a desktop. */
/* ✂️ il cliente, 25/08 01:13: *«a questo punto quel pezzo puoi rimuoverlo cosi' abbiamo piu' spazio»*,
 * con le X rosse sulla fascia VUOTA in fondo alla testata — quella rimasta dopo che le voci sono
 * salite.
 *
 * 🔴 E QUELLA FASCIA ERA IL LORO POSTO. Misurato: le voci sono l'ULTIMO figlio in flusso, alte
 * 21px, e il `transform` le disegnava 49px piu' su **lasciando occupato** lo spazio di prima —
 * fra il loro fondo visibile (513) e il fondo della testata (571) restavano 58px di niente. Il
 * `transform` era la scelta giusta per ALZARLE senza inseguire un aggancio; e' quella sbagliata
 * per RECUPERARE lo spazio, perche' per definizione non tocca il layout.
 *
 * ⇒ Stesso spostamento, altro strumento: `margin-block-start` negativo. Alza di 49px **e** toglie
 *   49px all'altezza del contenitore, perche' le voci sono l'ultimo figlio e tutto sotto risale.
 *   Resta nel flusso: nessun aggancio che si sposta, nessuna delle sovrapposizioni di stanotte.
 * ⚖️ E i 6px di respiro sotto non sono un vezzo: senza, il fondo della testata resterebbe a ~9px
 *   dalle voci e le linguette («Tutti · Principali…») si attaccherebbero al blocco sopra. Il cliente
 *   l'ha chiesto per nome, ed e' anche la ragione per cui non si azzera tutto e basta. */
/* 🔴 01:2x — IL MARGINE NEGATIVO IN CIMA HA TAGLIATO IL CONTENUTO. Con `-49px` la testata scendeva
 * davvero (191 → 148, −43) ma la **tabellina dei parziali restava fuori**: la seconda riga usciva
 * mozzata dal bordo. Il guadagno c'era e non era spendibile — e' il controllo che il PM aveva
 * chiesto per nome («non devono attaccarsi punteggio e linguette»), e qui era peggio: tagliava.
 *
 * ⇒ LE DUE COSE SI SEPARANO, perche' sono due domande diverse:
 *   · DOVE si vedono le voci  → `transform`, che sposta il disegno e non tocca il layout: e' quello
 *     che ha funzionato per «mettili piu' su» e non taglia niente;
 *   · QUANTO spazio occupa la coda → `margin-block-end` negativo, che accorcia il contenitore.
 *
 * 📏 E il numero non e' il 49 di prima: sotto il contenuto piu' basso in flusso (la tabellina,
 *    fondo a 527) e il fondo della testata (571) ci sono **44px** davvero vuoti. Tolti 36, ne
 *    restano 8 di respiro prima delle linguette. Togliere i 49 dell'alzata era chiedere al
 *    contenitore di stringersi piu' di quanto avanzasse. */
@media (min-width:701px){
  .tb-ev-testa-wrap > .tb-ev-live .match-list--info-bottom{
    transform: translateY(-49px);
    margin-block-end: -36px;
  }
}
/* Sotto i 700px la testata si stringe: le tre voci tornano dove stavano, nel flusso. La lezione
 * dei comandi vale identica — a 390 una fila spostata a mano finisce sopra qualcos'altro, e
 * l'ho gia' pagata due volte stanotte. ⚠️ Classe ripetuta per la stessa ragione scritta sopra:
 * il foglio della skin ha specificita' piu' alta e senza questo non comanderebbe. */
/* Sotto i 700px non serve piu' niente: restando nel flusso, le voci si comportano da sole. La
   regola che c'era qui rimetteva a posto un `position` che adesso non si tocca piu'. */

/* ── il cliente ① · LA BARRA «Generale · Evento singolo · Calendario», UNA SOLA VISIBILE ─────────────
 * Video del 24/08 18:34: la barra va NELLA COLONNA DESTRA. Sopra i 1080px la rende il blocco
 * `rail_top` (`base.html`), in cima ad `aside.rail-r`, sopra TV e coupon.
 *
 * 🔴 Sotto i 1080px quella colonna NON esiste: `tb.css:886` impila tutto in una colonna sola e
 * da' al rail `order:3`. Misurato sul servito a 390px: la barra atterrava a y1042, cioe' in
 * fondo alla pagina, dopo ogni mercato — mentre prima di oggi era in cima. E in cima deve
 * restare: e' una richiesta scritta del cliente (09/08 07:13, «il menu deve essere anche su
 * mobile»), e questo lavoro sposta la barra, non la decisione di chi l'ha chiesta.
 *
 * ⛔ NON si riordina il rail a mobile: dentro c'e' il coupon del giocatore, e `.rail-r .slip`
 * ha gia' il suo `order:-1`. Un `display:contents` sul rail avrebbe portato in cima anche quello.
 * 👉 Percio' il frammento sta in pagina due volte e se ne accende una per volta. Nessun `id`
 * dentro: due copie non si pestano i piedi. Il difetto da evitare e' l'opposto — vederle
 * TUTT'E DUE — ed e' per questo che il difetto di ciascuna e' `none`, non `block`. */
.msz-mob{display:none}
@media (max-width:1080px){
  .msz-desk{display:none}
  .msz-mob{display:block}
}

/* ── …e dentro 300px le parole ci devono STARE ────────────────────────────────────────────────
 * Effetto diretto dello spostamento: prima la barra era larga quanto la pagina, adesso e' larga
 * quanto il rail. Chiesto a Chrome sul servito (1500px), le tre etichette:
 *
 *     Generale      chiede 56px · ne ha 47   → ne mancano  9
 *     Evento singolo       75px ·      75    →             0   (va a capo, e sta)
 *     Calendario           67px ·      56    →            11
 *
 * Non e' il carattere: e' il PADDING. Sul servito ogni voce ha `12px 20px 2px` — 40px orizzontali
 * dentro una voce da 100 — e non sono i `6px` che si leggono in `menu_sezioni.css:76`: un'altra
 * regola vince. 👉 Misurate quattro leve col browser, a 10px il taglio e' gia' zero su tutt'e tre
 * e restano 21px di margine su «Calendario»: non e' il valore piu' stretto che funziona, e' il
 * piu' largo che basta.
 *
 * ⛔ NON si e' rimpicciolito il carattere: `menu_sezioni.css:107` lo vieta per iscritto («il modo
 * di far sparire il problema dalla vista senza risolverlo»), e a 390 quel foglio ha gia' scelto
 * di mandare a capo invece di scendere di corpo. Qui non serve nemmeno: le parole ci stanno.
 * ⛔ E si tocca solo `.msz-desk`, cioe' la copia che sta nel rail: la barra larga della pagina
 * «in diretta» e del calendario non e' nostra e non ha questo problema. Due classi bastano a
 * vincere senza `!important`. */
.msz-desk .msz-v{ padding-inline:10px; }