/* 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 <html>. 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. Composed at
   split-time from the freshest local Desktop build + Release.cs (version.txt
   fallback); 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; }

/* Mobile nav hamburger + drawer backdrop. Both hidden on desktop; the
   responsive block below reveals the hamburger and turns the left nav into an
   off-canvas drawer on narrow screens. */
.nav-toggle {
    display: none;
    background: transparent;
    color: var(--header-fg);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}
.nav-toggle:hover { background: var(--code-bg); border-color: var(--header-border); }
.nav-backdrop { display: none; }

/* === 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 <details> 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 <details>; 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 <span class="letter-anchor"> 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 <code>'s background
   and syntax colors. We just give the <pre> 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; }

/* WebSocket-channel badge appended to API-exposed property names (and named
   in each component page's legend). Muted, non-bold, no code-box so it reads
   as a quiet annotation beside the property label rather than competing with
   it. The last rule beats the first-column bold-code rule above by raising
   specificity (extra .api-chan class). */
.site-main .api-chan,
.site-main .api-chan code { color: var(--muted); font-weight: 400; }
.site-main .api-chan code { background: transparent; padding: 0; }
.site-main table td:first-child .api-chan code { font-weight: 400; }

/* Script-helper signatures: the ": type" annotations (spans injected by
   HtmlPreview.StyleHelperSignatures) render muted and non-bold, inlay-hint
   style, so the parameter names stay the primary read of the signature.
   Documented types are links: they keep the muted color with a dotted
   underline so the signature stays quiet, taking the full link color only
   on hover. */
.site-main table td:first-child code .sig-type { color: var(--muted); font-weight: 400; }
.site-main table td:first-child code .sig-type a {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.site-main table td:first-child code .sig-type a:hover { color: var(--link); text-decoration-style: solid; }

/* Inputs / Operators / Targets — give the property-name column 20% more room
   (12rem -> 14.4rem) than the global default. These tables append the channel
   badge after the name, so the label column needs a touch more width. */
body[data-manual="inputs"] .site-main table th:first-child,
body[data-manual="inputs"] .site-main table td:first-child,
body[data-manual="operators"] .site-main table th:first-child,
body[data-manual="operators"] .site-main table td:first-child,
body[data-manual="targets"] .site-main table th:first-child,
body[data-manual="targets"] .site-main table td:first-child { min-width: 14.4rem; }

/* 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%; }

/* === How-to video player (per-video detail page) ===
   A large 16:9 player that fills the content column. object-fit: contain
   letterboxes the poster / video on black so an off-ratio frame is never
   cropped; the poster attribute (when a _posters/<slug>.png exists) shows
   before playback. */
.site-main video.howto-video {
    display: block;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 0 0 1.5rem;
    background: #000;
    border: 1px solid var(--border);
    border-radius: 6px;
    object-fit: contain;
}
/* How-to video catalogue (Overview / Latest) thumbnails: small clickable
   posters (~20% of the content column) so the list stays compact. The whole
   poster links to the video's detail page. */
body[data-manual="howto-videos"] .site-main table td img {
    width: 160px;
    max-width: 160px;
    height: auto;
    display: block;
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* === 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 "<Name> - 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
   <figure class="docs-diagram">. 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 === */
/* Section shelves — a heading + audience intro above each card grid. Generous
   top margin separates one shelf from the previous grid; the intro is muted so
   the card titles stay the dominant scan target. */
.landing-section-title {
    margin: 2.2rem 0 0.2rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
.landing-section-intro {
    color: var(--muted);
    margin: 0.2rem 0 0;
    font-size: 0.95em;
}
.landing-section-intro + .landing-manuals { margin-top: 1rem; }
.landing-manuals {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    /* auto-fill (not auto-fit): keep the empty trailing tracks so a sparse
       section's cards stay the same width as a full section's, instead of
       stretching two cards across the whole row. */
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.landing-manuals li { margin: 0; }
.landing-manuals a {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    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);
}
/* Card icon — accent-coloured glyph anchoring each card; flex-fixed so a
   long title never squeezes it. The slight top offset optically aligns the
   24px icon box with the title's cap height. */
.landing-manuals .manual-icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--link);
    margin-top: 1px;
}
.landing-manuals .manual-text { min-width: 0; }
.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; }

/* Pre-release "Latest changes" callout — surfaced above the manual cards on
   pre-release builds only (see HtmlPreview.BuildLatestChangesSection). A subtle
   accent-bordered panel; the change-log body keeps the readme's plain-text
   indentation via <pre>, wrapping long lines so the page never scrolls sideways. */
.landing-latest-changes {
    margin: 1.5rem 0 0.5rem;
    padding: 0.6rem 1.2rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--link);
    border-radius: 6px;
    background: var(--code-bg);
}
.landing-latest-changes .landing-section-title { margin-top: 0; }
.landing-latest-changes-version {
    color: var(--muted);
    font-size: 0.9em;
    margin: 0.2rem 0 0.8rem;
}
.landing-latest-changes-body {
    margin: 0;
    /* Inherit the site's proportional body font rather than the monospace <pre>
       default — the change log is prose, and proportional text reads larger and
       cleaner at the same size. The readme's leading-space indentation is still
       preserved by pre-wrap, so the hierarchy stays visible. */
    font-family: inherit;
    font-size: 1.1em;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: none;
    border: none;
    padding: 0;
}

/* === 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) {
    /* Single-column content; the left nav becomes an off-canvas drawer toggled
       by the header hamburger, so it no longer pushes the article down. The
       drawer sits just below the sticky header (which stays on top), with a
       dimming backdrop behind it. */
    .site-layout { grid-template-columns: 1fr; padding: 0 1rem; }
    .nav-toggle { display: inline-flex; align-items: center; }
    .site-nav {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        max-height: none;
        z-index: 90;
        background: var(--bg);
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35);
        padding: 1rem 0.75rem 2rem;
        overflow-y: auto;
    }
    body.nav-open .site-nav { transform: translateX(0); }
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 80;
    }
    body.nav-open .nav-backdrop { display: block; }
    .header-search-trigger { min-width: 0; }
    .search-label { display: none; }
    .search-shortcut { display: none; }
}
/* ═══════════════ Release highlights ═══════════════
   Designed release pages. Markup: ReleaseHighlights.Core/ReleaseDocumentRenderer.cs.
   Palette: .agents/skills/vindral-brand/SKILL.md. Dark is the default; light is the opt-in. */

.rh {
    /* Dark — the default. Two grounds only: the brand navy, and one lift of it. */
    --rh-ground:      #0F263D;   /* rs-darkblue */
    --rh-surface:     #17334F;   /* one lift, for bands and cards */
    --rh-surface-alt: #143049;
    --rh-ink:         #EAF1F7;
    --rh-ink-soft:    #C6D2DC;
    --rh-muted:       #9CA3AF;   /* rs-secondary-grey */
    --rh-line:        #3B3B3B;   /* rs-bordergrey — rules on dark */
    --rh-line-soft:   #2B3F55;
    --rh-accent:      #549CE0;   /* rs-lightblue — THE accent */
    --rh-accent-hover:#2A7BC8;
    --rh-eyebrow:     #FDBF79;   /* rs-orange — eyebrows and small labels only */
    --rh-ghost-fill:  #404040;   /* ghost-button hover on dark */
    --rh-ghost-line:  #FFFFFF;
    --rh-tally:       #E8604A;

    /* The rack panel is the deepest ground in either theme. */
    --rh-panel:        #0F263D;
    --rh-panel-2:      #17334F;
    --rh-panel-ink:    #EAF1F7;
    --rh-panel-muted:  #9CA3AF;
    --rh-panel-line:   #3B3B3B;

    --rh-measure: 640px;   /* the brand's text-block width */
    --rh-rail: 136px;

    font-size: 16.5px;
    line-height: 1.62;
    color: var(--rh-ink);
    background: var(--rh-ground);
}

[data-theme="light"] .rh {
    --rh-ground:      #FFFFFF;   /* rs-white — the dominant ground on light */
    --rh-surface:     #FFFFFF;
    --rh-surface-alt: #E5E5E5;   /* rs-lightgrey — the alternate light band */
    --rh-ink:         #12191F;
    --rh-ink-soft:    #3A4954;
    --rh-muted:       #62727E;
    --rh-line:        #DDDDDD;   /* rs-darkgrey — rules on light */
    --rh-line-soft:   #E6ECF1;
    --rh-accent:      #2A7BC8;   /* the readable blue on white */
    --rh-eyebrow:     #8A5A12;   /* the orange deepened until it is readable on white */
    --rh-ghost-line:  #2A7BC8;
}

.rh h1, .rh h2, .rh h3, .rh h4 { margin: 0; text-wrap: balance; border: 0; padding: 0; }
.rh p { margin: 0; }
.rh ul { margin: 0; padding: 0; list-style: none; }
.rh a { text-underline-offset: 3px; }

.rh-wrap { max-width: 1280px; margin-inline: auto; padding-inline: 24px; }
.rh-section { padding-block: 56px 0; }

/* The orange is the only warm note in the system and is spent entirely here. */
.rh-eyebrow {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rh-eyebrow);
    opacity: 0.85;
}

/* ── rack-panel hero ── */

.rh-panel { background: var(--rh-panel); color: var(--rh-panel-ink); }
.rh-panel .rh-wrap { padding-block: 46px 0; }
.rh-panel .rh-eyebrow { color: #FDBF79; opacity: 0.8; }

/* Large and light, never large and bold: weight 500 with negative tracking is
   the single rule that most decides whether a page reads as this brand. */
.rh-h1 {
    font-size: clamp(3rem, 6.6vw, 4.75rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.032em;
    margin-block: 20px 0 !important;
    max-width: 19ch;
    color: var(--rh-panel-ink);
}

.rh-h1 em { font-style: normal; color: #549CE0; }

.rh-deck {
    font-size: clamp(1.02rem, 2.1vw, 1.16rem);
    font-weight: 300;
    line-height: 1.6;
    color: var(--rh-panel-muted);
    max-width: var(--rh-measure);
    margin-block: 24px 0 !important;
}

.rh-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin-block: 34px 0;
    padding-block: 14px;
    border-top: 1px solid var(--rh-panel-line);
    border-bottom: 1px solid var(--rh-panel-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    letter-spacing: 0.07em;
    color: var(--rh-panel-muted);
    font-variant-numeric: tabular-nums;
}

.rh-status-tc { color: #549CE0; font-weight: 500; font-size: 13px; }
.rh-status-live { display: inline-flex; align-items: center; gap: 8px; color: var(--rh-panel-ink); }

.rh-lamp {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--rh-tally, #E8604A);
    animation: rh-lamp 2.6s ease-in-out infinite;
}

@keyframes rh-lamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.rh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 26px 46px; }

.rh-chips li {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11.5px;
    letter-spacing: 0.05em;
    color: var(--rh-panel-ink);
    background: var(--rh-panel-2);
    border: 1px solid var(--rh-panel-line);
    padding: 5px 11px;
}

/* ── section heads ── */

.rh-section-head h2 {
    font-size: clamp(1.55rem, 3.8vw, 2.3rem);
    font-weight: 500;
    letter-spacing: -0.026em;
    line-height: 1.14;
    margin-block: 12px 0 !important;
    max-width: 46ch;
    color: inherit;
}

.rh-section-head h2 em { font-style: normal; color: var(--rh-accent); }

.rh-lede { max-width: var(--rh-measure); color: var(--rh-ink-soft); margin-block: 16px 0 !important; }

/* ── lead story ── */

.rh-lead { background: var(--rh-surface); border-block: 1px solid var(--rh-line); }
.rh-lead .rh-wrap { padding-block: 56px; }

.rh-keyers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px 40px;
    margin-block: 42px 0;
}

.rh-keyers h3 {
    font-size: 1.04rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    margin-bottom: 7px;
    display: flex;
    align-items: baseline;
    gap: 9px;
}

.rh-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rh-accent);
    border: 1px solid var(--rh-line);
    padding: 2px 6px;
    flex: none;
    transform: translateY(-1px);
}

.rh-keyers p { font-size: 15.5px; line-height: 1.58; color: var(--rh-ink-soft); }

/* ── documentation links ──
   The pointer under an item to the page that documents it properly. Deliberately quiet: a highlight
   sells the feature, and this is the way out to the reference, not part of the pitch. Emitted by the
   renderer from the site's slug registry, never written into the prose. */

.rh-links {
    margin-top: 10px !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.7;
}

.rh .rh-links a {
    color: var(--rh-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.rh .rh-links a:hover { border-bottom-color: var(--rh-accent); text-decoration: none; }
.rh-links-sep { color: var(--rh-muted); margin: 0 8px; }

/* On the dark bands the accent has to lift off the navy rather than sit in it. */
.rh-ops .rh-links a, .rh-panel .rh-links a { color: #549CE0; }
.rh-ops .rh-links-sep { color: var(--rh-panel-muted); }

/* ── feature cards ── */

.rh-three {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
    margin-block: 36px 0;
}

.rh-feat {
    background: var(--rh-surface);
    border: 1px solid var(--rh-line);
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rh-kicker {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rh-eyebrow);
    opacity: 0.85;
}

.rh-feat h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.rh-feat p { color: var(--rh-ink-soft); font-size: 15.5px; line-height: 1.58; }

/* ── signal-path stages ── */

.rh-stages { margin-top: 30px; }
.rh-stage { display: grid; grid-template-columns: var(--rh-rail) minmax(0, 1fr); }

.rh-stage-rail {
    border-left: 1px solid var(--rh-line);
    padding-block: 38px;
    padding-inline: 0 24px;
}

.rh-stage:last-child .rh-stage-rail { border-left-color: transparent; }

.rh-stage-node {
    display: block;
    width: 9px; height: 9px;
    background: #549CE0;
    margin-left: -5px;
    margin-bottom: 14px;
}

.rh-stage-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rh-ink);
    padding-left: 14px;
}

.rh-stage-sub {
    font-size: 13.5px;
    color: var(--rh-muted);
    margin-top: 6px !important;
    padding-left: 14px;
    line-height: 1.45;
}

.rh-stage-body { padding-block: 38px; }

.rh-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px 40px;
}

.rh-items h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 5px; }
.rh-items p { font-size: 15.5px; line-height: 1.55; color: var(--rh-ink-soft); }

/* ── operations band ──
   Drops back to the page ground so it reads as a recess between two lifted bands
   on dark, and as the navy band the website uses on light. */

.rh-ops { background: var(--rh-panel); color: var(--rh-panel-ink); margin-top: 56px; }
.rh-ops .rh-wrap { padding-block: 56px; }
.rh-ops .rh-eyebrow { color: #FDBF79; opacity: 0.8; }
.rh-ops .rh-section-head h2 { color: var(--rh-panel-ink); }
.rh-ops .rh-section-head h2 em { color: #549CE0; }
.rh-ops .rh-lede { color: var(--rh-panel-muted); }

.rh-ops-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 30px 40px;
    margin-block: 42px 0;
}

.rh-ops-items h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: var(--rh-panel-ink);
}

.rh-ops-items p { font-size: 15.5px; line-height: 1.55; color: var(--rh-panel-muted); }

/* ── tool spotlight ── */

.rh-cli { background: var(--rh-surface); border-block: 1px solid var(--rh-line); }
.rh-cli .rh-wrap { padding-block: 56px; }

.rh-cli-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: 40px;
    align-items: start;
    margin-block: 36px 0;
}

.rh-cli-points { display: flex; flex-direction: column; gap: 22px; }
.rh-cli-points h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 5px; }
.rh-cli-points p { font-size: 15.5px; line-height: 1.55; color: var(--rh-ink-soft); }

.rh-term { background: var(--rh-panel); border: 1px solid var(--rh-panel-line); max-width: 100%; }

.rh-term-bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--rh-panel-line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rh-panel-muted);
}

.rh-term-dot { width: 7px; height: 7px; border-radius: 50%; background: #549CE0; flex: none; }

.rh-term pre {
    margin: 0;
    padding: 20px 18px 22px;
    overflow-x: auto;
    background: transparent;
    border: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--rh-panel-ink);
    white-space: pre;
}

.rh-term .rh-c { color: var(--rh-panel-muted); }
.rh-term .rh-p { color: #549CE0; }

.rh-caveat {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    color: var(--rh-muted);
    border-top: 1px solid var(--rh-line-soft);
    padding-top: 12px;
    max-width: var(--rh-measure);
    margin-top: 32px !important;
}

/* ── platform ── */

.rh-platform { border-top: 1px solid var(--rh-line); background: var(--rh-surface-alt); margin-top: 56px; }
.rh-platform .rh-wrap { padding-block: 44px; }
.rh-platform .rh-section-head h2 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.022em; max-width: 60ch; }

.rh-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 28px 40px;
    margin-block: 26px 0;
}

.rh-platform h3 { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.rh-platform p { font-size: 15.5px; line-height: 1.55; color: var(--rh-ink-soft); }

.rh-versions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.rh-versions li {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--rh-ink-soft);
    border: 1px solid var(--rh-line);
    background: var(--rh-ground);
    padding: 4px 10px;
}

/* ── close ── */

.rh-close .rh-wrap { padding-block: 56px 64px; }

.rh-close h2 {
    font-size: clamp(1.55rem, 3.8vw, 2.3rem);
    font-weight: 500;
    letter-spacing: -0.026em;
    line-height: 1.14;
    margin-block: 12px 0 !important;
    max-width: 58ch;
    color: inherit;
}

.rh-close > .rh-wrap > p { max-width: var(--rh-measure); color: var(--rh-ink-soft); margin-block: 18px 0 !important; }

.rh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-block: 30px 0; }

/* Pills, always. Square or slightly-rounded reads as a different product.
   Scoped under .rh so these beat the site's own `.site-main a { color: var(--link) }` — at equal
   specificity and later in the sheet, the pill keeps its own colours. Without the scope the
   primary button's white label loses to the site's link blue and reads as blue on blue. */
.rh .rh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    background: #549CE0;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1;
    padding: 12px 24px;
    border: 2px solid #549CE0;
    border-radius: 9999px;
    text-align: center;
}

.rh .rh-btn:hover { filter: brightness(1.05); border-color: #2A7BC8; color: #FFFFFF; text-decoration: none; }

.rh .rh-btn-ghost { background: transparent; color: var(--rh-ghost-line); border-color: var(--rh-ghost-line); }
.rh .rh-btn-ghost:hover { filter: none; background: var(--rh-ghost-fill, rgba(84, 156, 224, 0.2)); border-color: var(--rh-ghost-line); color: var(--rh-ghost-line); }

.rh-colophon {
    border-top: 1px solid var(--rh-line);
    margin-top: 44px !important;
    padding-top: 20px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 11.5px;
    letter-spacing: 0.05em;
    color: var(--rh-muted);
    line-height: 1.9;
}

/* ── the page inside the documentation frame ──
   A release page carries its own hero, so the breadcrumb and H1 the site puts above every other
   page are suppressed for it (HtmlPreview), the right-hand table of contents is hidden so the
   designed columns get the width they were drawn at, and the article's padding is cancelled so the
   bands reach the edges of the column. */

body[data-release-page] .page-toc { display: none; }
body[data-release-page] .site-layout { grid-template-columns: 300px minmax(0, 1fr); }
body[data-release-page] .site-main { padding: 0 0 4rem; }
body[data-release-page] .site-main > article { max-width: none; }

@media (max-width: 860px) {
    .rh-cli-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 760px) {
    .rh { --rh-rail: 0px; }
    .rh-stage { grid-template-columns: minmax(0, 1fr); }

    .rh-stage-rail {
        border-left: none;
        border-top: 1px solid var(--rh-line);
        padding-block: 26px 0;
        padding-inline: 0;
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .rh-stage:last-child .rh-stage-rail { border-left-color: var(--rh-line); }
    .rh-stage-node { margin: 0; }
    .rh-stage-label, .rh-stage-sub { padding-left: 0; }
    .rh-stage-sub { flex-basis: 100%; margin-top: 2px !important; }
    .rh-stage-body { padding-block: 22px 30px; }

    .rh .rh-btn { width: 100%; }
}

@media (max-width: 440px) {
    .rh-wrap { padding-inline: 18px; }
    .rh-feat { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .rh-lamp { animation: none; }
}