/* ═══════════════════════════════════════════════════════════════════
   AstroWatch — Documentation shell
   Extends astrowatch-site.css (load that first). Dark obsidian · gold,
   built for a persistent left nav + prose/screenshot content that will
   grow well past this first Getting Started article.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --docs-sidebar-w: 272px;
  --docs-toc-w: 224px;
  --docs-nav-h: 74px;
}

/* ─── Docs reading theme — light (default) and dark, switchable ───
   The docs "pages" (sidebar/main/toc — not the top nav, footer, or the
   screenshot lightbox) default to a white background instead of the
   marketing site's dark obsidian, so long-form reading doesn't feel
   overwhelming — but a toggle (top of the sidebar, and in the mobile
   bar) lets anyone switch back to the original dark obsidian/gold look,
   persisted in localStorage. Re-declaring the shared --ink/--bg/--line
   tokens here (scoped to .docs-shell and .docs-mobile-bar) flips every
   rule below that already references them, with no per-rule rewrite
   needed. The dark variant below restores the exact original values.
   --gold/--gold-2 (used directly, unscoped) are deliberately left alone
   in both themes — the numbered pin badges and the lightbox's floating
   controls sit on top of dark screenshots, not the page, and should
   always look the same regardless of reading theme. */
.docs-shell, .docs-mobile-bar {
  /* light — default */
  --bg-1: #FFFFFF;
  --bg-2: #F7F4EA;
  --ink: #241C10;
  --ink-dim: #55503F;
  --ink-mute: #857F6C;
  --ink-faint: #B6AF9C;
  --line: rgba(20,15,5,0.13);
  --hairline: rgba(20,15,5,0.09);
  --docs-accent: #8F6318;
  --docs-accent-2: #7D5614;
  --docs-accent-soft: rgba(143,99,24,0.10);
  --docs-accent-border: rgba(143,99,24,0.24);
  --docs-teal: #1C8067;
  --docs-red: #B23B37;
  --docs-teal-border: rgba(28,128,103,0.28);
  --docs-teal-bg: rgba(28,128,103,0.08);
  --docs-tip-bg: rgba(28,128,103,0.06);
  --docs-warn-bg: rgba(178,59,55,0.06);
  --docs-input-bg: #FBF9F3;
  --docs-input-bg-focus: #FFFFFF;
  --docs-dropdown-shadow: rgba(20,15,5,0.18);
  --docs-scrollbar-thumb: rgba(20,15,5,0.16);
  --kbd-bg: #F2EEE2;
  --docs-link-hover-bg: rgba(20,15,5,0.035);
  --docs-shot-pending-bg: #FBF9F3;
  --docs-pager-hover-bg: rgba(20,15,5,0.025);
  --docs-feedback-bg: #FBF9F3;
  --docs-feedback-btn-bg: #FFFFFF;
  --docs-card-bg: #FFFFFF;
  --docs-card-shadow: 0 2px 10px rgba(20,15,5,0.05);
  --docs-card-shadow-hover: 0 16px 34px -14px rgba(20,15,5,0.18);
  --docs-mobilebar-bg: rgba(255,255,255,0.92);
  --docs-drawer-shadow: rgba(20,15,5,0.14);
}

/* dark — opt-in via the theme toggle; restores the original docs palette */
html[data-docs-theme="dark"] .docs-shell,
html[data-docs-theme="dark"] .docs-mobile-bar {
  --bg-1: #090C18;
  --bg-2: #0E1226;
  --ink: #F3EFE3;
  --ink-dim: #C3C7DC;
  --ink-mute: #8A93B8;
  --ink-faint: #5C658C;
  --line: rgba(233,200,119,0.14);
  --hairline: rgba(255,255,255,0.07);
  --docs-accent: #E9C877;
  --docs-accent-2: #D4A557;
  --docs-accent-soft: rgba(233,200,119,0.14);
  --docs-accent-border: rgba(233,200,119,0.28);
  --docs-teal: #7AE6C8;
  --docs-red: #F0736F;
  --docs-teal-border: rgba(122,230,200,0.3);
  --docs-teal-bg: rgba(122,230,200,0.06);
  --docs-tip-bg: rgba(122,230,200,0.07);
  --docs-warn-bg: rgba(240,115,111,0.07);
  --docs-input-bg: rgba(255,255,255,0.035);
  --docs-input-bg-focus: rgba(255,255,255,0.05);
  --docs-dropdown-shadow: rgba(0,0,0,0.75);
  --docs-scrollbar-thumb: rgba(255,255,255,0.12);
  --kbd-bg: rgba(255,255,255,0.06);
  --docs-link-hover-bg: rgba(255,255,255,0.03);
  --docs-shot-pending-bg: rgba(255,255,255,0.015);
  --docs-pager-hover-bg: rgba(255,255,255,0.02);
  --docs-feedback-bg: rgba(255,255,255,0.02);
  --docs-feedback-btn-bg: rgba(255,255,255,0.02);
  --docs-card-bg: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  --docs-card-shadow: none;
  --docs-card-shadow-hover: none;
  --docs-mobilebar-bg: rgba(8,11,22,0.92);
  --docs-drawer-shadow: rgba(0,0,0,0.5);
}

/* ─── Shell layout ─── */
.docs-shell {
  position: relative; z-index: 0;
  max-width: 1360px; margin: 0 auto; padding: 0 32px;
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w);
  gap: 8px 44px;
  align-items: start;
}
.docs-shell.no-toc { grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr); }
.docs-shell::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--bg-1);
}

/* ─── Sidebar ─── */
.docs-sidebar {
  position: sticky; top: calc(var(--docs-nav-h) + 22px);
  max-height: calc(100vh - var(--docs-nav-h) - 40px);
  overflow-y: auto;
  padding: 40px 10px 40px 0;
  scrollbar-width: thin;
}
.docs-sidebar::-webkit-scrollbar { width: 6px; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--docs-scrollbar-thumb); border-radius: 8px; }

/* ─── Light/dark theme toggle ─── */
.docs-theme-toggle {
  width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--hairline);
  background: none; cursor: pointer; color: var(--ink-dim); font-family: var(--sans); font-size: 13px;
  transition: border-color .15s, color .15s, background .15s;
}
.docs-theme-toggle:hover { color: var(--ink); border-color: var(--line); background: var(--docs-link-hover-bg); }
.docs-theme-toggle svg { width: 15px; height: 15px; flex: none; }
.docs-theme-toggle .ic-moon { display: none; }
html[data-docs-theme="dark"] .docs-theme-toggle .ic-sun { display: none; }
html[data-docs-theme="dark"] .docs-theme-toggle .ic-moon { display: block; }
.docs-theme-toggle .lbl-to-light { display: none; }
html[data-docs-theme="dark"] .docs-theme-toggle .lbl-to-dark { display: none; }
html[data-docs-theme="dark"] .docs-theme-toggle .lbl-to-light { display: inline; }

.docs-theme-toggle-mobile {
  flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: none; border: 1px solid var(--hairline); border-radius: 10px; color: var(--ink); cursor: pointer;
}
.docs-theme-toggle-mobile svg { width: 15px; height: 15px; }
.docs-theme-toggle-mobile .ic-moon { display: none; }
html[data-docs-theme="dark"] .docs-theme-toggle-mobile .ic-sun { display: none; }
html[data-docs-theme="dark"] .docs-theme-toggle-mobile .ic-moon { display: block; }

.docs-search { position: relative; margin-bottom: 22px; }
.docs-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-mute); pointer-events: none; }
.docs-search input {
  width: 100%; padding: 10px 14px 10px 38px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--docs-input-bg);
  color: var(--ink); font-family: var(--sans); font-size: 13.5px;
}
.docs-search input::placeholder { color: var(--ink-mute); }
.docs-search input:focus { outline: none; border-color: var(--docs-accent-2); background: var(--docs-input-bg-focus); }
.docs-search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px -18px var(--docs-dropdown-shadow);
  max-height: 320px; overflow-y: auto; display: none;
}
.docs-search-results.show { display: block; }
.docs-search-results a { display: block; padding: 11px 14px; text-decoration: none; border-bottom: 1px solid var(--hairline); }
.docs-search-results a:last-child { border-bottom: 0; }
.docs-search-results a:hover { background: var(--docs-accent-soft); }
.docs-search-results .t { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.docs-search-results .s { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; line-height: 1.4; }
.docs-search-empty { padding: 16px 14px; font-size: 12.5px; color: var(--ink-mute); }

.docs-group { margin-bottom: 2px; }
.docs-group-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: none; border: 0; cursor: pointer; padding: 11px 10px 11px 4px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-mute); transition: color .15s;
}
.docs-group-btn:hover { color: var(--ink-dim); }
.docs-group-btn svg { width: 11px; height: 11px; flex: none; transition: transform .2s ease; color: var(--ink-faint); }
.docs-group.collapsed .docs-group-btn svg { transform: rotate(-90deg); }
.docs-group-list { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 1px; overflow: hidden; transition: max-height .25s ease; }

.docs-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px 8px 14px; border-left: 2px solid transparent; border-radius: 0 9px 9px 0;
  color: var(--ink-dim); text-decoration: none; font-size: 13.5px; line-height: 1.3;
  transition: color .15s, background .15s, border-color .15s;
}
.docs-link:hover { color: var(--ink); background: var(--docs-link-hover-bg); }
.docs-link.active { color: var(--docs-accent); border-left-color: var(--docs-accent); background: var(--docs-accent-soft); font-weight: 600; }
.docs-link.disabled { color: var(--ink-faint); cursor: default; }
.docs-link.disabled:hover { background: none; color: var(--ink-faint); }
.docs-link .soon-pill {
  flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); border: 1px solid var(--hairline); border-radius: 20px; padding: 2px 7px;
}

.docs-sidebar-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.docs-sidebar-foot a { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-mute); text-decoration: none; padding: 6px 10px 6px 4px; }
.docs-sidebar-foot a:hover { color: var(--docs-accent); }
.docs-sidebar-foot svg { width: 14px; height: 14px; flex: none; }

/* ─── Mobile sidebar drawer ─── */
.docs-mobile-bar { display: none; }
.docs-scrim { position: fixed; inset: var(--docs-nav-h) 0 0 0; background: rgba(0,0,0,0.55); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.docs-scrim.show { opacity: 1; pointer-events: auto; }

/* ─── Main column ─── */
.docs-main { min-width: 0; padding: 44px 0 110px; }

.docs-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 20px; }
.docs-crumb a { color: var(--ink-mute); text-decoration: none; } .docs-crumb a:hover { color: var(--docs-accent); }
.docs-crumb .sep { color: var(--ink-faint); }

.docs-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--docs-accent); display: inline-flex; align-items: center; gap: 9px; }
.docs-eyebrow::before { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--docs-accent-2)); }

.docs-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 4vw, 48px); line-height: 1.06; color: var(--ink); margin: 16px 0 0; }
.docs-lede { font-size: 17.5px; line-height: 1.62; color: var(--ink-dim); margin: 16px 0 0; max-width: 64ch; }

.docs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); }
.docs-meta .item { display: inline-flex; align-items: center; gap: 7px; }
.docs-meta svg { width: 13px; height: 13px; color: var(--ink-faint); }
.docs-meta .edition { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--hairline); }
.docs-meta .edition.free { color: var(--docs-teal); border-color: var(--docs-teal-border); background: var(--docs-teal-bg); }
.docs-meta .edition.pro { color: var(--gold-2); border-color: rgba(212,165,87,0.35); background: rgba(212,165,87,0.09); }
.docs-meta .pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ─── Prose ───
   .docs-prose itself carries no max-width: dense desktop screenshots (.doc-shot) need the full
   width of the main column to keep small toolbar buttons legible and callout pins accurate. Text
   elements get their own 74ch measure instead, so paragraphs stay readable while screenshots run
   wider. */
.docs-prose { margin-top: 8px; }
.docs-prose > p:first-child { margin-top: 30px; }
.docs-prose h2 {
  font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--ink);
  margin: 54px 0 14px; scroll-margin-top: 96px; display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline); max-width: 74ch;
}
.docs-prose h3 {
  font-family: var(--sans); font-size: 17px; font-weight: 650; color: var(--ink);
  margin: 30px 0 8px; scroll-margin-top: 96px; display: flex; align-items: center; gap: 10px;
  max-width: 74ch;
}
.docs-prose h2 .anchor, .docs-prose h3 .anchor { opacity: 0; font-size: 14px; font-weight: 400; color: var(--ink-faint); text-decoration: none; transition: opacity .15s; }
.docs-prose h2:hover .anchor, .docs-prose h3:hover .anchor { opacity: 1; }
.docs-prose p, .docs-prose li { font-size: 15.5px; line-height: 1.76; color: var(--ink-dim); }
.docs-prose > p { max-width: 74ch; }
.docs-prose ol, .docs-prose ul { padding-left: 22px; margin: 14px 0; display: grid; gap: 9px; max-width: 74ch; }
.docs-prose strong { color: var(--ink); font-weight: 600; }
.docs-prose table { width: 100%; max-width: 74ch; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.docs-prose th, .docs-prose td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-dim); vertical-align: top; }
.docs-prose th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.docs-prose tr:last-child td { border-bottom: 0; }
.docs-prose a:not(.btn) { color: var(--docs-accent); } .docs-prose a:not(.btn):hover { color: var(--docs-accent-2); }
.docs-prose code { font-family: var(--mono); font-size: 13px; color: var(--docs-accent); background: var(--docs-accent-soft); padding: 1px 6px; border-radius: 5px; }

.kbd {
  display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: var(--kbd-bg); border: 1px solid var(--hairline); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 7px; margin: 0 1px;
}

/* ─── Callouts ─── */
.docs-callout {
  display: flex; gap: 12px; border-radius: 12px; padding: 15px 18px; margin: 22px 0;
  font-size: 14.5px; line-height: 1.62; border: 1px solid var(--line); border-left: 3px solid var(--docs-accent);
  background: var(--docs-accent-soft); color: var(--ink-dim);
}
.docs-callout strong { color: var(--ink); }
.docs-callout .ic { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--docs-accent); }
.docs-callout.tip { border-left-color: var(--docs-teal); background: var(--docs-tip-bg); }
.docs-callout.tip .ic { color: var(--docs-teal); }
.docs-callout.warn { border-left-color: var(--docs-red); background: var(--docs-warn-bg); }
.docs-callout.warn .ic { color: var(--docs-red); }

/* ─── Screenshot + numbered callouts ─── */
.doc-shot { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 80px -34px rgba(0,0,0,0.75); margin: 28px 0 0; background: var(--bg-2); cursor: zoom-in; }
.doc-shot img { display: block; width: 100%; height: auto; }
.doc-shot .pin {
  position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #F2D488, var(--gold-2)); color: #1A1206;
  font-family: var(--sans); font-weight: 700; font-size: 12.5px; display: grid; place-items: center;
  box-shadow: 0 0 0 4px rgba(233,200,119,0.22), 0 8px 18px rgba(0,0,0,0.5);
}
.doc-shot .zoom-hint {
  position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 20px; background: rgba(10,8,4,0.72); backdrop-filter: blur(4px);
  color: var(--ink-dim); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.doc-shot .zoom-hint svg { width: 13px; height: 13px; color: var(--gold); }
.doc-shot:hover .zoom-hint { opacity: 1; transform: translateY(0); }
.doc-shot-cap { font-family: var(--mono); font-size: 11.5px; color: var(--ink-mute); text-align: center; margin: 10px 0 0; }
.doc-shot-legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.doc-shot-legend li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-dim); line-height: 1.5; }
.doc-shot-legend .n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #F2D488, var(--gold-2));
  color: #1A1206; font-weight: 700; font-size: 11.5px; display: grid; place-items: center; margin-top: 1px;
}
.doc-shot-legend b { color: var(--ink); }

/* ─── Screenshot lightbox (click a .doc-shot to inspect it at full resolution) ─── */
.docs-lightbox {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: 48px; background: rgba(6,5,3,0.86); backdrop-filter: blur(6px);
}
.docs-lightbox.show { display: flex; }
.docs-lightbox-inner {
  position: relative; max-width: min(96vw, 1500px); max-height: 92vh; cursor: default;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.85);
  animation: docsLightboxIn .18s ease;
}
@keyframes docsLightboxIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
.docs-lightbox-inner img { display: block; width: auto; height: auto; max-width: min(96vw, 1500px); max-height: 92vh; }
.docs-lightbox-inner .pin {
  position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, #F2D488, var(--gold-2)); color: #1A1206;
  font-family: var(--sans); font-weight: 700; font-size: 14px; display: grid; place-items: center;
  box-shadow: 0 0 0 5px rgba(233,200,119,0.24), 0 8px 18px rgba(0,0,0,0.55);
}
.docs-lightbox-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10,8,4,0.72); border: 1px solid var(--hairline); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); z-index: 2;
}
.docs-lightbox-close:hover { background: rgba(10,8,4,0.92); color: var(--gold); }
.docs-lightbox-close svg { width: 16px; height: 16px; }
.docs-lightbox-hint {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 20px;
  background: rgba(10,8,4,0.72); backdrop-filter: blur(4px); color: var(--ink-dim);
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; z-index: 2;
}

/* ─── Pending screenshot placeholder (awaiting a real capture) ─── */
.shot-pending { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 42px 26px; margin: 28px 0 0; text-align: center; background: var(--docs-shot-pending-bg); }
.shot-pending .ic { width: 32px; height: 32px; margin: 0 auto 14px; color: var(--docs-accent); opacity: 0.85; }
.shot-pending .lbl { font-size: 13.5px; color: var(--ink-dim); max-width: 46ch; margin: 0 auto; line-height: 1.5; }
.shot-pending .file { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--docs-accent); background: var(--docs-accent-soft); padding: 4px 11px; border-radius: 20px; }

/* ─── Numbered steps ─── */
.docs-steps { list-style: none; counter-reset: dstep; padding: 0; margin: 22px 0; display: grid; gap: 22px; }
.docs-steps > li { position: relative; padding-left: 46px; counter-increment: dstep; }
.docs-steps > li::before {
  content: counter(dstep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 9px;
  background: var(--docs-accent-soft); border: 1px solid var(--docs-accent-border); color: var(--docs-accent);
  font-family: var(--serif); font-weight: 600; font-size: 14.5px; display: grid; place-items: center;
}
.docs-steps h4 { margin: 0 0 5px; font-family: var(--sans); font-size: 15.5px; font-weight: 650; color: var(--ink); }
.docs-steps p { margin: 0; }

/* ─── Pager ─── */
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--hairline); }
.docs-pager a, .docs-pager .disabled { display: block; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--hairline); text-decoration: none; transition: border-color .2s, background .2s; }
.docs-pager a:hover { border-color: var(--line); background: var(--docs-pager-hover-bg); }
.docs-pager .disabled { opacity: 0.42; cursor: default; }
.docs-pager .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.docs-pager .ttl { font-family: var(--serif); font-size: 16.5px; color: var(--ink); margin-top: 5px; }
.docs-pager .next { text-align: right; }

/* ─── Feedback widget ─── */
.docs-feedback { margin-top: 52px; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--docs-feedback-bg); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.docs-feedback .q { font-size: 14.5px; color: var(--ink-dim); }
.docs-feedback .btns { display: flex; gap: 10px; }
.docs-feedback button { display: flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--hairline); background: var(--docs-feedback-btn-bg); color: var(--ink-dim); font-family: var(--sans); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.docs-feedback button:hover { border-color: var(--line); color: var(--ink); }
.docs-feedback button.picked { border-color: var(--docs-accent-2); color: var(--docs-accent); background: var(--docs-accent-soft); }
.docs-feedback button svg { width: 14px; height: 14px; }
.docs-feedback .thanks { font-size: 13.5px; color: var(--docs-teal); display: none; }
.docs-feedback.answered .q, .docs-feedback.answered .btns { display: none; }
.docs-feedback.answered .thanks { display: block; }

/* ─── On-this-page TOC ─── */
.docs-toc { position: sticky; top: calc(var(--docs-nav-h) + 22px); max-height: calc(100vh - var(--docs-nav-h) - 40px); overflow-y: auto; padding: 44px 0 40px; }
.docs-toc .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.docs-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 1px solid var(--hairline); }
.docs-toc li a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1.5px solid transparent; font-size: 13px; color: var(--ink-mute); text-decoration: none; transition: color .15s, border-color .15s; }
.docs-toc li a:hover { color: var(--ink-dim); }
.docs-toc li a.active { color: var(--docs-accent); border-left-color: var(--docs-accent); }
.docs-toc li.lvl3 a { padding-left: 28px; font-size: 12.5px; }

/* ─── Docs home ─── */
.docs-hero { padding: 8px 0 6px; }
.docs-hero h1 { margin-top: 14px; }
.docs-hero p.docs-lede { margin-top: 16px; }
.docs-search-home { max-width: 520px; margin-top: 28px; position: relative; }
.docs-search-home input { padding: 15px 18px 15px 44px; font-size: 14.5px; border-radius: 12px; }
.docs-search-home svg { left: 16px; width: 17px; height: 17px; }

.docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.docs-card { position: relative; padding: 26px; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--docs-card-bg); box-shadow: var(--docs-card-shadow); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; display: block; }
.docs-card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--docs-card-shadow-hover); }
.docs-card.soon { cursor: default; }
.docs-card.soon:hover { transform: none; border-color: var(--hairline); }
.docs-card .dic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px; background: var(--docs-accent-soft); border: 1px solid var(--docs-accent-border); color: var(--docs-accent); }
.docs-card .dic svg { width: 19px; height: 19px; }
.docs-card h4 { font-family: var(--sans); font-size: 16px; font-weight: 650; color: var(--ink); margin: 0 0 6px; }
.docs-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); margin: 0; }
.docs-card .pill { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--hairline); color: var(--ink-faint); }
.docs-card .pill.avail { color: var(--docs-teal); border-color: var(--docs-teal-border); background: var(--docs-teal-bg); }

/* ─── Responsive ─── */
@media (max-width: 1180px) {
  .docs-shell { grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 900px) {
  .docs-mobile-bar {
    display: flex; align-items: center; gap: 10px; padding: 14px 32px;
    position: sticky; top: var(--docs-nav-h); z-index: 30; margin: 0 -32px;
    background: var(--docs-mobilebar-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline);
  }
  .docs-mobile-bar button {
    display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--hairline);
    border-radius: 10px; padding: 8px 14px; color: var(--ink); font-family: var(--sans); font-size: 13px; cursor: pointer;
  }
  .docs-mobile-bar svg { width: 15px; height: 15px; }
  .docs-shell { grid-template-columns: 1fr; padding: 0 32px; }
  .docs-sidebar {
    position: fixed; left: 0; top: var(--docs-nav-h); bottom: 0; width: 84vw; max-width: 320px;
    background: var(--bg-1); border-right: 1px solid var(--line); padding: 24px 20px 40px; z-index: 90;
    transform: translateX(-100%); transition: transform .25s ease; box-shadow: 26px 0 60px var(--docs-drawer-shadow);
  }
  .docs-sidebar.open { transform: translateX(0); }
  .docs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .docs-shell { padding: 0 20px; }
  .docs-mobile-bar { padding: 14px 20px; margin: 0 -20px; }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-pager { grid-template-columns: 1fr; }
  .docs-pager .next { text-align: left; }
  .docs-feedback { flex-direction: column; align-items: flex-start; }
}