/*
 * Tooltips im FRF Brain (22.09.2026).
 *
 * Vorlage ist der Trade-Rechner: Die Beschriftung selbst ist der Auslöser,
 * es gibt kein Fragezeichen daneben. Wer darüberfährt (oder am Handy
 * antippt), sieht eine Karte mit einer kurzen Überschrift in Akzentfarbe und
 * darunter wenigen Zeilen Text.
 *
 * Dargestellt wird IMMER in der gemeinsamen Ebene `.value-tip-layer` am
 * <body> (utils.js, bindValueTooltips). Der Inhalt neben dem Anker ist nur
 * die Quelle — in Tabellen mit `overflow-x: auto` würde er abgeschnitten.
 *
 * Aufbau eines Inhalts:
 *   <strong>Überschrift</strong>
 *   <span class="tip-zeile">Eine Aussage.</span>   (beliebig viele)
 *   <span class="tip-quelle">Quelle · Stand</span>  (optional, zuletzt)
 */

/* ── Auslöser ─────────────────────────────────────────────────────────── */

.help-label {
  cursor: help;
  text-decoration: none;
  transition: color var(--t-fast, 120ms) ease;
}

.help-label:hover,
.help-label:focus-visible {
  color: var(--c-blue, var(--th-text-60a5fa));
  text-decoration-color: currentColor;
}

.help-label:focus-visible {
  outline: 2px solid var(--c-blue, var(--th-linie-60a5fa));
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Inhalt neben dem Anker: nie selbst anzeigen ─────────────────────── */

.ranking-tooltip-content,
.help-label:hover + .ranking-tooltip-content,
.help-label:focus + .ranking-tooltip-content,
.value-tip:hover + .ranking-tooltip-content,
.value-tip:focus + .ranking-tooltip-content,
.ranking-tooltip:hover + .ranking-tooltip-content,
.ranking-tooltip:focus + .ranking-tooltip-content,
.table-tabs-nav .value-tip:hover + .ranking-tooltip-content,
.table-tabs-nav .value-tip:focus + .ranking-tooltip-content {
  display: none !important;
}

/* ── Die Karte ────────────────────────────────────────────────────────── */

.value-tip-layer,
.depeg-tip-layer {
  width: max-content;
  max-width: min(calc(100vw - 24px), 380px);
  /* Keine Höhenbegrenzung, kein Scrollen (23.09.2026): die Texte sind kurz
     gehalten; showValueTip() setzt die Karte ganz ins Fenster. */
  overflow: visible;
  padding: 14px 16px;
  border: 1px solid var(--border-2, var(--th-rand-94a3b8-22));
  border-radius: 10px;
  background: var(--surface-2, var(--th-grund-141821));
  box-shadow: 0 12px 36px var(--th-schatten-000000-45);
  color: var(--text-1, var(--th-text-e6e8ec));
  font-family: var(--frf-font);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}

.value-tip-layer > strong:first-child,
.depeg-tip-layer > strong:first-child {
  display: block;
  margin: 0 0 6px;
  color: var(--c-blue, var(--th-text-60a5fa));
  font-size: 13px;
  font-weight: 650;
}

/* Weitere Zwischenüberschriften innerhalb einer Karte. */
.value-tip-layer > strong:not(:first-child),
.depeg-tip-layer > strong:not(:first-child) {
  display: block;
  margin: 10px 0 2px;
  color: var(--text-1, var(--th-text-e6e8ec));
  font-size: 13px;
  font-weight: 650;
}

.value-tip-layer .tip-zeile,
.depeg-tip-layer .tip-zeile {
  display: block;
}

.value-tip-layer .tip-zeile + .tip-zeile,
.depeg-tip-layer .tip-zeile + .tip-zeile {
  margin-top: 4px;
}

.value-tip-layer .tip-quelle,
.depeg-tip-layer .tip-quelle {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-1, var(--th-rand-94a3b8-14));
  color: var(--text-3, var(--th-text-8b93a1));
  font-size: 12px;
}

/* Kennzahlen innerhalb einer Karte (Wertetooltips): Name links, Wert rechts. */
.value-tip-layer .tip-wert,
.depeg-tip-layer .tip-wert {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-variant-numeric: tabular-nums;
}

.value-tip-layer .tip-wert > b,
.depeg-tip-layer .tip-wert > b {
  color: var(--text-1, var(--th-text-e6e8ec));
  font-weight: 600;
}

/* Zellen mit `data-tip` (z. B. Stability im FR Vergleich): der Wert selbst
   ist der Auslöser. Keine Unterstreichung (Nutzerwunsch 23.09.), erkennbar
   am Hilfe-Cursor. */
[data-tip] {
  cursor: help;
  text-decoration: none;
}

/* Formel in einer Karte (25.09.2026, z. B. realisierte APR in Fundingrates):
   abgesetzt vom Fließtext, damit sie als Rechenweg lesbar bleibt. */
.value-tip-layer .tip-formel,
.depeg-tip-layer .tip-formel {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 2px solid var(--c-blue, var(--th-rand-60a5fa));
  border-radius: 0 6px 6px 0;
  background: var(--surface-3, var(--th-grund-94a3b8-08));
  color: var(--text-1, var(--th-text-e6e8ec));
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

/* ── Reiter-Erklärungen (26.09.2026) ─────────────────────────────────── */
/* Eigene, schmalere Karte über der Kopfleiste und ihren Gruppen-Listen. */
.reiter-tip-layer {
  position: fixed;
  z-index: 1100;
  max-width: min(calc(100vw - 24px), 300px);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  pointer-events: none;
}