/* Developer docs: light theme + three-column layout on top of /blog/blog.css
   (shared header, footer and type). Documentation is always light: white
   page, dark ink, the chili accent kept for links and method badges. This
   file is loaded only on /docs pages, so the overrides below never reach
   the blog or the marketing pages. No dark variant, by design. */
:root {
  --bg: #ffffff;
  --bg-card: #f6f5f2;
  --ink: #171a19;
  --ink-muted: #4f5753;
  --gold: #C24E2E;
  --gold-soft: #B5452A;
  --border: #e6e3dd;
  --emerald: #eef4f1;
}

body { background: var(--bg); color: var(--ink); }

/* The brand mark is cream on the noir pages; here the strokes are ink. */
.brand .k {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22%3E %3Cpath d=%22M241.2 239.3 L307.9 299.3 L311.0 402.5 L353.7 437.2 L483.5 437.2 L317.8 285.7 Z%22 fill=%22%23171a19%22/%3E %3Cpath d=%22M449.5 66.8 L313.5 70.5 L186.8 191.7 L265.3 238.7 L276.4 239.3 Z%22 fill=%22%23171a19%22/%3E %3Cpath d=%22M29.1 37.1 L26.0 385.8 L40.2 404.4 L146.6 474.3 L147.8 108.2 L136.7 87.2 L107.6 66.2 Z%22 fill=%22%23171a19%22/%3E %3Cpath d=%22M167.0 215.2 L167.0 424.2 L222.0 465.0 L225.7 306.7 Z%22 fill=%22%23B7472A%22/%3E %3Cpath d=%22M180.0 207.8 L239.9 303.0 L239.9 399.4 L291.2 437.2 L291.9 303.6 Z%22 fill=%22%23D35230%22/%3E %3C/svg%3E") center / contain no-repeat;
}
.site-header { background: #fff; }
.site-header nav a { color: var(--ink-muted); }
.site-header nav a:hover { color: var(--ink); }
.site-footer { border-top: 1px solid var(--border); }

/* ---- layout: nav | article | on-this-page ---- */
.wrap.docs { max-width: 1180px; }
.docs {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 200px;
  gap: 48px; padding-top: 40px; padding-bottom: 60px;
}
.docs-nav, .docs-toc { position: sticky; top: 24px; align-self: start; font-size: 14px; }
.docs-nav .kicker, .docs-toc .kicker {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 10px;
}
.docs-nav a {
  display: block; padding: 6px 10px; margin: 0 0 2px -10px; border-radius: 6px;
  color: var(--ink-muted); text-decoration: none;
}
.docs-nav a:hover { color: var(--ink); background: var(--bg-card); }
.docs-nav a.active { color: var(--gold-soft); background: #fbf1ee; font-weight: 600; }
.docs-toc { font-size: 13px; border-left: 1px solid var(--border); padding-left: 16px; }
.docs-toc a { display: block; padding: 4px 0; color: var(--ink-muted); text-decoration: none; line-height: 1.4; }
.docs-toc a.h3 { padding-left: 12px; font-size: 12.5px; }
.docs-toc a:hover { color: var(--ink); }

/* ---- article ---- */
.docs .post { padding-top: 0; max-width: 720px; }
.docs .post h1 { margin-top: 0; font-size: 34px; line-height: 1.15; }
.docs .post h2 { margin-top: 40px; padding-top: 8px; font-size: 24px; }
.docs .post h3 { margin-top: 28px; font-size: 18px; }
.docs .post p, .docs .post li { color: #2a2f2d; }
.docs .post a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.docs .post a:hover { color: var(--gold); }
.docs .updated { font-size: 12px; color: var(--ink-muted); margin: -6px 0 24px; }
.docs pre {
  background: #f6f5f2; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; color: var(--ink);
}
.docs code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.docs p code, .docs li code, .docs td code, .docs h1 code, .docs h2 code, .docs h3 code {
  background: #f1efea; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--ink);
}
.docs pre code { background: none; border: 0; padding: 0; }
.docs blockquote { border-left: 3px solid var(--gold); background: #fbf1ee; padding: 8px 16px; border-radius: 0 6px 6px 0; color: var(--ink); }
.docs table { width: 100%; min-width: 0; }
.docs th { background: var(--bg-card); color: var(--ink); }
.docs th, .docs td { border-color: var(--border); color: #2a2f2d; }
.docs td:first-child { color: var(--ink); }
.docs .op { margin: 36px 0 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; }
.docs .op .m { display: inline-block; min-width: 54px; color: var(--gold-soft); font-weight: 700; }
.docs .ref h4 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 18px 0 6px; }
.docs .ref table td:first-child { white-space: nowrap; }
.docs .ref .req { color: var(--gold-soft); }

@media (max-width: 1100px) {
  .docs { grid-template-columns: 200px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 820px) {
  .docs { grid-template-columns: 1fr; gap: 16px; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .docs-nav a { margin: 0; }
  .docs-nav .kicker { width: 100%; }
}