/* Inline Glossary — a term in running text that opens a short definition.
   Markup: <button class="glossary-term" popovertarget> + <span popover>,
   from inline_glossary_render(). In the editor canvas only the span exists,
   so .glossary-term there is just the underline.

   Re-skin through the --glossary-* properties in the theme's :root; never
   re-declare these classes in a theme. Fallbacks are neutral.

   Placement uses CSS anchor positioning off the popover's implicit anchor
   (its invoker). Where that is unsupported the UA default centres the panel
   in the viewport, which is fine. Below 600px it is a bottom sheet. */

.glossary-term {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline dotted var(--glossary-underline, currentColor);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.glossary-term:hover { text-decoration-style: solid; }

/* The term and the text touching it («l’», a trailing comma) wrap as one. */
.glossary-term__glue { white-space: nowrap; }

.glossary-term__pop {
    width: min(40ch, calc(100vw - 2rem));
    margin: 0;
    padding: var(--glossary-padding, 1rem);
    background: var(--glossary-bg, #fff);
    color: var(--glossary-text, #222);
    font-family: var(--glossary-font, inherit);
    font-size: var(--glossary-font-size, 0.9375rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal; /* the popover sits inside .glossary-term__glue */
    text-align: left;
    border: 1px solid var(--glossary-border, #ddd);
    border-top: 2px solid var(--glossary-rule, currentColor);
    border-radius: var(--glossary-radius, 6px);
    box-shadow: var(--glossary-shadow, 0 4px 16px rgba(0, 0, 0, .12));
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--glossary-duration, 180ms) var(--glossary-ease, ease),
                transform var(--glossary-duration, 180ms) var(--glossary-ease, ease),
                overlay var(--glossary-duration, 180ms) allow-discrete,
                display var(--glossary-duration, 180ms) allow-discrete;
}
.glossary-term__pop:popover-open { opacity: 1; transform: none; }
@starting-style {
    .glossary-term__pop:popover-open { opacity: 0; transform: translateY(4px); }
}
.glossary-term__title {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--glossary-title, inherit);
    font-weight: 700;
}
.glossary-term__text { display: block; }

@supports (position-area: bottom) {
    .glossary-term__pop {
        position-area: bottom span-right;
        position-try-fallbacks: flip-block, flip-inline;
        margin-top: 0.5rem;
    }
}
@media (max-width: 600px) {
    .glossary-term__pop {
        position: fixed;
        inset: auto 1rem 1rem;
        width: auto;
        margin: 0;
        position-area: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .glossary-term__pop { transition: none; transform: none; }
}