/* shared-tooltip.css — the site-wide ⓘ hover/focus tooltip.
 *
 * ⚠ The .ov- prefix is HISTORICAL, not a hint about ownership. These rules were
 * born inside the Call Planner ("overlap") card and kept its prefix, but the
 * tooltip is used by six cards and belongs to none of them:
 *
 *   Sun & Moon      golden-hour explainer, moon phase row
 *   Temperature     WMO normals source note
 *   AQI             AQI scale explainer
 *   Flights         non-stop estimate disclaimer
 *   Call Time Planner   the ⓘ next to most of its controls
 *
 * Do NOT rename these classes to something tidier. Five cards' markup would have
 * to change with them, and a miss shows up as a tooltip panel rendered inline and
 * always-visible rather than as a hidden popup — easy to ship without noticing.
 *
 * Usage:
 *   <span class="ov-info" tabindex="0">ⓘ<span class="ov-tip">…text…</span></span>
 *   .ov-tip-up  opens upward instead of downward
 *   .ov-tip-r   right-aligns the panel (use near the right edge of a card)
 *
 * Self-contained: colours are literal, not design tokens, so this works on any
 * page. Light mode only needs [data-theme="light"] to be set on a parent. The
 * one external dependency is the Inter font.
 *
 * NOT here: the Call Time Planner's .ov-tip .ov-hint-* legend swatches. Those are
 * planner-only and travel with the planner component.
 */

/* ── dark (default) ── */
.ov-info { position:relative; display:inline-flex; align-items:center; cursor:help; color:rgba(241,240,249,.28); font-size:13px; line-height:1; flex-shrink:0; transition:color .15s; }
.ov-info:hover, .ov-info:focus { color:rgba(241,240,249,.65); outline:none; }
.ov-tip { display:none; position:absolute; top:calc(100% + 7px); left:0; min-width:195px; max-width:245px; background:#13132a; border:1px solid rgba(255,255,255,.11); border-radius:8px; padding:8px 11px; font-size:13px; color:rgba(241,240,249,.72); line-height:1.55; white-space:normal; z-index:300; pointer-events:none; font-family:'Inter',sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.55); }
.ov-info:hover .ov-tip, .ov-info:focus .ov-tip { display:block; }
.ov-tip-r { left:auto; right:0; }
.ov-tip-up { top:auto; bottom:calc(100% + 7px); }
.ov-tip strong { color:rgba(241,240,249,.92); }

/* ── light ──
   .ov-tip strong here is (0,2,1). Anything meant to beat it — such as the
   planner's [data-theme="light"] .ov-tip .ov-hint-* legend at (0,3,0) — wins on
   specificity, so it stays correct no matter which file loads first. */
[data-theme="light"] .ov-info { color:rgba(24,24,39,.45); }
[data-theme="light"] .ov-info:hover, [data-theme="light"] .ov-info:focus { color:rgba(24,24,39,.75); }
[data-theme="light"] .ov-tip { background:#fff; border-color:rgba(0,0,0,.12); color:rgba(24,24,39,.78); box-shadow:0 8px 24px rgba(0,0,0,.12); }
[data-theme="light"] .ov-tip strong { color:rgba(24,24,39,.92); }