/*
 * tav-components.css — Tavuni UI component layer (ADR-0361).
 *
 * Hand-authored NATIVE CSS — no preprocessor, no build step. Every component
 * reads ONLY `--tav-*` design tokens (ADR-0359), which are injected at runtime
 * per brand scope by the `tavuni-common::theme` engine (ADR-0360). There is not
 * a single hard-coded colour here: brand colour lives entirely in the runtime
 * custom properties, so this one stylesheet themes for every reseller/tenant in
 * both light and dark mode without recompilation. (The `check-no-hardcoded-color`
 * CI gate enforces the "tokens only" invariant.)
 *
 * State changes (hover/press) are derived from the role + its on-colour via
 * `color-mix` at the `--tav-state-*` opacity, so they track the active theme
 * automatically — no per-component hover colour anywhere.
 *
 * Unlayered by design. The precompiled utility layer emits its preflight UNLAYERED, and an
 * unlayered rule beats ANY native `@layer` regardless of order — so wrapping
 * these components in a cascade layer let that preflight's `button { background:
 * transparent }` / `* { border-width: 0 }` reset silently override every tav-*
 * control (filled buttons rendered as bare text). Plain rules win over the
 * element-level preflight on specificity instead (`.tav-btn` 0-1-0 > `button`
 * 0-0-1) in every browser. The app loads those precompiled
 * utilities BEFORE this file, so a genuine `pl-10`-style override still wins by
 * source order (or is re-asserted app-side).
 */

    :root {
        color-scheme: light;
    }

    :root.dark {
        color-scheme: dark;
    }

    .tav-app {
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-family: var(--tav-font-sans, "Inter", system-ui, sans-serif);
        font-size: var(--tav-type-body-size);
        line-height: var(--tav-type-body-line);
    }

    /* Keyboard-only focus ring, theme-coloured. */
    :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
        outline: 2px solid var(--tav-primary);
        outline-offset: 2px;
        border-radius: var(--tav-radius-xs);
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* ── Buttons ─────────────────────────────────────────────────────── */
    .tav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem;
        border: 1px solid transparent;
        border-radius: var(--tav-radius-md);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-title-weight);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        transition:
            background-color 0.15s ease,
            color 0.15s ease,
            border-color 0.15s ease,
            box-shadow 0.15s ease;
    }

    .tav-btn:disabled,
    .tav-btn[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .tav-btn-primary {
        background: var(--tav-primary);
        color: var(--tav-on-primary);
    }
    .tav-btn-primary:hover {
        background: color-mix(
            in oklab,
            var(--tav-primary),
            var(--tav-on-primary) calc(var(--tav-state-hover) * 100%)
        );
    }

    .tav-btn-secondary {
        background: var(--tav-surface-1);
        color: var(--tav-on-surface);
        border-color: var(--tav-outline);
    }
    .tav-btn-secondary:hover {
        background: color-mix(
            in oklab,
            var(--tav-surface-1),
            var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
        );
    }

    .tav-btn-danger {
        background: var(--tav-error);
        color: var(--tav-on-error);
    }
    .tav-btn-danger:hover {
        background: color-mix(
            in oklab,
            var(--tav-error),
            var(--tav-on-error) calc(var(--tav-state-hover) * 100%)
        );
    }

    .tav-btn-warning {
        background: var(--tav-warning);
        color: var(--tav-on-warning);
    }
    .tav-btn-warning:hover {
        background: color-mix(
            in oklab,
            var(--tav-warning),
            var(--tav-on-warning) calc(var(--tav-state-hover) * 100%)
        );
    }

    .tav-btn-ghost {
        background: transparent;
        color: var(--tav-on-surface-variant);
    }
    .tav-btn-ghost:hover {
        background: color-mix(
            in oklab,
            transparent,
            var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
        );
    }

    /* ── Badges ──────────────────────────────────────────────────────── */
    .tav-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.125rem 0.5rem;
        border-radius: var(--tav-radius-full);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-label-weight);
        line-height: 1.25;
    }
    .tav-badge-success {
        background: var(--tav-success-container);
        color: var(--tav-on-success-container);
    }
    .tav-badge-warning {
        background: var(--tav-warning-container);
        color: var(--tav-on-warning-container);
    }
    .tav-badge-error {
        background: var(--tav-error-container);
        color: var(--tav-on-error-container);
    }
    .tav-badge-info {
        background: var(--tav-info-container);
        color: var(--tav-on-info-container);
    }
    .tav-badge-neutral {
        background: var(--tav-surface-variant);
        color: var(--tav-on-surface-variant);
    }

    /* ── Card ────────────────────────────────────────────────────────── */
    .tav-card {
        background: var(--tav-surface-1);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-md);
        box-shadow: var(--tav-elevation-1);
        overflow: hidden;
    }
    .tav-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.875rem 1.25rem;
        border-bottom: 1px solid var(--tav-outline-variant);
    }
    .tav-card-title {
        margin: 0;
        font-size: var(--tav-type-title-size);
        font-weight: var(--tav-type-title-weight);
        line-height: var(--tav-type-title-line);
        color: var(--tav-on-surface);
    }
    .tav-card-body {
        padding: 1.25rem;
    }

    /* ── Form field ──────────────────────────────────────────────────── */
    .tav-field {
        display: grid;
        gap: 0.375rem;
    }
    .tav-label {
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-label-weight);
        color: var(--tav-on-surface-variant);
    }
    .tav-required {
        color: var(--tav-error);
    }
    .tav-input,
    .tav-textarea,
    .tav-select {
        width: 100%;
        padding: 0.5rem 0.75rem;
        /* Faintly brand-tinted edge so form fields carry a hint of the tenant
           brand at rest (Style-2 "more accent" feedback) — still reads neutral,
           the focus ring below is the full brand statement. */
        border: 1px solid color-mix(in oklab, var(--tav-primary) 28%, var(--tav-outline));
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        line-height: var(--tav-type-body-line);
        /* Brand the native control chrome — without this a `<select>`'s open-list
           highlight (and any date/number spinner) falls back to the UA default
           blue regardless of the active brand. Mirrors the checkbox/radio rule. */
        accent-color: var(--tav-primary);
        transition:
            border-color 0.15s ease,
            box-shadow 0.15s ease;
    }
    .tav-input:focus,
    .tav-textarea:focus,
    .tav-select:focus {
        outline: none;
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }
    .tav-input[aria-invalid="true"],
    .tav-textarea[aria-invalid="true"],
    .tav-select[aria-invalid="true"] {
        border-color: var(--tav-error);
    }
    .tav-help {
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-error-text {
        font-size: var(--tav-type-label-size);
        color: var(--tav-error);
    }

    /* ── Flash / callout ─────────────────────────────────────────────── */
    .tav-flash {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border: 1px solid transparent;
        border-radius: var(--tav-radius-md);
        font-size: var(--tav-type-body-size);
    }
    .tav-flash-success {
        background: var(--tav-success-container);
        color: var(--tav-on-success-container);
    }
    .tav-flash-warning {
        background: var(--tav-warning-container);
        color: var(--tav-on-warning-container);
    }
    .tav-flash-error {
        background: var(--tav-error-container);
        color: var(--tav-on-error-container);
    }
    .tav-flash-info {
        background: var(--tav-info-container);
        color: var(--tav-on-info-container);
    }

    /* ── Link ────────────────────────────────────────────────────────── */
    .tav-link {
        color: var(--tav-primary);
        text-decoration: none;
        font-weight: var(--tav-type-label-weight);
    }
    .tav-link:hover {
        text-decoration: underline;
    }

    /* ── Divider ─────────────────────────────────────────────────────── */
    .tav-divider {
        height: 0;
        margin: 1rem 0;
        border: 0;
        border-top: 1px solid var(--tav-outline-variant);
    }

    /* ── Keyboard key ────────────────────────────────────────────────── */
    .tav-kbd {
        display: inline-flex;
        align-items: center;
        padding: 0.0625rem 0.375rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-xs);
        background: var(--tav-surface-2);
        color: var(--tav-on-surface-variant);
        font-family: ui-monospace, monospace;
        font-size: 0.6875rem;
        line-height: 1.25;
    }

    /* ── Avatar (initials) ───────────────────────────────────────────── */
    .tav-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: var(--tav-radius-full);
        background: var(--tav-primary);
        color: var(--tav-on-primary);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-title-weight);
        user-select: none;
    }

    /* ── Breadcrumb ──────────────────────────────────────────────────── */
    .tav-breadcrumb {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-breadcrumb a {
        color: var(--tav-on-surface-variant);
        text-decoration: none;
    }
    .tav-breadcrumb a:hover {
        color: var(--tav-primary);
    }
    .tav-breadcrumb-sep {
        color: var(--tav-outline);
    }
    .tav-breadcrumb-current {
        color: var(--tav-on-surface);
        font-weight: var(--tav-type-label-weight);
    }

    /* ── Sidebar link (with active state — workspace audit #1) ───────── */
    .tav-sidebar-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--tav-radius-sm);
        color: var(--tav-on-surface-variant);
        font-size: var(--tav-type-body-size);
        font-weight: var(--tav-type-label-weight);
        text-decoration: none;
        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }
    .tav-sidebar-link:hover {
        background: color-mix(
            in oklab,
            transparent,
            var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
        );
        color: var(--tav-on-surface);
    }
    .tav-sidebar-link.active,
    .tav-sidebar-link[aria-current="page"] {
        background: var(--tav-primary-container);
        color: var(--tav-on-primary-container);
        font-weight: var(--tav-type-title-weight);
    }

    /* ── Tabs ────────────────────────────────────────────────────────── */
    .tav-tabs {
        display: flex;
        gap: 0.25rem;
        border-bottom: 1px solid var(--tav-outline-variant);
    }
    .tav-tab {
        padding: 0.5rem 0.875rem;
        border-bottom: 2px solid transparent;
        color: var(--tav-on-surface-variant);
        font-size: var(--tav-type-body-size);
        font-weight: var(--tav-type-label-weight);
        text-decoration: none;
        cursor: pointer;
    }
    .tav-tab:hover {
        color: var(--tav-on-surface);
    }
    .tav-tab.active,
    .tav-tab[aria-current="page"] {
        border-bottom-color: var(--tav-primary);
        color: var(--tav-on-surface);
        font-weight: var(--tav-type-title-weight);
    }

    /* ── Toggle / switch ─────────────────────────────────────────────── */
    .tav-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 2.5rem;
        height: 1.5rem;
        flex-shrink: 0;
        border-radius: var(--tav-radius-full);
        background: var(--tav-surface-variant);
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    .tav-toggle::after {
        content: "";
        position: absolute;
        left: 0.1875rem;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: var(--tav-radius-full);
        background: var(--tav-surface);
        transition: transform 0.15s ease;
    }
    .tav-toggle[aria-checked="true"] {
        background: var(--tav-primary);
    }
    .tav-toggle[aria-checked="true"]::after {
        transform: translateX(1rem);
        background: var(--tav-on-primary);
    }

    /* ── Stat card ───────────────────────────────────────────────────── */
    .tav-stat-card {
        padding: 1.25rem;
        background: var(--tav-surface-1);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-md);
    }
    .tav-stat-label {
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-label-weight);
        color: var(--tav-on-surface-variant);
    }
    .tav-stat-value {
        margin-top: 0.25rem;
        font-size: var(--tav-type-headline-size);
        font-weight: var(--tav-type-headline-weight);
        line-height: var(--tav-type-headline-line);
        color: var(--tav-on-surface);
        font-variant-numeric: tabular-nums;
    }
    .tav-stat-caption {
        margin-top: 0.25rem;
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface-variant);
    }

    /* ── Empty state ─────────────────────────────────────────────────── */
    .tav-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1rem;
        text-align: center;
    }
    .tav-empty-icon {
        width: 3rem;
        height: 3rem;
        color: color-mix(in oklab, var(--tav-on-surface-variant), transparent 40%);
    }
    .tav-empty-title {
        margin-top: 1rem;
        font-size: var(--tav-type-title-size);
        font-weight: var(--tav-type-title-weight);
        color: var(--tav-on-surface);
    }
    .tav-empty-text {
        margin-top: 0.25rem;
        font-size: var(--tav-type-body-size);
        color: var(--tav-on-surface-variant);
    }

    /* ── Pagination ──────────────────────────────────────────────────── */
    .tav-pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
    }
    .tav-page-btn {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.625rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-label-size);
        text-decoration: none;
    }
    .tav-page-btn:hover {
        background: var(--tav-surface-2);
    }
    .tav-page-btn.active,
    .tav-page-btn[aria-current="page"] {
        background: var(--tav-primary);
        color: var(--tav-on-primary);
        border-color: var(--tav-primary);
    }
    .tav-page-btn[aria-disabled="true"] {
        opacity: 0.5;
        pointer-events: none;
    }

    /* ── Table ───────────────────────────────────────────────────────── */
    .tav-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--tav-type-body-size);
    }
    .tav-table thead {
        background: var(--tav-surface-2);
    }
    .tav-table th {
        padding: 0.625rem 1rem;
        text-align: left;
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-title-weight);
        color: var(--tav-on-surface-variant);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .tav-table td {
        padding: 0.625rem 1rem;
        border-top: 1px solid var(--tav-outline-variant);
        color: var(--tav-on-surface);
    }
    .tav-table tbody tr:hover {
        background: color-mix(
            in oklab,
            transparent,
            var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
        );
    }
    /* Sticky header for tall scrolling tables (workspace audit #19). */
    .tav-table-sticky thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--tav-surface-2);
    }

    /* ── Modal / dialog shell ────────────────────────────────────────── */
    .tav-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: color-mix(in oklab, var(--tav-on-surface) 45%, transparent);
    }
    .tav-modal {
        width: 100%;
        max-width: 32rem;
        background: var(--tav-surface-1);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-md);
        box-shadow: var(--tav-elevation-3);
        overflow: hidden;
    }

    /* Responsive table → stacked cards below the small breakpoint
       (workspace audit: ~43/48 tables not mobile-safe). Add
       `tav-table-responsive` and give every <td> a `data-label`. */
    @media (max-width: 639px) {
        .tav-table-responsive thead {
            display: none;
        }
        .tav-table-responsive tr {
            display: block;
            margin-bottom: 0.75rem;
            border: 1px solid var(--tav-outline-variant);
            border-radius: var(--tav-radius-sm);
            background: var(--tav-surface-1);
        }
        .tav-table-responsive td {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            border-top: 0;
            text-align: right;
        }
        .tav-table-responsive td::before {
            content: attr(data-label);
            font-weight: var(--tav-type-label-weight);
            color: var(--tav-on-surface-variant);
            text-align: left;
        }
    }

/* Animations live outside the cascade layer (keyframes are not layered).
   Both are neutralised by the prefers-reduced-motion rule in `tav-base`. */
@keyframes tav-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes tav-pulse {
    50% {
        opacity: 0.5;
    }
}

    /* ── Callout (subtle, left-accent — distinct from the filled flash) ── */
    .tav-callout {
        display: flex;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border-left: 3px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface-1);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
    }
    .tav-callout-info {
        border-left-color: var(--tav-info);
        background: color-mix(in oklab, var(--tav-surface-1), var(--tav-info) 8%);
    }
    .tav-callout-success {
        border-left-color: var(--tav-success);
        background: color-mix(in oklab, var(--tav-surface-1), var(--tav-success) 8%);
    }
    .tav-callout-warning {
        border-left-color: var(--tav-warning);
        background: color-mix(in oklab, var(--tav-surface-1), var(--tav-warning) 8%);
    }
    .tav-callout-error {
        border-left-color: var(--tav-error);
        background: color-mix(in oklab, var(--tav-surface-1), var(--tav-error) 8%);
    }

    /* ── Chip / tag ──────────────────────────────────────────────────── */
    .tav-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.1875rem 0.625rem;
        border-radius: var(--tav-radius-full);
        background: var(--tav-surface-variant);
        color: var(--tav-on-surface-variant);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-label-weight);
    }
    .tav-chip-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        border-radius: var(--tav-radius-full);
        color: var(--tav-on-surface-variant);
        cursor: pointer;
        background: transparent;
        border: 0;
    }
    .tav-chip-remove:hover {
        background: color-mix(
            in oklab,
            transparent,
            var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
        );
    }

    /* ── Spinner ─────────────────────────────────────────────────────── */
    .tav-spinner {
        display: inline-block;
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid var(--tav-outline-variant);
        border-top-color: var(--tav-primary);
        border-radius: var(--tav-radius-full);
        animation: tav-spin 0.6s linear infinite;
    }

    /* ── Progress bar ────────────────────────────────────────────────── */
    .tav-progress {
        width: 100%;
        height: 0.5rem;
        border-radius: var(--tav-radius-full);
        background: var(--tav-surface-variant);
        overflow: hidden;
    }
    .tav-progress-bar {
        height: 100%;
        border-radius: var(--tav-radius-full);
        background: var(--tav-primary);
        transition: width 0.2s ease;
    }

    /* ── Skeleton ────────────────────────────────────────────────────── */
    .tav-skeleton {
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface-2);
        animation: tav-pulse 1.5s ease-in-out infinite;
    }

    /* ── Dropdown menu (pairs with tavDisclosure) ────────────────────── */
    .tav-menu {
        min-width: 12rem;
        padding: 0.25rem;
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-md);
        background: var(--tav-surface-1);
        box-shadow: var(--tav-elevation-2);
    }
    .tav-menu-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        padding: 0.5rem 0.625rem;
        border-radius: var(--tav-radius-sm);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        text-decoration: none;
        text-align: left;
        background: transparent;
        border: 0;
        cursor: pointer;
    }
    .tav-menu-item:hover {
        background: color-mix(
            in oklab,
            transparent,
            var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
        );
    }
    .tav-menu-divider {
        height: 1px;
        margin: 0.25rem 0;
        background: var(--tav-outline-variant);
    }

    /* ── List ────────────────────────────────────────────────────────── */
    .tav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tav-list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--tav-outline-variant);
    }
    .tav-list-item:last-child {
        border-bottom: 0;
    }

    /* ── Description list ─────────────────────────────────────────────── */
    .tav-dl {
        display: grid;
        grid-template-columns: minmax(8rem, max-content) 1fr;
        gap: 0.5rem 1.5rem;
        margin: 0;
    }
    .tav-dt {
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-label-weight);
        color: var(--tav-on-surface-variant);
    }
    .tav-dd {
        margin: 0;
        color: var(--tav-on-surface);
    }

    /* ── Checkbox / radio (native, theme-coloured) ───────────────────── */
    .tav-checkbox,
    .tav-radio {
        width: 1rem;
        height: 1rem;
        accent-color: var(--tav-primary);
    }

    /* ── Segmented control ───────────────────────────────────────────── */
    .tav-segmented {
        display: inline-flex;
        padding: 0.1875rem;
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface-variant);
    }
    .tav-segmented-item {
        padding: 0.3125rem 0.75rem;
        border-radius: var(--tav-radius-xs);
        color: var(--tav-on-surface-variant);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-label-weight);
        text-decoration: none;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .tav-segmented-item.active,
    .tav-segmented-item[aria-selected="true"] {
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        box-shadow: var(--tav-elevation-1);
    }

    /* ── Page header ─────────────────────────────────────────────────── */
    .tav-page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 1.5rem;
    }
    .tav-page-title {
        margin: 0;
        font-size: var(--tav-type-headline-size);
        line-height: var(--tav-type-headline-line);
        font-weight: var(--tav-type-headline-weight);
        color: var(--tav-on-surface);
    }
    .tav-page-subtitle {
        margin: 0.25rem 0 0;
        font-size: var(--tav-type-body-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-section-title {
        margin: 0;
        font-size: var(--tav-type-title-size);
        line-height: var(--tav-type-title-line);
        font-weight: var(--tav-type-title-weight);
        color: var(--tav-on-surface);
    }

    /* ── App shell (layout structure) ────────────────────────────────── */
    .tav-shell {
        display: flex;
        min-height: 100vh;
        background: var(--tav-surface);
        color: var(--tav-on-surface);
    }
    .tav-app-sidebar {
        display: flex;
        flex-direction: column;
        width: 16rem;
        flex-shrink: 0;
        background: var(--tav-surface-1);
        border-right: 1px solid var(--tav-outline-variant);
    }
    .tav-app-main {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }
    .tav-app-topbar {
        display: flex;
        align-items: center;
        gap: 1rem;
        height: 4rem;
        padding: 0 1.5rem;
        background: var(--tav-surface-1);
        border-bottom: 1px solid var(--tav-outline-variant);
    }
    .tav-app-content {
        flex: 1;
        overflow-y: auto;
        padding: 2rem 1.5rem;
    }

/*
 * Token utilities — single-property helpers for the long tail (inline accents,
 * ad-hoc surfaces, links) where a full component is overkill. They sit in the
 * `tav-utilities` layer so a utility always wins over a component default, and
 * read ONLY `--tav-*` roles, so each recolours per brand. These are what a
 * ramp-utility migration (ADR-0359 phase 3: `text-tavuni-600` → `tav-text-primary`)
 * maps onto — reach for a component (`tav-btn`, `tav-badge`, `tav-link`, …) first;
 * use these only when no component fits the surface.
 */
    /* Foreground — text + icon `currentColor`. */
    .tav-text-primary { color: var(--tav-primary); }
    .tav-text-on-surface { color: var(--tav-on-surface); }
    .tav-text-muted { color: var(--tav-on-surface-variant); }
    .tav-text-success { color: var(--tav-success); }
    .tav-text-warning { color: var(--tav-warning); }
    .tav-text-error { color: var(--tav-error); }
    .tav-text-info { color: var(--tav-info); }
    .tav-text-accent { color: var(--tav-accent); }

    /* Surfaces — background, paired with its on-colour for filled roles so text
       stays legible no matter the brand. */
    .tav-bg-surface { background-color: var(--tav-surface); }
    .tav-bg-surface-1 { background-color: var(--tav-surface-1); }
    .tav-bg-surface-2 { background-color: var(--tav-surface-2); }
    .tav-bg-surface-3 { background-color: var(--tav-surface-3); }
    .tav-bg-primary { background-color: var(--tav-primary); color: var(--tav-on-primary); }
    .tav-bg-primary-container { background-color: var(--tav-primary-container); color: var(--tav-on-primary-container); }
    .tav-bg-success-container { background-color: var(--tav-success-container); color: var(--tav-on-success-container); }
    .tav-bg-warning-container { background-color: var(--tav-warning-container); color: var(--tav-on-warning-container); }
    .tav-bg-error-container { background-color: var(--tav-error-container); color: var(--tav-on-error-container); }
    .tav-bg-info-container { background-color: var(--tav-info-container); color: var(--tav-on-info-container); }
    .tav-bg-accent-container { background-color: var(--tav-accent-container); color: var(--tav-on-accent-container); }

    /* Borders. */
    .tav-border { border: 1px solid var(--tav-outline); }
    .tav-border-subtle { border: 1px solid var(--tav-outline-variant); }
    .tav-border-primary { border-color: var(--tav-primary); }

/*
 * Custom select (`<tav-select>`) — a fully-managed dropdown. A native `<select>`
 * draws its option list with the OS/UA, which ignores `accent-color`, so the
 * selected option stays the system blue no matter the brand. This renders the
 * list in the page instead, so EVERY part — including the selected + active
 * option — reads the `--tav-*` roles and recolours per brand. The custom element
 * (js/tav-elements.js) builds the trigger + listbox + a hidden form input from
 * `<tav-option>` children; the styling lives here so it themes like every other
 * component.
 */
    tav-select {
        position: relative;
        display: block;
    }
    .tav-select-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid color-mix(in oklab, var(--tav-primary) 28%, var(--tav-outline));
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        line-height: var(--tav-type-body-line);
        text-align: left;
        cursor: pointer;
    }
    .tav-select-trigger[aria-expanded="true"] {
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }
    .tav-select-caret {
        inline-size: 1rem;
        block-size: 1rem;
        flex-shrink: 0;
        color: var(--tav-on-surface-variant);
        transition: transform 0.15s ease;
    }
    .tav-select-trigger[aria-expanded="true"] .tav-select-caret {
        transform: rotate(180deg);
    }
    .tav-select-listbox {
        position: absolute;
        z-index: 50;
        inset-block-start: calc(100% + 0.25rem);
        inset-inline: 0;
        max-block-size: 15rem;
        overflow-y: auto;
        margin: 0;
        padding: 0.25rem;
        list-style: none;
        background: var(--tav-surface);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        box-shadow: var(--tav-elevation-2);
    }
    .tav-select-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.6rem;
        border-radius: var(--tav-radius-xs);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        cursor: pointer;
    }
    /* Keyboard-roving / hover highlight — a subtle brand tint. */
    .tav-select-option:hover,
    .tav-select-option[data-active="true"] {
        background: color-mix(in oklab, var(--tav-primary), transparent 88%);
    }
    /* The SELECTED option — full brand colour. This is the surface a native
       `<select>` cannot theme; here it tracks the active brand in both modes. */
    .tav-select-option[aria-selected="true"] {
        background: var(--tav-primary);
        color: var(--tav-on-primary);
    }
    .tav-select-option[aria-selected="true"]:hover,
    .tav-select-option[aria-selected="true"][data-active="true"] {
        background: color-mix(in oklab, var(--tav-primary), var(--tav-on-primary) 12%);
    }
    .tav-select-check {
        inline-size: 1rem;
        block-size: 1rem;
        margin-inline-start: auto;
        opacity: 0;
    }
    .tav-select-option[aria-selected="true"] .tav-select-check {
        opacity: 1;
    }

/*
 * Custom date picker (`<tav-date>`) — a native `<input type="date">` opens an
 * OS/UA calendar that can't be themed; this renders the calendar in the page so
 * the selected day, the today marker and the keyboard-roving cell all read the
 * `--tav-*` roles and recolour per brand. (js/tav-elements.js)
 */
    tav-date {
        position: relative;
        display: block;
    }
    .tav-date-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        line-height: var(--tav-type-body-line);
        text-align: left;
        cursor: pointer;
    }
    .tav-date-trigger[aria-expanded="true"] {
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }
    .tav-date-trigger.is-empty {
        color: var(--tav-on-surface-variant);
    }
    .tav-date-icon {
        inline-size: 1rem;
        block-size: 1rem;
        flex-shrink: 0;
        color: var(--tav-on-surface-variant);
    }
    .tav-date-popup {
        position: absolute;
        z-index: 50;
        inset-block-start: calc(100% + 0.25rem);
        inset-inline-start: 0;
        inline-size: 17rem;
        padding: 0.75rem;
        background: var(--tav-surface);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        box-shadow: var(--tav-elevation-2);
    }
    .tav-date-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block-end: 0.5rem;
    }
    .tav-date-title {
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-title-weight);
        color: var(--tav-on-surface);
    }
    .tav-date-navbtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border: 0;
        border-radius: var(--tav-radius-sm);
        background: transparent;
        color: var(--tav-on-surface-variant);
        cursor: pointer;
    }
    .tav-date-navbtn:hover {
        background: color-mix(in oklab, var(--tav-on-surface), transparent 92%);
        color: var(--tav-on-surface);
    }
    .tav-date-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }
    .tav-date-dow {
        padding-block: 0.25rem;
        text-align: center;
        font-size: 0.6875rem;
        font-weight: var(--tav-type-label-weight);
        color: var(--tav-on-surface-variant);
    }
    .tav-date-day {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        border: 0;
        border-radius: var(--tav-radius-sm);
        background: transparent;
        color: var(--tav-on-surface);
        font-size: var(--tav-type-label-size);
        cursor: pointer;
    }
    .tav-date-day:hover,
    .tav-date-day[data-active="true"] {
        background: color-mix(in oklab, var(--tav-primary), transparent 88%);
    }
    .tav-date-day.is-outside {
        color: var(--tav-on-surface-variant);
        opacity: 0.5;
    }
    .tav-date-day.is-today {
        box-shadow: inset 0 0 0 1px var(--tav-primary);
    }
    .tav-date-day[aria-selected="true"] {
        background: var(--tav-primary);
        color: var(--tav-on-primary);
    }
    .tav-date-day[aria-selected="true"]:hover,
    .tav-date-day[aria-selected="true"][data-active="true"] {
        background: color-mix(in oklab, var(--tav-primary), var(--tav-on-primary) 12%);
    }

/*
 * Custom colour picker (`<tav-color>`) — a native `<input type="color">` opens
 * the OS colour dialog; this is a full in-page HSV picker (saturation/value
 * area + hue slider + hex). Only LAYOUT lives here (token-only, so the no-colour
 * gate stays green); the spectrum gradients, the swatch fill and the drag thumbs
 * are inherently spectrum colours and are set inline by js/tav-elements.js.
 */
    tav-color {
        position: relative;
        display: block;
    }
    .tav-color-trigger {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.375rem 0.5rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        text-align: left;
        cursor: pointer;
    }
    .tav-color-trigger[aria-expanded="true"] {
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }
    .tav-color-swatch {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        flex-shrink: 0;
        border-radius: var(--tav-radius-xs);
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tav-on-surface), transparent 80%);
        /* fill colour set inline */
    }
    .tav-color-value {
        font-variant-numeric: tabular-nums;
        text-transform: uppercase;
    }
    .tav-color-popup {
        position: absolute;
        z-index: 50;
        inset-block-start: calc(100% + 0.25rem);
        inset-inline-start: 0;
        inline-size: 15rem;
        padding: 0.75rem;
        background: var(--tav-surface);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        box-shadow: var(--tav-elevation-2);
    }
    .tav-color-area {
        position: relative;
        inline-size: 100%;
        block-size: 9rem;
        border-radius: var(--tav-radius-xs);
        cursor: crosshair;
        touch-action: none;
        /* SV gradient set inline */
    }
    .tav-color-hue {
        position: relative;
        inline-size: 100%;
        block-size: 0.75rem;
        margin-block-start: 0.625rem;
        border-radius: var(--tav-radius-full);
        cursor: ew-resize;
        touch-action: none;
        /* spectrum gradient set inline */
    }
    .tav-color-thumb {
        position: absolute;
        inline-size: 0.85rem;
        block-size: 0.85rem;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        /* contrast ring set inline (must read on any picked colour) */
    }
    .tav-color-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-block-start: 0.625rem;
    }
    .tav-color-hex {
        flex: 1;
        min-inline-size: 0;
        padding: 0.35rem 0.5rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        font-variant-numeric: tabular-nums;
        text-transform: uppercase;
    }
    .tav-color-hex:focus {
        outline: none;
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }

/*
 * Custom file upload (`<tav-file>`) — wraps a real (hidden) `<input type="file">`
 * with a themed dropzone + file list, so the OS-styled "Choose file" button is
 * replaced by on-brand chrome while the input still carries the file into a
 * normal form submit. (js/tav-elements.js)
 */
    tav-file {
        display: block;
    }
    .tav-file {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 1.25rem 1rem;
        text-align: center;
        border: 1.5px dashed var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        cursor: pointer;
        transition: border-color 0.15s ease, background 0.15s ease;
    }
    .tav-file:hover,
    .tav-file.is-drag {
        border-color: var(--tav-primary);
        background: color-mix(in oklab, var(--tav-primary), transparent 94%);
    }
    .tav-file-icon {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        color: var(--tav-on-surface-variant);
    }
    .tav-file-text {
        font-size: var(--tav-type-body-size);
        color: var(--tav-on-surface);
    }
    .tav-file-em {
        color: var(--tav-primary);
        font-weight: var(--tav-type-title-weight);
    }
    .tav-file-hint {
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-file-list {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        inline-size: 100%;
        margin-block-start: 0.5rem;
    }
    .tav-file-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.5rem;
        border-radius: var(--tav-radius-xs);
        background: var(--tav-surface-1);
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface);
    }
    .tav-file-item-name {
        flex: 1;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: start;
    }
    .tav-file-item-icon {
        flex-shrink: 0;
        color: var(--tav-on-surface-variant);
    }
    .tav-file-size {
        color: var(--tav-on-surface-variant);
    }
    .tav-file-remove {
        display: inline-flex;
        border: 0;
        background: transparent;
        color: var(--tav-on-surface-variant);
        cursor: pointer;
        line-height: 1;
    }
    .tav-file-remove:hover {
        color: var(--tav-error);
    }

/*
 * Custom range slider (`<tav-range>`) — a track + fill + thumb we fully control
 * (the native range thumb/track only partly honour CSS). Hidden input carries
 * the value. (js/tav-elements.js)
 */
    tav-range {
        display: block;
        padding-block: 0.5rem;
    }
    .tav-range-track {
        position: relative;
        inline-size: 100%;
        block-size: 0.375rem;
        border-radius: var(--tav-radius-full);
        background: var(--tav-surface-3);
        cursor: pointer;
        touch-action: none;
    }
    .tav-range-fill {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        border-radius: var(--tav-radius-full);
        background: var(--tav-primary);
    }
    .tav-range-thumb {
        position: absolute;
        inset-block-start: 50%;
        inline-size: 1rem;
        block-size: 1rem;
        border-radius: 50%;
        background: var(--tav-primary);
        transform: translate(-50%, -50%);
        box-shadow: 0 0 0 3px var(--tav-surface);
        cursor: grab;
    }
    .tav-range-thumb:active {
        cursor: grabbing;
    }

/*
 * Custom number input (`<tav-number>`) — a token-themed numeric field with our
 * own −/+ steppers (the native spinners are tiny + OS-styled). (js/tav-elements.js)
 */
    tav-number {
        display: block;
    }
    .tav-number {
        display: inline-flex;
        align-items: stretch;
        inline-size: 100%;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        overflow: hidden;
    }
    .tav-number:focus-within {
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }
    .tav-number-input {
        flex: 1;
        min-inline-size: 0;
        border: 0;
        padding: 0.5rem 0.75rem;
        background: transparent;
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        font-variant-numeric: tabular-nums;
        text-align: center;
        appearance: textfield;
        -moz-appearance: textfield;
    }
    .tav-number-input:focus {
        outline: none;
    }
    .tav-number-input::-webkit-outer-spin-button,
    .tav-number-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .tav-number-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.25rem;
        border: 0;
        background: transparent;
        color: var(--tav-on-surface-variant);
        font-size: 1.125rem;
        line-height: 1;
        cursor: pointer;
        user-select: none;
    }
    .tav-number-btn:hover:not(:disabled) {
        background: color-mix(in oklab, var(--tav-on-surface), transparent 92%);
        color: var(--tav-on-surface);
    }
    .tav-number-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

/*
 * Steps / stepper (`.tav-steps`) — a static progress indicator for wizards
 * (onboarding). Pure CSS + markup (the app marks each step `is-done`/`is-active`);
 * no JS. Connector + dot + label all read the `--tav-*` roles.
 */
    .tav-steps {
        display: flex;
        align-items: flex-start;
    }
    .tav-step {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .tav-step:not(:first-child)::before {
        content: "";
        position: absolute;
        inset-block-start: 0.8125rem;
        inset-inline-end: 50%;
        inline-size: 100%;
        block-size: 2px;
        background: var(--tav-outline-variant);
    }
    .tav-step.is-done:not(:first-child)::before,
    .tav-step.is-active:not(:first-child)::before {
        background: var(--tav-primary);
    }
    .tav-step-dot {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        border-radius: 50%;
        border: 2px solid var(--tav-outline-variant);
        background: var(--tav-surface);
        color: var(--tav-on-surface-variant);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-title-weight);
    }
    .tav-step.is-active .tav-step-dot {
        border-color: var(--tav-primary);
        color: var(--tav-primary);
    }
    .tav-step.is-done .tav-step-dot {
        border-color: var(--tav-primary);
        background: var(--tav-primary);
        color: var(--tav-on-primary);
    }
    .tav-step-label {
        margin-block-start: 0.375rem;
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-step.is-active .tav-step-label {
        color: var(--tav-on-surface);
        font-weight: var(--tav-type-title-weight);
    }

/*
 * Tree (`<tav-tree>`) — a hierarchical, expand/collapse + selectable view, built
 * for the Master→Reseller→Tenant party hierarchy. Declarative `<tav-treenode
 * label="" [expanded] [selected]>` children; the element renders the WAI-ARIA
 * tree (roving tabindex, arrow keys). Selected row = `--tav-primary`. (js)
 */
    tav-tree {
        display: block;
    }
    .tav-tree-root,
    .tav-tree-group {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tav-tree-row {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.3rem 0.5rem;
        border-radius: var(--tav-radius-xs);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        cursor: pointer;
    }
    .tav-tree-row:hover {
        background: color-mix(in oklab, var(--tav-on-surface), transparent 94%);
    }
    li[role="treeitem"][aria-selected="true"] > .tav-tree-row {
        background: var(--tav-primary);
        color: var(--tav-on-primary);
    }
    li[role="treeitem"] > .tav-tree-row:focus-visible,
    li[role="treeitem"]:focus-visible > .tav-tree-row {
        outline: 2px solid var(--tav-primary);
        outline-offset: -2px;
    }
    li[role="treeitem"][aria-selected="true"]:focus-visible > .tav-tree-row {
        outline-color: var(--tav-on-primary);
    }
    .tav-tree-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1rem;
        block-size: 1rem;
        flex-shrink: 0;
        color: var(--tav-on-surface-variant);
        transition: transform 0.15s ease;
    }
    li[role="treeitem"][aria-expanded="true"] > .tav-tree-row > .tav-tree-toggle {
        transform: rotate(90deg);
    }
    li[role="treeitem"][aria-selected="true"] > .tav-tree-row > .tav-tree-toggle {
        color: var(--tav-on-primary);
    }
    .tav-tree-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/*
 * Table enhancements (`<tav-table>`) — wraps a `.tav-table` and adds client-side
 * column SORT (`<th data-sort[="number"]>`) + an optional text FILTER (`filter`
 * attribute). The active sort arrow + focus ring read `--tav-primary`. The JS
 * (tav-elements.js) reorders/hides the already-rendered rows; for large sets the
 * server still paginates. (CSS token-only.)
 */
    tav-table {
        display: block;
    }
    .tav-table-filter {
        margin-block-end: 0.625rem;
        max-inline-size: 18rem;
    }
    .tav-table th.tav-th-sort {
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }
    .tav-table th.tav-th-sort::after {
        content: "↕";
        margin-inline-start: 0.25rem;
        font-size: 0.85em;
        opacity: 0.35;
    }
    .tav-table th.tav-th-sort[aria-sort="ascending"]::after {
        content: "↑";
        color: var(--tav-primary);
        opacity: 1;
    }
    .tav-table th.tav-th-sort[aria-sort="descending"]::after {
        content: "↓";
        color: var(--tav-primary);
        opacity: 1;
    }
    .tav-table th.tav-th-sort:focus-visible {
        outline: 2px solid var(--tav-primary);
        outline-offset: -2px;
    }

/*
 * Tooltip (`[data-tav-tooltip]`) — a themed hover/focus tip on any element,
 * replacing the slow OS `title` bubble. One reused floating node, positioned by
 * the JS (tav-elements.js). Neutral surface (a tip is info, not brand).
 */
    .tav-tooltip {
        position: fixed;
        z-index: 100;
        max-inline-size: 16rem;
        padding: 0.35rem 0.6rem;
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface-3);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-label-size);
        line-height: 1.35;
        box-shadow: var(--tav-elevation-2);
        pointer-events: none;
    }

/*
 * Popconfirm (`[data-tav-confirm]`) — an inline "are you sure?" popover that
 * defers a button's action (delete / destructive) until confirmed. The JS
 * intercepts the click, shows this, and re-fires on confirm.
 */
    .tav-confirm {
        position: fixed;
        z-index: 100;
        inline-size: 15rem;
        padding: 0.75rem;
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        border: 1px solid var(--tav-outline-variant);
        box-shadow: var(--tav-elevation-3);
    }
    .tav-confirm-msg {
        display: flex;
        gap: 0.5rem;
        margin-block-end: 0.625rem;
        font-size: var(--tav-type-body-size);
        color: var(--tav-on-surface);
    }
    .tav-confirm-icon {
        flex-shrink: 0;
        inline-size: 1.1rem;
        block-size: 1.1rem;
        color: var(--tav-warning);
    }
    .tav-confirm-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
    }

/*
 * Drawer (`<tav-drawer id title>`) — a slide-in side panel + backdrop, opened by
 * `[data-tav-drawer="id"]` triggers. For detail/edit without leaving the list.
 * Token-only (the backdrop scrim is a color-mix of on-surface). (js)
 */
    .tav-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 90;
        background: color-mix(in oklab, var(--tav-on-surface), transparent 55%);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .tav-drawer-backdrop.is-open {
        opacity: 1;
    }
    .tav-drawer-panel {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        z-index: 91;
        inline-size: min(26rem, 100%);
        display: flex;
        flex-direction: column;
        background: var(--tav-surface);
        box-shadow: var(--tav-elevation-3);
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }
    .tav-drawer-panel.is-open {
        transform: translateX(0);
    }
    .tav-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-block-end: 1px solid var(--tav-outline-variant);
    }
    .tav-drawer-title {
        margin: 0;
        font-size: var(--tav-type-title-size);
        font-weight: var(--tav-type-title-weight);
        color: var(--tav-on-surface);
    }
    .tav-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2rem;
        block-size: 2rem;
        flex-shrink: 0;
        border: 0;
        border-radius: var(--tav-radius-sm);
        background: transparent;
        color: var(--tav-on-surface-variant);
        cursor: pointer;
    }
    .tav-drawer-close:hover {
        background: color-mix(in oklab, var(--tav-on-surface), transparent 92%);
        color: var(--tav-on-surface);
    }
    .tav-drawer-body {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem;
    }

/*
 * Cascader (`<tav-cascader>`) — multi-level selection in one dropdown (columns),
 * for hierarchical picks like Reseller → Tenant. Declarative nested `<tav-option
 * value label>`; value = the leaf, label = the path. Active column item + leaf
 * selection read `--tav-primary`. (js)
 */
    tav-cascader {
        position: relative;
        display: block;
    }
    .tav-cascader-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        text-align: left;
        cursor: pointer;
    }
    .tav-cascader-trigger[aria-expanded="true"] {
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 1px var(--tav-primary);
    }
    .tav-cascader-trigger.is-empty {
        color: var(--tav-on-surface-variant);
    }
    .tav-cascader-caret {
        inline-size: 1rem;
        block-size: 1rem;
        flex-shrink: 0;
        color: var(--tav-on-surface-variant);
    }
    .tav-cascader-popup {
        position: absolute;
        z-index: 50;
        inset-block-start: calc(100% + 0.25rem);
        inset-inline-start: 0;
        display: flex;
        max-block-size: 16rem;
        background: var(--tav-surface);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        box-shadow: var(--tav-elevation-2);
    }
    .tav-cascader-col {
        min-inline-size: 11rem;
        overflow-y: auto;
        padding: 0.25rem;
        border-inline-end: 1px solid var(--tav-outline-variant);
    }
    .tav-cascader-col:last-child {
        border-inline-end: 0;
    }
    .tav-cascader-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.4rem 0.6rem;
        border-radius: var(--tav-radius-xs);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        cursor: pointer;
    }
    .tav-cascader-option:hover {
        background: color-mix(in oklab, var(--tav-on-surface), transparent 94%);
    }
    .tav-cascader-option.is-active {
        background: color-mix(in oklab, var(--tav-primary), transparent 88%);
    }
    .tav-cascader-option.is-leaf-selected {
        color: var(--tav-primary);
        font-weight: var(--tav-type-title-weight);
    }
    .tav-cascader-opt-caret {
        inline-size: 0.85rem;
        block-size: 0.85rem;
        flex-shrink: 0;
        color: var(--tav-on-surface-variant);
    }

/*
 * Timeline (`.tav-timeline` / `.tav-timeline-item`) — a vertical event feed for
 * audit / activity. Static markup; the dot is brand, the connector is the
 * outline. `.is-muted` greys a step.
 */
    .tav-timeline {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .tav-timeline-item {
        position: relative;
        padding-inline-start: 1.5rem;
        padding-block-end: 1.25rem;
    }
    .tav-timeline-item:not(:last-child)::before {
        content: "";
        position: absolute;
        inset-block: 0.5rem 0;
        inset-inline-start: 0.28rem;
        inline-size: 2px;
        background: var(--tav-outline-variant);
    }
    .tav-timeline-dot {
        position: absolute;
        inset-block-start: 0.35rem;
        inset-inline-start: 0;
        inline-size: 0.7rem;
        block-size: 0.7rem;
        border-radius: 50%;
        background: var(--tav-primary);
        box-shadow: 0 0 0 3px var(--tav-surface);
    }
    .tav-timeline-item.is-muted .tav-timeline-dot {
        background: var(--tav-outline);
    }
    .tav-timeline-time {
        font-size: var(--tav-type-label-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-timeline-title {
        font-size: var(--tav-type-body-size);
        color: var(--tav-on-surface);
    }

/*
 * Collapse / Accordion — a styled native `<details class="tav-collapse">`. No JS;
 * the chevron rotates on `[open]`.
 */
    .tav-collapse {
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        overflow: hidden;
    }
    .tav-collapse + .tav-collapse {
        margin-block-start: 0.5rem;
    }
    .tav-collapse > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--tav-surface-1);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
        font-weight: var(--tav-type-title-weight);
        cursor: pointer;
        list-style: none;
    }
    .tav-collapse > summary::-webkit-details-marker {
        display: none;
    }
    .tav-collapse > summary::after {
        content: "›";
        color: var(--tav-on-surface-variant);
        font-size: 1.25em;
        line-height: 1;
        transition: transform 0.15s ease;
    }
    .tav-collapse[open] > summary::after {
        transform: rotate(90deg);
    }
    .tav-collapse-body {
        padding: 0.75rem 1rem;
        border-block-start: 1px solid var(--tav-outline-variant);
        color: var(--tav-on-surface);
        font-size: var(--tav-type-body-size);
    }

/*
 * Result (`.tav-result.tav-result-{success,error,info}`) — a full-width
 * success / error / empty state (e.g. "Payment received", a 404). Static markup.
 */
    .tav-result {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 2.5rem 1.5rem;
        text-align: center;
    }
    .tav-result-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 3rem;
        block-size: 3rem;
        margin-block-end: 0.5rem;
        border-radius: 50%;
    }
    .tav-result-success .tav-result-icon {
        background: var(--tav-success-container);
        color: var(--tav-on-success-container);
    }
    .tav-result-error .tav-result-icon {
        background: var(--tav-error-container);
        color: var(--tav-on-error-container);
    }
    .tav-result-info .tav-result-icon {
        background: var(--tav-primary-container);
        color: var(--tav-on-primary-container);
    }
    .tav-result-title {
        font-size: var(--tav-type-headline-size);
        font-weight: var(--tav-type-title-weight);
        color: var(--tav-on-surface);
    }
    .tav-result-text {
        max-inline-size: 28rem;
        font-size: var(--tav-type-body-size);
        color: var(--tav-on-surface-variant);
    }
    .tav-result-actions {
        display: flex;
        gap: 0.5rem;
        margin-block-start: 0.75rem;
    }

/*
 * Rate (`<tav-rate>`) — star rating. Filled stars are brand, empty are outline;
 * the group carries the focus ring (slider semantics live on it).
 */
    .tav-rate {
        display: inline-flex;
        gap: 0.15rem;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        border-radius: var(--tav-radius-sm);
    }
    .tav-rate:focus-visible {
        outline: 2px solid var(--tav-primary);
        outline-offset: 3px;
    }
    .tav-rate-star {
        color: var(--tav-outline-variant);
        transition: color 0.1s ease;
    }
    .tav-rate-star.is-on {
        color: var(--tav-primary);
    }

/*
 * Tag input (`<tav-tag-input>`) — chips in a text field; chips use the brand
 * container tone, the field grows to fill.
 */
    .tav-taginput {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem;
        min-block-size: 2.5rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        cursor: text;
    }
    .tav-taginput:focus-within {
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--tav-primary) 18%, transparent);
    }
    .tav-taginput-field {
        flex: 1;
        min-inline-size: 6rem;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--tav-on-surface);
        font: inherit;
    }
    .tav-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.1rem 0.2rem 0.1rem 0.55rem;
        border-radius: 999px;
        background: var(--tav-primary-container);
        color: var(--tav-on-primary-container);
        font-size: var(--tav-type-label-size);
    }
    .tav-tag-x {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 1.15rem;
        block-size: 1.15rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .tav-tag-x:hover {
        background: color-mix(in oklab, var(--tav-on-primary-container) 20%, transparent);
    }
    .tav-tag-x svg {
        inline-size: 0.8rem;
        block-size: 0.8rem;
    }

/*
 * Autocomplete (`<tav-autocomplete>`) — free-text field with a filtered popup;
 * active/hover option uses the brand container tone.
 */
    .tav-ac {
        position: relative;
    }
    .tav-ac-field {
        inline-size: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        font: inherit;
    }
    .tav-ac-field:focus {
        outline: 0;
        border-color: var(--tav-primary);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--tav-primary) 18%, transparent);
    }
    .tav-ac-list {
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(100% + 4px);
        z-index: 30;
        max-block-size: 14rem;
        overflow: auto;
        padding: 0.25rem;
        background: var(--tav-surface);
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        box-shadow: 0 8px 24px color-mix(in oklab, var(--tav-on-surface) 14%, transparent);
    }
    .tav-ac-option {
        padding: 0.45rem 0.6rem;
        border-radius: calc(var(--tav-radius-sm) - 2px);
        color: var(--tav-on-surface);
        cursor: pointer;
    }
    .tav-ac-option:hover,
    .tav-ac-option.is-active {
        background: var(--tav-primary-container);
        color: var(--tav-on-primary-container);
    }

/*
 * Time (`<tav-time>`) — HH:MM segmented spinbuttons; tabular figures, each
 * segment focusable, the active segment carries the ring.
 */
    .tav-time {
        display: inline-flex;
        align-items: center;
        gap: 0.1rem;
        padding: 0.35rem 0.55rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        font-variant-numeric: tabular-nums;
    }
    /* tav-datetime lays its child <tav-date> + <tav-time> out side by side. */
    .tav-datetime {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .tav-time-seg {
        min-inline-size: 1.6rem;
        padding: 0.1rem 0.25rem;
        text-align: center;
        color: var(--tav-on-surface);
        border-radius: calc(var(--tav-radius-sm) - 3px);
        cursor: ns-resize;
    }
    .tav-time-seg:hover {
        background: var(--tav-surface-2);
    }
    .tav-time-seg:focus-visible {
        outline: 2px solid var(--tav-primary);
        outline-offset: 1px;
    }
    .tav-time-sep {
        color: var(--tav-on-surface-variant);
    }

/*
 * Transfer (`<tav-transfer>`) — dual list with move buttons; marked rows and the
 * hovered move button use the brand container tone.
 */
    .tav-transfer {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 0.75rem;
        align-items: stretch;
    }
    .tav-transfer-pane {
        display: flex;
        flex-direction: column;
        min-block-size: 11rem;
        border: 1px solid var(--tav-outline-variant);
        border-radius: var(--tav-radius-sm);
        overflow: hidden;
    }
    .tav-transfer-title {
        padding: 0.5rem 0.75rem;
        background: var(--tav-surface-1);
        color: var(--tav-on-surface-variant);
        font-size: var(--tav-type-label-size);
        font-weight: var(--tav-type-title-weight);
        border-block-end: 1px solid var(--tav-outline-variant);
    }
    .tav-transfer-list {
        flex: 1;
        list-style: none;
        margin: 0;
        padding: 0.25rem;
        overflow: auto;
    }
    .tav-transfer-item {
        padding: 0.4rem 0.6rem;
        border-radius: calc(var(--tav-radius-sm) - 2px);
        color: var(--tav-on-surface);
        cursor: pointer;
    }
    .tav-transfer-item:hover {
        background: var(--tav-surface-2);
    }
    .tav-transfer-item.is-marked {
        background: var(--tav-primary-container);
        color: var(--tav-on-primary-container);
    }
    .tav-transfer-item:focus-visible {
        outline: 2px solid var(--tav-primary);
        outline-offset: -2px;
    }
    .tav-transfer-mid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.5rem;
    }
    .tav-transfer-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.25rem;
        block-size: 2.25rem;
        border: 1px solid var(--tav-outline);
        border-radius: var(--tav-radius-sm);
        background: var(--tav-surface);
        color: var(--tav-on-surface);
        cursor: pointer;
    }
    .tav-transfer-btn:hover:not(:disabled) {
        background: var(--tav-primary-container);
        color: var(--tav-on-primary-container);
        border-color: transparent;
    }
    .tav-transfer-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    .tav-transfer-btn svg {
        inline-size: 1.1rem;
        block-size: 1.1rem;
    }

/*
 * Unified disabled state for every form-associated custom element. The base
 * class reflects the `disabled` property to the host attribute, so `[disabled]`
 * dims + inerts the whole control uniformly — one rule, every surface (also
 * fires for a `<fieldset disabled>` ancestor via `formDisabledCallback`).
 */
    :is(
        tav-select,
        tav-date,
        tav-color,
        tav-range,
        tav-number,
        tav-time,
        tav-rate,
        tav-tag-input,
        tav-autocomplete,
        tav-cascader,
        tav-transfer
    )[disabled] {
        opacity: 0.55;
        pointer-events: none;
    }

/* ════════════════════════════════════════════════════════════════════════
   CONSOLE VOCABULARY — components ported from the console's component
   layer (console input.css) into the shared tav-ui set, re-tokenised onto
   `--tav-*`. The console authored these as `tavuni-*`; the big-bang migration
   (ADR-0361) renamed them to `tav-*`. Token-only — no
   build step, so they render identically in either host.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Table cell colour variants ──────────────────────────────────────────
   The base table look comes from the element-scoped `.tav-table th/td/tr`
   rules above: a `<table class="tav-table">` styles its bare cells, so the
   renamed per-cell `.tav-th`/`.tav-td`/`.tav-tr`/`.tav-thead`/`.tav-tbody`
   classes need no rule of their own (inert by design). Only the colour
   *overrides* are declared, and they must out-rank `.tav-table td` (0,1,1) —
   `td.tav-td-muted` matches that specificity and wins on source order. */
td.tav-td-muted {
    color: var(--tav-on-surface-variant);
}
td.tav-td-mono {
    color: var(--tav-on-surface-variant);
    font-family: ui-monospace, monospace;
    font-size: var(--tav-type-label-size);
}

/* ── Pivot table with sticky first/last columns (Translation Manager) ────
   Self-contained (does not lean on `.tav-table`): base look + pinned code /
   actions columns so a wide one-column-per-locale grid keeps the row anchor
   and the action buttons in view while the middle scrolls. */
.tav-table-pivot {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tav-type-body-size);
}
.tav-table-pivot thead {
    background: var(--tav-surface-2);
}
.tav-table-pivot th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: var(--tav-type-label-size);
    font-weight: var(--tav-type-title-weight);
    color: var(--tav-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tav-table-pivot td {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--tav-outline-variant);
    color: var(--tav-on-surface);
}
.tav-table-pivot .tav-th-sticky-left,
.tav-table-pivot .tav-td-sticky-left {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--tav-surface);
    box-shadow: inset -1px 0 0 0 var(--tav-outline-variant);
}
.tav-table-pivot .tav-th-sticky-right,
.tav-table-pivot .tav-td-sticky-right {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--tav-surface);
    box-shadow: inset 1px 0 0 0 var(--tav-outline-variant);
}
.tav-table-pivot thead .tav-th-sticky-left,
.tav-table-pivot thead .tav-th-sticky-right {
    z-index: 2;
    background: var(--tav-surface-2);
}
.tav-table-pivot tr:hover .tav-td-sticky-left,
.tav-table-pivot tr:hover .tav-td-sticky-right {
    background: color-mix(
        in oklab,
        var(--tav-surface),
        var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
    );
}

/* ── Card footer (header / body / title already shared above) ──────────── */
.tav-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--tav-outline-variant);
}

/* ── Sidebar section heading ─────────────────────────────────────────────
   Uppercase group label between nav clusters. The muted role is the ≥4.5:1
   `on-surface-variant` (the console bumped this off /40 for axe-core AA). */
.tav-sidebar-section {
    padding: 1.5rem 0.75rem 0.5rem;
    font-size: var(--tav-type-label-size);
    font-weight: var(--tav-type-title-weight);
    color: var(--tav-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Active text-link for sub-nav tabs — pairs with `.tav-link` ─────────── */
.tav-link-active {
    color: var(--tav-on-surface);
    font-weight: var(--tav-type-title-weight);
    border-bottom: 2px solid var(--tav-primary);
    padding-bottom: 0.125rem;
}

/* ── Badge variants (base + success/warning/error/info/neutral above) ──── */
.tav-badge-danger {
    background: var(--tav-error-container);
    color: var(--tav-on-error-container);
}
.tav-badge-muted {
    background: var(--tav-surface-variant);
    color: var(--tav-on-surface-variant);
}
.tav-badge-secondary {
    background: var(--tav-secondary-container);
    color: var(--tav-on-secondary-container);
}

/* ── Inline code — sibling of `.tav-kbd` (keystrokes) for code spans ───── */
.tav-code {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--tav-radius-xs);
    background: var(--tav-surface-2);
    color: var(--tav-on-surface-variant);
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
}

/* ── Locale picker (Translation Manager — `<details>`-driven, no JS) ──────
   `<details class="tav-locale-picker">` with a summary chip and an absolute
   popout on a raised surface tier so it reads against both the page and the
   card it sits inside. The container is the positioning context. */
.tav-locale-picker {
    position: relative;
    display: inline-block;
}
.tav-locale-picker > .tav-locale-picker-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-sm);
    background: var(--tav-surface);
    color: var(--tav-on-surface);
    font-size: var(--tav-type-body-size);
    font-weight: var(--tav-type-label-weight);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    list-style: none;
}
.tav-locale-picker > .tav-locale-picker-summary::-webkit-details-marker {
    display: none;
}
.tav-locale-picker[open] > .tav-locale-picker-summary {
    background: var(--tav-surface-1);
}
.tav-locale-picker-badge {
    padding: 0.0625rem 0.375rem;
    border-radius: var(--tav-radius-xs);
    background: var(--tav-surface-variant);
    color: var(--tav-on-surface-variant);
    font-family: ui-monospace, monospace;
    font-size: var(--tav-type-label-size);
}
.tav-locale-picker-chevron {
    color: var(--tav-on-surface-variant);
    transition: transform 0.15s ease;
}
.tav-locale-picker[open] .tav-locale-picker-chevron {
    transform: rotate(180deg);
}
.tav-locale-picker-popout {
    position: absolute;
    z-index: 20;
    margin-top: 0.5rem;
    min-width: 16rem;
    max-height: 18rem;
    padding: 0.75rem;
    overflow-y: auto;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-md);
    background: var(--tav-surface-3);
    box-shadow: var(--tav-elevation-3);
}
.tav-locale-picker-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--tav-outline-variant);
    font-size: var(--tav-type-label-size);
}
.tav-locale-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tav-locale-picker-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0.25rem;
    border-radius: var(--tav-radius-xs);
    font-size: var(--tav-type-body-size);
    white-space: nowrap;
    cursor: pointer;
}
.tav-locale-picker-row:hover {
    background: color-mix(
        in oklab,
        transparent,
        var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
    );
}

/* ── Size & style variants (btn-sm/-xs/-outline, badge-sm/
   -outline, input-sm) ───────────────────── */
.tav-btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: var(--tav-type-label-size);
}
.tav-btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
}
/* Large CTA button — marketing-site hero/pricing actions. */
.tav-btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: var(--tav-type-title-size);
}
/* Icon-only square button. */
.tav-btn-icon {
    padding: 0.5rem;
    aspect-ratio: 1 / 1;
}
/* Neutral outlined button: transparent fill, visible
   edge, subtle hover wash — distinct from the filled primary/secondary. */
.tav-btn-outline {
    background: transparent;
    border-color: var(--tav-outline);
    color: var(--tav-on-surface);
}
.tav-btn-outline:hover {
    background: color-mix(
        in oklab,
        transparent,
        var(--tav-on-surface) calc(var(--tav-state-hover) * 100%)
    );
    border-color: var(--tav-on-surface);
}
.tav-badge-sm {
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
}
/* Outlined badge: edge, no fill. */
.tav-badge-outline {
    background: transparent;
    border: 1px solid var(--tav-outline-variant);
    color: var(--tav-on-surface-variant);
}
.tav-input-sm {
    padding: 0.375rem 0.625rem;
    font-size: var(--tav-type-label-size);
}

/* ── Native <dialog> modal ──────
   The browser supplies centring + a ::backdrop + Esc-to-close for a
   `<dialog>` opened via showModal(); we only reset its chrome and tint the
   backdrop. The inner card keeps `.tav-modal`; the button row is
   `.tav-modal-actions`; a `<form method="dialog" class="tav-dialog-backdrop">`
   stays the click-outside-to-close catcher. */
dialog.tav-modal-dialog {
    max-width: min(32rem, 92vw);
    max-height: 90vh;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
}
dialog.tav-modal-dialog::backdrop {
    background: color-mix(in oklab, #000 45%, transparent);
}
.tav-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
.tav-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
}

/* ════════════════════════════════════════════════════════════════════════
   v2 COMPONENTS — gaps surfaced by the shadcn comparison (2026-06-19).
   Token-only, unlayered, house style. The interactive ones are driven by Web
   Components in tav-elements.js (light DOM, so these classes style them); the
   rest are pure CSS.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Input group (input + leading/trailing addons) ──────────────────────
   <div class="tav-input-group"><span class="tav-input-addon">€</span>
     <input class="tav-input"><button class="tav-btn tav-btn-primary">Go</button></div> */
.tav-input-group {
    display: flex;
    align-items: stretch;
}
.tav-input-group > * {
    border-radius: 0;
}
.tav-input-group > :first-child {
    border-top-left-radius: var(--tav-radius-sm);
    border-bottom-left-radius: var(--tav-radius-sm);
}
.tav-input-group > :last-child {
    border-top-right-radius: var(--tav-radius-sm);
    border-bottom-right-radius: var(--tav-radius-sm);
}
.tav-input-group > :not(:first-child) {
    margin-left: -1px;
}
.tav-input-group .tav-input:focus {
    z-index: 1;
}
.tav-input-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in oklab, var(--tav-primary) 28%, var(--tav-outline));
    background: var(--tav-surface-1);
    color: var(--tav-on-surface-variant);
    font-size: var(--tav-type-body-size);
    white-space: nowrap;
}

/* ── Button group (joined buttons) ──────────────────────────────────── */
.tav-button-group {
    display: inline-flex;
}
.tav-button-group > .tav-btn {
    border-radius: 0;
}
.tav-button-group > .tav-btn:first-child {
    border-top-left-radius: var(--tav-radius-md);
    border-bottom-left-radius: var(--tav-radius-md);
}
.tav-button-group > .tav-btn:last-child {
    border-top-right-radius: var(--tav-radius-md);
    border-bottom-right-radius: var(--tav-radius-md);
}
.tav-button-group > .tav-btn:not(:first-child) {
    margin-left: -1px;
}

/* ── Accordion (<details>-based; <tav-accordion single-open> coordinates) ─ */
.tav-accordion {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-md);
    overflow: hidden;
}
.tav-accordion-item + .tav-accordion-item {
    border-top: 1px solid var(--tav-outline-variant);
}
.tav-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: var(--tav-type-title-weight);
    color: var(--tav-on-surface);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.tav-accordion-trigger::-webkit-details-marker {
    display: none;
}
.tav-accordion-trigger::after {
    content: "";
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--tav-on-surface-variant);
    border-bottom: 2px solid var(--tav-on-surface-variant);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.tav-accordion-item[open] > .tav-accordion-trigger::after {
    transform: rotate(-135deg);
}
.tav-accordion-trigger:hover {
    background: color-mix(in oklab, transparent, var(--tav-on-surface) calc(var(--tav-state-hover) * 100%));
}
.tav-accordion-body {
    padding: 0 1rem 0.875rem;
    color: var(--tav-on-surface-variant);
    font-size: var(--tav-type-body-size);
}

/* ── Hover card (CSS reveal on hover / focus-within — no JS) ─────────── */
.tav-hover-card {
    position: relative;
    display: inline-block;
}
.tav-hover-card-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 30;
    min-width: 16rem;
    max-width: 22rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-md);
    background: var(--tav-surface-1);
    box-shadow: var(--tav-elevation-3);
    color: var(--tav-on-surface);
    font-size: var(--tav-type-body-size);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        visibility 0.15s;
}
.tav-hover-card:hover .tav-hover-card-panel,
.tav-hover-card:focus-within .tav-hover-card-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Carousel (CSS scroll-snap; <tav-carousel> adds buttons + dots) ──── */
.tav-carousel {
    position: relative;
}
.tav-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.tav-carousel-track::-webkit-scrollbar {
    display: none;
}
.tav-carousel-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
}
.tav-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-full);
    background: var(--tav-surface);
    color: var(--tav-on-surface);
    cursor: pointer;
    box-shadow: var(--tav-elevation-2);
}
.tav-carousel-btn[data-dir="prev"] {
    left: 0.5rem;
}
.tav-carousel-btn[data-dir="next"] {
    right: 0.5rem;
}
.tav-carousel-btn[disabled] {
    opacity: 0.4;
    pointer-events: none;
}
.tav-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
}
.tav-carousel-dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--tav-radius-full);
    background: var(--tav-outline-variant);
    cursor: pointer;
}
.tav-carousel-dot.is-active {
    background: var(--tav-primary);
}

/* ── Popover (<tav-popover> positions .tav-popover-panel) ────────────── */
.tav-popover-panel {
    position: absolute;
    z-index: 40;
    min-width: 12rem;
    padding: 0.75rem;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-md);
    background: var(--tav-surface-1);
    box-shadow: var(--tav-elevation-3);
    color: var(--tav-on-surface);
    font-size: var(--tav-type-body-size);
}
.tav-popover-panel[hidden] {
    display: none;
}

/* ── Toast (<tav-toast-region> renders .tav-toast on the `tav-toast` event) ─ */
.tav-toast-region {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}
.tav-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--tav-outline-variant);
    border-left-width: 3px;
    border-radius: var(--tav-radius-md);
    background: var(--tav-surface-1);
    box-shadow: var(--tav-elevation-3);
    color: var(--tav-on-surface);
    font-size: var(--tav-type-body-size);
    pointer-events: auto;
    animation: tav-toast-in 0.2s ease;
}
.tav-toast.is-leaving {
    animation: tav-toast-out 0.2s ease forwards;
}
.tav-toast-success {
    border-left-color: var(--tav-success);
}
.tav-toast-error {
    border-left-color: var(--tav-error);
}
.tav-toast-warning {
    border-left-color: var(--tav-warning);
}
.tav-toast-info {
    border-left-color: var(--tav-info);
}
.tav-toast-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}
.tav-toast-success .tav-toast-icon {
    color: var(--tav-success);
}
.tav-toast-error .tav-toast-icon {
    color: var(--tav-error);
}
.tav-toast-warning .tav-toast-icon {
    color: var(--tav-warning);
}
.tav-toast-info .tav-toast-icon {
    color: var(--tav-info);
}
.tav-toast-msg {
    flex: 1;
    min-width: 0;
}
.tav-toast-close {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tav-on-surface-variant);
    cursor: pointer;
    line-height: 1;
}
@keyframes tav-toast-in {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes tav-toast-out {
    to {
        opacity: 0;
        transform: translateX(1rem);
    }
}

/* ── Command palette (<tav-command>) ────────────────────────────────── */
.tav-command-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    background: color-mix(in oklab, var(--tav-on-surface) 40%, transparent);
}
.tav-command {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 36rem;
    max-height: 70vh;
    overflow: hidden;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-md);
    background: var(--tav-surface-1);
    box-shadow: var(--tav-elevation-3);
}
.tav-command-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--tav-outline-variant);
    background: transparent;
    color: var(--tav-on-surface);
    font-size: var(--tav-type-title-size);
    outline: none;
}
.tav-command-list {
    overflow-y: auto;
    padding: 0.375rem;
}
.tav-command-group-label {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: var(--tav-type-label-size);
    font-weight: var(--tav-type-title-weight);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tav-on-surface-variant);
}
.tav-command-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--tav-radius-sm);
    color: var(--tav-on-surface);
    cursor: pointer;
}
.tav-command-item[aria-selected="true"] {
    background: var(--tav-primary-container);
    color: var(--tav-on-primary-container);
}
.tav-command-item-kbd {
    margin-left: auto;
}
.tav-command-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--tav-on-surface-variant);
}

/* ── Standalone calendar (<tav-calendar>, form-associated) ──────────── */
.tav-calendar {
    display: inline-block;
    padding: 0.75rem;
    border: 1px solid var(--tav-outline-variant);
    border-radius: var(--tav-radius-md);
    background: var(--tav-surface-1);
}
.tav-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.tav-calendar-title {
    font-weight: var(--tav-type-title-weight);
    color: var(--tav-on-surface);
}
.tav-calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--tav-radius-sm);
    background: transparent;
    color: var(--tav-on-surface-variant);
    cursor: pointer;
}
.tav-calendar-nav:hover {
    background: color-mix(in oklab, transparent, var(--tav-on-surface) calc(var(--tav-state-hover) * 100%));
}
.tav-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 2rem);
    gap: 2px;
}
.tav-calendar-weekday {
    padding: 0.25rem 0;
    text-align: center;
    font-size: var(--tav-type-label-size);
    color: var(--tav-on-surface-variant);
}
.tav-calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    border: 0;
    border-radius: var(--tav-radius-sm);
    background: transparent;
    color: var(--tav-on-surface);
    font-size: var(--tav-type-body-size);
    cursor: pointer;
}
.tav-calendar-day:hover {
    background: color-mix(in oklab, transparent, var(--tav-on-surface) calc(var(--tav-state-hover) * 100%));
}
.tav-calendar-day.is-outside {
    color: var(--tav-outline);
}
.tav-calendar-day.is-today {
    box-shadow: inset 0 0 0 1px var(--tav-outline);
}
.tav-calendar-day.is-selected {
    background: var(--tav-primary);
    color: var(--tav-on-primary);
}

/* ── OTP / code input (<tav-otp>, form-associated) ──────────────────── */
.tav-otp {
    display: inline-flex;
    gap: 0.5rem;
}
.tav-otp-input {
    width: 2.75rem;
    height: 3rem;
    text-align: center;
    border: 1px solid color-mix(in oklab, var(--tav-primary) 28%, var(--tav-outline));
    border-radius: var(--tav-radius-sm);
    background: var(--tav-surface);
    color: var(--tav-on-surface);
    font-size: var(--tav-type-headline-size);
    font-variant-numeric: tabular-nums;
    caret-color: var(--tav-primary);
}
.tav-otp-input:focus {
    outline: none;
    border-color: var(--tav-primary);
    box-shadow: 0 0 0 1px var(--tav-primary);
}

/* ── Resizable split (<tav-resizable>) ──────────────────────────────── */
.tav-resizable {
    display: flex;
    width: 100%;
    overflow: hidden;
}
.tav-resizable-pane {
    min-width: 0;
    overflow: auto;
}
.tav-resizable-handle {
    flex: 0 0 auto;
    width: 0.5rem;
    padding: 0 0.1875rem;
    background: var(--tav-outline-variant);
    background-clip: content-box;
    cursor: col-resize;
    transition: background-color 0.15s ease;
}
.tav-resizable-handle:hover,
.tav-resizable-handle.is-dragging {
    background: var(--tav-primary);
    background-clip: content-box;
}