/* ============================================================
   JUST BUNDLE — Docs
   ============================================================ */

.docs-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 3rem;
  padding-top: 7.5rem;
  padding-bottom: var(--space-4xl);
  align-items: start;
}
@media (max-width: 960px) {
  .docs-layout { grid-template-columns: 1fr; padding-top: 6.5rem; }
}

/* ---------- sidebar ---------- */
.sidebar {
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  padding: 1.4rem 1.2rem;
  border-radius: var(--radius);
  scrollbar-width: thin;
}
.sidebar h6 {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.3rem 0 0.5rem;
  padding-left: 0.6rem;
}
.sidebar h6:first-child { margin-top: 0; }
.sidebar a {
  display: block;
  padding: 0.34rem 0.6rem;
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s;
}
.sidebar a:hover { background: oklch(0.26 0.02 65 / 0.05); color: var(--ink); }
.sidebar a.active {
  background: var(--rug-soft);
  color: var(--rug-deep);
  font-weight: 600;
}
.sidebar-toggle { display: none; }
@media (max-width: 960px) {
  .sidebar { position: static; max-height: none; }
  .sidebar__inner { display: none; }
  .sidebar.expanded .sidebar__inner { display: block; }
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
    padding: 0.2rem 0.6rem;
  }
}

/* ---------- content ---------- */
.doc { min-width: 0; }
.doc__card { padding: 2.6rem 3rem; border-radius: var(--radius-lg); }
@media (max-width: 640px) { .doc__card { padding: 1.6rem 1.3rem; } }
.doc__crumb {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.4rem;
}
.doc__crumb b { color: var(--rug-deep); font-weight: 400; }

.doc h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.doc h2 {
  font-size: var(--step-2); font-weight: 600; letter-spacing: -0.015em;
  margin: 2.4rem 0 0.8rem;
}
.doc h3 { font-size: var(--step-1); font-weight: 600; margin: 1.8rem 0 0.6rem; }
.doc p { color: var(--ink-soft); line-height: 1.7; margin: 0.9rem 0; max-width: 70ch; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--rug-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: oklch(0.575 0.21 27 / 0.35); }
.doc a:hover { text-decoration-color: var(--rug); }
.doc ul, .doc ol { margin: 0.9rem 0 0.9rem 1.4rem; color: var(--ink-soft); line-height: 1.7; }
.doc li { margin: 0.35rem 0; padding-left: 0.3rem; }
.doc li::marker { color: var(--rug); }
.doc blockquote {
  margin: 1.2rem 0; padding: 0.9rem 1.2rem;
  background: var(--wick-soft); border-radius: 12px;
  color: var(--ink-soft); font-size: 0.92rem;
}
.doc blockquote p { margin: 0; }
.doc hr { border: 0; border-top: 1px solid var(--glass-edge); margin: 2rem 0; }
.doc code {
  font-family: var(--font-mono); font-size: 0.82em;
  background: oklch(0.26 0.02 65 / 0.07);
  padding: 0.15em 0.45em; border-radius: 6px;
}
.doc pre {
  background: var(--ink); color: oklch(0.92 0.02 80);
  padding: 1.1rem 1.3rem; border-radius: 14px;
  overflow-x: auto; margin: 1.2rem 0;
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6;
}
.doc pre code { background: none; padding: 0; color: inherit; }
.doc table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.88rem; }
.doc th {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--glass-edge);
}
.doc td { padding: 0.55rem 0.7rem; border-bottom: 1px dashed oklch(0.26 0.02 65 / 0.12); color: var(--ink-soft); }
.doc img { border-radius: var(--radius); margin: 1.4rem 0; border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.doc figure { margin: 1.4rem 0; }
.doc figcaption { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); margin-top: 0.5rem; letter-spacing: 0.08em; }

/* ---------- pager ---------- */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin-top: 2rem;
}
.pager a {
  padding: 1rem 1.3rem; border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.9rem; transition: transform 0.3s var(--ease-out);
}
.pager a:hover { transform: translateY(-2px); }
.pager a span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.pager a b { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.pager a.next { text-align: right; }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } }