/* assets/tooltip.css — reusable tooltip utility (Phase 6.1.5).
*
* Companion to assets/tooltip.js. Marks up jargon definitions
* inline; works across mouse hover, keyboard focus, and mobile tap.
*
* Usage in HTML:
* set-aside
*
* Accessibility: tooltip.js attaches aria-describedby + manages
* focus / ESC dismissal. The dotted underline cue + cursor: help
* here are the visual affordance.
*
* Phase 6.2 note (per ADR-001): this utility's verbiage and
* accessibility patterns carry forward into Astro components
* (); the CSS itself is discarded in the migration.
*/
/* ── Trigger ─────────────────────────────────────────────────────── */
.tt {
border-bottom: 1px dotted currentColor;
cursor: help;
position: relative;
/* keyboard users see a focus ring; mouse users get the underline */
outline-offset: 2px;
}
.tt:focus-visible {
outline: 2px solid #00B899;
outline-offset: 2px;
border-radius: 2px;
}
/* ── Bubble ──────────────────────────────────────────────────────── */
/* The bubble is appended to by tooltip.js so it escapes any
* overflow:hidden ancestor. id is set dynamically; .tt-bubble is the
* styling hook. */
.tt-bubble {
position: absolute;
z-index: 9999;
max-width: 320px;
background: #070D1A;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85rem;
line-height: 1.5;
padding: 10px 14px;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
pointer-events: auto; /* user can hover / select bubble text */
/* Off-screen until tooltip.js positions it. */
top: -9999px;
left: -9999px;
opacity: 0;
transition: opacity 120ms ease;
}
.tt-bubble.is-visible {
opacity: 1;
}
/* Optional small triangle below the bubble pointing at the trigger */
.tt-bubble::after {
content: "";
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #070D1A;
}
/* When bubble flips above the trigger, swap the arrow direction. */
.tt-bubble.is-above::after {
bottom: auto;
top: -6px;
border-top: none;
border-bottom: 6px solid #070D1A;
}
/* ── Mobile / reduced motion ─────────────────────────────────────── */
@media (max-width: 640px) {
.tt-bubble {
max-width: calc(100vw - 32px);
}
}
@media (prefers-reduced-motion: reduce) {
.tt-bubble {
transition: none;
}
}
/* ── Print: don't render bubbles ─────────────────────────────────── */
@media print {
.tt-bubble {
display: none !important;
}
.tt {
border-bottom: none;
}
}