/*
 * Darealmop_Lexicon — inline glossary tooltip presentation.
 *
 * Styles the opt-in auto-linked terms (.dm-lexicon-tip) and their inline
 * definition popover (.dm-lexicon-tip__pop). Fully inert on pages that carry no
 * .dm-lexicon-tip element, so it is safe to load site-wide.
 *
 * Token-driven: every colour / spacing hook is a `--dm-lexicon-tip-*` custom
 * property with a neutral fallback, so a consuming theme restyles the whole
 * thing without touching this file. No brand colours are hard-coded here.
 *
 * The popover is shown on :hover and :focus / :focus-within and while the
 * Alpine component sets [data-dm-open]; it also works with pure CSS if the JS
 * never loads (progressive enhancement).
 */

.dm-lexicon-tip {
    position: relative;
    display: inline;
    cursor: help;
    text-decoration: var(--dm-lexicon-tip-underline, underline dotted);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    color: var(--dm-lexicon-tip-color, inherit);
    outline: none;
}

.dm-lexicon-tip:focus-visible {
    outline: 2px solid var(--dm-lexicon-tip-focus, #3d7bff);
    outline-offset: 2px;
    border-radius: 2px;
}

.dm-lexicon-tip__pop {
    position: absolute;
    left: 0;
    bottom: calc(100% + var(--dm-lexicon-tip-gap, 8px));
    z-index: var(--dm-lexicon-tip-z, 50);

    display: block;
    width: max-content;
    max-width: var(--dm-lexicon-tip-max-width, 18rem);

    padding: var(--dm-lexicon-tip-padding, 0.5rem 0.75rem);
    font-size: var(--dm-lexicon-tip-font-size, 0.8125rem);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: auto;

    color: var(--dm-lexicon-tip-pop-color, #f5f5f5);
    background: var(--dm-lexicon-tip-pop-bg, #1f2933);
    border: 1px solid var(--dm-lexicon-tip-pop-border, rgba(0, 0, 0, 0.15));
    border-radius: var(--dm-lexicon-tip-pop-radius, 6px);
    box-shadow: var(--dm-lexicon-tip-pop-shadow, 0 4px 14px rgba(0, 0, 0, 0.18));

    /* Hidden by default; revealed by interaction below. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms;
    pointer-events: none;
}

/* Reveal on hover / keyboard focus / Alpine-driven open state. */
.dm-lexicon-tip:hover > .dm-lexicon-tip__pop,
.dm-lexicon-tip:focus > .dm-lexicon-tip__pop,
.dm-lexicon-tip:focus-within > .dm-lexicon-tip__pop,
.dm-lexicon-tip[data-dm-open="true"] > .dm-lexicon-tip__pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: auto;
}

/* Little pointer under the bubble. */
.dm-lexicon-tip__pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 1rem;
    border: 6px solid transparent;
    border-top-color: var(--dm-lexicon-tip-pop-bg, #1f2933);
}

@media (prefers-reduced-motion: reduce) {
    .dm-lexicon-tip__pop {
        transition: none;
    }
}