/* ==========================================================================
   CAMPLAX — docs chrome
   The docs body inside the marketing shell. Same Hairline rules as wire.css:
   layers separate with a 1px border (never a shadow), blue marks code and
   links only, 6px radius on anything you click and 12px on anything that
   holds content, whole pixels only.
   ========================================================================== */

.docs-wrap{display:grid;grid-template-columns:212px minmax(0,1fr) 176px;gap:48px;
  padding-top:clamp(32px,4vw,56px);padding-bottom:96px}

/* ------------------------------------------------------------- left rail */
.docs-side{position:sticky;top:72px;align-self:start;max-height:calc(100vh - 96px);
  overflow-y:auto;padding-right:8px;scrollbar-width:thin}
.docs-group{margin:20px 0 4px;padding-left:10px;color:var(--ink-3);font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.docs-group:first-child{margin-top:0}
.docs-side a{display:block;padding:7px 10px;border-radius:var(--r-sm);color:var(--ink-3);
  font-size:var(--t-caption);line-height:1.4;transition:background .15s ease-out,color .15s ease-out}
.docs-side a:hover{background:var(--surface);color:var(--ink)}
.docs-side a[aria-current="page"]{background:var(--surface);color:var(--ink);font-weight:500}

/* --------------------------------------------------------- centre column */
.docs-main{min-width:0}
.docs-crumb{display:inline-flex;align-items:center;gap:7px;color:var(--ink-3);font-size:var(--t-caption)}
.docs-crumb a{transition:color .16s var(--ease)}
.docs-crumb a:hover{color:var(--ink)}
.docs-crumb span[aria-hidden]{opacity:.45}

.docs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;
  padding-bottom:20px;border-bottom:1px solid var(--edge)}
.doc-act{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;
  border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--paper);
  color:var(--ink-2);font-size:var(--t-caption);cursor:pointer;
  transition:border-color .15s ease-out,color .15s ease-out,background .15s ease-out}
.doc-act:hover{border-color:var(--edge-2);color:var(--ink);background:var(--surface)}
.doc-act svg{width:13px;height:13px;flex:0 0 auto}
.docs-meta{margin-left:auto;color:var(--ink-3);font-size:12px;white-space:nowrap}

.docs-title{margin-top:26px;font-size:32px;font-weight:400;line-height:1.15;
  letter-spacing:-.03em}
.docs-lede{margin-top:12px;max-width:62ch;color:var(--ink-3);font-size:var(--t-body);
  line-height:var(--lh-body);letter-spacing:var(--tr-body)}

/* ----------------------------------------------------------------- prose */
.docs-body{margin-top:28px}
.docs-body > * + *{margin-top:16px}
.docs-body h2{margin-top:44px;font-size:var(--t-h3);font-weight:500;line-height:1.25;
  letter-spacing:-.02em;scroll-margin-top:80px}
.docs-body h3{margin-top:32px;font-size:var(--t-body);font-weight:500;letter-spacing:-.014em;
  scroll-margin-top:80px}
.docs-body h1{display:none} /* the page h1 comes from frontmatter, not the body */
.docs-body p,.docs-body li{color:var(--ink-2);font-size:15px;line-height:1.7}
.docs-body ul,.docs-body ol{display:grid;gap:8px;padding-left:22px}
.docs-body li::marker{color:var(--ink-3)}
.docs-body li > ul{margin-top:8px}
.docs-body a{color:var(--signal);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.docs-body a:hover{color:var(--ink)}
.docs-body strong{color:var(--ink);font-weight:500}
.docs-body code{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:-.01em}
.docs-body :not(pre) > code{padding:2px 5px;border:1px solid var(--edge);
  border-radius:var(--r-sm);background:var(--surface);color:var(--ink);white-space:nowrap}
.docs-body blockquote{margin:0;padding:12px 16px;border-left:2px solid var(--edge-2)}
.docs-body blockquote p{color:var(--ink-3)}
.docs-body hr{border:0;border-top:1px solid var(--edge);margin:32px 0}

/* code blocks reuse the marketing dark card, but scroll instead of clipping */
.docs-pre{margin:0;padding:16px 20px;border:1px solid var(--night);border-radius:var(--r-lg);
  background:var(--night);overflow-x:auto}
.docs-pre[data-lang]::before{content:attr(data-lang);display:block;margin:0 0 10px;
  color:var(--night-ink-2);font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase}
.docs-pre code{display:block;color:var(--night-ink);font-family:var(--mono);font-size:var(--t-caption);
  line-height:1.6;white-space:pre}

.docs-table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.docs-table th,.docs-table td{padding:10px 0;border-bottom:1px solid var(--edge);
  text-align:left;vertical-align:top}
.docs-table th{color:var(--ink);font-weight:500}
.docs-table td{color:var(--ink-2);line-height:1.55}
.docs-table th + th,.docs-table td + td{padding-left:16px}
.docs-table code{white-space:normal}

/* ------------------------------------------------------------ right rail */
.docs-toc{position:sticky;top:72px;align-self:start;padding-top:4px}
.docs-toc .toc-l{display:block;margin-bottom:8px;color:var(--ink-3);font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.docs-toc a{display:block;padding:4px 0;color:var(--ink-3);font-size:var(--t-caption);line-height:1.45;
  transition:color .15s ease-out}
.docs-toc a:hover{color:var(--ink)}
.docs-toc:empty{display:none}

/* ----------------------------------------------------------------- pager */
.docs-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px}
.docs-page-card{display:block;padding:18px 20px;border:1px solid var(--edge);
  border-radius:var(--r-lg);background:var(--paper);transition:border-color .15s ease-out}
.docs-page-card:hover{border-color:var(--edge-2)}
.docs-page-card .k{display:block;color:var(--ink-3);font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.docs-page-card .t{display:block;margin-top:6px;color:var(--ink);font-size:var(--t-small);
  font-weight:500;letter-spacing:-.012em}
.docs-page-card.next{text-align:right}
.docs-pager .gap{visibility:hidden}

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  .docs-wrap{grid-template-columns:200px minmax(0,1fr);gap:36px}
  .docs-toc{display:none}
}
@media (max-width:820px){
  .docs-wrap{grid-template-columns:1fr;gap:0;padding-top:24px}
  .docs-side{position:static;max-height:none;display:flex;align-items:center;gap:2px;
    overflow-x:auto;padding:0 0 14px;margin-bottom:24px;border-bottom:1px solid var(--edge);
    scrollbar-width:none}
  .docs-side::-webkit-scrollbar{display:none}
  .docs-group{display:none}
  .docs-side a{flex:0 0 auto;white-space:nowrap}
  .docs-meta{margin-left:0;width:100%}
  .docs-pager{grid-template-columns:1fr}
  .docs-page-card.next{text-align:left}
}