/* Documentation pages only (docs home, section indexes, content pages). Tokens come from styles.css. */
:root {
  --tone-note: oklch(52% .1 245);
  --tone-warning: oklch(58% .15 70);
  --tone-tip: oklch(52% .11 155);
  --tone-surface: color-mix(in oklab, var(--surface) 92%, var(--foreground));
}
@media (prefers-color-scheme: dark) {
  :root {
    --tone-note: oklch(74% .09 245);
    --tone-warning: oklch(80% .13 80);
    --tone-tip: oklch(76% .11 155);
  }
}

/* ---- Home additions ---- */
.dx-search { margin-block-start: var(--space-8); max-width: 40rem; }
.dx-search[hidden] { display: none; }
/* With script the room is already laid out, invisibly, when docs.js reveals the form: no layout shift. */
.js .dx-search[hidden] { display: block; visibility: hidden; }
.dx-search label { display: block; margin-block-end: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.dx-search-row { display: flex; gap: var(--space-3); }
.dx-search input { flex: 1; min-width: 0; min-height: 56px; padding: var(--space-3) var(--space-4); border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--surface); color: var(--foreground); font-size: var(--text-base); }
.dx-search input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--ring); }
.dx-search .button { min-height: 56px; padding-inline: var(--space-6); cursor: pointer; }
.dx-status, .dx-results { margin-block-start: var(--space-4); }
.dx-status:empty { margin: 0; }
.dx-status + .dx-results { margin-block-start: 0; }
.dx-results:empty { display: none; }
.dx-status p, .dx-results p { font-size: var(--text-sm); color: var(--text-muted); max-width: none; }
.dx-results ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; border-block-start: 1px solid var(--border); }
.dx-results li { padding-block: var(--space-4); border-block-end: 1px solid var(--border); }
.dx-results a.dx-hit { display: inline-block; font-weight: 700; font-size: var(--text-lg); }
.dx-results .dx-hit-section { display: block; font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-block-end: var(--space-1); }
.dx-results .dx-hit-summary { margin-block-start: var(--space-1); }
.dx-results .dx-hit-heads { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; border: 0; font-size: var(--text-sm); }
.dx-results .dx-hit-heads li { padding: 0; border: 0; }

.dx-topics, .dx-tasks { padding-block: var(--space-12); border-block-start: 1px solid var(--border); }
.dx-topics h2, .dx-tasks h2, .dx-guide-heading h2 { font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.035em; }
.dx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-4); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.dx-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dx-card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; letter-spacing: -.03em; }
.dx-card h3 a { text-decoration: none; }
.dx-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }
.dx-card p { font-size: var(--text-sm); color: var(--text-muted); }
.dx-card .dx-count { margin-block-start: auto; padding-block-start: var(--space-2); color: var(--primary); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; }
.dx-card:hover { border-color: var(--primary); }
.dx-card:focus-within { box-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--ring); }
.dx-card h3 a:focus-visible { box-shadow: none; }
.dx-allpages { margin-block-start: var(--space-8); }
.dx-allpages h3 { margin-block-start: var(--space-4); font-size: var(--text-base); }
.dx-allpages ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-6); columns: 2 14rem; }
.dx-allpages li { break-inside: avoid; padding-block: var(--space-1); }
.dx-tasklist { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 0; max-width: 46rem; }
.dx-tasklist li { border-block-end: 1px solid var(--border); }
.dx-tasklist li:first-child { border-block-start: 1px solid var(--border); }
.dx-tasklist a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding-block: var(--space-3); text-decoration: none; font-weight: 600; }
.dx-tasklist a:hover { color: var(--primary); }
.dx-guide-heading { padding-block: var(--space-12) var(--space-2); border-block-start: 1px solid var(--border); }
.dx-guide-heading p { margin-block-start: var(--space-3); color: var(--text-muted); }

/* ---- Frame: crumbs, drawer, sidebar, content, contents ---- */
.dx-wrap { padding-block-end: var(--space-16); }
.dx-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-6) var(--space-4); }
.dx-top .dx-search { margin-block-start: 0; }
.dx-top .dx-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.dx-top .dx-search input, .dx-top .dx-search .button { min-height: 48px; }
.dx-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); color: var(--text-muted); }
.dx-crumbs li { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.dx-crumbs li:not(:last-child)::after { content: '/'; color: var(--control-border); }
.dx-crumbs a { color: var(--text-muted); }
.dx-crumbs a:hover { color: var(--primary); }
.dx-crumbs [aria-current] { color: var(--foreground); font-weight: 600; overflow-wrap: anywhere; }

.dx-drawer { margin-block-end: var(--space-6); border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--surface); }
.dx-drawer > summary, .dx-toc-mobile > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); list-style: none; cursor: pointer; font-weight: 700; font-size: var(--text-sm); }
.dx-drawer-icon { width: 1.125rem; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; flex: none; }
.dx-drawer[open] > summary { border-block-end: 1px solid var(--border); }
.dx-drawer .dx-nav { padding: var(--space-4); }
.dx-side { display: none; }

.dx-nav { font-size: var(--text-sm); }
.dx-nav-home { margin-block-end: var(--space-3); font-weight: 700; }
.dx-nav-home a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.dx-nav details { border-block-start: 1px solid var(--border); }
.dx-nav details:last-child { border-block-end: 1px solid var(--border); }
.dx-nav summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 44px; list-style: none; cursor: pointer; font-weight: 700; }
.dx-nav ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; border-inline-start: 1px solid var(--border); }
.dx-nav li a { display: flex; align-items: center; min-height: 40px; padding: var(--space-1) var(--space-3); text-decoration: none; color: var(--text-muted); overflow-wrap: anywhere; }
.dx-nav li a:hover { color: var(--primary); }
.dx-nav li a[aria-current='page'] { color: var(--foreground); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); background: var(--accent-surface); }

.dx-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.dx-top > *, .dx-shell > * { min-width: 0; }
.dx-main { min-width: 0; }
.dx-main h1 { font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -.045em; overflow-wrap: anywhere; padding: 0; }
.dx-lead { margin-block-start: var(--space-4); max-width: 62ch; color: var(--text-muted); }
.dx-toc-mobile { margin-block-start: var(--space-6); border-block: 1px solid var(--border); }
.dx-toc-mobile ol { margin: 0; padding: 0 0 var(--space-3); list-style: none; }
.dx-toc-mobile li a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.dx-toc { display: none; }
.dx-content { margin-block-start: var(--space-8); }
.dx-content > * + * { margin-block-start: var(--space-4); }
.dx-content p, .dx-content li, .dx-content h2, .dx-content h3 { overflow-wrap: anywhere; }
.dx-content h2 { margin-block-start: var(--space-12); padding-block-start: var(--space-6); border-block-start: 1px solid var(--border); font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -.035em; }
.dx-content h3 { margin-block-start: var(--space-8); font-size: var(--text-lg); font-weight: 700; }
.dx-content [id] { scroll-margin-block-start: var(--space-6); }
.dx-content .dx-h { display: inline; }
.dx-main h1[tabindex="-1"]:focus { outline: none; }
.dx-anchor { margin-inline-start: var(--space-2); color: var(--control-border); font-family: var(--font-text); font-size: .7em; font-weight: 400; text-decoration: none; opacity: 0; }
h2:hover > .dx-anchor, h3:hover > .dx-anchor, .dx-anchor:focus-visible { opacity: 1; }
.dx-anchor:hover { color: var(--primary); }
@media (hover: none) { .dx-anchor { opacity: 1; } }
.dx-content a { text-underline-offset: .2em; }
.dx-content code { padding: .1em .35em; border-radius: var(--radius); background: var(--tone-surface); font-size: .92em; }
.dx-content .copy-button { min-height: 44px; }
.dx-list { padding-inline-start: var(--space-6); max-width: 66ch; }
.dx-list li { margin-block-start: var(--space-2); }

/* Code, examples and steps reuse the guide components; this adds spacing inside the page flow. */
.dx-content .doc-code { margin-block-start: var(--space-6); }
.dx-content .doc-code code { padding: 0; background: none; font-size: var(--text-sm); }
.dx-content .doc-code-file { background: var(--terminal); border-color: var(--terminal); color: var(--terminal-text); }
.dx-content .doc-code-file .command-heading, .dx-content .doc-code-file .copy-status { color: var(--terminal-muted); }
.dx-content .dx-example { margin-block-start: var(--space-8); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dx-content .dx-example > h3 { margin-block-start: 0; }
.dx-content .dx-example .doc-code { margin-block-start: var(--space-4); }
.dx-content .doc-result { margin-block-start: var(--space-4); color: var(--foreground); font-size: var(--text-sm); max-width: none; }
.dx-content .doc-result strong { display: block; margin-block-end: var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dx-steps { padding-inline-start: 0; }
.dx-steps > li { margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-block-start: 1px solid var(--border); }
.dx-steps > li:first-child { border: 0; padding: 0; }
.dx-step-title { font-weight: 700; font-size: var(--text-lg); line-height: 1.35; }
.dx-steps > li > p:not(.dx-step-title) { margin-block-start: var(--space-2); }

/* Tables */
.dx-table { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dx-table:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 5px var(--ring); }
.dx-table table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: var(--text-sm); }
.dx-table caption { padding: var(--space-3) var(--space-4); text-align: start; font-weight: 700; border-block-end: 1px solid var(--border); position: sticky; inset-inline-start: 0; }
.dx-table th, .dx-table td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: top; border-block-end: 1px solid var(--border); }
.dx-table tbody tr:last-child td, .dx-table tbody tr:last-child th { border-block-end: 0; }
.dx-table thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--tone-surface); white-space: nowrap; }
/* Flags and names in the first column stay whole; the table scrolls sideways before a flag breaks mid-word. */
.dx-table tbody th { font-weight: 600; background: var(--surface); }
.dx-table td:first-child code, .dx-table tbody th code { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }

/* Callouts: the kind is spelled out and drawn as an icon, never colour alone. */
.dx-callout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3); border: 1px solid var(--border); border-inline-start: 4px solid var(--callout-color, var(--tone-note)); border-radius: var(--radius); background: var(--surface); }
.dx-callout-note { --callout-color: var(--tone-note); }
.dx-callout-warning { --callout-color: var(--tone-warning); }
.dx-callout-tip { --callout-color: var(--tone-tip); }
.dx-icon { color: var(--callout-color); margin-block-start: .15em; flex: none; }
.dx-callout p { max-width: none; }
.dx-callout-title { font-weight: 700; }
.dx-callout-kind { text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-xs); }
.dx-callout-title + p { margin-block-start: var(--space-1); }

/* Terminals */
.dx-terminal { margin-inline: 0; border: 1px solid var(--terminal); border-radius: var(--radius); background: var(--terminal); color: var(--terminal-text); }
.dx-terminal-simulated { border-style: dashed; border-color: var(--terminal-accent); }
.dx-terminal-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-4); border-block-end: 1px solid color-mix(in oklab, var(--terminal-text) 20%, var(--terminal)); font-size: var(--text-xs); color: var(--terminal-muted); }
.dx-terminal-title { font-weight: 700; color: var(--terminal-text); margin-inline-end: auto; overflow-wrap: anywhere; }
.dx-badge { padding: .1rem .5rem; border: 1px solid var(--terminal-accent); border-radius: 999px; color: var(--terminal-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.dx-terminal .copy-button { color: var(--terminal-text); border-color: var(--terminal-muted); min-height: 44px; }
.dx-terminal .copy-button:hover { color: var(--terminal); background: var(--terminal-text); }
.dx-terminal-body { margin: 0; padding: var(--space-4); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.6; }
.dx-terminal-body:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--terminal-accent); }
.dx-terminal-body code { padding: 0; background: none; font-size: inherit; }
.dx-t { display: block; }
.dx-t-cmd { font-weight: 700; }
.dx-prompt { color: var(--terminal-accent); }
.dx-t-out { color: var(--terminal-text); }
.dx-t-note { color: var(--terminal-muted); font-style: italic; }
.dx-terminal-meta, .dx-terminal .copy-status { margin: 0; padding-inline: var(--space-4); font-size: var(--text-xs); color: var(--terminal-muted); max-width: none; }
.dx-terminal-meta { padding-block: 0 var(--space-3); }
.dx-terminal-meta code { background: none; padding: 0; color: var(--terminal-text); }
.dx-terminal .copy-status { min-height: 0; margin-block-start: 0; }
.dx-terminal .copy-status:empty { display: none; }

/* Video */
.dx-video { margin-inline: 0; }
.dx-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--terminal); border-radius: var(--radius); }
.dx-video figcaption { margin-block-start: var(--space-3); font-size: var(--text-sm); }
.dx-video figcaption span { color: var(--text-muted); }
.dx-transcript, .dx-described { margin-block-start: var(--space-3); border-block-start: 1px solid var(--border); }
.dx-transcript > summary, .dx-described > summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; list-style: none; cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.dx-transcript > div, .dx-described > div { padding-block-end: var(--space-3); font-size: var(--text-sm); }
.dx-transcript p + p { margin-block-start: var(--space-3); }
.dx-video-links { font-size: var(--text-sm); }
.dx-video-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* See also and pager */
.dx-see-also { padding: var(--space-4) var(--space-6); border-block: 1px solid var(--border); }
.dx-see-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dx-see-also ul { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.dx-see-also li { padding-block: var(--space-2); }
.dx-see-page { margin-inline-start: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.dx-pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-block-start: var(--space-12); }
.dx-pager a { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: var(--space-1); min-height: 64px; padding: var(--space-4) var(--space-6); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.dx-pager a:hover { border-color: var(--primary); }
.dx-pager span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dx-pager-next { text-align: end; }

/* Section index */
.dx-list-title { margin-block-start: var(--space-12); font-size: var(--text-xl); }
.dx-pagelist { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.dx-pagelist li { padding-block: var(--space-4); border-block-start: 1px solid var(--border); }
.dx-pagelist li:last-child { border-block-end: 1px solid var(--border); }
.dx-pagelist h3 { font-size: var(--text-lg); }
.dx-pagelist p { margin-block-start: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }

@container (min-width: 37em) {
  .dx-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dx-pager-prev:only-child, .dx-pager-next:only-child { grid-column: auto; }
  .dx-pager-next:only-child { grid-column: 2; }
  .dx-main h1 { font-size: var(--text-4xl); }
}
@container (min-width: 50em) {
  .dx-top { grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); align-items: center; }
  .dx-drawer { display: none; }
  .dx-shell { grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .dx-side { display: block; position: sticky; inset-block-start: var(--space-6); max-height: calc(100vh - 3rem); overflow-y: auto; padding-inline-end: var(--space-2); }
  .dx-has-toc .dx-toc-mobile { display: block; }
}
@container (min-width: 69em) {
  .dx-shell.dx-has-toc { grid-template-columns: 15.5rem minmax(0, 1fr) 13.5rem; }
  .dx-has-toc .dx-toc-mobile { display: none; }
  .dx-toc { display: block; position: sticky; inset-block-start: var(--space-6); max-height: calc(100vh - 3rem); overflow-y: auto; font-size: var(--text-sm); }
  .dx-toc > nav > p { font-weight: 700; margin-block-end: var(--space-2); }
  .dx-toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--border); }
  .dx-toc a { display: block; padding: var(--space-1) var(--space-3); color: var(--text-muted); text-decoration: none; overflow-wrap: anywhere; }
  .dx-toc a:hover { color: var(--primary); }
  .dx-toc .dx-toc-3 a { padding-inline-start: var(--space-6); font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: no-preference) {
  .dx-card, .dx-pager a, .dx-tasklist a { transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease); }
  .dx-card:hover { transform: translateY(-2px); }
}
@media (forced-colors: active) {
  .dx-callout, .dx-terminal, .dx-card, .dx-table { border: 1px solid CanvasText; }
  .dx-badge { border: 1px solid CanvasText; }
  .dx-search input:focus-visible, .dx-table:focus-visible, .dx-terminal-body:focus-visible, [tabindex]:focus-visible, .dx-anchor:focus-visible, video:focus-visible { outline: 2px solid CanvasText; outline-offset: 3px; box-shadow: none; }
  .dx-terminal-body:focus-visible { outline-offset: -4px; }
  .dx-anchor:focus-visible { opacity: 1; }
}
@media print {
  .dx-side, .dx-drawer, .dx-toc, .dx-top, .dx-pager, .dx-search { display: none; }
}