/* ══════════════════════════════════════════════════════════
   KaKeKiKoKu — Shared Documentation Styles
   Design tokens + light/dark themes. Enhancements (right rail,
   callouts, code copy, search, progress) are injected by docs-nav.js.
   ══════════════════════════════════════════════════════════ */

/* ── Design tokens (light) ── */
:root {
  --doc-bg:            #f8f7f4;
  --doc-surface:       #ffffff;
  --doc-surface-2:     #f1f0ec;
  --doc-text:          #2d2d2d;
  --doc-text-muted:    #666a70;
  --doc-text-faint:    #8c8b88;
  --doc-border:        #e5e3de;
  --doc-border-strong: #d3d1c7;
  --doc-accent:        #4da6ff;
  --doc-accent-strong: #2a7ae2;
  --doc-accent-soft:   #eaf3fd;
  --doc-code-bg:       #eeedea;
  --doc-code-text:     #2d2d2d;

  --doc-note-accent:   #3d92e6;
  --doc-note-bg:       #eef5fd;
  --doc-tip-accent:    #1f9d63;
  --doc-tip-bg:        #e9f6ef;
  --doc-warn-accent:   #c1860a;
  --doc-warn-bg:       #fbf3e0;
  --doc-danger-accent: #d64b46;
  --doc-danger-bg:     #fbeceb;

  --doc-shadow:        0 1px 2px rgba(20, 20, 30, 0.04), 0 6px 24px rgba(20, 20, 30, 0.06);
  --doc-radius:        8px;
  --doc-nav-h:         56px;

  color-scheme: light;
}

/* ── Design tokens (dark) ── */
html[data-doc-theme="dark"] {
  --doc-bg:            #0f131b;
  --doc-surface:       #171c26;
  --doc-surface-2:     #1f2530;
  --doc-text:          #dfe3ea;
  --doc-text-muted:    #98a2b3;
  --doc-text-faint:    #707a89;
  --doc-border:        #2a313d;
  --doc-border-strong: #39414f;
  --doc-accent:        #63b0ff;
  --doc-accent-strong: #8cc5ff;
  --doc-accent-soft:   #15273b;
  --doc-code-bg:       #10141c;
  --doc-code-text:     #dfe3ea;

  --doc-note-accent:   #63b0ff;
  --doc-note-bg:       #13253a;
  --doc-tip-accent:    #4cc38a;
  --doc-tip-bg:        #0f261c;
  --doc-warn-accent:   #e0a83c;
  --doc-warn-bg:       #2a2211;
  --doc-danger-accent: #f0817c;
  --doc-danger-bg:     #2b1615;

  --doc-shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

.doc-body {
  background: var(--doc-bg);
  color: var(--doc-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Anchor jumps clear the sticky nav */
.doc-chapter :target {
  scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
}

/* ── Reading progress bar ── */
.doc-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 101;
  background: transparent;
  pointer-events: none;
}

.doc-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--doc-accent), var(--doc-accent-strong));
  transition: width 0.08s linear;
}

/* ── Layout ── */
.docs-container {
  display: flex;
  align-items: flex-start;
  gap: 0;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.docs-sidebar-container {
  width: 250px;
  flex-shrink: 0;
  border-right: 1px solid var(--doc-border);
  padding: 2.2rem 1.5rem 3rem 0;
  height: calc(100vh - var(--doc-nav-h));
  position: -webkit-sticky;
  position: sticky;
  top: var(--doc-nav-h);
  overflow-y: auto;
}

.docs-content {
  flex-grow: 1;
  min-width: 0;
}

/* Measured, not guessed: at 16px Inter the average glyph is ~7.8px, so 680px (632px
   of text once padding is off) lands around 80 characters per line. It was 86 at
   780px — past the comfortable band, and it showed on the long reference chapters.
   Not narrower than this: the three-column tables and the command lines need room. */
.doc-wrapper {
  max-width: 680px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 4rem;
}

/* ── Sidebar toolbar (search + theme) ── */
.docs-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}

.doc-search-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.86rem;
  color: var(--doc-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.doc-search-trigger:hover {
  border-color: var(--doc-accent);
  color: var(--doc-text);
}

.doc-search-trigger svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.doc-search-trigger .doc-kbd-hint {
  margin-left: auto;
}

.doc-theme-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  color: var(--doc-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.doc-theme-toggle:hover {
  border-color: var(--doc-accent);
  color: var(--doc-accent);
}

.doc-theme-toggle svg {
  width: 17px;
  height: 17px;
}

.doc-theme-toggle .icon-moon { display: none; }
html[data-doc-theme="dark"] .doc-theme-toggle .icon-sun { display: none; }
html[data-doc-theme="dark"] .doc-theme-toggle .icon-moon { display: inline; }

/* ── Disclosure summaries (chapter list + on-this-page) ──
   Both are <details>. Above their breakpoint JS forces them open and the summary is
   demoted to a plain label; below it they behave as real disclosures. */
.docs-nav-collapse,
.docs-toc-collapse { margin: 0; }

.docs-nav-summary,
.docs-toc-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--doc-text-muted);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  background: var(--doc-surface);
  transition: border-color 0.15s, color 0.15s;
}

.docs-nav-summary::-webkit-details-marker,
.docs-toc-summary::-webkit-details-marker { display: none; }

.docs-nav-summary:hover,
.docs-toc-summary:hover { border-color: var(--doc-accent); color: var(--doc-text); }

.docs-nav-summary svg,
.docs-toc-summary svg {
  width: 14px;
  height: 14px;
  margin-left: auto;
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

.docs-nav-collapse[open] > .docs-nav-summary svg,
.docs-toc-collapse[open] > .docs-toc-summary svg { transform: rotate(-90deg); }

.docs-nav-collapse[open] > .docs-nav-summary { margin-bottom: 1rem; }

/* ── Sidebar navigation ── */
.docs-sidebar h2 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--doc-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 0.5rem;
}

.docs-nav-group + .docs-nav-group {
  margin-top: 1.4rem;
}

.docs-sidebar ol,
.docs-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.docs-sidebar li {
  margin: 0;
}

.docs-sidebar a {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--doc-text-muted);
  text-decoration: none;
  padding: 0.34rem 0.6rem;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.docs-sidebar a:hover {
  color: var(--doc-text);
  background: var(--doc-surface-2);
}

.docs-sidebar a.active {
  color: var(--doc-accent-strong);
  background: var(--doc-accent-soft);
  border-left-color: var(--doc-accent);
  font-weight: 600;
}

/* ── Hero / Title ── */
.doc-hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--doc-border);
  margin-bottom: 2.5rem;
}

.doc-hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--doc-text);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.doc-hero p {
  font-size: 1.1rem;
  color: var(--doc-text-muted);
  margin: 0;
}

/* ── Breadcrumb ── */
.doc-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--doc-text-faint);
  margin-bottom: 1.4rem;
}

.doc-breadcrumb a {
  color: var(--doc-text-muted);
  text-decoration: none;
}

.doc-breadcrumb a:hover {
  color: var(--doc-accent);
}

.doc-breadcrumb svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

/* ── Chapter sections ── */
.doc-chapter {
  margin-bottom: 3.5rem;
}

.doc-chapter h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--doc-text);
  margin: 0 0 1.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--doc-border);
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
}

.doc-chapter-num {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--doc-accent-strong);
  background: var(--doc-accent-soft);
  border-radius: 7px;
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.02em;
}

/* h3 and h4 used to sit 0.24rem apart at the same weight, which read as one level.
   The UI chapters lean on h4 for every menu group and issue type, so the two need to
   be told apart at a glance: size and air separate h3, weight and a rule mark h4. */
.doc-chapter h3 {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--doc-text);
  margin: 2.8rem 0 0.8rem;
  scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
}

.doc-chapter h3:first-of-type { margin-top: 1.6rem; }

.doc-chapter h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--doc-text);
  margin: 1.9rem 0 0.5rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--doc-border-strong);
  scroll-margin-top: calc(var(--doc-nav-h) + 1.5rem);
}

.doc-chapter h4:hover { border-left-color: var(--doc-accent); }

/* Anchor links on headings */
.doc-heading-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  color: var(--doc-text-faint);
  opacity: 0;
  text-decoration: none;
  transition: opacity 0.15s, color 0.15s;
}

.doc-heading-anchor svg { width: 0.85em; height: 0.85em; }
.doc-heading-anchor:hover { color: var(--doc-accent); }

h2:hover .doc-heading-anchor,
h3:hover .doc-heading-anchor,
h4:hover .doc-heading-anchor,
.doc-heading-anchor:focus-visible {
  opacity: 1;
}

.doc-chapter p {
  margin: 0.6rem 0 1rem;
}

.doc-chapter a {
  color: var(--doc-accent-strong);
  text-decoration: none;
}

.doc-chapter a:hover {
  text-decoration: underline;
}

.doc-chapter strong {
  font-weight: 600;
  color: var(--doc-text);
}

/* ── Lists ── */
.doc-chapter ul,
.doc-chapter ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0 1rem;
}

.doc-chapter li {
  margin-bottom: 0.4rem;
}

.doc-chapter li > ul,
.doc-chapter li > ol {
  margin-top: 0.3rem;
}

/* ── Inline code & keys ── */
.doc-chapter code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.86rem;
  background: var(--doc-code-bg);
  color: var(--doc-code-text);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

kbd,
.doc-kbd-hint {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--doc-text-muted);
  background: var(--doc-surface-2);
  border: 1px solid var(--doc-border-strong);
  border-radius: 5px;
  padding: 0.22em 0.42em;
  box-shadow: 0 1px 0 var(--doc-border-strong);
}

/* ── Code blocks ── */
.doc-code {
  position: relative;
  margin: 1.1rem 0 1.3rem;
}

.doc-chapter pre {
  background: var(--doc-code-bg);
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 0;
}

.doc-code pre { margin: 0; }

.doc-chapter pre code {
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--doc-code-text);
}

.doc-code-copy {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--doc-text-muted);
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.doc-code:hover .doc-code-copy,
.doc-code-copy:focus-visible {
  opacity: 1;
}

.doc-code-copy:hover {
  color: var(--doc-accent);
  border-color: var(--doc-accent);
}

.doc-code-copy svg { width: 13px; height: 13px; }
.doc-code-copy .icon-check { color: var(--doc-tip-accent); }
.doc-code-copy.copied { color: var(--doc-tip-accent); border-color: var(--doc-tip-accent); }

@media (hover: none) {
  .doc-code-copy { opacity: 1; }
}

/* ── Tables ── */
.doc-chapter table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0 1.5rem;
  font-size: 0.93rem;
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  overflow: hidden;
}

/* Quiet header on purpose: a reference manual has many small tables, and a solid
   accent bar on each one turned the page into a field of blue. Colour belongs to the
   callouts, where it carries meaning. */
.doc-chapter thead th {
  background: var(--doc-surface-2);
  color: var(--doc-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.6rem 1rem;
  border-bottom: 2px solid var(--doc-border-strong);
}

.doc-chapter tbody td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--doc-border);
}

.doc-chapter tbody tr:last-child td { border-bottom: none; }

.doc-chapter tbody tr:nth-child(even) {
  background: var(--doc-surface-2);
}

/* ── Callouts (from blockquotes) ── */
.doc-chapter blockquote,
.doc-callout {
  position: relative;
  display: flex;
  gap: 0.8rem;
  background: var(--doc-note-bg);
  border: 1px solid color-mix(in srgb, var(--doc-note-accent) 22%, transparent);
  border-left: 3px solid var(--doc-note-accent);
  margin: 1.3rem 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--doc-radius);
}

.doc-callout__icon {
  flex-shrink: 0;
  color: var(--doc-note-accent);
  margin-top: 0.1rem;
}

.doc-callout__icon svg { width: 18px; height: 18px; display: block; }

.doc-callout__body { min-width: 0; }
.doc-callout__body > :first-child { margin-top: 0; }
.doc-callout__body > :last-child { margin-bottom: 0; }
.doc-chapter blockquote p,
.doc-callout p { margin: 0.3rem 0; }

.doc-callout.doc-callout--tip {
  background: var(--doc-tip-bg);
  border-color: color-mix(in srgb, var(--doc-tip-accent) 24%, transparent);
  border-left-color: var(--doc-tip-accent);
}
.doc-callout--tip .doc-callout__icon { color: var(--doc-tip-accent); }

.doc-callout.doc-callout--warn {
  background: var(--doc-warn-bg);
  border-color: color-mix(in srgb, var(--doc-warn-accent) 26%, transparent);
  border-left-color: var(--doc-warn-accent);
}
.doc-callout--warn .doc-callout__icon { color: var(--doc-warn-accent); }

.doc-callout.doc-callout--danger {
  background: var(--doc-danger-bg);
  border-color: color-mix(in srgb, var(--doc-danger-accent) 26%, transparent);
  border-left-color: var(--doc-danger-accent);
}
.doc-callout--danger .doc-callout__icon { color: var(--doc-danger-accent); }

/* ── Horizontal rules ── */
.doc-chapter hr {
  border: none;
  border-top: 1px solid var(--doc-border);
  margin: 2rem 0;
}

/* ── Glossary ── */
.doc-glossary p {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--doc-border);
}

.doc-glossary p > strong:first-child {
  color: var(--doc-accent-strong);
  font-weight: 600;
}

/* ── Right rail: On this page ── */
.docs-toc-container {
  width: 210px;
  flex-shrink: 0;
  align-self: flex-start;
  position: -webkit-sticky;
  position: sticky;
  top: var(--doc-nav-h);
  max-height: calc(100vh - var(--doc-nav-h));
  overflow-y: auto;
  padding: 2.4rem 0 3rem 1.6rem;
}

.docs-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--doc-border);
}

.docs-toc a {
  display: block;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--doc-text-muted);
  text-decoration: none;
  padding: 0.32rem 0 0.32rem 0.9rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.docs-toc .docs-toc-sub a {
  padding-left: 1.7rem;
  font-size: 0.79rem;
  color: var(--doc-text-faint);
}

.docs-toc a:hover { color: var(--doc-text); }

.docs-toc a.active {
  color: var(--doc-accent-strong);
  border-left-color: var(--doc-accent);
  font-weight: 500;
}

/* ── Footer nav: prev / next cards ── */
.docs-footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--doc-border);
}

.docs-footer-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: var(--doc-radius);
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--doc-text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.docs-footer-nav a:hover {
  border-color: var(--doc-accent);
  transform: translateY(-2px);
  box-shadow: var(--doc-shadow);
}

.docs-footer-nav .docs-nav-next {
  text-align: right;
  align-items: flex-end;
  grid-column: 2;
}

.docs-footer-nav .docs-nav-label {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--doc-text-faint);
}

.docs-footer-nav .docs-nav-title {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--doc-accent-strong);
}

/* ── Back to top (legacy hook) ── */
.back-to-top {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--doc-accent-strong);
  text-decoration: none;
}
.back-to-top:hover { text-decoration: underline; }

/* ── Search modal ── */
.doc-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 1rem;
  background: rgba(10, 12, 18, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.doc-search-overlay[hidden] { display: none; }

.doc-search-modal {
  width: 100%;
  max-width: 560px;
  background: var(--doc-surface);
  border: 1px solid var(--doc-border);
  border-radius: 12px;
  box-shadow: var(--doc-shadow);
  overflow: hidden;
}

.doc-search-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--doc-border);
}

.doc-search-input-row > svg {
  width: 18px;
  height: 18px;
  color: var(--doc-text-faint);
  flex-shrink: 0;
}

.doc-search-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;
  color: var(--doc-text);
}

.doc-search-input-row input::placeholder { color: var(--doc-text-faint); }

.doc-search-results {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  max-height: 46vh;
  overflow-y: auto;
}

.doc-search-results li { margin: 0; }

.doc-search-results a {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--doc-text);
  font-size: 0.92rem;
}

.doc-result-main {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  flex: 1;
}

.doc-result-title {
  font-weight: 500;
  line-height: 1.35;
}

.doc-result-snippet {
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--doc-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-result-snippet mark {
  background: transparent;
  color: var(--doc-accent-strong);
  font-weight: 650;
}

.doc-search-results a .doc-result-group {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--doc-text-faint);
  padding-top: 0.15rem;
  max-width: 38%;
  text-align: right;
}

.doc-search-results li.active a,
.doc-search-results a:hover {
  background: var(--doc-accent-soft);
  color: var(--doc-accent-strong);
}

.doc-search-results li.active .doc-result-snippet,
.doc-search-results a:hover .doc-result-snippet { color: var(--doc-text-muted); }

.doc-search-group {
  padding: 0.7rem 0.7rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--doc-text-faint);
}

.doc-search-empty {
  padding: 1.4rem 1rem;
  text-align: center;
  color: var(--doc-text-faint);
  font-size: 0.9rem;
}

.doc-search-status {
  padding: 0.6rem 0.7rem 0.8rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--doc-text-faint);
}

.doc-search-footer {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--doc-border);
  font-size: 0.76rem;
  color: var(--doc-text-faint);
}

.doc-search-footer span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Focus visibility ── */
.doc-body :focus-visible {
  outline: 2px solid var(--doc-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Responsive ── */

/* Wide: the chapter list is always open, so its summary is dead weight. */
@media (min-width: 769px) {
  .docs-nav-summary { display: none; }
}

/* Wide: the rail's summary becomes the plain "On this page" label it used to be. */
@media (min-width: 1160px) {
  .docs-toc-summary {
    padding: 0 0 0.8rem;
    border: none;
    background: none;
    cursor: default;
    pointer-events: none;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    color: var(--doc-text-faint);
  }
  .docs-toc-summary svg { display: none; }
}

/* No gutter for a rail: JS moves it inline above the chapter and it collapses. */
@media (max-width: 1159.98px) {
  .docs-toc-container {
    display: block;
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin: 0 0 1.6rem;
  }

  .docs-toc ul { margin-top: 0.8rem; }

  /* The chapter's own top padding assumes it leads the wrapper. Once the index sits
     above it, that padding stacks into a hole. */
  .docs-toc-container + .doc-chapter { padding-top: 0; }
}

@media (max-width: 768px) {
  .docs-container {
    flex-direction: column;
  }

  .docs-sidebar-container {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    border-right: none;
    border-bottom: 1px solid var(--doc-border);
    padding: 1.2rem 0;
  }

  .docs-tools { margin-bottom: 0.9rem; }

  .docs-nav-group + .docs-nav-group { margin-top: 1.2rem; }

  /* The old wrap-into-chips layout made 15 numbered chapters read as a word jumble.
     Inside a collapsed disclosure a plain vertical list is both shorter and scannable. */
  .docs-sidebar a { padding: 0.42rem 0.6rem; }

  .doc-wrapper {
    padding: 1.8rem 0 4rem;
  }

  .doc-hero h1 { font-size: 1.8rem; }
  .doc-chapter h2 { font-size: 1.45rem; }
  .doc-chapter h3 { font-size: 1.15rem; }
  .doc-chapter table { font-size: 0.85rem; }
  .doc-chapter thead th,
  .doc-chapter tbody td { padding: 0.5rem 0.6rem; }

  .docs-footer-nav { grid-template-columns: 1fr; }
  .docs-footer-nav .docs-nav-next { grid-column: 1; }
}

/* ── Print ── */
@media print {
  .site-nav,
  .docs-sidebar-container,
  .docs-toc-container,
  .doc-progress,
  .doc-search-overlay,
  .doc-search-trigger,
  .doc-theme-toggle,
  .docs-tools,
  .doc-code-copy,
  .doc-heading-anchor,
  .docs-footer-nav,
  .site-footer {
    display: none !important;
  }

  .doc-body { background: #fff; color: #000; }
  .docs-container { display: block; max-width: none; padding: 0; }
  .doc-wrapper { max-width: none; padding: 0; }
  .doc-chapter { page-break-inside: auto; }
  .doc-chapter h2, .doc-chapter h3 { page-break-after: avoid; }
  .doc-chapter pre, .doc-chapter table, .doc-callout, .doc-chapter blockquote { page-break-inside: avoid; }
  a { color: #000; text-decoration: underline; }
}