/* NextDocs Foundation — components.css
   One class, one job. Semantic tokens only. Catalog names follow the design
   companion: container, topbar, btn, menu, sidebar + nav-item, breadcrumb,
   page-header, prose, code-block, toc (rail), pagination, alert, search, state, docs-layout. */

/* ---------- container ---------- */
.container { width: 100%; max-width: var(--container-default); margin-inline: auto; padding-inline: var(--space-4); }

/* ---------- btn ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-canvas);
  color: var(--color-text-primary); font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-decoration: none; cursor: pointer; transition: background var(--motion-fast);
}
.btn:hover { background: var(--color-surface-hover); }
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.btn-primary { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-brand-on); }
.btn-primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-icon { width: var(--control-md); padding: 0; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-height);
  background: var(--color-bg-canvas); border-bottom: 1px solid var(--color-border);
}
.topbar-inner { display: flex; align-items: center; gap: var(--space-3); height: 100%; }
.topbar-brand {
  display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0;
  color: var(--color-text-primary); font-weight: var(--weight-semibold); text-decoration: none;
}
.topbar-brand img { max-height: 1.75rem; width: auto; }
.topbar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.topbar .logo-dark { display: none; }
[data-theme="dark"] .topbar .logo-light { display: none; }
[data-theme="dark"] .topbar .logo-dark { display: inline; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }

/* ---------- menu (details-based; JS adds Esc / outside click / focus return) ---------- */
.menu { position: relative; }
.menu > summary {
  list-style: none; display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-control);
  border: 1px solid var(--color-border); font-size: var(--text-sm); cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--color-surface-hover); }
.menu-list {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-overlay);
  min-width: 10rem; margin: 0; padding: var(--space-1); list-style: none;
  background: var(--color-bg-canvas); border: 1px solid var(--color-border);
  border-radius: var(--radius-control); box-shadow: var(--shadow-overlay);
}
.menu-list a {
  display: flex; justify-content: space-between; gap: var(--space-3); min-height: var(--control-sm);
  align-items: center; padding: 0 var(--space-3); border-radius: var(--radius-1);
  color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm);
}
.menu-list a:hover { background: var(--color-surface-hover); }
.menu-list a[aria-current="true"] { font-weight: var(--weight-semibold); color: var(--color-brand); }

/* ---------- docs layout ---------- */
.docs-layout {
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--toc-width);
  gap: var(--space-8); align-items: start;
}
.docs-main { min-width: 0; padding-block: var(--space-8) var(--space-12); }
.docs-layout.no-toc { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }

/* ---------- sidebar + nav (APG disclosure navigation with top-level links) ----------
   Every label is a link; groups have a separate toggle button. Without JS the
   whole tree shows and toggles stay hidden (`js` is set before first paint). */
.sidebar {
  position: sticky; top: var(--topbar-height); max-height: calc(100vh - var(--topbar-height));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding-block: var(--space-6); padding-inline-end: var(--space-2); font-size: var(--text-sm);
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-children {
  margin-inline-start: var(--space-3); padding-inline-start: var(--space-2);
  border-inline-start: 1px solid var(--color-border);
}
.nav-node { margin-top: 1px; }
.nav-row { display: flex; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.nav-item {
  display: block; flex: 1 1 auto; min-width: 0; padding: 0.375rem var(--space-2);
  border-radius: var(--radius-1); color: var(--color-text-muted); text-decoration: none;
  line-height: 1.4; overflow-wrap: anywhere;
}
.nav-item:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.sidebar-nav > .nav-list > .nav-node > .nav-row > .nav-item,
.nav-item[data-ancestor] { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.nav-item[aria-current="page"] { color: var(--color-brand-strong); background: var(--color-brand-subtle); font-weight: var(--weight-semibold); }
.nav-toggle {
  display: none; flex: none; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: var(--radius-1);
  background: transparent; color: var(--color-text-muted); cursor: pointer;
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.nav-toggle .icon { transition: transform var(--motion-fast); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
[dir="rtl"] .nav-toggle[aria-expanded="false"] .icon { transform: rotate(180deg); }
.js .nav-group[data-expanded="false"] > .nav-children { display: none; }
@media (pointer: coarse) {
  .nav-item { padding-block: 0.625rem; }
  .nav-toggle { width: 2.75rem; height: 2.75rem; }
}
.sidebar-extras {
  display: none; gap: var(--space-4); margin-bottom: var(--space-4); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.sidebar-extras .search-box { flex: none; width: 100%; }
.sidebar-switch-label {
  margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted);
}
.sidebar-switch ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.sidebar-switch a {
  display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm);
}
.sidebar-switch a:hover { background: var(--color-surface-hover); }
.sidebar-switch a[aria-current="true"] { border-color: var(--color-brand); background: var(--color-brand-subtle); color: var(--color-brand-strong); font-weight: var(--weight-semibold); }
.sidebar-toggle { display: none; }
.sidebar-toggle .icon-close { display: none; }
.sidebar-toggle[aria-expanded="true"] .icon-open { display: none; }
.sidebar-toggle[aria-expanded="true"] .icon-close { display: inline; }
.drawer-backdrop {
  position: fixed; inset: var(--topbar-height) 0 0 0; z-index: calc(var(--z-drawer) - 1);
  background: var(--color-overlay);
}
.drawer-backdrop[hidden] { display: none; }
html.drawer-open { overflow: hidden; }

/* ---------- breadcrumb ---------- */
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  list-style: none; margin: 0 0 var(--space-4); padding: 0; font-size: var(--text-sm); color: var(--color-text-muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.breadcrumb li + li::before { content: "\203A"; color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text-primary); text-decoration: underline; }
.breadcrumb-home { display: inline-flex; padding: 2px; border-radius: var(--radius-1); }
.breadcrumb [aria-current="page"] { color: var(--color-text-primary); }

/* ---------- page-header ---------- */
.page-header { margin-bottom: var(--space-6); }
.page-header h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); }
.page-header p { margin-top: var(--space-2); font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); }

/* ---------- prose ---------- */
.prose { max-width: var(--measure); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--space-4); }
/* Anchor offset comes from html{scroll-padding-top} (base.css + the
   narrow-screen rule below); a heading scroll-margin would double it. */
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--color-text-primary); }
/* heading-anchor: added by foundation.js to h2–h4 with an id. */
.heading-anchor {
  display: inline-flex; align-items: center; margin-inline-start: var(--space-2); padding: 2px;
  border-radius: var(--radius-1); color: var(--color-text-muted); text-decoration: none;
  vertical-align: middle; opacity: 0; transition: opacity var(--motion-fast);
}
.heading-anchor .icon { width: 0.8em; height: 0.8em; }
.prose :is(h2, h3, h4):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--color-brand); }
@media (hover: none) { .heading-anchor { opacity: 0.55; } }
.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-10); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-8); }
.prose h4 { font-size: var(--text-lg); margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-1); }
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: calc(-1 * var(--space-5)); }
.prose input[type="checkbox"] { margin-right: var(--space-2); accent-color: var(--color-brand); }
.prose blockquote { margin-inline: 0; padding: var(--space-2) var(--space-4); border-left: 4px solid var(--color-border-strong); color: var(--color-text-muted); }
/* callout: rendered from `> [!NOTE|TIP|IMPORTANT|WARNING|CAUTION]`.
   Icons are CSS masks so they show without JS and in the editor preview. */
.callout {
  --callout-fg: var(--color-status-neutral-fg); --callout-bg: var(--color-status-neutral-bg);
  --callout-border: var(--color-status-neutral-border);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  padding: var(--space-3) var(--space-4); border: 1px solid var(--callout-border); border-inline-start-width: 4px;
  border-radius: var(--radius-control); background: var(--callout-bg); color: var(--color-text-primary);
}
.callout > * + * { margin-top: var(--space-2); }
.callout-title {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--callout-fg); font-weight: var(--weight-semibold);
}
.callout-title::before {
  content: ""; flex: none; width: 1.125em; height: 1.125em; background: currentColor;
  -webkit-mask: var(--callout-icon) center / contain no-repeat; mask: var(--callout-icon) center / contain no-repeat;
}
.callout :not(pre) > code { background: var(--color-bg-canvas); }
.callout-tip {
  --callout-fg: var(--color-status-success-fg); --callout-bg: var(--color-status-success-bg);
  --callout-border: var(--color-status-success-border);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.3h6c0-1 .4-1.8 1-2.3A7 7 0 0 0 12 2Z'/%3E%3C/svg%3E");
}
.callout-important {
  --callout-fg: var(--color-status-info-fg); --callout-bg: var(--color-status-info-bg);
  --callout-border: var(--color-status-info-border);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M12 7v3M12 13h.01'/%3E%3C/svg%3E");
}
.callout-warning {
  --callout-fg: var(--color-status-warning-fg); --callout-bg: var(--color-status-warning-bg);
  --callout-border: var(--color-status-warning-border);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.4 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
}
.callout-caution {
  --callout-fg: var(--color-status-danger-fg); --callout-bg: var(--color-status-danger-bg);
  --callout-border: var(--color-status-danger-border);
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 2h8.2L22 7.9v8.2L16.1 22H7.9L2 16.1V7.9Z'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E");
}
/* External links (absolute URLs; image links excluded). */
.prose a:is([href^="http://"], [href^="https://"]):not(:has(img))::after {
  content: "";
  content: "" / " (external link)";
  display: inline-block; width: 0.7em; height: 0.7em; margin-inline-start: 0.2em; vertical-align: 0.05em;
  background: currentColor;
  -webkit-mask: var(--external-icon) center / contain no-repeat; mask: var(--external-icon) center / contain no-repeat;
}
.prose {
  --external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-8); }
.prose img { border-radius: var(--radius-control); }
.prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); }
.prose th { background: var(--color-surface); font-weight: var(--weight-semibold); }
/* Keep code tokens whole in cells; the table scrolls inside itself. */
.prose table code { overflow-wrap: normal; }
.prose :not(pre) > code { padding: 0.1em 0.35em; border-radius: var(--radius-1); background: var(--code-bg); font-family: var(--font-mono); font-size: 0.875em; }
.prose kbd { padding: 0.1em 0.4em; border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: 0.85em; }

/* ---------- code-block (chroma output: pre.chroma > code > .line) ---------- */
.prose pre, .code-block {
  overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-control);
  border: 1px solid var(--color-border); background: var(--code-bg);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5;
}
.prose pre code { font-family: inherit; }
/* code-block-wrap: foundation.js wraps each <pre> with a header bar
   (language label + copy button) so the toolbar never covers code. */
.code-block-wrap {
  overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--code-bg);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 2.25rem; padding: 0 var(--space-1) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted);
}
.code-lang { font-family: var(--font-mono); }
.code-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: var(--control-sm); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-1);
  background: transparent; color: var(--color-text-muted); font-size: var(--text-xs); cursor: pointer;
}
.code-copy:hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.code-copy[data-copied] { color: var(--color-status-success-fg); }
.code-block-wrap pre { margin: 0; border: 0; border-radius: 0; }

/* ---------- toc (rail) ---------- */
/* Current section (scroll-spy in foundation.js) = aria-current="true". */
.toc {
  position: sticky; top: var(--topbar-height); max-height: calc(100vh - var(--topbar-height));
  overflow-y: auto; overscroll-behavior: contain; padding-block: var(--space-8); font-size: var(--text-sm);
}
.toc-title { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); }
.toc ul, .toc-mobile ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--color-border); }
.toc a, .toc-mobile a {
  display: block; margin-inline-start: -1px; padding: var(--space-1) var(--space-3);
  border-inline-start: 2px solid transparent; color: var(--color-text-muted); text-decoration: none; overflow-wrap: anywhere;
}
.toc a:hover, .toc-mobile a:hover { color: var(--color-text-primary); }
.toc .toc-l3 a, .toc-mobile .toc-l3 a { padding-inline-start: var(--space-6); }
.toc a[aria-current="true"], .toc-mobile a[aria-current="true"] {
  border-inline-start-color: var(--color-brand); color: var(--color-brand); font-weight: var(--weight-medium);
}

/* ---------- toc-mobile ("On this page" below the rail breakpoint) ---------- */
.toc-mobile { display: none; }
.toc-mobile > summary {
  display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-md);
  padding: 0 var(--space-4); list-style: none; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile-current {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-muted); font-weight: var(--weight-regular);
}
.toc-mobile-current:not(:empty)::before { content: "\203A"; margin-inline-end: var(--space-2); color: var(--color-border-strong); }
.toc-mobile-chevron { margin-inline-start: auto; transition: transform var(--motion-fast); }
.toc-mobile[open] .toc-mobile-chevron { transform: rotate(180deg); }
.toc-mobile > ul {
  max-height: 50vh; overflow-y: auto; margin: 0 var(--space-4) var(--space-3); font-size: var(--text-sm);
}

/* ---------- pagination (prev / next) ---------- */
.pagination { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-12); max-width: var(--measure); }
.pagination a {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-card); text-decoration: none;
}
.pagination a:hover { border-color: var(--color-brand); background: var(--color-surface); }
.pagination .pagination-label { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.pagination .pagination-title { font-weight: var(--weight-semibold); color: var(--color-text-link); overflow-wrap: anywhere; }
.pagination .pagination-next { grid-column: 2; text-align: right; }
.pagination .pagination-next .pagination-label { justify-content: flex-end; }

/* ---------- meta-row ---------- */
.meta-row { margin-top: var(--space-10); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- back-to-top (shown by foundation.js after scrolling) ---------- */
.back-to-top {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-sticky);
  width: var(--control-lg); min-height: var(--control-lg); padding: 0; border-radius: var(--radius-pill);
  border-color: var(--color-border); box-shadow: var(--shadow-overlay);
}
.back-to-top[hidden] { display: none; }
/* Programmatic focus targets (skip link, back-to-top) need no ring. */
[tabindex="-1"]:focus { box-shadow: none; outline: none; }

/* ---------- alert (5 tones) ---------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-control); font-size: var(--text-sm); }
.alert-neutral { color: var(--color-status-neutral-fg); background: var(--color-status-neutral-bg); border-color: var(--color-status-neutral-border); }
.alert-info { color: var(--color-status-info-fg); background: var(--color-status-info-bg); border-color: var(--color-status-info-border); }
.alert-success { color: var(--color-status-success-fg); background: var(--color-status-success-bg); border-color: var(--color-status-success-border); }
.alert-warning { color: var(--color-status-warning-fg); background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); }
.alert-danger { color: var(--color-status-danger-fg); background: var(--color-status-danger-bg); border-color: var(--color-status-danger-border); }

/* ---------- search (topbar box + results; marks come from the server) ---------- */
.search-link { display: none; }
.search-box { position: relative; display: flex; align-items: center; flex: 0 1 16rem; min-width: 0; }
.search-box .icon { position: absolute; left: var(--space-3); color: var(--color-text-muted); pointer-events: none; }
.search-input {
  width: 100%; min-height: var(--control-md); padding: 0 var(--space-3) 0 calc(var(--space-3) * 2 + 1rem);
  border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: var(--color-surface); color: var(--color-text-primary); font: inherit; font-size: var(--text-sm);
}
.search-input:hover { border-color: var(--color-border-strong); }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.topbar .search-input { padding-inline-end: 4.25rem; }
.search-kbd {
  position: absolute; right: var(--space-2); padding: 0.0625rem var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-1); background: var(--color-bg-canvas);
  color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.5;
  pointer-events: none;
}
.search-kbd[hidden] { display: none; }
@media (hover: none) { .search-kbd { display: none; } }
.search-page .search-box { flex: none; max-width: var(--measure); margin-bottom: var(--space-6); }
.search-summary { margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.search-results { max-width: var(--measure); margin: 0; padding: 0; list-style: none; }
.search-results li { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.search-results li:first-child { padding-top: 0; }
.search-result-trail { font-size: var(--text-xs); color: var(--color-text-muted); }
.search-result-title { display: inline-block; margin-top: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-link); text-decoration: none; }
.search-result-title:hover { text-decoration: underline; }
.search-result-snippet { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); }
.search-results mark, .search-result-title mark { padding: 0 0.1em; border-radius: var(--radius-1); background: var(--color-brand-subtle); color: inherit; font-weight: var(--weight-semibold); }

/* ---------- state (empty / not found — always a next action) ---------- */
.state { max-width: var(--measure); padding-block: var(--space-12); }
.state h1 { font-size: var(--text-3xl); }
.state p { margin-block: var(--space-3) var(--space-6); color: var(--color-text-muted); }

/* ---------- site footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); }
.site-footer-inner { padding-block: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- responsive ----------
   ≥1280 sidebar · content · rail | 1024–1279 sidebar · content (TOC strip)
   <1024 drawer · full-width content (TOC strip) | <768 compact top bar */
@media (max-width: 1279px) {
  .docs-layout, .docs-layout.no-toc { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
  .toc { display: none; }
  /* Sticky "On this page" strip under the top bar (square corners, no top
     border) so scrolling text never shows around it; anchors clear both. */
  .toc-mobile {
    display: block; position: sticky; top: var(--topbar-height); z-index: calc(var(--z-sticky) - 1);
    margin: 0 calc(-1 * var(--space-4)) var(--space-6); border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-canvas);
  }
  html { scroll-padding-top: calc(var(--topbar-height) + var(--control-md) + var(--space-6)); }
}
@media (max-width: 1023px) {
  .docs-layout, .docs-layout.no-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Without JS the sidebar stays in flow above the content. */
  .sidebar { position: static; max-height: none; border-bottom: 1px solid var(--color-border); }
  .sidebar-extras { display: grid; }
  /* Closed drawer is visibility:hidden so its links are not focusable. */
  .js .sidebar {
    position: fixed; inset: var(--topbar-height) auto 0 0; z-index: var(--z-drawer);
    width: min(85vw, 20rem); max-height: none; padding: var(--space-4);
    background: var(--color-bg-canvas); border-inline-end: 1px solid var(--color-border); border-bottom: 0;
    box-shadow: var(--shadow-overlay); transform: translateX(-105%); visibility: hidden;
    transition: transform var(--motion-base), visibility 0s linear var(--motion-base);
  }
  .js .sidebar[data-open="true"] {
    transform: none; visibility: visible; transition: transform var(--motion-base), visibility 0s;
  }
  .js .sidebar-toggle { display: inline-flex; }
  /* Version/language switchers live in the drawer. */
  .js .topbar .topbar-switch { display: none; }
}
@media (max-width: 767px) {
  .page-header h1 { font-size: var(--text-3xl); }
  .topbar-inner { gap: var(--space-2); }
  .topbar-brand span { max-width: 48vw; }
  .topbar .search-box { display: none; } /* phones: search via the top-bar icon or the drawer */
  .topbar .search-link { display: inline-flex; }
  .pagination { grid-template-columns: 1fr; }
  .pagination .pagination-next { grid-column: 1; }
  .back-to-top { right: var(--space-4); bottom: var(--space-4); }
}

/* ---------- print: content only ---------- */
@media print {
  .topbar, .sidebar, .drawer-backdrop, .toc, .toc-mobile, .pagination, .back-to-top,
  .skip-link, .heading-anchor, .code-copy, .search-box, .site-footer { display: none !important; }
  .docs-layout, .docs-layout.no-toc { display: block; max-width: none; padding: 0; }
  .docs-main { padding: 0; }
  .prose { max-width: none; }
  .prose pre, .code-block-wrap, .prose table, .prose img { break-inside: avoid; }
  .prose pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .prose a[href^="http"]:not(:has(img))::after {
    content: " (" attr(href) ")"; display: inline; width: auto; height: auto; margin: 0;
    background: none; -webkit-mask: none; mask: none; font-size: 0.85em; color: var(--color-text-muted);
  }
  .callout { break-inside: avoid; }
  .breadcrumb a { text-decoration: none; }
}