/* Tooltip del player (partial _tooltip.html)
   Estratto dal partial (regola di casa Dav 22/07: il CSS sta in un .css
   collegato con <link> nell'head, mai in <style> nel template).
   Design D. */

/* la bolla vive su un pseudo-elemento: zero nodi in più nel DOM di B */
  .tb-tip { position: relative; }
  .tb-tip[data-tb-tip]::after,
  .tb-tip[data-tb-tip]::before {
    position: absolute; left: 50%; bottom: 100%;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    transform: translate(-50%, 4px); z-index: 60;
  }
  /* la bolla.
     ⚠️ CONTRASTO: la bolla è CROMO, colori FISSI (non var di tema). Il tema chiaro
     del prematch definisce `--ink:#1c2733` (scuro): usarlo qui dava testo scuro su
     bolla scura = illeggibile (segnalazione Angelo). Qui fondo scuro + testo chiaro,
     garantiti su ogni skin. */
  .tb-tip[data-tb-tip]::after {
    content: attr(data-tb-tip);
    margin-bottom: 9px;
    max-width: min(240px, 86vw); width: max-content;   /* mai più largo dello schermo */
    padding: 7px 10px; border-radius: 8px;
    background: #0c2740;
    color: #f2f8ff;
    border: 1px solid #1c4f78;
    border-top: 2px solid #ff7900;   /* filo del brand */
    box-shadow: 0 8px 22px rgba(2, 12, 22, .55);
    font: 600 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .01em;
    text-align: center; white-space: normal; overflow-wrap: anywhere;
  }
  /* la freccina — un rombo ruotato, stesso fondo e bordo della bolla */
  .tb-tip[data-tb-tip]::before {
    content: ""; margin-bottom: 4px;
    width: 9px; height: 9px; transform: translate(-50%, 4px) rotate(45deg);
    background: #0c2740;
    border-right: 1px solid #1c4f78;
    border-bottom: 1px solid #1c4f78;
  }
  /* comparsa su hover E focus (tastiera / tap mobile) */
  .tb-tip[data-tb-tip]:hover::after,
  .tb-tip[data-tb-tip]:hover::before,
  .tb-tip[data-tb-tip]:focus-visible::after,
  .tb-tip[data-tb-tip]:focus-visible::before,
  .tb-tip[data-tb-tip].is-tip-open::after,
  .tb-tip[data-tb-tip].is-tip-open::before {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
  .tb-tip[data-tb-tip]:hover::before,
  .tb-tip[data-tb-tip]:focus-visible::before,
  .tb-tip[data-tb-tip].is-tip-open::before {
    transform: translate(-50%, 0) rotate(45deg);
  }

  /* variante che scende (header colonne mercato, in cima alla pagina) */
  .tb-tip[data-tb-tip-pos="down"]::after,
  .tb-tip[data-tb-tip-pos="down"]::before { bottom: auto; top: 100%; }
  .tb-tip[data-tb-tip-pos="down"]::after { margin: 9px 0 0; }
  .tb-tip[data-tb-tip-pos="down"]::before {
    margin: 4px 0 0; border: 0;
    border-left: 1px solid var(--line, #16496b);
    border-top: 1px solid var(--line, #16496b);
  }

  /* nome troncato: l'ellissi vive sull'inner .tb-trunc (che PUÒ clippare, non porta la
     bolla); il wrapper .tb-tip resta senza overflow, così la bolla non viene ritagliata. */
  .tb-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: block; max-width: 100%; min-width: 0; }
  .tb-tip:has(> .tb-trunc) { display: block; min-width: 0; }
  .tb-tip[data-tb-tip] .tb-trunc { cursor: help; }

  /* ANCORAGGIO ORIZZONTALE per le celle a filo schermo: la bolla si aggancia al
     bordo sinistro (start) o destro (end) dell'elemento invece di centrarsi, così
     non esce dallo schermo e non viene tagliata. La FRECCIA resta centrata sulla
     cella (punta sempre al numero). Lo mette chi conosce la colonna (prematch:
     prima colonna=start, ultima=end; vedi prematch.css). */
  .tb-tip[data-tb-tip][data-tb-tip-align="start"]::after { left: 0; right: auto; transform: translate(0, 4px); }
  .tb-tip[data-tb-tip][data-tb-tip-align="end"]::after   { left: auto; right: 0; transform: translate(0, 4px); }
  .tb-tip[data-tb-tip][data-tb-tip-align="start"]:hover::after,
  .tb-tip[data-tb-tip][data-tb-tip-align="start"]:focus-visible::after,
  .tb-tip[data-tb-tip][data-tb-tip-align="start"].is-tip-open::after,
  .tb-tip[data-tb-tip][data-tb-tip-align="end"]:hover::after,
  .tb-tip[data-tb-tip][data-tb-tip-align="end"]:focus-visible::after,
  .tb-tip[data-tb-tip][data-tb-tip-align="end"].is-tip-open::after { transform: translate(0, 0); }

  @media (prefers-reduced-motion: reduce) {
    .tb-tip[data-tb-tip]::after, .tb-tip[data-tb-tip]::before { transition: none; }
  }