/* ============================================================
   UISTASH DESIGN SYSTEM
   Authoritative design tokens and shared component contracts.

   Rules:
   - Reusable design decisions live in this token section.
   - One-off construction geometry stays local to its component.
   - Components consume semantic tokens, never palette primitives.
   - Square geometry is the default. Pills are reserved for counters.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Typography */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", Menlo, monospace;
  --font-display: "Geist Pixel", var(--font-mono);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --text-micro: 0.625rem;
  --text-caption: 0.6875rem;
  --text-label: 0.75rem;
  --text-body-compact: 0.8125rem;
  --text-body: 0.875rem;
  --text-title-sm: 1rem;
  --text-title-md: 1.25rem;
  --text-title-lg: 1.5rem;
  --text-display: 2rem;
  --line-none: 0;
  --line-solid: 1;
  --line-tight: 1.12;
  --line-heading: 1.15;
  --line-snug: 1.2;
  --line-ui: 1.25;
  --line-control: 1.3;
  --line-copy-tight: 1.35;
  --line-copy: 1.4;
  --line-copy-open: 1.45;
  --line-body: 1.5;
  --line-body-open: 1.55;
  --tracking-tightest: -0.03em;
  --tracking-tighter: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-none: 0;
  --tracking-hairline: 0.01em;
  --tracking-ui: 0.02em;
  --tracking-ui-plus: 0.025em;
  --tracking-copy: 0.03em;
  --tracking-label: 0.04em;
  --tracking-label-plus: 0.05em;
  --tracking-machine: 0.06em;
  --tracking-machine-plus: 0.07em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.09em;
  --tracking-widest: 0.1em;
  --tracking-display: 0.14em;

  /* Spacing */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;

  /* Fluid and content-relative measures */
  --measure-42: 42ch;
  --measure-54: 54ch;
  --measure-58: 58ch;
  --measure-70: 70ch;
  --measure-72: 72ch;
  --measure-content: 920px;
  --measure-content-wide: 1100px;
  --viewport-height-full: 100vh;
  --viewport-height-dynamic: 100dvh;
  --viewport-width-full: 100vw;

  /* Transform geometry */
  --angle-neg-diagonal: -45deg;
  --angle-diagonal: 45deg;
  --angle-quarter-turn: 90deg;
  --angle-three-eighths: 135deg;
  --angle-chevron-open: 225deg;
  --angle-full-turn: 360deg;

  /* Sizing */
  --size-hairline: 1px;
  --size-stroke-strong: var(--size-hairline);
  --size-stroke-emphasis: var(--size-hairline);
  --size-focus-ring: var(--size-hairline);
  --size-control-xs: 24px;
  --size-control-swatch: 24px;
  --size-control-swatch-toolbar: 28px;
  --size-control-sm: 28px;
  --size-control-md: 32px;
  --size-control-field: 34px;
  --size-control-lg: 40px;
  --size-touch: 44px;
  --size-icon-lg: 16px;
  --size-engine-logo-sm: 12px;
  --size-engine-logo-md: 14px;
  --size-engine-logo-lg: 16px;
  --size-engine-logo-xl: 18px;
  --size-engine-box-sm: 16px;
  --size-engine-box-md: 18px;
  --size-engine-box-lg: 20px;
  --size-engine-box-xl: 22px;
  --size-scrollbar: 10px;
  --size-switch-width: 36px;
  --size-switch-height: 24px;
  --size-switch-thumb: 16px;
  --size-switch-inset: 3px;
  --size-switch-travel: 12px;
  --size-sidebar: 188px;
  --size-card-min: 300px;
  /* Preferred card width as % of the library grid (window-flexible). */
  --card-size-pct: 18;
  --card-size-floor: 180px;
  --card-size-ceiling: 480px;
  /* Density stops chosen at actual grid-column breakpoints. */
  --card-snap-values: 14 18 22 28 40;
  /* Legacy px snaps (migration only). */
  --card-snap-values-px: 240px 260px 280px 300px 320px 340px 360px 380px 400px 420px;
  --size-pin-action: 148px;
  --size-toolbar-actions: 360px;
  --size-motion-drawer: 280px;
  --size-panel-reserved: 312px;
  --size-native-window-controls: 78px;

  /* State strengths */
  --opacity-0: 0;
  --opacity-25: 0.25;
  --opacity-35: 0.35;
  --opacity-40: 0.4;
  --opacity-45: 0.45;
  --opacity-50: 0.5;
  --opacity-55: 0.55;
  --opacity-70: 0.7;
  --opacity-72: 0.72;
  --opacity-75: 0.75;
  --opacity-85: 0.85;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  --opacity-disabled: var(--opacity-45);
  --strength-selected: 12%;
  --strength-switch: 18%;
  --scale-press: 0.97;
  --scale-press-subtle: 0.995;

  /* Color-mix strengths shared by composed states. */
  --mix-1: 1%;
  --mix-2: 2%;
  --mix-3: 3%;
  --mix-4: 4%;
  --mix-6: 6%;
  --mix-7: 7%;
  --mix-8: 8%;
  --mix-9: 9%;
  --mix-10: 10%;
  --mix-11: 11%;
  --mix-12: 12%;
  --mix-13: 13%;
  --mix-14: 14%;
  --mix-15: 15%;
  --mix-16: 16%;
  --mix-18: 18%;
  --mix-22: 22%;
  --mix-24: 24%;
  --mix-28: 28%;
  --mix-30: 30%;
  --mix-32: 32%;
  --mix-35: 35%;
  --mix-40: 40%;
  --mix-45: 45%;
  --mix-48: 48%;
  --mix-50: 50%;
  --mix-52: 52%;
  --mix-55: 55%;
  --mix-58: 58%;
  --mix-60: 60%;
  --mix-62: 62%;
  --mix-65: 65%;
  --mix-70: 70%;
  --mix-72: 72%;
  --mix-80: 80%;
  --mix-82: 82%;
  --mix-85: 85%;
  --mix-86: 86%;
  --mix-88: 88%;
  --mix-90: 90%;
  --mix-94: 94%;
  --mix-92: 92%;

  /* Shape */
  --radius-none: 0;
  --radius-full: 999px;
  --radius-comment: var(--radius-full) var(--radius-full) var(--radius-full) var(--space-4);

  /* Motion */
  --duration-instant: 100ms;
  --duration-nudge: 110ms;
  --duration-fast: 120ms;
  --duration-quick: 140ms;
  --duration-fade: 150ms;
  --duration-standard: 160ms;
  --duration-enter: 180ms;
  --duration-response: 200ms;
  --duration-pop: 260ms;
  --duration-expand: 280ms;
  --duration-settle: 360ms;
  --duration-loading: 700ms;
  --duration-attention: 820ms;
  --duration-pulse: 900ms;
  --duration-shimmer: 1.2s;
  --duration-ambient: 1.4s;
  --duration-scan: 1.5s;
  --duration-long: 1.6s;
  --duration-breathe: 2.2s;
  --ease-default: ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-standard: var(--ease-out);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-stepped: steps(3, end);
  --ease-linear: linear;

  /* Layers */
  --layer-base: 0;
  --layer-content: 1;
  --layer-raised: 2;
  --layer-control: 3;
  --layer-chrome: 4;
  --layer-float: 5;
  --layer-marker: 6;
  --layer-highlight: 7;
  --layer-menu-local: 8;
  --layer-popover: 40;
  --layer-dropdown: 50;
  --layer-picker: 60;
  --layer-overlay: 70;
  --layer-status-region: 85;
  --layer-modal: 90;
  --layer-modal-front: 94;
  --layer-modal-top: 95;
  --layer-modal-picker: 96;
  --layer-toast: 100;
  --layer-tooltip: 110;

  /* Palette primitives */
  --palette-black: #000000;
  --palette-white: #ffffff;
  --palette-neutral-950: #0a0a0b;
  --palette-neutral-900: #101012;
  --palette-neutral-800: #1b1e24;
  --palette-neutral-600: #5f636c;
  --palette-neutral-500: #8a8a90;
  --palette-neutral-100: #f2f2f4;
  --palette-neutral-50: #f5f5f7;
  --palette-blue: #0048ff;
  --palette-green: #10f73e;
  --palette-pink: #f801fc;
  --palette-yellow: #f5c518;
  --palette-cyan: #00d4ff;
  --palette-danger: #f26b6b;

  /* Semantic colors: dark */
  --color-canvas-deep: color-mix(in srgb, var(--palette-black) var(--mix-40), var(--palette-neutral-950));
  --color-canvas: var(--palette-neutral-950);
  --color-surface: var(--palette-neutral-900);
  --color-surface-hover: color-mix(in srgb, var(--color-text) var(--mix-1), var(--color-surface));
  --color-surface-active: color-mix(in srgb, var(--color-text) var(--mix-3), var(--color-surface));
  --color-line-subtle: color-mix(in srgb, var(--color-text-muted) var(--mix-13), var(--color-surface));
  --color-line: color-mix(in srgb, var(--color-text-muted) var(--mix-24), var(--color-surface));
  --color-line-focus: color-mix(in srgb, var(--color-text-muted) var(--mix-40), var(--color-surface));
  --color-text: var(--palette-neutral-100);
  --color-text-muted: var(--palette-neutral-500);
  --color-text-faint: var(--color-text-muted);
  --color-text-inverse: var(--palette-white);
  --color-text-on-bright: var(--palette-black);
  --color-overlay: color-mix(in srgb, var(--palette-black) var(--mix-94), transparent);
  --color-checker-a: color-mix(in srgb, var(--color-text-muted) var(--mix-18), var(--color-surface));
  --color-checker-b: color-mix(in srgb, var(--color-text-muted) var(--mix-28), var(--color-surface));
  --color-stage-dark: var(--palette-black);
  --color-stage-light: var(--palette-white);

  /* Semantic accents */
  --color-accent-library: var(--palette-blue);
  --color-accent-imports: var(--palette-green);
  --color-accent-lab: var(--palette-pink);
  --color-accent-insights: var(--palette-yellow);
  --color-accent-brand: var(--color-accent-library);
  --color-accent-brand-ink: var(--palette-white);
  --color-accent-success: var(--color-accent-imports);
  --color-accent-danger: var(--palette-danger);
  --color-accent-comment: var(--color-accent-insights);
  --color-accent-comment-hover: color-mix(in srgb, var(--color-accent-comment) var(--mix-82), var(--palette-white));
  --color-accent-inspect: var(--color-accent-library);
  --color-accent-motion: var(--color-accent-lab);
  --color-accent-brand-text: var(--color-accent-brand);
  --color-accent-success-text: var(--color-accent-success);
  --color-accent-danger-text: var(--color-accent-danger);
  --color-accent-comment-text: var(--color-accent-comment);
  --color-accent-inspect-text: var(--color-accent-inspect);
  --color-accent-motion-text: var(--color-accent-motion);

  /* Effects */
  --shadow-popover: 0 12px 40px color-mix(in srgb, var(--palette-black) var(--mix-60), transparent);
  --shadow-dropdown: 0 12px 32px color-mix(in srgb, var(--palette-black) var(--mix-45), transparent);
  --shadow-preview: 0 18px 48px color-mix(in srgb, var(--palette-black) var(--mix-28), transparent);
  --shadow-preview-ring: 0 0 0 var(--size-hairline) color-mix(in srgb, var(--color-text) 4%, transparent);
  --shadow-none: none;
  --gradient-vibe: linear-gradient(90deg, var(--color-accent-library), var(--color-accent-imports), var(--color-accent-insights), var(--color-accent-lab), var(--color-accent-library));

  /* Component roles */
  --control-font: var(--font-sans);
  --control-font-size: var(--text-label);
  --control-font-weight: var(--font-weight-medium);
  --control-line-height: var(--line-ui);
  --control-height: var(--size-control-md);
  --control-padding-inline: var(--space-12);
  --control-gap: var(--space-6);
  --control-border: var(--color-line);
  --control-background: var(--color-surface);
  --control-background-hover: var(--color-surface-active);
  --control-text: var(--color-text);
  --dialog-background: var(--color-canvas);

  /* Application layout */
  --app-window-top: 12px;
  --app-row-height: var(--size-touch);
  --app-card-min: clamp(
    var(--card-size-floor),
    calc(var(--card-size-pct) * 1%),
    var(--card-size-ceiling)
  );

  /* Legacy layout aliases. Color consumers use semantic roles directly. */
  --shadow: var(--shadow-popover);
  --mono: var(--font-mono);
  --page-title: var(--font-display);
  --card-min: var(--app-card-min);
  --scroll-size: var(--size-scrollbar);
  --sh-top: var(--app-window-top);
  --sh-chrome-row: var(--app-row-height);
  --sh-sidebar-w: var(--size-sidebar);
  --sh-pin-action-w: var(--size-pin-action);
  /* Right pin column: vibe + sort (hairline between), matches New folder. */
  --sh-pin-actions-w: calc((var(--sh-pin-action-w) * 2) + var(--size-hairline));
  --sh-toolbar-actions-w: var(--size-toolbar-actions);
  /* Full right pin including leading chrome rule — inspector shares this edge. */
  --sh-pin-col-w: calc(var(--sh-pin-actions-w) + var(--size-hairline));
  /* Shared left inset: title, first folder label, search text, grid cards. */
  --sh-content-inset: var(--space-16);
  /* Toasts sit just right of the navigation sidebar. */
  --toast-rail-offset: var(--sh-sidebar-w);
  --toast-inset-left: calc(var(--toast-rail-offset) + var(--space-12));
  --toast-inset-bottom: max(var(--space-16), env(safe-area-inset-bottom, 0px));
  --toast-max-width: min(28rem, calc(100vw - var(--toast-rail-offset) - var(--space-32)));
  --mo-height: var(--size-motion-drawer);
}

html:not([data-shell="1"]) {
  --toast-rail-offset: 0px;
}

:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — cooler neutrals so white panels lift off the chrome. */
  --color-canvas-deep: #e2e3e8;
  --color-canvas: #ececf0;
  --color-surface: var(--palette-white);
  --color-surface-hover: color-mix(in srgb, var(--color-text) var(--mix-6), var(--color-surface));
  --color-surface-active: color-mix(in srgb, var(--color-text) var(--mix-10), var(--color-surface));

  /* Lines — higher mix so hairlines remain visible on light (~3:1 UI). */
  --color-line-subtle: color-mix(in srgb, var(--color-text) var(--mix-18), var(--color-canvas));
  --color-line: color-mix(in srgb, var(--color-text) var(--mix-32), var(--color-canvas));
  --color-line-focus: color-mix(in srgb, var(--color-text) var(--mix-58), var(--color-canvas));

  /* Text — darker body + secondary for WCAG AA on canvas/surface. */
  --color-text: #12141a;
  --color-text-muted: #4a4e57;
  --color-text-faint: #5c6069;
  --color-overlay: color-mix(in srgb, var(--palette-black) var(--mix-48), transparent);
  --color-checker-a: color-mix(in srgb, var(--color-text-muted) var(--mix-16), var(--color-canvas));
  --color-checker-b: var(--color-surface);

  /*
   * Accent *fills* stay brand-bright (rail, primary buttons).
   * Accent *text* is darkened so neon green / yellow / pink stay readable on light.
   */
  --color-accent-brand-text: color-mix(in srgb, var(--color-accent-brand) var(--mix-62), var(--palette-black));
  --color-accent-success-text: color-mix(in srgb, var(--color-accent-success) var(--mix-48), var(--palette-black));
  --color-accent-danger-text: color-mix(in srgb, var(--color-accent-danger) var(--mix-70), var(--palette-black));
  --color-accent-comment-text: color-mix(in srgb, var(--color-accent-comment) var(--mix-42), var(--palette-black));
  --color-accent-inspect-text: color-mix(in srgb, var(--color-accent-inspect) var(--mix-62), var(--palette-black));
  --color-accent-motion-text: color-mix(in srgb, var(--color-accent-motion) var(--mix-52), var(--palette-black));

  --shadow-popover: 0 12px 40px color-mix(in srgb, var(--palette-black) var(--mix-18), transparent);
  --shadow-dropdown: 0 12px 32px color-mix(in srgb, var(--palette-black) var(--mix-14), transparent);
  --shadow-preview: 0 18px 48px color-mix(in srgb, var(--palette-black) var(--mix-12), transparent);
  --shadow-preview-ring: 0 0 0 var(--size-hairline) color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* Queue is infrastructure, not a feature — monochrome chrome (white↔black).
   Keep --color-accent-imports green for progress/success status only. */
body.imports-open {
  --color-accent-brand: var(--color-text);
  --color-accent-brand-ink: var(--color-canvas);
  --color-accent-brand-text: var(--color-text);
}

body.styles-open,
body.insights-open {
  --color-accent-brand: var(--color-accent-insights);
  --color-accent-brand-ink: var(--palette-black);
}

/* Global control inheritance and focus contract */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button:not(:disabled),
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled) {
  cursor: pointer;
}

.ui-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--size-focus-ring) solid var(--color-text);
  outline-offset: var(--space-2);
}

.ui-visually-hidden {
  position: absolute;
  width: var(--size-hairline);
  height: var(--size-hairline);
  padding: var(--space-0);
  margin: calc(var(--size-hairline) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Button */
.ui-button {
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  padding: var(--space-0) var(--control-padding-inline);
  border: var(--size-hairline) solid var(--control-border);
  border-radius: var(--radius-none);
  background: var(--control-background);
  color: var(--control-text);
  font-family: var(--control-font);
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  line-height: var(--control-line-height);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-standard) var(--ease-out);
}

.ui-button:active:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-surface-active);
  transform: scale(var(--scale-press));
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-button[aria-busy="true"] {
  opacity: var(--opacity-70);
  cursor: progress;
  pointer-events: none;
}

.ui-button[data-ui-variant="primary"] {
  border-color: var(--color-accent-brand);
  background: var(--color-accent-brand);
  color: var(--color-accent-brand-ink);
}

.ui-button[data-ui-variant="ghost"] {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-muted);
}

.ui-button[data-ui-variant="danger"] {
  border-color: var(--color-accent-danger);
  background: transparent;
  color: var(--color-accent-danger-text);
}

.ui-button[data-ui-variant="primary"]:active:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-brand) var(--mix-82), var(--color-canvas-deep));
}

.ui-button[data-ui-size="compact"] {
  min-height: var(--size-control-sm);
  padding-inline: var(--space-8);
  font-size: var(--text-caption);
}

.ui-button[data-ui-size="large"] {
  min-height: var(--size-control-field);
  padding-inline: var(--space-16);
}

/* Icon button */
.ui-icon-button {
  width: var(--size-touch);
  height: var(--size-touch);
  min-width: var(--size-touch);
  min-height: var(--size-touch);
  display: inline-grid;
  place-items: center;
  padding: var(--space-0);
  border: var(--size-hairline) solid transparent;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-text-muted);
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-standard) var(--ease-out);
}

.ui-icon-button:active:not(:disabled) {
  background: var(--color-surface-active);
  transform: scale(var(--scale-press));
}

.ui-icon-button:disabled,
.ui-icon-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-icon-button[data-ui-size="compact"] {
  width: var(--size-control-sm);
  height: var(--size-control-sm);
  min-width: var(--size-control-sm);
  min-height: var(--size-control-sm);
  border-color: var(--color-line-subtle);
}

.ui-icon-button svg {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}

/* Compact choices, row actions, and interactive cards */
.ui-choice {
  min-height: var(--size-control-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding-inline: var(--space-8);
  border: var(--size-hairline) solid var(--control-border);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--control-font);
  font-size: var(--text-caption);
  line-height: var(--line-ui);
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-choice[aria-pressed="true"],
.ui-choice[aria-selected="true"],
.ui-choice.on,
.ui-choice.selected {
  border-color: var(--color-accent-brand);
  background: color-mix(in srgb, var(--color-accent-brand) var(--strength-selected), transparent);
  color: var(--color-accent-brand-text);
}

.ui-choice:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-choice:disabled,
.ui-choice[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-row-button {
  width: 100%;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-row-button:active:not(:disabled) {
  transform: scale(var(--scale-press-subtle));
}

.ui-row-button:disabled,
.ui-row-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-select-trigger {
  width: 100%;
  min-height: var(--size-touch);
  display: flex;
  align-items: center;
  padding: var(--space-0);
  border: var(--size-hairline) solid var(--control-border);
  border-radius: var(--radius-none);
  background: var(--color-canvas-deep);
  color: var(--control-text);
  font: inherit;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-select-trigger[aria-expanded="true"] {
  border-color: var(--color-line-focus);
}

.ui-select-trigger:active:not(:disabled) {
  transform: scale(var(--scale-press-subtle));
}

.ui-option {
  width: 100%;
  min-height: var(--size-control-field);
  display: flex;
  align-items: center;
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--control-text);
  font: inherit;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default);
}

.ui-option[aria-selected="true"]:not(.eng-select-option),
.ui-option.is-active:not(.eng-select-option) {
  background: color-mix(in srgb, var(--color-accent-brand) var(--strength-selected), var(--color-canvas-deep));
  color: var(--color-text);
}

.ui-option:disabled,
.ui-option[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-listbox {
  color: inherit;
}

.ui-listbox[data-ui-surface="popover"] {
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-surface);
  box-shadow: var(--shadow-dropdown);
  color: var(--color-text);
}

.ui-card-button {
  width: 100%;
  display: block;
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-card-button:active:not(:disabled) {
  transform: scale(var(--scale-press-subtle));
}

.ui-card-button:disabled,
.ui-card-button[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-color-swatch {
  width: var(--size-control-swatch);
  height: var(--size-control-swatch);
  min-width: var(--size-control-swatch);
  padding: var(--space-0);
  border: var(--size-hairline) solid var(--color-line);
  border-radius: var(--radius-none);
  background: var(--sw, transparent);
  transition:
    box-shadow var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-color-swatch:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-color-swatch:disabled {
  opacity: var(--opacity-disabled);
  cursor: default;
}

.ui-color-swatch[aria-pressed="true"],
.ui-color-swatch.active,
.ui-color-swatch.current {
  outline: var(--size-focus-ring) solid var(--color-accent-brand);
  outline-offset: var(--space-2);
}

.ui-color-swatch[data-ui-size="toolbar"] {
  width: var(--size-control-swatch-toolbar);
  height: var(--size-touch);
  min-width: var(--size-control-swatch-toolbar);
}

.ui-switch-field {
  min-height: var(--size-touch);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding-inline: var(--space-12);
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-text-muted);
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-switch-field:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-resize-handle {
  padding: var(--space-0);
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
}

.ui-range-tick {
  padding: var(--space-0);
  border: 0;
  border-radius: var(--radius-none);
  background: transparent;
}

.ui-range {
  touch-action: none;
}

.ui-range[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.ui-file-input,
.ui-color-input {
  font: inherit;
  color: inherit;
}

.ui-file-input::file-selector-button {
  min-height: var(--size-control-sm);
  padding-inline: var(--space-8);
  border: var(--size-hairline) solid var(--control-border);
  border-radius: var(--radius-none);
  background: var(--control-background);
  color: var(--control-text);
  font: inherit;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-marker-button {
  display: grid;
  place-items: center;
  padding: var(--space-0);
  border: var(--size-hairline) solid currentColor;
  border-radius: var(--radius-none);
  font: inherit;
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-marker-button:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

/* Switch */
.ui-switch {
  position: relative;
  flex: 0 0 auto;
  width: var(--size-switch-width);
  height: var(--size-switch-height);
  padding: var(--space-0);
  border: var(--size-hairline) solid var(--color-line);
  border-radius: var(--radius-none);
  background: var(--color-canvas-deep);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-standard) var(--ease-out);
}

.ui-switch::after {
  content: "";
  position: absolute;
  inset: calc((var(--size-touch) - var(--size-switch-height)) / -2)
    calc((var(--size-touch) - var(--size-switch-width)) / -2);
}

.ui-switch:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-switch:disabled,
.ui-switch[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

.ui-switch > i {
  position: absolute;
  top: var(--size-switch-inset);
  left: var(--size-switch-inset);
  width: var(--size-switch-thumb);
  height: var(--size-switch-thumb);
  border-radius: var(--radius-none);
  background: var(--color-text-muted);
  transition:
    transform var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.ui-switch[aria-checked="true"],
.ui-switch.on {
  border-color: var(--color-accent-brand);
  background: color-mix(in srgb, var(--color-accent-brand) var(--strength-switch), transparent);
}

.ui-switch[aria-checked="true"] > i,
.ui-switch.on > i {
  transform: translateX(var(--size-switch-travel));
  background: var(--color-accent-brand);
}

/* Segmented control and tabs */
.ui-segmented {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-0);
  padding: var(--space-0);
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-canvas-deep);
}

.ui-segmented > .ui-button {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.ui-segmented > .ui-button + .ui-button {
  border-left: var(--size-hairline) solid var(--color-line-subtle);
}

.ui-segmented > .ui-button[aria-pressed="true"],
.ui-segmented > .ui-button[aria-selected="true"],
.ui-segmented > .ui-button.active {
  background: color-mix(in srgb, var(--color-accent-brand) var(--strength-selected), var(--color-canvas));
  color: var(--color-accent-brand-text);
}

.ui-tabs {
  display: flex;
  align-items: stretch;
}

.ui-tab {
  min-height: var(--size-control-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-0) var(--space-12);
  border: 0;
  border-bottom: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  text-align: left;
  transition:
    background var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-tab[aria-selected="true"],
.ui-tab.active {
  background: var(--color-accent-brand);
  color: var(--color-accent-brand-ink);
}

.ui-tab:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-tab:disabled,
.ui-tab[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
  pointer-events: none;
}

/* Fields */
.ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ui-field-label {
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-ui);
}

.ui-field-hint,
.ui-field-error {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--line-body);
}

.ui-field-hint { color: var(--color-text-faint); }
.ui-field-error { color: var(--color-accent-danger-text); }


/* Setting chip — label plus its current value, opens an anchored popover.
   Backed by the shared eng-select trigger (value lists) or .ui-chip-trigger
   (content popovers); both render identically. */
.ui-chip {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 0;
}

.ui-chip .eng-select-trigger,
.ui-chip-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  width: auto;
  min-width: 0;
  min-height: var(--size-control-sm);
  padding-inline: var(--space-8);
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-canvas-deep);
  color: var(--color-text);
  font-family: var(--control-font);
  font-size: var(--text-caption);
  line-height: var(--line-ui);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--duration-fade) var(--ease-default),
    border-color var(--duration-fade) var(--ease-default),
    color var(--duration-fade) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-chip .eng-select-trigger:hover,
.ui-chip-trigger:hover {
  border-color: var(--color-line);
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.ui-chip .eng-select-trigger[aria-expanded="true"],
.ui-chip-trigger[aria-expanded="true"] {
  border-color: var(--color-line-focus);
  background: var(--color-surface);
}

.ui-chip .eng-select-trigger:active:not(:disabled),
.ui-chip-trigger:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-chip .eng-select-trigger:disabled,
.ui-chip-trigger:disabled {
  opacity: var(--opacity-disabled);
  cursor: default;
}

.ui-chip-key {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: var(--line-ui);
}

.ui-chip .eng-select-label,
.ui-chip-value {
  flex: 0 1 auto;
  min-width: 0;
  padding: var(--space-0);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-ui);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unset reads quieter than set — a dashed edge and lighter value weight carry
   the difference, so it survives greyscale. This replaces the on/off switch. */
.ui-chip[data-ui-set="false"] .eng-select-trigger,
.ui-chip[data-ui-set="false"] .ui-chip-trigger {
  border-style: dashed;
}

.ui-chip[data-ui-set="false"] .eng-select-label,
.ui-chip[data-ui-set="false"] .ui-chip-value {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.ui-chip .eng-select-chev {
  flex: 0 0 auto;
  width: var(--space-8);
  height: var(--space-8);
  min-height: 0;
}

.ui-chip-chev {
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
  border-right: var(--size-stroke-strong) solid var(--color-text-muted);
  border-bottom: var(--size-stroke-strong) solid var(--color-text-muted);
  transform: rotate(var(--angle-diagonal));
  transition: transform var(--duration-fade) var(--ease-default);
}

.ui-chip-trigger[aria-expanded="true"] .ui-chip-chev {
  transform: rotate(var(--angle-chevron-open));
}

/* Summary chip — the whole setup as one line once the canvas has content. */
.ui-chip--summary {
  flex: 0 1 auto;
  max-width: 100%;
}

.ui-chip--summary .ui-chip-value {
  flex: 0 1 auto;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-label);
  color: var(--color-text-muted);
}

/* Anchored content popover — body-mounted and fixed, so the dock's
   overflow: hidden cannot clip it. Value lists use the eng-select panel. */
.ui-popover {
  position: fixed;
  z-index: var(--layer-dropdown);
  max-width: var(--measure-content);
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--space-12);
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-surface);
  box-shadow: var(--shadow-popover);
  color: var(--color-text);
  opacity: var(--opacity-0);
  transform: translateY(calc(var(--space-4) * -1));
  transition:
    opacity var(--duration-fade) var(--ease-out),
    transform var(--duration-fade) var(--ease-out);
}

.ui-popover.is-open {
  opacity: var(--opacity-100);
  transform: translateY(0);
}

/* Suggestion chip — fills the composer's input. Deliberately unlike a setting
   chip: filled, sans, sentence-length, no key and no chevron. */
.ui-suggest-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}

.ui-suggest {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-field);
  padding: var(--space-6) var(--space-12);
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-body-compact);
  line-height: var(--line-copy);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--duration-fade) var(--ease-default),
    border-color var(--duration-fade) var(--ease-default),
    color var(--duration-fade) var(--ease-default),
    transform var(--duration-standard) var(--ease-out);
}

.ui-suggest:hover {
  border-color: var(--color-accent-brand);
  background: color-mix(in srgb, var(--color-accent-brand) var(--strength-selected), var(--color-surface));
  color: var(--color-text);
}

.ui-suggest:active:not(:disabled) {
  transform: scale(var(--scale-press));
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-height: var(--size-control-field);
  padding: var(--space-0) var(--space-8);
  border: var(--size-hairline) solid var(--color-line);
  border-radius: var(--radius-none);
  background: var(--color-canvas-deep);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: var(--line-body);
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    opacity var(--duration-fast) var(--ease-default);
}

.ui-textarea {
  min-height: calc(var(--size-control-field) * 3);
  padding-block: var(--space-8);
  resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--color-text-faint);
  opacity: 1;
}

.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] {
  border-color: var(--color-accent-danger);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-input[aria-disabled="true"],
.ui-select[aria-disabled="true"],
.ui-textarea[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  cursor: default;
}

.set-engine-mount,
.set-engine-mount .eng-select {
  width: 100%;
  min-width: 0;
}

.set-madd .ui-input {
  border: 0;
  box-shadow: none;
}

.set-madd .ui-input:focus {
  border-color: transparent;
  outline: none;
}

.set-madd:focus-within {
  border-color: var(--color-line-focus);
}

.set-modelsearch-input {
  border: var(--size-hairline) solid var(--color-line-subtle);
}

.set-modelsearch-input:focus {
  border-color: var(--color-line-focus);
}


/* Surfaces */
.ui-card {
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-surface);
}

.ui-badge {
  min-height: var(--size-control-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-8);
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--color-canvas-deep);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: var(--line-ui);
}

.ui-dialog {
  border: var(--size-hairline) solid var(--color-line-subtle);
  border-radius: var(--radius-none);
  background: var(--dialog-background);
  color: var(--color-text);
}

/* Hover feedback is pointer-specific so touch does not retain false hover states. */
@media (hover: hover) and (pointer: fine) {
  .ui-button:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--control-background-hover);
    border-color: var(--color-line-focus);
  }

  .ui-button[data-ui-variant="primary"]:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-accent-brand) var(--mix-88), var(--color-text-inverse));
    border-color: var(--color-accent-brand);
  }

  .ui-button[data-ui-variant="ghost"]:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: transparent;
    color: var(--color-text);
  }

  .ui-button[data-ui-variant="danger"]:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-accent-danger) var(--mix-14), transparent);
    border-color: var(--color-accent-danger);
    color: var(--color-text);
  }

  .ui-icon-button:hover:not(:disabled),
  .ui-row-button:hover:not(:disabled),
  .ui-switch-field:hover:not(:disabled) {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }

  .ui-choice:hover:not(:disabled) {
    border-color: var(--color-accent-brand);
    background: color-mix(in srgb, var(--color-accent-brand) var(--strength-selected), transparent);
    color: var(--color-accent-brand-text);
  }

  .ui-select-trigger:hover:not(:disabled),
  .ui-input:hover:not(:disabled),
  .ui-select:hover:not(:disabled),
  .ui-textarea:hover:not(:disabled),
  .ui-file-input::file-selector-button:hover {
    border-color: var(--color-line-focus);
  }

  .ui-option:hover:not(:disabled) {
    background: var(--color-surface-hover);
  }

  .ui-card-button:hover:not(:disabled) {
    border-color: var(--color-line-focus);
    background: var(--color-surface-hover);
  }

  .ui-switch:hover:not(:disabled) {
    border-color: var(--color-line-focus);
  }

  .ui-tab:hover:not(:disabled):not([aria-selected="true"]):not(.active) {
    background: var(--color-surface-hover);
    color: var(--color-text);
  }
}

@media (pointer: coarse) {
  .ui-button[data-ui-size="compact"],
  .ui-icon-button[data-ui-size="compact"],
  .ui-choice,
  .ui-option,
  .ui-tab,
  .ui-file-input::file-selector-button {
    min-height: var(--size-touch);
  }

  .ui-icon-button[data-ui-size="compact"] {
    width: var(--size-touch);
    height: var(--size-touch);
    min-width: var(--size-touch);
  }
}

/* Responsive contracts for shared application chrome. */
@media (max-width: 720px) {
  [data-shell="1"] .main-stage {
    position: relative;
  }

  [data-shell="1"] .main-stage > .inspector {
    position: absolute;
    inset: 0;
    z-index: var(--layer-popover);
    width: 100%;
    max-width: none;
    flex: none;
    border-left: 0;
    background: var(--color-canvas-deep);
  }

  [data-shell="1"] .main-stage > .inspector[hidden] {
    display: none !important;
  }

  [data-shell="1"] .sh-page-head {
    min-width: 0;
  }

  [data-shell="1"] .sh-page-title {
    padding-inline: var(--space-16);
  }

  [data-shell="1"] .sh-page-head .result-count {
    display: none;
  }

  [data-shell="1"] .sh-topbar-search .sh-pin-actions {
    flex: 0 0 var(--sh-pin-col-w);
    width: var(--sh-pin-col-w);
    min-width: var(--sh-pin-col-w);
    max-width: var(--sh-pin-col-w);
  }

  [data-shell="1"] .sh-topbar-search .sh-sort,
  [data-shell="1"] .sh-topbar-search .library-sort-mount,
  [data-shell="1"] .sh-topbar-search .library-sort.eng-select,
  [data-shell="1"] .sh-topbar-search .library-sort .eng-select-trigger {
    min-width: 0;
  }

  [data-shell="1"] .sh-folder-list {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  [data-shell="1"] .sh-folder-list::-webkit-scrollbar {
    display: none;
  }

  .settings-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    flex-direction: column;
  }

  .settings-rail {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    border-right: 0;
    border-bottom: var(--size-hairline) solid var(--color-line-subtle);
  }

  .settings-rail-list {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .settings-rail .set-nav {
    flex: 0 0 auto;
    width: auto;
    min-height: var(--size-touch);
  }

  .settings-panes {
    padding: var(--space-24) var(--space-16) var(--space-48);
  }

  .pv-header {
    min-height: var(--size-touch);
    height: var(--size-touch);
    flex: 0 0 var(--size-touch);
    flex-wrap: nowrap;
  }

  .pv-left {
    flex: 1 1 auto;
  }

  .pv-right {
    flex: 0 0 auto;
    overflow: visible;
  }

  .pv-title,
  .pv-version {
    display: none;
  }

  .pv-identity {
    display: none;
  }

  .lightbox.pv-framed .pv-stage {
    padding: var(--space-12);
  }
}

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