/* Docs — clean three-column documentation layout on the Undra site theme.
   Reference points: Stripe / Linear / Tailwind / Vercel docs (calm typography,
   sticky nav, copy-able highlighted code, "on this page" rail). */

:root {
  --docs-sidebar-w: 244px;
  --docs-toc-w: 208px;
  --docs-content-w: 752px;
  --docs-col-gap: 56px;
  --docs-header-h: 58px;
  --docs-code-bg: #101113;
  --docs-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --surface-1: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-popover: #1a1b1d;
  --success: #32d49e;
}

/* ── Light theme ──────────────────────────────────────────────────
   Token overrides only. Code blocks and the animated demos keep their own
   dark surfaces (they read as embedded screenshots), like GitHub's light mode.
   Scoped to docs pages (this stylesheet only loads there). */
html[data-theme="light"] {
  --bg: #ffffff;
  --bg-dark: #fbfbfc;
  --bg-card: rgba(17, 20, 26, 0.03);
  --fg: #15171c;
  --muted: #6f747d;
  --text-primary: #15171c;
  --text-secondary: #424751;
  --text-muted: #6f747d;
  --border-color: rgba(17, 20, 26, 0.13);
  --border-hairline: rgba(17, 20, 26, 0.08);
  --gradient-surface-top: rgba(245, 246, 248, 0.9);
  --surface-1: rgba(17, 20, 26, 0.035);
  --surface-2: rgba(17, 20, 26, 0.07);
  --surface-popover: #ffffff;
  color-scheme: light;
}
/* Light-theme component fixes: inline code + kbd need a real surface on white
   (their dark-theme white tints vanish). Code blocks + demos stay dark as-is. */
html[data-theme="light"] .docs-article :not(pre) > code {
  background: rgba(17, 20, 26, 0.05);
  color: #2f4d8c;
  border-color: rgba(17, 20, 26, 0.1);
}
html[data-theme="light"] .docs-article kbd {
  background: #eceef1;
  color: #3f444d;
  border-color: rgba(17, 20, 26, 0.18);
  box-shadow: 0 1px 0 rgba(17, 20, 26, 0.12);
}
html[data-theme="light"] .docs-callout { background: rgba(17, 20, 26, 0.025); }
html[data-theme="light"] .docs-callout--tip { background: rgba(50, 212, 158, 0.09); }
html[data-theme="light"] .docs-callout--warn { background: rgba(251, 146, 60, 0.1); }
html[data-theme="light"] .docs-callout--danger { background: rgba(240, 85, 106, 0.09); }
html[data-theme="light"] .docs-callout--info { background: rgba(79, 156, 255, 0.09); }
/* Hub hero title: the dark-mode white gradient is invisible on the light hero.
   Flip it to a dark slate -> accent gradient (dark fallback for no text-clip). */
html[data-theme="light"] .docs-article .docs-hero-title {
  color: #15171c;
  background-image: linear-gradient(180deg, #15171c, #2f4d8c);
}

body.docs-body {
  background: var(--bg-dark, #08080a);
  color: var(--text-primary, #e6e6e9);
}

/* Dark theme: lift the docs backdrop off the marketing site's near-black to a
   soft dark gray (~rgb 30 30 30). Scoped to the page + the dark theme so the
   rest of the marketing site stays near-black and the light palette above is
   untouched. Code blocks keep their own --docs-code-bg (embedded-screenshot look). */
html:not([data-theme="light"]) body.docs-body {
  --bg: #0f0f0f;
  --bg-dark: #0f0f0f;
}

.docs-shell {
  /* Sidebar pinned to the left gutter; the reading column + "on this page" rail
     are centered in the space to the RIGHT of it. That's the Linear / x.ai /
     Mintlify model: nav anchored left, text sitting around the middle — not a
     centered island, and not jammed hard against the sidebar with a dead void
     on the right. The flexible spacer columns (2 and 6) do the centering; the
     reading column itself stays capped for line-length, never stretched. */
  margin: 0;
  display: grid;
  grid-template-columns:
    var(--docs-sidebar-w)               /* 1  sidebar — left gutter */
    minmax(56px, 1fr)                   /* 2  left spacer — centers the block */
    minmax(0, var(--docs-content-w))    /* 3  reading column */
    var(--docs-col-gap)                 /* 4  gap between text and the rail */
    var(--docs-toc-w)                   /* 5  on-this-page rail */
    minmax(56px, 1fr);                  /* 6  right spacer */
  column-gap: 0;
  padding: 0 32px 140px;
  align-items: start;
}
.docs-sidebar { grid-column: 1; }
.docs-main { grid-column: 3; }
.docs-toc { grid-column: 5; }

/* ── Left sidebar ─────────────────────────────────────────────── */
.docs-sidebar {
  position: sticky;
  top: calc(var(--docs-header-h) + 28px);
  align-self: start;
  max-height: calc(100vh - var(--docs-header-h) - 56px);
  overflow-y: auto;
  /* Horizontal breathing room so the nav rows / active pill don't run into the
     scrollbar on the right (or the panel edge on the left). `scrollbar-gutter`
     keeps the gutter on the inline-end so the padding sits between content and
     the scrollbar rather than being eaten by it. */
  scrollbar-gutter: stable;
  padding: 44px 12px 24px;
}
.docs-sidebar-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted, #6b6f78);
  padding: 0 12px 12px;
  font-weight: 600;
}
.docs-nav-section { margin-bottom: 22px; }
.docs-nav-section:last-child { margin-bottom: 0; }
.docs-nav-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary, #e6e6e9);
  padding: 0 12px 7px;
  font-weight: 600;
}
.docs-nav a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text-secondary, #9aa0ab);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.docs-nav a:hover {
  color: var(--text-primary, #e6e6e9);
  background: rgba(255, 255, 255, 0.035);
}
.docs-nav a.is-active {
  color: var(--accent, #4f9cff);
  background: rgba(79, 156, 255, 0.09);
}

/* ── Main content ─────────────────────────────────────────────── */
.docs-main { min-width: 0; padding-top: 76px; }
.docs-article { max-width: var(--docs-content-w); }

.docs-article .docs-eyebrow {
  color: var(--accent, #4f9cff);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.docs-article h1 {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
  font-weight: 700;
  color: var(--text-primary, #f3f3f5);
}
.docs-article .docs-lead {
  font-size: 18px;
  line-height: 1.62;
  color: var(--text-secondary, #a6abb5);
  margin: 0 0 44px;
}
.docs-article h2 {
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 60px 0 18px;
  padding-top: 26px;
  border-top: 1px solid var(--border-hairline, rgba(230, 230, 233, 0.07));
  font-weight: 650;
  color: var(--text-primary, #f3f3f5);
  scroll-margin-top: 92px;
}
.docs-article h3 {
  font-size: 16.5px;
  margin: 34px 0 12px;
  font-weight: 600;
  color: var(--text-primary, #ecedf0);
  scroll-margin-top: 92px;
}
.docs-article p {
  font-size: 15.5px;
  line-height: 1.76;
  color: var(--text-secondary, #a6abb5);
  margin: 0 0 18px;
}
.docs-article strong { color: var(--text-primary, #e6e6e9); font-weight: 600; }
.docs-article a { color: var(--accent, #4f9cff); text-decoration: none; }
.docs-article a:hover { text-decoration: underline; }
.docs-article ul { margin: 0 0 18px; padding-left: 22px; }
.docs-article li {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-secondary, #a6abb5);
  margin: 7px 0;
}
.docs-article li::marker { color: var(--text-muted, #6b6f78); }

/* inline code */
.docs-article :not(pre) > code {
  font-family: var(--docs-mono);
  font-size: 0.875em;
  background: rgba(255, 255, 255, 0.055);
  color: #cdd7ef;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border-hairline, rgba(230, 230, 233, 0.07));
  white-space: nowrap;
}

/* ── Quick-start steps ────────────────────────────────────────── */
.docs-steps { counter-reset: step; margin: 0 0 8px; padding: 0; list-style: none; }
.docs-steps > li {
  position: relative;
  padding: 1px 0 20px 46px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary, #a6abb5);
}
.docs-steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: -3px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(79, 156, 255, 0.12);
  color: var(--accent, #4f9cff);
  border: 1px solid rgba(79, 156, 255, 0.32);
  font-size: 13px;
  font-weight: 600;
}
.docs-steps > li:last-child { padding-bottom: 0; }

/* ── Code blocks ──────────────────────────────────────────────── */
.docs-code { position: relative; margin: 0 0 24px; }
.docs-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.1));
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-size: 12px;
  color: var(--text-muted, #6b6f78);
}
.docs-code-lang { font-family: var(--docs-mono); letter-spacing: 0.02em; }
.docs-code-copy {
  background: transparent;
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.12));
  color: var(--text-secondary, #a6abb5);
  border-radius: 7px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.docs-code-copy:hover { background: rgba(79, 156, 255, 0.14); color: var(--accent, #4f9cff); border-color: rgba(79, 156, 255, 0.5); }
.docs-code-copy.copied { color: #32d49e; border-color: rgba(50, 212, 158, 0.5); }
.docs-code pre {
  background: var(--docs-code-bg);
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.1));
  border-radius: 0 0 12px 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0;
}
.docs-code--plain pre { border-radius: 12px; }
.docs-code code {
  font-family: var(--docs-mono);
  font-size: 13.5px;
  line-height: 1.72;
  color: #d4dbe8;
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}

/* Syntax tokens (highlight.js classes), tuned to a calm "palenight" palette */
.hljs-comment, .hljs-quote { color: #5f6677; font-style: italic; }
.hljs-keyword, .hljs-selector-tag { color: #c792ea; }
.hljs-string, .hljs-template-string, .hljs-regexp { color: #c3e88d; }
.hljs-number, .hljs-literal { color: #f78c6c; }
.hljs-title, .hljs-title.function_, .hljs-section { color: #82aaff; }
.hljs-built_in, .hljs-class .hljs-title { color: #ffcb6b; }
.hljs-attr, .hljs-property, .hljs-variable, .hljs-params { color: #d4dbe8; }
.hljs-attribute, .hljs-name { color: #82aaff; }
.hljs-meta { color: #89ddff; }
.hljs-comment .hljs-doctag { color: #82aaff; }

/* ── Callouts ─────────────────────────────────────────────────── */
.docs-callout {
  display: flex;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.1));
  background: rgba(79, 156, 255, 0.05);
  border-left: 3px solid var(--accent, #4f9cff);
}
.docs-callout--warn { background: rgba(251, 146, 60, 0.06); border-left-color: #fb923c; }
.docs-callout-icon { flex: none; font-size: 15px; line-height: 1.55; }
.docs-callout p { margin: 0; color: var(--text-secondary, #a6abb5); font-size: 14.5px; line-height: 1.62; }
.docs-callout p + p { margin-top: 6px; }
.docs-callout strong { color: var(--text-primary, #e6e6e9); }

/* ── Reference table ──────────────────────────────────────────── */
.docs-table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.1));
  border-radius: 12px;
}
.docs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary, #e6e6e9);
  padding: 11px 16px;
  background: rgba(255, 255, 255, 0.022);
  border-bottom: 1px solid var(--border-color, rgba(230, 230, 233, 0.1));
}
.docs-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-hairline, rgba(230, 230, 233, 0.07));
  color: var(--text-secondary, #a6abb5);
  vertical-align: top;
  line-height: 1.55;
}
.docs-table td:first-child code {
  font-family: var(--docs-mono);
  font-size: 12.5px;
  color: #9ecbff;
  background: none;
  border: none;
  padding: 0;
  white-space: nowrap;
}
.docs-table tr:last-child td { border-bottom: none; }

/* ── Right "on this page" rail ────────────────────────────────── */
.docs-toc {
  position: sticky;
  top: calc(var(--docs-header-h) + 56px);
  align-self: start;
  max-height: calc(100vh - var(--docs-header-h) - 96px);
  overflow-y: auto;
  padding-top: 56px;
}
.docs-toc-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted, #6b6f78);
  margin-bottom: 12px;
  font-weight: 600;
}
.docs-toc a {
  display: block;
  padding: 5px 0 5px 13px;
  border-left: 2px solid var(--border-hairline, rgba(230, 230, 233, 0.08));
  color: var(--text-muted, #6b6f78);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.docs-toc a:hover { color: var(--text-secondary, #a6abb5); }
.docs-toc a.is-active { color: var(--accent, #4f9cff); border-left-color: var(--accent, #4f9cff); }

/* ── Area switcher (Docs / Developers), top of the sidebar ────── */
.docs-areas {
  display: flex;
  gap: 4px;
  margin: 14px 0 20px;
  padding: 3px;
  background: var(--surface-1, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-hairline, rgba(230, 230, 233, 0.08));
  border-radius: 10px;
}
.docs-area {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--text-muted, #6b6f78);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.docs-area:hover { color: var(--text-secondary, #9aa0ab); }
.docs-area.is-active {
  background: var(--surface-2, rgba(255, 255, 255, 0.07));
  color: var(--text-primary, #e6e6e9);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.docs-area-ico { width: 15px; height: 15px; flex: none; }

/* ── Theme toggle (top-right of the site header) ──────────────── */
/* Injected into .site-topbar-inner by docsPage.js; margin-left:auto pins it right. */
.site-topbar-inner .docs-theme-toggle { margin-left: auto; }

/* ── Mobile nav drawer trigger ─────────────────────────────────────
   Hamburger injected into .site-topbar-inner by docsPage.js. Hidden on desktop
   (the full sidebar is visible there); the ≤760 block below reveals it and turns
   .docs-sidebar into a right-side slide-in drawer. Toggles a ✕ when open. */
.docs-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--surface-1);
  color: var(--text-primary, #e6e6e9);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.docs-nav-toggle:hover { background: var(--surface-2); }
.docs-nav-toggle svg { width: 20px; height: 20px; display: block; }
.docs-nav-toggle .docs-nav-toggle-close { display: none; }
.docs-nav-toggle[aria-expanded="true"] .docs-nav-toggle-open { display: none; }
.docs-nav-toggle[aria-expanded="true"] .docs-nav-toggle-close { display: block; }

/* Scrim behind the drawer. Sits below the fixed top bar (inset top = header
   height) so the hamburger/✕ stays tappable to close. */
.docs-nav-scrim {
  position: fixed;
  inset: var(--docs-header-h) 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 47;
}
body.docs-nav-open .docs-nav-scrim { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .docs-nav-scrim { transition: none; }
}

/* The same "Dark | switch | Light" pill the app uses in its status bar.
   Driven by html[data-theme] rather than a class on the button. */
.docs-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 2px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.docs-theme-toggle:disabled { opacity: 0.6; cursor: default; }
.docs-theme-toggle-label {
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text-primary, #e6e6e9);
  opacity: 0.5;
  transition: color 180ms ease, opacity 180ms ease;
}
.docs-theme-toggle-label-dark { opacity: 1; }
html[data-theme="light"] .docs-theme-toggle-label-dark { opacity: 0.5; }
html[data-theme="light"] .docs-theme-toggle-label-light { opacity: 1; }
.docs-theme-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(220, 220, 220);
  transition: background-color 180ms ease;
}
.docs-theme-toggle-knob {
  position: relative;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  border-radius: 999px;
  background: #313943;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: transform 180ms ease, background-color 180ms ease;
}
.docs-theme-toggle-knob::after {
  content: "";
  position: absolute;
  top: 1px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgb(220, 220, 220);
  transition: opacity 160ms ease;
}
html[data-theme="light"] .docs-theme-toggle-switch { background: #1d2430; }
html[data-theme="light"] .docs-theme-toggle-knob { transform: translateX(16px); background: rgb(220, 220, 220); }
html[data-theme="light"] .docs-theme-toggle-knob::after { opacity: 0; }

/* ── Page actions: breadcrumb + "Copy page" (AI-native) ───────── */
.docs-pageactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.docs-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted, #6b6f78);
}
.docs-crumb-sec { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.docs-crumb-ico { width: 14px; height: 14px; opacity: 0.85; }
.docs-crumb-sep { opacity: 0.45; }
.docs-crumb-cur { color: var(--text-secondary, #9aa0ab); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Left meta cluster: breadcrumb + "Last updated", wrapping to a second line on
   narrow widths while the copy-page menu stays pinned right (space-between). */
.docs-pageactions-meta {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.docs-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted, #6b6f78);
  white-space: nowrap;
}
.docs-updated-ico { width: 14px; height: 14px; opacity: 0.8; flex: none; }
.docs-updated time { color: var(--text-secondary, #9aa0ab); }

.docs-copypage { position: relative; display: inline-flex; align-items: stretch; flex: none; }
.docs-copypage-btn,
.docs-copypage-caret {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-1, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.12));
  color: var(--text-secondary, #9aa0ab);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.docs-copypage-btn { padding: 6px 11px; border-radius: 8px 0 0 8px; border-right: none; }
.docs-copypage-caret { padding: 6px 7px; border-radius: 0 8px 8px 0; }
.docs-copypage-btn:hover,
.docs-copypage-caret:hover,
.docs-copypage.is-open .docs-copypage-caret { background: var(--surface-2, rgba(255, 255, 255, 0.08)); color: var(--text-primary, #e6e6e9); }
.docs-copypage-ico, .docs-copypage-chev { width: 14px; height: 14px; }
.docs-copypage.is-open .docs-copypage-chev { transform: rotate(180deg); }
.docs-copypage-chev { transition: transform 0.18s ease; }
.docs-copypage-btn.is-copied { color: var(--success, #32d49e); }

.docs-copypage-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 212px;
  padding: 5px;
  background: var(--surface-popover, #1a1b1d);
  border: 1px solid var(--border-color, rgba(230, 230, 233, 0.12));
  border-radius: 11px;
  box-shadow: 0 20px 48px -24px #000;
  z-index: 40;
}
.docs-copypage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 7px;
  font-size: 12.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* scoped above .docs-article a (0,1,1) so the link items match the button items */
.docs-copypage .docs-copypage-item { color: var(--text-secondary, #9aa0ab); }
.docs-copypage .docs-copypage-item:hover { background: var(--surface-2, rgba(255, 255, 255, 0.06)); color: var(--text-primary, #e6e6e9); }
.docs-copypage-item svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }

/* ── Hub / landing: no "on this page" rail ────────────────────────
   The landing page has no toc, so don't reserve its column (that would shove
   the hero left of centre and leave a dead gap on its right). Drop the rail,
   let the hero + cards run wider, and centre them in the post-sidebar space. */
@media (min-width: 1081px) {
  .docs-home .docs-shell {
    grid-template-columns:
      var(--docs-sidebar-w)
      minmax(56px, 1fr)
      minmax(0, 1080px)
      minmax(56px, 1fr);
  }
  .docs-home .docs-main { grid-column: 3; }
  .docs-home .docs-toc { display: none; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* No room for the rail: drop it, keep the sidebar pinned left, and still
     center the reading column in what's left rather than hard-anchoring it. */
  .docs-shell {
    grid-template-columns:
      var(--docs-sidebar-w)
      minmax(40px, 1fr)
      minmax(0, var(--docs-content-w))
      minmax(40px, 1fr);
    column-gap: 0;
  }
  .docs-main { grid-column: 3; }
  .docs-toc { display: none; }
}
/* No path to the desktop-only interactive demo from mobile. The demo embeds the
   full app UI in an iframe and isn't usable on a phone, so on small screens we
   close every door to it: the hero CTA + roadmap card are hidden in layout.css,
   the /demo/ page itself redirects mobile visitors home (demo/index.html), and
   here we handle the two docs entry points. */
@media (max-width: 900px) {
  /* The hub's "Try the live demo" button: hide it outright. */
  .docs-hero-actions a[href="/demo/"] { display: none; }
  /* The inline "interactive demo" links sit mid-sentence, so keep the words but
     kill the link (de-style it to plain prose and make it untappable). */
  .docs-article a[href="/demo/"] {
    pointer-events: none;
    color: inherit;
    text-decoration: none;
    cursor: text;
  }
}

@media (max-width: 760px) {
  /* Horizontal-overflow guard. Docs have no .page-root (which carries the site's
     overflow-x:hidden), so two things could push the page wider than the phone,
     scrolling it sideways and shoving the fixed top bar's hamburger off-screen:
     (1) a wide table/code block on the code-heavy Developers pages, and (2) this
     mobile nav drawer, which is parked off the right edge (translateX(100%)).
     Clip the page; code + tables still scroll inside their own overflow wrappers. */
  body.docs-body { overflow-x: hidden; }

  .docs-shell { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding: 0 20px 80px; }
  .docs-main { grid-column: 1; padding-top: 64px; min-width: 0; }
  .docs-article { max-width: 100%; }
  .docs-article :is(img, video, iframe) { max-width: 100%; height: auto; }
  .docs-article :is(h1, h2, h3, p, li) { overflow-wrap: break-word; }
  .docs-article h1 { font-size: 31px; }
  .docs-lead { font-size: 16.5px; }

  /* ── Mobile docs nav ────────────────────────────────────────────
     The left sidebar becomes a right-side slide-in drawer opened by the
     hamburger in the top bar. Same .docs-sidebar nav markup as desktop — one
     source of truth, no duplicated tree. */

  /* Keep the top bar to a single row (so --docs-header-h stays valid and there's
     room for the hamburger): drop the marketing links here (still in the footer),
     keep brand + theme toggle + hamburger. */
  body.docs-body .site-topbar-inner { flex-wrap: nowrap; gap: 0.5rem; }
  body.docs-body .site-topbar-nav { display: none; }

  .docs-nav-toggle { display: inline-flex; }

  .docs-sidebar {
    display: block;
    position: fixed;
    top: var(--docs-header-h);
    right: 0;
    left: auto;
    width: min(330px, 86vw);
    /* Explicit viewport height + its own scroll. Relying on top+bottom to stretch
       left the drawer shrink-wrapped to its content, so a tall section list
       (Workspace = 13 items) ran off the bottom of the screen with no way to
       scroll down to it. dvh tracks the mobile browser's collapsing toolbar. */
    height: calc(100vh - var(--docs-header-h));
    height: calc(100dvh - var(--docs-header-h));
    max-height: none;
    margin: 0;
    padding: 22px 14px calc(32px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-dark, #0f0f0f);
    border-left: 1px solid var(--border-color);
    box-shadow: -18px 0 46px rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 48;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.docs-nav-open .docs-sidebar { transform: translateX(0); }
  body.docs-nav-open { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .docs-sidebar { transition: none; }
  }
}

/* ── Scrollbars ───────────────────────────────────────────────────
   Without this, Windows Chromium falls back to the chunky classic scrollbar
   (visible arrow buttons + a heavy light track) on every docs scroll surface:
   the page, the sidebar, the "on this page" rail, ⌘K results, code blocks.
   Replace it with a thin, theme-aware pill that floats in a transparent track
   (the 2px transparent border + padding-box clip insets the thumb).
   Three scopes are needed: the root element (`html:has(.docs-body)`) owns the
   VIEWPORT scrollbar in Blink — styling body alone leaves it the OS default —
   plus the body's own scroller and every descendant scroller (`.docs-body ::`). */
html:has(.docs-body)::-webkit-scrollbar,
.docs-body::-webkit-scrollbar,
.docs-body ::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(.docs-body)::-webkit-scrollbar-track,
.docs-body::-webkit-scrollbar-track,
.docs-body ::-webkit-scrollbar-track { background: transparent; }
html:has(.docs-body)::-webkit-scrollbar-thumb,
.docs-body::-webkit-scrollbar-thumb,
.docs-body ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html:has(.docs-body)::-webkit-scrollbar-thumb:hover,
.docs-body::-webkit-scrollbar-thumb:hover,
.docs-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
}
html:has(.docs-body)::-webkit-scrollbar-button,
.docs-body::-webkit-scrollbar-button,
.docs-body ::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
html:has(.docs-body)::-webkit-scrollbar-corner,
.docs-body::-webkit-scrollbar-corner,
.docs-body ::-webkit-scrollbar-corner { background: transparent; }
/* Firefox / standard. `scrollbar-width` doesn't inherit, so apply to all. */
html:has(.docs-body),
.docs-body,
.docs-body * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }

/* Light theme: dark thumb on the light surface. */
html[data-theme="light"]:has(.docs-body)::-webkit-scrollbar-thumb,
html[data-theme="light"] .docs-body::-webkit-scrollbar-thumb,
html[data-theme="light"] .docs-body ::-webkit-scrollbar-thumb {
  background: rgba(17, 20, 26, 0.22);
  background-clip: padding-box;
}
html[data-theme="light"]:has(.docs-body)::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .docs-body::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .docs-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 20, 26, 0.36);
  background-clip: padding-box;
}
html[data-theme="light"]:has(.docs-body),
html[data-theme="light"] .docs-body,
html[data-theme="light"] .docs-body * { scrollbar-color: rgba(17, 20, 26, 0.28) transparent; }