/*
 * Interactive docs affordances layered on top of the static book:
 *   - .ticon-link      — term icons wrapped as topic links (js/topic-icons.js)
 *   - .glossary-link   — links into the glossary, with a hover definition
 *   - .glossary-tooltip — the hover box itself (js/glossary-tooltip.js)
 *   - .footnote-tooltip — hover/focus preview of a footnote's text
 *                         (js/footnote-tooltip.js)
 */

/*
 * A term icon that has been wrapped in a topic link must still read as plain
 * text: inherit the surrounding color and show no underline in any state, so
 * only the pointer cursor hints that the glyph is clickable.
 */
a.ticon-link,
a.ticon-link:link,
a.ticon-link:visited,
a.ticon-link:hover,
a.ticon-link:focus {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/*
 * Glossary links get their own look — a dotted underline in the theme link
 * color plus a help cursor — so a reader can tell "hover for a definition"
 * apart from an ordinary in-book link. They still navigate to the glossary on
 * click.
 */
.glossary-link,
.glossary-link:link,
.glossary-link:visited {
    color: var(--links);
    text-decoration: none;
    border-bottom: 1px dotted var(--links);
    cursor: help;
}
.glossary-link:hover {
    border-bottom-style: solid;
}

/*
 * The floating definition box. Positioned by js/glossary-tooltip.js; colored
 * from mdBook's theme popup variables so it adapts to every light/dark theme.
 */
.glossary-tooltip {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    max-width: 22em;
    padding: 0.5em 0.7em;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--fg);
    background: var(--theme-popup-bg, var(--bg));
    border: 1px solid var(--theme-popup-border, var(--table-border-color));
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    pointer-events: none; /* never steal the hover from the link */
    opacity: 0;
    transition: opacity 0.12s ease;
}
.glossary-tooltip.visible {
    opacity: 1;
}

/*
 * A footnote reference gets a help cursor so a reader can tell it's
 * hoverable, same affordance idea as .glossary-link.
 */
sup.footnote-reference {
    cursor: help;
}

/*
 * The floating footnote-preview box. Same look as .glossary-tooltip, styled
 * separately since it previews same-page footnote text rather than a
 * fetched glossary definition.
 */
.footnote-tooltip {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    max-width: 22em;
    padding: 0.5em 0.7em;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--fg);
    background: var(--theme-popup-bg, var(--bg));
    border: 1px solid var(--theme-popup-border, var(--table-border-color));
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.footnote-tooltip.visible {
    opacity: 1;
}