/* Swarmbook docs. Same tokens, faces and palette as landing.css (Lunar and bronze, Albert Sans). */

@font-face { font-family: "Albert Sans"; src: url("/fonts/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } /* taste-skill-ignore: code blocks only */

:root {
  --bg: #111111;
  --surface: #1c1c1c;
  --surface-2: #262626;
  --surface-3: #303030;
  --ink: #f2f2f2;
  --muted: #9a9a9a;
  /* Set per visit by /accent.js; emerald when it doesn't run. */
  --accent: var(--a-accent, #2ed47a);
  --accent-ink: var(--a-ink, #111111);
  --accent-text: var(--a-text, #62df9b);
  --accent-hover: var(--a-hover, #4dda8e);
  --warn-bg: #2a211a;
  --code-ink: #d6d2cc;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-head: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --step-display: clamp(3rem, 1.6rem + 6vw, 7rem);

  --margin: clamp(16px, 2.2vw, 32px);
  --measure: 70ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Albert Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* taste-skill-ignore: code blocks only */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-text); }
h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- buttons: square, flat, one shape (as on the landing page) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 0; border-radius: 0;
  font: 500 var(--step-small)/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 160ms; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 28px; padding: 22px var(--margin); }
.wordmark { font-weight: 600; letter-spacing: -0.03em; font-size: var(--step-body); text-decoration: none; }
.top nav { display: flex; gap: 24px; margin-left: auto; font-size: var(--step-small); }
.top nav a { color: var(--muted); text-decoration: none; transition: color 160ms; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); }

/* ---------- intro ---------- */
.intro { padding: clamp(56px, 9vw, 128px) var(--margin) clamp(48px, 7vw, 104px); max-width: 1320px; margin: 0 auto; }
.intro h1 { font-weight: 600; font-size: var(--step-display); letter-spacing: -0.04em; line-height: 0.95; }
.lead { margin-top: 28px; max-width: 46ch; font-size: var(--step-lead); line-height: 1.45; letter-spacing: -0.01em; }

/* ---------- layout: sticky sidebar + reading column ---------- */
.docs { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); max-width: 1320px; margin: 0 auto; padding: 0 var(--margin); }
.toc { position: sticky; top: 24px; align-self: start; max-height: calc(100svh - 48px); overflow-y: auto; padding-bottom: 24px; }
.toc-list { list-style: none; padding: 0; display: grid; gap: 2px; font-size: var(--step-small); }
.toc-list a { position: relative; display: block; padding: 7px 0 7px 16px; color: var(--muted); text-decoration: none; transition: color 160ms; }
.toc-list a::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: transparent; transition: background-color 160ms, transform 200ms var(--ease-out); }
.toc-list a:hover { color: var(--ink); }
.toc-list a[aria-current] { color: var(--ink); font-weight: 600; }
.toc-list a[aria-current]::before { background: var(--accent); transform: scale(1.5); }

/* mobile table of contents: collapsed, sticky under the top bar */
.toc-m { display: none; }

/* ---------- reading column ---------- */
.prose { min-width: 0; padding-bottom: clamp(96px, 12vw, 176px); }
.prose section { scroll-margin-top: 24px; }
.prose section + section { margin-top: clamp(96px, 11vw, 160px); }
.prose > section > :is(p, ul, ol, dl, .code, .table-wrap, .warn, .say, .cmds) { max-width: var(--measure); }
.prose h2 { font-weight: 600; font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1.05; max-width: 18ch; margin-bottom: 28px; }
.prose h3 { font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.25; margin: 48px 0 14px; max-width: var(--measure); }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + .code, .prose .code + p, .prose ul + .code, .prose .code + .code,
.prose dl + p, .prose .table-wrap + h3, .prose p + .table-wrap { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: 8px; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 600; }

/* inline code */
:not(pre) > code { font-size: 0.86em; color: var(--code-ink); background: var(--surface-2); padding: 0.1em 0.35em; overflow-wrap: anywhere; }

/* ---------- code blocks ---------- */
.code { --code-bg: var(--surface); position: relative; background: var(--code-bg); min-width: 0; }
.code pre { margin: 0; padding: 18px 20px; padding-right: 84px; font-size: var(--step-small); line-height: 1.65; color: var(--code-ink); overflow-x: auto; white-space: pre; tab-size: 2; }
/* A thick edge in the block's own colour keeps scrolled code from running into the button. */
.copy { position: absolute; top: 0; right: 0; border: 10px solid var(--code-bg, var(--surface-2)); border-radius: 0; background-clip: padding-box; background: var(--surface-3); color: var(--ink); font: 500 var(--step-small)/1 var(--sans);
  padding: 9px 12px; cursor: pointer; transition: background-color 160ms; }
.copy:hover { background: #3c3c3c; }
.copy[data-done] { background: var(--accent); color: var(--accent-ink); }

/* paste-to-agent sentence: words, not code */
.say { position: relative; background: var(--surface-2); padding: 22px 104px 22px 24px; margin-top: 16px; }
.say p { font-size: var(--step-lead); line-height: 1.4; letter-spacing: -0.01em; }
.say .copy { top: 50%; right: 10px; transform: translateY(-50%); border: 0; }

/* ---------- quick start paths: one row each, label on the left ---------- */
.paths { display: grid; gap: 8px; margin-top: 32px; }
.path { background: var(--surface); padding: 28px 28px 30px; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 14px 32px; min-width: 0; }
.path h3 { margin: 0; align-self: start; }
.path-body { display: grid; gap: 14px; min-width: 0; align-content: start; }
.path ol { padding-left: 1.2em; }
.path .code { --code-bg: var(--bg); }
.prose > section > h3 + .say { margin-top: 0; }

/* ---------- tables (real tables keep their lines) ---------- */
.table-wrap { overflow-x: auto; margin-top: 24px; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
th { text-align: left; font-weight: 600; font-size: var(--step-small); color: var(--muted); padding: 0 16px 10px 0; border-bottom: 1px solid var(--surface-3); }
td { padding: 14px 16px 14px 0; vertical-align: top; border-bottom: 1px solid var(--surface-2); }
td:first-child { font-weight: 600; white-space: nowrap; padding-right: 28px; }

/* ---------- definition lists: options and tools ---------- */
.opts, .tools { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; margin-top: 8px; }
.opts dt, .tools dt { min-width: 0; }
.opts dd, .tools dd { min-width: 0; }
.tools { grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 12px 24px; }
.tools dt code { overflow-wrap: anywhere; }

/* ---------- CLI command reference ---------- */
.cmds { display: grid; gap: 8px; margin-top: 8px; }
.cmd { background: var(--surface); padding: 20px; display: grid; gap: 6px; min-width: 0; }
.cmd .code { --code-bg: var(--bg); margin-top: 8px; }
.cmd-use code { background: none; padding: 0; font-size: var(--step-small); color: var(--accent-text); }
.cmd p:not(.cmd-use) { font-size: var(--step-body); }

/* ---------- callouts ---------- */
.note { background: var(--surface); padding: 18px 20px; }
.warn { background: var(--warn-bg); padding: 26px 28px 28px; margin-top: 28px; }
.warn h3 { margin: 0 0 12px; color: var(--accent-text); }
.warn :not(pre) > code { background: #3a2e24; }

/* ---------- footer: the name returns ---------- */
.foot { background: var(--surface); padding: clamp(48px, 7vw, 96px) var(--margin) 40px; display: grid; gap: 32px; }
.foot-word { font-weight: 600; font-size: clamp(3.5rem, 1rem + 12vw, 13rem); letter-spacing: -0.05em; line-height: 0.85; color: var(--surface-3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--step-small); }
.foot nav a { color: var(--muted); text-decoration: none; transition: color 160ms; }
.foot nav a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .toc-m { display: block; position: sticky; top: 0; z-index: 4; background: var(--bg); padding: 0 var(--margin); }
  .toc-m summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; font-size: var(--step-small); font-weight: 600; }
  .toc-m summary::-webkit-details-marker { display: none; }
  .toc-m summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform 200ms var(--ease-out); }
  .toc-m[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .toc-m-now { color: var(--muted); font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toc-m[open] { background: var(--surface); }
  .toc-m .toc-list { max-height: 65svh; overflow-y: auto; padding-bottom: 16px; }
  .prose section { scroll-margin-top: 64px; }
  .top nav { display: none; }
  .top .btn { margin-left: auto; }
}
@media (max-width: 560px) {
  .opts, .tools { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .opts dd, .tools dd { margin-bottom: 12px; }
  .say { padding: 20px 20px 72px; }
  .say .copy { top: auto; bottom: 14px; right: auto; left: 20px; transform: none; }
  .code pre { padding: 50px 16px 16px; }
  .warn { padding: 22px 20px 24px; }
  .path { padding: 24px 18px 26px; grid-template-columns: minmax(0, 1fr); }
  .cmd { padding: 18px 16px; }
  td:first-child { padding-right: 16px; }
}