/* developers.allus.fyi — docs shell. Layers on top of static-base.css + a theme-*.css
   (default theme-allus.css → teal/cyan). Uses the shared design tokens (--brand-1,
   --bg, --text, --border, …) so it inherits brand + dark mode automatically.

   Layout: fixed top nav (from static-base) → 3-column docs grid:
     [ left sidebar nav ]  [ center content ]  [ right auto-TOC ]
   Responsive: < 1100px drops the TOC; at the width where static-base swaps the header
   links for the hamburger (<= 768px) the sidebar goes away entirely and its page list
   is reached from the header drawer instead — one menu on mobile, not two. The sidebar,
   the drawer and the footer columns are all filled from one generator (vite.config.js),
   so they cannot list different pages. */

:root {
  --docs-nav-h: 78px;            /* height of the fixed static-base nav */
  --docs-sidebar-w: 264px;
  --docs-toc-w: 220px;
  --docs-max: 1340px;
  --docs-code-bg: #0b1324;       /* matches Prism theme below */
  --docs-code-tx: #e2e8f0;
  --docs-inline-bg: rgba(13, 148, 136, 0.08);
  --docs-inline-tx: var(--text-heading);
}
[data-theme="dark"] {
  --docs-inline-bg: rgba(148, 163, 184, 0.12);
}

/* ── Grid shell ─────────────────────────────────────────────── */
.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w);
  gap: 2.5rem;
  max-width: var(--docs-max);
  margin: 0 auto;
  padding: calc(var(--docs-nav-h) + 1.5rem) 2rem 5rem;
  align-items: start;
}

/* ── Left sidebar nav ─────────────────────────────────────────
   The page list inside it is generated, and the SAME markup is generated into the
   header drawer (.mobile-menu-nav) further down — so the rules that describe that
   markup rather than its surroundings (section label, badge) are written once for
   both containers. The link rules stay separate: a sidebar row and a touch row in a
   full-screen drawer are different sizes on purpose. */
.docs-sidebar {
  position: sticky;
  top: calc(var(--docs-nav-h) + 1.5rem);
  align-self: start;
  max-height: calc(100vh - var(--docs-nav-h) - 2rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  font-size: 0.92rem;
}
.docs-sidebar .docs-nav-section {
  margin-bottom: 1.4rem;
}
.docs-sidebar h5,
.mobile-menu .docs-nav-section h5 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.docs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.docs-sidebar li { margin: 0; }
.docs-sidebar a {
  display: block;
  padding: 0.34rem 0.7rem;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 0.5rem;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.docs-sidebar a:hover {
  color: var(--text-heading);
  background: var(--accent-soft);
}
.docs-sidebar a.active {
  color: var(--brand-1);
  background: var(--accent-soft);
  border-left-color: var(--brand-1);
  font-weight: 600;
}
.docs-sidebar .docs-pill,
.mobile-menu .docs-pill {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-1);
  border-radius: 0.4rem;
  padding: 0.05rem 0.4rem;
  vertical-align: middle;
}
.docs-sidebar .docs-pill.adv,
.mobile-menu .docs-pill.adv {
  background: var(--text-faint);
}

/* ── The same page list, in the header drawer ─────────────────
   static-base.css styles .mobile-menu and its direct <a> rows; these rules add the
   section structure the generated list brings with it, and give that list its own
   scroll area so the theme row and the portal CTA below it stay reachable without
   scrolling past every page on the site. */
.mobile-menu { overflow-y: hidden; }
.mobile-menu .mobile-menu-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* The page list is the only part that may shrink: it is taller than any phone and has its
   own scrollbar. Without this the flex algorithm distributes the overflow across all three
   children and squeezes the theme row and the CTA as well. */
.mobile-menu .mobile-theme-row,
.mobile-menu .mobile-cta { flex-shrink: 0; }
.mobile-menu .docs-nav-section { margin-bottom: 1.2rem; }
.mobile-menu .docs-nav-section ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu .docs-nav-section li { margin: 0; }
.mobile-menu .docs-nav-section a {
  font-size: 1rem;
  padding: 0.6rem 0;
  color: var(--text-muted);
}
.mobile-menu .docs-nav-section a.active {
  color: var(--brand-1);
  font-weight: 600;
}

/* ── Center content ─────────────────────────────────────────── */
.docs-content {
  min-width: 0;            /* let code blocks scroll instead of stretching the grid */
  max-width: 820px;
}
.docs-content h1 {
  font-size: 2rem;
  line-height: 1.18;
  color: var(--text-heading);
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}
.docs-content > p.docs-lead {
  font-size: 1.12rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.docs-content h2 {
  font-size: 1.4rem;
  color: var(--text-heading);
  letter-spacing: -0.01em;
  margin: 2.6rem 0 0.8rem;
  padding-top: 0.4rem;
  scroll-margin-top: calc(var(--docs-nav-h) + 1rem);
}
.docs-content h3 {
  font-size: 1.1rem;
  color: var(--text-heading);
  margin: 1.8rem 0 0.6rem;
  scroll-margin-top: calc(var(--docs-nav-h) + 1rem);
}
.docs-content p, .docs-content li { color: var(--text); }
.docs-content a {
  color: var(--brand-1);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-border);
}
.docs-content a:hover { border-bottom-color: var(--brand-1); }
.docs-content ul, .docs-content ol { padding-left: 1.4rem; margin: 0.8rem 0; }
.docs-content li { margin: 0.3rem 0; }

.docs-content :not(pre) > code {
  background: var(--docs-inline-bg);
  color: var(--docs-inline-tx);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  font: 0.85em/1.5 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.docs-content pre {
  background: var(--docs-code-bg);
  color: var(--docs-code-tx);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  overflow: auto;
  margin: 1rem 0;
  font: 0.82rem/1.55 "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.docs-content pre code { background: none; color: inherit; padding: 0; }

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.92rem;
}
.docs-content th, .docs-content td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
.docs-content th { background: var(--section-alt); color: var(--text-heading); }

/* Brand callouts */
.docs-note, .docs-warn, .docs-ok {
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  margin: 1.2rem 0;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-1);
  background: var(--accent-soft);
  font-size: 0.95rem;
}
.docs-warn { border-left-color: #b45309; background: rgba(180, 83, 9, 0.07); }
.docs-ok   { border-left-color: var(--green); background: rgba(5, 150, 105, 0.07); }

/* Prominent "open the live spec" button */
.docs-spec-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-grad);
  color: #fff !important;
  border: none !important;
  border-radius: 0.7rem;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  margin: 0.6rem 0;
}
.docs-spec-btn:hover { filter: brightness(1.05); }

/* ── Right auto-TOC ─────────────────────────────────────────── */
.docs-toc {
  position: sticky;
  top: calc(var(--docs-nav-h) + 1.5rem);
  align-self: start;
  max-height: calc(100vh - var(--docs-nav-h) - 2rem);
  overflow-y: auto;
  font-size: 0.85rem;
}
.docs-toc h5 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc a {
  display: block;
  padding: 0.22rem 0.6rem;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid var(--border);
  transition: color 0.15s, border-color 0.15s;
}
.docs-toc a:hover { color: var(--text-heading); }
.docs-toc a.active { color: var(--brand-1); border-left-color: var(--brand-1); }
.docs-toc a.lvl-3 { padding-left: 1.3rem; font-size: 0.8rem; }
.docs-toc .docs-toc-empty { color: var(--text-faint); font-style: italic; }

/* ── Screenshot component ───────────────────────────────────── */
/* Each slot is a <figure class="shot" data-shot="<id>"> holding the captured image and a
   caption; SHOTLIST.md lists every id. Markup:
   <figure class="shot" data-shot="svc-requests-add">
     <img src="/static/img/shots/svc-requests-add.webp" width="…" height="…" loading="lazy" alt="…">
     <figcaption class="shot-cap">…</figcaption>
   </figure>
   The .shot-frame rules below style the placeholder box a slot uses until its image exists. */
.shot {
  margin: 1.4rem 0;
}
.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.shot .shot-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  border: 1px dashed var(--accent-border);
  border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, var(--accent-soft) 0 14px, transparent 14px 28px),
    var(--section-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  gap: 0.5rem;
  overflow: hidden;
}
.shot .shot-frame::before {
  /* faux browser chrome dots */
  content: "";
  position: absolute;
  top: 0.8rem; left: 0.9rem;
  width: 38px; height: 8px; border-radius: 99px;
  background: var(--accent-border);
  box-shadow: -14px 0 0 var(--accent-border), 14px 0 0 var(--accent-border);
}
.shot .shot-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-1);
  background: var(--bg-card);
  border: 1px solid var(--accent-border);
  border-radius: 99px;
  padding: 0.18rem 0.6rem;
}
.shot .shot-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading);
}
.shot .shot-action {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 38ch;
}
.shot .shot-cap {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-faint);
  text-align: center;
}
.shot .shot-cap code {
  font-size: 0.78rem;
  background: var(--docs-inline-bg);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

/* ── Code tabs (docs.js) ────────────────────────────────────── */
.codetabs {
  margin: 1.2rem 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--docs-code-bg);
}
.codetabs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem 0;
  background: rgba(148, 163, 184, 0.08);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.codetab-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #94a3b8;
  font: 600 0.78rem/1 "DM Sans", -apple-system, sans-serif;
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.codetab-btn:hover { color: #e2e8f0; }
.codetab-btn.active {
  color: #fff;
  background: var(--docs-code-bg);
}
.codetabs .codetab { display: none; }
.codetabs .codetab pre {
  margin: 0;
  border-radius: 0;
  background: transparent;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .docs-shell { grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr); }
  .docs-toc { display: none; }
}
/* 768px is static-base.css's own nav breakpoint — the width at which the header links
   are replaced by the hamburger. Tying the sidebar to the same number is what makes
   "one menu on mobile" true at every width: above it the sidebar IS the docs nav, below
   it the header drawer is, and there is no band where both or neither is reachable. */
@media (max-width: 768px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); }
  .docs-sidebar { display: none; }
}