/* ================================================================
   Cortex — Reactive Agents Studio
   Design system aligned with docs.reactiveagents.dev
   Geist Variable (UI) · Outfit (wordmark) · JetBrains Mono (data)
   Brand accents · Violet #8b5cf6 · Cyan #06b6d4
   ================================================================ */

/* Geist Variable — same font as docs site */
@import "@fontsource-variable/geist";
/* Outfit — display headings / wordmark */
@import "@fontsource/outfit";
/* JetBrains Mono — data and code sections */
@import "@fontsource/jetbrains-mono";

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Theme-aware surface tokens ───────────────────────────────── */
/* These CSS variables change with dark/light mode and are used    */
/* as overrides on key structural elements below.                   */
:root {
  /* Default = light */
  --cortex-bg:           #f1f5f9;
  --cortex-surface:      #ffffff;
  --cortex-surface-low:  #f8fafc;
  --cortex-surface-mid:  #e2e8f0;
  --cortex-text:         #0f172a;
  --cortex-text-muted:   #475569;
  --cortex-border:       rgba(0, 0, 0, 0.08);
  --cortex-nav-bg:       #f8fafc;

  /* MarkdownRich — prose + KaTeX */
  --cortex-md-text:                #1e293b;
  --cortex-md-text-muted:          #475569;
  --cortex-md-h1:                  #0e7490;
  --cortex-md-h4:                  #6d28d9;
  --cortex-md-blockquote:          #475569;
  --cortex-md-blockquote-border:   rgba(124, 58, 237, 0.4);
  --cortex-md-code-bg:             #f1f5f9;
  --cortex-md-code-fg:             #6d28d9;
  --cortex-md-code-border:         rgba(0, 0, 0, 0.08);
  --cortex-md-pre-bg:              #f8fafc;
  --cortex-md-pre-fg:              #334155;
  --cortex-md-pre-border:          rgba(0, 0, 0, 0.12);
  --cortex-md-link:                #6d28d9;
  --cortex-md-link-hover:          #5b21b6;
  --cortex-md-hr:                  rgba(0, 0, 0, 0.12);
  --cortex-md-table-border:        rgba(0, 0, 0, 0.12);
  --cortex-md-th-bg:               rgba(139, 92, 246, 0.12);
  --cortex-md-th-text:             #1e293b;
  --cortex-md-katex:               #0f172a;
}

html.dark {
  --cortex-bg:           #17181c;
  --cortex-surface:      #1a1d24;
  --cortex-surface-low:  #24272f;
  --cortex-surface-mid:  #353841;
  --cortex-text:         #eceef2;
  --cortex-text-muted:   #c0c2c7;
  /* Violet-tinted hairline — avoids a cool white “halo” on dark desk chrome */
  --cortex-border:       color-mix(in srgb, var(--ra-violet) 32%, rgb(0 0 0 / 0.55));
  --cortex-nav-bg:       #17181c;

  --cortex-md-text:                rgb(236 238 242 / 0.92);
  --cortex-md-text-muted:          rgb(236 238 242 / 0.88);
  --cortex-md-h1:                  rgb(6 182 212 / 0.95);
  --cortex-md-h4:                  rgb(139 92 246 / 0.9);
  --cortex-md-blockquote:          rgb(236 238 242 / 0.75);
  --cortex-md-blockquote-border:   rgb(139 92 246 / 0.45);
  --cortex-md-code-bg:            rgb(15 17 21 / 0.9);
  --cortex-md-code-fg:             rgb(234 179 8 / 0.95);
  --cortex-md-code-border:         rgb(255 255 255 / 0.06);
  --cortex-md-pre-bg:              rgb(15 17 21 / 0.95);
  --cortex-md-pre-fg:              rgb(236 238 242 / 0.82);
  --cortex-md-pre-border:          rgb(255 255 255 / 0.08);
  --cortex-md-link:                rgb(139 92 246 / 1);
  --cortex-md-link-hover:          rgb(196 181 253 / 1);
  --cortex-md-hr:                  rgb(255 255 255 / 0.08);
  --cortex-md-table-border:        rgb(255 255 255 / 0.1);
  --cortex-md-th-bg:               rgb(139 92 246 / 0.12);
  --cortex-md-th-text:             rgb(236 238 242 / 0.9);
  --cortex-md-katex:               rgb(236 238 242 / 0.94);

  --cortex-tip-caret-stroke: color-mix(in srgb, var(--ra-violet) 28%, rgb(255 255 255 / 0.11));
}

/* Apply theme tokens to structural elements */
body {
  background-color: var(--cortex-bg) !important;
  color: var(--cortex-text) !important;
}

/* Keyboard focus — chrome & cards (form controls use component / browser defaults) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ra-cyan) 75%, white 25%);
  outline-offset: 3px;
}

/* Horizontal nav scroll on narrow viewports */
.cortex-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cortex-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Subtle engineering grid + soft radial (keeps RA accents, avoids flat void) */
.cortex-shell-bg {
  background-color: var(--cortex-bg);
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -30%, rgba(139, 92, 246, 0.09), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(6, 182, 212, 0.06), transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  background-attachment: local, local, fixed, fixed;
}

html:not(.dark) .cortex-shell-bg {
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -30%, rgba(139, 92, 246, 0.07), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(6, 182, 212, 0.05), transparent 50%),
    linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
}

/* Beacon desk — fluid slots inside a panel (matches shell / nav density) */
.cortex-beacon-desk-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
}

@media (min-width: 640px) {
  .cortex-beacon-desk-grid {
    gap: 1rem;
  }
}

/* Kbd chips — RA neon (no gray “white” chrome) */
.cortex-kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--ra-violet) 55%, rgba(6, 182, 212, 0.35));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--ra-violet) 22%, transparent),
    color-mix(in srgb, var(--ra-cyan) 12%, transparent)
  );
  color: color-mix(in srgb, #c4b5fd 90%, var(--cortex-text));
  box-shadow:
    0 0 10px color-mix(in srgb, var(--ra-cyan) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--ra-cyan) 15%, transparent);
}

html:not(.dark) .cortex-kbd {
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.4);
  background: linear-gradient(165deg, rgba(139, 92, 246, 0.14), rgba(6, 182, 212, 0.08));
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Vitals / run: progress — inset groove + gel fill (violet → cyan) */
.cortex-progress-track {
  position: relative;
  height: 0.8125rem;
  padding: 2px;
  border-radius: 9999px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, rgba(6, 8, 12, 0.98), rgba(18, 20, 28, 0.94));
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(139, 92, 246, 0.22),
    inset 0 0 20px rgba(6, 182, 212, 0.04),
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(139, 92, 246, 0.12),
    0 4px 20px rgba(0, 0, 0, 0.25);
}

html:not(.dark) .cortex-progress-track {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 246, 252, 0.98) 100%),
    linear-gradient(180deg, #e4dff5, #f0eef8);
  box-shadow:
    inset 0 2px 5px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(139, 92, 246, 0.2),
    0 1px 2px rgba(124, 58, 237, 0.08),
    0 2px 12px rgba(6, 182, 212, 0.06);
}

/* Smooth width changes for all fills (determinate + status colors) */
.cortex-progress-track > div {
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cortex-progress-fill {
  position: relative;
  height: 100%;
  min-height: 0.4rem;
  border-radius: 9999px;
  background: linear-gradient(
    92deg,
    #5b21b2 0%,
    #6d28d9 12%,
    var(--ra-violet) 32%,
    #a78bfa 48%,
    #38bdf8 72%,
    var(--ra-cyan) 88%,
    #22d3ee 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 2px 6px rgba(0, 0, 0, 0.2) inset,
    0 0 16px rgba(139, 92, 246, 0.45),
    0 0 28px rgba(6, 182, 212, 0.22),
    -1px 0 12px rgba(139, 92, 246, 0.15);
}

/* Specular strip + leading-edge bloom */
.cortex-progress-fill::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 1px;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08) 55%, transparent);
  pointer-events: none;
  z-index: 1;
}

.cortex-progress-fill--terminal {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 2px 5px rgba(0, 0, 0, 0.18) inset,
    0 0 12px rgba(139, 92, 246, 0.32),
    0 0 18px rgba(6, 182, 212, 0.12);
}

html:not(.dark) .cortex-progress-fill,
html:not(.dark) .cortex-progress-fill--terminal {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 2px 4px rgba(15, 23, 42, 0.06) inset,
    0 1px 8px rgba(124, 58, 237, 0.2),
    0 2px 14px rgba(6, 182, 212, 0.12);
}

html:not(.dark) .cortex-progress-fill::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2) 50%, transparent);
}

/* Replay scrub — amber gel (pairs with .cortex-progress-fill--shimmer while playing) */
.cortex-progress-fill--replay {
  position: relative;
  height: 100%;
  min-height: 0.4rem;
  border-radius: 9999px;
  background: linear-gradient(92deg, #92400e 0%, #c2410c 38%, #ea580c 68%, #f59e0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 5px rgba(15, 23, 42, 0.1) inset,
    0 0 14px rgba(217, 119, 6, 0.32),
    0 2px 16px rgba(180, 83, 9, 0.18);
}

html.dark .cortex-progress-fill--replay {
  background: linear-gradient(92deg, #431407 0%, #7c2d12 28%, #b45309 58%, #ca8a04 92%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 6px rgba(0, 0, 0, 0.35) inset,
    0 0 18px rgba(180, 83, 9, 0.38),
    0 0 26px rgba(69, 26, 3, 0.4);
}

.cortex-progress-fill--shimmer {
  overflow: hidden;
  isolation: isolate;
}

.cortex-progress-fill--shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 38%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0.08) 62%,
    transparent 100%
  );
  animation: cortex-progress-shimmer 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .cortex-progress-fill--shimmer::after {
    animation: none;
  }

  .cortex-progress-track > div {
    transition-duration: 0.01ms;
  }

  .vitals-progress-indeterminate {
    animation: none;
  }
}

@keyframes cortex-progress-shimmer {
  0% {
    transform: translateX(-120%) skewX(-6deg);
  }
  100% {
    transform: translateX(220%) skewX(-6deg);
  }
}

.cortex-progress-indeterminate-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 38%;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(109, 40, 217, 0.25) 18%,
    rgba(139, 92, 246, 0.95) 38%,
    rgba(167, 139, 250, 0.9) 48%,
    var(--ra-cyan) 62%,
    rgba(34, 211, 238, 0.75) 78%,
    transparent 100%
  );
  box-shadow:
    0 0 14px rgba(139, 92, 246, 0.55),
    0 0 22px rgba(6, 182, 212, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.5));
}

html:not(.dark) .cortex-progress-indeterminate-bar {
  top: 2px;
  bottom: 2px;
  filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.35));
  box-shadow:
    0 0 10px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Nav/header */
header.cortex-nav {
  background-color: var(--cortex-nav-bg) !important;
}

/* Main surface panels */
.cortex-surface {
  background-color: var(--cortex-surface) !important;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   All selectors under html:not(.dark) so they only fire in light mode.
   Uses !important to override Tailwind compiled static values.
   ══════════════════════════════════════════════════════════════════ */

/* ── Text ─────────────────────────────────────────────────────── */
html:not(.dark) .text-on-surface     { color: #0f172a !important; }
html:not(.dark) .text-on-surface-variant { color: #334155 !important; }
html:not(.dark) [class*="text-on-surface/"] { color: rgba(15,23,42,0.75) !important; }
html:not(.dark) .text-outline        { color: #64748b !important; }
html:not(.dark) [class*="text-outline/"] { color: rgba(100,116,139,0.8) !important; }
html:not(.dark) [class*="text-on-surface"] { color: rgba(15,23,42,0.75) !important; }

/* ── Page / section backgrounds ──────────────────────────────── */
html:not(.dark) .bg-background,
html:not(.dark) .bg-surface-dim,
html:not(.dark) .bg-surface                { background-color: #f1f5f9 !important; }
html:not(.dark) .bg-surface-container-low  { background-color: #f8fafc !important; }
html:not(.dark) .bg-surface-container      { background-color: #ffffff !important; }
html:not(.dark) .bg-surface-container-lowest { background-color: #e8ecf0 !important; }
html:not(.dark) .bg-surface-container-high { background-color: #f1f5f9 !important; }

/* ── Inline hardcoded hex backgrounds ────────────────────────── */
html:not(.dark) .bg-\[#17181c\],
html:not(.dark) .bg-\[#0f1115\],
html:not(.dark) .bg-\[#111317\]        { background-color: #f8fafc !important; }
html:not(.dark) .bg-\[#1a1d24\],
html:not(.dark) .bg-\[#1e2024\],
html:not(.dark) .bg-\[#12131a\]        { background-color: #ffffff !important; }
html:not(.dark) .bg-\[#0c0e12\],
html:not(.dark) .bg-\[#0d0f14\]        { background-color: #e8ecf0 !important; }

/* ── gradient-border-glow panels (Signal Monitor, etc.) ─ */
html:not(.dark) .gradient-border-glow {
  background: #ffffff !important;
}
/* The ::before pseudo on glow — lighten it slightly in light */
html:not(.dark) .gradient-border-glow::before {
  opacity: 0.5;
  animation: none;
}

/* gradient-border: solid inner + gradient only in the 1px ring (no ::before “sheet”) */
html:not(.dark) .gradient-border {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      135deg,
      rgba(139, 92, 246, 0.62) 0%,
      rgba(6, 182, 212, 0.42) 50%,
      rgba(139, 92, 246, 0.62) 100%
    ) border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
}

/* ── Inline dark backgrounds used in RunDetail / VitalsStrip ─── */
html:not(.dark) [style*="background-color: #17181c"],
html:not(.dark) [style*="background-color: #111317"],
html:not(.dark) [style*="background-color: #0f1115"] {
  background-color: #f8fafc !important;
}
html:not(.dark) [style*="background-color: #1a1d24"],
html:not(.dark) [style*="background-color: #1e2024"] {
  background-color: #ffffff !important;
}

/* ── Footer / bottom panel ────────────────────────────────────── */
html:not(.dark) .bg-\[#17181c\]\/80,
html:not(.dark) .bg-\[#17181c\]\/90 { background-color: rgba(248,250,252,0.9) !important; }
html:not(.dark) footer { background-color: #f8fafc !important; }

/* ── Borders ─────────────────────────────────────────────────── */
html:not(.dark) .border-white\/5        { border-color: rgba(0,0,0,0.07) !important; }
html:not(.dark) [class*="border-white/"]  { border-color: rgba(0,0,0,0.08) !important; }
html:not(.dark) .border-outline-variant\/10,
html:not(.dark) .border-outline-variant\/15,
html:not(.dark) .border-outline-variant\/20 { border-color: rgba(0,0,0,0.1) !important; }

/* ── Signal monitor D3 SVG track backgrounds ─────────────────── */
/* These are filled via D3 with fill="#0c0e12" — override with attr selector */
html:not(.dark) rect[fill="#0c0e12"] { fill: #e8ecf0 !important; }
html:not(.dark) rect[stroke="rgba(255,255,255,0.05)"] { stroke: rgba(0,0,0,0.08) !important; }

/* ── Opacity-variant backgrounds (Tailwind bg-X/Y classes) ─────── */
/* Tailwind compiles bg-surface-container-low/80 to a different class
   than bg-surface-container-low, so we need to catch via partial match.
   Target: bottom input bar, settings form fields, Lab panels.      */
html:not(.dark) [class*="bg-surface-container-low"] { background-color: rgba(248,250,252,0.9) !important; }
html:not(.dark) [class*="bg-surface-container-lowest"] { background-color: #e8ecf0 !important; }
html:not(.dark) [class*="bg-surface-container-high"] { background-color: #f1f5f9 !important; }
html:not(.dark) [class*="bg-\[#17181c\]"] { background-color: #f8fafc !important; }
html:not(.dark) [class*="bg-\[#111317\]"] { background-color: #f8fafc !important; }

/* ── Form inputs / textareas (settings page, builder) ───────────── */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(0,0,0,0.15) !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94a3b8 !important;
}

/* ── Primary/violet text stays readable on light bg ──────────── */
/* (violet on light is fine — no override needed) */

/* ── RA brand custom properties (mirrors docs custom.css) ─────── */
:root {
  --ra-violet:      #8b5cf6;
  --ra-violet-deep: #7c3aed;
  --ra-violet-dark: #4c1d95;
  --ra-cyan:        #06b6d4;
  --ra-amber:       #eab308;
  --ra-error:       #ef4444;
  --ra-green:       #22c55e;

  /* Panel inner bg — matches docs ra-panel-inner */
  --ra-surface-panel: #12131a;

  /* Tooltip caret stroke — after --ra-violet so color-mix resolves */
  --cortex-tip-caret-stroke: color-mix(in srgb, var(--ra-violet) 22%, rgb(0 0 0 / 0.16));
}

/* ── Base font ────────────────────────────────────────────────── */
html {
  font-family: "Geist Variable", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Material Symbols ─────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

/* ── Gradient border panel — gradient is ONLY the border ring ─── */
.gradient-border {
  position: relative;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ra-surface-panel), var(--ra-surface-panel)) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ra-violet) 58%, transparent) 0%,
      color-mix(in srgb, var(--ra-cyan) 38%, transparent) 50%,
      color-mix(in srgb, var(--ra-violet) 58%, transparent) 100%
    ) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

html.dark .gradient-border {
  background:
    linear-gradient(
      color-mix(in srgb, var(--cortex-surface-low) 88%, var(--cortex-surface) 12%),
      color-mix(in srgb, var(--cortex-surface-low) 88%, var(--cortex-surface) 12%)
    ) padding-box,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ra-violet) 52%, transparent) 0%,
      color-mix(in srgb, var(--ra-cyan) 36%, transparent) 50%,
      color-mix(in srgb, var(--ra-violet) 52%, transparent) 100%
    ) border-box;
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

/* Animated breathing glow variant — for active panels */
.gradient-border-glow {
  position: relative;
  background: #1a1d24;
}

.gradient-border-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--ra-violet) 0%, var(--ra-cyan) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: ra-border-breathe 8s ease-in-out infinite;
}

@keyframes ra-border-breathe {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

/* ── Sonar rings (Stage running agent nodes) ──────────────────── */
.sonar-ring {
  position: absolute;
  border: 1.5px solid var(--ring-color, var(--ra-violet));
  border-radius: 50%;
  animation: ra-sonar-pulse 3s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.sonar-ring:nth-child(2) { animation-delay: -1s; }
.sonar-ring:nth-child(3) { animation-delay: -2s; }

@keyframes ra-sonar-pulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(3.5); opacity: 0;   }
}

/* ── Vitals strip: indeterminate loop progress (no maxIterations yet) ─ */
.vitals-progress-indeterminate {
  animation: vitals-progress-sweep 1.85s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes vitals-progress-sweep {
  0% {
    transform: translateX(-115%);
    opacity: 0.5;
  }
  45% {
    opacity: 1;
  }
  100% {
    transform: translateX(320%);
    opacity: 0.45;
  }
}

.cortex-tooltip-caret {
  display: block;
  overflow: visible;
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes ra-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.animate-fade-up { animation: ra-fade-up 0.25s ease-out; }

@keyframes ra-slide-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.animate-slide-right { animation: ra-slide-right 0.3s ease-out; }

/* ── Gradient text — matches docs site-title treatment ───────── */
.ra-gradient-text {
  background: linear-gradient(135deg, var(--ra-violet), var(--ra-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Hover lift — matches docs card hover ────────────────────── */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(139,92,246,0.15);
}

/* ── Scrollbar — docs treatment ──────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--ra-violet), var(--ra-cyan));
  border-radius: 2px;
}

/* ── Selection ────────────────────────────────────────────────── */
::selection { background: rgba(139,92,246,0.3); }

/* ── Code / mono content ─────────────────────────────────────── */
code, pre, .font-mono {
  font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

/* ── Inline code — matches docs treatment ────────────────────── */
:not(pre) > code {
  background: rgba(139,92,246,0.10) !important;
  color: var(--ra-violet) !important;
  border-radius: 3px;
  padding: 0.12em 0.3em;
  font-size: 0.875em;
}
