/* ============================================================
   Cerver global base styles.
   ============================================================
   Tailwind CDN provides utilities; this file holds the few
   things Tailwind doesn't naturally express: selection colour,
   smooth-scroll, and the small set of brand-specific utility
   classes used across pages (hero gradient, swap-demo
   animations on /use-cases/agents). Load AFTER theme.js so
   anything that depends on tokens still works.
   ============================================================ */

::selection { background: #333; }
html        { scroll-behavior: smooth; }

/* Synchronous brand defaults on body — applied BEFORE Tailwind's
   JIT runtime resolves `bg-bg` / `text-text` utilities. Without
   these, pages flash white until the CDN compiles the body's
   utility classes. Pages with class="bg-bg text-text ..." on body
   still work the same — Tailwind utilities (specificity 0,1,0)
   override these tag selectors (0,0,1). */
body {
  background: #050505;
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}

/* ─── Signature cursor ▌ ────────────────────────────────────────
   The repeating cerver motif. A session is a terminal prompt
   waiting for input — the cursor says "you're here, it's alive."
   Use as: <span class="cursor">▌</span>
   Goes wherever a session/prompt is semantically active: after
   the logo (the page IS the prompt), after pattern-page H1s,
   inside live chat bubbles. NOT decoration — don't sprinkle. */
.cursor {
  display: inline-block;
  color: #34d399;
  margin-left: 4px;
  vertical-align: baseline;
  animation: cursor-blink 1.06s steps(2, start) infinite;
}
@keyframes cursor-blink {
  to { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* Hero gradient — used on every hero across the site for visual
   continuity. Apply with class="hero-bg" on the hero <section>
   instead of an inline `style="background:..."`. */
.hero-bg {
  background:
    radial-gradient(circle at 78% 18%, rgba(52, 211, 153, 0.10), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 48%),
    #050505;
}

/* Hover-bridge for the use-cases nav dropdown on md+ — keeps
   the menu open when the cursor crosses the gap between the
   trigger row and the panel. Tailwind's group-hover handles
   the rest. */
@media (min-width: 768px) {
  .nav-bridge { padding-top: 8px; }
}

/* Code-box accent colours used inside <pre> on every page that
   shows curl/python/json snippets. Lets the snippets share one
   syntactic scheme without each page re-defining classes. */
.code-k { color: #a78bfa; } /* keyword / verb */
.code-s { color: #34d399; } /* string */
.code-v { color: #fbbf24; } /* value / number */
.code-c { color: #666666; } /* comment */

/* ── Swap-demo animation (used on /use-cases/agents) ────────
   Each row holds 3 absolutely-positioned chips. Only one is
   visible at a time. On its visible window, a chip slides up
   from below, holds, and slides off above — making the swap
   read as a deliberate "I just changed this," not a smooth
   scroll. A 9s cycle gives each chip ~3s on stage. The two
   rows offset by 1.5s so the eye sees them swap separately. */
.swap-row { position: relative; height: 36px; }
.swap-chip {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation-duration: 9s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
  border: 1px solid;
  width: max-content;
}
.swap-chip.harness { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.35); color: #fbbf24; }
.swap-chip.compute { background: rgba(167, 139, 250, 0.08); border-color: rgba(167, 139, 250, 0.35); color: #a78bfa; }

.swap-chip.it-1 { animation-name: chip-show; animation-delay: 0s; }
.swap-chip.it-2 { animation-name: chip-show; animation-delay: -6s; }
.swap-chip.it-3 { animation-name: chip-show; animation-delay: -3s; }
.compute-row .swap-chip.it-1 { animation-delay: -1.5s; }
.compute-row .swap-chip.it-2 { animation-delay: -7.5s; }
.compute-row .swap-chip.it-3 { animation-delay: -4.5s; }

@keyframes chip-show {
  0%   { opacity: 0; transform: translateY(10px); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(10px); }
}

@keyframes swap-flash {
  0%, 5%    { opacity: 1; transform: rotate(0deg); }
  15%, 100% { opacity: 0.25; transform: rotate(120deg); }
}
.swap-flash { animation: swap-flash 3s cubic-bezier(0.32, 0.72, 0, 1) infinite; display: inline-block; }

@keyframes id-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}
.swap-pulse { animation: id-pulse 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .swap-chip, .swap-pulse, .swap-flash { animation: none; }
  .swap-chip.it-1 { opacity: 1; transform: none; }
  .swap-chip.it-2, .swap-chip.it-3 { display: none; }
}

/* ─── Fanout illustration (used on /use-cases/agents) ────────
   "1 intent → N runners → curate the winner."
   12 small cards land staggered, all hold for ~3s, then the
   winner pulses green and the rest fade to 30%. Loops at 12s.
   The winner is hand-picked in markup (`.fanout-card.winner`)
   to telegraph the curation step. */
.fanout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 600px) { .fanout { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .fanout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1100px){ .fanout { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }

.fanout-card {
  background: rgba(14, 14, 14, 0.85);
  border: 1px solid #222;
  border-radius: 8px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  opacity: 0;
  transform: translateY(8px);
  animation: fanout-show 12s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
.fanout-card .harness { color: #fbbf24; font-size: 11.5px; font-weight: 600; letter-spacing: -0.1px; }
.fanout-card .compute { color: #a78bfa; font-size: 10.5px; }
.fanout-card .metric  { color: #ffffff; font-size: 11px; margin-top: 2px; }
.fanout-card .cost    { color: #a0a0a0; font-size: 10.5px; }

/* Stagger 12 cards across ~1.6s. */
.fanout-card:nth-child(1)  { animation-delay: 0s;     }
.fanout-card:nth-child(2)  { animation-delay: -11.85s;}
.fanout-card:nth-child(3)  { animation-delay: -11.7s; }
.fanout-card:nth-child(4)  { animation-delay: -11.55s;}
.fanout-card:nth-child(5)  { animation-delay: -11.4s; }
.fanout-card:nth-child(6)  { animation-delay: -11.25s;}
.fanout-card:nth-child(7)  { animation-delay: -11.1s; }
.fanout-card:nth-child(8)  { animation-delay: -10.95s;}
.fanout-card:nth-child(9)  { animation-delay: -10.8s; }
.fanout-card:nth-child(10) { animation-delay: -10.65s;}
.fanout-card:nth-child(11) { animation-delay: -10.5s; }
.fanout-card:nth-child(12) { animation-delay: -10.35s;}

/* Common cycle: fade in, hold, fade to 30% (the "losers"). */
@keyframes fanout-show {
  0%   { opacity: 0; transform: translateY(8px); }
  3%   { opacity: 1; transform: translateY(0); }
  55%  { opacity: 1; transform: translateY(0); }
  62%  { opacity: 0.3; transform: translateY(0); }
  92%  { opacity: 0.3; transform: translateY(0); }
  96%  { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(8px); }
}

/* The winner overrides the cycle so it stays full opacity, gets
   a green border + glow, and a tiny scale bump at the curation
   moment. */
.fanout-card.winner {
  animation-name: fanout-winner;
}
@keyframes fanout-winner {
  0%   { opacity: 0; transform: translateY(8px); border-color: #222; box-shadow: none; }
  3%   { opacity: 1; transform: translateY(0); border-color: #222; box-shadow: none; }
  55%  { opacity: 1; transform: translateY(0); border-color: #222; box-shadow: none; }
  62%  { opacity: 1; transform: translateY(0) scale(1.06); border-color: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.30); }
  92%  { opacity: 1; transform: translateY(0) scale(1.06); border-color: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.30); }
  96%  { opacity: 0; transform: translateY(8px); border-color: #222; box-shadow: none; }
  100% { opacity: 0; transform: translateY(8px); border-color: #222; box-shadow: none; }
}

/* Intent card above the grid + tagline below. */
.fanout-intent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid #222;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #ffffff;
  margin-bottom: 18px;
}
.fanout-intent .label {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666;
}
.fanout-tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #a0a0a0;
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.04em;
}
.fanout-tagline strong { color: #34d399; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .fanout-card { animation: none; opacity: 1; transform: none; }
  .fanout-card.winner { border-color: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.30); }
}

/* ============================================================
   Legacy-class shims (docs.html compatibility layer).
   ============================================================
   docs.html uses a long list of bespoke component classes
   (.section-card, .path-card, .endpoint-card, .code-block, …)
   that pre-date the unified Tailwind theme. Rewriting every
   section's markup is invasive; instead, map each legacy class
   to a dark-theme equivalent here so the file inherits the
   brand visuals automatically. New pages should use Tailwind
   utilities directly — this layer is only for the docs
   migration. ============================================================ */

/* Section + endpoint cards — same shape as .uc-section + .uc-win
   on use-case pages. */
.section-card,
.endpoint-card {
  background: #0e0e0e;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 24px;
  margin-top: 16px;
  color: #ffffff;
}
.section-card h2,
.endpoint-card h2 {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.2;
  margin-bottom: 12px;
  color: #ffffff;
}
.section-card h3,
.endpoint-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 18px 0 8px;
  color: #ffffff;
}
.section-card p,
.endpoint-card p {
  color: #a0a0a0;
  font-size: 14.5px;
  line-height: 1.65;
  margin-bottom: 12px;
}
.section-card ul,
.section-card ol,
.endpoint-card ul,
.endpoint-card ol {
  color: #a0a0a0;
  font-size: 14.5px;
  line-height: 1.7;
  padding-left: 22px;
  margin-bottom: 12px;
}
.section-card li,
.endpoint-card li { margin-bottom: 4px; }

/* Section eyebrow label above each h2. */
.section-label {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #34d399;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Three-card row (Quickstart 01-02-03 etc.). */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
@media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } }
.path-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.path-card .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.14em;
}
.path-card strong {
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
}
.path-card span {
  color: #a0a0a0;
  font-size: 13px;
  line-height: 1.55;
}

/* Code-block container around <pre>. */
.code-block {
  position: relative;
  background: #07090a;
  border: 1px solid #222;
  border-radius: 10px;
  margin: 14px 0;
  overflow: hidden;
}
.code-block pre {
  padding: 16px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: #c9c9c9;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}
.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(34, 34, 34, 0.85);
  color: #a0a0a0;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}
.copy-btn:hover { background: #1a1a1a; color: #fff; }

/* Inline footnote under a code block. */
.code-note {
  font-size: 13px;
  color: #8a8a8a;
  margin-top: 8px;
}

/* Inline mono token. */
.mono { font-family: 'IBM Plex Mono', monospace; font-size: 0.92em; color: #fbbf24; }

/* Emphasized callout box (e.g., agent-box). */
.agent-box,
.callout-box {
  background: rgba(52, 211, 153, 0.04);
  border: 1px solid rgba(52, 211, 153, 0.25);
  border-radius: 10px;
  padding: 18px;
  margin: 14px 0;
}

/* docs.html in-page TOC + top-links nav. */
.toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.toc-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: #a0a0a0;
  border: 1px solid #222;
  border-radius: 999px;
  padding: 5px 11px;
}
.toc-links a:hover { color: #ffffff; border-color: #333; background: #0a0a0a; }

/* docs.html layout wrapper + hero. The legacy hero is replaced
   inline with the standard hero pattern; .docs is just the
   content column. */
.docs {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.shell { display: block; width: 100%; }

/* TOC sidebar (sticky on desktop) + content column. */
.docs-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 880px) {
  .docs-grid { grid-template-columns: 1fr; gap: 16px; }
}
.toc-card {
  position: sticky;
  top: 80px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #222;
  border-radius: 10px;
  padding: 16px;
}
.toc-card h2 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #666;
  font-weight: 600;
  margin-bottom: 10px;
}
.toc-card .toc-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}
.toc-card .toc-links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #a0a0a0;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
}
.toc-card .toc-links a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
@media (max-width: 880px) { .toc-card { position: static; } }

/* Endpoint table-style grid. */
.endpoint-grid {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.endpoint-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #222;
}
.endpoint-row:last-child { border-bottom: 0; }
.endpoint-row > .method {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #34d399;
  letter-spacing: 0.12em;
}
.endpoint-row > .path {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: #c9c9c9;
  word-break: break-all;
}
.endpoint-row > .desc {
  grid-column: 2;
  font-size: 13px;
  color: #a0a0a0;
}

/* Status grid (e.g., the powerful-sessions section's three states). */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
@media (max-width: 720px) { .status-grid { grid-template-columns: 1fr; } }
.status-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid #222;
  border-radius: 10px;
  padding: 14px;
}
.status-top {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #34d399;
  margin-bottom: 6px;
}

/* CTA buttons inside docs section copy (legacy class). */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #333;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
}
.cta:hover { background: #0a0a0a; }
.cta.primary { background: #34d399; color: #062014; border-color: #34d399; }
.cta.primary:hover { background: #2ec78d; }

/* Eyebrow label (legacy class). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #34d399;
  font-weight: 600;
  margin-bottom: 10px;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}

/* Footer (legacy). */
.footer {
  border-top: 1px solid #222;
  padding: 32px 0 40px;
  font-size: 13px;
  color: #666;
}
.footer a { color: #a0a0a0; }
.footer a:hover { color: #fff; }

/* Inline color helpers used by some inline spans in docs.html. */
.gray  { color: #8a8a8a; }
.green { color: #34d399; }
.amber { color: #fbbf24; }
.bullets { list-style: disc; padding-left: 22px; }

/* Inline code inside paragraphs. */
.section-card code,
.endpoint-card code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.92em;
  color: #fbbf24;
  background: rgba(255, 255, 255, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ─── Dual-pane: story + reference side-by-side ──────────────
   Used inside .section-card to present the same concept twice:
   prose for the first-time reader, terse curl/JSON for the
   returning reader. Each pane labels itself so the two voices
   are obvious; collapses to a single column on tablet/mobile. */
.dual-pane {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 14px;
}
@media (max-width: 880px) {
  .dual-pane { grid-template-columns: 1fr; gap: 24px; }
}
.pane {
  border-left: 1px solid #222;
  padding: 0 0 0 20px;
}
@media (max-width: 880px) {
  .pane { border-left: 0; padding: 0; }
  .pane + .pane { padding-top: 8px; border-top: 1px solid #222; }
}
.pane-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.pane-story .pane-label { color: #34d399; }
.pane-ref   .pane-label { color: #fbbf24; }

.pane h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 18px 0 6px;
  color: #ffffff;
}
.pane > h3:first-of-type { margin-top: 0; }
.pane p {
  font-size: 14px;
  color: #a0a0a0;
  line-height: 1.65;
  margin-bottom: 10px;
}
.pane-ref .code-block { margin: 6px 0 12px; }
.pane-ref pre { font-size: 11.5px; padding: 12px 14px; line-height: 1.6; }
.pane-ref .code-note { font-size: 12px; }