/* ============================================================================
   GLASS.CSS — "Liquid Glass" design system (Apple-native vibrancy)
   Canonical reference shared by the React app + the vanilla-JS console.
   --------------------------------------------------------------------------
   Aesthetic: frosted vibrancy, layered translucency, hairline adaptive
   borders, large-radius depth, specular edge highlights, SF/system type,
   spring-like motion. Accent = refined GARNET -> ROSE, used sparingly.
   --------------------------------------------------------------------------
   Theming model:
     - DEFAULT = light.
     - DARK via either  [data-theme="dark"]  (explicit, wins)
                  or    @media (prefers-color-scheme: dark)  (auto).
     - [data-theme="light"] forces light even under a dark OS.
   Fallbacks: @media (prefers-reduced-motion) and
              @media (prefers-reduced-transparency) degrade gracefully.

   DO NOT hardcode colors in product CSS. Compose from the tokens + the
   primitive classes below.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. RESET-LITE — only what the system depends on. Non-invasive.
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  accent-color: var(--accent);
}

/* ============================================================================
   1. TOKENS — :root is LIGHT (the default theme).
   ========================================================================== */
:root {
  color-scheme: light;

  /* -- Type ---------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
               "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "JetBrains Mono",
               "Menlo", "Consolas", monospace;

  /* type scale (1.2 minor-third-ish, tuned for UI density) */
  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.8125rem;   /* 13px */
  --text-base:0.9375rem;   /* 15px — Apple body */
  --text-md:  1rem;        /* 16px */
  --text-lg:  1.1875rem;   /* 19px */
  --text-xl:  1.5rem;      /* 24px */
  --text-2xl: 1.9375rem;   /* 31px */
  --text-3xl: 2.5rem;      /* 40px */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.014em;
  --tracking-normal: -0.006em;  /* SF reads best slightly tightened */
  --tracking-wide: 0.04em;
  --tracking-caps: 0.07em;      /* eyebrows / overlines */

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

  /* -- Spacing scale (4px base; t-shirt names) ----------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* -- Radii (continuous-corner feel; large + soft) ------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* -- Accent ramp: GARNET -> ROSE. Used sparingly on neutral glass. ------- */
  --accent-50:  #fdeef1;
  --accent-100: #f9d3dc;
  --accent-200: #f1a7b9;
  --accent-300: #e87d96;
  --accent-400: #e0566f;   /* primary rose */
  --accent-500: #c93a58;
  --accent-600: #b22a47;   /* deep garnet */
  --accent-700: #8f1f38;
  --accent-800: #6d182b;
  --accent-900: #4c111f;

  --accent:        var(--accent-500);   /* canonical accent */
  --accent-strong: var(--accent-600);
  --accent-soft:   var(--accent-400);
  --accent-ink:    #ffffff;             /* text/icon ON accent fills */
  /* translucent accent washes for tints on glass */
  --accent-wash:   color-mix(in srgb, var(--accent-500) 14%, transparent);
  --accent-wash-2: color-mix(in srgb, var(--accent-500) 22%, transparent);
  --accent-ring:   color-mix(in srgb, var(--accent-500) 55%, transparent);
  --accent-glow:   color-mix(in srgb, var(--accent-500) 38%, transparent);

  /* -- Semantic status (muted, premium — not neon) ------------------------- */
  --ok:    #1c8a5b;
  --warn:  #b7791f;
  --error: #c0362c;
  --info:  #2a6df0;
  --ok-wash:    color-mix(in srgb, var(--ok)    14%, transparent);
  --warn-wash:  color-mix(in srgb, var(--warn)  16%, transparent);
  --error-wash: color-mix(in srgb, var(--error) 14%, transparent);
  --info-wash:  color-mix(in srgb, var(--info)  14%, transparent);

  /* -- Base canvas (the room the glass sits in) ---------------------------- */
  /* A soft, light, faintly-warm gradient — gives the blur something to chew. */
  --bg-tint-a: #f4f1f3;
  --bg-tint-b: #eceef3;
  --bg-tint-c: #f6eef0;
  --bg-base:
    radial-gradient(1200px 720px at 12% -8%,  var(--bg-tint-c) 0%, transparent 60%),
    radial-gradient(1000px 760px at 92% 10%,  var(--bg-tint-b) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-tint-a) 0%, #e9e9ee 100%);
  --bg-solid: #f1f1f4;   /* reduced-transparency replacement */

  /* -- Ink ----------------------------------------------------------------- */
  --text-primary:   rgba(28, 26, 30, 0.96);
  --text-secondary: rgba(40, 38, 44, 0.66);
  --text-tertiary:  rgba(48, 46, 52, 0.44);
  --text-quaternary:rgba(60, 58, 64, 0.28);
  --text-on-glass:  var(--text-primary);
  --text-inverse:   rgba(250, 250, 252, 0.96);
  --link: var(--accent-600);

  /* -- GLASS surfaces ------------------------------------------------------ */
  /* The translucent fill. Layer tiers go more opaque as they rise. */
  --glass-bg:        rgba(255, 255, 255, 0.55);   /* default panel */
  --glass-bg-thin:   rgba(255, 255, 255, 0.38);   /* bars / overlays on content */
  --glass-bg-thick:  rgba(255, 255, 255, 0.72);   /* popovers / modals */
  --glass-bg-frost:  rgba(255, 255, 255, 0.86);   /* opaque-ish menus */
  --glass-tint:      transparent;                  /* per-context accent wash hook */

  /* hairline adaptive border (top edge brighter -> specular) */
  --glass-border:    rgba(255, 255, 255, 0.55);
  --glass-border-strong: rgba(255, 255, 255, 0.7);
  --hairline:        rgba(20, 18, 24, 0.10);       /* dividers on light */
  --hairline-strong: rgba(20, 18, 24, 0.16);

  /* specular: a bright top hairline + faint bottom shade, baked as a layer */
  --glass-specular:
    linear-gradient(180deg,
      rgba(255,255,255,0.50) 0%,
      rgba(255,255,255,0.10) 14%,
      rgba(255,255,255,0.00) 42%,
      rgba(255,255,255,0.00) 100%);
  --glass-inner-glow: inset 0 1px 0 0 rgba(255,255,255,0.6);

  /* blur strength (filter) */
  --glass-blur: 22px;
  --glass-blur-thin: 14px;
  --glass-blur-thick: 34px;
  --glass-saturate: 180%;
  --glass-filter:      saturate(var(--glass-saturate)) blur(var(--glass-blur));
  --glass-filter-thin: saturate(var(--glass-saturate)) blur(var(--glass-blur-thin));
  --glass-filter-thick:saturate(var(--glass-saturate)) blur(var(--glass-blur-thick));

  /* -- Elevation shadows: e0 (flush) .. e3 (modal). Soft, large-radius. ----- */
  --shadow-color: 220 14% 18%;   /* HSL parts -> alpha-composited below */
  --e0: 0 0 0 0 rgba(0,0,0,0);
  --e1:
    0 1px 1px hsl(var(--shadow-color) / 0.05),
    0 2px 6px hsl(var(--shadow-color) / 0.07),
    0 0 0 0.5px rgba(0,0,0,0.03);
  --e2:
    0 2px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 22px hsl(var(--shadow-color) / 0.10),
    0 0 0 0.5px rgba(0,0,0,0.04);
  --e3:
    0 8px 16px hsl(var(--shadow-color) / 0.10),
    0 24px 60px hsl(var(--shadow-color) / 0.18),
    0 0 0 0.5px rgba(0,0,0,0.05);
  /* the lift each tier ALSO gets the inner specular glow stacked in */

  /* -- Focus ring ---------------------------------------------------------- */
  --focus-ring: 0 0 0 3px var(--accent-ring), 0 0 0 1px var(--accent-strong);
  --focus-ring-inset: inset 0 0 0 2px var(--accent-ring);

  /* -- Grain / noise overlay opacity --------------------------------------- */
  --grain-opacity: 0.035;

  /* -- Motion / easing ----------------------------------------------------- */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot, springy */
  --ease-emph:     cubic-bezier(0.22, 1, 0.36, 1);      /* iOS emphasized out */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);

  --dur-1: 90ms;    /* micro: hover tint, press */
  --dur-2: 160ms;   /* control state */
  --dur-3: 240ms;   /* panel/in-place */
  --dur-4: 360ms;   /* enter/exit, modal */
  --dur-5: 520ms;   /* large hero motion */

  /* composed transition presets */
  --t-control: color var(--dur-2) var(--ease-standard),
               background-color var(--dur-2) var(--ease-standard),
               border-color var(--dur-2) var(--ease-standard),
               box-shadow var(--dur-2) var(--ease-emph),
               transform var(--dur-2) var(--ease-spring);

  /* -- Z layers ------------------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-bar: 100;
  --z-dock: 200;
  --z-overlay: 800;
  --z-modal: 1000;
  --z-toast: 1100;

  /* -- Layout rhythm ------------------------------------------------------- */
  --content-max: 880px;
  --bar-height: 56px;
  --dock-pad: var(--space-4);
}

/* ============================================================================
   2. DARK THEME — explicit [data-theme="dark"] OR OS auto.
   Token VALUES change; every primitive below references tokens only, so the
   whole system flips with no per-component dark rules.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-tint-a: #14131a;
  --bg-tint-b: #0e1018;
  --bg-tint-c: #1b1117;
  --bg-base:
    radial-gradient(1200px 760px at 10% -10%, #241622 0%, transparent 58%),
    radial-gradient(1100px 800px at 94% 6%,  #101725 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-tint-a) 0%, #08080c 100%);
  --bg-solid: #0d0d12;

  --text-primary:    rgba(244, 243, 248, 0.96);
  --text-secondary:  rgba(236, 235, 242, 0.62);
  --text-tertiary:   rgba(230, 229, 238, 0.40);
  --text-quaternary: rgba(224, 223, 234, 0.24);
  --text-inverse:    rgba(24, 22, 28, 0.96);
  --link: var(--accent-300);

  /* on dark, glass is a luminous frost: low-alpha WHITE, not black */
  --glass-bg:       rgba(255, 255, 255, 0.085);
  --glass-bg-thin:  rgba(255, 255, 255, 0.055);
  --glass-bg-thick: rgba(28, 28, 36, 0.62);
  --glass-bg-frost: rgba(26, 26, 34, 0.84);

  --glass-border:        rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  --hairline:            rgba(255, 255, 255, 0.10);
  --hairline-strong:     rgba(255, 255, 255, 0.16);

  --glass-specular:
    linear-gradient(180deg,
      rgba(255,255,255,0.22) 0%,
      rgba(255,255,255,0.05) 16%,
      rgba(255,255,255,0.00) 46%,
      rgba(0,0,0,0.00) 100%);
  --glass-inner-glow: inset 0 1px 0 0 rgba(255,255,255,0.16);

  --glass-saturate: 165%;

  /* dark shadows lean black + larger spread for depth on the dark canvas */
  --shadow-color: 240 40% 2%;
  --e1:
    0 1px 2px rgba(0,0,0,0.40),
    0 2px 8px rgba(0,0,0,0.32),
    0 0 0 0.5px rgba(255,255,255,0.04);
  --e2:
    0 3px 8px rgba(0,0,0,0.44),
    0 12px 30px rgba(0,0,0,0.50),
    0 0 0 0.5px rgba(255,255,255,0.05);
  --e3:
    0 10px 24px rgba(0,0,0,0.55),
    0 30px 80px rgba(0,0,0,0.66),
    0 0 0 0.5px rgba(255,255,255,0.06);

  --accent: var(--accent-400);          /* rose pops better on dark */
  --accent-strong: var(--accent-500);
  --accent-soft: var(--accent-300);
  --accent-ink: #1a0a10;
  --link: var(--accent-300);

  --grain-opacity: 0.05;
  --focus-ring: 0 0 0 3px var(--accent-ring), 0 0 0 1px var(--accent-soft);
}

/* OS auto-dark — applies the SAME overrides UNLESS user forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-tint-a: #14131a;
    --bg-tint-b: #0e1018;
    --bg-tint-c: #1b1117;
    --bg-base:
      radial-gradient(1200px 760px at 10% -10%, #241622 0%, transparent 58%),
      radial-gradient(1100px 800px at 94% 6%,  #101725 0%, transparent 55%),
      linear-gradient(180deg, var(--bg-tint-a) 0%, #08080c 100%);
    --bg-solid: #0d0d12;

    --text-primary:    rgba(244, 243, 248, 0.96);
    --text-secondary:  rgba(236, 235, 242, 0.62);
    --text-tertiary:   rgba(230, 229, 238, 0.40);
    --text-quaternary: rgba(224, 223, 234, 0.24);
    --text-inverse:    rgba(24, 22, 28, 0.96);

    --glass-bg:       rgba(255, 255, 255, 0.085);
    --glass-bg-thin:  rgba(255, 255, 255, 0.055);
    --glass-bg-thick: rgba(28, 28, 36, 0.62);
    --glass-bg-frost: rgba(26, 26, 34, 0.84);

    --glass-border:        rgba(255, 255, 255, 0.14);
    --glass-border-strong: rgba(255, 255, 255, 0.22);
    --hairline:            rgba(255, 255, 255, 0.10);
    --hairline-strong:     rgba(255, 255, 255, 0.16);

    --glass-specular:
      linear-gradient(180deg,
        rgba(255,255,255,0.22) 0%,
        rgba(255,255,255,0.05) 16%,
        rgba(255,255,255,0.00) 46%,
        rgba(0,0,0,0.00) 100%);
    --glass-inner-glow: inset 0 1px 0 0 rgba(255,255,255,0.16);
    --glass-saturate: 165%;

    --shadow-color: 240 40% 2%;
    --e1:
      0 1px 2px rgba(0,0,0,0.40),
      0 2px 8px rgba(0,0,0,0.32),
      0 0 0 0.5px rgba(255,255,255,0.04);
    --e2:
      0 3px 8px rgba(0,0,0,0.44),
      0 12px 30px rgba(0,0,0,0.50),
      0 0 0 0.5px rgba(255,255,255,0.05);
    --e3:
      0 10px 24px rgba(0,0,0,0.55),
      0 30px 80px rgba(0,0,0,0.66),
      0 0 0 0.5px rgba(255,255,255,0.06);

    --accent: var(--accent-400);
    --accent-strong: var(--accent-500);
    --accent-soft: var(--accent-300);
    --accent-ink: #1a0a10;
    --link: var(--accent-300);

    --grain-opacity: 0.05;
    --focus-ring: 0 0 0 3px var(--accent-ring), 0 0 0 1px var(--accent-soft);
  }
}

/* ============================================================================
   3. GLOBAL CHROME — body grain + selection + scrollbars + reduced-motion base
   ========================================================================== */

/* Specular grain/noise: a single fixed SVG-feTurbulence layer over the canvas.
   Subtle — it kills the "flat plastic" look of pure blur. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

::selection { background: var(--accent-wash-2); color: var(--text-primary); }

/* WebKit scrollbar — slim, glassy, fades to the accent on the thumb hover */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-quaternary) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--text-quaternary);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-2) var(--ease-standard);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================================
   4. PRIMITIVES
   ========================================================================== */

/* -- 4.1 .glass — the core frosted panel ----------------------------------- */
/* Compose: <div class="glass elev-1"> ... </div>
   The ::before is the specular highlight + tint layer; the element itself
   carries the blur + fill + hairline. */
.glass {
  position: relative;
  background-color: var(--glass-bg);
  background-image: var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1), var(--glass-inner-glow);
  color: var(--text-on-glass);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass-specular);
  pointer-events: none;
}
.glass--thin {
  background-color: var(--glass-bg-thin);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
}
.glass--thick {
  background-color: var(--glass-bg-thick);
  -webkit-backdrop-filter: var(--glass-filter-thick);
  backdrop-filter: var(--glass-filter-thick);
}
.glass--frost {
  background-color: var(--glass-bg-frost);
  -webkit-backdrop-filter: var(--glass-filter-thick);
  backdrop-filter: var(--glass-filter-thick);
}
/* accent-tinted glass: wash of garnet behind the frost (use sparingly) */
.glass--accent { --glass-tint: linear-gradient(180deg, var(--accent-wash) 0%, transparent 70%); }

/* -- 4.2 Elevation tiers (stack ON .glass or any surface) ------------------ */
.elev-0 { box-shadow: var(--e0); }
.elev-1 { box-shadow: var(--e1), var(--glass-inner-glow); }
.elev-2 { box-shadow: var(--e2), var(--glass-inner-glow); }
.elev-3 { box-shadow: var(--e3), var(--glass-inner-glow); }

/* -- 4.3 .glass-bar — top app bar ------------------------------------------ */
.glass-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--bar-height);
  padding: 0 var(--space-5);
  background-color: var(--glass-bg-thin);
  -webkit-backdrop-filter: var(--glass-filter-thick);
  backdrop-filter: var(--glass-filter-thick);
  border-bottom: 0.5px solid var(--hairline);
  box-shadow: 0 1px 0 0 var(--glass-border-strong) inset, var(--e1);
}
.glass-bar__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.glass-bar__eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.glass-bar__spacer { flex: 1 1 auto; }

/* -- 4.4 .glass-card — content card ---------------------------------------- */
.glass-card {
  position: relative;
  padding: var(--space-5);
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1), var(--glass-inner-glow);
  transition: box-shadow var(--dur-3) var(--ease-emph),
              transform var(--dur-3) var(--ease-spring),
              border-color var(--dur-2) var(--ease-standard);
}
.glass-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--glass-specular); pointer-events: none;
}
.glass-card--interactive { cursor: pointer; }
.glass-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--e2), var(--glass-inner-glow);
  border-color: var(--glass-border-strong);
}
.glass-card--interactive:active { transform: translateY(0); }
.glass-card__title  { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.glass-card__body   { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* -- 4.5 .hairline — adaptive divider -------------------------------------- */
.hairline { border: 0; border-top: 0.5px solid var(--hairline); margin: var(--space-4) 0; }
.hairline--strong { border-top-color: var(--hairline-strong); }
.hairline--v { border: 0; border-left: 0.5px solid var(--hairline); align-self: stretch; margin: 0 var(--space-2); }

/* -- 4.6 .btn + variants ---------------------------------------------------- */
.btn {
  --_bg: var(--glass-bg-thick);
  --_fg: var(--text-primary);
  --_bd: var(--glass-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: 36px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: 1;
  color: var(--_fg);
  background-color: var(--_bg);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  border: 0.5px solid var(--_bd);
  border-radius: var(--radius-pill);
  box-shadow: var(--e1), var(--glass-inner-glow);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: var(--t-control);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--e2), var(--glass-inner-glow); border-color: var(--glass-border-strong); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--e1); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--e1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.btn-accent {
  --_fg: var(--accent-ink);
  --_bd: transparent;
  color: var(--accent-ink);
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-strong) 100%);
  box-shadow: var(--e2), inset 0 1px 0 0 rgba(255,255,255,0.35), 0 0 0 0.5px var(--accent-strong);
}
.btn-accent:hover { box-shadow: var(--e2), 0 0 0 4px var(--accent-glow), inset 0 1px 0 0 rgba(255,255,255,0.4); }
.btn-accent:focus-visible { box-shadow: var(--focus-ring), var(--e2); }

.btn-ghost {
  --_bg: transparent;
  --_bd: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none;
}
.btn-ghost:hover { --_bg: var(--glass-bg-thin); box-shadow: none; }

.btn--sm { min-height: 28px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--lg { min-height: 44px; padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn--icon { padding: var(--space-2); min-width: 36px; border-radius: var(--radius-round); }

/* -- 4.7 .glass-input ------------------------------------------------------- */
.glass-input,
textarea.glass-input,
select.glass-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--glass-bg-thin);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-emph),
              background-color var(--dur-2) var(--ease-standard);
  outline: none;
}
.glass-input::placeholder { color: var(--text-tertiary); }
.glass-input:hover { border-color: var(--glass-border-strong); }
.glass-input:focus-visible,
.glass-input:focus {
  border-color: var(--accent-ring);
  box-shadow: var(--focus-ring-inset), inset 0 1px 2px rgba(0,0,0,0.05);
  background-color: var(--glass-bg);
}
.glass-input:disabled { opacity: 0.5; }
textarea.glass-input { resize: vertical; min-height: 72px; line-height: var(--leading-normal); }

/* -- 4.8 .chip — compact status / filter token ----------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  color: var(--text-secondary);
  background-color: var(--glass-bg-thin);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: var(--t-control);
}
.chip--accent { color: var(--accent-strong); border-color: var(--accent-ring); background-color: var(--accent-wash); }
.chip--ok    { color: var(--ok);    background-color: var(--ok-wash);    border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.chip--warn  { color: var(--warn);  background-color: var(--warn-wash);  border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip--error { color: var(--error); background-color: var(--error-wash); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.chip--info  { color: var(--info);  background-color: var(--info-wash);  border-color: color-mix(in srgb, var(--info) 40%, transparent); }
.chip__dot { width: 6px; height: 6px; border-radius: var(--radius-round); background: currentColor; box-shadow: 0 0 6px currentColor; }
.chip--interactive { cursor: pointer; }
.chip--interactive:hover { border-color: var(--glass-border-strong); transform: translateY(-1px); }

/* -- 4.9 .bubble — chat message (user / assistant) ------------------------- */
.bubble {
  position: relative;
  max-width: min(76ch, 86%);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  border-radius: var(--radius-lg);
  box-shadow: var(--e1), var(--glass-inner-glow);
  border: 0.5px solid var(--glass-border);
  overflow-wrap: anywhere;
  animation: bubble-in var(--dur-4) var(--ease-emph) both;
}
.bubble::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-specular); pointer-events: none; }

/* assistant = neutral frosted glass, left-aligned, squared inner corner */
.bubble--assistant {
  align-self: flex-start;
  margin-right: auto;
  color: var(--text-primary);
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  border-bottom-left-radius: var(--radius-xs);
}
/* user = garnet->rose gradient fill, right-aligned, white ink */
.bubble--user {
  align-self: flex-end;
  margin-left: auto;
  color: var(--accent-ink);
  border-color: transparent;
  background-image: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-strong) 100%);
  background-color: var(--accent-strong);
  box-shadow: var(--e2), inset 0 1px 0 0 rgba(255,255,255,0.3);
  border-bottom-right-radius: var(--radius-xs);
}
.bubble--user a { color: #fff; text-decoration: underline; }
.bubble--user ::selection { background: rgba(255,255,255,0.3); }
/* system / tool = thin, quiet, monospace-leaning */
.bubble--system {
  align-self: center;
  max-width: 90%;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  background-color: var(--glass-bg-thin);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--e1);
}
.bubble__meta { display: block; margin-top: var(--space-1); font-size: var(--text-2xs); color: var(--text-tertiary); letter-spacing: var(--tracking-wide); }
.bubble--user .bubble__meta { color: rgba(255,255,255,0.7); }

/* -- 4.10 Chat scaffold (thread + dock) ------------------------------------ */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}
.input-dock {
  position: sticky;
  bottom: 0;
  z-index: var(--z-dock);
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--dock-pad);
  margin: 0 auto;
  width: 100%;
  max-width: var(--content-max);
}
.input-dock__shell {
  flex: 1 1 auto;
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  padding: var(--space-2);
  background-color: var(--glass-bg-thick);
  -webkit-backdrop-filter: var(--glass-filter-thick);
  backdrop-filter: var(--glass-filter-thick);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--e2), var(--glass-inner-glow);
}
.input-dock__shell .glass-input {
  border: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  max-height: 40vh;
}
.input-dock__shell .glass-input:focus-visible { box-shadow: none; }

/* -- 4.11 State surfaces: empty / loading / error -------------------------- */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--text-secondary);
  min-height: 240px;
}
.state__glyph { font-size: var(--text-3xl); line-height: 1; opacity: 0.5; }
.state__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
.state__body { font-size: var(--text-sm); max-width: 42ch; line-height: var(--leading-relaxed); }
.state--error .state__glyph { color: var(--error); opacity: 0.85; }
.state--error .state__title { color: var(--error); }

/* typing / loading dots */
.typing { display: inline-flex; gap: 5px; align-items: center; padding: var(--space-2) var(--space-1); }
.typing__dot {
  width: 7px; height: 7px; border-radius: var(--radius-round);
  background: var(--text-tertiary);
  animation: typing-bounce 1.2s var(--ease-emph) infinite;
}
.typing__dot:nth-child(2) { animation-delay: 0.15s; }
.typing__dot:nth-child(3) { animation-delay: 0.3s; }

/* shimmer skeleton for loading cards */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg-thin);
  border-radius: var(--radius-md);
  min-height: 1em;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--glass-border-strong) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shimmer 1.4s var(--ease-standard) infinite;
}
.spinner {
  width: 18px; height: 18px; border-radius: var(--radius-round);
  border: 2px solid var(--glass-border-strong);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}

/* -- 4.12 Focusable utility (apply to non-form interactives) --------------- */
.focusable:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* generic global focus-visible safety net */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* -- 4.13 Tabs / segmented control (glass) --------------------------------- */
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background-color: var(--glass-bg-thin);
  -webkit-backdrop-filter: var(--glass-filter-thin);
  backdrop-filter: var(--glass-filter-thin);
  border: 0.5px solid var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-inner-glow);
}
.seg__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--space-1) var(--space-4); min-height: 30px;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: var(--t-control);
}
.seg__item:hover { color: var(--text-primary); }
.seg__item[aria-selected="true"], .seg__item.is-active {
  color: var(--text-primary);
  background-color: var(--glass-bg-thick);
  box-shadow: var(--e1), var(--glass-inner-glow);
}

/* ============================================================================
   5. UTILITIES (atoms — type, ink, layout helpers)
   ========================================================================== */
.eyebrow { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); }
.title-1 { font-size: var(--text-2xl); font-weight: var(--weight-bold);     letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0; }
.title-2 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin: 0; }
.title-3 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin: 0; }
.body    { font-size: var(--text-base); color: var(--text-primary); }
.caption { font-size: var(--text-xs); color: var(--text-tertiary); }
.mono    { font-family: var(--font-mono); font-size: var(--text-sm); }

.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-accent    { color: var(--accent-strong); }
.text-ok { color: var(--ok); } .text-warn { color: var(--warn); } .text-error { color: var(--error); }

.stack   { display: flex; flex-direction: column; gap: var(--space-3); }
.row     { display: flex; align-items: center; gap: var(--space-2); }
.row--wrap { flex-wrap: wrap; }
.spacer  { flex: 1 1 auto; }
.center  { display: flex; align-items: center; justify-content: center; }
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-5); width: 100%; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* status dot */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--text-tertiary); box-shadow: 0 0 6px currentColor; }
.dot--ok { background: var(--ok); color: var(--ok); }
.dot--warn { background: var(--warn); color: var(--warn); }
.dot--error { background: var(--error); color: var(--error); }
.dot--accent { background: var(--accent); color: var(--accent); }

/* ============================================================================
   6. KEYFRAMES
   ========================================================================== */
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop-in {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.animate-pop  { animation: pop-in var(--dur-4) var(--ease-spring) both; }
.animate-fade { animation: fade-in var(--dur-3) var(--ease-out) both; }

/* ============================================================================
   7. ACCESSIBILITY FALLBACKS
   ========================================================================== */

/* 7.1 Reduced motion — kill transforms/animation, keep opacity-only fades. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .glass-card--interactive:hover, .chip--interactive:hover, .bubble { transform: none !important; }
  .bubble { animation: fade-in var(--dur-2) linear both; }
}

/* 7.2 Reduced transparency — drop blur, use solid surfaces, keep hierarchy
   via opacity-stepped solids + the elevation shadows. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg:       var(--bg-solid);
    --glass-bg-thin:  color-mix(in srgb, var(--bg-solid) 92%, #fff);
    --glass-bg-thick: var(--bg-solid);
    --glass-bg-frost: var(--bg-solid);
    --glass-specular: none;
    --glass-inner-glow: none;
    --grain-opacity: 0;
  }
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --glass-bg:       #1a1a22;
    --glass-bg-thin:  #15151c;
    --glass-bg-thick: #1f1f28;
    --glass-bg-frost: #20202a;
  }
  .glass, .glass-card, .glass-bar, .btn, .chip, .glass-input,
  .bubble, .input-dock__shell, .seg {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass::before, .glass-card::before, .bubble::before { display: none; }
  /* user bubble + accent button keep their gradient — those are opaque already. */
}

/* 7.3 No backdrop-filter support — same solid degrade (progressive enhance). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root {
    --glass-bg:       rgba(255,255,255,0.92);
    --glass-bg-thin:  rgba(255,255,255,0.86);
    --glass-bg-thick: rgba(255,255,255,0.96);
    --glass-bg-frost: #ffffff;
  }
  :root[data-theme="dark"],
  :root:not([data-theme="light"]) {
    --glass-bg:       rgba(26,26,34,0.92);
    --glass-bg-thin:  rgba(20,20,28,0.88);
    --glass-bg-thick: rgba(30,30,40,0.96);
    --glass-bg-frost: #1c1c24;
  }
}

/* 7.4 Forced-colors (Windows high-contrast) — yield to system colors. */
@media (forced-colors: active) {
  .glass, .glass-card, .glass-bar, .btn, .btn-accent, .chip,
  .glass-input, .bubble, .seg, .input-dock__shell {
    border: 1px solid CanvasText;
    background: Canvas;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
  }
  .btn-accent, .bubble--user { background: Highlight; color: HighlightText; }
  :where(a, button, [role="button"], [tabindex]):focus-visible { outline: 2px solid Highlight; }
}

/* 7.5 Honor explicit color-scheme for native controls (date pickers etc.) */
:root[data-theme="light"] { color-scheme: light; }