/* ==========================================================================
   aishaa UI (AI-1825)
   Our own component layer (it replaced MudBlazor, AI-1825). Every Ui*
   component renders plain HTML with the `ui-` classes below and nothing else,
   so a mockup that loads this file looks exactly like the app.

   Built on the glass tokens (glass.tokens.css): light and dark follow
   <html data-appearance> without a single override here.

   The look is glass: surfaces are frosted panes over a soft coloured backdrop
   (--ui-glass*), with a light edge on top and a deep, soft shadow; controls are
   rounded and buttons are capsules. Whoever asks the system for less transparency
   gets solid surfaces instead (prefers-reduced-transparency).
   ========================================================================== */

:root {
    --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Helvetica, Arial, sans-serif;
    --ui-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", Helvetica, Arial, sans-serif;

    --ui-text: var(--text-1, #1E1E1E);
    --ui-text-2: var(--text-2, rgba(30, 30, 30, 0.66));
    --ui-text-3: var(--text-3, rgba(30, 30, 30, 0.48));

    --ui-accent: var(--accent-primary, #5B21D0);
    --ui-on-accent: #ffffff;

    --ui-bg-card: var(--surface-solid-1, #ffffff);
    --ui-bg-sunken: var(--surface-solid-3, #f4f2fa);
    --ui-bg-hover: color-mix(in srgb, var(--ui-accent) 5%, transparent);
    --ui-bg-active: color-mix(in srgb, var(--ui-accent) 9%, transparent);
    --ui-border: var(--border-1, rgba(91, 33, 208, 0.10));
    --ui-border-strong: var(--border-2, rgba(91, 33, 208, 0.18));
    --ui-divider: color-mix(in srgb, var(--ui-text) 8%, transparent);

    --ui-radius-sm: 10px;
    --ui-radius: 14px;
    --ui-radius-lg: 22px;
    --ui-radius-pill: 999px;

    --ui-shadow-card: 0 1px 2px rgba(20, 12, 48, 0.04), 0 10px 30px -8px rgba(48, 24, 120, 0.10), 0 28px 56px -24px rgba(48, 24, 120, 0.12);
    --ui-shadow-raised: 0 2px 6px rgba(20, 12, 48, 0.06), 0 24px 64px -12px rgba(48, 24, 120, 0.24);
    --ui-focus-ring: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 22%, transparent);

    /* Glass: the material of every surface. --ui-glass for cards and panels,
       --ui-glass-strong for what floats above them (bars, menus, dialogs, toasts),
       --ui-glass-thin for a pane inside a pane (no blur of its own). */
    --ui-glass: rgba(255, 255, 255, 0.56);
    --ui-glass-strong: rgba(255, 255, 255, 0.78);
    --ui-glass-thin: rgba(255, 255, 255, 0.42);
    --ui-glass-rim: rgba(255, 255, 255, 0.78);
    --ui-glass-filter: blur(24px) saturate(180%);
    --ui-glass-filter-strong: blur(40px) saturate(200%);
    --ui-glass-line: rgba(28, 16, 64, 0.08);
    --ui-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.90), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    --ui-field-bg: rgba(255, 255, 255, 0.72);
    --ui-field-line: rgba(28, 16, 64, 0.12);
    --ui-scrim: rgba(24, 16, 48, 0.24);

    --ui-ease: cubic-bezier(0.2, 0, 0, 1);

    /* Tones: the colour an element speaks in. Soft backgrounds are a tint of
       the tone, so they work on light and dark surfaces alike. */
    --ui-tone-neutral: var(--ui-text-2);
    --ui-tone-primary: var(--ui-accent);
    --ui-tone-info: #2563eb;
    --ui-tone-success: var(--accent-success, #16a34a);
    --ui-tone-warning: #d97706;
    --ui-tone-danger: var(--accent-error, #dc2626);
    --ui-tone-cta: var(--accent-cta, #FF7420);

    /* Chart series, in order. */
    --ui-chart-1: #5B21D0;
    --ui-chart-2: #FF7420;
    --ui-chart-3: #0ea5e9;
    --ui-chart-4: #16a34a;
    --ui-chart-5: #e11d74;
    --ui-chart-6: #a3a3a3;
}

:root[data-appearance="dark"] {
    --ui-bg-card: var(--surface-solid-1, #211d2b);
    --ui-bg-sunken: var(--surface-solid-deep, #171421);
    --ui-bg-hover: rgba(255, 255, 255, 0.05);
    --ui-bg-active: rgba(255, 255, 255, 0.08);
    --ui-border: rgba(255, 255, 255, 0.09);
    --ui-border-strong: rgba(255, 255, 255, 0.16);
    --ui-divider: rgba(255, 255, 255, 0.07);
    --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px -8px rgba(0, 0, 0, 0.40);
    --ui-shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.40), 0 28px 72px -12px rgba(0, 0, 0, 0.60);
    --ui-glass: rgba(38, 33, 54, 0.56);
    --ui-glass-strong: rgba(34, 30, 48, 0.82);
    --ui-glass-thin: rgba(255, 255, 255, 0.045);
    --ui-glass-line: rgba(255, 255, 255, 0.09);
    --ui-glass-rim: rgba(255, 255, 255, 0.11);
    --ui-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    --ui-field-bg: rgba(255, 255, 255, 0.05);
    --ui-field-line: rgba(255, 255, 255, 0.12);
    --ui-scrim: rgba(0, 0, 0, 0.45);
    --ui-tone-info: #60a5fa;
    --ui-tone-warning: #fbbf24;
    --ui-chart-1: #9B6BFF;
    --ui-chart-3: #38bdf8;
    --ui-chart-4: #3dcb6c;
    --ui-chart-5: #f472b6;
    --ui-chart-6: #737373;
}

/* ---------- Glass material ----------------------------------------------
   One rule for every frosted surface, so they are the same pane everywhere.
   The frost sits on a layer behind the content (::before), not on the surface
   itself: a backdrop-filter on the surface would make it the frame of every fixed
   panel inside it (a drawer, a flyout) and cut off their own frost. A pane inside
   a pane does not blur again (the outer one already did, and stacked blurs cost
   scrolling time): it is a lighter tint. */

.ui-card,
.ui-stat,
.ui-shell__rail {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--ui-glass-rim);
    background: transparent;
    box-shadow: var(--ui-shadow-card);
}

.ui-card::before,
.ui-stat::before,
.ui-shell__rail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--ui-glass);
    box-shadow: var(--ui-glass-edge);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
    pointer-events: none;
}

.ui-card .ui-card::before,
.ui-card .ui-stat::before,
.glass-card .ui-card::before,
.glass-card .ui-stat::before {
    background: var(--ui-glass-thin);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ui-card .ui-card,
.ui-card .ui-stat,
.glass-card .ui-card,
.glass-card .ui-stat {
    border-color: var(--ui-glass-line);
    box-shadow: none;
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --ui-glass: var(--ui-bg-card);
        --ui-glass-strong: var(--ui-bg-card);
        --ui-glass-thin: var(--ui-bg-sunken);
        --ui-glass-filter: none;
        --ui-glass-filter-strong: none;
        --ui-glass-rim: var(--ui-border);
    }
}

/* ---------- Icon -------------------------------------------------------- */

.ui-icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
    vertical-align: middle;
}

.ui-icon--xs { width: 0.875rem; height: 0.875rem; font-size: 0.875rem; }
.ui-icon--sm { width: 1rem; height: 1rem; font-size: 1rem; }
.ui-icon--md { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }
.ui-icon--lg { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }

.ui-icon[class*="ui-tone-"] { color: var(--ui-tone); }

/* Font icons (a ligature, or a class such as fas fa-landmark) size by font, not box. */
.ui-icon--font {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
}

/* ---------- Button ------------------------------------------------------ */

.ui-btn {
    --ui-tone: var(--ui-accent);
    --ui-btn-h: 36px;
    --ui-btn-px: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ui-btn-h);
    padding: 0 var(--ui-btn-px);
    border: 1px solid transparent;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-tone);
    font: 600 0.875rem/1 var(--ui-font);
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 140ms var(--ui-ease), border-color 140ms var(--ui-ease), color 140ms var(--ui-ease), box-shadow 140ms var(--ui-ease), transform 80ms var(--ui-ease);
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
    cursor: default;
    opacity: 0.5;
}

.ui-btn--sm { --ui-btn-h: 30px; --ui-btn-px: 12px; font-size: 0.8125rem; }
.ui-btn--lg { --ui-btn-h: 44px; --ui-btn-px: 20px; font-size: 0.9375rem; }

.ui-btn--solid {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ui-tone) 86%, white), var(--ui-tone));
    color: var(--ui-on-accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1px 2px rgba(20, 12, 48, 0.14),
        0 6px 16px -6px color-mix(in srgb, var(--ui-tone) 70%, transparent);
}

.ui-btn--solid:hover:not(:disabled) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ui-tone) 92%, white), color-mix(in srgb, var(--ui-tone) 90%, black));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 1px 2px rgba(20, 12, 48, 0.14),
        0 10px 22px -8px color-mix(in srgb, var(--ui-tone) 80%, transparent);
}

.ui-btn--soft {
    background: color-mix(in srgb, var(--ui-tone) 10%, transparent);
}

.ui-btn--soft:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-tone) 16%, transparent);
}

.ui-btn--outline {
    border-color: var(--ui-glass-line);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-glass-edge), 0 1px 2px rgba(20, 12, 48, 0.05);
    color: var(--ui-text);
    -webkit-backdrop-filter: var(--ui-glass-filter);
    backdrop-filter: var(--ui-glass-filter);
}

.ui-btn--outline:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ui-tone) 30%, var(--ui-glass-line));
    background: color-mix(in srgb, var(--ui-glass-strong) 80%, var(--ui-tone) 6%);
}

.ui-btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-tone) 8%, transparent);
}

.ui-btn.ui-tone-neutral { --ui-tone: var(--ui-text-2); }
.ui-btn--ghost.ui-tone-neutral:hover:not(:disabled) { color: var(--ui-text); background: var(--ui-bg-active); }

.ui-btn--icon {
    width: var(--ui-btn-h);
    padding: 0;
}

.ui-btn--block {
    display: flex;
    width: 100%;
}

.ui-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Spinner, skeleton, progress -------------------------------- */

.ui-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ui-spin 700ms linear infinite;
}

.ui-spinner--sm { width: 0.875rem; height: 0.875rem; }
.ui-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; color: var(--ui-accent); }

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

.ui-skeleton {
    display: block;
    height: 1em;
    border-radius: 6px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ui-text) 6%, transparent) 0%,
        color-mix(in srgb, var(--ui-text) 11%, transparent) 50%,
        color-mix(in srgb, var(--ui-text) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
}

@keyframes ui-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-skeleton { animation: none; }
    .ui-spinner { animation-duration: 1.6s; }
}

/* ---------- Progress bar ------------------------------------------------ */

.ui-progress {
    position: relative;
    height: 3px;
    overflow: hidden;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
}

.ui-progress__bar {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--ui-accent);
    transition: width 200ms var(--ui-ease);
}

.ui-progress[class*="ui-tone-"] {
    background: color-mix(in srgb, var(--ui-tone) 14%, transparent);
}

.ui-progress[class*="ui-tone-"] .ui-progress__bar {
    background: var(--ui-tone);
}

.ui-progress--indeterminate .ui-progress__bar {
    width: 40%;
    animation: ui-progress-slide 1.1s var(--ui-ease) infinite;
}

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

/* ---------- Tooltips ---------------------------------------------------
   A plain tooltip is a data-tip on an element with class ui-tip (UiCss.Tooltip); a rich
   one is UiTooltip. Both show in the top layer, placed by ui.js, so no parent clips them.
   An anchor may set --ui-tip-delay (charts show theirs at once). */

.ui-tip {
    position: relative;
}

/* Rich tooltip (UiTooltip): a popover in the top layer, placed by ui.js. */
.ui-tooltip-anchor {
    display: inline-flex;
}

/* A focusable wrapper (UiTooltip Focusable) shows where the keyboard is. */
.ui-tooltip-anchor:focus-visible {
    border-radius: 6px;
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-tooltip {
    position: fixed;
    inset: auto;
    max-width: 320px;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: rgba(28, 24, 40, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 24px -6px rgba(0, 0, 0, 0.35);
    color: #fff;
    font: 500 0.75rem/1.45 var(--ui-font);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms var(--ui-ease), overlay 120ms allow-discrete, display 120ms allow-discrete;
}

.ui-tooltip:popover-open {
    opacity: 1;
}

@starting-style {
    .ui-tooltip:popover-open {
        opacity: 0;
    }
}

/* The shared plain tooltip: a short text, a little smaller. */
.ui-tooltip--plain {
    width: max-content;
    max-width: 280px;
    padding: 6px 10px;
    border-radius: 7px;
    line-height: 1.4;
}

/* ---------- Badge ------------------------------------------------------- */

.ui-badge {
    --ui-tone: var(--ui-tone-neutral);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-tone) 12%, transparent);
    color: var(--ui-tone);
    font: 600 0.75rem/1 var(--ui-font);
    white-space: nowrap;
}

.ui-badge .ui-icon { width: 0.875rem; height: 0.875rem; font-size: 0.875rem; }

.ui-badge--icon {
    width: 26px;
    height: 26px;
    padding: 0;
    justify-content: center;
    border-radius: 8px;
}

.ui-badge--icon .ui-icon { width: 1rem; height: 1rem; font-size: 1rem; }

.ui-badge.ui-tone-neutral {
    background: color-mix(in srgb, var(--ui-text) 7%, transparent);
    color: var(--ui-text-2);
}

/* ---------- Card -------------------------------------------------------- */

.ui-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--ui-radius-lg);
    color: var(--ui-text);
    font-family: var(--ui-font);
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
}

.ui-card__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-card__title {
    margin: 0;
    color: var(--ui-text);
    font: 650 1.0625rem/1.35 var(--ui-font-display);
    letter-spacing: -0.015em;
}

.ui-card__subtitle {
    margin: 2px 0 0;
    color: var(--ui-text-2);
    font: 400 0.8125rem/1.45 var(--ui-font);
}

.ui-card__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.ui-card__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 20px 20px;
}

.ui-card__body--flush {
    padding: 0;
}

.ui-card__header + .ui-card__body--flush {
    border-top: 1px solid var(--ui-divider);
}

.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--ui-divider);
}

/* ---------- Stat tile --------------------------------------------------- */

.ui-stat {
    --ui-tone: var(--ui-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 16px 18px;
    border-radius: var(--ui-radius-lg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    text-align: left;
    text-decoration: none;
}

button.ui-stat,
a.ui-stat {
    cursor: pointer;
    transition: border-color 160ms var(--ui-ease), box-shadow 160ms var(--ui-ease), transform 160ms var(--ui-ease);
}

button.ui-stat:hover,
a.ui-stat:hover {
    border-color: color-mix(in srgb, var(--ui-tone) 26%, var(--ui-glass-line));
    box-shadow: var(--ui-shadow-raised);
    transform: translateY(-2px);
}

button.ui-stat:focus-visible,
a.ui-stat:focus-visible {
    outline: none;
    box-shadow: var(--ui-shadow-card), var(--ui-focus-ring);
}

.ui-stat__head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.ui-stat__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--ui-tone) 20%, transparent), color-mix(in srgb, var(--ui-tone) 9%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: var(--ui-tone);
}

.ui-stat__icon .ui-icon { width: 1rem; height: 1rem; font-size: 1rem; }

.ui-stat__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ui-text-2);
    font: 500 0.8125rem/1.3 var(--ui-font);
    /* Two lines before it cuts: a narrow tile keeps "Wacht op goedkeuring" whole. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ui-stat__go {
    flex: 0 0 auto;
    color: var(--ui-text-3);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 160ms var(--ui-ease), transform 160ms var(--ui-ease), color 160ms var(--ui-ease);
}

.ui-stat:hover .ui-stat__go,
.ui-stat:focus-visible .ui-stat__go {
    color: var(--ui-tone);
    opacity: 1;
    transform: none;
}

.ui-stat__value {
    margin-top: auto;
    color: var(--ui-text);
    font: 700 2rem/1 var(--ui-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.ui-stat__value .ui-skeleton {
    width: 3.5rem;
    height: 1.875rem;
}

/* ---------- Segmented control ----------------------------------------- */

.ui-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 3px;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-text) 6%, transparent);
    box-shadow: inset 0 1px 2px rgba(20, 12, 48, 0.06);
}

.ui-segmented__item {
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-text-2);
    font: 600 0.75rem/1 var(--ui-font);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms var(--ui-ease), color 140ms var(--ui-ease), box-shadow 140ms var(--ui-ease);
}

.ui-segmented__item:hover {
    color: var(--ui-text);
}

.ui-segmented__item[aria-checked="true"] {
    background: var(--ui-glass-strong);
    color: var(--ui-text);
    box-shadow: var(--ui-glass-edge), 0 1px 3px rgba(20, 12, 48, 0.12), 0 4px 10px -4px rgba(20, 12, 48, 0.12);
}

.ui-segmented__item:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

/* ---------- Empty state ------------------------------------------------- */

.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 24px;
    color: var(--ui-text-2);
    font-family: var(--ui-font);
    text-align: center;
}

.ui-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 14px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--ui-tone, var(--ui-accent)) 18%, transparent), color-mix(in srgb, var(--ui-tone, var(--ui-accent)) 7%, transparent));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: var(--ui-tone, var(--ui-accent));
}

.ui-empty__title {
    margin: 0;
    color: var(--ui-text);
    font: 600 0.9375rem/1.4 var(--ui-font);
}

.ui-empty__description {
    max-width: 36ch;
    margin: 0;
    font: 400 0.8125rem/1.5 var(--ui-font);
}

.ui-empty__actions {
    margin-top: 10px;
}

/* ---------- Donut chart ------------------------------------------------- */

.ui-donut-host {
    container-type: inline-size;
}

.ui-donut {
    display: grid;
    grid-template-columns: minmax(120px, 168px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    font-family: var(--ui-font);
}

.ui-donut__figure {
    position: relative;
    aspect-ratio: 1;
}

.ui-donut__svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ui-donut__track {
    fill: none;
    stroke: color-mix(in srgb, var(--ui-text) 6%, transparent);
}

.ui-donut__slice {
    fill: none;
    stroke-linecap: butt;
    transition: opacity 160ms var(--ui-ease), stroke-width 160ms var(--ui-ease);
}

.ui-donut:has(.ui-donut__item:hover) .ui-donut__slice:not(.is-hot) {
    opacity: 0.28;
}

.ui-donut__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ui-donut__value {
    color: var(--ui-text);
    font: 600 1.75rem/1 var(--ui-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.ui-donut__caption {
    margin-top: 4px;
    color: var(--ui-text-2);
    font: 500 0.75rem/1.2 var(--ui-font);
}

.ui-donut__legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-donut__item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    color: var(--ui-text);
    font-size: 0.8125rem;
    line-height: 1.3;
    cursor: default;
}

.ui-donut__item:hover {
    background: var(--ui-bg-hover);
}

.ui-donut__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.ui-donut__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-donut__count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ui-donut__share {
    min-width: 3ch;
    color: var(--ui-text-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

@container (max-width: 360px) {
    .ui-donut {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .ui-donut__figure { width: 160px; }
    .ui-donut__legend { width: 100%; }
}

/* ---------- Menu -------------------------------------------------------- */

.ui-menu {
    display: inline-flex;
    position: relative;
}

.ui-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ui-menu__trigger:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-menu__panel {
    position: fixed;
    inset: auto;
    margin: 0;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 16px));
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--ui-glass-line);
    border-radius: 16px;
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-glass-edge), var(--ui-shadow-raised);
    color: var(--ui-text);
    font-family: var(--ui-font);
    -webkit-backdrop-filter: var(--ui-glass-filter-strong);
    backdrop-filter: var(--ui-glass-filter-strong);
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
    transition: opacity 120ms var(--ui-ease), transform 120ms var(--ui-ease), overlay 120ms allow-discrete, display 120ms allow-discrete;
}

.ui-menu__panel:popover-open {
    opacity: 1;
    transform: none;
}

@starting-style {
    .ui-menu__panel:popover-open {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
}

.ui-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text);
    font: 500 0.875rem/1.35 var(--ui-font);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ui-menu__item:hover:not(:disabled):not(.ui-menu__item--static),
.ui-menu__item:focus-visible {
    outline: none;
    background: var(--ui-bg-active);
    color: var(--ui-text);
}

.ui-menu__item:disabled {
    cursor: default;
    opacity: 0.5;
}

.ui-menu__item--static {
    cursor: default;
    color: var(--ui-text-2);
}

.ui-menu__item.is-selected {
    background: color-mix(in srgb, var(--ui-accent) 9%, transparent);
    color: var(--ui-accent);
}

.ui-menu__item--danger,
.ui-menu__item--danger .ui-menu__icon {
    color: var(--ui-tone-danger);
}

.ui-menu__icon {
    color: var(--ui-text-2);
}

.ui-menu__item.is-selected .ui-menu__icon {
    color: var(--ui-accent);
}

.ui-menu__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ui-menu__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-menu__description {
    color: var(--ui-text-3);
    font-size: 0.75rem;
    font-weight: 400;
}

.ui-menu__end {
    flex: 0 0 auto;
    color: var(--ui-text-3);
    font-size: 0.75rem;
}

.ui-menu__divider {
    height: 1px;
    margin: 6px -6px;
    border: 0;
    background: var(--ui-divider);
}

.ui-menu__header {
    padding: 8px 10px 4px;
    color: var(--ui-text-3);
    font: 600 0.6875rem/1.2 var(--ui-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Avatar ------------------------------------------------------ */

.ui-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--ui-avatar-size, 36px);
    height: var(--ui-avatar-size, 36px);
    overflow: hidden;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-bg-card));
    color: var(--ui-accent);
    font: 600 calc(var(--ui-avatar-size, 36px) * 0.38)/1 var(--ui-font);
    letter-spacing: 0.02em;
    user-select: none;
}

.ui-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar--xs { --ui-avatar-size: 22px; }
.ui-avatar--sm { --ui-avatar-size: 28px; }
.ui-avatar--md { --ui-avatar-size: 36px; }
.ui-avatar--lg { --ui-avatar-size: 44px; }

/* ---------- Text field -------------------------------------------------- */

.ui-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-family: var(--ui-font);
}

.ui-field__label {
    color: var(--ui-text);
    font: 500 0.8125rem/1.3 var(--ui-font);
}

.ui-field__control {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--ui-field-line);
    border-radius: 12px;
    background: var(--ui-field-bg);
    box-shadow: inset 0 1px 2px rgba(20, 12, 48, 0.04);
    transition: border-color 120ms var(--ui-ease), box-shadow 120ms var(--ui-ease), background-color 120ms var(--ui-ease);
}

.ui-field__control:hover {
    border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-field-line));
}

.ui-field__control:focus-within {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

.ui-field--error .ui-field__control {
    border-color: var(--ui-tone-danger);
}

.ui-field.is-disabled .ui-field__control {
    opacity: 0.6;
}

.ui-field__icon {
    color: var(--ui-text-3);
}

.ui-field__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ui-text);
    font: 400 0.875rem/1 var(--ui-font);
}

.ui-field__input::placeholder {
    color: var(--ui-text-3);
}

.ui-field__clear {
    display: inline-flex;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ui-text-3);
    cursor: pointer;
}

.ui-field__clear:hover {
    background: var(--ui-bg-active);
    color: var(--ui-text);
}

.ui-field__help {
    margin: 0;
    color: var(--ui-text-2);
    font-size: 0.75rem;
    line-height: 1.4;
}

.ui-field--error .ui-field__help {
    color: var(--ui-tone-danger);
}

.ui-field__foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ui-field__count {
    flex: 0 0 auto;
    color: var(--ui-text-3);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.ui-field__suffix {
    flex: 0 0 auto;
    color: var(--ui-text-3);
    font-size: 0.8125rem;
}

/* Number fields keep their spin buttons out of the way. */
.ui-field__input--number::-webkit-inner-spin-button {
    opacity: 0.4;
}

.ui-field__textarea {
    width: 100%;
    min-height: calc(3 * 1.5em + 18px);
    padding: 9px 12px;
    border: 1px solid var(--ui-field-line);
    border-radius: 12px;
    outline: none;
    background: var(--ui-field-bg);
    box-shadow: inset 0 1px 2px rgba(20, 12, 48, 0.04);
    color: var(--ui-text);
    font: 400 0.875rem/1.5 var(--ui-font);
    resize: vertical;
    transition: border-color 120ms var(--ui-ease), box-shadow 120ms var(--ui-ease);
}

.ui-field__textarea:hover {
    border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-field-line));
}

.ui-field__textarea:focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

.ui-field__textarea--grow {
    field-sizing: content;
    resize: none;
    overflow: auto;
}

.ui-field--error .ui-field__textarea {
    border-color: var(--ui-tone-danger);
}

.ui-field__textarea::placeholder {
    color: var(--ui-text-3);
}

/* Select: the browser's own select, dressed as our field. */
.ui-field__control--select {
    position: relative;
    padding: 0;
}

.ui-field__control--select > .ui-field__icon {
    position: absolute;
    left: 10px;
    pointer-events: none;
}

.ui-field__select {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 32px 0 10px;
    border: 0;
    border-radius: inherit;
    outline: none;
    appearance: none;
    background: transparent;
    color: var(--ui-text);
    font: 400 0.875rem/1 var(--ui-font);
    cursor: pointer;
}

.ui-field__control--select > .ui-field__icon ~ .ui-field__select {
    padding-left: 32px;
}

.ui-field__select option {
    background: var(--ui-bg-card);
    color: var(--ui-text);
}

.ui-field__chevron {
    position: absolute;
    right: 10px;
    color: var(--ui-text-3);
    pointer-events: none;
}

.ui-field.is-disabled .ui-field__select {
    cursor: default;
}

/* Multi select: a UiMenu whose trigger looks like the field. */
.ui-multiselect,
.ui-multiselect > .ui-menu__trigger {
    display: flex;
    width: 100%;
    border-radius: var(--ui-radius-sm);
}

.ui-multiselect__control {
    width: 100%;
    padding: 0 32px 0 10px;
    text-align: left;
}

.ui-multiselect__control:has(> .ui-multiselect__icon) {
    padding-left: 32px;
}

.ui-multiselect__clear {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--ui-divider);
    border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0;
    background: none;
    color: var(--ui-text-2);
    font: 500 0.8125rem/1 var(--ui-font);
    text-align: left;
    cursor: pointer;
}

.ui-multiselect__clear:hover {
    background: var(--ui-bg-hover);
    color: var(--ui-text);
}

.ui-multiselect__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ui-text);
    font: 400 0.875rem/1 var(--ui-font);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-multiselect__value.is-placeholder {
    color: var(--ui-text-3);
}

.ui-multiselect__panel {
    min-width: 260px;
    max-height: 360px;
}

/* An option's image in a rich UiSelect (a flag, a logo): in its row and in the field. */
.ui-select__image {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--ui-divider);
}

.ui-select__image--field {
    margin-right: 8px;
}

/* Colour field (UiColorField): the browser's picker as a swatch, the hex code beside it. */
.ui-colorfield {
    gap: 8px;
    padding-left: 6px;
}

.ui-colorfield__swatch {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: none;
    cursor: pointer;
}

.ui-colorfield__swatch::-webkit-color-swatch-wrapper {
    padding: 0;
}

.ui-colorfield__swatch::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--ui-radius-sm) - 1px);
}

.ui-colorfield__swatch::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--ui-radius-sm) - 1px);
}

.ui-colorfield__hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: lowercase;
}

/* ---------- Checkbox and switch ---------------------------------------- */

.ui-check {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    color: var(--ui-text);
    font-family: var(--ui-font);
    cursor: pointer;
}

.ui-check.is-disabled {
    cursor: default;
    opacity: 0.55;
}

.ui-check__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ui-check__control {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.5px solid var(--ui-border-strong);
    border-radius: 5px;
    background: var(--ui-bg-card);
    transition: background-color 120ms var(--ui-ease), border-color 120ms var(--ui-ease), box-shadow 120ms var(--ui-ease);
}

.ui-check__mark {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--ui-on-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
}

.ui-check__input:checked + .ui-check__control,
.ui-check__input[data-indeterminate="true"] + .ui-check__control,
.ui-check__control.is-checked {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
}

.ui-check__input:checked + .ui-check__control .ui-check__mark,
.ui-check__input[data-indeterminate="true"] + .ui-check__control .ui-check__mark,
.ui-check__control.is-checked .ui-check__mark {
    opacity: 1;
}

.ui-check__input:focus-visible + .ui-check__control {
    box-shadow: var(--ui-focus-ring);
}

.ui-check:hover .ui-check__input:not(:checked):not(:disabled) + .ui-check__control {
    border-color: color-mix(in srgb, var(--ui-accent) 50%, var(--ui-border-strong));
}

.ui-check__control--inline {
    margin-top: 0;
}

/* The switch: a track with a knob. */
.ui-check--switch .ui-check__control {
    width: 34px;
    height: 20px;
    margin-top: 0;
    border: 0;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-text) 18%, transparent);
}

.ui-check--switch .ui-check__control::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    transition: transform 160ms var(--ui-ease);
}

.ui-check--switch .ui-check__input:checked + .ui-check__control {
    background: var(--ui-accent);
}

.ui-check--switch .ui-check__input:checked + .ui-check__control::after {
    transform: translateX(14px);
}

/* The radio: a ring with a dot. */
.ui-check--radio .ui-check__control {
    border-radius: 50%;
}

.ui-check--radio .ui-check__input:checked + .ui-check__control {
    background: var(--ui-bg-card);
    box-shadow: inset 0 0 0 4px var(--ui-accent);
}

.ui-check--radio .ui-check__input:checked:focus-visible + .ui-check__control {
    box-shadow: inset 0 0 0 4px var(--ui-accent), var(--ui-focus-ring);
}

.ui-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ui-radio-group--row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.ui-radio-group > legend {
    margin-bottom: 8px;
    padding: 0;
}

/* A quiet bordered block inside a card: the replacement for an outlined MudPaper. */
.ui-panel {
    padding: 14px 16px;
    border: 1px solid var(--ui-glass-line);
    border-radius: 16px;
    background: var(--ui-glass-thin);
    box-shadow: var(--ui-glass-edge);
}

.ui-check__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ui-check__label {
    font: 500 0.875rem/1.35 var(--ui-font);
}

.ui-check--switch .ui-check__label {
    margin-top: 1px;
}

.ui-check__description {
    color: var(--ui-text-2);
    font: 400 0.8125rem/1.45 var(--ui-font);
}

/* ---------- Stack and grid ---------------------------------------------- */

.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-gap, 12px);
    min-width: 0;
}

.ui-stack--row {
    flex-direction: row;
    align-items: center;
}

.ui-stack--wrap { flex-wrap: wrap; }
.ui-stack--align-start { align-items: flex-start; }
.ui-stack--align-center { align-items: center; }
.ui-stack--align-end { align-items: flex-end; }
.ui-stack--align-stretch { align-items: stretch; }
.ui-stack--align-baseline { align-items: baseline; }
.ui-stack--justify-start { justify-content: flex-start; }
.ui-stack--justify-center { justify-content: center; }
.ui-stack--justify-end { justify-content: flex-end; }
.ui-stack--justify-between { justify-content: space-between; }

.ui-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ui-gap, 16px);
}

.ui-col { grid-column: span 12; min-width: 0; }
.ui-col--xs-1 { grid-column: span 1; }
.ui-col--xs-2 { grid-column: span 2; }
.ui-col--xs-3 { grid-column: span 3; }
.ui-col--xs-4 { grid-column: span 4; }
.ui-col--xs-5 { grid-column: span 5; }
.ui-col--xs-6 { grid-column: span 6; }
.ui-col--xs-7 { grid-column: span 7; }
.ui-col--xs-8 { grid-column: span 8; }
.ui-col--xs-9 { grid-column: span 9; }
.ui-col--xs-10 { grid-column: span 10; }
.ui-col--xs-11 { grid-column: span 11; }
.ui-col--xs-12 { grid-column: span 12; }

@media (min-width: 600px) {
    .ui-col--sm-1 { grid-column: span 1; }
    .ui-col--sm-2 { grid-column: span 2; }
    .ui-col--sm-3 { grid-column: span 3; }
    .ui-col--sm-4 { grid-column: span 4; }
    .ui-col--sm-5 { grid-column: span 5; }
    .ui-col--sm-6 { grid-column: span 6; }
    .ui-col--sm-7 { grid-column: span 7; }
    .ui-col--sm-8 { grid-column: span 8; }
    .ui-col--sm-9 { grid-column: span 9; }
    .ui-col--sm-10 { grid-column: span 10; }
    .ui-col--sm-11 { grid-column: span 11; }
    .ui-col--sm-12 { grid-column: span 12; }
}

@media (min-width: 960px) {
    .ui-col--md-1 { grid-column: span 1; }
    .ui-col--md-2 { grid-column: span 2; }
    .ui-col--md-3 { grid-column: span 3; }
    .ui-col--md-4 { grid-column: span 4; }
    .ui-col--md-5 { grid-column: span 5; }
    .ui-col--md-6 { grid-column: span 6; }
    .ui-col--md-7 { grid-column: span 7; }
    .ui-col--md-8 { grid-column: span 8; }
    .ui-col--md-9 { grid-column: span 9; }
    .ui-col--md-10 { grid-column: span 10; }
    .ui-col--md-11 { grid-column: span 11; }
    .ui-col--md-12 { grid-column: span 12; }
}

@media (min-width: 1280px) {
    .ui-col--lg-1 { grid-column: span 1; }
    .ui-col--lg-2 { grid-column: span 2; }
    .ui-col--lg-3 { grid-column: span 3; }
    .ui-col--lg-4 { grid-column: span 4; }
    .ui-col--lg-5 { grid-column: span 5; }
    .ui-col--lg-6 { grid-column: span 6; }
    .ui-col--lg-7 { grid-column: span 7; }
    .ui-col--lg-8 { grid-column: span 8; }
    .ui-col--lg-9 { grid-column: span 9; }
    .ui-col--lg-10 { grid-column: span 10; }
    .ui-col--lg-11 { grid-column: span 11; }
    .ui-col--lg-12 { grid-column: span 12; }
}

@media (min-width: 1920px) {
    .ui-col--xl-1 { grid-column: span 1; }
    .ui-col--xl-2 { grid-column: span 2; }
    .ui-col--xl-3 { grid-column: span 3; }
    .ui-col--xl-4 { grid-column: span 4; }
    .ui-col--xl-5 { grid-column: span 5; }
    .ui-col--xl-6 { grid-column: span 6; }
    .ui-col--xl-7 { grid-column: span 7; }
    .ui-col--xl-8 { grid-column: span 8; }
    .ui-col--xl-9 { grid-column: span 9; }
    .ui-col--xl-10 { grid-column: span 10; }
    .ui-col--xl-11 { grid-column: span 11; }
    .ui-col--xl-12 { grid-column: span 12; }
}

/* ---------- Text -------------------------------------------------------- */

.ui-text {
    margin: 0;
    color: var(--ui-text);
    font-family: var(--ui-font);
}

.ui-text--h3 { font: 600 1.5rem/1.25 var(--ui-font-display); letter-spacing: -0.015em; }
.ui-text--h4 { font: 600 1.25rem/1.3 var(--ui-font-display); letter-spacing: -0.01em; }
.ui-text--h5 { font: 600 1.0625rem/1.35 var(--ui-font); }
.ui-text--h6 { font: 600 0.9375rem/1.4 var(--ui-font); }
.ui-text--subtitle { font: 600 0.875rem/1.4 var(--ui-font); }
.ui-text--body { font: 400 0.875rem/1.55 var(--ui-font); }
.ui-text--bodysmall { font: 400 0.8125rem/1.5 var(--ui-font); }
.ui-text--caption { font: 400 0.75rem/1.45 var(--ui-font); color: var(--ui-text-2); }
.ui-text--overline { font: 600 0.6875rem/1.3 var(--ui-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ui-text-3); }

.ui-text--muted { color: var(--ui-text-2); }
.ui-text--strong { font-weight: 600; }
.ui-text--tone { color: var(--ui-tone); }

.ui-link {
    color: var(--ui-accent);
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 2px;
}

.ui-link:hover {
    text-decoration: underline;
}

.ui-divider {
    height: 1px;
    margin: 16px 0;
    border: 0;
    background: var(--ui-divider);
}

/* ---------- Alert ------------------------------------------------------- */

.ui-alert {
    --ui-tone: var(--ui-tone-info);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--ui-tone) 22%, transparent);
    border-radius: var(--ui-radius);
    background: color-mix(in srgb, var(--ui-tone) 9%, var(--ui-glass-thin));
    color: var(--ui-text);
    font: 400 0.875rem/1.5 var(--ui-font);
}

.ui-alert--dense {
    padding: 8px 12px;
    font-size: 0.8125rem;
}

.ui-alert__icon {
    margin-top: 2px;
    color: var(--ui-tone);
}

.ui-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-alert__title {
    margin: 0 0 2px;
    font-weight: 600;
}

.ui-alert__text > :first-child { margin-top: 0; }
.ui-alert__text > :last-child { margin-bottom: 0; }

.ui-alert__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin: -4px -4px -4px 0;
}

/* ---------- Chip -------------------------------------------------------- */

.ui-chip {
    --ui-tone: var(--ui-tone-neutral);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-tone) 11%, transparent);
    color: var(--ui-tone);
    font: 500 0.8125rem/1 var(--ui-font);
    white-space: nowrap;
}

.ui-chip.ui-tone-neutral {
    background: color-mix(in srgb, var(--ui-text) 7%, transparent);
    color: var(--ui-text);
}

.ui-chip--solid {
    background: var(--ui-tone);
    color: var(--ui-on-accent);
}

button.ui-chip {
    cursor: pointer;
    transition: background-color 120ms var(--ui-ease), border-color 120ms var(--ui-ease);
}

button.ui-chip:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-tone) 18%, transparent);
}

button.ui-chip:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-chip.is-selected {
    border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent);
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    color: var(--ui-accent);
}

.ui-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-chip__remove {
    display: inline-flex;
    margin-right: -4px;
    padding: 2px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
}

.ui-chip__remove:hover,
.ui-chip__remove:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--ui-tone) 18%, transparent);
    opacity: 1;
}

/* ---------- Tabs -------------------------------------------------------- */

.ui-tabs__list {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--ui-divider);
    scrollbar-width: none;
}

.ui-tabs__tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ui-text-2);
    font: 500 0.875rem/1 var(--ui-font);
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms var(--ui-ease);
}

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

.ui-tabs__tab[aria-selected="true"] {
    color: var(--ui-accent);
    font-weight: 600;
}

.ui-tabs__tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ui-accent);
}

.ui-tabs__tab:focus-visible {
    outline: none;
    box-shadow: inset var(--ui-focus-ring);
    border-radius: var(--ui-radius-sm);
}

.ui-tabs__tab:disabled {
    cursor: default;
    opacity: 0.45;
}

.ui-tabs__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ui-radius-pill);
    background: color-mix(in srgb, var(--ui-text) 8%, transparent);
    color: var(--ui-text-2);
    font-size: 0.6875rem;
    font-weight: 600;
}

.ui-tabs__panel {
    padding-top: 20px;
}

/* ---------- Table ------------------------------------------------------- */

.ui-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--ui-text);
    font: 400 0.875rem/1.45 var(--ui-font);
}

.ui-table th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-divider);
    color: var(--ui-text-2);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
}

.ui-table td {
    padding: 12px;
    border-bottom: 1px solid var(--ui-divider);
    vertical-align: middle;
}

.ui-table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-table--dense th { padding: 8px 10px; }
.ui-table--dense td { padding: 8px 10px; }

.ui-table tbody tr {
    transition: background-color 100ms var(--ui-ease);
}

.ui-table tbody tr:hover {
    background: var(--ui-bg-hover);
}

.ui-table--clickable tbody tr:not(.ui-table__state) {
    cursor: pointer;
}

.ui-table .ui-table__state:hover {
    background: transparent;
}

.ui-table .ui-table__state td {
    padding: 24px 12px;
    color: var(--ui-text-2);
    text-align: center;
}

.ui-table .is-numeric,
.ui-table .is-end {
    text-align: right;
}

@media (max-width: 640px) {
    .ui-table-wrap--stack thead {
        display: none;
    }

    .ui-table-wrap--stack .ui-table,
    .ui-table-wrap--stack tbody,
    .ui-table-wrap--stack tr,
    .ui-table-wrap--stack td {
        display: block;
        width: 100%;
    }

    .ui-table-wrap--stack tr:not(.ui-table__state) {
        padding: 10px 0;
        border-bottom: 1px solid var(--ui-divider);
    }

    .ui-table-wrap--stack td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        border: 0;
        text-align: right;
    }

    .ui-table-wrap--stack td[data-label]::before {
        content: attr(data-label);
        color: var(--ui-text-2);
        font-size: 0.75rem;
        font-weight: 600;
        text-align: left;
    }
}

.ui-table__busy {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 2px;
    margin-bottom: -2px;
}

/* Selection column (UiTable MultiSelection). */
.ui-table th.ui-table__select,
.ui-table td.ui-table__select {
    width: 40px;
    padding-right: 0;
}

.ui-table tbody tr.is-selected td,
.ui-table tbody tr.selected td {
    background: color-mix(in srgb, var(--ui-accent) 7%, transparent);
}

/* A table that scrolls within a height keeps its header in view. */
.ui-table-wrap--scroll {
    overflow: auto;
}

.ui-table-wrap--scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ui-glass-strong);
    -webkit-backdrop-filter: var(--ui-glass-filter-strong);
    backdrop-filter: var(--ui-glass-filter-strong);
}

/* Sortable headers (UiSortHeader): the whole header is the button; the arrow shows on
   the sorted column, and faintly on hover elsewhere. */
.ui-table th.ui-table__sortable {
    padding: 0;
}

.ui-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.ui-table--dense .ui-table__sort {
    padding: 8px 10px;
}

.ui-table__sortable.is-numeric .ui-table__sort {
    justify-content: flex-end;
}

.ui-table__sort:focus-visible {
    outline: none;
    box-shadow: inset var(--ui-focus-ring);
}

.ui-table__sort-icon {
    opacity: 0;
    transition: opacity 120ms var(--ui-ease);
}

.ui-table__sort:hover .ui-table__sort-icon {
    opacity: 0.4;
}

.ui-table__sortable.is-sorted {
    color: var(--ui-text);
}

.ui-table__sortable.is-sorted .ui-table__sort-icon {
    opacity: 1;
}

/* ---------- Data list (UiDataList) ---------------------------------------
   Rows loaded page by page; each row is the page's own template. */

.ui-datalist {
    position: relative;
    min-width: 0;
    font-family: var(--ui-font);
}

.ui-datalist__progress {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 2;
    border-radius: 0;
}

.ui-datalist__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--ui-divider);
}

.ui-datalist__rows {
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 120ms var(--ui-ease);
}

.ui-datalist.is-loading .ui-datalist__rows {
    opacity: 0.6;
}

.ui-datalist__row {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    border-bottom: 1px solid var(--ui-divider);
    cursor: pointer;
    transition: background-color 100ms var(--ui-ease);
}

.ui-datalist__row:hover {
    background: var(--ui-bg-hover);
}

.ui-datalist__row:focus-visible {
    outline: none;
    box-shadow: inset var(--ui-focus-ring);
}

.ui-datalist__row.is-selected {
    background: color-mix(in srgb, var(--ui-accent) 7%, transparent);
}

.ui-datalist__select {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 4px 0 16px;
    cursor: default;
}

.ui-datalist__cell {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-datalist__empty {
    padding: 24px;
}

.ui-datalist__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 16px;
    padding: 10px 12px 10px 16px;
    color: var(--ui-text-2);
    font-size: 0.8125rem;
}

.ui-datalist__size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ui-datalist__size-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--ui-field-line);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-field-bg);
    color: var(--ui-text);
    font: 500 0.8125rem/1 var(--ui-font);
}

.ui-datalist__info {
    font-variant-numeric: tabular-nums;
}

.ui-datalist__nav {
    display: inline-flex;
    gap: 2px;
}

@media (max-width: 640px) {
    .ui-datalist__pager {
        justify-content: space-between;
    }

    .ui-datalist__size {
        display: none;
    }
}

/* ---------- Drawer (UiDrawer) -------------------------------------------- */

.ui-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1480;
    background: rgba(20, 14, 38, 0.36);
    animation: ui-backdrop-in 160ms var(--ui-ease);
}

.ui-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1490;
    display: flex;
    flex-direction: column;
    width: min(var(--ui-drawer-w, 360px), 100vw);
    border-right: 1px solid var(--ui-glass-line);
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-glass-edge), var(--ui-shadow-raised);
    -webkit-backdrop-filter: var(--ui-glass-filter-strong);
    backdrop-filter: var(--ui-glass-filter-strong);
    color: var(--ui-text);
    font-family: var(--ui-font);
    outline: none;
    animation: ui-drawer-in 200ms var(--ui-ease);
}

.ui-drawer--right {
    right: 0;
    left: auto;
    border-right: 0;
    border-left: 1px solid var(--ui-border);
    animation-name: ui-drawer-in-right;
}

@keyframes ui-drawer-in {
    from { transform: translateX(-100%); }
}

@keyframes ui-drawer-in-right {
    from { transform: translateX(100%); }
}

.ui-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 8px 20px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
}

.ui-drawer__title {
    flex: 1 1 auto;
    margin: 0;
    font: 600 1.0625rem/1.3 var(--ui-font-display);
}

.ui-drawer__close {
    margin-left: auto;
}

.ui-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .ui-drawer, .ui-drawer-backdrop { animation: none; }
}

/* ---------- Charts (UiChart, UiHeatmap) ---------------------------------
   The plot is an SVG stretched to the card (lines keep their width with
   non-scaling strokes); labels, legend and tips are HTML on top. */

.ui-chart {
    --ui-chart-y-w: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    color: var(--ui-text-2);
    font: 500 0.75rem/1.2 var(--ui-font);
}

.ui-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.ui-chart__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--ui-text);
    font: inherit;
}

button.ui-chart__key {
    cursor: pointer;
    border-radius: var(--ui-radius-sm);
}

button.ui-chart__key:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-chart__key.is-off {
    color: var(--ui-text-3);
    text-decoration: line-through;
}

.ui-chart__key.is-off .ui-chart__swatch {
    opacity: 0.3;
}

.ui-chart__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.ui-chart__body {
    display: flex;
    height: var(--ui-chart-plot-h, 260px);
}

.ui-chart__yaxis {
    position: relative;
    flex: 0 0 var(--ui-chart-y-w);
}

.ui-chart__ytick {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ui-chart__plot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ui-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ui-chart__grid {
    stroke: var(--ui-divider);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

.ui-chart__line {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ui-chart__bar {
    transition: opacity 120ms var(--ui-ease);
}

.ui-chart--bar .ui-chart__plot:has(.ui-chart__col:hover) .ui-chart__bar {
    opacity: 0.85;
}

.ui-chart__cols {
    position: absolute;
    inset: 0;
}

.ui-chart__col {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* The guide: a thin line on a line chart, a soft band on a bar chart. */
.ui-chart__col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--ui-border-strong);
    opacity: 0;
    transition: opacity 80ms var(--ui-ease);
}

.ui-chart--bar .ui-chart__col::before {
    left: 0;
    width: 100%;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-text) 5%, transparent);
}

.ui-chart__col:hover::before {
    opacity: 1;
}

.ui-chart__col.ui-tip {
    --ui-tip-delay: 0;
}

.ui-chart__xaxis {
    position: relative;
    height: 18px;
    margin-left: var(--ui-chart-y-w);
}

.ui-chart__xaxis.is-rotated {
    height: 52px;
}

.ui-chart__xtick {
    position: absolute;
    top: 2px;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
}

.ui-chart__xaxis.is-rotated .ui-chart__xtick {
    transform-origin: 100% 50%;
    transform: translateX(-100%) rotate(var(--ui-chart-rotate, -45deg));
}

/* Only for screen readers: the numbers behind the plot. */
.ui-chart__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sankey (UiSankey): bands in the colour of the node they leave, labels beside the nodes. */
.ui-sankey__svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: var(--ui-sankey-h, 360px);
    overflow: visible;
}

.ui-sankey__link {
    opacity: 0.32;
    transition: opacity 120ms var(--ui-ease);
}

.ui-sankey__link:hover {
    opacity: 0.6;
}

.ui-sankey__label {
    fill: var(--ui-text);
    font: 600 13px var(--ui-font);
}

.ui-sankey__value {
    fill: var(--ui-text-2);
    font-weight: 500;
}

/* Scatter (UiScatter): round dots on the plot, a dashed reference line. */
.ui-scatter__dot {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid var(--ui-bg-card);
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-text) 12%, transparent);
    cursor: default;
}

.ui-scatter__dot:hover,
.ui-scatter__dot:focus-visible {
    z-index: 1;
    outline: none;
    transform: scale(1.3);
}

.ui-scatter__dot.ui-tip {
    --ui-tip-delay: 0;
}

.ui-scatter__reference {
    stroke: var(--ui-tone-warning);
    stroke-dasharray: 6 4;
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

.ui-scatter__axes {
    display: flex;
    justify-content: space-between;
    margin-left: var(--ui-chart-y-w);
    color: var(--ui-text-3);
    font-size: 0.6875rem;
}

/* Heatmap: one row per series, one cell per label, stronger colour for higher values. */
.ui-heatmap {
    display: grid;
    gap: 3px;
    min-width: 0;
    color: var(--ui-text-2);
    font: 500 0.75rem/1.2 var(--ui-font);
}

.ui-heatmap__row {
    display: contents;
}

.ui-heatmap__rowlabel {
    align-self: center;
    padding-right: 6px;
    white-space: nowrap;
}

.ui-heatmap__cell {
    min-height: 22px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ui-heatmap-color, var(--ui-chart-1)) var(--ui-heat, 0%), var(--ui-bg-sunken));
}

.ui-heatmap__cell.ui-tip {
    --ui-tip-delay: 0;
}

.ui-heatmap__collabel {
    overflow: hidden;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.ui-heatmap__scale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.ui-heatmap__ramp {
    width: 120px;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ui-bg-sunken), var(--ui-heatmap-color, var(--ui-chart-1)));
}

/* ---------- File upload (UiFileUpload): the native input stays out of sight. */

.ui-upload {
    display: contents;
}

.ui-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
}

/* ---------- Tree (UiTreeView) ------------------------------------------ */

.ui-tree,
.ui-tree__children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-tree__line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 2px 8px 2px calc(4px + var(--ui-tree-level, 0) * 20px);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    font: 400 0.875rem/1.35 var(--ui-font);
}

.ui-tree--dense .ui-tree__line {
    min-height: 30px;
}

.ui-tree__line.is-selectable {
    cursor: pointer;
}

.ui-tree__line.is-selectable:hover {
    background: var(--ui-bg-hover);
}

.ui-tree__line.is-selected {
    background: color-mix(in srgb, var(--ui-accent) 10%, transparent);
    color: var(--ui-accent);
}

.ui-tree__line:focus-visible {
    outline: none;
    box-shadow: inset var(--ui-focus-ring);
}

.ui-tree__toggle {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-2);
}

.ui-tree__toggle:hover {
    background: var(--ui-bg-hover);
}

.ui-tree__toggle .ui-icon {
    transition: transform 140ms var(--ui-ease);
}

.ui-tree__toggle[aria-expanded="true"] .ui-icon {
    transform: rotate(90deg);
}

.ui-tree__content {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ---------- Autocomplete (UiAutocomplete) ------------------------------
   The suggestions are a popover in the top layer, placed under the field by ui.js. */

.ui-autocomplete__list {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 4px;
    overflow: auto;
    border: 1px solid var(--ui-glass-line);
    border-radius: 16px;
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-glass-edge), var(--ui-shadow-raised);
    color: var(--ui-text);
    font: 400 0.875rem/1.35 var(--ui-font);
    list-style: none;
    -webkit-backdrop-filter: var(--ui-glass-filter-strong);
    backdrop-filter: var(--ui-glass-filter-strong);
}

.ui-autocomplete__option {
    padding: 8px 10px;
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
}

.ui-autocomplete__option.is-active {
    background: var(--ui-bg-active);
}

.ui-autocomplete__empty {
    padding: 8px 10px;
    color: var(--ui-text-2);
}

.ui-autocomplete__busy,
.ui-autocomplete__clear {
    flex: 0 0 auto;
    margin-right: -4px;
}

/* ---------- Toasts (UiToastHost) ---------------------------------------
   Short notices in the top-right corner; the tone colours the edge and the icon. */

.ui-toasts {
    position: fixed;
    top: calc(var(--ui-topbar-h, 56px) + 12px);
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.ui-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 8px 12px 14px;
    border: 1px solid var(--ui-glass-line);
    border-radius: 16px;
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-glass-edge), var(--ui-shadow-raised);
    -webkit-backdrop-filter: var(--ui-glass-filter-strong);
    backdrop-filter: var(--ui-glass-filter-strong);
    color: var(--ui-text);
    font: 500 0.8125rem/1.45 var(--ui-font);
    pointer-events: auto;
    animation: ui-toast-in 180ms var(--ui-ease);
}

.ui-toast__icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ui-tone);
}

.ui-toast__message {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
    overflow-wrap: anywhere;
}

.ui-toast__close {
    flex: 0 0 auto;
    margin: -4px 0;
}

@keyframes ui-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
}

@media (max-width: 960px) {
    .ui-toasts {
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: 50%;
        transform: translateX(50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-toast { animation: none; }
}

/* ---------- Expansion panel (UiExpansionPanel) ------------------------- */

.ui-expansion {
    border: 1px solid var(--ui-glass-line);
    border-radius: 16px;
    background: var(--ui-glass-thin);
    box-shadow: var(--ui-glass-edge);
    color: var(--ui-text);
    font-family: var(--ui-font);
}

.ui-expansion__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px 8px 16px;
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    user-select: none;
}

.ui-expansion__summary::-webkit-details-marker {
    display: none;
}

.ui-expansion__summary:hover {
    background: var(--ui-bg-hover);
}

.ui-expansion__summary:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-expansion__title {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-expansion__end {
    flex: 0 0 auto;
    color: var(--ui-text-2);
    font-weight: 500;
    font-size: 0.8125rem;
}

.ui-expansion__icon {
    flex: 0 0 auto;
    color: var(--ui-text-2);
}

.ui-expansion__chevron {
    flex: 0 0 auto;
    color: var(--ui-text-2);
    transition: transform 160ms var(--ui-ease);
}

.ui-expansion[open] > .ui-expansion__summary .ui-expansion__chevron {
    transform: rotate(180deg);
}

.ui-expansion__body {
    padding: 4px 16px 16px;
}

/* ---------- Dialog ------------------------------------------------------
   The browser's own modal <dialog> (UiDialogHost); UiDialog is its inside. */

.ui-dialog {
    position: fixed;
    inset: 0;
    z-index: 1501;
    width: auto;
    height: fit-content;
    max-width: min(var(--ui-dialog-w, 600px), calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ui-glass-line);
    border-radius: 26px;
    background: var(--ui-glass-strong);
    box-shadow: var(--ui-glass-edge), 0 32px 96px -16px rgba(20, 10, 50, 0.40);
    color: var(--ui-text);
    -webkit-backdrop-filter: var(--ui-glass-filter-strong);
    backdrop-filter: var(--ui-glass-filter-strong);
    font-family: var(--ui-font);
    opacity: 1;
    transform: none;
    transition: opacity 160ms var(--ui-ease), transform 160ms var(--ui-ease), overlay 160ms allow-discrete, display 160ms allow-discrete;
}

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

/* The page behind an open dialog. */
.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: var(--ui-scrim);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
    animation: ui-backdrop-in 160ms var(--ui-ease);
}

@keyframes ui-backdrop-in {
    from { opacity: 0; }
}

:root.ui-dialog-open {
    overflow: hidden;
}

.ui-dialog--sm { --ui-dialog-w: 600px; }
.ui-dialog--md { --ui-dialog-w: 960px; }
.ui-dialog--lg { --ui-dialog-w: 1280px; }
.ui-dialog--xl { --ui-dialog-w: 1440px; }

.ui-dialog--full-width {
    width: min(var(--ui-dialog-w, 600px), calc(100vw - 32px));
}

.ui-dialog--full-screen {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
}

.ui-dialog__surface {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.ui-dialog--full-screen .ui-dialog__surface {
    height: 100%;
}

.ui-dialog__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 12px 24px;
}

.ui-dialog__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ui-tone) 12%, transparent);
    color: var(--ui-tone);
}

.ui-dialog__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-dialog__leading {
    display: inline-flex;
    flex: 0 0 auto;
}

.ui-dialog__subtitle {
    margin: 2px 0 0;
    color: var(--ui-text-2);
    font: 400 0.8125rem/1.45 var(--ui-font);
}

.ui-dialog__header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.ui-dialog__title {
    min-width: 0;
    margin: 0;
    color: var(--ui-text);
    font: 600 1.125rem/1.35 var(--ui-font-display);
    letter-spacing: -0.01em;
}

.ui-dialog__close {
    margin-left: auto;
}

.ui-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 24px 20px;
}

.ui-dialog__message {
    margin: 0;
    white-space: pre-line;
    color: var(--ui-text-2);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.ui-dialog__actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--ui-divider);
}

@media (max-width: 640px) {
    .ui-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 16px;
    }

    .ui-dialog__header { padding: 16px 12px 10px 18px; }
    .ui-dialog__body { padding: 4px 18px 16px; }
    .ui-dialog__actions { padding: 12px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-dialog { transition: none; }
}

/* ---------- Settings card (GlassSettingsCard) --------------------------
   One calm card per settings page: scope, title (the page's h1), a line under it and
   the primary actions; a padded body of divided sections; Save in the footer. */

.ui-settings {
    --ui-settings-pad: 32px;
    border-radius: 28px;
}

.ui-settings__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 20px;
    padding: 28px var(--ui-settings-pad) 24px;
}

.ui-settings__titles {
    flex: 1 1 340px;
    min-width: 0;
}

.ui-settings__scope {
    margin-bottom: 10px;
}

.ui-settings__scope:empty {
    display: none;
}

.ui-settings__title {
    margin: 0;
    color: var(--ui-text);
    font: 700 1.75rem/1.2 var(--ui-font-display);
    letter-spacing: -0.025em;
}

.ui-settings__subtitle {
    max-width: 78ch;
    margin: 6px 0 0;
    color: var(--ui-text-2);
    font: 400 0.9375rem/1.55 var(--ui-font);
}

.ui-settings__actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-top: 4px;
}

.ui-settings__body {
    min-width: 0;
    padding: 0 var(--ui-settings-pad) 32px;
}

.ui-settings__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px var(--ui-settings-pad) 24px;
    border-top: 1px solid var(--ui-divider);
}

@media (max-width: 640px) {
    .ui-settings {
        --ui-settings-pad: 18px;
        border-radius: var(--ui-radius-lg);
    }

    .ui-settings__header {
        padding-top: 20px;
    }

    .ui-settings__title {
        font-size: 1.25rem;
    }
}

/* ---------- Section (GlassSection) -------------------------------------
   Inside a card a section is a divided row, never a card in the card; each opens
   with a hairline, so the first also separates the header from the content. On its
   own on a page it is a quiet panel. */

.ui-section {
    padding: 16px;
    border: 1px solid var(--ui-glass-rim);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-glass);
    box-shadow: var(--ui-glass-edge), var(--ui-shadow-card);
}

.ui-section + .ui-section {
    margin-top: 16px;
}

.ui-card .ui-section,
.glass-card .ui-section {
    padding: 28px 0;
    border: 0;
    border-top: 1px solid var(--ui-divider);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ui-card .ui-section + .ui-section,
.glass-card .ui-section + .ui-section {
    margin-top: 0;
}

.ui-card .ui-section:last-child,
.glass-card .ui-section:last-child {
    padding-bottom: 0;
}

.ui-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 16px;
}

.ui-section__titles {
    flex: 1 1 280px;
    min-width: 0;
}

.ui-section__title {
    margin: 0;
    color: var(--ui-text);
    font: 600 1rem/1.4 var(--ui-font);
}

.ui-section__description {
    max-width: 78ch;
    margin: 4px 0 0;
    color: var(--ui-text-2);
    font: 400 0.8125rem/1.5 var(--ui-font);
}

.ui-section__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ui-section__body {
    min-width: 0;
}

/* ---------- Page scaffolding ------------------------------------------- */

.ui-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 24px 24px 40px;
    color: var(--ui-text);
    font-family: var(--ui-font);
}

.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}

.ui-page-header__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.ui-page-header__eyebrow {
    margin: 0 0 4px;
    color: var(--ui-accent);
    font: 600 0.75rem/1.2 var(--ui-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ui-page-header__title {
    margin: 0;
    color: var(--ui-text);
    font: 700 2rem/1.15 var(--ui-font-display);
    letter-spacing: -0.03em;
}

.ui-page-header__subtitle {
    margin: 4px 0 0;
    color: var(--ui-text-2);
    font: 400 0.9375rem/1.5 var(--ui-font);
}

.ui-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 640px) {
    /* UiButton FoldOnPhone: just the icon; its Label still names it. */
    .ui-btn--fold { width: var(--ui-btn-h); padding: 0; }
    .ui-btn--fold .ui-btn__label { display: none; }

    .ui-page {
        gap: 16px;
        padding: 16px 14px 24px;
    }

    .ui-page-header {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .ui-page-header__actions {
        flex-wrap: nowrap;
    }

    .ui-page-header__title {
        font-size: 1.375rem;
    }
}

/* ---------- Stacked and diverging bars (UiStackedBar, UiDivergingBar) ----
   A stacked bar shows parts of a whole, each in its tone; a diverging bar two opposite
   shares around a centre line (each half is 100% of its side). ui-facts is a list of
   short label/value pairs under such a bar. */

.ui-stackbar__track {
    display: flex;
    height: 14px;
    overflow: hidden;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-sunken);
}

.ui-stackbar__segment,
.ui-stackbar__swatch {
    background: var(--ui-tone, var(--ui-accent));
}

.ui-stackbar__legend,
.ui-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 16px;
    margin: 14px 0 0;
}

.ui-stackbar__legend > div,
.ui-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ui-stackbar__legend dt,
.ui-facts dt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text-2);
}

.ui-stackbar__legend dd,
.ui-facts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-stackbar__swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.ui-facts {
    padding-top: 12px;
    border-top: 1px solid var(--ui-divider);
}

.ui-divbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.ui-divbar__label {
    overflow: hidden;
    color: var(--ui-text-2);
    font-size: 0.85rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-divbar__label b {
    color: var(--ui-text);
    font-variant-numeric: tabular-nums;
}

.ui-divbar__label.is-low {
    text-align: right;
}

.ui-divbar__track {
    position: relative;
    height: 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-sunken);
}

.ui-divbar__track::after {
    content: "";
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: 50%;
    width: 1px;
    background: var(--ui-text-3);
}

.ui-divbar__low,
.ui-divbar__high {
    position: absolute;
    top: 0;
    bottom: 0;
    max-width: 50%;
    background: var(--ui-tone, var(--ui-accent));
}

.ui-divbar__low {
    right: 50%;
    border-radius: var(--ui-radius-pill) 0 0 var(--ui-radius-pill);
}

.ui-divbar__high {
    left: 50%;
    border-radius: 0 var(--ui-radius-pill) var(--ui-radius-pill) 0;
}

/* ---------- Tone helper -------------------------------------------------
   Last in the file on purpose: a tone class beats the default tone each
   component sets on itself. */

.ui-tone-neutral { --ui-tone: var(--ui-tone-neutral); }
.ui-tone-primary { --ui-tone: var(--ui-tone-primary); }
.ui-tone-info { --ui-tone: var(--ui-tone-info); }
.ui-tone-success { --ui-tone: var(--ui-tone-success); }
.ui-tone-warning { --ui-tone: var(--ui-tone-warning); }
.ui-tone-danger { --ui-tone: var(--ui-tone-danger); }
.ui-tone-cta { --ui-tone: var(--ui-tone-cta); }