/* ─── Glossary term tooltips ────────────────────────────────────────────────
 * Inline first-mention definitions inside library articles. Trigger is a
 * dotted-underline word; hover, focus, or tap reveals a two-layer popover
 * (term, plain definition, optional context). Styling follows the
 * .tool-rail-tooltip idiom in layout.css. Tokens only, for dark-mode safety.
 */

.glossary-term {
    position: relative;
    border-bottom: 1px dotted var(--primary);
    cursor: help;
    /* keep inline flow; no color change so prose reading is undisturbed */
}

.glossary-term:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.glossary-popover {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: var(--z-topbar, 1000);
    width: max-content;
    max-width: 280px;
    padding: 0.7rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    text-align: left;
    white-space: normal;
    cursor: default;
}

/* Reveal on hover of the trigger, or keyboard focus, or tap (focus-within). */
.glossary-term:hover .glossary-popover,
.glossary-term:focus .glossary-popover,
.glossary-term:focus-within .glossary-popover {
    display: block;
}

/* Upward-pointing arrow joining popover to the word. */
.glossary-popover::before {
    content: '';
    position: absolute;
    left: 14px;
    top: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--border-light);
}

.glossary-popover-term {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.3rem;
}

.glossary-popover-plain {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--body-text);
}

.glossary-popover-context {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--slate);
    margin-top: 0.4rem;
}

/* Phone: the article column is narrow, so let the popover use more width and
 * keep it from overflowing the right edge by anchoring to the trigger. */
@media (max-width: 600px) {
    .glossary-popover {
        max-width: min(280px, 80vw);
    }
    /* Drop the second layer on the smallest screens to keep the card compact. */
    .glossary-popover-context {
        display: none;
    }
}