/* Build Useful design system v0.2.0. Generated by scripts/build.mjs: edit tokens/ or css/, not this file. */

@layer bu.tokens, bu.base, bu.layout, bu.components, bu.recipes;

@layer bu.tokens {
    /* Every colour is one light-dark() pair; color-scheme picks the side.
       data-theme="light" or "dark" on the root narrows it to one theme. */
    :root {
        color-scheme: light dark;

        --color-page: light-dark(#f6f7f9, #111111);
        --color-surface: light-dark(#ffffff, #1b1b1b);
        --color-surface-muted: light-dark(#eef1f4, #242424);
        --color-surface-subtle: light-dark(#f4f6f8, #202020);
        --color-text: light-dark(#171a1f, #f1f1f1);
        --color-text-muted: light-dark(#626a76, #b8b8b8);
        --color-text-soft: light-dark(#7e8794, #8f8f8f);
        --color-border: light-dark(#d9dee6, #343434);
        --color-border-subtle: light-dark(#e6e9ee, #2a2a2a);
        --color-border-control: light-dark(#7e8794, #6d6d6d);
        --color-primary: light-dark(#171a1f, #f1f1f1);
        --color-primary-hover: light-dark(#30343b, #ffffff);
        --color-primary-text: light-dark(#ffffff, #111111);
        --color-secondary: light-dark(#eef1f4, #242424);
        --color-secondary-hover: light-dark(#dfe4ea, #303030);
        --color-secondary-text: light-dark(#2d333b, #eeeeee);
        --color-danger: light-dark(#c73535, #e05a5a);
        --color-danger-hover: light-dark(#ad2e2e, #f06a6a);
        --color-danger-soft: light-dark(#fff0f0, #342020);
        --color-danger-text: light-dark(#b22d2d, #ff9999);
        --color-success: light-dark(#23774b, #49b77b);
        --color-info: light-dark(#2f78c4, #5a9fe5);
        --color-on-status: light-dark(#ffffff, #111111);
        --color-focus: light-dark(#171a1f, #f1f1f1);
        --color-brand-tile: #111111;
        --color-brand-mark: #f1f1f1;
        --color-shadow-contact: light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.28));
        --color-shadow-ambient: light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.18));
        --color-scrim: light-dark(rgba(15, 23, 42, 0.32), rgba(0, 0, 0, 0.6));

        --font-family-sans: system-ui, sans-serif;
        --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

        --font-size-2xs: 0.7rem;
        --font-size-xs: 0.75rem;
        --font-size-sm: 0.8rem;
        --font-size-md: 0.85rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.25rem;
        --font-size-display: 3rem;

        --font-weight-light: 300;
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;

        --line-height-none: 1;
        --line-height-tight: 1.1;
        --line-height-snug: 1.2;
        --line-height-normal: 1.4;

        --letter-spacing-none: 0;
        --letter-spacing-credit: 0.02em;
        --letter-spacing-overline: 0.04em;

        --space-1: 2px;
        --space-2: 4px;
        --space-3: 6px;
        --space-4: 8px;
        --space-5: 10px;
        --space-6: 12px;
        --space-7: 14px;
        --space-8: 16px;
        --space-10: 20px;
        --space-12: 24px;
        --space-16: 32px;
        --space-24: 48px;

        --layout-inset: var(--space-12);
        --layout-inset-narrow: var(--space-8);
        --layout-popup-width: 380px;
        --layout-measure: 600px;
        --layout-content: 960px;
        --layout-form: 480px;
        --layout-popup-min-height: 320px;
        --layout-breakpoint-narrow: 520px;

        --size-icon-sm: 16px;
        --size-icon-md: 18px;
        --size-icon-lg: 22px;
        --size-target-min: 28px;

        --radius-xs: 3px;
        --radius-sm: 6px;
        --radius-md: 8px;
        --radius-lg: 16px;
        --radius-full: 999px;

        --border-width-hairline: 1px;

        --focus-ring-width: 2px;
        --focus-ring-offset: 2px;

        --shadow-surface: 0 1px 2px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.28));
        --shadow-elevated: 0 1px 2px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.28)), 0 4px 12px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.18));

        --duration-color: 180ms;
        --duration-fast: 120ms;
        --duration-panel: 160ms;
        --duration-move: 180ms;
        --duration-theme: 200ms;
        --duration-sweep: 1100ms;
        --duration-pulse: 1400ms;

        --delay-hover-intent: 80ms;

        --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
        --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

        --opacity-disabled: 0.55;
        --opacity-loading: 0.3;
        --opacity-pulse: 0.35;
    }

    :root[data-theme="light"] {
        color-scheme: light;
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
    }
}

@layer bu.base {
    /* Base: the page, the theme mechanics, focus and motion defaults. Everything
       here applies without a class. */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :root {
        /* Native checkboxes, radios, ranges and progress bars take the ink
           instead of the browser's blue. */
        accent-color: var(--color-primary);
    }

    ::selection {
        background-color: var(--color-text);
        color: var(--color-page);
    }

    body {
        margin: 0;
        background-color: var(--color-page);
        color: var(--color-text);
        font-family: var(--font-family-sans);
        font-size: var(--font-size-base);
        line-height: var(--line-height-normal);
    }

    /* Form controls do not inherit type by default. Without this they render in
       the platform's form font, which on Windows has no 500 weight. */
    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    /* An author display rule beats the UA's [hidden] whatever its specificity, so
       a component that sets display would otherwise ignore hidden entirely. */
    [hidden] {
        display: none !important;
    }

    /* Links are ink with a quiet underline that darkens on hover. Never the
       browser's blue: the system has no link hue. */
    a {
        color: var(--color-text);
        text-decoration-line: underline;
        text-decoration-color: var(--color-border-control);
        text-decoration-thickness: var(--border-width-hairline);
        text-underline-offset: 0.2em;
    }

    a:hover {
        text-decoration-color: currentColor;
    }

    /* A link in supporting text. */
    .bu-link-muted {
        color: var(--color-text-muted);
    }

    /* One focus ring for everything: 2px ink, 2px clear. Ink meets 3:1 on every
       ground, which a hue would not. */
    :focus-visible {
        outline: var(--focus-ring-width) solid var(--color-focus);
        outline-offset: var(--focus-ring-offset);
    }

    /* Controls answer a pointer at one pace. Colour only: movement belongs to the
       component that moves. */
    button,
    input,
    select,
    textarea,
    a {
        transition:
            background-color var(--duration-color) var(--ease-standard),
            border-color var(--duration-color) var(--ease-standard),
            box-shadow var(--duration-color) var(--ease-standard),
            color var(--duration-color) var(--ease-standard),
            text-decoration-color var(--duration-color) var(--ease-standard);
    }

    /* A theme change is one cross-fade of the whole page, run by the browser. The
       overlay is taken out of hit-testing so a click during the fade still lands. */
    ::view-transition {
        pointer-events: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: var(--duration-theme);
    }

    /* No element eases its own colours during the swap: they would arrive out of
       step, and each text-and-ground pair would pass through a moment where both
       are the same grey. js/theme.js sets this attribute for that one frame. */
    :root[data-theme-switching],
    :root[data-theme-switching] *,
    :root[data-theme-switching] *::before,
    :root[data-theme-switching] *::after {
        transition: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
        :root {
            /* Every colour transition reads this, so this is the only place that
               has to know. Movement is switched off by each component. */
            --duration-color: 0s;
        }

        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
        }
    }

    /* Utilities */

    .bu-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Digits that change in place or line up in columns. */
    .bu-tabular {
        font-variant-numeric: tabular-nums;
    }

    .bu-muted {
        color: var(--color-text-muted);
    }

    .bu-soft {
        color: var(--color-text-soft);
    }

    .bu-balance {
        text-wrap: balance;
    }

    /* Free text with no guaranteed spaces, such as names and URLs. */
    .bu-break-anywhere {
        overflow-wrap: anywhere;
    }

    /* A single statement on a full screen. */
    .bu-text-display {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-display);
        font-weight: var(--font-weight-light);
        line-height: var(--line-height-snug);
        letter-spacing: var(--letter-spacing-none);
    }

    /* The main title of a focused screen. */
    .bu-text-title-lg {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-snug);
        letter-spacing: var(--letter-spacing-none);
    }

    /* The app name in the header. Set in text-muted. */
    .bu-text-wordmark {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-tight);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Supporting sentence under a display statement. */
    .bu-text-lead {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Card and form titles, item names. */
    .bu-text-title {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-snug);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Running text. */
    .bu-text-body {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Field values, secondary lines, body in compact surfaces. */
    .bu-text-body-sm {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Button labels. */
    .bu-text-label {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Summaries, quiet links, chips. */
    .bu-text-meta {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Small details under a title. */
    .bu-text-caption {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-none);
    }

    /* Uppercase section labels. Apply text-transform: uppercase. */
    .bu-text-overline {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-overline);
        text-transform: uppercase;
    }

    /* The publisher credit under the wordmark. */
    .bu-text-credit {
        font-family: var(--font-family-sans);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-normal);
        letter-spacing: var(--letter-spacing-credit);
    }
}

@layer bu.layout {
    /* Layout: the app shell and two stacking primitives. Breakpoint: 520px. */

    /* A full-window app: header, main, footer. min-height on the small viewport,
       because 100vh is the large one and would push the footer under a mobile
       URL bar. */
    .bu-app {
        display: grid;
        grid-template-rows: auto 1fr auto;
        min-height: 100svh;
        padding: var(--layout-inset);
    }

    /* Grid items default to min-width: auto, so one wide child would stretch the
       whole app sideways instead of wrapping. */
    .bu-app > * {
        min-width: 0;
    }

    /* A page that says one thing: the statement sits in the true centre of the
       window, because the header and footer rows are equal. */
    .bu-app--statement {
        grid-template-rows: 1fr auto 1fr;
    }

    .bu-app--statement > .bu-app-header {
        align-self: start;
    }

    /* Main content of a full-window app or an options page, centred. */
    .bu-app-content {
        width: 100%;
        max-width: var(--layout-content);
        margin-inline: auto;
    }

    .bu-app-content--form {
        max-width: var(--layout-form);
    }

    /* A browser-extension popup: fixed width, page-coloured, one column. */
    .bu-popup {
        width: var(--layout-popup-width);
        min-height: var(--layout-popup-min-height);
        padding: var(--space-12);
    }

    .bu-app-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-12);
    }

    .bu-popup .bu-app-header {
        align-items: center;
        gap: var(--space-4);
    }

    .bu-app-header-actions {
        display: flex;
        align-items: center;
        gap: var(--space-1);
    }

    .bu-app-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-12);
    }

    /* A browser side panel: the popup column at whatever width the browser gives. */
    .bu-popup--fluid {
        width: auto;
        min-height: 100svh;
        padding: var(--space-8);
    }

    /* The one thing a focused screen is for, centred on both axes. */
    .bu-app-stage {
        align-self: center;
        display: grid;
        justify-items: center;
        gap: var(--space-16);
        width: 100%;
        max-width: var(--layout-content);
        margin-inline: auto;
    }

    /* A centred statement, such as an interstitial or an error page. */
    .bu-statement {
        display: grid;
        justify-items: center;
        gap: var(--space-8);
        max-width: var(--layout-measure);
        margin-inline: auto;
        text-align: center;
    }

    /* Vertical rhythm. Set --bu-stack-gap to change the step. */
    .bu-stack {
        display: flex;
        flex-direction: column;
        gap: var(--bu-stack-gap, var(--space-7));
    }

    /* A wrapping row: chips, buttons, tags. */
    .bu-cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--bu-cluster-gap, var(--space-4));
    }

    @media (max-width: 520px) {
        .bu-app {
            padding: var(--layout-inset-narrow);
        }

        .bu-app-header {
            align-items: center;
        }
    }
}

@layer bu.components {
    /* badge.css */
    /* A one-word status attached to a title. */
    .bu-badge {
        display: inline-flex;
        align-items: center;
        padding: var(--space-1) var(--space-3);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface-muted);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-normal);
        white-space: nowrap;
    }

    /* Something is actively restricting or failing right now. */
    .bu-badge--danger {
        background-color: var(--color-danger-soft);
        color: var(--color-danger-text);
    }

    /* brand.css */
    /* The app name over the publisher credit. Top-left of every app. */
    .bu-brand {
        display: grid;
        gap: var(--space-1);
        /* The credit link ends where its text ends, not at the name's width. */
        justify-items: start;
        min-width: 0;
    }

    .bu-brand-name {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        /* Stated, not inherited: name and credit are one lockup, and body
           leading would pull them apart. */
        line-height: var(--line-height-tight);
        letter-spacing: var(--letter-spacing-none);
    }

    .bu-brand-credit {
        color: var(--color-text-soft);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--letter-spacing-credit);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .bu-brand-credit:hover {
        color: var(--color-text-muted);
    }

    /* button.css */
    /* Text buttons. Secondary is the default; add one modifier for the role. Every
       variant carries a 1px border (transparent unless outlined) so all variants
       share one height. */
    .bu-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        margin: 0;
        padding: calc(var(--space-3) - var(--border-width-hairline)) calc(var(--space-5) - var(--border-width-hairline));
        border: var(--border-width-hairline) solid transparent;
        border-radius: var(--radius-sm);
        background-color: var(--color-secondary);
        color: var(--color-secondary-text);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-normal);
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .bu-button:not(:disabled, [aria-disabled="true"]):hover {
        background-color: var(--color-secondary-hover);
    }

    .bu-button svg {
        flex: none;
        width: var(--size-icon-md);
        height: var(--size-icon-md);
    }

    /* The one action the view exists for. One per view. */
    .bu-button--primary {
        background-color: var(--color-primary);
        color: var(--color-primary-text);
    }

    .bu-button--primary:not(:disabled, [aria-disabled="true"]):hover {
        background-color: var(--color-primary-hover);
    }

    /* Removes or destroys something. */
    .bu-button--danger {
        background-color: var(--color-danger);
        color: var(--color-on-status);
    }

    .bu-button--danger:not(:disabled, [aria-disabled="true"]):hover {
        background-color: var(--color-danger-hover);
    }

    /* A quiet way somewhere else: links out, optional extras. */
    .bu-button--outline {
        border-color: var(--color-border-subtle);
        background-color: transparent;
        color: var(--color-text-muted);
        font-weight: var(--font-weight-medium);
    }

    .bu-button--outline svg {
        color: var(--color-text-soft);
    }

    .bu-button--outline:not(:disabled, [aria-disabled="true"]):hover {
        border-color: var(--color-border);
        background-color: var(--color-surface-subtle);
        color: var(--color-text);
    }

    .bu-button--outline:not(:disabled, [aria-disabled="true"]):hover svg {
        color: var(--color-text-muted);
    }

    .bu-button--sm {
        padding: calc(var(--space-2) - var(--border-width-hairline)) calc(var(--space-4) - var(--border-width-hairline));
    }

    /* The only action on a full screen. */
    .bu-button--lg {
        gap: var(--space-4);
        min-height: 40px;
        padding: calc(var(--space-4) - var(--border-width-hairline)) calc(var(--space-8) - var(--border-width-hairline));
        font-size: var(--font-size-md);
    }

    .bu-button--block {
        width: 100%;
    }

    .bu-button:disabled,
    .bu-button[aria-disabled="true"] {
        cursor: not-allowed;
        opacity: var(--opacity-disabled);
    }

    /* Forced colours drop fills, so the transparent border becomes the edge. */
    @media (forced-colors: active) {
        .bu-button {
            border-color: ButtonText;
        }
    }

    /* card.css */
    /* A raised container for one thing a person manages. */
    /* Block, so a link can be a card. Components sit in a later layer than layout, so step aside
       when a layout primitive on the same element sets its own display. */
    .bu-card:not(.bu-stack, .bu-cluster) {
        display: block;
    }

    .bu-card {
        min-width: 0;
        padding: var(--space-6);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-surface);
        color: var(--color-text);
    }

    /* Title block at the start, status or actions at the end. */
    .bu-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: var(--space-5);
        margin-bottom: var(--space-4);
    }

    .bu-card-heading {
        display: grid;
        gap: var(--space-1);
        min-width: 0;
    }

    .bu-card-title {
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-snug);
        /* Names are free text; a long one must not widen the layout. */
        overflow-wrap: anywhere;
    }

    .bu-card-subtitle {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-md);
    }

    .bu-card-caption {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
    }

    /* Controls that appear when the pointer rests on the card, or at once when
       focus enters it. Always shown where there is no hover. */
    .bu-card-actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    @media (hover: hover) {
        .bu-card-actions--reveal {
            opacity: 0;
            transition: opacity var(--duration-fast) var(--ease-standard);
        }

        .bu-card:hover .bu-card-actions--reveal {
            opacity: 1;
            transition-delay: var(--delay-hover-intent);
        }

        .bu-card:focus-within .bu-card-actions--reveal {
            opacity: 1;
            transition-delay: 0s;
        }
    }

    /* checkbox.css */
    /* Native checkboxes and radios with their labels. The browser draws the box;
       accent-color (set in base) inks it. */
    .bu-check {
        display: inline-flex;
        align-items: flex-start;
        gap: var(--space-4);
        color: var(--color-text);
        font-size: var(--font-size-md);
        line-height: var(--line-height-normal);
        cursor: pointer;
    }

    .bu-check > input {
        flex: none;
        width: var(--size-icon-sm);
        height: var(--size-icon-sm);
        /* Centres the box on the first line of the label. */
        margin: calc((1lh - var(--size-icon-sm)) / 2) 0 0;
        cursor: pointer;
    }

    .bu-check-hint {
        display: block;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
    }

    .bu-check:has(> input:disabled) {
        cursor: not-allowed;
        opacity: var(--opacity-disabled);
    }

    .bu-check:has(> input:disabled) > input {
        cursor: not-allowed;
    }

    /* A set of checkboxes or radios under one question. */
    .bu-check-group {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .bu-check-group > legend {
        margin-bottom: var(--space-2);
        padding: 0;
        color: var(--color-text);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
    }

    /* chip.css */
    /* A short value in a pill: a site, a tag, a filter. */
    .bu-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
        max-width: 100%;
        padding: calc(var(--space-3) - var(--border-width-hairline)) calc(var(--space-5) - var(--border-width-hairline));
        border: var(--border-width-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-full);
        background-color: var(--color-surface-subtle);
        color: var(--color-text);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-snug);
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    /* Chips that do something on hover or click. */
    a.bu-chip,
    button.bu-chip,
    .bu-chip--interactive {
        cursor: pointer;
    }

    a.bu-chip:hover,
    button.bu-chip:hover,
    .bu-chip--interactive:hover {
        border-color: var(--color-border);
        background-color: var(--color-surface-muted);
    }

    .bu-chip svg {
        flex: none;
        width: var(--size-icon-sm);
        height: var(--size-icon-sm);
    }

    .bu-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* dialog.css */
    /* A modal question or short task, on the native <dialog> element. */
    .bu-dialog {
        width: min(400px, calc(100vw - var(--space-16)));
        max-height: calc(100svh - var(--space-16));
        margin: auto;
        padding: var(--space-12);
        overflow: auto;
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-lg);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-elevated);
        color: var(--color-text);
    }

    .bu-dialog::backdrop {
        background-color: var(--color-scrim);
    }

    .bu-dialog-title {
        margin: 0 0 var(--space-4);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-snug);
        text-wrap: balance;
    }

    .bu-dialog-body {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-md);
    }

    /* Cancel first, the answer last: the eye ends on the answer. */
    .bu-dialog-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-4);
        margin-top: var(--space-12);
    }

    /* Drawn in place, for documentation. */
    .bu-dialog--static {
        position: static;
        display: block;
    }

    @media (prefers-reduced-motion: no-preference) {
        .bu-dialog,
        .bu-dialog::backdrop {
            transition:
                opacity var(--duration-panel) var(--ease-standard),
                transform var(--duration-panel) var(--ease-standard),
                display var(--duration-panel) allow-discrete,
                overlay var(--duration-panel) allow-discrete;
        }

        .bu-dialog:not([open]):not(.bu-dialog--static) {
            opacity: 0;
            transform: translateY(4px) scale(0.98);
        }

        .bu-dialog:not([open])::backdrop {
            opacity: 0;
        }

        .bu-dialog[open] {
            @starting-style {
                opacity: 0;
                transform: translateY(4px) scale(0.98);
            }
        }

        .bu-dialog[open]::backdrop {
            @starting-style {
                opacity: 0;
            }
        }
    }

    /* divider.css */
    /* A hairline between sections. Separates without enclosing. */
    .bu-divider {
        width: 100%;
        height: var(--border-width-hairline);
        margin: 0;
        border: 0;
        background-color: var(--color-border-subtle);
    }

    /* empty-state.css */
    /* What a list shows when it has nothing in it yet. */
    .bu-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-16) var(--space-10);
        text-align: center;
    }

    .bu-empty-state-title {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-medium);
    }

    .bu-empty-state-hint {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    /* field.css */
    /* Text inputs, selects and textareas, with their label, hint and error. */
    .bu-field {
        display: grid;
        gap: var(--space-2);
        min-width: 0;
    }

    .bu-label {
        color: var(--color-text);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
    }

    .bu-hint {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
    }

    .bu-error {
        margin: 0;
        color: var(--color-danger-text);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
    }

    .bu-input,
    .bu-select,
    .bu-textarea {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: var(--space-4);
        border: var(--border-width-hairline) solid var(--color-border-control);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface);
        color: var(--color-text);
        font-size: var(--font-size-md);
        line-height: var(--line-height-normal);
    }

    .bu-input::placeholder,
    .bu-textarea::placeholder {
        color: var(--color-text-soft);
        opacity: 1;
    }

    /* A field shows focus on every focus, not only keyboard focus: clicking in
       and typing are one state. The border thickens in ink instead of growing a
       ring, so the field keeps its place in a dense form. */
    .bu-input:focus,
    .bu-select:focus,
    .bu-textarea:focus {
        border-color: var(--color-focus);
        box-shadow: 0 0 0 var(--border-width-hairline) var(--color-focus);
        outline: none;
    }

    .bu-input[aria-invalid="true"],
    .bu-select[aria-invalid="true"],
    .bu-textarea[aria-invalid="true"] {
        border-color: var(--color-danger);
    }

    .bu-input:disabled,
    .bu-select:disabled,
    .bu-textarea:disabled {
        cursor: not-allowed;
        opacity: var(--opacity-disabled);
    }

    /* A drawn chevron that follows the text colour in every engine and theme. */
    .bu-select {
        padding-inline-end: calc(var(--space-12) + var(--space-1));
        background-image:
            linear-gradient(45deg, transparent 50%, currentColor 50%),
            linear-gradient(135deg, currentColor 50%, transparent 50%);
        background-position: right 12px top 53%, right 7px top 53%;
        background-repeat: no-repeat;
        background-size: 5px 5px, 5px 5px;
        cursor: pointer;
        appearance: none;
    }

    .bu-select:dir(rtl) {
        background-position: left 7px top 53%, left 12px top 53%;
    }

    .bu-textarea {
        min-height: calc(var(--space-24) * 2);
        resize: vertical;
    }

    /* An input and its button on one line. */
    .bu-input-group {
        display: flex;
        gap: var(--space-4);
    }

    .bu-input-group > .bu-input {
        flex: 1;
    }

    /* icon-button.css */
    /* A borderless round button holding one icon: header actions, row actions,
       panel triggers. */
    .bu-icon-button {
        --bu-icon-button-size: 40px;
        --bu-icon-button-icon: var(--size-icon-lg);
        display: inline-grid;
        place-items: center;
        flex: none;
        width: var(--bu-icon-button-size);
        height: var(--bu-icon-button-size);
        margin: 0;
        padding: 0;
        border: var(--border-width-hairline) solid transparent;
        border-radius: var(--radius-full);
        background-color: transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .bu-icon-button svg {
        display: block;
        width: var(--bu-icon-button-icon);
        height: var(--bu-icon-button-icon);
        pointer-events: none;
    }

    /* Inside rows and cards: remove, edit, more. */
    .bu-icon-button--sm {
        --bu-icon-button-size: var(--size-target-min);
        --bu-icon-button-icon: var(--size-icon-sm);
    }

    /* Lit: the panel this button opens is open. Lit means that and nothing else,
       so a button that opens a panel has no hover state to be confused with it. */
    .bu-icon-button[aria-expanded="true"],
    :has(> [popover]:popover-open) > .bu-icon-button {
        background-color: var(--color-surface-muted);
        color: var(--color-text);
    }

    /* Buttons that act immediately do hover. */
    .bu-icon-button:not([aria-expanded], [aria-haspopup], [popovertarget], :disabled):hover {
        background-color: var(--color-surface-muted);
        color: var(--color-text);
    }

    /* A toggle that is on: ink, not a hue. */
    .bu-icon-button[aria-pressed="true"] {
        color: var(--color-text);
    }

    /* Waiting on something it started: connecting, syncing. */
    .bu-icon-button[aria-busy="true"] svg {
        animation: bu-icon-button-pulse var(--duration-pulse) ease-in-out infinite;
    }

    .bu-icon-button:disabled {
        cursor: default;
        opacity: var(--opacity-disabled);
    }

    @media (prefers-reduced-motion: reduce) {
        /* The wait still needs saying: hold the dim half of the pulse. */
        .bu-icon-button[aria-busy="true"] svg {
            animation: none;
            opacity: var(--opacity-pulse);
        }
    }

    /* Backgrounds don't survive forced colours; borders do. */
    @media (forced-colors: active) {
        .bu-icon-button[aria-expanded="true"],
        .bu-icon-button[aria-pressed="true"],
        :has(> [popover]:popover-open) > .bu-icon-button {
            border-color: CanvasText;
        }
    }

    @keyframes bu-icon-button-pulse {
        50% {
            opacity: var(--opacity-pulse);
        }
    }

    /* list.css */
    /* A plain vertical list of rows inside a card or form, each with an
       optional action at the end. */
    .bu-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bu-list-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-5);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface-subtle);
        font-size: var(--font-size-md);
    }

    .bu-list-row > :first-child {
        flex: 1;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    /* A stack of cards: the main list of a screen. */
    .bu-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* menu.css */
    /* A panel of settings that drops from an icon button. Built on the popover
       API; anchored with CSS anchor positioning where available. */
    .bu-menu {
        --bu-menu-inset: var(--space-7);
        gap: var(--space-5);
        width: max-content;
        /* Stated so no engine stretches the panel to fill its insets. */
        height: max-content;
        margin: 0;
        padding: var(--bu-menu-inset);
        overflow: visible;
        border: var(--border-width-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-elevated);
        color: var(--color-text);
    }

    /* A menu drawn in place, for documentation or an always-open settings pane. */
    .bu-menu:not([popover]) {
        display: grid;
    }

    /* Hung beneath its button, trailing edges aligned, opening back across the
       header. The trigger needs anchor-name and the panel position-anchor, both
       set to the same --name. */
    .bu-menu[popover] {
        inset: auto;
        position-area: block-end span-inline-start;
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
        transform-origin: 100% 0;
        transition:
            opacity var(--duration-panel) var(--ease-standard),
            transform var(--duration-panel) var(--ease-standard),
            display var(--duration-panel) allow-discrete,
            overlay var(--duration-panel) allow-discrete;
    }

    /* display is declared only here. Any author display on the closed state would
       outrank the UA's display: none and leave the panel laid out and tabbable
       while invisible. */
    .bu-menu[popover]:popover-open {
        display: grid;
        opacity: 1;
        transform: none;

        @starting-style {
            opacity: 0;
            transform: translateY(-4px) scale(0.98);
        }
    }

    /* Without anchor positioning the UA's centred placement stands: a whole,
       usable panel, just not hung off its button. */
    /* Opens from the trigger-side corner in right-to-left pages too. */
    .bu-menu[popover]:dir(rtl) {
        transform-origin: 0 0;
    }

    @supports not (anchor-name: --a) {
        .bu-menu[popover] {
            inset: 0;
            margin: auto;
        }
    }

    .bu-menu--compact {
        --bu-menu-inset: var(--space-6);
        gap: var(--space-4);
    }

    .bu-menu-label {
        color: var(--color-text-muted);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--letter-spacing-overline);
        text-transform: uppercase;
    }

    .bu-menu-row {
        display: flex;
        justify-content: center;
    }

    .bu-menu-divider {
        height: var(--border-width-hairline);
        margin: 0;
        border: 0;
        background-color: var(--color-border-subtle);
    }

    /* Wraps a trigger and its panel, so the trigger can light while the panel
       is open (see icon-button.css). */
    .bu-menu-anchor {
        display: inline-flex;
    }

    /* A full-width action row. Its negative margin and padding cancel, so its
       icon lines up with everything else in the panel. */
    .bu-menu-item {
        --bu-menu-item-inset: var(--space-2);
        display: flex;
        align-items: center;
        gap: var(--space-4);
        width: calc(100% + var(--bu-menu-item-inset) * 2);
        margin: 0 calc(var(--bu-menu-item-inset) * -1);
        padding: var(--bu-menu-item-inset);
        border: 0;
        border-radius: var(--radius-sm);
        background-color: transparent;
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--letter-spacing-credit);
        text-align: start;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .bu-menu-item svg {
        flex: none;
        width: var(--size-icon-sm);
        height: var(--size-icon-sm);
    }

    @media (hover: hover) and (pointer: fine) {
        .bu-menu-item:hover {
            background-color: var(--color-surface-muted);
            color: var(--color-text);
        }
    }

    /* The version, or a link to the source. Last in the panel. */
    .bu-menu-footer {
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--letter-spacing-credit);
        text-align: center;
        text-decoration: none;
    }

    a.bu-menu-footer:hover {
        color: var(--color-text);
    }

    .bu-menu-footer:empty {
        display: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .bu-menu[popover] {
            transition: none;
        }
    }

    /* progress.css */
    /* Waiting without a spinner: a 72x2px rail with a sweeping dash, and words
       for anyone the dash cannot reach. */
    .bu-progress {
        display: grid;
        justify-items: center;
        gap: var(--space-4);
        margin: 0;
        font-size: var(--font-size-sm);
    }

    .bu-progress-rail {
        --bu-progress-rail-width: 72px;
        position: relative;
        display: block;
        width: var(--bu-progress-rail-width);
        height: 2px;
        overflow: hidden;
        border-radius: var(--radius-full);
        background-color: var(--color-border);
    }

    /* The dash is the whole message for a sighted reader, so it uses the muted
       ink (4.5:1), not the soft one. */
    .bu-progress-rail::after {
        content: "";
        position: absolute;
        inset-block: 0;
        left: -40%;
        width: 40%;
        border-radius: inherit;
        background-color: var(--color-text-muted);
    }

    /* Read by screen readers always; shown when the rail cannot carry the message. */
    .bu-progress-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Content whose data is still on its way. Recovers at once when ready. */
    .bu-loading-dim {
        opacity: var(--opacity-loading);
    }

    @media (prefers-reduced-motion: no-preference) {
        /* Linear: easing would make the dash hesitate at the clipped ends and
           read as a pulse. */
        .bu-progress-rail::after {
            animation: bu-progress-sweep var(--duration-sweep) linear infinite;
        }
    }

    /* Frozen, the dash reads as a stalled bar; in forced colours it vanishes.
       Both get words instead. */
    @media (prefers-reduced-motion: reduce), (forced-colors: active) {
        .bu-progress-rail {
            display: none;
        }

        .bu-progress-label {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip-path: none;
            color: var(--color-text-muted);
            white-space: normal;
        }
    }

    @keyframes bu-progress-sweep {
        from {
            left: -40%;
        }

        to {
            left: 100%;
        }
    }

    /* segmented.css */
    /* A pill of two to four mutually exclusive options with a sliding thumb.
       Markup: radio inputs, each followed by its label. No script needed. */
    .bu-segmented {
        --bu-segment-size: 34px;
        --bu-segment-gap: var(--space-2);
        --bu-segment-count: 2;
        --bu-segment-index: 0;
        --bu-dir: 1;
        position: relative;
        display: inline-grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--bu-segment-size);
        gap: var(--bu-segment-gap);
        padding: var(--bu-segment-gap);
        border: var(--border-width-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-full);
        background-color: var(--color-surface-muted);
    }

    .bu-segmented:dir(rtl) {
        --bu-dir: -1;
    }

    .bu-segmented:has(> input:nth-of-type(3)) { --bu-segment-count: 3; }
    .bu-segmented:has(> input:nth-of-type(4)) { --bu-segment-count: 4; }
    .bu-segmented:has(> input:nth-of-type(5)) { --bu-segment-count: 5; }
    .bu-segmented:has(> input:nth-of-type(6)) { --bu-segment-count: 6; }
    .bu-segmented:has(> input:nth-of-type(2):checked) { --bu-segment-index: 1; }
    .bu-segmented:has(> input:nth-of-type(3):checked) { --bu-segment-index: 2; }
    .bu-segmented:has(> input:nth-of-type(4):checked) { --bu-segment-index: 3; }
    .bu-segmented:has(> input:nth-of-type(5):checked) { --bu-segment-index: 4; }
    .bu-segmented:has(> input:nth-of-type(6):checked) { --bu-segment-index: 5; }

    /* The thumb is one column wide; a percentage translate is of its own width. */
    .bu-segmented::before {
        content: "";
        position: absolute;
        inset-block: var(--bu-segment-gap);
        inset-inline-start: var(--bu-segment-gap);
        width: calc((100% - (var(--bu-segment-count) + 1) * var(--bu-segment-gap)) / var(--bu-segment-count));
        border-radius: var(--radius-full);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-surface);
        transform: translateX(calc(var(--bu-segment-index) * (100% + var(--bu-segment-gap)) * var(--bu-dir)));
        pointer-events: none;
    }

    .bu-segmented > input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .bu-segmented > label {
        position: relative;
        z-index: 1;
        display: grid;
        place-items: center;
        min-width: var(--bu-segment-size);
        height: var(--bu-segment-size);
        padding-inline: var(--bu-segment-pad, 0);
        border-radius: var(--radius-full);
        color: var(--color-text-muted);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        user-select: none;
        transition: color var(--duration-color) var(--ease-standard);
        -webkit-tap-highlight-color: transparent;
    }

    .bu-segmented > label svg {
        width: calc(var(--bu-segment-size) * 0.53);
        height: calc(var(--bu-segment-size) * 0.53);
    }

    .bu-segmented > input:checked + label {
        color: var(--color-text);
    }

    .bu-segmented > input:focus-visible + label {
        outline: var(--focus-ring-width) solid var(--color-focus);
        outline-offset: var(--focus-ring-offset);
    }

    .bu-segmented--compact {
        --bu-segment-size: 28px;
    }

    /* Words instead of icons: columns as wide as the widest label. */
    .bu-segmented--text {
        --bu-segment-pad: var(--space-6);
        grid-auto-columns: 1fr;
    }

    @media (prefers-reduced-motion: no-preference) {
        .bu-segmented::before {
            transition: transform var(--duration-move) var(--ease-settle);
        }
    }

    /* Forced colours drop the thumb's fill; give it an edge and mark the choice. */
    @media (forced-colors: active) {
        .bu-segmented::before {
            border: var(--border-width-hairline) solid CanvasText;
        }

        .bu-segmented > input:checked + label {
            forced-color-adjust: none;
            color: Highlight;
        }
    }

    /* switch.css */
    /* An on/off setting that applies at once. A styled checkbox with
       role="switch". */
    .bu-switch {
        --bu-switch-travel: 16px;
        position: relative;
        flex: none;
        width: 38px;
        height: 22px;
        margin: 0;
        border-radius: var(--radius-full);
        background-color: var(--color-border-control);
        cursor: pointer;
        appearance: none;
    }

    .bu-switch::before {
        content: "";
        position: absolute;
        top: 2px;
        inset-inline-start: 2px;
        width: 18px;
        height: 18px;
        border-radius: var(--radius-full);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-surface);
    }

    .bu-switch:checked {
        background-color: var(--color-primary);
    }

    .bu-switch:checked::before {
        transform: translateX(var(--bu-switch-travel));
    }

    .bu-switch:checked:dir(rtl)::before {
        transform: translateX(calc(var(--bu-switch-travel) * -1));
    }

    .bu-switch:disabled {
        cursor: not-allowed;
        opacity: var(--opacity-disabled);
    }

    /* A setting on its own row: label at the start, switch at the end. */
    .bu-switch-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-6);
        padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface-subtle);
        color: var(--color-text);
        font-size: var(--font-size-md);
    }

    @media (prefers-reduced-motion: no-preference) {
        .bu-switch::before {
            transition: transform var(--duration-move) var(--ease-settle);
        }
    }

    /* Forced colours drop fills, which would erase the on/off state. Draw it in
       system colours instead. */
    @media (forced-colors: active) {
        .bu-switch {
            forced-color-adjust: none;
            border: var(--border-width-hairline) solid CanvasText;
            background-color: Canvas;
        }

        .bu-switch::before {
            top: 1px;
            inset-inline-start: 1px;
            background-color: CanvasText;
            box-shadow: none;
        }

        .bu-switch:checked {
            border-color: Highlight;
            background-color: Highlight;
        }

        .bu-switch:checked::before {
            background-color: HighlightText;
        }
    }

    /* toast.css */
    /* A short message that drops in at the top and leaves by itself. Use a
       manual popover so it sits in the top layer above any open menu. */
    .bu-toast {
        --bu-toast-max-width: 400px;
        /* How far above the top edge it starts. */
        --bu-toast-travel: 100px;
        max-width: min(var(--bu-toast-max-width), calc(100vw - var(--space-16)));
        padding: var(--space-6) var(--space-12);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-elevated);
        color: var(--color-text);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-medium);
        text-align: center;
        overflow-wrap: break-word;
    }

    .bu-toast[popover] {
        position: fixed;
        inset: var(--space-8) auto auto 50%;
        width: max-content;
        height: auto;
        margin: 0;
        overflow: visible;
        opacity: 0;
        translate: -50% calc(var(--bu-toast-travel) * -1);
        transition:
            opacity var(--duration-move) var(--ease-standard),
            translate var(--duration-move) var(--ease-standard),
            display var(--duration-move) allow-discrete,
            overlay var(--duration-move) allow-discrete;
    }

    .bu-toast[popover]:popover-open {
        display: block;
        opacity: 1;
        translate: -50% 0;

        @starting-style {
            opacity: 0;
            translate: -50% calc(var(--bu-toast-travel) * -1);
        }
    }

    /* Drawn in place, for documentation. */
    .bu-toast:not([popover]) {
        display: inline-block;
    }

    .bu-toast--success,
    .bu-toast--danger,
    .bu-toast--info {
        border-color: transparent;
        color: var(--color-on-status);
    }

    .bu-toast--success {
        background-color: var(--color-success);
    }

    .bu-toast--danger {
        background-color: var(--color-danger);
    }

    .bu-toast--info {
        background-color: var(--color-info);
    }

    @media (prefers-reduced-motion: reduce) {
        .bu-toast[popover] {
            transition: none;
        }
    }

    /* tooltip.css */
    /* A short description of the control under the pointer or focus. A popover
       anchored beneath its trigger. */
    .bu-tooltip {
        --bu-tooltip-gap: var(--space-3);
        width: max-content;
        max-width: 240px;
        margin: 0;
        padding: var(--space-3) var(--space-5);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-sm);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-elevated);
        color: var(--color-text);
        font-size: var(--font-size-xs);
        line-height: var(--line-height-normal);
        pointer-events: none;
    }

    /* Drawn in place, for documentation. */
    .bu-tooltip:not([popover]) {
        display: inline-block;
    }

    .bu-tooltip[popover] {
        inset: auto;
        position-area: block-end;
        margin-block-start: var(--bu-tooltip-gap);
        overflow: visible;
        opacity: 0;
        transition:
            opacity var(--duration-fast) var(--ease-standard),
            display var(--duration-fast) allow-discrete,
            overlay var(--duration-fast) allow-discrete;
    }

    .bu-tooltip[popover]:popover-open {
        display: block;
        opacity: 1;

        @starting-style {
            opacity: 0;
        }
    }

    /* Flip above the trigger when there's no room below. */
    @supports (position-try-fallbacks: flip-block) {
        .bu-tooltip[popover] {
            position-try-fallbacks: flip-block;
        }
    }

    @supports not (anchor-name: --a) {
        .bu-tooltip[popover] {
            inset: auto 0 var(--space-8);
            margin-inline: auto;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .bu-tooltip[popover] {
            transition: none;
        }
    }
}