/* Boltun public Docs page — ported 1:1 from the Claude Design "Docs.dc.html"
   <style> block. Global element/class rules (nav, buttons, sidebar links,
   TOC links, <pre> code blocks); every layout value stays inline on the markup
   exactly as designed (zero media queries). Page-scoped: loaded only by the
   standalone docs.html, never alongside app.css. */
*{box-sizing:border-box}
body{margin:0;background:#0a0b0e;color:#ECECEA;font-family:'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#B6FF3A;text-decoration:none}
a:hover{color:#c8ff63}
.nav-lnk{color:#b7bcc4;font-size:14px;transition:color .15s}
.nav-lnk:hover{color:#ECECEA}
.btn-p{display:inline-block;font-size:15px;font-weight:600;color:#0a0b0e;background:#B6FF3A;padding:9px 16px;border-radius:10px;transition:transform .12s,background .15s}
.btn-p:hover{background:#c8ff63;color:#0a0b0e;transform:translateY(-1px)}
.side-a{display:block;font-size:13.5px;color:#9ea4ad;padding:6px 12px;border-radius:7px;transition:color .15s,background .15s}
.side-a:hover{color:#ECECEA;background:rgba(255,255,255,.04)}
.side-a.on{color:#B6FF3A;background:rgba(182,255,58,.08)}
.side-h{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:#6f757e;margin:22px 0 8px;padding:0 12px}
.toc-a{display:block;font-size:12.5px;color:#8b9098;padding:5px 0;transition:color .15s}
.toc-a:hover{color:#B6FF3A}
pre{background:#101318;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:16px 18px;overflow-x:auto;margin:16px 0;font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.6;color:#c9ced6}
code{font-family:'IBM Plex Mono',monospace}
.ic{color:#B6FF3A}
.cm{color:#6f757e}

/* ── Docs responsive layer ───────────────────────────────────────────────
   Verbatim from Docs.dc.html. The shared public-page rules (@900/@560) live
   in marketing.css; these two are specific to the 3-column docs grid.
   @1080 drops the "ON THIS PAGE" rail and narrows the section sidebar;
   @820 collapses to one column and turns the section sidebar into a
   horizontally scrollable chip nav.
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width:1080px){
    .docs-grid{grid-template-columns:206px minmax(0,1fr)!important;gap:32px!important}
    .docs-toc{display:none!important}
  }

@media (max-width:820px){
    .docs-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
    .docs-side{position:static!important;height:auto!important}
    .docs-nav{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;margin-top:14px!important;padding-bottom:5px!important;scrollbar-width:none}
    .docs-nav::-webkit-scrollbar{display:none}
    .docs-nav .side-h{display:none!important}
    .docs-nav .side-a{flex:none!important;white-space:nowrap!important;border:1px solid rgba(255,255,255,.1)!important;padding:8px 13px!important;font-size:12.5px!important}
    pre{font-size:12px!important;padding:13px 14px!important}
  }

@media (max-width:560px){
    /* The quickstart rows are flex containers whose copy is bare text nodes, so
       every text run and every <strong> is its own flex item and wraps
       independently — on a phone "On the" ends up split across two lines with a
       9px gap stranded mid-sentence. Below this width let the copy flow as
       ordinary inline text (hanging indent keeps the numbers aligned). The rows
       stay flex above 560px, so desktop renders exactly as the design does. */
    .qstep{display:block!important;padding-left:19px;text-indent:-19px}
    .qstep>.ic{margin-right:9px}
  }