/* ============================================================================ Glossary term — premium inline tooltip. Single source of truth for definitions: glossary.js Markup (injected by _inject_glossary.py): TTFB Behaviour: dotted underline affordance · opens on hover AND tap/click · keyboard accessible (Enter/Space/Esc) · print fallback expands inline. The popover is portaled to by glossary.js and fixed-positioned, so it escapes any card with overflow:hidden / its own stacking context. ============================================================================ */ .gloss { cursor: help; white-space: nowrap; /* keep the acronym from breaking */ /* underline uses currentColor so it stays visible on ANY background — incl. dark/blue badges where a fixed accent colour would disappear */ text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 0.16em; -webkit-tap-highlight-color: transparent; } .gloss:hover, .gloss[data-open="true"] { text-decoration-style: solid; /* affordance that works on any bg, no colour shift */ } .gloss:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; } /* ---- popover bubble (built + positioned by glossary.js, lives in ) ---- */ .gloss-pop { --g-accent-ink: var(--accent-ink, var(--azul-ink, #1f4ea8)); --g-paper: var(--paper, #ffffff); --g-ink: var(--ink, #1f2733); --g-ink-soft: var(--ink-soft, #44505f); --g-line: var(--line, #e3e8ef); position: fixed; z-index: 2147483000; /* above everything, incl. sticky nav */ left: 0; top: 0; /* real coords set inline by JS */ width: max-content; max-width: min(20rem, 78vw); white-space: normal; text-align: left; font-family: var(--sans, Inter, system-ui, sans-serif); font-weight: 400; font-size: 0.82rem; line-height: 1.5; color: var(--g-ink); background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 12px; box-shadow: 0 8px 30px rgba(16, 32, 64, 0.16), 0 1px 3px rgba(16, 32, 64, 0.10); padding: 0.78rem 0.9rem; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px); transition: opacity 0.16s ease, transform 0.16s ease; } .gloss-pop[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .gloss-pop.is-below { transform: translateY(-4px); } .gloss-pop.is-below[data-open="true"] { transform: translateY(0); } .gloss-pop .gp-t { display: block; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.004em; color: var(--g-accent-ink); margin-bottom: 0.16rem; } .gloss-pop .gp-d { display: block; color: var(--g-ink-soft); } /* arrow — its x-offset tracks the term even when the bubble is clamped to the edge */ .gloss-pop::after { content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--g-paper); filter: drop-shadow(0 1px 0 var(--g-line)); } .gloss-pop.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--g-paper); filter: drop-shadow(0 -1px 0 var(--g-line)); } @media (prefers-reduced-motion: reduce) { .gloss-pop, .gloss-pop.is-below, .gloss-pop[data-open="true"], .gloss-pop.is-below[data-open="true"] { transition: none; transform: none; } } /* ---- print fallback: no hover in a PDF, so expand inline once per term ---- */ .gloss-pf { display: none; } @media print { .gloss { text-decoration: none; white-space: normal; cursor: auto; } .gloss-pop { display: none !important; } .gloss-pf { display: inline; color: #475063; font-style: italic; } }