/* ─────────────────────────────────────────
   TOOLTIP
   The one hover hint on the site. src/shared/tooltip.js lifts every
   native `title` into `data-tip` and draws this instead — the browser's
   own bubble is system-styled and ignored the theme (Ollie, 2026-09-19,
   Studio's "Clips can't be swapped" note). Body font, never mono: a hint
   is prose, not data.
───────────────────────────────────────── */
.ui-tip {
  position: fixed;
  z-index: 100000;
  max-width: min(300px, calc(100vw - 16px));
  padding: 7px 11px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--border-med);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.12));
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: pre-line;           /* titles carry \n for a second line */
  overflow-wrap: anywhere;
  pointer-events: none;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--duration-base, 150ms) var(--ease), transform var(--duration-base, 150ms) var(--ease);
}
.ui-tip.ui-tip--above { transform: translateY(-2px); }
.ui-tip.ui-tip--visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ui-tip { transition: none; } }