/* =============================================================================
   UiChemy design system — WordPress build. GENERATED by scripts/build-live-ds.mjs
   from design-system/ in the website repo. Do not edit here; edit the repo and
   re-run the script. Markup for every component: design-system/live/COMPONENTS.md
   Wrap DS content in .uc-scope (light) / .uc-chrome (dark) — tokens live there.
   ============================================================================= */

@font-face{font-family:"Zalando Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Regular.woff2") format("woff2")}
@font-face{font-family:"Zalando Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Medium.woff2") format("woff2")}
@font-face{font-family:"Zalando Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Zalando Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/wp-content/uploads/2026/09/fonts-ZalandoSans-Bold.woff2") format("woff2")}

/* =============================================================================
   UiChemy Create — Design System Tokens (Phase 1, isolated)
   -----------------------------------------------------------------------------
   SURFACE MODEL — components are surface-agnostic. They read semantic tokens
   (surfaces, text, borders, ring, per-family fg/soft) whose VALUES are set by
   the surface scope a component lives in:

     .uc-content            → light content   (current look, DEFAULT)
     .uc-content[data-theme="dark"] → dark content (future — token change only)
     .uc-chrome             → dark chrome     (fixed; sidebar/nav/rails)

   `.uc-scope` and `.uc-portal` behave as light content, so existing usage is
   unchanged and the light view is pixel-identical to before this restructure.

   ISOLATION: all tokens are scoped under these classes (NOT :root). Nothing
   here touches the existing SproutOS globals/theme.
   ========================================================================== */

/* Brand typeface — self-contained (files in /public/fonts). */

/* =============================================================================
   1. BASE — surface-INDEPENDENT tokens (identical on every surface).
      Applies to every surface scope so the values are always present.
   ========================================================================== */
.uc-scope,
.uc-content,
.uc-chrome,
.uc-portal {
  /* Shared editorial/marketing composition, icon and selected-control tokens. */
  --uc-container-editorial: 1120px;
  --uc-col-brand: 300px; --uc-logo-height: 30px;
  --uc-footer-space: clamp(140px,20vw,260px);
  --uc-search-width: 360px;
  --uc-rail-width: 220px; --uc-rail-width-compact: 170px;
  --uc-space-56: 56px; --uc-space-64: 64px; --uc-space-80: 80px;
  --uc-text-display: 3.75rem; --uc-text-display-compact: 2.5rem;
  --uc-leading-display: 1.06;
  --uc-icon-sm: 1rem; --uc-icon-md: 1.25rem; --uc-icon-lg: 1.5rem;
  --uc-border-width: 1px; --uc-ring-width: 2px;
  --uc-shadow-selected: inset 0 0 0 var(--uc-ring-width) var(--uc-text-strong);
  --uc-sticky-offset: calc(var(--uc-space-48) * 2);
  --uc-z-sticky: 40;

  /* ---- Brand + semantic SOLID fills + on-fill text (constant) ---------- */
  --uc-brand:   #FD6A35;  --uc-brand-on:   #FFFFFF;
  --uc-success: #2EA343;  --uc-success-on: #FFFFFF;
  --uc-danger:  #F65258;  --uc-danger-on:  #FFFFFF;
  --uc-warning: #FFA940;  --uc-warning-on: #171717;
  --uc-accent:  #5202FD;  --uc-accent-on:  #FFFFFF;

  /* ---- Family hairline borders (translucent — work on any surface) ----- */
  --uc-brand-border:   rgba(253, 106, 53, 0.40);
  --uc-success-border: rgba(46, 163, 67, 0.40);
  --uc-danger-border:  rgba(246, 82, 88, 0.40);
  --uc-warning-border: rgba(255, 169, 64, 0.42);
  --uc-accent-border:  rgba(82, 2, 253, 0.40);

  /* ---- Hover / press glow washes (translucent — surface-agnostic) ------ */
  --uc-brand-glow-hover:   rgba(253, 106, 53, 0.08); --uc-brand-glow-press:   rgba(253, 106, 53, 0.16);
  --uc-success-glow-hover: rgba(46, 163, 67, 0.08);  --uc-success-glow-press: rgba(46, 163, 67, 0.16);
  --uc-danger-glow-hover:  rgba(246, 82, 88, 0.08);  --uc-danger-glow-press:  rgba(246, 82, 88, 0.16);
  --uc-warning-glow-hover: rgba(255, 169, 64, 0.10); --uc-warning-glow-press: rgba(255, 169, 64, 0.18);
  --uc-accent-glow-hover:  rgba(82, 2, 253, 0.08);   --uc-accent-glow-press:  rgba(82, 2, 253, 0.16);

  /* ---- Inverse text (constant) ----------------------------------------- */
  --uc-text-inverse: #FFFFFF;

  /* ---- Semantic aliases (resolve per surface via the surface tokens) --- */
  --uc-bg:        var(--uc-surface-base);
  --uc-fg:        var(--uc-text-strong);
  --uc-fg-muted:  var(--uc-text-muted);
  --uc-card:      var(--uc-surface-raised);
  --uc-card-fg:   var(--uc-text-strong);
  --uc-muted:     var(--uc-surface-sunken);
  --uc-elevated:  var(--uc-surface-overlay);

  /* ---- Radius (UiChemy scale: name = pixel value; mirrors the styleguide
         corner-radius set). Semantic aliases below keep components working. -- */
  --uc-radius-0: 0;      --uc-radius-2: 2px;    --uc-radius-4: 4px;
  --uc-radius-6: 6px;    --uc-radius-8: 8px;    --uc-radius-12: 12px;
  --uc-radius-16: 16px;  --uc-radius-24: 24px;  --uc-radius-32: 32px;
  --uc-radius-infinite: 9999px;
  /* Semantic aliases → numeric scale (value-identical to before) */
  --uc-radius-xs: var(--uc-radius-4);   --uc-radius-sm: var(--uc-radius-6);
  --uc-radius-md: var(--uc-radius-8);   --uc-radius-lg: var(--uc-radius-12);
  --uc-radius-xl: var(--uc-radius-16);  --uc-radius-pill: var(--uc-radius-infinite);

  /* ---- Spacing (UiChemy scale: name = pixels) -------------------------- */
  --uc-space-0: 0;     --uc-space-1: 1px;   --uc-space-2: 2px;   --uc-space-3: 3px;
  --uc-space-4: 4px;   --uc-space-5: 5px;   --uc-space-6: 6px;   --uc-space-7: 7px;
  --uc-space-8: 8px;   --uc-space-9: 9px;   --uc-space-10: 10px; --uc-space-11: 11px;
  --uc-space-12: 12px; --uc-space-14: 14px; --uc-space-16: 16px; --uc-space-20: 20px;
  --uc-space-24: 24px; --uc-space-28: 28px; --uc-space-32: 32px; --uc-space-36: 36px;
  --uc-space-40: 40px; --uc-space-44: 44px; --uc-space-48: 48px;

  /* ---- Typography ------------------------------------------------------ */
  --uc-font-sans: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --uc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --uc-text-3xs: 0.5rem;    --uc-text-2xs: 0.625rem;  --uc-text-xs: 0.75rem;
  --uc-text-sm: 0.8125rem;  --uc-text-base: 0.875rem; --uc-text-md: 1rem;
  --uc-text-lg: 1.125rem;   --uc-text-xl: 1.25rem;    --uc-text-2xl: 1.5rem;
  --uc-text-3xl: 1.875rem;
  --uc-weight-regular: 400; --uc-weight-medium: 500;  --uc-weight-semibold: 600;
  --uc-leading-tight: 1.2;  --uc-leading-snug: 1.35;  --uc-leading-normal: 1.5;
  --uc-tracking-tight: -0.01em; --uc-tracking-normal: 0; --uc-tracking-wide: 0.02em;

  /* ---- Elevation (neutral recipes; control-brand recolored to orange) -- */
  --uc-shadow-1: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.05);
  --uc-shadow-2: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 1px 2px oklch(0% 0 0 / 0.05), 0 2px 6px -1px oklch(0% 0 0 / 0.06);
  --uc-shadow-3: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 2px 4px -1px oklch(0% 0 0 / 0.05), 0 6px 14px -3px oklch(0% 0 0 / 0.08);
  --uc-shadow-4: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 6px 12px -4px oklch(0% 0 0 / 0.06), 0 14px 28px -6px oklch(0% 0 0 / 0.10);
  --uc-shadow-5: 0 0 0 1px oklch(50% 0.01 285 / 0.06), 0 12px 24px -8px oklch(0% 0 0 / 0.08), 0 28px 56px -12px oklch(0% 0 0 / 0.14);
  /* Filled controls (solid buttons): light top highlight + one soft drop.
     Kept subtle — depth reads without heavy shadows. */
  --uc-shadow-control:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 3px -1px rgba(0, 0, 0, 0.05);
  /* Colored solids (brand/success/danger): neutral dark inner edge so it suits
     any hue, plus a light top highlight and soft drop. */
  --uc-shadow-control-brand:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.09),
    0 2px 3px -1px rgba(0, 0, 0, 0.06);
  --uc-shadow-control-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.14);
  --uc-shadow-input: inset 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  /* Raised secondary controls (outline buttons, select/menu triggers): a faint
     top highlight and a whisper of drop. Edge comes from the component border. */
  --uc-shadow-raised:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px -1px rgba(0, 0, 0, 0.04);
  /* Very subtle gloss: faint light top → faint dark bottom. */
  --uc-sheen: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.03));

  /* ---- Control sizing -------------------------------------------------- */
  --uc-control-h-sm: 1.75rem; --uc-control-h-md: 2rem; --uc-control-h-lg: 2.5rem;

  /* ---- Motion ---------------------------------------------------------- */
  --uc-dur-fast: 160ms; --uc-dur-base: 240ms; --uc-dur-slow: 340ms;
  /* Appearance of popovers / overlays (tooltip, menu, select, dialog) — a touch
     slower than base so things ease in gracefully instead of flashing on. */
  --uc-dur-enter: 300ms;
  --uc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --uc-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --uc-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- Z-index --------------------------------------------------------- */
  --uc-z-dropdown: 1000; --uc-z-overlay: 1100; --uc-z-dialog: 1200; --uc-z-tooltip: 1300;
}

/* =============================================================================
   2. SURFACE — CONTENT (light). DEFAULT. Values identical to pre-restructure,
      so the light view is unchanged. `.uc-scope` / `.uc-portal` map here too.
   ========================================================================== */
.uc-scope,
.uc-content,
.uc-portal,

.uc-night .uc-force-light .uc-scope,
.uc-night .uc-force-light .uc-content,
.uc-night .uc-force-light .uc-portal,
.uc-night .uc-scope[data-theme="light"],
.uc-night .uc-portal[data-theme="light"],
.uc-scope[data-theme="dark"] .uc-scope[data-theme="light"] {
  --uc-surface-sunken:  #F1F1F7;
  --uc-surface-base:    #F9F9FB;
  --uc-surface-raised:  #FFFFFF;
  --uc-surface-overlay: rgba(255, 255, 255, 0.10);
  --uc-surface-control: #FFFFFF;   /* secondary control fill (raised) */

  --uc-text-strong: #0A0A0A;
  --uc-text:        #171717;
  --uc-text-muted:  #737373;
  --uc-text-subtle: #A3A3A3;

  /* high-contrast inverse fill (B&W primary): dark on light content */
  --uc-inverse-bg: #171717;
  --uc-inverse-fg: #FFFFFF;

  --uc-border-subtle: #E5E5E5;
  --uc-border:        #D4D4D4;
  --uc-border-strong: #D4D4D4;
  --uc-ring:          rgba(253, 106, 53, 0.50);

  /* per-family foreground (dark tints, readable on light) */
  --uc-brand-fg:   #CC4B23;
  --uc-success-fg: #0A842A;
  --uc-danger-fg:  #D12D37;
  --uc-warning-fg: #AA712B;
  --uc-accent-fg:  #3600AF;

  /* per-family soft tint backgrounds (opaque light tints) */
  --uc-brand-soft:   #FFF1EB;
  --uc-success-soft: #E7FFE7;
  --uc-danger-soft:  #FFF2EF;
  --uc-warning-soft: #FFEDD8;
  --uc-accent-soft:  #F2EEFF;
}

/* =============================================================================
   3. SURFACE — CONTENT DARK (future). Token change only; no component rebuild.
      Slightly lighter than chrome so content sits "above" the fixed chrome.
   ========================================================================== */
.uc-content[data-theme="dark"],

.uc-night .uc-scope,
.uc-night .uc-content,
.uc-night .uc-portal,
.uc-scope[data-theme="dark"],
.uc-portal[data-theme="dark"] {
  --uc-surface-sunken:  #151515;
  --uc-surface-base:    #1C1C1C;
  --uc-surface-raised:  #242424;
  --uc-surface-overlay: #2A2A2A;
  --uc-surface-control: rgba(255, 255, 255, 0.05);  /* subtle lift, blends on dark */

  --uc-text-strong: #F5F5F5;
  --uc-text:        #E5E5E5;
  --uc-text-muted:  #A3A3A3;
  --uc-text-subtle: #737373;

  /* inverse flips to light-on-dark so the B&W primary stays high-contrast */
  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #1C1C1C;

  --uc-border-subtle: #2E2E2E;
  --uc-border:        #3D3D3D;
  --uc-border-strong: #525252;
  --uc-ring:          rgba(253, 106, 53, 0.60);

  --uc-brand-fg:   #FFB89A;
  --uc-success-fg: #A7EAAA;
  --uc-danger-fg:  #FDC9C6;
  --uc-warning-fg: #FFC680;
  --uc-accent-fg:  #B8A9FF;

  --uc-brand-soft:   rgba(253, 106, 53, 0.18);
  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
  --uc-warning-soft: rgba(255, 169, 64, 0.22);
  --uc-accent-soft:  rgba(82, 2, 253, 0.28);
}

/* =============================================================================
   4. SURFACE — CHROME (dark, fixed). Values from the existing app dark sidebar
      (#171717 / #202020, text-white / text-weakest, border-dark-weakest/default).
   ========================================================================== */
.uc-chrome {
  --uc-surface-sunken:  #101010;
  --uc-surface-base:    #171717;
  --uc-surface-raised:  #202020;
  --uc-surface-overlay: #242424;
  --uc-surface-control: rgba(255, 255, 255, 0.05);  /* subtle lift, blends on dark */

  --uc-text-strong: #FFFFFF;
  --uc-text:        #A3A3A3;
  --uc-text-muted:  #737373;
  --uc-text-subtle: #525252;

  /* inverse flips to light-on-dark so the B&W primary stays high-contrast */
  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #171717;

  --uc-border-subtle: #333333;
  --uc-border:        #404040;
  --uc-border-strong: #525252;
  --uc-ring:          rgba(253, 106, 53, 0.60);

  --uc-brand-fg:   #FFB89A;
  --uc-success-fg: #A7EAAA;
  --uc-danger-fg:  #FDC9C6;
  --uc-warning-fg: #FFC680;
  --uc-accent-fg:  #B8A9FF;

  --uc-brand-soft:   rgba(253, 106, 53, 0.18);
  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
  --uc-warning-soft: rgba(255, 169, 64, 0.22);
  --uc-accent-soft:  rgba(82, 2, 253, 0.28);
}

/* =============================================================================
   4b. POPOVER — fixed dark scope for dropdowns (Select / Menu). Always dark in
       every mode. Applied alongside `uc-portal` (base tokens + box-sizing).
   ========================================================================== */
.uc-pop-dark {
  --uc-surface-sunken:  #141414;
  --uc-surface-base:    #1A1A1A;
  --uc-surface-raised:  #242424;
  --uc-surface-overlay: #1C1C1C;
  --uc-surface-control: rgba(255, 255, 255, 0.08);

  --uc-text-strong: #FFFFFF;
  --uc-text:        #E5E5E5;
  --uc-text-muted:  #A3A3A3;
  --uc-text-subtle: #737373;

  --uc-inverse-bg: #F5F5F5;
  --uc-inverse-fg: #171717;

  --uc-border-subtle: #2E2E2E;
  --uc-border:        #3D3D3D;
  --uc-border-strong: #525252;
  --uc-ring:          rgba(253, 106, 53, 0.60);

  --uc-brand-fg:   #FFB89A;  --uc-brand-soft:   rgba(253, 106, 53, 0.18);
  --uc-success-fg: #A7EAAA;  --uc-success-soft: rgba(46, 163, 67, 0.20);
  --uc-danger-fg:  #FDC9C6;  --uc-danger-soft:  rgba(246, 82, 88, 0.20);
  --uc-warning-fg: #FFC680;  --uc-warning-soft: rgba(255, 169, 64, 0.22);
  --uc-accent-fg:  #B8A9FF;  --uc-accent-soft:  rgba(82, 2, 253, 0.28);

  color: var(--uc-text);
}

/* =============================================================================
   5. BASELINES — each surface paints its own background + text.
   ========================================================================== */
.uc-scope,
.uc-content,
.uc-chrome {
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text);
  background: var(--uc-surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Portalled content mounts in <body>; carry font/tokens but no background. */
.uc-portal {
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text);
  -webkit-font-smoothing: antialiased;
}
.uc-scope *, .uc-scope *::before, .uc-scope *::after,
.uc-content *, .uc-content *::before, .uc-content *::after,
.uc-chrome *, .uc-chrome *::before, .uc-chrome *::after,
.uc-portal *, .uc-portal *::before, .uc-portal *::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .uc-scope *, .uc-content *, .uc-chrome *, .uc-portal * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   Glue — rules the WordPress build needs that the React build gets from Radix
   or Sonner. Hand-written; scripts/build-live-ds.mjs places it after the
   tokens and BEFORE the component rules, so a component rule of equal
   specificity still wins.
   ========================================================================== */

/* Theme / Elementor kit resets for elements the DS draws itself. */
:root .pr-button.pr-button,
:root .pr-select-trigger.pr-select-trigger,
:root .pr-toast-close.pr-toast-close,
:root .pr-dialog-close-outside.pr-dialog-close-outside {
  margin: 0;
  min-height: 0;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
}
:root a.pr-button.pr-button:hover,
:root a.pr-button.pr-button:focus { text-decoration: none; }

/* Theme heading/paragraph margins (Nexter: h2/h3/p get 14–18px). The React
   build sits on a preflight reset; the DS text parts have none of their own. */
:root .pr-card-title.pr-card-title,
:root .pr-card-desc.pr-card-desc,
:root .pr-dialog-title.pr-dialog-title,
:root .pr-dialog-desc.pr-dialog-desc,
:root .pr-toast-title.pr-toast-title,
:root .pr-toast-desc.pr-toast-desc,
:root .pr-toast-countdown.pr-toast-countdown,
:root .pr-accordion-header.pr-accordion-header { margin: 0; }

/* Popover anchors: Select and Menu render their panel in place, below the trigger. */
:root .pr-select.pr-select,
:root .pr-menu.pr-menu { position: relative; display: inline-block; }
:root .pr-select.pr-select > .pr-select-content,
:root .pr-menu.pr-menu > .pr-menu-content {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: max(100%, 180px);
}
:root .pr-menu.pr-menu[data-align="end"] > .pr-menu-content { left: auto; right: 0; }
:root .pr-select.pr-select > .pr-select-content[hidden],
:root .pr-menu.pr-menu > .pr-menu-content[hidden] { display: none; }

/* Radix only mounts an indicator when checked; here it is always in the DOM. */
:root .pr-checkbox.pr-checkbox[data-state="unchecked"] .pr-checkbox-indicator,
:root .pr-radio-item.pr-radio-item:not([data-state="checked"]) .pr-radio-indicator,
:root .pr-select-item.pr-select-item:not([data-state="checked"]) .pr-select-indicator { display: none; }
:root .pr-checkbox.pr-checkbox .pr-checkbox-indicator .pr-dash { display: none; }
:root .pr-checkbox.pr-checkbox[data-state="indeterminate"] .pr-checkbox-indicator .pr-tick { display: none; }
:root .pr-checkbox.pr-checkbox[data-state="indeterminate"] .pr-checkbox-indicator .pr-dash { display: block; }

/* Tabs: inactive panels hidden. */
:root .pr-tabs-content.pr-tabs-content[data-state="inactive"] { display: none; }

/* Dialog: the whole layer (overlay + positioner) toggles as one. */
:root .pr-dialog.pr-dialog[hidden] { display: none; }

/* Tooltip: placed by JS (position: fixed). */
:root .pr-tooltip.pr-tooltip { position: fixed; top: 0; left: 0; pointer-events: none; }

/* Badge neutral SOLID: the repo pairs a --uc-text fill with the constant white
   --uc-text-inverse, which is white-on-light-grey on any dark surface. The
   surface-aware --uc-inverse-fg is the same #FFF in light mode, readable in dark. */
:root .pr-badge-neutral.pr-badge-neutral.pr-badge-neutral { --_on: var(--uc-inverse-fg); }

/* Select / Menu collision flips (set by JS when there is no room). */
:root .pr-select.pr-select[data-side="top"] > .pr-select-content,
:root .pr-menu.pr-menu[data-side="top"] > .pr-menu-content { top: auto; bottom: calc(100% + 6px); animation-name: pr-pop-up; }
:root .pr-select.pr-select[data-flip-x=""] > .pr-select-content,
:root .pr-menu.pr-menu[data-flip-x=""] > .pr-menu-content { left: auto; right: 0; }
:root .pr-menu.pr-menu[data-flip-x="start"] > .pr-menu-content { left: 0; right: auto; }
@keyframes pr-pop-up { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Icons: <span data-pr-icon="name"> gets an inline SVG from uichemy-ds-icons.js.
   Add pr-icon pr-icon-sm|md|lg for the DS sizes; bare spans default to md, inline. */
:root [data-pr-icon]:not(svg) {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: var(--uc-icon-md, 1.25rem);
  height: var(--uc-icon-md, 1.25rem);
  line-height: 0;
}
:root [data-pr-icon] > svg { display: block; width: 100%; height: 100%; }

/* Toast stack — Sonner's container rebuilt. JS sets --pr-y / --pr-s per toast
   (collapsed pile or expanded list), --pr-x while swiping, and the toaster height. */
:root .pr-toaster.pr-toaster {
  position: fixed;
  z-index: var(--uc-z-tooltip, 1300);
  width: 426px;
  max-width: calc(100vw - var(--uc-space-32, 32px));
  height: 0;
  transition: height var(--uc-dur-slow, 340ms) var(--uc-ease-standard, ease);
}
:root .pr-toaster.pr-toaster[data-y="bottom"] { bottom: var(--pr-toast-offset, 24px); }
:root .pr-toaster.pr-toaster[data-y="top"] { top: var(--pr-toast-offset, 24px); }
:root .pr-toaster.pr-toaster[data-x="right"] { right: var(--pr-toast-offset, 24px); }
:root .pr-toaster.pr-toaster[data-x="left"] { left: var(--pr-toast-offset, 24px); }
:root .pr-toaster.pr-toaster[data-x="center"] { left: 50%; transform: translateX(-50%); }
@media (max-width: 600px) {
  :root .pr-toaster.pr-toaster { left: 16px; right: 16px; width: auto; max-width: none; transform: none; }
}
:root .pr-toaster.pr-toaster > .pr-toast {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  overflow: hidden;
  touch-action: pan-y;
  transform: translateX(var(--pr-x, 0px)) translateY(var(--pr-y, 0px)) scale(var(--pr-s, 1));
  transition: transform 400ms var(--uc-ease-emphasized, ease), opacity 400ms ease, height 400ms ease;
  animation: pr-toast-in 400ms var(--uc-ease-emphasized, ease);
}
:root .pr-toaster.pr-toaster[data-y="bottom"] > .pr-toast { bottom: 0; transform-origin: 50% 100%; }
:root .pr-toaster.pr-toaster[data-y="top"] > .pr-toast { top: 0; transform-origin: 50% 0; --pr-in: -16px; }
:root .pr-toaster.pr-toaster > .pr-toast > * { transition: opacity 300ms ease; }
:root .pr-toaster.pr-toaster[data-expanded="false"] > .pr-toast[data-front="false"] > * { opacity: 0; }
:root .pr-toaster.pr-toaster > .pr-toast[data-swiping] { transition: none; user-select: none; }
:root .pr-toaster.pr-toaster > .pr-toast[data-leaving] { opacity: 0 !important; pointer-events: none; }
@keyframes pr-toast-in { from { opacity: 0; translate: 0 var(--pr-in, 16px); } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  :root .pr-toaster.pr-toaster > .pr-toast { transition: opacity 200ms ease; animation: none; }
}

/* ---- Accordion ---- */
/* Accordion — Radix behaviour, uc- token look. Hairline-divided rows; the
   plus turns into a minus on the brand fill; the panel eases open on a grid row. */
:root .pr-accordion.pr-accordion { display: flex; flex-direction: column; border-top: var(--uc-border-width) solid var(--uc-border-subtle); }

:root .pr-accordion-item.pr-accordion-item { border-bottom: var(--uc-border-width) solid var(--uc-border-subtle); }

:root .pr-accordion-header.pr-accordion-header { all: unset; display: flex; }

:root .pr-accordion-trigger.pr-accordion-trigger {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uc-space-16);
  padding: var(--uc-space-16) var(--uc-space-0);
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-md);
  line-height: var(--uc-leading-normal);
  font-weight: var(--uc-weight-medium);
  letter-spacing: var(--uc-tracking-tight);
  color: var(--uc-text-strong);
  cursor: pointer;
  text-align: left;
}
:root .pr-accordion-trigger-lg.pr-accordion-trigger-lg { padding: var(--uc-space-20) var(--uc-space-0); font-size: var(--uc-text-lg); }
:root .pr-accordion-trigger.pr-accordion-trigger:focus-visible { outline: var(--uc-ring-width) solid var(--uc-ring); outline-offset: var(--uc-space-2); border-radius: var(--uc-radius-sm); }
:root .pr-accordion-trigger.pr-accordion-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
:root .pr-accordion-label.pr-accordion-label { min-width: 0; }

:root .pr-accordion-icon.pr-accordion-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--uc-control-h-sm);
  height: var(--uc-control-h-sm);
  border-radius: var(--uc-radius-pill);
  color: var(--uc-text-muted);
  background: var(--uc-surface-sunken);
  transition: background var(--uc-dur-fast) var(--uc-ease-standard), color var(--uc-dur-fast) var(--uc-ease-standard),
    transform var(--uc-dur-base) var(--uc-ease-emphasized);
}
:root .pr-accordion-icon.pr-accordion-icon svg { width: var(--uc-icon-sm); height: var(--uc-icon-sm); }
:root .pr-accordion-icon-v.pr-accordion-icon-v { transform-origin: center; transition: transform var(--uc-dur-base) var(--uc-ease-emphasized); }
:root .pr-accordion-trigger.pr-accordion-trigger:hover .pr-accordion-icon { color: var(--uc-text-strong); }
:root .pr-accordion-trigger.pr-accordion-trigger[data-state="open"] .pr-accordion-icon { color: var(--uc-brand-on); background: var(--uc-brand); transform: rotate(180deg); }
:root .pr-accordion-trigger.pr-accordion-trigger[data-state="open"] .pr-accordion-icon-v { transform: scaleY(0); }

/* Mounted while closed; the [hidden] Radix sets is overridden so the grid
   row can animate, and visibility keeps the closed text out of reach. */
:root .pr-accordion-content.pr-accordion-content,:root 
.pr-accordion-content.pr-accordion-content[hidden] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--uc-dur-base) var(--uc-ease-exit), visibility 0s linear var(--uc-dur-base);
}
:root .pr-accordion-content.pr-accordion-content[data-state="open"] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--uc-dur-slow) var(--uc-ease-standard), visibility 0s;
}
:root .pr-accordion-clip.pr-accordion-clip { min-height: 0; overflow: hidden; }

:root .pr-accordion-body.pr-accordion-body {
  padding: var(--uc-space-0) calc(var(--uc-control-h-sm) + var(--uc-space-16)) var(--uc-space-16) var(--uc-space-0);
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-md);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text-muted);
}
:root .pr-accordion-body.pr-accordion-body > :first-child { margin-top: 0; }
:root .pr-accordion-body.pr-accordion-body > :last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  :root .pr-accordion-content.pr-accordion-content,:root  .pr-accordion-content.pr-accordion-content[hidden],:root  .pr-accordion-content.pr-accordion-content[data-state="open"] { transition: none; }
  :root .pr-accordion-icon.pr-accordion-icon,:root  .pr-accordion-icon-v.pr-accordion-icon-v { transition: none; }
}

/* ---- Alert ---- */
/* Alert — inline message banner on uc- tokens. */
:root .pr-alert.pr-alert {
  display: flex;
  gap: var(--uc-space-12);
  padding: var(--uc-space-16);
  border-radius: var(--uc-radius-md);
  background: var(--_soft, var(--uc-accent-soft));
  box-shadow: inset 0 0 0 1px var(--_border, var(--uc-accent-border));
}
:root .pr-alert-icon.pr-alert-icon { flex: none; color: var(--_fg, var(--uc-accent-fg)); margin-top: 1px; }
:root .pr-alert-icon.pr-alert-icon svg { display: block; }
:root .pr-alert-content.pr-alert-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:root .pr-alert-title.pr-alert-title { font-size: var(--uc-text-base); font-weight: var(--uc-weight-semibold); color: var(--uc-text-strong); }
:root .pr-alert-desc.pr-alert-desc { font-size: var(--uc-text-sm); color: var(--uc-text-muted); }

:root .pr-alert-accent.pr-alert-accent  { --_soft: var(--uc-accent-soft);    --_border: var(--uc-accent-border);    --_fg: var(--uc-accent-fg); }
:root .pr-alert-success.pr-alert-success { --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); --_fg: var(--uc-success-fg); }
:root .pr-alert-warning.pr-alert-warning { --_soft: var(--uc-warning-soft); --_border: var(--uc-warning-border); --_fg: var(--uc-warning-fg); }
:root .pr-alert-danger.pr-alert-danger  { --_soft: var(--uc-danger-soft);  --_border: var(--uc-danger-border);  --_fg: var(--uc-danger-fg); }

/* ---- Badge ---- */
/* Badge — compact status/label pill on uc- tokens. */
:root .pr-badge.pr-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-4);
  height: 20px;
  padding: 0 var(--uc-space-8);
  border-radius: var(--uc-radius-pill);
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-xs);
  font-weight: var(--uc-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
:root .pr-badge-md.pr-badge-md { height: 24px; padding: 0 var(--uc-space-12); font-size: var(--uc-text-sm); }

:root .pr-badge-dot.pr-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* variants read the --_* tone channels */
:root .pr-badge-solid.pr-badge-solid   { color: var(--_on, var(--uc-brand-on)); background: var(--_fill, var(--uc-brand)); background-image: var(--uc-sheen); box-shadow: var(--uc-shadow-1); }
:root .pr-badge-soft.pr-badge-soft    { color: var(--_fg, var(--uc-brand-fg)); background: var(--_soft, var(--uc-brand-soft)); }
:root .pr-badge-outline.pr-badge-outline { color: var(--_fg, var(--uc-brand-fg)); background: transparent; box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)); }

:root .pr-badge-brand.pr-badge-brand   { --_fill: var(--uc-brand);   --_on: var(--uc-brand-on);   --_fg: var(--uc-brand-fg);   --_soft: var(--uc-brand-soft);   --_border: var(--uc-brand-border); }
:root .pr-badge-success.pr-badge-success { --_fill: var(--uc-success); --_on: var(--uc-success-on); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); }
:root .pr-badge-danger.pr-badge-danger  { --_fill: var(--uc-danger);  --_on: var(--uc-danger-on);  --_fg: var(--uc-danger-fg);  --_soft: var(--uc-danger-soft);  --_border: var(--uc-danger-border); }
:root .pr-badge-warning.pr-badge-warning { --_fill: var(--uc-warning); --_on: var(--uc-warning-on); --_fg: var(--uc-warning-fg); --_soft: var(--uc-warning-soft); --_border: var(--uc-warning-border); }
:root .pr-badge-accent.pr-badge-accent  { --_fill: var(--uc-accent);  --_on: var(--uc-accent-on);  --_fg: var(--uc-accent-fg);  --_soft: var(--uc-accent-soft);  --_border: var(--uc-accent-border); }
:root .pr-badge-neutral.pr-badge-neutral { --_fill: var(--uc-text); --_on: var(--uc-text-inverse); --_fg: var(--uc-text-muted); --_soft: var(--uc-surface-sunken); --_border: var(--uc-border-strong); }

/* ---- Button ---- */
/* Button — raised, physically-lit control on uc- tokens. */

:root .pr-button.pr-button {
  --_h: var(--uc-control-h-md);
  --_px: var(--uc-space-16);
  --_fs: var(--uc-text-base);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--uc-space-8);
  height: var(--_h);
  padding: 0 var(--_px);
  font-family: var(--uc-font-sans);
  font-size: var(--_fs);
  font-weight: var(--uc-weight-medium);
  line-height: 1;
  white-space: nowrap;
  border: none;
  border-radius: var(--uc-radius-md);
  cursor: pointer;
  user-select: none;
  position: relative;
  isolation: isolate;
  transition: background var(--uc-dur-fast) var(--uc-ease-standard),
    box-shadow var(--uc-dur-fast) var(--uc-ease-standard),
    transform var(--uc-dur-fast) var(--uc-ease-standard),
    color var(--uc-dur-fast) var(--uc-ease-standard);
}
:root .pr-button.pr-button:focus-visible {
  outline: 2px solid var(--uc-ring);
  outline-offset: 2px;
}
:root .pr-button.pr-button:active:not(:disabled) {
  transform: translateY(0.5px);
}
:root .pr-button.pr-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Sizes ---------------------------------------------------------------- */
:root .pr-button-sm.pr-button-sm { --_h: var(--uc-control-h-sm); --_px: var(--uc-space-12); --_fs: var(--uc-text-sm); }
:root .pr-button-md.pr-button-md { --_h: var(--uc-control-h-md); --_px: var(--uc-space-16); --_fs: var(--uc-text-base); }
:root .pr-button-lg.pr-button-lg { --_h: var(--uc-control-h-lg); --_px: var(--uc-space-20); --_fs: var(--uc-text-md); }

:root .pr-button-icon-only.pr-button-icon-only { padding: 0; width: var(--_h); }

/* ---- Variant: solid ------------------------------------------------------- */
:root .pr-button-solid.pr-button-solid {
  color: var(--uc-brand-on);
  background: var(--_fill, var(--uc-brand));
  background-image: var(--uc-sheen);
  box-shadow: var(--_shadow, var(--uc-shadow-control-brand));
}
:root .pr-button-solid.pr-button-solid:hover:not(:disabled) { background-image: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), var(--uc-sheen); }
:root .pr-button-solid.pr-button-solid:active:not(:disabled) {
  background-image: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), var(--uc-sheen);
  box-shadow: var(--uc-shadow-control-pressed);
}

/* neutral solid = the B&W PRIMARY: high-contrast inverse fill that flips per
   surface (dark on light content, light on dark chrome/content). */
:root .pr-button-solid.pr-button-solid.pr-button-neutral {
  color: var(--uc-inverse-fg);
  background: var(--uc-inverse-bg);
  box-shadow: var(--uc-shadow-control);
}
/* grey wash nudges black->lighter and white->darker, so hover reads on both */
:root .pr-button-solid.pr-button-solid.pr-button-neutral:hover:not(:disabled) {
  background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.16), rgba(128, 128, 128, 0.16));
}
:root .pr-button-solid.pr-button-solid.pr-button-neutral:active:not(:disabled) {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14));
}

/* ---- Variant: soft -------------------------------------------------------- */
:root .pr-button-soft.pr-button-soft {
  color: var(--_fg, var(--uc-brand-fg));
  background: var(--_soft, var(--uc-brand-soft));
  background-image: var(--uc-sheen);
  box-shadow: inset 0 0 0 1px var(--_border, var(--uc-brand-border)), var(--uc-shadow-1);
}
:root .pr-button-soft.pr-button-soft:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); }

/* ---- Variant: outline (raised secondary) ---------------------------------- */
:root .pr-button-outline.pr-button-outline {
  color: var(--_fg, var(--uc-brand-fg));
  background: var(--uc-surface-control);
  background-image: var(--uc-sheen);
  box-shadow: inset 0 0 0 1px var(--_border, var(--uc-border-subtle)), var(--uc-shadow-raised);
}
:root .pr-button-outline.pr-button-outline.pr-button-neutral { color: var(--uc-text-strong); }
:root .pr-button-outline.pr-button-outline:hover:not(:disabled) { background-image: var(--uc-sheen), linear-gradient(var(--_glow, var(--uc-brand-glow-hover)), var(--_glow, var(--uc-brand-glow-hover))); }

/* ---- Variant: ghost ------------------------------------------------------- */
:root .pr-button-ghost.pr-button-ghost {
  color: var(--_fg, var(--uc-brand-fg));
  background: transparent;
}
:root .pr-button-ghost.pr-button-ghost.pr-button-neutral { color: var(--uc-text); }
:root .pr-button-ghost.pr-button-ghost:hover:not(:disabled) { background: var(--_glow, var(--uc-brand-glow-hover)); color: var(--uc-text-strong); }

/* ---- Tones (feed the --_* channels the variants read) --------------------- */
:root .pr-button-brand.pr-button-brand   { --_fill: var(--uc-brand);   --_fg: var(--uc-brand-fg);   --_soft: var(--uc-brand-soft);   --_border: var(--uc-brand-border);   --_glow: var(--uc-brand-glow-hover);   --_shadow: var(--uc-shadow-control-brand); }
:root .pr-button-success.pr-button-success { --_fill: var(--uc-success); --_fg: var(--uc-success-fg); --_soft: var(--uc-success-soft); --_border: var(--uc-success-border); --_glow: var(--uc-success-glow-hover); --_shadow: var(--uc-shadow-control-brand); }
:root .pr-button-danger.pr-button-danger  { --_fill: var(--uc-danger);  --_fg: var(--uc-danger-fg);  --_soft: var(--uc-danger-soft);  --_border: var(--uc-danger-border);  --_glow: var(--uc-danger-glow-hover);  --_shadow: var(--uc-shadow-control-brand); }
:root .pr-button-neutral.pr-button-neutral {
  --_fg: var(--uc-text-strong);
  --_soft: var(--uc-surface-sunken);
  --_border: var(--uc-border-strong);
  --_glow: rgba(128, 128, 128, 0.12);
}

/* ---- Loading -------------------------------------------------------------- */
:root .pr-button-loading.pr-button-loading { color: transparent !important; pointer-events: none; }
:root .pr-button-spinner.pr-button-spinner {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: var(--uc-brand-on);
  animation: pr-spin 0.6s linear infinite;
}
:root .pr-button-soft.pr-button-soft .pr-button-spinner,:root  .pr-button-outline.pr-button-outline .pr-button-spinner,:root  .pr-button-ghost.pr-button-ghost .pr-button-spinner { color: var(--uc-text); }
:root .pr-button-solid.pr-button-solid.pr-button-neutral .pr-button-spinner { color: var(--uc-inverse-fg); }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* ---- Card ---- */
/* Card — raised surface container on uc- tokens. */
:root .pr-card.pr-card {
  background: var(--uc-surface-raised);
  border-radius: var(--uc-radius-lg);
  box-shadow: var(--uc-shadow-2);
  overflow: hidden;
}
:root .pr-card-interactive.pr-card-interactive {
  cursor: pointer;
  transition: box-shadow var(--uc-dur-base) var(--uc-ease-standard),
    transform var(--uc-dur-base) var(--uc-ease-standard);
}
:root .pr-card-interactive.pr-card-interactive:hover { box-shadow: var(--uc-shadow-4); transform: translateY(-2px); }

:root .pr-card-header.pr-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--uc-space-4);
  padding: var(--uc-space-20) var(--uc-space-20) 0;
}
:root .pr-card-title.pr-card-title { font-size: var(--uc-text-lg); font-weight: var(--uc-weight-semibold); color: var(--uc-text-strong); }
:root .pr-card-desc.pr-card-desc { font-size: var(--uc-text-base); color: var(--uc-text-muted); }
:root .pr-card-body.pr-card-body { padding: var(--uc-space-20); display: flex; flex-direction: column; gap: var(--uc-space-12); }
:root .pr-card-footer.pr-card-footer {
  display: flex;
  align-items: center;
  gap: var(--uc-space-12);
  padding: var(--uc-space-16) var(--uc-space-20);
  border-top: 1px solid var(--uc-border-subtle);
  background: var(--uc-surface-base);
}
:root .pr-card-media.pr-card-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--uc-surface-sunken); }

/* ---- Checkbox ---- */
/* Checkbox — Radix behavior, uc- token look. */
:root .pr-checkbox.pr-checkbox {
  all: unset;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: var(--uc-radius-xs);
  background: var(--uc-surface-overlay);
  box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--uc-dur-fast) var(--uc-ease-standard),
    box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
  flex: none;
}
:root .pr-checkbox.pr-checkbox:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--uc-text-subtle), var(--uc-shadow-input); }

/* sizes (md is the base above) */
:root .pr-checkbox-sm.pr-checkbox-sm { width: 16px; height: 16px; }
:root .pr-checkbox-sm.pr-checkbox-sm .pr-checkbox-indicator svg { width: 11px; height: 11px; }
:root .pr-checkbox-lg.pr-checkbox-lg { width: 22px; height: 22px; border-radius: var(--uc-radius-sm); }
:root .pr-checkbox-lg.pr-checkbox-lg .pr-checkbox-indicator svg { width: 15px; height: 15px; }
:root .pr-checkbox.pr-checkbox[data-state="checked"],:root 
.pr-checkbox.pr-checkbox[data-state="indeterminate"] {
  background: var(--uc-inverse-bg);
  box-shadow: var(--uc-shadow-control);
}
:root .pr-checkbox.pr-checkbox:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: 2px; }
:root .pr-checkbox.pr-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }

:root .pr-checkbox-indicator.pr-checkbox-indicator { display: grid; place-items: center; color: var(--uc-inverse-fg); }
:root .pr-checkbox-indicator.pr-checkbox-indicator svg { display: block; }

/* ---- Dialog ---- */
/* Dialog — Radix behavior, uc- token look. */
:root .pr-dialog-overlay.pr-dialog-overlay {
  position: fixed;
  inset: 0;
  background: oklch(20% 0.01 285 / 0.44);
  backdrop-filter: blur(2px);
  z-index: var(--uc-z-overlay);
  animation: pr-overlay-in var(--uc-dur-enter) var(--uc-ease-standard);
}
/* centers the dialog + hosts the outside close button */
:root .pr-dialog-positioner.pr-dialog-positioner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100vw - var(--uc-space-32)), 440px);
  z-index: var(--uc-z-dialog);
}
:root .pr-dialog-content.pr-dialog-content {
  position: relative;
  width: 100%;
  max-height: calc(100vh - var(--uc-space-48));
  overflow: auto;
  background: var(--uc-surface-base);      /* grey tray */
  border-radius: var(--uc-radius-xl);
  box-shadow: var(--uc-shadow-5);
  padding: var(--uc-space-4);
  animation: pr-dialog-in var(--uc-dur-enter) var(--uc-ease-emphasized);
}
/* white content card inside the tray — same radius as the dialog + full border */
:root .pr-dialog-card.pr-dialog-card {
  display: flex;
  flex-direction: column;
  gap: var(--uc-space-16);
  padding: var(--uc-space-24);           /* equal on all 4 sides */
  background: var(--uc-surface-raised);
  border-radius: var(--uc-radius-xl);
  border: 1px solid var(--uc-border);
  overflow: hidden;
}
/* close button sits just outside the dialog's top-right corner.
   Radix disables pointer-events on the body while the modal is open and only
   re-enables them on its own Content — this button lives outside that Content,
   so it must opt back in explicitly or hover/click fall through to the overlay. */
:root .pr-dialog-close-outside.pr-dialog-close-outside {
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: calc(100% + var(--uc-space-8));
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  background: var(--uc-surface-raised);
  color: var(--uc-text-strong);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-control);
  cursor: pointer;
  transition:
    background var(--uc-dur-fast) var(--uc-ease-standard),
    box-shadow var(--uc-dur-fast) var(--uc-ease-standard),
    transform var(--uc-dur-fast) var(--uc-ease-standard),
    color var(--uc-dur-fast) var(--uc-ease-standard);
}
:root .pr-dialog-close-outside.pr-dialog-close-outside:hover {
  background: var(--uc-surface-sunken);
  color: var(--uc-text-strong);
  box-shadow: var(--uc-shadow-raised);
}
:root .pr-dialog-close-outside.pr-dialog-close-outside:active {
  transform: translateY(1px);
  box-shadow: var(--uc-shadow-1);
}
:root .pr-dialog-close-outside.pr-dialog-close-outside:focus-visible {
  outline: 2px solid var(--uc-ring);
  outline-offset: 2px;
}
:root .pr-dialog-header.pr-dialog-header { display: flex; flex-direction: column; gap: var(--uc-space-4); }
:root .pr-dialog-title.pr-dialog-title { font-size: var(--uc-text-xl); font-weight: var(--uc-weight-semibold); color: var(--uc-text-strong); }
:root .pr-dialog-desc.pr-dialog-desc { font-size: var(--uc-text-base); color: var(--uc-text-muted); }
:root .pr-dialog-body.pr-dialog-body { min-width: 0; }
/* footer sits below the card on the grey tray */
:root .pr-dialog-footer.pr-dialog-footer {
  display: flex;
  justify-content: space-between;        /* secondary left, primary right */
  align-items: center;
  gap: var(--uc-space-16);
  padding: var(--uc-space-16);           /* equal on all 4 sides */
}

@keyframes pr-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-dialog-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---- Icon ---- */
:root .pr-icon.pr-icon{flex-shrink:0;display:block}
:root .pr-icon-sm.pr-icon-sm{width:var(--uc-icon-sm);height:var(--uc-icon-sm)}
:root .pr-icon-md.pr-icon-md{width:var(--uc-icon-md);height:var(--uc-icon-md)}
:root .pr-icon-lg.pr-icon-lg{width:var(--uc-icon-lg);height:var(--uc-icon-lg)}

/* ---- Input ---- */
/* Input — recessed field on uc- tokens. */
:root .pr-input-wrap.pr-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
:root .pr-input.pr-input {
  width: 100%;
  height: var(--uc-control-h-md);
  padding: 0 var(--uc-space-12);
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  color: var(--uc-text-strong);
  background: var(--uc-surface-overlay);
  background-image: linear-gradient(to bottom, oklch(0% 0 0 / 0.02), transparent);
  border: none;
  border-radius: var(--uc-radius-md);
  box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input);
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
  outline: none;
}
:root .pr-input.pr-input::placeholder { color: var(--uc-text-subtle); }
:root .pr-input.pr-input:hover:not(:disabled):not(:focus) { box-shadow: inset 0 0 0 1px var(--uc-text-subtle), var(--uc-shadow-input); }
:root .pr-input.pr-input:focus-visible {
  box-shadow: inset 0 0 0 1px var(--uc-brand), 0 0 0 3px var(--uc-brand-soft), var(--uc-shadow-input);
}
:root .pr-input.pr-input:disabled {
  color: var(--uc-text-subtle);
  background: var(--uc-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--uc-border);
  cursor: not-allowed;
}

:root .pr-input-sm.pr-input-sm { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); }
:root .pr-input-lg.pr-input-lg { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }

:root .pr-input-invalid.pr-input-invalid {
  box-shadow: inset 0 0 0 1px var(--uc-danger), var(--uc-shadow-input);
}
:root .pr-input-invalid.pr-input-invalid:focus-visible {
  box-shadow: inset 0 0 0 1px var(--uc-danger), 0 0 0 3px var(--uc-danger-soft), var(--uc-shadow-input);
}

/* icon adornments */
:root .pr-input-has-left.pr-input-has-left { padding-left: var(--uc-space-32); }
:root .pr-input-has-right.pr-input-has-right { padding-right: var(--uc-space-32); }
:root .pr-input-icon.pr-input-icon {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--uc-text-subtle);
  pointer-events: none;
}
:root .pr-input-icon-left.pr-input-icon-left { left: var(--uc-space-12); }
:root .pr-input-icon-right.pr-input-icon-right { right: var(--uc-space-12); }

/* field wrapper (label + hint) */
:root .pr-input-field.pr-input-field { display: flex; flex-direction: column; gap: var(--uc-space-8); width: 100%; }
:root .pr-input-label.pr-input-label { font-size: var(--uc-text-sm); font-weight: var(--uc-weight-medium); color: var(--uc-text-strong); }
:root .pr-input-hint.pr-input-hint { font-size: var(--uc-text-xs); color: var(--uc-text-muted); }
:root .pr-input-hint-error.pr-input-hint-error { color: var(--uc-danger-fg); }

/* ---- Menu ---- */
/* Menu — Radix dropdown-menu behavior, uc- token look. Always-dark popover
   with a sliding highlight that follows the active item. */
:root .pr-menu-content.pr-menu-content {
  position: relative;
  min-width: 200px;
  background: var(--uc-surface-overlay);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-4);
  padding: var(--uc-space-4);
  z-index: var(--uc-z-dropdown);
  animation: pr-menu-in var(--uc-dur-enter) var(--uc-ease-emphasized);
}
:root .pr-menu-highlight.pr-menu-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-control);
  /* transform is animated via the Web Animations API (see useSlidingHighlight);
     only width/height use a CSS transition. */
  transition: width var(--uc-dur-base) var(--uc-ease-emphasized),
    height var(--uc-dur-base) var(--uc-ease-emphasized);
  pointer-events: none;
  z-index: 0;
}
:root .pr-menu-item.pr-menu-item {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--uc-space-8);
  height: var(--uc-control-h-md);
  padding: 0 var(--uc-space-12);
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-text-base);
  color: var(--uc-text);
  cursor: pointer;
  user-select: none;
}
:root .pr-menu-item-sm.pr-menu-item-sm { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); }
:root .pr-menu-item-lg.pr-menu-item-lg { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }
:root .pr-menu-item.pr-menu-item[data-highlighted] { color: var(--uc-text-strong); }
:root .pr-menu-item.pr-menu-item[data-disabled] { color: var(--uc-text-subtle); pointer-events: none; }
:root .pr-menu-item-danger.pr-menu-item-danger { color: var(--uc-danger-fg); }
:root .pr-menu-item-danger.pr-menu-item-danger[data-highlighted] { color: var(--uc-danger-fg); }
:root .pr-menu-shortcut.pr-menu-shortcut { margin-left: auto; font-size: var(--uc-text-xs); color: var(--uc-text-subtle); font-family: var(--uc-font-mono); }
:root .pr-menu-label.pr-menu-label { padding: var(--uc-space-8) var(--uc-space-12) var(--uc-space-4); font-size: var(--uc-text-xs); font-weight: var(--uc-weight-medium); letter-spacing: var(--uc-tracking-wide); text-transform: uppercase; color: var(--uc-text-subtle); }
:root .pr-menu-separator.pr-menu-separator { height: 1px; background: var(--uc-border-subtle); margin: var(--uc-space-4) 0; }

@keyframes pr-menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- Pagination ---- */
/* Pagination — a row of DS Buttons on uc- tokens. */
:root .pr-pagination.pr-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--uc-space-6);
}
/* page numbers are square, like the icon-only prev / next */
:root .pr-pagination-page.pr-pagination-page { min-width: var(--_h, var(--uc-control-h-md)); justify-content: center; text-decoration: none; }
:root .pr-pagination-gap.pr-pagination-gap {
  min-width: var(--uc-control-h-sm);
  text-align: center;
  font-size: var(--uc-text-base);
  color: var(--uc-text-muted);
  user-select: none;
}

/* ---- Radio ---- */
/* Radio — Radix radio-group behavior, uc- token look. */
:root .pr-radio.pr-radio { display: flex; flex-direction: column; gap: var(--uc-space-12); }

:root .pr-radio-item.pr-radio-item {
  all: unset;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--uc-surface-overlay);
  box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--uc-dur-fast) var(--uc-ease-standard),
    box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
  flex: none;
}
:root .pr-radio-item.pr-radio-item:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--uc-text-subtle), var(--uc-shadow-input); }

/* sizes (md is the base above) */
:root .pr-radio-sm.pr-radio-sm { width: 16px; height: 16px; }
:root .pr-radio-sm.pr-radio-sm .pr-radio-indicator::after { width: 6px; height: 6px; }
:root .pr-radio-lg.pr-radio-lg { width: 22px; height: 22px; }
:root .pr-radio-lg.pr-radio-lg .pr-radio-indicator::after { width: 9px; height: 9px; }
:root .pr-radio-item.pr-radio-item[data-state="checked"] {
  background: var(--uc-inverse-bg);
  box-shadow: var(--uc-shadow-control);
}
:root .pr-radio-item.pr-radio-item:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: 2px; }
:root .pr-radio-item.pr-radio-item:disabled { opacity: 0.5; cursor: not-allowed; }

:root .pr-radio-indicator.pr-radio-indicator { display: grid; place-items: center; }
:root .pr-radio-indicator.pr-radio-indicator::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--uc-inverse-fg);
}

:root .pr-radio-row.pr-radio-row { display: flex; align-items: center; gap: var(--uc-space-12); }
:root .pr-radio-row-label.pr-radio-row-label { font-size: var(--uc-text-base); color: var(--uc-text); cursor: pointer; }

/* ---- Select ---- */
/* Select — Radix behavior, uc- token look. */
:root .pr-select-trigger.pr-select-trigger {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uc-space-8);
  height: var(--uc-control-h-md);
  min-width: 180px;
  padding: 0 var(--uc-space-12);
  font-size: var(--uc-text-base);
  color: var(--uc-text-strong);
  background: var(--uc-surface-control);
  background-image: var(--uc-sheen);
  border-radius: var(--uc-radius-md);
  box-shadow: inset 0 0 0 1px var(--uc-border-subtle), var(--uc-shadow-raised);
  cursor: pointer;
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
}
:root .pr-select-trigger.pr-select-trigger:hover:not(:focus-visible):not([data-state="open"]) { box-shadow: inset 0 0 0 1px var(--uc-text-subtle), var(--uc-shadow-raised); }
:root .pr-select-trigger.pr-select-trigger:focus-visible,:root 
.pr-select-trigger.pr-select-trigger[data-state="open"] {
  box-shadow: inset 0 0 0 1px var(--uc-brand), 0 0 0 3px var(--uc-brand-soft), var(--uc-shadow-raised);
}
:root .pr-select-trigger.pr-select-trigger[data-placeholder] { color: var(--uc-text-subtle); }
:root .pr-select-trigger.pr-select-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
:root .pr-select-chevron.pr-select-chevron { color: var(--uc-text-muted); flex: none; }

/* trigger sizes (md is the base above) */
:root .pr-select-sm.pr-select-sm { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); padding: 0 var(--uc-space-8); }
:root .pr-select-lg.pr-select-lg { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); padding: 0 var(--uc-space-16); }

:root .pr-select-content.pr-select-content {
  min-width: var(--radix-select-trigger-width);
  background: var(--uc-surface-overlay);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-4);
  padding: var(--uc-space-4);
  z-index: var(--uc-z-dropdown);
  overflow: hidden;
  animation: pr-select-in var(--uc-dur-enter) var(--uc-ease-emphasized);
}
:root .pr-select-viewport.pr-select-viewport { position: relative; }
:root .pr-select-highlight.pr-select-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-control);
  /* transform is animated via the Web Animations API (see useSlidingHighlight);
     only width/height use a CSS transition. */
  transition: width var(--uc-dur-base) var(--uc-ease-emphasized),
    height var(--uc-dur-base) var(--uc-ease-emphasized);
  pointer-events: none;
  z-index: 0;
}
:root .pr-select-item.pr-select-item {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: var(--uc-control-h-md);
  padding: 0 var(--uc-space-32) 0 var(--uc-space-12);
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-text-base);
  color: var(--uc-text);
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 1;
}
:root .pr-select-item-sm.pr-select-item-sm { height: var(--uc-control-h-sm); font-size: var(--uc-text-sm); }
:root .pr-select-item-lg.pr-select-item-lg { height: var(--uc-control-h-lg); font-size: var(--uc-text-md); }
:root .pr-select-item.pr-select-item[data-highlighted] { color: var(--uc-text-strong); }
:root .pr-select-item.pr-select-item[data-disabled] { color: var(--uc-text-subtle); pointer-events: none; }
:root .pr-select-indicator.pr-select-indicator { position: absolute; right: var(--uc-space-12); display: inline-flex; color: var(--uc-text-strong); }

@keyframes pr-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- SelectionCard ---- */
:root .pr-selection-card.pr-selection-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;width:100%;height:100%;padding:var(--uc-space-20);white-space:normal;text-align:left;border-radius:var(--uc-radius-lg);gap:0}
:root .pr-selection-card.pr-selection-card[aria-pressed="true"]{box-shadow:var(--uc-shadow-selected),var(--uc-shadow-raised)}
:root .pr-selection-card-top.pr-selection-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--uc-space-16);color:var(--uc-text-strong)}
:root .pr-selection-card-icon.pr-selection-card-icon{display:grid;place-items:center;width:var(--uc-space-36);height:var(--uc-space-36);border-radius:var(--uc-radius-md);background:var(--uc-surface-sunken)}
:root .pr-selection-card-title.pr-selection-card-title{font-size:var(--uc-text-md);font-weight:var(--uc-weight-semibold);line-height:var(--uc-leading-snug);letter-spacing:var(--uc-tracking-tight);color:var(--uc-text-strong)}
:root .pr-selection-card-description.pr-selection-card-description{margin-top:var(--uc-space-8);font-size:var(--uc-text-sm);font-weight:var(--uc-weight-regular);line-height:var(--uc-leading-normal);color:var(--uc-text-muted)}
@media(max-width:700px){:root .pr-selection-card.pr-selection-card{padding:var(--uc-space-16)}}
@media(prefers-reduced-motion:reduce){:root .pr-selection-card.pr-selection-card{transition:none;transform:none}}

/* ---- Switch ---- */
/* Switch — monochrome. Track = inverse fill (light on dark / dark on light),
   thumb = inverse foreground (dark on dark / light on light). OFF track is a
   dimmer version of ON; on/off also reads from thumb position. Radix behavior. */
:root .pr-switch.pr-switch {
  all: unset;
  box-sizing: border-box;
  width: 36px;
  height: 20px;
  border-radius: var(--uc-radius-pill);
  background: color-mix(in oklab, var(--uc-inverse-bg) 62%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  position: relative;
  cursor: pointer;
  transition: background var(--uc-dur-base) var(--uc-ease-standard);
  flex: none;
}
:root .pr-switch.pr-switch[data-state="checked"] {
  background: var(--uc-inverse-bg);
}
:root .pr-switch.pr-switch:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: 2px; }
:root .pr-switch.pr-switch:disabled { opacity: 0.5; cursor: not-allowed; }

:root .pr-switch-thumb.pr-switch-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--uc-inverse-fg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateX(2px);
  transition: transform var(--uc-dur-base) var(--uc-ease-emphasized);
  will-change: transform;
}
:root .pr-switch-thumb.pr-switch-thumb[data-state="checked"] { transform: translateX(18px); }

/* sizes (md is the base above) */
:root .pr-switch-sm.pr-switch-sm { width: 30px; height: 16px; }
:root .pr-switch-sm.pr-switch-sm .pr-switch-thumb { width: 12px; height: 12px; }
:root .pr-switch-sm.pr-switch-sm .pr-switch-thumb[data-state="checked"] { transform: translateX(16px); }
:root .pr-switch-lg.pr-switch-lg { width: 44px; height: 24px; }
:root .pr-switch-lg.pr-switch-lg .pr-switch-thumb { width: 20px; height: 20px; }
:root .pr-switch-lg.pr-switch-lg .pr-switch-thumb[data-state="checked"] { transform: translateX(22px); }

/* ---- Tabs ---- */
/* Tabs — Radix behavior, uc- token look. Two variants: pill and underline.
   The active marker is a single sliding indicator that animates between tabs. */
:root .pr-tabs.pr-tabs { display: flex; flex-direction: column; gap: var(--uc-space-16); }

/* ---- pill (segmented) ----------------------------------------------------- */
:root .pr-tabs-list-pill.pr-tabs-list-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--uc-surface-sunken);
  border-radius: var(--uc-radius-md);
  box-shadow: inset 0 0 0 1px var(--uc-border-subtle);
  width: max-content;
}
:root .pr-tabs-indicator-pill.pr-tabs-indicator-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  opacity: 0;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-surface-raised);
  background-image: var(--uc-sheen);
  box-shadow: var(--uc-shadow-control);
  transition: transform var(--uc-dur-base) var(--uc-ease-emphasized),
    width var(--uc-dur-base) var(--uc-ease-emphasized);
  z-index: 0;
  pointer-events: none;
}
:root .pr-tabs-trigger-pill.pr-tabs-trigger-pill {
  all: unset;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  height: 26px;
  padding: 0 var(--uc-space-12);
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-8);
  font-size: var(--uc-text-base);
  font-weight: var(--uc-weight-medium);
  color: var(--uc-text-muted);
  border-radius: var(--uc-radius-sm);
  cursor: pointer;
  transition: color var(--uc-dur-fast) var(--uc-ease-standard);
}
:root .pr-tabs-trigger-pill.pr-tabs-trigger-pill:hover { color: var(--uc-text-strong); }
:root .pr-tabs-trigger-pill.pr-tabs-trigger-pill[data-state="active"] { color: var(--uc-text-strong); }
:root .pr-tabs-trigger-pill.pr-tabs-trigger-pill:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: 2px; }
:root .pr-tabs-trigger-pill.pr-tabs-trigger-pill:disabled { opacity: 0.5; cursor: not-allowed; }
:root .pr-tabs-trigger-pill-sm.pr-tabs-trigger-pill-sm { height: 22px; padding: 0 var(--uc-space-8); font-size: var(--uc-text-sm); }
:root .pr-tabs-trigger-pill-lg.pr-tabs-trigger-pill-lg { height: 32px; padding: 0 var(--uc-space-16); font-size: var(--uc-text-md); }

/* ---- underline ------------------------------------------------------------ */
:root .pr-tabs-list-line.pr-tabs-list-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-20);
  border-bottom: 1px solid var(--uc-border);
}
:root .pr-tabs-indicator-line.pr-tabs-indicator-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  opacity: 0;
  border-radius: 2px;
  background: var(--uc-brand);
  transition: transform var(--uc-dur-base) var(--uc-ease-emphasized),
    width var(--uc-dur-base) var(--uc-ease-emphasized);
  pointer-events: none;
}
:root .pr-tabs-trigger-line.pr-tabs-trigger-line {
  all: unset;
  box-sizing: border-box;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: var(--uc-space-8);
  font-size: var(--uc-text-base);
  font-weight: var(--uc-weight-medium);
  color: var(--uc-text-muted);
  cursor: pointer;
  transition: color var(--uc-dur-fast) var(--uc-ease-standard);
}
:root .pr-tabs-trigger-line.pr-tabs-trigger-line:hover { color: var(--uc-text-strong); }
:root .pr-tabs-trigger-line.pr-tabs-trigger-line[data-state="active"] { color: var(--uc-brand-fg); }
:root .pr-tabs-trigger-line.pr-tabs-trigger-line:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: 2px; }
:root .pr-tabs-trigger-line.pr-tabs-trigger-line:disabled { opacity: 0.5; cursor: not-allowed; }
:root .pr-tabs-trigger-line-sm.pr-tabs-trigger-line-sm { height: 30px; font-size: var(--uc-text-sm); }
:root .pr-tabs-trigger-line-lg.pr-tabs-trigger-line-lg { height: 40px; font-size: var(--uc-text-md); }

:root .pr-tabs-content.pr-tabs-content:focus-visible { outline: none; }

/* ---- Textarea ---- */
/* Textarea — recessed multiline field on uc- tokens. */
:root .pr-textarea.pr-textarea {
  width: 100%;
  min-height: 84px;
  padding: var(--uc-space-8) var(--uc-space-12);
  font-family: var(--uc-font-sans);
  font-size: var(--uc-text-base);
  line-height: var(--uc-leading-normal);
  color: var(--uc-text-strong);
  background: var(--uc-surface-overlay);
  background-image: linear-gradient(to bottom, oklch(0% 0 0 / 0.02), transparent);
  border: none;
  border-radius: var(--uc-radius-md);
  box-shadow: inset 0 0 0 1px var(--uc-border-strong), var(--uc-shadow-input);
  transition: box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
  outline: none;
  resize: vertical;
}
:root .pr-textarea-sm.pr-textarea-sm { min-height: 64px; padding: var(--uc-space-6) var(--uc-space-8); font-size: var(--uc-text-sm); }
:root .pr-textarea-lg.pr-textarea-lg { min-height: 104px; padding: var(--uc-space-10) var(--uc-space-16); font-size: var(--uc-text-md); }
:root .pr-textarea.pr-textarea::placeholder { color: var(--uc-text-subtle); }
:root .pr-textarea.pr-textarea:hover:not(:disabled):not(:focus) { box-shadow: inset 0 0 0 1px var(--uc-text-subtle), var(--uc-shadow-input); }
:root .pr-textarea.pr-textarea:focus-visible {
  box-shadow: inset 0 0 0 1px var(--uc-brand), 0 0 0 3px var(--uc-brand-soft), var(--uc-shadow-input);
}
:root .pr-textarea.pr-textarea:disabled {
  color: var(--uc-text-subtle);
  background: var(--uc-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--uc-border);
  cursor: not-allowed;
}
:root .pr-textarea-invalid.pr-textarea-invalid { box-shadow: inset 0 0 0 1px var(--uc-danger), var(--uc-shadow-input); }
:root .pr-textarea-invalid.pr-textarea-invalid:focus-visible {
  box-shadow: inset 0 0 0 1px var(--uc-danger), 0 0 0 3px var(--uc-danger-soft), var(--uc-shadow-input);
}

/* ---- Toast ---- */
/* Toast — the SproutOS toast layout, rebuilt on uc- tokens. A light-grey outer
   tray wraps a white card (icon + title/description + Close), with an optional
   live "closes in N sec" countdown footer. Built on Sonner (see Toast.tsx). */

/* light-grey outer tray */
:root .pr-toast.pr-toast {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--uc-radius-xl);
  background: var(--uc-surface-sunken);
  padding: var(--uc-space-4) var(--uc-space-4) 0;   /* top / left / right = 4px */
  box-shadow: var(--uc-shadow-4);
}
/* no countdown → the tray supplies its own bottom inset */
:root .pr-toast-tray-flush.pr-toast-tray-flush { padding-bottom: var(--uc-space-4); }

/* white inner card */
:root .pr-toast-card.pr-toast-card {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: var(--uc-space-12);
  border-radius: var(--uc-radius-xl);
  border: 1px solid var(--uc-border-subtle);
  background: var(--uc-surface-raised);
  padding: var(--uc-space-16);
}
:root .pr-toast-main.pr-toast-main {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  gap: var(--uc-space-12);
}

:root .pr-toast-icon.pr-toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
:root .pr-toast-icon.pr-toast-icon svg { width: 24px; height: 24px; display: block; }
:root .pr-toast-icon-success.pr-toast-icon-success { color: var(--uc-success); }
:root .pr-toast-icon-danger.pr-toast-icon-danger { color: var(--uc-danger); }
:root .pr-toast-icon-info.pr-toast-icon-info,:root 
.pr-toast-icon-loading.pr-toast-icon-loading { color: var(--uc-text-strong); }
:root .pr-toast-spin.pr-toast-spin { animation: pr-toast-spin 0.6s linear infinite; }

:root .pr-toast-text.pr-toast-text {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: var(--uc-space-4);
}
:root .pr-toast-title.pr-toast-title {
  font-size: var(--uc-text-base);
  line-height: 20px;
  font-weight: var(--uc-weight-medium);
  color: var(--uc-text-strong);
  word-break: break-word;
}
:root .pr-toast-desc.pr-toast-desc {
  font-size: var(--uc-text-base);
  line-height: 20px;
  color: var(--uc-text-muted);
  word-break: break-word;
}

:root .pr-toast-close.pr-toast-close {
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--uc-radius-sm);
  border: 1px solid var(--uc-border-subtle);
  background: var(--uc-surface-raised);
  padding: 3px var(--uc-space-8);
  font-size: var(--uc-text-xs);
  line-height: 16px;
  color: var(--uc-text-strong);
  cursor: pointer;
  box-shadow: var(--uc-shadow-raised);
  transition:
    background var(--uc-dur-fast) var(--uc-ease-standard),
    box-shadow var(--uc-dur-fast) var(--uc-ease-standard);
}
:root .pr-toast-close.pr-toast-close:hover { background: var(--uc-surface-sunken); }
:root .pr-toast-close.pr-toast-close:active { box-shadow: var(--uc-shadow-1); }
:root .pr-toast-close.pr-toast-close:focus-visible { outline: 2px solid var(--uc-ring); outline-offset: 2px; }

:root .pr-toast-footer.pr-toast-footer {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--uc-space-12) var(--uc-space-16);   /* 12px above & below the countdown */
}
:root .pr-toast-countdown.pr-toast-countdown {
  font-size: var(--uc-text-base);
  line-height: 20px;
  color: var(--uc-text-muted);
  text-align: center;
}
:root .pr-toast-count-sec.pr-toast-count-sec { color: var(--uc-danger-fg); }

/* Sonner container: our card owns the look, we only set its width. */
:root .pr-toast-sonner-toast.pr-toast-sonner-toast {
  width: 426px;
  max-width: calc(100vw - var(--uc-space-32));
}

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

/* ---- Tooltip ---- */
/* Tooltip — Radix behavior, uc- token look. */
:root .pr-tooltip.pr-tooltip {
  background: var(--uc-text-strong);
  color: var(--uc-text-inverse);
  padding: var(--uc-space-5) var(--uc-space-12);
  border-radius: var(--uc-radius-sm);
  font-size: var(--uc-text-xs);
  font-weight: var(--uc-weight-medium);
  line-height: var(--uc-leading-tight);
  max-width: 240px;
  box-shadow: var(--uc-shadow-4);
  user-select: none;
  z-index: var(--uc-z-tooltip);
  animation: pr-tip-in var(--uc-dur-enter) var(--uc-ease-emphasized);
}
:root .pr-tooltip-arrow.pr-tooltip-arrow { fill: var(--uc-text-strong); }

@keyframes pr-tip-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}