/* Product.Ui: design system bundle generated at build time from design-system/index.css.
   Do not edit this file; change the sources in design-system/ instead. */

/* ==== tokens/colors.css ==== */
/* ============================================================
   SNOWBOT UI — Color primitives + semantic mapping
   Source palette: #0D1321 #1D2D44 #3E5C76 #748CAB #F0EBD8
   Primitives never change across themes. Themes remap semantics.
   ============================================================ */
:root {
  /* ---- Neutral — the navy chrome, built out of #0D1321 → #1D2D44 ---- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fbfaf5;
  --neutral-50:  #f0ebd8;   /* eggshell — the palette's light end */
  --neutral-100: #dcd9cb;
  --neutral-200: #c0c6d2;
  --neutral-300: #9daabf;
  --neutral-400: #748cab;   /* shadow blue */
  --neutral-500: #5b7392;
  --neutral-600: #4a6480;
  --neutral-700: #3e5c76;   /* payne's grey */
  --neutral-750: #35506a;
  --neutral-800: #2a415c;
  --neutral-850: #24374f;
  --neutral-900: #1d2d44;   /* space cadet */
  --neutral-925: #172338;
  --neutral-950: #131b2c;
  --neutral-1000:#0d1321;   /* rich black */

  /* ---- Primary — payne's grey → shadow blue ---- */
  --primary-50:  #eef1f6;
  --primary-100: #d9e0ea;
  --primary-200: #b6c3d6;
  --primary-300: #94a6c0;
  --primary-400: #748cab;
  --primary-500: #5a739a;
  --primary-600: #3e5c76;
  --primary-700: #334c62;
  --primary-800: #27394a;
  --primary-900: #1d2d44;
  --primary-950: #0d1321;

  /* ---- Secondary — eggshell warmed into a usable ramp ---- */
  --secondary-50:  #fbf9f2;
  --secondary-100: #f0ebd8;
  --secondary-200: #e2d9ba;
  --secondary-300: #cfc298;
  --secondary-400: #b8a878;
  --secondary-500: #9c8c5e;
  --secondary-600: #7e714b;
  --secondary-700: #62573a;
  --secondary-800: #463e29;
  --secondary-900: #2f2a1c;
  --secondary-950: #1c1911;

  /* ---- Accent — kept for live values, tuned to the eggshell end ---- */
  --accent-50:  #fdf8e9;
  --accent-100: #f7ecc6;
  --accent-200: #ecd894;
  --accent-300: #dcc06a;
  --accent-400: #c6a648;
  --accent-500: #a98b34;
  --accent-600: #8a7029;
  --accent-700: #6a5620;
  --accent-800: #4b3d17;
  --accent-900: #332a10;
  --accent-950: #1f1a0a;

  /* ---- Functional ---- */
  --success-50:#e9f9ec; --success-100:#c6f0ce; --success-200:#93e3a4; --success-300:#5fd177;
  --success-400:#39bd55; --success-500:#28a244; --success-600:#1f8537; --success-700:#19682c;
  --success-800:#134c21; --success-900:#0d3416; --success-950:#08200e;

  --warning-50:#fdf4e0; --warning-100:#fbe6b6; --warning-200:#f6cd72; --warning-300:#efb336;
  --warning-400:#e3a008; --warning-500:#c28606; --warning-600:#9d6c05; --warning-700:#7a5404;
  --warning-800:#583c03; --warning-900:#3c2902; --warning-950:#261a01;

  --danger-50:#fdecec;  --danger-100:#fbd2d3; --danger-200:#f5a7a9; --danger-300:#ee7a7e;
  --danger-400:#e5484d;  --danger-500:#cf3237; --danger-600:#ac2529; --danger-700:#871d20;
  --danger-800:#611518;  --danger-900:#420e10; --danger-950:#2a080a;

  --info-50:#e9f3fb;  --info-100:#cbe3f6; --info-200:#9fc8ec; --info-300:#94a6c0;
  --info-400:#6f9cc9; --info-500:#4a7fb3; --info-600:#3a6591; --info-700:#2c4d6f;
  --info-800:#1f374f; --info-900:#152535; --info-950:#0d1721;

  /* ---- Alphas: borders, highlights, overlays ---- */
  --alpha-white-04: rgba(240,235,216,.05);
  --alpha-white-06: rgba(240,235,216,.07);
  --alpha-white-10: rgba(240,235,216,.11);
  --alpha-white-16: rgba(240,235,216,.17);
  --alpha-white-24: rgba(240,235,216,.25);
  --alpha-black-10: rgba(13,19,33,.10);
  --alpha-black-24: rgba(13,19,33,.24);
  --alpha-black-40: rgba(13,19,33,.42);
  --alpha-black-60: rgba(13,19,33,.64);
}

/* ============================================================
   SEMANTIC LAYER — default (dark, the product's native mode)
   ============================================================ */
:root,
:root[data-mode="dark"] {
  color-scheme: dark;

  --background:            #2f2f2f;
  --background-secondary:  #292929;
  --background-sunken:     #1e1e1e;
  --surface:               #363636;
  --surface-hover:         #3d3d3d;
  --surface-active:        #464646;
  --surface-elevated:      #3d3d3d;
  --surface-inset:         #242424;
  --surface-selected:      #33455c;
  --surface-accent-soft:   rgba(116,140,171,.18);
  --overlay:               var(--alpha-black-60);

  --border:                #4a4a4a;
  --border-subtle:         #3d3d3d;
  --border-strong:         #5f5f5f;
  --border-accent:         var(--primary-400);
  --separator:             #3a3a3a;

  --text-primary:          #f0ebd8;
  --text-secondary:        #c8cfdc;
  --text-muted:            #9aa8bd;
  --text-disabled:         #6d7d95;
  --text-inverse:          #0d1321;
  --text-accent:           var(--primary-300);
  --text-value:            var(--secondary-200);
  --text-link:             var(--primary-300);
  --text-link-hover:       var(--primary-200);

  --icon-primary:          #d7dde7;
  --icon-muted:            #8e9cb2;
  --icon-accent:           var(--primary-300);

  --accent:                var(--primary-400);
  --accent-hover:          var(--primary-300);
  /* Dark press goes lighter still, as hover does: the dark text keeps AA on it (primary-500 gave 3.8:1). */
  --accent-active:         var(--primary-200);
  --accent-contrast:       #0d1321;
  --accent-soft:           rgba(116,140,171,.20);
  --accent-ring:           rgba(148,166,192,.52);

  --success:      var(--success-400); --success-text: var(--success-300);
  --success-soft: rgba(57,189,85,.14); --success-border: rgba(57,189,85,.42);
  --warning:      var(--warning-400); --warning-text: var(--warning-300);
  --warning-soft: rgba(227,160,8,.14); --warning-border: rgba(227,160,8,.42);
  --danger:       var(--danger-500);  --danger-text:  var(--danger-200);
  --danger-soft:  rgba(229,72,77,.16); --danger-border: rgba(229,72,77,.46);
  --info:         var(--info-400);    --info-text:    var(--info-200);
  --info-soft:    rgba(111,156,201,.14); --info-border: rgba(111,156,201,.42);

  --focus-ring:   var(--accent-ring);
  --scrollbar-thumb: #555555;
  --scrollbar-track: #292929;
}

/* ---- LIGHT MODE — the eggshell end of the same palette ---- */
:root[data-mode="light"] {
  color-scheme: light;

  --background:            #f4f5f6;
  --background-secondary:  #eceef0;
  --background-sunken:     #e4e7ea;
  --surface:               #ffffff;
  --surface-hover:         #f3f4f6;
  --surface-active:        #e9ebee;
  --surface-elevated:      #ffffff;
  --surface-inset:         #f7f8f9;
  --surface-selected:      #dfe5ee;
  --surface-accent-soft:   rgba(62,92,118,.10);
  --overlay:               rgba(13,19,33,.48);

  --border:                #d5d8dc;
  --border-subtle:         #e5e7ea;
  --border-strong:         #b6bbc2;
  --border-accent:         var(--primary-600);
  --separator:             #e3e5e8;

  --text-primary:          #0d1321;
  --text-secondary:        #2a3a4f;
  --text-muted:            #5b6a7e;
  --text-disabled:         #93a0b0;
  --text-inverse:          #f0ebd8;
  --text-accent:           var(--primary-700);
  --text-value:            var(--secondary-700);
  --text-link:             var(--primary-600);
  --text-link-hover:       var(--primary-700);

  --icon-primary:          #2a3a4f;
  --icon-muted:            #66748a;
  --icon-accent:           var(--primary-600);

  --accent:                var(--primary-600);
  /* Light hover and press go darker, not lighter: the light text keeps AA on them (primary-500 gave 4.03:1). */
  --accent-hover:          var(--primary-700);
  --accent-active:         var(--primary-800);
  --accent-contrast:       #f0ebd8;
  --accent-soft:           rgba(62,92,118,.12);
  --accent-ring:           rgba(62,92,118,.42);

  --success: var(--success-600); --success-text: var(--success-700);
  --success-soft: rgba(40,162,68,.10); --success-border: rgba(40,162,68,.32);
  --warning: var(--warning-500); --warning-text: var(--warning-700);
  --warning-soft: rgba(227,160,8,.14); --warning-border: rgba(227,160,8,.34);
  --danger:  var(--danger-500);  --danger-text: var(--danger-600);
  --danger-soft: rgba(207,50,55,.09); --danger-border: rgba(207,50,55,.32);
  --info:    var(--info-500);    --info-text: var(--info-700);
  --info-soft: rgba(74,127,179,.10); --info-border: rgba(74,127,179,.30);

  --scrollbar-thumb: #c3c7cc;
  --scrollbar-track: #eceef0;
}

/* ==== tokens/typography.css ==== */
/* Typography tokens — families, sizes, weights, leading, tracking */
:root {
  --font-family-sans: "Segoe UI", "Selawik", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-display: var(--font-family-sans);
  --font-family-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Roboto Mono", ui-monospace, monospace;
  --font-family-numeric: var(--font-family-sans);

  --font-size-3xs: 9px;
  --font-size-2xs: 10px;
  --font-size-xs:  11px;
  --font-size-sm:  12px;
  --font-size-md:  13px;   /* product base — dense desktop UI */
  --font-size-lg:  15px;
  --font-size-xl:  17px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-size-5xl: 38px;

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

  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.01em;
  --letter-spacing-wider: 0.04em;
  --letter-spacing-overline: 0.08em;

  /* Composite type ramp (font / line-height, plus paired tracking token) */
  --type-display: var(--font-weight-semibold) var(--font-size-5xl)/var(--line-height-tight) var(--font-family-display);
  --type-h1: var(--font-weight-semibold) var(--font-size-4xl)/var(--line-height-tight) var(--font-family-display);
  --type-h2: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-tight) var(--font-family-display);
  --type-h3: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-snug) var(--font-family-display);
  --type-h4: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-snug) var(--font-family-sans);
  --type-h5: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-snug) var(--font-family-sans);
  --type-body-lg: var(--font-weight-regular) var(--font-size-lg)/var(--line-height-normal) var(--font-family-sans);
  --type-body: var(--font-weight-regular) var(--font-size-md)/var(--line-height-normal) var(--font-family-sans);
  --type-body-sm: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-normal) var(--font-family-sans);
  --type-caption: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-snug) var(--font-family-sans);
  --type-label: var(--font-weight-semibold) var(--font-size-sm)/var(--line-height-snug) var(--font-family-sans);
  --type-overline: var(--font-weight-semibold) var(--font-size-2xs)/var(--line-height-snug) var(--font-family-sans);
  --type-code: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-normal) var(--font-family-mono);
}

/* ==== tokens/spacing.css ==== */
/* Spacing scale + sizing tokens */
:root {
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;

  /* Control metrics — density layer overrides these */
  --control-height-xs: 20px;
  --control-height-sm: 24px;
  --control-height-md: 28px;
  --control-height-lg: 34px;
  --control-height-xl: 40px;
  --control-padding-x: var(--space-5);
  --control-gap: var(--space-2);

  /* Frame metrics */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 48px;
  --sidebar-padding: var(--space-3);
  --header-height: 40px;
  --menubar-height: 24px;
  --statusbar-height: 22px;
  --toolbar-height: 34px;
  --railbar-width: 36px;
  --panel-padding: var(--space-6);
  --section-gap: var(--space-8);

  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1440px;
  --container-full: 100%;

  /* Breakpoints (for reference in JS / container queries) */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1600px;
}

/* ==== tokens/radius.css ==== */
/* Corner radii. Faithful theme is near-square; themes scale this up. */
:root {
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-3xl: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Component aliases — themes retune these, components never hardcode */
  --radius-control: var(--radius-xs);
  --radius-card: var(--radius-sm);
  --radius-surface: var(--radius-sm);
  --radius-overlay: var(--radius-md);
  --radius-badge: var(--radius-xs);
  --radius-tab: var(--radius-xs) var(--radius-xs) 0 0;
}

/* ==== tokens/shadows.css ==== */
/* Elevation. The source product is flat; depth arrives with the derived themes. */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 1px rgba(0,0,0,.20);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 2px 6px rgba(0,0,0,.32);
  --shadow-lg: 0 8px 20px rgba(0,0,0,.38);
  --shadow-xl: 0 18px 44px rgba(0,0,0,.46);
  --shadow-overlay: 0 24px 64px rgba(0,0,0,.55);
  --shadow-inset-top: inset 0 1px 0 var(--alpha-white-06);
  --shadow-inset-line: inset 0 0 0 1px var(--alpha-white-04);
  --shadow-focus: 0 0 0 2px var(--focus-ring);
  --shadow-focus-inset: inset 0 0 0 1px var(--accent);
  --shadow-accent-glow: 0 0 0 1px rgba(98,132,167,.35), 0 6px 18px rgba(98,132,167,.18);

  /* Elevation aliases consumed by components */
  --elevation-flat: var(--shadow-none);
  --elevation-raised: var(--shadow-xs);
  --elevation-card: var(--shadow-none);
  --elevation-popover: var(--shadow-lg);
  --elevation-modal: var(--shadow-overlay);
  --elevation-toast: var(--shadow-lg);

  --backdrop-blur: 0px;   /* themes opt in */
}

/* ==== tokens/motion.css ==== */
/* Motion language: durations, easings, composite transitions */
:root {
  --duration-instant: 60ms;
  --duration-fast: 110ms;
  --duration-base: 160ms;
  --duration-slow: 240ms;
  --duration-slower: 360ms;
  --duration-page: 280ms;
  --duration-shimmer: 1400ms;

  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-enter:    cubic-bezier(0,0,.2,1);
  --ease-exit:     cubic-bezier(.4,0,1,1);
  --ease-emphasized: cubic-bezier(.2,0,0,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
  --ease-smooth:   cubic-bezier(.32,.72,0,1);
  --ease-linear:   linear;

  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard),
                       fill var(--duration-fast) var(--ease-standard);
  --transition-transform: transform var(--duration-base) var(--ease-emphasized);
  --transition-opacity: opacity var(--duration-base) var(--ease-standard);
  --transition-shadow: box-shadow var(--duration-base) var(--ease-standard);
  --transition-control: var(--transition-colors), var(--transition-shadow),
                        transform var(--duration-fast) var(--ease-standard);
  --transition-surface: var(--transition-colors), var(--transition-shadow),
                        transform var(--duration-base) var(--ease-emphasized);

  --stagger-step: 40ms;
  --press-scale: .985;
  --hover-lift: 0px;   /* themes opt in */
}

/* ==== tokens/z-index.css ==== */
:root {
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-sidebar: 210;
  --z-dropdown: 400;
  --z-popover: 450;
  --z-tooltip: 500;
  --z-overlay: 600;
  --z-modal: 610;
  --z-drawer: 620;
  --z-command: 700;
  --z-toast: 800;
  --z-max: 999;
}

/* ==== foundations/fonts.css ==== */
/* ============================================================
   IBM Plex — self-hosted, no CDN.
   SIL Open Font License 1.1: see ../fonts/ibm-plex/LICENSE.txt.

   Only the faces the design system consumes are declared:
   - IBM Plex Sans 400 / 500 / 600 (--font-weight-regular, -medium,
     -semibold; no rule uses 700 through a token, the error glyph's
     literal 700 resolves to the 600 face);
   - IBM Plex Mono 400 (--type-code, .ui-kbd, .ui-tag, .u-mono).
   No italic is used by any rule.

   The families are referenced by --font-family-* in the premium and
   next themes only; browsers download a face the first time text
   actually uses it, so the other themes never fetch these files.
   ============================================================ */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex/IBMPlexSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex/IBMPlexMono-Regular.woff2") format("woff2");
}

/* ==== foundations/reset.css ==== */
/* Scoped-ish modern reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1,h2,h3,h4,h5,h6, p, figure, blockquote, dl, dd, pre { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
:where(a) { color: var(--text-link); text-decoration: none; }
:where(a):hover { color: var(--text-link-hover); text-decoration: underline; }
[hidden] { display: none !important; }
fieldset { border: 0; margin: 0; padding: 0; }

/* ==== foundations/base.css ==== */
html, body { height: 100%; }
body {
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Selection & focus */
::selection { background: var(--accent-soft); color: var(--text-primary); }
:focus { outline: none; }
:focus-visible,
.ui-focus-ring:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--radius-control);
}

/* Scrollbars — the product's thin desktop scrollbars, tidied */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 3px solid var(--scrollbar-track);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
*::-webkit-scrollbar-corner { background: var(--scrollbar-track); }

.ui-scroll-elegant::-webkit-scrollbar-thumb { background: transparent; transition: background var(--duration-base) var(--ease-standard); }
.ui-scroll-elegant:hover::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

/* ==== foundations/typography.css ==== */
/* Type utilities mapped 1:1 to the ramp */
.ui-display { font: var(--type-display); letter-spacing: var(--letter-spacing-tighter); color: var(--text-primary); }
.ui-h1 { font: var(--type-h1); letter-spacing: var(--letter-spacing-tighter); }
.ui-h2 { font: var(--type-h2); letter-spacing: var(--letter-spacing-tight); }
.ui-h3 { font: var(--type-h3); letter-spacing: var(--letter-spacing-tight); }
.ui-h4 { font: var(--type-h4); }
.ui-h5 { font: var(--type-h5); }
.ui-body-lg { font: var(--type-body-lg); }
.ui-body { font: var(--type-body); }
.ui-body-sm { font: var(--type-body-sm); color: var(--text-secondary); }
.ui-caption { font: var(--type-caption); color: var(--text-muted); }
.ui-label { font: var(--type-label); color: var(--text-secondary); }
.ui-overline {
  font: var(--type-overline);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ui-code { font: var(--type-code); }
.ui-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.ui-text-primary { color: var(--text-primary); }
.ui-text-secondary { color: var(--text-secondary); }
.ui-text-muted { color: var(--text-muted); }
.ui-text-disabled { color: var(--text-disabled); }
.ui-text-accent { color: var(--text-accent); }
.ui-text-value { color: var(--text-value); font-variant-numeric: tabular-nums; }
.ui-text-success { color: var(--success-text); }
.ui-text-warning { color: var(--warning-text); }
.ui-text-danger { color: var(--danger-text); }
.ui-text-info { color: var(--info-text); }

.ui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-prose { max-width: 68ch; text-wrap: pretty; color: var(--text-secondary); }
.ui-prose p + p { margin-top: var(--space-5); }
.ui-hint { font: var(--type-caption); color: var(--info-300); }

/* ==== layout/containers.css ==== */
.ui-container { width: 100%; margin-inline: auto; padding-inline: var(--space-6); }
.ui-container--sm { max-width: var(--container-sm); }
.ui-container--md { max-width: var(--container-md); }
.ui-container--lg { max-width: var(--container-lg); }
.ui-container--xl { max-width: var(--container-xl); }

.ui-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  box-shadow: var(--elevation-card);
}
.ui-panel__header {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--toolbar-height);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--separator);
}
.ui-panel__title { font: var(--type-label); color: var(--text-primary); }
.ui-panel__body { padding: var(--panel-padding); }
.ui-panel__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--separator);
  background: var(--background-secondary);
}

/* Group box — the product's labelled rule-line section */
.ui-group { border: 0; margin-block: var(--space-6); }
.ui-group__label {
  display: flex; align-items: center; gap: var(--space-4);
  font: var(--type-label); color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.ui-group__label::after {
  content: ""; flex: 1; height: 1px; background: var(--separator);
}
.ui-group__body { padding-inline: var(--space-2); }

.ui-section { margin-bottom: var(--section-gap); }
.ui-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); }
.ui-section__title { font: var(--type-h4); }
.ui-section__desc { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-1); }

.ui-divider { height: 1px; background: var(--separator); border: 0; margin-block: var(--space-6); }
.ui-divider--vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--space-4); }
.ui-divider--labelled { display: flex; align-items: center; gap: var(--space-4); height: auto; background: none; font: var(--type-caption); color: var(--text-muted); }
.ui-divider--labelled::before, .ui-divider--labelled::after { content: ""; flex: 1; height: 1px; background: var(--separator); }

/* ==== layout/grid.css ==== */
.ui-grid { display: grid; gap: var(--space-6); }
.ui-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.ui-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ui-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.ui-grid--6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
.ui-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ui-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ui-grid--tight { gap: var(--space-4); }
.ui-grid--loose { gap: var(--space-8); }

.ui-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.ui-stack--tight { gap: var(--space-3); }
.ui-stack--loose { gap: var(--space-8); }
.ui-row { display: flex; align-items: center; gap: var(--space-4); }
.ui-row--tight { gap: var(--space-2); }
.ui-row--wrap { flex-wrap: wrap; }
.ui-row--between { justify-content: space-between; }
.ui-row--end { justify-content: flex-end; }
.ui-row--top { align-items: flex-start; }
.ui-spacer { flex: 1 1 auto; }

/* Split / master-detail */
.ui-split { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0,1fr); gap: 0; min-height: 0; }
.ui-split--wide { grid-template-columns: minmax(280px, 420px) minmax(0,1fr); }
.ui-split--inspector { grid-template-columns: minmax(0,1fr) minmax(260px, 340px); }
.ui-split > * { min-width: 0; }
.ui-split__pane { border-inline-end: 1px solid var(--separator); min-width: 0; overflow: auto; }
.ui-split__pane:last-child { border-inline-end: 0; }
.ui-resizer {
  width: 5px; cursor: col-resize; background: transparent; position: relative;
  transition: background var(--duration-fast) var(--ease-standard);
}
.ui-resizer::after { content:""; position: absolute; inset: 0 2px; background: var(--separator); }
.ui-resizer:hover { background: var(--accent-soft); }
/* A split whose border the user moves (UiSplitView): the start pane is as wide as the user made it (--split-size, set
   on the root), the resizer between the panes. */
.ui-split--resizable { grid-template-columns: var(--split-size, 320px) auto minmax(0,1fr); }
.ui-split--resizable > .ui-split__pane { border-inline-end: 0; }
/* A panel with one resizable edge (UiResizablePanel): its body as wide as the user made it (--panel-size). */
.ui-resizable { display: flex; min-width: 0; min-height: 0; }
.ui-resizable__body { flex: none; width: var(--panel-size, 320px); min-width: 0; overflow: auto; }

@media (max-width: 900px) {
  .ui-grid--3, .ui-grid--4, .ui-grid--6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ui-split, .ui-split--wide, .ui-split--inspector { grid-template-columns: minmax(0,1fr); }
  .ui-split__pane { border-inline-end: 0; border-bottom: 1px solid var(--separator); }
  /* Stacked panes have no border to move. */
  .ui-split--resizable > .ui-resizer { display: none; }
}
@media (max-width: 560px) {
  .ui-grid--2, .ui-grid--3, .ui-grid--4, .ui-grid--6 { grid-template-columns: minmax(0,1fr); }
}

/* ==== layout/app-shell.css ==== */
/* Application shell — menubar / header / rail / sidebar / content / statusbar */
.ui-app {
  display: grid;
  grid-template-areas: "menubar" "body" "status";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0,1fr) auto;
  height: 100%;
  min-height: 0;
  background: var(--background);
  color: var(--text-primary);
}
.ui-app__menubar {
  grid-area: menubar;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-2);
  min-height: var(--menubar-height);
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
  background: var(--background-secondary);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--font-size-sm);
  z-index: var(--z-header);
}
.ui-app__menu-item {
  padding: var(--space-1) var(--space-4);
  color: var(--text-secondary);
  border-radius: var(--radius-control);
  transition: var(--transition-colors);
}
.ui-app__menu-item:hover, .ui-app__menu-item[aria-expanded="true"] { background: var(--surface-hover); color: var(--text-primary); }
.ui-app__body { grid-area: body; display: flex; min-height: 0; min-width: 0; }
.ui-app__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ui-app__content { flex: 1; min-height: 0; overflow: auto; padding: var(--panel-padding); }
.ui-app__content--flush { padding: 0; }
.ui-app__statusbar {
  grid-area: status;
  display: flex; align-items: center; gap: var(--space-5);
  min-height: var(--statusbar-height);
  padding-inline: var(--space-4);
  background: var(--background-secondary);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Header / topbar */
.ui-header {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-5);
  min-height: var(--header-height);
  padding-block: var(--space-2);
  padding-inline: var(--space-6);
  background: var(--background-secondary);
  border-bottom: 1px solid var(--separator);
  z-index: var(--z-header);
}
.ui-header__title { font: var(--type-h5); }
.ui-header__meta { font: var(--type-caption); color: var(--text-muted); }
.ui-header--sticky { position: sticky; top: 0; }

/* Toolbar */
.ui-toolbar {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  min-height: var(--toolbar-height);
  padding: var(--space-3) var(--space-5);
  background: var(--background-secondary);
  border-bottom: 1px solid var(--separator);
}
.ui-toolbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
.ui-toolbar--contextual {
  background: var(--accent-soft);
  border-bottom-color: var(--border-accent);
  animation: ui-slide-down var(--duration-base) var(--ease-emphasized);
}

/* Icon rail (the product's narrow vertical module strip) */
.ui-rail {
  width: var(--railbar-width);
  flex: 0 0 var(--railbar-width);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding-block: var(--space-4);
  background: var(--background-secondary);
  border-inline-end: 1px solid var(--separator);
}
.ui-rail__item {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-control);
  color: var(--icon-muted);
  position: relative;
  transition: var(--transition-colors);
}
.ui-rail__item:hover { background: var(--surface-hover); color: var(--icon-primary); }
/* The rail is narrower than any label, so its tooltips always anchor to the side. */
.ui-rail__item.ui-tip::after {
  inset-inline-start: calc(100% + 6px); inset-inline-end: auto; bottom: auto; top: 50%;
  transform: translateY(-50%) translateX(-3px);
}
.ui-rail__item.ui-tip:hover::after, .ui-rail__item.ui-tip:focus-visible::after { transform: translateY(-50%) translateX(0); }
.ui-rail__item[aria-current="true"] { background: var(--accent-soft); color: var(--icon-accent); }
.ui-rail__item[aria-current="true"]::before {
  content: ""; position: absolute; inset-inline-start: -8px; top: 5px; bottom: 5px;
  width: 2px; border-radius: var(--radius-pill); background: var(--accent);
}
/* Below the structural breakpoint (--bp-md) the rail is hidden, as the sidebar becomes a drawer. */
@media (max-width: 900px) { .ui-rail { display: none; } }

/* Panels & drawers docked in the shell */
.ui-inspector {
  width: 320px; flex: 0 0 320px;
  border-inline-start: 1px solid var(--separator);
  background: var(--background-secondary);
  overflow: auto;
}
@media (max-width: 1200px) { .ui-inspector { display: none; } }

.ui-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  padding-bottom: var(--space-6);
}
.ui-page-head__title { font: var(--type-h3); letter-spacing: var(--letter-spacing-tight); }
.ui-page-head__sub { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-2); }
.ui-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 900px) { .ui-header { gap: var(--space-3); } }

/* ==== layout/sidebar.css ==== */
.ui-sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--background-secondary);
  border-inline-end: 1px solid var(--separator);
  transition: width var(--duration-slow) var(--ease-emphasized), flex-basis var(--duration-slow) var(--ease-emphasized);
  z-index: var(--z-sidebar);
}
.ui-sidebar__head {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--header-height);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--separator);
}
.ui-sidebar__brand { display: flex; align-items: center; gap: var(--space-4); font: var(--type-label); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; }
.ui-sidebar__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sidebar-padding); }
.ui-sidebar__foot { border-top: 1px solid var(--separator); padding: var(--space-3); display: flex; align-items: center; gap: var(--space-3); }

.ui-nav { display: flex; flex-direction: column; gap: 1px; }
.ui-nav__group { margin-bottom: var(--space-5); }
.ui-nav__group-label {
  display: flex; align-items: center; justify-content: space-between;
  font: var(--type-overline); letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase; color: var(--text-muted);
  padding: var(--space-3) var(--space-4) var(--space-2);
}
.ui-nav__item {
  position: relative;
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  text-align: start;
  transition: var(--transition-colors);
}
.ui-nav__item:hover { background: var(--surface-hover); color: var(--text-primary); text-decoration: none; }
.ui-nav__item:active { background: var(--surface-active); }
.ui-nav__item[aria-current="page"], .ui-nav__item.is-active {
  background: var(--surface-selected);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.ui-nav__item[aria-current="page"]::before, .ui-nav__item.is-active::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%;
  width: 2px; border-radius: var(--radius-pill); background: var(--accent);
}
.ui-nav__item[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.ui-nav__icon { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; color: currentColor; opacity: .9; }
.ui-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-nav__trailing { font: var(--type-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* WCAG 1.4.3: --text-muted reached only 4.05:1 (faithful dark) and 4.35:1 (several light themes) on the selected
   surface of the current item. */
.ui-nav__item[aria-current="page"] .ui-nav__trailing, .ui-nav__item.is-active .ui-nav__trailing { color: var(--text-secondary); }
.ui-nav__chevron { transition: transform var(--duration-base) var(--ease-standard); color: var(--icon-muted); }
.ui-nav__item[aria-expanded="true"] .ui-nav__chevron { transform: rotate(90deg); }
.ui-nav__chevron:dir(rtl) { transform: scaleX(-1); } /* closed, right to left: towards the start */

/* Nested navigation */
.ui-nav__sub { display: flex; flex-direction: column; gap: 1px; margin-inline-start: var(--space-6); padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--separator); }
.ui-nav__sub .ui-nav__item { min-height: var(--control-height-sm); font-size: var(--font-size-sm); }

/* Collapsed */
.ui-sidebar--collapsed { width: var(--sidebar-width-collapsed); flex-basis: var(--sidebar-width-collapsed); }
.ui-sidebar--collapsed .ui-nav__label,
.ui-sidebar--collapsed .ui-nav__trailing,
.ui-sidebar--collapsed .ui-nav__group-label,
.ui-sidebar--collapsed .ui-sidebar__brand span,
.ui-sidebar--collapsed .ui-nav__chevron { display: none; }
.ui-sidebar--collapsed .ui-nav__item { justify-content: center; padding-inline: 0; }

@media (max-width: 900px) {
  .ui-sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); box-shadow: var(--elevation-modal); }
  .ui-sidebar.is-open { transform: none; }
  /* Off-canvas is not enough: the closed drawer must also leave the tab order and the accessibility tree, from the
     first (server-rendered) paint, without waiting for script. */
  .ui-sidebar:not(.is-open) { visibility: hidden; }
}

/* ==== components/buttons.css ==== */
/* ---------- Button ---------- */
.ui-button {
  --_bg: var(--surface-elevated);
  --_fg: var(--text-primary);
  --_bd: var(--border);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  height: var(--control-height-md);
  padding-inline: var(--control-padding-x);
  border: 1px solid var(--_bd);
  border-radius: var(--radius-control);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: var(--transition-control);
}
.ui-button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.ui-button:active { background: var(--surface-active); transform: scale(var(--press-scale)); }
.ui-button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ui-button[disabled], .ui-button[aria-disabled="true"] {
  color: var(--text-disabled); background: var(--surface); border-color: var(--border-subtle);
  cursor: not-allowed; transform: none; box-shadow: none;
}

/* Content slots: leading visual, label, trailing visual (spans; empty ones are omitted).
   Spacing comes from the flex gap above, so the slots need no declaration: these
   rules only make the DOM contract explicit. */
.ui-button__leading {}
.ui-button__label {}
.ui-button__trailing {}

/* Variants */
.ui-button--primary { --_bg: var(--accent); --_fg: var(--accent-contrast); --_bd: var(--accent); }
.ui-button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ui-button--primary:active { background: var(--accent-active); border-color: var(--accent-active); }
.ui-button--secondary { --_bg: var(--surface-elevated); }
.ui-button--tertiary { --_bg: transparent; --_bd: transparent; --_fg: var(--text-secondary); }
.ui-button--tertiary:hover { background: var(--surface-hover); border-color: transparent; color: var(--text-primary); }
.ui-button--ghost { --_bg: transparent; --_bd: transparent; --_fg: var(--text-secondary); }
.ui-button--ghost:hover { background: var(--alpha-white-06); border-color: transparent; }
.ui-button--outline { --_bg: transparent; --_bd: var(--border-strong); }
.ui-button--accent-outline { --_bg: transparent; --_bd: var(--accent); --_fg: var(--text-accent); }
.ui-button--accent-outline:hover { background: var(--accent-soft); border-color: var(--accent); }
.ui-button--danger { --_bg: var(--danger); --_fg: #fff; --_bd: var(--danger); }
.ui-button--danger:hover { background: var(--danger-400); border-color: var(--danger-400); }
.ui-button--danger-quiet { --_bg: transparent; --_bd: var(--danger-border); --_fg: var(--danger-text); }
.ui-button--danger-quiet:hover { background: var(--danger-soft); border-color: var(--danger); }
.ui-button--success { --_bg: var(--success); --_fg: #0b1f11; --_bd: var(--success); }
.ui-button--success:hover { filter: brightness(1.06); }
.ui-button--link { --_bg: transparent; --_bd: transparent; --_fg: var(--text-link); height: auto; padding: 0; }
.ui-button--link:hover { background: none; text-decoration: underline; }

/* Sizes */
.ui-button--xs { height: var(--control-height-xs); padding-inline: var(--space-3); font-size: var(--font-size-xs); gap: var(--space-2); }
.ui-button--sm { height: var(--control-height-sm); padding-inline: var(--space-4); font-size: var(--font-size-sm); }
.ui-button--lg { height: var(--control-height-lg); padding-inline: var(--space-6); }
.ui-button--xl { height: var(--control-height-xl); padding-inline: var(--space-7); font-size: var(--font-size-lg); }
.ui-button--block { width: 100%; }

/* Icon button */
.ui-button--icon { width: var(--control-height-md); padding: 0; }
.ui-button--icon.ui-button--xs { width: var(--control-height-xs); }
.ui-button--icon.ui-button--sm { width: var(--control-height-sm); }
.ui-button--icon.ui-button--lg { width: var(--control-height-lg); }
.ui-button--round { border-radius: var(--radius-pill); }

/* Loading */
.ui-button.is-loading { color: transparent !important; pointer-events: none; }
.ui-button.is-loading::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--_fg);
  animation: ui-spin 620ms linear infinite;
}
.ui-button.is-success::after {
  content: ""; position: absolute; width: 5px; height: 10px;
  border: 2px solid var(--success); border-top: 0; border-left: 0;
  transform: rotate(45deg) translateY(-1px);
  animation: ui-pop var(--duration-base) var(--ease-spring);
}
.ui-button.is-success { color: transparent !important; }

/* Groups & split */
.ui-button-group { display: inline-flex; }
.ui-button-group .ui-button { border-radius: 0; margin-inline-start: -1px; }
.ui-button-group .ui-button:first-child { border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); margin-inline-start: 0; }
.ui-button-group .ui-button:last-child { border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }
.ui-button-group .ui-button:hover, .ui-button-group .ui-button[aria-pressed="true"] { z-index: 1; }
.ui-button-group .ui-button[aria-pressed="true"] { background: var(--surface-selected); color: var(--text-primary); border-color: var(--border-accent); }
.ui-split-button { display: inline-flex; }
.ui-split-button > .ui-button:first-child { border-radius: 0; border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
.ui-split-button > .ui-button:last-child { border-radius: 0; border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); margin-inline-start: -1px; width: var(--control-height-md); padding: 0; }

/* Floating action */
.ui-fab {
  position: absolute; inset-inline-end: var(--space-7); bottom: var(--space-7);
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-contrast);
  display: grid; place-items: center;
  box-shadow: var(--elevation-popover);
  transition: var(--transition-surface);
  z-index: var(--z-raised);
}
.ui-fab:hover { transform: translateY(-1px) scale(1.03); }

/* Toggle / pressed quiet button */
.ui-button[aria-pressed="true"]:not(.ui-button--primary) {
  background: var(--surface-selected); border-color: var(--border-accent); color: var(--text-primary);
}

/* A file picker styled as a button: the native input inside is visually hidden, so the button shows its keyboard focus. */
.ui-button:has(> input[type="file"]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==== components/inputs.css ==== */
/* ---------- Field wrapper ---------- */
.ui-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ui-field--inline { flex-direction: row; align-items: center; gap: var(--space-5); }
.ui-field--inline > .ui-field__label { flex: 0 0 180px; margin: 0; }
.ui-field__label { font: var(--type-label); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
/* The mark is visual: the control carries `required`. The second `content` (alternative text "") keeps it out of the
   accessible name; a browser without that syntax keeps the first. */
.ui-field__label[data-required]::after { content: "*"; content: "*" / ""; color: var(--danger-text); }
.ui-field__hint { font: var(--type-caption); color: var(--text-muted); }
.ui-field__error { font: var(--type-caption); color: var(--danger-text); display: flex; align-items: center; gap: var(--space-2); }
.ui-field__error::before { content: "!"; content: "!" / ""; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; }
.ui-field__success { font: var(--type-caption); color: var(--success-text); }

/* ---------- Text input ---------- */
.ui-input, .ui-select, .ui-textarea {
  width: 100%;
  min-height: var(--control-height-md);
  padding: 0 var(--space-4);
  background: var(--surface-inset);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: var(--font-size-md);
  transition: var(--transition-control);
}
.ui-textarea { padding: var(--space-3) var(--space-4); min-height: 76px; resize: vertical; line-height: var(--line-height-normal); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-disabled); }
.ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--border-strong); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
  border-color: var(--accent); box-shadow: var(--shadow-focus); outline: none;
}
.ui-input[readonly] { background: var(--surface); color: var(--text-secondary); }
.ui-input[disabled], .ui-select[disabled], .ui-textarea[disabled] {
  background: var(--surface); color: var(--text-disabled); border-color: var(--border-subtle); cursor: not-allowed;
}
.ui-input[aria-invalid="true"], .ui-textarea[aria-invalid="true"], .is-invalid > .ui-input {
  border-color: var(--danger); background: var(--danger-soft);
}
.ui-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 2px var(--danger-border); }
.ui-input[data-valid="true"] { border-color: var(--success-border); }
.ui-input--sm, .ui-select--sm { min-height: var(--control-height-sm); font-size: var(--font-size-sm); padding-inline: var(--space-3); }
.ui-input--lg { min-height: var(--control-height-lg); }
.ui-input--numeric { text-align: end; font-variant-numeric: tabular-nums; max-width: 120px; }
.ui-input--code { font: var(--type-code); }

/* Input group: icon / prefix / suffix / actions */
.ui-input-group { position: relative; display: flex; align-items: center; width: 100%; }
.ui-input-group > .ui-input { padding-inline-start: var(--space-4); }
.ui-input-group--icon > .ui-input { padding-inline-start: 28px; }
.ui-input-group__icon {
  position: absolute; inset-inline-start: var(--space-4); display: grid; place-items: center;
  width: 14px; height: 14px; color: var(--icon-muted); pointer-events: none;
}
.ui-input-group__suffix {
  position: absolute; inset-inline-end: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
  font: var(--type-caption); color: var(--text-muted);
}
.ui-input-addon {
  display: inline-flex; align-items: center; height: var(--control-height-md);
  padding-inline: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-inline-end: 0;
  border-radius: 0; border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control);
  color: var(--text-muted); font-size: var(--font-size-sm);
}
.ui-input-addon + .ui-input { border-radius: 0; border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }

/* Number spinner (the product's up/down stepper) */
.ui-spinner { display: inline-flex; align-items: stretch; }
.ui-spinner > .ui-input { border-radius: 0; border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
.ui-spinner__buttons { display: flex; flex-direction: column; width: 16px; }
.ui-spinner__buttons > button {
  flex: 1; display: grid; place-items: center;
  background: var(--surface-elevated); border: 1px solid var(--border); border-inline-start: 0;
  color: var(--icon-muted); font-size: 7px; line-height: 1;
  transition: var(--transition-colors);
}
.ui-spinner__buttons > button:first-child { border-radius: 0; border-start-end-radius: var(--radius-control); border-bottom: 0; }
.ui-spinner__buttons > button:last-child { border-radius: 0; border-end-end-radius: var(--radius-control); }
.ui-spinner__buttons > button:hover { background: var(--surface-hover); color: var(--text-primary); }

/* ---------- Select ---------- */
.ui-select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text-primary);
  cursor: pointer;
}
/* Right to left, the chevron stands at the start: background-position has no logical keyword. */
.ui-select:dir(rtl) { background-position: left 9px center, left 14px center; }
.ui-select option { background: var(--surface-elevated); color: var(--text-primary); }

/* ---------- Checkbox / radio ---------- */
.ui-check { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; min-height: var(--control-height-sm); font-size: var(--font-size-md); color: var(--text-primary); }
.ui-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-check__box {
  position: relative; flex: 0 0 14px; width: 14px; height: 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--surface-inset);
  transition: var(--transition-control);
}
.ui-check__box::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: 2px solid var(--accent-contrast); border-top: 0; border-left: 0;
  transform: rotate(45deg) scale(0); opacity: 0;
  transition: transform var(--duration-fast) var(--ease-spring), opacity var(--duration-instant) linear;
}
.ui-check input:checked + .ui-check__box { background: var(--accent); border-color: var(--accent); }
.ui-check input:checked + .ui-check__box::after { transform: rotate(45deg) scale(1); opacity: 1; }
.ui-check input:indeterminate + .ui-check__box { background: var(--accent); border-color: var(--accent); }
.ui-check input:indeterminate + .ui-check__box::after {
  content: ""; left: 2px; top: 5px; width: 8px; height: 0; border: 1px solid var(--accent-contrast);
  transform: none; opacity: 1;
}
.ui-check input:focus-visible + .ui-check__box { box-shadow: var(--shadow-focus); }
.ui-check input:disabled + .ui-check__box { background: var(--surface); border-color: var(--border-subtle); }
.ui-check input:disabled ~ .ui-check__label { color: var(--text-disabled); }
.ui-check--radio .ui-check__box { border-radius: 50%; }
.ui-check--radio .ui-check__box::after {
  left: 3px; top: 3px; width: 6px; height: 6px; border: 0; border-radius: 50%;
  background: var(--accent-contrast); transform: scale(0);
}
.ui-check--radio input:checked + .ui-check__box::after { transform: scale(1); }

/* ---------- Switch ---------- */
.ui-switch { display: inline-flex; align-items: center; gap: var(--space-4); cursor: pointer; }
.ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-switch__track {
  position: relative; width: 30px; height: 16px; flex: 0 0 30px;
  background: var(--neutral-600); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: var(--transition-control);
}
.ui-switch__track::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--neutral-200);
  transition: transform var(--duration-base) var(--ease-spring), background var(--duration-fast) var(--ease-standard);
}
.ui-switch input:checked + .ui-switch__track { background: var(--accent); border-color: var(--accent); }
.ui-switch input:checked + .ui-switch__track::after { transform: translateX(14px); background: #fff; }
.ui-switch input:focus-visible + .ui-switch__track { box-shadow: var(--shadow-focus); }
.ui-switch input:disabled + .ui-switch__track { opacity: .5; }

/* On/Off radio pair (as used in the source product) */
.ui-onoff { display: inline-flex; align-items: center; gap: var(--space-5); }

/* ---------- Range ---------- */
.ui-range { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; cursor: pointer; }
.ui-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-inset); border: 1px solid var(--border-subtle); }
.ui-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px;
  border-radius: 50%; background: var(--accent); border: 1px solid var(--accent-active);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.ui-range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.ui-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-inset); }
.ui-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent); }

/* ---------- Search ---------- */
.ui-search { position: relative; min-width: 180px; }
.ui-search .ui-input { padding-inline-start: 26px; }
.ui-search__icon { position: absolute; inset-inline-start: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--icon-muted); }

/* ---------- Combobox / autocomplete ---------- */
.ui-combobox { position: relative; }
.ui-combobox__list {
  position: absolute; inset-inline: 0; top: calc(100% + 2px);
  max-height: 220px; overflow: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-popover);
  z-index: var(--z-dropdown);
  animation: ui-fade-up var(--duration-fast) var(--ease-enter);
}
.ui-combobox__option {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4); font-size: var(--font-size-md); cursor: pointer;
}
.ui-combobox__option:hover, .ui-combobox__option[aria-selected="true"] { background: var(--surface-hover); }
.ui-combobox__option mark { background: var(--accent-soft); color: var(--text-accent); }
/* An unavailable option: shown, announced (aria-disabled), never chosen. */
.ui-combobox__option[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; }
.ui-combobox__option[aria-disabled="true"]:hover { background: none; }
/* The keyboard highlight (aria-activedescendant) of a multiple list, where aria-selected says what is chosen. */
.ui-combobox__option[data-active="true"] { box-shadow: var(--shadow-focus-inset); }

/* A select-only trigger is a button drawn as .ui-select: its text starts at the start and ends in an ellipsis, and
   without a value it shows the placeholder in the muted text colour. */
button.ui-select { text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-select[data-placeholder] { color: var(--text-muted); }
/* A picker's suffix (busy ring, clear button) sits before the select's chevron, and the text stops before it. */
.ui-input-group > .ui-select + .ui-input-group__suffix { inset-inline-end: var(--space-8); }
.ui-input-group > .ui-select:has(+ .ui-input-group__suffix) { padding-inline-end: calc(var(--space-8) * 2); }
.ui-combobox .ui-input-group > .ui-input:has(+ .ui-input-group__suffix) { padding-inline-end: var(--space-8); }

/* Chips and a text entry in one control (UiTagInput, UiMultiSelect): the box of .ui-input around wrapping chips. */
.ui-combobox__control {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  width: 100%; min-height: var(--control-height-md);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-inset); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  transition: var(--transition-control);
}
.ui-combobox__control:hover { border-color: var(--border-strong); }
.ui-combobox__control:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.ui-combobox__control:has(> [aria-invalid="true"]) { border-color: var(--danger); background: var(--danger-soft); }
.ui-combobox__control:has(> :disabled) { background: var(--surface); border-color: var(--border-subtle); color: var(--text-disabled); }
.ui-combobox__control > .ui-input {
  flex: 1; min-width: 70px; min-height: 0; height: auto;
  padding: var(--space-1) var(--space-2);
  border: 0; background: transparent; box-shadow: none;
}
.ui-combobox__control > .ui-input:focus { box-shadow: none; }

/* ---------- File upload / dropzone ---------- */
.ui-dropzone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-8);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-inset);
  color: var(--text-muted);
  text-align: center;
  transition: var(--transition-control);
}
.ui-dropzone:hover { border-color: var(--accent); color: var(--text-secondary); }
.ui-dropzone.is-dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
/* The native file input covers the zone, invisible: a click opens the file dialog, a drop lands in it, and the keyboard
   reaches it. The zone shows its focus. */
.ui-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ui-dropzone:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.ui-dropzone:has(> .ui-dropzone__input:disabled) { color: var(--text-disabled); border-color: var(--border-subtle); background: var(--surface); }
.ui-dropzone__input:disabled { cursor: not-allowed; }

/* ---------- Segmented input (OTP / code) ---------- */
.ui-otp { display: inline-flex; gap: var(--space-3); }
.ui-otp input {
  width: 32px; height: var(--control-height-lg); text-align: center;
  font: var(--type-code); font-size: var(--font-size-lg);
  background: var(--surface-inset); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-control);
}
.ui-otp input:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); outline: none; }

/* ---------- Form layout ---------- */
.ui-form { display: flex; flex-direction: column; gap: var(--space-6); }
/* --form-grid-min: the minimum column width, runtime data a form grid may set (FORMS.md §9). */
.ui-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--form-grid-min, 240px),1fr)); gap: var(--space-5) var(--space-6); }
.ui-form-row { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: var(--space-5); }
.ui-form-row > label { font-size: var(--font-size-md); color: var(--text-secondary); }
.ui-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--separator); }
@media (max-width: 640px) { .ui-form-row, .ui-field--inline { grid-template-columns: minmax(0,1fr); flex-direction: column; align-items: stretch; } }

/* ==== components/tables.css ==== */
/* ---------- Table ---------- */
.ui-table-wrap {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  background: var(--surface);
  overflow: auto;
}
.ui-table { width: 100%; font-size: var(--font-size-md); }
.ui-table th, .ui-table td {
  padding: var(--space-3) var(--space-5);
  text-align: start;
  border-bottom: 1px solid var(--separator);
  vertical-align: middle;
}
.ui-table thead th {
  position: relative;
  background: var(--background-secondary);
  color: var(--text-secondary);
  font: var(--type-label);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.ui-table thead th + th::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 1px; background: var(--separator);
}
.ui-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); }
.ui-table tbody tr { transition: background var(--duration-fast) var(--ease-standard); }
.ui-table tbody tr:hover { background: var(--surface-hover); }
.ui-table tbody tr[aria-selected="true"] { background: var(--surface-selected); }
.ui-table tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.ui-table tbody tr[data-state="warning"] { background: var(--warning-soft); }
.ui-table tbody tr[data-state="error"] { background: var(--danger-soft); }
.ui-table tbody tr[data-state="success"] { background: var(--success-soft); }
.ui-table tbody tr[aria-disabled="true"] { color: var(--text-disabled); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table td.ui-numeric, .ui-table th.ui-numeric { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* :where() zeroes the zebra weight so aria-selected / data-state rules always win. */
:where(.ui-table--zebra) tbody tr:nth-child(even) { background: var(--alpha-white-04); }
:where(.ui-table--zebra) tbody tr:nth-child(even):hover { background: var(--surface-hover); }
.ui-table--bordered td, .ui-table--bordered th { border-inline-end: 1px solid var(--separator); }
.ui-table--bordered td:last-child, .ui-table--bordered th:last-child { border-inline-end: 0; }

/* Density */
.ui-table--compact th, .ui-table--compact td { padding: var(--space-1) var(--space-4); font-size: var(--font-size-sm); }
.ui-table--comfortable th, .ui-table--comfortable td { padding: var(--space-5) var(--space-6); }

/* Sorting */
.ui-table__sort { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: inherit; }
.ui-table__sort::after {
  content: "\2195"; font-size: 9px; opacity: .4; transition: var(--transition-colors);
}
th[aria-sort="ascending"] .ui-table__sort::after { content: "\2191"; opacity: 1; color: var(--text-accent); }
th[aria-sort="descending"] .ui-table__sort::after { content: "\2193"; opacity: 1; color: var(--text-accent); }
.ui-table__sort:hover::after { opacity: .8; }

/* Sticky first column */
.ui-table--sticky-col td:first-child, .ui-table--sticky-col th:first-child {
  position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1;
}
.ui-table--sticky-col thead th:first-child { background: var(--background-secondary); z-index: 2; }

/* Selection + inline actions */
.ui-table__select { width: 32px; }
.ui-table__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); opacity: 0; transition: var(--transition-opacity); }
tr:hover .ui-table__actions, tr:focus-within .ui-table__actions { opacity: 1; }

/* Expandable + grouped rows */
.ui-table__expander { transition: transform var(--duration-base) var(--ease-standard); color: var(--icon-muted); }
/* The row's state (a treegrid row) or its expander button's (a table row cannot carry aria-expanded). */
tr[aria-expanded="true"] .ui-table__expander, [aria-expanded="true"] > .ui-table__expander { transform: rotate(90deg); }
.ui-table__expander:dir(rtl) { transform: scaleX(-1); } /* closed, right to left: towards the start */
.ui-table__detail > td { background: var(--surface-inset); padding: var(--space-5) var(--space-6); }
.ui-table__group > td {
  background: var(--background-secondary); font: var(--type-label); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); font-size: var(--font-size-xs);
}
.ui-table tfoot td { background: var(--background-secondary); font-weight: var(--font-weight-semibold); border-top: 1px solid var(--border); }

/* Tree table indentation */
.ui-table__tree-indent { display: inline-block; width: calc(var(--depth, 0) * 16px); }

/* Column resizer — inside the column's end edge (the right one left to right, the left one right to left): the next
   header cell paints over anything past it (a sticky header cell is a stacking context of its own). */
.ui-table__col-resizer { position: absolute; inset-inline-end: 0; top: 0; bottom: 0; width: 5px; cursor: col-resize; }
.ui-table__col-resizer:hover { background: var(--accent-soft); }

/* A virtualized grid's rows scroll inside the frame, between the toolbar and the footer: a bounded height by default
   (twelve tall rows), the application's otherwise. */
.ui-table-scroll { overflow: auto; max-height: calc(var(--control-height-lg) * 12); }

/* Toolbar + pagination */
.ui-table-toolbar {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--background-secondary);
  border-bottom: 1px solid var(--separator);
}
.ui-table-bulkbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--border-accent);
  font-size: var(--font-size-sm);
  animation: ui-slide-down var(--duration-base) var(--ease-emphasized);
}
.ui-pagination {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--separator);
  background: var(--background-secondary);
  font-size: var(--font-size-sm); color: var(--text-muted);
}
.ui-pagination__pages { display: flex; align-items: center; gap: var(--space-1); margin-inline-start: auto; }
.ui-pagination__page {
  min-width: var(--control-height-sm); height: var(--control-height-sm);
  padding-inline: var(--space-3);
  display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius-control);
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
  transition: var(--transition-colors);
}
.ui-pagination__page:hover { background: var(--surface-hover); color: var(--text-primary); }
.ui-pagination__page[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
/* An arrow that leads nowhere (the first page, the last). */
.ui-pagination__page:disabled { color: var(--text-disabled); background: none; cursor: not-allowed; }
/* The page size select keeps its own width in the bar. */
.ui-pagination .ui-select { width: auto; }

/* List view (non-tabular data rows) */
.ui-list { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-surface); background: var(--surface); overflow: hidden; }
.ui-list__item {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--separator);
  transition: var(--transition-colors);
}
.ui-list__item:last-child { border-bottom: 0; }
.ui-list__item:hover { background: var(--surface-hover); }
.ui-list__item[aria-selected="true"] { background: var(--surface-selected); box-shadow: inset 2px 0 0 var(--accent); }
.ui-list__main { flex: 1; min-width: 0; }
.ui-list__title { font-size: var(--font-size-md); color: var(--text-primary); }
.ui-list__meta { font: var(--type-caption); color: var(--text-muted); }
/* A row's main area as its link or button (UiListItem): the whole area, its text from the start. */
a.ui-list__main, button.ui-list__main { display: block; color: inherit; text-align: start; }
a.ui-list__main:hover { text-decoration: none; }
/* A virtualized list scrolls inside itself: a bounded height by default (eight tall rows), the application's otherwise. */
.ui-list--virtual { overflow-y: auto; max-height: calc(var(--control-height-lg) * 8); }

/* ==== components/cards.css ==== */
.ui-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-card);
  transition: var(--transition-surface);
  min-width: 0;
}
.ui-card--interactive { cursor: pointer; }
.ui-card--interactive:hover { border-color: var(--border); box-shadow: var(--elevation-raised); transform: translateY(var(--hover-lift)); }
.ui-card--interactive:active { transform: scale(var(--press-scale)); }
.ui-card--selected { border-color: var(--accent); box-shadow: var(--shadow-focus-inset); }
.ui-card--flush { background: transparent; border: 0; box-shadow: none; }
.ui-card__header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--separator); }
.ui-card__title { font: var(--type-label); color: var(--text-primary); }
.ui-card__body { padding: var(--space-5); flex: 1; min-width: 0; }
.ui-card__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--separator); display: flex; align-items: center; gap: var(--space-4); }
.ui-card__actions { margin-inline-start: auto; display: flex; gap: var(--space-2); opacity: 0; transition: var(--transition-opacity); }
.ui-card:hover .ui-card__actions, .ui-card:focus-within .ui-card__actions { opacity: 1; }

/* KPI / stat card */
.ui-stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.ui-stat__label { font: var(--type-overline); letter-spacing: var(--letter-spacing-overline); text-transform: uppercase; color: var(--text-muted); }
.ui-stat__value { font: var(--type-h2); font-variant-numeric: tabular-nums; letter-spacing: var(--letter-spacing-tight); color: var(--text-primary); }
.ui-stat__value--accent { color: var(--text-value); }
.ui-stat__delta { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-caption); }
.ui-stat__delta--up { color: var(--success-text); }
.ui-stat__delta--down { color: var(--danger-text); }
.ui-stat__spark { height: 32px; margin-top: var(--space-3); }

/* Metadata grid */
.ui-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-5) var(--space-6); }
.ui-meta__item { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.ui-meta__key { font: var(--type-caption); color: var(--text-muted); }
.ui-meta__val { font-size: var(--font-size-md); color: var(--text-primary); overflow-wrap: anywhere; }
/* One column of pairs (UiKeyValueList, UiDescriptionList Columns = 1). */
.ui-meta--stacked { grid-template-columns: minmax(0, 1fr); }

/* File / attachment card */
.ui-file {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface);
}
/* The badge is text (the extension): the muted text role, AA on the inset surface (the icon role gave 4.45:1 in light). */
.ui-file__icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-control); background: var(--surface-inset); color: var(--text-muted); font-size: var(--font-size-xs); }
.ui-file__name { font-size: var(--font-size-md); }
.ui-file__size { font: var(--type-caption); color: var(--text-muted); }

/* Code block */
.ui-code-block {
  font: var(--type-code);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  color: var(--text-secondary);
  overflow: auto;
}
.ui-kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding-inline: var(--space-2);
  font: var(--type-caption); font-family: var(--font-family-mono);
  background: var(--surface-elevated); color: var(--text-secondary);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-xs);
}

/* ==== components/calendar.css ==== */
/* ============================================================
   Calendar — month grid shared by UiCalendar, UiDatePicker,
   UiDateRangePicker, UiDateTimePicker.
   Tokens only. No theme-specific rules: the four directions
   retune it through --radius-control, --control-height-* and
   the semantic colour roles.
   ============================================================ */

/* ---------- Shell ---------- */
.ui-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* min-content, not 0: a flex/grid parent must allocate at least the seven
     day columns, otherwise the table paints outside its own box. The day
     button's min-width sets that floor (7 x 20px + borders). */
  min-width: min-content;
  user-select: none;
}
.ui-calendar--inline {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-card);
}

/* ---------- Header: month / year + navigation ---------- */
.ui-calendar__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height-sm);
}
.ui-calendar__title {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-height-sm);
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  font: var(--type-label);
  font-size: var(--font-size-md);
  text-align: center;
  white-space: nowrap;
  transition: var(--transition-colors);
}
.ui-calendar__title:hover { background: var(--surface-hover); }
.ui-calendar__title:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-calendar__title[aria-disabled="true"] { color: var(--text-primary); pointer-events: none; }

/* ---------- Week-day row ---------- */
.ui-calendar__grid { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ui-calendar__weekday {
  padding: var(--space-2) 0;
  font: var(--type-overline);
  letter-spacing: var(--letter-spacing-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}
.ui-calendar__weeknum {
  width: var(--control-height-sm);
  font: var(--type-caption);
  /* Read, not disabled: the muted role (AA), as the weekday names. */
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- Day cells ----------
   The <td> carries the range background so it can bleed edge to
   edge between days; the <button> carries the day chrome. */
.ui-calendar__cell {
  width: calc(100% / 7);
  padding: 1px 0;
  text-align: center;
  position: relative;
}
.ui-calendar__grid:has(.ui-calendar__weeknum) .ui-calendar__cell { width: auto; }

.ui-calendar__day {
  position: relative;
  display: inline-grid;
  place-items: center;
  /* Fluid: fills its column up to the control height, never below 20px.
     A fixed width would make the table's min-content width unshrinkable
     and overflow narrow columns and popovers. */
  width: 100%;
  max-width: var(--control-height-md);
  min-width: 20px;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-control);
}
.ui-calendar__day:hover { background: var(--surface-hover); color: var(--text-primary); }
.ui-calendar__day:active { transform: scale(var(--press-scale)); }
.ui-calendar__day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }

/* Today — a ring, never a fill: a fill would read as "selected". */
.ui-calendar__day[aria-current="date"] {
  border-color: var(--border-accent);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* Outside the displayed month: real days that can be chosen, so the muted role (AA), not the disabled one. */
.ui-calendar__day[data-outside] { color: var(--text-muted); }
.ui-calendar__day[data-outside]:hover { color: var(--text-secondary); }

/* Weekend (opt-in via data-weekend) */
.ui-calendar__day[data-weekend]:not([aria-selected="true"]) { color: var(--text-muted); }

/* Selected */
.ui-calendar__cell[aria-selected="true"] > .ui-calendar__day,
.ui-calendar__day[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--font-weight-semibold);
  animation: ui-pop-scale var(--duration-fast) var(--ease-spring);
}
.ui-calendar__cell[aria-selected="true"] > .ui-calendar__day:hover,
.ui-calendar__day[aria-selected="true"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-contrast);
}

/* Disabled / unavailable — two distinct meanings.
   disabled    : outside min/max, or the control is disabled.
   unavailable : inside range but not bookable (business rule).
   Unavailable is additionally struck through so the distinction
   never rests on colour alone. */
.ui-calendar__day[disabled],
.ui-calendar__day[aria-disabled="true"] {
  color: var(--text-disabled);
  background: transparent;
  cursor: not-allowed;
  transform: none;
}
.ui-calendar__day[data-unavailable] {
  color: var(--text-disabled);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ui-calendar__day[data-unavailable]::after {
  content: "";
  position: absolute;
  inset-inline: 25%;
  bottom: 3px;
  height: 1px;
  background: var(--danger-border);
}

/* ---------- Range selection ----------
   data-range on the CELL, so the tint is continuous across the row. */
.ui-calendar__cell[data-range] { background: var(--accent-soft); }
.ui-calendar__cell[data-range="start"] {
  border-start-start-radius: var(--radius-control);
  border-end-start-radius: var(--radius-control);
}
.ui-calendar__cell[data-range="end"] {
  border-start-end-radius: var(--radius-control);
  border-end-end-radius: var(--radius-control);
}
.ui-calendar__cell[data-range="single"] { border-radius: var(--radius-control); }
.ui-calendar__cell[data-range="start"] > .ui-calendar__day,
.ui-calendar__cell[data-range="end"] > .ui-calendar__day,
.ui-calendar__cell[data-range="single"] > .ui-calendar__day {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: var(--font-weight-semibold);
}
.ui-calendar__cell[data-range="middle"] > .ui-calendar__day {
  color: var(--text-primary);
  border-radius: var(--radius-none);
}
.ui-calendar__cell[data-range="middle"] > .ui-calendar__day:hover {
  background: var(--surface-active);
  border-radius: var(--radius-control);
}
/* Row edges: a range crossing a week boundary must not look cut off */
.ui-calendar__cell[data-range]:first-of-type { border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
.ui-calendar__cell[data-range]:last-of-type { border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }

/* Hover preview while picking the second endpoint */
.ui-calendar__cell[data-range-preview] { background: var(--surface-accent-soft); }
.ui-calendar__cell[data-range-preview] > .ui-calendar__day { color: var(--text-primary); }

/* ---------- Footer: presets, today, clear ---------- */
.ui-calendar__footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--separator);
}
.ui-calendar__presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline-end: var(--space-5);
  border-inline-end: 1px solid var(--separator);
  min-width: 132px;
}

/* ---------- Range picker: two months side by side ---------- */
.ui-calendar-range {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-6);
  min-width: 0;
}
.ui-calendar-range > .ui-calendar { flex: 1 1 min-content; }
@media (max-width: 640px) {
  .ui-calendar-range { flex-direction: column; gap: var(--space-5); }
  .ui-calendar__presets { border-inline-end: 0; border-block-end: 1px solid var(--separator); padding-block-end: var(--space-4); min-width: 0; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Month / year pane (UiMonthPicker, title drill-down) ---------- */
.ui-calendar__months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.ui-calendar__month {
  height: var(--control-height-lg);
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  transition: var(--transition-control);
}
.ui-calendar__month:hover { background: var(--surface-hover); color: var(--text-primary); }
.ui-calendar__month:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-calendar__month[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: var(--font-weight-semibold); }
.ui-calendar__month[aria-current="date"] { border-color: var(--border-accent); }
.ui-calendar__month[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }

/* ---------- Time column (UiTimePicker, UiDateTimePicker) ---------- */
.ui-calendar__time {
  display: flex;
  flex-direction: column;
  min-width: 68px;
  max-height: 232px;
  overflow-y: auto;
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--separator);
  gap: 1px;
}
.ui-calendar__time-option {
  height: var(--control-height-sm);
  padding-inline: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  transition: var(--transition-colors);
}
.ui-calendar__time-option:hover { background: var(--surface-hover); color: var(--text-primary); }
.ui-calendar__time-option[aria-selected="true"] { background: var(--accent); color: var(--accent-contrast); font-weight: var(--font-weight-semibold); }
.ui-calendar__time-option[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.ui-calendar__datetime { display: flex; align-items: stretch; gap: var(--space-4); }

/* ---------- Loading ---------- */
.ui-calendar[aria-busy="true"] .ui-calendar__day { color: transparent; pointer-events: none; }
.ui-calendar[aria-busy="true"] .ui-calendar__day::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: var(--radius-control);
  background-color: var(--surface-inset);
  background-image: linear-gradient(90deg, transparent 0%, var(--alpha-white-06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: ui-shimmer var(--duration-shimmer) var(--ease-linear) infinite;
}

/* ---------- Density ---------- */
[data-density="compact"] .ui-calendar { gap: var(--space-3); }
[data-density="compact"] .ui-calendar__day { max-width: var(--control-height-sm); min-width: 18px; font-size: var(--font-size-sm); }
[data-density="compact"] .ui-calendar__month { height: var(--control-height-md); }
[data-density="compact"] .ui-calendar--inline { padding: var(--space-4); }

[data-density="comfortable"] .ui-calendar { gap: var(--space-5); }
[data-density="comfortable"] .ui-calendar__day { max-width: var(--control-height-lg); min-width: 24px; }
[data-density="comfortable"] .ui-calendar__month { height: var(--control-height-xl); }
[data-density="comfortable"] .ui-calendar--inline { padding: var(--space-7); }

/* ---------- Motion ---------- */
@keyframes ui-pop-scale { from { transform: scale(.88); } to { transform: none; } }
/* Month change: the grid is re-keyed by month, so the enter animation
   plays once per navigation. Direction is set by data-nav on the grid. */
.ui-calendar__grid[data-nav="next"] tbody { animation: ui-slide-left var(--duration-base) var(--ease-enter); }
.ui-calendar__grid[data-nav="prev"] tbody { animation: ui-slide-right var(--duration-base) var(--ease-enter); }

/* prefers-reduced-motion is handled globally in motion/transitions.css;
   the two rules below remove the transform entirely rather than shortening it,
   because a 1ms scale still flickers on some GPUs. */
@media (prefers-reduced-motion: reduce) {
  .ui-calendar__day,
  .ui-calendar__cell[aria-selected="true"] > .ui-calendar__day,
  .ui-calendar__grid[data-nav] tbody { animation: none !important; }
  .ui-calendar__day:active { transform: none; }
}
:root[data-motion="reduced"] .ui-calendar__day,
:root[data-motion="reduced"] .ui-calendar__grid[data-nav] tbody { animation: none; }

/* ==== components/badge.css ==== */
.ui-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 18px; padding-inline: var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-badge);
  background: var(--surface-elevated); color: var(--text-secondary);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.ui-badge--neutral { background: var(--alpha-white-06); border-color: var(--border-subtle); }
.ui-badge--accent { background: var(--accent-soft); color: var(--text-accent); border-color: var(--border-accent); }
.ui-badge--success { background: var(--success-soft); color: var(--success-text); border-color: var(--success-border); }
.ui-badge--warning { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning-border); }
.ui-badge--danger { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-border); }
.ui-badge--info { background: var(--info-soft); color: var(--info-text); border-color: var(--info-border); }
.ui-badge--solid { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
/* A tinted badge in a selected row (or list item) keeps its tint on the plain surface, as in the other rows: a tint over
   the selection tint lost AA (success, dark modes: 4.13:1). */
:is(.ui-table tbody tr[aria-selected="true"], .ui-list__item[aria-selected="true"]) .ui-badge--accent { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
:is(.ui-table tbody tr[aria-selected="true"], .ui-list__item[aria-selected="true"]) .ui-badge--success { background: linear-gradient(var(--success-soft), var(--success-soft)), var(--surface); }
:is(.ui-table tbody tr[aria-selected="true"], .ui-list__item[aria-selected="true"]) .ui-badge--warning { background: linear-gradient(var(--warning-soft), var(--warning-soft)), var(--surface); }
:is(.ui-table tbody tr[aria-selected="true"], .ui-list__item[aria-selected="true"]) .ui-badge--danger { background: linear-gradient(var(--danger-soft), var(--danger-soft)), var(--surface); }
:is(.ui-table tbody tr[aria-selected="true"], .ui-list__item[aria-selected="true"]) .ui-badge--info { background: linear-gradient(var(--info-soft), var(--info-soft)), var(--surface); }
.ui-badge--pill { border-radius: var(--radius-pill); padding-inline: var(--space-4); }
.ui-badge--count { min-width: 16px; height: 16px; padding-inline: var(--space-2); justify-content: center; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-variant-numeric: tabular-nums; }

.ui-status { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-sm); }
.ui-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.ui-status--online .ui-status__dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.ui-status--online { color: var(--success-text); }
.ui-status--busy .ui-status__dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.ui-status--busy { color: var(--warning-text); }
.ui-status--offline .ui-status__dot { background: var(--neutral-500); }
.ui-status--error .ui-status__dot { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.ui-status--error { color: var(--danger-text); }
.ui-status--live .ui-status__dot { animation: ui-pulse 1800ms var(--ease-standard) infinite; }

.ui-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--control-height-sm); padding-inline: var(--space-4);
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-pill); color: var(--text-secondary);
  font-size: var(--font-size-sm);
  transition: var(--transition-control);
}
.ui-chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ui-chip[aria-pressed="true"], .ui-chip--active { background: var(--accent-soft); border-color: var(--accent); color: var(--text-accent); }
.ui-chip__remove { display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; color: var(--icon-muted); font-size: 10px; }
.ui-chip__remove:hover { background: var(--alpha-white-16); color: var(--text-primary); }

.ui-tag { display: inline-flex; align-items: center; height: 18px; padding-inline: var(--space-3); border-radius: var(--radius-xs); background: var(--alpha-white-06); color: var(--text-secondary); font-size: var(--font-size-xs); font-family: var(--font-family-mono); }

.ui-avatar {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--surface-inset); color: var(--text-secondary);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  overflow: hidden; position: relative;
}
/* A photo fills the avatar and is cropped to it, whatever its proportions. */
.ui-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.ui-avatar--circle { border-radius: 50%; }
.ui-avatar--xs { width: 18px; height: 18px; font-size: var(--font-size-3xs); }
.ui-avatar--lg { width: 40px; height: 40px; font-size: var(--font-size-md); }
.ui-avatar--xl { width: 56px; height: 56px; font-size: var(--font-size-lg); }
.ui-avatar--accent { background: var(--primary-800); color: var(--primary-100); }
.ui-avatar__badge { position: absolute; inset-inline-end: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--surface); background: var(--success); }
.ui-avatar-group { display: flex; }
.ui-avatar-group > .ui-avatar { margin-inline-start: -6px; border: 2px solid var(--background); }
.ui-avatar-group > .ui-avatar:first-child { margin-inline-start: 0; }

.ui-dot-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ==== components/tabs.css ==== */
/* Tabs — the product's raised folder tabs, cleaned up */
.ui-tabs { display: flex; align-items: flex-end; gap: var(--space-1); border-bottom: 1px solid var(--border); padding-inline: var(--space-3); background: var(--background-secondary); }
.ui-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--control-height-md);
  padding-inline: var(--space-5);
  margin-bottom: -1px;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius-tab);
  color: var(--text-secondary);
  font-size: var(--font-size-md);
  white-space: nowrap;
  transition: var(--transition-colors);
}
.ui-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.ui-tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.ui-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--surface); }
.ui-tab[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.ui-tab__count { font-size: var(--font-size-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* The tabs themselves (role="tablist") inside the strip, so that the strip also holds the trailing "⋯" menu of the tabs
   that do not fit: a tab list owns tabs only. */
.ui-tabs__list { display: flex; align-items: flex-end; gap: inherit; flex: 1; min-width: 0; }

/* Underline tab set (used by the modern/premium themes and page-level tabs) */
.ui-tabs--underline { border-bottom: 1px solid var(--separator); background: transparent; gap: var(--space-6); padding-inline: 0; }
.ui-tabs--underline .ui-tab { border: 0; border-radius: 0; padding-inline: var(--space-1); background: none; }
.ui-tabs--underline .ui-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-base) var(--ease-emphasized);
}
.ui-tabs--underline .ui-tab[aria-selected="true"]::after { transform: scaleX(1); }
.ui-tabs--underline .ui-tab:hover { background: none; }

.ui-tabpanel { animation: ui-fade-in var(--duration-base) var(--ease-enter); }

/* Segmented control */
.ui-segmented {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
}
.ui-segmented__item {
  height: calc(var(--control-height-md) - 6px);
  padding-inline: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  border-radius: calc(var(--radius-control) - 1px);
  color: var(--text-secondary); font-size: var(--font-size-sm);
  transition: var(--transition-colors);
  white-space: nowrap;
}
.ui-segmented__item:hover { color: var(--text-primary); }
/* aria-checked: the items of an exclusive choice (role="radio"). */
.ui-segmented__item[aria-pressed="true"], .ui-segmented__item[aria-selected="true"], .ui-segmented__item[aria-checked="true"] {
  background: var(--surface-elevated); color: var(--text-primary);
  box-shadow: var(--elevation-raised);
  font-weight: var(--font-weight-medium);
}

/* Breadcrumbs */
.ui-breadcrumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-muted); flex-wrap: wrap; }
.ui-breadcrumbs a { color: var(--text-secondary); }
.ui-breadcrumbs a:hover { color: var(--text-primary); text-decoration: none; }
.ui-breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); }
.ui-breadcrumbs li + li::before { content: "/"; color: var(--text-disabled); }
.ui-breadcrumbs [aria-current="page"] { color: var(--text-primary); }

/* Steps / wizard */
.ui-steps { display: flex; align-items: center; gap: var(--space-4); }
.ui-step { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--font-size-sm); }
.ui-step__marker {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface-inset);
  font-size: var(--font-size-xs); font-variant-numeric: tabular-nums;
  transition: var(--transition-control);
}
.ui-step[data-state="current"] { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.ui-step[data-state="current"] .ui-step__marker { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.ui-step[data-state="done"] .ui-step__marker { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }
.ui-step[data-state="done"] { color: var(--text-secondary); }
.ui-steps__line { flex: 1; height: 1px; background: var(--separator); min-width: 16px; }

/* ==== components/overlays.css ==== */
/* ---------- Scrim ---------- */
.ui-scrim {
  position: fixed; inset: 0; background: var(--overlay);
  backdrop-filter: blur(var(--backdrop-blur));
  z-index: var(--z-overlay);
  animation: ui-fade-in var(--duration-base) var(--ease-enter);
}

/* ---------- Modal ---------- */
.ui-modal {
  position: fixed; z-index: var(--z-modal);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-modal);
  animation: ui-modal-in var(--duration-slow) var(--ease-emphasized);
  overflow: hidden;
}
.ui-modal--sm { width: min(400px, calc(100vw - 32px)); }
.ui-modal--lg { width: min(880px, calc(100vw - 32px)); }
.ui-modal--fullscreen { width: calc(100vw - 48px); height: calc(100vh - 48px); max-height: none; }
.ui-modal.is-closing { animation: ui-modal-out var(--duration-fast) var(--ease-exit) forwards; }
.ui-modal__header {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--separator);
  background: var(--background-secondary);
}
.ui-modal__title { font: var(--type-h5); flex: 1; }
.ui-modal__body { padding: var(--space-6); overflow: auto; flex: 1; }
.ui-modal__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--separator);
  background: var(--background-secondary);
}
.ui-modal--danger .ui-modal__header { border-bottom-color: var(--danger-border); }

/* Window chrome variant — mirrors the product's native dialog frame */
.ui-window { border-radius: var(--radius-overlay); overflow: hidden; border: 1px solid var(--border); background: var(--background); box-shadow: var(--elevation-modal); }
.ui-window__titlebar {
  display: flex; align-items: center; gap: var(--space-4);
  height: 32px; padding-inline: var(--space-5);
  background: var(--background-secondary);
  border-bottom: 1px solid var(--separator);
  font-size: var(--font-size-md);
  user-select: none;
}
.ui-window__controls { margin-inline-start: auto; display: flex; gap: var(--space-1); }
.ui-window__control { width: 32px; height: 26px; display: grid; place-items: center; color: var(--icon-muted); border-radius: var(--radius-xs); transition: var(--transition-colors); }
.ui-window__control:hover { background: var(--surface-hover); color: var(--text-primary); }
.ui-window__control--close:hover { background: var(--danger); color: #fff; }

/* ---------- Drawer ---------- */
.ui-drawer {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: var(--z-drawer);
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: var(--surface-elevated);
  border-left: 1px solid var(--border);
  box-shadow: var(--elevation-modal);
  animation: ui-slide-left var(--duration-slow) var(--ease-emphasized);
}
.ui-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); animation-name: ui-slide-right; }
.ui-drawer--bottom { top: auto; left: 0; right: 0; width: auto; height: min(60vh, 520px); border: 0; border-top: 1px solid var(--border); animation-name: ui-slide-up; }
.ui-drawer__header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--separator); }
.ui-drawer__body { flex: 1; overflow: auto; padding: var(--space-6); }
.ui-drawer__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--separator); display: flex; justify-content: flex-end; gap: var(--space-4); }

/* ---------- Dropdown / menu ---------- */
.ui-menu {
  min-width: 180px; padding: var(--space-2);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-popover);
  z-index: var(--z-dropdown);
  animation: ui-menu-in var(--duration-fast) var(--ease-enter);
}
.ui-menu__item {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; min-height: var(--control-height-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  color: var(--text-secondary); font-size: var(--font-size-md);
  text-align: start;
  transition: var(--transition-colors);
}
.ui-menu__item:hover, .ui-menu__item:focus-visible { background: var(--surface-hover); color: var(--text-primary); outline: none; }
.ui-menu__item[aria-checked="true"]::before { content: "\2713"; color: var(--text-accent); }
.ui-menu__item--danger { color: var(--danger-text); }
.ui-menu__item--danger:hover { background: var(--danger-soft); }
.ui-menu__item[aria-disabled="true"] { color: var(--text-disabled); pointer-events: none; }
.ui-menu__shortcut { margin-inline-start: auto; font: var(--type-caption); color: var(--text-disabled); font-family: var(--font-family-mono); }
.ui-menu__separator { height: 1px; background: var(--separator); margin: var(--space-2) 0; }
.ui-menu__label { font: var(--type-overline); text-transform: uppercase; letter-spacing: var(--letter-spacing-overline); color: var(--text-muted); padding: var(--space-3) var(--space-4) var(--space-2); }

/* ---------- Popover ---------- */
.ui-popover {
  min-width: 220px; max-width: 320px;
  padding: var(--space-5);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-popover);
  z-index: var(--z-popover);
  animation: ui-fade-up var(--duration-base) var(--ease-enter);
}
.ui-popover__title { font: var(--type-label); margin-bottom: var(--space-3); }
/* A range picker's months and presets side by side are wider than a popover's text measure. */
.ui-popover:has(> .ui-calendar-range) { max-width: none; }

/* ---------- Tooltip ---------- */
.ui-tooltip {
  position: absolute; z-index: var(--z-tooltip);
  max-width: 260px;
  padding: var(--space-2) var(--space-4);
  background: var(--neutral-950); color: var(--neutral-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: var(--font-size-sm); line-height: var(--line-height-snug);
  box-shadow: var(--elevation-popover);
  pointer-events: none;
  animation: ui-tooltip-in var(--duration-fast) var(--ease-enter);
}
.ui-tip { position: relative; }
.ui-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(3px);
  padding: var(--space-2) var(--space-4);
  background: var(--neutral-950); color: var(--neutral-50);
  border: 1px solid var(--border); border-radius: var(--radius-control);
  font-size: var(--font-size-xs); white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  z-index: var(--z-tooltip);
}
.ui-tip:hover::after, .ui-tip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Side-anchored variant — for narrow containers (icon rails, toolbars) where a
   centred tooltip would be wider than its host. */
.ui-tip--right::after {
  left: calc(100% + 6px); bottom: auto; top: 50%;
  transform: translateY(-50%) translateX(-3px);
}
.ui-tip--right:hover::after, .ui-tip--right:focus-visible::after { transform: translateY(-50%) translateX(0); }
.ui-tip--left::after {
  left: auto; right: calc(100% + 6px); bottom: auto; top: 50%;
  transform: translateY(-50%) translateX(3px);
}
.ui-tip--left:hover::after, .ui-tip--left:focus-visible::after { transform: translateY(-50%) translateX(0); }

/* ---------- Command palette ---------- */
.ui-command {
  position: fixed; top: 14vh; left: 50%; transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  z-index: var(--z-command);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-modal);
  overflow: hidden;
  animation: ui-command-in var(--duration-slow) var(--ease-emphasized);
}
.ui-command__input {
  width: 100%; height: 44px; padding-inline: var(--space-6);
  background: transparent; border: 0; border-bottom: 1px solid var(--separator);
  color: var(--text-primary); font-size: var(--font-size-lg);
}
.ui-command__input:focus { outline: none; }
.ui-command__list { max-height: 320px; overflow: auto; padding: var(--space-3); }
.ui-command__item {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control); color: var(--text-secondary); font-size: var(--font-size-md);
}
.ui-command__item[aria-selected="true"] { background: var(--surface-selected); color: var(--text-primary); }
.ui-command__footer { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--separator); background: var(--background-secondary); font: var(--type-caption); color: var(--text-muted); }

/* ---------- Top layer integration ----------
   Product.Ui renders its layers in place and shows them in the browser top layer (popover="manual",
   <dialog>.showModal()). The top layer and the overlay engine's stack order these layers; the z-index
   values above are no longer the stacking authority for them (they keep applying to in-flow stacking). */

/* User-agent neutralisation, Product.Ui layers only, at zero specificity: it beats the user-agent styles of
   [popover] and dialog (inset: 0, margin: auto, border, padding, Canvas colours, overflow: auto, fit-content and
   max sizes) and loses to every design system rule of these components.
   Rendered in place, a layer would also inherit the text settings of wherever it sits (a .ui-button is nowrap and
   medium weight, a table header may be uppercase): it starts from the body's, as a layer at the end of <body> did. */
:where(.ui-tooltip[popover], .ui-popover[popover], .ui-menu[popover], .ui-context-menu[popover], .ui-drawer[popover],
  .ui-scrim[popover], .ui-sidebar[popover], .ui-toast-region[popover], .ui-combobox__list[popover], dialog.ui-modal, dialog.ui-drawer,
  dialog.ui-command) {
  inset: auto;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  overflow: visible;
  font: var(--type-body);
  white-space: normal;
  text-align: start;
  text-transform: none;
  letter-spacing: normal;
}

/* Anchored layers are placed in viewport coordinates by the overlay engine; the CSS-only .ui-tip keeps its own. A
   picker's list in the top layer is placed (and sized to its control) by the engine too, instead of inset in it. */
.ui-tooltip[popover] { position: fixed; }
.ui-combobox__list[popover] { position: fixed; inset: auto; }

/* .ui-modal, .ui-drawer, .ui-sidebar and .ui-toast-region set display: flex, which beats the user-agent rules that
   hide a closed dialog (dialog:not([open])) and a closed popover ([popover]:not(:popover-open)). The sidebar is a
   popover only as the modal drawer of narrow viewports; the toast region is one when the toast engine shows it. */
dialog.ui-modal:not([open]), dialog.ui-drawer:not([open]), .ui-drawer[popover]:not(:popover-open),
.ui-sidebar[popover]:not(:popover-open), .ui-toast-region[popover]:not(:popover-open) { display: none; }

/* The backdrop of a modal dialog is the scrim: same tokens and entry animation as .ui-scrim. */
/* The command palette is a modal dialog too (UiCommandPalette): same backdrop. */
dialog.ui-modal::backdrop, dialog.ui-drawer::backdrop, dialog.ui-command::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(var(--backdrop-blur));
  animation: ui-fade-in var(--duration-base) var(--ease-enter);
}

/* ---------- Context menu / action sheet ---------- */
.ui-context-menu { position: fixed; z-index: var(--z-dropdown); }
.ui-action-sheet {
  position: fixed; left: 50%; bottom: var(--space-7); transform: translateX(-50%);
  display: flex; gap: var(--space-3); padding: var(--space-3);
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-pill); box-shadow: var(--elevation-modal);
  z-index: var(--z-toast);
  animation: ui-slide-up var(--duration-slow) var(--ease-spring);
}

/* ==== components/feedback.css ==== */
/* ---------- Alerts / banners ---------- */
.ui-alert {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-inline-start: 2px solid var(--text-muted);
  border-radius: var(--radius-card);
  background: var(--surface);
  font-size: var(--font-size-md); color: var(--text-secondary);
}
.ui-alert__icon { flex: none; width: 16px; height: 16px; display: grid; place-items: center; margin-top: 1px; }
.ui-alert__title { font: var(--type-label); color: var(--text-primary); margin-bottom: var(--space-1); }
.ui-alert__body { flex: 1; min-width: 0; }
.ui-alert--info { background: var(--info-soft); border-color: var(--info-border); border-inline-start-color: var(--info); color: var(--info-text); }
.ui-alert--success { background: var(--success-soft); border-color: var(--success-border); border-inline-start-color: var(--success); color: var(--success-text); }
.ui-alert--warning { background: var(--warning-soft); border-color: var(--warning-border); border-inline-start-color: var(--warning); color: var(--warning-text); }
.ui-alert--danger { background: var(--danger-soft); border-color: var(--danger-border); border-inline-start-color: var(--danger); color: var(--danger-text); }
.ui-alert--accent { background: var(--accent-soft); border-color: var(--border-accent); border-inline-start-color: var(--accent); color: var(--text-accent); }
.ui-alert .ui-alert__title { color: inherit; }
.ui-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); background: var(--background-secondary); font-size: var(--font-size-sm); }

/* ---------- Toast ---------- */
.ui-toast-region { position: fixed; inset-inline-end: var(--space-6); bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); z-index: var(--z-toast); pointer-events: none; }
.ui-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--space-4);
  min-width: 280px; max-width: 380px;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-overlay);
  box-shadow: var(--elevation-toast);
  animation: ui-toast-in var(--duration-slow) var(--ease-spring);
  position: relative; overflow: hidden;
}
.ui-toast.is-closing { animation: ui-toast-out var(--duration-base) var(--ease-exit) forwards; }
.ui-toast__title { font: var(--type-label); }
.ui-toast__desc { font: var(--type-body-sm); color: var(--text-muted); margin-top: var(--space-1); }
/* The countdown's duration and elapsed part are runtime data set on the toast (--toast-duration, --toast-delay: a
   negative delay resumes a restarted bar where the timer is); [data-paused] holds it while the timer is paused. */
.ui-toast__progress { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; background: var(--accent); animation: ui-countdown var(--toast-duration, 4000ms) linear var(--toast-delay, 0ms) forwards; }
.ui-toast[data-paused] .ui-toast__progress { animation-play-state: paused; }
.ui-toast--success { border-inline-start: 2px solid var(--success); }
.ui-toast--danger { border-inline-start: 2px solid var(--danger); }
.ui-toast--warning { border-inline-start: 2px solid var(--warning); }

/* ---------- Progress ---------- */
.ui-progress {
  position: relative; height: 16px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.ui-progress__bar {
  height: 100%; width: var(--value, 0%);
  background: var(--accent);
  transition: width var(--duration-slow) var(--ease-smooth);
}
.ui-progress__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  color: var(--text-primary); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.ui-progress--sm { height: 6px; }
.ui-progress--xs { height: 3px; border: 0; border-radius: var(--radius-pill); }
.ui-progress--success .ui-progress__bar { background: var(--success); }
.ui-progress--warning .ui-progress__bar { background: var(--warning); }
.ui-progress--danger .ui-progress__bar { background: var(--danger); }
.ui-progress--indeterminate .ui-progress__bar { width: 35%; animation: ui-indeterminate 1200ms var(--ease-smooth) infinite; }

/* Vital bars — the product's HP / energy / pods readouts */
.ui-vital { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ui-vital__icon { flex: none; width: 16px; text-align: center; }
.ui-vital__label { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; }
.ui-vital .ui-progress { flex: 1; min-width: 80px; }

/* ---------- Spinners ---------- */
.ui-spinner-ring {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: ui-spin 620ms linear infinite;
  display: inline-block;
}
.ui-spinner-ring--lg { width: 28px; height: 28px; border-width: 3px; }
.ui-dots { display: inline-flex; gap: 3px; }
.ui-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: ui-bounce 900ms var(--ease-standard) infinite; }
.ui-dots i:nth-child(2) { animation-delay: 120ms; }
.ui-dots i:nth-child(3) { animation-delay: 240ms; }

/* ---------- Empty & error states ---------- */
.ui-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-4);
  padding: var(--space-11) var(--space-6);
  text-align: center;
  color: var(--text-muted);
}
.ui-empty__art {
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 1px dashed var(--border); border-radius: var(--radius-card);
  background: var(--surface-inset); color: var(--icon-muted);
  margin-bottom: var(--space-2);
}
.ui-empty__title { font: var(--type-h5); color: var(--text-primary); }
.ui-empty__desc { font: var(--type-body-sm); color: var(--text-muted); max-width: 42ch; text-wrap: pretty; }
.ui-empty__actions { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.ui-empty--compact { padding: var(--space-8) var(--space-5); }
.ui-empty--danger .ui-empty__art { border-color: var(--danger-border); color: var(--danger-text); background: var(--danger-soft); }
.ui-empty--warning .ui-empty__art { border-color: var(--warning-border); color: var(--warning-text); background: var(--warning-soft); }

.ui-error-page { display: grid; place-items: center; min-height: 320px; padding: var(--space-11) var(--space-6); text-align: center; }
/* The code is information (large text): the muted role, AA; the disabled role gave 2.65:1 in the light modes. */
.ui-error-page__code { font: var(--type-display); font-variant-numeric: tabular-nums; color: var(--text-muted); letter-spacing: var(--letter-spacing-tighter); }
.ui-error-page__title { font: var(--type-h3); margin-top: var(--space-3); }
.ui-error-page__desc { font: var(--type-body); color: var(--text-muted); margin-top: var(--space-3); max-width: 48ch; text-wrap: pretty; }
.ui-error-page__actions { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-7); }

/* ---------- Inline indicators ---------- */
.ui-indicator { display: inline-flex; align-items: center; gap: var(--space-3); font: var(--type-caption); color: var(--text-muted); }
.ui-indicator--saving .ui-indicator__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); animation: ui-pulse 1200ms infinite; }
.ui-indicator--saved .ui-indicator__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.ui-indicator--offline .ui-indicator__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }

/* ==== components/content.css ==== */
/* ---------- Accordion ---------- */
.ui-accordion { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.ui-accordion__item + .ui-accordion__item { border-top: 1px solid var(--separator); }
.ui-accordion__trigger {
  display: flex; align-items: center; gap: var(--space-4); width: 100%;
  padding: var(--space-4) var(--space-5);
  font: var(--type-label); color: var(--text-primary); text-align: start;
  transition: var(--transition-colors);
}
.ui-accordion__trigger:hover { background: var(--surface-hover); }
.ui-accordion__chevron { margin-inline-start: auto; color: var(--icon-muted); transition: transform var(--duration-base) var(--ease-standard); }
.ui-accordion__trigger[aria-expanded="true"] .ui-accordion__chevron { transform: rotate(90deg); }
/* Right to left, a closed section's chevron points to the start; open, it points down as left to right. */
.ui-accordion__chevron:dir(rtl) { transform: scaleX(-1); }
.ui-accordion__panel { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); font-size: var(--font-size-md); animation: ui-collapse-in var(--duration-base) var(--ease-enter); }

/* ---------- Timeline / activity feed ---------- */
.ui-timeline { display: flex; flex-direction: column; }
.ui-timeline__item { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: var(--space-4); padding-bottom: var(--space-6); position: relative; }
.ui-timeline__item::before { content: ""; position: absolute; inset-inline-start: 7px; top: 14px; bottom: 0; width: 1px; background: var(--separator); }
.ui-timeline__item:last-child { padding-bottom: 0; }
.ui-timeline__item:last-child::before { display: none; }
.ui-timeline__dot { width: 7px; height: 7px; margin: 5px auto 0; border-radius: 50%; background: var(--border-strong); z-index: 1; }
.ui-timeline__item[data-state="success"] .ui-timeline__dot { background: var(--success); }
.ui-timeline__item[data-state="danger"] .ui-timeline__dot { background: var(--danger); }
.ui-timeline__item[data-state="accent"] .ui-timeline__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ui-timeline__title { font-size: var(--font-size-md); color: var(--text-primary); }
.ui-timeline__meta { font: var(--type-caption); color: var(--text-muted); margin-top: var(--space-1); }

.ui-feed { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-feed__row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); transition: var(--transition-colors); }
.ui-feed__row:hover { background: var(--surface-hover); }
/* WCAG 1.4.3: a time is information, not a disabled control (--text-disabled is below 4.5:1). */
.ui-feed__time { margin-inline-start: auto; font: var(--type-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Log / console output (the product's action log) ---------- */
.ui-log {
  font: var(--type-code);
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  max-height: 240px; overflow: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.ui-log__line { display: flex; gap: var(--space-4); color: var(--text-secondary); }
/* WCAG 1.4.3: a time is information; --text-disabled reached 3.61:1 on the log's inset surface. */
.ui-log__ts { color: var(--text-muted); flex: none; font-variant-numeric: tabular-nums; }
.ui-log__line[data-level="ok"] { color: var(--success-text); }
.ui-log__line[data-level="warn"] { color: var(--warning-text); }
.ui-log__line[data-level="error"] { color: var(--danger-text); }

/* ---------- Permission matrix ---------- */
.ui-matrix { width: 100%; font-size: var(--font-size-sm); }
.ui-matrix th, .ui-matrix td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--separator); text-align: center; }
.ui-matrix th:first-child, .ui-matrix td:first-child { text-align: start; }
.ui-matrix thead th { background: var(--background-secondary); font: var(--type-label); }

/* ---------- Keyboard shortcut list ---------- */
.ui-shortcuts { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--space-3) var(--space-6); }
.ui-shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--font-size-sm); color: var(--text-secondary); padding: var(--space-2) 0; }

/* ---------- Drag & drop list ---------- */
.ui-dnd { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-dnd__item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  transition: var(--transition-surface);
}
.ui-dnd__handle { color: var(--icon-muted); cursor: grab; letter-spacing: 1px; }
.ui-dnd__item:hover { border-color: var(--border); }
.ui-dnd__item.is-dragging { opacity: .6; box-shadow: var(--elevation-popover); transform: scale(1.01); }
.ui-dnd__placeholder { border: 1px dashed var(--accent); background: var(--accent-soft); border-radius: var(--radius-control); height: 32px; }

/* ---------- Filter bar / saved filters ---------- */
.ui-filterbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ui-filterbar__group { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- Charts (CSS-only placeholders for real data viz) ---------- */
.ui-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: 120px; }
.ui-chart__bar { flex: 1; min-width: 4px; background: var(--accent-soft); border-top: 2px solid var(--accent); border-radius: var(--radius-xs) var(--radius-xs) 0 0; transition: height var(--duration-slow) var(--ease-smooth), background var(--duration-fast) var(--ease-standard); }
.ui-chart__bar:hover { background: var(--accent); }
.ui-sparkline { display: block; width: 100%; height: 32px; color: var(--accent); }
.ui-legend { display: flex; gap: var(--space-5); flex-wrap: wrap; font: var(--type-caption); color: var(--text-muted); }
.ui-legend__swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-inline-end: var(--space-2); }

/* ==== motion/transitions.css ==== */
/* ============================================================
   Keyframe library + reusable enter/exit utilities
   ============================================================ */
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ui-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ui-scale-fade { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ui-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-slide-down { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-slide-left { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-slide-right { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ui-modal-in { from { opacity: 0; transform: translate(-50%,-48%) scale(.98); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes ui-modal-out { from { opacity: 1; transform: translate(-50%,-50%) scale(1); } to { opacity: 0; transform: translate(-50%,-50%) scale(.98); } }
@keyframes ui-command-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes ui-menu-in { from { opacity: 0; transform: translateY(-3px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes ui-tooltip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-in { from { opacity: 0; transform: translateX(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ui-toast-out { to { opacity: 0; transform: translateX(16px) scale(.98); } }
@keyframes ui-collapse-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ui-bounce { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes ui-pop { from { transform: rotate(45deg) scale(.4); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
@keyframes ui-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
@keyframes ui-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@keyframes ui-countdown { from { width: 100%; } to { width: 0%; } }
@keyframes ui-flash { 0% { background-color: var(--accent-soft); } 100% { background-color: transparent; } }
@keyframes ui-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-3px); } 40%,80% { transform: translateX(3px); } }
@keyframes ui-ring { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 100% { box-shadow: 0 0 0 8px transparent; } }

/* Reusable transition utilities */
.ui-enter { animation: ui-fade-in var(--duration-base) var(--ease-enter) both; }
.ui-enter-up { animation: ui-fade-up var(--duration-base) var(--ease-enter) both; }
.ui-enter-down { animation: ui-fade-down var(--duration-base) var(--ease-enter) both; }
.ui-enter-scale { animation: ui-scale-fade var(--duration-base) var(--ease-emphasized) both; }
.ui-exit { animation: ui-fade-out var(--duration-fast) var(--ease-exit) both; }
.ui-page-transition { animation: ui-fade-up var(--duration-page) var(--ease-emphasized) both; }
.ui-crossfade { transition: opacity var(--duration-slow) var(--ease-smooth); }
.ui-crossfade[data-state="out"] { opacity: 0; }

/* Staggered lists: set --i on children (or rely on nth-child fallback) */
.ui-stagger > * { animation: ui-fade-up var(--duration-base) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * var(--stagger-step)); }
.ui-stagger > *:nth-child(1) { --i: 0; } .ui-stagger > *:nth-child(2) { --i: 1; }
.ui-stagger > *:nth-child(3) { --i: 2; } .ui-stagger > *:nth-child(4) { --i: 3; }
.ui-stagger > *:nth-child(5) { --i: 4; } .ui-stagger > *:nth-child(6) { --i: 5; }
.ui-stagger > *:nth-child(7) { --i: 6; } .ui-stagger > *:nth-child(8) { --i: 7; }
.ui-stagger > *:nth-child(9) { --i: 8; } .ui-stagger > *:nth-child(10) { --i: 9; }
.ui-stagger > *:nth-child(n+11) { --i: 10; }

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

/* ==== motion/loading.css ==== */
/* ---------- Skeletons ---------- */
.ui-skeleton {
  --_base: var(--surface-inset);
  --_sheen: var(--alpha-white-06);
  background-color: var(--_base);
  background-image: linear-gradient(90deg, transparent 0%, var(--_sheen) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  border-radius: var(--radius-xs);
  animation: ui-shimmer var(--duration-shimmer) var(--ease-linear) infinite;
  display: block;
}
.ui-skeleton--text { height: 10px; margin-block: 4px; }
.ui-skeleton--title { height: 16px; width: 40%; }
.ui-skeleton--line-sm { width: 60%; }
.ui-skeleton--line-md { width: 85%; }
.ui-skeleton--avatar { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.ui-skeleton--circle { border-radius: 50%; }
.ui-skeleton--block { height: 88px; border-radius: var(--radius-card); }
.ui-skeleton--chart { height: 120px; border-radius: var(--radius-card); }
.ui-skeleton-card { padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface); display: flex; flex-direction: column; gap: var(--space-3); }
.ui-skeleton-row { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--separator); }
.ui-skeleton-row > .ui-skeleton { flex: 1; height: 10px; }

/* ---------- Fade / crossfade data loading ---------- */
.ui-loadable { position: relative; transition: opacity var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard); }
.ui-loadable[data-loading="true"] { opacity: .45; filter: saturate(.7); pointer-events: none; }
.ui-loadable[data-loading="true"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--alpha-white-04), transparent);
  background-size: 200% 100%;
  animation: ui-shimmer var(--duration-shimmer) var(--ease-linear) infinite;
  pointer-events: none;
}
.ui-swap { display: grid; }
.ui-swap > * { grid-area: 1 / 1; transition: opacity var(--duration-slow) var(--ease-smooth); }
.ui-swap > [data-state="hidden"] { opacity: 0; pointer-events: none; }

/* ---------- Page loader ---------- */
.ui-page-loader { position: fixed; inset: 0; display: grid; place-items: center; gap: var(--space-6); background: var(--background); z-index: var(--z-max); animation: ui-fade-in var(--duration-fast) var(--ease-enter); }
.ui-page-loader__mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.ui-topbar-loader { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: var(--z-max); overflow: hidden; }
.ui-topbar-loader::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--accent); animation: ui-indeterminate 1100ms var(--ease-smooth) infinite; }

/* ---------- Progressive reveal ---------- */
.ui-progressive > * { animation: ui-fade-up var(--duration-slow) var(--ease-emphasized) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* ==== motion/micro-interactions.css ==== */
/* Hover-reveal actions */
.ui-reveal { opacity: 0; transform: translateY(2px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
:hover > .ui-reveal, :focus-within > .ui-reveal { opacity: 1; transform: none; }

/* Press feedback */
.ui-press:active { transform: scale(var(--press-scale)); }

/* Copy-to-clipboard confirmation */
.ui-copy { position: relative; }
/* The confirmation's word comes from the element (data-copied), in the page's language. */
.ui-copy.is-copied::after {
  content: attr(data-copied); position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%);
  padding: 2px var(--space-3); border-radius: var(--radius-xs);
  background: var(--success-soft); color: var(--success-text);
  border: 1px solid var(--success-border);
  font-size: var(--font-size-xs); white-space: nowrap;
  animation: ui-fade-up var(--duration-fast) var(--ease-spring);
}

/* Favourite / star */
.ui-star { color: var(--icon-muted); transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-spring); }
.ui-star:hover { color: var(--accent-300); }
.ui-star[aria-pressed="true"] { color: var(--accent-400); transform: scale(1.12); }

/* Row selection ripple-free highlight */
.ui-flash { animation: ui-flash var(--duration-slower) var(--ease-exit); }
.ui-shake { animation: ui-shake 320ms var(--ease-standard); }
.ui-attention { animation: ui-ring var(--duration-slower) var(--ease-exit) 2; }

/* Counter roll (pair with JS updating textContent) */
.ui-counter { font-variant-numeric: tabular-nums; transition: color var(--duration-fast) var(--ease-standard); }
.ui-counter.is-up { color: var(--success-text); }
.ui-counter.is-down { color: var(--danger-text); }

/* Upload progress ring */
.ui-upload-ring {
  width: 20px; height: 20px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--value,0) * 1%), var(--surface-inset) 0);
  transition: background var(--duration-base) var(--ease-standard);
}

/* Delete / add row motion */
.ui-row-enter { animation: ui-fade-down var(--duration-base) var(--ease-enter) both; }
.ui-row-exit { animation: ui-fade-out var(--duration-fast) var(--ease-exit) both; }

/* ==== themes/faithful.css ==== */
/* Style 0 — Faithful: the source product, technically cleaned.
   Flat surfaces, hairline borders, near-square corners, maximum density. */
:root[data-theme="faithful"] {
  --radius-control: var(--radius-xs);
  --radius-card: var(--radius-sm);
  --radius-surface: var(--radius-sm);
  --radius-overlay: var(--radius-md);
  --radius-badge: var(--radius-xs);

  --font-family-sans: "Segoe UI", "Selawik", Tahoma, "Helvetica Neue", Arial, sans-serif;
  --font-size-md: 13px;

  --control-height-md: 28px;
  --panel-padding: var(--space-6);
  --hover-lift: 0px;
  --backdrop-blur: 0px;

  --elevation-card: var(--shadow-none);
  --elevation-raised: var(--shadow-xs);
  --elevation-popover: var(--shadow-md);
  --elevation-modal: var(--shadow-lg);
}
:root[data-theme="faithful"][data-mode="dark"] {
  --background: #2f2f2f;
  --background-secondary: #2a2a2a;
  --surface: #333333;
  --surface-elevated: #3b3b3b;
  --surface-inset: #262626;
  --surface-hover: #3d3d3d;
  --surface-active: #464646;
  --surface-selected: #33455c;
  --border: #4d4d4d;
  --border-subtle: #404040;
  --separator: #3c3c3c;
  /* WCAG 1.4.3: accent text on the accent tint (.ui-badge--accent, selected .ui-chip) reached only
     3.9:1 with primary-300 on these surfaces; primary-200, as in the next theme, gives 4.9:1 or more. */
  --text-accent: var(--primary-200);
}

/* ==== themes/modern.css ==== */
/* Style 1 — Modern Refined: same ADN, more air, softer corners, light depth. */
:root[data-theme="modern"] {
  --radius-control: var(--radius-lg);
  --radius-card: var(--radius-xl);
  --radius-surface: var(--radius-xl);
  --radius-overlay: var(--radius-2xl);
  --radius-badge: var(--radius-md);
  --radius-tab: var(--radius-lg) var(--radius-lg) 0 0;

  --font-family-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-size-md: 13px;

  --control-height-sm: 26px;
  --control-height-md: 32px;
  --control-height-lg: 38px;
  --control-padding-x: var(--space-6);
  --panel-padding: var(--space-8);
  --sidebar-width: 244px;
  --header-height: 48px;
  --toolbar-height: 44px;

  --hover-lift: -1px;
  --elevation-card: var(--shadow-xs);
  --elevation-raised: var(--shadow-sm);
  --elevation-popover: var(--shadow-lg);
  --elevation-modal: var(--shadow-xl);
  --duration-base: 150ms;
}
:root[data-theme="modern"][data-mode="dark"] {
  --background: #232529;
  --background-secondary: #1e2024;
  --background-sunken: #191b1e;
  --surface: #2a2d32;
  --surface-elevated: #32353b;
  --surface-hover: #33373d;
  --surface-active: #3b3f46;
  --surface-inset: #202225;
  --surface-selected: rgba(116,140,171,.24);
  --border: #3a3e45;
  --border-subtle: #2f333a;
  --border-strong: #4c515a;
  --separator: #303439;
  --text-primary: #f0ebd8;
  --text-secondary: #c8cfdc;
  --text-muted: #9dabbf;
  --accent: var(--primary-400);
  --accent-hover: var(--primary-300);
  --accent-contrast: #0e151d;
  /* WCAG 1.4.3: accent text on the accent tint (.ui-badge--accent, selected .ui-chip) reached only
     4.2:1 with primary-300 on these surfaces; primary-200, as in the next theme, gives 5.3:1 or more. */
  --text-accent: var(--primary-200);
}
:root[data-theme="modern"][data-mode="light"] {
  --surface-selected: var(--primary-50);
}

/* ==== themes/premium.css ==== */
/* Style 2 — Premium Product: layered surfaces, gradients, glass, richer states. */
:root[data-theme="premium"] {
  --font-family-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-family-display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  --radius-control: var(--radius-lg);
  --radius-card: var(--radius-2xl);
  --radius-surface: var(--radius-2xl);
  --radius-overlay: var(--radius-2xl);
  --radius-badge: var(--radius-pill);
  --radius-tab: var(--radius-lg) var(--radius-lg) 0 0;

  --control-height-md: 34px;
  --control-height-lg: 40px;
  --control-padding-x: var(--space-6);
  --panel-padding: var(--space-8);
  --header-height: 56px;
  --sidebar-width: 252px;

  --hover-lift: -1px;
  --backdrop-blur: 14px;
  --duration-base: 170ms;
  --ease-standard: var(--ease-smooth);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 var(--alpha-white-06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.34), inset 0 1px 0 var(--alpha-white-06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.28);
  --elevation-card: var(--shadow-sm);
  --elevation-raised: var(--shadow-md);
  --elevation-popover: var(--shadow-lg);
  --elevation-modal: var(--shadow-overlay);
}
:root[data-theme="premium"][data-mode="dark"] {
  --background: #16181d;
  --background-secondary: #101217;
  --background-sunken: #0b0d11;
  --surface: #1c1f25;
  --surface-elevated: #23262d;
  --surface-hover: #262a31;
  --surface-active: #2e323a;
  --surface-inset: #131519;
  --surface-selected: rgba(148,166,192,.20);
  --border: rgba(240,235,216,.11);
  --border-subtle: rgba(240,235,216,.07);
  --border-strong: rgba(240,235,216,.20);
  --separator: rgba(240,235,216,.08);
  --text-primary: #f0ebd8;
  --text-secondary: #c5ccda;
  --text-muted: #9aa8bd;
  --accent: var(--primary-400);
  --accent-hover: var(--primary-300);
  --accent-contrast: #0d1321;
}

/* Premium surface treatments — opt-in, never global blur */
:root[data-theme="premium"] .ui-card,
:root[data-theme="premium"] .ui-panel {
  background-image: linear-gradient(180deg, var(--alpha-white-04), transparent 42%);
}
:root[data-theme="premium"] .ui-button--primary {
  background-image: linear-gradient(180deg, var(--alpha-white-16), transparent);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="premium"] .ui-header,
:root[data-theme="premium"] .ui-toolbar--sticky {
  background: color-mix(in oklab, var(--background-secondary) 78%, transparent);
  backdrop-filter: blur(var(--backdrop-blur));
}
:root[data-theme="premium"] .ui-modal,
:root[data-theme="premium"] .ui-menu,
:root[data-theme="premium"] .ui-command {
  background: color-mix(in oklab, var(--surface-elevated) 88%, transparent);
  backdrop-filter: blur(var(--backdrop-blur));
}
:root[data-theme="premium"] .ui-stat__value { letter-spacing: var(--letter-spacing-tighter); }
:root[data-theme="premium"] .ui-progress__bar {
  background-image: linear-gradient(90deg, var(--primary-600), var(--primary-400));
}

/* ==== themes/next.css ==== */
/* Style 3 — Next Generation: command-driven, floating panes, high contrast accents. */
:root[data-theme="next"] {
  --font-family-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  --radius-control: var(--radius-xl);
  --radius-card: var(--radius-3xl);
  --radius-surface: var(--radius-3xl);
  --radius-overlay: var(--radius-3xl);
  --radius-badge: var(--radius-pill);
  --radius-tab: var(--radius-pill);

  --control-height-sm: 28px;
  --control-height-md: 36px;
  --control-height-lg: 44px;
  --control-padding-x: var(--space-7);
  --panel-padding: var(--space-9);
  --section-gap: var(--space-10);
  --header-height: 60px;
  --sidebar-width: 236px;
  --railbar-width: 52px;

  --hover-lift: -2px;
  --backdrop-blur: 20px;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --ease-standard: var(--ease-smooth);
  --ease-emphasized: var(--ease-spring);

  --elevation-card: 0 1px 2px rgba(0,0,0,.30);
  --elevation-raised: 0 6px 18px rgba(0,0,0,.36);
  --elevation-popover: 0 20px 48px rgba(0,0,0,.50);
  --elevation-modal: 0 32px 80px rgba(0,0,0,.60);
}
:root[data-theme="next"][data-mode="dark"] {
  --background: #0c0d11;
  --background-secondary: #101219;
  --background-sunken: #08090c;
  --surface: #14161d;
  --surface-elevated: #1b1e27;
  --surface-hover: #1f222c;
  --surface-active: #262a35;
  --surface-inset: #0f1116;
  --surface-selected: rgba(148,166,192,.22);
  --border: rgba(240,235,216,.10);
  --border-subtle: rgba(240,235,216,.06);
  --border-strong: rgba(240,235,216,.22);
  --separator: rgba(240,235,216,.07);
  --text-primary: #f0ebd8;
  --text-secondary: #c3cbd9;
  --text-muted: #96a4ba;
  --accent: var(--primary-300);
  --accent-hover: var(--primary-200);
  --accent-active: var(--primary-400);
  --accent-contrast: #0d1321;
  --accent-soft: rgba(148,166,192,.18);
  --accent-ring: rgba(148,166,192,.44);
  --text-accent: var(--primary-200);
}

/* Floating shell — panes detach from the frame */
:root[data-theme="next"] .ui-app__body { padding: var(--space-4); gap: var(--space-4); background: var(--background-sunken); }
:root[data-theme="next"] .ui-sidebar,
:root[data-theme="next"] .ui-rail,
:root[data-theme="next"] .ui-app__main {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  background: var(--background);
  box-shadow: var(--elevation-card);
}
:root[data-theme="next"] .ui-sidebar,
:root[data-theme="next"] .ui-app__main { overflow: hidden; }
:root[data-theme="next"] .ui-rail { overflow: visible; }
:root[data-theme="next"] .ui-sidebar { border-inline-end: 1px solid var(--border-subtle); }
:root[data-theme="next"] .ui-nav__item[aria-current="page"]::before { display: none; }
:root[data-theme="next"] .ui-nav__item[aria-current="page"] {
  background: var(--surface-selected);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
:root[data-theme="next"] .ui-header,
:root[data-theme="next"] .ui-modal,
:root[data-theme="next"] .ui-menu,
:root[data-theme="next"] .ui-command,
:root[data-theme="next"] .ui-popover {
  background: color-mix(in oklab, var(--surface-elevated) 80%, transparent);
  backdrop-filter: blur(var(--backdrop-blur));
}
:root[data-theme="next"] .ui-card { background-image: radial-gradient(120% 100% at 0% 0%, var(--alpha-white-04), transparent 60%); }
:root[data-theme="next"] .ui-stat__value { font-size: var(--font-size-4xl); }
:root[data-theme="next"] .ui-table thead th { background: transparent; border-bottom: 1px solid var(--border); }
:root[data-theme="next"] .ui-table-wrap { background: var(--surface); }
:root[data-theme="next"] .ui-progress { border: 0; background: var(--surface-inset); border-radius: var(--radius-pill); }
:root[data-theme="next"] .ui-progress__bar { background-image: linear-gradient(90deg, var(--primary-500), var(--primary-200)); }

/* ==== themes/dark.css ==== */
/* Dark is the product's native mode and lives in tokens/colors.css.
   This file carries the dark-only corrections that must not leak into light. */
:root[data-mode="dark"] {
  --shadow-xs: 0 1px 1px rgba(0,0,0,.30);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.36);
  --shadow-md: 0 2px 8px rgba(0,0,0,.42);
  --shadow-lg: 0 10px 28px rgba(0,0,0,.50);
  --shadow-xl: 0 20px 52px rgba(0,0,0,.58);
  --shadow-overlay: 0 28px 72px rgba(0,0,0,.66);
}
:root[data-mode="dark"] img:not([data-no-dim]) { filter: saturate(.96); }
:root[data-mode="dark"] .ui-input,
:root[data-mode="dark"] .ui-textarea,
:root[data-mode="dark"] .ui-select { box-shadow: inset 0 1px 1px rgba(0,0,0,.18); }

:root[data-mode="light"] {
  --shadow-xs: 0 1px 1px rgba(13,19,33,.05);
  --shadow-sm: 0 1px 2px rgba(13,19,33,.08);
  --shadow-md: 0 2px 8px rgba(13,19,33,.10);
  --shadow-lg: 0 12px 28px rgba(13,19,33,.14);
  --shadow-xl: 0 22px 52px rgba(13,19,33,.18);
  --shadow-overlay: 0 28px 72px rgba(13,19,33,.22);
  --alpha-white-04: rgba(13,19,33,.03);
  --alpha-white-06: rgba(13,19,33,.04);
  --alpha-white-10: rgba(13,19,33,.07);
  --alpha-white-16: rgba(13,19,33,.10);
}
:root[data-mode="light"] .ui-tooltip,
:root[data-mode="light"] .ui-tip::after { background: var(--neutral-900); color: var(--neutral-50); border-color: var(--neutral-700); }
:root[data-mode="light"] .ui-switch__track { background: var(--neutral-300); }
:root[data-mode="light"] .ui-button--success { color: #fff; }

/* ==== themes/density.css ==== */
/* Density layers — apply on :root or any subtree.
   The :root[...] selector matches the specificity of the theme blocks
   (:root[data-theme="…"]); this file is imported after the themes, so a
   density set on <html> wins over the theme's control metrics. The bare
   [data-density] selector keeps subtree densities working. */
:root[data-density="compact"],
[data-density="compact"] {
  --font-size-md: 12px;
  --control-height-xs: 18px;
  --control-height-sm: 22px;
  --control-height-md: 24px;
  --control-height-lg: 28px;
  --control-height-xl: 34px;
  --control-padding-x: var(--space-4);
  --panel-padding: var(--space-5);
  --section-gap: var(--space-6);
  --sidebar-padding: var(--space-2);
  --header-height: 34px;
  --toolbar-height: 28px;
}
[data-density="compact"] .ui-table th, [data-density="compact"] .ui-table td { padding: var(--space-1) var(--space-4); }
[data-density="compact"] .ui-card__body { padding: var(--space-4); }
[data-density="compact"] .ui-list__item { padding: var(--space-2) var(--space-4); }
[data-density="compact"] .ui-nav__item { min-height: 24px; }

:root[data-density="comfortable"],
[data-density="comfortable"] {
  --font-size-md: 14px;
  --control-height-xs: 24px;
  --control-height-sm: 30px;
  --control-height-md: 38px;
  --control-height-lg: 44px;
  --control-height-xl: 52px;
  --control-padding-x: var(--space-6);
  --panel-padding: var(--space-9);
  --section-gap: var(--space-10);
  --sidebar-padding: var(--space-5);
  --header-height: 56px;
  --toolbar-height: 50px;
}
[data-density="comfortable"] .ui-table th, [data-density="comfortable"] .ui-table td { padding: var(--space-5) var(--space-6); }
[data-density="comfortable"] .ui-card__body { padding: var(--space-7); }
[data-density="comfortable"] .ui-list__item { padding: var(--space-5) var(--space-6); }
[data-density="comfortable"] .ui-nav__item { min-height: 36px; }

/* ==== utilities/utilities.css ==== */
/* Layout */
.u-flex { display: flex; } .u-inline-flex { display: inline-flex; } .u-grid { display: grid; }
.u-block { display: block; } .u-hidden { display: none; }
.u-col { flex-direction: column; } .u-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; } .u-items-start { align-items: flex-start; } .u-items-end { align-items: flex-end; }
.u-justify-between { justify-content: space-between; } .u-justify-center { justify-content: center; } .u-justify-end { justify-content: flex-end; }
.u-flex-1 { flex: 1 1 auto; min-width: 0; } .u-flex-none { flex: none; }
.u-full { width: 100%; } .u-h-full { height: 100%; } .u-min-0 { min-width: 0; min-height: 0; }
.u-relative { position: relative; } .u-absolute { position: absolute; } .u-sticky { position: sticky; top: 0; }
.u-overflow-auto { overflow: auto; } .u-overflow-hidden { overflow: hidden; }

/* Gap / spacing — scale-bound only */
.u-gap-1 { gap: var(--space-1); } .u-gap-2 { gap: var(--space-2); } .u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); } .u-gap-5 { gap: var(--space-5); } .u-gap-6 { gap: var(--space-6); }
.u-gap-7 { gap: var(--space-7); } .u-gap-8 { gap: var(--space-8); } .u-gap-9 { gap: var(--space-9); }
.u-p-4 { padding: var(--space-4); } .u-p-5 { padding: var(--space-5); } .u-p-6 { padding: var(--space-6); } .u-p-8 { padding: var(--space-8); }
.u-mt-2 { margin-top: var(--space-2); } .u-mt-4 { margin-top: var(--space-4); } .u-mt-6 { margin-top: var(--space-6); } .u-mt-8 { margin-top: var(--space-8); }
.u-mb-2 { margin-bottom: var(--space-2); } .u-mb-4 { margin-bottom: var(--space-4); } .u-mb-6 { margin-bottom: var(--space-6); } .u-mb-8 { margin-bottom: var(--space-8); }
.u-ml-auto { margin-inline-start: auto; }

/* Surface / text helpers */
.u-surface { background: var(--surface); } .u-surface-inset { background: var(--surface-inset); }
.u-border { border: 1px solid var(--border-subtle); } .u-border-t { border-top: 1px solid var(--separator); }
.u-radius { border-radius: var(--radius-card); } .u-radius-control { border-radius: var(--radius-control); }
.u-shadow { box-shadow: var(--elevation-card); } .u-shadow-lg { box-shadow: var(--elevation-popover); }
.u-center { text-align: center; } .u-right { text-align: end; }
.u-nowrap { white-space: nowrap; }
.u-mono { font-family: var(--font-family-mono); }
.u-tabular { font-variant-numeric: tabular-nums; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-no-select { user-select: none; }
.u-cursor-pointer { cursor: pointer; }