/* ============ DOCS — pink/dark theme ============ */

/* Fill in missing vars not in landing.css */
:root{
  --white:   #1a0d14;
  --cream-2: #221218;
  --red:     #ff8fab;
}

.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:#1a0d14; border:3px solid #2e1a24; 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:#ff8fab; padding:6px 10px 10px; }
.docs-side a{ display:block; text-decoration:none; font-weight:600; font-size:.92rem; color:#d0b0bc;
  padding:8px 10px; border-radius:9px; transition:background .12s, color .12s; }
.docs-side a:hover{ background:#2e1a24; color:#f0e0e4; }
.docs-side a.active{ background:#ff8fab; color:#1a0510; }

/* content */
.docs-main{ min-width:0; }
.docs-hero{ margin-bottom:36px; }
.docs-hero h1{ font-family:'Press Start 2P',monospace; font-weight:400; text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,2rem); line-height:1.5; letter-spacing:-.01em;
  color:#ff8fab; text-shadow:3px 3px 0 #0a0508; }
.docs-hero p{ margin-top:16px; font-size:1.12rem; font-weight:500; color:#d0b0bc; max-width:60ch; }

.doc-sec{ scroll-margin-top:96px; padding:26px 0 8px; border-top:2.5px dashed #2e1a24; margin-top:34px; }
.doc-sec:first-of-type{ border-top:none; margin-top:0; padding-top:6px; }
.doc-sec h2{ font-family:'Outfit',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2rem); letter-spacing:-.015em; line-height:1.02; margin-bottom:14px; color:#f0e0e4; }
.doc-sec h3{ font-size:1.12rem; font-weight:800; margin:22px 0 8px; color:#f0e0e4; }
.doc-sec p{ color:#d0b0bc; font-weight:450; margin-bottom:12px; max-width:70ch; }
.doc-sec p strong{ color:#f0e0e4; }
.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:#d0b0bc; }
.doc-sec li::before{ content:""; position:absolute; left:2px; top:13px; width:10px; height:10px;
  border-radius:50%; background:#ff8fab; border:2px solid #c8607a; }
.doc-sec a.inline{ color:#ff8fab; font-weight:700; text-decoration:none; border-bottom:2px solid #e8c090; }
.doc-sec a.inline:hover{ background:rgba(232,192,144,.15); }

/* callout + code chips */
.doc-note{ background:#221218; border:3px solid #3a2030; border-radius:14px; box-shadow:var(--shadow-sm);
  padding:16px 18px; margin:18px 0; font-weight:600; color:#f0e0e4; }
.doc-note.ink{ background:#ff8fab; color:#1a0510; border-color:#c8607a; }
.kv{ display:grid; grid-template-columns:180px 1fr; gap:0; border:3px solid #2e1a24; border-radius:14px;
  overflow:hidden; background:#1a0d14; box-shadow:var(--shadow-sm); margin:16px 0; }
.kv > div{ padding:12px 16px; border-bottom:2px solid #2e1a24; color:#d0b0bc; }
.kv > div:nth-last-child(-n+2){ border-bottom:none; }
.kv .k{ background:#221218; font-weight:800; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:#f0e0e4; }
.kv .v{ font-family:'IBM Plex Mono',monospace; font-size:.86rem; word-break:break-all; color:#d0b0bc; }
.doc-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:16px 0; }
.doc-card{ background:#1a0d14; border:3px solid #2e1a24; 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 #3a2030; border-radius:8px;
  padding:4px 9px 3px; margin-bottom:10px; color:#f0e0e4; }
.doc-card .tag.long{ background:#ff8fab; color:#1a0510; border-color:#c8607a; }
.doc-card .tag.short{ background:#221218; color:#d0b0bc; }
.doc-card h4{ font-family:'Outfit',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.2rem; margin-bottom:6px; color:#f0e0e4; }
.doc-card p{ font-size:.9rem; margin:0; color:#d0b0bc; }

@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; }
}