/* docs.daevix.com — docs-level styles for the new design. Tokens come from
   /ds/css/tokens.css (dvx-dark / dvx-light classes on <html>); every value here
   resolves to a token or is declared as a local custom property. Theme is the
   root class; light is the docs default.

   The article layout (sidebar, prose, TOC, prevnext, planenote) is styled
   against the handoff's docs-article.html. The search palette and terminal
   speak the design-system token
   vocabulary; there are no legacy aliases. */

*, *::before, *::after { box-sizing: border-box; }
:root {
  --docs-rail-w: 272px;
  --docs-toc-w: 200px;
}
html { -webkit-text-size-adjust: 100%; }

html.dvx-root body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.05px;
}
body.search-lock { overflow: hidden; }

/* Links: prose and body links are ink with an underline (the owner overrode
   the mockup's green global rule for prose). This global rule sits at
   specificity 0-1-2, so every chrome region below prefixes its own link rules
   with `html.dvx-root` to out-specify it — a scoped `.region a` (0-1-1) loses
   here, which is how links used to all render signal green. */
html.dvx-root a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
html.dvx-root a:hover { color: var(--ink); }
html.dvx-root a:focus-visible,
html.dvx-root button:focus-visible,
html.dvx-root summary:focus-visible {
  outline: 2px solid var(--signal-text);
  outline-offset: 2px;
  border-radius: 8px;
}

.dx-mono { font-family: var(--font-mono); }

/* ── Header (the handoff's dvx-top) ─────────────────────────────────────── */
.dvx-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
}
html.dvx-root .dvx-top a { color: var(--ink-muted); text-decoration: none; }
html.dvx-root .dvx-top a:hover { color: var(--ink); }
.dvx-top-inner {
  height: 56px; padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
}
html.dvx-root .dvx-brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); flex: 0 0 auto; text-decoration: none;
}
.dvx-brand .dx-wordmark { font-size: 14px; }
.dvx-brand-rule { width: 1px; height: 16px; background: var(--hairline-strong); }
.dvx-brand-product {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-subtle);
}
.dvx-search {
  flex: 0 1 360px; min-width: 0; height: 36px; padding: 0 8px 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--border-control);
  border-radius: var(--radius-md); box-sizing: border-box;
  color: var(--ink-subtle); font-family: var(--font-sans); font-size: 13px;
  cursor: pointer; transition: border-color 120ms ease, color 120ms ease;
}
.dvx-search:hover { border-color: var(--ink-subtle); color: var(--ink-muted); }
.dvx-search .icon { width: 16px; height: 16px; flex: none; }
.dvx-search-label { flex-grow: 1; text-align: left; }
.dvx-toplinks {
  margin-left: auto; display: flex; align-items: center; gap: 20px;
  font-size: 13px; line-height: 16px; font-weight: 500; flex: 0 0 auto;
}
/* Theme toggle + the ≤960px Sections trigger (chrome beside the design's links). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-subtle); cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.icon-btn .icon { width: 15px; height: 15px; }
.sitebar-sections { display: none; }

/* ── Docs home ──────────────────────────────────────────────────────────── */
.dvx-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.dvx-hero-bg { position: absolute; inset: 0; z-index: 0; }
.dvx-hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 96px 24px 104px;
}
.dvx-hero-copy {
  position: relative; isolation: isolate;
  max-width: 640px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 20px;
}
/* Hero copy sits on the blur backing, never a bordered box. */
.dvx-hero-copy::before {
  content: ""; position: absolute; inset: -24px -64px -24px -40px;
  background: var(--canvas); filter: blur(24px); opacity: .92;
  z-index: -1; pointer-events: none;
}
.dvx-hero-title {
  margin: 0; font-size: clamp(40px, 5vw, 56px); line-height: 1.07;
  font-weight: 600; letter-spacing: -0.036em;
}
.dvx-hero-lede {
  margin: 0; font-size: 18px; line-height: 28px; letter-spacing: -0.1px;
  color: var(--ink-muted);
}
.dvx-hero-keywords {
  display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 4px;
  font-family: var(--font-mono); font-size: 12px; line-height: 18px;
  color: var(--ink-subtle);
}
.dvx-hero-keywords code { font-family: var(--font-mono); color: var(--ink-muted); }

.dvx-start { padding: 64px 24px 48px; }
.dvx-start-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
html.dvx-root .dvx-card {
  padding: 24px; background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-edge); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; color: var(--ink-muted);
  transition: background 120ms ease, border-color 120ms ease;
}
html.dvx-root .dvx-card:hover { background: var(--surface-2); border-color: var(--hairline-strong); }
.dvx-card-title { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.25px; color: var(--ink); }
.dvx-card-body { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.dvx-card-body code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }

.dvx-map-section { padding: 48px 24px 96px; }
.dvx-map-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.dvx-map-title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.6px; }
.dvx-map {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 32px;
}
html.dvx-root .dvx-map a { color: var(--ink-muted); text-decoration: none; font-size: 13px; line-height: 20px; }
html.dvx-root .dvx-map a:hover { color: var(--ink); }
.dvx-map-col {
  display: flex; flex-direction: column; gap: 8px; padding-top: 16px;
  border-top: 1px solid var(--hairline-strong);
}
.dvx-map-head { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink); }
.dvx-map-note { margin: 0; font-size: 13px; line-height: 20px; color: var(--ink-subtle); }
html.dvx-root .dvx-map-inner .dvx-map-note a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }
html.dvx-root .dvx-map-note a:hover { color: var(--ink); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.dvx-footer {
  position: static; margin-top: auto;
  padding: 24px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center;
  font-size: 13px; line-height: 20px; color: var(--ink-subtle);
}
.dvx-footer-brand { color: var(--ink-muted); }
.dvx-footer-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
html.dvx-root .dvx-footer a { color: var(--ink-muted); text-decoration: none; }
html.dvx-root .dvx-footer a:hover { color: var(--ink); }

/* ── Article layout (the handoff's docs-article.html) ───────────────────── */
/* Sidebar (dvx-side) · centered 720px prose · 200px sticky TOC. */

.docs-body { display: flex; align-items: flex-start; width: 100%; }

/* Sidebar, generated from the Hugo section tree. */
.dvx-side {
  flex: 0 0 272px; box-sizing: border-box; align-self: stretch;
  padding: 24px 16px 48px;
  border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 24px;
}
.dvx-side-group { display: flex; flex-direction: column; gap: 2px; }
.dvx-side-label {
  padding: 0 10px 6px;
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-subtle);
}
html.dvx-root .dvx-side a {
  display: block; padding: 6px 10px; border-radius: 6px;
  color: var(--ink-muted); text-decoration: none;
  font-size: 13px; line-height: 20px;
}
html.dvx-root .dvx-side a:hover { background: var(--surface-2); color: var(--ink); }
html.dvx-root .dvx-side a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 500; }
.dvx-side-pending {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  font-size: 13px; line-height: 20px; color: var(--ink-faint); cursor: default;
}
.dvx-side-pending .rail-item-label { flex: 1; min-width: 0; }
.pending-dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--warning); flex: 0 0 auto; }

/* Centered article column. */
.docs-main {
  flex: 1 1 auto; min-width: 0;
  padding: 48px 48px 96px;
  display: flex; justify-content: center; gap: 64px;
}
.docs-article {
  flex: 0 1 720px; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 15px; line-height: 26px; color: var(--ink-muted);
}

/* Breadcrumb: mono caps, current page in ink. */
.dvx-crumb {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-subtle);
}
.dvx-crumb-current { color: var(--ink); }

/* Article head: 40px H1, lead, source links, hairline divider. */
.article-head {
  display: flex; flex-direction: column; gap: 16px;
  padding-bottom: 24px; border-bottom: 1px solid var(--hairline);
}
.article-head h1 {
  margin: 0; font-size: 40px; line-height: 46px; font-weight: 600;
  letter-spacing: -1.2px; color: var(--ink);
}
.article-head .lead {
  margin: 0; font-size: 18px; line-height: 28px; letter-spacing: -0.1px;
}
.article-links {
  display: flex; flex-wrap: wrap; gap: 20px;
  font-size: 13px; line-height: 16px; font-weight: 500;
}

/* Prose (dvx-prose): the article is a gap-separated flex column, so block
   margins stay at zero and the rhythm comes from the gap. */
/* Long tokens in prose (bare URLs, flag=value strings in the generated CLI
   reference's raw <dir> blocks) must wrap instead of forcing the page wide at
   390px; the pre/table scroll containers below handle the rest. */
.dvx-prose { overflow-wrap: break-word; }
.dvx-prose p { margin: 0; }
.dvx-prose strong { color: var(--ink); font-weight: 600; }
.dvx-prose h2 {
  margin: 16px 0 0; font-size: 28px; line-height: 34px; font-weight: 600;
  letter-spacing: -0.6px; color: var(--ink);
}
.dvx-prose h3 {
  margin: 16px 0 0; font-size: 20px; line-height: 28px; font-weight: 600;
  letter-spacing: -0.3px; color: var(--ink);
}
.dvx-prose ul, .dvx-prose ol, .dvx-prose dir { margin: 0; padding-left: 24px; }
.dvx-prose li + li { margin-top: 8px; }
.dvx-prose code {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 1px 5px;
}
.dvx-prose pre {
  margin: 0; background: var(--surface-1);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 14px 16px; overflow-x: auto;
}
.dvx-prose pre code { background: none; border: 0; padding: 0; font-size: 13px; line-height: 22px; }
.dvx-prose blockquote { margin: 0; padding: 0 18px; border-left: 2px solid var(--hairline-strong); color: var(--ink-muted); }
.dvx-prose img { max-width: 100%; }
.dvx-prose hr { margin: 8px 0; border: 0; border-top: 1px solid var(--hairline); }

/* Tables stay readable: hairline rules, header row on surface-2. */
.dvx-prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; line-height: 20px; display: block; overflow-x: auto; }
.dvx-prose th, .dvx-prose td { border: 1px solid var(--hairline); padding: 7px 10px; text-align: left; vertical-align: top; }
.dvx-prose th { background: var(--surface-2); color: var(--ink); font-weight: 500; }

/* PlaneNote callout: surface-1 panel, hairline-strong border, 12px radius,
   edge shadow — no coloured left border. */
.plane-note {
  background: var(--surface-1);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-edge);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.plane-note-head { display: flex; align-items: center; gap: 10px; }
.plane-note-tagline { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink); }
.plane-note-body { font-size: 14px; line-height: 22px; }
.plane-note-body > :first-child { margin-top: 0; }
.plane-note-body > :last-child { margin-bottom: 0; }

/* Previous / next cards. */
.prevnext {
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
html.dvx-root .prevnext-card {
  text-decoration: none; padding: 16px 20px; color: var(--ink-muted);
  border: 1px solid var(--hairline-strong); border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
html.dvx-root .prevnext-card:hover { background: var(--surface-2); }
.prevnext-next { align-items: flex-end; text-align: right; }
.prevnext-label {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-subtle);
}
.prevnext-title { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ink); }

/* Section list (branch-bundle section pages). */
.section-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.section-item { display: flex; align-items: center; gap: 8px; }
html.dvx-root .section-item a {
  display: block; padding: 8px 12px; margin: 0 -12px; border-radius: 6px;
  color: var(--ink); font-size: 15px; line-height: 24px; text-decoration: none;
}
html.dvx-root .section-item a:hover { background: var(--surface-2); }
.section-item.is-pending { padding: 8px 12px; color: var(--ink-faint); }
.section-pending-note { font-size: 11px; color: var(--ink-subtle); margin-left: auto; }

/* "On this page" TOC — 200px, sticky under the 56px header + 48px padding. */
.dvx-toc {
  flex: 0 0 200px; position: sticky; top: 104px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 13px; line-height: 20px;
}
.dvx-toc-label {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-subtle);
}
.dvx-toc-list { display: flex; flex-direction: column; gap: 8px; }
html.dvx-root .dvx-toc a { color: var(--ink-subtle); text-decoration: none; }
html.dvx-root .dvx-toc a:hover { color: var(--ink); }
.dvx-toc-sub { padding-left: 12px; }
.dvx-toc-foot {
  margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 8px;
}

/* Provenance banner (as-is pages) — functional chrome in the same language. */
.provenance {
  display: flex; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-1);
}
.provenance-icon { flex: 0 0 auto; color: var(--ink-subtle); margin-top: 1px; }
.provenance-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.provenance-text { font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); text-wrap: pretty; }
.provenance-src { font-size: 10.5px; color: var(--ink-subtle); line-height: 1.6; }
html.dvx-root .provenance-src a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 2px; }

/* Terminal shortcode. */
.terminal { margin: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-2); overflow: hidden; }
.terminal-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.terminal-title { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-subtle); }
.terminal-copy { font-size: 10.5px; color: var(--ink-subtle); background: transparent; border: 1px solid var(--hairline); border-radius: 3px; padding: 2px 8px; cursor: pointer; }
.terminal-copy:hover { color: var(--ink); border-color: var(--hairline-strong); }
.terminal-body { margin: 0; padding: 14px 16px; overflow-x: auto; }
.terminal-body code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; background: none; padding: 0; border: 0; }
.term-line { display: block; white-space: pre-wrap; word-break: break-word; }
.term-cmd { color: var(--ink); }
.term-prompt { color: var(--signal-text); user-select: none; }
.term-out { color: var(--ink-subtle); }

/* Bead status badges, emitted by the badge partial; colour is always paired
   with the status word. */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 7px;
  border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 10.5px;
  white-space: nowrap; flex: none;
}
.badge .dot { width: 4px; height: 4px; border-radius: var(--radius-pill); background: currentColor; flex: none; }
.badge-attested { color: var(--success); background: var(--signal-soft); }
.badge-running { color: var(--success); background: var(--signal-soft); }
.badge-denied { color: var(--danger); background: var(--surface-2); }
.badge-reconciling { color: var(--warning); background: var(--surface-2); }
.badge-sealed { color: var(--ink-muted); background: var(--surface-2); }
.badge-neutral { color: var(--ink-muted); background: var(--surface-2); }

/* Search palette — matches docs-search.html: scrim, 640px surface-1 dialog
   with shadow-overlay, 56px input row, results grouped by section, key hints. */
.search-overlay { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: flex; justify-content: center; padding: 112px 20px 20px; }
.search-overlay[hidden] { display: none; }
.search-panel { width: 100%; max-width: 640px; height: fit-content; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-overlay); overflow: hidden; }
.search-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; flex: none; border-bottom: 1px solid var(--hairline-strong); color: var(--ink-subtle); }
.search-head .icon { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.search-input { flex: 1; min-width: 0; height: 40px; background: transparent; border: 0; outline: none; font-family: var(--font-sans); font-size: 17px; line-height: 24px; color: var(--ink); }
.search-input::placeholder { color: var(--ink-subtle); }
.search-close { display: none; flex: 0 0 auto; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: transparent; color: var(--ink-subtle); cursor: pointer; }
.search-close .icon { width: 16px; height: 16px; }
.search-results { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; max-height: 520px; }
.search-group { padding: 8px 16px 4px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-subtle); }
.search-group + .search-row, .search-row + .search-row { margin-top: 0; }
html.dvx-root .search-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: var(--radius-md); text-decoration: none; color: var(--ink-muted); cursor: pointer; }
html.dvx-root a.search-row:hover, .search-row:hover { background: var(--surface-2); }
.search-row.is-active { background: var(--signal-soft); }
.search-row.is-pending { cursor: default; }
.search-row-label { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--ink); }
.search-row-label .search-row-crumb { font-weight: 400; color: var(--ink-subtle); }
.search-row-excerpt { font-size: 13px; line-height: 20px; }
.search-row-excerpt mark, .search-row-label mark { background: none; color: var(--ink); font-weight: 600; }
.search-row-group-inline { display: none; }
.search-none { padding: 12px 16px; font-size: 13px; line-height: 20px; color: var(--ink-subtle); }
.search-foot { display: flex; align-items: center; gap: 16px; flex: none; padding: 12px 16px; border-top: 1px solid var(--hairline-strong); font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.search-foot .search-hint { display: flex; align-items: center; gap: 6px; }
.search-foot .search-credit { margin-left: auto; }
.search-row .pending-dot { width: 6px; height: 6px; flex: none; border-radius: 9999px; background: var(--signal); }

/* 404 */
.systempage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 120px 24px; }
.systempage-mark { color: var(--signal); display: inline-flex; margin-bottom: 8px; }
.systempage-title { font-size: 32px; letter-spacing: -0.03em; font-weight: 600; margin: 0; }
.systempage-note { font-size: 15px; line-height: 1.6; color: var(--ink-muted); max-width: 52ch; text-wrap: pretty; }
.systempage-actions { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }
html.dvx-root .systempage-actions .btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border: 1px solid var(--border-control); border-radius: var(--radius-md);
  background: var(--surface-1); color: var(--ink); font-size: 13px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
html.dvx-root .systempage-actions .btn:hover { background: var(--surface-2); }
.systempage-actions .btn .icon { width: 15px; height: 15px; }

/* Drawer chrome is mobile-only: hidden above the 960px drawer breakpoint. */
.drawer-head, .drawer-foot, .nav-scrim { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* TOC gives way first (≤1200px), then the sidebar becomes a drawer (≤960px). */
@media (max-width: 1200px) {
  .dvx-toc { display: none !important; }
  .docs-main { justify-content: center; }
}

@media (max-width: 960px) {
  .dvx-toplinks { display: none; }
  .dvx-top-inner { gap: 12px; }
  .sitebar-sections { display: inline-flex; }

  .docs-main { padding: 32px 24px 64px; gap: 0; }
  .prevnext { grid-template-columns: 1fr; }

  /* Sidebar → overlay drawer, opened by the sitebar Sections button. */
  .dvx-side {
    position: fixed; top: 0; left: 0; z-index: 80;
    width: calc(min(320px, 86vw) + env(safe-area-inset-left, 0px)); flex-basis: auto; height: 100%;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)); padding-left: env(safe-area-inset-left, 0px);
    border-right: 1px solid var(--hairline);
    background: var(--canvas);
    transform: translateX(-100%); transition: transform 200ms cubic-bezier(.4, 0, .2, 1);
  }
  [data-nav="open"] .dvx-side { transform: translateX(0); }
  .rail-scroll { flex: 1; overflow-y: auto; padding: 20px 16px; }

  .drawer-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; height: 56px; padding: 0 10px 0 20px; border-bottom: 1px solid var(--hairline); }
  .drawer-eyebrow { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-subtle); }
  .drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink-subtle); cursor: pointer; }
  .drawer-close:hover { color: var(--ink); }
  .drawer-close .icon { width: 18px; height: 18px; }

  .drawer-foot { display: flex; flex-direction: column; flex: 0 0 auto; padding: 8px 12px 0; border-top: 1px solid var(--hairline); }
  html.dvx-root .drawer-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 14px; text-decoration: none; }
  html.dvx-root a.drawer-row:hover { background: var(--surface-2); color: var(--ink); }
  .drawer-row > span:first-child { flex: 1; min-width: 0; }
  .drawer-row .icon { width: 15px; height: 15px; color: var(--ink-subtle); }
  .version-tag { font-size: 11px; color: var(--ink-subtle); }

  .nav-scrim { position: fixed; inset: 0; display: block; z-index: 79; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity 120ms cubic-bezier(.4, 0, .2, 1); }
  [data-nav="open"] .nav-scrim { opacity: 1; visibility: visible; }
  body.nav-lock { overflow: hidden; }
}

@media (max-width: 700px) {
  .dvx-search-label, .dvx-search .dx-kbd { display: none; }
  .dvx-search { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; justify-content: center; }
  /* The handoff keeps the footer's row layout, 24px padding and
     right-aligned links on mobile. */
  .dvx-footer { gap: 16px 24px; padding: 24px; }
  .search-overlay { padding: calc(7vh + env(safe-area-inset-top, 0px)) 12px 12px; }
  .search-panel { max-height: 82vh; }
}

@media (pointer: coarse) {
  .search-head [data-search-esc] { display: none; }
  .search-close { display: inline-flex; }
}

@media print {
  .dvx-top, .dvx-side, .dvx-toc, .dvx-crumb, .search-overlay, .prevnext { display: none !important; }
  .docs-main { padding: 0; }
}