/* caustica-design — generated by scripts/build.mjs */
/**
 * Caustica Design — CSS entry.
 * Load order: fonts → primitives → semantic → base → components.
 */
/* ← ./fonts.css */
/**
 * Typography — system Latin stacks with a bundled Arabic webfont.
 * The Arabic subset is self-hosted so Arabic text renders consistently
 * without requiring an Arabic locale or a third-party font request.
 */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
}

:root {
  --font-sans-latin: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter',
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display-latin: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter',
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans-arabic: 'IBM Plex Sans Arabic', 'SF Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-display-arabic: 'IBM Plex Sans Arabic', 'SF Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Monaco, 'Cascadia Mono', Consolas,
    monospace;
}


/* ← ./tokens/primitives.css */
/**
 * Layer 1 — primitives (tier 1).
 * Raw scales. Prefer not to reference these from components.
 */
:root {
  /* Spacing — 4px unit (token key N = N × 4px / 0.25rem). Canonical closed scale. */
  --ca-space-unit: 0.25rem;
  --ca-space-0: 0;
  --ca-space-1: calc(var(--ca-space-unit) * 1); /* 4px */
  --ca-space-2: calc(var(--ca-space-unit) * 2); /* 8px */
  --ca-space-3: calc(var(--ca-space-unit) * 3); /* 12px */
  --ca-space-4: calc(var(--ca-space-unit) * 4); /* 16px */
  --ca-space-5: calc(var(--ca-space-unit) * 5); /* 20px */
  --ca-space-6: calc(var(--ca-space-unit) * 6); /* 24px */
  --ca-space-8: calc(var(--ca-space-unit) * 8); /* 32px */
  --ca-space-10: calc(var(--ca-space-unit) * 10); /* 40px */
  --ca-space-12: calc(var(--ca-space-unit) * 12); /* 48px */
  --ca-space-16: calc(var(--ca-space-unit) * 16); /* 64px — section */
  --ca-space-20: calc(var(--ca-space-unit) * 20); /* 80px — hero */
  --ca-space-24: calc(var(--ca-space-unit) * 24); /* 96px — page */

  /* Radius */
  --ca-radius-sm: 0.5rem;
  --ca-radius-md: 0.75rem;
  --ca-radius-lg: 1rem;
  --ca-radius-glass: 1.375rem;
  --ca-radius-pill: 9999px;

  /* Blur */
  --ca-blur-glass: 32px;
  --ca-blur-soft: 14px;
  --ca-blur-backdrop: 8px;

  /* Type sizes */
  --ca-font-size-xs: 0.7rem;
  --ca-font-size-sm: 0.82rem;
  --ca-font-size-md: 0.9375rem;
  --ca-font-size-base: 1rem;
  --ca-font-size-lg: 1.125rem;
  --ca-font-size-xl: 1.45rem;

  /* Motion */
  --ca-duration-fast: 150ms;
  --ca-duration-base: 220ms;
  --ca-duration-spring: 320ms;
  --ca-duration-tag: 380ms;
  --ca-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ca-ease-spring-snappy: cubic-bezier(0.34, 1.2, 0.64, 1);

  /*
    Brand / hero caustic palette — one source for .brand-mark + home field.
    Brights = soft-light/screen pools; *-ink = multiply inks on light theme.
  */
  --ca-caustic-ice: #e0f2fe;
  --ca-caustic-sky: #93c5fd;
  --ca-caustic-sky-soft: #bfdbfe;
  --ca-caustic-sky-bright: #7dd3fc;
  --ca-caustic-sky-mid: #38bdf8;
  --ca-caustic-cyan: #22d3ee;
  --ca-caustic-violet: #c4b5fd;
  --ca-caustic-violet-mid: #a78bfa;
  --ca-caustic-indigo: #818cf8;
  --ca-caustic-amber: #fde68a;
  --ca-caustic-amber-hot: #fbbf24;
  --ca-caustic-amber-mid: #f59e0b;
  --ca-caustic-orange: #fdba74;
  --ca-caustic-orange-hot: #fb923c;
  --ca-caustic-mint: #6ee7b7;
  --ca-caustic-teal: #5eead4;
  --ca-caustic-teal-bright: #2dd4bf;
  --ca-caustic-rose: #fda4af;
  --ca-caustic-rose-hot: #fb7185;
  /* Light-theme multiply inks */
  --ca-caustic-sky-ink: #0284c7;
  --ca-caustic-sky-ink-deep: #0369a1;
  --ca-caustic-sky-ink-deeper: #075985;
  --ca-caustic-sky-ink-bright: #0ea5e9;
  --ca-caustic-indigo-ink: #6366f1;
  --ca-caustic-indigo-ink-deep: #4f46e5;
  --ca-caustic-violet-ink: #7c3aed;
  --ca-caustic-amber-ink: #d97706;
  --ca-caustic-amber-brown: #b45309;
  --ca-caustic-teal-ink: #0f766e;
  --ca-caustic-rose-ink: #e11d48;
}


/* ← ./tokens/semantic.css */
/**
 * Layer 2 — semantic aliases (tier 2).
 * Dark is default. Components should consume these names.
 */
:root,
html[data-theme='dark'] {
  color-scheme: dark;

  --font-sans: var(--font-sans-latin);
  --font-display: var(--font-display-latin);

  --color-bg-deep: oklch(0.1 0.028 254);
  --color-bg-mid: oklch(0.22 0.038 254);
  --color-bg-elevated: oklch(0.29 0.042 254);
  --color-fg: oklch(1 0 0);
  --color-fg-muted: oklch(0.76 0.022 254);
  --color-accent: oklch(0.623 0.188 254);
  --color-accent-hot: oklch(0.696 0.162 254);
  --color-accent-2: oklch(0.588 0.203 254);
  --color-system-blue: oklch(0.54 0.19 254);
  --color-system-blue-hover: oklch(0.62 0.17 254);

  --glass-surface: oklch(0.45 0.06 254 / 0.22);
  --glass-surface-strong: oklch(0.48 0.07 254 / 0.34);
  --glass-border: oklch(0.72 0.1 254 / 0.18);
  --glass-highlight: oklch(0.85 0.08 254 / 0.32);
  --glass-rim: oklch(0.75 0.09 254 / 0.22);
  --glass-shadow: oklch(0.08 0.04 254 / 0.55);
  --glow-accent: oklch(0.623 0.188 254 / 0.4);
  --glow-cyan: oklch(0.696 0.162 254 / 0.28);

  --radius-glass: var(--ca-radius-glass);
  --glass-blur: var(--ca-blur-glass);
  --grain-opacity: 0.028;
  --grain-blend: overlay;
  --input-bg: color-mix(in oklab, var(--color-bg-deep) 82%, var(--glass-surface));

  --bg: var(--color-bg-deep);
  --bg-glow-a: color-mix(in oklab, var(--color-system-blue) 22%, transparent);
  --bg-glow-b: color-mix(in oklab, var(--color-accent-2) 14%, transparent);
  --line: var(--glass-border);
  --line-strong: color-mix(in oklab, var(--glass-highlight) 55%, var(--glass-border));
  --text: var(--color-fg);
  --muted: var(--color-fg-muted);
  --faint: color-mix(in oklab, var(--color-fg-muted) 78%, transparent);
  --accent: var(--color-system-blue);
  --accent-soft: color-mix(in oklab, var(--color-system-blue) 16%, transparent);
  --accent-dim: color-mix(in oklab, var(--color-system-blue) 55%, black);
  --warn: oklch(0.82 0.14 85);
  --warn-soft: oklch(0.82 0.14 85 / 0.12);
  --danger: oklch(0.72 0.16 25);
  --danger-soft: oklch(0.72 0.16 25 / 0.12);
  --ok: oklch(0.78 0.16 145);
  --ok-soft: oklch(0.78 0.16 145 / 0.12);
  --pill-label: color-mix(in oklab, var(--color-fg) 68%, var(--color-accent-hot));
  --pill-value: var(--color-fg);
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --radius: var(--radius-glass);
  --shadow: 0 24px 48px -28px var(--glass-shadow);
  --motion-spring: var(--ca-ease-spring);
  --motion-spring-snappy: var(--ca-ease-spring-snappy);
  --motion-tag-duration: var(--ca-duration-tag);
  --motion-tag-swap-duration: var(--ca-duration-spring);
}

html[data-theme='light'] {
  color-scheme: light;
  --color-bg-deep: oklch(0.985 0.014 254);
  --color-bg-mid: oklch(0.958 0.022 254);
  --color-bg-elevated: oklch(0.995 0.01 254);
  --color-fg: oklch(0.15 0.04 254);
  --color-fg-muted: oklch(0.46 0.045 254);
  --color-accent: oklch(0.588 0.203 254);
  --color-accent-hot: oklch(0.623 0.188 254);
  --color-accent-2: oklch(0.588 0.203 254);
  --color-system-blue: oklch(0.5 0.21 254);
  --color-system-blue-hover: oklch(0.44 0.21 264);
  --glass-surface: oklch(0.98 0.02 254 / 0.55);
  --glass-surface-strong: oklch(0.99 0.015 254 / 0.78);
  --glass-border: oklch(0.55 0.06 254 / 0.16);
  --glass-highlight: oklch(0.92 0.04 254 / 0.55);
  --glass-rim: oklch(0.88 0.05 254 / 0.35);
  --glass-shadow: oklch(0.45 0.05 254 / 0.2);
  --glow-accent: oklch(0.588 0.203 254 / 0.3);
  --glow-cyan: oklch(0.623 0.188 254 / 0.22);
  --grain-opacity: 0.045;
  --grain-blend: multiply;
  --input-bg: color-mix(in oklab, white 88%, var(--color-bg-mid));
  --bg-glow-a: color-mix(in oklab, var(--color-system-blue) 14%, transparent);
  --bg-glow-b: color-mix(in oklab, var(--color-accent-2) 10%, transparent);
  --faint: var(--color-fg-muted);
  --warn: oklch(0.72 0.15 75);
  --warn-soft: oklch(0.72 0.15 75 / 0.12);
  --danger: oklch(0.52 0.19 25);
  --danger-soft: oklch(0.58 0.18 25 / 0.1);
  --ok: oklch(0.58 0.16 145);
  --ok-soft: oklch(0.58 0.16 145 / 0.1);
  --pill-label: color-mix(in oklab, var(--color-accent-2) 62%, var(--color-fg));
  --pill-value: color-mix(in oklab, var(--color-fg) 94%, var(--color-accent-2));
}

html[lang='ar'] {
  --font-sans: var(--font-sans-arabic);
  --font-display: var(--font-display-arabic);
}


/* ← ./base.css */
/**
 * Base document chrome — canvas, grain, focus, selection.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Touch devices: keep native momentum — CSS smooth scroll fights finger scrolls
   and hash jumps, which reads as a late snap after you stop. */
@media (prefers-reduced-motion: no-preference) and (hover: none) and (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }
}

::selection {
  background: color-mix(in oklab, var(--color-accent) 50%, transparent);
  color: var(--color-fg);
}

:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 3px;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  background-color: var(--color-bg-deep);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.35s ease, color 0.35s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--bg-glow-a) 0%, transparent 55%),
    radial-gradient(760px 480px at 92% 0%, var(--bg-glow-b) 0%, transparent 50%),
    radial-gradient(700px 420px at 50% 110%, color-mix(in oklab, var(--color-accent) 10%, transparent) 0%, transparent 55%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  /* Stay behind in-flow content (was 0, which painted grain over host UI). */
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJuIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjg1IiBudW1PY3RhdmVzPSI0IiBzdGl0Y2hUaGxlcz0ic3RpdGNoIiAvPgogIDwvZmlsdGVyPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNuKSIgb3BhY2l0eT0iMC41NSIgLz4KPC9zdmc+Cg==");
  mix-blend-mode: var(--grain-blend);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--accent);
}

/* Native select — matches host app token chrome */
select {
  padding-inline-end: var(--ca-space-8);
  appearance: none;
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%237a8b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ca-space-3) center;
}

html[data-theme='light'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%235a6b80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ca-space-3) center;
}

html[dir='rtl'] select {
  background-position: left var(--ca-space-3) center;
}

html[data-theme='light'] input[type='month'].input-month {
  color-scheme: light;
}

/**
 * Optional app shell wrapper. Grain/glow sit behind content without this,
 * but .ca-root is still the recommended single stacking/context root.
 */
.ca-root {
  position: relative;
  min-height: 100dvh;
}

.ca-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-2);
  margin: 0;
  font-size: var(--ca-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-accent-2) 70%, var(--color-fg));
}

.ca-section-eyebrow-line {
  display: inline-block;
  height: 1px;
  width: 2.25rem;
  background: linear-gradient(90deg, var(--color-accent-2), var(--color-accent));
  border-radius: 1px;
  opacity: 0.95;
  flex-shrink: 0;
}

.ui-icon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  /* Sit on the text midline when used inline outside a flex parent. */
  vertical-align: middle;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

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

/*
 * Without backdrop-filter, translucent glass reads washed-out / low-contrast.
 * Strengthen surface tokens so panels stay usable.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  html[data-theme='dark'] {
    --glass-surface: oklch(0.32 0.05 254 / 0.94);
    --glass-surface-strong: oklch(0.36 0.055 254 / 0.97);
  }

  html[data-theme='light'] {
    --glass-surface: oklch(0.98 0.015 254 / 0.96);
    --glass-surface-strong: oklch(0.995 0.01 254 / 0.98);
  }

  .panel,
  .card,
  .ui-navbar,
  .carousel,
  .dropzone,
  .toast,
  .pill,
  .glass-focus-surface,
  .modal-backdrop,
  .sheet-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ← ./components/brand.css */
/**
 * Brand primitives — mark shell + gradient title.
 * Host apps own the product name and mark asset (no kit-branded copy).
 *
 * Caustic motion:
 * - Default: rich (hue, blend, background-position, glass tilt)
 * - Fallback (perf-safe): transform + opacity only via
 *   `.brand-mark--lite`, `prefers-reduced-data: reduce`, or `update: slow`
 * - Off: `prefers-reduced-motion: reduce`
 */
.brand-title-row {
  display: flex;
  align-items: center;
  gap: var(--ca-space-3);
  min-width: 0;
}

/* Larger mark↔title gap for hero / intro rows. */
.brand-title-row--intro {
  gap: var(--ca-space-4);
}

/*
  Premium brand entrance — softer than shared .ca-animate-enter (0.5s spring).
  Applied when the row is scroll/page-entered; keep motion on the row (not the
  clipped gradient text) so background-clip glyphs stay whole.
*/
@keyframes brand-title-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0.45rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-title-row--intro.ca-animate-enter,
  .brand-title-row--intro.motion-enter {
    animation-name: brand-title-enter;
    animation-duration: 1.15s;
    /* Soft decelerate — no spring overshoot; reads as glass settling. */
    animation-timing-function: cubic-bezier(0.16, 0.84, 0.22, 1);
    animation-delay: calc(var(--ca-delay, 0ms) + 90ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-title-row--intro.ca-animate-enter,
  .brand-title-row--intro.motion-enter {
    animation: none !important;
  }
}

.brand-title {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.brand-title__text {
  display: inline-block;
}

.brand-mark {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  isolation: isolate;
  transform-style: preserve-3d;
}

.brand-mark__icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition:
    transform 0.45s var(--ca-ease-spring, cubic-bezier(0.22, 1, 0.36, 1)),
    filter 0.45s ease;
}

/* Circular shell for the glass-disk favicon. */
.brand-mark--lens {
  border-radius: 50%;
  /* Disk asset is already circular — keep overflow visible so tilt/glow aren’t clipped. */
  overflow: visible;
}

.brand-mark--lens .brand-mark__pulse {
  width: 100%;
  height: 100%;
}

/*
  Rich caustic overlay — sunlight tipping through glass.
  Class kept as __pulse for API stability.
*/
.brand-mark__pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  transform: translate(-50%, -50%);
  mix-blend-mode: soft-light;
  background:
    radial-gradient(
      ellipse 55% 40% at 22% 28%,
      color-mix(in oklab, #ffffff 92%, transparent) 0%,
      color-mix(in oklab, var(--ca-caustic-ice) 55%, transparent) 35%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 45% 55% at 78% 62%,
      color-mix(in oklab, var(--ca-caustic-sky) 70%, transparent) 0%,
      color-mix(in oklab, var(--ca-caustic-violet) 40%, transparent) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 35% at 48% 82%,
      color-mix(in oklab, var(--ca-caustic-amber) 55%, transparent) 0%,
      color-mix(in oklab, var(--ca-caustic-orange) 35%, transparent) 45%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 35% 45% at 12% 72%,
      color-mix(in oklab, var(--ca-caustic-mint) 45%, transparent) 0%,
      transparent 65%
    );
  background-size: 160% 160%, 180% 180%, 150% 150%, 170% 170%;
  background-position: 12% 70%, 88% 30%, 40% 90%, 8% 85%;
  filter: saturate(1.15);
}

.brand-mark__pulse::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 210deg at 45% 40%,
    transparent 0deg,
    color-mix(in oklab, #ffffff 55%, transparent) 28deg,
    color-mix(in oklab, var(--ca-caustic-sky-bright) 40%, transparent) 52deg,
    transparent 78deg,
    color-mix(in oklab, var(--ca-caustic-violet) 35%, transparent) 140deg,
    color-mix(in oklab, var(--ca-caustic-amber) 30%, transparent) 168deg,
    transparent 200deg,
    color-mix(in oklab, var(--ca-caustic-mint) 28%, transparent) 260deg,
    transparent 300deg
  );
  opacity: 0.55;
  mix-blend-mode: screen;
  transform: rotate(0deg) scale(1);
}

.brand-mark__pulse::after {
  content: '';
  position: absolute;
  width: 42%;
  height: 18%;
  left: 18%;
  top: 22%;
  border-radius: 50%;
  background: linear-gradient(
    115deg,
    transparent 10%,
    color-mix(in oklab, #ffffff 90%, transparent) 42%,
    color-mix(in oklab, var(--ca-caustic-sky-soft) 55%, transparent) 58%,
    transparent 88%
  );
  filter: blur(0.5px);
  opacity: 0.85;
  transform: rotate(-28deg);
}

/* Extra warm/cool pools (optional child in markup). */
.brand-mark__caustic {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 38% 28% at 58% 24%,
      color-mix(in oklab, var(--ca-caustic-rose) 40%, transparent) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 30% 36% at 24% 70%,
      color-mix(in oklab, var(--ca-caustic-teal) 38%, transparent) 0%,
      transparent 68%
    );
  background-size: 170% 170%, 160% 160%;
  background-position: 70% 20%, 20% 80%;
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

.brand-mark:hover .brand-mark__icon {
  transform: perspective(140px) rotateX(3deg) rotateY(-5deg) translateY(-1px) scale(1.04);
  filter: brightness(1.06) saturate(1.12);
}

/* ——— Perf-safe fallback surface (transform/opacity only) ——— */
.brand-mark--lite .brand-mark__pulse,
.brand-mark--lite .brand-mark__caustic {
  mix-blend-mode: normal;
  filter: none;
  background-size: auto;
  background-position: center;
}

.brand-mark--lite .brand-mark__pulse {
  background:
    radial-gradient(
      ellipse 48% 36% at 30% 30%,
      color-mix(in oklab, #ffffff 80%, transparent) 0%,
      color-mix(in oklab, var(--ca-caustic-ice) 40%, transparent) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 40% 48% at 72% 60%,
      color-mix(in oklab, var(--ca-caustic-sky) 50%, transparent) 0%,
      color-mix(in oklab, var(--ca-caustic-violet) 30%, transparent) 45%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 34% 30% at 48% 78%,
      color-mix(in oklab, var(--ca-caustic-amber) 42%, transparent) 0%,
      transparent 68%
    );
  opacity: 0.85;
  contain: strict;
}

.brand-mark--lite .brand-mark__pulse::before {
  inset: -55%;
  mix-blend-mode: normal;
  background:
    conic-gradient(
      from 200deg at 48% 42%,
      transparent 0deg,
      color-mix(in oklab, #ffffff 42%, transparent) 24deg,
      color-mix(in oklab, var(--ca-caustic-sky-bright) 38%, transparent) 48deg,
      transparent 78deg,
      color-mix(in oklab, var(--ca-caustic-violet) 34%, transparent) 130deg,
      color-mix(in oklab, var(--ca-caustic-amber) 28%, transparent) 158deg,
      transparent 190deg,
      color-mix(in oklab, var(--ca-caustic-mint) 26%, transparent) 248deg,
      transparent 290deg,
      color-mix(in oklab, var(--ca-caustic-sky) 30%, transparent) 330deg,
      transparent 360deg
    );
  filter: none;
}

.brand-mark--lite .brand-mark__pulse::after {
  left: 50%;
  top: 50%;
  width: 46%;
  height: 14%;
  filter: none;
  background: linear-gradient(
    112deg,
    transparent 8%,
    color-mix(in oklab, #ffffff 96%, transparent) 38%,
    color-mix(in oklab, var(--ca-caustic-ice) 70%, transparent) 52%,
    color-mix(in oklab, var(--ca-caustic-sky) 40%, transparent) 68%,
    transparent 92%
  );
  transform: translate3d(-50%, -50%, 0) rotate(-32deg);
}

.brand-mark--lite .brand-mark__caustic {
  inset: -58%;
  background:
    radial-gradient(
      ellipse 40% 30% at 32% 28%,
      color-mix(in oklab, #ffffff 88%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 34% 42% at 74% 56%,
      color-mix(in oklab, var(--ca-caustic-sky) 55%, transparent) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 30% 26% at 52% 78%,
      color-mix(in oklab, var(--ca-caustic-amber) 45%, transparent) 0%,
      transparent 70%
    );
  background-size: auto;
  background-position: center;
}

.brand-mark--lite:hover .brand-mark__icon {
  transform: translate3d(0, -1px, 0) scale(1.04);
  filter: none;
}

.text-gradient-hero {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  letter-spacing: -0.03em;
  font-weight: 650;
  isolation: isolate;
}

.text-gradient-hero__glow {
  display: inline-block;
}

html[data-theme='dark'] .text-gradient-hero__glow {
  filter: drop-shadow(0 0.06em 0 color-mix(in oklab, oklch(0.08 0.04 280) 72%, transparent))
    drop-shadow(0 0.14em 0.35em color-mix(in oklab, var(--color-accent) 28%, transparent));
}

.text-gradient-hero__text {
  display: inline-block;
  background-color: transparent;
  background-image: linear-gradient(
    118deg,
    color-mix(in oklab, var(--color-fg) 97%, var(--color-accent)) 0%,
    color-mix(in oklab, var(--color-fg) 92%, var(--color-accent)) 24%,
    color-mix(in oklab, var(--color-accent-2) 77%, var(--color-fg)) 52%,
    color-mix(in oklab, var(--color-accent-hot) 82%, white) 78%,
    color-mix(in oklab, var(--color-accent-hot) 88%, white) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

html[data-theme='light'] .text-gradient-hero__text {
  filter: none;
  text-shadow: none;
  background-image: linear-gradient(
    118deg,
    color-mix(in oklab, var(--color-fg) 97%, var(--color-accent)) 0%,
    color-mix(in oklab, var(--color-fg) 92%, var(--color-accent)) 24%,
    color-mix(in oklab, var(--color-accent-2) 77%, var(--color-fg)) 52%,
    color-mix(in oklab, var(--color-accent-hot) 82%, white) 78%,
    color-mix(in oklab, var(--color-accent-hot) 88%, white) 100%
  );
}

/* ——— Rich keyframes ——— */
@keyframes brand-mark-caustic {
  0% {
    opacity: 0.55;
    background-position: 8% 78%, 92% 22%, 36% 94%, 6% 88%;
    filter: saturate(1.05) hue-rotate(0deg);
  }
  28% {
    opacity: 1;
    background-position: 42% 28%, 68% 58%, 72% 48%, 28% 42%;
    filter: saturate(1.25) hue-rotate(18deg);
  }
  52% {
    opacity: 0.9;
    background-position: 78% 18%, 22% 72%, 18% 36%, 62% 18%;
    filter: saturate(1.35) hue-rotate(-12deg);
  }
  74% {
    opacity: 0.95;
    background-position: 28% 62%, 82% 38%, 58% 22%, 40% 70%;
    filter: saturate(1.2) hue-rotate(28deg);
  }
  100% {
    opacity: 0.55;
    background-position: 14% 82%, 88% 26%, 44% 88%, 10% 80%;
    filter: saturate(1.05) hue-rotate(0deg);
  }
}

@keyframes brand-mark-caustic-spin {
  0% {
    transform: rotate(0deg) scale(1.05);
    opacity: 0.4;
  }
  35% {
    transform: rotate(48deg) scale(1.12);
    opacity: 0.7;
  }
  65% {
    transform: rotate(118deg) scale(1.08);
    opacity: 0.55;
  }
  100% {
    transform: rotate(180deg) scale(1.05);
    opacity: 0.35;
  }
}

@keyframes brand-mark-specular {
  0% {
    left: 12%;
    top: 68%;
    width: 38%;
    transform: rotate(-36deg) scale(0.7);
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  42% {
    left: 48%;
    top: 18%;
    width: 48%;
    transform: rotate(-12deg) scale(1.05);
    opacity: 1;
  }
  68% {
    left: 58%;
    top: 42%;
    width: 36%;
    transform: rotate(18deg) scale(0.9);
    opacity: 0.75;
  }
  100% {
    left: 22%;
    top: 72%;
    width: 34%;
    transform: rotate(-30deg) scale(0.65);
    opacity: 0;
  }
}

@keyframes brand-mark-caustic-extra {
  0% {
    background-position: 70% 20%, 20% 80%;
    opacity: 0.35;
  }
  50% {
    background-position: 20% 70%, 75% 25%;
    opacity: 0.75;
  }
  100% {
    background-position: 70% 20%, 20% 80%;
    opacity: 0.35;
  }
}

@keyframes brand-mark-glass-tilt {
  0%,
  100% {
    transform: perspective(160px) rotateX(0deg) rotateY(0deg) scale(1);
    filter: brightness(1) saturate(1) hue-rotate(0deg);
  }
  22% {
    transform: perspective(160px) rotateX(6deg) rotateY(-10deg) scale(1.045);
    filter: brightness(1.14) saturate(1.18) hue-rotate(6deg);
  }
  48% {
    transform: perspective(160px) rotateX(-4deg) rotateY(12deg) scale(1.03);
    filter: brightness(1.1) saturate(1.28) hue-rotate(-8deg);
  }
  72% {
    transform: perspective(160px) rotateX(3deg) rotateY(-6deg) scale(1.04);
    filter: brightness(1.12) saturate(1.15) hue-rotate(14deg);
  }
}

/* ——— Perf-safe keyframes (transform + opacity only) ——— */
@keyframes brand-mark-lite-veil {
  0%,
  100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}

@keyframes brand-mark-lite-prism {
  0% {
    transform: translate3d(10%, -8%, 0) rotate(0deg) scale(1.04);
    opacity: 0.35;
  }
  50% {
    transform: translate3d(8%, 12%, 0) rotate(-180deg) scale(1.08);
    opacity: 0.65;
  }
  100% {
    transform: translate3d(10%, -8%, 0) rotate(-360deg) scale(1.04);
    opacity: 0.35;
  }
}

@keyframes brand-mark-lite-caustic {
  0% {
    transform: translate3d(-14%, 14%, 0) rotate(0deg);
    opacity: 0.42;
  }
  50% {
    transform: translate3d(14%, -12%, 0) rotate(180deg);
    opacity: 0.82;
  }
  100% {
    transform: translate3d(-14%, 14%, 0) rotate(360deg);
    opacity: 0.42;
  }
}

@keyframes brand-mark-lite-specular {
  0% {
    transform: translate3d(-55%, 45%, 0) rotate(-36deg) scale(0.8);
    opacity: 0.1;
  }
  35% {
    transform: translate3d(8%, -50%, 0) rotate(-10deg) scale(1);
    opacity: 0.95;
  }
  70% {
    transform: translate3d(42%, 18%, 0) rotate(18deg) scale(0.9);
    opacity: 0.45;
  }
  100% {
    transform: translate3d(-55%, 45%, 0) rotate(-36deg) scale(0.8);
    opacity: 0.1;
  }
}

/* Rich primary */
@media (prefers-reduced-motion: no-preference) {
  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__pulse {
    animation: brand-mark-caustic 2.8s ease-in-out infinite;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__pulse::before {
    animation: brand-mark-caustic-spin 2.8s ease-in-out infinite;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__pulse::after {
    animation: brand-mark-specular 2.8s ease-in-out infinite;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__caustic {
    animation: brand-mark-caustic-extra 3.4s ease-in-out infinite;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__icon {
    animation: brand-mark-glass-tilt 2.8s ease-in-out infinite;
  }
}

/* Perf-safe fallback — opt-in class or constrained environments */
@media (prefers-reduced-motion: no-preference) {
  .brand-mark--lite:has(.brand-mark__pulse) .brand-mark__pulse {
    animation: brand-mark-lite-veil 5.5s ease-in-out infinite;
  }

  .brand-mark--lite:has(.brand-mark__pulse) .brand-mark__pulse::before {
    animation: brand-mark-lite-prism 9.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }

  .brand-mark--lite:has(.brand-mark__pulse) .brand-mark__pulse::after {
    animation: brand-mark-lite-specular 4.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  }

  .brand-mark--lite:has(.brand-mark__pulse) .brand-mark__caustic {
    animation: brand-mark-lite-caustic 6.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .brand-mark--lite:has(.brand-mark__pulse) .brand-mark__icon {
    animation: none;
  }
}

@media (prefers-reduced-motion: no-preference) and (prefers-reduced-data: reduce),
  (prefers-reduced-motion: no-preference) and (update: slow) {
  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__pulse {
    animation: brand-mark-lite-veil 5.5s ease-in-out infinite;
    mix-blend-mode: normal;
    filter: none;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__pulse::before {
    animation: brand-mark-lite-prism 9.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    mix-blend-mode: normal;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__pulse::after {
    animation: brand-mark-lite-specular 4.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    left: 50%;
    top: 50%;
    width: 46%;
    height: 14%;
    filter: none;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__caustic {
    animation: brand-mark-lite-caustic 6.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    mix-blend-mode: normal;
    filter: none;
  }

  .brand-mark:has(.brand-mark__pulse):not(.brand-mark--lite) .brand-mark__icon {
    animation: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark__pulse,
  .brand-mark__pulse::before,
  .brand-mark__pulse::after,
  .brand-mark__caustic,
  .brand-mark__icon {
    animation: none !important;
  }
}

@media (max-width: 767px) {
  .brand-mark {
    width: 2.15rem;
    height: 2.15rem;
  }

  .text-gradient-hero {
    font-size: var(--ca-font-size-xl);
  }
}


/* ← ./components/button.css */
/**
 * Buttons — glass secondary + solid primary.
 * Component tokens: --btn-bg, --btn-color, --btn-radius, --btn-pad-y, --btn-pad-x
 */
.btn {
  --btn-bg: color-mix(in oklab, var(--glass-surface-strong) 88%, transparent);
  --btn-color: var(--text);
  --btn-radius: var(--ca-radius-pill);
  --btn-pad-y: var(--ca-space-3);
  --btn-pad-x: var(--ca-space-5);
  --btn-border: var(--glass-border);

  border: 0.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-color);
  border-radius: var(--btn-radius);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--ca-font-size-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    border-color var(--ca-duration-base) ease,
    background-color var(--ca-duration-base) ease,
    transform var(--ca-duration-spring) var(--ca-ease-spring-snappy),
    box-shadow var(--ca-duration-base) ease,
    opacity var(--ca-duration-fast) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ca-space-2);
  text-decoration: none;
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 18%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 10%, transparent) inset;
}

.btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--glass-surface-strong) 96%, white 4%);
  /* --text flips per theme, so the border brightens in dark mode and darkens in light mode */
  border-color: color-mix(in oklab, var(--text) 22%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) {
    transform: scale(1.02);
  }
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-color: var(--muted);
  box-shadow: none;
}

.btn-ghost:hover:not(:disabled) {
  --btn-color: var(--text);
  background: color-mix(in oklab, var(--glass-surface) 70%, transparent);
  border-color: transparent;
  color: var(--btn-color);
}

.btn-primary {
  --btn-bg: var(--color-system-blue);
  --btn-color: white;
  --btn-border: transparent;
  border: none;
  font-weight: 500;
  box-shadow:
    0 1px 0 0 color-mix(in oklab, white 22%, transparent) inset,
    0 1px 2px color-mix(in oklab, oklch(0.04 0.02 260) 18%, transparent);
}

.btn-primary:hover:not(:disabled) {
  --btn-bg: var(--color-system-blue-hover);
  background: var(--btn-bg);
  border: none;
  box-shadow:
    0 1px 0 0 color-mix(in oklab, white 26%, transparent) inset,
    0 4px 14px -4px color-mix(in oklab, var(--color-system-blue) 55%, transparent);
}

html[data-theme='light'] .btn-primary {
  color: white;
}

.btn-compact {
  --btn-pad-y: var(--ca-space-2);
  --btn-pad-x: var(--ca-space-4);
  font-size: var(--ca-font-size-sm);
}

.btn-danger {
  --btn-bg: color-mix(in oklab, var(--danger) 88%, var(--text));
  --btn-color: white;
  --btn-border: color-mix(in oklab, var(--danger) 70%, transparent);
}

.btn-danger:hover:not(:disabled) {
  --btn-bg: var(--danger);
  background: var(--btn-bg);
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ca-space-2);
}

.btn-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.btn-spinner {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--ca-radius-pill);
  border: 1.5px solid color-mix(in oklab, currentColor 35%, transparent);
  border-top-color: currentColor;
  flex-shrink: 0;
}

.btn-primary .btn-spinner,
.btn-danger .btn-spinner {
  border-color: color-mix(in oklab, white 35%, transparent);
  border-top-color: white;
}

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

@keyframes ca-soft-pulse {
  0%,
  100% {
    box-shadow:
      0 1px 0 0 color-mix(in oklab, white 22%, transparent) inset,
      0 1px 2px color-mix(in oklab, oklch(0.04 0.02 260) 18%, transparent);
  }
  50% {
    box-shadow:
      0 1px 0 0 color-mix(in oklab, white 28%, transparent) inset,
      0 0 0 4px color-mix(in oklab, var(--color-system-blue) 18%, transparent),
      0 6px 18px -8px color-mix(in oklab, var(--color-system-blue) 45%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn.is-busy {
    animation: ca-soft-pulse 1.2s ease-in-out infinite;
  }

  .btn-spinner {
    animation: ca-spin 0.75s linear infinite;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-2);
  margin-top: var(--ca-space-1);
}

@media (max-width: 767px) {
  .btn {
    min-height: 2.65rem;
  }

  .btn:hover:not(:disabled) {
    transform: none;
  }
}


/* ← ./components/panel.css */
/**
 * Glass panel — primary surface container.
 * Component tokens: --panel-bg, --panel-radius, --panel-pad, --panel-blur
 */
.panel {
  --panel-bg: var(--glass-surface);
  --panel-radius: var(--radius-glass);
  --panel-pad: var(--ca-space-4) 1.15rem var(--ca-space-5);
  --panel-blur: var(--glass-blur);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--panel-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
  backdrop-filter: blur(var(--panel-blur)) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(200%) brightness(1.08);
  box-shadow:
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 -1px 0 0 oklch(0 0 0 / 0.08) inset,
    0 24px 48px -28px var(--glass-shadow);
}

.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.16) 0%,
    transparent 36%,
    transparent 64%,
    oklch(1 0 0 / 0.06) 100%
  );
  mix-blend-mode: soft-light;
}

.panel > * {
  position: relative;
  z-index: 1;
}

html[data-theme='light'] .panel {
  background-color: color-mix(in oklab, var(--glass-surface-strong) 92%, white);
  backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
}

html[data-theme='light'] .panel::after {
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.55) 0%,
    transparent 40%,
    transparent 70%,
    oklch(0.7 0.05 254 / 0.08) 100%
  );
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ca-space-3);
  margin-bottom: var(--ca-space-3);
}

.panel-head > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.panel-title {
  margin: 0;
  font-size: var(--ca-font-size-md);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.panel-sub {
  margin: var(--ca-space-1) 0 0;
  display: block;
  color: var(--faint);
  font-size: var(--ca-font-size-sm);
  min-height: 1.25em;
  overflow-wrap: anywhere;
}

.glass-focus-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Do not transition backdrop-filter — re-rasters every frame. */
  transition:
    border-color var(--ca-duration-base) ease,
    background-color var(--ca-duration-base) ease,
    box-shadow var(--ca-duration-base) ease;
}

.glass-focus-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--ca-duration-base) ease;
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.16) 0%,
    transparent 36%,
    transparent 64%,
    oklch(1 0 0 / 0.06) 100%
  );
  mix-blend-mode: soft-light;
}

.glass-focus-surface > * {
  position: relative;
  z-index: 1;
}

.glass-focus-surface:hover:not(.is-busy),
.glass-focus-surface:focus-within:not(.is-busy) {
  border-color: color-mix(in oklab, var(--color-system-blue) 42%, var(--glass-border));
  background-color: var(--glass-surface-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%) brightness(1.08);
  box-shadow:
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 10px 28px -18px color-mix(in oklab, var(--color-accent) 28%, transparent);
}

.glass-focus-surface:hover:not(.is-busy)::after,
.glass-focus-surface:focus-within:not(.is-busy)::after {
  opacity: 1;
}

.glass-focus-surface:focus-within:not(.is-busy) {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--color-system-blue) 45%, transparent),
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 10px 28px -18px color-mix(in oklab, var(--color-accent) 28%, transparent);
}

.nested-surface {
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-md);
  padding: var(--ca-space-4);
  background: color-mix(in oklab, var(--glass-surface) 80%, transparent);
}

@media (max-width: 767px) {
  .panel {
    --panel-pad: var(--ca-space-4) var(--ca-space-3) var(--ca-space-4);
    --panel-radius: var(--ca-radius-md);
  }
}


/* ← ./components/card.css */
/**
 * Card — compact glass content unit (grids, lists of items).
 * Prefer Panel for page/section chrome; Card for content tiles.
 * Component tokens: --card-bg, --card-radius, --card-pad, --card-blur
 */
.card {
  --card-bg: var(--glass-surface);
  --card-radius: var(--ca-radius-lg);
  --card-pad: var(--ca-space-4);
  --card-blur: var(--glass-blur);

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: var(--card-bg);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--card-radius);
  backdrop-filter: blur(var(--card-blur)) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(200%) brightness(1.08);
  box-shadow:
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 -1px 0 0 oklch(0 0 0 / 0.08) inset,
    0 16px 36px -24px var(--glass-shadow);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.14) 0%,
    transparent 36%,
    transparent 64%,
    oklch(1 0 0 / 0.05) 100%
  );
  mix-blend-mode: soft-light;
}

.card > * {
  position: relative;
  z-index: 1;
}

html[data-theme='light'] .card {
  background-color: color-mix(in oklab, var(--glass-surface-strong) 92%, white);
  backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
}

html[data-theme='light'] .card::after {
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.5) 0%,
    transparent 40%,
    transparent 70%,
    oklch(0.7 0.05 254 / 0.06) 100%
  );
}

.card-media {
  display: block;
  width: 100%;
  overflow: hidden;
  background: color-mix(in oklab, var(--glass-surface) 70%, transparent);
  aspect-ratio: 16 / 9;
}

.card-media img,
.card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--ca-space-2);
  flex: 1 1 auto;
  padding: var(--card-pad);
  min-width: 0;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ca-space-3);
  padding: var(--card-pad);
  padding-block-end: 0;
  min-width: 0;
}

.card-head + .card-body {
  padding-block-start: var(--ca-space-2);
}

.card-title {
  margin: 0;
  font-size: var(--ca-font-size-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.card-sub {
  margin: var(--ca-space-1) 0 0;
  display: block;
  color: var(--faint);
  font-size: var(--ca-font-size-sm);
  min-height: 1.25em;
  overflow-wrap: anywhere;
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-2);
  margin-block-start: auto;
  padding: var(--card-pad);
  padding-block-start: var(--ca-space-3);
  border-block-start: 0.5px solid color-mix(in oklab, var(--glass-border) 80%, transparent);
}

.card-body + .card-foot {
  padding-block-start: var(--ca-space-3);
}

/* Interactive tile — keyboard/hover elevation without composing .glass-focus-surface */
.card--interactive {
  cursor: pointer;
  transition:
    border-color var(--ca-duration-base) ease,
    background-color var(--ca-duration-base) ease,
    box-shadow var(--ca-duration-base) ease;
}

.card--interactive:hover:not(.is-busy),
.card--interactive:focus-within:not(.is-busy) {
  border-color: color-mix(in oklab, var(--color-system-blue) 42%, var(--glass-border));
  background-color: var(--glass-surface-strong);
  box-shadow:
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 10px 28px -18px color-mix(in oklab, var(--color-accent) 28%, transparent);
}

.card--interactive:focus-within:not(.is-busy) {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--color-system-blue) 45%, transparent),
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 10px 28px -18px color-mix(in oklab, var(--color-accent) 28%, transparent);
}

@media (max-width: 767px) {
  .card {
    --card-pad: var(--ca-space-3);
    --card-radius: var(--ca-radius-md);
  }
}


/* ← ./components/layout.css */
/**
 * Layout primitives — spacing utilities, stack/cluster, container, grid.
 * Token-backed (--ca-space-*). Not a full Bootstrap utility kit.
 */

/* ---- Stack / cluster ---- */
.stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ca-space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-4);
}

.stack--1,
.cluster--1,
.gap-1 {
  gap: var(--ca-space-1);
}
.stack--2,
.cluster--2,
.gap-2 {
  gap: var(--ca-space-2);
}
.stack--3,
.cluster--3,
.gap-3 {
  gap: var(--ca-space-3);
}
.stack--4,
.cluster--4,
.gap-4 {
  gap: var(--ca-space-4);
}
.stack--5,
.cluster--5,
.gap-5 {
  gap: var(--ca-space-5);
}
.stack--6,
.cluster--6,
.gap-6 {
  gap: var(--ca-space-6);
}
.stack--8,
.cluster--8,
.gap-8 {
  gap: var(--ca-space-8);
}
.stack--10,
.cluster--10,
.gap-10 {
  gap: var(--ca-space-10);
}
.stack--12,
.cluster--12,
.gap-12 {
  gap: var(--ca-space-12);
}
.stack--16,
.cluster--16,
.gap-16 {
  gap: var(--ca-space-16);
}
.stack--20,
.cluster--20,
.gap-20 {
  gap: var(--ca-space-20);
}
.stack--24,
.cluster--24,
.gap-24 {
  gap: var(--ca-space-24);
}

/* ---- Padding ---- */
.p-0 {
  padding: 0;
}
.p-1 {
  padding: var(--ca-space-1);
}
.p-2 {
  padding: var(--ca-space-2);
}
.p-3 {
  padding: var(--ca-space-3);
}
.p-4 {
  padding: var(--ca-space-4);
}
.p-5 {
  padding: var(--ca-space-5);
}
.p-6 {
  padding: var(--ca-space-6);
}
.p-8 {
  padding: var(--ca-space-8);
}
.p-10 {
  padding: var(--ca-space-10);
}
.p-12 {
  padding: var(--ca-space-12);
}
.p-16 {
  padding: var(--ca-space-16);
}
.p-20 {
  padding: var(--ca-space-20);
}
.p-24 {
  padding: var(--ca-space-24);
}

.px-1 {
  padding-inline: var(--ca-space-1);
}
.px-2 {
  padding-inline: var(--ca-space-2);
}
.px-3 {
  padding-inline: var(--ca-space-3);
}
.px-4 {
  padding-inline: var(--ca-space-4);
}
.px-5 {
  padding-inline: var(--ca-space-5);
}
.px-6 {
  padding-inline: var(--ca-space-6);
}
.px-8 {
  padding-inline: var(--ca-space-8);
}

.py-1 {
  padding-block: var(--ca-space-1);
}
.py-2 {
  padding-block: var(--ca-space-2);
}
.py-3 {
  padding-block: var(--ca-space-3);
}
.py-4 {
  padding-block: var(--ca-space-4);
}
.py-5 {
  padding-block: var(--ca-space-5);
}
.py-6 {
  padding-block: var(--ca-space-6);
}
.py-8 {
  padding-block: var(--ca-space-8);
}

.pt-1 {
  padding-block-start: var(--ca-space-1);
}
.pt-2 {
  padding-block-start: var(--ca-space-2);
}
.pt-3 {
  padding-block-start: var(--ca-space-3);
}
.pt-4 {
  padding-block-start: var(--ca-space-4);
}
.pt-6 {
  padding-block-start: var(--ca-space-6);
}
.pt-8 {
  padding-block-start: var(--ca-space-8);
}

.pb-1 {
  padding-block-end: var(--ca-space-1);
}
.pb-2 {
  padding-block-end: var(--ca-space-2);
}
.pb-3 {
  padding-block-end: var(--ca-space-3);
}
.pb-4 {
  padding-block-end: var(--ca-space-4);
}
.pb-6 {
  padding-block-end: var(--ca-space-6);
}
.pb-8 {
  padding-block-end: var(--ca-space-8);
}

.ps-1 {
  padding-inline-start: var(--ca-space-1);
}
.ps-2 {
  padding-inline-start: var(--ca-space-2);
}
.ps-3 {
  padding-inline-start: var(--ca-space-3);
}
.ps-4 {
  padding-inline-start: var(--ca-space-4);
}
.ps-6 {
  padding-inline-start: var(--ca-space-6);
}
.ps-8 {
  padding-inline-start: var(--ca-space-8);
}

.pe-1 {
  padding-inline-end: var(--ca-space-1);
}
.pe-2 {
  padding-inline-end: var(--ca-space-2);
}
.pe-3 {
  padding-inline-end: var(--ca-space-3);
}
.pe-4 {
  padding-inline-end: var(--ca-space-4);
}
.pe-6 {
  padding-inline-end: var(--ca-space-6);
}
.pe-8 {
  padding-inline-end: var(--ca-space-8);
}

/* ---- Margin ---- */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: var(--ca-space-1);
}
.m-2 {
  margin: var(--ca-space-2);
}
.m-3 {
  margin: var(--ca-space-3);
}
.m-4 {
  margin: var(--ca-space-4);
}
.m-5 {
  margin: var(--ca-space-5);
}
.m-6 {
  margin: var(--ca-space-6);
}
.m-8 {
  margin: var(--ca-space-8);
}
.m-10 {
  margin: var(--ca-space-10);
}
.m-12 {
  margin: var(--ca-space-12);
}
.m-16 {
  margin: var(--ca-space-16);
}
.m-20 {
  margin: var(--ca-space-20);
}
.m-24 {
  margin: var(--ca-space-24);
}
.m-auto {
  margin: auto;
}

.mx-0 {
  margin-inline: 0;
}
.mx-1 {
  margin-inline: var(--ca-space-1);
}
.mx-2 {
  margin-inline: var(--ca-space-2);
}
.mx-3 {
  margin-inline: var(--ca-space-3);
}
.mx-4 {
  margin-inline: var(--ca-space-4);
}
.mx-6 {
  margin-inline: var(--ca-space-6);
}
.mx-8 {
  margin-inline: var(--ca-space-8);
}
.mx-auto {
  margin-inline: auto;
}

.my-0 {
  margin-block: 0;
}
.my-1 {
  margin-block: var(--ca-space-1);
}
.my-2 {
  margin-block: var(--ca-space-2);
}
.my-3 {
  margin-block: var(--ca-space-3);
}
.my-4 {
  margin-block: var(--ca-space-4);
}
.my-6 {
  margin-block: var(--ca-space-6);
}
.my-8 {
  margin-block: var(--ca-space-8);
}
.my-12 {
  margin-block: var(--ca-space-12);
}
.my-16 {
  margin-block: var(--ca-space-16);
}
.my-24 {
  margin-block: var(--ca-space-24);
}
.my-auto {
  margin-block: auto;
}

.mt-0 {
  margin-block-start: 0;
}
.mt-1 {
  margin-block-start: var(--ca-space-1);
}
.mt-2 {
  margin-block-start: var(--ca-space-2);
}
.mt-3 {
  margin-block-start: var(--ca-space-3);
}
.mt-4 {
  margin-block-start: var(--ca-space-4);
}
.mt-6 {
  margin-block-start: var(--ca-space-6);
}
.mt-8 {
  margin-block-start: var(--ca-space-8);
}
.mt-12 {
  margin-block-start: var(--ca-space-12);
}
.mt-16 {
  margin-block-start: var(--ca-space-16);
}
.mt-20 {
  margin-block-start: var(--ca-space-20);
}
.mt-24 {
  margin-block-start: var(--ca-space-24);
}
.mt-auto {
  margin-block-start: auto;
}

.mb-0 {
  margin-block-end: 0;
}
.mb-1 {
  margin-block-end: var(--ca-space-1);
}
.mb-2 {
  margin-block-end: var(--ca-space-2);
}
.mb-3 {
  margin-block-end: var(--ca-space-3);
}
.mb-4 {
  margin-block-end: var(--ca-space-4);
}
.mb-6 {
  margin-block-end: var(--ca-space-6);
}
.mb-8 {
  margin-block-end: var(--ca-space-8);
}
.mb-12 {
  margin-block-end: var(--ca-space-12);
}
.mb-16 {
  margin-block-end: var(--ca-space-16);
}
.mb-20 {
  margin-block-end: var(--ca-space-20);
}
.mb-24 {
  margin-block-end: var(--ca-space-24);
}
.mb-auto {
  margin-block-end: auto;
}

.ms-0 {
  margin-inline-start: 0;
}
.ms-1 {
  margin-inline-start: var(--ca-space-1);
}
.ms-2 {
  margin-inline-start: var(--ca-space-2);
}
.ms-3 {
  margin-inline-start: var(--ca-space-3);
}
.ms-4 {
  margin-inline-start: var(--ca-space-4);
}
.ms-6 {
  margin-inline-start: var(--ca-space-6);
}
.ms-8 {
  margin-inline-start: var(--ca-space-8);
}
.ms-auto {
  margin-inline-start: auto;
}

.me-0 {
  margin-inline-end: 0;
}
.me-1 {
  margin-inline-end: var(--ca-space-1);
}
.me-2 {
  margin-inline-end: var(--ca-space-2);
}
.me-3 {
  margin-inline-end: var(--ca-space-3);
}
.me-4 {
  margin-inline-end: var(--ca-space-4);
}
.me-6 {
  margin-inline-end: var(--ca-space-6);
}
.me-8 {
  margin-inline-end: var(--ca-space-8);
}
.me-auto {
  margin-inline-end: auto;
}

/* ---- Container ---- */
.ui-container {
  --container-max: 72rem;
  width: min(100% - 2 * var(--ca-space-4), var(--container-max));
  margin-inline: auto;
}

.ui-container--narrow {
  --container-max: 40rem;
}

.ui-container--wide {
  --container-max: 90rem;
}

/* ---- Grid ---- */
.ui-grid {
  display: grid;
  gap: var(--ca-space-4);
  grid-template-columns: minmax(0, 1fr);
}

.ui-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ui-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.ui-grid__span-2 {
  grid-column: span 2;
}

.ui-grid__span-full {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .ui-grid--2,
  .ui-grid--3,
  .ui-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-grid__span-2 {
    grid-column: auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ui-grid--3,
  .ui-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ← ./components/utilities.css */
/**
 * Focused utilities — screen reader, display, flex, text, overflow, width.
 * Not a Bootstrap/Tailwind clone. Spacing lives in layout.css.
 */

/* ---- Screen reader ---- */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Display ---- */
.d-none {
  display: none;
}
.d-inline {
  display: inline;
}
.d-block {
  display: block;
}
.d-flex {
  display: flex;
}
.d-inline-flex {
  display: inline-flex;
}
.d-grid {
  display: grid;
}

@media (min-width: 640px) {
  .d-sm-none {
    display: none;
  }
  .d-sm-block {
    display: block;
  }
}

/* ---- Flex helpers ----
 * Cross-axis defaults for inline text/icon UI:
 *   center   — controls (buttons, badges, chips, icon+label)
 *   baseline — mixed typography on one row (e.g. .pill)
 *   start    — control + wrapping label (checkbox / callout)
 *   end      — layout only (push into a tall container foot)
 */
.flex-row {
  flex-direction: row;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}

/* ---- Text ---- */
.text-start {
  text-align: start;
}
.text-center {
  text-align: center;
}
.text-end {
  text-align: end;
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-muted {
  color: var(--muted);
}
.fw-semibold {
  font-weight: 600;
}
.fw-bold {
  font-weight: 700;
}

/* ---- Overflow ---- */
.overflow-hidden {
  overflow: hidden;
}
.overflow-auto {
  overflow: auto;
}

/* ---- Width ---- */
.w-full {
  width: 100%;
}
.w-auto {
  width: auto;
}
.min-w-0 {
  min-width: 0;
}


/* ← ./components/scrollbar.css */
/**
 * Scrollbar — glass-styled overflow chrome.
 * Opt in with .scrollbar; DS scroll regions share the same tokens.
 */

:root,
html[data-theme='dark'] {
  --scrollbar-size: 0.5rem;
  --scrollbar-size-thin: 0.35rem;
  --scrollbar-track: transparent;
  --scrollbar-thumb: color-mix(in oklab, var(--muted) 52%, transparent);
  --scrollbar-thumb-hover: color-mix(in oklab, var(--muted) 78%, transparent);
}

html[data-theme='light'] {
  --scrollbar-thumb: color-mix(in oklab, var(--color-fg) 26%, transparent);
  --scrollbar-thumb-hover: color-mix(in oklab, var(--color-fg) 42%, transparent);
}

.scrollbar {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.scrollbar--thin {
  --scrollbar-size: var(--scrollbar-size-thin);
}

.scrollbar--hidden {
  scrollbar-width: none;
}

.scrollbar--hidden::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Shared chrome — opt-in class + built-in scroll regions */
.scrollbar:not(.scrollbar--hidden),
.modal-body,
.sheet-body,
.ui-dropdown__menu,
.ui-popover__content,
.ui-filter__popover,
.ui-select__menu,
.ui-month__panel,
.ui-year__panel,
.ui-date__panel,
.ui-scrollspy__pane,
.ui-scrollspy__nav {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.scrollbar:not(.scrollbar--hidden)::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.sheet-body::-webkit-scrollbar,
.ui-dropdown__menu::-webkit-scrollbar,
.ui-popover__content::-webkit-scrollbar,
.ui-filter__popover::-webkit-scrollbar,
.ui-select__menu::-webkit-scrollbar,
.ui-month__panel::-webkit-scrollbar,
.ui-year__panel::-webkit-scrollbar,
.ui-date__panel::-webkit-scrollbar,
.ui-scrollspy__pane::-webkit-scrollbar,
.ui-scrollspy__nav::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.scrollbar:not(.scrollbar--hidden)::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.sheet-body::-webkit-scrollbar-track,
.ui-dropdown__menu::-webkit-scrollbar-track,
.ui-popover__content::-webkit-scrollbar-track,
.ui-filter__popover::-webkit-scrollbar-track,
.ui-select__menu::-webkit-scrollbar-track,
.ui-month__panel::-webkit-scrollbar-track,
.ui-year__panel::-webkit-scrollbar-track,
.ui-date__panel::-webkit-scrollbar-track,
.ui-scrollspy__pane::-webkit-scrollbar-track,
.ui-scrollspy__nav::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

.scrollbar:not(.scrollbar--hidden)::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.sheet-body::-webkit-scrollbar-thumb,
.ui-dropdown__menu::-webkit-scrollbar-thumb,
.ui-popover__content::-webkit-scrollbar-thumb,
.ui-filter__popover::-webkit-scrollbar-thumb,
.ui-select__menu::-webkit-scrollbar-thumb,
.ui-month__panel::-webkit-scrollbar-thumb,
.ui-year__panel::-webkit-scrollbar-thumb,
.ui-date__panel::-webkit-scrollbar-thumb,
.ui-scrollspy__pane::-webkit-scrollbar-thumb,
.ui-scrollspy__nav::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--ca-radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.scrollbar:not(.scrollbar--hidden)::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.sheet-body::-webkit-scrollbar-thumb:hover,
.ui-dropdown__menu::-webkit-scrollbar-thumb:hover,
.ui-popover__content::-webkit-scrollbar-thumb:hover,
.ui-filter__popover::-webkit-scrollbar-thumb:hover,
.ui-select__menu::-webkit-scrollbar-thumb:hover,
.ui-month__panel::-webkit-scrollbar-thumb:hover,
.ui-year__panel::-webkit-scrollbar-thumb:hover,
.ui-date__panel::-webkit-scrollbar-thumb:hover,
.ui-scrollspy__pane::-webkit-scrollbar-thumb:hover,
.ui-scrollspy__nav::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.scrollbar:not(.scrollbar--hidden)::-webkit-scrollbar-corner,
.modal-body::-webkit-scrollbar-corner,
.sheet-body::-webkit-scrollbar-corner,
.ui-dropdown__menu::-webkit-scrollbar-corner,
.ui-popover__content::-webkit-scrollbar-corner,
.ui-filter__popover::-webkit-scrollbar-corner,
.ui-select__menu::-webkit-scrollbar-corner,
.ui-month__panel::-webkit-scrollbar-corner,
.ui-year__panel::-webkit-scrollbar-corner,
.ui-date__panel::-webkit-scrollbar-corner,
.ui-scrollspy__pane::-webkit-scrollbar-corner,
.ui-scrollspy__nav::-webkit-scrollbar-corner {
  background: transparent;
}


/* ← ./components/dropzone.css */
/**
 * Dropzone — glass file drop target.
 * Compose with .glass-focus-surface for hover / focus elevation.
 */

:root,
html[data-theme='dark'] {
  --dropzone-radius: var(--ca-radius-md);
  --dropzone-border: 0.5px dashed var(--glass-border);
  --dropzone-bg: color-mix(in oklab, var(--glass-surface) 70%, transparent);
}

html[data-theme='light'] .dropzone:hover:not(.is-busy),
html[data-theme='light'] .dropzone:focus-within:not(.is-busy),
html[data-theme='light'] .dropzone.is-drag-over {
  background-color: color-mix(in oklab, white 88%, var(--glass-surface-strong));
}

.dropzone {
  position: relative;
  border-radius: var(--dropzone-radius);
  border: var(--dropzone-border);
  background: var(--dropzone-bg);
}

.dropzone[hidden] {
  display: none;
}

.dropzone.is-drag-over {
  border-style: solid;
  border-color: color-mix(in oklab, var(--color-system-blue) 55%, var(--glass-border));
  background-color: color-mix(in oklab, var(--color-system-blue) 12%, var(--glass-surface-strong));
  backdrop-filter: blur(var(--glass-blur)) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%) brightness(1.08);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--color-system-blue) 14%, transparent),
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 12px 32px -18px color-mix(in oklab, var(--color-system-blue) 28%, transparent);
}

.dropzone.is-drag-over.glass-focus-surface::after {
  opacity: 1;
}

.dropzone.is-drag-over .dropzone__trigger {
  pointer-events: none;
}

.dropzone.is-drag-over .dropzone__icon {
  transform: scale(1.06);
  color: var(--color-system-blue);
  background: color-mix(in oklab, var(--color-system-blue) 22%, transparent);
  border-color: color-mix(in oklab, var(--color-system-blue) 40%, var(--glass-border));
}

.dropzone.is-drag-over .dropzone__title {
  color: var(--color-system-blue);
  letter-spacing: 0.01em;
}

.dropzone.is-drag-over .dropzone__hint {
  opacity: 0.55;
}

.dropzone.is-busy {
  pointer-events: none;
  border-style: solid;
  border-color: color-mix(in oklab, var(--color-system-blue) 45%, var(--glass-border));
  background-color: color-mix(in oklab, var(--color-system-blue) 10%, var(--glass-surface-strong));
}

.dropzone.is-loaded {
  border-style: solid;
  border-color: color-mix(in oklab, var(--accent) 45%, var(--glass-border));
  background: color-mix(in oklab, var(--accent) 8%, var(--glass-surface));
}

.dropzone__status {
  display: grid;
  justify-items: center;
  gap: var(--ca-space-2);
  width: 100%;
  padding: var(--ca-space-5) var(--ca-space-4);
  text-align: center;
}

.dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dropzone__trigger {
  display: grid;
  justify-items: center;
  gap: var(--ca-space-2);
  width: 100%;
  padding: var(--ca-space-5) var(--ca-space-4);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.dropzone__trigger:disabled {
  cursor: not-allowed;
}

.dropzone__trigger:focus-visible {
  outline: none;
}

.dropzone__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ca-radius-pill);
  color: var(--accent);
  background: color-mix(in oklab, var(--color-system-blue) 14%, transparent);
  border: 0.5px solid color-mix(in oklab, var(--color-system-blue) 22%, var(--glass-border));
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.dropzone__icon.is-busy {
  color: var(--color-system-blue);
  background: color-mix(in oklab, var(--color-system-blue) 18%, transparent);
  border-color: color-mix(in oklab, var(--color-system-blue) 36%, var(--glass-border));
}

.dropzone__icon .ui-icon,
.dropzone__icon-svg {
  width: 1.35rem;
  height: 1.35rem;
}

.dropzone__title {
  font-size: var(--ca-font-size-md);
  font-weight: 600;
  color: var(--text);
}

.dropzone__hint {
  font-size: var(--ca-font-size-sm);
  color: var(--faint);
}

.dropzone__replace {
  margin-top: var(--ca-space-1);
  font-size: var(--ca-font-size-sm);
}

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

  .dropzone.is-drag-over .dropzone__icon {
    transform: none;
  }
}


/* ← ./components/field.css */
/**
 * Form fields — labels, inputs, validation.
 */
.form {
  display: grid;
  gap: var(--ca-space-3);
}

.field {
  display: grid;
  align-content: start;
  gap: var(--ca-space-1);
  min-width: 0;
}

.field-label,
label {
  display: grid;
  gap: var(--ca-space-1);
  font-size: var(--ca-font-size-sm);
  color: var(--muted);
}

.field-control {
  min-height: 2.75rem;
}

input,
textarea,
select {
  width: 100%;
  border: 0.5px solid var(--glass-border);
  background-color: var(--input-bg);
  color: var(--text);
  border-radius: var(--ca-radius-md);
  padding: var(--ca-space-2) var(--ca-space-3);
  font-family: inherit;
  font-size: var(--ca-font-size-base);
  line-height: 1.25;
  transition:
    border-color var(--ca-duration-fast) ease,
    box-shadow var(--ca-duration-fast) ease,
    background-color var(--ca-duration-base) ease;
}

input[type='checkbox'],
input[type='radio'] {
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  accent-color: var(--accent);
  flex-shrink: 0;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  outline: 2px solid color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  outline-offset: 2px;
  border-color: transparent;
  box-shadow: none;
}

select {
  padding-inline-end: var(--ca-space-8);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%237a8b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ca-space-3) center;
}

html[data-theme='light'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' stroke='%235a6b80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[dir='rtl'] select {
  background-position: left var(--ca-space-3) center;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 22%, transparent);
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
}

input.is-valid:not(.is-invalid),
textarea.is-valid:not(.is-invalid),
select.is-valid:not(.is-invalid) {
  border-color: color-mix(in oklab, var(--ok) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 18%, transparent);
}

.field-error,
.field-success,
.field-hint {
  margin: 0;
  font-size: var(--ca-font-size-sm);
  line-height: 1.35;
}

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

.field-success {
  color: var(--ok);
}

.field-hint {
  color: var(--faint);
}

textarea {
  min-height: var(--ca-space-24);
  resize: vertical;
}

.row {
  display: grid;
  gap: var(--ca-space-3);
}

@media (min-width: 640px) {
  .row.row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  input,
  textarea,
  select {
    /* 16px prevents iOS focus zoom — keep literal */
    font-size: 16px;
    min-height: 2.75rem;
    padding: var(--ca-space-2) var(--ca-space-3);
  }
}


/* ← ./components/input-group.css */
/**
 * Input group — prefix/suffix addon around an input.
 * Classes: .input-group, .input-group__addon, .input-group__text, .input-group--sm
 */

.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border-radius: var(--ca-radius-md);
  border: 0.5px solid var(--glass-border);
  background-color: var(--input-bg);
  overflow: hidden;
  transition:
    border-color var(--ca-duration-fast) ease,
    box-shadow var(--ca-duration-fast) ease,
    background-color var(--ca-duration-base) ease;
}

.input-group:focus-within {
  border-color: color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 22%, transparent);
}

.input-group > input,
.input-group > textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.input-group > input:focus,
.input-group > textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.input-group > input:focus-visible,
.input-group > textarea:focus-visible {
  outline: none;
}

.input-group__addon,
.input-group__text {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: var(--ca-space-1);
  padding-inline: var(--ca-space-3);
  font-size: var(--ca-font-size-sm);
  line-height: 1.25;
  color: var(--muted);
  background-color: color-mix(in oklab, var(--glass-surface) 70%, transparent);
  white-space: nowrap;
  user-select: none;
}

.input-group__addon:not(:last-child),
.input-group__text:not(:last-child) {
  border-inline-end: 0.5px solid var(--glass-border);
}

.input-group__addon:not(:first-child),
.input-group__text:not(:first-child) {
  border-inline-start: 0.5px solid var(--glass-border);
}

.input-group--sm > input,
.input-group--sm > textarea {
  min-height: 2.25rem;
  padding-block: var(--ca-space-1);
  padding-inline: var(--ca-space-2);
  font-size: var(--ca-font-size-sm);
}

.input-group--sm > .input-group__addon,
.input-group--sm > .input-group__text {
  padding-inline: var(--ca-space-2);
  font-size: var(--ca-font-size-sm);
}

.input-group.is-invalid,
.input-group:has(> input.is-invalid),
.input-group:has(> textarea.is-invalid) {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
}

.input-group.is-valid:not(.is-invalid),
.input-group:has(> input.is-valid):not(.is-invalid):not(:has(> input.is-invalid)):not(
    :has(> textarea.is-invalid)
  ),
.input-group:has(> textarea.is-valid):not(.is-invalid):not(:has(> input.is-invalid)):not(
    :has(> textarea.is-invalid)
  ) {
  border-color: color-mix(in oklab, var(--ok) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 18%, transparent);
}

.input-group.is-disabled,
.input-group:has(> input:disabled),
.input-group:has(> textarea:disabled) {
  opacity: 0.55;
  pointer-events: none;
}

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

@media (max-width: 767px) {
  .input-group > input,
  .input-group > textarea {
    /* 16px prevents iOS focus zoom — keep literal */
    font-size: 16px;
    min-height: 2.75rem;
  }

  .input-group--sm > input,
  .input-group--sm > textarea {
    min-height: 2.5rem;
  }
}


/* ← ./components/selection.css */
/**
 * Selection controls — checkbox, radio, switch.
 * Glass surfaces, semantic tokens, logical properties.
 */

.selection-stack {
  display: grid;
  gap: var(--ca-space-2);
  justify-items: start;
}

.checkbox,
.radio,
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-2);
  margin: 0;
  cursor: pointer;
  color: var(--text);
  font-size: var(--ca-font-size-sm);
  line-height: 1.35;
  user-select: none;
}

/* Multi-line labels: pin the control to the first line instead of the block center. */
.checkbox.items-start,
.radio.items-start,
.switch.items-start {
  align-items: flex-start;
}

.checkbox.items-start .checkbox__control,
.radio.items-start .radio__control {
  margin-block-start: 0.1rem;
}

.checkbox__label,
.radio__label,
.switch__label {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: inherit;
  line-height: inherit;
}

input.checkbox__input,
input.radio__input,
input.switch__input {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  accent-color: transparent;
  cursor: pointer;
  z-index: 1;
}

input.switch__input {
  width: 2.5rem;
  height: 1.5rem;
}

.checkbox__control,
.radio__control {
  position: relative;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 0.5px solid var(--glass-border);
  background-color: var(--input-bg);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 14%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 8%, transparent) inset;
  transition:
    border-color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-fast) ease,
    box-shadow var(--ca-duration-fast) ease;
}

.checkbox__control {
  border-radius: 6px;
}

.radio__control {
  border-radius: var(--ca-radius-pill);
}

.checkbox__control::after,
.radio__control::after {
  content: '';
  position: absolute;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity var(--ca-duration-fast) ease,
    transform var(--ca-duration-fast) var(--ca-ease-spring-snappy);
}

.checkbox__control::after {
  /* Optical center in 1.125rem control (rotated L-mark). */
  inset-inline-start: 0.34rem;
  inset-block-start: 0.18rem;
  width: 0.3rem;
  height: 0.52rem;
  border-inline-end: 1.75px solid white;
  border-block-end: 1.75px solid white;
  transform: rotate(45deg) scale(0.6);
}

.radio__control::after {
  inset: 0.28rem;
  border-radius: var(--ca-radius-pill);
  background: white;
}

input.checkbox__input:checked + .checkbox__control,
input.radio__input:checked + .radio__control {
  border-color: transparent;
  background-color: var(--color-system-blue);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, white 22%, transparent) inset,
    0 1px 2px color-mix(in oklab, oklch(0.04 0.02 260) 18%, transparent);
}

input.checkbox__input:checked + .checkbox__control::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

input.radio__input:checked + .radio__control::after {
  opacity: 1;
  transform: scale(1);
}

.checkbox:hover:not(:has(:disabled)) .checkbox__control,
.radio:hover:not(:has(:disabled)) .radio__control {
  border-color: color-mix(in oklab, var(--color-system-blue) 34%, var(--glass-border));
}

input.checkbox__input:focus-visible + .checkbox__control,
input.radio__input:focus-visible + .radio__control,
input.switch__input:focus-visible + .switch__track {
  outline: none;
  border-color: color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 22%, transparent);
}

input.checkbox__input:focus,
input.radio__input:focus,
input.switch__input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: none;
}

.checkbox.is-invalid .checkbox__control,
.radio.is-invalid .radio__control,
input.checkbox__input.is-invalid + .checkbox__control,
input.radio__input.is-invalid + .radio__control {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
}

.switch__track {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid var(--glass-border);
  background-color: color-mix(in oklab, var(--glass-surface-strong) 88%, var(--input-bg));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 14%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 8%, transparent) inset;
  transition:
    border-color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-base) ease,
    box-shadow var(--ca-duration-fast) ease;
}

.switch__thumb {
  --switch-thumb-size: 1.125rem;
  --switch-thumb-inset: 0.1875rem;
  position: absolute;
  /* 100% here is the track padding-box height — centers regardless of 0.5px border. */
  inset-block-start: calc((100% - var(--switch-thumb-size)) / 2);
  inset-inline-start: var(--switch-thumb-inset);
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, white 30%);
  box-shadow:
    0 1px 2px color-mix(in oklab, oklch(0.04 0.02 260) 28%, transparent),
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 20%, transparent) inset;
  transition: inset-inline-start var(--ca-duration-base) var(--ca-ease-spring-snappy);
}

input.switch__input:checked + .switch__track {
  border-color: transparent;
  background-color: var(--color-system-blue);
  box-shadow:
    0 1px 0 0 color-mix(in oklab, white 22%, transparent) inset,
    0 1px 2px color-mix(in oklab, oklch(0.04 0.02 260) 18%, transparent);
}

input.switch__input:checked + .switch__track .switch__thumb {
  inset-inline-start: calc(100% - var(--switch-thumb-inset) - var(--switch-thumb-size));
  background: white;
}

.switch:hover:not(:has(:disabled)) .switch__track {
  border-color: color-mix(in oklab, var(--color-system-blue) 34%, var(--glass-border));
}

.switch.is-invalid .switch__track,
input.switch__input.is-invalid + .switch__track {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
}

.checkbox:has(:disabled),
.radio:has(:disabled),
.switch:has(:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

input.checkbox__input:disabled,
input.radio__input:disabled,
input.switch__input:disabled {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .checkbox__control,
  .radio__control,
  .checkbox__control::after,
  .radio__control::after,
  .switch__track,
  .switch__thumb {
    transition: none;
  }
}


/* ← ./components/pickers.css */
/**
 * Custom Select + MonthPicker + YearPicker + DatePicker — glass triggers, elevated menus.
 */

.ui-select,
.ui-month,
.ui-year,
.ui-date {
  position: relative;
  width: 100%;
  z-index: 1;
}

.ui-select.is-open,
.ui-month.is-open,
.ui-year.is-open,
.ui-date.is-open {
  z-index: 40;
}

.ui-select__trigger,
.ui-month__trigger,
.ui-year__trigger,
.ui-date__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-2);
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-md);
  padding: var(--ca-space-2) var(--ca-space-3);
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--input-bg) 88%, white) 0%,
      var(--input-bg) 100%
    );
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-base);
  line-height: 1.25;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--ca-duration-fast) ease,
    box-shadow var(--ca-duration-fast) ease,
    background-color var(--ca-duration-base) ease,
    transform 0.18s var(--motion-spring);
}

.ui-select__trigger:hover:not(:disabled),
.ui-month__trigger:hover:not(:disabled),
.ui-year__trigger:hover:not(:disabled),
.ui-date__trigger:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--color-system-blue) 34%, var(--glass-border));
}

.ui-select__trigger:focus-visible,
.ui-month__trigger:focus-visible,
.ui-year__trigger:focus-visible,
.ui-date__trigger:focus-visible,
.ui-select.is-open .ui-select__trigger,
.ui-month.is-open .ui-month__trigger,
.ui-year.is-open .ui-year__trigger,
.ui-date.is-open .ui-date__trigger {
  outline: none;
  border-color: color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 22%, transparent);
}

.ui-select.is-invalid .ui-select__trigger,
.ui-month.is-invalid .ui-month__trigger,
.ui-year.is-invalid .ui-year__trigger,
.ui-date.is-invalid .ui-date__trigger {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--glass-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 18%, transparent);
}

.ui-select__trigger:disabled,
.ui-month__trigger:disabled,
.ui-year__trigger:disabled,
.ui-date__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ui-select__value,
.ui-month__value,
.ui-year__value,
.ui-date__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-month.is-empty .ui-month__value,
.ui-year.is-empty .ui-year__value,
.ui-date.is-empty .ui-date__value {
  color: var(--muted);
}

.ui-select__chevron,
.ui-month__chevron,
.ui-month__calendar,
.ui-select__check,
.ui-month__nav-icon,
.ui-year__chevron,
.ui-year__calendar,
.ui-year__nav-icon,
.ui-date__chevron,
.ui-date__calendar,
.ui-date__nav-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.ui-select__chevron,
.ui-month__chevron,
.ui-year__chevron,
.ui-date__chevron {
  color: var(--muted);
  transition: transform var(--ca-duration-base) var(--motion-spring);
}

.ui-select.is-open .ui-select__chevron,
.ui-month.is-open .ui-month__chevron,
.ui-year.is-open .ui-year__chevron,
.ui-date.is-open .ui-date__chevron {
  transform: rotate(180deg);
  color: var(--text);
}

.ui-month__calendar,
.ui-year__calendar,
.ui-date__calendar {
  color: color-mix(in oklab, var(--color-accent) 70%, var(--muted));
}

.ui-select__menu,
.ui-month__panel,
.ui-year__panel,
.ui-date__panel {
  /* Position set inline: absolute inside modal/sheet dialog, fixed on body.
   * z-index 60 sits above host popovers that use ~50 (e.g. filter panels). */
  z-index: 60;
  pointer-events: auto;
  margin: 0;
  padding: var(--ca-space-1);
  list-style: none;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--ca-radius-md);
  background-color: var(--color-bg-elevated);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 18px 48px -18px oklch(0 0 0 / 0.72),
    0 0 0 1px oklch(0 0 0 / 0.35);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  box-sizing: border-box;
}

.ui-select__menu.is-drop-up,
.ui-month__panel.is-drop-up,
.ui-year__panel.is-drop-up,
.ui-date__panel.is-drop-up {
  transform-origin: bottom center;
}

.ui-select__menu {
  max-height: min(16rem, 50vh);
}

.ui-select__option {
  display: flex;
  align-items: center;
  gap: var(--ca-space-2);
  width: 100%;
  min-height: 2.4rem;
  margin: 0;
  border: 0;
  border-radius: var(--ca-radius-sm);
  padding: var(--ca-space-2) var(--ca-space-3);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-md);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--ca-duration-fast) ease, color var(--ca-duration-fast) ease;
}

.ui-select__option:hover,
.ui-select__option.is-active {
  background-color: color-mix(in oklab, var(--color-system-blue) 12%, transparent);
}

.ui-select__option.is-selected {
  background-color: color-mix(in oklab, var(--color-accent) 14%, transparent);
  color: color-mix(in oklab, var(--color-accent-2) 40%, var(--text));
}

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

.ui-select__check {
  color: var(--accent);
}

.ui-month__panel,
.ui-year__panel,
.ui-date__panel {
  padding: var(--ca-space-2);
  min-width: 15.5rem;
}

.ui-date__panel {
  min-width: 17.5rem;
  display: grid;
  gap: var(--ca-space-2);
}

.ui-month__yearbar,
.ui-year__yearbar,
.ui-date__monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-1);
  margin-block-end: var(--ca-space-2);
  padding: 0.1rem 0.1rem var(--ca-space-1);
  border-bottom: 0.5px solid color-mix(in oklab, var(--glass-border) 80%, transparent);
}

.ui-date__monthbar {
  margin-block-end: 0;
}

.ui-month__year,
.ui-year__year,
.ui-date__month {
  font-size: var(--ca-font-size-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.ui-month__nav,
.ui-year__nav,
.ui-date__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border: 0.5px solid transparent;
  border-radius: var(--ca-radius-sm);
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--ca-duration-fast) ease,
    border-color var(--ca-duration-fast) ease,
    color var(--ca-duration-fast) ease,
    transform 0.16s var(--motion-spring-snappy);
}

.ui-month__nav:hover,
.ui-year__nav:hover,
.ui-date__nav:hover {
  color: var(--text);
  border-color: var(--glass-border);
  background-color: color-mix(in oklab, var(--color-system-blue) 10%, transparent);
}

.ui-month__nav:active,
.ui-year__nav:active,
.ui-date__nav:active {
  transform: scale(0.94);
}

.ui-month__nav:focus-visible,
.ui-year__nav:focus-visible,
.ui-date__nav:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  outline-offset: 1px;
}

.ui-month__nav:disabled,
.ui-year__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ui-month__grid,
.ui-year__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ca-space-1);
}

.ui-date__weekdays,
.ui-date__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--ca-space-1);
}

.ui-date__weekday {
  min-height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ca-font-size-xs);
  font-weight: 600;
  color: var(--muted);
}

.ui-month__cell,
.ui-year__cell,
.ui-date__cell {
  min-height: 2.35rem;
  margin: 0;
  border: 0.5px solid transparent;
  border-radius: var(--ca-radius-sm);
  padding: var(--ca-space-1) var(--ca-space-1);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-sm);
  line-height: 1.15;
  cursor: pointer;
  transition: background-color var(--ca-duration-fast) ease,
    border-color var(--ca-duration-fast) ease,
    color var(--ca-duration-fast) ease,
    transform 0.16s var(--motion-spring-snappy);
}

.ui-date__cell {
  min-height: 2.2rem;
  padding: var(--ca-space-1);
}

.ui-date__cell.is-empty {
  pointer-events: none;
  cursor: default;
}

.ui-month__cell:hover,
.ui-year__cell:hover,
.ui-date__cell:hover:not(:disabled):not(.is-empty) {
  background-color: color-mix(in oklab, var(--color-system-blue) 12%, transparent);
  border-color: color-mix(in oklab, var(--color-system-blue) 22%, transparent);
}

.ui-month__cell.is-current:not(.is-selected),
.ui-year__cell.is-current:not(.is-selected),
.ui-date__cell.is-current:not(.is-selected) {
  border-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
  color: color-mix(in oklab, var(--color-accent-2) 45%, var(--text));
}

.ui-month__cell.is-selected,
.ui-year__cell.is-selected,
.ui-date__cell.is-selected {
  background:
    linear-gradient(
      160deg,
      color-mix(in oklab, var(--color-accent) 28%, transparent),
      color-mix(in oklab, var(--color-system-blue) 18%, transparent)
    );
  border-color: color-mix(in oklab, var(--color-accent) 42%, transparent);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 0 0 var(--glass-rim) inset;
}

.ui-month__cell:disabled,
.ui-year__cell:disabled,
.ui-date__cell:disabled,
.ui-date__cell.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ui-month__cell:active,
.ui-year__cell:active,
.ui-date__cell:active:not(:disabled) {
  transform: scale(0.96);
}

.ui-month__cell:focus-visible,
.ui-year__cell:focus-visible,
.ui-date__cell:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-system-blue) 55%, transparent);
  outline-offset: 1px;
}

.ui-date__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ca-space-1);
  border-top: 0.5px solid color-mix(in oklab, var(--glass-border) 80%, transparent);
}

.ui-date__clear {
  margin: 0;
  border: 0;
  border-radius: var(--ca-radius-sm);
  padding: var(--ca-space-1) var(--ca-space-2);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--ca-font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.ui-date__clear:hover:not(:disabled) {
  color: var(--text);
  background: color-mix(in oklab, var(--color-system-blue) 10%, transparent);
}

.ui-date__clear:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html[dir='rtl'] .ui-month__nav-icon.ui-icon--chevron-left,
html[dir='rtl'] .ui-month__nav-icon.ui-icon--chevron-right,
html[dir='rtl'] .ui-year__nav-icon.ui-icon--chevron-left,
html[dir='rtl'] .ui-year__nav-icon.ui-icon--chevron-right,
html[dir='rtl'] .ui-date__nav-icon.ui-icon--chevron-left,
html[dir='rtl'] .ui-date__nav-icon.ui-icon--chevron-right {
  transform: scaleX(-1);
}

@media (max-width: 720px) {
  .ui-select__trigger,
  .ui-month__trigger,
  .ui-year__trigger,
  .ui-date__trigger {
    font-size: 16px;
    min-height: 2.75rem;
  }

  .ui-month__panel,
  .ui-year__panel,
  .ui-date__panel {
    min-width: 0;
  }

  .ui-month__cell,
  .ui-year__cell {
    min-height: 2.55rem;
    font-size: var(--ca-font-size-sm);
  }

  .ui-date__cell {
    min-height: 2.4rem;
    font-size: var(--ca-font-size-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-select__trigger,
  .ui-month__trigger,
  .ui-year__trigger,
  .ui-date__trigger,
  .ui-select__chevron,
  .ui-month__chevron,
  .ui-year__chevron,
  .ui-date__chevron,
  .ui-month__nav,
  .ui-year__nav,
  .ui-date__nav,
  .ui-month__cell,
  .ui-year__cell,
  .ui-date__cell,
  .ui-select__option {
    transition: none;
  }

  .ui-select.is-open .ui-select__chevron,
  .ui-month.is-open .ui-month__chevron,
  .ui-year.is-open .ui-year__chevron,
  .ui-date.is-open .ui-date__chevron {
    transform: none;
  }

  .ui-month__nav:active,
  .ui-year__nav:active,
  .ui-date__nav:active,
  .ui-month__cell:active,
  .ui-year__cell:active,
  .ui-date__cell:active:not(:disabled) {
    transform: none;
  }
}


/* ← ./components/icons.css */
/**
 * Icon masks — SVG files live in public/icons/ (copied to dist/icons/).
 * Host apps should serve the same files at /icons/.
 */

.ui-icon--chevron-down {
  mask-image: url(/icons/chevron-down.svg);
  -webkit-mask-image: url(/icons/chevron-down.svg);
}

.ui-icon--chevron-left {
  mask-image: url(/icons/chevron-left.svg);
  -webkit-mask-image: url(/icons/chevron-left.svg);
}

.ui-icon--chevron-right {
  mask-image: url(/icons/chevron-right.svg);
  -webkit-mask-image: url(/icons/chevron-right.svg);
}

.ui-icon--calendar {
  mask-image: url(/icons/calendar.svg);
  -webkit-mask-image: url(/icons/calendar.svg);
}

.ui-icon--check {
  mask-image: url(/icons/check.svg);
  -webkit-mask-image: url(/icons/check.svg);
}

.ui-icon--close {
  mask-image: url(/icons/close.svg);
  -webkit-mask-image: url(/icons/close.svg);
}

.ui-icon--plus {
  mask-image: url(/icons/plus.svg);
  -webkit-mask-image: url(/icons/plus.svg);
}

.ui-icon--minus {
  mask-image: url(/icons/minus.svg);
  -webkit-mask-image: url(/icons/minus.svg);
}

.ui-icon--theme-sun {
  mask-image: url(/icons/theme-sun.svg);
  -webkit-mask-image: url(/icons/theme-sun.svg);
}

.ui-icon--theme-moon {
  mask-image: url(/icons/theme-moon.svg);
  -webkit-mask-image: url(/icons/theme-moon.svg);
}

.ui-icon--clipboard {
  mask-image: url(/icons/clipboard.svg);
  -webkit-mask-image: url(/icons/clipboard.svg);
}

.ui-icon--upload {
  mask-image: url(/icons/upload.svg);
  -webkit-mask-image: url(/icons/upload.svg);
}

.ui-icon--translate {
  mask-image: url(/icons/translate.svg);
  -webkit-mask-image: url(/icons/translate.svg);
}

.ui-icon--external-link {
  mask-image: url(/icons/external-link.svg);
  -webkit-mask-image: url(/icons/external-link.svg);
}

.ui-icon--autofill {
  mask-image: url(/icons/autofill.svg);
  -webkit-mask-image: url(/icons/autofill.svg);
}

.ui-icon--download {
  mask-image: url(/icons/download.svg);
  -webkit-mask-image: url(/icons/download.svg);
}

.ui-icon--edit {
  mask-image: url(/icons/edit.svg);
  -webkit-mask-image: url(/icons/edit.svg);
}

.ui-icon--trash {
  mask-image: url(/icons/trash.svg);
  -webkit-mask-image: url(/icons/trash.svg);
}

.ui-icon--click {
  mask-image: url(/icons/click.svg);
  -webkit-mask-image: url(/icons/click.svg);
}

.ui-icon--send {
  mask-image: url(/icons/send.svg);
  -webkit-mask-image: url(/icons/send.svg);
}

.ui-icon--feedback {
  mask-image: url(/icons/feedback.svg);
  -webkit-mask-image: url(/icons/feedback.svg);
}

.ui-icon--filter {
  mask-image: url(/icons/filter.svg);
  -webkit-mask-image: url(/icons/filter.svg);
}

.ui-icon--warning {
  mask-image: url(/icons/warning.svg);
  -webkit-mask-image: url(/icons/warning.svg);
}

.ui-icon--log-in {
  mask-image: url(/icons/log-in.svg);
  -webkit-mask-image: url(/icons/log-in.svg);
}

.ui-icon--log-out {
  mask-image: url(/icons/log-out.svg);
  -webkit-mask-image: url(/icons/log-out.svg);
}

.ui-icon--play {
  mask-image: url(/icons/play.svg);
  -webkit-mask-image: url(/icons/play.svg);
}

.ui-icon--stop {
  mask-image: url(/icons/stop.svg);
  -webkit-mask-image: url(/icons/stop.svg);
}

.ui-icon--reload {
  mask-image: url(/icons/reload.svg);
  -webkit-mask-image: url(/icons/reload.svg);
}

.ui-icon--layouts {
  mask-image: url(/icons/layouts.svg);
  -webkit-mask-image: url(/icons/layouts.svg);
}


/* ← ./components/badge.css */
/**
 * Status badges, chips, and stat pills.
 */
.badge {
  font-family: var(--mono);
  font-size: var(--ca-font-size-xs);
  padding: var(--ca-space-1) var(--ca-space-2);
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid var(--glass-border);
  white-space: nowrap;
  background: color-mix(in oklab, var(--color-bg-deep) 70%, transparent);
  display: inline-flex;
  align-items: center;
}

.badge.tiny {
  font-size: var(--ca-font-size-xs);
  padding: 0.12rem var(--ca-space-2);
}

.badge.queued,
.badge.running {
  color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 40%, transparent);
  background: var(--warn-soft);
}

.badge.submitted,
.badge.ok {
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 40%, transparent);
  background: var(--ok-soft);
}

.badge.needs_review {
  color: color-mix(in oklab, var(--warn) 88%, white);
  border-color: color-mix(in oklab, var(--warn) 40%, transparent);
  background: var(--warn-soft);
}

.badge.failed,
.badge.danger {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 40%, transparent);
  background: var(--danger-soft);
}

.chip {
  font-family: var(--mono);
  font-size: var(--ca-font-size-xs);
  padding: var(--ca-space-1) var(--ca-space-2);
  border-radius: var(--ca-radius-pill);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

html[data-theme='light'] .chip.channel.email {
  color: color-mix(in oklab, var(--color-system-blue) 72%, var(--color-fg));
  border-color: color-mix(in oklab, var(--color-system-blue) 38%, transparent);
  background: color-mix(in oklab, var(--color-system-blue) 14%, var(--color-bg-elevated));
}

html[data-theme='light'] .chip.channel.ats {
  color: color-mix(in oklab, var(--color-accent-hot) 68%, var(--color-fg));
  border-color: color-mix(in oklab, var(--color-accent-hot) 40%, transparent);
  background: color-mix(in oklab, var(--color-accent-hot) 14%, var(--color-bg-elevated));
}

html[data-theme='light'] .chip.channel.unknown {
  color: color-mix(in oklab, var(--warn) 78%, var(--color-fg));
  border-color: color-mix(in oklab, var(--warn) 42%, transparent);
  background: color-mix(in oklab, var(--warn) 12%, var(--color-bg-elevated));
}

.pill {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ca-space-2);
  padding: var(--ca-space-2) var(--ca-space-3);
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid color-mix(in oklab, var(--glass-border) 80%, var(--color-system-blue) 20%);
  background-color: color-mix(in oklab, var(--glass-surface-strong) 90%, var(--color-bg-elevated));
  backdrop-filter: blur(var(--ca-blur-soft)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--ca-blur-soft)) saturate(180%);
  box-shadow:
    0 1px 0 0 var(--glass-rim) inset,
    0 1px 10px -6px color-mix(in oklab, var(--color-system-blue) 18%, transparent);
  font-size: var(--ca-font-size-sm);
}

.pill-k {
  color: var(--pill-label);
  font-family: var(--mono);
  font-size: var(--ca-font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pill-v {
  font-weight: 650;
  color: var(--pill-value);
}

.dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}

.dot.submitted,
.dot.ok {
  background: var(--ok);
}

.dot.needs_review,
.dot.running,
.dot.queued {
  background: var(--warn);
}

.dot.failed,
.dot.danger {
  background: var(--danger);
}


/* ← ./components/stepper.css */
/**
 * Horizontal progress stepper — icon nodes, connector rails, current/done states.
 * Compose inside a .panel (or any surface). Host owns outer margin.
 */

.ui-stepper .panel-head {
  margin-bottom: var(--ca-space-3);
}

.ui-stepper__purpose {
  margin: var(--ca-space-1) 0 0;
  font-size: var(--ca-font-size-sm);
  line-height: 1.35;
  color: var(--muted);
  text-wrap: balance;
}

.ui-stepper__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}

.ui-stepper__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ui-stepper__rail {
  position: absolute;
  top: var(--ca-space-3);
  inset-inline-start: calc(-50% + var(--ca-space-3));
  inset-inline-end: calc(50% + var(--ca-space-3));
  height: 2px;
  border-radius: 1px;
  background: color-mix(in oklab, var(--glass-border) 88%, var(--faint));
  pointer-events: none;
}

.ui-stepper__rail.is-filled {
  background: color-mix(in oklab, var(--ok) 72%, var(--glass-border));
}

.ui-stepper__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ca-space-2);
  padding: var(--ca-space-1) var(--ca-space-1) var(--ca-space-1);
  color: var(--muted);
}

.ui-stepper__node {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface-strong) 88%, transparent);
  color: var(--muted);
  flex-shrink: 0;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.ui-stepper__icon,
.ui-stepper__check {
  width: 0.85rem;
  height: 0.85rem;
}

.ui-stepper__label {
  font-size: var(--ca-font-size-xs);
  font-weight: 550;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  max-width: 7.5rem;
  hyphens: auto;
}

.ui-stepper__step.is-done .ui-stepper__node {
  border-color: color-mix(in oklab, var(--ok) 55%, var(--glass-border));
  background: color-mix(in oklab, var(--ok) 16%, var(--glass-surface));
  color: var(--ok);
}

.ui-stepper__step.is-current .ui-stepper__node {
  border-color: color-mix(in oklab, var(--color-system-blue) 55%, var(--glass-border));
  background: color-mix(in oklab, var(--color-system-blue) 18%, var(--glass-surface));
  color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 22%, transparent);
}

.ui-stepper__step.is-current .ui-stepper__body {
  color: var(--text);
}

.ui-stepper__step.is-current .ui-stepper__label {
  font-weight: 650;
}

@media (max-width: 767px) {
  .ui-stepper .panel-head {
    margin-bottom: var(--ca-space-3);
  }

  .ui-stepper__purpose {
    font-size: var(--ca-font-size-sm);
    line-height: 1.3;
  }

  .ui-stepper__body {
    gap: var(--ca-space-1);
    padding: 0.1rem 0.1rem var(--ca-space-1);
  }

  .ui-stepper__node {
    width: 1.5rem;
    height: 1.5rem;
  }

  .ui-stepper__icon,
  .ui-stepper__check {
    width: 0.78rem;
    height: 0.78rem;
  }

  .ui-stepper__rail {
    top: var(--ca-space-3);
    inset-inline-start: calc(-50% + var(--ca-space-3));
    inset-inline-end: calc(50% + var(--ca-space-3));
  }

  .ui-stepper__label {
    font-size: var(--ca-font-size-xs);
    max-width: none;
    width: 100%;
    padding-inline: 0.1rem;
  }
}

@media (max-width: 379px) {
  .ui-stepper__label {
    font-size: var(--ca-font-size-xs);
    line-height: 1.2;
  }

  .ui-stepper__node {
    width: 1.35rem;
    height: 1.35rem;
  }

  .ui-stepper__rail {
    top: var(--ca-space-3);
    inset-inline-start: calc(-50% + var(--ca-space-3));
    inset-inline-end: calc(50% + var(--ca-space-3));
  }
}

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


/* ← ./components/filter.css */
/**
 * Filter control — trigger button, elevated popover, removable chips.
 * Compose fields inside .ui-filter__fields; host owns filter logic.
 */

.ui-filter {
  position: relative;
  flex-shrink: 0;
}

.ui-filter.is-open {
  z-index: 40;
}

.ui-filter__trigger {
  position: relative;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding-inline: var(--ca-space-3);
  justify-content: center;
}

.ui-filter__trigger.is-active,
.ui-filter__trigger.is-open {
  border-color: color-mix(in oklab, var(--color-system-blue) 45%, var(--glass-border));
  background: color-mix(in oklab, var(--color-system-blue) 12%, var(--glass-surface));
}

.ui-filter__badge {
  position: absolute;
  top: calc(-1 * var(--ca-space-1));
  inset-inline-end: calc(-1 * var(--ca-space-1));
  min-width: 1.1rem;
  height: 1.1rem;
  padding-inline: var(--ca-space-1);
  border-radius: var(--ca-radius-pill);
  background: var(--color-system-blue);
  color: #fff;
  font-size: var(--ca-font-size-xs);
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  pointer-events: none;
}

.ui-filter__popover {
  /* Position / size come from floating placement (same as Select / DatePicker). */
  z-index: 50;
  box-sizing: border-box;
  padding: var(--ca-space-3);
  border-radius: var(--ca-radius-lg);
  border: 0.5px solid var(--line-strong);
  background-color: var(--color-bg-elevated);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 18px 48px -18px oklch(0 0 0 / 0.72),
    0 0 0 1px oklch(0 0 0 / 0.35);
  display: grid;
  gap: var(--ca-space-3);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  pointer-events: auto;
}

.ui-filter__popover[hidden] {
  display: none;
}

.ui-filter__popover.is-drop-up {
  transform-origin: bottom center;
}

.ui-filter__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ca-space-2);
}

.ui-filter__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ca-space-3) var(--ca-space-3);
}

.ui-filter__field {
  display: grid;
  gap: var(--ca-space-1);
  min-width: 0;
}

.ui-filter__field--full {
  grid-column: 1 / -1;
}

.ui-filter__label {
  font-size: var(--ca-font-size-sm);
  font-weight: 600;
  color: var(--muted);
}

.ui-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ca-space-2);
}

.ui-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  margin: 0;
  padding: var(--ca-space-1) var(--ca-space-2);
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid color-mix(in oklab, var(--color-system-blue) 35%, var(--glass-border));
  background: color-mix(in oklab, var(--color-system-blue) 10%, var(--glass-surface));
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-sm);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.ui-filter-chip:hover {
  background: color-mix(in oklab, var(--color-system-blue) 18%, var(--glass-surface));
  border-color: color-mix(in oklab, var(--color-system-blue) 50%, var(--glass-border));
}

.ui-filter-chip__icon {
  width: 0.7rem;
  height: 0.7rem;
  opacity: 0.7;
}

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


/* ← ./components/modal.css */
/**
 * Modal dialog — centered overlay.
 */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: max(var(--ca-space-4), env(safe-area-inset-top)) var(--ca-space-4) max(var(--ca-space-4), env(safe-area-inset-bottom));
  pointer-events: none;
}

.modal-root:not([hidden]),
.modal-root[data-open='true'],
.modal-root.is-open {
  display: grid;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  pointer-events: auto;
  background: color-mix(in oklab, var(--color-bg-deep) 58%, transparent);
  backdrop-filter: blur(var(--ca-blur-backdrop));
  -webkit-backdrop-filter: blur(var(--ca-blur-backdrop));
}

html[data-theme='light'] .modal-backdrop {
  background: color-mix(in oklab, var(--color-bg-deep) 42%, transparent);
}

.modal-dialog {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  pointer-events: auto;
  width: min(42rem, 100%);
  max-height: min(88vh, 52rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--radius-glass);
  border: 1px solid var(--line-strong);
  background-color: var(--color-bg-elevated);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 28px 80px -20px oklch(0 0 0 / 0.72),
    0 0 0 1px oklch(0 0 0 / 0.35);
  outline: none;
  animation: ca-pop 0.34s var(--motion-spring) both;
}

.modal-dialog--wide {
  width: min(40rem, 100%);
  max-height: min(92vh, 56rem);
}

html[data-theme='light'] .modal-dialog {
  background-color: var(--color-bg-elevated);
  border-color: var(--glass-border);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 80%, transparent) inset,
    0 28px 64px -24px color-mix(in oklab, var(--color-fg) 22%, transparent);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-3);
  padding: var(--ca-space-4) var(--ca-space-4) var(--ca-space-3);
  border-bottom: 0.5px solid var(--glass-border);
  background-color: color-mix(in oklab, var(--color-bg-elevated) 94%, var(--color-bg-mid));
}

.modal-title {
  margin: 0;
  font-size: var(--ca-font-size-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.modal-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--color-bg-mid) 88%, var(--color-bg-elevated));
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--ca-duration-base) ease,
    color var(--ca-duration-base) ease,
    border-color var(--ca-duration-base) ease;
}

.modal-close:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--color-bg-mid) 70%, var(--color-bg-elevated));
}

.modal-close-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.modal-body {
  overflow: auto;
  padding: var(--ca-space-4) var(--ca-space-4) var(--ca-space-4);
  background-color: var(--color-bg-elevated);
}

.modal-confirm {
  display: grid;
  gap: var(--ca-space-3);
}

.modal-confirm__text {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
}

.modal-confirm__detail {
  margin: 0;
  font-size: var(--ca-font-size-sm);
  color: var(--muted);
}


/* ← ./components/sheet.css */
/**
 * Bottom sheet — mobile-first overlay.
 */
.sheet-root {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  align-items: end;
  pointer-events: none;
}

.sheet-root:not([hidden]),
.sheet-root[data-open='true'],
.sheet-root.is-open {
  display: grid;
  pointer-events: auto;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  pointer-events: auto;
  background: color-mix(in oklab, var(--color-bg-deep) 58%, transparent);
  backdrop-filter: blur(var(--ca-blur-backdrop));
  -webkit-backdrop-filter: blur(var(--ca-blur-backdrop));
}

.sheet-dialog {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  pointer-events: auto;
  width: 100%;
  max-height: min(90dvh, 52rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: var(--radius-glass) var(--radius-glass) 0 0;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  background-color: var(--color-bg-elevated);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 -12px 48px -16px oklch(0 0 0 / 0.55);
  outline: none;
  padding-bottom: env(safe-area-inset-bottom);
  animation: ca-sheet-rise 0.34s var(--motion-spring) both;
}

.sheet-handle {
  width: 2.25rem;
  height: 0.28rem;
  margin: var(--ca-space-2) auto 0;
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--muted) 55%, transparent);
  box-sizing: content-box;
  padding: var(--ca-space-2) var(--ca-space-6);
  background-clip: content-box;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-3);
  padding: var(--ca-space-1) var(--ca-space-4) var(--ca-space-3);
  border-bottom: 0.5px solid var(--glass-border);
  background-color: color-mix(in oklab, var(--color-bg-elevated) 94%, var(--color-bg-mid));
}

.sheet-title {
  margin: 0;
  font-size: var(--ca-font-size-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
}

.sheet-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--color-bg-mid) 88%, var(--color-bg-elevated));
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--ca-duration-base) ease, color var(--ca-duration-base) ease, border-color var(--ca-duration-base) ease;
}

.sheet-close:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--color-bg-mid) 70%, var(--color-bg-elevated));
}

.sheet-close-icon {
  width: 0.95rem;
  height: 0.95rem;
}

.sheet-drag {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.sheet-drag:active {
  cursor: grabbing;
}

.sheet-body {
  overflow: auto;
  padding: var(--ca-space-4) var(--ca-space-4) var(--ca-space-5);
  background-color: var(--color-bg-elevated);
  -webkit-overflow-scrolling: touch;
}

@keyframes ca-sheet-rise {
  from {
    opacity: 0.88;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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


/* ← ./components/feedback.css */
/**
 * Loading skeletons + empty states.
 */
.skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: color-mix(in oklab, var(--glass-surface-strong) 72%, transparent);
  border-radius: var(--ca-radius-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--glass-highlight) 42%, transparent) 50%,
    transparent 100%
  );
  animation: ca-skeleton-shimmer 1.35s ease-in-out infinite;
}

.skeleton--text {
  height: 0.72rem;
  width: 100%;
  border-radius: 6px;
}

.skeleton--title {
  height: 1rem;
  width: 68%;
  border-radius: var(--ca-radius-sm);
}

.skeleton--pill {
  height: 1.35rem;
  width: 5.5rem;
  border-radius: var(--ca-radius-pill);
}

.skeleton--badge {
  height: 1.35rem;
  width: 4.25rem;
  border-radius: var(--ca-radius-pill);
}

.skeleton--button {
  height: 2.35rem;
  width: 5.5rem;
  border-radius: var(--ca-radius-sm);
}

.skeleton--block {
  height: 4rem;
  width: 100%;
  border-radius: var(--ca-radius-md);
}

.skeleton--chip {
  height: 1.45rem;
  width: 5.75rem;
  border-radius: var(--ca-radius-pill);
}

/* Glass surfaces are near-white in light mode — tint from fg so bars read on panels. */
html[data-theme='light'] .skeleton {
  background: color-mix(in oklab, var(--color-fg) 12%, transparent);
}

html[data-theme='light'] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in oklab, var(--color-fg) 14%, transparent) 50%,
    transparent 100%
  );
}

@keyframes ca-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
    opacity: 0.35;
  }
}

.empty-state {
  color: var(--muted);
  font-size: var(--ca-font-size-md);
  padding: var(--ca-space-5) var(--ca-space-3);
  text-align: center;
  border: 0.5px dashed var(--glass-border);
  border-radius: var(--ca-radius-md);
  background: color-mix(in oklab, var(--glass-surface) 70%, transparent);
}

.empty-state p {
  margin: 0;
}

.empty-state__action {
  margin-top: var(--ca-space-3);
}

.empty-detail {
  margin-top: var(--ca-space-2);
  font-size: var(--ca-font-size-sm);
  color: var(--faint);
}

/**
 * Inline callout / alert — warn tone by default; optional leading icon.
 */
.ui-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--ca-space-2);
  margin: 0;
  padding: var(--ca-space-2) var(--ca-space-3);
  border-radius: var(--ca-radius-sm);
  border: 0.5px solid color-mix(in oklab, var(--warn) 55%, var(--glass-border));
  background: color-mix(in oklab, var(--warn) 12%, var(--glass-surface));
  color: var(--text);
  font-size: var(--ca-font-size-sm);
  line-height: 1.4;
}

.ui-callout--danger {
  border-color: color-mix(in oklab, var(--danger) 55%, var(--glass-border));
  background: color-mix(in oklab, var(--danger) 12%, var(--glass-surface));
}

.ui-callout--info {
  border-color: color-mix(in oklab, var(--color-system-blue) 45%, var(--glass-border));
  background: color-mix(in oklab, var(--color-system-blue) 12%, var(--glass-surface));
}

.ui-callout__icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
  background-color: var(--warn);
}

.ui-callout--danger .ui-callout__icon {
  background-color: var(--danger);
}

.ui-callout--info .ui-callout__icon {
  background-color: var(--color-system-blue);
}


/* ← ./components/toast.css */
/**
 * Toast stack — transient feedback over the app chrome.
 */
html[data-theme='light'] .toast {
  background-color: color-mix(in oklab, var(--glass-surface-strong) 92%, white);
  backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(1.02);
}

html[data-theme='light'] .toast::after {
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.55) 0%,
    transparent 40%,
    transparent 70%,
    oklch(0.7 0.05 254 / 0.08) 100%
  );
}

html[data-theme='light'] .toast-success {
  background-color: color-mix(in oklab, var(--ok-soft) 62%, var(--glass-surface-strong));
}

html[data-theme='light'] .toast-success .toast-title {
  color: color-mix(in oklab, var(--ok) 78%, var(--color-fg));
}

html[data-theme='light'] .toast-error {
  background-color: color-mix(in oklab, var(--danger-soft) 62%, var(--glass-surface-strong));
}

html[data-theme='light'] .toast-error .toast-title {
  color: color-mix(in oklab, var(--danger) 82%, var(--color-fg));
}

.toast-stack {
  position: fixed;
  inset-inline-end: max(var(--ca-space-4), env(safe-area-inset-right));
  inset-inline-start: auto;
  inset-block-end: max(var(--ca-space-4), env(safe-area-inset-bottom));
  inset-block-start: auto;
  z-index: 1200;
  display: grid;
  gap: var(--ca-space-3);
  width: min(
    22.5rem,
    calc(100dvw - var(--ca-space-8) - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
  max-width: calc(100% - 2rem);
  pointer-events: none;
}

/* Explicit alias of the default bottom + inline-end placement. */
.toast-stack--bottom-end {
  inset-inline-end: max(var(--ca-space-4), env(safe-area-inset-right));
  inset-inline-start: auto;
  inset-block-end: max(var(--ca-space-4), env(safe-area-inset-bottom));
  inset-block-start: auto;
}

.toast-stack--bottom-start {
  inset-inline-start: max(var(--ca-space-4), env(safe-area-inset-left));
  inset-inline-end: auto;
  inset-block-end: max(var(--ca-space-4), env(safe-area-inset-bottom));
  inset-block-start: auto;
}

.toast-stack--top-end {
  inset-inline-end: max(var(--ca-space-4), env(safe-area-inset-right));
  inset-inline-start: auto;
  inset-block-start: max(var(--ca-space-4), env(safe-area-inset-top));
  inset-block-end: auto;
}

.toast-stack--top-start {
  inset-inline-start: max(var(--ca-space-4), env(safe-area-inset-left));
  inset-inline-end: auto;
  inset-block-start: max(var(--ca-space-4), env(safe-area-inset-top));
  inset-block-end: auto;
}

.toast {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--ca-space-3);
  padding: var(--ca-space-3) var(--ca-space-4);
  border-radius: var(--radius-glass);
  border: 0.5px solid var(--glass-border);
  background-color: color-mix(in oklab, var(--glass-surface-strong) 88%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--text);
  box-shadow:
    0 0 0 0.5px var(--glass-highlight) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 -1px 0 0 oklch(0 0 0 / 0.08) inset,
    0 16px 36px -24px var(--glass-shadow);
  pointer-events: auto;
}

.toast::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    128deg,
    oklch(1 0 0 / 0.16) 0%,
    transparent 36%,
    transparent 64%,
    oklch(1 0 0 / 0.06) 100%
  );
  mix-blend-mode: soft-light;
}

.toast > * {
  position: relative;
  z-index: 1;
}

.toast-body {
  min-width: 0;
}

.toast p {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.toast-title {
  font-size: var(--ca-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}

.toast-body > p:not(.toast-title) {
  color: var(--muted);
  font-size: var(--ca-font-size-sm);
}

.toast-message {
  color: var(--text);
  font-size: var(--ca-font-size-md);
  line-height: 1.45;
}

.toast-icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid currentColor;
  display: inline-grid;
  place-items: center;
  font-size: var(--ca-font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
  background: color-mix(in oklab, currentColor 12%, transparent);
  box-shadow: 0 0 0 0.5px color-mix(in oklab, currentColor 22%, transparent) inset;
}

.toast-success {
  border-color: color-mix(in oklab, var(--ok) 42%, var(--glass-border));
  background-color: color-mix(in oklab, var(--ok-soft) 55%, var(--glass-surface));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--ok) 28%, var(--glass-highlight)) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 12px 32px -20px color-mix(in oklab, var(--ok) 28%, var(--glass-shadow));
}

.toast-success .toast-title {
  color: color-mix(in oklab, var(--ok) 88%, white);
}

.toast-success .toast-icon {
  color: var(--ok);
  border-color: color-mix(in oklab, var(--ok) 55%, transparent);
}

.toast-success .toast-icon::before {
  content: '✓';
}

.toast-error {
  border-color: color-mix(in oklab, var(--danger) 42%, var(--glass-border));
  background-color: color-mix(in oklab, var(--danger-soft) 55%, var(--glass-surface));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--danger) 28%, var(--glass-highlight)) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 12px 32px -20px color-mix(in oklab, var(--danger) 28%, var(--glass-shadow));
}

.toast-error .toast-title {
  color: color-mix(in oklab, var(--danger) 88%, white);
}

.toast-error .toast-icon {
  color: var(--danger);
  border-color: color-mix(in oklab, var(--danger) 55%, transparent);
}

.toast-error .toast-icon::before {
  content: '!';
}

.toast-info {
  border-color: color-mix(in oklab, var(--accent) 35%, var(--glass-border));
  background-color: color-mix(in oklab, var(--accent-soft) 55%, var(--glass-surface));
}

.toast-info .toast-title {
  color: var(--accent);
}

.toast-info .toast-icon {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
}

.toast-info .toast-icon::before {
  content: 'i';
}

.toast-warn {
  border-color: color-mix(in oklab, var(--warn) 42%, var(--glass-border));
  background-color: color-mix(in oklab, var(--warn-soft) 55%, var(--glass-surface));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--warn) 28%, var(--glass-highlight)) inset,
    0 1px 0 0 var(--glass-rim) inset,
    0 12px 32px -20px color-mix(in oklab, var(--warn) 28%, var(--glass-shadow));
}

.toast-warn .toast-title {
  color: color-mix(in oklab, var(--warn) 88%, white);
}

.toast-warn .toast-icon {
  color: var(--warn);
  border-color: color-mix(in oklab, var(--warn) 55%, transparent);
}

.toast-warn .toast-icon::before {
  content: '!';
}

.toast-warn .toast-message {
  color: var(--text);
}

.toast-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: var(--ca-space-1);
  flex-shrink: 0;
  border-radius: var(--ca-radius-sm);
  transition: color var(--ca-duration-base) ease, background-color var(--ca-duration-base) ease;
}

.toast-close:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, transparent);
}

.toast-close-icon {
  width: 1rem;
  height: 1rem;
}


/* ← ./components/motion.css */
/**
 * Shared motion keyframes used by overlays and entrances.
 */
@keyframes ca-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 0.7rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ca-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ca-pop {
  from {
    opacity: 0;
    transform: translate3d(0, -0.4rem, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ca-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ca-expand {
  from {
    opacity: 0;
    transform: translate3d(0, -0.35rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Circular theme reveal from the toggle (View Transitions API). */
@keyframes ca-theme-reveal {
  from {
    clip-path: circle(0px at var(--theme-x, 50%) var(--theme-y, 50%));
  }
  to {
    clip-path: circle(var(--theme-r, 100vmax) at var(--theme-x, 50%) var(--theme-y, 50%));
  }
}

@keyframes ca-theme-leave {
  to {
    opacity: 0;
    transform: scale(1.012);
  }
}

@keyframes ca-theme-enter {
  from {
    opacity: 0;
    transform: scale(0.988);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ca-theme-icon {
  0% {
    transform: rotate(0deg) scale(1);
  }
  40% {
    transform: rotate(52deg) scale(0.82);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

.ca-animate-rise {
  animation: ca-rise 0.45s ease-out both;
}

.ca-animate-pop {
  animation: ca-pop 0.34s var(--motion-spring) both;
}

/* Alias used by Select / MonthPicker menus. */
.motion-pop {
  animation: ca-pop 0.34s var(--motion-spring) both;
}

.ca-animate-enter {
  animation: ca-enter 0.5s var(--motion-spring) both;
  animation-delay: var(--ca-delay, 0ms);
}

/**
 * Scrambled / decipher numbers & short labels.
 * Keep the final string as the accessible name; `.ca-scramble__glyphs` is decorative.
 * Wire with `scrambleElement` / `wireScrambles` (JS) — CSS alone cannot randomize glyphs.
 */
.ca-scramble {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ca-scramble__glyphs {
  display: inline-block;
  min-width: calc(var(--ca-scramble-ch, 4) * 1ch);
  text-align: inherit;
}

.ca-scramble.is-pending .ca-scramble__glyphs {
  visibility: hidden;
}

/**
 * Card / grid stagger — delay from `--ca-stagger-index` (0-based).
 * Cap in JS (≤6 items, ≤~360ms) so large grids do not drip forever.
 */
.ca-stagger-item {
  animation-delay: calc(var(--ca-stagger-index, 0) * var(--ca-stagger-step, 60ms));
}

/* Host-app aliases (landing / shell entrances, inline reveals). */
@media (prefers-reduced-motion: no-preference) {
  .motion-enter {
    animation: ca-enter 0.78s var(--motion-spring) both;
    animation-delay: var(--enter-delay, 0ms);
  }

  .motion-expand {
    animation: ca-expand var(--ca-duration-spring) var(--motion-spring) both;
  }

  /* Theme: circular reveal from the toggle (Chromium, Safari 18+) */
  html[data-theme-to]::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
    z-index: 1;
  }

  html[data-theme-to]::view-transition-new(root) {
    animation: ca-theme-reveal 0.48s ease-out both;
    mix-blend-mode: normal;
    z-index: 2;
  }

  /* Fallback when View Transitions are unavailable */
  .is-theme-leaving {
    animation: ca-theme-leave var(--ca-duration-fast) ease forwards;
    pointer-events: none;
  }

  .is-theme-entering {
    animation: ca-theme-enter var(--ca-duration-spring) ease both;
  }

  .is-theme-toggling .ui-icon--theme,
  .is-theme-toggling .theme-icon {
    animation: ca-theme-icon 0.48s ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ca-animate-rise,
  .ca-animate-pop,
  .ca-animate-enter,
  .ca-stagger-item,
  .motion-pop,
  .motion-enter,
  .motion-expand {
    animation: none !important;
  }

  .ca-scramble.is-pending .ca-scramble__glyphs {
    visibility: visible;
  }
}

.msg {
  margin: 0;
  font-size: var(--ca-font-size-sm);
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hint {
  font-size: var(--ca-font-size-sm);
  color: var(--faint);
}

.meta-line {
  font-size: var(--ca-font-size-sm);
  color: var(--faint);
  font-family: var(--mono);
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.meta-line.link {
  text-decoration: none;
  color: var(--accent);
}

.meta-line.link:hover {
  text-decoration: underline;
}


/* ← ./components/active-indicator.css */
/**
 * Sliding active highlight for Tabs, Nav, Scrollspy, and similar tracks.
 * Classes: .ui-active-track
 * Vars: --ui-indicator-x/y/w/h/opacity (set by activeIndicator.ts / host JS)
 */

.ui-active-track {
  position: relative;
  --ui-indicator-x: 0px;
  --ui-indicator-y: 0px;
  --ui-indicator-w: 0px;
  --ui-indicator-h: 0px;
  --ui-indicator-opacity: 0;
}

.ui-active-track::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  z-index: 0;
  width: var(--ui-indicator-w);
  height: var(--ui-indicator-h);
  transform: translate3d(var(--ui-indicator-x), var(--ui-indicator-y), 0);
  opacity: var(--ui-indicator-opacity);
  pointer-events: none;
  border-radius: inherit;
  border: 0.5px solid color-mix(in oklab, var(--color-system-blue) 35%, var(--glass-border));
  background: color-mix(in oklab, var(--color-system-blue) 14%, var(--glass-surface-strong));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 20%, transparent) inset;
}

.ui-active-track[data-indicator-ready]::before {
  transition:
    transform var(--ca-duration-spring) var(--ca-ease-spring),
    width var(--ca-duration-spring) var(--ca-ease-spring),
    height var(--ca-duration-spring) var(--ca-ease-spring),
    opacity var(--ca-duration-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
  .ui-active-track[data-indicator-ready]::before {
    transition: none;
  }
}


/* ← ./components/tabs.css */
/**
 * Tabs — glass tablist + panels with sliding active thumb.
 * Classes: .ui-tabs, .ui-tabs__list, .ui-tabs__trigger, .ui-tabs__content
 * Indicator: .ui-active-track / .ui-active-track__thumb (see active-indicator.css)
 */

.ui-tabs {
  display: grid;
  gap: var(--ca-space-3);
}

.ui-tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-1);
  padding: var(--ca-space-1);
  margin: 0;
  list-style: none;
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 88%, transparent);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
}

.ui-tabs[data-orientation='vertical'] .ui-tabs__list {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  border-radius: var(--radius-glass);
}

.ui-tabs__trigger {
  position: relative;
  z-index: 1;
  appearance: none;
  margin: 0;
  border: 0.5px solid transparent;
  border-radius: var(--ca-radius-pill);
  padding: var(--ca-space-2) var(--ca-space-4);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--ca-font-size-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  cursor: pointer;
  transition: color var(--ca-duration-fast) ease;
}

.ui-tabs[data-orientation='vertical'] .ui-tabs__trigger {
  width: 100%;
  justify-content: flex-start;
  border-radius: var(--radius-glass);
}

.ui-tabs__trigger:hover:not(:disabled):not([aria-selected='true']) {
  color: var(--text);
  background: color-mix(in oklab, var(--glass-surface-strong) 55%, transparent);
}

.ui-tabs__trigger[aria-selected='true'],
.ui-tabs__trigger.is-active {
  color: var(--text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ui-tabs__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-tabs__trigger:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

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

.ui-tabs__content[hidden] {
  display: none;
}

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


/* ← ./components/dropdown.css */
/**
 * Dropdown menu — trigger + elevated menu surface.
 * Classes: .ui-dropdown, .ui-dropdown__trigger, .ui-dropdown__menu, .ui-dropdown__item
 */

.ui-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ui-dropdown.is-open {
  z-index: 40;
}

.ui-dropdown__menu {
  /* Position / size from floating placement (same as Select / Filter). */
  z-index: 60;
  box-sizing: border-box;
  margin: 0;
  padding: var(--ca-space-1);
  list-style: none;
  min-width: 10.5rem;
  border-radius: var(--ca-radius-md);
  border: 0.5px solid var(--line-strong);
  background-color: var(--color-bg-elevated);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 18px 48px -18px oklch(0 0 0 / 0.72),
    0 0 0 1px oklch(0 0 0 / 0.35);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  pointer-events: auto;
}

.ui-dropdown__menu.is-drop-up {
  transform-origin: bottom center;
}

.ui-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--ca-space-2);
  width: 100%;
  min-height: 2.35rem;
  margin: 0;
  border: 0;
  border-radius: var(--ca-radius-sm);
  padding: var(--ca-space-2) var(--ca-space-3);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-md);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--ca-duration-fast) ease, color var(--ca-duration-fast) ease;
}

.ui-dropdown__item:hover:not(:disabled),
.ui-dropdown__item:focus-visible,
.ui-dropdown__item.is-active {
  outline: none;
  background-color: color-mix(in oklab, var(--color-system-blue) 12%, transparent);
}

.ui-dropdown__item:disabled,
.ui-dropdown__item[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.ui-dropdown__item--danger {
  color: var(--danger);
}

.ui-dropdown__item--danger:hover:not(:disabled),
.ui-dropdown__item--danger:focus-visible,
.ui-dropdown__item--danger.is-active {
  background-color: var(--danger-soft);
}

.ui-dropdown__sep {
  height: 1px;
  margin: var(--ca-space-1) var(--ca-space-2);
  border: 0;
  background: color-mix(in oklab, var(--glass-border) 80%, transparent);
}


/* ← ./components/tooltip.css */
/**
 * Tooltip — accessible hover/focus hint (not title-only).
 * Classes: .ui-tooltip, .ui-tooltip__trigger, .ui-tooltip__content
 * Interactive tips portal to body (or dialog) via [data-floating]; nested
 * absolute placement remains for static demos.
 */

.ui-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.ui-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.ui-tooltip__content {
  z-index: 70;
  width: max-content;
  max-width: min(16rem, 70vw);
  padding: var(--ca-space-1) var(--ca-space-3);
  border-radius: var(--ca-radius-sm);
  border: 0.5px solid var(--line-strong);
  /* Dense opaque surface so underlying copy never bleeds through. */
  background-color: color-mix(in oklab, var(--color-bg-mid) 40%, var(--color-bg-deep));
  color: var(--text);
  font-size: var(--ca-font-size-sm);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 8%, transparent) inset,
    0 10px 28px -14px oklch(0 0 0 / 0.72),
    0 0 0 1px oklch(0 0 0 / 0.35);
  pointer-events: none;
}

/* Static / SSR demos: anchor inside the trigger wrapper. */
.ui-tooltip > .ui-tooltip__content {
  position: absolute;
  left: 50%;
  /* Keep centering out of `transform` so pop animation cannot override it. */
  translate: -50% 0;
}

.ui-tooltip > .ui-tooltip__content[data-side='top'] {
  bottom: calc(100% + var(--ca-space-1));
}

.ui-tooltip > .ui-tooltip__content[data-side='bottom'] {
  top: calc(100% + var(--ca-space-1));
}

/* Portaled tips — position comes from floating placement styles. */
.ui-tooltip__content[data-floating] {
  margin: 0;
}

html[data-theme='light'] .ui-tooltip__content {
  background-color: color-mix(in oklab, var(--color-bg-elevated) 70%, white);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 55%, transparent) inset,
    0 10px 24px -12px oklch(0.45 0.05 254 / 0.32),
    0 0 0 1px oklch(0.55 0.06 254 / 0.14);
}

.ui-tooltip__content[hidden] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-tooltip__content:not([hidden]):is([data-placed], .ui-tooltip > .ui-tooltip__content) {
    /* Transform-only — opacity keyframes were leaving the tip see-through/invisible. */
    animation: ca-tooltip-pop-top var(--ca-duration-base) var(--motion-spring) both;
  }

  .ui-tooltip__content:not([hidden])[data-side='bottom']:is(
      [data-placed],
      .ui-tooltip > .ui-tooltip__content
    ) {
    animation-name: ca-tooltip-pop-bottom;
  }
}

@keyframes ca-tooltip-pop-top {
  from {
    transform: translate3d(0, calc(var(--ca-space-1) * -1), 0) scale(0.98);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ca-tooltip-pop-bottom {
  from {
    transform: translate3d(0, var(--ca-space-1), 0) scale(0.98);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}


/* ← ./components/progress.css */
/**
 * Linear progress — determinate fill or indeterminate shimmer.
 */
.progress {
  --progress-h: 0.4rem;
  display: block;
  width: 100%;
  height: var(--progress-h);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--glass-surface-strong) 72%, transparent);
  overflow: hidden;
  box-shadow: 0 0 0 0.5px color-mix(in oklab, var(--glass-border) 70%, transparent);
}

.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--color-system-blue) 88%, white),
    var(--color-accent-hot)
  );
  box-shadow: 0 0 12px -2px color-mix(in oklab, var(--glow-accent) 70%, transparent);
  /* Compositor-friendly fill: keep --progress-value as a percent (e.g. 42%). */
  transform: scaleX(calc(var(--progress-value, 0%) / 100%));
  transform-origin: inline-start center;
  transition: transform var(--ca-duration-base) var(--ca-ease-spring);
}

.progress--indeterminate .progress__bar {
  width: 36%;
  max-width: none;
  transform: none;
  transition: none;
}

html[data-theme='light'] .progress {
  background: color-mix(in oklab, var(--color-fg) 10%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .progress--indeterminate .progress__bar {
    animation: ca-progress-indeterminate 1.35s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress--indeterminate .progress__bar {
    width: 100%;
    opacity: 0.55;
  }
}

@keyframes ca-progress-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}


/* ← ./components/spinner.css */
/**
 * Standalone spinner — same language as .btn-spinner, usable outside buttons.
 */
.spinner {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: var(--ca-radius-pill);
  border-style: solid;
  border-color: color-mix(in oklab, currentColor 35%, transparent);
  border-top-color: currentColor;
  color: var(--accent);
  vertical-align: middle;
}

.spinner--sm {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 1.5px;
}

.spinner--md {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .spinner {
    animation: ca-spin 0.75s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    border-color: color-mix(in oklab, currentColor 55%, transparent);
    border-top-color: currentColor;
    opacity: 0.85;
  }
}


/* ← ./components/divider.css */
/**
 * Divider — horizontal rule or vertical separator.
 */
.divider {
  display: block;
  border: 0;
  margin: 0;
  background: color-mix(in oklab, var(--line) 88%, transparent);
  flex-shrink: 0;
}

.divider:not(.divider--vertical) {
  width: 100%;
  height: 1px;
  margin-block: var(--ca-space-3);
}

.divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1.25em;
  align-self: stretch;
  margin-inline: var(--ca-space-3);
  vertical-align: middle;
}


/* ← ./components/link.css */
/**
 * Text link — accent underline on hover/focus; optional external affordance.
 */
.ui-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0.2rem;
  outline: none;
  transition:
    color var(--ca-duration-fast) ease,
    text-decoration-color var(--ca-duration-fast) ease;
}

.ui-link:hover {
  color: var(--color-system-blue-hover);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.ui-link:focus-visible {
  color: var(--color-system-blue-hover);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 28%, transparent);
}

.ui-link--external .ui-link__icon {
  width: 0.8em;
  height: 0.8em;
  flex-shrink: 0;
  opacity: 0.85;
}


/* ← ./components/accordion.css */
/**
 * Accordion — collapsible glass sections.
 * Classes: .ui-accordion, .ui-accordion__item, .ui-accordion__trigger,
 *          .ui-accordion__chevron, .ui-accordion__panel, .ui-accordion__panel-body
 */

.ui-accordion {
  display: grid;
  gap: var(--ca-space-2);
}

.ui-accordion__item {
  overflow: hidden;
  border-radius: var(--radius-glass);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 88%, transparent);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
}

.ui-accordion__item.is-open {
  border-color: color-mix(in oklab, var(--color-system-blue) 28%, var(--glass-border));
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, transparent);
}

.ui-accordion__trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-3);
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  padding-block: var(--ca-space-3);
  padding-inline: var(--ca-space-4);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition:
    color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-base) ease;
}

.ui-accordion__trigger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--glass-surface-strong) 45%, transparent);
}

.ui-accordion__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-accordion__trigger:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: -2px;
}

.ui-accordion__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  transition: transform var(--ca-duration-base) var(--ca-ease-spring);
}

.ui-accordion__item.is-open .ui-accordion__chevron {
  transform: rotate(180deg);
}

.ui-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ca-duration-base) var(--ca-ease-spring);
}

.ui-accordion__item.is-open .ui-accordion__panel {
  grid-template-rows: 1fr;
}

.ui-accordion__panel-body {
  overflow: hidden;
  min-height: 0;
  padding-inline: var(--ca-space-4);
  color: var(--muted);
  font-size: var(--ca-font-size-md);
  line-height: 1.45;
}

.ui-accordion__item.is-open .ui-accordion__panel-body {
  padding-block: var(--ca-space-3) var(--ca-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .ui-accordion__trigger,
  .ui-accordion__chevron,
  .ui-accordion__panel {
    transition: none;
  }
}


/* ← ./components/popover.css */
/**
 * Popover — generic floating panel (Filter is a specialized variant; leave it alone).
 * Classes: .ui-popover, .ui-popover__trigger, .ui-popover__content
 */

.ui-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ui-popover.is-open {
  z-index: 40;
}

.ui-popover__content {
  /* Position / size from floating placement (same as Dropdown / Filter). */
  z-index: 55;
  box-sizing: border-box;
  margin: 0;
  padding: var(--ca-space-3);
  min-width: 12rem;
  border-radius: var(--ca-radius-lg);
  border: 0.5px solid var(--line-strong);
  background-color: var(--color-bg-elevated);
  color: var(--text);
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 10%, transparent) inset,
    0 18px 48px -18px oklch(0 0 0 / 0.72),
    0 0 0 1px oklch(0 0 0 / 0.35);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: top center;
  pointer-events: auto;
}

.ui-popover__content.is-drop-up {
  transform-origin: bottom center;
}

.ui-popover__content:focus {
  outline: none;
}

.ui-popover__content:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

html[data-theme='light'] .ui-popover__content {
  box-shadow:
    0 0 0 1px color-mix(in oklab, white 55%, transparent) inset,
    0 18px 40px -16px oklch(0.45 0.05 254 / 0.28),
    0 0 0 1px oklch(0.55 0.06 254 / 0.12);
}

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


/* ← ./components/avatar.css */
/**
 * Avatar — image or initials fallback; sizes sm / md / lg.
 */
.avatar {
  --avatar-size: 2rem;
  --avatar-font: var(--ca-font-size-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--ca-radius-pill);
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface-strong) 88%, var(--color-bg-elevated));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 18%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 10%, transparent) inset;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--avatar-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}

.avatar--sm {
  --avatar-size: 1.5rem;
  --avatar-font: var(--ca-font-size-xs);
}

.avatar--md {
  --avatar-size: 2rem;
  --avatar-font: var(--ca-font-size-sm);
}

.avatar--lg {
  --avatar-size: 2.75rem;
  --avatar-font: var(--ca-font-size-md);
}

.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: color-mix(in oklab, var(--accent) 72%, var(--text));
  background: color-mix(in oklab, var(--accent-soft) 70%, transparent);
}


/* ← ./components/pagination.css */
/**
 * Pagination — prev / next + page buttons.
 */
.pagination {
  display: block;
  max-width: 100%;
  min-width: 0;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

.pagination__item {
  display: inline-flex;
  align-items: center;
}

.pagination__btn {
  --pagination-btn-bg: color-mix(in oklab, var(--glass-surface-strong) 88%, transparent);
  --pagination-btn-border: var(--glass-border);
  --pagination-btn-color: var(--text);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--ca-space-2);
  border: 0.5px solid var(--pagination-btn-border);
  border-radius: var(--ca-radius-sm);
  background: var(--pagination-btn-bg);
  color: var(--pagination-btn-color);
  font-family: var(--font);
  font-size: var(--ca-font-size-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 14%, transparent) inset;
  transition:
    border-color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-fast) ease,
    color var(--ca-duration-fast) ease,
    opacity var(--ca-duration-fast) ease;
}

.pagination__btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--glass-surface-strong) 96%, white 4%);
  border-color: color-mix(in oklab, var(--text) 22%, transparent);
}

.pagination__btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 14%, transparent) inset,
    0 0 0 3px color-mix(in oklab, var(--color-system-blue) 28%, transparent);
}

.pagination__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pagination__btn--current {
  --pagination-btn-bg: var(--color-system-blue);
  --pagination-btn-border: transparent;
  --pagination-btn-color: white;
  font-weight: 600;
  box-shadow:
    0 1px 0 0 color-mix(in oklab, white 22%, transparent) inset,
    0 1px 2px color-mix(in oklab, oklch(0.04 0.02 260) 18%, transparent);
}

.pagination__btn--current:hover:not(:disabled) {
  --pagination-btn-bg: var(--color-system-blue-hover);
  border-color: transparent;
  color: white;
}

.pagination__btn--prev,
.pagination__btn--next {
  gap: var(--ca-space-1);
  padding-inline: var(--ca-space-3);
  color: var(--muted);
}

.pagination__btn--prev:hover:not(:disabled),
.pagination__btn--next:hover:not(:disabled) {
  color: var(--text);
}


/* ← ./components/breadcrumb.css */
/**
 * Breadcrumb — nav trail with ordered list and separators.
 */
.breadcrumb {
  display: block;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-1) var(--ca-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--ca-font-size-sm);
  line-height: 1.4;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  min-width: 0;
}

.breadcrumb__link {
  font-size: inherit;
  font-weight: 500;
}

.breadcrumb__page {
  color: var(--text);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  color: var(--faint);
  font-weight: 400;
  user-select: none;
  margin-inline: var(--ca-space-1);
}


/* ← ./components/button-group.css */
/**
 * Button group — segmented glass control wrapping related .btn children.
 * Classes: .btn-group
 */

.btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: var(--ca-space-1);
  border-radius: var(--ca-radius-pill);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 88%, transparent);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
}

.btn-group > .btn {
  --btn-radius: var(--ca-radius-pill);
  border-radius: var(--btn-radius);
  box-shadow: none;
}

.btn-group > .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost) {
  --btn-bg: transparent;
  --btn-border: transparent;
  background: transparent;
  border-color: transparent;
}

.btn-group > .btn:not(.btn-primary):not(.btn-danger):not(.btn-ghost):hover:not(:disabled) {
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, transparent);
  border-color: transparent;
}

.btn-group > .btn + .btn {
  margin-inline-start: 0.1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .btn-group > .btn:hover:not(:disabled) {
    transform: none;
  }
}

.btn-group > .btn:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 1px;
  z-index: 1;
}


/* ← ./components/list.css */
/**
 * List group — glass list surface with optional actionable items.
 * Classes: .ui-list, .ui-list__item
 */

.ui-list {
  --list-bg: color-mix(in oklab, var(--glass-surface) 90%, transparent);
  --list-radius: var(--ca-radius-md);
  --list-pad: var(--ca-space-1);

  display: flex;
  flex-direction: column;
  gap: var(--ca-space-1);
  margin: 0;
  padding: var(--list-pad);
  list-style: none;
  border-radius: var(--list-radius);
  border: 0.5px solid var(--glass-border);
  background: var(--list-bg);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
}

.ui-list__item {
  display: flex;
  align-items: center;
  gap: var(--ca-space-2);
  margin: 0;
  padding: var(--ca-space-2) var(--ca-space-3);
  border-radius: var(--ca-radius-sm);
  color: var(--text);
  font-size: var(--ca-font-size-md);
  line-height: 1.35;
  min-height: 2.4rem;
}

.ui-list__item.is-selected {
  background: color-mix(in oklab, var(--color-system-blue) 14%, var(--glass-surface-strong));
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--color-system-blue) 30%, var(--glass-border));
}

.ui-list__item--actionable {
  appearance: none;
  width: 100%;
  border: 0.5px solid transparent;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--ca-duration-fast) ease,
    border-color var(--ca-duration-base) ease,
    box-shadow var(--ca-duration-base) ease;
}

.ui-list__item--actionable:hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in oklab, var(--glass-surface-strong) 65%, transparent);
}

.ui-list__item--actionable:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 1px;
}

.ui-list__item--actionable:disabled,
.ui-list__item--actionable[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-list__item--actionable.is-selected:hover:not(:disabled):not([aria-disabled='true']) {
  background: color-mix(in oklab, var(--color-system-blue) 18%, var(--glass-surface-strong));
}


/* ← ./components/table.css */
/**
 * Table — semantic glass data table.
 * Classes: .ui-table, .ui-table__head, .ui-table__body, .ui-table__row,
 *          .ui-table__header, .ui-table__cell
 */

.ui-table {
  --table-radius: var(--ca-radius-md);
  --table-border: var(--glass-border);
  --table-bg: color-mix(in oklab, var(--glass-surface) 90%, transparent);

  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 0.5px solid var(--table-border);
  border-radius: var(--table-radius);
  background: var(--table-bg);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
  overflow: hidden;
  font-size: var(--ca-font-size-md);
  line-height: 1.4;
}

.ui-table__header {
  padding: var(--ca-space-3) var(--ca-space-3);
  text-align: start;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  background: color-mix(in oklab, var(--glass-surface-strong) 55%, transparent);
  border-bottom: 0.5px solid color-mix(in oklab, var(--line) 88%, transparent);
}

.ui-table__cell {
  padding: var(--ca-space-3) var(--ca-space-3);
  text-align: start;
  color: var(--text);
  border-bottom: 0.5px solid color-mix(in oklab, var(--line) 70%, transparent);
  vertical-align: middle;
}

.ui-table__body .ui-table__row:last-child .ui-table__cell {
  border-bottom: 0;
}

.ui-table__row:hover .ui-table__cell {
  background: color-mix(in oklab, var(--glass-surface-strong) 40%, transparent);
}

.ui-table__head .ui-table__header:first-child {
  border-start-start-radius: calc(var(--table-radius) - 1px);
}

.ui-table__head .ui-table__header:last-child {
  border-start-end-radius: calc(var(--table-radius) - 1px);
}

.ui-table__body .ui-table__row:last-child .ui-table__cell:first-child {
  border-end-start-radius: calc(var(--table-radius) - 1px);
}

.ui-table__body .ui-table__row:last-child .ui-table__cell:last-child {
  border-end-end-radius: calc(var(--table-radius) - 1px);
}


/* ← ./components/carousel.css */
/**
 * Carousel — glass slides with prev/next + optional indicators.
 * Classes: .carousel, .carousel__viewport, .carousel__track, .carousel__slide,
 * .carousel__controls, .carousel__btn, .carousel__indicators, .carousel__indicator
 */

.carousel {
  --carousel-radius: var(--radius-glass);
  --carousel-pad: var(--ca-space-4) var(--ca-space-4) 1.15rem;
  --carousel-gap: var(--ca-space-3);

  position: relative;
  display: grid;
  gap: var(--carousel-gap);
  padding: var(--carousel-pad);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--carousel-radius);
  background: color-mix(in oklab, var(--glass-surface) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(180%);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 10%, transparent) inset,
    0 18px 36px -28px var(--glass-shadow);
  outline: none;
}

.carousel:focus-visible {
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset,
    0 1px 0 0 color-mix(in oklab, white 10%, transparent) inset,
    0 18px 36px -28px var(--glass-shadow),
    0 0 0 3px color-mix(in oklab, var(--color-system-blue) 28%, transparent);
}

.carousel__viewport {
  overflow: hidden;
  border-radius: var(--ca-radius-sm);
  min-width: 0;
}

.carousel__track {
  display: flex;
  width: 100%;
  transition: transform var(--ca-duration-spring) var(--ca-ease-spring-snappy);
}

/* Promote a layer only while sliding (React / host toggle .is-sliding). */
.carousel.is-sliding .carousel__track {
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: var(--ca-space-3) var(--ca-space-4);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--ca-font-size-md);
  line-height: 1.45;
}

.carousel__slide[aria-hidden='true'] {
  visibility: hidden;
  pointer-events: none;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-2);
}

.carousel__btn {
  --carousel-btn-bg: color-mix(in oklab, var(--glass-surface-strong) 88%, transparent);
  --carousel-btn-border: var(--glass-border);
  --carousel-btn-color: var(--muted);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ca-space-1);
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--ca-space-3);
  margin: 0;
  border: 0.5px solid var(--carousel-btn-border);
  border-radius: var(--ca-radius-sm);
  background: var(--carousel-btn-bg);
  color: var(--carousel-btn-color);
  font-family: var(--font);
  font-size: var(--ca-font-size-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 14%, transparent) inset;
  transition:
    border-color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-fast) ease,
    color var(--ca-duration-fast) ease,
    opacity var(--ca-duration-fast) ease;
}

.carousel__btn:hover:not(:disabled) {
  --carousel-btn-color: var(--text);
  background: color-mix(in oklab, var(--glass-surface-strong) 96%, white 4%);
  border-color: color-mix(in oklab, var(--text) 22%, transparent);
}

.carousel__btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 14%, transparent) inset,
    0 0 0 3px color-mix(in oklab, var(--color-system-blue) 28%, transparent);
}

.carousel__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.carousel__btn .ui-icon {
  width: 1rem;
  height: 1rem;
}

.carousel__indicators {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ca-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel__indicator {
  appearance: none;
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  margin: 0;
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, transparent);
  cursor: pointer;
  transition:
    background-color var(--ca-duration-fast) ease,
    border-color var(--ca-duration-fast) ease,
    transform var(--ca-duration-fast) ease,
    box-shadow var(--ca-duration-fast) ease;
}

.carousel__indicator:hover {
  border-color: color-mix(in oklab, var(--text) 22%, transparent);
  background: color-mix(in oklab, var(--glass-surface-strong) 90%, white 4%);
}

.carousel__indicator[aria-current='true'] {
  background: var(--color-system-blue);
  border-color: transparent;
  box-shadow:
    0 1px 0 0 color-mix(in oklab, white 22%, transparent) inset;
}

.carousel__indicator:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-system-blue) 28%, transparent);
}

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

  .carousel__indicator {
    transition: none;
  }
}


/* ← ./components/scrollspy.css */
/**
 * Scrollspy — side nav that highlights the section in view.
 * Classes: .ui-scrollspy, .ui-scrollspy__nav, .ui-scrollspy__pane,
 *          .ui-scrollspy__section, .is-active (on links)
 * Sliding thumb via .ui-active-track on .ui-scrollspy__nav
 */

.ui-scrollspy {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr);
  gap: var(--ca-space-3) var(--ca-space-4);
  align-items: start;
  min-width: 0;
}

.ui-scrollspy__nav {
  display: flex;
  flex-direction: column;
  gap: var(--ca-space-1);
  margin: 0;
  padding: var(--ca-space-1);
  list-style: none;
  position: sticky;
  top: 0;
  border-radius: var(--ca-radius-md);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 88%, transparent);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
}

.ui-scrollspy__nav a {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: var(--ca-space-2) var(--ca-space-3);
  border-radius: var(--ca-radius-sm);
  border: 0.5px solid transparent;
  color: var(--muted);
  font-size: var(--ca-font-size-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--ca-duration-fast) ease;
}

.ui-scrollspy__nav a:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--glass-surface-strong) 55%, transparent);
}

.ui-scrollspy__nav a:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

.ui-scrollspy__nav a.is-active,
.ui-scrollspy a.is-active {
  color: var(--text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ui-scrollspy__nav a.is-active:hover,
.ui-scrollspy a.is-active:hover {
  background: transparent;
}

.ui-scrollspy__pane {
  min-width: 0;
  max-height: 22rem;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--ca-radius-md);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 70%, transparent);
}

.ui-scrollspy__section {
  min-height: 11rem;
  padding: var(--ca-space-4) var(--ca-space-4) var(--ca-space-5);
  scroll-margin-top: var(--ca-space-2);
}

.ui-scrollspy__section + .ui-scrollspy__section {
  border-top: 0.5px solid color-mix(in oklab, var(--glass-border) 80%, transparent);
}

.ui-scrollspy__section h3 {
  margin: 0 0 var(--ca-space-2);
  font-size: var(--ca-font-size-lg);
  letter-spacing: -0.02em;
}

.ui-scrollspy__section p {
  margin: 0;
  color: var(--muted);
  font-size: var(--ca-font-size-md);
  line-height: 1.45;
}

@media (max-width: 560px) {
  .ui-scrollspy {
    grid-template-columns: 1fr;
  }

  .ui-scrollspy__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

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


/* ← ./components/nav.css */
/**
 * Nav — link list for navbar or standalone (not Tabs).
 * Classes: .ui-nav, .ui-nav--vertical, .ui-nav__list, .ui-nav__item, .ui-nav__link, .is-active
 * Sliding thumb via .ui-active-track on .ui-nav__list
 */

.ui-nav {
  display: block;
  min-width: 0;
}

.ui-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--ca-radius-pill);
  min-width: 0;
  max-width: 100%;
}

.ui-nav--vertical .ui-nav__list {
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
  border-radius: var(--radius-glass);
}

.ui-nav__item {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  max-width: 100%;
}

.ui-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-1);
  max-width: 100%;
  margin: 0;
  padding-block: var(--ca-space-2);
  padding-inline: var(--ca-space-3);
  border: 0.5px solid transparent;
  border-radius: var(--ca-radius-pill);
  /* Near-primary text — muted alone washes out on glass / busy hero fields. */
  color: color-mix(in oklab, var(--text) 88%, var(--muted));
  font-size: var(--ca-font-size-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-decoration: none;
  outline: none;
  overflow-wrap: anywhere;
  transition: color var(--ca-duration-fast) ease;
}

.ui-nav--vertical .ui-nav__link {
  width: 100%;
  border-radius: var(--radius-glass);
  justify-content: flex-start;
}

.ui-nav__link:hover {
  color: var(--text);
  background: color-mix(in oklab, var(--glass-surface-strong) 55%, transparent);
}

.ui-nav__link:focus-visible {
  color: var(--text);
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

.ui-nav__link.is-active,
.ui-nav__link[aria-current='page'],
.ui-nav__link[aria-current='location'],
.ui-nav__link[data-active] {
  color: var(--text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ui-nav__link.is-active:hover,
.ui-nav__link[aria-current='page']:hover,
.ui-nav__link[aria-current='location']:hover,
.ui-nav__link[data-active]:hover {
  background: transparent;
}

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


/* ← ./components/navbar.css */
/**
 * Navbar — glass app chrome bar with mobile collapse.
 * Classes: .ui-navbar, .ui-navbar--sticky, .ui-navbar--island, .ui-navbar--embed,
 *          .ui-navbar__inner, .ui-navbar__brand, .ui-navbar__toggle,
 *          .ui-navbar__collapse, .ui-navbar__actions, .is-open
 */

.ui-navbar {
  --navbar-pad-y: var(--ca-space-2);
  --navbar-pad-x: var(--ca-space-3);
  --navbar-gap: var(--ca-space-3);
  --navbar-blur: var(--glass-blur);

  position: relative;
  isolation: isolate;
  z-index: 20;
  width: 100%;
  border-block-end: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 88%, transparent);
  backdrop-filter: blur(var(--navbar-blur)) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(var(--navbar-blur)) saturate(200%) brightness(1.08);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset,
    0 12px 28px -24px var(--glass-shadow);
}

.ui-navbar--sticky {
  position: sticky;
  inset-block-start: 0;
}

.ui-navbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--navbar-gap);
  padding-block: var(--navbar-pad-y);
  padding-inline: var(--navbar-pad-x);
  max-inline-size: 72rem;
  margin-inline: auto;
}

.ui-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ca-space-2);
  min-width: 0;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.ui-navbar__brand a {
  color: inherit;
  text-decoration: none;
}

.ui-navbar__toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  padding: var(--ca-space-2);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, transparent);
  color: var(--text);
  cursor: pointer;
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
  transition:
    background-color var(--ca-duration-base) ease,
    border-color var(--ca-duration-base) ease;
}

.ui-navbar__toggle:hover {
  background: color-mix(in oklab, var(--glass-surface-strong) 92%, transparent);
  border-color: color-mix(in oklab, var(--text) 18%, transparent);
}

.ui-navbar__toggle:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

.ui-navbar__toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ca-space-1);
  width: 1.1rem;
  height: 1.1rem;
}

.ui-navbar__toggle-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--ca-duration-base) var(--ca-ease-spring),
    opacity var(--ca-duration-fast) ease;
  transform-origin: center;
}

.ui-navbar.is-open .ui-navbar__toggle-bar:nth-child(1) {
  transform: translateY(0.34rem) rotate(45deg);
}

.ui-navbar.is-open .ui-navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.ui-navbar.is-open .ui-navbar__toggle-bar:nth-child(3) {
  transform: translateY(-0.34rem) rotate(-45deg);
}

.ui-navbar__collapse {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ca-space-3);
  padding-block: var(--ca-space-1) var(--ca-space-2);
  min-width: 0;
}

.ui-navbar__collapse.is-open {
  display: flex;
}

.ui-navbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ca-space-2);
}

/*
 * Default (non-island) mobile — stack nav links when the toggle is present.
 * Island page chrome uses the fixed-menu rules below; this covers Agency etc.
 */
@media (max-width: 47.999rem) {
  .ui-navbar:not(.ui-navbar--island):has(.ui-navbar__toggle) .ui-nav {
    min-width: 0;
    width: 100%;
  }

  .ui-navbar:not(.ui-navbar--island):has(.ui-navbar__toggle) .ui-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
  }

  .ui-navbar:not(.ui-navbar--island):has(.ui-navbar__toggle) .ui-nav__item {
    width: 100%;
    min-width: 0;
  }

  .ui-navbar:not(.ui-navbar--island):has(.ui-navbar__toggle) .ui-nav__link {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-glass);
  }

  .ui-navbar:not(.ui-navbar--island):has(.ui-navbar__toggle) .ui-navbar__actions {
    width: 100%;
    min-width: 0;
    padding-block-start: var(--ca-space-2);
    border-block-start: 0.5px solid var(--line);
  }
}

/* Desktop: always show collapse; hide toggle. */
@media (min-width: 48rem) {
  .ui-navbar__toggle {
    display: none;
  }

  .ui-navbar__collapse,
  .ui-navbar__collapse.is-open {
    display: flex;
    flex-basis: auto;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--ca-space-4);
    padding-block: 0;
    margin-inline-start: var(--ca-space-1);
  }

  .ui-navbar__actions {
    margin-inline-start: auto;
  }
}

html[data-theme='light'] .ui-navbar:not(.ui-navbar--island) {
  background: color-mix(in oklab, var(--glass-surface-strong) 90%, white);
  backdrop-filter: blur(var(--ca-blur-soft)) saturate(160%) brightness(1.02);
  -webkit-backdrop-filter: blur(var(--ca-blur-soft)) saturate(160%) brightness(1.02);
}

/*
 * Island — layout variant only.
 * Glass chrome = same tokens/recipe as default .ui-navbar.
 * Nested rails = light translucent tint (not nested-surface opacity).
 * Links = stock .ui-nav (no color overrides).
 */
.ui-navbar--island {
  --navbar-pad-y: 0;
  --navbar-pad-x: 0;
  --navbar-gap: var(--ca-space-2);
  /* Shared glass fill for island shell + mobile open menu. */
  --navbar-island-bg: color-mix(in oklab, var(--glass-surface) 70%, transparent);
  --navbar-island-backdrop: blur(var(--navbar-blur)) saturate(200%) brightness(1.06);
  /* Backdrop lives on __inner; avoid a backdrop root on the shell. */
  isolation: auto;
  background: transparent;
  border-block-end: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-block: max(var(--ca-space-2), env(safe-area-inset-top, 0px)) var(--ca-space-3);
  padding-inline: var(--ca-space-4);
  z-index: 50;
}

.ui-navbar--island .ui-navbar__inner {
  position: relative;
  flex-wrap: nowrap;
  width: 100%;
  max-inline-size: min(100%, 72rem);
  margin-inline: auto;
  padding-block: var(--ca-space-2);
  padding-inline: var(--ca-space-3);
  border-radius: var(--ca-radius-pill);
  color: var(--text);
  /*
   * Glass on ::before only. backdrop-filter on this box would make it a
   * containing block for the fixed mobile menu and trap its backdrop.
   */
  background: transparent;
  border: 0.5px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ui-navbar--island .ui-navbar__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--navbar-island-bg);
  border: 0.5px solid var(--glass-border);
  backdrop-filter: var(--navbar-island-backdrop);
  -webkit-backdrop-filter: var(--navbar-island-backdrop);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset,
    0 12px 28px -24px var(--glass-shadow);
}

.ui-navbar--island .ui-navbar__brand,
.ui-navbar--island .ui-navbar__toggle,
.ui-navbar--island .ui-navbar__collapse {
  position: relative;
  z-index: 1;
}

.ui-navbar--island .ui-navbar__brand {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.ui-navbar--island .ui-navbar__brand a,
.ui-navbar--island .ui-navbar__brand > span:not(.ui-icon) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-navbar--island .ui-navbar__toggle {
  margin-inline-start: 0;
  flex-shrink: 0;
}

/*
 * Island pill rails stay on one row. flex-wrap + a tight parent (docs variant
 * grid, narrow embed) stacks links into a tall oval that reads as broken.
 */
.ui-navbar--island .ui-nav__list {
  flex-wrap: nowrap;
}

.ui-navbar--island .ui-nav__item {
  flex-shrink: 0;
}

/*
 * Embed — mid-page demos / docs variants. Keep the island pill in-flow at every
 * breakpoint; never use the viewport-fixed mobile menu (that is for page chrome).
 */
.ui-navbar--island.ui-navbar--embed .ui-navbar__inner {
  width: fit-content;
  max-inline-size: min(100%, 72rem);
  gap: var(--ca-space-3);
}

.ui-navbar--island.ui-navbar--embed .ui-navbar__brand {
  flex: 0 1 auto;
}

.ui-navbar--island.ui-navbar--embed .ui-navbar__toggle {
  display: none;
}

.ui-navbar--island.ui-navbar--embed .ui-navbar__collapse,
.ui-navbar--island.ui-navbar--embed .ui-navbar__collapse.is-open {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-basis: auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ca-space-2);
  margin-inline-start: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1;
  /* Let the rail shrink inside a narrow pill instead of overflowing under brand. */
  min-width: 0;
}

.ui-navbar--island.ui-navbar--embed .ui-nav,
.ui-navbar--island.ui-navbar--embed .ui-navbar__actions {
  flex-shrink: 0;
}

.ui-navbar--island.ui-navbar--embed .ui-nav__list,
.ui-navbar--island.ui-navbar--embed .ui-navbar__actions {
  padding: var(--ca-space-1);
  border-radius: var(--ca-radius-pill);
  background: transparent;
  border: 0.5px solid var(--glass-border);
}

.ui-navbar--island.ui-navbar--embed .ui-navbar__actions {
  margin-inline-start: 0;
  border-block-start: none;
}

/*
 * Narrow embed — keep the pill in-flow, but wrap rails so brand + links do not
 * collide (justify-end + nowrap otherwise overflows under the brand).
 */
@media (max-width: 47.999rem) {
  .ui-navbar--island.ui-navbar--embed .ui-navbar__inner {
    width: 100%;
    max-inline-size: 100%;
    flex-wrap: wrap;
    border-radius: var(--radius-glass);
  }

  .ui-navbar--island.ui-navbar--embed .ui-navbar__collapse,
  .ui-navbar--island.ui-navbar--embed .ui-navbar__collapse.is-open {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ui-navbar--island.ui-navbar--embed .ui-nav {
    min-width: 0;
    max-width: 100%;
  }

  .ui-navbar--island.ui-navbar--embed .ui-nav__list {
    flex-wrap: wrap;
  }

  .ui-navbar--island.ui-navbar--embed .ui-nav,
  .ui-navbar--island.ui-navbar--embed .ui-navbar__actions {
    flex-shrink: 1;
  }
}

/* Keep pill CTAs on nav-link scale (override global mobile .btn min-height). */
.ui-navbar--island.ui-navbar--embed .ui-navbar__actions .btn,
.ui-navbar--island:not(:has(.ui-navbar__toggle)) .ui-navbar__actions .btn {
  min-height: 0;
  line-height: 1.25;
}

@media (max-width: 47.999rem) {
  /*
   * Fixed menu only for page-chrome islands with a toggle. Toggle-less static
   * demos and .ui-navbar--embed stay in-flow.
   */
  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-navbar__collapse {
    /*
     * fixed — not absolute inside the pill. Absolute keeps the menu in the pill’s
     * backdrop root, so glass fill reads as opaque white; fixed samples the page.
     */
    position: fixed;
    inset-inline: var(--ca-space-4);
    inset-block-start: var(--navbar-island-menu-top, 4.75rem);
    inset-block-end: auto;
    flex-basis: auto;
    inline-size: auto;
    max-inline-size: calc(100% - 2 * var(--ca-space-4));
    z-index: 51;
    gap: var(--ca-space-2);
    padding: var(--ca-space-2);
    max-block-size: min(
      70vh,
      calc(100dvh - var(--navbar-island-menu-top, 4.75rem) - var(--ca-space-4))
    );
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: var(--radius-glass);
    border: 0.5px solid var(--glass-border);
    background: var(--navbar-island-bg);
    backdrop-filter: var(--navbar-island-backdrop);
    -webkit-backdrop-filter: var(--navbar-island-backdrop);
    box-shadow:
      0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset,
      0 12px 28px -24px var(--glass-shadow);
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-navbar__collapse:not(.is-open) {
    display: none;
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-navbar__collapse.is-open {
    display: flex;
  }

  /*
   * Island desktop rails keep nowrap; the fixed mobile menu must stack so link
   * rows (Why / Install / Contribute / Docs / Examples) fit ~390px viewports.
   */
  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-nav {
    min-width: 0;
    width: 100%;
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-nav__list {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-nav__item {
    flex-shrink: 1;
    min-width: 0;
    width: 100%;
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-nav__link {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-glass);
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-navbar__actions {
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--ca-space-2);
    border-block-start: 0.5px solid var(--line);
  }

  .ui-navbar--island:not(.ui-navbar--embed):has(.ui-navbar__toggle) .ui-navbar__actions .btn {
    min-height: 0;
  }

  /* Toggle-less island — same in-flow pill as desktop (docs / static previews). */
  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__inner {
    width: 100%;
    max-inline-size: 100%;
    gap: var(--ca-space-3);
    flex-wrap: wrap;
    border-radius: var(--radius-glass);
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__brand {
    flex: 0 1 auto;
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__collapse,
  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__collapse.is-open {
    position: relative;
    display: flex;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    flex-basis: auto;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ca-space-2);
    margin-inline-start: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 0;
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-nav {
    min-width: 0;
    max-width: 100%;
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-nav__list {
    flex-wrap: wrap;
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-nav,
  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__actions {
    flex-shrink: 1;
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-nav__list,
  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__actions {
    padding: var(--ca-space-1);
    border-radius: var(--ca-radius-pill);
    background: transparent;
    border: 0.5px solid var(--glass-border);
  }

  .ui-navbar--island:not(.ui-navbar--embed):not(:has(.ui-navbar__toggle)) .ui-navbar__actions {
    margin-inline-start: 0;
    border-block-start: none;
  }
}

@media (min-width: 48rem) {
  .ui-navbar--island .ui-navbar__inner {
    width: fit-content;
    max-inline-size: min(100%, 72rem);
    gap: var(--ca-space-3);
  }

  .ui-navbar--island .ui-navbar__brand {
    flex: 0 1 auto;
  }

  .ui-navbar--island .ui-navbar__collapse,
  .ui-navbar--island .ui-navbar__collapse.is-open {
    /* relative + z-index:1 — stay above island ::before glass (not under it). */
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ca-space-2);
    margin-inline-start: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ui-navbar--island .ui-nav,
  .ui-navbar--island .ui-navbar__actions {
    flex-shrink: 0;
  }

  /*
   * Nested rails — border chrome only. A filled nested-surface on island glass
   * (no second backdrop-filter) reads as an opaque white pad.
   */
  .ui-navbar--island .ui-nav__list,
  .ui-navbar--island .ui-navbar__actions {
    padding: var(--ca-space-1);
    border-radius: var(--ca-radius-pill);
    background: transparent;
    border: 0.5px solid var(--glass-border);
  }

  .ui-navbar--island .ui-navbar__actions {
    margin-inline-start: 0;
    border-block-start: none;
  }

  .ui-navbar--island .ui-navbar__actions .btn {
    min-height: 0;
    line-height: 1.25;
  }
}

/* Island shell + mobile menu share --navbar-island-* (desktop collapse stays transparent). */
html[data-theme='light'] .ui-navbar--island {
  --navbar-island-bg: color-mix(in oklab, var(--glass-surface) 45%, transparent);
  --navbar-island-backdrop: blur(var(--navbar-blur)) saturate(160%) brightness(1.02);
}

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


/* ← ./components/close.css */
/**
 * Close — reusable dismiss control (icon button).
 * Classes: .ui-close, .ui-close__icon
 * Visual language aligned with .modal-close without sharing selectors.
 */

.ui-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0.5px solid var(--glass-border);
  border-radius: var(--ca-radius-pill);
  background: color-mix(in oklab, var(--color-bg-mid) 88%, var(--color-bg-elevated));
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--ca-duration-base) ease,
    color var(--ca-duration-base) ease,
    border-color var(--ca-duration-base) ease;
}

.ui-close:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--line-strong);
  background: color-mix(in oklab, var(--color-bg-mid) 70%, var(--color-bg-elevated));
}

.ui-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-close:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
}

.ui-close__icon {
  width: 0.95rem;
  height: 0.95rem;
}

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


/* ← ./components/collapse.css */
/**
 * Collapse — single expandable region.
 * Classes: .ui-collapse, .ui-collapse__trigger, .ui-collapse__chevron,
 *          .ui-collapse__panel, .ui-collapse__panel-body
 */

.ui-collapse {
  overflow: hidden;
  border-radius: var(--radius-glass);
  border: 0.5px solid var(--glass-border);
  background: color-mix(in oklab, var(--glass-surface) 88%, transparent);
  box-shadow:
    0 0 0 0.5px color-mix(in oklab, var(--glass-highlight) 16%, transparent) inset;
}

.ui-collapse.is-open {
  border-color: color-mix(in oklab, var(--color-system-blue) 28%, var(--glass-border));
  background: color-mix(in oklab, var(--glass-surface-strong) 70%, transparent);
}

.ui-collapse__trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ca-space-3);
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
  padding-block: var(--ca-space-3);
  padding-inline: var(--ca-space-4);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--ca-font-size-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  transition:
    color var(--ca-duration-fast) ease,
    background-color var(--ca-duration-base) ease;
}

.ui-collapse__trigger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--glass-surface-strong) 45%, transparent);
}

.ui-collapse__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-collapse__trigger:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: -2px;
}

.ui-collapse__trigger-label {
  min-width: 0;
}

.ui-collapse__chevron {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--muted);
  transition: transform var(--ca-duration-base) var(--ca-ease-spring);
}

.ui-collapse.is-open .ui-collapse__chevron {
  transform: rotate(180deg);
}

.ui-collapse__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ca-duration-base) var(--ca-ease-spring);
}

.ui-collapse.is-open .ui-collapse__panel {
  grid-template-rows: 1fr;
}

.ui-collapse__panel-body {
  overflow: hidden;
  min-height: 0;
  padding-inline: var(--ca-space-4);
  color: var(--muted);
  font-size: var(--ca-font-size-md);
  line-height: 1.45;
}

.ui-collapse.is-open .ui-collapse__panel-body {
  padding-block: var(--ca-space-3) var(--ca-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .ui-collapse__trigger,
  .ui-collapse__chevron,
  .ui-collapse__panel {
    transition: none;
  }
}