/* Bundled by `rake assets:build_css`. Source: app/assets/stylesheets/.
 * Do not edit by hand — edit the source files and re-run the task.
 */
/* ==== tokens.css ==== */
/* Design tokens — CSS custom properties.
 * Single source of truth for color, type, spacing, radius, shadow, motion.
 *
 * T-6.5.2: this file is the only place a color, spacing, radius, font,
 * or motion value may be declared. Consumers reference variables
 * exclusively (e.g. `color: var(--color-fg)`). No magic numbers.
 *
 * Theming:
 *   - The default token values are the LIGHT theme.
 *   - The DARK theme is defined as overrides on `html[data-theme="dark"]`.
 *   - The previous `light-dark()` only approach (driven by OS preference
 *     via `prefers-color-scheme`) is no longer used because it didn't
 *     allow a user to override the OS preference. See T-6.5.3.
 *
 * Both light and dark values use oklch() for perceptually uniform color.
 */

@layer tokens {
  :root {
    /* ---------- color: light theme (default) ---------- */
    --color-bg:             oklch(99%   0     0);
    --color-bg-elevated:    oklch(100%  0     0);
    --color-bg-sunken:      oklch(97%   0.005 250);
    --color-bg-overlay:     oklch(15%   0.005 260 / 0.6);

    --color-fg:             oklch(20%   0.01  260);
    --color-fg-muted:       oklch(48%   0.01  260);
    --color-fg-subtle:      oklch(65%   0.01  260);
    --color-fg-inverse:     oklch(99%   0     0);

    --color-border:         oklch(92%   0.005 260);
    --color-border-strong:  oklch(82%   0.01  260);

    --color-primary:        oklch(58%  0.18  255);
    --color-primary-fg:     oklch(99%  0     0);
    --color-primary-hover:  oklch(52%  0.18  255);
    --color-primary-soft:   oklch(95%  0.04  255);

    --color-success:        oklch(60%  0.15  150);
    --color-success-fg:     oklch(99%  0     0);
    --color-warning:        oklch(78%  0.15  80);
    --color-warning-fg:     oklch(20%  0     0);
    --color-danger:         oklch(60%  0.20  25);
    --color-danger-fg:      oklch(99%  0     0);
    --color-info:           oklch(60%  0.15  220);
    --color-info-fg:        oklch(99%  0     0);

    /* Per-signal score colors for the playground (same in both themes) */
    --color-signal-dense:   oklch(60%  0.20  255);
    --color-signal-bm25:    oklch(60%  0.15  150);
    --color-signal-sparse:  oklch(75%  0.15  80);
    --color-signal-kg:      oklch(60%  0.18  25);

    /* ---------- typography ---------- */
    --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui,
                 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace,
                 "SF Mono", Menlo, Monaco, Consolas, monospace;
    --font-display: "Space Grotesk", "Inter Variable", ui-sans-serif, system-ui, sans-serif;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-md:    1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;
    --text-6xl:   3.75rem;
    --text-display-1: 3.75rem;
    --text-display-2: 3rem;

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

    --tracking-tight:  -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.02em;

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

    /* ---------- spacing (4px base) ---------- */
    --space-0:  0;
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ---------- radius ---------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-pill: 999px;

    /* ---------- shadow ---------- */
    --shadow-sm:    0 1px 2px  oklch(0% 0 0 / 0.04);
    --shadow-md:    0 4px 12px oklch(0% 0 0 / 0.08);
    --shadow-lg:    0 12px 32px oklch(0% 0 0 / 0.12);
    --shadow-focus: 0 0 0 3px oklch(58% 0.18 255 / 0.35);

    /* ---------- motion ---------- */
    --motion-fast:   150ms;
    --motion-base:   250ms;
    --motion-slow:   400ms;
    --easing-default: cubic-bezier(0.2, 0, 0, 1);
    --easing-in:      cubic-bezier(0.4, 0, 1, 1);
    --easing-out:     cubic-bezier(0, 0, 0.2, 1);

    /* ---------- z-index scale ---------- */
    --z-nav:    10;
    --z-topbar: 20;
    --z-modal:  100;
    --z-cmdk:   110;
    --z-toast:  200;

    /* ---------- layout ---------- */
    --container-narrow:  44rem;   /* prose */
    --container-prose:   52rem;
    --container:         64rem;
    --container-wide:    80rem;
    --container-max:     96rem;
    --sidebar-width:     16rem;
    --topbar-height:     3.5rem;
  }

  /* ---------- color: dark theme overrides ---------- */
  html[data-theme="dark"] {
    --color-bg:             oklch(15%  0.005 260);
    --color-bg-elevated:    oklch(19%  0.008 260);
    --color-bg-sunken:      oklch(12%  0.005 260);
    --color-bg-overlay:     oklch(5%   0.005 260 / 0.7);

    --color-fg:             oklch(96%  0.005 260);
    --color-fg-muted:       oklch(72%  0.01  260);
    --color-fg-subtle:      oklch(58%  0.01  260);
    --color-fg-inverse:     oklch(15%  0     0);

    --color-border:         oklch(28%  0.008 260);
    --color-border-strong:  oklch(38%  0.01  260);

    --color-primary:        oklch(70%  0.18  255);
    --color-primary-fg:     oklch(15%  0     0);
    --color-primary-hover:  oklch(76%  0.18  255);
    --color-primary-soft:   oklch(28%  0.06  255);

    --color-success:        oklch(70%  0.15  150);
    --color-success-fg:     oklch(15%  0     0);
    --color-warning:        oklch(80%  0.15  80);
    --color-warning-fg:     oklch(15%  0     0);
    --color-danger:         oklch(68%  0.20  25);
    --color-danger-fg:      oklch(15%  0     0);
    --color-info:           oklch(70%  0.15  220);
    --color-info-fg:        oklch(15%  0     0);

    --shadow-focus: 0 0 0 3px oklch(70% 0.18 255 / 0.45);
  }
}


/* ==== reset.css ==== */
/* Modern reset — Andy Bell-style.
 * https://andy-bell.co.uk/blog/a-modern-css-reset
 */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    min-height: 100vh;
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

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

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
    padding: 0;
  }

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


/* ==== base.css ==== */
/* Element defaults — applied AFTER reset.
 * These set sensible baselines for body / headings / links / form controls.
 *
 * Font-face declarations are co-located here (instead of tokens.css)
 * so the @font-face url() can resolve via Propshaft's asset pipeline.
 * Both fonts are self-hosted woff2 — no Google Fonts, no FOUT.
 */

@layer base {
  /* Self-hosted variable fonts (T-6.5.1). The url()s are resolved by
   * Propshaft's asset pipeline (see app/assets/config/manifest.js).
   * Browsers render the system fallback until the variable woff2 loads.
   */
  @font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    /* Paths are injected at build time by `lib/tasks/assets.rake` —
     * see `assets_font_path` below. The build task replaces the
     * placeholder with the Propshaft-digested URL so this works in
     * both dev (no digest) and production (with digest). */
    src: url("/assets/inter/Inter-Variable-286b035b.woff2") format("woff2");
  }

  @font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("/assets/jetbrains/JetBrainsMono-Variable-ec516b57.woff2") format("woff2");
  }

  @font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/space-grotesk/SpaceGrotesk-Variable-3b2bde23.woff2") format("woff2");
  }

  html {
    background: var(--color-bg);
    /* Prevent the FOUC that would otherwise happen on theme switch:
     * declaring the theme-color here (rather than on body) lets the
     * <html data-theme> attribute drive the light-dark() tokens below.
     */
    color-scheme: light dark;
  }

  html[data-theme="light"] { color-scheme: light; }
  html[data-theme="dark"]  { color-scheme: dark; }

  body {
    font-family: var(--font-sans);
    color: var(--color-fg);
    background: var(--color-bg);
    font-feature-settings: "cv11", "ss01", "ss03";
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }
  h5 { font-size: var(--text-md); }
  h6 { font-size: var(--text-md); }

  a {
    color: var(--color-primary);
    text-underline-offset: 0.2em;
  }

  a:hover {
    color: var(--color-primary-hover);
  }

  code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.95em;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
  }

  mark {
    background: var(--color-warning);
    color: var(--color-warning-fg);
    padding: 0 0.15em;
    border-radius: var(--radius-sm);
  }

  /* Skip-to-main link — visible only on focus */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-elevated);
    color: var(--color-fg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transform: translateY(-200%);
    transition: transform var(--motion-fast) var(--easing-out);
    z-index: var(--z-modal);
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}


/* ==== layout/shell.css ==== */
/* Application shell — grid layout for the main + sidebar + topbar.
 * On ≥1024px: sidebar is a 16rem column, topbar spans the full width
 *   above both, main fills the rest of the viewport width.
 * On <1024px: sidebar is a drawer (transformed off-screen), topbar
 *   shows a hamburger to open it, main fills the full width.
 */

@layer layout {
  .shell {
    display: grid;
    grid-template-areas:
      "topbar  topbar"
      "sidebar main";
    grid-template-rows: var(--topbar-height) 1fr;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100dvh;
    background: var(--color-bg);
  }

  /* When the user has collapsed the sidebar. */
  .shell[data-sidebar-collapsed-value="true"] {
    grid-template-columns: 4rem 1fr;
  }

  /* Mobile / narrow: sidebar becomes a drawer. */
  @media (max-width: 1023px) {
    .shell {
      grid-template-areas:
        "topbar"
        "main";
      grid-template-columns: 1fr;
    }
    .shell .sidebar {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: var(--z-modal);
      transform: translateX(-100%);
      transition: transform var(--motion-base) var(--easing-default);
      box-shadow: var(--shadow-lg);
    }
    .shell[data-sidebar-open-value="true"] .sidebar {
      transform: translateX(0);
    }
  }
}

/* Topbar. */
@layer layout {
  .topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding: 0 var(--space-4);
    background: var(--color-bg-elevated);
    border-block-end: 1px solid var(--color-border);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-topbar);
  }

  .topbar__section {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .topbar__spacer { flex: 1; }

  .topbar__hamburger {
    display: none;
  }
  @media (max-width: 1023px) {
    .topbar__hamburger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      background: transparent;
      color: var(--color-fg-muted);
      border: 0;
      border-radius: var(--radius-md);
      cursor: pointer;
    }
    .topbar__hamburger:hover { background: var(--color-bg-sunken); color: var(--color-fg); }
    .topbar__hamburger svg { width: 1.25rem; height: 1.25rem; }
}

/* Topbar search button — mirrors .sidebar__search-button so the
 * topbar reads as a "Linear / Algolia" command trigger. Without these
 * rules the <button> renders as a default browser control: text
 * wraps, no background, no border, and the placeholder spills into
 * <main> on narrower viewports.
 */
@layer layout {
  .topbar__search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 24rem;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-sunken);
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
    transition: background var(--motion-fast) var(--easing-default),
                border-color var(--motion-fast) var(--easing-default),
                color var(--motion-fast) var(--easing-default);
  }
  .topbar__search:hover {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-fg);
  }
  .topbar__search-icon { display: inline-flex; flex: none; color: var(--color-fg-muted); }
  .topbar__search-icon svg { width: 1rem; height: 1rem; }
  .topbar__search-placeholder {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar__search-kbd {
    display: inline-block;
    padding: 0 0.4em;
    font: inherit;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-fg-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  /* On tablets the placeholder + ⌘K would push the user menu out
   * of the topbar. Collapse the search trigger to just an icon. */
  @media (max-width: 768px) {
    .topbar__search {
      max-width: none;
      width: 2.25rem;
      padding: var(--space-2);
      justify-content: center;
    }
    .topbar__search-placeholder,
    .topbar__search-kbd { display: none; }
  }
}
}

/* Main content area. */
@layer layout {
  .main {
    grid-area: main;
    padding: var(--space-6) var(--space-6);
    max-width: 100%;
    min-width: 0;  /* prevent grid blowout from wide content */
  }

  .main--wide   { max-width: var(--container-wide);   margin-inline: auto; }
  .main--prose  { max-width: var(--container-prose);  margin-inline: auto; }
  .main--narrow { max-width: var(--container-narrow); margin-inline: auto; }

  @media (max-width: 640px) {
    .main { padding: var(--space-4) var(--space-3); }
  }
}


/* ==== layout/sidebar.css ==== */
/* Application sidebar — left nav for logged-in users.
 * Built on CSS grid (the shell uses grid-template-columns: var(--sidebar-width) 1fr).
 * Below 1024px, the sidebar collapses to a drawer (T-6.5.17) and the
 * hamburger in the topbar opens it.
 */

@layer layout {
  .sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-bg-elevated);
    border-inline-end: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-3);
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    /* Cap the sidebar at viewport height so the absolute-positioned
     * collapse button (at .sidebar__collapse's `inset-block-end`)
     * stays in the visible viewport even when the page is scrollable.
     * Without this, the grid row grows with <main> content, the
     * sidebar's height matches the row, and the bottom-anchored
     * collapse button slides off-screen on long pages — making the
     * sidebar impossible to re-expand. */
    height: calc(100dvh - var(--topbar-height));
    overflow-y: auto;
    position: sticky;
    inset-block-start: var(--topbar-height);
    transition: width var(--motion-base) var(--easing-default),
                min-width var(--motion-base) var(--easing-default),
                max-width var(--motion-base) var(--easing-default);
  }

  /* Collapsed state — only the icons show, the labels are hidden.
   * The data attribute lives on .shell (the controller's element)
   * and the sidebar reacts to its parent's state. */
  .shell[data-sidebar-collapsed-value="true"] .sidebar {
    width: 4rem;
    min-width: 4rem;
    max-width: 4rem;
  }

  .shell[data-sidebar-collapsed-value="true"] .sidebar__label,
  .shell[data-sidebar-collapsed-value="true"] .sidebar__search-placeholder,
  .shell[data-sidebar-collapsed-value="true"] .sidebar__search-kbd,
  .shell[data-sidebar-collapsed-value="true"] .account-switcher__name,
  .shell[data-sidebar-collapsed-value="true"] .account-switcher__caret {
    display: none;
  }

  /* When collapsed, the brand shows only the mark (no wordmark) so
   * the collapse button stays visible and clickable. Without this
   * the wordmark "xrecommend" overflows the 4rem column and
   * pushes the collapse button off-screen, making the sidebar
   * impossible to expand. */
  .shell[data-sidebar-collapsed-value="true"] .logo__word {
    display: none;
  }
  .shell[data-sidebar-collapsed-value="true"] .sidebar__brand {
    justify-content: center;
    padding: var(--space-2);
  }
  /* The collapse button sits just ABOVE the account-switcher footer
   * (which is the last child in the flex column). Anchoring to the
   * bottom of the sidebar would put it on top of the TR monogram.
   * The 3.75rem offset matches the account switcher's height
   * (margin-block-start + padding-block-start + 1px border +
   * 2.5rem trigger) at the design tokens, with a small breathing gap. */
  .shell[data-sidebar-collapsed-value="true"] .sidebar__collapse {
    position: absolute;
    inset-block-end: calc(3.75rem + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2rem;
  }

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

  .sidebar__brand-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    text-decoration: none;
  }
  .sidebar__brand-link:hover { text-decoration: none; }

  .sidebar__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    color: var(--color-fg-muted);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .sidebar__collapse svg {
    width: 1rem;
    height: 1rem;
    /* Expanded: chevron points LEFT (toward the icons-only state the
     * button will collapse to). */
    transform: rotate(90deg);
    transition: transform var(--motion-base) var(--easing-default);
  }
  .shell[data-sidebar-collapsed-value="true"] .sidebar__collapse svg {
    /* Collapsed: chevron points RIGHT (toward the full sidebar the
     * button will re-expand to). */
    transform: rotate(-90deg);
  }
  .sidebar__collapse:hover { background: var(--color-bg-sunken); color: var(--color-fg); }

  .sidebar__search {
    margin-block: var(--space-2);
  }

  .sidebar__search-button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-sunken);
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
    transition: background var(--motion-fast) var(--easing-default),
                border-color var(--motion-fast) var(--easing-default);
  }
  .sidebar__search-button:hover {
    background: var(--color-bg);
    border-color: var(--color-border-strong);
    color: var(--color-fg);
  }
  .sidebar__search-icon { display: inline-flex; }
  .sidebar__search-icon svg { width: 1rem; height: 1rem; }
  .sidebar__search-placeholder { flex: 1; }
  .sidebar__search-kbd {
    display: inline-block;
    padding: 0 0.4em;
    font: inherit;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-fg-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .sidebar__nav { flex: 1; min-height: 0; }

  .sidebar__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .sidebar__list-item { display: block; }

  .sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-fg-muted);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background var(--motion-fast) var(--easing-default),
                color var(--motion-fast) var(--easing-default);
  }
  .sidebar__item:hover {
    background: var(--color-bg-sunken);
    color: var(--color-fg);
    text-decoration: none;
  }
  .sidebar__item--active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .sidebar__item--active:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .sidebar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
  }
  .sidebar__icon svg { width: 100%; height: 100%; }

  .sidebar__label { flex: 1; }

  .sidebar__account {
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-border);
  }
}

/* Account switcher (used in sidebar footer). */
@layer layout {
  .account-switcher {
    position: relative;
  }
  .account-switcher__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-fg);
    border: 0;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
  }
  .account-switcher__trigger:hover { background: var(--color-bg-sunken); }

  .account-switcher__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
  }
  .account-switcher__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-switcher__caret { display: inline-flex; }
  .account-switcher__caret svg { width: 1rem; height: 1rem; }

  .account-switcher__menu {
    position: absolute;
    inset-block-end: calc(100% + var(--space-1));
    inset-inline-start: 0;
    min-width: 16rem;
    padding: var(--space-1);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-modal);
  }
  .account-switcher__menu[hidden] { display: none; }

  .account-switcher__option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-fg);
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .account-switcher__option:hover { background: var(--color-bg-sunken); text-decoration: none; }
  .account-switcher__option--active { color: var(--color-primary); }
  .account-switcher__option--new {
    color: var(--color-fg-muted);
    font-style: italic;
  }
  .account-switcher__option-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--color-bg-sunken);
    color: var(--color-fg);
    font-weight: var(--weight-medium);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
  }
  .account-switcher__option--active .account-switcher__option-monogram {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }
  .account-switcher__option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-switcher__option-check { color: var(--color-primary); display: inline-flex; }
  .account-switcher__option-check svg { width: 1rem; height: 1rem; }
  .account-switcher__divider {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin: var(--space-1) 0;
  }
}

/* Logo component. */
@layer components {
  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    letter-spacing: var(--tracking-tight);
  }
  .logo__mark { width: 1.25rem; height: 1.25rem; }
  .logo--mark .logo__word { display: none; }
  .logo--word .logo__mark { display: none; }
  .logo--small { font-size: var(--text-sm); }
  .logo--small .logo__mark { width: 1rem; height: 1rem; }
}


/* ==== layout/header.css ==== */
/* Header — used only by the logged-out (legacy) header inside the
 * application layout. Logged-in users get the sidebar + topbar shell
 * (T-6.5.4, T-6.5.5) instead of this header. The marketing layout
 * (T-6.5.8) also has its own header.
 */

@layer layout {
  .header {
    background: var(--color-bg-elevated);
    border-block-end: 1px solid var(--color-border);
  }

  .header .nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
  }

  .nav__brand {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    color: var(--color-fg);
  }

  .nav__brand:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  .nav__list {
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-fg-muted);
    transition: background var(--motion-fast) var(--easing-default),
                color var(--motion-fast) var(--easing-default);
  }

  .nav__link:hover {
    background: var(--color-bg-sunken);
    color: var(--color-fg);
    text-decoration: none;
  }

  .nav__link--button {
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
  }
  .nav__form { display: inline; }
}


/* ==== layout/marketing.css ==== */
@layer layout {
  .marketing {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
  }

  .marketing__main {
    flex: 1;
  }
}

@layer layout {
  .nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-nav);
    background: color-mix(in oklch, var(--color-bg-elevated) 85%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-block-end: 1px solid var(--color-border);
  }

  .nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 0 var(--space-4);
    height: 3.5rem;
  }

  .nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    letter-spacing: -0.02em;
  }
  .nav__brand:hover { text-decoration: none; }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    justify-content: center;
  }

  .nav__link {
    padding: var(--space-1) var(--space-3);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--easing-default),
                background var(--motion-fast) var(--easing-default);
  }
  .nav__link:hover {
    color: var(--color-fg);
    background: var(--color-bg-sunken);
    text-decoration: none;
  }

  .nav__cmdk {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    color: var(--color-fg-subtle);
    font-size: var(--text-sm);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--easing-default),
                color var(--motion-fast) var(--easing-default);
  }
  .nav__cmdk:hover {
    border-color: var(--color-primary);
    color: var(--color-fg);
  }
  .nav__cmdk kbd {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.125rem 0.25rem;
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    line-height: 1;
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .button--nav {
    font-size: var(--text-sm);
    font-weight: 500;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-sm);
    height: 2.25rem;
  }

  .hamburger {
    display: none;
  }

  .nav__drawer { display: none; }

  @media (max-width: 768px) {
    .nav__list,
    .nav__cmdk,
    .nav__actions,
    body.marketing .nav .theme-toggle { display: none; }

    .hamburger {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 2.25rem;
      height: 2.25rem;
      margin-inline-start: auto;
      padding: 0;
      background: var(--color-bg-sunken);
      color: var(--color-fg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      cursor: pointer;
    }
    .hamburger:hover { background: var(--color-bg); border-color: var(--color-border-strong); }
    .hamburger-line {
      display: block;
      width: 1rem;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: transform var(--motion-fast) var(--easing-default),
                  opacity var(--motion-fast) var(--easing-default);
    }
    .nav[data-mobile-nav-open-value="true"] .hamburger-line:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .nav[data-mobile-nav-open-value="true"] .hamburger-line:nth-child(2) {
      opacity: 0;
    }
    .nav[data-mobile-nav-open-value="true"] .hamburger-line:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .nav__drawer {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      max-height: 0;
      overflow: hidden;
      border-block-start: 1px solid transparent;
      transition: max-height var(--motion-base) var(--easing-default),
                  border-color var(--motion-base) var(--easing-default),
                  padding var(--motion-base) var(--easing-default);
    }
    .nav[data-mobile-nav-open-value="true"] .nav__drawer {
      max-height: calc(100dvh - 3.5rem);
      overflow-y: auto;
      border-block-start-color: var(--color-border);
      padding: var(--space-3) var(--space-4);
    }
    .nav__drawer .nav__link { display: block; padding: var(--space-3); font-size: var(--text-md); border-radius: var(--radius-sm); }
    .nav__drawer-actions { display: flex; flex-direction: column; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
    .nav__drawer-link { display: block; padding: var(--space-3); font-size: var(--text-md); text-align: center; border-radius: var(--radius-sm); color: var(--color-fg-muted); }
    .nav__drawer-link:hover { background: var(--color-bg-sunken); text-decoration: none; }
    .button--block { display: flex; width: 100%; justify-content: center; }
    .nav__drawer-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
    .nav__drawer-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-fg-muted); }
  }
}

@layer layout {
  .footer {
    border-block-start: 1px solid var(--color-border);
    padding: var(--space-8) 0;
    margin-block-start: var(--space-24);
  }

  .footer__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-md);
  }
  .footer__brand:hover { text-decoration: none; }

  .footer__tagline {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }

  .footer__links {
    display: flex;
    gap: var(--space-4);
    font-size: var(--text-sm);
  }

  .footer__link {
    color: var(--color-fg-muted);
  }
  .footer__link:hover { color: var(--color-fg); }

  .footer__copyright {
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
  }

  @media (max-width: 640px) {
    .footer__inner { flex-direction: column; gap: var(--space-3); }
  }
}


/* ==== layout/footer.css ==== */
@layer layout {
  .footer {
    padding: var(--space-6) var(--space-4);
    color: var(--color-fg-muted);
    border-block-start: 1px solid var(--color-border);
  }
}


/* ==== layout/auth.css ==== */
@layer layout {
  .auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 4rem);
    padding: var(--space-6) var(--space-4);
  }

  .auth-card {
    width: 100%;
    max-width: 24rem;
    padding: var(--space-8);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .auth-card__title {
    margin-block-end: var(--space-2);
  }

  .auth-card__lede {
    color: var(--color-fg-muted);
    margin-block-end: var(--space-6);
  }

  .auth-form {
    display: flex;
    flex-direction: column;
  }
}


/* ==== components/button.css ==== */
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: var(--weight-medium);
    color: var(--color-fg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--motion-fast) var(--easing-default),
                border-color var(--motion-fast) var(--easing-default);
  }

  .button:hover { background: var(--color-bg-sunken); }
  .button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

  .button--primary {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-color: transparent;
  }

  .button--primary:hover { background: var(--color-primary-hover); }

  .button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-fg-muted);
  }

  .button--ghost:hover { background: var(--color-bg-sunken); color: var(--color-fg); }

  .button--danger {
    background: var(--color-danger);
    color: var(--color-danger-fg);
    border-color: transparent;
  }

  .button--block {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}


/* ==== components/card.css ==== */
@layer components {
  .card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }

  .card__header {
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    font-weight: var(--weight-semibold);
  }

  .card__body {
    padding: var(--space-4);
  }

  .card__footer {
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-sunken);
    border-block-start: 1px solid var(--color-border);
  }
}


/* ==== components/badge.css ==== */
@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-pill);
    background: var(--color-bg-sunken);
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
  }

  .badge--indexing { color: var(--color-warning-fg); background: var(--color-warning); border-color: transparent; }
  .badge--indexed  { color: var(--color-success-fg); background: var(--color-success); border-color: transparent; }
  .badge--failed   { color: var(--color-danger-fg);  background: var(--color-danger);  border-color: transparent; }
  .badge--queued   { color: var(--color-info-fg);    background: var(--color-info);    border-color: transparent; }
}


/* ==== components/form.css ==== */
@layer components {
  .form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }

  .form-field__label {
    font-weight: var(--weight-medium);
    color: var(--color-fg);
  }

  .form-hint {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
  }

  .form-error {
    font-size: var(--text-sm);
    color: var(--color-danger);
  }

  .form-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }
}


/* ==== components/input.css ==== */
@layer components {
  .input,
  .textarea,
  .select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-fg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-fast) var(--easing-default);
  }

  .input:focus-visible,
  .textarea:focus-visible,
  .select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
  }

  .textarea {
    min-height: 6rem;
    resize: vertical;
  }

  .checkbox,
  .radio {
    accent-color: var(--color-primary);
    width: 1.1em;
    height: 1.1em;
  }
}


/* ==== components/table.css ==== */
@layer components {
  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .table th,
  .table td {
    text-align: start;
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }

  .table th {
    font-weight: var(--weight-semibold);
    color: var(--color-fg-muted);
  }

  .table--striped tbody tr:nth-child(odd) {
    background: var(--color-bg-sunken);
  }

  .table--compact th,
  .table--compact td {
    padding: var(--space-1) var(--space-2);
  }
}


/* ==== components/tabs.css ==== */
@layer components {
  .tabs {
    display: flex;
    gap: var(--space-1);
    border-block-end: 1px solid var(--color-border);
    margin-block-end: var(--space-4);
  }

  .tab {
    padding: var(--space-2) var(--space-4);
    border-block-end: 2px solid transparent;
    color: var(--color-fg-muted);
    font-weight: var(--weight-medium);
  }

  .tab:hover { color: var(--color-fg); text-decoration: none; }

  .tab--active {
    color: var(--color-primary);
    border-block-end-color: var(--color-primary);
  }
}


/* ==== components/progress.css ==== */
@layer components {
  progress.progress,
  .progress {
    width: 100%;
    height: 0.5rem;
    appearance: none;
    border: 0;
    background: var(--color-bg-sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  progress.progress::-webkit-progress-bar { background: var(--color-bg-sunken); }
  progress.progress::-webkit-progress-value { background: var(--color-primary); transition: width var(--motion-base) var(--easing-default); }
  progress.progress::-moz-progress-bar { background: var(--color-primary); }
}


/* ==== components/chip.css ==== */
@layer components {
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
  }

  .chip__remove {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-fg-muted);
  }

  .chip__remove:hover { color: var(--color-danger); }
}


/* ==== components/empty-state.css ==== */
@layer components {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    color: var(--color-fg-muted);
    background: var(--color-bg-sunken);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
  }
}


/* ==== components/bar.css ==== */
@layer components {
  .bar {
    display: grid;
    grid-template-columns: 6rem 1fr 3rem;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
  }

  .bar__row {
    display: contents;
  }

  .bar__value {
    color: var(--color-fg-muted);
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  .bar__fill {
    height: 0.5rem;
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    width: 0;
    transition: width var(--motion-base) var(--easing-default);
  }

  /* Width modifiers — the playground (Phase 4) updates widths dynamically
   * via Stimulus + a CSS custom property. The static showcase uses these
   * modifiers to keep zero inline styles. */
  .bar__fill--w-10 { width: 10%; }
  .bar__fill--w-25 { width: 25%; }
  .bar__fill--w-30 { width: 30%; }
  .bar__fill--w-50 { width: 50%; }
  .bar__fill--w-51 { width: 51%; }
  .bar__fill--w-74 { width: 74%; }
  .bar__fill--w-75 { width: 75%; }
  .bar__fill--w-88 { width: 88%; }
  .bar__fill--w-100 { width: 100%; }

  /* Per-signal colors — used by the playground */
  .bar__fill--dense  { background: var(--color-signal-dense); }
  .bar__fill--bm25   { background: var(--color-signal-bm25); }
  .bar__fill--sparse { background: var(--color-signal-sparse); }
  .bar__fill--kg     { background: var(--color-signal-kg); }
}


/* ==== components/signal-bars.css ==== */
@layer components {
  .signal-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
}


/* ==== components/slider.css ==== */
@layer components {
  input[type="range"].slider {
    appearance: none;
    width: 100%;
    height: 1.5rem;
    background: transparent;
    cursor: pointer;
  }

  input[type="range"].slider::-webkit-slider-runnable-track {
    height: 0.25rem;
    background: var(--color-bg-sunken);
    border-radius: var(--radius-pill);
  }

  input[type="range"].slider::-webkit-slider-thumb {
    appearance: none;
    width: 1rem;
    height: 1rem;
    background: var(--color-primary);
    border-radius: 50%;
    margin-block-start: -0.375rem;
    border: 2px solid var(--color-bg-elevated);
  }

  input[type="range"].slider::-moz-range-track {
    height: 0.25rem;
    background: var(--color-bg-sunken);
    border-radius: var(--radius-pill);
  }

  input[type="range"].slider::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background: var(--color-primary);
    border-radius: 50%;
    border: 2px solid var(--color-bg-elevated);
  }

  input[type="range"].slider:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
  }
}


/* ==== components/highlight.css ==== */
/* Highlight styling — <mark> for search snippets.
 * Defined in base.css; this file is a placeholder for more elaborate
 * variants (e.g. multiple hit colours) added in later phases.
 */


/* ==== components/theme-toggle.css ==== */
/* Theme toggle button — a single button that cycles light → dark → system.
 * Renders three SVG icons (sun/moon/monitor) and shows only the one
 * matching the current state via the [data-theme-state] attribute set
 * by the theme_controller.
 *
 * The state attribute is one of "light" | "dark" | "system".
 * The resolved attribute is one of "light" | "dark" (it is the
 * system-resolved value, useful for system-mode icon styling).
 */

@layer components {
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-fg-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--motion-fast) var(--easing-default),
                color var(--motion-fast) var(--easing-default),
                border-color var(--motion-fast) var(--easing-default);
  }

  .theme-toggle:hover {
    background: var(--color-bg-sunken);
    color: var(--color-fg);
  }

  .theme-toggle:focus-visible {
    outline: none;
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-focus);
  }

  .theme-toggle__icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
  }

  /* Default: hide all three icons. The matching state is shown by
   * the rule that follows. We use `display: contents` on the parent
   * SVG, but actually the easier path is to keep all three mounted
   * and just hide the non-matching ones. */
  .theme-toggle__icon { display: none; }

  /* State -> icon mapping. */
  .theme-toggle[data-theme-state="light"]  .theme-toggle__icon--sun    { display: block; }
  .theme-toggle[data-theme-state="dark"]   .theme-toggle__icon--moon   { display: block; }
  .theme-toggle[data-theme-state="system"] .theme-toggle__icon--system { display: block; }

  /* The "Theme" label is hidden on small screens to save space. */
  .theme-toggle__label-text { display: none; }
  @media (min-width: 640px) {
    .theme-toggle__label-text { display: inline; }
  }
}


/* ==== components/cmdk.css ==== */
/* Command palette — a Linear/⌘K-style modal palette.
 *
 * - .cmdk is the dialog root (hidden by default; the controller
 *   removes the [hidden] attribute to show it).
 * - .cmdk__backdrop is a full-screen tinted overlay.
 * - .cmdk__panel is the visible panel (centered, 640px wide).
 * - The list is a virtualized free-for-all: the Stimulus controller
 *   renders <button> rows in groups (Navigation, Create, ...).
 */

@layer components {
  .cmdk {
    position: fixed;
    inset: 0;
    z-index: var(--z-cmdk);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-block-start: 10vh;
  }
  .cmdk[hidden] { display: none; }

  .cmdk__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-bg-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .cmdk__panel {
    position: relative;
    width: min(640px, calc(100vw - var(--space-6)));
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: cmdk-in var(--motion-base) var(--easing-out);
  }
  @keyframes cmdk-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }

  .cmdk__input-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }
  .cmdk__input-icon { display: inline-flex; color: var(--color-fg-muted); }
  .cmdk__input-icon svg { width: 1.1rem; height: 1.1rem; }

  .cmdk__input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--color-fg);
    font: inherit;
    font-size: var(--text-md);
    padding: 0;
    outline: none;
    min-width: 0;
  }
  .cmdk__input::placeholder { color: var(--color-fg-subtle); }

  .cmdk__input-kbd {
    display: inline-block;
    padding: 0 0.4em;
    font: inherit;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-fg-muted);
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .cmdk__results {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
  }

  .cmdk__group {
    margin-block-end: var(--space-2);
  }
  .cmdk__group-label {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }

  .cmdk__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-fg);
    border: 0;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }
  .cmdk__item:hover,
  .cmdk__item--active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    text-decoration: none;
  }
  .cmdk__item-icon { display: inline-flex; color: var(--color-fg-muted); }
  .cmdk__item--active .cmdk__item-icon { color: var(--color-primary); }
  .cmdk__item-icon svg { width: 1rem; height: 1rem; }
  .cmdk__item-label { flex: 1; }
  .cmdk__item-shortcut {
    display: inline-flex;
    gap: 2px;
  }
  .cmdk__item-shortcut kbd {
    display: inline-block;
    padding: 0 0.3em;
    font: inherit;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-fg-muted);
    background: var(--color-bg-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .cmdk__empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .cmdk__footer {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-bg-sunken);
    color: var(--color-fg-muted);
    font-size: var(--text-xs);
  }
  .cmdk__footer kbd {
    display: inline-block;
    padding: 0 0.3em;
    font: inherit;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .cmdk__footer span { display: inline-flex; align-items: center; gap: 4px; }
}

/* Reusable <kbd> element styling. */
@layer components {
  kbd {
    display: inline-block;
    padding: 0 0.4em;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.95em;
    color: var(--color-fg);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
  }
}


/* ==== components/related-items.css ==== */
/* Related items — the "more-like-this" panel on the document
 * show page. Renders a horizontal row of inline signal chips
 * (kg / bm25 / rrf) below the related document's title and
 * collection, so the per-signal breakdown reads as a metadata
 * row instead of a stacked dt/dd list. */

.related-items__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.related-items__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.related-items__link {
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
  text-decoration: none;
}
.related-items__collection {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* Inline signal chips: each is a single horizontal pill with
 * the signal name + the score. No dt/dd stack. */
.related-items__signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.related-items__signal {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  /* dotted underline hints at the tooltip without screaming for
   * attention — same pattern as WAI-ARIA "definition" links. */
  border-bottom-style: dotted;
  cursor: help;
}
/* Keyboard focus ring: the chip is a passive <span> that opts into
 * tab order via tabindex=0 so keyboard users can read the tooltip
 * popover. Match the global focus shadow so it looks consistent
 * with every other focusable element. */
.related-items__signal:focus { outline: none; }
.related-items__signal:focus-visible {
  box-shadow: var(--shadow-focus);
  border-color: var(--color-border-strong);
}

.related-items__signal strong {
  color: var(--color-fg);
  font-weight: var(--weight-semibold);
}

/* Each signal gets a subtle accent so the user can scan the
 * row at a glance: kg = teal (graph), bm25 = amber (lexical),
 * rrf = primary (fused). */
.related-items__signal[data-signal="kg"]   { border-color: color-mix(in oklch, var(--color-info) 50%, var(--color-border)); }
.related-items__signal[data-signal="bm25"] { border-color: color-mix(in oklch, var(--color-warning) 50%, var(--color-border)); }
.related-items__signal[data-signal="rrf"]  { border-color: color-mix(in oklch, var(--color-primary) 50%, var(--color-border)); }

.related-items__lede {
  margin-block-end: var(--space-3);
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
}

/* Per-card "Show JSON" toggle. Collapsed by default so the
 * visual list stays scannable; expanding reveals the same shape
 * the API recommend endpoint returns, so users can copy
 * per-document payload right next to the card it describes. */
.related-items__details {
  margin-block-start: var(--space-3);
}

.related-items__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
}
.related-items__summary::-webkit-details-marker { display: none; }
.related-items__summary::marker              { content: ""; }
.related-items__summary:hover { color: var(--color-fg); border-color: var(--color-border-strong); }

.related-items__details[open] .related-items__summary {
  margin-block-end: var(--space-2);
}

.related-items__json {
  padding: var(--space-3);
  font-size: var(--text-xs);
  background: var(--color-bg-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* CSS-only tooltip popover for signal chips.
 *
 * Why pseudo-elements and not a JS popover?
 *   Native `title=` shows a tiny OS-rendered tooltip after a hover
 *   delay and is easy to miss — the user reported only the `?`
 *   cursor (cursor: help) appeared, with no tooltip text at all.
 *   A CSS popover renders in the page itself, has no JS dependency,
 *   matches the design-system tokens, and works on hover AND focus.
 *
 * The popover uses two pseudo-elements:
 *   ::after  — the rounded text bubble (the tooltip itself)
 *   ::before — a small rotated square that pretends to be a tail
 *              pointing down at the chip.
 *
 * Both default to opacity:0 + pointer-events:none + a small
 * translateY so we can fade + nudge them in on hover/focus without
 * touching layout (avoids reflow thrash while sweeping the chips).
 *
 * Position: bottom:100% + a small gap anchors the popover above
 * the chip so it doesn't push the row of chips around when it
 * appears. left:50% + translateX(-50%) centers it on the chip;
 * max-width keeps long tooltips readable.
 *
 * Accessibility: the same text is also exposed as `title=` on the
 * span so screen readers and CSS-disabled clients still get the
 * hint. The chip opts into tab order via tabindex="0" so keyboard
 * users can focus it and trigger the popover with the keyboard.
 * prefers-reduced-motion kills the transition entirely. */
.related-items__signal::after,
.related-items__signal::before {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-topbar);
  transition: opacity var(--motion-fast) var(--easing-out),
              transform var(--motion-fast) var(--easing-out);
}
.related-items__signal::after {
  /* The text bubble. Width:max-content + max-width lets short
   * hints stay compact while long ones wrap instead of overflowing
   * the card. white-space:normal so it actually wraps. */
  content: attr(data-tooltip);
  bottom: calc(100% + var(--space-2));
  transform: translateX(-50%) translateY(2px);
  width: max-content;
  max-width: 16rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-fg-inverse);
  background: var(--color-fg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  white-space: normal;
  text-align: start;
  letter-spacing: var(--tracking-normal);
}
.related-items__signal::before {
  /* The little tail. Same color as the bubble (var(--color-fg))
   * and rotated 45deg to look like a square arrow. Sits between
   * the bubble and the chip, offset by 2px so the rotation
   * doesn't poke a pixel into the bubble edge. */
  content: "";
  bottom: calc(100% + var(--space-1) - 4px);
  width: 8px;
  height: 8px;
  background: var(--color-fg);
  transform: translateX(-50%) translateY(2px) rotate(45deg);
}
.related-items__signal:hover::after,
.related-items__signal:focus::after,
.related-items__signal:hover::before,
.related-items__signal:focus::before,
.related-items__signal:focus-visible::after,
.related-items__signal:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Don't animate for users who prefer reduced motion — the
 * popover still appears, just without the fade+nudge. */
@media (prefers-reduced-motion: reduce) {
  .related-items__signal::after,
  .related-items__signal::before { transition: none; }
}



/* ==== pages/landing.css ==== */
@layer pages {
  .marquee-hero {
    padding-block: var(--space-16) var(--space-8);
  }

  .marquee-hero__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
  }

  @media (max-width: 900px) {
    .marquee-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  }

  .marquee-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4vw + 0.5rem, 4.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--color-fg);
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .marquee-hero__title-accent {
    color: var(--color-primary);
  }

  .marquee-hero__lede {
    margin-block-start: var(--space-4);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--color-fg-muted);
    max-width: 42rem;
  }

  .marquee-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-8);
    flex-wrap: wrap;
  }

  .marquee-hero__sub {
    margin-block-start: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
    text-align: start;
  }

  .marquee-hero__actions .button {
    font-family: var(--font-sans);
    font-weight: 500;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
  }

  .button--primary-cobalt {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border: 1px solid transparent;
  }
  .button--primary-cobalt:hover { background: var(--color-primary-hover); }

  .button--ghost-cobalt {
    background: transparent;
    color: var(--color-fg-muted);
    border: 1px solid var(--color-border);
  }
  .button--ghost-cobalt:hover { border-color: var(--color-primary); color: var(--color-fg); }

  .code-card {
    background: oklch(22% 0.016 260);
    border: 1px solid oklch(32% 0.016 260);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px oklch(20% 0.02 260 / 0.06);
  }

  .code-card__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: oklch(25% 0.016 260);
    border-block-end: 1px solid oklch(32% 0.016 260);
  }

  .code-card__dots {
    display: flex;
    gap: 5px;
  }
  .code-card__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  .code-card__dot--red    { background: #ff5f56; }
  .code-card__dot--yellow { background: #ffbd2e; }
  .code-card__dot--green  { background: #27c93f; }

  .code-card__filename {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: oklch(65% 0.01 260);
    margin-inline-start: var(--space-2);
  }

  .code-card__status {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .code-card__pre {
    margin: 0;
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.6;
    overflow-x: auto;
    color: oklch(82% 0.008 260);
  }

  .code-card__pre .tok-comment { color: oklch(52% 0.008 260); }
  .code-card__pre .tok-key    { color: var(--color-primary); }
  .code-card__pre .tok-string { color: oklch(82% 0.02 80); }
  .code-card__pre .tok-punct  { color: oklch(52% 0.008 260); }
  .code-card__pre .tok-num    { color: oklch(72% 0.02 200); }

  @media (max-width: 768px) {
    .marquee-hero { padding-block: var(--space-10) var(--space-6); }
    .marquee-hero__title { font-size: clamp(1.875rem, 5vw, 2.75rem); }
    .code-card__pre { font-size: var(--text-xs); }
  }
}

@layer pages {
  .social-proof {
    max-width: var(--container-wide);
    margin: var(--space-8) auto;
    padding-inline: var(--space-4);
    text-align: center;
  }

  .social-proof__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-subtle);
  }

  .social-proof__row {
    margin-block-start: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .social-proof__item {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
}

@layer pages {
  .features {
    max-width: var(--container-wide);
    margin: var(--space-24) auto;
    padding-inline: var(--space-4);
  }

  .features__header {
    text-align: center;
    margin-block-end: var(--space-12);
  }

  .features__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .features__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .features__lede {
    margin-block-start: var(--space-3);
    color: var(--color-fg-muted);
    line-height: var(--leading-relaxed);
    max-width: 40rem;
    margin-inline: auto;
  }

  .features__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
  }

  @media (max-width: 900px) {
    .features__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 600px) {
    .features__grid { grid-template-columns: 1fr; }
  }

  .feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--motion-fast) var(--easing-default),
                box-shadow var(--motion-fast) var(--easing-default);
  }

  .feature-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
  }

  .feature-card__tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    padding: 0.125rem var(--space-2);
    border: 1px solid var(--color-primary);
    border-radius: 3px;
    margin-block-end: var(--space-3);
  }

  .feature-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-block-end: var(--space-2);
  }

  .feature-card__body {
    color: var(--color-fg-muted);
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
  }

  .feature-card__body code {
    background: var(--color-bg-sunken);
    padding: 0.125em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: var(--font-mono);
  }

  .feature-card__code {
    margin-block-start: var(--space-4);
    padding: var(--space-3);
    background: oklch(22% 0.016 260);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    overflow-x: auto;
    color: oklch(75% 0.008 260);
  }

  .feature-card__code .hl { color: var(--color-primary); }
}

@layer pages {
  .section-divider {
    border: none;
    border-block-start: 1px solid var(--color-border);
    max-width: var(--container-wide);
    margin: 0 auto;
  }
}

@layer pages {
  .cta-band {
    padding-block: var(--space-20) var(--space-24);
    text-align: center;
  }

  .cta-band__inner {
    max-width: 38rem;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .cta-band__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .cta-band__lede {
    margin-block-start: var(--space-3);
    color: var(--color-fg-muted);
  }

  .cta-band__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
    flex-wrap: wrap;
  }

  .cta-band__sub {
    margin-block-start: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
  }
}

@layer pages {
  .compare {
    background: var(--color-bg);
    padding-block: var(--space-20);
  }
  .compare__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .compare__header { text-align: center; margin-block-end: var(--space-12); }
  .compare__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
  .compare__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .compare__lede {
    margin-block-start: var(--space-3);
    color: var(--color-fg-muted);
    line-height: var(--leading-relaxed);
    max-width: 44rem;
    margin-inline: auto;
  }
  .compare__lede a { color: var(--color-primary); }

  .compare__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
  }
  .compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    min-width: 44rem;
  }
  .compare__table th,
  .compare__table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
  }
  .compare__table tbody tr:last-child th,
  .compare__table tbody tr:last-child td { border-block-end: none; }
  .compare__table thead th {
    background: var(--color-bg-sunken);
    color: var(--color-fg-muted);
    font-weight: 600;
    text-align: center;
    border-block-end: 1px solid var(--color-border);
  }
  .compare__feature-col { text-align: start !important; }
  .compare__brand {
    display: block;
    font-weight: 600;
    color: var(--color-fg);
  }
  .compare__sub {
    display: block;
    margin-block-start: 0.125rem;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .compare__us-col {
    background: var(--color-primary-soft) !important;
    color: var(--color-primary) !important;
  }
  .compare__us-col .compare__brand { color: var(--color-primary); }
  .compare__us-col .compare__sub { color: color-mix(in oklch, var(--color-primary), transparent 30%); }
  .compare__table tbody th {
    font-weight: 500;
    color: var(--color-fg);
    text-align: start;
    white-space: nowrap;
  }
  .compare__table tbody td { text-align: center; }
  .compare__us {
    background: color-mix(in oklch, var(--color-primary-soft), transparent 50%);
    color: var(--color-primary);
  }
  .compare__us strong { color: var(--color-primary); }
  .compare__check {
    display: inline-block;
    font-weight: 600;
    line-height: 1;
  }
  .compare__table tbody td:not(.compare__us) .compare__check { color: var(--color-fg-subtle); }
  .compare__us .compare__check { color: var(--color-primary); }

  .compare__footnote {
    margin-block-start: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    color: var(--color-fg-subtle);
    font-size: var(--text-xs);
  }
  .compare__legend { display: inline-flex; align-items: center; gap: var(--space-1); }
}

@layer pages {
  .code {
    background: oklch(22% 0.016 260);
    padding-block: var(--space-20);
  }
  .code__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .code__header { text-align: center; margin-block-end: var(--space-10); }
  .code__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: oklch(96% 0.005 260);
  }
  .code__lede { margin-block-start: var(--space-2); color: oklch(65% 0.01 260); }

  .code__panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  @media (max-width: 768px) {
    .code__panes { grid-template-columns: 1fr; }
  }

  .code__pane {
    background: oklch(25% 0.016 260);
    border: 1px solid oklch(32% 0.016 260);
    border-radius: 6px;
    overflow: hidden;
  }
  .code__pane figcaption {
    padding: var(--space-2) var(--space-4);
    border-block-end: 1px solid oklch(32% 0.016 260);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: oklch(65% 0.01 260);
  }
  .code__block {
    margin: 0;
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    overflow-x: auto;
    color: oklch(82% 0.008 260);
  }
}


/* ==== pages/marketing.css ==== */
@layer pages {
  .page-header {
    padding-block: var(--space-16) var(--space-10);
    text-align: center;
  }

  .page-header__inner {
    max-width: var(--container-prose);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .page-header__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .page-header__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .page-header__lede {
    margin-block-start: var(--space-3);
    color: var(--color-fg-muted);
    max-width: 36rem;
    margin-inline: auto;
  }
}

@layer pages {
  .pricing {
    padding-block: 0 var(--space-16);
  }

  .pricing__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .pricing__header { text-align: center; margin-block-end: var(--space-12); }

  .pricing__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .pricing__title {
    margin-block-start: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.08;
  }

  .pricing__lede {
    margin-block-start: var(--space-3);
    color: var(--color-fg-muted);
    max-width: 36rem;
    margin-inline: auto;
  }

  .pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-4);
    align-items: stretch;
  }

  .pricing__grid--two {
    max-width: 56rem;
    margin-inline: auto;
  }

  .pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .pricing-card--featured {
    border-color: var(--color-primary);
  }

  .pricing-card__badge {
    position: absolute;
    inset-block-start: calc(var(--space-3) * -1);
    inset-inline-start: var(--space-6);
    padding: var(--space-1) var(--space-3);
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .pricing-card__name {
    font-size: var(--text-xl);
    font-weight: 600;
    font-family: var(--font-display);
  }

  .pricing-card__tagline { color: var(--color-fg-muted); font-size: var(--text-sm); }

  .pricing-card__price { display: flex; align-items: baseline; gap: var(--space-2); }

  .pricing-card__amount {
    font-size: var(--text-4xl);
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--color-fg);
    letter-spacing: -0.02em;
  }

  .pricing-card__period { color: var(--color-fg-muted); font-size: var(--text-sm); }

  .pricing-card__features {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-fg-muted);
    font-size: var(--text-sm);
  }

  .pricing-card__features li::before {
    content: "✓ ";
    color: var(--color-primary);
  }

  .pricing-card .button {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
  }

  .pricing__faq {
    margin-block-start: var(--space-20);
    max-width: 44rem;
    margin-inline: auto;
  }

  .pricing__faq h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-block-end: var(--space-6);
    text-align: center;
  }

  .faq {
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-4);
  }

  .faq summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--color-fg);
    list-style: none;
  }

  .faq summary::before { content: "+ "; color: var(--color-primary); }
  .faq[open] summary::before { content: "− "; }
  .faq p { margin-block-start: var(--space-3); color: var(--color-fg-muted); font-size: var(--text-sm); }
}

@layer pages {
  .prose {
    padding-block: var(--space-8) var(--space-20);
  }

  .prose__inner {
    max-width: var(--container-prose);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  .prose__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .prose h1 {
    margin-block: var(--space-3) var(--space-4);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .prose__lede {
    color: var(--color-fg-muted);
    font-size: var(--text-lg);
    margin-block-end: var(--space-8);
  }

  .prose h2 {
    margin-block-start: var(--space-10);
    font-size: var(--text-xl);
    font-weight: 600;
  }

  .prose h3 {
    margin-block-start: var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .prose p {
    line-height: var(--leading-relaxed);
    margin-block: var(--space-3);
  }

  .prose ul, .prose ol {
    padding-inline-start: var(--space-6);
    margin-block: var(--space-3);
  }

  .prose li { margin-block: var(--space-1); line-height: var(--leading-relaxed); }

  .prose code {
    padding: 0.125em 0.3em;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  .prose a { color: var(--color-primary); }

  .prose strong { font-weight: 600; }
}

@layer pages {
  .docs { padding-block: var(--space-8) var(--space-20); }

  .docs__inner {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--space-10);
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  @media (max-width: 768px) {
    .docs__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  }

  .docs__nav {
    position: sticky;
    inset-block-start: calc(3.5rem + var(--space-4));
    align-self: start;
  }

  .docs__nav h2 {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin-block-end: var(--space-4);
  }

  .docs__nav h3 {
    font-size: var(--text-sm);
    color: var(--color-fg);
    margin-block: var(--space-4) var(--space-2);
    font-weight: 600;
  }

  .docs__nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .docs__link {
    display: block;
    padding: var(--space-1) var(--space-2);
    color: var(--color-fg-muted);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
  }

  .docs__link:hover { background: var(--color-bg-sunken); color: var(--color-fg); text-decoration: none; }
  .docs__link--active { color: var(--color-primary); background: var(--color-primary-soft); }

  .docs__content { max-width: 48rem; }

  .docs__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .docs__content h1 {
    margin-block: var(--space-3) var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  .docs__lede { margin-block: var(--space-2) var(--space-8); color: var(--color-fg-muted); font-size: var(--text-lg); }

  .docs__content h2 {
    margin-block-start: var(--space-10);
    font-size: var(--text-xl);
    font-weight: 600;
  }

  .docs__content h3 {
    margin-block-start: var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .docs__content p { margin-block: var(--space-3); line-height: var(--leading-relaxed); }
  .docs__content ul, .docs__content ol { padding-inline-start: var(--space-6); margin-block: var(--space-3); }
  .docs__content li { margin-block: var(--space-1); }
  .docs__content code { padding: 0.125em 0.3em; border-radius: 3px; font-family: var(--font-mono); font-size: 0.9em; }
  .docs__content .code-block { margin-block: var(--space-3); }
  .docs__content a { color: var(--color-primary); }
  .docs__content strong { font-weight: 600; }

  .code-block {
    background: oklch(22% 0.016 260);
    border: 1px solid oklch(32% 0.016 260);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    overflow-x: auto;
    color: oklch(82% 0.008 260);
  }

  .docs__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-8);
  }

  .doc-card {
    display: block;
    padding: var(--space-6);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    transition: border-color var(--motion-fast) var(--easing-default);
  }

  .doc-card:hover {
    border-color: var(--color-primary);
    text-decoration: none;
  }

  .doc-card h2 { font-size: var(--text-lg); margin-block-end: var(--space-2); }
  .doc-card p { color: var(--color-fg-muted); line-height: var(--leading-relaxed); font-size: var(--text-sm); }
  .doc-card__cta { display: inline-block; margin-block-start: var(--space-3); color: var(--color-primary); font-weight: 500; }
}

@layer pages {
  .blog { padding-block: var(--space-8) var(--space-20); }
  .blog__inner { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-4); }
  .blog__inner--narrow { max-width: var(--container-prose); }
  .blog__header { margin-block-end: var(--space-10); text-align: center; }

  .blog__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .blog__header h1 {
    margin-block: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.08;
  }

  .blog__lede { margin-block-start: var(--space-2); color: var(--color-fg-muted); }

  .blog__list { display: flex; flex-direction: column; gap: var(--space-4); }

  .post-card {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--motion-fast) var(--easing-default);
  }

  .post-card:hover { border-color: var(--color-primary); }

  .post-card__link {
    display: block;
    padding: var(--space-6);
    color: var(--color-fg);
  }

  .post-card__link:hover { text-decoration: none; }

  .post-card__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    color: var(--color-fg-subtle);
  }

  .post-card__title {
    margin-block: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .post-card__excerpt { color: var(--color-fg-muted); line-height: var(--leading-relaxed); font-size: var(--text-sm); }
  .post-card__cta { display: inline-block; margin-block-start: var(--space-3); color: var(--color-primary); font-weight: 500; }

  .blog-post__date { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-fg-subtle); letter-spacing: 0.03em; }
  .blog-post h1 { margin-block: var(--space-2) var(--space-3); font-family: var(--font-display); font-size: clamp(1.875rem, 3vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
  .blog-post__lede { color: var(--color-fg-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
  .blog-post p { margin-block: var(--space-3); line-height: var(--leading-relaxed); }
  .blog-post h2 { margin-block-start: var(--space-8); font-size: var(--text-xl); font-weight: 600; }
  .blog-post ul { padding-inline-start: var(--space-6); }
  .blog-post code { padding: 0.125em 0.3em; border-radius: 3px; font-family: var(--font-mono); font-size: 0.9em; }
}

@layer pages {
  .changelog { padding-block: var(--space-8) var(--space-20); }
  .changelog__inner { max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--space-4); }
  .changelog__header { margin-block-end: var(--space-10); text-align: center; }

  .changelog__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .changelog__header h1 {
    margin-block: var(--space-3);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .changelog-entry {
    padding-block: var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }

  .changelog-entry__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .changelog-entry__version {
    padding: var(--space-1) var(--space-2);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  .changelog-entry__date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
    letter-spacing: 0.03em;
  }

  .changelog-entry__title {
    margin-block: var(--space-3) var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
  }

  .changelog-entry ul { padding-inline-start: var(--space-6); color: var(--color-fg-muted); font-size: var(--text-sm); }
  .changelog-entry li { margin-block: var(--space-1); line-height: var(--leading-relaxed); }
}

@layer pages {
  .status-table {
    width: 100%;
    margin-block-start: var(--space-6);
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .status-table th, .status-table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
  }

  .status-table th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    font-weight: 500;
  }

  .status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-success);
    margin-inline-end: var(--space-2);
  }
}

@layer pages {
  .hero--compact {
    text-align: center;
    padding-block: var(--space-10);
  }
  .hero--compact .hero__inner {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .hero--compact .hero__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }
  .hero--compact .hero__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 var(--space-4);
  }
  .hero--compact .hero__title-accent { color: var(--color-primary); }
  .hero--compact .hero__title-muted { color: var(--color-fg-muted); }
  .hero--compact .hero__lede {
    max-width: 40rem;
    margin-inline: auto;
    color: var(--color-fg-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
  }

  .playground-form {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block-end: var(--space-8);
  }
  .playground-form .form-actions { flex-direction: row; }
  .playground-form .slider { width: 100%; }

  .checkbox-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
  }
  .checkbox-row input[type="checkbox"] { width: 1.125rem; height: 1.125rem; }

  .suggestions {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block-end: var(--space-12);
    text-align: center;
  }
  .suggestions__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    margin-block-end: var(--space-4);
  }
  .suggestions__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    list-style: none;
    padding: 0;
  }

  .results {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--space-4);
    padding-block-end: var(--space-8);
  }
  .results__header { margin-block-end: var(--space-4); }
  .results__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
  .results__meta { color: var(--color-fg-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
  .results__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
  }

  .result-card {
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .result-card__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
  .result-card__body { color: var(--color-fg-muted); font-size: var(--text-sm); margin-block: var(--space-2); }
  .result-card__signals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
  }
  .result-card__signals dt { color: var(--color-fg-muted); }
  .result-card__signals dd { color: var(--color-primary); margin: 0; }
  .result-card__tags { margin: var(--space-2) 0 0; }

  .cta {
    text-align: center;
    padding-block: var(--space-12);
    border-block-start: 1px solid var(--color-border);
  }
  .cta__inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .cta__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-3);
  }
  .cta__lede { color: var(--color-fg-muted); margin-block-end: var(--space-6); }
  .cta__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
}


/* ==== components/page.css ==== */
@layer components {
  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }

  .stats__card {
    text-align: center;
    padding: var(--space-6) var(--space-4);
  }

  .stats__value {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
  }

  .stats__label {
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    margin-block-start: var(--space-2);
  }

  .page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
    flex-wrap: wrap;
  }

  .page-header h1 { margin: 0; }
  .page-header__lede { color: var(--color-fg-muted); margin: 0; }
  .page-header__actions { display: flex; gap: var(--space-2); }

  .quick-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border);
  }

  .flash {
    padding: var(--space-3) var(--space-4);
    text-align: center;
  }
  .flash--notice { background: var(--color-success); color: var(--color-success-fg); }
  .flash--alert  { background: var(--color-danger);  color: var(--color-danger-fg); }

  .auth-form { max-width: 32rem; }

  .document-body {
    padding: var(--space-4);
    background: var(--color-bg-sunken);
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    overflow-x: auto;
  }

  .api-key-box {
    margin-block: var(--space-4);
    padding: var(--space-4);
    background: var(--color-warning);
    color: var(--color-warning-fg);
    border-radius: var(--radius-md);
  }
  .api-key-box__token {
    display: block;
    margin-block-start: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    color: var(--color-fg);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    word-break: break-all;
  }

  .playground-weights {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .weight-row {
    display: grid;
    grid-template-columns: 5rem 1fr 3rem;
    align-items: center;
    gap: var(--space-3);
  }
  .weight-row__label { color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
  .weight-row__value { color: var(--color-fg); font-variant-numeric: tabular-nums; text-align: end; }

  .results-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .result {
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .result__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }
  .result__rank { color: var(--color-fg-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
  .result__title { margin: 0; flex: 1; font-size: var(--text-lg); }
  .result__score { color: var(--color-primary); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

  .error-card { background: var(--color-danger); color: var(--color-danger-fg); }
  .muted { color: var(--color-fg-muted); }
}