/* TMS.NET Maps — documentation theme.
   Matches the shared TMS documentation theme on doc.tmssoftware.com: violet accent on a white
   (light) or neutral graphite (dark) base, hairline borders and three columns (navigation on a
   tinted column at the left, the reading column, and the "In this article" rail). The --tms-*
   tokens and most component rules are taken from that site's public/main.css; keep them in step
   with it rather than with the marketing tokens in brand/tokens.css.

   Layout note: this template keeps DocFX's own `body > main > .toc-offcanvas | .content | .affix`
   structure, whose show/hide rules are keyed to body[data-layout]. Rules that resize those columns
   use the selector prefix below so they outrank DocFX's `body:not([data-search])[data-layout=""]
   > main > …` rules (same specificity, declared later):
     body:not([data-search]):not([data-layout=landing]) > main
   The home page (index.md, _layout: landing) is the portal page: no side columns, wider content. */

/* ---------------------------------------------------------------------------
   Design tokens (doc.tmssoftware.com)
   --------------------------------------------------------------------------- */

:root,
[data-bs-theme="light"] {
  --tms-accent: #533afd;
  --tms-accent-strong: #3d27c9;
  --tms-accent-soft: #f0eeff;
  --tms-nav-active-bg: #efecff;
  --tms-nav-active-ink: #3d27c9;

  --tms-surface: #ffffff;
  --tms-surface-muted: #f6f8fb;
  --tms-surface-sunken: #f7f9fc;
  --tms-surface-raised: #ffffff;
  --tms-header-bg: rgba(255, 255, 255, 0.92);
  --tms-border: #e3e8ee;
  --tms-border-strong: #c9d3e0;

  --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, 0.04);
  --tms-shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.05), 0 2px 8px rgba(10, 37, 64, 0.04);
  --tms-shadow-panel: 0 2px 4px rgba(10, 37, 64, 0.05), 0 8px 24px rgba(10, 37, 64, 0.06);
  --tms-shadow-img: 0 2px 4px rgba(10, 37, 64, 0.06), 0 8px 24px rgba(10, 37, 64, 0.08);
  --tms-shadow-md: 0 13px 27px -5px rgba(50, 50, 93, 0.18), 0 8px 16px -8px rgba(0, 0, 0, 0.2);
  --tms-focus-ring: 0 0 0 3px color-mix(in srgb, var(--tms-accent) 28%, transparent);

  --tms-radius-sm: 0.375rem;
  --tms-radius: 0.5rem;
  --tms-radius-lg: 0.75rem;
  --tms-space-1: 0.25rem;
  --tms-space-2: 0.5rem;
  --tms-space-3: 0.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-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. */
  --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. */
  --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. */
  --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%;

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

  /* Search-match highlight (search.min.js, on-page marks). */
  --tms-mark: color-mix(in srgb, #f59e0b 32%, transparent);
  --tms-mark-current: #f59e0b;

  --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-heading-color: var(--tms-text);
  --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 from the dark theme still uses the light palette. */
@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, 0.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, 0.35);
    --tms-shadow-img: 0 8px 24px rgba(0, 0, 0, 0.35);
    --tms-shadow-md: 0 14px 38px rgba(0, 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-beta-ink: #1b1206;
    --tms-beta-bg: #f59e0b;

    --tms-mark: color-mix(in srgb, #f59e0b 30%, transparent);

    --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;

    --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);
  font-variant-ligatures: none;
}

a {
  color: var(--tms-accent);
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

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

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

#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: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  padding: 0.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 0.15s ease;
}

.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: 0.05rem 0.35rem;
  border: 1px solid var(--tms-border-strong);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  color: var(--tms-text-muted);
  background: var(--tms-surface);
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Header and navbar
   #navbar holds, in source order: the framework switch and the search form (static), then the
   section links and the theme picker (appended by DocFX). `order` lays them out as
   [links] … [framework switch] [theme] [search].
   --------------------------------------------------------------------------- */

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 0 auto;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  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: -0.01em;
}

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

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

/* The product badge PNG has its own rounded frame: never clip it. */
.navbar-brand #logo {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  max-width: none;
  margin: 0;
  object-fit: contain;
}

#navpanel {
  min-width: 0;
}

/* Section links (DocFX renders toc.yml into ul.navbar-nav). */
.navbar #navbar > .navbar-nav {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.15rem;
}

.navbar #navbar .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--tms-radius);
  color: var(--tms-text-muted);
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

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

/* Header menus (theme): compact, rounded items with the sidebar's hover and current state. */
.navbar .dropdown-menu {
  min-width: 11rem;
  margin-top: 0.35rem !important;
  padding: 0.3rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  background: var(--tms-surface-raised);
  box-shadow: var(--tms-shadow-panel);
  font-size: 0.875rem;
}

.navbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.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: 0.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;
}

#navbar .icons .dropdown-toggle,
#navbar .icons .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  height: 2.25rem;
  padding: 0 0.55rem;
  border-radius: var(--tms-radius);
  color: var(--tms-text-muted);
}

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

/* Framework switch (main.js): a segmented control, WPF | WinForms | Blazor | .NET MAUI, styled
   as the shared theme's Delphi | C++Builder code-language switch. */
.tms-code-lang {
  display: inline-flex;
  flex: none;
  align-items: stretch;
  gap: 0.125rem;
  height: 2.25rem;
  padding: 0.1875rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  background: var(--tms-surface);
}

.tms-code-lang > button {
  display: inline-flex;
  align-items: center;
  padding: 0 0.6rem;
  border: 0;
  border-radius: var(--tms-radius-sm);
  color: var(--tms-text-muted);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tms-code-lang > button:hover {
  color: var(--tms-text);
  background: var(--tms-surface-muted);
}

.tms-code-lang > button[aria-checked="true"] {
  color: var(--tms-nav-active-ink);
  background: var(--tms-nav-active-bg);
}

.tms-code-lang > button:focus-visible {
  outline: 0;
  box-shadow: var(--tms-focus-ring);
}

.tms-code-lang-short {
  display: none;
}

/* 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: 0.9rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.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: 0.55rem;
  display: inline-flex;
  gap: 0.2rem;
  pointer-events: none;
}

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

.tms-search-kbd .is-symbol {
  font-size: 0.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: 1200px) {
  #navpanel {
    gap: var(--tms-space-3);
  }

  .navbar #navbar {
    align-items: center;
    gap: var(--tms-space-2);
  }

  .navbar #navbar > .navbar-nav {
    order: 10;
    margin-right: auto;
  }

  .navbar #navbar > .tms-code-lang {
    order: 20;
  }

  .navbar #navbar form.icons {
    order: 30;
    margin-left: 0;
  }

  .navbar #navbar form.search {
    order: 40;
  }
}

/* 1200–1439px: short framework labels and a narrower search box keep one row. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  .tms-code-lang-long {
    display: none;
  }

  .tms-code-lang-short {
    display: inline;
  }

  .navbar .search {
    min-width: 11.5rem;
  }
}

/* Below 1200px the links, switch, theme and search fold into the menu. */
@media (max-width: 1199.98px) {
  body > header {
    height: auto;
    min-height: var(--tms-header-h);
  }

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

  .tms-header-inner > .btn {
    margin-left: auto;
    color: var(--tms-text-muted);
  }

  #navpanel {
    flex-basis: 100%;
  }

  #navpanel.show {
    max-height: calc(100vh - var(--tms-header-h));
    overflow-y: auto;
  }

  .navbar #navbar {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--tms-space-3);
    padding: var(--tms-space-3) 0 var(--tms-space-2);
    border-top: 1px solid var(--tms-border);
  }

  .navbar #navbar > .navbar-nav {
    order: 10;
    flex-direction: column;
    align-items: stretch;
  }

  .navbar #navbar .nav-link {
    width: 100%;
  }

  .navbar #navbar > .tms-code-lang {
    order: 20;
    align-self: flex-start;
    margin-top: var(--tms-space-3);
  }

  .navbar #navbar form {
    margin: var(--tms-space-3) 0 0;
  }

  .navbar #navbar form.search {
    order: 30;
    align-self: stretch;
  }

  .navbar #navbar form.icons {
    order: 40;
    align-self: flex-start;
    margin: var(--tms-space-3) 0 0;
  }

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

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

/* No top/bottom padding: the side columns run from the header to the footer. */
body > main {
  width: 100%;
  min-height: calc(100vh - var(--tms-header-h));
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
}

/* The reading column fills the space between the side columns and centres its content. */
body:not([data-search]):not([data-layout=landing]) > main > .content {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: var(--tms-space-5) var(--tms-gutter) var(--tms-space-6);
}

.content > .actionbar,
.content > article,
.content > .contribution,
.content > .next-article {
  width: 100%;
  max-width: var(--tms-content-width);
  margin-inline: auto;
}

.content > article {
  flex: none !important;
}

body:not([data-search]):not([data-layout=landing]) > main > .content > .actionbar {
  display: flex;
  align-items: flex-start;
  gap: var(--tms-space-3);
  min-height: 2rem;
  margin-top: 0;
  margin-bottom: var(--tms-space-4);
}

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

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

  body:not([data-search]):not([data-layout=landing]) > main > .content {
    padding: var(--tms-space-4) var(--tms-space-4) var(--tms-space-6);
  }
}

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

/* Breadcrumb: Home / TMS.NET Maps (static, from the template) then DocFX's own trail. */
.tms-breadcrumb {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  padding-top: 0.3rem;
  color: var(--tms-text-muted);
  font-size: 0.85rem;
  --bs-breadcrumb-divider-color: var(--tms-text-muted);
  --bs-breadcrumb-item-active-color: var(--tms-text);
}

.tms-breadcrumb .breadcrumb {
  flex-wrap: wrap;
  margin: 0;
}

.tms-breadcrumb #breadcrumb {
  display: contents;
}

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

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

/* DocFX's trail and the current page continue the static trail: add the divider before their
   first item too. */
.tms-breadcrumb .breadcrumb ~ .breadcrumb > .breadcrumb-item:first-child,
.tms-breadcrumb #breadcrumb .breadcrumb > .breadcrumb-item:first-child {
  padding-left: var(--bs-breadcrumb-item-padding-x, 0.5rem);
}

.tms-breadcrumb .breadcrumb ~ .breadcrumb > .breadcrumb-item:first-child::before,
.tms-breadcrumb #breadcrumb .breadcrumb > .breadcrumb-item:first-child::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x, 0.5rem);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/");
}

.tms-breadcrumb .breadcrumb-item.active {
  color: var(--tms-text);
}

/* 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: 0.35rem;
  height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid var(--tms-border);
  border-radius: 999px;
  color: var(--tms-text-muted);
  background: var(--tms-surface);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.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 {
    justify-content: center;
    width: 2rem;
    padding: 0;
  }

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

/* ---------------------------------------------------------------------------
   Left column: navigation (DocFX's #toc)
   --------------------------------------------------------------------------- */

/* From 768px the column stretches to the full layout height on the tinted surface; its panel
   is sticky under the header and scrolls on its own. Below that, the drawer takes over. */
@media (min-width: 768px) {
  body:not([data-search]):not([data-layout=landing]) > main > .toc-offcanvas {
    position: relative;
    top: auto;
    flex: 0 0 var(--tms-sidebar-w);
    width: var(--tms-sidebar-w);
    max-width: none;
    max-height: none;
    overflow: visible;
    border-right: 1px solid var(--tms-border);
    background: var(--tms-surface-sunken);
  }

  body:not([data-search]):not([data-layout=landing]) > main > .toc-offcanvas .offcanvas-md {
    position: sticky;
    top: var(--tms-header-h);
    height: calc(100vh - var(--tms-header-h));
  }

  body:not([data-search]):not([data-layout=landing]) > main > .toc-offcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--tms-space-5) 0 0;
  }
}

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

.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 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

@media (max-width: 767.98px) {
  .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);
  }

  .tms-toc-header {
    display: none;
  }
}

/* Product name at the top of the column. */
.tms-toc-header {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: 0.3rem var(--tms-space-3) 0.3rem var(--tms-edge);
  font-family: var(--tms-font-display);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

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

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

.toc {
  min-height: 0;
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* "Filter by title". */
.toc form.filter {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--tms-space-3) var(--tms-space-3) var(--tms-space-2) var(--tms-edge);
}

@media (max-width: 767.98px) {
  .toc form.filter {
    padding: 0 0 var(--tms-space-2);
  }
}

.toc form.filter > i.bi {
  left: calc(var(--tms-edge) + 0.65rem);
  color: var(--tms-text-muted);
  font-size: 0.95rem;
  opacity: 1;
}

@media (max-width: 767.98px) {
  .toc form.filter > i.bi {
    left: 0.65rem;
  }
}

.toc form.filter > input {
  width: 100%;
  height: 2.1rem;
  padding: 0 0.75rem 0 2.05rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius);
  color: var(--tms-text);
  background: var(--tms-surface);
  font-size: 0.85rem;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

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

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

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

/* The tree scrolls on its own; chevrons sit in each item's left gutter. */
.toc > div {
  min-height: 0;
  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;
}

@media (max-width: 767.98px) {
  .toc > div {
    padding: var(--tms-space-1) 0 var(--tms-space-4);
  }
}

.toc ul {
  margin: 0;
  font-size: 0.875rem;
}

.toc li {
  margin: 1px 0;
  padding-left: 1.1rem;
}

.toc li > ul {
  margin: 0.1rem 0 0.3rem 0.55rem;
  padding-left: 0;
  border-left: 1px solid var(--tms-border);
}

.toc li > a,
.toc li > span.name-only {
  display: block;
  margin: 0;
  padding: 0.32rem 0.6rem;
  border-radius: var(--tms-radius-sm);
  color: var(--tms-text-muted);
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.toc li > span.name-only {
  color: var(--tms-text);
  font-weight: 600;
}

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

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

/* An open branch that is not the current page keeps a plain label. */
.toc li.active:has(li.active) > a {
  color: var(--tms-text);
  background: transparent;
  font-weight: 550;
}

.toc .expand-stub::before {
  width: 1.1rem;
  margin-top: 0.42rem;
  margin-left: -1.1rem;
  color: var(--tms-text-muted);
  font-size: 0.62rem;
  text-align: center;
  transform-origin: 50% 50%;
}

.toc .expand-stub:hover::before {
  color: var(--tms-text);
}

.toc > .no-result {
  margin: 0.5rem 0.6rem 0.5rem var(--tms-edge);
  color: var(--tms-text-muted);
}

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

@media (min-width: 768px) {
  body:not([data-search]):not([data-layout=landing]) > main > .affix {
    position: static;
    top: auto;
    flex: 0 0 var(--tms-rail-w);
    width: var(--tms-rail-w);
    max-height: none;
    overflow: visible;
  }
}

.affix {
  color: var(--tms-text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.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;
}

/* A list with a single entry adds nothing. */
.affix #affix:not(:has(li + li, li li)) {
  visibility: hidden;
}

.affix h5 {
  display: flex;
  align-items: center;
  min-height: 2rem;
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0 !important;
  color: var(--tms-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

/* One track down the side of the list; the current section is drawn over it in the accent.
   DocFX marks the links .link-body-emphasis (an !important colour), so these colours need it too. */
.affix #affix > ul {
  border-left: 1px solid var(--tms-border);
}

.affix ul li {
  margin: 0;
}

.affix a {
  display: block;
  margin-left: -1px;
  padding: 0.28rem 0 0.28rem 0.85rem;
  border-left: 2px solid transparent;
  color: var(--tms-text-muted) !important;
  text-decoration: none !important;
}

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

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

.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;
}

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: -0.015em;
  text-wrap: balance;
  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: -0.025em;
}

article h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.8rem;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

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

article h4,
article h5 {
  margin-top: 1.5rem;
  margin-bottom: 0.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: 0.3rem;
}

article strong {
  font-weight: 650;
}

/* Body links are underlined with a quiet line that turns solid on hover. */
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: 0.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] article blockquote {
  margin: 1.5rem 0;
  padding: 0.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;
}

/* ---------------------------------------------------------------------------
   Code
   Light panels in the light theme, a sunken graphite panel in the dark theme.
   --------------------------------------------------------------------------- */

article :not(pre) > code {
  overflow-wrap: break-word;
  padding: 0.12em 0.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: 0.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: 0.85rem;
  line-height: 1.6;
}

/* A click anywhere on a sample copies it (main.js); selecting part of it still works. */
article pre,
article pre code {
  cursor: copy;
}

/* DocFX's copy button: always visible at low opacity, fully visible while the sample 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: 0.45rem;
  right: 0.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: 0.9rem;
  line-height: 1;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease,
    border-color 0.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: 0.9rem;
  line-height: 1;
}

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

article pre > .code-action.link-success {
  opacity: 1;
  color: var(--tms-tip-ink) !important;
}

[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 (replace DocFX's Visual Studio palettes in both themes). */
[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, .hljs-title.class_) {
  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;
}

/* ---------------------------------------------------------------------------
   Framework samples (# [WPF](#tab/wpf) …): one framed panel whose tab bar is a header strip with
   an accent underline on the active tab. Picking a tab switches the whole site (main.js), like
   the framework switch in the header.
   --------------------------------------------------------------------------- */

article .tabGroup {
  margin: var(--tms-space-5) 0;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-lg);
  overflow: hidden;
}

article .tabGroup > .nav-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0.65rem;
  border-bottom: 1px solid var(--tms-border);
  background: color-mix(in srgb, var(--tms-text) 3.5%, var(--tms-code-bg));
}

article .tabGroup > .nav-tabs > li {
  margin: 0;
}

article .tabGroup > .nav-tabs .nav-link {
  margin: 0;
  padding: 0.6rem 0.6rem;
  border: 0;
  border-radius: 0;
  color: var(--tms-text-muted);
  background: transparent;
  box-shadow: inset 0 -2px transparent;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

article .tabGroup > .nav-tabs .nav-link:hover {
  color: var(--tms-text);
  box-shadow: inset 0 -2px var(--tms-border-strong);
}

article .tabGroup > .nav-tabs .nav-link.active {
  color: var(--tms-nav-active-ink);
  background: transparent;
  box-shadow: inset 0 -2px var(--tms-accent);
}

article .tabGroup > section {
  margin: 0;
  padding: var(--tms-space-4) var(--tms-space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
}

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

article .tabGroup > section > :last-child {
  margin-bottom: 0;
}

/* A panel that holds only a code sample: the sample fills it, without a second frame. */
article .tabGroup > section:has(> pre:only-child) {
  padding: 0;
}

article .tabGroup > section > pre:only-child {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

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

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: 0.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);
  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";
}

article :is(.NOTE, .TIP, .IMPORTANT, .WARNING, .CAUTION) > h5 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  color: var(--callout-ink);
  font-family: var(--tms-font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

article :is(.NOTE, .TIP, .IMPORTANT, .WARNING, .CAUTION) > h5::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;
  --bs-table-color: var(--tms-text);
  display: table;
  width: 100%;
  margin: 1.25rem 0 1.75rem;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.925rem;
  line-height: 1.55;
}

article table th,
article table td,
article table.table th,
article table.table td {
  padding: 0.65rem 0.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: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.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;
}

article table td:not(:first-child):not(:has(> :not(a))) > a {
  white-space: nowrap;
}

article table td em {
  color: var(--tms-text-muted);
  font-size: 0.85em;
}

/* Portal (home) tables read as one framed panel with a tinted header and a bold link per row. */
body[data-layout=landing] 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);
}

body[data-layout=landing] article table thead th {
  border-bottom: 1px solid var(--tms-border);
  background: var(--tms-surface-muted);
}

body[data-layout=landing] article table :is(th, td),
body[data-layout=landing] article table :is(th, td):first-child,
body[data-layout=landing] article table :is(th, td):last-child {
  padding: 0.8rem 1rem;
}

body[data-layout=landing] article table td:first-child a {
  font-weight: 650;
  text-decoration: none;
}

body[data-layout=landing] article table td:first-child a:hover {
  text-decoration: underline;
}

body[data-layout=landing] article table tbody tr {
  transition: background-color 0.12s ease;
}

body[data-layout=landing] article table tbody tr:hover {
  background: color-mix(in srgb, var(--tms-accent) 5%, transparent);
}

/* ---------------------------------------------------------------------------
   Images
   --------------------------------------------------------------------------- */

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);
}

/* ---------------------------------------------------------------------------
   Card grids (`<div class="grid">` + a Markdown list); a card whose title line is only a link
   is clickable as a whole.
   --------------------------------------------------------------------------- */

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

article .grid > ul > li {
  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 0.16s ease, box-shadow 0.16s ease, transform 0.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 {
  margin-bottom: 0.4rem;
  font-weight: 600;
}

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 0.16s ease, color 0.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: 0.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;
}

/* ---------------------------------------------------------------------------
   Portal page (home): hero, wider content, a hairline above each section
   --------------------------------------------------------------------------- */

body[data-layout=landing] > main > .content {
  padding: var(--tms-space-6) var(--tms-gutter) var(--tms-space-6);
}

body[data-layout=landing] > main > .content > article {
  max-width: var(--tms-portal-width);
}

body[data-layout=landing] article > h2 {
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--tms-border);
}

body[data-layout=landing] article > .tms-hero + h2 {
  margin-top: 2rem;
  padding-top: 0;
  border-top: 0;
}

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: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0.2rem 0.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: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

article .tms-hero h1 {
  max-width: 22ch;
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  letter-spacing: -0.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;
}

/* Entry points: the first is the primary (filled) action. */
article .tms-hero-actions > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.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: 0.45rem;
  min-height: 2.6rem;
  padding: 0.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 0.15s ease, background-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

/* [href] outranks DocFX's external-link icon (a.external[href]::after). */
article .tms-hero-actions a[href]::after {
  content: "\f138";
  margin: 0;
  font-family: bootstrap-icons;
  font-size: 0.9em;
  transition: transform 0.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);
}

/* "Beta" pill. */
.tms-beta-tag {
  display: inline-block;
  margin-inline-start: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  color: var(--tms-beta-ink);
  background-color: var(--tms-beta-bg);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   API reference pages (DocFX ManagedReference)
   --------------------------------------------------------------------------- */

body[data-yaml-mime=ManagedReference] article h1[data-uid] {
  font-size: clamp(1.6rem, 1.3rem + 0.9vw, 2rem);
}

body[data-yaml-mime=ManagedReference] article h2.section,
body[data-yaml-mime=ManagedReference] article h2[id] {
  font-size: 1.3rem;
}

body[data-yaml-mime=ManagedReference] article h3[data-uid] {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--tms-border);
  font-family: var(--tms-font-mono);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Namespace / assembly line under the title: a quiet key-value strip. */
body[data-yaml-mime=ManagedReference] article div.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  margin: 1.1rem 0 1.5rem;
  color: var(--tms-text-muted);
  font-size: 0.9rem;
}

body[data-yaml-mime=ManagedReference] article div.facts > dl {
  margin: 0;
}

body[data-yaml-mime=ManagedReference] article dl.parameters > dt > code {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Previous / next cards (DocFX renders div.prev / div.next inside .next-article)
   --------------------------------------------------------------------------- */

.next-article {
  gap: var(--tms-space-4);
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: var(--tms-text-muted);
}

.next-article > div {
  position: relative;
  display: flex;
  flex: 0 1 calc(50% - 0.5rem);
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-lg);
  background: var(--tms-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.next-article > div.next {
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

.next-article > div: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);
}

.next-article > div > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--tms-text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  opacity: 1;
  text-transform: uppercase;
}

.next-article > div > a {
  max-width: 100%;
  color: var(--tms-accent);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: break-word;
}

.next-article > div > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.next-article > div:hover > a {
  color: var(--tms-accent-strong);
}

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

/* ---------------------------------------------------------------------------
   Search results (search.min.js renders them into #search-results)
   --------------------------------------------------------------------------- */

body > .search-results {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--tms-space-5) var(--tms-edge) var(--tms-space-6) !important;
  line-height: 1.5;
}

.tms-sr-bar {
  position: sticky;
  top: var(--tms-header-h);
  z-index: 5;
  margin: calc(-1 * var(--tms-space-5)) 0 var(--tms-space-3);
  padding: var(--tms-space-4) 0 var(--tms-space-3);
  border-bottom: 1px solid var(--tms-border);
  background: var(--tms-surface);
}

.tms-sr-summary {
  color: var(--tms-text-muted);
  font-size: 0.875rem;
}

.tms-sr-note {
  display: block;
  margin-top: 2px;
  color: var(--tms-text-muted);
}

.tms-sr-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.tms-sr-filters[hidden] {
  display: none;
}

.tms-sr-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tms-sr-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-sm);
  color: var(--tms-text);
  background: var(--tms-surface);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.3;
}

.tms-sr-tabs button:hover:not(:disabled) {
  border-color: var(--tms-border-strong);
  background: var(--tms-surface-muted);
}

.tms-sr-tabs button[aria-pressed="true"] {
  border-color: var(--tms-accent);
  color: var(--tms-on-accent);
  background: var(--tms-accent);
}

.tms-sr-tabs button:disabled {
  opacity: 0.45;
}

.tms-sr-count {
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.75;
}

.tms-sr-select {
  height: 2rem;
  margin-left: auto;
  padding: 0 1.75rem 0 0.6rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-sm);
  color: var(--tms-text);
  background-color: var(--tms-surface);
  font-size: 0.8125rem;
}

.tms-sr-tabs button:focus-visible,
.tms-sr-select:focus-visible,
.tms-sr-more:focus-visible {
  outline: none;
  box-shadow: var(--tms-focus-ring);
}

.tms-sr-tip {
  margin-top: var(--tms-space-3);
  color: var(--tms-text-muted);
  font-size: 0.85rem;
}

.tms-sr-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-lg);
  background: var(--tms-surface);
  box-shadow: var(--tms-shadow-panel);
  list-style: none;
}

.tms-sr-list > li + li {
  border-top: 1px solid var(--tms-border);
}

.tms-sr-item {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--tms-text);
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.tms-sr-item:hover,
.tms-sr-item:focus-visible {
  color: var(--tms-text);
  background: var(--tms-surface-muted);
  outline: none;
  text-decoration: none;
}

.tms-sr-item:focus-visible {
  background: var(--bs-primary-bg-subtle);
  box-shadow: inset 3px 0 0 0 var(--tms-accent);
}

.tms-sr-top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.tms-sr-title {
  min-width: 0;
  color: var(--tms-accent);
  font-size: 0.975rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tms-sr-item:hover .tms-sr-title,
.tms-sr-item:focus-visible .tms-sr-title {
  text-decoration: underline;
}

.tms-sr-kind,
.tms-sr-fw {
  flex: none;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--tms-border);
  border-radius: 999px;
  color: var(--tms-text-muted);
  font-size: 0.72rem;
  line-height: 1.2;
}

.tms-sr-kind {
  text-transform: capitalize;
}

.tms-sr-fw {
  margin-left: auto;
}

.tms-sr-context {
  margin-top: 2px;
  color: var(--tms-text-muted);
  font-family: var(--tms-font-mono);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.tms-sr-item[data-kind="guide"] .tms-sr-context,
.tms-sr-item[data-kind="page"] .tms-sr-context {
  font-family: var(--tms-font-sans);
  font-size: 0.8125rem;
}

.tms-sr-snippet {
  margin-top: 0.3rem;
  color: var(--tms-text-muted);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

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

.tms-sr-snippet mark {
  font-weight: 600;
}

.tms-sr-more {
  margin-top: var(--tms-space-3);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--tms-border-strong);
  border-radius: var(--tms-radius);
  color: var(--tms-text);
  background: var(--tms-surface);
  font-size: 0.875rem;
  font-weight: 600;
}

.tms-sr-more:hover {
  border-color: var(--tms-accent);
  color: var(--tms-accent-strong);
}

@media (max-width: 575.98px) {
  .tms-sr-select {
    width: 100%;
    margin-left: 0;
  }
}

/* Search matches on the page opened from a result, and the bar that steps through them. */
mark.tms-hl {
  padding: 0 1px;
  border-radius: 3px;
  color: inherit;
  background: var(--tms-mark);
}

mark.tms-hl.is-current {
  color: #0a2540;
  background: var(--tms-mark-current);
  box-shadow: 0 0 0 2px var(--tms-mark-current);
}

.tms-hl-bar {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - 2.5rem);
  padding: 0.3rem 0.3rem 0.3rem 0.85rem;
  border: 1px solid var(--tms-border);
  border-radius: var(--tms-radius-lg);
  background: var(--tms-surface-raised);
  box-shadow: var(--tms-shadow-panel);
  font-size: 0.85rem;
}

.tms-hl-label {
  display: flex;
  gap: 0.5rem;
  min-width: 0;
  margin-right: 0.35rem;
  overflow: hidden;
  color: var(--tms-text);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tms-hl-count {
  color: var(--tms-text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tms-hl-bar button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--tms-radius-sm);
  color: var(--tms-text-muted);
  background: transparent;
}

.tms-hl-bar button:hover,
.tms-hl-bar button:focus-visible {
  color: var(--tms-text);
  background: var(--tms-surface-muted);
  outline: none;
}

/* ---------------------------------------------------------------------------
   Footer: brand + copyright, site links and "Report a problem" on the tinted surface
   --------------------------------------------------------------------------- */

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: 0.85rem;
}

body > footer.tms-footer > .tms-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  width: 100%;
  padding: 0 var(--tms-space-4) 0 var(--tms-edge);
}

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

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

.tms-footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.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: 0.4rem;
  margin-left: auto;
}

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

  .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: 0.975rem;
  }

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

  article h1 {
    font-size: 1.75rem;
  }

  article table th,
  article table td {
    padding: 0.55rem 0.5rem;
    font-size: 0.88rem;
  }

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

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

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

  .next-article > div {
    flex-basis: auto;
  }

  .next-article > div.next {
    margin-left: 0;
  }
}

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

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

@media print {
  :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,
  .toc-offcanvas,
  .affix,
  .actionbar,
  .next-article,
  .tms-hl-bar,
  article pre > .code-action,
  body > footer {
    display: none !important;
  }

  body > main > .content,
  body > main > .content > article {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
  }

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

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

  mark.tms-hl {
    background: none;
  }
}