/* Registered as lengths so the dialog script reads the tray's spacing in px from the theme. */
@property --tb-dialog-tray-gap {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --tb-dialog-tray-edge {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* Registered as a length so a bare 0 offset still adds to the circle's percentage inset. */
@property --tb-badge-offset {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 0px;
}

/* Unlayered consumer CSS beats every rule in these layers, whatever its specificity. */
@layer tb.reset, tb.tokens, tb.themes, tb.components, tb.utilities;

@layer tb.reset {
    /* A themed element, the page itself once TbThemeHead marks it, takes its theme's background and text. */
    :where([data-tb-theme]) {
        background-color: var(--tb-color-background);
        color: var(--tb-color-text);
    }

    /* The marked page takes the theme's type too, so text outside the components matches them. The size goes on body,
       so a smaller body size leaves rem, and every rem-based token, alone. A control that inherits its font sets its
       own line height, so the page's never changes how tall it is. */
    :where(html[data-tb-theme]) {
        font-family: var(--tb-font-family);
        line-height: var(--tb-line-height-normal);
    }

    :where(html[data-tb-theme] > body) {
        font-size: var(--tb-font-size-md);
    }
}

@layer tb.tokens {
    :root {
        /* Reference tier: tonal scales. Components never read these directly. */
        --tb-gray-50: oklch(0.975 0.003 260);
        --tb-gray-100: oklch(0.945 0.005 260);
        --tb-gray-200: oklch(0.89 0.008 260);
        --tb-gray-300: oklch(0.81 0.012 260);
        --tb-gray-400: oklch(0.71 0.015 260);
        --tb-gray-500: oklch(0.62 0.017 260);
        --tb-gray-600: oklch(0.52 0.018 260);
        --tb-gray-700: oklch(0.47 0.018 260);
        --tb-gray-800: oklch(0.4 0.017 260);
        --tb-gray-900: oklch(0.33 0.015 260);
        --tb-gray-925: oklch(0.27 0.014 260);
        --tb-gray-950: oklch(0.25 0.013 260);
        --tb-gray-960: oklch(0.23 0.012 260);
        --tb-gray-975: oklch(0.19 0.011 260);
        --tb-gray-985: oklch(0.16 0.01 260);

        --tb-graphite-50: oklch(0.975 0.0009 255);
        --tb-graphite-100: oklch(0.945 0.0015 255);
        --tb-graphite-200: oklch(0.89 0.0024 255);
        --tb-graphite-300: oklch(0.81 0.0036 255);
        --tb-graphite-400: oklch(0.71 0.0045 255);
        --tb-graphite-500: oklch(0.62 0.0051 255);
        --tb-graphite-600: oklch(0.52 0.0054 255);
        --tb-graphite-700: oklch(0.47 0.0054 255);
        --tb-graphite-800: oklch(0.4 0.0051 255);
        --tb-graphite-900: oklch(0.33 0.0045 255);
        --tb-graphite-925: oklch(0.27 0.004 255);
        --tb-graphite-950: oklch(0.25 0.0039 255);
        --tb-graphite-960: oklch(0.23 0.004 255);
        --tb-graphite-975: oklch(0.19 0.004 255);
        --tb-graphite-985: oklch(0.16 0.004 255);

        --tb-blue-50: oklch(0.975 0.015 260);
        --tb-blue-100: oklch(0.945 0.035 260);
        --tb-blue-200: oklch(0.89 0.065 260);
        --tb-blue-300: oklch(0.81 0.1 260);
        --tb-blue-400: oklch(0.71 0.14 260);
        --tb-blue-500: oklch(0.62 0.165 260);
        --tb-blue-600: oklch(0.52 0.17 260);
        --tb-blue-700: oklch(0.47 0.155 260);
        --tb-blue-800: oklch(0.4 0.13 260);
        --tb-blue-900: oklch(0.33 0.105 260);
        --tb-blue-950: oklch(0.25 0.08 260);

        --tb-green-50: oklch(0.975 0.015 150);
        --tb-green-100: oklch(0.945 0.035 150);
        --tb-green-200: oklch(0.89 0.065 150);
        --tb-green-300: oklch(0.81 0.1 150);
        --tb-green-400: oklch(0.71 0.14 150);
        --tb-green-500: oklch(0.62 0.165 150);
        --tb-green-600: oklch(0.52 0.17 150);
        --tb-green-700: oklch(0.47 0.155 150);
        --tb-green-800: oklch(0.4 0.13 150);
        --tb-green-900: oklch(0.33 0.105 150);
        --tb-green-950: oklch(0.25 0.08 150);

        --tb-amber-50: oklch(0.975 0.015 75);
        --tb-amber-100: oklch(0.945 0.035 75);
        --tb-amber-200: oklch(0.89 0.065 75);
        --tb-amber-300: oklch(0.81 0.1 75);
        --tb-amber-400: oklch(0.71 0.14 75);
        --tb-amber-500: oklch(0.62 0.165 75);
        --tb-amber-600: oklch(0.52 0.17 75);
        --tb-amber-700: oklch(0.47 0.155 75);
        --tb-amber-800: oklch(0.4 0.13 75);
        --tb-amber-900: oklch(0.33 0.105 75);
        --tb-amber-950: oklch(0.25 0.08 75);

        --tb-red-50: oklch(0.975 0.015 27);
        --tb-red-100: oklch(0.945 0.035 27);
        --tb-red-200: oklch(0.89 0.065 27);
        --tb-red-300: oklch(0.81 0.1 27);
        --tb-red-400: oklch(0.71 0.14 27);
        --tb-red-500: oklch(0.62 0.165 27);
        --tb-red-600: oklch(0.52 0.17 27);
        --tb-red-700: oklch(0.47 0.155 27);
        --tb-red-800: oklch(0.4 0.13 27);
        --tb-red-900: oklch(0.33 0.105 27);
        --tb-red-950: oklch(0.25 0.08 27);

        --tb-sky-50: oklch(0.975 0.015 222);
        --tb-sky-100: oklch(0.945 0.035 222);
        --tb-sky-200: oklch(0.89 0.065 222);
        --tb-sky-300: oklch(0.81 0.1 222);
        --tb-sky-400: oklch(0.71 0.14 222);
        --tb-sky-500: oklch(0.62 0.165 222);
        --tb-sky-600: oklch(0.52 0.17 222);
        --tb-sky-700: oklch(0.47 0.155 222);
        --tb-sky-800: oklch(0.4 0.13 222);
        --tb-sky-900: oklch(0.33 0.105 222);
        --tb-sky-950: oklch(0.25 0.08 222);

        --tb-stone-50: oklch(0.975 0.0033 60);
        --tb-stone-100: oklch(0.945 0.0055 60);
        --tb-stone-200: oklch(0.89 0.0088 60);
        --tb-stone-300: oklch(0.81 0.0132 60);
        --tb-stone-400: oklch(0.71 0.0165 60);
        --tb-stone-500: oklch(0.62 0.0187 60);
        --tb-stone-600: oklch(0.52 0.0198 60);
        --tb-stone-700: oklch(0.47 0.0198 60);
        --tb-stone-800: oklch(0.4 0.0187 60);
        --tb-stone-900: oklch(0.33 0.0165 60);
        --tb-stone-925: oklch(0.27 0.0154 60);
        --tb-stone-950: oklch(0.25 0.0143 60);
        --tb-stone-960: oklch(0.23 0.0132 60);
        --tb-stone-975: oklch(0.19 0.0122 60);
        --tb-stone-985: oklch(0.16 0.011 60);

        --tb-mauve-50: oklch(0.975 0.003 310);
        --tb-mauve-100: oklch(0.945 0.005 310);
        --tb-mauve-200: oklch(0.89 0.008 310);
        --tb-mauve-300: oklch(0.81 0.012 310);
        --tb-mauve-400: oklch(0.71 0.015 310);
        --tb-mauve-500: oklch(0.62 0.017 310);
        --tb-mauve-600: oklch(0.52 0.018 310);
        --tb-mauve-700: oklch(0.47 0.018 310);
        --tb-mauve-800: oklch(0.4 0.017 310);
        --tb-mauve-900: oklch(0.33 0.015 310);
        --tb-mauve-925: oklch(0.27 0.014 310);
        --tb-mauve-950: oklch(0.25 0.013 310);
        --tb-mauve-960: oklch(0.23 0.012 310);
        --tb-mauve-975: oklch(0.19 0.011 310);
        --tb-mauve-985: oklch(0.16 0.01 310);

        --tb-sage-50: oklch(0.975 0.003 145);
        --tb-sage-100: oklch(0.945 0.005 145);
        --tb-sage-200: oklch(0.89 0.008 145);
        --tb-sage-300: oklch(0.81 0.012 145);
        --tb-sage-400: oklch(0.71 0.015 145);
        --tb-sage-500: oklch(0.62 0.017 145);
        --tb-sage-600: oklch(0.52 0.018 145);
        --tb-sage-700: oklch(0.47 0.018 145);
        --tb-sage-800: oklch(0.4 0.017 145);
        --tb-sage-900: oklch(0.33 0.015 145);
        --tb-sage-925: oklch(0.27 0.014 145);
        --tb-sage-950: oklch(0.25 0.013 145);
        --tb-sage-960: oklch(0.23 0.012 145);
        --tb-sage-975: oklch(0.19 0.011 145);
        --tb-sage-985: oklch(0.16 0.01 145);

        --tb-clay-50: oklch(0.975 0.009 52);
        --tb-clay-100: oklch(0.945 0.021 52);
        --tb-clay-200: oklch(0.89 0.039 52);
        --tb-clay-300: oklch(0.81 0.06 52);
        --tb-clay-400: oklch(0.71 0.084 52);
        --tb-clay-500: oklch(0.62 0.099 52);
        --tb-clay-600: oklch(0.52 0.102 52);
        --tb-clay-700: oklch(0.47 0.093 52);
        --tb-clay-800: oklch(0.4 0.078 52);
        --tb-clay-900: oklch(0.33 0.063 52);
        --tb-clay-950: oklch(0.25 0.048 52);

        --tb-indigo-50: oklch(0.975 0.015 272);
        --tb-indigo-100: oklch(0.945 0.035 272);
        --tb-indigo-200: oklch(0.89 0.065 272);
        --tb-indigo-300: oklch(0.81 0.1 272);
        --tb-indigo-400: oklch(0.71 0.14 272);
        --tb-indigo-500: oklch(0.62 0.165 272);
        --tb-indigo-600: oklch(0.52 0.17 272);
        --tb-indigo-700: oklch(0.47 0.155 272);
        --tb-indigo-800: oklch(0.4 0.13 272);
        --tb-indigo-900: oklch(0.33 0.105 272);
        --tb-indigo-950: oklch(0.25 0.08 272);

        --tb-violet-50: oklch(0.975 0.015 295);
        --tb-violet-100: oklch(0.945 0.035 295);
        --tb-violet-200: oklch(0.89 0.065 295);
        --tb-violet-300: oklch(0.81 0.1 295);
        --tb-violet-400: oklch(0.71 0.14 295);
        --tb-violet-500: oklch(0.62 0.165 295);
        --tb-violet-600: oklch(0.52 0.17 295);
        --tb-violet-700: oklch(0.47 0.155 295);
        --tb-violet-800: oklch(0.4 0.13 295);
        --tb-violet-900: oklch(0.33 0.105 295);
        --tb-violet-950: oklch(0.25 0.08 295);

        --tb-plum-50: oklch(0.975 0.0105 318);
        --tb-plum-100: oklch(0.945 0.0245 318);
        --tb-plum-200: oklch(0.89 0.0455 318);
        --tb-plum-300: oklch(0.81 0.07 318);
        --tb-plum-400: oklch(0.71 0.098 318);
        --tb-plum-500: oklch(0.62 0.1155 318);
        --tb-plum-600: oklch(0.52 0.119 318);
        --tb-plum-700: oklch(0.47 0.1085 318);
        --tb-plum-800: oklch(0.4 0.091 318);
        --tb-plum-900: oklch(0.33 0.0735 318);
        --tb-plum-950: oklch(0.25 0.056 318);

        --tb-fuchsia-50: oklch(0.975 0.0195 338);
        --tb-fuchsia-100: oklch(0.945 0.0455 338);
        --tb-fuchsia-200: oklch(0.89 0.0845 338);
        --tb-fuchsia-300: oklch(0.81 0.13 338);
        --tb-fuchsia-400: oklch(0.71 0.182 338);
        --tb-fuchsia-500: oklch(0.62 0.2145 338);
        --tb-fuchsia-600: oklch(0.52 0.221 338);
        --tb-fuchsia-700: oklch(0.47 0.2015 338);
        --tb-fuchsia-800: oklch(0.4 0.169 338);
        --tb-fuchsia-900: oklch(0.33 0.1365 338);
        --tb-fuchsia-950: oklch(0.25 0.104 338);

        --tb-rose-50: oklch(0.975 0.015 0);
        --tb-rose-100: oklch(0.945 0.035 0);
        --tb-rose-200: oklch(0.89 0.065 0);
        --tb-rose-300: oklch(0.81 0.1 0);
        --tb-rose-400: oklch(0.71 0.14 0);
        --tb-rose-500: oklch(0.62 0.165 0);
        --tb-rose-600: oklch(0.52 0.17 0);
        --tb-rose-700: oklch(0.47 0.155 0);
        --tb-rose-800: oklch(0.4 0.13 0);
        --tb-rose-900: oklch(0.33 0.105 0);
        --tb-rose-950: oklch(0.25 0.08 0);

        --tb-moss-50: oklch(0.975 0.015 118);
        --tb-moss-100: oklch(0.945 0.035 118);
        --tb-moss-200: oklch(0.89 0.065 118);
        --tb-moss-300: oklch(0.81 0.1 118);
        --tb-moss-400: oklch(0.71 0.14 118);
        --tb-moss-500: oklch(0.62 0.165 118);
        --tb-moss-600: oklch(0.52 0.17 118);
        --tb-moss-700: oklch(0.47 0.155 118);
        --tb-moss-800: oklch(0.4 0.13 118);
        --tb-moss-900: oklch(0.33 0.105 118);
        --tb-moss-950: oklch(0.25 0.08 118);

        --tb-teal-50: oklch(0.975 0.0127 190);
        --tb-teal-100: oklch(0.945 0.0298 190);
        --tb-teal-200: oklch(0.89 0.0553 190);
        --tb-teal-300: oklch(0.81 0.085 190);
        --tb-teal-400: oklch(0.71 0.119 190);
        --tb-teal-500: oklch(0.62 0.1403 190);
        --tb-teal-600: oklch(0.52 0.1445 190);
        --tb-teal-700: oklch(0.47 0.1318 190);
        --tb-teal-800: oklch(0.4 0.1105 190);
        --tb-teal-900: oklch(0.33 0.0892 190);
        --tb-teal-950: oklch(0.25 0.068 190);

        /* Semantic tier: what components read. light-dark() follows the element's color-scheme. */

        --tb-color-success: light-dark(var(--tb-green-600), var(--tb-green-400));
        --tb-color-success-hover: light-dark(var(--tb-green-700), var(--tb-green-300));
        --tb-color-success-active: light-dark(var(--tb-green-800), var(--tb-green-200));
        --tb-color-on-success: light-dark(white, var(--tb-gray-950));
        --tb-color-success-subtle: light-dark(var(--tb-green-100), var(--tb-green-900));
        --tb-color-success-text: light-dark(var(--tb-green-700), var(--tb-green-300));

        /* Warning keeps dark text in both modes, so its interaction states get lighter instead of darker. */
        --tb-color-warning: var(--tb-amber-400);
        --tb-color-warning-hover: var(--tb-amber-300);
        --tb-color-warning-active: var(--tb-amber-200);
        --tb-color-on-warning: var(--tb-gray-950);
        --tb-color-warning-subtle: light-dark(var(--tb-amber-100), var(--tb-amber-900));
        --tb-color-warning-text: light-dark(var(--tb-amber-700), var(--tb-amber-300));

        --tb-color-danger: light-dark(var(--tb-red-600), var(--tb-red-400));
        --tb-color-danger-hover: light-dark(var(--tb-red-700), var(--tb-red-300));
        --tb-color-danger-active: light-dark(var(--tb-red-800), var(--tb-red-200));
        --tb-color-on-danger: light-dark(white, var(--tb-gray-950));
        --tb-color-danger-subtle: light-dark(var(--tb-red-100), var(--tb-red-900));
        --tb-color-danger-text: light-dark(var(--tb-red-700), var(--tb-red-300));

        --tb-color-info: light-dark(var(--tb-sky-600), var(--tb-sky-400));
        --tb-color-info-hover: light-dark(var(--tb-sky-700), var(--tb-sky-300));
        --tb-color-info-active: light-dark(var(--tb-sky-800), var(--tb-sky-200));
        --tb-color-on-info: light-dark(white, var(--tb-gray-950));
        --tb-color-info-subtle: light-dark(var(--tb-sky-100), var(--tb-sky-900));
        --tb-color-info-text: light-dark(var(--tb-sky-700), var(--tb-sky-300));

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

        --tb-disabled-opacity: 0.55;
        --tb-color-scrim: oklch(0 0 0 / 0.45);

        --tb-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --tb-font-family-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
        --tb-font-size-xs: 0.75rem;
        --tb-font-size-sm: 0.875rem;
        --tb-font-size-md: 1rem;
        --tb-font-size-lg: 1.125rem;
        --tb-font-size-xl: 1.25rem;
        --tb-font-size-2xl: 1.5rem;
        --tb-font-size-3xl: 1.875rem;
        --tb-font-weight-regular: 400;
        --tb-font-weight-medium: 500;
        --tb-font-weight-semibold: 600;
        --tb-font-weight-bold: 700;
        --tb-line-height-tight: 1.25;
        --tb-line-height-normal: 1.5;

        --tb-space-0: 0px;
        --tb-space-1: 0.25rem;
        --tb-space-2: 0.5rem;
        --tb-space-3: 0.75rem;
        --tb-space-4: 1rem;
        --tb-space-5: 1.25rem;
        --tb-space-6: 1.5rem;
        --tb-space-8: 2rem;
        --tb-space-10: 2.5rem;
        --tb-space-12: 3rem;
        --tb-space-16: 4rem;

        --tb-radius-sm: 4px;
        --tb-radius-md: 6px;
        --tb-radius-lg: 8px;
        --tb-radius-xl: 12px;
        --tb-radius-full: 9999px;

        --tb-shadow-sm: 0 1px 2px light-dark(oklch(0 0 0 / 0.08), oklch(0 0 0 / 0.4));
        --tb-shadow-md: 0 4px 12px light-dark(oklch(0 0 0 / 0.1), oklch(0 0 0 / 0.5));
        --tb-shadow-lg: 0 12px 32px light-dark(oklch(0 0 0 / 0.14), oklch(0 0 0 / 0.6));

        --tb-motion-duration-fast: 100ms;
        --tb-motion-duration-normal: 200ms;
        --tb-motion-duration-slow: 300ms;
        --tb-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
        --tb-motion-easing-emphasized: cubic-bezier(0.3, 0, 0, 1.3);

        /* Media queries can't read custom properties; these document the scale and serve JS. */
        --tb-breakpoint-sm: 640px;
        --tb-breakpoint-md: 768px;
        --tb-breakpoint-lg: 1024px;
        --tb-breakpoint-xl: 1280px;
    }

    /* No attribute keeps the host page's color-scheme, so adding Trailblazor never darkens an app by itself. */
    [data-tb-theme="light"] {
        color-scheme: light;
    }

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

    [data-tb-theme="system"] {
        color-scheme: light dark;
    }

    /* A region can take either density for itself, so the defaults also answer to "comfortable". */
    :root,
    [data-tb-density="comfortable"] {
        --tb-control-height: 2.5rem;
        --tb-control-padding-block: var(--tb-space-2);
        --tb-control-padding-inline: var(--tb-space-3);
        --tb-item-height: 2rem;
        --tb-row-height: 2.75rem;
    }

    [data-tb-density="compact"] {
        --tb-control-height: 2rem;
        --tb-control-padding-block: var(--tb-space-1);
        --tb-control-padding-inline: var(--tb-space-2);
        --tb-item-height: 1.75rem;
        --tb-row-height: 2rem;
    }

    /* Small and large controls follow the control height wherever a density is set, and a small one keeps room for
       a field's own 24px buttons. */
    :where(:root, [data-tb-density]) {
        --tb-control-height-sm: max(26px, calc(var(--tb-control-height) - 8px));
        --tb-control-height-lg: calc(var(--tb-control-height) + 8px);
    }

    @media (prefers-reduced-motion: reduce) {
        :root {
            --tb-motion-duration-fast: 0ms;
            --tb-motion-duration-normal: 0ms;
            --tb-motion-duration-slow: 0ms;
        }
    }
}

@layer tb.themes {
    /* :where(:root) adds no specificity and marks the default palette; move it to another block to switch. */
    :where(:root),
    [data-tb-palette="graphite"] {
        --tb-color-background: light-dark(white, var(--tb-graphite-975));
        --tb-color-surface: light-dark(white, var(--tb-graphite-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-graphite-925));
        --tb-color-surface-sunken: light-dark(var(--tb-graphite-50), var(--tb-graphite-985));
        --tb-color-text: light-dark(var(--tb-graphite-900), var(--tb-graphite-50));
        --tb-color-text-muted: light-dark(var(--tb-graphite-600), var(--tb-graphite-300));
        --tb-color-text-disabled: light-dark(var(--tb-graphite-400), var(--tb-graphite-600));
        --tb-border-subtle: light-dark(var(--tb-graphite-200), var(--tb-graphite-800));
        --tb-border-strong: var(--tb-graphite-500);

        /* The primary action is ink: near-black in light mode, near-white in dark. */
        --tb-color-primary: light-dark(var(--tb-graphite-900), var(--tb-graphite-50));
        --tb-color-on-primary: light-dark(white, var(--tb-graphite-950));

        --tb-color-neutral: light-dark(var(--tb-graphite-700), var(--tb-graphite-300));
        --tb-color-neutral-hover: light-dark(var(--tb-graphite-800), var(--tb-graphite-200));
        --tb-color-neutral-active: light-dark(var(--tb-graphite-900), var(--tb-graphite-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-graphite-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-graphite-100), var(--tb-graphite-800));
        --tb-color-neutral-text: light-dark(var(--tb-graphite-700), var(--tb-graphite-300));

    }

    [data-tb-palette="cobalt"] {
        --tb-color-background: light-dark(white, var(--tb-gray-975));
        --tb-color-surface: light-dark(white, var(--tb-gray-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-gray-925));
        --tb-color-surface-sunken: light-dark(var(--tb-gray-50), var(--tb-gray-985));
        --tb-color-text: light-dark(var(--tb-gray-900), var(--tb-gray-50));
        --tb-color-text-muted: light-dark(var(--tb-gray-600), var(--tb-gray-300));
        --tb-color-text-disabled: light-dark(var(--tb-gray-400), var(--tb-gray-600));
        --tb-border-subtle: light-dark(var(--tb-gray-200), var(--tb-gray-800));
        --tb-border-strong: light-dark(var(--tb-gray-500), var(--tb-gray-400));
        --tb-color-primary: light-dark(var(--tb-blue-600), var(--tb-blue-400));
        --tb-color-on-primary: light-dark(white, var(--tb-gray-950));
        --tb-color-neutral: light-dark(var(--tb-gray-700), var(--tb-gray-300));
        --tb-color-neutral-hover: light-dark(var(--tb-gray-800), var(--tb-gray-200));
        --tb-color-neutral-active: light-dark(var(--tb-gray-900), var(--tb-gray-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-gray-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-gray-100), var(--tb-gray-800));
        --tb-color-neutral-text: light-dark(var(--tb-gray-700), var(--tb-gray-300));
    }

    [data-tb-palette="slate"] {
        --tb-color-background: light-dark(white, var(--tb-gray-975));
        --tb-color-surface: light-dark(white, var(--tb-gray-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-gray-925));
        --tb-color-surface-sunken: light-dark(var(--tb-gray-50), var(--tb-gray-985));
        --tb-color-text: light-dark(var(--tb-gray-900), var(--tb-gray-50));
        --tb-color-text-muted: light-dark(var(--tb-gray-600), var(--tb-gray-300));
        --tb-color-text-disabled: light-dark(var(--tb-gray-400), var(--tb-gray-600));
        --tb-border-subtle: light-dark(var(--tb-gray-200), var(--tb-gray-800));
        --tb-border-strong: light-dark(var(--tb-gray-500), var(--tb-gray-400));
        --tb-color-primary: light-dark(var(--tb-gray-800), var(--tb-gray-100));
        --tb-color-on-primary: light-dark(white, var(--tb-gray-950));
        --tb-color-neutral: light-dark(var(--tb-gray-700), var(--tb-gray-300));
        --tb-color-neutral-hover: light-dark(var(--tb-gray-800), var(--tb-gray-200));
        --tb-color-neutral-active: light-dark(var(--tb-gray-900), var(--tb-gray-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-gray-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-gray-100), var(--tb-gray-800));
        --tb-color-neutral-text: light-dark(var(--tb-gray-700), var(--tb-gray-300));
    }

    [data-tb-palette="sand"] {
        --tb-color-background: light-dark(white, var(--tb-stone-975));
        --tb-color-surface: light-dark(white, var(--tb-stone-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-stone-925));
        --tb-color-surface-sunken: light-dark(var(--tb-stone-50), var(--tb-stone-985));
        --tb-color-text: light-dark(var(--tb-stone-900), var(--tb-stone-50));
        --tb-color-text-muted: light-dark(var(--tb-stone-600), var(--tb-stone-300));
        --tb-color-text-disabled: light-dark(var(--tb-stone-400), var(--tb-stone-600));
        --tb-border-subtle: light-dark(var(--tb-stone-200), var(--tb-stone-800));
        --tb-border-strong: light-dark(var(--tb-stone-500), var(--tb-stone-400));
        --tb-color-primary: light-dark(var(--tb-stone-800), var(--tb-stone-100));
        --tb-color-on-primary: light-dark(white, var(--tb-stone-950));
        --tb-color-neutral: light-dark(var(--tb-stone-700), var(--tb-stone-300));
        --tb-color-neutral-hover: light-dark(var(--tb-stone-800), var(--tb-stone-200));
        --tb-color-neutral-active: light-dark(var(--tb-stone-900), var(--tb-stone-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-stone-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-stone-100), var(--tb-stone-800));
        --tb-color-neutral-text: light-dark(var(--tb-stone-700), var(--tb-stone-300));
    }

    [data-tb-palette="clay"] {
        --tb-color-background: light-dark(white, var(--tb-stone-975));
        --tb-color-surface: light-dark(white, var(--tb-stone-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-stone-925));
        --tb-color-surface-sunken: light-dark(var(--tb-stone-50), var(--tb-stone-985));
        --tb-color-text: light-dark(var(--tb-stone-900), var(--tb-stone-50));
        --tb-color-text-muted: light-dark(var(--tb-stone-600), var(--tb-stone-300));
        --tb-color-text-disabled: light-dark(var(--tb-stone-400), var(--tb-stone-600));
        --tb-border-subtle: light-dark(var(--tb-stone-200), var(--tb-stone-800));
        --tb-border-strong: light-dark(var(--tb-stone-500), var(--tb-stone-400));
        --tb-color-primary: light-dark(var(--tb-clay-600), var(--tb-clay-400));
        --tb-color-on-primary: light-dark(white, var(--tb-stone-950));
        --tb-color-neutral: light-dark(var(--tb-stone-700), var(--tb-stone-300));
        --tb-color-neutral-hover: light-dark(var(--tb-stone-800), var(--tb-stone-200));
        --tb-color-neutral-active: light-dark(var(--tb-stone-900), var(--tb-stone-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-stone-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-stone-100), var(--tb-stone-800));
        --tb-color-neutral-text: light-dark(var(--tb-stone-700), var(--tb-stone-300));
    }

    [data-tb-palette="indigo"] {
        --tb-color-background: light-dark(white, var(--tb-gray-975));
        --tb-color-surface: light-dark(white, var(--tb-gray-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-gray-925));
        --tb-color-surface-sunken: light-dark(var(--tb-gray-50), var(--tb-gray-985));
        --tb-color-text: light-dark(var(--tb-gray-900), var(--tb-gray-50));
        --tb-color-text-muted: light-dark(var(--tb-gray-600), var(--tb-gray-300));
        --tb-color-text-disabled: light-dark(var(--tb-gray-400), var(--tb-gray-600));
        --tb-border-subtle: light-dark(var(--tb-gray-200), var(--tb-gray-800));
        --tb-border-strong: light-dark(var(--tb-gray-500), var(--tb-gray-400));
        --tb-color-primary: light-dark(var(--tb-indigo-600), var(--tb-indigo-400));
        --tb-color-on-primary: light-dark(white, var(--tb-gray-950));
        --tb-color-neutral: light-dark(var(--tb-gray-700), var(--tb-gray-300));
        --tb-color-neutral-hover: light-dark(var(--tb-gray-800), var(--tb-gray-200));
        --tb-color-neutral-active: light-dark(var(--tb-gray-900), var(--tb-gray-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-gray-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-gray-100), var(--tb-gray-800));
        --tb-color-neutral-text: light-dark(var(--tb-gray-700), var(--tb-gray-300));
    }

    [data-tb-palette="violet"] {
        --tb-color-background: light-dark(white, var(--tb-mauve-975));
        --tb-color-surface: light-dark(white, var(--tb-mauve-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-mauve-925));
        --tb-color-surface-sunken: light-dark(var(--tb-mauve-50), var(--tb-mauve-985));
        --tb-color-text: light-dark(var(--tb-mauve-900), var(--tb-mauve-50));
        --tb-color-text-muted: light-dark(var(--tb-mauve-600), var(--tb-mauve-300));
        --tb-color-text-disabled: light-dark(var(--tb-mauve-400), var(--tb-mauve-600));
        --tb-border-subtle: light-dark(var(--tb-mauve-200), var(--tb-mauve-800));
        --tb-border-strong: light-dark(var(--tb-mauve-500), var(--tb-mauve-400));
        --tb-color-primary: light-dark(var(--tb-violet-600), var(--tb-violet-400));
        --tb-color-on-primary: light-dark(white, var(--tb-mauve-950));
        --tb-color-neutral: light-dark(var(--tb-mauve-700), var(--tb-mauve-300));
        --tb-color-neutral-hover: light-dark(var(--tb-mauve-800), var(--tb-mauve-200));
        --tb-color-neutral-active: light-dark(var(--tb-mauve-900), var(--tb-mauve-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-mauve-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-mauve-100), var(--tb-mauve-800));
        --tb-color-neutral-text: light-dark(var(--tb-mauve-700), var(--tb-mauve-300));
    }

    [data-tb-palette="plum"] {
        --tb-color-background: light-dark(white, var(--tb-mauve-975));
        --tb-color-surface: light-dark(white, var(--tb-mauve-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-mauve-925));
        --tb-color-surface-sunken: light-dark(var(--tb-mauve-50), var(--tb-mauve-985));
        --tb-color-text: light-dark(var(--tb-mauve-900), var(--tb-mauve-50));
        --tb-color-text-muted: light-dark(var(--tb-mauve-600), var(--tb-mauve-300));
        --tb-color-text-disabled: light-dark(var(--tb-mauve-400), var(--tb-mauve-600));
        --tb-border-subtle: light-dark(var(--tb-mauve-200), var(--tb-mauve-800));
        --tb-border-strong: light-dark(var(--tb-mauve-500), var(--tb-mauve-400));
        --tb-color-primary: light-dark(var(--tb-plum-600), var(--tb-plum-400));
        --tb-color-on-primary: light-dark(white, var(--tb-mauve-950));
        --tb-color-neutral: light-dark(var(--tb-mauve-700), var(--tb-mauve-300));
        --tb-color-neutral-hover: light-dark(var(--tb-mauve-800), var(--tb-mauve-200));
        --tb-color-neutral-active: light-dark(var(--tb-mauve-900), var(--tb-mauve-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-mauve-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-mauve-100), var(--tb-mauve-800));
        --tb-color-neutral-text: light-dark(var(--tb-mauve-700), var(--tb-mauve-300));
    }

    [data-tb-palette="fuchsia"] {
        --tb-color-background: light-dark(white, var(--tb-mauve-975));
        --tb-color-surface: light-dark(white, var(--tb-mauve-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-mauve-925));
        --tb-color-surface-sunken: light-dark(var(--tb-mauve-50), var(--tb-mauve-985));
        --tb-color-text: light-dark(var(--tb-mauve-900), var(--tb-mauve-50));
        --tb-color-text-muted: light-dark(var(--tb-mauve-600), var(--tb-mauve-300));
        --tb-color-text-disabled: light-dark(var(--tb-mauve-400), var(--tb-mauve-600));
        --tb-border-subtle: light-dark(var(--tb-mauve-200), var(--tb-mauve-800));
        --tb-border-strong: light-dark(var(--tb-mauve-500), var(--tb-mauve-400));
        --tb-color-primary: light-dark(var(--tb-fuchsia-600), var(--tb-fuchsia-400));
        --tb-color-on-primary: light-dark(white, var(--tb-mauve-950));
        --tb-color-neutral: light-dark(var(--tb-mauve-700), var(--tb-mauve-300));
        --tb-color-neutral-hover: light-dark(var(--tb-mauve-800), var(--tb-mauve-200));
        --tb-color-neutral-active: light-dark(var(--tb-mauve-900), var(--tb-mauve-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-mauve-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-mauve-100), var(--tb-mauve-800));
        --tb-color-neutral-text: light-dark(var(--tb-mauve-700), var(--tb-mauve-300));
    }

    [data-tb-palette="rose"] {
        --tb-color-background: light-dark(white, var(--tb-stone-975));
        --tb-color-surface: light-dark(white, var(--tb-stone-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-stone-925));
        --tb-color-surface-sunken: light-dark(var(--tb-stone-50), var(--tb-stone-985));
        --tb-color-text: light-dark(var(--tb-stone-900), var(--tb-stone-50));
        --tb-color-text-muted: light-dark(var(--tb-stone-600), var(--tb-stone-300));
        --tb-color-text-disabled: light-dark(var(--tb-stone-400), var(--tb-stone-600));
        --tb-border-subtle: light-dark(var(--tb-stone-200), var(--tb-stone-800));
        --tb-border-strong: light-dark(var(--tb-stone-500), var(--tb-stone-400));
        --tb-color-primary: light-dark(var(--tb-rose-600), var(--tb-rose-400));
        --tb-color-on-primary: light-dark(white, var(--tb-stone-950));
        --tb-color-neutral: light-dark(var(--tb-stone-700), var(--tb-stone-300));
        --tb-color-neutral-hover: light-dark(var(--tb-stone-800), var(--tb-stone-200));
        --tb-color-neutral-active: light-dark(var(--tb-stone-900), var(--tb-stone-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-stone-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-stone-100), var(--tb-stone-800));
        --tb-color-neutral-text: light-dark(var(--tb-stone-700), var(--tb-stone-300));
    }

    [data-tb-palette="moss"] {
        --tb-color-background: light-dark(white, var(--tb-sage-975));
        --tb-color-surface: light-dark(white, var(--tb-sage-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-sage-925));
        --tb-color-surface-sunken: light-dark(var(--tb-sage-50), var(--tb-sage-985));
        --tb-color-text: light-dark(var(--tb-sage-900), var(--tb-sage-50));
        --tb-color-text-muted: light-dark(var(--tb-sage-600), var(--tb-sage-300));
        --tb-color-text-disabled: light-dark(var(--tb-sage-400), var(--tb-sage-600));
        --tb-border-subtle: light-dark(var(--tb-sage-200), var(--tb-sage-800));
        --tb-border-strong: light-dark(var(--tb-sage-500), var(--tb-sage-400));
        --tb-color-primary: light-dark(var(--tb-moss-600), var(--tb-moss-400));
        --tb-color-on-primary: light-dark(white, var(--tb-sage-950));
        --tb-color-neutral: light-dark(var(--tb-sage-700), var(--tb-sage-300));
        --tb-color-neutral-hover: light-dark(var(--tb-sage-800), var(--tb-sage-200));
        --tb-color-neutral-active: light-dark(var(--tb-sage-900), var(--tb-sage-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-sage-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-sage-100), var(--tb-sage-800));
        --tb-color-neutral-text: light-dark(var(--tb-sage-700), var(--tb-sage-300));
    }

    [data-tb-palette="teal"] {
        --tb-color-background: light-dark(white, var(--tb-sage-975));
        --tb-color-surface: light-dark(white, var(--tb-sage-960));
        --tb-color-surface-raised: light-dark(white, var(--tb-sage-925));
        --tb-color-surface-sunken: light-dark(var(--tb-sage-50), var(--tb-sage-985));
        --tb-color-text: light-dark(var(--tb-sage-900), var(--tb-sage-50));
        --tb-color-text-muted: light-dark(var(--tb-sage-600), var(--tb-sage-300));
        --tb-color-text-disabled: light-dark(var(--tb-sage-400), var(--tb-sage-600));
        --tb-border-subtle: light-dark(var(--tb-sage-200), var(--tb-sage-800));
        --tb-border-strong: light-dark(var(--tb-sage-500), var(--tb-sage-400));
        --tb-color-primary: light-dark(var(--tb-teal-600), var(--tb-teal-400));
        --tb-color-on-primary: light-dark(white, var(--tb-sage-950));
        --tb-color-neutral: light-dark(var(--tb-sage-700), var(--tb-sage-300));
        --tb-color-neutral-hover: light-dark(var(--tb-sage-800), var(--tb-sage-200));
        --tb-color-neutral-active: light-dark(var(--tb-sage-900), var(--tb-sage-100));
        --tb-color-on-neutral: light-dark(white, var(--tb-sage-950));
        --tb-color-neutral-subtle: light-dark(var(--tb-sage-100), var(--tb-sage-800));
        --tb-color-neutral-text: light-dark(var(--tb-sage-700), var(--tb-sage-300));
    }

    /* Derived wherever a primary is set, and pinnable there. Hover and press step the other way near black or white,
       a gray primary gets a stronger subtle fill, and the focus ring stays dark or light enough to show. */
    :where(:root, [data-tb-palette], [style*="--tb-color-primary:"]) {
        --tb-color-primary-hover: light-dark(
            oklch(from var(--tb-color-primary) calc(l - 0.06 + 0.12 * clamp(0, (0.2 - l) * 1000, 1)) calc(c * 0.92) h),
            oklch(from var(--tb-color-primary) calc(l + 0.1 - 0.16 * clamp(0, (l - 0.79) * 1000, 1)) calc(c * 0.72) h));
        --tb-color-primary-active: light-dark(
            oklch(from var(--tb-color-primary) calc(l - 0.12 + 0.24 * clamp(0, (0.2 - l) * 1000, 1)) calc(c * 0.78) h),
            oklch(from var(--tb-color-primary) calc(l + 0.18 - 0.32 * clamp(0, (l - 0.79) * 1000, 1))
                calc(c * 0.48) h));
        --tb-color-primary-subtle: light-dark(
            oklch(from var(--tb-color-primary) calc(0.89 + 0.055 * min(c / 0.05, 1)) calc(c * 0.3) h),
            oklch(from var(--tb-color-primary) calc(0.47 - 0.14 * min(c / 0.05, 1)) calc(c * 0.75) h));
        --tb-color-primary-text: light-dark(
            oklch(from var(--tb-color-primary) min(l, 0.47) calc(c * 0.92) h),
            oklch(from var(--tb-color-primary) max(l, 0.81) calc(c * 0.72) h));
        --tb-focus-ring-color: light-dark(oklch(from var(--tb-color-primary) min(l, 0.55) c h),
            oklch(from var(--tb-color-primary) max(l, 0.81) calc(c * 0.72) h));
    }

    /* Hover and press tint whatever is under them with the text color, so they show on any surface; a region with
       its own palette tints with its own text color. */
    :where(:root, [data-tb-palette]) {
        --tb-color-hover: color-mix(in srgb, var(--tb-color-text) 6%, transparent);
        --tb-color-pressed: color-mix(in srgb, var(--tb-color-text) 10%, transparent);
    }
}

@layer tb.components {
    .tb-text {
        margin: 0;
        font-family: var(--tb-font-family);
        line-height: var(--tb-line-height-normal);
    }

    .tb-text--display {
        font-size: var(--tb-font-size-3xl);
        font-weight: var(--tb-font-weight-bold);
        line-height: var(--tb-line-height-tight);
    }

    .tb-text--headline {
        font-size: var(--tb-font-size-2xl);
        font-weight: var(--tb-font-weight-semibold);
        line-height: var(--tb-line-height-tight);
    }

    .tb-text--title {
        font-size: var(--tb-font-size-xl);
        font-weight: var(--tb-font-weight-semibold);
        line-height: var(--tb-line-height-tight);
    }

    .tb-text--subtitle {
        font-size: var(--tb-font-size-lg);
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-text--body {
        font-size: var(--tb-font-size-md);
    }

    .tb-text--bodysmall {
        font-size: var(--tb-font-size-sm);
    }

    .tb-text--label {
        font-size: var(--tb-font-size-sm);
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-text--caption {
        font-size: var(--tb-font-size-xs);
    }

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

    /* An inline element can't clip its text, so cut-off text is a block. */
    .tb-text--truncate {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Line clamping still needs the prefixed box in every engine. */
    .tb-text--clamp {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: var(--tb-text-lines);
    }

    .tb-text--primary {
        color: var(--tb-color-primary-text);
    }

    .tb-text--neutral {
        color: var(--tb-color-neutral-text);
    }

    .tb-text--success {
        color: var(--tb-color-success-text);
    }

    .tb-text--warning {
        color: var(--tb-color-warning-text);
    }

    .tb-text--danger {
        color: var(--tb-color-danger-text);
    }

    .tb-text--info {
        color: var(--tb-color-info-text);
    }

    /* Always underlined, so a link never relies on color alone to stand out from the text around it. */
    .tb-link {
        color: var(--tb-color-primary-text);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
        border-radius: var(--tb-radius-sm);
        cursor: pointer;
    }

    .tb-link:hover {
        text-decoration-thickness: 2px;
    }

    .tb-link:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-link:is(:disabled, [aria-disabled="true"]) {
        color: var(--tb-color-text-disabled);
        text-decoration: none;
        cursor: default;
    }

    /* It sits in running text, so unlike other controls it keeps the text's line height. */
    .tb-link--button {
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        text-align: inherit;
    }

    /* The system would draw both kinds in its plain text or button color; they must still read as links. */
    @media (forced-colors: active) {
        .tb-link {
            color: LinkText;
        }

        .tb-link:is(:disabled, [aria-disabled="true"]) {
            color: GrayText;
        }
    }

    .tb-badge-host {
        display: inline-flex;
        align-items: center;
        gap: var(--tb-space-1);
        vertical-align: middle;
    }

    .tb-badge-host--overlap {
        position: relative;
    }

    .tb-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-inline-size: 1.25rem;
        block-size: 1.25rem;
        padding-inline: var(--tb-space-1);
        border-radius: var(--tb-radius-full);
        background: var(--tb-badge-fill);
        color: var(--tb-badge-on-fill);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-xs);
        font-weight: var(--tb-font-weight-semibold);
        font-variant-numeric: tabular-nums;
        line-height: 1;
        white-space: nowrap;
    }

    .tb-badge--dot {
        min-inline-size: 0.625rem;
        inline-size: 0.625rem;
        block-size: 0.625rem;
        padding: 0;
    }

    /* On an icon or button, the badge straddles a corner, ringed in the surface color to stand apart. The x and y
       signs say which way it hangs over, and the reading direction flips x. */
    .tb-badge-host--overlap > .tb-badge {
        --tb-badge-inset: var(--tb-badge-offset);
        --tb-badge-direction: 1;
        position: absolute;
        translate: calc(var(--tb-badge-x) * var(--tb-badge-direction) * 50%) calc(var(--tb-badge-y) * 50%);
        box-shadow: 0 0 0 2px var(--tb-color-surface);
        pointer-events: none;
    }

    .tb-badge-host--overlap > .tb-badge:dir(rtl) {
        --tb-badge-direction: -1;
    }

    /* A circle's edge crosses the diagonal 14.6% in from each side of its box. */
    .tb-badge-host--overlap > .tb-badge--circular {
        --tb-badge-inset: calc(14.6% + var(--tb-badge-offset));
    }

    .tb-badge--placement-topend {
        --tb-badge-x: 1;
        --tb-badge-y: -1;
        inset-block-start: var(--tb-badge-inset);
        inset-inline-end: var(--tb-badge-inset);
    }

    .tb-badge--placement-topstart {
        --tb-badge-x: -1;
        --tb-badge-y: -1;
        inset-block-start: var(--tb-badge-inset);
        inset-inline-start: var(--tb-badge-inset);
    }

    .tb-badge--placement-bottomend {
        --tb-badge-x: 1;
        --tb-badge-y: 1;
        inset-block-end: var(--tb-badge-inset);
        inset-inline-end: var(--tb-badge-inset);
    }

    .tb-badge--placement-bottomstart {
        --tb-badge-x: -1;
        --tb-badge-y: 1;
        inset-block-end: var(--tb-badge-inset);
        inset-inline-start: var(--tb-badge-inset);
    }

    .tb-badge--primary {
        --tb-badge-fill: var(--tb-color-primary);
        --tb-badge-on-fill: var(--tb-color-on-primary);
    }

    .tb-badge--neutral {
        --tb-badge-fill: var(--tb-color-neutral);
        --tb-badge-on-fill: var(--tb-color-on-neutral);
    }

    .tb-badge--success {
        --tb-badge-fill: var(--tb-color-success);
        --tb-badge-on-fill: var(--tb-color-on-success);
    }

    .tb-badge--warning {
        --tb-badge-fill: var(--tb-color-warning);
        --tb-badge-on-fill: var(--tb-color-on-warning);
    }

    .tb-badge--danger {
        --tb-badge-fill: var(--tb-color-danger);
        --tb-badge-on-fill: var(--tb-color-on-danger);
    }

    .tb-badge--info {
        --tb-badge-fill: var(--tb-color-info);
        --tb-badge-on-fill: var(--tb-color-on-info);
    }

    /* A textless dot is under 3:1 in amber on a light surface, so it takes the warning text tone. */
    .tb-badge--dot.tb-badge--warning {
        --tb-badge-fill: light-dark(var(--tb-color-warning-text), var(--tb-color-warning));
    }

    /* Forced colors drop the fill, so an outline keeps the badge's shape and a dot stays visible. */
    @media (forced-colors: active) {
        .tb-badge {
            border: 1px solid CanvasText;
        }

        .tb-badge--dot {
            background: CanvasText;
        }
    }

    .tb-skeleton {
        display: block;
        background: var(--tb-color-neutral-subtle);
    }

    .tb-skeleton--pulse {
        animation: tb-skeleton-pulse 1.5s ease-in-out infinite alternate;
    }

    /* A band of the surface color sweeps across the fill, the other way in right-to-left text. */
    .tb-skeleton--wave {
        background-image: linear-gradient(90deg, transparent,
            color-mix(in oklch, var(--tb-color-surface) 60%, transparent), transparent);
        background-repeat: no-repeat;
        background-size: 50% 100%;
        animation: tb-skeleton-wave 1.6s linear infinite;
    }

    .tb-skeleton--wave:dir(rtl) {
        animation-direction: reverse;
    }

    /* As wide as its content whether it is loading or not, so the layout doesn't move when loading ends. */
    .tb-skeleton-region {
        inline-size: fit-content;
    }

    .tb-skeleton--content {
        border-radius: var(--tb-radius-sm);
    }

    /* Wrapped content keeps its size and place but isn't seen, read or reached until it has loaded. */
    .tb-skeleton--content > .tb-skeleton__content {
        visibility: hidden;
    }

    /* A line keeps the height of the text around it, with room above and below like a real line. */
    .tb-skeleton--text {
        block-size: 1em;
        margin-block: 0.25em;
        border-radius: var(--tb-radius-sm);
    }

    .tb-skeleton--rectangle {
        block-size: 6rem;
        border-radius: var(--tb-radius-md);
    }

    /* Only the width is set, so a circle given just a Width stays round. */
    .tb-skeleton--circle {
        inline-size: 2.5rem;
        aspect-ratio: 1;
        border-radius: var(--tb-radius-full);
    }

    /* Still shapes, without a sweep frozen at one side. */
    @media (prefers-reduced-motion: reduce) {
        .tb-skeleton--pulse,
        .tb-skeleton--wave {
            animation: none;
        }

        .tb-skeleton--wave {
            background-image: none;
        }
    }

    /* Forced colors drop the fill, so an outline keeps the placeholder's shape, inside it so sizes don't change. */
    @media (forced-colors: active) {
        .tb-skeleton {
            outline: 1px solid GrayText;
            outline-offset: -1px;
        }
    }

    @keyframes tb-skeleton-pulse {
        to {
            opacity: 0.45;
        }
    }

    @keyframes tb-skeleton-wave {
        from {
            background-position: -100% 0;
        }

        to {
            background-position: 200% 0;
        }
    }

    .tb-image {
        vertical-align: middle;
    }

    /* Its width and height attributes keep the shape while the size follows the container. */
    .tb-image--fluid {
        max-inline-size: 100%;
        block-size: auto;
    }

    .tb-image--fit-fill {
        object-fit: fill;
    }

    .tb-image--fit-contain {
        object-fit: contain;
    }

    .tb-image--fit-cover {
        object-fit: cover;
    }

    .tb-image--fit-scaledown {
        object-fit: scale-down;
    }

    .tb-image--fit-none {
        object-fit: none;
    }

    .tb-overlay {
        inset: 0;
        display: grid;
        place-items: center;
        border-radius: inherit;
        animation: tb-overlay-in var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

    /* Dialogs and popovers sit in the browser's top layer, so they stay above this. */
    .tb-overlay--fixed {
        position: fixed;
        z-index: 1000;
    }

    .tb-overlay--contained {
        position: absolute;
        z-index: 1;
    }

    .tb-overlay__scrim {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--tb-color-scrim);
    }

    .tb-overlay--transparent > .tb-overlay__scrim {
        background: transparent;
    }

    .tb-overlay--blur > .tb-overlay__scrim {
        backdrop-filter: blur(4px);
    }

    .tb-overlay__content {
        position: relative;
    }

    :root:has(.tb-overlay--lock-scroll) {
        overflow: hidden;
    }

    @keyframes tb-overlay-in {
        from {
            opacity: 0;
        }
    }

    .tb-chip-group {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tb-space-2);
    }

    .tb-chip {
        --tb-chip-height: calc(var(--tb-control-height) - 0.5rem);
        display: inline-flex;
        align-items: stretch;
        box-sizing: border-box;
        block-size: var(--tb-chip-height);
        border: 1px solid transparent;
        border-radius: var(--tb-radius-full);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
        line-height: 1;
        vertical-align: middle;
    }

    .tb-chip--small {
        --tb-chip-height: max(1.5rem, calc(var(--tb-control-height) - 1rem));
        font-size: var(--tb-font-size-xs);
    }

    .tb-chip--large {
        --tb-chip-height: var(--tb-control-height);
        font-size: var(--tb-font-size-md);
    }

    /* Each tone sets the chip's own tokens; each variant decides which of them it paints with. */
    .tb-chip--primary {
        --tb-chip-fill: var(--tb-color-primary);
        --tb-chip-on-fill: var(--tb-color-on-primary);
        --tb-chip-subtle: var(--tb-color-primary-subtle);
        --tb-chip-text: var(--tb-color-primary-text);
    }

    .tb-chip--neutral {
        --tb-chip-fill: var(--tb-color-neutral);
        --tb-chip-on-fill: var(--tb-color-on-neutral);
        --tb-chip-subtle: var(--tb-color-neutral-subtle);
        --tb-chip-text: var(--tb-color-neutral-text);
    }

    .tb-chip--success {
        --tb-chip-fill: var(--tb-color-success);
        --tb-chip-on-fill: var(--tb-color-on-success);
        --tb-chip-subtle: var(--tb-color-success-subtle);
        --tb-chip-text: var(--tb-color-success-text);
    }

    .tb-chip--warning {
        --tb-chip-fill: var(--tb-color-warning);
        --tb-chip-on-fill: var(--tb-color-on-warning);
        --tb-chip-subtle: var(--tb-color-warning-subtle);
        --tb-chip-text: var(--tb-color-warning-text);
    }

    .tb-chip--danger {
        --tb-chip-fill: var(--tb-color-danger);
        --tb-chip-on-fill: var(--tb-color-on-danger);
        --tb-chip-subtle: var(--tb-color-danger-subtle);
        --tb-chip-text: var(--tb-color-danger-text);
    }

    .tb-chip--info {
        --tb-chip-fill: var(--tb-color-info);
        --tb-chip-on-fill: var(--tb-color-on-info);
        --tb-chip-subtle: var(--tb-color-info-subtle);
        --tb-chip-text: var(--tb-color-info-text);
    }

    .tb-chip--filled {
        background: var(--tb-chip-fill);
        color: var(--tb-chip-on-fill);
    }

    .tb-chip--soft {
        background: var(--tb-chip-subtle);
        color: var(--tb-chip-text);
    }

    .tb-chip--text {
        color: var(--tb-chip-text);
    }

    .tb-chip--outlined {
        border-color: var(--tb-border-strong);
        color: var(--tb-chip-text);
    }

    /* A selected toggle chip is filled whatever its variant, so on and off read apart at a glance. */
    .tb-chip.tb-chip--selected {
        border-color: transparent;
        background: var(--tb-chip-fill);
        color: var(--tb-chip-on-fill);
    }

    .tb-chip--disabled {
        opacity: var(--tb-disabled-opacity);
    }

    .tb-chip__action {
        display: inline-flex;
        align-items: center;
        gap: var(--tb-space-1);
        padding-inline: var(--tb-space-3);
        border: 0;
        border-radius: inherit;
        background: none;
        color: inherit;
        font: inherit;
        text-decoration: none;
    }

    button.tb-chip__action:not(:disabled),
    a.tb-chip__action {
        cursor: pointer;
    }

    button.tb-chip__action:not(:disabled):hover,
    a.tb-chip__action:hover,
    .tb-chip__remove:not(:disabled):hover {
        background: color-mix(in oklch, currentColor 12%, transparent);
    }

    .tb-chip__action:focus-visible,
    .tb-chip__remove:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-chip:has(.tb-chip__remove) > .tb-chip__action {
        padding-inline-end: var(--tb-space-1);
    }

    /* At least the 24px target WCAG 2.5.8 asks for, so on a small chip it fills the chip's height. */
    .tb-chip__remove {
        --tb-chip-remove-size: max(1.5rem, calc(var(--tb-chip-height) - 0.5rem));
        display: inline-grid;
        place-items: center;
        align-self: center;
        inline-size: var(--tb-chip-remove-size);
        block-size: var(--tb-chip-remove-size);
        margin-inline-end: calc((var(--tb-chip-height) - var(--tb-chip-remove-size)) / 2);
        padding: 0;
        border: 0;
        border-radius: var(--tb-radius-full);
        background: none;
        color: inherit;
        cursor: pointer;
    }

    /* Forced colors drop the fills, so every chip keeps an outline and a selected one a thicker one. */
    @media (forced-colors: active) {
        .tb-chip {
            border-color: CanvasText;
        }

        .tb-chip.tb-chip--selected {
            border: 2px solid Highlight;
        }
    }

    .tb-label {
        display: flex;
        align-items: center;
        gap: var(--tb-space-1);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
        color: var(--tb-color-text);
    }

    .tb-label__info-text {
        font-weight: var(--tb-font-weight-regular);
    }

    /* A plain explanation keeps its own line breaks; rich content flows like any markup. */
    .tb-label__info-text--lines {
        white-space: pre-line;
    }

    .tb-list {
        --tb-list-item-height: var(--tb-row-height);
        --tb-list-item-padding: var(--tb-control-padding-block) var(--tb-space-3);
        --tb-list-current: var(--tb-color-primary-subtle);
        --tb-list-on-current: var(--tb-color-primary-text);
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
    }

    .tb-list--dividers {
        gap: 0;
    }

    .tb-list--dividers > .tb-list__item + .tb-list__item {
        border-block-start: 1px solid var(--tb-border-subtle);
    }

    .tb-list__item {
        display: flex;
        align-items: center;
        min-block-size: var(--tb-list-item-height);
        border-radius: var(--tb-radius-sm);
    }

    .tb-list__action,
    .tb-list__content {
        display: flex;
        flex: 1;
        align-items: center;
        gap: var(--tb-space-3);
        box-sizing: border-box;
        min-inline-size: 0;
        min-block-size: var(--tb-list-item-height);
        padding: var(--tb-list-item-padding);
    }

    .tb-list__action {
        border: none;
        border-radius: inherit;
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: var(--tb-line-height-tight);
        text-align: start;
        text-decoration: none;
        cursor: pointer;
    }

    .tb-list__action:hover {
        background: var(--tb-color-hover);
    }

    .tb-list__action:active {
        background: var(--tb-color-pressed);
    }

    .tb-list__action:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-list__item--selected,
    .tb-list__item--selected .tb-list__action:hover {
        background: var(--tb-list-current);
        color: var(--tb-list-on-current);
    }

    .tb-list__item--selected .tb-list__primary {
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-list__item--disabled .tb-list__action,
    .tb-list__item--disabled .tb-list__content {
        color: var(--tb-color-text-disabled);
        background: transparent;
        cursor: default;
    }

    .tb-list__start,
    .tb-list__end {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--tb-space-1);
    }

    .tb-list__end {
        padding-inline-end: var(--tb-space-3);
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-sm);
    }

    .tb-list__text {
        display: flex;
        flex-direction: column;
        min-inline-size: 0;
    }

    .tb-list__description {
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-sm);
    }

    .tb-list__item--selected :is(.tb-list__description, .tb-list__end) {
        color: inherit;
    }

    /* Forced colors drop the background, so the current item keeps a border instead. */
    @media (forced-colors: active) {
        .tb-list__item--selected {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }
    }

    /* As tall as its button, so the button never spills over the items beside it. */
    .tb-insert-divider {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tb-insert-divider::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: 50%;
        border-block-start: 2px solid var(--tb-color-primary);
        opacity: 0;
        transition: opacity var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    /* Positioned, so it paints above the line and takes the clicks. */
    .tb-insert-divider__button {
        position: relative;
        opacity: 0;
        transition: opacity var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-insert-divider:hover::before,
    .tb-insert-divider:focus-within::before,
    .tb-insert-divider:hover .tb-insert-divider__button,
    .tb-insert-divider:focus-within .tb-insert-divider__button {
        opacity: 1;
    }

    /* A touch screen can't hover, even on a laptop whose touchpad can, so there the button stays in view. */
    @media (hover: none), (any-pointer: coarse) {
        .tb-insert-divider__button {
            opacity: 1;
        }
    }

    .tb-divider {
        margin: var(--tb-space-2) 0;
        border: none;
        border-block-start: 1px solid var(--tb-border-subtle);
    }

    .tb-divider--vertical {
        align-self: stretch;
        margin: 0 var(--tb-space-2);
        border-block-start: none;
        border-inline-start: 1px solid var(--tb-border-subtle);
    }

    /* Content sits between two drawn lines, which a short one at the start or end pushes along. */
    .tb-divider--content {
        display: flex;
        align-items: center;
        gap: var(--tb-space-3);
        border: none;
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-sm);
    }

    .tb-divider--content::before,
    .tb-divider--content::after {
        content: "";
        flex: 1;
        border-block-start: 1px solid var(--tb-border-subtle);
    }

    .tb-divider--content.tb-divider--vertical {
        flex-direction: column;
    }

    .tb-divider--content.tb-divider--vertical::before,
    .tb-divider--content.tb-divider--vertical::after {
        border-block-start: none;
        border-inline-start: 1px solid var(--tb-border-subtle);
    }

    .tb-divider--align-start::before,
    .tb-divider--align-end::after {
        flex: 0 0 var(--tb-space-4);
    }

    .tb-surface {
        border-radius: var(--tb-radius-md);
        background: var(--tb-color-surface);
        color: var(--tb-color-text);
    }

    .tb-surface--low {
        box-shadow: var(--tb-shadow-sm);
    }

    /* Black shadows barely show on a dark page, so higher elevations take the raised surface, lighter in dark mode. */
    .tb-surface--medium {
        background: var(--tb-color-surface-raised);
        box-shadow: var(--tb-shadow-md);
    }

    .tb-surface--high {
        background: var(--tb-color-surface-raised);
        box-shadow: var(--tb-shadow-lg);
    }

    .tb-surface--outlined {
        border: 1px solid var(--tb-border-subtle);
    }

    .tb-icon {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
    }

    .tb-icon--small {
        width: 1rem;
        height: 1rem;
    }

    .tb-icon--large {
        width: 1.5rem;
        height: 1.5rem;
    }

    .tb-icon--primary {
        color: var(--tb-color-primary-text);
    }

    .tb-icon--neutral {
        color: var(--tb-color-neutral-text);
    }

    .tb-icon--success {
        color: var(--tb-color-success-text);
    }

    .tb-icon--warning {
        color: var(--tb-color-warning-text);
    }

    .tb-icon--danger {
        color: var(--tb-color-danger-text);
    }

    .tb-icon--info {
        color: var(--tb-color-info-text);
    }

    /* Each tone sets the button's own tokens; each variant decides which of them it paints with. */
    .tb-button--primary {
        --tb-button-fill: var(--tb-color-primary);
        --tb-button-fill-hover: var(--tb-color-primary-hover);
        --tb-button-fill-active: var(--tb-color-primary-active);
        --tb-button-on-fill: var(--tb-color-on-primary);
        --tb-button-subtle: var(--tb-color-primary-subtle);
        --tb-button-text: var(--tb-color-primary-text);
    }

    .tb-button--neutral {
        --tb-button-fill: var(--tb-color-neutral);
        --tb-button-fill-hover: var(--tb-color-neutral-hover);
        --tb-button-fill-active: var(--tb-color-neutral-active);
        --tb-button-on-fill: var(--tb-color-on-neutral);
        --tb-button-subtle: var(--tb-color-neutral-subtle);
        --tb-button-text: var(--tb-color-neutral-text);
    }

    .tb-button--success {
        --tb-button-fill: var(--tb-color-success);
        --tb-button-fill-hover: var(--tb-color-success-hover);
        --tb-button-fill-active: var(--tb-color-success-active);
        --tb-button-on-fill: var(--tb-color-on-success);
        --tb-button-subtle: var(--tb-color-success-subtle);
        --tb-button-text: var(--tb-color-success-text);
    }

    .tb-button--warning {
        --tb-button-fill: var(--tb-color-warning);
        --tb-button-fill-hover: var(--tb-color-warning-hover);
        --tb-button-fill-active: var(--tb-color-warning-active);
        --tb-button-on-fill: var(--tb-color-on-warning);
        --tb-button-subtle: var(--tb-color-warning-subtle);
        --tb-button-text: var(--tb-color-warning-text);
    }

    .tb-button--danger {
        --tb-button-fill: var(--tb-color-danger);
        --tb-button-fill-hover: var(--tb-color-danger-hover);
        --tb-button-fill-active: var(--tb-color-danger-active);
        --tb-button-on-fill: var(--tb-color-on-danger);
        --tb-button-subtle: var(--tb-color-danger-subtle);
        --tb-button-text: var(--tb-color-danger-text);
    }

    .tb-button--info {
        --tb-button-fill: var(--tb-color-info);
        --tb-button-fill-hover: var(--tb-color-info-hover);
        --tb-button-fill-active: var(--tb-color-info-active);
        --tb-button-on-fill: var(--tb-color-on-info);
        --tb-button-subtle: var(--tb-color-info-subtle);
        --tb-button-text: var(--tb-color-info-text);
    }

    .tb-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--tb-space-2);
        box-sizing: border-box;
        min-height: var(--tb-button-height, var(--tb-control-height));
        padding: 0 var(--tb-control-padding-inline);
        border: 1px solid transparent;
        border-radius: var(--tb-button-radius, var(--tb-radius-md));
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
        font-weight: var(--tb-font-weight-medium);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-button:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-button--filled {
        background: var(--tb-button-fill);
        color: var(--tb-button-on-fill);
    }

    .tb-button--filled:hover:not(:disabled, [aria-disabled="true"]) {
        background: var(--tb-button-fill-hover);
    }

    .tb-button--filled:active:not(:disabled, [aria-disabled="true"]) {
        background: var(--tb-button-fill-active);
    }

    .tb-button--outlined {
        border-color: var(--tb-button-text);
        background: transparent;
        color: var(--tb-button-text);
    }

    .tb-button--soft {
        background: var(--tb-button-subtle);
        color: var(--tb-button-text);
    }

    .tb-button--text {
        background: transparent;
        color: var(--tb-button-text);
    }

    .tb-button--outlined:hover:not(:disabled, [aria-disabled="true"]),
    .tb-button--text:hover:not(:disabled, [aria-disabled="true"]) {
        background: var(--tb-button-subtle);
    }

    /* A soft button's hover and press deepen its fill toward its text, as the filled button's steps do. */
    .tb-button--soft:hover:not(:disabled, [aria-disabled="true"], [aria-pressed="true"]) {
        background: color-mix(in oklch, var(--tb-button-subtle), var(--tb-button-text) 10%);
    }

    :is(.tb-button--soft, .tb-button--outlined, .tb-button--text):active:not(:disabled, [aria-disabled="true"],
        [aria-pressed="true"]) {
        background: color-mix(in oklch, var(--tb-button-subtle), var(--tb-button-text) 18%);
    }

    /* A pressed toggle takes the next stronger fill, so on and off differ in every variant. */
    .tb-button[aria-pressed="true"] {
        border-color: var(--tb-button-text);
        background: var(--tb-button-subtle);
        color: var(--tb-button-text);
    }

    .tb-button--filled[aria-pressed="true"],
    .tb-button--soft[aria-pressed="true"] {
        border-color: transparent;
        background: var(--tb-button-fill);
        color: var(--tb-button-on-fill);
    }

    .tb-button--filled[aria-pressed="true"] {
        box-shadow: inset 0 0 0 2px var(--tb-button-on-fill);
    }

    @media (forced-colors: active) {
        .tb-button[aria-pressed="true"] {
            forced-color-adjust: none;
            border-color: Highlight;
            background: Highlight;
            color: HighlightText;
            box-shadow: none;
        }
    }

    .tb-button--small {
        min-height: var(--tb-control-height-sm);
        padding: 0 var(--tb-space-2);
        font-size: var(--tb-font-size-xs);
    }

    .tb-button--large {
        min-height: var(--tb-control-height-lg);
        padding: 0 var(--tb-space-4);
        font-size: var(--tb-font-size-md);
    }

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

    .tb-icon-button {
        min-width: var(--tb-button-height, var(--tb-control-height));
        padding: 0;
    }

    .tb-icon-button.tb-button--small {
        min-width: var(--tb-control-height-sm);
    }

    .tb-icon-button.tb-button--large {
        min-width: var(--tb-control-height-lg);
    }

    .tb-button__spinner,
    .tb-tree__spinner {
        width: 1em;
        height: 1em;
        border: 2px solid currentColor;
        border-block-start-color: transparent;
        border-radius: var(--tb-radius-full);
        animation: tb-spin 800ms linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        .tb-button__spinner,
        .tb-tree__spinner {
            animation: none;
        }
    }

    @keyframes tb-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .tb-button-group,
    .tb-toggle-group {
        display: inline-flex;
    }

    .tb-toggle-group:not(.tb-toggle-group--vertical) > .tb-button:not(:first-child) {
        margin-inline-start: -1px;
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }

    .tb-toggle-group:not(.tb-toggle-group--vertical) > .tb-button:not(:last-child) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

    /* A group's items are its buttons, or the menus, popovers and tooltips around them, whose own buttons join. */
    .tb-button-group--vertical {
        flex-direction: column;
    }

    /* The doubled class outranks a wrapper's own display, such as the popover's inline-block. */
    .tb-button-group.tb-button-group--vertical > * {
        display: flex;
    }

    .tb-button-group--vertical > * > .tb-button {
        flex: 1;
    }

    .tb-button-group:not(.tb-button-group--vertical) > :not(:first-child) {
        margin-inline-start: -1px;
    }

    .tb-button-group--vertical > :not(:first-child) {
        margin-block-start: -1px;
    }

    .tb-button-group:not(.tb-button-group--vertical) > :not(:first-child):is(.tb-button),
    .tb-button-group:not(.tb-button-group--vertical) > :not(:first-child) > .tb-button {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
    }

    .tb-button-group:not(.tb-button-group--vertical) > :not(:last-child):is(.tb-button),
    .tb-button-group:not(.tb-button-group--vertical) > :not(:last-child) > .tb-button {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
    }

    .tb-button-group--vertical > :not(:first-child):is(.tb-button),
    .tb-button-group--vertical > :not(:first-child) > .tb-button {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }

    .tb-button-group--vertical > :not(:last-child):is(.tb-button),
    .tb-button-group--vertical > :not(:last-child) > .tb-button {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /* Filled and soft buttons side by side would merge into one block, so each after the first draws a seam. */
    .tb-button-group:not(.tb-button-group--vertical) > :not(:first-child):is(.tb-button--filled, .tb-button--soft),
    .tb-button-group:not(.tb-button-group--vertical) > :not(:first-child) > :is(.tb-button--filled, .tb-button--soft) {
        border-inline-start-color: color-mix(in srgb, currentColor 35%, transparent);
    }

    .tb-button-group--vertical > :not(:first-child):is(.tb-button--filled, .tb-button--soft),
    .tb-button-group--vertical > :not(:first-child) > :is(.tb-button--filled, .tb-button--soft) {
        border-block-start-color: color-mix(in srgb, currentColor 35%, transparent);
    }

    /* Joined buttons overlap by their border, so a focused one is lifted to show all of its ring. */
    .tb-button-group > .tb-button:focus-visible,
    .tb-button-group > * > .tb-button:focus-visible {
        position: relative;
        z-index: 2;
    }

    .tb-toggle-group--vertical {
        flex-direction: column;
    }

    .tb-toggle-group--vertical > .tb-button:not(:first-child) {
        margin-block-start: -1px;
        border-start-start-radius: 0;
        border-start-end-radius: 0;
    }

    .tb-toggle-group--vertical > .tb-button:not(:last-child) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    /* Joined items overlap by their border, so a pressed or focused one is lifted to show all of its own. */
    .tb-toggle-group > .tb-button[aria-pressed="true"] {
        position: relative;
        z-index: 1;
    }

    .tb-toggle-group > .tb-button:focus-visible {
        position: relative;
        z-index: 2;
    }

    .tb-stack {
        display: flex;
        flex-direction: column;
        gap: var(--tb-stack-gap);
    }

    .tb-stack--row {
        flex-direction: row;
    }

    /* A stack that turns into a row from a breakpoint; these widths repeat the --tb-breakpoint-* tokens. */
    @media (min-width: 640px) {
        .tb-stack--row-from-sm {
            flex-direction: row;
        }
    }

    @media (min-width: 768px) {
        .tb-stack--row-from-md {
            flex-direction: row;
        }
    }

    @media (min-width: 1024px) {
        .tb-stack--row-from-lg {
            flex-direction: row;
        }
    }

    @media (min-width: 1280px) {
        .tb-stack--row-from-xl {
            flex-direction: row;
        }
    }

    .tb-stack--row-from-xs {
        flex-direction: row;
    }

    /* A layout rendered as a list lays out its items, so the browser's bullets and indent go. */
    :where(ul, ol):is(.tb-stack, .tb-grid, .tb-container, .tb-surface) {
        margin-block: 0;
        padding-inline-start: 0;
        list-style: none;
    }

    .tb-stack--wrap {
        flex-wrap: wrap;
    }

    .tb-stack--align-start {
        align-items: flex-start;
    }

    .tb-stack--align-center {
        align-items: center;
    }

    .tb-stack--align-end {
        align-items: flex-end;
    }

    .tb-stack--align-stretch {
        align-items: stretch;
    }

    .tb-stack--align-baseline {
        align-items: baseline;
    }

    .tb-stack--justify-start {
        justify-content: flex-start;
    }

    .tb-stack--justify-center {
        justify-content: center;
    }

    .tb-stack--justify-end {
        justify-content: flex-end;
    }

    .tb-stack--justify-spacebetween {
        justify-content: space-between;
    }

    .tb-stack--justify-spacearound {
        justify-content: space-around;
    }

    .tb-stack--justify-spaceevenly {
        justify-content: space-evenly;
    }

    .tb-spacer {
        flex: 1 1 auto;
    }

    .tb-container {
        box-sizing: border-box;
        width: 100%;
        margin-inline: auto;
        padding-inline: var(--tb-space-4);
    }

    .tb-container--small {
        max-width: var(--tb-breakpoint-sm);
    }

    .tb-container--medium {
        max-width: var(--tb-breakpoint-md);
    }

    .tb-container--large {
        max-width: var(--tb-breakpoint-lg);
    }

    .tb-container--extralarge {
        max-width: var(--tb-breakpoint-xl);
    }

    /* Rows that wrap, so an item can grow into what's left of its row or size to its content. */
    .tb-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tb-grid-gap);
    }

    /* A column is the grid's width less its eleven gaps, over twelve; TbGridItem sizes its span in columns. */
    .tb-grid-item {
        --tb-grid-column: calc((100% - 11 * var(--tb-grid-gap)) / 12);
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        flex: var(--tb-grid-flex);
        margin-inline-start: calc(var(--tb-grid-offset) * (var(--tb-grid-column) + var(--tb-grid-gap)));
    }

    /* These widths repeat the --tb-breakpoint-* tokens, because media queries can't read custom properties. */
    @media (min-width: 640px) {
        .tb-grid-item {
            flex: var(--tb-grid-flex-sm);
            margin-inline-start: calc(var(--tb-grid-offset-sm) * (var(--tb-grid-column) + var(--tb-grid-gap)));
        }
    }

    @media (min-width: 768px) {
        .tb-grid-item {
            flex: var(--tb-grid-flex-md);
            margin-inline-start: calc(var(--tb-grid-offset-md) * (var(--tb-grid-column) + var(--tb-grid-gap)));
        }
    }

    @media (min-width: 1024px) {
        .tb-grid-item {
            flex: var(--tb-grid-flex-lg);
            margin-inline-start: calc(var(--tb-grid-offset-lg) * (var(--tb-grid-column) + var(--tb-grid-gap)));
        }
    }

    @media (min-width: 1280px) {
        .tb-grid-item {
            flex: var(--tb-grid-flex-xl);
            margin-inline-start: calc(var(--tb-grid-offset-xl) * (var(--tb-grid-column) + var(--tb-grid-gap)));
        }
    }

    .tb-alert {
        display: flex;
        align-items: flex-start;
        gap: var(--tb-space-3);
        padding: calc(1.5 * var(--tb-control-padding-block)) var(--tb-space-4);
        border-inline-start: 4px solid var(--tb-alert-accent);
        border-radius: var(--tb-radius-md);
        background: var(--tb-alert-subtle);
        color: var(--tb-color-text);
        font-size: var(--tb-font-size-sm);
        line-height: var(--tb-line-height-normal);
    }

    .tb-alert--primary {
        --tb-alert-subtle: var(--tb-color-primary-subtle);
        --tb-alert-accent: var(--tb-color-primary-text);
        --tb-alert-fill: var(--tb-color-primary);
        --tb-alert-on-fill: var(--tb-color-on-primary);
    }

    .tb-alert--neutral {
        --tb-alert-subtle: var(--tb-color-neutral-subtle);
        --tb-alert-accent: var(--tb-color-neutral-text);
        --tb-alert-fill: var(--tb-color-neutral);
        --tb-alert-on-fill: var(--tb-color-on-neutral);
    }

    .tb-alert--success {
        --tb-alert-subtle: var(--tb-color-success-subtle);
        --tb-alert-accent: var(--tb-color-success-text);
        --tb-alert-fill: var(--tb-color-success);
        --tb-alert-on-fill: var(--tb-color-on-success);
    }

    .tb-alert--warning {
        --tb-alert-subtle: var(--tb-color-warning-subtle);
        --tb-alert-accent: var(--tb-color-warning-text);
        --tb-alert-fill: var(--tb-color-warning);
        --tb-alert-on-fill: var(--tb-color-on-warning);
    }

    .tb-alert--danger {
        --tb-alert-subtle: var(--tb-color-danger-subtle);
        --tb-alert-accent: var(--tb-color-danger-text);
        --tb-alert-fill: var(--tb-color-danger);
        --tb-alert-on-fill: var(--tb-color-on-danger);
    }

    .tb-alert--info {
        --tb-alert-subtle: var(--tb-color-info-subtle);
        --tb-alert-accent: var(--tb-color-info-text);
        --tb-alert-fill: var(--tb-color-info);
        --tb-alert-on-fill: var(--tb-color-on-info);
    }

    .tb-alert__icon {
        color: var(--tb-alert-accent);
    }

    .tb-alert--filled {
        --tb-alert-page-ring: var(--tb-focus-ring-color);
        border-inline-start-color: transparent;
        background: var(--tb-alert-fill);
        color: var(--tb-alert-on-fill);
    }

    .tb-alert--filled .tb-alert__icon {
        color: inherit;
    }

    /* On a solid fill, focus rings and buttons, the close button among them, take its text color so they stay
       readable. A popup's panel inside the alert has the page's own background, so it sets the page's ring back,
       which its contents inherit, and its buttons keep their own tokens. */
    .tb-alert--filled > * {
        --tb-focus-ring-color: var(--tb-alert-on-fill);
    }

    .tb-alert--filled [popover] {
        --tb-focus-ring-color: var(--tb-alert-page-ring);
    }

    .tb-alert--filled .tb-button:not([popover] *) {
        --tb-button-text: var(--tb-alert-on-fill);
        --tb-button-subtle: color-mix(in oklch, var(--tb-alert-on-fill) 16%, transparent);
        --tb-button-fill: var(--tb-alert-on-fill);
        --tb-button-fill-hover: color-mix(in oklch, var(--tb-alert-on-fill) 88%, var(--tb-alert-fill));
        --tb-button-fill-active: color-mix(in oklch, var(--tb-alert-on-fill) 76%, var(--tb-alert-fill));
        --tb-button-on-fill: var(--tb-alert-fill);
    }

    .tb-alert--outlined {
        border: 1px solid var(--tb-alert-accent);
        background: none;
    }

    .tb-alert__content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: var(--tb-space-1);
        min-width: 0;
    }

    .tb-alert__title {
        font-weight: var(--tb-font-weight-semibold);
    }

    .tb-alert__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tb-space-2);
        margin-block-start: var(--tb-space-1);
    }

    .tb-alert__close {
        margin-block: calc(-1 * var(--tb-space-1));
    }

    .tb-progress--linear {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
    }

    .tb-progress__header {
        display: flex;
        gap: var(--tb-space-2);
        color: var(--tb-color-text);
        font-size: var(--tb-font-size-sm);
    }

    /* A long file name wraps rather than pushing the value past the bar. */
    .tb-progress__header .tb-progress__label {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tb-progress__header .tb-progress__value {
        margin-inline-start: auto;
        color: var(--tb-color-text-muted);
        font-variant-numeric: tabular-nums;
    }

    .tb-progress__bar {
        position: relative;
        height: 0.25rem;
        overflow: hidden;
        border-radius: var(--tb-radius-full);
        background: var(--tb-color-neutral-subtle);
    }

    .tb-progress--small .tb-progress__bar {
        height: 0.125rem;
    }

    .tb-progress--large .tb-progress__bar {
        height: 0.5rem;
    }

    .tb-progress--linear .tb-progress__indicator {
        width: calc(var(--tb-progress-percent) * 1%);
        height: 100%;
        border-radius: inherit;
        background: var(--tb-progress-fill);
        transition: width var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

    .tb-progress--linear.tb-progress--indeterminate .tb-progress__indicator {
        width: 40%;
        animation: tb-progress-slide 1.4s var(--tb-motion-easing-standard) infinite;
    }

    .tb-progress--linear.tb-progress--indeterminate:dir(rtl) .tb-progress__indicator {
        animation-name: tb-progress-slide-rtl;
    }

    .tb-progress--circular {
        display: inline-flex;
        align-items: center;
        gap: var(--tb-space-2);
        color: var(--tb-color-text);
        font-size: var(--tb-font-size-sm);
    }

    /* The value in the ring's center scales with the ring, through its width as a container. */
    .tb-progress__ring {
        position: relative;
        flex: none;
        width: 2rem;
        height: 2rem;
        container-type: inline-size;
    }

    .tb-progress--small .tb-progress__ring {
        width: 1.25rem;
        height: 1.25rem;
    }

    .tb-progress--large .tb-progress__ring {
        width: 3rem;
        height: 3rem;
    }

    .tb-progress__ring .tb-progress__value {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 26cqi;
        font-variant-numeric: tabular-nums;
    }

    .tb-progress--circular svg {
        display: block;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
    }

    .tb-progress--circular circle {
        fill: none;
        stroke-width: 4;
    }

    .tb-progress__track {
        stroke: var(--tb-color-neutral-subtle);
    }

    .tb-progress--circular .tb-progress__indicator {
        stroke: var(--tb-progress-fill);
        stroke-linecap: round;
        stroke-dasharray: var(--tb-progress-percent) 100;
        transition: stroke-dasharray var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

    .tb-progress--circular.tb-progress--indeterminate .tb-progress__indicator {
        stroke-dasharray: 25 100;
    }

    /* tb-spin starts from the element's own transform, so drop the -90deg start angle while spinning. */
    .tb-progress--circular.tb-progress--indeterminate svg {
        transform: none;
        animation: tb-spin 1s linear infinite;
    }

    .tb-progress--primary {
        --tb-progress-fill: var(--tb-color-primary-text);
    }

    .tb-progress--neutral {
        --tb-progress-fill: var(--tb-color-neutral-text);
    }

    .tb-progress--success {
        --tb-progress-fill: var(--tb-color-success-text);
    }

    .tb-progress--warning {
        --tb-progress-fill: var(--tb-color-warning-text);
    }

    .tb-progress--danger {
        --tb-progress-fill: var(--tb-color-danger-text);
    }

    /* Forced colors paint every background in the page's own color, so the bar and the ring take system colors. */
    @media (forced-colors: active) {
        .tb-progress__bar {
            border: 1px solid CanvasText;
        }

        .tb-progress--linear .tb-progress__indicator {
            forced-color-adjust: none;
            background: Highlight;
        }

        .tb-progress--circular .tb-progress__indicator {
            stroke: Highlight;
        }

        .tb-progress__track {
            stroke: GrayText;
        }
    }

    .tb-progress--info {
        --tb-progress-fill: var(--tb-color-info-text);
    }

    /* A still partial indicator would read as a real value, so reduced motion fills it and pulses instead. */
    @media (prefers-reduced-motion: reduce) {
        .tb-progress--linear.tb-progress--indeterminate .tb-progress__indicator {
            width: 100%;
        }

        .tb-progress--circular.tb-progress--indeterminate .tb-progress__indicator {
            stroke-dasharray: 100 100;
        }

        .tb-progress--linear.tb-progress--indeterminate .tb-progress__indicator,
        .tb-progress--linear.tb-progress--indeterminate:dir(rtl) .tb-progress__indicator,
        .tb-progress--circular.tb-progress--indeterminate .tb-progress__indicator {
            animation: tb-progress-pulse 2s ease-in-out infinite alternate;
        }

        .tb-progress--circular.tb-progress--indeterminate svg {
            animation: none;
        }
    }

    @keyframes tb-progress-slide {
        from {
            transform: translateX(-100%);
        }

        to {
            transform: translateX(250%);
        }
    }

    @keyframes tb-progress-slide-rtl {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(-250%);
        }
    }

    @keyframes tb-progress-pulse {
        from {
            opacity: 1;
        }

        to {
            opacity: 0.35;
        }
    }

    .tb-field {
        --tb-field-padding-block: var(--tb-control-padding-block);
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
        color: var(--tb-color-text);
        font-size: var(--tb-font-size-sm);
    }

    .tb-field__label,
    .tb-label__text {
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-field__required,
    .tb-label__required {
        margin-inline-start: var(--tb-space-1);
        color: var(--tb-color-danger-text);
    }

    .tb-field__control {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        box-sizing: border-box;
        min-height: var(--tb-field-height, var(--tb-control-height));
        padding-inline: var(--tb-control-padding-inline);
        border: 1px solid var(--tb-border-strong);
        border-radius: var(--tb-field-radius, var(--tb-radius-md));
        background: var(--tb-color-surface);
    }

    .tb-field__control:focus-within {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-field__input {
        flex: 1 1 auto;
        min-width: 0;
        padding-block: var(--tb-field-padding-block);
        border: none;
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: var(--tb-line-height-tight);
        font-size: var(--tb-field-font-size, var(--tb-font-size-md));
        outline: none;
    }

    /* A size works from the density's control height, as a button's does, and leaves the token to what's inside. */
    .tb-field--small {
        --tb-field-font-size: var(--tb-font-size-sm);
        --tb-field-padding-block: var(--tb-space-0);
    }

    /* A small box keeps room for its own 24px buttons, the smallest pointer target allowed, inside its borders. */
    .tb-field--small .tb-field__control {
        min-height: var(--tb-control-height-sm);
        padding-inline: var(--tb-space-2);
    }

    .tb-field--small :is(.tb-field__control > .tb-icon-button, .tb-field__start .tb-icon-button,
        .tb-field__end .tb-icon-button) {
        min-width: 24px;
        min-height: 24px;
    }

    .tb-field--small textarea.tb-field__input {
        --tb-field-padding-block: var(--tb-space-1);
    }

    .tb-field--large {
        --tb-field-font-size: var(--tb-font-size-lg);
    }

    .tb-field--large .tb-field__control {
        min-height: var(--tb-control-height-lg);
        padding-inline: var(--tb-space-4);
    }

    textarea.tb-field__input {
        resize: vertical;
    }

    /* A clearable search box has its own clear button, so the browser's would be a second one. */
    .tb-field__control:has([data-part="clear"]) input.tb-field__input::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    /* A text area with MaxLines sizes to its text between its line counts; without field-sizing it stays resizable. */
    @supports (field-sizing: content) {
        textarea.tb-field__input[data-max-lines] {
            box-sizing: border-box;
            field-sizing: content;
            min-block-size: calc(var(--tb-text-field-lines) * 1lh + 2 * var(--tb-field-padding-block));
            max-block-size: calc(var(--tb-text-field-max-lines) * 1lh + 2 * var(--tb-field-padding-block));
            resize: none;
        }
    }

    /* The field draws its own step buttons, so the browser's spinners are hidden. */
    input.tb-field__input[type="number"] {
        appearance: textfield;
    }

    input.tb-field__input[type="number"]::-webkit-inner-spin-button,
    input.tb-field__input[type="number"]::-webkit-outer-spin-button {
        appearance: none;
        margin: 0;
    }

    .tb-field__start,
    .tb-field__end {
        display: inline-flex;
        align-items: center;
        color: var(--tb-color-text-muted);
    }

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

    .tb-field__error {
        color: var(--tb-color-danger-text);
    }

    .tb-field--invalid .tb-field__control {
        border-color: var(--tb-color-danger-text);
    }

    .tb-field--disabled .tb-field__control {
        opacity: var(--tb-disabled-opacity);
    }

    .tb-field--readonly .tb-field__control {
        background: var(--tb-color-surface-sunken);
    }

    /* A filled box is tinted, with only its bottom line drawn; that line keeps the field's 3:1 edge. */
    .tb-field--filled .tb-field__control {
        border-color: transparent;
        border-block-end-color: var(--tb-border-strong);
        border-radius: var(--tb-field-radius, var(--tb-radius-md)) var(--tb-field-radius, var(--tb-radius-md)) 0 0;
        background: var(--tb-color-surface-sunken);
    }

    .tb-field--filled.tb-field--invalid .tb-field__control {
        border-block-end-color: var(--tb-color-danger-text);
    }

    /* A read-only filled box already has the read-only tint, so its line is dashed instead. */
    .tb-field--filled.tb-field--readonly .tb-field__control {
        border-block-end-style: dashed;
    }

    .tb-checkbox,
    .tb-switch {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
        color: var(--tb-color-text);
    }

    /* A tone sets the checked fill and the mark on it; a size sets the box, the switch track and the text. */
    .tb-checkbox,
    .tb-switch,
    .tb-radio-group,
    .tb-checkbox-group {
        --tb-choice-fill: var(--tb-color-primary);
        --tb-choice-on-fill: var(--tb-color-on-primary);
        --tb-choice-box: 1.125rem;
        --tb-switch-width: 2.25rem;
        --tb-switch-height: 1.25rem;
        --tb-switch-thumb: 0.875rem;
        font-size: var(--tb-font-size-sm);
    }

    .tb-checkbox--neutral,
    .tb-switch--neutral,
    .tb-radio-group--neutral,
    .tb-checkbox-group--neutral {
        --tb-choice-fill: var(--tb-color-neutral);
        --tb-choice-on-fill: var(--tb-color-on-neutral);
    }

    .tb-checkbox--success,
    .tb-switch--success,
    .tb-radio-group--success,
    .tb-checkbox-group--success {
        --tb-choice-fill: var(--tb-color-success);
        --tb-choice-on-fill: var(--tb-color-on-success);
    }

    .tb-checkbox--danger,
    .tb-switch--danger,
    .tb-radio-group--danger,
    .tb-checkbox-group--danger {
        --tb-choice-fill: var(--tb-color-danger);
        --tb-choice-on-fill: var(--tb-color-on-danger);
    }

    .tb-checkbox--info,
    .tb-switch--info,
    .tb-radio-group--info,
    .tb-checkbox-group--info {
        --tb-choice-fill: var(--tb-color-info);
        --tb-choice-on-fill: var(--tb-color-on-info);
    }

    /* The warning fill is too light to stand out from a light page, so checked warning controls take its text color. */
    .tb-checkbox--warning,
    .tb-switch--warning,
    .tb-radio-group--warning,
    .tb-checkbox-group--warning {
        --tb-choice-fill: var(--tb-color-warning-text);
        --tb-choice-on-fill: var(--tb-color-surface);
    }

    .tb-checkbox--small,
    .tb-switch--small,
    .tb-radio-group--small,
    .tb-checkbox-group--small {
        --tb-choice-box: 1rem;
        --tb-switch-width: 1.75rem;
        --tb-switch-height: 1rem;
        --tb-switch-thumb: 0.625rem;
        font-size: var(--tb-font-size-xs);
    }

    .tb-checkbox--large,
    .tb-switch--large,
    .tb-radio-group--large,
    .tb-checkbox-group--large {
        --tb-choice-box: 1.375rem;
        --tb-switch-width: 2.75rem;
        --tb-switch-height: 1.5rem;
        --tb-switch-thumb: 1.125rem;
        font-size: var(--tb-font-size-md);
    }

    .tb-checkbox__label,
    .tb-switch__label,
    .tb-radio {
        display: inline-flex;
        align-items: center;
        gap: var(--tb-space-2);
        min-height: 24px;
        cursor: pointer;
    }

    .tb-checkbox__input,
    .tb-switch__input,
    .tb-radio__input {
        appearance: none;
        display: grid;
        place-content: center;
        flex-shrink: 0;
        box-sizing: border-box;
        margin: 0;
        border: 1px solid var(--tb-border-strong);
        background: var(--tb-color-surface);
        cursor: inherit;
    }

    .tb-checkbox__input:focus-visible,
    .tb-switch__input:focus-visible,
    .tb-radio__input:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    /* One box and mark for everything checkable: checkboxes, grid rows, tree checks and the options of a multiple
       select or listbox. Outside a checkbox component, which sets the tone and size tokens, a box falls back to the
       primary tone and the medium size. */
    .tb-checkbox__input,
    .tb-tree__check,
    .tb-select__box {
        width: var(--tb-choice-box, 1.125rem);
        height: var(--tb-choice-box, 1.125rem);
        border-radius: var(--tb-radius-sm);
    }

    .tb-tree__check,
    .tb-select__box {
        display: grid;
        flex: none;
        place-content: center;
        box-sizing: border-box;
        border: 1px solid var(--tb-border-strong);
        background: var(--tb-color-surface);
    }

    .tb-checkbox__input:checked,
    .tb-checkbox__input:indeterminate,
    .tb-tree__check--checked,
    .tb-tree__check--mixed,
    [aria-selected="true"] > .tb-select__box {
        border-color: var(--tb-choice-fill, var(--tb-color-primary));
        background: var(--tb-choice-fill, var(--tb-color-primary));
    }

    .tb-checkbox__input:checked::before,
    .tb-tree__check--checked::before,
    [aria-selected="true"] > .tb-select__box::before {
        content: "";
        width: calc(var(--tb-choice-box, 1.125rem) * 0.56);
        height: calc(var(--tb-choice-box, 1.125rem) * 0.56);
        background: var(--tb-choice-on-fill, var(--tb-color-on-primary));
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    .tb-checkbox__input:indeterminate::before,
    .tb-tree__check--mixed::before {
        content: "";
        width: calc(var(--tb-choice-box, 1.125rem) * 0.56);
        height: 2px;
        background: var(--tb-choice-on-fill, var(--tb-color-on-primary));
    }

    .tb-radio__input {
        width: var(--tb-choice-box);
        height: var(--tb-choice-box);
        border-radius: var(--tb-radius-full);
    }

    .tb-radio__input:checked {
        border-color: var(--tb-choice-fill);
    }

    .tb-radio__input:checked::before {
        content: "";
        width: calc(var(--tb-choice-box) / 2);
        height: calc(var(--tb-choice-box) / 2);
        border-radius: var(--tb-radius-full);
        background: var(--tb-choice-fill);
    }

    .tb-switch__input {
        width: var(--tb-switch-width);
        height: var(--tb-switch-height);
        padding: 2px;
        border-radius: var(--tb-radius-full);
        background: var(--tb-color-neutral-subtle);
        place-content: center start;
        transition: background var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-switch__input::before {
        content: "";
        width: var(--tb-switch-thumb);
        height: var(--tb-switch-thumb);
        border-radius: var(--tb-radius-full);
        background: var(--tb-color-text-muted);
        transition: transform var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-switch__input:checked {
        border-color: var(--tb-choice-fill);
        background: var(--tb-choice-fill);
    }

    /* The thumb travels the track less its own width, the 2px padding each side and the 1px border each side. */
    .tb-switch__input:checked::before {
        background: var(--tb-choice-on-fill);
        transform: translateX(calc(var(--tb-switch-width) - var(--tb-switch-thumb) - 6px));
    }

    .tb-switch__input:dir(rtl):checked::before {
        transform: translateX(calc(var(--tb-switch-thumb) + 6px - var(--tb-switch-width)));
    }

    .tb-checkbox--invalid .tb-checkbox__input,
    .tb-switch--invalid .tb-switch__input,
    .tb-radio-group--invalid .tb-radio__input,
    .tb-checkbox-group--invalid .tb-checkbox__input {
        border-color: var(--tb-color-danger-text);
    }

    .tb-checkbox--disabled .tb-checkbox__label,
    .tb-switch--disabled .tb-switch__label,
    .tb-radio--disabled,
    .tb-radio-group--disabled .tb-radio,
    .tb-checkbox-group__item--disabled,
    .tb-checkbox-group--disabled .tb-checkbox__label {
        opacity: var(--tb-disabled-opacity);
        cursor: default;
    }

    /* Forced colors drop the drawn boxes, so the native controls come back. */
    @media (forced-colors: active) {
        .tb-checkbox__input,
        .tb-switch__input,
        .tb-radio__input {
            appearance: auto;
        }

        /* Each matches the rule that sets its content, since a media query adds no specificity. */
        .tb-checkbox__input:checked::before,
        .tb-checkbox__input:indeterminate::before,
        .tb-switch__input::before,
        .tb-radio__input:checked::before {
            content: none;
        }
    }

    /* Forced colors drop the fill, so a checked box that isn't a native checkbox takes the system highlight. */
    @media (forced-colors: active) {
        .tb-tree__check--checked,
        .tb-tree__check--mixed,
        [aria-selected="true"] > .tb-select__box {
            forced-color-adjust: none;
            border-color: Highlight;
            background: Highlight;
        }

        .tb-tree__check--checked::before,
        .tb-tree__check--mixed::before,
        [aria-selected="true"] > .tb-select__box::before {
            background: HighlightText;
        }
    }

    .tb-radio-group,
    .tb-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-2);
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        border: none;
        color: var(--tb-color-text);
    }

    .tb-radio-group__label,
    .tb-checkbox-group__label {
        padding: 0;
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-radio-group__options,
    .tb-checkbox-group__options {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
    }

    .tb-radio-group__options--row,
    .tb-checkbox-group__options--row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--tb-space-1) var(--tb-space-4);
    }

    .tb-tooltip-anchor {
        display: inline-flex;
    }

    /* The positioning script places the tooltip, so only its look is set here. */
    .tb-tooltip {
        max-width: var(--tb-tooltip-max-width, 18rem);
        margin: 0;
        padding: var(--tb-space-1) var(--tb-space-2);
        border: none;
        border-radius: var(--tb-radius-sm);
        background: var(--tb-color-text);
        color: var(--tb-color-surface);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-xs);
        line-height: var(--tb-line-height-normal);
        /* A popover clips by default, which would hide the bridge below. */
        overflow: visible;
    }

    /* Bridges the gap to the trigger, so the pointer never leaves the trigger on its way onto the tooltip. */
    .tb-tooltip::before {
        content: "";
        position: absolute;
    }

    .tb-tooltip[data-side="bottom"]::before {
        inset-inline: 0;
        bottom: 100%;
        height: var(--tb-anchored-offset);
    }

    .tb-tooltip[data-side="top"]::before {
        inset-inline: 0;
        top: 100%;
        height: var(--tb-anchored-offset);
    }

    .tb-tooltip[data-side="start"]::before {
        inset-block: 0;
        inset-inline-start: 100%;
        width: var(--tb-anchored-offset);
    }

    .tb-tooltip[data-side="end"]::before {
        inset-block: 0;
        inset-inline-end: 100%;
        width: var(--tb-anchored-offset);
    }

    .tb-tooltip kbd {
        padding: 0 0.3em;
        border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
        border-radius: var(--tb-radius-sm);
        font-family: var(--tb-font-family-mono);
        font-size: 0.95em;
    }

    /* A square turned on its corner, half under the tooltip, kept clear of the rounded corners as it follows the
       trigger's middle. */
    .tb-tooltip__arrow {
        --tb-tooltip-arrow-size: 8px;
        --tb-tooltip-arrow-along: clamp(var(--tb-radius-sm),
            calc(var(--tb-anchor-center, 50%) - var(--tb-tooltip-arrow-size) / 2),
            calc(100% - var(--tb-radius-sm) - var(--tb-tooltip-arrow-size)));
        position: absolute;
        width: var(--tb-tooltip-arrow-size);
        height: var(--tb-tooltip-arrow-size);
        background: inherit;
        rotate: 45deg;
    }

    .tb-tooltip[data-side="top"] > .tb-tooltip__arrow {
        top: calc(100% - var(--tb-tooltip-arrow-size) / 2);
        left: var(--tb-tooltip-arrow-along);
    }

    .tb-tooltip[data-side="bottom"] > .tb-tooltip__arrow {
        bottom: calc(100% - var(--tb-tooltip-arrow-size) / 2);
        left: var(--tb-tooltip-arrow-along);
    }

    .tb-tooltip[data-side="start"] > .tb-tooltip__arrow {
        inset-inline-start: calc(100% - var(--tb-tooltip-arrow-size) / 2);
        top: var(--tb-tooltip-arrow-along);
    }

    .tb-tooltip[data-side="end"] > .tb-tooltip__arrow {
        inset-inline-end: calc(100% - var(--tb-tooltip-arrow-size) / 2);
        top: var(--tb-tooltip-arrow-along);
    }

    .tb-menu {
        display: inline-flex;
    }

    .tb-menu--full-width {
        display: flex;
    }

    .tb-menu--full-width > [data-part="trigger"] {
        flex: 1;
    }

    .tb-menu--full-width > .tb-menu__list {
        min-width: max(10rem, var(--tb-anchor-width, 0px));
    }

    /* The positioning script places the open menu and writes its room, so a long one scrolls instead of overflowing. */
    .tb-menu__list {
        box-sizing: border-box;
        min-width: 10rem;
        max-block-size: var(--tb-available-block-size, none);
        overflow-y: auto;
        margin: 0;
        padding: var(--tb-space-1);
        border: 1px solid var(--tb-border-subtle);
        border-radius: var(--tb-menu-radius, var(--tb-radius-md));
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-text);
        box-shadow: var(--tb-shadow-md);
    }

    .tb-menu__list:popover-open {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .tb-menu__item {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        box-sizing: border-box;
        min-height: var(--tb-menu-item-height, var(--tb-item-height));
        width: 100%;
        padding: var(--tb-space-1) var(--tb-space-3);
        border: none;
        border-radius: var(--tb-radius-sm);
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: var(--tb-line-height-tight);
        font-size: var(--tb-font-size-sm);
        text-align: start;
        cursor: pointer;
    }

    .tb-menu__item:hover,
    .tb-menu__item:focus-visible {
        background: var(--tb-color-hover);
    }

    .tb-menu__item:active:not([aria-disabled="true"]) {
        background: var(--tb-color-pressed);
    }

    .tb-menu__item:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-menu__item [data-part="chevron"] {
        margin-inline-start: auto;
    }

    .tb-menu__item [data-part="chevron"]:dir(rtl) {
        transform: scaleX(-1);
    }

    .tb-menu__item[aria-expanded="true"] {
        background: var(--tb-color-hover);
    }

    .tb-menu__item[aria-disabled="true"] {
        opacity: var(--tb-disabled-opacity);
        cursor: default;
    }

    a.tb-menu__item {
        text-decoration: none;
    }

    /* Checkbox and radio items keep a slot for their mark, so their text lines up whether or not they are chosen. */
    .tb-menu__indicator {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 1rem;
    }

    .tb-menu__item[role="menuitemradio"][aria-checked="true"] > .tb-menu__indicator::before {
        content: "";
        width: 0.4rem;
        height: 0.4rem;
        border-radius: var(--tb-radius-full);
        background: currentColor;
    }

    .tb-menu__group {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .tb-menu__group-label {
        padding: var(--tb-space-1) var(--tb-space-3);
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-xs);
        font-weight: var(--tb-font-weight-semibold);
    }

    .tb-menu__separator {
        height: 1px;
        margin-block: var(--tb-space-1);
        background: var(--tb-border-subtle);
    }

    @media (forced-colors: active) {
        .tb-menu__item[role="menuitemradio"][aria-checked="true"] > .tb-menu__indicator::before {
            background: CanvasText;
        }

        .tb-menu__separator {
            background: CanvasText;
        }
    }

    /* Native modals don't stop the page behind them from scrolling. */
    :root:has(dialog.tb-dialog:is(:modal, [data-layer="page"][data-backdrop]:not([data-leaving]))) {
        overflow: hidden;
    }

    .tb-popover {
        display: inline-block;
    }

    .tb-popover__panel {
        box-sizing: border-box;
        max-inline-size: min(24rem, calc(100vw - 2 * var(--tb-space-4)));
        max-block-size: var(--tb-available-block-size, none);
        overflow-y: auto;
        margin: 0;
        padding: var(--tb-space-4);
        border: 1px solid var(--tb-border-subtle);
        border-radius: var(--tb-popover-radius, var(--tb-radius-md));
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-text);
        box-shadow: var(--tb-shadow-md);
        font-family: var(--tb-font-family);
    }

    /* A focus scope with no controls takes focus itself, so it shows where focus went. */
    .tb-focus-scope:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-popover__panel:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-popover__title {
        margin: 0 0 var(--tb-space-2);
        font-size: var(--tb-font-size-md);
        font-weight: var(--tb-font-weight-semibold);
        line-height: var(--tb-line-height-tight);
    }

    .tb-dialog {
        box-sizing: border-box;
        width: min(calc(100vw - 2 * var(--tb-space-4)), var(--tb-dialog-width));
        max-height: calc(100vh - 2 * var(--tb-space-8));
        padding: 0;
        border: 1px solid var(--tb-border-subtle);
        border-radius: var(--tb-dialog-radius, var(--tb-radius-lg));
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
        box-shadow: var(--tb-shadow-lg);
    }

    .tb-dialog[open] {
        display: flex;
        flex-direction: column;
    }

    /* Kept out of the top layer, a dialog sits over the page by z-index, so other scripts' popups can open above it,
       and draws its own backdrop. */
    .tb-dialog[data-layer="page"] {
        position: fixed;
        inset: 0;
        z-index: var(--tb-dialog-z-index, 1100);
    }

    .tb-dialog[data-layer="page"][data-backdrop] {
        box-shadow: var(--tb-shadow-lg), 0 0 0 100vmax var(--tb-color-scrim);
    }

    .tb-dialog::backdrop {
        background: var(--tb-color-scrim);
        transition: opacity var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

    /* A dialog fades in as it opens and out before dialog.js closes it, without moving, so its box can be measured at
       once for dragging. Reduced motion skips both. */
    .tb-dialog {
        transition: opacity var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

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

        .tb-dialog[open]::backdrop {
            opacity: 0;
        }
    }

    .tb-dialog[data-leaving] {
        opacity: 0;
    }

    .tb-dialog[data-leaving]::backdrop {
        opacity: 0;
    }

    .tb-dialog__message {
        display: flex;
        gap: var(--tb-space-3);
        align-items: flex-start;
    }

    .tb-dialog__description {
        margin-block-end: var(--tb-space-3);
        color: var(--tb-color-text-muted);
    }

    /* The browser centers a dialog with auto margins; a fixed margin on one side moves it to that edge. */
    .tb-dialog--position-top,
    .tb-dialog--position-topstart,
    .tb-dialog--position-topend {
        margin-block: var(--tb-space-4) auto;
    }

    .tb-dialog--position-bottom,
    .tb-dialog--position-bottomstart,
    .tb-dialog--position-bottomend {
        margin-block: auto var(--tb-space-4);
    }

    .tb-dialog--position-start,
    .tb-dialog--position-topstart,
    .tb-dialog--position-bottomstart {
        margin-inline: var(--tb-space-4) auto;
    }

    .tb-dialog--position-end,
    .tb-dialog--position-topend,
    .tb-dialog--position-bottomend {
        margin-inline: auto var(--tb-space-4);
    }

    .tb-dialog--small {
        --tb-dialog-width: 24rem;
    }

    .tb-dialog--medium {
        --tb-dialog-width: 32rem;
    }

    .tb-dialog--large {
        --tb-dialog-width: 48rem;
    }

    .tb-dialog--extralarge {
        --tb-dialog-width: 64rem;
    }

    .tb-dialog--full {
        --tb-dialog-width: 100vw;
        max-width: 100vw;
        margin: 0;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    /* A minimized dialog shows only its header, at the offset the script gives it from the bottom-end corner. */
    .tb-dialog[data-window-state="minimized"] {
        --tb-dialog-tray-gap: var(--tb-space-2);
        --tb-dialog-tray-edge: var(--tb-space-4);
        width: min(18rem, 100% - 2 * var(--tb-dialog-tray-edge));
        height: fit-content;
        max-height: none;
        margin-block: auto calc(var(--tb-dialog-tray-edge) + var(--tb-dialog-tray-block, 0px));
        margin-inline: auto calc(var(--tb-dialog-tray-edge) + var(--tb-dialog-tray-inline, 0px));
    }

    .tb-dialog[data-window-state="minimized"] > [data-part="body"] {
        display: none;
    }

    .tb-dialog[data-window-state="minimized"] .tb-dialog__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Percentages, unlike vw and vh, leave out the scrollbar a page behind a non-modal dialog keeps. */
    .tb-dialog[data-window-state="maximized"] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }

    /* A moved or resized dialog keeps its place and size, apart from while it is minimized or maximized. */
    .tb-dialog[data-placed]:not([data-window-state="minimized"], [data-window-state="maximized"]) {
        inset: var(--tb-dialog-top) auto auto var(--tb-dialog-left);
        margin: 0;
    }

    .tb-dialog[data-sized]:not([data-window-state="minimized"], [data-window-state="maximized"]) {
        width: var(--tb-dialog-resized-width);
        max-width: none;
        height: var(--tb-dialog-resized-height);
        max-height: none;
    }

    /* The script keeps a dragged dialog inside the window; one the Move menu placed needs the usual limits for that. */
    .tb-dialog[data-sized]:not([data-placed], [data-window-state="minimized"], [data-window-state="maximized"]) {
        max-width: calc(100% - 2 * var(--tb-space-4));
        max-height: calc(100vh - 2 * var(--tb-space-8));
    }

    .tb-dialog--draggable:not([data-window-state="minimized"], [data-window-state="maximized"]) .tb-dialog__header {
        cursor: move;
        user-select: none;
        touch-action: none;
    }

    /* The Move menu sits in the header but is no drag handle. */
    .tb-dialog--draggable .tb-dialog__header .tb-menu__list {
        cursor: auto;
        user-select: auto;
    }

    /* A row of its own under the body, so the grip never covers the dialog's actions. */
    .tb-dialog__resize {
        align-self: flex-end;
    }

    .tb-dialog__resize > [data-part="trigger"] {
        cursor: nwse-resize;
        touch-action: none;
    }

    .tb-dialog__resize > [data-part="trigger"]:dir(rtl) {
        cursor: nesw-resize;
    }

    .tb-dialog__resize > [data-part="trigger"]:dir(rtl) svg {
        transform: scaleX(-1);
    }

    .tb-dialog:is([data-window-state="minimized"], [data-window-state="maximized"]) .tb-dialog__resize {
        display: none;
    }

    .tb-dialog__header {
        display: flex;
        align-items: center;
        gap: var(--tb-space-3);
        padding: var(--tb-space-3) var(--tb-space-3) var(--tb-space-3) var(--tb-space-5);
        border-block-end: 1px solid var(--tb-border-subtle);
    }

    .tb-dialog__title .tb-icon {
        vertical-align: -0.2em;
    }

    .tb-dialog__title {
        flex: 1 1 auto;
        margin: 0;
        font-size: var(--tb-font-size-lg);
        font-weight: var(--tb-font-weight-semibold);
        line-height: var(--tb-line-height-tight);
    }

    .tb-dialog__body {
        flex: 1 1 auto;
        overflow: auto;
        padding: var(--tb-space-5);
    }

    .tb-dialog__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--tb-space-2);
        margin: var(--tb-space-5) calc(-1 * var(--tb-space-5)) calc(-1 * var(--tb-space-5));
        padding: var(--tb-space-3) var(--tb-space-5);
        border-block-start: 1px solid var(--tb-border-subtle);
    }

    .tb-select__trigger {
        display: flex;
        align-items: center;
        min-height: 1lh;
        cursor: pointer;
        user-select: none;
    }

    .tb-field--disabled .tb-select__trigger,
    .tb-field--readonly .tb-select__trigger {
        cursor: default;
    }

    .tb-select__value,
    .tb-select__placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    .tb-select__chips {
        display: flex;
        flex-wrap: wrap;
        min-inline-size: 0;
        gap: var(--tb-space-1);
        padding-block: var(--tb-space-1);
    }

    .tb-select__chip {
        min-inline-size: 0;
        max-inline-size: 100%;
    }

    .tb-select__chip > .tb-chip__action {
        min-inline-size: 0;
    }

    /* A long label ends in an ellipsis, on a line tall enough that its box doesn't clip descenders. */
    .tb-select__chip .tb-chip__label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: var(--tb-line-height-tight);
    }

    .tb-select__group-label {
        padding: var(--tb-space-2) var(--tb-space-3) var(--tb-space-1);
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-xs);
        font-weight: var(--tb-font-weight-medium);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tb-select__chevron {
        pointer-events: none;
    }

    .tb-select__native {
        cursor: pointer;
    }

    /* The list is the popup, or a filterable select's popup holds the filter and the list, which scrolls. */
    .tb-select__listbox[popover],
    .tb-select__popup {
        box-sizing: border-box;
        min-width: var(--tb-anchor-width, 0px);
        margin: 0;
        border: 1px solid var(--tb-border-subtle);
        border-radius: var(--tb-radius-md);
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
        box-shadow: var(--tb-shadow-md);
    }

    .tb-select__listbox {
        max-height: min(20rem, 50vh);
        padding: var(--tb-space-1);
        overflow-y: auto;
    }

    .tb-select__popup {
        padding: 0;
        overflow: hidden;
    }

    .tb-select__filter {
        display: block;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: var(--tb-space-2) var(--tb-space-3);
        border: none;
        border-bottom: 1px solid var(--tb-border-subtle);
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: var(--tb-line-height-tight);
        font-size: var(--tb-font-size-sm);
    }

    .tb-select__filter:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    /* The status stays rendered while empty, so screen readers announce the text it gets. */
    .tb-select__no-results:empty {
        padding: 0;
    }

    .tb-select__option[hidden],
    .tb-select__group[hidden] {
        display: none;
    }

    .tb-select__option {
        display: flex;
        align-items: center;
        min-height: var(--tb-item-height);
        padding: var(--tb-space-1) var(--tb-space-3);
        border-radius: var(--tb-radius-sm);
        font-size: var(--tb-font-size-sm);
        cursor: pointer;
    }

    .tb-select__option[aria-selected="true"] {
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-select__check {
        flex: none;
        margin-inline-start: auto;
        padding-inline-start: var(--tb-space-2);
    }

    .tb-select__select-all {
        margin-block-end: var(--tb-space-1);
        border-block-end: 1px solid var(--tb-border-subtle);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
    }

    .tb-select__listbox .tb-select__option[data-active] {
        background: var(--tb-color-hover);
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-select__box {
        margin-inline-end: var(--tb-space-2);
    }

    .tb-select__option[aria-disabled="true"] {
        color: var(--tb-color-text-disabled);
        cursor: default;
    }

    .tb-field__control:has(> .tb-listbox) {
        align-items: stretch;
        padding: var(--tb-space-1);
    }

    .tb-listbox {
        box-sizing: border-box;
        max-block-size: calc(var(--tb-listbox-rows) * var(--tb-item-height));
        padding-block: 0;
        overflow-y: auto;
        font-size: var(--tb-font-size-sm);
    }

    .tb-listbox--native {
        max-block-size: none;
    }

    .tb-listbox:focus .tb-select__option[data-active] {
        background: var(--tb-color-hover);
    }

    .tb-listbox:focus-visible .tb-select__option[data-active] {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    /* A multiple listbox shows its choices in the boxes, so only a single one fills the chosen option. */
    .tb-listbox:not([aria-multiselectable="true"]) .tb-select__option[aria-selected="true"] {
        background: var(--tb-color-primary-subtle);
        color: var(--tb-color-primary-text);
    }

    .tb-listbox[aria-disabled="true"] .tb-select__option,
    .tb-listbox[aria-readonly="true"] .tb-select__option {
        cursor: default;
    }

    @media (forced-colors: active) {
        .tb-listbox:not([aria-multiselectable="true"]) .tb-select__option[aria-selected="true"] {
            forced-color-adjust: none;
            background: Highlight;
            color: HighlightText;
        }
    }

    .tb-toolbar {
        display: flex;
        align-items: center;
        gap: var(--tb-space-1);
        box-sizing: border-box;
        min-inline-size: 0;
        padding: var(--tb-space-1);
        color: var(--tb-color-text);
    }

    /* Content keeps its size, so a toolbar too narrow for it overflows and moves buttons into its menu instead. */
    .tb-toolbar > :not(.tb-spacer) {
        flex-shrink: 0;
    }

    .tb-toolbar--vertical {
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;
    }

    .tb-toolbar [data-overflowed],
    .tb-toolbar__overflow:not([data-shown]) {
        display: none;
    }

    .tb-toolbar__overflow {
        margin-inline-start: auto;
    }

    .tb-pagination__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--tb-space-1);
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--tb-color-text);
    }

    .tb-pagination__page,
    .tb-pagination__ellipsis {
        box-sizing: border-box;
        min-inline-size: var(--tb-button-height, var(--tb-control-height));
        padding-inline: var(--tb-space-2);
        font-variant-numeric: tabular-nums;
    }

    .tb-pagination--small .tb-pagination__page,
    .tb-pagination--small .tb-pagination__ellipsis {
        min-inline-size: var(--tb-control-height-sm);
    }

    .tb-pagination--large .tb-pagination__page,
    .tb-pagination--large .tb-pagination__ellipsis {
        min-inline-size: var(--tb-control-height-lg);
    }

    .tb-pagination__ellipsis {
        color: var(--tb-color-text-muted);
        text-align: center;
    }

    /* The arrows point left to right, so right-to-left text turns them around. */
    .tb-pagination:dir(rtl) .tb-pagination__step .tb-icon {
        transform: scaleX(-1);
    }

    .tb-pagination__jump {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
    }

    .tb-pagination__box {
        inline-size: 5rem;
    }

    @media (forced-colors: active) {
        .tb-pagination__page[aria-current="page"] {
            forced-color-adjust: none;
            border-color: Highlight;
            background: Highlight;
            color: HighlightText;
        }
    }

    .tb-table-of-contents {
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
    }

    .tb-table-of-contents__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* The line beside each link shows the section in view by its color and width, not color alone. */
    .tb-table-of-contents__link {
        display: block;
        padding-block: var(--tb-space-1);
        padding-inline: calc((var(--tb-table-of-contents-level) + 1) * var(--tb-space-3)) var(--tb-space-2);
        border-inline-start: 1px solid var(--tb-border-subtle);
        color: var(--tb-color-text-muted);
        text-decoration: none;
    }

    .tb-table-of-contents__link:hover {
        color: var(--tb-color-text);
    }

    .tb-table-of-contents__link:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(var(--tb-focus-ring-width) * -1);
    }

    .tb-table-of-contents__link[aria-current="location"] {
        border-inline-start: 3px solid var(--tb-color-primary);
        padding-inline-start: calc((var(--tb-table-of-contents-level) + 1) * var(--tb-space-3) - 2px);
        color: var(--tb-color-primary-text);
        font-weight: var(--tb-font-weight-medium);
    }

    @media (forced-colors: active) {
        .tb-table-of-contents__link[aria-current="location"] {
            border-color: Highlight;
        }
    }

    .tb-slider {
        --tb-slider-thumb: 1.125rem;
        --tb-slider-track: 0.25rem;
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
    }

    .tb-slider__label {
        font-size: var(--tb-font-size-sm);
        font-weight: var(--tb-font-weight-medium);
    }

    /* Native thumbs stay inside the track, so values are placed half a thumb in from each end. */
    .tb-slider__control {
        position: relative;
        display: flex;
        align-items: center;
        block-size: max(24px, var(--tb-slider-thumb));
    }

    .tb-slider__track {
        position: absolute;
        inset-inline: 0;
        block-size: var(--tb-slider-track);
        border-radius: var(--tb-radius-full);
        background: var(--tb-border-subtle);
    }

    .tb-slider__fill {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: calc(var(--tb-slider-thumb) / 2 + var(--tb-slider-to) * (100% - var(--tb-slider-thumb)));
        border-radius: inherit;
        background: var(--tb-color-primary);
    }

    .tb-slider--range .tb-slider__fill {
        inset-inline-start: calc(var(--tb-slider-thumb) / 2 + var(--tb-slider-from) * (100% - var(--tb-slider-thumb)));
        inline-size: calc((var(--tb-slider-to) - var(--tb-slider-from)) * (100% - var(--tb-slider-thumb)));
    }

    .tb-slider__input {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        margin: 0;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }

    .tb-slider__input::-webkit-slider-runnable-track {
        block-size: 100%;
        background: transparent;
    }

    .tb-slider__input::-moz-range-track {
        background: transparent;
    }

    .tb-slider__input::-webkit-slider-thumb {
        box-sizing: border-box;
        inline-size: var(--tb-slider-thumb);
        block-size: var(--tb-slider-thumb);
        border: 2px solid var(--tb-color-primary);
        border-radius: var(--tb-radius-full);
        appearance: none;
        background: var(--tb-color-surface);
        box-shadow: var(--tb-shadow-sm);
    }

    .tb-slider__input::-moz-range-thumb {
        box-sizing: border-box;
        inline-size: var(--tb-slider-thumb);
        block-size: var(--tb-slider-thumb);
        border: 2px solid var(--tb-color-primary);
        border-radius: var(--tb-radius-full);
        background: var(--tb-color-surface);
        box-shadow: var(--tb-shadow-sm);
    }

    .tb-slider__input:focus-visible {
        outline: none;
    }

    .tb-slider__input:focus-visible::-webkit-slider-thumb {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-slider__input:focus-visible::-moz-range-thumb {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    /* Two inputs share a range slider's track, so only their thumbs take the pointer. */
    .tb-slider--range .tb-slider__input {
        pointer-events: none;
    }

    .tb-slider--range .tb-slider__input::-webkit-slider-thumb {
        pointer-events: auto;
    }

    .tb-slider--range .tb-slider__input::-moz-range-thumb {
        pointer-events: auto;
    }

    .tb-slider__input--top {
        z-index: 1;
    }

    .tb-slider__value,
    .tb-slider__mark {
        position: absolute;
        inset-inline-start: calc(var(--tb-slider-thumb) / 2 + var(--tb-slider-at) * (100% - var(--tb-slider-thumb)));
        translate: -50%;
        font-size: var(--tb-font-size-xs);
        white-space: nowrap;
    }

    .tb-slider__value:dir(rtl),
    .tb-slider__mark:dir(rtl) {
        translate: 50%;
    }

    .tb-slider__value {
        inset-block-end: calc(100% + var(--tb-space-1));
        padding: 0 var(--tb-space-1);
        border-radius: var(--tb-radius-sm);
        background: var(--tb-color-neutral);
        color: var(--tb-color-on-neutral);
        pointer-events: none;
    }

    .tb-slider:has(.tb-slider__value) .tb-slider__control {
        margin-block-start: 1.5em;
    }

    .tb-slider__marks {
        position: relative;
        block-size: 1.25em;
        color: var(--tb-color-text-muted);
    }

    .tb-slider__mark::before {
        content: "";
        position: absolute;
        inset-block-end: 100%;
        inset-inline-start: 50%;
        inline-size: 1px;
        block-size: 0.375rem;
        background: currentColor;
    }

    .tb-slider--disabled .tb-slider__control {
        opacity: var(--tb-disabled-opacity);
    }

    .tb-slider--disabled .tb-slider__input {
        cursor: default;
    }

    /* A read-only slider's thumbs ignore the pointer, and read-only.js holds the keys. */
    .tb-slider__input[aria-readonly="true"] {
        pointer-events: none;
    }

    /* Specific enough to beat the range slider's thumbs, which take the pointer back. */
    .tb-slider .tb-slider__input[aria-readonly="true"]::-webkit-slider-thumb {
        pointer-events: none;
    }

    .tb-slider .tb-slider__input[aria-readonly="true"]::-moz-range-thumb {
        pointer-events: none;
    }

    .tb-slider--invalid .tb-slider__fill {
        background: var(--tb-color-danger-text);
    }

    /* Forced colors drop the drawn track and fill, so they take system colors to stay visible. */
    @media (forced-colors: active) {
        .tb-slider__track {
            background: CanvasText;
        }

        .tb-slider__fill {
            background: Highlight;
        }
    }

    .tb-splitter {
        display: flex;
        box-sizing: border-box;
        block-size: 100%;
        min-inline-size: 0;
        min-block-size: 0;
    }

    .tb-splitter--vertical {
        flex-direction: column;
    }

    .tb-splitter__pane {
        flex-shrink: 1;
        flex-basis: 0;
        min-inline-size: 0;
        min-block-size: 0;
        overflow: auto;
    }

    /* A collapsed pane keeps its content, but out of sight and out of the tab order. */
    .tb-splitter__pane--collapsed {
        overflow: hidden;
        visibility: hidden;
    }

    /* The pointer strip is wider than the 1px line but overlaps each pane by less than a scrollbar's width. */
    .tb-splitter__bar {
        position: relative;
        z-index: 1;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        inline-size: 9px;
        margin-inline: -4px;
    }

    .tb-splitter--vertical > .tb-splitter__bar {
        inline-size: auto;
        block-size: 9px;
        margin-inline: 0;
        margin-block: -4px;
    }

    .tb-splitter__separator {
        position: absolute;
        inset: 0;
        cursor: col-resize;
        touch-action: none;
    }

    .tb-splitter--vertical > .tb-splitter__bar > .tb-splitter__separator {
        cursor: row-resize;
    }

    /* The grip sits on the line's middle, and a drag from it resizes as the line does. It is kept to 24px across the
       line, the smallest target WCAG 2.5.8 allows, because it covers the middle of each pane's edge, scrollbar
       included. */
    .tb-splitter__grip > [data-part="trigger"] {
        position: relative;
        min-inline-size: 24px;
        inline-size: 24px;
        border: 1px solid var(--tb-border-subtle);
        background: var(--tb-color-surface);
        color: var(--tb-color-text-muted);
        cursor: col-resize;
        touch-action: none;
        user-select: none;
    }

    .tb-splitter--vertical > .tb-splitter__bar > .tb-splitter__grip > [data-part="trigger"] {
        inline-size: auto;
        min-inline-size: max(24px, calc(var(--tb-control-height) - 8px));
        block-size: 24px;
        cursor: row-resize;
    }

    .tb-splitter--vertical > .tb-splitter__bar > .tb-splitter__grip svg {
        rotate: 90deg;
    }

    .tb-splitter__separator::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 50%;
        inline-size: 1px;
        background: var(--tb-border-subtle);
        transition: background-color var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-splitter--vertical > .tb-splitter__bar > .tb-splitter__separator::before {
        inset-inline: 0;
        inset-block-start: 50%;
        inline-size: auto;
        block-size: 1px;
    }

    .tb-splitter__separator:hover::before,
    .tb-splitter__separator:focus-visible::before {
        background: var(--tb-color-primary);
        box-shadow: 0 0 0 1px var(--tb-color-primary);
    }

    .tb-splitter__separator:focus-visible {
        outline: none;
    }

    @media (forced-colors: active) {
        .tb-splitter__separator::before {
            background: CanvasText;
        }

        .tb-splitter__separator:hover::before,
        .tb-splitter__separator:focus-visible::before {
            background: Highlight;
            box-shadow: 0 0 0 1px Highlight;
        }
    }

    .tb-autocomplete__status,
    .tb-select__no-results {
        padding: var(--tb-space-2) var(--tb-space-3);
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-sm);
    }

    /* The fields stack with even spacing, so a form needs no layout of its own. */
    .tb-form {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-4);
    }

    .tb-tabs__list {
        display: flex;
        gap: var(--tb-space-1);
        overflow-x: auto;
        border-block-end: 1px solid var(--tb-border-subtle);
    }

    .tb-tabs__list--centered {
        justify-content: center;
    }

    .tb-tabs--vertical {
        display: flex;
    }

    .tb-tabs--vertical > .tb-tabs__list {
        flex-direction: column;
        flex: none;
        overflow: visible;
        border-block-end: none;
        border-inline-end: 1px solid var(--tb-border-subtle);
    }

    .tb-tabs--vertical > .tb-tabs__panel {
        flex: 1;
        min-width: 0;
        padding-block: 0;
    }

    .tb-tabs__tab {
        display: inline-flex;
        align-items: center;
        gap: var(--tb-space-2);
        flex: none;
        min-height: var(--tb-control-height);
        padding: var(--tb-control-padding-block) var(--tb-space-3);
        border: none;
        border-radius: var(--tb-radius-sm) var(--tb-radius-sm) 0 0;
        background: transparent;
        color: var(--tb-color-text-muted);
        font: inherit;
        line-height: var(--tb-line-height-tight);
        font-size: var(--tb-font-size-sm);
        font-weight: var(--tb-font-weight-medium);
        cursor: pointer;
        /* The selected tab's underline sits on the list's border. */
        box-shadow: inset 0 -2px 0 transparent;
        transition: color var(--tb-motion-duration-fast) var(--tb-motion-easing-standard),
            box-shadow var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-tabs__tab:hover:not(:disabled) {
        color: var(--tb-color-text);
    }

    .tb-tabs__tab[aria-selected="true"] {
        color: var(--tb-color-text);
    }

    /* Text and outlined lists underline the selected tab; the pill variants fill it instead. */
    :is(.tb-tabs--text, .tb-tabs--outlined) > .tb-tabs__list > .tb-tabs__tab[aria-selected="true"] {
        box-shadow: inset 0 calc(-1 * var(--tb-tabs-indicator-size, 2px)) 0
            var(--tb-tabs-indicator-color, var(--tb-color-primary));
    }

    /* Beside a vertical list, the selected tab's line runs down its inner edge instead. */
    .tb-tabs--vertical > .tb-tabs__list > .tb-tabs__tab {
        border-radius: 0;
        border-start-start-radius: var(--tb-radius-sm);
        border-end-start-radius: var(--tb-radius-sm);
        text-align: start;
    }

    .tb-tabs--vertical:is(.tb-tabs--text, .tb-tabs--outlined) > .tb-tabs__list
        > .tb-tabs__tab[aria-selected="true"] {
        box-shadow: inset calc(-1 * var(--tb-tabs-indicator-size, 2px)) 0 0
            var(--tb-tabs-indicator-color, var(--tb-color-primary));
    }

    .tb-tabs--vertical:is(.tb-tabs--text, .tb-tabs--outlined) > .tb-tabs__list
        > .tb-tabs__tab[aria-selected="true"]:dir(rtl) {
        box-shadow: inset var(--tb-tabs-indicator-size, 2px) 0 0
            var(--tb-tabs-indicator-color, var(--tb-color-primary));
    }

    /* Soft and filled tabs are pills with no line under the list; the selected one takes the variant's fill. */
    :is(.tb-tabs--soft, .tb-tabs--filled) > .tb-tabs__list {
        border: none;
    }

    :is(.tb-tabs--soft, .tb-tabs--filled) > .tb-tabs__list > .tb-tabs__tab {
        border-radius: var(--tb-radius-full);
    }

    .tb-tabs--soft > .tb-tabs__list > .tb-tabs__tab:hover:not(:disabled, [aria-selected="true"]),
    .tb-tabs--filled > .tb-tabs__list > .tb-tabs__tab:hover:not(:disabled, [aria-selected="true"]) {
        background: var(--tb-color-hover);
    }

    .tb-tabs--soft > .tb-tabs__list > .tb-tabs__tab[aria-selected="true"] {
        background: var(--tb-color-primary-subtle);
        color: var(--tb-color-primary-text);
    }

    .tb-tabs--filled > .tb-tabs__list > .tb-tabs__tab[aria-selected="true"] {
        background: var(--tb-color-primary);
        color: var(--tb-color-on-primary);
    }

    @media (forced-colors: active) {
        :is(.tb-tabs--soft, .tb-tabs--filled) > .tb-tabs__list > .tb-tabs__tab[aria-selected="true"] {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }
    }

    .tb-tabs__tab:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    /* Forced colors drop shadows, so the underline is a border, inside the tab where the list can't clip it. */
    @media (forced-colors: active) {
        :is(.tb-tabs--text, .tb-tabs--outlined) > .tb-tabs__list > .tb-tabs__tab[aria-selected="true"] {
            border-block-end: 2px solid Highlight;
            padding-block-end: calc(var(--tb-space-2) - 2px);
        }

        .tb-tabs--vertical:is(.tb-tabs--text, .tb-tabs--outlined) > .tb-tabs__list
            > .tb-tabs__tab[aria-selected="true"] {
            border-block-end: none;
            border-inline-end: 2px solid Highlight;
            padding-block-end: var(--tb-space-2);
            padding-inline-end: calc(var(--tb-space-3) - 2px);
        }
    }

    .tb-tabs__tab:disabled {
        color: var(--tb-color-text-disabled);
        cursor: default;
    }

    .tb-tabs__panel {
        padding-block: var(--tb-space-4);
    }

    .tb-tabs__panel:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-accordion__item {
        border-block-end: 1px solid var(--tb-border-subtle);
    }

    .tb-accordion__heading {
        margin: 0;
        font: inherit;
    }

    .tb-accordion__header {
        display: flex;
        align-items: center;
    }

    .tb-accordion__header > .tb-accordion__heading {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tb-accordion__actions {
        display: flex;
        align-items: center;
        gap: var(--tb-space-1);
        padding-inline: var(--tb-space-1) var(--tb-space-2);
    }

    .tb-accordion__trigger {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        box-sizing: border-box;
        width: 100%;
        min-height: var(--tb-row-height);
        padding: var(--tb-control-padding-block) var(--tb-space-3);
        border: none;
        background: transparent;
        color: var(--tb-color-text);
        font: inherit;
        line-height: var(--tb-line-height-tight);
        font-weight: var(--tb-font-weight-medium);
        text-align: start;
        cursor: pointer;
    }

    .tb-accordion__trigger:hover:not(:disabled) {
        background: var(--tb-color-hover);
    }

    .tb-accordion__trigger:active:not(:disabled) {
        background: var(--tb-color-pressed);
    }

    .tb-accordion__trigger:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-accordion__trigger:disabled {
        color: var(--tb-color-text-disabled);
        cursor: default;
    }

    .tb-accordion__title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tb-accordion__chevron {
        color: var(--tb-color-text-muted);
        transition: transform var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

    /* Only the item's own chevron turns, not those of items nested in its panel. */
    .tb-accordion__item--expanded > :is(.tb-accordion__heading, .tb-accordion__header) .tb-accordion__chevron {
        transform: rotate(180deg);
    }

    /* A closed panel's row shrinks to nothing, so opening and closing can animate; it hides once it has closed. */
    .tb-accordion__panel {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows var(--tb-motion-duration-normal) var(--tb-motion-easing-standard),
            visibility 0s linear var(--tb-motion-duration-normal);
    }

    .tb-accordion__item--expanded > .tb-accordion__panel {
        grid-template-rows: 1fr;
        visibility: visible;
        transition-delay: 0s;
    }

    .tb-accordion__clip {
        min-block-size: 0;
        overflow: hidden;
    }

    .tb-accordion__body {
        padding: var(--tb-space-2) var(--tb-space-3) var(--tb-space-4);
    }

    .tb-toaster {
        position: fixed;
        inset: auto;
        width: min(calc(100vw - 2 * var(--tb-space-4)), 22rem);
        margin: var(--tb-space-4);
        padding: 0;
        overflow: visible;
        border: 0;
        background: transparent;
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
        /* Only the toasts take clicks; the gaps between them don't cover the page. */
        pointer-events: none;
    }

    .tb-toaster--topstart,
    .tb-toaster--topcenter,
    .tb-toaster--topend {
        inset-block-start: 0;
    }

    .tb-toaster--bottomstart,
    .tb-toaster--bottomcenter,
    .tb-toaster--bottomend {
        inset-block-end: 0;
    }

    .tb-toaster--topstart,
    .tb-toaster--bottomstart {
        inset-inline-start: 0;
    }

    .tb-toaster--topend,
    .tb-toaster--bottomend {
        inset-inline-end: 0;
    }

    .tb-toaster--topcenter,
    .tb-toaster--bottomcenter {
        inset-inline: 0;
        margin-inline: auto;
    }

    .tb-toaster__list {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tb-toast {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        padding: var(--tb-space-2) var(--tb-space-2) var(--tb-space-2) var(--tb-space-4);
        border: 1px solid var(--tb-border-subtle);
        border-inline-start: 4px solid var(--tb-toast-accent);
        border-radius: var(--tb-radius-md);
        background: var(--tb-color-surface-raised);
        box-shadow: var(--tb-shadow-lg);
        font-size: var(--tb-font-size-sm);
        line-height: var(--tb-line-height-normal);
        pointer-events: auto;
        transition: opacity var(--tb-motion-duration-normal) var(--tb-motion-easing-standard),
            translate var(--tb-motion-duration-normal) var(--tb-motion-easing-standard);
    }

    /* A new toast fades and slides in; a closed one fades out while the host keeps it. Reduced motion skips both. */
    @starting-style {
        .tb-toast {
            opacity: 0;
            translate: 0 -0.5rem;
        }
    }

    .tb-toast[data-leaving] {
        opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
        .tb-toast[data-leaving] {
            display: none;
        }
    }

    .tb-toast__icon {
        color: var(--tb-toast-accent);
    }

    .tb-toast__body {
        flex: 1 1 auto;
        min-width: 0;
        padding-block: var(--tb-space-1);
    }

    .tb-toast__title {
        font-weight: var(--tb-font-weight-semibold);
    }

    .tb-toast--primary {
        --tb-toast-accent: var(--tb-color-primary-text);
    }

    .tb-toast--neutral {
        --tb-toast-accent: var(--tb-color-neutral-text);
    }

    .tb-toast--success {
        --tb-toast-accent: var(--tb-color-success-text);
    }

    .tb-toast--warning {
        --tb-toast-accent: var(--tb-color-warning-text);
    }

    .tb-toast--danger {
        --tb-toast-accent: var(--tb-color-danger-text);
    }

    .tb-toast--info {
        --tb-toast-accent: var(--tb-color-info-text);
    }

    .tb-file-upload__zone,
    .tb-file-upload__button {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--tb-space-2);
        border: 1px dashed var(--tb-border-strong);
        border-radius: var(--tb-radius-md);
        color: var(--tb-color-text-muted);
        text-align: center;
    }

    .tb-file-upload__zone {
        min-block-size: 6rem;
        padding: var(--tb-space-4);
    }

    .tb-file-upload__button {
        align-self: flex-start;
        min-block-size: var(--tb-control-height);
        padding-inline: var(--tb-space-4);
        border-style: solid;
        color: var(--tb-color-text);
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-field:not(.tb-field--disabled, .tb-field--readonly) > .tb-file-upload__zone:hover,
    .tb-field:not(.tb-field--disabled, .tb-field--readonly) > .tb-file-upload__button:hover,
    .tb-file-upload__zone[data-dragging] {
        border-color: var(--tb-color-primary);
        background: var(--tb-color-primary-subtle);
        color: var(--tb-color-primary-text);
    }

    .tb-file-upload__zone:has(.tb-file-upload__input:focus-visible),
    .tb-file-upload__button:has(.tb-file-upload__input:focus-visible) {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    /* The input covers the zone unseen, so clicks and dropped files land on it while the zone shows the prompt. */
    .tb-file-upload__input {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        opacity: 0;
        cursor: pointer;
    }

    /* The prompt sits beside the disabled input rather than in it, so it stays readable and the zone fades instead. */
    .tb-field--disabled .tb-file-upload__zone,
    .tb-field--disabled .tb-file-upload__button,
    .tb-field--readonly .tb-file-upload__zone,
    .tb-field--readonly .tb-file-upload__button {
        border-color: var(--tb-border-subtle);
        background: var(--tb-color-surface-sunken);
        color: var(--tb-color-text-muted);
    }

    .tb-file-upload__input:disabled {
        cursor: not-allowed;
    }

    /* A static page has no file list, so the browser's own input shows what was chosen, on its own: the zone
       around it can't take a click or a drop without the input covering it. */
    .tb-file-upload__input[data-static] {
        position: static;
        inline-size: auto;
        block-size: auto;
        opacity: 1;
    }

    .tb-file-upload__zone:has(> [data-static]),
    .tb-file-upload__button:has(> [data-static]) {
        min-block-size: 0;
        padding: 0;
        border: none;
    }

    .tb-file-upload__zone:has(> [data-static]) > .tb-file-upload__prompt,
    .tb-file-upload__button:has(> [data-static]) > .tb-file-upload__prompt {
        display: none;
    }

    .tb-file-upload__files {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tb-file-upload__file {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
    }

    .tb-file-upload__name {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tb-file-upload__size {
        color: var(--tb-color-text-muted);
    }

    .tb-file-upload__clear {
        align-self: flex-start;
    }

    @media (forced-colors: active) {
        .tb-file-upload__zone[data-dragging] {
            border-color: Highlight;
        }
    }

    /* A table and a data grid share their look; the grid adds sorting, selection and pages around it. */
    .tb-table,
    .tb-data-grid__table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
        font-variant-numeric: tabular-nums;
    }

    /* A grid shares the table's cell rules, so its own row-height hook feeds the table's. */
    .tb-data-grid {
        --tb-table-row-height: var(--tb-data-grid-row-height, var(--tb-row-height));
    }

    /* :where adds no weight for th/td, so a later cell class, such as its alignment, overrides these. */
    .tb-table :where(th, td),
    .tb-data-grid__table :where(th, td) {
        box-sizing: border-box;
        height: var(--tb-table-row-height, var(--tb-row-height));
        padding: var(--tb-space-1) var(--tb-space-3);
        border-block-end: 1px solid var(--tb-border-subtle);
        text-align: start;
        vertical-align: middle;
    }

    .tb-table th,
    .tb-data-grid__table th {
        background: var(--tb-color-surface);
        color: var(--tb-color-text-muted);
        font-weight: var(--tb-font-weight-semibold);
        white-space: nowrap;
    }

    .tb-table tbody th {
        color: var(--tb-color-text);
        font-weight: var(--tb-font-weight-medium);
    }

    .tb-table--small :is(th, td),
    .tb-data-grid--small .tb-data-grid__table :is(th, td) {
        height: max(1.5rem, calc(var(--tb-table-row-height, var(--tb-row-height)) - 0.75rem));
        padding-block: 0;
    }

    .tb-table--large :is(th, td),
    .tb-data-grid--large .tb-data-grid__table :is(th, td) {
        height: calc(var(--tb-table-row-height, var(--tb-row-height)) + 0.5rem);
    }

    /* A grid's stripe yields to hover, press and selection. A virtualized grid's rows come and go and share their
       body with spacer rows, so each row says whether it is striped. */
    .tb-table--striped tbody tr:nth-child(even),
    .tb-data-grid--striped:where(:not(.tb-data-grid--virtual)) :where(.tb-data-grid__row:nth-child(even)),
    .tb-data-grid--striped :where(.tb-data-grid__row--stripe) {
        --tb-data-grid-row-shade: var(--tb-color-surface-sunken);
        background: var(--tb-color-surface-sunken);
    }

    .tb-data-grid__row:hover {
        --tb-data-grid-row-shade: var(--tb-color-hover);
        background: var(--tb-color-hover);
    }

    .tb-data-grid__row:active:not(.tb-data-grid__row--selected) {
        --tb-data-grid-row-shade: var(--tb-color-pressed);
        background: var(--tb-color-pressed);
    }

    .tb-data-grid__row--selected,
    .tb-data-grid__row--selected:hover {
        --tb-data-grid-row-shade: var(--tb-color-primary-subtle);
        background: var(--tb-color-primary-subtle);
    }

    .tb-data-grid__scroll {
        overflow: auto;
    }

    /* Rows that scroll in a set height keep the header and its filters in view, above the rows and their pinned
       cells. */
    .tb-data-grid--scrolls thead {
        position: sticky;
        inset-block-start: 0;
        z-index: 2;
    }

    /* A pinned cell stays in view while the rows scroll sideways, so it hides the cells passing under it. */
    .tb-data-grid__table [data-pinned] {
        position: sticky;
        z-index: 1;
    }

    /* A row's shade may be see-through, so a pinned cell lays it over the surface. */
    .tb-data-grid__row > [data-pinned] {
        background: linear-gradient(var(--tb-data-grid-row-shade, transparent),
            var(--tb-data-grid-row-shade, transparent)), var(--tb-color-surface);
    }

    /* The last cell pinned at the start and the first pinned at the end draw a line where the others pass under. */
    .tb-data-grid__table [data-pinned="start"]:not(:has(+ [data-pinned="start"])) {
        border-inline-end: 1px solid var(--tb-border-subtle);
    }

    .tb-data-grid__table :not([data-pinned="end"]) + [data-pinned="end"] {
        border-inline-start: 1px solid var(--tb-border-subtle);
    }

    .tb-data-grid__filters td {
        background: var(--tb-color-surface);
    }

    /* A cell's field fills the width its column already has, so the column doesn't widen as an edit opens. */
    .tb-data-grid__editor {
        contain: inline-size;
    }

    .tb-data-grid__editor > .tb-field {
        inline-size: 100%;
        min-inline-size: 0;
    }

    /* A row's Save and Cancel sit under its last cell. */
    .tb-data-grid__row-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--tb-space-1);
        margin-block-start: var(--tb-space-1);
    }

    .tb-data-grid__row-error {
        margin-inline-end: auto;
        color: var(--tb-color-danger-text);
    }

    .tb-data-grid__filter > .tb-field {
        inline-size: 100%;
        min-inline-size: 8rem;
    }

    /* The menu sits in a header, so it starts its text afresh rather than taking the column's alignment. */
    .tb-data-grid__filter-menu {
        display: inline-flex;
        margin-inline-start: var(--tb-space-1);
        text-align: start;
        vertical-align: middle;
    }

    .tb-data-grid__header[data-filtered] .tb-data-grid__filter-menu .tb-icon-button {
        color: var(--tb-color-primary-text);
    }

    .tb-data-grid__filter-form {
        display: grid;
        gap: var(--tb-space-3);
        min-inline-size: 15rem;
        font-weight: var(--tb-font-weight-regular);
        white-space: normal;
    }

    .tb-data-grid__filter-actions {
        display: flex;
        justify-content: flex-end;
        gap: var(--tb-space-2);
    }

    /* A range shows two dates side by side. */
    .tb-data-grid__filter--date > .tb-field {
        min-inline-size: 15rem;
    }

    .tb-table--sticky-header thead th {
        position: sticky;
        inset-block-start: var(--tb-table-sticky-top, 0);
        z-index: 1;
    }

    .tb-data-grid__header--center,
    .tb-data-grid__cell--center {
        text-align: center;
    }

    .tb-data-grid__header--end,
    .tb-data-grid__cell--end {
        text-align: end;
    }

    .tb-data-grid__header[aria-sort],
    .tb-data-grid__header:has(.tb-data-grid__sort-icon) {
        color: var(--tb-color-text);
    }

    /* At least the 24px target WCAG 2.5.8 asks for, even in a small, compact grid. */
    .tb-data-grid__sort {
        display: inline-flex;
        align-items: center;
        min-block-size: 24px;
        gap: var(--tb-space-1);
        padding: 0;
        border: none;
        border-radius: var(--tb-radius-sm);
        background: none;
        color: inherit;
        font: inherit;
        line-height: var(--tb-line-height-tight);
        cursor: pointer;
    }

    .tb-data-grid__sort:hover {
        color: var(--tb-color-text);
        text-decoration: underline;
    }

    /* A grid's cells take focus themselves, and the ring sits inside them so neighbors don't cover it. */
    .tb-data-grid__table[role="grid"] :is(td, th):focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-data-grid__sort:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-data-grid__sort-order {
        font-size: var(--tb-font-size-xs);
    }

    .tb-data-grid__select {
        width: 2.75rem;
        text-align: center;
    }

    /* A grid whose rows move holds its drop reason, placed below the row it is about. */
    .tb-data-grid:has(> .tb-sortable__reason) {
        position: relative;
    }

    .tb-data-grid__handle {
        width: 2.75rem;
        padding-block: 0;
        text-align: center;
    }

    .tb-data-grid__row[data-dragging] {
        opacity: 0.5;
    }

    .tb-data-grid__row[data-drop] {
        --tb-sortable-drop: var(--tb-color-primary);
    }

    .tb-data-grid__row[data-drop-refused] {
        --tb-sortable-drop: var(--tb-color-danger-text);
        cursor: not-allowed;
    }

    /* A table row draws no shadow of its own, so its cells draw the line. */
    .tb-data-grid__row[data-drop="before"] > td {
        box-shadow: inset 0 2px 0 var(--tb-sortable-drop);
    }

    .tb-data-grid__row[data-drop="after"] > td {
        box-shadow: inset 0 -2px 0 var(--tb-sortable-drop);
    }

    .tb-data-grid__row[data-drop][data-drop-refused] > td {
        box-shadow: none;
        border-block: 2px dashed var(--tb-sortable-drop);
    }

    /* In single selection a row's radio stays the browser's own; the checkboxes are drawn like every other box. */
    .tb-data-grid__check[type="radio"] {
        width: 1rem;
        height: 1rem;
        margin: 0;
        accent-color: var(--tb-color-primary);
        vertical-align: middle;
    }

    .tb-data-grid__check.tb-checkbox__input {
        margin-inline: auto;
    }

    .tb-data-grid__check:disabled {
        opacity: var(--tb-disabled-opacity);
        cursor: default;
    }

    .tb-data-grid__toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--tb-space-2);
        padding-block-end: var(--tb-space-2);
    }

    .tb-data-grid__group-by.tb-field {
        min-inline-size: 14rem;
    }

    /* A group's heading is a band across the rows, set further in for each group it sits in. */
    .tb-data-grid__group-cell {
        padding-inline-start: calc(var(--tb-space-2) + var(--tb-data-grid-group-level, 0) * var(--tb-space-5));
        background: var(--tb-color-surface-sunken);
        font-weight: var(--tb-font-weight-semibold);
    }

    /* The heading's button stays in view at the start while the rows scroll sideways. */
    .tb-data-grid__group-toggle {
        position: sticky;
        inset-inline-start: var(--tb-space-2);
        display: inline-flex;
        align-items: center;
        gap: var(--tb-space-2);
        min-block-size: 24px;
        padding: 0 var(--tb-space-1);
        border: none;
        border-radius: var(--tb-radius-sm);
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }

    .tb-data-grid__group-toggle:hover {
        background: var(--tb-color-hover);
    }

    .tb-data-grid__group-toggle:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-data-grid__group-chevron {
        transition: transform var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    /* A closed group's chevron points toward the reading direction's end; an open one points down either way. */
    .tb-data-grid__group-chevron:dir(rtl) {
        transform: scaleX(-1);
    }

    .tb-data-grid__group-toggle[aria-expanded="true"] > .tb-data-grid__group-chevron {
        transform: rotate(90deg);
    }

    .tb-data-grid__group-count {
        color: var(--tb-color-text-muted);
        font-weight: var(--tb-font-weight-regular);
    }

    .tb-data-grid__status td {
        padding-block: var(--tb-space-6);
        color: var(--tb-color-text-muted);
        text-align: center;
    }

    .tb-data-grid--loading .tb-data-grid__row {
        opacity: 0.55;
    }

    .tb-data-grid__pager {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--tb-space-2) var(--tb-space-4);
        padding-block: var(--tb-space-2);
    }

    .tb-data-grid__summary {
        margin-inline-end: auto;
        color: var(--tb-color-text-muted);
        font-size: var(--tb-font-size-sm);
    }

    .tb-data-grid__page-size.tb-field {
        flex-direction: row;
        align-items: center;
        gap: var(--tb-space-2);
    }

    @media (forced-colors: active) {
        .tb-data-grid__row--selected {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .tb-data-grid__row[data-drop="before"] > td {
            border-block-start: 2px solid Highlight;
        }

        .tb-data-grid__row[data-drop="after"] > td {
            border-block-end: 2px solid Highlight;
        }

        .tb-data-grid__row[data-drop-refused] > td {
            border-style: dashed;
        }
    }

    .tb-tree {
        --tb-tree-indent: 1.25rem;
        position: relative;
        display: flex;
        flex-direction: column;
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
    }

    /* Narrow panels keep deep rows readable by indenting less. */
    @container (max-width: 16rem) {
        .tb-tree {
            --tb-tree-indent: 0.75rem;
        }
    }

    .tb-tree__group {
        display: flex;
        flex-direction: column;
    }

    .tb-tree__group[hidden] {
        display: none;
    }

    .tb-tree__item {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--tb-space-1);
        min-block-size: var(--tb-tree-item-height, var(--tb-item-height));
        padding-inline: calc(var(--tb-tree-level) * var(--tb-tree-indent)) var(--tb-space-2);
        border-radius: var(--tb-tree-item-radius, var(--tb-radius-sm));
        cursor: default;
        outline: none;
    }

    /* Every row of a virtualized tree is one size, so a spacer can stand in for the rows it leaves out. */
    .tb-tree--virtual {
        overflow-y: auto;
    }

    .tb-tree--virtual > .tb-tree__item {
        flex: none;
        box-sizing: border-box;
        block-size: var(--tb-tree-row-size);
        min-block-size: 0;
    }

    .tb-tree__spacer {
        flex: none;
        block-size: calc(var(--tb-tree-gap) * var(--tb-tree-row-size));
    }

    .tb-tree__item:hover:not(.tb-tree__item--status) {
        background: var(--tb-color-hover);
    }

    .tb-tree__item:active:not(.tb-tree__item--status, .tb-tree__item--selected, [aria-disabled="true"]) {
        background: var(--tb-color-pressed);
    }

    .tb-tree__item:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-tree__item--selected,
    .tb-tree__item--selected:hover {
        background: var(--tb-color-primary-subtle);
        color: var(--tb-color-primary-text);
    }

    .tb-tree__item[aria-disabled="true"]:not(.tb-tree__item--status),
    .tb-tree--disabled > .tb-tree__item {
        color: var(--tb-color-text-disabled);
    }

    .tb-tree__item--match > .tb-tree__content > .tb-tree__text {
        font-weight: var(--tb-font-weight-medium);
    }

    /* Every row keeps the toggle's room, so labels line up whether or not a row has children. */
    .tb-tree__toggle {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        cursor: pointer;
    }

    .tb-tree__chevron {
        transition: transform var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    /* A closed row's chevron points toward the reading direction's end; an open one points down either way. */
    .tb-tree__chevron:dir(rtl) {
        transform: scaleX(-1);
    }

    .tb-tree__item[aria-expanded="true"] > .tb-tree__toggle > .tb-tree__chevron {
        transform: rotate(90deg);
    }

    .tb-tree__check {
        cursor: pointer;
    }

    .tb-tree__content {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: var(--tb-space-2);
        min-width: 0;
    }

    .tb-tree__text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tb-tree__end {
        display: flex;
        flex: none;
        align-items: center;
        gap: var(--tb-space-1);
    }

    /* A drag lands before, after or inside the row under the pointer; a place it can't land shows the danger color. */
    .tb-tree__item[data-draggable] {
        -webkit-touch-callout: none;
        user-select: none;
    }

    .tb-tree__item[data-dragging] {
        opacity: 0.5;
    }


    .tb-tree__item[data-drop] {
        --tb-tree-drop: var(--tb-color-primary);
    }

    .tb-tree__item[data-drop-refused] {
        --tb-tree-drop: var(--tb-color-danger-text);
        cursor: not-allowed;
    }

    .tb-tree__item[data-drop="before"] {
        box-shadow: inset 0 2px 0 var(--tb-tree-drop);
    }

    .tb-tree__item[data-drop="after"] {
        box-shadow: inset 0 -2px 0 var(--tb-tree-drop);
    }

    .tb-tree__item[data-drop="inside"] {
        box-shadow: inset 0 0 0 2px var(--tb-tree-drop);
    }

    /* A place the drop is refused is dashed, so it doesn't rely on its color. */
    .tb-tree__item[data-drop][data-drop-refused] {
        box-shadow: none;
        outline: 2px dashed var(--tb-tree-drop);
        outline-offset: -2px;
    }

    .tb-tree__drop-reason {
        position: absolute;
        inset-inline-start: var(--tb-space-2);
        z-index: 1;
        padding: var(--tb-space-1) var(--tb-space-2);
        border-radius: var(--tb-radius-sm);
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-danger-text);
        box-shadow: var(--tb-shadow-md);
        font-size: var(--tb-font-size-xs);
        pointer-events: none;
    }

    /* The insert slot sits on the row's lower edge, or the first row's upper one, where the row's content starts. It
       overlaps the rows on both sides, so until the pointer reaches the edge, the clip leaves it only a thin band
       there, which the rows' padding keeps clear of their content; once shown, all of it takes clicks. */
    .tb-tree--inserts .tb-tree__item {
        box-sizing: border-box;
        padding-block: 0.25rem;
    }

    .tb-tree__insert {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: calc(var(--tb-tree-level) * var(--tb-tree-indent) + 1.5rem + var(--tb-space-2));
        z-index: 1;
        display: flex;
        translate: 0 50%;
        opacity: 0;
        clip-path: inset(calc(50% - 0.25rem) 0);
        transition: opacity var(--tb-motion-duration-fast) var(--tb-motion-easing-standard);
    }

    .tb-tree__insert[data-edge="start"] {
        inset-block: 0 auto;
        translate: 0 -50%;
    }

    .tb-tree__insert:hover,
    .tb-tree__insert:focus-within {
        opacity: 1;
        clip-path: none;
    }

    /* Where nothing can hover, a hidden slot takes no taps. With any touch screen, the focused row's slots show, since a
       tap focuses a row; a touch laptop's mouse still finds the others on the edge, so a finger there can too. */
    @media (hover: none) {
        .tb-tree__insert {
            pointer-events: none;
        }
    }

    @media (hover: none), (any-pointer: coarse) {
        .tb-tree__item:focus > .tb-tree__insert,
        .tb-tree__insert:focus-within {
            opacity: 1;
            clip-path: none;
            pointer-events: auto;
        }
    }

    /* While a drag runs, the slots let the pointer through to the rows, in a tree inside a row too, which the drag
       passes over anyway. */
    .tb-tree[data-dragging] .tb-tree__insert {
        pointer-events: none;
    }

    .tb-tree__item--status {
        color: var(--tb-color-text-muted);
    }

    .tb-tree__empty {
        padding: var(--tb-space-2);
        color: var(--tb-color-text-muted);
    }

    @media (forced-colors: active) {
        .tb-tree__item--selected {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .tb-tree__item[data-drop="before"] {
            border-block-start: 2px solid Highlight;
        }

        .tb-tree__item[data-drop="after"] {
            border-block-end: 2px solid Highlight;
        }

        .tb-tree__item[data-drop="inside"] {
            outline: 2px solid Highlight;
            outline-offset: -2px;
        }

        .tb-tree__item[data-drop-refused] {
            border-style: dashed;
        }
    }

    .tb-date-range__boxes {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: var(--tb-space-2);
        min-width: 0;
    }

    .tb-date-range__input {
        width: 0;
    }

    .tb-date-range__dash {
        color: var(--tb-color-text-muted);
    }

    .tb-date-range__panel {
        box-sizing: border-box;
        max-width: calc(100vw - 2 * var(--tb-space-2));
        max-block-size: var(--tb-available-block-size, none);
        overflow-y: auto;
        margin: 0;
        padding: var(--tb-space-3);
        border: 1px solid var(--tb-border-subtle);
        border-radius: var(--tb-radius-md);
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-text);
        font-family: var(--tb-font-family);
        font-size: var(--tb-font-size-sm);
        box-shadow: var(--tb-shadow-md);
    }

    .tb-date-range__panel:popover-open {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tb-space-3);
    }

    .tb-date-range__presets {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--tb-space-1);
        padding-inline-end: var(--tb-space-3);
        border-inline-end: 1px solid var(--tb-border-subtle);
    }

    .tb-date-range__calendar {
        position: relative;
    }

    /* The month buttons sit level with the month titles, at either end. */
    .tb-date-range__nav {
        position: absolute;
        inset-inline: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    .tb-date-range__nav > * {
        pointer-events: auto;
    }

    .tb-date-range__flip:dir(rtl) {
        transform: scaleX(-1);
    }

    .tb-date-range__months {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tb-space-4);
    }

    .tb-date-range__title {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem;
        font-weight: var(--tb-font-weight-semibold);
    }

    .tb-date-range__grid {
        border-collapse: collapse;
    }

    .tb-date-range__grid th {
        width: calc(var(--tb-control-height) - 0.25rem);
        padding-block: var(--tb-space-1);
        color: var(--tb-color-text-muted);
        font-weight: var(--tb-font-weight-regular);
    }

    .tb-date-range__grid td {
        padding: 0;
    }

    .tb-date-range__day {
        width: calc(var(--tb-control-height) - 0.25rem);
        height: calc(var(--tb-control-height) - 0.25rem);
        padding: 0;
        border: 1px solid transparent;
        border-radius: var(--tb-radius-sm);
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: var(--tb-line-height-tight);
        cursor: pointer;
    }

    /* Days in or previewing the range keep their own colors under the pointer. */
    .tb-date-range__day:hover:not([aria-disabled="true"], .tb-date-range__day--selected, .tb-date-range__day--start,
        .tb-date-range__day--end, [data-preview]) {
        background: var(--tb-color-hover);
    }

    .tb-date-range__day:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: calc(-1 * var(--tb-focus-ring-width));
    }

    .tb-date-range__day--today {
        border-color: var(--tb-border-strong);
    }

    .tb-date-range__day--selected,
    .tb-date-range__day[data-preview] {
        border-radius: 0;
        background: var(--tb-color-primary-subtle);
        color: var(--tb-color-primary-text);
    }

    .tb-date-range__day--start,
    .tb-date-range__day--end {
        border-radius: var(--tb-radius-sm);
        background: var(--tb-color-primary);
        color: var(--tb-color-on-primary);
    }

    .tb-date-range__day[aria-disabled="true"] {
        color: var(--tb-color-text-disabled);
        text-decoration: line-through;
        cursor: not-allowed;
    }

    /* A see-through color shows over a checkerboard, so its opacity can be seen. */
    .tb-color-picker__preview,
    .tb-color-picker__swatch,
    .tb-color-picker__slider--alpha {
        --tb-color-picker-checks: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 8px 8px;
    }

    .tb-color-picker__preview {
        flex: none;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        margin-inline-start: var(--tb-space-1);
        border: 1px solid var(--tb-border-strong);
        border-radius: var(--tb-radius-sm);
        background:
            linear-gradient(var(--tb-color-picker-value, transparent), var(--tb-color-picker-value, transparent)),
            var(--tb-color-picker-checks);
    }

    .tb-color-picker__body {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-3);
        inline-size: 15rem;
    }

    .tb-color-picker__swatches {
        display: flex;
        flex-wrap: wrap;
        gap: var(--tb-space-2);
    }

    .tb-color-picker__swatch {
        inline-size: 1.75rem;
        block-size: 1.75rem;
        margin: 0;
        border: 1px solid var(--tb-border-strong);
        border-radius: var(--tb-radius-sm);
        appearance: none;
        background: linear-gradient(var(--tb-swatch), var(--tb-swatch)), var(--tb-color-picker-checks);
        cursor: pointer;
    }

    .tb-color-picker__swatch:checked {
        outline: 2px solid var(--tb-color-primary);
        outline-offset: 2px;
    }

    .tb-color-picker__swatch:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-color-picker__pad {
        position: relative;
        block-size: 9rem;
        border-radius: var(--tb-radius-sm);
        background: linear-gradient(to top, #000, transparent),
            linear-gradient(to right, #fff, hsl(var(--tb-color-picker-hue) 100% 50%));
        cursor: crosshair;
        touch-action: none;
    }

    /* The pad is a color space, not text, so it runs left to right in any direction, as the script measures it. */
    .tb-color-picker__pad-thumb {
        position: absolute;
        left: calc(var(--tb-color-picker-x) * 100%);
        inset-block-start: calc(var(--tb-color-picker-y) * 100%);
        inline-size: 0.875rem;
        block-size: 0.875rem;
        border: 2px solid #fff;
        border-radius: var(--tb-radius-full);
        box-shadow: 0 0 0 1px #000;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .tb-color-picker__row,
    .tb-color-picker__channel {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
        font-size: var(--tb-font-size-sm);
    }

    .tb-color-picker__row-label {
        color: var(--tb-color-text-muted);
    }

    .tb-color-picker__slider {
        block-size: 1.5rem;
        margin: 0;
        border-radius: var(--tb-radius-full);
        appearance: none;
        cursor: pointer;
    }

    .tb-color-picker__slider--hue {
        background: linear-gradient(to right in hsl longer hue, hsl(0 100% 50%), hsl(360 100% 50%));
    }

    .tb-color-picker__slider--hue:dir(rtl) {
        background: linear-gradient(to left in hsl longer hue, hsl(0 100% 50%), hsl(360 100% 50%));
    }

    .tb-color-picker__slider--saturation {
        background: linear-gradient(to right, var(--tb-color-picker-gray), var(--tb-color-picker-vivid));
    }

    .tb-color-picker__slider--brightness {
        background: linear-gradient(to right, #000, var(--tb-color-picker-bright));
    }

    .tb-color-picker__slider--alpha {
        background: linear-gradient(to right, transparent, var(--tb-color-picker-opaque)),
            var(--tb-color-picker-checks);
    }

    /* A range input runs from the right in right-to-left text, so its track's colors do too. */
    .tb-color-picker__slider--saturation:dir(rtl) {
        background: linear-gradient(to left, var(--tb-color-picker-gray), var(--tb-color-picker-vivid));
    }

    .tb-color-picker__slider--brightness:dir(rtl) {
        background: linear-gradient(to left, #000, var(--tb-color-picker-bright));
    }

    .tb-color-picker__slider--alpha:dir(rtl) {
        background: linear-gradient(to left, transparent, var(--tb-color-picker-opaque)),
            var(--tb-color-picker-checks);
    }

    .tb-color-picker__slider::-webkit-slider-thumb {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        border: 2px solid #fff;
        border-radius: var(--tb-radius-full);
        appearance: none;
        background: transparent;
        box-shadow: 0 0 0 1px #000;
    }

    .tb-color-picker__slider::-moz-range-thumb {
        box-sizing: border-box;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        border: 2px solid #fff;
        border-radius: var(--tb-radius-full);
        background: transparent;
        box-shadow: 0 0 0 1px #000;
    }

    .tb-color-picker__slider:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    .tb-color-picker__channels {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--tb-space-2);
    }

    .tb-color-picker__number {
        box-sizing: border-box;
        inline-size: 100%;
        min-block-size: 2rem;
        padding-inline: var(--tb-space-2);
        border: 1px solid var(--tb-border-strong);
        border-radius: var(--tb-radius-sm);
        background: var(--tb-color-surface);
        color: var(--tb-color-text);
        font: inherit;
        line-height: var(--tb-line-height-tight);
    }

    .tb-color-picker__number:focus-visible {
        outline: var(--tb-focus-ring-width) solid var(--tb-focus-ring-color);
        outline-offset: var(--tb-focus-ring-offset);
    }

    /* Forced colors would paint over the swatches and tracks, which are the color itself. */
    @media (forced-colors: active) {
        .tb-color-picker__preview,
        .tb-color-picker__swatch,
        .tb-color-picker__pad,
        .tb-color-picker__slider {
            forced-color-adjust: none;
        }

        .tb-color-picker__swatch:checked {
            outline-color: Highlight;
        }
    }

    /* Forced colors drop the backgrounds, so chosen days are drawn in the system's highlight colors, the ends with an
       outline as well, and a preview only with a dashed outline, so it can't be taken for a chosen range. */
    @media (forced-colors: active) {
        .tb-date-range__day--selected,
        .tb-date-range__day--start,
        .tb-date-range__day--end {
            forced-color-adjust: none;
            background: Highlight;
            color: HighlightText;
        }

        .tb-date-range__day[data-preview] {
            forced-color-adjust: none;
            background: Canvas;
            color: CanvasText;
        }

        /* A focused day keeps its focus ring instead. */
        .tb-date-range__day:is(.tb-date-range__day--start, .tb-date-range__day--end):not(:focus-visible) {
            outline: 2px solid CanvasText;
            outline-offset: -2px;
        }

        .tb-date-range__day[data-preview]:not(:focus-visible) {
            outline: 1px dashed Highlight;
            outline-offset: -1px;
        }

        .tb-date-range__day[aria-disabled="true"] {
            color: GrayText;
        }
    }

    .tb-sortable {
        position: relative;
    }

    .tb-sortable__list {
        display: flex;
        flex-direction: column;
        gap: var(--tb-space-1);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tb-sortable__item {
        display: flex;
        align-items: center;
        gap: var(--tb-space-2);
        padding: var(--tb-space-1) var(--tb-space-2);
        border-radius: var(--tb-radius-md);
        background: var(--tb-color-surface);
        color: var(--tb-color-text);
    }

    .tb-sortable__content {
        flex: 1;
        min-inline-size: 0;
    }

    .tb-sortable__handle {
        flex: none;
    }

    /* The handle's button is what a drag starts from, so a touch on it holds still instead of scrolling the page. */
    .tb-sortable__handle > [data-part="trigger"] {
        color: var(--tb-color-text-muted);
        cursor: grab;
        touch-action: none;
        -webkit-touch-callout: none;
        user-select: none;
    }

    .tb-sortable__handle > [data-part="trigger"]:disabled {
        cursor: default;
    }

    [data-dragging] .tb-sortable__handle > [data-part="trigger"] {
        cursor: grabbing;
    }

    .tb-sortable__item[data-dragging] {
        opacity: 0.5;
    }

    /* The item lands before or after the one under the pointer; a place it can't land shows dashed, in the danger
       color. */
    .tb-sortable__item[data-drop] {
        --tb-sortable-drop: var(--tb-color-primary);
    }

    .tb-sortable__item[data-drop-refused] {
        --tb-sortable-drop: var(--tb-color-danger-text);
        cursor: not-allowed;
    }

    .tb-sortable__item[data-drop="before"] {
        box-shadow: inset 0 2px 0 var(--tb-sortable-drop);
    }

    .tb-sortable__item[data-drop="after"] {
        box-shadow: inset 0 -2px 0 var(--tb-sortable-drop);
    }

    .tb-sortable__item[data-drop][data-drop-refused] {
        box-shadow: none;
        outline: 2px dashed var(--tb-sortable-drop);
        outline-offset: -2px;
    }

    .tb-sortable__reason {
        position: absolute;
        inset-inline-start: var(--tb-space-2);
        z-index: 1;
        padding: var(--tb-space-1) var(--tb-space-2);
        border-radius: var(--tb-radius-sm);
        background: var(--tb-color-surface-raised);
        color: var(--tb-color-danger-text);
        box-shadow: var(--tb-shadow-md);
        font-size: var(--tb-font-size-xs);
        pointer-events: none;
    }

    @media (forced-colors: active) {
        .tb-sortable__item[data-drop="before"] {
            border-block-start: 2px solid Highlight;
        }

        .tb-sortable__item[data-drop="after"] {
            border-block-end: 2px solid Highlight;
        }

        .tb-sortable__item[data-drop-refused] {
            border-style: dashed;
        }
    }
}

@layer tb.utilities {
    /* Hidden from sight but still read by screen readers. */
    .tb-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Spacing on the --tb-space-* scale. Sides are logical: x is inline, y is block, t and b are block start
       and end, s and e are inline start and end, so they follow the writing direction. */
    .tb-p-0 {
        padding: var(--tb-space-0);
    }

    .tb-p-1 {
        padding: var(--tb-space-1);
    }

    .tb-p-2 {
        padding: var(--tb-space-2);
    }

    .tb-p-3 {
        padding: var(--tb-space-3);
    }

    .tb-p-4 {
        padding: var(--tb-space-4);
    }

    .tb-p-5 {
        padding: var(--tb-space-5);
    }

    .tb-p-6 {
        padding: var(--tb-space-6);
    }

    .tb-p-8 {
        padding: var(--tb-space-8);
    }

    .tb-p-10 {
        padding: var(--tb-space-10);
    }

    .tb-p-12 {
        padding: var(--tb-space-12);
    }

    .tb-p-16 {
        padding: var(--tb-space-16);
    }

    .tb-px-0 {
        padding-inline: var(--tb-space-0);
    }

    .tb-px-1 {
        padding-inline: var(--tb-space-1);
    }

    .tb-px-2 {
        padding-inline: var(--tb-space-2);
    }

    .tb-px-3 {
        padding-inline: var(--tb-space-3);
    }

    .tb-px-4 {
        padding-inline: var(--tb-space-4);
    }

    .tb-px-5 {
        padding-inline: var(--tb-space-5);
    }

    .tb-px-6 {
        padding-inline: var(--tb-space-6);
    }

    .tb-px-8 {
        padding-inline: var(--tb-space-8);
    }

    .tb-px-10 {
        padding-inline: var(--tb-space-10);
    }

    .tb-px-12 {
        padding-inline: var(--tb-space-12);
    }

    .tb-px-16 {
        padding-inline: var(--tb-space-16);
    }

    .tb-py-0 {
        padding-block: var(--tb-space-0);
    }

    .tb-py-1 {
        padding-block: var(--tb-space-1);
    }

    .tb-py-2 {
        padding-block: var(--tb-space-2);
    }

    .tb-py-3 {
        padding-block: var(--tb-space-3);
    }

    .tb-py-4 {
        padding-block: var(--tb-space-4);
    }

    .tb-py-5 {
        padding-block: var(--tb-space-5);
    }

    .tb-py-6 {
        padding-block: var(--tb-space-6);
    }

    .tb-py-8 {
        padding-block: var(--tb-space-8);
    }

    .tb-py-10 {
        padding-block: var(--tb-space-10);
    }

    .tb-py-12 {
        padding-block: var(--tb-space-12);
    }

    .tb-py-16 {
        padding-block: var(--tb-space-16);
    }

    .tb-pt-0 {
        padding-block-start: var(--tb-space-0);
    }

    .tb-pt-1 {
        padding-block-start: var(--tb-space-1);
    }

    .tb-pt-2 {
        padding-block-start: var(--tb-space-2);
    }

    .tb-pt-3 {
        padding-block-start: var(--tb-space-3);
    }

    .tb-pt-4 {
        padding-block-start: var(--tb-space-4);
    }

    .tb-pt-5 {
        padding-block-start: var(--tb-space-5);
    }

    .tb-pt-6 {
        padding-block-start: var(--tb-space-6);
    }

    .tb-pt-8 {
        padding-block-start: var(--tb-space-8);
    }

    .tb-pt-10 {
        padding-block-start: var(--tb-space-10);
    }

    .tb-pt-12 {
        padding-block-start: var(--tb-space-12);
    }

    .tb-pt-16 {
        padding-block-start: var(--tb-space-16);
    }

    .tb-pb-0 {
        padding-block-end: var(--tb-space-0);
    }

    .tb-pb-1 {
        padding-block-end: var(--tb-space-1);
    }

    .tb-pb-2 {
        padding-block-end: var(--tb-space-2);
    }

    .tb-pb-3 {
        padding-block-end: var(--tb-space-3);
    }

    .tb-pb-4 {
        padding-block-end: var(--tb-space-4);
    }

    .tb-pb-5 {
        padding-block-end: var(--tb-space-5);
    }

    .tb-pb-6 {
        padding-block-end: var(--tb-space-6);
    }

    .tb-pb-8 {
        padding-block-end: var(--tb-space-8);
    }

    .tb-pb-10 {
        padding-block-end: var(--tb-space-10);
    }

    .tb-pb-12 {
        padding-block-end: var(--tb-space-12);
    }

    .tb-pb-16 {
        padding-block-end: var(--tb-space-16);
    }

    .tb-ps-0 {
        padding-inline-start: var(--tb-space-0);
    }

    .tb-ps-1 {
        padding-inline-start: var(--tb-space-1);
    }

    .tb-ps-2 {
        padding-inline-start: var(--tb-space-2);
    }

    .tb-ps-3 {
        padding-inline-start: var(--tb-space-3);
    }

    .tb-ps-4 {
        padding-inline-start: var(--tb-space-4);
    }

    .tb-ps-5 {
        padding-inline-start: var(--tb-space-5);
    }

    .tb-ps-6 {
        padding-inline-start: var(--tb-space-6);
    }

    .tb-ps-8 {
        padding-inline-start: var(--tb-space-8);
    }

    .tb-ps-10 {
        padding-inline-start: var(--tb-space-10);
    }

    .tb-ps-12 {
        padding-inline-start: var(--tb-space-12);
    }

    .tb-ps-16 {
        padding-inline-start: var(--tb-space-16);
    }

    .tb-pe-0 {
        padding-inline-end: var(--tb-space-0);
    }

    .tb-pe-1 {
        padding-inline-end: var(--tb-space-1);
    }

    .tb-pe-2 {
        padding-inline-end: var(--tb-space-2);
    }

    .tb-pe-3 {
        padding-inline-end: var(--tb-space-3);
    }

    .tb-pe-4 {
        padding-inline-end: var(--tb-space-4);
    }

    .tb-pe-5 {
        padding-inline-end: var(--tb-space-5);
    }

    .tb-pe-6 {
        padding-inline-end: var(--tb-space-6);
    }

    .tb-pe-8 {
        padding-inline-end: var(--tb-space-8);
    }

    .tb-pe-10 {
        padding-inline-end: var(--tb-space-10);
    }

    .tb-pe-12 {
        padding-inline-end: var(--tb-space-12);
    }

    .tb-pe-16 {
        padding-inline-end: var(--tb-space-16);
    }

    .tb-m-0 {
        margin: var(--tb-space-0);
    }

    .tb-m-1 {
        margin: var(--tb-space-1);
    }

    .tb-m-2 {
        margin: var(--tb-space-2);
    }

    .tb-m-3 {
        margin: var(--tb-space-3);
    }

    .tb-m-4 {
        margin: var(--tb-space-4);
    }

    .tb-m-5 {
        margin: var(--tb-space-5);
    }

    .tb-m-6 {
        margin: var(--tb-space-6);
    }

    .tb-m-8 {
        margin: var(--tb-space-8);
    }

    .tb-m-10 {
        margin: var(--tb-space-10);
    }

    .tb-m-12 {
        margin: var(--tb-space-12);
    }

    .tb-m-16 {
        margin: var(--tb-space-16);
    }

    .tb-mx-0 {
        margin-inline: var(--tb-space-0);
    }

    .tb-mx-1 {
        margin-inline: var(--tb-space-1);
    }

    .tb-mx-2 {
        margin-inline: var(--tb-space-2);
    }

    .tb-mx-3 {
        margin-inline: var(--tb-space-3);
    }

    .tb-mx-4 {
        margin-inline: var(--tb-space-4);
    }

    .tb-mx-5 {
        margin-inline: var(--tb-space-5);
    }

    .tb-mx-6 {
        margin-inline: var(--tb-space-6);
    }

    .tb-mx-8 {
        margin-inline: var(--tb-space-8);
    }

    .tb-mx-10 {
        margin-inline: var(--tb-space-10);
    }

    .tb-mx-12 {
        margin-inline: var(--tb-space-12);
    }

    .tb-mx-16 {
        margin-inline: var(--tb-space-16);
    }

    .tb-my-0 {
        margin-block: var(--tb-space-0);
    }

    .tb-my-1 {
        margin-block: var(--tb-space-1);
    }

    .tb-my-2 {
        margin-block: var(--tb-space-2);
    }

    .tb-my-3 {
        margin-block: var(--tb-space-3);
    }

    .tb-my-4 {
        margin-block: var(--tb-space-4);
    }

    .tb-my-5 {
        margin-block: var(--tb-space-5);
    }

    .tb-my-6 {
        margin-block: var(--tb-space-6);
    }

    .tb-my-8 {
        margin-block: var(--tb-space-8);
    }

    .tb-my-10 {
        margin-block: var(--tb-space-10);
    }

    .tb-my-12 {
        margin-block: var(--tb-space-12);
    }

    .tb-my-16 {
        margin-block: var(--tb-space-16);
    }

    .tb-mt-0 {
        margin-block-start: var(--tb-space-0);
    }

    .tb-mt-1 {
        margin-block-start: var(--tb-space-1);
    }

    .tb-mt-2 {
        margin-block-start: var(--tb-space-2);
    }

    .tb-mt-3 {
        margin-block-start: var(--tb-space-3);
    }

    .tb-mt-4 {
        margin-block-start: var(--tb-space-4);
    }

    .tb-mt-5 {
        margin-block-start: var(--tb-space-5);
    }

    .tb-mt-6 {
        margin-block-start: var(--tb-space-6);
    }

    .tb-mt-8 {
        margin-block-start: var(--tb-space-8);
    }

    .tb-mt-10 {
        margin-block-start: var(--tb-space-10);
    }

    .tb-mt-12 {
        margin-block-start: var(--tb-space-12);
    }

    .tb-mt-16 {
        margin-block-start: var(--tb-space-16);
    }

    .tb-mb-0 {
        margin-block-end: var(--tb-space-0);
    }

    .tb-mb-1 {
        margin-block-end: var(--tb-space-1);
    }

    .tb-mb-2 {
        margin-block-end: var(--tb-space-2);
    }

    .tb-mb-3 {
        margin-block-end: var(--tb-space-3);
    }

    .tb-mb-4 {
        margin-block-end: var(--tb-space-4);
    }

    .tb-mb-5 {
        margin-block-end: var(--tb-space-5);
    }

    .tb-mb-6 {
        margin-block-end: var(--tb-space-6);
    }

    .tb-mb-8 {
        margin-block-end: var(--tb-space-8);
    }

    .tb-mb-10 {
        margin-block-end: var(--tb-space-10);
    }

    .tb-mb-12 {
        margin-block-end: var(--tb-space-12);
    }

    .tb-mb-16 {
        margin-block-end: var(--tb-space-16);
    }

    .tb-ms-0 {
        margin-inline-start: var(--tb-space-0);
    }

    .tb-ms-1 {
        margin-inline-start: var(--tb-space-1);
    }

    .tb-ms-2 {
        margin-inline-start: var(--tb-space-2);
    }

    .tb-ms-3 {
        margin-inline-start: var(--tb-space-3);
    }

    .tb-ms-4 {
        margin-inline-start: var(--tb-space-4);
    }

    .tb-ms-5 {
        margin-inline-start: var(--tb-space-5);
    }

    .tb-ms-6 {
        margin-inline-start: var(--tb-space-6);
    }

    .tb-ms-8 {
        margin-inline-start: var(--tb-space-8);
    }

    .tb-ms-10 {
        margin-inline-start: var(--tb-space-10);
    }

    .tb-ms-12 {
        margin-inline-start: var(--tb-space-12);
    }

    .tb-ms-16 {
        margin-inline-start: var(--tb-space-16);
    }

    .tb-me-0 {
        margin-inline-end: var(--tb-space-0);
    }

    .tb-me-1 {
        margin-inline-end: var(--tb-space-1);
    }

    .tb-me-2 {
        margin-inline-end: var(--tb-space-2);
    }

    .tb-me-3 {
        margin-inline-end: var(--tb-space-3);
    }

    .tb-me-4 {
        margin-inline-end: var(--tb-space-4);
    }

    .tb-me-5 {
        margin-inline-end: var(--tb-space-5);
    }

    .tb-me-6 {
        margin-inline-end: var(--tb-space-6);
    }

    .tb-me-8 {
        margin-inline-end: var(--tb-space-8);
    }

    .tb-me-10 {
        margin-inline-end: var(--tb-space-10);
    }

    .tb-me-12 {
        margin-inline-end: var(--tb-space-12);
    }

    .tb-me-16 {
        margin-inline-end: var(--tb-space-16);
    }

    .tb-m-auto {
        margin: auto;
    }

    .tb-mx-auto {
        margin-inline: auto;
    }

    .tb-my-auto {
        margin-block: auto;
    }

    .tb-ms-auto {
        margin-inline-start: auto;
    }

    .tb-me-auto {
        margin-inline-end: auto;
    }

    .tb-mt-auto {
        margin-block-start: auto;
    }

    .tb-mb-auto {
        margin-block-end: auto;
    }

    .tb-gap-0 {
        gap: var(--tb-space-0);
    }

    .tb-gap-1 {
        gap: var(--tb-space-1);
    }

    .tb-gap-2 {
        gap: var(--tb-space-2);
    }

    .tb-gap-3 {
        gap: var(--tb-space-3);
    }

    .tb-gap-4 {
        gap: var(--tb-space-4);
    }

    .tb-gap-5 {
        gap: var(--tb-space-5);
    }

    .tb-gap-6 {
        gap: var(--tb-space-6);
    }

    .tb-gap-8 {
        gap: var(--tb-space-8);
    }

    .tb-gap-10 {
        gap: var(--tb-space-10);
    }

    .tb-gap-12 {
        gap: var(--tb-space-12);
    }

    .tb-gap-16 {
        gap: var(--tb-space-16);
    }

    .tb-gap-x-0 {
        column-gap: var(--tb-space-0);
    }

    .tb-gap-x-1 {
        column-gap: var(--tb-space-1);
    }

    .tb-gap-x-2 {
        column-gap: var(--tb-space-2);
    }

    .tb-gap-x-3 {
        column-gap: var(--tb-space-3);
    }

    .tb-gap-x-4 {
        column-gap: var(--tb-space-4);
    }

    .tb-gap-x-5 {
        column-gap: var(--tb-space-5);
    }

    .tb-gap-x-6 {
        column-gap: var(--tb-space-6);
    }

    .tb-gap-x-8 {
        column-gap: var(--tb-space-8);
    }

    .tb-gap-x-10 {
        column-gap: var(--tb-space-10);
    }

    .tb-gap-x-12 {
        column-gap: var(--tb-space-12);
    }

    .tb-gap-x-16 {
        column-gap: var(--tb-space-16);
    }

    .tb-gap-y-0 {
        row-gap: var(--tb-space-0);
    }

    .tb-gap-y-1 {
        row-gap: var(--tb-space-1);
    }

    .tb-gap-y-2 {
        row-gap: var(--tb-space-2);
    }

    .tb-gap-y-3 {
        row-gap: var(--tb-space-3);
    }

    .tb-gap-y-4 {
        row-gap: var(--tb-space-4);
    }

    .tb-gap-y-5 {
        row-gap: var(--tb-space-5);
    }

    .tb-gap-y-6 {
        row-gap: var(--tb-space-6);
    }

    .tb-gap-y-8 {
        row-gap: var(--tb-space-8);
    }

    .tb-gap-y-10 {
        row-gap: var(--tb-space-10);
    }

    .tb-gap-y-12 {
        row-gap: var(--tb-space-12);
    }

    .tb-gap-y-16 {
        row-gap: var(--tb-space-16);
    }

    /* Start and end follow the writing direction, like the spacing sides. */
    .tb-text-start {
        text-align: start;
    }

    .tb-text-center {
        text-align: center;
    }

    .tb-text-end {
        text-align: end;
    }
}