/* IL MENU ORIZZONTALE A TRE VOCI — Jesper 19 (09/08 07:00 · «anche su mobile», 07:13).
   Markup: player/templates/player/_menu_sezioni.html

   Sta su tre pagine: «in diretta», evento singolo live, calendario. Due sono nostre, la terza la
   fa un'altra lane — quindi il foglio deve arrivare da solo, senza che quella pagina si ricordi
   di collegarlo. Per questo entra nel pacchetto di casa E fra gli strutturali (`mobile.py`),
   come `betlist_struttura.css` prima di lui.

   ⚠️ SOLO STRUTTURA E IL SEGNO DELL'ACCESO. Niente fondi, niente gradienti, e nemmeno un
   colore di testo: quello si eredita dalla pagina (vedi `.msz-v`): su una skin col
   tema importato il vestito resta del tema, e questo foglio deve solo far stare in piedi il
   nostro markup — è la regola di `chrome_struttura.css`, scritta dopo che testata e menu erano
   usciti come testo nudo su una pagina vestita. */

.msz{
  /* 🔴 L'ACCENTO DELL'ACCESO È UN TOKEN NOSTRO, non uno del tema — e non è pignoleria:
     è un difetto MISURATO col browser sulla pagina servita di timerbet (09/08 08:0x).
     La prima versione diceva `color: var(--btn-primary, #f0801a)`, cioè «il colore del marchio,
     così una skin che lo cambia cambia anche questo». Sembrava la cosa giusta. Sul tema
     importato di timerbet i due token valgono questo:

         --btn-primary    → rgb(28, 66, 103)     ← il blu del tema
         --secondary-text → rgb(28, 66, 103)     ← LO STESSO blu
         --or             → non definito          (il ripiego non scattava mai: la var esiste)

     Cioè acceso e spento uscivano **identici**: le tre voci tutte dello stesso colore, e la
     voce attiva non diceva più dove sei — che è l'unica cosa che questo menu deve fare.
     ⚠️ E la regola vincente era la MIA: non è un problema di specificità, è che il valore
     dentro la variabile non era quello che credevo. Un `!important` non avrebbe cambiato nulla.
     👉 Quindi: token proprio, con un valore vero dentro. Una skin che vuole un altro accento
     scrive `--msz-on`: una riga, dichiarata — invece di scoprire per caso quale token del tema
     oggi contiene un arancione. */
  /* 🔴 09/08 08:5x — LA BARRA SI PORTA FONDO E INCHIOSTRO SUOI. Non è una scelta di gusto: è
     un difetto MISURATO. La versione di prima diceva `color:inherit` ragionando «il testo prende
     il colore che quella pagina usa già, così è leggibile contro il SUO fondo». Falso: eredita
     dall'ANTENATO, che non è per forza il fondo che si vede. Sul calendario di timerbet:

         testo ereditato   rgb(34, 79, 124)     blu
         fondo vero        rgb(28, 66, 103)     lo STESSO blu, un tono più scuro
         contrasto                 1.16 : 1     ← invisibile (WCAG AA chiede 4.5)

     Cioè il menu c'era nel markup e non si vedeva — e per chi guarda è identico a non esserci.
     È lo stesso difetto chiuso stanotte sul riquadro fedeltà, e Jesper l'ha visto nella foto
     prima che lo misurassi io.
     👉 Controllando ENTRAMBI i colori il contrasto non dipende più da quale antenato capita
     sopra: è una proprietà della barra. Ed è anche la barra del suo mockup — fondo scuro,
     etichette chiare, acceso arancione. Una skin che ne vuole un'altra sovrascrive i tre token. */
  --msz-fondo:#0e2c47;
  --msz-ink:#e8eef5;
  --msz-on:#ff8a1f;
  background:var(--msz-fondo);
  color:var(--msz-ink);
  display:flex;
  align-items:stretch;
  gap:0;
  border-bottom:1px solid rgba(255,255,255,.14);
  /* Il menu è una BARRA, non tre bottoni che galleggiano: occupa la riga intera e le tre voci
     se la dividono. Senza `width:100%` su un contenitore flex più largo le voci si stringono
     attorno al testo e «Calendario» finisce a metà pagina. */
  width:100%;
  margin:0 0 10px;
  /* ⛔ NIENTE `overflow-x:auto` qui: una barra di tre voci che scorre di lato è il modo in cui
     la terza voce diventa invisibile su un telefono. Le tre ci stanno — vedi il riquadro a 390
     in fondo — e se un giorno non ci stessero va cambiata la soluzione, non aggiunta una barra
     di scorrimento che nasconde il problema. */
}

.msz-v{
  /* Tre colonne uguali, sempre. `flex:1 1 0` + `min-width:0` è la coppia che le tiene uguali
     ANCHE quando un'etichetta è più lunga delle altre: con `flex-basis:auto` «Evento singolo»
     si prenderebbe metà barra e le altre due si schiaccerebbero. */
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:9px 6px 8px;
  text-decoration:none;
  /* Eredita da `.msz`, cioè dall'inchiostro che la BARRA si è dichiarata — non dalla pagina.
     È la differenza fra «un colore che di solito va bene» e «un colore misurato contro il fondo
     su cui finisce davvero». La differenza fra acceso e spento la fanno tre cose che non
     dipendono dal tema: opacità, peso, e la riga arancione sotto. */
  color:inherit;
  opacity:.72;
  font-weight:500;
  /* Il bordo dell'acceso è già qui, TRASPARENTE: così quando una voce si accende la riga non
     cresce di 3px e il contenuto sotto non salta. */
  border-bottom:3px solid transparent;
  text-align:center;
  line-height:1.15;
}

/* I separatori sono sul fondo NOSTRO, quindi si scrivono in chiaro qui e non con un token
   del tema: un `--primary-border` pensato per un fondo bianco su questa barra sparisce. */
.msz-v + .msz-v{ border-left:1px solid rgba(255,255,255,.12); }

.msz-ic{
  width:20px; height:20px;
  flex:none;
}

.msz-et{
  font-size:13px;
  /* 🔴 A 390 LE TRE VOCI STANNO, E NON PERCHÉ IL TESTO SIA STATO RIMPICCIOLITO.
     390 / 3 = 130px per voce, meno 12px di respiro = 118px utili. «Evento singolo» a 13px non
     ci sta su una riga (~95px «Evento», ~52px «singolo»): va a capo NELLO SPAZIO, in due righe
     da 13px che si leggono, invece di stare su una riga da 9px che non si legge.
     ⛔ La strada scartata è proprio quella: rimpicciolire il carattere finché la parola entra è
     il modo di far sparire il problema dalla vista senza risolverlo.
     📌 MISURATO, non sperato: 13px a 1440 e **12,5px a 390** (il riquadro in fondo), e a 390 le
     tre etichette chiedono 63 · 92 · 67 px dentro 130 px di voce — nessuna troncata, la barra
     non scorre di lato. Il mezzo punto in meno è respiro, non è la parola che non ci stava. */
  overflow-wrap:normal;      /* si spezza fra le parole, MAI dentro una parola */
  word-break:normal;
  hyphens:none;              /* niente sillabazione: «Calenda-rio» è peggio di due righe */
  /* Due righe di spazio riservate a TUTTE e tre, così l'etichetta che va a capo non alza la sua
     voce rispetto alle altre due. È l'allineamento che nella foto di Jesper si vede e non si
     nota: le tre icone sono sulla stessa linea. */
  min-height:calc(2 * 1.15em);
  display:flex;
  align-items:center;
}

/* L'ACCESO — la riga arancione sotto, come nel mockup di Jesper («Event view» acceso).
   TRE segnali insieme, non uno: piena opacità · grassetto · la riga arancione. Uno solo non
   basterebbe — il colore da solo non arriva a chi non distingue l'arancione dal blu, e il
   grassetto da solo si perde in mezzo a una barra di tre voci. Con tre, l'acceso si vede
   comunque, su qualunque fondo e con qualunque vista. */
.msz-v.on{
  opacity:1;
  font-weight:700;
  border-bottom-color:var(--msz-on);
}
.msz-v:hover{ opacity:1; }

/* La tastiera deve vedere dove si trova: senza questo il contorno del browser sparisce sotto il
   bordo della barra e chi naviga a TAB non sa più su quale voce sta. */
.msz-v:focus-visible{ outline:2px solid var(--msz-on); outline-offset:-2px; opacity:1; }

@media (max-width:480px){
  .msz-v{ padding:8px 4px 7px; gap:4px; }
  .msz-ic{ width:19px; height:19px; }
  /* ⚠️ 12.5px è il PAVIMENTO, non un ripiego: sotto i 12px un'etichetta di navigazione smette di
     essere leggibile a distanza di braccio. Se un domani servisse scendere sotto, la risposta
     giusta è cambiare le parole, non il corpo del carattere. */
  .msz-et{ font-size:12.5px; }
}