/* ============ DOCS (print/comic theme, shares landing.css tokens) ============ */
.docs-wrap{ max-width:1180px; margin:0 auto; padding:40px 28px 90px; position:relative; z-index:1;
  display:grid; grid-template-columns:240px 1fr; gap:44px; align-items:start; }

/* sticky sidebar */
.docs-side{ position:sticky; top:96px; align-self:start; }
.docs-side .side-card{ background:var(--white); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:16px 14px; }
.docs-side b{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); padding:6px 10px 10px; }
.docs-side a{ display:block; text-decoration:none; font-weight:600; font-size:.92rem; color:#39415e;
  padding:8px 10px; border-radius:9px; transition:background .12s, color .12s; }
.docs-side a:hover{ background:var(--cream-2); color:var(--ink); }
.docs-side a.active{ background:var(--ink); color:var(--paper); }

/* content */
.docs-main{ min-width:0; }
.docs-hero{ margin-bottom:36px; }
.docs-hero h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; letter-spacing:-.02em; color:var(--red); text-shadow:3px 3px 0 var(--ink); }
.docs-hero p{ margin-top:16px; font-size:1.12rem; font-weight:500; color:#2b3550; max-width:60ch; }

.doc-sec{ scroll-margin-top:96px; padding:26px 0 8px; border-top:2.5px dashed var(--ink); margin-top:34px; }
.doc-sec:first-of-type{ border-top:none; margin-top:0; padding-top:6px; }
.doc-sec h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.015em; line-height:1.02; margin-bottom:14px; }
.doc-sec h3{ font-size:1.12rem; font-weight:800; margin:22px 0 8px; }
.doc-sec p{ color:#2b3550; font-weight:450; margin-bottom:12px; max-width:70ch; }
.doc-sec p strong{ color:var(--ink); }
.doc-sec ul{ margin:0 0 14px 0; padding:0; list-style:none; max-width:70ch; }
.doc-sec li{ position:relative; padding:6px 0 6px 26px; color:#2b3550; }
.doc-sec li::before{ content:""; position:absolute; left:2px; top:13px; width:10px; height:10px; border-radius:50%;
  background:var(--red); border:2px solid var(--ink); }
.doc-sec a.inline{ color:var(--red); font-weight:700; text-decoration:none; border-bottom:2px solid var(--yellow); }
.doc-sec a.inline:hover{ background:var(--yellow); }

/* callout + code chips */
.doc-note{ background:var(--yellow); border:var(--border); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:16px 18px; margin:18px 0; font-weight:600; color:var(--ink); }
.doc-note.ink{ background:var(--ink); color:var(--paper); }
.kv{ display:grid; grid-template-columns:180px 1fr; gap:0; border:var(--border); border-radius:14px; overflow:hidden;
  background:var(--white); box-shadow:var(--shadow-sm); margin:16px 0; }
.kv > div{ padding:12px 16px; border-bottom:2px solid var(--ink); }
.kv > div:nth-last-child(-n+2){ border-bottom:none; }
.kv .k{ background:var(--cream-2); font-weight:800; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
.kv .v{ font-family:'IBM Plex Mono',monospace; font-size:.86rem; word-break:break-all; }
.doc-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:16px 0; }
.doc-card{ background:var(--white); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:18px 18px 16px; }
.doc-card .tag{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.66rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; border:2.5px solid var(--ink); border-radius:8px; padding:4px 9px 3px; margin-bottom:10px; }
.doc-card .tag.long{ background:var(--yellow); } .doc-card .tag.short{ background:var(--cream-2); }
.doc-card h4{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.2rem; margin-bottom:6px; }
.doc-card p{ font-size:.9rem; margin:0; }

@media (max-width:900px){
  .docs-wrap{ grid-template-columns:1fr; gap:24px; }
  .docs-side{ position:static; }
  .docs-side .side-card{ display:flex; flex-wrap:wrap; gap:4px; }
  .docs-side b{ width:100%; padding-bottom:4px; }
  .doc-cards{ grid-template-columns:1fr; }
  .kv{ grid-template-columns:1fr; } .kv .k{ border-bottom:none; }
}