/* ChartScript documentation site (/chart-script-docs/..., src/docs-site). Theme tokens only (web/brand/theme.css +
   atlas-tokens.css): dark Holo Glass by default, light under data-theme="light", high contrast follows. No inline styles
   anywhere (the pages run under style-src 'self'). Code colours = the editor's token colours (cs-editor.css --cs-tok-*). */

.dc {
  --dc-top-h: 60px; --dc-nav-w: 268px; --dc-toc-w: 220px; --dc-max: 780px;
  --dc-code-font: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --cs-tok-kw: var(--a-accent); --cs-tok-type: var(--a-cyan); --cs-tok-ns: var(--cd-pink, var(--a-accent)); --cs-tok-num: var(--a-warn);
  --cs-tok-str: var(--a-up); --cs-tok-colour: var(--cd-pink, var(--a-warn)); --cs-tok-comment: var(--a-fg-3); --cs-tok-op: var(--a-fg-2);
  --cs-tok-ann: var(--a-warn); --cs-tok-fn: var(--a-cyan); --cs-tok-bad: var(--a-down);
  margin: 0; background: var(--a-bg); color: var(--a-fg-2);
  font-family: var(--a-sans, 'Sora', system-ui, sans-serif); font-size: var(--a-fs-lg); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:root[data-theme="light"] .dc {
  --cs-tok-type: var(--a-obh-bid); --cs-tok-fn: var(--a-obh-bid); --cs-tok-str: var(--a-up-soft); --cs-tok-num: var(--a-ser-6);
  --cs-tok-ann: var(--a-warn-soft); --cs-tok-ns: var(--a-ser-3); --cs-tok-colour: var(--a-ser-3); --cs-tok-bad: var(--a-down-soft);
}
.dc *, .dc *::before, .dc *::after { box-sizing: border-box; }
.dc a { color: var(--a-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dc a:hover { color: var(--a-accent-hover, var(--a-accent)); }
.dc :focus-visible { outline: var(--a-ring-w, 2px) solid var(--a-focus); outline-offset: var(--a-ring-off, 2px); border-radius: var(--a-r-sm); }
.dc-skip { position: absolute; inset-inline-start: 16px; top: -48px; z-index: 30; padding: 8px 14px; border-radius: var(--a-r-md); background: var(--a-panel); color: var(--a-fg-1); border: 1px solid var(--a-line-2); }
.dc-skip:focus { top: 12px; }

/* ---- header ---- */
.dc-top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--a-bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--a-line-1); }
.dc-top::after { content: ''; display: block; height: 1px; opacity: .5; background: var(--a-holo); }
.dc-top-in { height: var(--dc-top-h); display: flex; align-items: center; gap: 14px; padding-inline: 20px; max-width: 1560px; margin: 0 auto; }
.dc-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--a-fg-1) !important; text-decoration: none; font-weight: var(--a-fw-semibold); font-size: var(--a-fs-lg); letter-spacing: -.01em; }
.dc-brand img { display: block; }
/* The mark for the theme (sweep 2026-10-19 S6): the pastel mark is drawn for dark backgrounds and all but vanishes on light, so the
   light theme shows the tile, as on the home page and in the site footer (the same pair as legal.css). */
.dc-brand .lg-mark-l { display: none; border-radius: var(--a-r-md); }
:root[data-theme="light"] .dc-brand .lg-mark-d { display: none; }
:root[data-theme="light"] .dc-brand .lg-mark-l { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) .dc-brand .lg-mark-d { display: none; }
  :root:not([data-theme="dark"]):not([data-theme="light"]) .dc-brand .lg-mark-l { display: block; }
}
.dc-product { color: var(--a-fg-1) !important; text-decoration: none; font-weight: var(--a-fw-semibold); padding-inline-start: 14px; border-inline-start: 1px solid var(--a-line-2); white-space: nowrap; }
.dc-product span { color: var(--a-fg-3); font-weight: var(--a-fw-regular); }
.dc-search { position: relative; flex: 1 1 auto; max-width: 440px; margin-inline-start: auto; }
.dc-search input { width: 100%; height: 36px; padding: 0 34px 0 12px; border-radius: var(--a-r-md); border: 1px solid var(--a-line-2); background: var(--a-panel); color: var(--a-fg-1); font: inherit; font-size: var(--a-fs-md); }
.dc-search input::placeholder { color: var(--a-fg-3); }
.dc-search input:focus { border-color: var(--a-accent); }
.dc-kbd { position: absolute; inset-inline-end: 8px; top: 8px; min-width: 20px; height: 20px; line-height: 18px; text-align: center; border: 1px solid var(--a-line-2); border-radius: var(--a-r-sm); color: var(--a-fg-3); font-size: var(--a-fs-sm); font-family: inherit; pointer-events: none; }
.dc-results { position: absolute; inset-inline: 0; top: 42px; max-height: min(70vh, 520px); overflow-y: auto; background: var(--a-raised); border: 1px solid var(--a-line-2); border-radius: var(--a-r-lg); box-shadow: var(--a-sh-3); padding: 6px; z-index: 40; }
.dc-results[hidden] { display: none; }
.dc-res { display: block; padding: 8px 10px; border-radius: var(--a-r-md); text-decoration: none; color: var(--a-fg-2) !important; }
.dc-res[aria-selected="true"], .dc-res:hover { background: var(--a-accent-t1); }
.dc-res b { display: block; color: var(--a-fg-1); font-weight: var(--a-fw-semibold); font-size: var(--a-fs-md); }
.dc-res i { font-style: normal; color: var(--a-fg-3); font-size: var(--a-fs-sm); }
.dc-res span { display: block; font-size: var(--a-fs-md); color: var(--a-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-res mark { background: var(--a-accent-t2); color: inherit; border-radius: var(--a-r-sm); }
.dc-res-none { padding: 10px; color: var(--a-fg-3); font-size: var(--a-fs-md); }
.dc-theme { width: 36px; height: 36px; border-radius: var(--a-r-md); border: 1px solid var(--a-line-2); background: transparent; color: var(--a-fg-2); cursor: pointer; display: grid; place-items: center; flex: none; }
.dc-theme span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.dc-theme:hover { color: var(--a-fg-1); background: var(--a-glass); }
.dc-cta { flex: none; height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: var(--a-r-md); background: var(--a-accent); color: var(--a-on-accent) !important; text-decoration: none; font-weight: var(--a-fw-semibold); font-size: var(--a-fs-md); }
.dc-cta:hover { background: var(--a-accent-hover); }
.dc-menu { display: none; width: 36px; height: 36px; border: 1px solid var(--a-line-2); border-radius: var(--a-r-md); background: transparent; cursor: pointer; flex: none; position: relative; }
.dc-menu span, .dc-menu span::before, .dc-menu span::after { position: absolute; inset-inline-start: 9px; width: 16px; height: 2px; background: var(--a-fg-2); border-radius: var(--a-r-sm); content: ''; }
.dc-menu span { top: 16px; }
.dc-menu span::before { inset-inline-start: 0; top: -5px; }
.dc-menu span::after { inset-inline-start: 0; top: 5px; }

/* ---- layout ---- */
.dc-layout { display: grid; grid-template-columns: var(--dc-nav-w) minmax(0, 1fr) var(--dc-toc-w); max-width: 1560px; margin: 0 auto; min-height: calc(100vh - var(--dc-top-h)); }
.dc-nav { position: sticky; top: calc(var(--dc-top-h) + 1px); align-self: start; height: calc(100vh - var(--dc-top-h) - 1px); overflow-y: auto; padding: 22px 12px 40px 20px; border-inline-end: 1px solid var(--a-line-1); font-size: var(--a-fs-md); scrollbar-width: thin; }
.dc-nav ul { list-style: none; margin: 2px 0 8px; padding: 0; padding-inline-start: 10px; border-inline-start: 1px solid var(--a-line-1); }
.dc-nav a { display: block; padding: 4px 10px; border-radius: var(--a-r-sm); color: var(--a-fg-3); text-decoration: none; line-height: 1.45; }
.dc-nav a:hover { color: var(--a-fg-1); background: var(--a-glass); }
/* "true" = the section head on its child pages, e.g. Error messages on /errors/CS1001 (sweep 2026-10-19 S230) */
.dc-nav a[aria-current="page"], .dc-nav a[aria-current="true"] { color: var(--a-fg-1); background: var(--a-accent-t1); box-shadow: inset 2px 0 0 var(--a-accent); }
.dc-nav code { font-family: var(--dc-code-font); font-size: var(--a-fs-md); }
.dc-nav-one > a, .dc-nav summary { font-weight: var(--a-fw-semibold); color: var(--a-fg-1); }
.dc-nav-one { margin: 2px 0; }
.dc-nav summary { list-style: none; cursor: pointer; padding: 5px 10px; border-radius: var(--a-r-sm); display: flex; align-items: center; justify-content: space-between; }
.dc-nav summary::-webkit-details-marker { display: none; }
.dc-nav summary::after { content: ''; width: 7px; height: 7px; border-inline-end: 1.5px solid var(--a-fg-3); border-bottom: 1.5px solid var(--a-fg-3); transform: rotate(-45deg); transition: transform .15s; }
.dc-nav details[open] > summary::after { transform: rotate(45deg); }
/* sweep 2026-10-19 S226: in RTL the logical border-inline-end lands on the left, so the LTR rotations pointed a closed
   group down and an open one left. Swap them so closed points left (the RTL "forward") and open points down; the
   current-page bar moves to the inline-start (right) edge too. */
[dir="rtl"] .dc-nav summary::after { transform: rotate(45deg); }
[dir="rtl"] .dc-nav details[open] > summary::after { transform: rotate(-45deg); }
[dir="rtl"] .dc-nav a[aria-current="page"], [dir="rtl"] .dc-nav a[aria-current="true"] { box-shadow: inset -2px 0 0 var(--a-accent); }
.dc-nav summary:hover { background: var(--a-glass); }
.dc-nav-group.is-ref ul { max-height: 50vh; overflow-y: auto; }

.dc-main { min-width: 0; padding: 26px 44px 60px; }
.dc-article { max-width: var(--dc-max); }
.dc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; font-size: var(--a-fs-md); color: var(--a-fg-3); }
.dc-crumbs li + li::before { content: '/'; margin-inline-end: 6px; color: var(--a-fg-4); }
.dc-crumbs a { color: var(--a-fg-3); text-decoration: none; }
.dc-crumbs a:hover { color: var(--a-fg-1); }
.dc-article h1 { margin: 0 0 8px; color: var(--a-fg-1); font-size: var(--a-fs-display-s); line-height: 1.2; letter-spacing: -.02em; font-weight: var(--a-fw-semibold); }
.dc-article h1 code { font-family: var(--dc-code-font); font-size: .9em; }
.dc-lede { margin: 0 0 26px; font-size: var(--a-fs-lede); color: var(--a-fg-2); line-height: 1.6; }
.dc-lede-2 { font-size: var(--a-fs-lg); }
.dc-article h2, .dc-article h3, .dc-article h4 { position: relative; color: var(--a-fg-1); letter-spacing: -.01em; scroll-margin-top: calc(var(--dc-top-h) + 16px); }
.dc-article h2 { margin: 44px 0 12px; font-size: var(--a-fs-2xl); line-height: 1.3; padding-top: 10px; border-top: 1px solid var(--a-line-1); }
.dc-article h3 { margin: 30px 0 8px; font-size: var(--a-fs-xl); line-height: 1.4; }
.dc-article h4 { margin: 22px 0 6px; font-size: var(--a-fs-lg); }
.dc-anchor { position: absolute; inset-inline-start: -22px; padding-inline-end: 6px; color: var(--a-fg-4) !important; text-decoration: none; opacity: 0; font-weight: var(--a-fw-regular); }
.dc-article h2:hover .dc-anchor, .dc-article h3:hover .dc-anchor, .dc-anchor:focus { opacity: 1; }
.dc-article p, .dc-article li { color: var(--a-fg-2); }
.dc-article strong { color: var(--a-fg-1); font-weight: var(--a-fw-semibold); }
.dc-article ul, .dc-article ol { padding-inline-start: 24px; }
.dc-article li { margin: 4px 0; }
.dc-article hr { border: 0; border-top: 1px solid var(--a-line-1); margin: 32px 0; }
.dc-article :not(pre) > code { font-family: var(--dc-code-font); font-size: .88em; padding: 1px 5px; border-radius: var(--a-r-sm); background: var(--a-glass-2); color: var(--a-fg-1); border: 1px solid var(--a-line-1); overflow-wrap: anywhere; }
.dc-article kbd { font-family: inherit; font-size: var(--a-fs-sm); padding: 1px 6px; border: 1px solid var(--a-line-2); border-bottom-width: 2px; border-radius: var(--a-r-sm); background: var(--a-panel); color: var(--a-fg-1); }
.dc-article var { font-style: normal; color: var(--a-accent); }
.dc-article blockquote { margin: 18px 0; padding: 2px 18px; border-inline-start: 3px solid var(--a-line-3); color: var(--a-fg-3); }

/* figures */
.dc-fig { margin: 22px 0; }
.dc-fig img { display: block; max-width: 100%; height: auto; border-radius: var(--a-r-lg); border: 1px solid var(--a-line-2); box-shadow: var(--a-sh-2); }
.dc-fig figcaption { margin-top: 8px; font-size: var(--a-fs-md); color: var(--a-fg-3); text-align: center; }

/* callouts */
.dc-callout { margin: 20px 0; padding: 12px 16px; border-radius: var(--a-r-lg); border: 1px solid var(--a-line-2); border-inline-start-width: 3px; background: var(--a-panel); }
.dc-callout > p, .dc-callout li { margin: 6px 0; font-size: var(--a-fs-md); }
.dc-callout-t { font-weight: var(--a-fw-semibold); font-size: var(--a-fs-sm) !important; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 2px !important; }
.dc-note { border-inline-start-color: var(--a-accent); }
.dc-note .dc-callout-t { color: var(--a-accent); }
.dc-tip { border-inline-start-color: var(--a-up); }
.dc-tip .dc-callout-t { color: var(--a-up); }
.dc-warning { border-inline-start-color: var(--a-warn); }
.dc-warning .dc-callout-t { color: var(--a-warn); }
:root[data-theme="light"] .dc-tip .dc-callout-t { color: var(--a-up-soft); }
:root[data-theme="light"] .dc-warning .dc-callout-t { color: var(--a-warn-soft); }

/* tables */
.dc-table { margin: 18px 0; overflow-x: auto; border: 1px solid var(--a-line-1); border-radius: var(--a-r-lg); }
.dc-table table { width: 100%; border-collapse: collapse; font-size: var(--a-fs-md); font-variant-numeric: tabular-nums; }
.dc-table th, .dc-table td { padding: 8px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--a-line-1); }
.dc-table thead th { background: var(--a-panel); color: var(--a-fg-1); font-weight: var(--a-fw-semibold); font-size: var(--a-fs-md); white-space: nowrap; }
.dc-table tbody tr:last-child > * { border-bottom: 0; }
.dc-table tbody th { color: var(--a-fg-1); font-weight: var(--a-fw-medium); }
.dc-table tr:target { background: var(--a-accent-t1); }
.dc-al-center { text-align: center !important; }
.dc-al-right { text-align: end !important; }
.dc-hint { display: block; color: var(--a-fg-3); font-weight: var(--a-fw-regular); font-size: var(--a-fs-sm); }
.dc-def { display: block; color: var(--a-fg-3); font-size: var(--a-fs-sm); }

/* code blocks */
.dc-code { margin: 18px 0; border: 1px solid var(--a-line-2); border-radius: var(--a-r-lg); background: var(--a-sunken); overflow: hidden; }
.dc-code-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--a-line-1); background: var(--a-panel); font-size: var(--a-fs-sm); }
.dc-code-lang { color: var(--a-fg-3); font-weight: var(--a-fw-semibold); letter-spacing: .04em; text-transform: uppercase; font-size: var(--a-fs-xs); }
.dc-code-tag { padding: 1px 8px; border-radius: var(--a-r-pill); background: var(--a-glass-2); color: var(--a-fg-3); }
.dc-code-fails { background: var(--a-down-t1); color: var(--a-down); }
.dc-code-fails a, .dc-code-warns a { color: inherit; }
.dc-code-warns { background: var(--a-warn-t1); color: var(--a-warn); }
.dc-code-sp { flex: 1; }
.dc-copy, .dc-openbtn { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--a-r-sm); border: 1px solid var(--a-line-2); background: transparent; color: var(--a-fg-2) !important; font: inherit; font-size: var(--a-fs-sm); cursor: pointer; text-decoration: none; white-space: nowrap; }
.dc-copy:hover, .dc-openbtn:hover { color: var(--a-fg-1) !important; background: var(--a-glass-2); }
.dc-openbtn { border-color: var(--a-accent-t3); color: var(--a-accent) !important; }
.dc-copy.is-done { color: var(--a-up) !important; border-color: var(--a-up-t2); }
.dc-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font-family: var(--dc-code-font); font-size: var(--a-fs-md); line-height: 1.6; color: var(--a-fg-1); tab-size: 4; }
.dc-code pre code { font-family: inherit; white-space: pre; }
/* A line wider than the block scrolls sideways, and a fade on the side that has more says so (screenshot review 2026-10-19: code
   ran off the edge with no cue). cd-docs.js marks the block is-more-r / is-more-l from the scroll position; code is always laid
   out left to right (below), so the sides are physical in Arabic too. The fade is a mask, so it works on any theme's ground. */
.dc-code pre { scrollbar-width: thin; }
.dc-code.is-more-r pre { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.dc-code.is-more-l pre { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.dc-code.is-more-l.is-more-r pre { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
/* Code reads left to right in every interface language: an Arabic page (html dir=rtl) right-aligned the blocks and moved
   a line's punctuation to its front ("chartscript 1@//"). The article itself is marked dir=ltr lang=en by site.ts
   (sweep 2026-10-19 S224); this holds for code anywhere else on the page too. */
.dc pre, .dc code { direction: ltr; unicode-bidi: isolate; text-align: left; }
.t-kw { color: var(--cs-tok-kw); } .t-ty { color: var(--cs-tok-type); } .t-ns { color: var(--cs-tok-ns); } .t-nu { color: var(--cs-tok-num); }
.t-st { color: var(--cs-tok-str); } .t-co { color: var(--cs-tok-colour); } .t-cm { color: var(--cs-tok-comment); font-style: italic; } .t-op { color: var(--cs-tok-op); }
.t-an { color: var(--cs-tok-ann); } .t-fn { color: var(--cs-tok-fn); } .t-pr { color: var(--a-fg-1); } .t-bad { color: var(--cs-tok-bad); text-decoration: underline wavy; }

/* cards (section and reference indexes) */
.dc-cards { list-style: none; padding: 0 !important; margin: 20px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dc-cards.is-compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.dc-cards li { margin: 0; }
.dc-cards a { display: block; height: 100%; padding: 14px 16px; border-radius: var(--a-r-lg); border: 1px solid var(--a-line-2); background: var(--a-panel); text-decoration: none; transition: border-color .15s, transform .15s; }
.dc-cards a:hover { border-color: var(--a-accent); transform: translateY(-1px); }
.dc-card-t { display: block; color: var(--a-fg-1); font-weight: var(--a-fw-semibold); }
.dc-cards.is-compact .dc-card-t { font-family: var(--dc-code-font); font-size: var(--a-fs-md); }
.dc-card-d { display: block; margin-top: 4px; color: var(--a-fg-3); font-size: var(--a-fs-md); line-height: 1.5; }

/* reference */
.dc-refidx ul { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; }
.dc-refidx li { margin: 0; }
.dc-refidx a { text-decoration: none; }
.dc-ref { margin: 18px 0; padding: 4px 18px 10px; border: 1px solid var(--a-line-1); border-radius: var(--a-r-lg); background: var(--a-panel); scroll-margin-top: calc(var(--dc-top-h) + 16px); }
.dc-ref:target { border-color: var(--a-accent); box-shadow: 0 0 0 3px var(--a-accent-t1); }
.dc-ref.is-off { opacity: .8; }
.dc-ref h3 { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 4px; font-size: var(--a-fs-lg); }
.dc-ref h3 code { font-family: var(--dc-code-font); }
.dc-ref h3 .dc-anchor { inset-inline-start: -16px; }
.dc-kind { font-size: var(--a-fs-xs); font-weight: var(--a-fw-medium); text-transform: uppercase; letter-spacing: .06em; color: var(--a-fg-3); }
.dc-sig pre { margin: 8px 0; padding: 10px 12px; border-radius: var(--a-r-md); background: var(--a-sunken); border: 1px solid var(--a-line-1); overflow-x: auto; font-family: var(--dc-code-font); font-size: var(--a-fs-md); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-status { color: var(--a-warn); font-weight: var(--a-fw-medium); }
.dc-ret, .dc-since, .dc-ex-t { font-size: var(--a-fs-md); }
.dc-since { color: var(--a-fg-4); margin: 6px 0 0; font-size: var(--a-fs-sm); }
.dc-ex-t { margin: 14px 0 -8px; color: var(--a-fg-3); font-weight: var(--a-fw-semibold); }
.dc-params { margin: 10px 0; }

/* error pages */
.dc-errmsg { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--a-r-lg); background: var(--a-panel); border: 1px solid var(--a-line-2); color: var(--a-fg-1); font-size: var(--a-fs-lg); }
.dc-sev { font-size: var(--a-fs-xs); text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: var(--a-r-pill); font-weight: var(--a-fw-semibold); }
.dc-sev-error { background: var(--a-down-t1); color: var(--a-down); }
.dc-sev-warning { background: var(--a-warn-t1); color: var(--a-warn); }
.dc-sev-hint { background: var(--a-accent-t1); color: var(--a-accent); }

/* prev / next, foot note */
.dc-pn { max-width: var(--dc-max); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; }
.dc-pn a { display: block; padding: 12px 16px; border-radius: var(--a-r-lg); border: 1px solid var(--a-line-2); text-decoration: none; color: var(--a-fg-1) !important; font-weight: var(--a-fw-semibold); }
.dc-pn a:hover { border-color: var(--a-accent); }
.dc-pn a span { display: block; color: var(--a-fg-3); font-weight: var(--a-fw-regular); font-size: var(--a-fs-sm); }
.dc-next { text-align: end; }
.dc-foot-note { max-width: var(--dc-max); margin-top: 28px; color: var(--a-fg-4); font-size: var(--a-fs-sm); }

/* on this page */
.dc-toc { position: sticky; top: calc(var(--dc-top-h) + 1px); align-self: start; max-height: calc(100vh - var(--dc-top-h) - 1px); overflow-y: auto; padding: 28px 16px 40px; font-size: var(--a-fs-md); scrollbar-width: thin; }
.dc-toc-t { margin: 0 0 8px; color: var(--a-fg-1); font-weight: var(--a-fw-semibold); font-size: var(--a-fs-sm); text-transform: uppercase; letter-spacing: .06em; }
.dc-toc ul { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--a-line-1); }
.dc-toc li a { display: block; padding: 3px 12px; color: var(--a-fg-3); text-decoration: none; line-height: 1.45; margin-inline-start: -1px; border-inline-start: 1px solid transparent; }
.dc-toc li.l3 a { padding-inline-start: 24px; }
.dc-toc li a:hover { color: var(--a-fg-1); }
.dc-toc li a.is-on { color: var(--a-accent); border-inline-start-color: var(--a-accent); }

/* ---- narrower screens ---- */
@media (max-width: 1200px) {
  .dc-layout { grid-template-columns: var(--dc-nav-w) minmax(0, 1fr); }
  .dc-toc { display: none; }
}
@media (max-width: 900px) {
  .dc { --dc-top-h: 56px; }
  .dc-layout { grid-template-columns: minmax(0, 1fr); }
  .dc-menu { display: inline-block; }
  .dc-nav { position: fixed; inset-block: calc(var(--dc-top-h) + 1px) 0; inset-inline-start: 0; width: min(86vw, 320px); height: auto; z-index: 25;
    background: var(--a-bg); box-shadow: var(--a-sh-3); transform: translateX(-105%); transition: transform .2s; visibility: hidden; }
  [dir="rtl"] .dc-nav { transform: translateX(105%); }
  .dc.is-nav-open .dc-nav { transform: none; visibility: visible; }
  .dc-main { padding: 20px 16px 48px; }
  .dc-anchor { display: none; }
  .dc-product { display: none; }
}
@media (max-width: 640px) {
  .dc-top-in { gap: 8px; padding-inline: 12px; }
  .dc-brand span, .dc-cta, .dc-kbd, .dc-acct { display: none; }
  .dc-search { max-width: none; }
  .dc-pn { grid-template-columns: 1fr; }
  .dc-code pre { font-size: var(--a-fs-sm); padding: 12px; }
  .dc-ref { padding: 2px 12px 8px; }
}
@media (prefers-reduced-motion: reduce) { .dc-nav, .dc-cards a { transition: none; } }

/* screenshots with a light twin: the one matching the theme */
.dc-img-l { display: none !important; }
:root[data-theme="light"] .dc-img-l { display: block !important; }
:root[data-theme="light"] .dc-img-d { display: none !important; }