/* ============================================================================
   docs.css — developer / API reference layout (dark theme)
   Sticky left section-nav + content column + right "on this page" rail.
   ============================================================================ */

.docs-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.docs-shell { padding-top: var(--space-7); padding-bottom: var(--space-9); }

/* ---- Left section nav ---------------------------------------------------- */
.docs-nav {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  align-self: start;
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  padding-right: var(--space-3);
}
.docs-nav-group { margin-bottom: var(--space-5); }
.docs-nav-group > p {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  margin-bottom: var(--space-2);
  padding-left: var(--space-3);
}
.docs-nav a {
  display: block;
  padding: 7px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  border-left: 2px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.docs-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.docs-nav a[aria-current="true"] { color: var(--accent-text); border-left-color: var(--accent); background: var(--accent-wash); }

/* ---- Content ------------------------------------------------------------- */
.docs-content { min-width: 0; max-width: 820px; }
.docs-hero { padding-bottom: var(--space-6); margin-bottom: var(--space-7); border-bottom: 1px solid var(--line); }
.docs-hero h1 { font-size: var(--fs-3xl); margin-top: var(--space-3); }
.docs-hero p { margin-top: var(--space-4); color: var(--ink-2); font-size: var(--fs-md); line-height: var(--lh-relaxed); max-width: 60ch; }

.doc-section { padding-top: var(--space-7); margin-top: var(--space-7); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.doc-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.doc-section > h2 {
  font-size: var(--fs-2xl);
  display: flex; align-items: center; gap: var(--space-3);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.doc-section > h2 .sec-no { font-family: var(--font-mono); font-size: var(--fs-base); color: var(--accent-text); font-weight: var(--fw-medium); }
.doc-section h3 { font-size: var(--fs-lg); margin-top: var(--space-7); scroll-margin-top: calc(var(--nav-h) + 24px); }
.doc-section h4 { font-size: var(--fs-base); margin-top: var(--space-5); color: var(--ink); }
.doc-section p { margin-top: var(--space-3); color: var(--ink-2); line-height: var(--lh-relaxed); }
.doc-section p + p { margin-top: var(--space-3); }
.doc-section .lead { color: var(--ink-2); font-size: var(--fs-md); }
.doc-section ul.doc-list { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.doc-section ul.doc-list li { position: relative; padding-left: var(--space-5); color: var(--ink-2); line-height: var(--lh-relaxed); }
.doc-section ul.doc-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.doc-section .code, .doc-section .table-wrap, .doc-section .callout, .doc-section .endpoint { margin-top: var(--space-5); }

/* anchor link on headings */
.doc-section h2 a.anchor, .doc-section h3 a.anchor {
  opacity: 0; margin-left: 6px; color: var(--ink-4); font-weight: 400;
  transition: opacity var(--dur) var(--ease);
}
.doc-section h2:hover a.anchor, .doc-section h3:hover a.anchor { opacity: 1; }
.doc-section h2 a.anchor:hover, .doc-section h3 a.anchor:hover { color: var(--accent-text); text-decoration: none; }

/* ---- Endpoint summary block --------------------------------------------- */
.endpoint {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.endpoint .ep-path { color: var(--ink); font-weight: var(--fw-medium); }
.endpoint .ep-alias { color: var(--ink-3); font-size: var(--fs-mono-xs); }

/* ---- "On this page" (right rail) on very wide screens -------------------- */
@media (min-width: 1280px) {
  .docs-shell { grid-template-columns: 240px minmax(0, 1fr) 200px; }
  .docs-toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; font-size: var(--fs-sm); }
  .docs-toc p { font-family: var(--font-mono); font-size: var(--fs-mono-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); margin-bottom: var(--space-3); }
  .docs-toc a { display: block; padding: 5px 0; color: var(--ink-3); }
  .docs-toc a:hover { color: var(--ink); text-decoration: none; }
}
.docs-toc { display: none; }
@media (min-width: 1280px) { .docs-toc { display: block; } }

/* ---- Mobile section nav -> top scroller --------------------------------- */
@media (max-width: 920px) {
  .docs-shell { grid-template-columns: 1fr; gap: var(--space-5); }
  .docs-nav {
    position: sticky; top: var(--nav-h); z-index: 40;
    max-height: none; overflow: visible;
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-3) var(--gutter);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .docs-nav-inner { display: flex; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .docs-nav-group { margin-bottom: 0; display: flex; gap: var(--space-2); }
  .docs-nav-group > p { display: none; }
  .docs-nav a { white-space: nowrap; border-left: none; border: 1px solid var(--line); }
  .docs-nav a[aria-current="true"] { border-color: var(--accent-border); }
}

/* badges row under endpoint headings */
.ep-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ---- Deeper-docs link cards (self-contained; no dependency on site.css) --- */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.doc-cards .card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-5);
}
.doc-cards .card h3 { margin: 0; }
.doc-cards .card p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.doc-cards .card:hover { text-decoration: none; }
.doc-cards .card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-text); }
@media (max-width: 640px) { .doc-cards { grid-template-columns: 1fr; } }