/* The Docs Site's own styles (ADR-0110). The frame is MudBlazor's; this file lays out the
   pages and colours the highlighted code. Colours are custom properties, and light-dark()
   follows the scheme the layout declares. */

:root {
    --docs-code-bg: light-dark(#f6f8fa, #1b1e23);
    --docs-code-border: light-dark(#e3e6ea, #2c3036);
    --docs-code-text: light-dark(#1f2329, #d6dae0);
    --docs-muted: light-dark(#5f6670, #9aa3ad);

    --tk-kw: light-dark(#0b4fc4, #79b8ff);
    --tk-str: light-dark(#a3410f, #f0a37a);
    --tk-num: light-dark(#0a7a5a, #7ee0b8);
    --tk-com: light-dark(#5b7a4a, #8aa77a);
    --tk-pre: light-dark(#7a7f87, #8a9099);
    --tk-type: light-dark(#0f7489, #6fd3e6);
    --tk-razor: light-dark(#8a3ab9, #d7a2ff);
    --tk-tag: light-dark(#8a2f2f, #ff9b9b);
    --tk-comp: light-dark(#0f7489, #6fd3e6);
    --tk-attr: light-dark(#a5520b, #ffc178);
    --tk-aval: light-dark(#0b4fc4, #9cc7ff);
    --tk-punc: light-dark(#7a7f87, #8a9099);
}

body { font-family: Roboto, Helvetica, Arial, sans-serif; }

.docs-loading {
    display: grid;
    place-items: center;
    height: 100vh;
    font: 500 14px Roboto, sans-serif;
    color: #5f6670;
}

/* A grid's moves bring the cell they reach into the window at the nearest edge (ADR-0204): the dense
   app bar stands over the top of the window, so the browser is told how much it covers, its border
   included, and a cell is never brought in under it. */
html { scroll-padding-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4 + 1px); }
.docs-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.docs-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    margin-left: 8px;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}
.docs-brand-mark {
    color: var(--mud-palette-primary);
}
.docs-version { margin-left: 12px; opacity: 0.8; }
.docs-appbar-switch { margin-right: 8px; }
.docs-drawer { border-right: 1px solid var(--mud-palette-lines-default); }
.docs-nav { padding: 8px 0 24px; }

.docs-content { padding-top: 32px; padding-bottom: 32px; }

/* The app bar's sections (ADR-0110). Below the large breakpoint they are hidden (d-lg-flex), and
   the drawer lists every page they lead to. */
.docs-appbar-links { align-items: center; gap: 2px; margin-left: 20px; }
.docs-appbar-links .mud-button-root { text-transform: none; font-weight: 500; font-size: 0.95rem; }
.docs-appbar-search { margin-left: 16px; width: 280px; max-width: 30vw; flex: 0 1 auto; }
.docs-appbar-search .mud-input-outlined-border { border-color: var(--mud-palette-lines-default); }
.docs-products .mud-menu-item { align-items: flex-start; }
.docs-product-title { font-weight: 600; }
.docs-product-caption { max-width: 300px; white-space: normal; font-size: 0.8rem; line-height: 1.35; color: var(--docs-muted); }

/* The search's results: what each place is, and where it is, wider than the box when it needs to be. */
.docs-search-popover { min-width: 420px; }
.docs-search-popover .mud-list-item { height: auto; }
.docs-search-item { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.docs-search-icon { flex: none; margin-top: 2px; color: var(--docs-muted); }
.docs-search-text { min-width: 0; }
.docs-search-title { font-weight: 500; line-height: 1.35; }
.docs-search-context { font-size: 0.78rem; line-height: 1.35; color: var(--docs-muted); }

/* The drawer's groups, and the mark on an entry that opens a tab of its own. */
.docs-nav-group { font-weight: 600; }
.docs-nav-new-tab { margin-left: 4px; vertical-align: -3px; font-size: 15px !important; color: var(--docs-muted); }

/* The banner above every page of a site that is not a version's (ADR-0110), and its one-line
   form above a page that fills the window, which leaves --docs-banner-height for it. */
.docs-banner { margin-bottom: 24px; max-width: 980px; }
.docs-banner code, .docs-banner-strip code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.9em;
}
.docs-banner-link { margin-left: 6px; font-weight: 500; white-space: nowrap; }
/* MudBlazor's warning and info are too light to read as words on a light page. The banner keeps
   them for its icon and its tint, and the chip for its border; the words take a readable colour. */
.docs-banner .mud-alert-message { color: var(--mud-palette-text-primary); }
.docs-version.mud-chip-color-warning { color: light-dark(#8a5300, var(--mud-palette-warning)); }
.docs-bare-banner { --docs-banner-height: 32px; }
.docs-banner-strip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--docs-banner-height);
    padding: 0 14px;
    font: 13px Roboto, Helvetica, Arial, sans-serif;
    white-space: nowrap;
    background: rgba(var(--mud-palette-warning-rgb), 0.16);
    border-bottom: 1px solid rgba(var(--mud-palette-warning-rgb), 0.6);
    color: var(--mud-palette-text-primary);
}
.docs-banner-strip-icon { flex: none; color: var(--mud-palette-warning); }
.docs-banner-strip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.docs-banner-strip-link { flex: none; margin-left: auto; color: var(--mud-palette-primary); }
.docs-page-header { margin-bottom: 32px; max-width: 820px; }
.docs-title { font-weight: 700; letter-spacing: -0.02em; }
.docs-lead { color: var(--docs-muted); margin-top: 8px; font-size: 1.1rem; line-height: 1.6; }

/* A topic page and its rail (ADR-0110): the rail stands beside the page where there is room for
   it, and is a static list, with no scroll spy. A section's heading, reached by its anchor, stops
   below the app bar; "Back to top" reaches the top of the page. */
.docs-page { display: grid; grid-template-columns: minmax(0, 1fr); }
.docs-rail { display: none; }
@media (min-width: 1440px) {
    .docs-page { grid-template-columns: minmax(0, 1fr) 208px; column-gap: 48px; }
    .docs-rail {
        display: block;
        position: sticky;
        top: 80px;
        align-self: start;
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        font-size: 0.875rem;
    }
}
.docs-rail-heading { display: block; margin-bottom: 6px; color: var(--docs-muted); font-weight: 700; }
.docs-rail-list { list-style: none; margin: 0 0 12px; padding: 0; border-left: 1px solid var(--mud-palette-lines-default); }
.docs-rail-list a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 1px solid transparent; }
.docs-rail-list a:hover { border-left-color: var(--mud-palette-primary); }
.docs-rail-link { color: var(--docs-muted); text-decoration: none; line-height: 1.4; }
.docs-rail-link:hover { color: var(--mud-palette-primary); }
.docs-rail-top, .docs-rail-source a { display: inline-flex; align-items: center; gap: 6px; }
.docs-rail-source { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.docs-rail-source:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.docs-rail-source .mud-typography-caption { display: block; margin: 2px 0 0 26px; overflow-wrap: anywhere; }
.docs-section { scroll-margin-top: 72px; }
#top { scroll-margin-top: 100vh; }

.docs-section { margin: 48px 0 0; }
.docs-section > p, .docs-section > ul, .docs-section > ol { max-width: 820px; line-height: 1.7; }
.docs-section > p { margin: 0 0 12px; }
.docs-section > ul, .docs-section > ol, .docs-example-text ul { padding-left: 22px; margin: 0 0 12px; }
.docs-section-title { font-weight: 600; margin-bottom: 12px; }
.docs-anchor { color: inherit; text-decoration: none; }
.docs-anchor:hover::after { content: " #"; color: var(--docs-muted); }

.docs-content p code, .docs-content li code, .docs-content td code, .docs-api-title code {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.86em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--docs-code-bg);
    border: 1px solid var(--docs-code-border);
}

.docs-example { margin: 28px 0 0; }
.docs-example-title { font-weight: 600; }
.docs-example-text { max-width: 820px; margin: 4px 0 12px; line-height: 1.7; }
.docs-example-frame { overflow: hidden; }
.docs-example-live { padding: 24px; overflow-x: auto; }
/* A React Example's frame (ADR-0350 section 12). The frame's page sets its height to the Example's; this is the
   height it opens at, about a Sheet Example's, so the page moves little when it does. */
.docs-example-react { display: block; width: 100%; height: 460px; border: 0; }
.docs-example-toolbar {
    border-top: 1px solid var(--mud-palette-lines-default);
    gap: 8px;
}
.docs-muted { color: var(--docs-muted); }

/* Where the site has nothing for React yet (ADR-0350 §12): in an Example's frame, where it would run,
   and under a page's lead. */
.docs-not-in-react { display: flex; gap: 12px; align-items: flex-start; max-width: 820px; line-height: 1.7; }
.docs-not-in-react-example { padding: 24px; }
.docs-not-in-react-page {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}
.docs-not-in-react-icon { flex: none; margin-top: 3px; color: var(--mud-palette-info); }
.docs-not-in-react-text p { margin: 0 0 8px; }

/* A figure drawn from the product by tools/readme-media/figures.mjs: a light picture in either
   scheme, scaled down where the column is narrower than it. */
.docs-figure { margin: 8px 0 0; }
.docs-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--docs-code-border);
    border-radius: 6px;
}
.docs-figure figcaption { max-width: 820px; margin-top: 8px; color: var(--docs-muted); font-size: 0.92rem; line-height: 1.6; }
/* The names a figure's numbers stand for, in the numbers' colour, in columns where there is room. */
.docs-figure-names {
    --docs-figure-number: light-dark(#c2255c, #f06595);
    max-width: 820px;
    margin: 12px 0 0;
    padding-left: 28px;
    columns: 2 300px;
    column-gap: 40px;
    line-height: 1.6;
}
.docs-figure-names li { break-inside: avoid; margin: 0 0 4px; }
.docs-figure-names li::marker { color: var(--docs-figure-number); font-weight: 700; }

.docs-code-view { border-top: 1px solid var(--mud-palette-lines-default); background: var(--docs-code-bg); }
.docs-code-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--docs-code-border); }
.docs-code-tab {
    appearance: none;
    border: 0;
    background: none;
    padding: 8px 12px;
    font: 500 12px ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
    color: var(--docs-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.docs-code-tab-selected { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.docs-code-body { position: relative; }
.docs-code-copy { position: absolute; top: 6px; right: 8px; z-index: 1; }
.docs-code {
    margin: 0;
    padding: 16px 20px;
    max-height: 560px;
    overflow: auto;
    font: 13px/1.6 ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace;
    color: var(--docs-code-text);
    tab-size: 4;
}
.docs-code-block { margin: 16px 0; border: 1px solid var(--docs-code-border); border-radius: 6px; overflow: hidden; }
.docs-code-block .docs-code-view { border-top: 0; }

.tk-kw { color: var(--tk-kw); }
.tk-str { color: var(--tk-str); }
.tk-num { color: var(--tk-num); }
.tk-com { color: var(--tk-com); font-style: italic; }
.tk-pre { color: var(--tk-pre); }
.tk-type { color: var(--tk-type); }
.tk-razor { color: var(--tk-razor); font-weight: 500; }
.tk-tag { color: var(--tk-tag); }
.tk-comp { color: var(--tk-comp); font-weight: 500; }
.tk-attr { color: var(--tk-attr); }
.tk-aval { color: var(--tk-aval); }
.tk-punc { color: var(--tk-punc); }

.docs-api { margin: 24px 0; }
.docs-api-summary { max-width: 820px; margin: 4px 0 12px; color: var(--docs-muted); }
.docs-api-heading { margin: 16px 0 6px; }
.docs-api-table td { vertical-align: top; line-height: 1.55; }
.docs-api-table { table-layout: fixed; }
.docs-api-table th.docs-api-name { width: 22%; }
.docs-api-table th.docs-api-type { width: 26%; }
.docs-api-name code, .docs-api-type code { white-space: normal; overflow-wrap: anywhere; }
.docs-api-type code { color: var(--tk-type); }
.docs-api-more summary { cursor: pointer; color: var(--mud-palette-primary); font-size: 0.85em; margin-top: 4px; }
.docs-api-more .docs-api-text { margin-top: 6px; color: var(--docs-muted); }
.docs-api-text a { color: var(--mud-palette-primary); }
.docs-api-table ul { margin: 4px 0 0 18px; }
/* What is public and not the contract (ADR-0201): said under a type's name, and its members listed apart. */
.docs-api-notcontract-note { max-width: 820px; margin: 4px 0 8px; color: var(--docs-muted); font-size: 0.9rem; line-height: 1.6; }
.docs-api-notcontract { margin-top: 12px; }
/* The API reference: a type's name opens its table beneath its row. */
.docs-api-table th.docs-api-kind { width: 13%; }
.docs-api-toggle {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--mud-palette-primary);
    cursor: pointer;
}
.docs-api-toggle:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.docs-api-open > td { background: var(--mud-palette-background-gray); }
.docs-api-open .docs-api { margin: 4px 0 8px; }

.docs-prev-next {
    display: flex;
    margin-top: 72px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The footer (ADR-0110): the navigation's links once more, and what the site was built from. */
.docs-footer { margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--mud-palette-lines-default); }
.docs-footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 980px; }
.docs-footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.docs-footer-heading { color: var(--docs-muted); font-weight: 700; }
.docs-footer-column a { color: var(--mud-palette-text-primary); text-decoration: none; font-size: 0.9rem; }
.docs-footer-column a:hover { color: var(--mud-palette-primary); }
.docs-footer-line { display: block; margin-top: 28px; }
.docs-footer-line a { color: inherit; }
.docs-footer-line code { font-family: ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace; font-size: 0.95em; }

/* The page at an address no page claims. */
.docs-not-found-search { max-width: 480px; }
.docs-not-found-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* The Showcases' index: a card per use case, each opening its Showcase under either Chrome. */
.docs-showcase-card { display: flex; flex-direction: column; align-items: flex-start; }
.docs-showcase-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.docs-showcase-docs { margin-top: auto; }

.docs-hero { padding: 24px 0 8px; max-width: 900px; }
.docs-hero h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.docs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 32px; }
.docs-card { padding: 20px; height: 100%; }
.docs-card h2 { font-weight: 700; }

.docs-bare {
    min-height: 100vh;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 10px 16px;
    background: #fff3cd;
    color: #4d3800;
    z-index: 2000;
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* A paper the Examples stretch to the frame's width: the Wrapper's element is the Consumer's
   to lay out (ADR-0030), and a ViewportSize.Stretch grid takes the width it is given. */
.mud-ex-grid.docs-stretch-paper {
    display: flex;
    width: 100%;
}

.docs-showcase { min-height: calc(100vh - var(--docs-banner-height, 0px)); display: flex; flex-direction: column; }

/* A built-in Example's own controls: MudBlazor's reset leaves a plain button, select or input
   looking like text, and the built-in Examples use plain HTML as an application without MudBlazor
   would. Inside them the browser's own look comes back; the grids' own markup is left alone. */
.docs-example-builtin :is(button, select, input, textarea, progress):not([class]):not(.ex-pivot *, .ex-grid *, .ex-sheet *) { all: revert; }
.docs-example-builtin :is(button, select, label):not([class]):not(.ex-pivot *, .ex-grid *, .ex-sheet *) { margin-right: 6px; }

/* A short quotation in a page's prose: a formula, a call. */
.docs-section > pre.docs-code {
    margin: 8px 0 16px;
    max-width: 820px;
    background: var(--docs-code-bg);
    border: 1px solid var(--docs-code-border);
    border-radius: 6px;
}

/* ExPivot's Show Details dialog stands at z-index 30 over its page, and this site's navigation
   drawer at MudBlazor's 1100, so the dialog opened under the drawer. Raised over the app bar here,
   on this site only; ExPivot's own value is a product question, not the site's. */
.docs-content .ex-pivot-dialog-backdrop { z-index: calc(var(--mud-zindex-appbar) + 10); }
.docs-content .ex-pivot-dialog { z-index: calc(var(--mud-zindex-appbar) + 11); }

/* The Release Notes (ADR-0190): a version's heading and chip, the line of what it published, the
   prerelease note, its headings and lines, each line led by what it is or whom it reaches. */
.docs-notes-intro p { max-width: 820px; line-height: 1.7; margin: 0 0 12px; }
.docs-notes-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0 0; }
.docs-notes-version { max-width: 900px; }
.docs-notes-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docs-notes-title .docs-section-title { margin-bottom: 0; }
.docs-notes-meta { margin: 8px 0 4px; color: var(--docs-muted); line-height: 1.6; }
.docs-notes-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 12px; font-size: 0.9rem; }
.docs-notes-links a, .docs-notes-version a:not(.docs-anchor):not(.mud-chip) { color: var(--mud-palette-primary); }
.docs-notes-prerelease {
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--mud-palette-lines-default);
    background: var(--docs-code-bg);
    line-height: 1.6;
}
.docs-notes-prerelease p { margin: 0; }
.docs-notes-install { margin: 8px 0 0; }
.docs-notes-warning { margin: 4px 0 8px; }
.docs-notes-heading { font-weight: 600; margin: 20px 0 6px; }
.docs-notes-none { color: var(--docs-muted); margin: 0 0 8px; }
.docs-notes-paragraph { margin: 0 0 8px; line-height: 1.7; }
.docs-notes-list { padding-left: 22px; margin: 0 0 8px; }
.docs-notes-item { line-height: 1.7; margin: 0 0 6px; }
.docs-notes-item ul { padding-left: 20px; margin: 4px 0 0; }
.docs-notes-label, .docs-notes-kind {
    display: inline-block;
    margin-right: 6px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.6;
    vertical-align: 1px;
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--docs-muted);
}
.docs-notes-kind-added { border-color: rgba(var(--mud-palette-success-rgb), 0.6); color: light-dark(#1b6b34, var(--mud-palette-success)); }
.docs-notes-kind-fixed { border-color: rgba(var(--mud-palette-info-rgb), 0.6); color: light-dark(#0b5394, var(--mud-palette-info)); }
.docs-notes-kind-breaking, .docs-notes-kind-behaviour { border-color: rgba(var(--mud-palette-warning-rgb), 0.7); color: light-dark(#8a5300, var(--mud-palette-warning)); }
.docs-notes-more { margin-left: 8px; font-size: 0.85rem; white-space: nowrap; }

/* The chips a page or a section carries because the Release Notes link it. The warning colour's words
   take a readable shade on a light page, as the version chip's do. */
.docs-release-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.docs-section-head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; margin-bottom: 12px; }
.docs-section-head .docs-section-title { margin-bottom: 0; }
.docs-page-header .docs-release-chips { margin: 6px 0 0; }
.docs-release-chip { font-weight: 500; }
.docs-release-chip-unreleased.mud-chip-color-warning { color: light-dark(#8a5300, var(--mud-palette-warning)); }

/* The start page's latest version. */
.docs-latest { margin-top: 28px; padding: 16px 20px; max-width: 900px; }
.docs-latest-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.docs-latest-label { color: var(--docs-muted); font-weight: 700; }
.docs-latest-version { font-weight: 700; font-size: 1.15rem; color: var(--mud-palette-text-primary); text-decoration: none; }
.docs-latest-version:hover { color: var(--mud-palette-primary); }
.docs-latest-highlights { margin: 10px 0 8px; padding-left: 22px; line-height: 1.65; }
.docs-latest-highlights a { color: var(--mud-palette-primary); }
.docs-latest-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.docs-latest-unreleased { color: light-dark(#8a5300, var(--mud-palette-warning)) !important; }
.docs-notes-filters .mud-chip-color-warning { color: light-dark(#8a5300, var(--mud-palette-warning)); }

/* The Roadmap (ADR-0191): its "as of" line and chips, each section's lead, and its rows — a title or a
   sentence with the products it reaches, and beneath it the ticket or the records it cites. */
.docs-roadmap-head { max-width: 900px; margin-bottom: 8px; }
.docs-roadmap-asof { margin: 0 0 8px; color: var(--docs-muted); line-height: 1.7; }
.docs-roadmap-asof a, .docs-roadmap-intro a, .docs-roadmap-list a, .docs-roadmap-source { color: var(--mud-palette-primary); }
.docs-roadmap-intro { max-width: 820px; margin: 0 0 12px; line-height: 1.7; }
.docs-roadmap-linked-lead { margin-top: 16px; }
.docs-roadmap-list { max-width: 900px; }
.docs-roadmap-rows { list-style: none; padding: 0; margin: 0 0 8px; }
.docs-roadmap-row { padding: 10px 0; border-top: 1px solid var(--mud-palette-lines-default); }
.docs-roadmap-row:last-child { border-bottom: 1px solid var(--mud-palette-lines-default); }
.docs-roadmap-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.docs-roadmap-row-head .docs-roadmap-row-text { flex: 1 1 420px; }
.docs-roadmap-row-title { font-weight: 600; }
.docs-roadmap-row-text { margin: 2px 0 0; line-height: 1.65; }
.docs-roadmap-row-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 0; font-size: 0.88rem; }
.docs-roadmap-products { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.docs-roadmap-products .docs-notes-label { margin-right: 0; }
.docs-roadmap-source { margin-left: 8px; font-size: 0.85rem; font-weight: 400; }

/* The reference pages (ADR-0110): the line that says what a page is as of, the heading over each of its
   tables, and the records a row cites; the Feature matrix's marks, the Functions page's filter, and a key. */
.docs-reference-asof { max-width: 820px; margin: 0 0 8px; color: var(--docs-muted); line-height: 1.7; }
.docs-reference-asof a, .docs-reference-table a, .docs-reference-heading a, .docs-reference-cites a { color: var(--mud-palette-primary); }
.docs-reference-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-weight: 600; margin: 24px 0 8px; }
.docs-reference-heading-cites { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.85rem; font-weight: 400; }
.docs-reference-table { margin-bottom: 12px; }
.docs-reference-small { font-size: 0.8rem; }
.docs-cite { margin-right: 10px; white-space: nowrap; }
.docs-matrix-yes { color: light-dark(#2e7d32, #81c784); font-weight: 700; }
.docs-matrix-no { color: light-dark(#b3261e, #f28b82); font-weight: 700; }
.docs-functions-filter { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 8px 0 4px; }
.docs-functions-count { white-space: nowrap; }
.docs-content kbd {
    font-family: inherit;
    font-size: 0.86em;
    padding: 0 5px;
    border: 1px solid var(--docs-code-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--docs-code-bg);
    white-space: nowrap;
}