/*
 * Primer, as published, in the "primer" cascade layer:
 * - Primer CSS's layout bundle, for the PageLayout that Primer ViewComponents
 *   does not carry;
 * - Primer ViewComponents' stylesheet, after it, so the newer rule wins the
 *   one class both define, .Stack.
 * Primer's tokens load before this file, straight from @primer/primitives
 * (static/vendor/primer/primitives/).
 *
 * The project's own stylesheets stay outside any layer, so every rule of
 * theirs wins over Primer's until a screen moves to Primer's components.
 */
@layer primer;

@import url("../vendor/primer/css/dist/layout.css") layer(primer);
@import url("../vendor/primer/view-components/app/assets/styles/primer_view_components.css") layer(primer);

@layer primer {
    /*
     * Primer ViewComponents 0.53.5 still references two tokens that
     * @primer/primitives 11 removed. Without them the secondary and danger
     * buttons and the popover lose their shadows; Primer React resolves them
     * this way.
     */
    :root {
        --button-default-shadow-inset: 0 0 transparent;
        --shadow-floating-legacy: var(--shadow-floating-small);
    }

    /*
     * Primer's base stylesheet, which Primer ViewComponents assumes and the
     * project does not load, colors links with --fgColor-accent and removes
     * their underline. A Label used as a link needs both; :where keeps every
     * variant's color above this rule.
     */
    a:where(.Label) {
        color: var(--fgColor-accent);
        text-decoration: none;
    }

    /*
     * Primer's base stylesheet keeps [hidden] hidden above any display rule.
     * Primer ViewComponents assumes it, and not every page loads an
     * equivalent, so a counter rendered hidden stays hidden.
     */
    .Counter[hidden] {
        display: none;
    }

    /*
     * Primer's base stylesheet sizes every box by its border. Primer
     * ViewComponents assumes it, and the counter's minimum width of 20px
     * would otherwise grow by its padding and border, to 34px.
     */
    .Counter {
        box-sizing: border-box;
    }

    /*
     * Primer's base stylesheet (primer/css, base/octicons.scss): Primer
     * ViewComponents' icons take their color and alignment from it.
     */
    .octicon {
        display: inline-block;
        overflow: visible !important;
        vertical-align: text-bottom;
        fill: currentColor;
    }

    /*
     * Primer React keeps wide content from pushing a page's regions apart: its
     * content wrapper has min-width: 1px. Primer CSS's PageLayout has no such
     * guard, and below 768px it stacks the regions in a 1fr column, whose
     * minimum is the widest thing inside. Each region may shrink instead, so a
     * table in a scrolling container scrolls there rather than widening a
     * phone's page.
     */
    .PageLayout-region {
        min-width: 0;
    }

    /*
     * Primer's base stylesheet sets the body at text-body-medium, which a Box
     * and what Primer draws in it assume; the shell's body is 16px (#462). A
     * Dialog or an overlay keeps the body's line height wherever it sits, as on
     * github.com, so a condensed Box's 1.25 never reaches it.
     */
    :where(.Box) {
        font-size: var(--text-body-size-medium);
        line-height: var(--text-body-lineHeight-medium);
    }

    :where(.Overlay) {
        line-height: var(--text-body-lineHeight-medium);
    }

    /*
     * Local, decision Q207: Primer's base stylesheet, which Primer
     * ViewComponents' BorderBox assumes and the project does not load, takes
     * a heading's and a list's margins and a list's padding away. Without it
     * the title keeps the browser's margins, and the rows list its 40px indent
     * and 1em above and below. :where keeps every page rule above these.
     */
    :where(.Box-title) {
        margin: 0;
    }

    :where(.Box > ul) {
        margin: 0;
        padding: 0;
    }

    /*
     * Local, decision Q207: Primer ViewComponents rounds a body's bottom
     * corners and pulls it over the Box's bottom border with :last-of-type,
     * and the rows' corners with :first-of-type and :last-of-type, which
     * compare tags, not classes. A Box of several bodies, a rows list and the
     * page's own elements got corners and a -1px overlap in its middle, and a
     * Box with only its header a doubled line with square corners. Here an
     * edge follows what draws: the header or body that ends the Box rounds its
     * bottom corners and overlaps the Box's bottom border by 1px, a body with
     * something drawn after it does neither, and the rows round their top
     * corners only when nothing is drawn before their list, and their bottom
     * corners only when nothing is drawn after it. A dialog, a template, a
     * noscript, a hidden element and an empty one, such as an empty live
     * region, draw nothing in the Box's flow. Each selector outranks the
     * (0,2,0) rule it replaces, so its place in this layer does not matter.
     */
    .Box > :is(.Box-header, .Box-body):not(:has(~ :not(dialog, template, noscript, [hidden], :empty))) {
        margin-bottom: calc(-1 * var(--borderWidth-thin));
        border-bottom-right-radius: var(--borderRadius-medium);
        border-bottom-left-radius: var(--borderRadius-medium);
    }

    .Box > .Box-body:last-of-type:has(~ :not(dialog, template, noscript, [hidden], :empty)) {
        margin-bottom: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .Box > :not(dialog, template, noscript, [hidden], :empty) ~ ul > .Box-row {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .Box > ul:has(~ :not(dialog, template, noscript, [hidden], :empty)) > .Box-row {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    /*
     * Local, decision Q218: Primer ViewComponents never puts a body after the
     * rows, and neither part draws a line between them, since a row draws its
     * line over the part before it. A body right after the rows draws that
     * same line.
     */
    .Box > ul + .Box-body {
        border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
    }

    /* Local, Primer React's SkeletonBox color; appearance belongs to this layer. */
    .SkeletonBox {
        background-color: var(--skeletonLoader-bgColor);
    }

    /*
     * Primer's base stylesheet resets lists and headings, sizes boxes by their
     * border and draws a control's focus inside it. Primer ViewComponents'
     * ActionList assumes all of it: without it, its list keeps the browser's
     * 40px indent, its heading the browser's margins, each link grows 16px
     * wider than its row, and a focus ring spills over the neighbouring rows.
     * :where adds no specificity, so every ActionList rule still wins, the
     * inset list's padding among them.
     */
    :where(.ActionListWrap) {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    :where(.ActionListContent) {
        box-sizing: border-box;
        text-decoration: none;
    }

    :where(.ActionListContent):focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
        box-shadow: none;
    }

    :where(.ActionList-sectionDivider-title) {
        margin: 0;
    }

    /*
     * A row that posts a form is a button (#421). Primer's base stylesheet
     * gives a button the page's font and a pointer; without it the browser's
     * control font would shrink the row's label.
     */
    :where(button.ActionListContent) {
        font: inherit;
        cursor: pointer;
    }

    /*
     * Local, a single selection kept a list (#421): Primer shows its check
     * through aria-checked, which only a menu's radio items carry. The chosen
     * row carries aria-current instead, and the others keep the column with
     * the check hidden, so every label lines up. A link row that is the current
     * view carries aria-current="page" and shows the check the same way; the
     * check is drawn only under a selection variant, so no other list shows it.
     */
    :where(.ActionListContent:not([aria-current])) .ActionListItem-singleSelectCheckmark {
        visibility: hidden;
    }

    /*
     * A NavList's heading: Primer ViewComponents' .ActionListHeader sets only
     * its bottom and left margins, and leaves the rest to Primer's base
     * stylesheet, whose h2 is 24px. Primer React draws NavList.Heading in its
     * "title small" type, 16px semibold, which this follows in the page's own
     * typeface (the token's shorthand would bring Mona Sans); without a reset
     * the browser's top margin stays too.
     */
    :where(.ActionListHeader) {
        margin-top: 0;
        font-size: var(--text-title-size-small);
        font-weight: var(--text-title-weight-small);
        line-height: var(--text-title-lineHeight-small);
    }

    /*
     * Primer's base stylesheet resets lists and links and draws a control's
     * focus inside it. Primer ViewComponents' UnderlineNav assumes all of it:
     * without it, its list keeps the browser's 40px indent and margins, its
     * links their underline at rest, and its focus ring the browser's. :where
     * adds no specificity, so every UnderlineNav rule still wins.
     */
    :where(.UnderlineNav-body) {
        margin: 0;
        padding: 0;
    }

    :where(.UnderlineNav-item) {
        text-decoration: none;
    }

    :where(.UnderlineNav-item):focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
        box-shadow: none;
    }

    /*
     * Local, as the header's controls: a 44px target under a coarse pointer.
     * Primer ViewComponents' own 48px target never applies, since its selector
     * wraps the pseudo-element in :is(), which matches nothing.
     */
    @media (pointer: coarse) {
        :where(.UnderlineNav-item)::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            min-height: var(--control-minTarget-coarse);
            transform: translateY(-50%);
        }
    }

    /* Local, Primer React's variant="inset": 16 px on each side of the tabs, the line across the whole bar. */
    :where(.UnderlineNav[data-variant="inset"]) {
        padding-inline: var(--stack-padding-normal);
    }

    /*
     * Primer's base stylesheet gives a button the page's font, which "Mais"
     * needs; the gap before its triangle is Primer React's button gap.
     */
    :where(button.UnderlineNav-item) {
        font-family: inherit;
        gap: var(--control-medium-gap);
    }

    /*
     * Local, Primer React's overflow menu (decisions Q59 to Q62): "Mais" sits
     * at the bar's end, behind a 24 px divider, in Primer ViewComponents'
     * actions slot.
     */
    :where(.UnderlineNav-actions[data-hidden-from]) {
        display: flex;
        align-items: center;
    }

    :where(.UnderlineNav-actions[data-hidden-from])::before {
        content: "";
        width: 0;
        height: var(--base-size-24);
        margin-inline: var(--base-size-4);
        border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
    }

    /*
     * Local, Primer React's overflow menu: the current page's row has a
     * semibold label and the tabs' coral line on its left. Its counter sits in
     * the row's trailing visual, without the bar's own counter margin.
     */
    .UnderlineNav-actions .ActionListContent[aria-current="page"] .ActionListItem-label {
        font-weight: var(--base-text-weight-semibold);
    }

    .UnderlineNav-actions .ActionListContent[aria-current="page"]::after {
        content: "";
        position: absolute;
        inset: var(--base-size-2) auto var(--base-size-2) 0;
        width: var(--base-size-2);
        background: var(--underlineNav-borderColor-active);
    }

    .UnderlineNav-actions .ActionListItem-visual--trailing .Counter {
        margin-left: 0;
    }

    /*
     * Local (decision Q59): a part shown only from a breakpoint, and a part
     * hidden from one, as Primer CSS's responsive display utilities hide
     * them, at Primer React's breakpoints in rem, so a larger default font
     * moves them too.
     */
    @media (max-width: 33.99875rem) {
        :where([data-visible-from]) {
            display: none !important;
        }
    }

    @media (min-width: 34rem) and (max-width: 47.99875rem) {
        :where([data-visible-from="medium"], [data-visible-from="large"]) {
            display: none !important;
        }
    }

    @media (min-width: 48rem) and (max-width: 63.24875rem) {
        :where([data-visible-from="large"]) {
            display: none !important;
        }
    }

    @media (min-width: 34rem) {
        :where([data-hidden-from="small"]) {
            display: none !important;
        }
    }

    @media (min-width: 48rem) {
        :where([data-hidden-from="medium"]) {
            display: none !important;
        }
    }

    @media (min-width: 63.25rem) {
        :where([data-hidden-from="large"]) {
            display: none !important;
        }
    }

    /* Local, decision Q16: a dialog's title with an image, as the drawer's mark beside its name. */
    :where(.Overlay-title:has(> img)) {
        display: flex;
        align-items: center;
        gap: var(--base-size-8);
    }

    /*
     * A modal Dialog keeps the page behind it from scrolling, as primer.style
     * asks; a native modal does not, and Primer ViewComponents does it with a
     * script. The gutter keeps the page from shifting when the scrollbar goes.
     */
    :where(html:has(dialog.Overlay:modal)) {
        overflow: hidden;
        scrollbar-gutter: stable;
    }

    /*
     * Local, Primer React's align="top": the dialog sits 64 px from the top
     * instead of the middle, so its top edge stays put while its content
     * changes height, as a search dialog's results do, and 16 px stay free
     * below. Primer React drops the margin where a narrow viewport takes the
     * dialog full screen or to the bottom; the two rules below restore Primer
     * ViewComponents' values there, at its own breakpoint, and outrank the
     * rule above wherever they are written.
     */
    :where(dialog.Overlay)[data-align="top"] {
        margin-block: var(--base-size-64) auto;
        max-height: min(100dvh - var(--base-size-64) - var(--base-size-16), var(--overlay-height));
    }

    @media (max-width: 767px) {
        :where(dialog).Overlay--full-whenNarrow[data-align="top"] {
            margin-block: auto;
            max-height: 100vh;
        }

        :where(dialog).Overlay--placement-bottom-whenNarrow[data-align="top"] {
            margin-block: auto;
            max-height: min(100vh - 2rem, var(--overlay-height));
        }
    }

    /*
     * Local, the AnchoredOverlay's frame (decisions Q18 and Q57). Primer
     * ViewComponents wraps its div.Overlay in an anchored-position element its
     * script places; here the wrapper is a native <dialog popover>, which the
     * browser opens and places. The wrapper draws nothing of its own: the
     * Overlay inside draws the surface. Without anchor positioning it sits
     * under the header, at the start or end edge, and scrolls with the page;
     * it is never taller than the screen below that place, so on a short
     * screen its body scrolls and its last row stays in view (#424).
     */
    :where(dialog[popover]:has(> .Overlay)) {
        position: absolute;
        inset: var(--base-size-64) auto auto var(--base-size-16);
        width: auto;
        max-width: none;
        height: auto;
        max-height: calc(100dvh - var(--base-size-64) - var(--base-size-8));
        margin: 0;
        padding: 0;
        overflow: visible;
        color: inherit;
        background: none;
        border: 0;
    }

    :where(dialog[popover][data-align="end"]:has(> .Overlay)) {
        inset: var(--base-size-64) var(--base-size-16) auto auto;
    }

    /*
     * Local: a non-modal overlay leaves the page as it is, as Primer React's
     * AnchoredOverlay does. Primer ViewComponents' dialog::backdrop dims
     * every dialog, and a popover in the top layer has a backdrop too;
     * Primer ViewComponents' own anchored Overlay is no dialog. The selector
     * outranks that rule (#426).
     */
    dialog[popover]:has(> .Overlay)::backdrop {
        background: none;
    }

    /*
     * Local: in an overlay body without padding, an inset list's rows start
     * 16 px in, its own 8 px and the row's 8 px; its heading, drawn before the
     * list, takes the same 16 px so the two line up (#422's review). It
     * outranks Primer's own .ActionList-sectionDivider:not(:empty) padding.
     */
    .Overlay-body--paddingNone .ActionList-sectionDivider:not(:empty):has(+ .ActionListWrap--inset) {
        padding-inline: var(--base-size-16);
    }

    /* Open, the frame lets its Overlay shrink to the room it has, so the body scrolls. */
    :where(dialog[popover]:popover-open:has(> .Overlay)) {
        display: flex;
        flex-direction: column;
    }

    :where(dialog[popover]:has(> .Overlay) > .Overlay) {
        min-height: 0;
    }

    /*
     * Where the browser anchors a popover to the button that opened it
     * (Chrome and Edge 133, Firefox 147, Safari 26), the overlay sits 4 px
     * below it, as Primer React's anchorOffset, on its start or end edge, and
     * turns above it, to the other edge, or both, when it would not fit; the
     * try options place it, so the fallback's cap does not apply. When
     * nothing fits, it stays below, on its own edge or on the other one
     * (#427).
     * Chrome 128 to 132 pass this test without the implicit anchor: anchor()
     * then falls back to 68 px down (64 plus the 4 px offset) and 16 px in,
     * fixed to the screen; on a screen too short for that, the fit option
     * pins the overlay's bottom 8 px above the screen's edge.
     */
    @supports (position-anchor: auto) and (position-try-fallbacks: flip-block) {
        :where(dialog[popover]:has(> .Overlay)) {
            position: fixed;
            position-anchor: auto;
            inset: auto;
            max-height: none;
            top: calc(anchor(bottom, var(--base-size-64)) + var(--base-size-4));
            left: anchor(left, var(--base-size-16));
            position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline, --primer-anchored-overlay-fit,
                --primer-anchored-overlay-fit flip-inline;
        }

        :where(dialog[popover][data-align="end"]:has(> .Overlay)) {
            left: auto;
            right: anchor(right, var(--base-size-16));
        }
    }

    /*
     * Local, what Primer CSS's base stylesheet gives a Button and the project
     * does not load: the page's typeface, no margin, border-box sizing (an
     * a.Button measured 34 px tall instead of 32), and no underline on a
     * LinkButton, as on Primer ViewComponents' own hover.
     */
    :where(.Button) {
        box-sizing: border-box;
        margin: 0;
        font-family: inherit;
    }

    a:where(.Button) {
        text-decoration: none;
    }

    /*
     * Local, Primer React's IconButton: it never shrinks in a flex row. Primer
     * ViewComponents' .Button may shrink to its content, the 16 px icon, and
     * the header's ☰ fell to 18 px beside long names (#446).
     */
    :where(.Button--iconOnly) {
        flex-shrink: 0;
    }

    /*
     * Local, Primer React's focus ring on every variant: Primer ViewComponents
     * draws one only on the primary Button and leaves the others to the
     * browser. The primary's own ring and the link's offset outrank this rule.
     */
    :where(.Button):focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
        box-shadow: none;
    }

    /*
     * Local, as the header's controls: a 44px target under a coarse pointer.
     * Primer ViewComponents means a 48 px one, but writes it as
     * :is(.Button:before), a pseudo-element inside :is(), which matches nothing.
     */
    @media (pointer: coarse) {
        :where(.Button)::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            min-width: var(--control-minTarget-coarse);
            min-height: var(--control-minTarget-coarse);
            transform: translate(-50%, -50%);
        }
    }

    /*
     * Local, Primer's label tooltip (decision Q72): the look of Primer
     * ViewComponents' tool-tip, whose rules live in its JavaScript, drawn with
     * Primer's tokens in the page's typeface. The popover's own frame, margin
     * and inset are reset. static/js/primer-tooltip.js opens it.
     */
    :where(tool-tip) {
        box-sizing: border-box;
        width: max-content;
        max-width: min(var(--overlay-width-small), 100vw);
        inset: auto;
        margin: 0;
        padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);
        overflow: visible;
        border: 0;
        border-radius: var(--borderRadius-medium);
        background-color: var(--tooltip-bgColor);
        color: var(--tooltip-fgColor);
        font-family: inherit;
        font-size: var(--text-body-size-small);
        font-weight: var(--base-text-weight-normal);
        line-height: var(--text-body-lineHeight-small);
        text-align: center;
        white-space: normal;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    /* A bridge across the 4 px gap on either side, so the pointer can move onto the tooltip (WCAG 1.4.13). */
    :where(tool-tip)::after {
        position: absolute;
        inset: calc(-1 * var(--overlay-offset)) 0;
        content: "";
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(tool-tip):popover-open {
            animation: primer-tooltip-appear var(--base-duration-100) ease-in;
        }
    }

    @keyframes primer-tooltip-appear {
        from {
            opacity: 0;
        }
    }

    @media (forced-colors: active) {
        :where(tool-tip) {
            outline: var(--borderWidth-thin) solid transparent;
        }
    }

    /* Without the Popover API the tooltip stays hidden; it still names its button. */
    @supports not selector(:popover-open) {
        :where(tool-tip) {
            display: none;
        }
    }

    /*
     * Local, by anchor positioning as the AnchoredOverlay (decision Q57), in
     * Primer React's directions: 4 px below the button and centered on it
     * (s); at the screen's sides, on the button's start or end edge (se, sw);
     * above it when there is no room below (n); when nothing fits, slid
     * inside the screen, below or above. It stays attached to the button as
     * the page scrolls. Chrome tries five fallbacks at most (#445), so a
     * bottom corner gives the slide above rather than Primer React's ne or
     * nw. The explicit inset holds where position-area does not yet turn an
     * auto inset into 0 (Chrome 130 to 142, Firefox 147, Safari 26.0 and 26.1). The
     * script names the button the anchor; without anchor positioning it
     * places the tooltip itself.
     */
    @supports (position-area: bottom) {
        :where(tool-tip):popover-open {
            inset: 0;
            position-area: bottom;
            justify-self: unsafe anchor-center;
            margin-block: var(--overlay-offset);
            position-try-fallbacks: --primer-tooltip-se, --primer-tooltip-sw, flip-block, --primer-tooltip-slide,
                --primer-tooltip-slide flip-block;
        }
    }

    /*
     * Local, a copy action's tooltip: beside the button, over its own value, on
     * its start side and, where that has no room, its end side, then wrapped
     * inside the start side, then the end side. Below or above, it covers the
     * next row's action in a stacked column, and a click there copies nothing.
     */
    @supports (position-area: left) {
        [data-clipboard-copy] + tool-tip:popover-open {
            position-area: left;
            align-self: anchor-center;
            justify-self: end;
            margin-block: 0;
            margin-inline: 0 var(--overlay-offset);
            position-try-fallbacks: flip-inline, --primer-tooltip-wrap, --primer-tooltip-wrap flip-inline;
        }

        [data-clipboard-copy] + tool-tip::after {
            inset: 0 calc(-1 * var(--overlay-offset));
        }
    }

    /*
     * Local, primer.style's Copy pattern (decisions Q80 and Q82): a
     * ClipboardCopy draws the copy, check and alert icons, and
     * static/js/primer-clipboard-copy.js sets data-copy-state on it. At rest
     * only the copy icon shows; after a copy, the check, in the success
     * color; after a refusal, the alert, in the danger color. Each selector's
     * (0,3,0) outranks Primer ViewComponents' .Button-visual display, (0,1,0),
     * and .Button--invisible .Button-visual color, (0,2,0), in whatever order
     * they come. Once the Clipboard API is there the script marks the page, and the
     * copy actions show only then: one that cannot work, or that no script
     * serves, is never drawn, not disabled.
     */
    [data-clipboard-copy]:not([data-copy-state="copied"]) .octicon-check,
    [data-clipboard-copy]:not([data-copy-state="failed"]) .octicon-alert,
    [data-clipboard-copy][data-copy-state] .octicon-copy {
        display: none;
    }

    [data-clipboard-copy][data-copy-state="copied"] .Button-visual {
        color: var(--fgColor-success);
    }

    [data-clipboard-copy][data-copy-state="failed"] .Button-visual {
        color: var(--fgColor-danger);
    }

    @media (forced-colors: active) {
        [data-clipboard-copy]:not([data-copy-state]) .Button-visual {
            color: ButtonText;
        }
    }

    :root:not([data-clipboard-ready]) [data-clipboard-copy] {
        display: none;
    }

    /* Primer's base stylesheet draws a control's focus inside it, as on the Dialog's close button. */
    :where(.close-button):focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset);
        box-shadow: none;
    }

    /* Local, as the header's controls: a 44px target under a coarse pointer. */
    @media (pointer: coarse) {
        :where(.Overlay-closeButton)::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: var(--control-minTarget-coarse);
            min-height: var(--control-minTarget-coarse);
            transform: translate(-50%, -50%);
        }
    }

    /* Primer's .sr-only (primer/css, utilities/visibility-display.scss): text only screen readers read. */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: rect(0 0 0 0);
        overflow-wrap: normal;
        border: 0;
    }
}

/*
 * Local, Primer React's --fit-block-bottom: an AnchoredOverlay that fits
 * neither below nor above its button stays below it, as tall as the screen
 * allows, and its body scrolls.
 */
@position-try --primer-anchored-overlay-fit {
    top: calc(anchor(bottom) + var(--base-size-4));
    bottom: var(--base-size-8);
}

/* Local, the label tooltip's other directions (the primer layer's tool-tip placement). */
@position-try --primer-tooltip-se {
    position-area: bottom span-right;
    justify-self: start;
}

/* A copy action's tooltip where neither side holds it whole: wrapped inside its side. */
@position-try --primer-tooltip-wrap {
    max-width: calc(100% - var(--overlay-offset));
}

@position-try --primer-tooltip-sw {
    position-area: bottom span-left;
    justify-self: end;
}

/*
 * Centered where it can be, slid inside the screen where it cannot: the
 * explicit anchor-center also keeps it there in Chrome 129 to 143 and
 * Firefox 147, where a span-all area alone lets it overflow (MDN).
 */
@position-try --primer-tooltip-slide {
    justify-self: anchor-center;
}