/* apistock.dev and docs.apistock.dev: what only the site needs. The shared
   design system (tokens, fonts, docs header and sidebar, code blocks and the
   API reference) comes first, from reference.css in
   modules/openapi/reference, which generated apps serve at /docs too. */

/* The landing page and 404 are always dark: the brand's primary world. */
.force-dark {
  --ground:#0c0c0a; --surface:#131310; --surface-2:#1a1a16;
  --ink:#f0efe9; --muted:#a5a59a; --dim:#8a8a80;
  --hairline:#22221e; --border:#2a2a24; --border-2:#3a3a34;
  --danger:#ff8f6b; --label:#d8ff3e; --focus:#d8ff3e;
  --m1:#d8ff3e; --m2:#f0efe9; --m3:#6b6b63; --m4:#3a3a34;
  --btn-ink-bg:#f0efe9; --btn-ink-fg:#0c0c0a; --btn-ink-hover:#d9d8d0;
  color-scheme:dark;
}
.wrap { width:100%; max-width:1080px; margin-inline:auto; padding-inline:clamp(16px, 4vw, 32px); }
.label-dim { color:var(--dim); }

/* Mark: stacked milled boards, the top board pulled right. */
.mark { --u:1.5px; display:inline-flex; flex-direction:column; gap:calc(var(--u) * .67); width:calc(var(--u) * 16.6); flex:none; }
.mark i { display:block; width:calc(var(--u) * 14); height:calc(var(--u) * 3); background:var(--m2); }
.mark i:nth-child(1) { background:var(--m1); margin-left:calc(var(--u) * 2.6); }
.mark i:nth-child(3) { background:var(--m3); }
.mark i:nth-child(4) { background:var(--m4); }
.mark.lg { --u:6px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }

/* ---------- Docs pages ---------- */
.meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font:400 12px/1 var(--font-mono); color:var(--dim); }
.status { color:var(--ink); border:1px solid var(--border-2); padding:5px 8px; }

.prose { display:flex; flex-direction:column; gap:18px; min-width:0; padding-top:4px; }
.prose > * { margin:0; min-width:0; }
.prose h2 { font:700 clamp(24px, 2.6vw, 28px)/1.15 var(--font-sans); letter-spacing:-.035em; margin-top:30px; }
.prose h3 { font:500 19px/1.3 var(--font-sans); letter-spacing:-.02em; margin-top:14px; }
.prose h4 { font:500 16px/1.4 var(--font-sans); margin-top:8px; }
.prose .anchor { margin-left:.35em; color:var(--dim); text-decoration:none; font-weight:400; opacity:0; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus-visible { opacity:1; }
.prose a:not(.anchor, .ep) { text-decoration:underline; text-decoration-color:var(--border-2); text-underline-offset:3px; }
.prose a:not(.anchor, .ep):hover { text-decoration-color:var(--ink); }
.prose ul, .prose ol { padding-left:1.25em; display:flex; flex-direction:column; gap:8px; }
.prose li::marker { color:var(--dim); }
.prose li > ul, .prose li > ol { margin-top:8px; }
.prose li > p + p { margin-top:8px; }
.prose strong { font-weight:700; }
.prose :not(pre) > code { font-size:.84em; background:var(--surface); border:1px solid var(--hairline); padding:1px 5px; overflow-wrap:anywhere; }
.prose hr { border:0; border-top:1px solid var(--hairline); width:100%; }
.prose blockquote { border:1px solid var(--border); background:var(--surface); padding:14px 18px; display:flex; flex-direction:column; gap:10px; font-size:15px; }
.prose blockquote > * { margin:0; }
.table-wrap { overflow-x:auto; border-top:1px solid var(--hairline); }
.prose table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.55; }
.prose th { text-align:left; font:400 11px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:12px 20px 12px 0; border-bottom:1px solid var(--hairline); white-space:nowrap; vertical-align:bottom; }
.prose td { padding:12px 20px 12px 0; border-bottom:1px solid var(--hairline); vertical-align:top; }
.prose th:last-child, .prose td:last-child { padding-right:0; }

.callout { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px 16px; border:1px solid var(--border); background:var(--surface); padding:16px 18px; font-size:15px; line-height:1.6; }
.callout .label { color:var(--dim); font-size:11px; padding-top:4px; }
.callout-body { display:flex; flex-direction:column; gap:10px; min-width:0; }
.callout-body > * { margin:0; }
.callout.dont, .callout.warning { border-color:color-mix(in srgb, var(--danger) 55%, var(--border)); }
.callout.dont .label, .callout.warning .label { color:var(--danger); }
@media (max-width:520px) { .callout { grid-template-columns:minmax(0, 1fr); } }

.prose .steps > ol { list-style:none; padding:0; counter-reset:step; gap:0; }
.prose .steps > ol > li { counter-increment:step; position:relative; padding:0 0 30px 48px; display:flex; flex-direction:column; gap:12px; }
.prose .steps > ol > li::before { content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; font:500 12px/1 var(--font-mono); border:1px solid var(--border-2); background:var(--ground); z-index:1; }
.prose .steps > ol > li::after { content:""; position:absolute; left:15px; top:30px; bottom:0; width:1px; background:var(--hairline); }
.prose .steps > ol > li:last-child { padding-bottom:0; }
.prose .steps > ol > li:last-child::after { display:none; }
.prose .steps > ol > li > * { margin:0; }
.prose .steps > ol > li > p:first-child { font:500 18px/30px var(--font-sans); letter-spacing:-.02em; }
.prose .steps > ol > li > p:first-child strong { font-weight:500; }

.code-group { border:1px solid var(--c-line); background:var(--c-bg); min-width:0; }
.code-group > .code { border:0; }

.feedback { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; padding-block:22px; margin-top:34px; border-block:1px solid var(--hairline); font-size:14px; color:var(--muted); }
.feedback .btns { display:flex; gap:8px; }
.feedback a { text-decoration:underline; text-underline-offset:3px; }
.edited { font:400 12px/1.5 var(--font-mono); color:var(--dim); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
.edited a:hover { color:var(--ink); }

/* ---------- Landing ---------- */
.lnav { display:flex; align-items:center; gap:28px; height:72px; }
.lnav ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; font-size:15px; color:var(--muted); }
.lnav ul a { text-decoration:none; white-space:nowrap; }
.lnav ul a:hover { color:var(--ink); }
.lnav .end { margin-left:auto; display:flex; gap:10px; }
@media (max-width:980px) { .lnav ul { display:none; } }
@media (max-width:520px) { .hide-sm { display:none; } }

.hero { display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr); gap:clamp(32px, 5vw, 64px); align-items:center; padding-block:clamp(40px, 7vw, 88px) clamp(48px, 7vw, 80px); }
@media (max-width:980px) { .hero { grid-template-columns:minmax(0, 1fr); } }
.hero-copy { display:flex; flex-direction:column; gap:28px; align-items:flex-start; min-width:0; }
.chip { display:inline-flex; align-items:center; gap:10px; font:400 12px/1.3 var(--font-mono); letter-spacing:.04em; color:var(--muted); border:1px solid var(--border-2); padding:8px 12px; text-decoration:none; }
.chip:hover { color:var(--ink); border-color:var(--ink); }
.chip .sq { width:6px; height:6px; background:var(--ink); flex:none; }
.display { font:700 clamp(44px, 7vw, 80px)/.96 var(--font-sans); letter-spacing:-.05em; }
.stock { background:var(--accent); color:var(--on-accent); padding:0 .1em .02em; display:inline-block; transform:translateX(.14em); line-height:.92; }
.lead { font:500 clamp(20px, 2.3vw, 26px)/1.3 var(--font-sans); letter-spacing:-.02em; max-width:30ch; }
.lead span { color:var(--muted); }
.install { display:flex; align-items:center; gap:14px; border:1px solid var(--border); background:var(--code-bg); padding:10px 10px 10px 16px; max-width:100%; }
.install code { font-size:13px; color:var(--c-ink); overflow-x:auto; white-space:nowrap; min-width:0; scrollbar-width:none; }
.install code b { color:var(--c-key); font-weight:400; margin-right:10px; }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; }

.term { margin:0; background:var(--c-bg); border:1px solid var(--border); min-width:0; }
.term-bar { display:flex; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--c-line); font:400 11px/1 var(--font-mono); letter-spacing:.08em; color:var(--c-dim); text-transform:uppercase; }
.term pre { margin:0; padding:20px 20px 24px; font-size:13px; line-height:1.8; color:var(--c-ink); overflow-x:auto; }
.t-p, .t-ok { color:var(--c-key); }
.t-d { color:var(--c-dim); }
.t-m { color:var(--c-mid); }
.caret { display:inline-block; width:.6em; height:1.1em; vertical-align:-.2em; background:var(--c-ink); animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.proof { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-block:1px solid var(--hairline); }
.proof div { padding:22px clamp(16px, 2vw, 24px); border-right:1px solid var(--hairline); display:flex; flex-direction:column; gap:6px; }
.proof div:last-child { border-right:0; }
.proof b { font:700 32px/1 var(--font-sans); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.proof span { font:400 12px/1.4 var(--font-mono); letter-spacing:.06em; color:var(--dim); text-transform:uppercase; }
@media (max-width:700px) { .proof { grid-template-columns:repeat(2, minmax(0, 1fr)); } .proof div:nth-child(2) { border-right:0; } .proof div:nth-child(-n+2) { border-bottom:1px solid var(--hairline); } }

.lsec { padding-block:clamp(56px, 8vw, 96px); border-bottom:1px solid var(--hairline); }
.lsec-head { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr); gap:24px 48px; align-items:end; margin-bottom:40px; }
.lsec-head h2 { font:700 clamp(28px, 3.8vw, 40px)/1.05 var(--font-sans); letter-spacing:-.04em; }
.lsec-head p { color:var(--muted); max-width:52ch; }
.lsec-head .label { grid-column:1 / -1; }
@media (max-width:820px) { .lsec-head { grid-template-columns:minmax(0, 1fr); } }
.landing code { font-size:.86em; }

.decisions { border-top:1px solid var(--hairline); }
.decision { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr) 96px; gap:8px 40px; padding-block:22px; border-bottom:1px solid var(--hairline); align-items:baseline; }
.decision h3 { font:500 20px/1.3 var(--font-sans); letter-spacing:-.02em; }
.decision p { color:var(--muted); font-size:16px; }
.decision a { font:400 12px/1 var(--font-mono); color:var(--dim); text-align:right; text-decoration:none; }
.decision a:hover { color:var(--ink); }
.decision-h { padding-block:0 12px; }
.decision-h span { font:400 11px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
@media (max-width:760px) { .decision { grid-template-columns:minmax(0, 1fr); } .decision a { text-align:left; } .decision-h { display:none; } }

.steps4 { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); border:1px solid var(--border); }
.step4 { padding:24px; border-right:1px solid var(--border); display:flex; flex-direction:column; gap:14px; background:var(--surface); min-width:0; }
.step4:last-child { border-right:0; }
.step4 .n { font:400 12px/1 var(--font-mono); color:var(--dim); letter-spacing:.1em; }
.step4 code { font-size:13px; color:var(--ink); background:var(--code-bg); border:1px solid var(--hairline); padding:8px 10px; overflow-x:auto; white-space:nowrap; }
.step4 h3 { font:500 18px/1.25 var(--font-sans); letter-spacing:-.02em; }
.step4 p { color:var(--muted); font-size:15px; line-height:1.55; }
@media (max-width:1000px) { .step4 { border-right:0; border-bottom:1px solid var(--border); } .step4:last-child { border-bottom:0; } }

.stockgrid { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(24px, 4vw, 48px); align-items:start; }
@media (max-width:900px) { .stockgrid { grid-template-columns:minmax(0, 1fr); } }
.tree { margin:0; background:var(--c-bg); border:1px solid var(--border); padding:22px; font-size:13px; line-height:1.85; color:var(--c-ink); overflow-x:auto; }
.modules { border-top:1px solid var(--hairline); }
.modules-h { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; }
.badge { font:400 11px/1 var(--font-mono); letter-spacing:.08em; padding:3px 7px; }
.badge-official { background:var(--accent); color:var(--on-accent); }
.mod { display:grid; grid-template-columns:170px minmax(0, 1fr); gap:6px 24px; padding-block:13px; border-bottom:1px solid var(--hairline); align-items:baseline; }
.mod code { font-size:13px; color:var(--ink); }
.mod span { color:var(--muted); font-size:15px; line-height:1.5; }
@media (max-width:520px) { .mod { grid-template-columns:minmax(0, 1fr); } }
.note-line { margin-top:20px; font-size:15px; color:var(--muted); }

.twodocs { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:20px; }
.docpanel { display:flex; flex-direction:column; border:1px solid var(--border); background:var(--surface); text-decoration:none; color:inherit; }
.docpanel:hover { border-color:var(--border-2); }
.docpanel:hover .arrow { transform:translateX(3px); }
.docpanel-copy { padding:24px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--border); }
.docpanel-copy code { font-size:12px; color:var(--dim); }
.docpanel-copy h3 { font:500 22px/1.2 var(--font-sans); letter-spacing:-.03em; display:flex; justify-content:space-between; gap:12px; }
.docpanel-copy p { color:var(--muted); font-size:15px; }
.mini { height:190px; display:grid; overflow:hidden; background:var(--ground); }
.mini-docs { grid-template-columns:28% 1fr 20%; }
.mini-api { grid-template-columns:26% 1fr 36%; }
.mini > div { padding:16px 12px; display:flex; flex-direction:column; gap:8px; border-right:1px solid var(--hairline); }
.mini > div:last-child { border-right:0; }
.bar { display:block; height:6px; background:var(--border-2); }
.bar.ink { background:var(--muted); }
.bar.h { height:12px; background:var(--ink); width:70%; }
.bar.code { background:var(--c-bg); height:54px; border:1px solid var(--hairline); }
.bar.tall { height:70px; }
.w35 { width:35%; } .w40 { width:40%; } .w55 { width:55%; } .w60 { width:60%; } .w65 { width:65%; }
.w70 { width:70%; } .w75 { width:75%; } .w80 { width:80%; } .w85 { width:85%; } .w90 { width:90%; }
.mtag { font:500 8px/1 var(--font-mono); color:var(--dim); letter-spacing:.08em; display:flex; gap:6px; align-items:center; }
.mtag::after { content:""; height:5px; flex:1; background:var(--border-2); }

.closing { padding-block:clamp(64px, 9vw, 112px); display:grid; grid-template-columns:auto minmax(0, 1fr); gap:clamp(24px, 5vw, 56px); align-items:center; }
.closing h2 { font:700 clamp(34px, 5vw, 56px)/1 var(--font-sans); letter-spacing:-.05em; }
.closing p { color:var(--muted); margin-top:16px; max-width:50ch; }
.closing .cta-row { margin-top:28px; }
@media (max-width:640px) { .closing { grid-template-columns:minmax(0, 1fr); } }

.lfoot { border-top:1px solid var(--hairline); padding-block:40px 56px; display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:32px; font-size:14px; }
.lfoot h4 { margin:0 0 12px; font:400 11px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lfoot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; color:var(--muted); }
.lfoot a { text-decoration:none; }
.lfoot a:hover { color:var(--ink); }
.lfoot .fine { color:var(--dim); margin-top:14px; max-width:34ch; }
@media (max-width:760px) { .lfoot { grid-template-columns:repeat(2, minmax(0, 1fr)); } .lfoot > div:first-child { grid-column:1 / -1; } }

/* ---------- 404 ----------
   Never name a layout class like a highlighter token (.nf, .p, .w…): code
   blocks use those classes on every token. TestCSSDoesNotStyleTokenClasses
   checks. */
.not-found { min-height:80vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:22px; padding-block:64px; }
.not-found h1 { font:700 clamp(30px, 4vw, 44px)/1.05 var(--font-sans); letter-spacing:-.04em; }
.not-found-lead { color:var(--muted); max-width:52ch; }

/* Package reference pages, generated from Go doc comments. */
.prose .pkg-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; padding:14px 0; border-block:1px solid var(--hairline); font:400 13px/1.4 var(--font-mono); color:var(--muted); }
.prose .pkg-meta code { background:none; padding:0; border:0; }
.prose .pkg-meta a { color:var(--muted); }
.prose .decl-name { font-family:var(--font-mono); font-weight:500; letter-spacing:0; overflow-wrap:anywhere; }
.prose h3.decl-name { font-size:16px; margin-top:26px; }
.prose h4.decl-name { font-size:14px; margin-top:18px; color:var(--muted); }
.prose .decl-name + .code { margin-top:-4px; }
.prose > pre { margin:0; padding:16px 18px; overflow-x:auto; background:var(--code-ground, #0f0f0d); border:1px solid var(--border); font:400 13px/1.6 var(--font-mono); }
.prose > pre code { background:none; border:0; padding:0; font:inherit; }