/* Generalised from raycin-stats-native's .rvs-track-preview / .rvs-spark-tooltip
   (assets/stats.css) — same visual language, one shared implementation instead
   of a copy per consuming plugin. */
:root {
  --rui-panel: #1a1d26; --rui-line: #282d3a; --rui-ink: #e8eaf0; --rui-ink-dim: #98a0b3;
  --rui-gold: #f6c90e;
}

.rui-peek {
  position: absolute; z-index: 9999; width: 220px;
  background: var(--rui-panel); border: 1px solid var(--rui-line); border-radius: 10px;
  padding: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .12s, transform .12s;
  font-family: 'Inter', system-ui, sans-serif;
}
.rui-peek.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.rui-peek img { display: block; width: 100%; height: 110px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rui-line); background: #0a0c12; }
.rui-peek .rui-peek-noimg { width: 100%; height: 110px; border-radius: 6px; border: 1px solid var(--rui-line); background: #0a0c12; display: flex; align-items: center; justify-content: center; color: var(--rui-ink-dim); font-size: 11px; }
.rui-peek-title { font-size: 13px; font-weight: 700; color: var(--rui-ink); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rui-peek-meta { font-size: 11.5px; color: var(--rui-ink-dim); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

/* Peekable badges — the trigger elements, e.g. a track/vehicle name mentioned inline */
.rui-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--rui-gold); background: rgba(246,201,14,.1); border: 1px solid rgba(246,201,14,.28); border-radius: 20px; padding: 1px 8px 1px 6px; margin-left: 4px; cursor: default; white-space: nowrap; vertical-align: middle; text-decoration: none; }
.rui-badge:hover { border-color: var(--rui-gold); }

/* Static inline help tooltip — same card, no image, populated directly
   from a data attribute rather than fetched. */
.rui-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--rui-line); color: var(--rui-ink-dim); font-size: 10px; font-style: italic; font-family: Georgia, serif; cursor: help; vertical-align: middle; margin-left: 4px; }
.rui-help:hover { background: var(--rui-gold); color: #1a1305; }
.rui-peek.rui-help-peek { width: auto; max-width: 260px; }
.rui-peek.rui-help-peek .rui-peek-text { font-size: 12.5px; color: var(--rui-ink); line-height: 1.5; }