/* ---- one tooltip look for the whole Speed Radar page (ui/tooltip.mjs; chart crosshair tips) ----
   Dark, slightly translucent glass with a thin green edge and light text, the C dot-matrix palette.
   No backdrop blur; a short fade-in only, removed by reduced motion and the page's effects switch. */
:root { --tip-bg: rgba(4, 10, 7, .95); --tip-line: rgba(57, 255, 136, .42); --tip-ink: #d6e8dc; --tip-radius: 6px;
  --tip-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .35); }

.ui-tip { position: fixed; left: 0; top: 0; z-index: 60; max-width: min(340px, calc(100vw - 16px)); padding: 6px 10px 7px;
  border: 1px solid var(--tip-line); border-radius: var(--tip-radius); background: var(--tip-bg); box-shadow: var(--tip-shadow);
  color: var(--tip-ink); font: 500 12px/1.5 var(--sans); letter-spacing: .01em; text-align: left; white-space: pre-line;
  overflow-wrap: anywhere; animation: ui-tip-in .14s ease-out; }
/* The tip can be hovered (to read or select it): a transparent bridge spans the gap to its trigger. */
.ui-tip::before { content: ""; position: absolute; left: 0; right: 0; height: 12px; }
.ui-tip[data-side="top"]::before { top: 100%; }
.ui-tip[data-side="bottom"]::before { bottom: 100%; }
.ui-tip[hidden] { display: none; }
.ui-tip-text { display: block; }
/* The first line is the lead; any further lines (a reason, a trend) read quieter. */
.ui-tip-text::first-line { color: #eef8f1; }
.ui-tip-arrow { position: absolute; left: var(--tip-x, 50%); width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: var(--tip-bg); border: 1px solid var(--tip-line); }
.ui-tip[data-side="top"] .ui-tip-arrow { bottom: -5px; border-top: 0; border-left: 0; }
.ui-tip[data-side="bottom"] .ui-tip-arrow { top: -5px; border-right: 0; border-bottom: 0; }
@keyframes ui-tip-in { from { opacity: 0; translate: 0 3px; } }
.ui-tip[data-side="bottom"] { animation-name: ui-tip-in-down; }
@keyframes ui-tip-in-down { from { opacity: 0; translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .ui-tip { animation: none; } }
html:has(#fx-toggle[aria-pressed="false"]) .ui-tip { animation: none; }

/* Statistics crosshair tips keep their own placement and rows; only the look is shared. */
.chart-tip { border: 1px solid var(--tip-line); border-radius: var(--tip-radius); background: var(--tip-bg); box-shadow: var(--tip-shadow);
  padding: 7px 10px; color: var(--ink-2); }
.chart-tip:not([hidden]) { animation: ui-tip-fade .14s ease-out; }
@keyframes ui-tip-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .chart-tip:not([hidden]) { animation: none; } }
html:has(#fx-toggle[aria-pressed="false"]) .chart-tip { animation: none; }

/* Elements that are focusable only to show their tip get a quiet ring, never a layout change. */
[data-tip][tabindex="0"]:focus { outline: none; }
[data-tip][tabindex="0"]:focus-visible { outline: 1px dashed rgba(57, 255, 136, .75); outline-offset: 3px; border-radius: 3px; }