/* Docs layout — builds on ../styles.css (same retro-90s palette + motifs).
   Sidebar + content, Win95 "window" callouts, numbered steps. Self-contained. */

.docs-shell { max-width: 1180px; margin: 0 auto; padding: 0 1rem; }

.docs-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: 1.5rem 0 3rem;
}

/* ---------- sidebar ---------- */
.docs-sidebar {
  position: sticky; top: 64px;
  background: var(--panel);
  border: 2px solid var(--bevel-dk2);
  box-shadow: inset 1px 1px 0 var(--bevel-lt), 3px 3px 0 rgba(0,0,0,0.08);
  padding: 0.9rem 0.9rem 1.2rem;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
}
.docs-sidebar .side-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 800; color: var(--purple-d); margin: 1rem 0 0.4rem;
}
.docs-sidebar .side-title:first-child { margin-top: 0; }
.docs-sidebar ul { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.docs-sidebar li { margin: 0; }
.docs-sidebar a {
  display: block; color: var(--ink); font-weight: 600; font-size: 0.9rem;
  padding: 0.28rem 0.5rem; border-left: 3px solid transparent;
}
.docs-sidebar a:hover { background: var(--cream-2); text-decoration: none; border-left-color: var(--teal); }
.docs-sidebar a.active { background: var(--teal); color: #fff; border-left-color: var(--purple); }

/* ---------- content ---------- */
.docs-content { min-width: 0; }
.docs-content h1 { margin-bottom: 0.4rem; }
.docs-content h2 {
  margin-top: 2.4rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--line);
}
.docs-content h3 { margin-top: 1.6rem; color: var(--teal-ink); }
.docs-content p, .docs-content li { color: var(--ink); }
.docs-content ul, .docs-content ol { padding-left: 1.4rem; }
.docs-content li { margin: 0.3rem 0; }
.docs-content .lede { font-size: 1.12rem; color: var(--ink-2); margin-bottom: 1.4rem; }

.docs-content pre {
  background: var(--crt); color: var(--green);
  border: 2px solid var(--bevel-dk2); box-shadow: inset 1px 1px 0 #000;
  padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.86rem; line-height: 1.5;
  margin: 0.8rem 0;
}
.docs-content pre code { background: none; border: 0; color: inherit; padding: 0; font-size: inherit; }

/* breadcrumb */
.crumbs { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); margin-bottom: 0.6rem; }
.crumbs a { color: var(--purple); }

/* numbered step blocks */
.step { display: grid; grid-template-columns: 40px 1fr; gap: 0.9rem; margin: 1.1rem 0; }
.step .num {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--purple); color: #fff; font-weight: 900; font-size: 1.1rem;
  border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.step .body { min-width: 0; }
.step .body > :first-child { margin-top: 0; }

/* callout "windows" */
.callout {
  border: 2px solid var(--bevel-dk2); background: var(--cream-2);
  box-shadow: inset 1px 1px 0 var(--bevel-lt), 2px 2px 0 rgba(0,0,0,0.07);
  margin: 1rem 0;
}
.callout .bar {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800;
  padding: 0.3rem 0.7rem; color: #fff;
}
.callout .inner { padding: 0.7rem 0.85rem; }
.callout .inner > :first-child { margin-top: 0; }
.callout .inner > :last-child { margin-bottom: 0; }
.callout.note .bar { background: var(--teal-d); }
.callout.tip  .bar { background: var(--purple); }
.callout.warn .bar { background: var(--coral); }

/* platform cards grid */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; margin: 1rem 0; }
.platform-grid a {
  display: block; text-align: center; padding: 0.7rem 0.5rem; background: var(--panel);
  border: 2px solid var(--bevel-dk2); box-shadow: inset 1px 1px 0 var(--bevel-lt);
  color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.02em;
}
.platform-grid a:hover { background: var(--teal); color: #fff; text-decoration: none; }

/* next-steps cards */
.next-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.next-grid .card {
  background: var(--cream-2); border: 2px solid var(--bevel-dk2);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.08); padding: 0.8rem 0.9rem;
}
.next-grid .card h3 { margin: 0 0 0.3rem; }
.next-grid .card p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }

.pill-pro {
  display: inline-block; margin-left: 0.4rem; padding: 0 0.4rem; font-size: 0.62rem;
  font-weight: 800; letter-spacing: 0.06em; background: var(--purple); color: #fff; vertical-align: middle;
}

@media (max-width: 820px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; max-height: none; }
}