/* ===========================================================================
   TMS Documentation - shared DocFX theme
   TMS violet accent on a crisp white (light) or neutral graphite (dark) base,
   hairline borders, and a three-column layout: product navigation on a tinted
   column at the left, the reading column in the centre, and the "In this
   article" rail at the right, each separated by a full-height rule. Every
   colour comes from the --tms-* tokens below so both themes follow
   automatically. Contrast figures in the comments are WCAG 2 ratios.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
    /* Accent: text links 6.2:1 on --tms-surface; the active-nav ink 7.9:1 on
       its tinted pill. */
    --tms-accent: #533afd;
    --tms-accent-strong: #3d27c9;
    --tms-accent-soft: #f0eeff;
    --tms-nav-active-bg: #efecff;
    --tms-nav-active-ink: #3d27c9;

    /* Surfaces: page, sidebar/footer tint, hover/caption fill, cards. */
    --tms-surface: #ffffff;
    --tms-surface-muted: #f6f8fb;
    --tms-surface-sunken: #f7f9fc;
    --tms-surface-raised: #ffffff;
    --tms-header-bg: rgba(255, 255, 255, .92);
    --tms-border: #e3e8ee;
    --tms-border-strong: #c9d3e0;

    /* Text 15.5:1, muted 7.8:1 on white (7.3:1 on the sidebar tint). */
    --tms-text: #0a2540;
    --tms-text-muted: #425466;
    --tms-on-accent: #ffffff;

    --tms-code-bg: #f6f9fc;
    --tms-code-inline-bg: #eef1f6;
    --tms-shadow-xs: 0 1px 2px rgba(10, 37, 64, .04);
    --tms-shadow-sm: 0 1px 2px rgba(10, 37, 64, .05), 0 2px 8px rgba(10, 37, 64, .04);
    --tms-shadow-panel: 0 2px 4px rgba(10, 37, 64, .05), 0 8px 24px rgba(10, 37, 64, .06);
    --tms-shadow-img: 0 2px 4px rgba(10, 37, 64, .06), 0 8px 24px rgba(10, 37, 64, .08);
    --tms-shadow-md: 0 13px 27px -5px rgba(50, 50, 93, .18), 0 8px 16px -8px rgba(0, 0, 0, .2);
    --tms-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tms-accent) 28%, transparent);

    /* Shape, spacing and layout. */
    --tms-radius-sm: .375rem;
    --tms-radius: .5rem;
    --tms-radius-lg: .75rem;
    --tms-space-1: .25rem;
    --tms-space-2: .5rem;
    --tms-space-3: .75rem;
    --tms-space-4: 1rem;
    --tms-space-5: 1.5rem;
    --tms-space-6: 2rem;
    --tms-space-7: 3rem;
    --tms-content-width: 50rem;
    --tms-portal-width: 68rem;
    --tms-header-h: 3.75rem;
    --tms-sidebar-w: 18rem;
    --tms-sidebar-collapsed-w: 2.875rem;
    --tms-rail-w: 15rem;
    --tms-gutter: clamp(1.5rem, 3.2vw, 3rem);
    /* Left edge shared by the header brand, the sidebar header, filter box
       and the footer, so the page's left margin reads as one line. */
    --tms-edge: 1rem;

    --tms-font-sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tms-font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --tms-font-mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, SFMono-Regular, Menlo, "Liberation Mono", monospace;

    /* Syntax highlighting. On --tms-code-bg #f6f9fc: text 14.7, keyword 6.7,
       type 6.5, string 5.1, number 5.4, comment 4.9, meta 5.6, title 6.3. */
    --tms-code-text: #0a2540;
    --tms-hl-keyword: #5a32e0;
    --tms-hl-type: #0b6280;
    --tms-hl-string: #0b7a56;
    --tms-hl-number: #b2410c;
    --tms-hl-comment: #5f6f82;
    --tms-hl-meta: #8a5a00;
    --tms-hl-title: #1d4ed8;

    /* Callouts: --callout drives the rule + tint, --callout-ink the label,
       darker (light theme) / lighter (dark theme) so it clears WCAG AA. */
    --tms-note: #533afd;
    --tms-note-ink: #3d27c9;
    --tms-tip: #0e9f6e;
    --tms-tip-ink: #0b7a56;
    --tms-important: #7c3aed;
    --tms-important-ink: #6d28d9;
    --tms-warning: #d97706;
    --tms-warning-ink: #a8480a;
    --tms-caution: #dc2626;
    --tms-caution-ink: #b91c1c;
    --tms-callout-tint: 6%;

    /* Release-history change kinds. */
    --tms-kind-new: #4f46e5;
    --tms-kind-new-bg: color-mix(in srgb, #6366f1 14%, transparent);
    --tms-kind-improved: #0b7a56;
    --tms-kind-improved-bg: color-mix(in srgb, #10b981 15%, transparent);
    --tms-kind-fixed: #a8480a;
    --tms-kind-fixed-bg: color-mix(in srgb, #f59e0b 16%, transparent);

    --tms-beta-ink: #ffffff;
    --tms-beta-bg: #b45309;

    /* Light-surface screenshot panel. */
    --tms-shot-panel-bg: #fbfbfc;
    --tms-shot-panel-border: rgba(33, 37, 41, .14);
    --tms-shot-panel-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);

    --bs-body-font-family: var(--tms-font-sans);
    --bs-font-sans-serif: var(--tms-font-sans);
    --bs-font-monospace: var(--tms-font-mono);
    --bs-primary: var(--tms-accent);
    --bs-primary-rgb: 83, 58, 253;
    --bs-primary-bg-subtle: var(--tms-accent-soft);
    --bs-primary-text-emphasis: var(--tms-accent-strong);
    --bs-primary-border-subtle: var(--tms-border-strong);
    --bs-body-bg: var(--tms-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-body-color: var(--tms-text);
    --bs-body-color-rgb: 10, 37, 64;
    --bs-emphasis-color: var(--tms-text);
    --bs-emphasis-color-rgb: 10, 37, 64;
    --bs-secondary-color: var(--tms-text-muted);
    --bs-secondary-color-rgb: 66, 84, 102;
    --bs-secondary-bg: var(--tms-surface-muted);
    --bs-secondary-bg-rgb: 246, 248, 251;
    --bs-tertiary-color: var(--tms-text-muted);
    --bs-tertiary-bg: var(--tms-surface-muted);
    --bs-tertiary-bg-rgb: 246, 248, 251;
    --bs-border-color: var(--tms-border);
    --bs-border-color-translucent: var(--tms-border);
    --bs-link-color: var(--tms-accent);
    --bs-link-color-rgb: 83, 58, 253;
    --bs-link-hover-color: var(--tms-accent-strong);
    --bs-link-hover-color-rgb: 61, 39, 201;
    --bs-code-color: var(--tms-text);
    --bs-border-radius: var(--tms-radius);
}

/* Dark tokens apply on screen only, so printing a page from the dark theme
   still produces the light palette (dark code, light-surface panels).
   Neutral graphite base (no blue cast) with a light periwinkle-violet accent
   that keeps the TMS purple identity but reads clearly on dark:
     text #eceef2 on #1b1e24 14.3:1, muted #b0b8c5 8.4:1 (7.4:1 on raised
     #23272f), link/accent #b9aaff 8.2:1, active nav ink #d3c9ff on its pill
     8.1:1, focus ring #b9aaff 8.2:1. */
@media screen {
    [data-bs-theme="dark"] {
        --tms-accent: #b9aaff;
        --tms-accent-strong: #d3c9ff;
        --tms-accent-soft: #2c2a40;
        --tms-nav-active-bg: #313243;
        --tms-nav-active-ink: #d3c9ff;

        --tms-surface: #1b1e24;
        --tms-surface-muted: #23272f;
        --tms-surface-sunken: #16181d;
        --tms-surface-raised: #21252c;
        --tms-header-bg: rgba(27, 30, 36, .92);
        --tms-border: #343a46;
        --tms-border-strong: #4a5263;

        --tms-text: #eceef2;
        --tms-text-muted: #b0b8c5;
        --tms-on-accent: #16181d;

        --tms-code-bg: #14161b;
        --tms-code-inline-bg: #2a2e37;
        --tms-shadow-xs: none;
        --tms-shadow-sm: none;
        --tms-shadow-panel: 0 8px 24px rgba(0, 0, 0, .35);
        --tms-shadow-img: 0 8px 24px rgba(0, 0, 0, .35);
        --tms-shadow-md: 0 14px 38px rgba(0, 0, 0, .45);
        --tms-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tms-accent) 35%, transparent);

        --tms-note: #b9aaff;
        --tms-note-ink: #cfc4ff;
        --tms-tip: #34d399;
        --tms-tip-ink: #6ee7b7;
        --tms-important: #c4b5fd;
        --tms-important-ink: #ddd3ff;
        --tms-warning: #f59e0b;
        --tms-warning-ink: #fcd34d;
        --tms-caution: #f87171;
        --tms-caution-ink: #fca5a5;
        --tms-callout-tint: 10%;

        --tms-kind-new: #c4b8ff;
        --tms-kind-improved: #5eead4;
        --tms-kind-fixed: #fcd34d;

        --tms-beta-ink: #1b1206;
        --tms-beta-bg: #f59e0b;

        --tms-shot-panel-bg: #e9eaec;
        --tms-shot-panel-border: rgba(255, 255, 255, .10);
        --tms-shot-panel-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .06);

        --bs-primary-rgb: 185, 170, 255;
        --bs-body-bg-rgb: 27, 30, 36;
        --bs-body-color-rgb: 236, 238, 242;
        --bs-emphasis-color-rgb: 236, 238, 242;
        --bs-secondary-color-rgb: 176, 184, 197;
        --bs-secondary-bg-rgb: 35, 39, 47;
        --bs-tertiary-bg-rgb: 35, 39, 47;
        --bs-link-color-rgb: 185, 170, 255;
        --bs-link-hover-color-rgb: 211, 201, 255;

        /* On --tms-code-bg #14161b: text 14.8, keyword 10.1, type 10.6,
           string 11.6, number 10.3, comment 6.2, meta 11.0, title 10.0. */
        --tms-code-text: #e6e8ee;
        --tms-hl-keyword: #c5b8ff;
        --tms-hl-type: #6fd3ef;
        --tms-hl-string: #8fe0b0;
        --tms-hl-number: #f5b77a;
        --tms-hl-comment: #8e98a8;
        --tms-hl-meta: #e6c76a;
        --tms-hl-title: #93c5fd;
    }
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

html {
    scroll-padding-top: calc(var(--tms-header-h) + 1.25rem);
}

body {
    color: var(--tms-text);
    background: var(--tms-surface);
    font-family: var(--tms-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

code,
kbd,
pre,
samp {
    font-family: var(--tms-font-mono);
    /* Show the characters that are typed: no ":=" / "<=" / "<>" ligatures. */
    font-variant-ligatures: none;
}

a {
    color: var(--tms-accent);
    text-decoration: none;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
}

a:hover {
    color: var(--tms-accent-strong);
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--tms-accent);
    outline-offset: 2px;
}

/* The skip-link target (and "back to top") focuses <main> programmatically;
   ringing the whole reading column would only be noise. */
#main-content:focus {
    outline: none;
}

::selection {
    color: var(--tms-text);
    background: color-mix(in srgb, var(--tms-accent) 28%, transparent);
}

.tms-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 1100;
    padding: .65rem 1rem;
    border-radius: var(--tms-radius);
    color: var(--tms-on-accent);
    background: var(--tms-accent-strong);
    font-weight: 650;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform .15s ease;
}

/* The shadow only while shown: parked above the viewport it would still
   bleed a grey smudge into the top of the header. */
.tms-skip-link:focus {
    color: var(--tms-on-accent);
    box-shadow: var(--tms-shadow-md);
    transform: translateY(0);
}

kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: .05rem .35rem;
    border: 1px solid var(--tms-border-strong);
    border-bottom-width: 2px;
    border-radius: .3rem;
    color: var(--tms-text-muted);
    background: var(--tms-surface);
    box-shadow: none;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Header and navbar
   DocFX's lit renderer owns #navbar (it appends the theme picker after the
   static search form), so the theme's own header content — the product
   section links — sits beside it in #navpanel.
   --------------------------------------------------------------------------- */

body > header {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--tms-header-h);
    border-bottom: 1px solid var(--tms-border);
    background: var(--tms-header-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

body > header > .navbar {
    min-width: 0;
    min-height: var(--tms-header-h);
    padding: 0;
}

.tms-header-inner {
    display: flex;
    align-items: center;
    gap: var(--tms-space-4);
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 var(--tms-space-4) 0 var(--tms-edge);
}

.navbar-brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    max-width: min(22rem, 45vw);
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--tms-text);
    font-family: var(--tms-font-display);
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.navbar-brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-brand,
.navbar-brand:hover {
    color: var(--tms-text);
    text-decoration: none;
}

.navbar-brand #logo {
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* Product pages: the brand spans at least the sidebar column, so the section
   links start where the reading area does (a longer site name just pushes
   them right rather than being cut off). */
@media (min-width: 992px) {
    .tms-tree-pending:not(.tms-nav-collapsed) .navbar-brand {
        min-width: calc(var(--tms-sidebar-w) - var(--tms-edge) - var(--tms-space-4));
    }
}

/* From tablet width up the site name is never truncated: the section links
   give way first (they fold into "More"). */
@media (min-width: 768px) {
    .navbar-brand {
        flex-shrink: 0;
        max-width: none;
    }
}

#navpanel {
    min-width: 0;
}

.navbar .nav-link {
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text-muted);
    font-weight: 550;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

/* Header menus (theme, screenshot theme, "More"): one compact style — the
   header's own type size, rounded items with the sidebar's hover and
   current-item treatment. */
.navbar .dropdown-menu {
    min-width: 11rem;
    max-height: min(32rem, calc(100vh - 5rem));
    margin-top: .35rem !important;
    padding: .3rem;
    overflow-y: auto;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius);
    background: var(--tms-surface-raised);
    box-shadow: var(--tms-shadow-panel);
    font-size: .875rem;
}

.navbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .65rem;
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text);
    line-height: 1.35;
}

.navbar .dropdown-item > .bi {
    flex: none;
    width: 1rem;
    color: var(--tms-text-muted);
    font-size: .95rem;
    text-align: center;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    color: var(--tms-nav-active-ink);
    background: var(--tms-nav-active-bg);
    font-weight: 600;
}

.navbar .dropdown-item.active > .bi,
.navbar .dropdown-item:active > .bi {
    color: inherit;
}

/* Icon buttons (theme, screenshot theme): same size, hover and radius as the
   section links beside them. */
#navbar .icons .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    height: 2.25rem;
    padding: 0 .55rem;
    border-radius: var(--tms-radius);
    color: var(--tms-text-muted);
}

#navbar .icons .dropdown-toggle:hover,
#navbar .icons .dropdown-toggle[aria-expanded="true"] {
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

/* Product section links (main.js, from nav.json's top-level entries). */
.tms-sections {
    flex: 0 1 auto;
    min-width: 0;
}

.tms-sections-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tms-sections-item[hidden],
.tms-sections-more[hidden] {
    display: none;
}

.tms-sections-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .7rem;
    border: 0;
    border-radius: var(--tms-radius);
    color: var(--tms-text-muted);
    background: transparent;
    font-size: .9rem;
    font-weight: 550;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.tms-sections-link:hover,
.tms-sections-link[aria-expanded="true"] {
    color: var(--tms-text);
    background: var(--tms-surface-muted);
    text-decoration: none;
}

.tms-sections-link.active {
    color: var(--tms-nav-active-ink);
    background: var(--tms-nav-active-bg);
    font-weight: 600;
}

.tms-sections-more .dropdown-toggle::after {
    margin-left: .15rem;
    vertical-align: .15em;
}

/* Search box with its Ctrl K / ⌘K hint (hidden while focused or filled). */
.navbar .search {
    min-width: 15rem;
    border-radius: 999px;
}

.navbar #navbar form.search > input {
    height: 2.25rem;
    padding-right: 4rem;
    border: 1px solid var(--tms-border);
    border-radius: 999px;
    color: var(--tms-text);
    background: var(--tms-surface-muted);
    font-size: .9rem;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.navbar #navbar form.search > input::placeholder {
    color: var(--tms-text-muted);
    opacity: 1;
}

.navbar #navbar form.search > input:hover {
    border-color: var(--tms-border-strong);
}

.navbar #navbar form.search > input:focus {
    border-color: var(--tms-accent);
    background: var(--tms-surface);
    box-shadow: var(--tms-focus-ring);
    outline: none;
}

.navbar #navbar form.search > i.bi {
    color: var(--tms-text-muted);
    opacity: 1;
}

.tms-search-kbd {
    position: absolute;
    right: .55rem;
    display: inline-flex;
    gap: .2rem;
    pointer-events: none;
}

.tms-search-kbd kbd {
    font-family: var(--tms-font-sans);
}

.tms-search-kbd .is-symbol {
    font-size: .8rem;
}

.navbar .search:focus-within .tms-search-kbd,
.navbar .search input:not(:placeholder-shown) ~ .tms-search-kbd,
.navbar .search input:disabled ~ .tms-search-kbd {
    display: none;
}

@media (min-width: 768px) {
    #navpanel {
        gap: var(--tms-space-3);
    }
}

/* Tablet: a narrower search box leaves the section links room to breathe. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .navbar .search {
        min-width: 11.5rem;
    }
}

@media (max-width: 767.98px) {
    body > header {
        height: auto;
        min-height: var(--tms-header-h);
    }

    .tms-header-inner {
        flex-wrap: wrap;
        padding: .5rem var(--tms-space-4);
        gap: 0 var(--tms-space-2);
    }

    .tms-header-inner > .btn {
        margin-left: auto;
    }

    #navpanel {
        flex-basis: 100%;
    }

    .tms-sections {
        margin-top: var(--tms-space-3);
        padding-top: var(--tms-space-3);
        border-top: 1px solid var(--tms-border);
    }

    .tms-sections-list {
        flex-direction: column;
        align-items: stretch;
    }

    .tms-sections-link {
        width: 100%;
    }

    .tms-search-kbd {
        display: none;
    }

    /* Theme buttons start on the same left edge as the links above them
       (DocFX centres them). */
    .navbar #navbar form.icons {
        align-self: flex-start;
        margin: .75rem 0 .25rem;
    }
}

/* ---------------------------------------------------------------------------
   Page layout: [product navigation] | [reading column] | [In this article]
   --------------------------------------------------------------------------- */

/* .tms-layout holds the side navigation, <main> (the reading column) and the
   "In this article" rail. It replaces DocFX's `body > main` container so that
   <main> wraps only the content; these rules recreate DocFX's own
   `body > main > …` layout for the new structure. Full-bleed: the navigation
   column starts at the viewport edge, like the header's brand. */
body > .tms-layout {
    display: flex;
    flex: 1;
    align-items: stretch;
    width: 100%;
    min-height: calc(100vh - var(--tms-header-h));
}

@media not print {
    body[data-search] > .tms-layout {
        display: none;
    }
}

.tms-layout > .toc-offcanvas {
    display: block;
    flex: 0;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .tms-layout > .toc-offcanvas .offcanvas-start,
    .tms-layout > .toc-offcanvas .offcanvas-body {
        height: 100%;
    }
}

/* The reading column fills the space between the side navigation and the
   rail and centres its content there. */
.tms-layout > .content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--tms-space-5) var(--tms-gutter) var(--tms-space-6);
}

/* The article does not grow: on a short page the previous / next cards
   follow the content directly and the spare height stays below them, above
   the footer (which the layout's min-height keeps at the viewport bottom). */
.tms-layout > .content > article {
    flex: none;
}

/* Hub pages have no breadcrumb or page actions: drop the empty bar and give
   the page title the same top offset the bar gives product pages. */
.tms-portal .tms-layout > .content {
    padding-top: var(--tms-space-6);
}

.tms-portal .tms-layout > .content > .actionbar {
    display: none;
}

.content > .actionbar,
.content > article,
.content > .contribution,
.content > .next-article {
    /* .content is a flex column: an auto-margined item would shrink to its
       content instead of stretching, so give it the full width explicitly. */
    width: 100%;
    max-width: var(--tms-content-width);
    margin-inline: auto;
}

.tms-portal .content > .actionbar,
.tms-portal .content > article,
.tms-portal .content > .contribution,
.tms-portal .content > .next-article {
    max-width: var(--tms-portal-width);
}

.tms-layout > .content > .actionbar {
    display: flex;
    align-items: flex-start;
    gap: var(--tms-space-3);
    min-height: 2rem;
    margin-bottom: var(--tms-space-4);
}

/* Phones: the side-navigation button, its icon on the content's left edge
   and centred on the 2rem action row. */
@media (min-width: 768px) {
    .tms-layout > .content > .actionbar > button.d-md-none {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .tms-layout > .content > .actionbar > button.d-md-none {
        display: inline-flex;
    }
}

.tms-layout > .content > .actionbar > button.d-md-none {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: -.5rem;
    padding: 0;
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text-muted);
    font-size: 1.25rem;
}

.tms-layout > .content > .actionbar > button.d-md-none:hover {
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

@media (max-width: 767.98px) {
    .tms-layout > .content {
        padding: var(--tms-space-4) var(--tms-space-4) var(--tms-space-6);
    }
}

.tms-breadcrumb {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--tms-text-muted);
    font-size: .85rem;
}

.tms-breadcrumb .breadcrumb {
    margin: .3rem 0 0;
    --bs-breadcrumb-divider-color: var(--tms-text-muted);
    --bs-breadcrumb-item-active-color: var(--tms-text);
}

.tms-breadcrumb a {
    color: var(--tms-text-muted);
}

.tms-breadcrumb a:hover {
    color: var(--tms-accent-strong);
}

/* The trail is always one line, vertically centred with "Copy link". When it
   does not fit, main.js folds the middle steps into an "…" button (the full
   trail is its tooltip; clicking it unfolds the trail, which may then wrap),
   and the current page's name is ellipsised as a last resort. */
.tms-breadcrumb .breadcrumb {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.tms-breadcrumb .breadcrumb-item {
    flex: none;
}

.tms-breadcrumb .breadcrumb-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tms-breadcrumb .breadcrumb.is-measuring .breadcrumb-item:last-child {
    flex: none;
}

.tms-breadcrumb .breadcrumb-item[hidden] {
    display: none;
}

.tms-breadcrumb.is-expanded .breadcrumb {
    flex-wrap: wrap;
    white-space: normal;
}

.tms-breadcrumb-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text-muted);
    background: transparent;
    font: inherit;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.tms-breadcrumb-more:hover {
    border-color: var(--tms-border-strong);
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

/* Product pages always get a trail: reserve its line before paint so the
   article does not move down when it appears. */
.tms-tree-pending .tms-breadcrumb {
    min-height: 1.75rem;
}

/* Page actions ("Copy link"), right of the breadcrumb. */
.tms-page-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--tms-space-2);
    margin-left: auto;
}

.tms-copy-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 2rem;
    padding: 0 .7rem;
    border: 1px solid var(--tms-border);
    border-radius: 999px;
    color: var(--tms-text-muted);
    background: var(--tms-surface);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.tms-copy-link[hidden] {
    display: none;
}

.tms-copy-link .bi {
    font-size: 1rem;
}

.tms-copy-link:hover {
    border-color: var(--tms-border-strong);
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

.tms-copy-link.is-copied {
    border-color: color-mix(in srgb, var(--tms-tip) 45%, var(--tms-border));
    color: var(--tms-tip-ink);
}

@media (max-width: 575.98px) {
    .tms-copy-link {
        width: 2rem;
        padding: 0;
        justify-content: center;
    }

    .tms-copy-link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
   Left column: product navigation
   --------------------------------------------------------------------------- */

/* The column stretches to the full layout height (tinted surface + rule); its
   panel is sticky under the header and scrolls on its own. Hidden below
   768px, where the offcanvas copy of the tree takes over. */
.component-toc {
    display: none;
    flex: 0 0 var(--tms-sidebar-w);
    width: var(--tms-sidebar-w);
    border-right: 1px solid var(--tms-border);
    background: var(--tms-surface-sunken);
    font-size: .875rem;
    line-height: 1.4;
}

.component-toc-panel {
    position: sticky;
    top: var(--tms-header-h);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--tms-header-h));
    /* Same top offset as the reading column and the rail: the sidebar
       header, the breadcrumb row and "In this article" share one centre line. */
    padding: var(--tms-space-5) 0 0;
}

@media (min-width: 768px) {
    /* Product pages reserve the pane before paint (tms-tree-pending, set by the
       template) so the reading column does not jump when the tree arrives. */
    .component-toc.is-ready,
    .tms-tree-pending .component-toc {
        display: block;
    }

    /* Collapsed: the column shrinks to a slim strip that keeps only the
       toggle, in exactly the place it occupies when expanded. */
    .tms-nav-collapsed .component-toc {
        flex-basis: var(--tms-sidebar-collapsed-w);
        width: var(--tms-sidebar-collapsed-w);
    }

    .tms-nav-collapsed .component-toc-header,
    .tms-nav-collapsed .tms-tree-filter-host,
    .tms-nav-collapsed .component-toc-body {
        display: none;
    }

    /* The default DocFX TOC is disabled (it loads the ~14 MB root toc); on
       wide screens the scoped pane replaces it, so hide the empty column. */
    .tms-layout > .toc-offcanvas {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    :root {
        --tms-sidebar-w: 15rem;
    }
}

/* The offcanvas copy of the tree (#toc, small screens) carries both .toc and
   the .component-toc-item classes; the tree rules below are declared later so
   they win for the current-page pill. */
/* Bootstrap declares these variables on .offcanvas-md itself, so they must be
   set on that element (a rule on an ancestor would be shadowed). */
.toc-offcanvas .offcanvas-md {
    --bs-offcanvas-bg: var(--tms-surface-sunken);
    --bs-offcanvas-width: min(20rem, 86vw);
    --bs-offcanvas-border-color: var(--tms-border);
}

.toc-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--tms-border);
}

.toc-offcanvas .offcanvas-title {
    font-size: 1rem;
    font-weight: 650;
}

.toc-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: var(--tms-space-3) var(--tms-space-3) var(--tms-space-6);
    background: var(--tms-surface-sunken);
}

.toc-offcanvas .tms-tree-filter-host {
    padding: 0 0 var(--tms-space-2);
}

/* DocFX's own `.toc ul` / `.toc li` rules (zero list padding, li indents,
   nested lists hidden unless li.expanded) must not apply to our tree. */
.toc ul.component-toc-list {
    padding-left: 1.1rem;
    font-size: .9rem;
}

.toc ul.component-toc-children {
    padding-left: .7rem;
    font-size: inherit;
}

.toc li.component-toc-item {
    margin: 1px 0;
    padding-left: 0;
}

.toc li.component-toc-item.is-open > ul.component-toc-children {
    display: block;
}

.toc li.component-toc-item > a {
    display: block;
}

.toc li.component-toc-item > a:hover,
.toc li.component-toc-item > a:focus {
    text-decoration: none;
}

.toc a {
    color: var(--tms-text-muted);
    text-decoration: none;
}

.toc a:hover,
.toc a.active {
    color: var(--tms-nav-active-ink);
}

/* Hide / show the side navigation (desktop): one toggle at the start of the
   column's header row, in the same place whether expanded or collapsed. */
.component-toc-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--tms-radius-sm);
    background: transparent;
    color: var(--tms-text-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.component-toc-collapse:hover {
    border-color: var(--tms-border);
    background: var(--tms-surface-muted);
    color: var(--tms-text);
}

/* The icon (not the button box) sits on the shared left edge, under the
   header logo and over the filter box; collapsed, the button is centred in
   the slim strip. */
.component-toc-collapse {
    flex: 0 0 auto;
    margin-left: -.5rem;
    font-size: 1rem;
}

.component-toc-top {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    min-height: 2rem;
    padding: 0 var(--tms-space-3) 0 var(--tms-edge);
}

.component-toc-header {
    flex: 1 1 auto;
    min-width: 0;
    padding: .3rem 0 .3rem .1rem;
    font-family: var(--tms-font-display);
    font-size: .98rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.component-toc-header a {
    color: var(--tms-text);
    text-decoration: none;
}

.component-toc-header a:hover {
    color: var(--tms-accent-strong);
}

.component-toc .tms-tree-filter-host {
    flex: 0 0 auto;
    padding: var(--tms-space-3) var(--tms-space-3) var(--tms-space-2) var(--tms-edge);
}

.component-toc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--tms-space-1) var(--tms-space-3) var(--tms-space-6) var(--tms-space-2);
    scrollbar-width: thin;
    scrollbar-color: var(--tms-border-strong) transparent;
}

/* "Filter by title" (main.js). */
.tms-tree-filter {
    position: relative;
    display: flex;
    align-items: center;
}

.tms-tree-filter > .bi-filter {
    position: absolute;
    left: .65rem;
    color: var(--tms-text-muted);
    font-size: .95rem;
    pointer-events: none;
}

.tms-tree-filter-input {
    width: 100%;
    height: 2.1rem;
    padding: 0 2rem 0 2.05rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius);
    color: var(--tms-text);
    background: var(--tms-surface);
    font: inherit;
    font-size: .85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tms-tree-filter-input::placeholder {
    color: var(--tms-text-muted);
    opacity: 1;
}

.tms-tree-filter-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.tms-tree-filter-input:hover {
    border-color: var(--tms-border-strong);
}

.tms-tree-filter-input:focus {
    border-color: var(--tms-accent);
    box-shadow: var(--tms-focus-ring);
    outline: none;
}

.tms-tree-filter-clear {
    position: absolute;
    right: .3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text-muted);
    background: transparent;
    font-size: .7rem;
    cursor: pointer;
}

.tms-tree-filter-clear[hidden] {
    display: none;
}

.tms-tree-filter-clear:hover {
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

.tms-tree-filter-status {
    margin: .4rem 0 0 .15rem;
    color: var(--tms-text-muted);
    font-size: .75rem;
}

.tms-tree-filter-status:empty {
    display: none;
}

.tms-tree-filter-empty {
    margin: .5rem .6rem .5rem 1rem;
    color: var(--tms-text-muted);
}

.component-toc-item mark {
    padding: 0 .05em;
    border-radius: 2px;
    color: inherit;
    background: color-mix(in srgb, var(--tms-accent) 26%, transparent);
}

/* The tree. Chevrons sit in the list's left gutter. */
.component-toc-list,
.component-toc-children {
    list-style: none;
    margin: 0;
}

.component-toc-list {
    padding-left: 1.1rem;
}

.component-toc-children {
    padding-left: .7rem;
    border-left: 1px solid var(--tms-border);
    margin: .1rem 0 .3rem .55rem;
}

.component-toc-item {
    position: relative;
    margin: 1px 0;
}

.component-toc-item > a,
.component-toc-item > .component-toc-group {
    display: block;
    padding: .32rem .6rem;
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text-muted);
    text-decoration: none;
    overflow-wrap: break-word;
    transition: background-color .12s ease, color .12s ease;
}

/* Non-link grouping nodes (e.g. "API by component"). */
.component-toc-item > .component-toc-group {
    color: var(--tms-text-muted);
    cursor: default;
}

.component-toc-item > .component-toc-branch-label {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.component-toc-item > a:hover,
.component-toc-item > .component-toc-branch-label:hover {
    background: color-mix(in srgb, var(--tms-text) 6%, transparent);
    color: var(--tms-text);
    text-decoration: none;
}

.component-toc-item > a.active {
    background: var(--tms-nav-active-bg);
    color: var(--tms-nav-active-ink);
    font-weight: 600;
}

.component-toc-toggle {
    position: absolute;
    left: -1.1rem;
    top: .2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--tms-text-muted);
    cursor: pointer;
    line-height: 1;
}

.component-toc-toggle:hover {
    color: var(--tms-text);
}

.component-toc-toggle > span::before {
    content: "\f285";
    display: inline-block;
    font-family: bootstrap-icons;
    font-size: .62rem;
    transition: transform .15s ease;
}

.component-toc-item.is-open > .component-toc-toggle > span::before {
    transform: rotate(90deg);
}

.component-toc-item:not(.is-open) > .component-toc-children {
    display: none;
}

/* ---------------------------------------------------------------------------
   Right column: "In this article" rail
   --------------------------------------------------------------------------- */

/* Right column; the list is sticky inside it. No column rule: the entries'
   own indicator track already separates it from the article. Hidden below
   1140px and on pages without section headings. */
.tms-layout > .affix {
    display: block;
    flex: 0 0 var(--tms-rail-w);
    width: var(--tms-rail-w);
    color: var(--tms-text-muted);
    font-size: .82rem;
    line-height: 1.45;
}

/* Product pages (tms-tree-pending) keep the rail column even when a page has
   no (or a single) section heading, so the reading column sits at the same
   place on every page and never shifts between neighbours; a one-entry list
   adds nothing and stays hidden. Hub pages drop an empty rail. */
html:not(.tms-tree-pending) .tms-layout > .affix:not(:has(#affix a)) {
    display: none;
}

.affix #affix:not(:has(li + li, li li)) {
    visibility: hidden;
}

.affix #affix {
    position: sticky;
    top: var(--tms-header-h);
    max-height: calc(100vh - var(--tms-header-h));
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--tms-space-5) var(--tms-space-5) var(--tms-space-6);
    scrollbar-width: thin;
    scrollbar-color: var(--tms-border-strong) transparent;
}

@media only screen and (max-width: 1140px) {
    .tms-layout > .affix {
        display: none;
    }
}

@media (min-width: 768px) {
    .tms-layout > .content > article [id] {
        scroll-margin-top: calc(var(--tms-header-h) + 1rem);
    }
}

/* A 2rem row, like the breadcrumb row and the sidebar header beside it. */
.affix h5 {
    display: flex;
    align-items: center;
    min-height: 2rem;
    margin: 0 0 .5rem;
    padding: 0;
    border: 0 !important;
    color: var(--tms-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.affix ul {
    margin: 0;
    padding: 0;
}

/* One continuous track down the side of the list, ending at the last entry;
   only the current section's segment is drawn over it in the accent. */
.affix #affix > ul {
    border-left: 1px solid var(--tms-border);
}

.affix ul li {
    margin: 0;
}

/* Block-level so a long entry that wraps keeps its indent on every line, not
   just the first. The transparent 2px border sits over the list's 1px track
   (-1px margin) and turns accent for the current section. DocFX marks the
   links .link-body-emphasis, whose colour is !important; the rail's own muted
   / hover / current colours must win over it. */
.affix a {
    display: block;
    margin-left: -1px;
    padding: .28rem 0 .28rem .85rem;
    border-left: 2px solid transparent;
    color: var(--tms-text-muted) !important;
    text-decoration: none;
}

.affix ul ul a,
.affix a.is-sub {
    padding-left: 1.6rem;
}

.affix a:hover {
    color: var(--tms-text) !important;
    border-left-color: var(--tms-border-strong);
    text-decoration: none;
}

.affix a.active {
    color: var(--tms-nav-active-ink) !important;
    border-left-color: var(--tms-accent);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Article typography
   --------------------------------------------------------------------------- */

article {
    padding-bottom: 2.5rem;
    color: var(--tms-text);
}

article > :first-child {
    margin-top: 0;
}

/* The article's own bottom padding is the gap to the pager; a trailing
   block's margin must not add to it. */
article > :last-child {
    margin-bottom: 0;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    color: var(--tms-text);
    font-family: var(--tms-font-display);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-wrap: balance;
    /* Long API identifiers in titles must not widen the page on phones. */
    overflow-wrap: break-word;
}

/* Type scale: 36 / 24 / 19 / 16px on desktop. */
article h1 {
    margin-bottom: 1rem;
    font-size: clamp(1.85rem, 1.45rem + 1.1vw, 2.25rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.025em;
}

/* Sections are separated by space and the heading itself, not by a rule. */
article h2 {
    margin-top: 2.75rem;
    margin-bottom: .8rem;
    font-size: 1.5rem;
    letter-spacing: -.02em;
}

article h3 {
    margin-top: 2rem;
    margin-bottom: .6rem;
    font-size: 1.18rem;
}

article h4,
article h5 {
    margin-top: 1.5rem;
    margin-bottom: .5rem;
    font-size: 1rem;
}

article > h1 + p {
    color: var(--tms-text-muted);
    font-size: 1.125rem;
    line-height: 1.6;
}

article p,
article ul,
article ol {
    margin-bottom: 1rem;
}

article li + li {
    margin-top: .3rem;
}

article strong {
    font-weight: 650;
}

/* Body links are underlined (WCAG 1.4.1: not by colour alone) with a quiet,
   tinted line that turns solid and a touch thicker on hover. Heading anchors,
   buttons and the code copy action keep their own treatment. */
article a {
    text-decoration-line: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

article a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: .12em;
}

article :is(h1, h2, h3, h4, h5, h6) a,
article a.anchorjs-link,
article a.btn {
    text-decoration: none;
}

article hr {
    margin: 2.5rem 0;
    border-color: var(--tms-border);
    opacity: 1;
}

/* [data-bs-theme] outranks DocFX's `[data-bs-theme=dark] blockquote` grey rule. */
[data-bs-theme] article blockquote {
    margin: 1.5rem 0;
    padding: .9rem 1.15rem;
    border-left: 3px solid var(--tms-accent);
    border-radius: 0 var(--tms-radius) var(--tms-radius) 0;
    color: var(--tms-text-muted);
    background: var(--tms-surface-muted);
}

article blockquote > :last-child {
    margin-bottom: 0;
}

/* API pages: the "API unit family / Declaring type / Inherits from" metadata
   line under the summary reads as a quiet key-value strip. It always starts
   with a bold label, which keeps ordinary paragraphs after a quote out.
   main.js groups each label with its value (.tms-meta-item) so a pair never
   breaks across lines. */
article > blockquote + p:has(> strong:first-child, > .tms-meta-item:first-child) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem 1.5rem;
    margin: 1.1rem 0 1.5rem;
    color: var(--tms-text-muted);
    font-size: .9rem;
    line-height: 1.6;
}

article > blockquote + p:has(> strong:first-child, > .tms-meta-item:first-child) strong {
    color: var(--tms-text);
    font-weight: 600;
}

article .tms-meta-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem .45rem;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Code
   Code panels stay light in the light theme: API and guide pages carry many
   snippets, and dark slabs on a white page would dominate the reading column
   and clash with the (mostly light) screenshots. In the dark theme the panel
   is a sunken graphite surface a step below the page.
   --------------------------------------------------------------------------- */

/* Inline code is neutral (text colour on a soft fill) so the accent stays
   reserved for links; linked code takes the link colour. */
article :not(pre) > code {
    overflow-wrap: break-word;
    padding: .12em .38em;
    border: 1px solid color-mix(in srgb, var(--tms-border) 70%, transparent);
    border-radius: 5px;
    color: var(--tms-text);
    background: var(--tms-code-inline-bg);
    font-size: .86em;
}

article a > code {
    color: inherit;
}

article pre {
    position: relative;
    margin: 1.4rem 0 1.75rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    color: var(--tms-code-text);
    background: var(--tms-code-bg);
    box-shadow: var(--tms-shadow-xs);
    font-size: .85rem;
    line-height: 1.6;
}

/* DocFX's copy button: always discoverable at low opacity, fully visible when
   the block is hovered or focused (DocFX itself only shows it on hover). */
article pre > .code-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: .45rem;
    right: .45rem;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--tms-radius-sm);
    color: var(--tms-text-muted);
    background: color-mix(in srgb, var(--tms-code-bg) 85%, transparent);
    font-size: .9rem;
    line-height: 1;
    opacity: .5;
    transition: opacity .15s ease, color .15s ease, background-color .15s ease, border-color .15s ease;
}

article pre:hover > .code-action,
article pre:focus-within > .code-action,
article pre:focus-visible > .code-action {
    display: inline-flex;
    opacity: 1;
}

article pre > .code-action .bi,
article pre > .code-action .bi-check-lg {
    font-size: .9rem;
    line-height: 1;
}

article pre > .code-action:hover {
    border-color: var(--tms-border);
    color: var(--tms-text);
    background: var(--tms-surface-muted);
}

/* Titled code block (build-time markup):
     <figure class="code-block">
       <figcaption class="code-block-title"><span class="code-block-name">…</span>
         <span class="code-block-lang">Pascal</span></figcaption>
       <pre>…</pre>
     </figure>
   The caption and the <pre> read as one panel. The name span is optional. */
article figure.code-block {
    position: relative;
    margin: 1.4rem 0 1.75rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    background: var(--tms-code-bg);
    box-shadow: var(--tms-shadow-xs);
    overflow: hidden;
}

/* The <pre> is not the positioning box here, so DocFX's copy button lands in
   the caption bar (top right of the figure), always fully visible. */
article figure.code-block > pre {
    position: static;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

article figure.code-block > pre > .code-action {
    top: .3rem;
    opacity: 1;
}

article .code-block-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.35rem;
    margin: 0;
    padding: .4rem 2.75rem .4rem 1.15rem;
    border-bottom: 1px solid var(--tms-border);
    color: var(--tms-text-muted);
    background: color-mix(in srgb, var(--tms-text) 3.5%, var(--tms-code-bg));
    font-size: .8rem;
    line-height: 1.4;
}

article .code-block-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--tms-text);
    font-weight: 600;
}

/* Language: a quiet label, right of the snippet title or, when there is no
   title, at the start of the bar. */
article .code-block-lang {
    flex: none;
    margin-left: auto;
    color: var(--tms-text-muted);
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

article .code-block-lang:only-child {
    margin-left: 0;
}

/* Code inside a <pre> must not draw a second box (hljs sets its own background). */
[data-bs-theme] article pre code,
[data-bs-theme] article pre code.hljs {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
}

/* Highlight.js token colours. Replaces DocFX's Visual Studio palettes for both
   themes; the selector outranks DocFX's `[data-bs-theme=dark] .hljs-meta
   .hljs-keyword` style rules. */
[data-bs-theme] pre code.hljs :is(.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-tag, .hljs-link) { color: var(--tms-hl-keyword); }
[data-bs-theme] pre code.hljs :is(.hljs-built_in, .hljs-type, .hljs-class, .hljs-attr, .hljs-attribute) { color: var(--tms-hl-type); }
[data-bs-theme] pre code.hljs :is(.hljs-string, .hljs-template-tag, .hljs-template-variable, .hljs-regexp, .hljs-addition) { color: var(--tms-hl-string); }
[data-bs-theme] pre code.hljs :is(.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet) { color: var(--tms-hl-number); }
[data-bs-theme] pre code.hljs :is(.hljs-comment, .hljs-quote) { color: var(--tms-hl-comment); font-style: italic; }
[data-bs-theme] pre code.hljs :is(.hljs-meta, .hljs-doctag, .hljs-deletion, .hljs-selector-attr, .hljs-selector-pseudo) { color: var(--tms-hl-meta); }
[data-bs-theme] pre code.hljs :is(.hljs-title, .hljs-section, .hljs-selector-id, .hljs-selector-class) { color: var(--tms-hl-title); }
[data-bs-theme] pre code.hljs :is(.hljs-function, .hljs-params, .hljs-subst, .hljs-formula, .hljs-variable, .hljs-property, .hljs-punctuation, .hljs-operator) { color: inherit; }
[data-bs-theme] pre code.hljs .hljs-link { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Callouts: icon + uppercase label in the type colour, a 3px type rule on the
   left and a soft tint of the same colour. Body text stays neutral.
   --------------------------------------------------------------------------- */

article .NOTE,
article .TIP,
article .IMPORTANT,
article .WARNING,
article .CAUTION {
    --callout: var(--tms-note);
    --callout-ink: var(--tms-note-ink);
    --callout-icon: "\f431";
    margin: 1.5rem 0;
    padding: .9rem 1.15rem 1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--callout) 24%, var(--tms-border));
    border-left: 3px solid var(--callout);
    border-radius: var(--tms-radius);
    /* DocFX adds Bootstrap .alert-* classes, which tint the body text; keep the
       text neutral and let the rule, tint and label carry the type. */
    color: var(--tms-text);
    background: color-mix(in srgb, var(--callout) var(--tms-callout-tint), var(--tms-surface));
}

article :is(.NOTE, .TIP, .IMPORTANT, .WARNING, .CAUTION) > :last-child {
    margin-bottom: 0;
}

article .TIP { --callout: var(--tms-tip); --callout-ink: var(--tms-tip-ink); --callout-icon: "\f46b"; }
article .IMPORTANT { --callout: var(--tms-important); --callout-ink: var(--tms-important-ink); --callout-icon: "\f333"; }
article .WARNING { --callout: var(--tms-warning); --callout-ink: var(--tms-warning-ink); --callout-icon: "\f33b"; }
article .CAUTION { --callout: var(--tms-caution); --callout-ink: var(--tms-caution-ink); --callout-icon: "\f337"; }

/* The label is DocFX's <h5> or, after build post-processing, a
   <p class="alert-title"> (a callout label is not a document heading). */
article :is(.NOTE, .TIP, .IMPORTANT, .WARNING, .CAUTION) > :is(h5, .alert-title) {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .4rem;
    color: var(--callout-ink);
    font-family: var(--tms-font-sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* One icon per type (replaces DocFX's per-alert-class h5 icon). */
article :is(.NOTE, .TIP, .IMPORTANT, .WARNING, .CAUTION) > :is(h5, .alert-title)::before {
    content: var(--callout-icon);
    position: static;
    margin: 0;
    font-family: bootstrap-icons;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Tables: hairline rows, quiet uppercase header, flush outer cells
   --------------------------------------------------------------------------- */

article table {
    --bs-table-bg: transparent;
    display: table;
    width: 100%;
    margin: 1.25rem 0 1.75rem;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .925rem;
    line-height: 1.55;
}

article table th,
article table td,
article table.table th,
article table.table td {
    padding: .65rem .85rem;
    border: 0;
    border-bottom: 1px solid var(--tms-border);
    vertical-align: top;
}

article table.table-bordered > :not(caption) > * {
    border-width: 0;
}

article table thead th {
    border-bottom: 1px solid var(--tms-border-strong);
    color: var(--tms-text-muted);
    background: transparent;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

article table tbody tr:last-child td {
    border-bottom: 0;
}

article table th:first-child,
article table td:first-child {
    padding-left: 0;
}

article table th:last-child,
article table td:last-child {
    padding-right: 0;
}

/* Identifier chips in tables break only at the member dots (main.js adds a
   <wbr> after each "."), never inside a name; the column's minimum width is
   therefore its longest name segment, not one character. */
article table code {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

/* A cell of plain links ("Get started / API") keeps each link on one line;
   the cell wraps between links, never inside one. */
article table td:not(:first-child):not(:has(> :not(a))) > a {
    white-space: nowrap;
}

/* API member tables: quiet "(inherited from …)" notes. */
article table td em {
    color: var(--tms-text-muted);
    font-size: .85em;
}

/* Hub pages (root and family portals): product tables read as one framed
   panel with a tinted header and a bold product link per row. */
.tms-portal article table {
    border: 1px solid var(--tms-border);
    border-collapse: separate;
    border-radius: var(--tms-radius-lg);
    overflow: hidden;
    background: var(--tms-surface-raised);
    box-shadow: var(--tms-shadow-xs);
}

.tms-portal article table thead th {
    border-bottom: 1px solid var(--tms-border);
    background: var(--tms-surface-muted);
}

.tms-portal article table th,
.tms-portal article table td,
.tms-portal article table th:first-child,
.tms-portal article table td:first-child,
.tms-portal article table th:last-child,
.tms-portal article table td:last-child {
    padding: .8rem 1rem;
}

.tms-portal article table td:first-child {
    width: 15rem;
}

.tms-portal article table td:first-child a {
    font-weight: 650;
    text-decoration: none;
}

.tms-portal article table td:first-child a:hover {
    text-decoration: underline;
}

.tms-portal article table tbody tr {
    transition: background-color .12s ease;
}

.tms-portal article table tbody tr:hover {
    background: color-mix(in srgb, var(--tms-accent) 5%, transparent);
}

@media (max-width: 575.98px) {
    .tms-portal article table td:first-child {
        width: auto;
    }
}

/* ---------------------------------------------------------------------------
   Images and screenshots
   --------------------------------------------------------------------------- */

article img {
    max-width: 100%;
    height: auto;
}

article p > img:only-child {
    display: block;
    margin: 1.25rem 0 1.5rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    background: var(--tms-surface);
    box-shadow: var(--tms-shadow-img);
}

/* Calm presentation panel for light-background screenshots (legacy captures,
   UI mockups). A pure-white card glares against the dark theme, so the surface
   is a muted off-white; in dark mode the panel gets a low-contrast border,
   a deeper shadow and a slight brightness pull so the image sits on the page
   instead of punching a hole in it. */
article .screenshot-light {
    display: inline-block;
    max-width: 100%;
    margin: 1.25rem 0 1.5rem;
    padding: .75rem;
    border: 1px solid var(--tms-shot-panel-border);
    border-radius: var(--bs-border-radius);
    background: var(--tms-shot-panel-bg);
    box-shadow: var(--tms-shot-panel-shadow);
}

article .screenshot-light img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: calc(var(--bs-border-radius) * .75);
    background: transparent;
}

[data-bs-theme="dark"] article .screenshot-light img {
    filter: brightness(.96);
}

/* Themed screenshot pair: a light capture and a dark capture. The screenshot-
   theme toggle in the navbar (rendered by main.js) chooses auto | light | dark;
   in auto (the default) screenshots follow the page theme, otherwise they are
   pinned. Either way the RESOLVED light/dark value lands in data-screenshot-theme
   (set before paint by the master layout, kept in sync with live theme changes
   by main.js), and these rules key off it. Author with two images carrying
   `light-only` / `dark-only` (the dark file is the `-dark` variant from
   `Build-Screenshot.ps1 -Theme both`):
     <figure class="screenshot-themed">
       <img class="light-only" src="images/grid.png" alt="…">
       <img class="dark-only"  src="images/grid-dark.png" alt="…">
     </figure> */
article .screenshot-themed {
    display: inline-block;
    max-width: 100%;
    margin: 1.25rem 0 1.5rem;
}

article .screenshot-themed img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tms-radius-lg);
    box-shadow: var(--tms-shadow-img);
}

/* Light screenshots (default): never show a dark variant. */
[data-screenshot-theme="light"] article .screenshot-themed .dark-only { display: none; }
/* Dark screenshots: prefer the dark variant and hide the light one — but only
   when a dark variant is actually present in the figure. When no `.dark-only`
   image was produced, keep showing the light image (slightly dimmed so the
   bright capture does not glare), so authors can always reach for
   `screenshot-themed` and the figure does the right thing in both modes. */
[data-screenshot-theme="dark"] article .screenshot-themed:has(.dark-only) .light-only { display: none; }
[data-screenshot-theme="dark"] article .screenshot-themed:not(:has(.dark-only)) .light-only { filter: brightness(.92); }

/* ---------------------------------------------------------------------------
   Card grids (`<div class="grid">` + a Markdown list)
   --------------------------------------------------------------------------- */

article .grid > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

article .grid > ul > li {
    /* No list-item spacing: the grid gap spaces the cards (a top margin on
       every card but the first would misalign the first row). */
    margin: 0;
    padding: 1.2rem 1.35rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    background: var(--tms-surface-raised);
    box-shadow: var(--tms-shadow-xs);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

article .grid > ul > li:hover {
    border-color: color-mix(in srgb, var(--tms-accent) 45%, var(--tms-border));
    box-shadow: var(--tms-shadow-md);
    transform: translateY(-2px);
}

article .grid > ul > li > p:first-of-type {
    font-weight: 600;
    margin-bottom: .4rem;
}

/* A card whose title line is just a link (product cards on the landing pages)
   is clickable as a whole: the link's ::after covers the card, and an arrow in
   the top-right corner signals it. */
article .grid > ul > li:has(> p:first-of-type > a:only-child) {
    position: relative;
    padding-right: 2.75rem;
}

article .grid > ul > li:has(> p:first-of-type > a:only-child)::before {
    content: "\f138";
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    color: var(--tms-text-muted);
    font-family: bootstrap-icons;
    font-size: 1rem;
    line-height: 1;
    transition: transform .16s ease, color .16s ease;
}

article .grid > ul > li:hover::before {
    color: var(--tms-accent);
    transform: translateX(3px);
}

article .grid > ul > li:has(> p:first-of-type > a:only-child:focus-visible) {
    outline: 2px solid var(--tms-accent);
    outline-offset: 2px;
}

article .grid > ul > li > p:first-of-type > a:only-child {
    color: var(--tms-text);
    font-family: var(--tms-font-display);
    font-size: 1.02rem;
    font-weight: 650;
    text-decoration: none;
}

article .grid > ul > li:hover > p:first-of-type > a:only-child {
    color: var(--tms-accent-strong);
}

article .grid > ul > li > p:first-of-type > a:only-child:focus-visible {
    outline: none;
}

article .grid > ul > li:has(> p:first-of-type > a:only-child) > p:not(:first-of-type) {
    color: var(--tms-text-muted);
    font-size: .93rem;
}

article .grid > ul > li > p:first-of-type > a:only-child::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

article .grid > ul > li > p:last-child {
    margin-bottom: 0;
}

article .grid > ul > li hr {
    margin: .5rem 0;
    opacity: .4;
}

/* ---------------------------------------------------------------------------
   Portal pages (root landing, family hubs)
   --------------------------------------------------------------------------- */

/* Root landing hero (`<div class="tms-hero">` in landing/index.md): eyebrow,
   title, one-line value proposition and the family entry points. */
article .tms-hero {
    position: relative;
    margin: 0 0 var(--tms-space-6);
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
    border: 1px solid var(--tms-border);
    border-radius: 1rem;
    background:
        radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tms-accent) 16%, transparent) 0%, transparent 55%),
        linear-gradient(180deg, var(--tms-surface-raised), var(--tms-surface-muted));
    overflow: hidden;
}

article .tms-hero > :last-child {
    margin-bottom: 0;
}

article .tms-hero .tms-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .9rem;
    padding: .2rem .7rem;
    border: 1px solid color-mix(in srgb, var(--tms-accent) 35%, var(--tms-border));
    border-radius: 999px;
    color: var(--tms-nav-active-ink);
    background: color-mix(in srgb, var(--tms-accent) 8%, var(--tms-surface));
    font-size: .75rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

article .tms-hero h1 {
    max-width: 22ch;
    margin: 0 0 .85rem;
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    letter-spacing: -.03em;
}

article .tms-hero .tms-hero-lead {
    max-width: 44rem;
    margin: 0 0 1.75rem;
    color: var(--tms-text-muted);
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Family entry points: the first is the primary (filled) action. */
article .tms-hero-actions > ul {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

article .tms-hero-actions > ul > li {
    margin: 0;
}

article .tms-hero-actions a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.6rem;
    padding: .5rem 1.05rem;
    border: 1px solid var(--tms-border-strong);
    border-radius: var(--tms-radius);
    color: var(--tms-text);
    background: var(--tms-surface);
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

article .tms-hero-actions a::after {
    content: "\f138";
    font-family: bootstrap-icons;
    font-size: .9em;
    transition: transform .15s ease;
}

article .tms-hero-actions a:hover {
    border-color: var(--tms-accent);
    color: var(--tms-accent-strong);
    text-decoration: none;
}

article .tms-hero-actions a:hover::after {
    transform: translateX(2px);
}

article .tms-hero-actions > ul > li:first-child a {
    border-color: var(--tms-accent);
    color: var(--tms-on-accent);
    background: var(--tms-accent);
}

article .tms-hero-actions > ul > li:first-child a:hover {
    color: var(--tms-on-accent);
    background: var(--tms-accent-strong);
    box-shadow: var(--tms-shadow-sm);
}

/* Family sections on the portals: a hairline above each family heading. */
.tms-portal article > h2 {
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--tms-border);
}

.tms-portal article > .tms-hero + h2,
.tms-portal article > h1 + p + h2 {
    margin-top: 2rem;
    padding-top: 0;
    border-top: 0;
}

.tms-portal article > h1 {
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem);
}

/* ---------------------------------------------------------------------------
   Search results
   --------------------------------------------------------------------------- */

/* Results replace the page body: a centred panel with the page's own side
   margins (not Bootstrap's container gutters). */
body > .search-results.tms-search-open {
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: var(--tms-space-5) var(--tms-edge) var(--tms-space-6);
}

.tms-search-panel {
    margin: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tms-radius-lg);
    background: var(--bs-body-bg);
    box-shadow: var(--tms-shadow-panel);
    overflow: hidden;
}

.tms-search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.tms-search-heading {
    font-weight: 600;
}

.tms-search-subheading,
.tms-search-status,
.tms-search-path {
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.tms-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-content: flex-end;
}

.tms-search-tab {
    padding: .25rem .5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .8125rem;
    line-height: 1.2;
}

.tms-search-tab.active {
    border-color: var(--tms-accent);
    background: var(--tms-accent);
    color: var(--tms-on-accent);
}

.tms-search-tab span {
    color: inherit;
    opacity: .75;
}

.tms-search-table-wrap {
    max-height: min(34rem, calc(100vh - 12rem));
    overflow: auto;
}

.tms-search-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: .875rem;
    line-height: 1.5;
}

/* The excerpt is supporting text: muted, so the entry names lead. */
.tms-search-table td:last-child {
    color: var(--tms-text-muted);
}

.tms-search-table th,
.tms-search-table td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    vertical-align: top;
}

.tms-search-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tms-search-table th:first-child,
.tms-search-table td:first-child {
    width: 34%;
}

.tms-search-table th:nth-child(2),
.tms-search-table td:nth-child(2) {
    width: 7.5rem;
}

.tms-search-table th:nth-child(3),
.tms-search-table td:nth-child(3) {
    width: 7rem;
}

.tms-search-title-link {
    font-weight: 600;
    text-decoration: none;
}

.tms-search-title-link code {
    overflow-wrap: anywhere;
}

.tms-search-title-link:hover,
.tms-search-title-link:focus {
    text-decoration: underline;
}

.tms-search-kind {
    display: inline-block;
    padding: .125rem .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    line-height: 1.2;
    text-transform: capitalize;
}

.tms-search-status {
    padding: 1rem;
}

.tms-search-hint {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .75rem;
    white-space: nowrap;
}

.tms-search-hint kbd {
    padding: .05rem .3rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .7rem;
    line-height: 1.3;
}

.tms-search-table mark {
    padding: 0 .1em;
    border-radius: 3px;
    color: var(--tms-text);
    background: color-mix(in srgb, var(--tms-accent) 14%, transparent);
}

.tms-search-table tbody tr.is-active-result {
    background: var(--bs-primary-bg-subtle);
    box-shadow: inset 3px 0 0 0 var(--bs-primary);
}

.tms-search-table tbody tr.is-active-result .tms-search-title-link {
    text-decoration: underline;
}

/* Declared after the active-row rule on purpose: hovering wins the fill. */
.tms-search-table tbody tr:hover {
    background: var(--tms-surface-muted);
}

@media (max-width: 768px) {
    .tms-search-header {
        display: block;
    }

    .tms-search-tabs {
        justify-content: flex-start;
        margin-top: .75rem;
    }

    .tms-search-table,
    .tms-search-table thead,
    .tms-search-table tbody,
    .tms-search-table tr,
    .tms-search-table th,
    .tms-search-table td {
        display: block;
        width: 100% !important;
    }

    .tms-search-table thead {
        display: none;
    }

    .tms-search-table tr {
        padding: .75rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .tms-search-table td {
        padding: .25rem 0;
        border: 0;
    }
}

/* ---------------------------------------------------------------------------
   Beta badge — next to the title of a page marked `beta: true` (main.js)
   --------------------------------------------------------------------------- */

.tms-beta-badge {
    display: inline-block;
    margin-inline-start: .5em;
    padding: .15em .6em;
    border-radius: 999px;
    color: var(--tms-beta-ink);
    background-color: var(--tms-beta-bg);
    font-size: .45em;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Release history ("Latest changes"), loaded from the product website at
   viewing time: flat panel, version pill in the heading, hairline-separated
   rows, soft tinted type pills.
   --------------------------------------------------------------------------- */

.tms-release-history {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--tms-radius-lg);
    background: var(--tms-surface);
    box-shadow: var(--tms-shadow-panel);
}

.tms-release-history.is-loading,
.tms-release-history-message {
    color: var(--bs-secondary-color);
}

.tms-release-history h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 0 0 1rem;
    border: 0;
    border-bottom: 1px solid var(--tms-border);
    font-size: 1.15rem;
    font-weight: 650;
}

.tms-release-version {
    padding: .1em .65em;
    border-radius: 999px;
    color: var(--tms-accent);
    background: var(--tms-accent-soft);
    font-size: .8rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.tms-release-history-list {
    display: grid;
    gap: 0;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.tms-release-history-list li {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1.1rem;
    align-items: baseline;
    max-width: none;
    padding: .8rem 0;
    border-bottom: 1px solid var(--tms-border);
}

.tms-release-history-list li:last-child {
    border-bottom: 0;
}

.tms-release-text {
    align-self: baseline;
    font-size: .97rem;
    line-height: 1.6;
}

.tms-release-kind {
    display: inline-flex;
    align-items: center;
    align-self: baseline;
    justify-self: start;
    gap: .5rem;
    padding: .15rem .6rem .15rem .5rem;
    border-radius: 999px;
    color: var(--bs-secondary-color);
    background: var(--tms-surface-muted);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tms-release-kind svg {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.55;
}

.tms-release-kind-new { color: var(--tms-kind-new); background: var(--tms-kind-new-bg); }
.tms-release-kind-improved { color: var(--tms-kind-improved); background: var(--tms-kind-improved-bg); }
.tms-release-kind-fixed { color: var(--tms-kind-fixed); background: var(--tms-kind-fixed-bg); }

.tms-release-history p {
    max-width: none;
}

.tms-release-history-more {
    margin-bottom: 0;
}

.tms-release-history-more a {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Footer and end-of-article navigation
   --------------------------------------------------------------------------- */

.contribution {
    color: var(--tms-text-muted);
}

/* Previous / Next cards (static, from the build's product navigation index). */
/* No rule above the cards: their own borders separate them from the article
   (whose bottom padding is the gap). */
.next-article {
    display: flex;
    gap: var(--tms-space-4);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    color: var(--tms-text-muted);
}

.next-article[hidden] {
    display: none;
}

.tms-pager-link {
    display: flex;
    flex: 0 1 calc(50% - .5rem);
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    padding: .9rem 1.15rem;
    border: 1px solid var(--tms-border);
    border-radius: var(--tms-radius-lg);
    color: var(--tms-text);
    background: var(--tms-surface);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.tms-pager-next {
    align-items: flex-end;
    margin-left: auto;
    text-align: right;
}

.tms-pager-link:hover {
    border-color: color-mix(in srgb, var(--tms-accent) 60%, var(--tms-border));
    background: color-mix(in srgb, var(--tms-accent) 4%, var(--tms-surface));
    box-shadow: var(--tms-shadow-sm);
    color: var(--tms-text);
    text-decoration: none;
}

.tms-pager-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--tms-text-muted);
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tms-pager-title {
    max-width: 100%;
    color: var(--tms-accent);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.tms-pager-link:hover .tms-pager-title {
    color: var(--tms-accent-strong);
}

/* Back to top (main.js): appears after about two viewports of scrolling. */
.tms-back-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1010;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--tms-border);
    border-radius: 999px;
    color: var(--tms-text-muted);
    background: color-mix(in srgb, var(--tms-surface) 92%, transparent);
    box-shadow: var(--tms-shadow-panel);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, color .15s ease, border-color .15s ease;
}

.tms-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .2s ease, transform .2s ease, color .15s ease, border-color .15s ease;
}

.tms-back-to-top:hover {
    border-color: var(--tms-accent);
    color: var(--tms-accent-strong);
}

/* Footer: brand + copyright, site links, and "Report a problem" in one row on
   wide screens, stacked on phones. Full width, on the sidebar's tinted
   surface, so it closes the three columns above it. */
body > footer.tms-footer {
    height: auto;
    padding: 1.4rem 0;
    border-top: 1px solid var(--tms-border);
    color: var(--tms-text-muted);
    background: var(--tms-surface-sunken);
    font-size: .85rem;
}

body > footer.tms-footer > .tms-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 2rem;
    width: 100%;
    /* Keep the last item clear of the floating back-to-top button. */
    padding: 0 4.5rem 0 var(--tms-edge);
}

.tms-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--tms-text);
    font-weight: 550;
}

.tms-footer-brand img {
    flex: none;
}

.tms-footer-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tms-footer a {
    color: var(--tms-text-muted);
}

.tms-footer a:hover {
    color: var(--tms-accent-strong);
}

.tms-footer-report {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    body > footer.tms-footer > .tms-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 4rem 0 var(--tms-edge);
    }

    .tms-footer-report {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
    article table td:first-child {
        min-width: 11rem;
    }
}

@media (max-width: 991.98px) {
    article .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: .975rem;
    }

    .navbar {
        min-height: 3.65rem;
    }

    .navbar-brand {
        max-width: calc(100vw - 5rem);
        font-size: .95rem;
    }

    article h1 {
        font-size: 1.75rem;
    }

    article table th,
    article table td {
        padding: .55rem .5rem;
        font-size: .88rem;
    }

    article .grid > ul {
        grid-template-columns: minmax(0, 1fr);
    }

    article .tms-hero .tms-hero-lead {
        font-size: 1.05rem;
    }

    .tms-release-history-list li {
        grid-template-columns: minmax(0, 1fr);
        gap: .35rem;
    }

    .next-article {
        flex-direction: column;
    }

    .tms-pager-link {
        flex-basis: auto;
    }

    .tms-pager-next {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------------------------------------------------------------------------
   Print
   --------------------------------------------------------------------------- */

@media print {
    @page {
        margin: 16mm 15mm;
    }

    /* Dark tokens are screen-only (see the token block), so print always uses
       the light palette; these values push it further toward ink on paper. */
    :root,
    [data-bs-theme] {
        --tms-text: #111;
        --tms-text-muted: #444;
        --tms-surface: #fff;
        --tms-surface-muted: #f4f4f4;
        --tms-border: #bbb;
        --tms-code-bg: #f5f5f5;
        --tms-code-text: #111;
    }

    body {
        font-size: 10.5pt;
        line-height: 1.45;
        background: #fff !important;
    }

    body > header,
    .tms-skip-link,
    .component-toc,
    .toc-offcanvas,
    .affix,
    .actionbar,
    .next-article,
    .tms-back-to-top,
    .screenshot-theme-toggle,
    article pre > .code-action,
    body > footer {
        display: none !important;
    }

    .tms-layout,
    .tms-layout > .content,
    .tms-layout > .content > article {
        display: block;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    /* Paper is light: always print the light capture of a themed pair. */
    article .screenshot-themed .dark-only {
        display: none !important;
    }

    article .screenshot-themed .light-only {
        display: block !important;
        filter: none !important;
    }

    article .screenshot-light img {
        filter: none;
    }

    article h1,
    article h2,
    article h3,
    article table,
    article pre,
    article figure,
    article blockquote,
    article .grid > ul > li {
        break-inside: avoid;
        box-shadow: none;
    }

    article h2,
    article h3 {
        break-after: avoid;
    }

    article a[href]::after {
        content: none;
    }
}