/* ============================================================
   Friends & Robots — Documentation
   Layered on css/tokens.css (design tokens + self-hosted Quicksand).
   Shares the visual language of the landing page.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  --font-display: "Quicksand", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Docs page background sits a touch darker than the app surface. */
  --ink: #0C1015;
  --o: #F97316;
  --o-soft: rgba(249,115,22,0.10);
  --t: #6FBCD9;
  --t-soft: rgba(111,188,217,0.10);

  --nav-h: 64px;
  --sidebar-w: 270px;
  --toc-w: 220px;
  --gutter: clamp(20px, 4vw, 56px);

  /* docs body text — lighter than the global --fg-2 */
  --doc-fg: #ECEDEF;
}

* { box-sizing: border-box; }
/* Always reserve the vertical scrollbar so short and long pages don't
   shift horizontally as you navigate between them. */
html { scroll-behavior: smooth; overflow-y: scroll; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--fg-1); }
p { margin: 0; color: var(--fg-2); }
a { color: inherit; text-decoration: none; }
::selection { background: var(--o); color: #fff; }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

/* scroll offset so anchored headings clear the fixed nav */
:target { scroll-margin-top: calc(var(--nav-h) + 28px); }
.doc-content [id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

/* ============================================================
   TOP NAV (shared language with landing)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(12,16,21,0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border-1);
}
.nav .nav-wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.brandmark { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brandmark .brand-logo { height: 22px; width: auto; display: block; }

.nav-search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(40vw, 420px);
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  color: var(--fg-3);
  transition: border-color var(--dur-base) var(--ease-standard);
  cursor: text;
}
.nav-search:hover { border-color: var(--border-active); }
.nav-search svg { flex-shrink: 0; color: var(--fg-3); }
.nav-search input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 14px;
}
.nav-search input::placeholder { color: var(--fg-3); }
.nav-search .kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-3);
  border: 1px solid var(--border-1);
  border-radius: 5px;
  padding: 1px 6px;
}

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-links a {
  padding: 8px 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--fg-1); background: rgba(255,255,255,0.05); }
/* Download CTA — orange button with download glyph. */
.nav-links a.nav-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 13px;
  padding: 8px 15px;
  color: #fff;
  background: var(--accent);
  font-weight: 600;
}
.nav-links a.nav-download:hover { color: #fff; background: var(--accent-pressed); }
.nav-links a.nav-download svg { flex-shrink: 0; }
.nav-links a.active {
  color: var(--o);
  background: var(--o-soft);
  font-weight: 600;
}
/* Theme toggle — a switch in the footer's legal row. The knob holds
   the icon of the theme a tap switches to: sun in dark mode, moon in
   light mode, and slides right when light is active. docs.js renders
   it and theme.js wires the click to window.fnrbTheme.toggle().
   Values mirror the shared header.css switch. */
.theme-toggle {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.12); }
.theme-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D9D9D9;
  color: #12161D;
  transition: left var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.theme-toggle svg { display: block; }
.theme-toggle .ic-moon { display: none; }
:root[data-theme="light"] .theme-toggle {
  border-color: #D0D9E1;
  background: #E2E8EE;
}
:root[data-theme="light"] .theme-toggle:hover { background: #D8E0E8; }
:root[data-theme="light"] .theme-toggle .knob {
  left: 20px;
  background: #FFFFFF;
  color: #3A4552;
  box-shadow: 0 1px 2px rgba(16, 24, 32, 0.18);
}
:root[data-theme="light"] .theme-toggle .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: block; }

/* Theme-matched logo: every brandmark carries both wordmarks — the
   white-text one for dark, the ink-text one for light — and the
   inactive one is hidden here. The :root prefixes keep both hide
   rules more specific than the `.brandmark .brand-logo
   { display: block }` sizing rule, which would otherwise force
   both wordmarks visible. */
:root:not([data-theme="light"]) .brand-logo-light { display: none; }
:root[data-theme="light"] .brand-logo-dark { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.btn-primary {
  background: var(--o);
  color: #fff;
  padding: 11px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, var(--shadow-glow-orange);
}
.btn-primary:hover { background: var(--accent-pressed); color: #fff; }
.nav .btn-primary { padding: 9px 16px; font-size: 14px; }

.menu-btn {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 9px;
  color: var(--fg-1);
  cursor: pointer;
}

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.docs-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  max-width: 1440px;
  margin: 0 auto;
  padding-top: var(--nav-h);
}

/* ---------- Left sidebar / guide ---------- */
.sidebar {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--border-1);
  padding: 30px 22px 60px 0;
  padding-left: var(--gutter);
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sb-group { margin-bottom: 26px; }
.sb-group:last-child { margin-bottom: 0; }
.sb-group > .sb-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
  margin: 0 0 10px;
  padding-left: 12px;
}
/* Outdent the icon into the gutter so the label text lines up with the item titles below. */
.sb-label .sb-ic { display: inline-flex; flex: none; margin-left: -22px; color: var(--o); }
.sb-label .sb-ic svg { display: block; }
.sb-list { list-style: none; margin: 0; padding: 0; }
.sb-list a {
  display: flex; align-items: center; gap: 8px;
  position: relative;
  padding: 7px 12px;
  margin: 1px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-3);
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.sb-list a:hover { color: var(--fg-1); background: rgba(255,255,255,0.04); }
.sb-list a.active {
  color: var(--fg-1);
  background: var(--o-soft);
}
.sb-list a.active::before {
  content: "";
  position: absolute;
  left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 2px;
  background: var(--o);
}
.sb-list a .badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t);
  background: var(--t-soft);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.doc-main {
  min-width: 0;
  padding: 38px clamp(28px, 4vw, 64px) 120px;
}
.doc-content { max-width: 760px; }

.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--fg-3);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--fg-3); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--fg-2); }
.breadcrumb .sep { color: var(--border-1); }
.breadcrumb .section { color: var(--fg-3); }
.breadcrumb .here { color: var(--fg-2); }

.doc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--o);
  margin-bottom: 16px;
}
.doc-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--o); }

.doc-content h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}
.doc-lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--doc-fg);
  margin-bottom: 36px;
}

.doc-content h2 {
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 48px 0 16px;
}
.doc-content h3 {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 36px 0 12px;
}
.doc-content p { font-size: 16px; line-height: 1.65; color: var(--doc-fg); margin-bottom: 18px; }
.doc-content p code,
.doc-content li code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--t);
  background: var(--t-soft);
  border: 1px solid var(--border-3);
  border-radius: 5px;
  padding: 1px 6px;
}
.doc-content a.inline {
  color: var(--t);
  transition: color var(--dur-fast);
}
.doc-content a.inline:hover { color: var(--blue-light); }

.doc-content ul, .doc-content ol {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--doc-fg);
}
.doc-content li { margin-bottom: 9px; line-height: 1.6; }
.doc-content li::marker { color: var(--o); }

/* heading anchor link */
.h-anchor {
  margin-left: 10px;
  font-size: 0.7em;
  color: var(--fg-3);
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.doc-content h2:hover .h-anchor,
.doc-content h3:hover .h-anchor { opacity: 1; }

/* ---------- step list ---------- */
.steps { list-style: none; margin: 24px 0 28px; padding: 0; counter-reset: step; }
.steps > li {
  position: relative;
  padding: 0 0 26px 52px;
  margin: 0;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -2px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  color: var(--o);
  background: var(--o-soft);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 50%;
}
.steps > li::after {
  content: "";
  position: absolute;
  left: 15.5px; top: 34px; bottom: 4px;
  width: 1px;
  background: var(--border-1);
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps .step-title { font-weight: 600; color: var(--fg-1); font-size: 16px; margin-bottom: 6px; }

/* ---------- code block ---------- */
.code {
  position: relative;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  background: var(--bg-2);
  margin: 0 0 22px;
  overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: 10px;
  height: 38px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--border-1);
  background: rgba(10,13,17,0.5);
}
.code-head .fname {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-3);
}
.code-head .lang {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t);
}
.code-copy {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-1);
  border-radius: 7px;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.code-copy:hover { color: var(--fg-1); border-color: var(--border-active); background: rgba(255,255,255,0.04); }
.code-copy.copied { color: var(--status-success); border-color: rgba(121,195,64,0.4); }
.code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg-2);
}
.code pre::-webkit-scrollbar { height: 8px; }
.code pre::-webkit-scrollbar-thumb { background: var(--border-1); border-radius: 4px; }
.code .tk-prompt { color: var(--o); user-select: none; }
.code .tk-cmd { color: var(--fg-1); }
.code .tk-flag { color: var(--t); }
.code .tk-str { color: #9FD68A; }
.code .tk-com { color: var(--fg-3); font-style: italic; }
.code .tk-key { color: var(--o); }
.code .tk-fn { color: var(--t); }

/* ---------- callouts ---------- */
.callout {
  display: flex; gap: 14px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border-1);
  background: var(--bg-2);
  margin: 0 0 24px;
}
.callout .co-ic {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--t);
}
.callout .co-body { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.callout .co-body strong { color: var(--fg-1); font-weight: 600; }
.callout.tip { border-color: rgba(111,188,217,0.3); background: rgba(111,188,217,0.06); }
.callout.tip .co-ic { color: var(--t); }
.callout.warn { border-color: rgba(245,158,11,0.32); background: rgba(245,158,11,0.07); }
.callout.warn .co-ic { color: var(--status-warning); }

/* ---------- spec / param table ---------- */
.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 26px;
  font-size: 14.5px;
}
.spec th, .spec td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
  vertical-align: top;
}
.spec thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  border-bottom-color: var(--border-1);
}
.spec td .pname { font-family: var(--font-mono); font-size: 13px; color: var(--o); }
.spec td .ptype { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
.spec td p { margin: 0; font-size: 14px; color: var(--fg-2); }
.spec tbody tr:hover { background: rgba(255,255,255,0.015); }

/* ---------- capability table ---------- */
.spec td strong { color: var(--fg-1); font-weight: 600; }
.spec td .model {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-2);
  white-space: nowrap;
}
.spec td .model + .model { margin-top: 5px; }
.spec td .bonus,
.bonus {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--t);
  background: var(--t-soft);
  border: 1px solid rgba(111,188,217,0.25);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  vertical-align: middle;
}
.spec td .price-alt { margin-top: 3px; font-size: 12.5px; color: var(--fg-3); }
.save {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--o);
  background: var(--o-soft);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: var(--radius-full);
  padding: 2px 7px;
  vertical-align: middle;
}

/* ---------- capability matrix (operation × modality) ---------- */
.capmatrix-wrap { overflow-x: auto; margin: 6px 0 28px; }
.capmatrix {
  min-width: 680px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
}
.capmatrix th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  text-align: left;
  padding: 4px 10px;
}
.capmatrix th.modal { color: var(--fg-1); font-size: 11.5px; }
.capmatrix td {
  width: 23%;
  vertical-align: top;
  padding: 11px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
}
.capmatrix td.rowhdr {
  width: 8%;
  padding-left: 0;
  background: transparent;
  border: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--fg-1);
}
.capmatrix td.rowhdr span {
  display: block;
  margin-top: 3px;
  color: var(--fg-3);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
}
.capmatrix .cap {
  display: block;
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-2);
}
.capmatrix .cap:last-child { margin-bottom: 0; }
.capmatrix .cap::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(249,115,22,0.55);
}
.capmatrix .empty { color: var(--fg-3); opacity: 0.5; font-size: 12px; }

/* ---------- outcome compositions ---------- */
.depth {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t);
}
.depth::after { content: ""; flex: 1; height: 1px; background: var(--border-1); }
.depth .tag {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--fg-3);
}
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.outcome {
  padding: 13px 15px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
}
.outcome .out-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--fg-1);
  margin-bottom: 5px;
}
.outcome .chain {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--fg-3);
  overflow-wrap: break-word;
}
.outcome .chain b { color: var(--t); font-weight: 500; }
.outcome .chain .arrow { color: var(--o); padding: 0 3px; }
/* let a chain of single-word steps wrap after each connector */
.outcome .chain .arrow::after { content: "\200B"; }

/* ---------- download button ---------- */
.download {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}
.download .btn-primary { padding: 12px 20px; }

/* ---------- auth provider options (illustrative) ---------- */
.auth-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 340px;
  margin: 8px 0 24px;
}
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
}
.auth-btn svg { flex-shrink: 0; }
.download-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}

/* ---------- figure / screenshot placeholder ---------- */
.doc-figure { margin: 6px 0 28px; }
.doc-figure-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 6px 0 28px;
}
.doc-figure-row .doc-figure { margin: 0; }
.doc-figure video, .doc-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--border-1);
  border-radius: 12px;
}
.doc-figure-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  padding: 32px 28px;
  border: 1px dashed var(--border-1);
  border-radius: 12px;
  background: var(--bg-2);
  text-align: center;
}
.doc-figure-ph svg { color: var(--fg-3); opacity: 0.55; }
.doc-figure-ph .fig-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o);
}
.doc-figure-ph .fig-desc { font-size: 13.5px; color: var(--fg-2); max-width: 440px; line-height: 1.5; }
.doc-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--fg-3); line-height: 1.5; }
/* small, left-aligned capture for focused UI areas */
.doc-figure.sm { max-width: 440px; }
.doc-figure.xs { max-width: 300px; }
.doc-figure.sm .doc-figure-ph { min-height: 130px; padding: 22px 20px; }

@media (max-width: 560px) {
  .doc-figure-row { grid-template-columns: 1fr; }
}

/* ---------- generating glyphs (in-flight media) ---------- */
.glyph-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 24px;
}
.glyph-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 96px;
  padding: 16px 10px;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  background: var(--bg-2);
}
.glyph-item svg { width: 30px; height: 30px; color: var(--fg-2); }
.glyph-item span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-align: center;
}

/* ---------- chat transcript sample ---------- */
.chat-sample {
  border: 1px solid var(--border-1);
  border-radius: 14px;
  background: var(--bg-1);
  overflow: hidden;
  margin: 6px 0 16px;
}
.cs-head {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-1);
  background: rgba(10,13,17,0.5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cs-head .cs-model { margin-left: auto; color: var(--t); }
.cs-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 18px;
}
.cs-msg { font-size: 14.5px; line-height: 1.62; max-width: 88%; }
.cs-user {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid rgba(249,115,22,0.28);
  color: var(--fg-1);
  padding: 11px 15px;
  border-radius: 13px 13px 4px 13px;
}
.cs-robot { align-self: flex-start; color: var(--fg-2); }
.cs-robot strong, .cs-user strong { color: var(--fg-1); font-weight: 600; }
.cs-msg code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--fg-2);
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  padding: 1px 5px;
}
.cs-file, .cs-id {
  font-family: var(--font-mono);
  font-size: 0.84em;
  border-radius: 5px;
  padding: 1px 6px;
}
.cs-file { color: var(--t); background: var(--t-soft); border: 1px solid var(--border-3); }
.cs-id { color: var(--o); background: var(--o-soft); border: 1px solid rgba(249,115,22,0.2); }

/* tool-call rows inside the transcript */
.cs-tools {
  align-self: stretch;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.cs-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  font-size: 13px;
}
.cs-tool + .cs-tool { border-top: 1px solid var(--border-1); }
.cs-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cs-dot.done { background: var(--status-success); }
.cs-dot.run { background: var(--o); }
.cs-verb { color: var(--fg-1); font-weight: 500; }
.cs-subject { color: var(--fg-3); font-family: var(--font-mono); font-size: 12px; }
.cs-tmeta {
  margin-left: auto;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* approval card inside the transcript */
.cs-approval {
  align-self: stretch;
  border: 1px solid rgba(249,115,22,0.3);
  background: rgba(249,115,22,0.06);
  border-radius: 12px;
  padding: 14px 16px;
}
.cs-approval-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-1);
  margin-bottom: 12px;
}
.cs-approval-title svg { color: var(--o); }
.cs-spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-bottom: 13px;
}
.cs-spec dt { color: var(--fg-3); }
.cs-spec dd { margin: 0; color: var(--fg-2); }
.cs-spec dd.cs-cost { color: var(--o); }
.cs-approval-actions { display: flex; gap: 8px; }
.cs-btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-1);
}
.cs-btn.deny { color: var(--fg-3); background: transparent; }
.cs-btn.approve { color: #fff; background: var(--o); border-color: var(--o); }

/* ---------- page footer nav ---------- */
.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-1);
}
.page-nav a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  background: var(--bg-2);
  transition: border-color var(--dur-base);
}
.page-nav a:hover { border-color: var(--border-active); }
.page-nav a.next { text-align: right; grid-column: 2; }
.page-nav .pn-dir {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 6px;
}
.page-nav a.next .pn-dir { justify-content: flex-end; }
.page-nav .pn-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg-1); }
.page-nav a:hover .pn-title { color: var(--o); }

/* ============================================================
   RIGHT TOC — "On this page"
   ============================================================ */
.toc {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: 40px var(--gutter) 60px 8px;
}
.toc .toc-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-1); }
.toc li a {
  display: block;
  padding: 11px 0 11px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-3);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.toc li a:hover { color: var(--fg-1); }
.toc li a.sub { padding-left: 28px; font-size: 12.5px; }
.toc li a.active { color: var(--o); border-left-color: var(--o); }

/* ============================================================
   MOBILE
   ============================================================ */
.sidebar-scrim {
  display: none;
  position: fixed; inset: var(--nav-h) 0 0 0;
  background: rgba(0,0,0,0.55);
  z-index: 40;
}

@media (max-width: 1140px) {
  .docs-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-search { width: min(48vw, 420px); }
}
@media (max-width: 860px) {
  .nav-search { display: none; }
  .menu-btn { display: flex; }
  .docs-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: var(--nav-h); bottom: 0; left: 0;
    width: min(86vw, 320px);
    z-index: 50;
    background: var(--ink);
    border-right: 1px solid var(--border-1);
    padding-left: var(--gutter);
    transform: translateX(-102%);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-scrim { display: block; }
  .doc-main { padding-top: 28px; }
}
@media (max-width: 560px) {
  .nav-links a:not(.active) { display: none; }
  .doc-main { padding-inline: 22px; }
  .page-nav { grid-template-columns: 1fr; }
  .cs-spec { grid-template-columns: 1fr; gap: 2px 0; }
  .outcome-grid { grid-template-columns: 1fr; }
  .page-nav a.next { grid-column: 1; }
}

/* ============================================================
   FOOTER
   ============================================================
   The shared footer injected by docs.js. Mirrors the landing page's
   footer, but its inner column spans the docs page width (matching
   .docs-shell) so it lines up under the wider docs layout rather than
   the narrower marketing container. */
.footer {
  border-top: 1px solid var(--border-1);
  padding-block: 56px 40px;
  background: #0a0d12;
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(32px, 6vw, 96px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--border-1);
}
.footer-brand .brandmark { margin-bottom: 22px; }
.footer-brand .brand-logo { height: 26px; }
.footer h5 {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-3); margin: 0 0 14px; font-weight: 500;
}
.footer-about {
  max-width: 480px;
  font-size: 14.5px;
  color: var(--fg-3);
  line-height: 1.65;
}
/* the company column tops out at the About label's baseline: the logo above
   the label is the left column's own header, so the right column starts at
   the label row, aligned via padding matching the logo row's height */
.footer-company { flex-shrink: 0; padding-top: 48px; }
.footer-company p { font-size: 14px; color: var(--fg-3); line-height: 1.75; }
.footer-company p strong { color: var(--fg-2); font-weight: 600; }
.footer-company a { transition: color var(--dur-fast) var(--ease-standard); }
.footer-company a:hover { color: var(--fg-1); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 26px;
  font-size: 13px; color: var(--fg-3);
}
.footer-legal { display: flex; gap: 22px; align-items: center; }
.footer-legal a { font-size: 13px; color: var(--fg-3); transition: color var(--dur-fast) var(--ease-standard); }
.footer-legal a:hover { color: var(--fg-1); }
/* X logo link; the svg fills with currentColor so it follows the legal-link hover color */
.footer-x svg { display: block; width: 15px; height: 15px; }

@media (max-width: 640px) {
  .footer-grid { flex-direction: column; gap: 36px; }
  .footer-company { padding-top: 0; }
  .footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ============================================================
   LIGHT THEME
   ============================================================
   Token-driven rules flip via tokens.css; this covers the docs'
   own literal dark values. */
:root[data-theme="light"] {
  --ink: #F5F7FA;
  /* docs body text — darker than the global --fg-2 for long-form reading */
  --doc-fg: #2A3440;
}
:root[data-theme="light"] .nav { background: rgba(245, 247, 250, 0.85); }
:root[data-theme="light"] .nav-links a:hover { color: var(--fg-1); background: rgba(18, 22, 29, 0.05); }
:root[data-theme="light"] .sb-list a:hover { color: var(--fg-1); background: rgba(18, 22, 29, 0.04); }
:root[data-theme="light"] .code-head { background: rgba(242, 245, 248, 0.6); }
:root[data-theme="light"] .code-copy:hover { background: rgba(18, 22, 29, 0.04); }
/* the pale terminal green has no contrast on white */
:root[data-theme="light"] .code .tk-str { color: #4A8C36; }
:root[data-theme="light"] .spec tbody tr:hover { background: rgba(18, 22, 29, 0.02); }
:root[data-theme="light"] .cs-head { background: rgba(242, 245, 248, 0.6); }
:root[data-theme="light"] .cs-msg code { background: rgba(18, 22, 29, 0.05); }
:root[data-theme="light"] .cs-tools { background: rgba(18, 22, 29, 0.02); }
:root[data-theme="light"] .footer { background: #EDF1F5; }