/* Inter variable font — bundled alongside this stylesheet. One file covers all weights 100–900; weight: bold and font-weight: 600 work without extra HTTP requests. Italic ships as a separate variable font for the same weight range. */ @font-face { font-family: 'Inter'; src: url('InterVariable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('InterVariable-Italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } /* Light theme is the default; dark theme is opt-in via data-theme="dark" on . The inline script in HtmlPreview.Wrap sets that attribute before the body renders, so there's no flash on page load. */ :root { --fg: #1f2328; --muted: #656d76; --border: #d0d7de; --code-bg: #f6f8fa; --link: #0969da; --bg: #ffffff; --header-bg: #ffffff; --header-fg: #1f2328; --header-border: #d0d7de; --nav-current: #0969da; } [data-theme="dark"] { --fg: #e6edf3; --muted: #c0c8d2; --border: #30363d; --code-bg: #242526; --link: #58a6ff; --bg: #1b1b1d; --header-bg: #242526; --header-fg: #e6edf3; --header-border: #30363d; --nav-current: #1f6feb; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; line-height: 1.55; color: var(--fg); background: var(--bg); } /* === Top header === */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 1.5rem; padding: 0.6rem 1.5rem; background: var(--header-bg); color: var(--header-fg); border-bottom: 1px solid var(--header-border); min-height: 56px; } .header-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; } .header-logo { display: block; height: 28px; width: auto; } .header-logo-light { display: block; } .header-logo-dark { display: none; } [data-theme="dark"] .header-logo-light { display: none; } [data-theme="dark"] .header-logo-dark { display: block; } .header-title { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; color: inherit; } .header-brand:hover .header-title { color: var(--link); } /* Composer version chip — small monospace pill next to the wordmark. Communicates which Composer build this documentation set matches. Sourced from SDK/version.txt at split-time; rendered on every page so readers always know what they're reading against. */ .header-version { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.78rem; color: var(--muted); background: var(--code-bg); border: 1px solid var(--border); padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; user-select: all; } @media (max-width: 720px) { /* Hide on phones — the wordmark + actions already crowd the header. */ .header-version { display: none; } } .header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .header-doc-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--header-fg); text-decoration: none; font-size: 0.9rem; padding: 0.4rem 0.7rem; border-radius: 6px; white-space: nowrap; } .header-doc-link:hover { color: var(--link); background: var(--code-bg); } .external-link-icon { width: 0.85em; height: 0.85em; flex-shrink: 0; } .header-search-trigger { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--code-bg); color: var(--muted); border: 1px solid var(--header-border); border-radius: 6px; padding: 0.4rem 0.7rem; font-family: inherit; font-size: 0.85rem; cursor: pointer; min-width: 240px; } .header-search-trigger:hover { color: var(--fg); border-color: var(--link); } .search-icon { font-size: 1em; } .search-label { flex: 1; text-align: left; } .search-shortcut { background: var(--bg); border: 1px solid var(--header-border); border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.7rem; font-family: inherit; color: var(--muted); } .theme-toggle { background: transparent; color: var(--header-fg); border: 1px solid transparent; border-radius: 6px; padding: 0.35rem 0.55rem; cursor: pointer; font-size: 1rem; line-height: 1; } .theme-toggle:hover { background: var(--code-bg); border-color: var(--header-border); } .theme-icon-dark { display: none; } [data-theme="dark"] .theme-icon-light { display: none; } [data-theme="dark"] .theme-icon-dark { display: inline; } /* === Three-column layout below the header === No max-width — the grid spans the full viewport so the left nav hugs the left edge, the right TOC hugs the right edge, and the centre content cell expands to fill every pixel between them on wide monitors. Padding (matching the header's 1.5rem horizontal padding) keeps content from touching the viewport edge. */ .site-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 260px; gap: 2rem; margin: 0; padding: 0 1.5rem; } /* === Left navigation === */ .site-nav { position: sticky; top: 56px; /* below the sticky header */ align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; padding: 1.5rem 0.5rem 2rem 0; font-size: 0.9rem; background: var(--bg); } /* Home link at the very top of the left nav. Sits above the manual list, links to the landing page, and gets the .current highlight when the visitor is on the landing page itself. */ .nav-home { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; margin: 0 0 0.6rem; border-radius: 4px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 0.88rem; } .nav-home:hover { background: var(--code-bg); } .nav-home.current { background: var(--code-bg); color: var(--nav-current); } .nav-home-icon { width: 18px; height: 18px; flex-shrink: 0; } /* Each manual's page list lives inside a
so it collapses to a single line. */ .nav-section { margin: 0.25rem 0; } .nav-section[open] > .nav-manual { color: var(--fg); } .nav-manual { font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); cursor: pointer; list-style: none; /* hide default disclosure marker */ padding: 0.4rem 0.5rem; border-radius: 4px; user-select: none; position: relative; padding-left: 1.5rem; /* room for the custom arrow */ } .nav-manual::-webkit-details-marker { display: none; } /* Safari / Chrome */ .nav-manual::before { content: '▸'; position: absolute; left: 0.4rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--muted); transition: transform 0.15s; } .nav-section[open] > .nav-manual::before { transform: translateY(-50%) rotate(90deg); } .nav-manual:hover { background: var(--code-bg); color: var(--fg); } .nav-pages { list-style: none; padding: 0; margin: 0 0 0.5rem 0.6rem; } .nav-pages li { margin: 0; } .nav-pages li a { display: block; padding: 0.3rem 0.6rem; color: var(--fg); text-decoration: none; border-radius: 4px; font-size: 0.88rem; line-height: 1.35; } .nav-pages li a:hover { background: var(--code-bg); } .nav-pages li a.current { background: var(--nav-current); color: white; font-weight: 500; } /* === Optional third-level grouping (Inputs / Operators / Targets manuals) === Each category is its own collapsible
; nesting indents one rung beyond the manual's own page list so the hierarchy reads cleanly. */ .nav-subsection { margin: 0.1rem 0 0.1rem 0.6rem; } .nav-category { list-style: none; cursor: pointer; padding: 0.25rem 0.6rem 0.25rem 1.4rem; font-size: 0.85rem; color: var(--muted); border-radius: 4px; position: relative; user-select: none; } .nav-category::-webkit-details-marker { display: none; } .nav-category::before { content: ''; position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); border-left: 4px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s ease; } .nav-subsection[open] > .nav-category::before { transform: translateY(-50%) rotate(90deg); } .nav-subsection[open] > .nav-category { color: var(--fg); } .nav-category:hover { background: var(--code-bg); color: var(--fg); } .nav-pages-nested { margin-left: 0.6rem; } /* === Content === */ .site-main { min-width: 0; padding: 1.5rem 0 4rem; } .site-main article > *:first-child { margin-top: 0; } /* Breadcrumb above the page H1: "Manual / Page" trail. */ .site-main .breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; } .site-main .breadcrumb a { color: var(--muted); text-decoration: none; } .site-main .breadcrumb a:hover { color: var(--link); text-decoration: underline; } .site-main .breadcrumb-sep { margin: 0 0.3em; color: var(--border); } .site-main .breadcrumb-current { color: var(--fg); } /* Home icon — first crumb is a small house glyph linking back to the landing page. */ .site-main .breadcrumb-home { display: inline-flex; align-items: center; vertical-align: -2px; } .site-main .breadcrumb-home:hover { text-decoration: none; } .site-main .breadcrumb-home-icon { width: 16px; height: 16px; display: block; } .site-main h1:first-of-type { margin-top: 0.2rem; } /* Jump-to-letter bar — emitted at the top of long alphabetised catalogues (the Enums catalogue, etc.) so readers can skip to a letter without scrolling. Matching markers slot in before each first-of-letter heading. */ .site-main .jump-bar { margin: 1rem 0 1.5rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.95em; line-height: 1.6; background: var(--code-bg); } .site-main .jump-bar-label { font-weight: 600; color: var(--muted); margin-right: 0.4rem; } .site-main .jump-bar a { display: inline-block; min-width: 1.4em; padding: 0 0.25em; text-align: center; color: var(--link); text-decoration: none; font-weight: 600; } .site-main .jump-bar a:hover { text-decoration: underline; } /* Empty letter-anchor marker. scroll-margin-top leaves breathing room above the first-of-letter heading after a jump so it doesn't hug the top of the viewport (which would feel buried under the sticky site header). */ .site-main .letter-anchor { display: block; scroll-margin-top: 80px; } /* Previous / Next pager — emitted at the bottom of every article in the reading order. Two columns; either side may be a placeholder when the current page is the first or last in the flow. */ .site-main .site-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .site-main .pager-link { display: flex; flex-direction: column; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--fg); background: var(--bg); transition: border-color 0.12s, color 0.12s; } .site-main .pager-link:hover { border-color: var(--link); color: var(--link); text-decoration: none; } .site-main .pager-empty { visibility: hidden; } .site-main .pager-prev { text-align: left; } .site-main .pager-next { text-align: right; } .site-main .pager-direction { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem; font-weight: 500; } .site-main .pager-title { font-weight: 600; line-height: 1.3; } .site-main h1, .site-main h2, .site-main h3, .site-main h4, .site-main h5, .site-main h6 { font-weight: 600; line-height: 1.25; margin-top: 1.5em; margin-bottom: 0.5em; } .site-main h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); } .site-main h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); } .site-main h3 { font-size: 1.25em; } .site-main h4 { font-size: 1em; } .site-main h5 { font-size: 0.875em; color: var(--muted); } .site-main a { color: var(--link); text-decoration: none; } .site-main a:hover { text-decoration: underline; } .site-main p, .site-main ul, .site-main ol { margin: 0 0 1em; } .site-main ul, .site-main ol { padding-left: 2em; } .site-main li + li { margin-top: 0.25em; } .site-main code { font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.875em; background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 4px; } /* Code blocks. The hljs theme stylesheet sets the inner 's background and syntax colors. We just give the 
 wrapper a rounded corner and
   keep it as a positioning anchor for the copy button. */
.site-main pre {
    margin: 0 0 1em;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    font-size: 0.875em;
    line-height: 1.45;
}
.site-main pre code,
.site-main pre code.hljs {
    background: var(--code-bg);
    border-radius: 6px;
    padding: 1em;
    font-size: inherit;
    display: block;
    overflow-x: auto;
}

.copy-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    line-height: 0;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
}
.site-main pre:hover .copy-button { opacity: 1; }
.copy-button:hover { color: var(--fg); }
.copy-button.copied { color: #2ea043; opacity: 1; }
.site-main blockquote {
    border-left: 4px solid var(--border);
    margin: 0 0 1em;
    padding: 0 1em;
    color: var(--muted);
}
/* GitHub-style alerts (> [!NOTE], > [!WARNING], etc.) rendered by MarkdownPipelineBuilder().UseAlertBlocks() */
.site-main .markdown-alert {
    border-left: 4px solid var(--border);
    border-radius: 0 6px 6px 0;
    margin: 0 0 1em;
    padding: 0.6em 1em;
    color: var(--fg);
}
.site-main .markdown-alert > :last-child { margin-bottom: 0; }
.site-main .markdown-alert-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    margin-bottom: 0.4em;
}
/* Note — blue */
.site-main .markdown-alert-note  { border-left-color: #0969da; background: #ddf4ff22; }
.site-main .markdown-alert-note .markdown-alert-title { color: #0969da; }
[data-theme="dark"] .site-main .markdown-alert-note { border-left-color: #388bfd; background: #388bfd18; }
[data-theme="dark"] .site-main .markdown-alert-note .markdown-alert-title { color: #79c0ff; }
/* Tip — green */
.site-main .markdown-alert-tip  { border-left-color: #1a7f37; background: #dcffe422; }
.site-main .markdown-alert-tip .markdown-alert-title { color: #1a7f37; }
[data-theme="dark"] .site-main .markdown-alert-tip { border-left-color: #3fb950; background: #3fb95018; }
[data-theme="dark"] .site-main .markdown-alert-tip .markdown-alert-title { color: #56d364; }
/* Important — purple */
.site-main .markdown-alert-important { border-left-color: #8250df; background: #fbefff22; }
.site-main .markdown-alert-important .markdown-alert-title { color: #8250df; }
[data-theme="dark"] .site-main .markdown-alert-important { border-left-color: #a371f7; background: #a371f718; }
[data-theme="dark"] .site-main .markdown-alert-important .markdown-alert-title { color: #d2a8ff; }
/* Warning — amber */
.site-main .markdown-alert-warning { border-left-color: #9a6700; background: #fff8c522; }
.site-main .markdown-alert-warning .markdown-alert-title { color: #9a6700; }
[data-theme="dark"] .site-main .markdown-alert-warning { border-left-color: #d29922; background: #d2992218; }
[data-theme="dark"] .site-main .markdown-alert-warning .markdown-alert-title { color: #e3b341; }
/* Caution — red */
.site-main .markdown-alert-caution { border-left-color: #cf222e; background: #ffebe922; }
.site-main .markdown-alert-caution .markdown-alert-title { color: #cf222e; }
[data-theme="dark"] .site-main .markdown-alert-caution { border-left-color: #f85149; background: #f8514918; }
[data-theme="dark"] .site-main .markdown-alert-caution .markdown-alert-title { color: #ff7b72; }
.site-main table {
    border-collapse: collapse;
    margin-bottom: 1em;
    width: 100%;
    font-size: 0.95em;
}
.site-main th, .site-main td {
    border: 1px solid var(--border);
    padding: 0.4em 0.8em;
    text-align: left;
    vertical-align: top;
}
.site-main th { background: var(--code-bg); font-weight: 600; }
.site-main tr:nth-child(2n) td { background: var(--code-bg); }

/* Property column (first column) — minimum width so short labels
   ("Gain", "Pan") don't squeeze to a single-character column when sibling
   rows have long labels. Browsers honour min-width on table cells with
   table-layout: auto, which markdown tables use by default.
   Property names rendered bold so they stand out as the row's label —
   matches the header weight, helps scanning down the column. */
.site-main table th:first-child,
.site-main table td:first-child { min-width: 12rem; }
.site-main table td:first-child,
.site-main table td:first-child code { font-weight: 700; }

/* Settings overview — fixed widths on the first three columns so long
   identifier names (LastUsedImportMediaDirectory, etc.) wrap inside their
   cell instead of dragging the table out of shape. The Description column
   stays flexible to absorb the remaining width. word-break catches names
   that are too long for the column even after wrapping at hyphens /
   camelCase boundaries. */
body[data-manual="settings"] .site-main table {
    table-layout: fixed;
    width: 100%;
}
/* "Setting" column — identifier names */
body[data-manual="settings"] .site-main table th:nth-child(1),
body[data-manual="settings"] .site-main table td:nth-child(1) {
    width: 20rem;
    word-break: break-word;
}
/* "Type" column — short type names */
body[data-manual="settings"] .site-main table th:nth-child(2),
body[data-manual="settings"] .site-main table td:nth-child(2) {
    width: 10rem;
    word-break: break-word;
}
/* "API exposed" column — narrow checkmark column */
body[data-manual="settings"] .site-main table th:nth-child(3),
body[data-manual="settings"] .site-main table td:nth-child(3) {
    width: 6rem;
    text-align: center;
}

/* PCI Express bandwidth — equal column widths within each table on the
   page so the multi-table page reads as a comparison grid rather than
   auto-sizing each column to its widest cell. With table-layout: fixed
   and no explicit per-column widths, every column splits the table width
   evenly (a 4-column table gets 25% per column, 3-column gets 33%, etc.). */
body[data-slug="operations-pci-express-bandwidth-considerations"] .site-main table {
    table-layout: fixed;
    width: 100%;
    word-break: break-word;
}

/* Composer Runtime startup arguments — first column (Short / Long flag
   names) pinned at 200px so the flag column stays compact, with the
   remaining columns splitting the leftover width. Without this the
   2-column tables stretch the flag column to ~50% and the description
   columns wrap awkwardly tight. */
body[data-slug="composer-runtime-application-startup-arguments"] .site-main table {
    table-layout: fixed;
    width: 100%;
    word-break: break-word;
}
body[data-slug="composer-runtime-application-startup-arguments"] .site-main table th:first-child,
body[data-slug="composer-runtime-application-startup-arguments"] .site-main table td:first-child {
    width: 200px;
}
/* 3-column tables (Short | Long | Effect): pin the Long-flag column to
   200px as well so the Effect column gets the rest. The :has() selector
   targets tables that have a 3rd column, leaving 2-column tables
   (Long | Effect) untouched. */
body[data-slug="composer-runtime-application-startup-arguments"] .site-main table:has(th:nth-child(3)) th:nth-child(2),
body[data-slug="composer-runtime-application-startup-arguments"] .site-main table:has(td:nth-child(3)) td:nth-child(2) {
    width: 200px;
}

/* System requirements — fixed column widths so the Windows and Linux
   tables align column-for-column even when one platform's spec text is
   longer (e.g. the Windows OS cell is much longer than the Linux Ubuntu
   string). Without table-layout: fixed both tables auto-size to their own
   widest cell and the columns visibly drift between the two. */
body[data-slug="getting-started-system-requirements"] .site-main table {
    table-layout: fixed;
    width: 100%;
}
body[data-slug="getting-started-system-requirements"] .site-main table th:nth-child(1),
body[data-slug="getting-started-system-requirements"] .site-main table td:nth-child(1) { width: 14%; }
body[data-slug="getting-started-system-requirements"] .site-main table th:nth-child(2),
body[data-slug="getting-started-system-requirements"] .site-main table td:nth-child(2) {
    width: 43%;
    word-break: break-word;
}
body[data-slug="getting-started-system-requirements"] .site-main table th:nth-child(3),
body[data-slug="getting-started-system-requirements"] .site-main table td:nth-child(3) {
    width: 43%;
    word-break: break-word;
}

/* Enums catalogue — fixed Value + Integer columns so long enum-value
   identifiers (CompositingPipelinePerformanceMode, etc.) wrap inside
   their cell instead of dragging the whole table out of shape, and the
   small integer values don't claim more horizontal space than they need.
   Description stays flexible to absorb the remaining width. */
body[data-slug="datatypes-enums"] .site-main table {
    table-layout: fixed;
    width: 100%;
}
/* "Value" column — enum identifier names */
body[data-slug="datatypes-enums"] .site-main table th:nth-child(1),
body[data-slug="datatypes-enums"] .site-main table td:nth-child(1) {
    width: 12rem;
    word-break: break-word;
}
/* "Integer" column — single-digit / small numbers */
body[data-slug="datatypes-enums"] .site-main table th:nth-child(2),
body[data-slug="datatypes-enums"] .site-main table td:nth-child(2) {
    width: 6rem;
}

/* Abstract classes catalogue — fixed Property + Type + Access columns so
   long property names wrap inside their cell instead of dragging the table
   out of shape. Description column stays flexible. */
body[data-slug="datatypes-abstract-classes"] .site-main table {
    table-layout: fixed;
    width: 100%;
}
/* "Property" column — identifier names */
body[data-slug="datatypes-abstract-classes"] .site-main table th:nth-child(1),
body[data-slug="datatypes-abstract-classes"] .site-main table td:nth-child(1) {
    width: 14em;
    word-break: break-word;
}
/* "Type" column — short type names (and a few links) */
body[data-slug="datatypes-abstract-classes"] .site-main table th:nth-child(2),
body[data-slug="datatypes-abstract-classes"] .site-main table td:nth-child(2) {
    width: 10em;
    word-break: break-word;
}
/* "Access" column — `get` / `get/set` */
body[data-slug="datatypes-abstract-classes"] .site-main table th:nth-child(3),
body[data-slug="datatypes-abstract-classes"] .site-main table td:nth-child(3) {
    width: 6em;
}
.site-main hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.site-main img { max-width: 100%; }

/* === Component hero (floating right of intro) === */
.site-main .component-hero {
    float: right;
    width: 40%;
    max-width: 420px;
    margin: 0 0 1rem 1.5rem;
    padding: 0;
}
.site-main .component-hero img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
}
@media (max-width: 720px) {
    .site-main .component-hero { float: none; width: 100%; max-width: 100%; margin: 0 0 1rem 0; }
}

/* Settings divider — clears the floating component-hero so the auto-generated
   property tables and their headings always start below the image, never wrap
   around it. Emitted by ComponentsManual just before the " - Settings"
   handoff heading. */
.site-main .settings-divider { clear: both; }

/* === Per-section screenshot (inline, between intro paragraph and property table) ===
   Figure is capped at 600px wide so a giant panel screenshot doesn't blow out the
   column. The img uses max-width: 100% (NOT width: 100%) so a smaller asset
   renders at its natural pixel size — upscaling a 422-wide screenshot to a 600-wide
   slot makes it visibly blurry. On narrow viewports the figure shrinks to fit the
   column and the img scales down with it. */
.site-main .section-screenshot {
    margin: 0.5rem 0 1rem 0;
    padding: 0;
    max-width: 600px;
}
.site-main .section-screenshot img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* === Inline diagram (line-art, architecture sketches) — capped narrower
   than the content column so a wide screen doesn't blow up a small
   diagram. Authors opt in by wrapping the image in
   
. Centred with auto margins so the figure
   sits in the middle of the content column at narrow caps. === */
.site-main .docs-diagram {
    margin: 0.75rem auto 1.25rem auto;
    padding: 0;
    max-width: 600px;
}
.site-main .docs-diagram img {
    display: block;
    width: 100%;
    height: auto;
}

/* === Right page TOC === */
.page-toc {
    position: sticky;
    top: 56px;       /* below the sticky header */
    align-self: start;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 1.5rem 0 2rem 0.5rem;
    font-size: 0.85rem;
}
.page-toc .toc-title {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.5em;
}
.page-toc ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.page-toc li { margin: 0; }
.page-toc li a {
    display: block;
    padding: 0.2rem 0.6rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.35;
    border-left: 2px solid transparent;
    margin-left: -2px;
    overflow-wrap: anywhere;
}
.page-toc li a:hover { color: var(--fg); }
.page-toc li.toc-h3 a { padding-left: 1.4rem; font-size: 0.8rem; }

/* === Search modal === */
.search-modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, 0.5); align-items: flex-start; justify-content: center;
    padding-top: 8vh;
}
.search-panel {
    background: var(--bg); color: var(--fg);
    width: min(720px, 92vw); max-height: 80vh;
    border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    display: flex; flex-direction: column; overflow: hidden;
}
.search-input {
    background: transparent; color: var(--fg);
    border: none; border-bottom: 1px solid var(--border);
    padding: 1em 1.2em; font-size: 1.1em; outline: none; font-family: inherit;
}
.search-status {
    padding: 0.5em 1.2em; font-size: 0.85em; color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.search-results { overflow-y: auto; flex: 1; }
.search-results .result {
    display: block; padding: 0.8em 1.2em; border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--fg);
}
.search-results .result:hover { background: var(--code-bg); }
.search-results .result-title { font-weight: 600; font-size: 1em; }
.search-results .result-manual { font-size: 0.78em; color: var(--muted); margin-top: 2px; }
.search-results .result-badge { display: inline-block; font-size: 0.85em; font-weight: 600; color: var(--link); border: 1px solid var(--link); border-radius: 3px; padding: 0 5px; margin-right: 6px; vertical-align: 1px; }
.search-results .result-snippet { font-size: 0.85em; margin-top: 4px; line-height: 1.4; }
.search-results .result-snippet mark { background: #fff8c5; color: #1f2328; padding: 0 2px; border-radius: 2px; }
[data-theme="dark"] .search-results .result-snippet mark { background: #5a4a00; color: #fff8c5; }

/* === Landing index === */
.landing-manuals {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.landing-manuals li { margin: 0; }
.landing-manuals a {
    display: block;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--fg);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.landing-manuals a:hover {
    border-color: var(--link);
    box-shadow: 0 1px 4px rgba(9, 105, 218, 0.1);
}
.landing-manuals .manual-title { font-weight: 600; font-size: 1.05em; }
.landing-manuals .manual-blurb { color: var(--muted); font-size: 0.9em; margin-top: 0.3em; line-height: 1.4; }

/* === Site footer (rendered below the three-column layout on every page) === */
.site-footer {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
    padding: 2rem 2rem 0.5rem;
    background: var(--bg);
    color: var(--muted);
    font-size: 0.92em;
}
.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
.site-footer-heading {
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 0.5rem;
}
.site-footer-brand {
    display: inline-block;
    margin-bottom: 1rem;
}
.site-footer-logo { height: 32px; width: auto; display: block; }
/* Force the logo to render white in dark mode — the source SVG uses dark
   colours that blend into the dark background. brightness(0) collapses every
   colour to black; invert(1) then flips that to pure white. */
[data-theme="dark"] .site-footer-logo { filter: brightness(0) invert(1); }
.site-footer-address { font-style: normal; line-height: 1.6; }
.site-footer-address a { color: var(--link); text-decoration: none; }
.site-footer-address a:hover { text-decoration: underline; }
.site-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.8;
}
.site-footer-links a { color: var(--link); text-decoration: none; }
.site-footer-links a:hover { text-decoration: underline; }
.site-footer-bar {
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
    padding: 0.75rem 0;
    text-align: center;
    font-size: 0.85em;
    color: var(--muted);
}

/* === Responsive === */
@media (max-width: 1100px) {
    .site-layout { grid-template-columns: 288px minmax(0, 1fr); }
    .page-toc { display: none; }
}
@media (max-width: 800px) {
    .site-layout { grid-template-columns: 1fr; padding: 0 1rem; }
    .site-nav {
        position: static;
        max-height: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
    }
    .header-search-trigger { min-width: 0; }
    .search-label { display: none; }
    .search-shortcut { display: none; }
}