/*
 * Hover tooltips, pure CSS.
 *
 * Markup: <span class="tip">trigger text <span class="tooltiptext">…</span></span>
 * The ⓘ marker after the trigger text is generated content, don't put it in
 * the markup. Pages using tooltips should also include tooltip.js (iOS hover
 * support, arrow flipping).
 *
 * Browsers with CSS anchor positioning put the tooltip right of the ⓘ marker,
 * falling back to centered below it and then centered above it; others get the
 * legacy absolutely positioned box to the right of the trigger.
 */

.tip {
    position: relative; /* containing block for the legacy fallback */
    display: inline-block;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 5px;
}

.tip::after {
    content: "\24D8"; /* ⓘ */
    content: "\24D8" / ""; /* decorative: hide from screen readers  */
    margin-left: 0.3em;
    opacity: 0.65;
    /* an atomic inline box is excluded from the parent's text-decoration, so
       the marker gets no underline but still flows with the last word */
    display: inline-block;
}

.tip .tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    max-width: 260px;
    background-color: #212529;
    color: #fff;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.45;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: visibility 0.15s, opacity 0.15s ease-in-out;

    /* fallback */
    position: absolute;
    top: -5px;
    left: calc(100% + 12px);
}

/* arrow: a rotated square in the box color merges seamlessly with the box */
.tip .tooltiptext::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #212529;
    rotate: 45deg;
    /* fallback */
    top: 12px;
    left: -5px;
}

.tip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.tip:focus-visible .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* The box paints over other content, so it has to be dismissible without moving
   the pointer or focus away (WCAG 1.4.13). CSS cannot un-hover an element, so
   tooltip.js flags the trigger instead and clears the flag once it is left.
   Same specificity as the two rules above — keep this after them. */
.tip.tip-dismissed .tooltiptext {
    visibility: hidden;
    opacity: 0;
}

@supports (anchor-name: --tip) and (anchor-scope: --tip) {
    /* All triggers share one anchor name; anchor-scope confines it to each
       trigger's subtree so every tooltip anchors to its own marker. Without
       the scoping, the shared name does not resolve — hence anchor-scope is
       part of the @supports condition. */
    .tip {
        anchor-scope: --tip;
    }
    .tip::after {
        anchor-name: --tip;
    }

    /* tooltip.js measures the marker through this: generated content has no box
       to call getBoundingClientRect on, and the trigger cannot stand in for it —
       a trigger that wraps leaves the marker alone on the last line, nowhere
       near the trigger's right edge. Stretched over the marker, the probe's rect
       is the marker's rect; it is empty, so it paints nothing. */
    .tip .tip-probe {
        position: fixed;
        position-anchor: --tip;
        position-area: center;
        align-self: stretch;
        justify-self: stretch;
        pointer-events: none;
    }

    /* Fallbacks, tried in order: centered below the marker, then centered
       above it. Each one spans the whole cross axis and re-centers with
       anchor-center, so the base rule's align-self and margin must be reset. */
    @position-try --tip-below {
        position-area: block-end;
        align-self: normal;
        justify-self: anchor-center;
        margin: 9px 0 0 0;
    }

    @position-try --tip-above {
        position-area: block-start;
        align-self: normal;
        justify-self: anchor-center;
        margin: 0 0 9px 0;
    }

    .tip .tooltiptext {
        top: unset;
        left: unset;
        position: fixed; /* escapes overflow and stacking contexts */
        position-anchor: --tip;
        position-area: inline-end;
        align-self: anchor-center; /* auto-shifts at viewport edges */
        margin: 0 0 0 9px; /* the gap the arrow sits in */
        position-try-fallbacks: --tip-below, --tip-above;
        position-visibility: anchors-visible;
    }

    /* tooltip.js flags which fallback the browser applied (CSS cannot select by
       it) and offsets the arrow along the edge to keep it on the marker, which
       anchor-center's viewport-edge shifting would otherwise strand. It falls
       back to the box's centre until the first hover measures it. */
    .tip .tooltiptext::after {
        top: var(--arrow-y, 50%);
        left: -5px;
        margin: -5px 0 0 0;
    }

    .tip.tip-below .tooltiptext::after {
        top: -5px;
        left: var(--arrow-x, 50%);
        margin: 0 0 0 -5px;
    }

    .tip.tip-above .tooltiptext::after {
        top: auto;
        bottom: -5px;
        left: var(--arrow-x, 50%);
        margin: 0 0 0 -5px;
    }
}