/* ── Anchored tooltip (Figma node 1790:10221) ───────────────────────────────
 * Rendered by <tooltip> / TooltipTagHelper.Render and by the form-group tag helpers' `tooltip` /
 * `tooltip-title` attributes. Either hover-triggered (assets/js/components/tooltip.js) or
 * click-triggered (native via popovertarget) — never both, see TooltipTrigger.cs. Same [popover]
 * + CSS anchor-positioning idiom as popover-menu.css.
 *
 * Markup (trigger and bubble are siblings; both are phrasing content, so both are valid inside
 * a <label>):
 *   <button type="button" class="tooltip-trigger" popovertarget="tt-x" data-tooltip-trigger="hover"
 *           style="anchor-name: --tt-x">…</button>
 *   <span id="tt-x" popover role="tooltip" class="tooltip-popover" data-position="TopCenter"
 *         style="position-anchor: --tt-x">…</span>
 *
 * .tooltip-trigger below is intentionally bare-bones: only the interaction rules every trigger
 * needs regardless of what it looks like. The "?" look (layout/reset, circular hit area, icon
 * color, hover/focus color, sizing, spacing after label text) is form-group-specific skin and
 * lives in site.css's `.form-group .tooltip-trigger` — a trigger used elsewhere (e.g. a
 * copy-to-clipboard button's "Copied" feedback) isn't a "?" and shouldn't inherit that look.
 *
 * NB: `.tooltip`, `.tooltip-inner`, `.tooltip-arrow` belong to Bootstrap (bootstrap.css sets
 * `.tooltip { opacity: 0 }`) — never reuse those class names here.
 * ────────────────────────────────────────────────────────────────────────── */

.tooltip-trigger {
    cursor: pointer;
    pointer-events: auto;
}

.tooltip-popover {
    --_tt-bg: var(--bw-black-clr);
    --_tt-radius: 0.5rem;
    --_tt-arrow-w: 12px;
    --_tt-arrow-h: 6px;
    --_tt-fs-caption: var(--fs-200);

    position: fixed;
    position-area: top;
    position-try-fallbacks:
        flip-block,
        flip-inline,
        flip-block flip-inline;
    position-visibility: anchors-visible;
    container-type: anchored;
    margin: var(--_tt-arrow-h);
    inset: auto;
    width: max-content;
    max-width: 35ch;
    padding: 0.5rem;
    border: none;
    border-radius: var(--_tt-radius);
    background-color: var(--_tt-bg);
    box-shadow: var(--shadow-md);
    color: var(--white-clr);
    font-family: var(--ff-inter);
    overflow: visible;
    /* the beak (::after) must escape the popover's own box */
    pointer-events: none;
    /* never steals hover from the trigger */
    z-index: 1000;
    opacity: 0;
    scale: 0.3;
    transition-property: opacity, scale;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-timing-function: linear(
        0,
        0.051,
        0.17,
        0.32,
        0.475,
        0.617,
        0.74,
        0.838,
        0.913,
        0.967,
        1.002,
        1.024,
        1.035,
        1.038,
        1.036,
        1.032,
        1.026,
        1.021,
        1.015,
        1.01,
        1.006
    );
    transition-behavior: allow-discrete;

    &:popover-open {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        opacity: 1;
        scale: 1;

        /* Starting point for the enter transition - matches the closed-state values above so
           there's something to interpolate from the instant this switches from display:none to
           rendered+open (same idiom as dialog.css's .central-dialog). */
        @starting-style {
            opacity: 0;
            scale: 0.3;
        }
    }

    &::after {
        content: "";
        position: absolute;
        width: var(--_tt-arrow-w);
        height: var(--_tt-arrow-h);
        background-color: var(--_tt-bg);
        /* default = top placement: beak on the bubble's bottom edge, pointing down */
        top: 100%;
        left: 50%;
        translate: -50% 0;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
}

.tooltip-popover-text {
    font-size: var(--_tt-fs-caption);
    font-weight: var(--fw-500);
    line-height: 1.3;
    color: var(--white-clr);
}

.tooltip-popover-title {
    font-size: var(--fs-300);
    /* 12px — exact Label-5 Semibold match */
    font-weight: var(--fw-600);
    line-height: 1.1;
    color: var(--white-clr);
    margin-bottom: 0.25rem;
}

.tooltip-popover-desc {
    font-size: var(--_tt-fs-caption);
    font-weight: var(--fw-500);
    line-height: 1.3;
    color: var(--midnight-blue-clr-100);
}

/* ── placement variants — maps Figma's 9 "Alignment" options onto CSS Anchor Positioning's
   3x3 position-area grid; TooltipPostion.cs documents the Figma name each maps to. ────────── */

/* top row — bubble above the trigger, beak on the bubble's bottom edge pointing down */
.tooltip-popover[data-position="TopLeft"] {
    position-area: top span-left;
    margin-right: -1rem;

    &::after {
        left: auto;
        right: 1.125rem;
        translate: 0;
    }
}

.tooltip-popover[data-position="TopCenter"] {
    position-area: top;
}

.tooltip-popover[data-position="TopRight"] {
    position-area: top span-right;
    margin-left: -1rem;

    &::after {
        left: 1.125rem;
        translate: 0;
    }
}

/* middle row — bubble beside the trigger, beak on the bubble's inner edge */
.tooltip-popover[data-position="LeftCenter"] {
    position-area: left;

    &::after {
        top: 50%;
        left: 100%;
        translate: 0 -50%;
        width: var(--_tt-arrow-h);
        height: var(--_tt-arrow-w);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }
}

.tooltip-popover[data-position="Center"] {
    position-area: center;

    &::after {
        display: none;
    }
}

.tooltip-popover[data-position="RightCenter"] {
    position-area: right;

    &::after {
        top: 50%;
        left: auto;
        right: 100%;
        translate: 0 -50%;
        width: var(--_tt-arrow-h);
        height: var(--_tt-arrow-w);
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
    }
}

/* bottom row — bubble below the trigger, beak on the bubble's top edge pointing up */
.tooltip-popover[data-position="BottomLeft"] {
    position-area: bottom span-left;

    margin-right: -1rem;

    &::after {
        left: auto;
        top: auto;
        bottom: 100%;
        right: 1.125rem;
        translate: 0;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }
}

.tooltip-popover[data-position="BottomCenter"] {
    position-area: bottom;

    &::after {
        top: auto;
        bottom: 100%;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }
}

.tooltip-popover[data-position="BottomRight"] {
    position-area: bottom span-right;
    margin-left: -1rem;

    &::after {
        top: auto;
        bottom: 100%;
        left: 1.125rem;
        translate: 0;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }
}

/* ── flipped placements — when position-try-fallbacks moves the bubble to the trigger's other
   side, the beak follows. Anchored container queries (the popover is its own anchored container,
   see container-type above), so no JS. Must stay below the placement variants to win the cascade. ── */

/* vertical flip: beak to the opposite edge */
@container anchored(fallback: flip-block) or anchored(fallback: flip-block flip-inline) {
    .tooltip-popover[data-position^="Top"]::after {
        top: auto;
        bottom: 100%;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .tooltip-popover[data-position^="Bottom"]::after {
        top: 100%;
        bottom: auto;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }
}

/* horizontal flip: beak to the opposite edge, and the Left/Right alignments mirror */
@container anchored(fallback: flip-inline) or anchored(fallback: flip-block flip-inline) {
    .tooltip-popover[data-position="LeftCenter"]::after {
        left: auto;
        right: 100%;
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
    }

    .tooltip-popover[data-position="RightCenter"]::after {
        left: 100%;
        right: auto;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    .tooltip-popover[data-position$="Left"]::after {
        left: 1.125rem;
        right: auto;
    }

    .tooltip-popover[data-position$="Right"]::after {
        left: auto;
        right: 1.125rem;
    }
}