/* ══════════════════════════════════════════════════════════════
   Mobilint Brochure System — Sphinx Book Theme restyle
   Global visual layer for the qbruntime web manual.
   Scope: theme chrome (sidebar / header / search / version),
   article content, code, tables, admonitions, right-hand TOC.
   Doxygen API pages are styled separately (doxygen-awesome-colors.css);
   .bd-article > section selectors below deliberately skip doxygen content.
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   Brand fonts — self-hosted (sphinx/_static/fonts/), no CDN:
   the manual must render identically offline / air-gapped.
   Pretendard v1.3.9 (variable), JetBrains Mono v2.304.
   ────────────────────────────────────────────── */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ──────────────────────────────────────────────
   Brand tokens
   ────────────────────────────────────────────── */
:root {
  --mbl-ink-navy:    #0A1628;
  --mbl-deep-navy:   #0E2841;
  --mbl-navy-mid:    #1A3A5C;
  --mbl-teal-blue:   #156082;
  --mbl-accent-cyan: #4DA6D9;
  --mbl-light-blue:  #AECFE8;

  --mbl-ink-primary: #1A1A1A;
  --mbl-ink-soft:    #404040;
  --mbl-ink-muted:   #737373;
  --mbl-rule:        #D4D4D4;
  --mbl-rule-soft:   #E8E8E8;
  --mbl-canvas-tint: #F8F9FD;

  --mbl-font-sans: "Pretendard Variable", Pretendard, "맑은 고딕", "Malgun Gothic",
                   -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mbl-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ──────────────────────────────────────────────
   pydata/sphinx-book-theme variable overrides (light)
   ────────────────────────────────────────────── */
html[data-theme="light"] {
  --pst-color-primary:        #156082;
  --pst-color-secondary:      #0E2841;
  --pst-color-link:           #156082;
  --pst-color-link-hover:     #0E2841;
  --pst-color-inline-code:    #0E2841;
  --pst-color-text-base:      #1A1A1A;
  --pst-color-text-muted:     #737373;
  --pst-color-border:         #E8E8E8;
  --pst-color-accent:         #4DA6D9;
  --pst-heading-color:        #0E2841;

  --pst-font-family-base:       var(--mbl-font-sans);
  --pst-font-family-heading:    var(--mbl-font-sans);
  --pst-font-family-monospace:  var(--mbl-font-mono);
}

body {
  font-family: var(--mbl-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--mbl-light-blue); color: var(--mbl-ink-navy); }

/* Tabular figures everywhere numbers matter */
.bd-article table,
.sidebar-switchers,
#ver-switcher-label { font-variant-numeric: tabular-nums; }

/* ──────────────────────────────────────────────
   Page layout — fill the browser width, comfortable reading measure
   The theme caps the whole page at 88rem and centers it (big empty
   margins on wide monitors). We let the chrome span edge-to-edge but
   keep the prose column at a comfortable technical measure, centered.
   ────────────────────────────────────────────── */
.bd-page-width { max-width: none; }
/* Match the theme's own (0,3,0) selector so our measure wins, and centre
   the reading column in the main area once the page is uncapped. ~52em
   keeps line length readable for prose + code (not "fat"). */
.bd-main .bd-content .bd-article-container {
  max-width: 52em;
  margin-inline: auto;
}
/* The landing page uses full-bleed hero/cards, so give it more room. */
.page-introduction .bd-main .bd-content .bd-article-container { max-width: 60em; }

/* ──────────────────────────────────────────────
   Links
   ────────────────────────────────────────────── */
a {
  text-decoration: none;
  color: var(--mbl-teal-blue);
  font-weight: 500;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--mbl-deep-navy);
}

/* ══════════════════════════════════════════════
   LEFT SIDEBAR — navy chrome
   ══════════════════════════════════════════════ */
.bd-sidebar-primary {
  background: #F7F8FA;
  color: var(--mbl-ink-soft);
  border-right: 1px solid var(--mbl-rule-soft);
  padding: 0;
}
/* Narrower sidebar on desktop — the theme default (25%) is too wide ("thick")
   on large monitors. A fixed ~17rem reads like a proper docs sidebar.
   Scoped to desktop so the mobile slide-in (75% / 350px) is untouched. */
@media (min-width: 960px) {
  .bd-sidebar-primary { width: 17rem; flex: 0 0 17rem; }
}
.bd-sidebar-primary .sidebar-header-items,
.bd-sidebar-primary .sidebar-primary-items__start,
.bd-sidebar-primary .sidebar-primary-items__end {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Logo: brand SVG is navy + cyan — show it as-is on the light sidebar */
.bd-sidebar-primary .navbar-brand,
.bd-sidebar-primary .sidebar-logo-container {
  padding: 1.25rem 0 0.9rem;
}
.bd-sidebar-primary .navbar-brand img,
.bd-sidebar-primary .sidebar-logo {
  max-height: 38px;
  width: auto;
}

/* Section captions */
.bd-sidebar-primary .caption,
.bd-sidebar-primary p.caption,
.bd-sidebar-primary .caption-text {
  color: var(--mbl-ink-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 1.1rem;
}

/* Nav links */
.bd-sidebar-primary nav.bd-links a,
.bd-sidebar-primary .bd-toc-item a {
  color: var(--mbl-ink-soft);
  font-size: 0.85rem;
  font-weight: 450;
  border-radius: 6px;
  padding: 0.32rem 0.6rem;
  transition: background 160ms ease, color 160ms ease;
}
.bd-sidebar-primary nav.bd-links a:hover {
  background: #ECEFF3;
  color: var(--mbl-deep-navy);
  text-decoration: none;
}
/* Active page */
.bd-sidebar-primary nav.bd-links .current > a,
.bd-sidebar-primary nav.bd-links a.current,
.bd-sidebar-primary nav.bd-links li.active > a {
  color: var(--mbl-teal-blue);
  font-weight: 600;
  background: rgba(21, 96, 130, 0.08);
  box-shadow: inset 2px 0 0 var(--mbl-teal-blue);
}

/* ── Search field ──
   The theme makes the .bd-search FORM the visible bordered pill (white
   bg from --pst-color-background) and the input inside transparent.
   So we must style the FORM wrapper, not just the input. */
.bd-sidebar-primary .bd-search,
.bd-sidebar-primary .bd-search:active {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: #ffffff;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 8px;
  color: var(--mbl-ink-primary);
}
.bd-sidebar-primary .bd-search:focus-within {
  border-color: var(--mbl-teal-blue);
  box-shadow: 0 0 0 2px rgba(21, 96, 130, 0.18);
}
.bd-sidebar-primary .bd-search input.form-control,
.bd-sidebar-primary form.bd-search input {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.85rem;
  color: var(--mbl-ink-primary);
}
.bd-sidebar-primary .bd-search input.form-control::placeholder { color: var(--mbl-ink-muted); }
.bd-sidebar-primary .bd-search input.form-control:focus { box-shadow: none; }
/* The narrow sidebar field reads cleaner without the Ctrl+K chips; the
   shortcut still shows on the header search button + the search dialog. */
.bd-sidebar-primary .bd-search .search-button__kbd-shortcut { display: none; }
.bd-sidebar-primary .bd-search i.fa-solid,
.bd-sidebar-primary .bd-search svg { flex: none; font-size: 0.85rem; color: var(--mbl-ink-muted); }

/* ── Version selector (custom sidebar-version.html) ── */
.sidebar-switchers .switchers-title {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mbl-ink-muted);
  margin-bottom: 0.45rem;
}
.sidebar-switchers #ver-switcher-btn {
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--mbl-rule);
  border-radius: 8px;
  color: var(--mbl-deep-navy);
  font-weight: 600;
  padding: 0.45rem 0.75rem;
}
.sidebar-switchers #ver-switcher-btn:hover,
.sidebar-switchers #ver-switcher-btn:focus {
  background: var(--mbl-canvas-tint);
  border-color: var(--mbl-teal-blue);
  color: var(--mbl-deep-navy);
}
.sidebar-switchers .dropdown-menu {
  background: #ffffff;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.18);
}
.sidebar-switchers .dropdown-item { color: var(--mbl-ink-primary); font-size: 0.85rem; }
.sidebar-switchers .dropdown-item:hover { background: var(--mbl-canvas-tint); }
.sidebar-switchers .dropdown-item.active,
.sidebar-switchers .dropdown-item:active {
  background: var(--mbl-teal-blue);
  color: #ffffff;
}

/* Sidebar scrollbar */
.bd-sidebar-primary { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.bd-sidebar-primary:hover { scrollbar-color: var(--mbl-rule) transparent; }
.bd-sidebar-primary::-webkit-scrollbar { width: 8px; }
.bd-sidebar-primary::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.bd-sidebar-primary:hover::-webkit-scrollbar-thumb { background: var(--mbl-rule); }
.sidebar-primary-items__end { margin-top: 0 !important; }

/* ══════════════════════════════════════════════
   TOP HEADER BAR
   ══════════════════════════════════════════════ */
.bd-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mbl-rule-soft);
  box-shadow: none;
}
.bd-header .navbar-nav li a.nav-link,
.bd-breadcrumbs .breadcrumb-item a { color: var(--mbl-ink-muted); }
.bd-breadcrumbs .breadcrumb-item.active { color: var(--mbl-ink-primary); font-weight: 500; }

/* Back-to-top button → brand pill */
#pst-back-to-top {
  background: var(--mbl-deep-navy);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.22);
}
#pst-back-to-top:hover { background: var(--mbl-teal-blue); color: #ffffff; }

/* Header icon buttons + language switcher → branded pills */
.article-header-buttons { display: flex; align-items: center; gap: 0.3rem; }
.article-header-buttons .lang-switch-button { margin-right: 0.45rem; }
.article-header-buttons .btn,
.article-header-buttons .nav-link.pst-navbar-icon {
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 999px;
  color: var(--mbl-ink-soft);
  background: #ffffff;
  transition: background 160ms ease, border-color 160ms ease;
}
.article-header-buttons .btn:hover,
.article-header-buttons .nav-link.pst-navbar-icon:hover {
  background: var(--mbl-canvas-tint);
  border-color: var(--mbl-rule);
}
.article-header-buttons .lang-switch-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
}
.article-header-buttons .lang-switch-button .fa-globe { font-size: 0.9rem; color: var(--mbl-teal-blue); }

/* Download dropdown — branded menu card (was the default bootstrap box) */
.article-header-buttons .dropdown-download-buttons .dropdown-toggle::after { display: none; }
.article-header-buttons .dropdown-download-buttons .dropdown-menu {
  min-width: 9rem;
  margin-top: 0.45rem;
  padding: 0.35rem;
  background: #ffffff;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(10, 22, 40, 0.12);
}
.article-header-buttons .dropdown-download-buttons .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  border: none;
  border-radius: 7px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mbl-ink-soft);
  background: none;
}
.article-header-buttons .dropdown-download-buttons .dropdown-item:hover,
.article-header-buttons .dropdown-download-buttons .dropdown-item:focus {
  background: var(--mbl-canvas-tint);
  color: var(--mbl-deep-navy);
}
.article-header-buttons .dropdown-download-buttons .dropdown-item .btn__icon-container {
  display: inline-flex;
  justify-content: center;
  width: 1rem;
  color: var(--mbl-teal-blue);
}
/* Header buttons are pills — never underline the label on hover.
   The theme's `.nav-link:hover` / dropdown rules add the underline, so we
   counter those exact selectors inside the header too. */
.bd-header-article a:hover,
.bd-header-article .btn:hover,
.bd-header-article button:hover,
.bd-header-article .nav-link:hover,
.bd-header-article .pst-navbar-icon:hover,
.article-header-buttons a:hover,
.article-header-buttons .btn:hover,
.article-header-buttons button:hover,
.article-header-buttons .nav-link:hover,
.article-header-buttons .pst-navbar-icon:hover,
.article-header-buttons .dropdown button:hover,
.article-header-buttons .dropdown-item:hover,
.article-header-buttons .lang-switch-button:hover { text-decoration: none !important; }
/* The theme draws the hover underline as a ::before border-bottom on
   .pst-navbar-icon — suppress it for the header pill buttons. */
.bd-header-article .pst-navbar-icon:hover::before,
.article-header-buttons .pst-navbar-icon:hover::before,
.bd-header-article .nav-link:hover::before,
.article-header-buttons .nav-link:hover::before { border-bottom: 0 !important; content: none !important; }

/* ══════════════════════════════════════════════
   ARTICLE CONTENT
   Doxygen API pages nest their body in `.bd-article > section >
   .doxygen-content`, so these markdown-content rules would otherwise
   bleed into and fight doxygen-awesome. We gate the whole group on
   `:not(:has(.doxygen-content))` — normal MyST/markdown pages never
   contain that node, doxysphinx pages always do. Doxygen pages are
   styled entirely by doxygen-awesome-colors.css instead.
   ══════════════════════════════════════════════ */
.bd-article:not(:has(.doxygen-content)) h1 {
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--mbl-ink-navy);
  margin-bottom: 1.1rem;
}
.bd-article:not(:has(.doxygen-content)) h2 {
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--mbl-deep-navy);
  margin-top: 3rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--mbl-rule-soft);
}
.bd-article:not(:has(.doxygen-content)) h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mbl-deep-navy);
  margin-top: 2rem;
}
.bd-article:not(:has(.doxygen-content)) > section > p:first-of-type {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--mbl-ink-soft);
}
.bd-article p,
.bd-article li { line-height: 1.75; }

/* ── Heading anchor links — reveal on hover, muted teal (polished docs feel) ── */
.bd-article:not(:has(.doxygen-content)) h1 .headerlink,
.bd-article:not(:has(.doxygen-content)) h2 .headerlink,
.bd-article:not(:has(.doxygen-content)) h3 .headerlink,
.bd-article:not(:has(.doxygen-content)) h4 .headerlink {
  opacity: 0;
  color: var(--mbl-teal-blue);
  font-weight: 400;
  margin-left: 0.35em;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.bd-article:not(:has(.doxygen-content)) h1:hover .headerlink,
.bd-article:not(:has(.doxygen-content)) h2:hover .headerlink,
.bd-article:not(:has(.doxygen-content)) h3:hover .headerlink,
.bd-article:not(:has(.doxygen-content)) h4:hover .headerlink { opacity: 1; }

/* Lists */
.bd-article > section > ul,
.bd-article > section > section > ul,
.bd-article > section > ol,
.bd-article > section > section > ol { margin: 0.8rem 0; }
.bd-article > section li + li { margin-top: 0.35rem; }

/* ── Code blocks (sphinx uses div.highlight; doxygen uses .fragment) ── */
.bd-article > section div[class*="highlight-"] { margin: 1.4rem 0; position: relative; }
.bd-article > section div.highlight {
  background: var(--mbl-canvas-tint);
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 10px;
  overflow: hidden;
}
.bd-article > section div.highlight pre {
  margin: 0;
  padding: 1rem 1.1rem;
  background: transparent;
  font-family: var(--mbl-font-mono);
  font-size: 0.84rem;
  line-height: 1.7;
}

/* ── Code-block language label (top-left tab) ──
   Pygments wraps each block in div.highlight-<lang>. We surface a small
   muted label for the common languages and push the code down so it
   never overlaps. Unknown languages get no label (and no extra padding). */
.bd-article > section div[class*="highlight-"]::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 4px 10px;
  font-family: var(--mbl-font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mbl-ink-muted);
  background: #EDF0F5;
  border-right: 1px solid var(--mbl-rule-soft);
  border-bottom: 1px solid var(--mbl-rule-soft);
  border-radius: 10px 0 8px 0;
}
.bd-article > section div.highlight-cpp::before { content: "C++"; }
.bd-article > section div.highlight-c::before { content: "C"; }
.bd-article > section div.highlight-python::before,
.bd-article > section div.highlight-py::before,
.bd-article > section div.highlight-python3::before { content: "Python"; }
.bd-article > section div.highlight-bash::before,
.bd-article > section div.highlight-shell::before,
.bd-article > section div.highlight-sh::before,
.bd-article > section div.highlight-console::before,
.bd-article > section div.highlight-shell-session::before { content: "Shell"; }
.bd-article > section div.highlight-cmake::before { content: "CMake"; }
.bd-article > section div.highlight-json::before { content: "JSON"; }
.bd-article > section div.highlight-yaml::before,
.bd-article > section div.highlight-yml::before { content: "YAML"; }
.bd-article > section div.highlight-dockerfile::before,
.bd-article > section div.highlight-docker::before { content: "Dockerfile"; }
.bd-article > section div.highlight-ini::before { content: "INI"; }
.bd-article > section div.highlight-toml::before { content: "TOML"; }
.bd-article > section div.highlight-xml::before,
.bd-article > section div.highlight-html::before { content: "XML"; }
/* Add headroom only on labeled blocks so the label clears the first line */
.bd-article > section div.highlight-cpp pre,
.bd-article > section div.highlight-c pre,
.bd-article > section div.highlight-python pre,
.bd-article > section div.highlight-py pre,
.bd-article > section div.highlight-python3 pre,
.bd-article > section div.highlight-bash pre,
.bd-article > section div.highlight-shell pre,
.bd-article > section div.highlight-sh pre,
.bd-article > section div.highlight-console pre,
.bd-article > section div.highlight-shell-session pre,
.bd-article > section div.highlight-cmake pre,
.bd-article > section div.highlight-json pre,
.bd-article > section div.highlight-yaml pre,
.bd-article > section div.highlight-yml pre,
.bd-article > section div.highlight-dockerfile pre,
.bd-article > section div.highlight-docker pre,
.bd-article > section div.highlight-ini pre,
.bd-article > section div.highlight-toml pre,
.bd-article > section div.highlight-xml pre,
.bd-article > section div.highlight-html pre { padding-top: 2.3rem; }
/* Keep the copy button clear of the label (it sits top-right already) */
.bd-article > section div[class*="highlight-"] button.copybtn { top: 0.4rem; }
/* Copy button */
.bd-article button.copybtn {
  background: #ffffff;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 6px;
  color: var(--mbl-ink-soft);
  opacity: 1;
}
.bd-article button.copybtn:hover {
  background: var(--mbl-deep-navy);
  border-color: var(--mbl-deep-navy);
}
.bd-article button.copybtn:hover img,
.bd-article button.copybtn:hover svg { filter: brightness(0) invert(1); }

/* ── Inline code ── */
.bd-article:not(:has(.doxygen-content)) > section code.literal,
.bd-article:not(:has(.doxygen-content)) > section :not(pre) > code {
  background: #F1F5F9;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  font-family: var(--mbl-font-mono);
  font-size: 0.85em;
  border: 1px solid var(--mbl-rule-soft);
  color: var(--mbl-deep-navy);
}

/* ── Blockquotes ── */
.bd-article:not(:has(.doxygen-content)) > section blockquote {
  border-left: 3px solid var(--mbl-teal-blue);
  background: var(--mbl-canvas-tint);
  padding: 0.8rem 1.2rem;
  margin: 1.3rem 0;
  border-radius: 0 8px 8px 0;
}
.bd-article:not(:has(.doxygen-content)) > section blockquote p { color: var(--mbl-ink-soft); font-size: 0.95rem; }

/* ── Images: subtle frame ── */
.bd-article:not(:has(.doxygen-content)) > section img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--mbl-rule-soft);
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.06);
  margin: 0.75rem 0;
}
/* Screenshots inside numbered steps sit cleanly below the step text */
.bd-article .sd-tab-content li img,
.bd-article:not(:has(.doxygen-content)) > section li img { margin: 0.6rem 0 0.4rem; }

/* ══════════════════════════════════════════════
   TABLES (markdown pages only — doxygen tables are styled separately)
   ══════════════════════════════════════════════ */
.bd-article:not(:has(.doxygen-content)) > section table,
.bd-article:not(:has(.doxygen-content)) > section > section table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  margin: 1.2rem 0;
  font-size: 0.92rem;
}
.bd-article:not(:has(.doxygen-content)) > section table thead th {
  background: var(--mbl-canvas-tint);
  border-bottom: 2px solid var(--mbl-rule-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mbl-ink-soft);
  padding: 0.7rem 1rem;
  text-align: left;
}
.bd-article:not(:has(.doxygen-content)) > section table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid #F0F0F0;
  background: #ffffff;
}
.bd-article:not(:has(.doxygen-content)) > section table tbody tr:last-child td { border-bottom: none; }
.bd-article:not(:has(.doxygen-content)) > section table tbody tr:hover td { background: var(--mbl-canvas-tint); }

/* ══════════════════════════════════════════════
   ADMONITIONS — thin left-accent, brand register
   ══════════════════════════════════════════════ */
.bd-article .admonition {
  border: none;
  border-left: 3px solid var(--mbl-teal-blue);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1.1rem;
  margin: 1.5rem 0;
  box-shadow: none;
  background: #F4F8FB;
}
.bd-article .admonition > .admonition-title {
  background: none;
  border: none;
  padding: 0 0 0.2rem 1.8rem;
  margin: 0 0 0.25rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mbl-teal-blue);
}
.bd-article .admonition > .admonition-title::after { color: var(--mbl-teal-blue); }

/* FIX: pydata-sphinx-theme's typed title rules
   (div.admonition.note > .admonition-title — specificity 0,3,1)
   out-specify the generic reset above (0,3,0), so note/tip/warning/…
   kept the theme's full-width colored title bars. This div-qualified
   rule ties at 0,3,1 and loads later, so it wins for every type. */
.bd-article div.admonition > .admonition-title { background: transparent; }

/* note / seealso → teal */
.bd-article .admonition.note,
.bd-article .admonition.seealso { background: #F4F8FB; border-left-color: var(--mbl-teal-blue); }
.bd-article .admonition.note > .admonition-title,
.bd-article .admonition.seealso > .admonition-title { color: var(--mbl-teal-blue); }
.bd-article .admonition.note > .admonition-title::after,
.bd-article .admonition.seealso > .admonition-title::after { color: var(--mbl-teal-blue); }

/* tip / hint → accent cyan */
.bd-article .admonition.tip,
.bd-article .admonition.hint { background: #F2F9FD; border-left-color: var(--mbl-accent-cyan); }
.bd-article .admonition.tip > .admonition-title,
.bd-article .admonition.hint > .admonition-title { color: #1E7CA8; }
.bd-article .admonition.tip > .admonition-title::after,
.bd-article .admonition.hint > .admonition-title::after { color: #1E7CA8; }

/* warning / caution / attention → muted functional amber */
.bd-article .admonition.warning,
.bd-article .admonition.caution,
.bd-article .admonition.attention { background: #FEFAF1; border-left-color: #D97706; }
.bd-article .admonition.warning > .admonition-title,
.bd-article .admonition.caution > .admonition-title,
.bd-article .admonition.attention > .admonition-title { color: #B45309; }
.bd-article .admonition.warning > .admonition-title::after,
.bd-article .admonition.caution > .admonition-title::after,
.bd-article .admonition.attention > .admonition-title::after { color: #B45309; }

/* important / danger / error → muted functional red */
.bd-article .admonition.important,
.bd-article .admonition.danger,
.bd-article .admonition.error { background: #FDF6F6; border-left-color: #B91C1C; }
.bd-article .admonition.important > .admonition-title,
.bd-article .admonition.danger > .admonition-title,
.bd-article .admonition.error > .admonition-title { color: #B91C1C; }
.bd-article .admonition.important > .admonition-title::after,
.bd-article .admonition.danger > .admonition-title::after,
.bd-article .admonition.error > .admonition-title::after { color: #B91C1C; }

/* ══════════════════════════════════════════════
   CODE LANGUAGE TABS  (C++ / Python — paired by doc-enhancements.js)
   ══════════════════════════════════════════════ */
.bd-article .mbl-codetabs { margin: 1.5rem 0; }
.bd-article .mbl-codetabs-nav {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--mbl-rule-soft);
}
.bd-article .mbl-codetab-btn {
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--mbl-font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mbl-ink-muted);
  padding: 0.5rem 0.9rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 160ms ease, border-color 160ms ease;
}
.bd-article .mbl-codetab-btn:hover { color: var(--mbl-deep-navy); }
.bd-article .mbl-codetab-btn.is-active {
  color: var(--mbl-teal-blue);
  border-bottom-color: var(--mbl-teal-blue);
}
.bd-article .mbl-codetab-panel { display: none; }
.bd-article .mbl-codetab-panel.is-active { display: block; }
.bd-article .mbl-codetabs .mbl-codetab-panel div[class*="highlight-"] { margin: 0.9rem 0 0; }
/* The tab already names the language — drop the corner label + its headroom. */
.bd-article .mbl-codetabs div[class*="highlight-"]::before { content: none !important; }
.bd-article .mbl-codetabs div[class*="highlight-"] pre { padding-top: 1rem !important; }

/* ══════════════════════════════════════════════
   RIGHT-HAND TOC ("On this page")
   ══════════════════════════════════════════════ */
.bd-sidebar-secondary .page-toc .section-nav,
.bd-toc-nav { border-left: none; }
.toc-entry a.nav-link,
.bd-toc nav a {
  color: var(--mbl-ink-muted);
  border-left: 2px solid var(--mbl-rule-soft);
  padding: 0.3rem 0 0.3rem 0.85rem;
  font-size: 0.82rem;
  transition: color 160ms ease, border-color 160ms ease;
}
.toc-entry a.nav-link:hover,
.bd-toc nav a:hover { color: var(--mbl-teal-blue); border-left-color: var(--mbl-teal-blue); text-decoration: none; }
.toc-entry a.nav-link.active,
.bd-toc nav a.active {
  color: var(--mbl-teal-blue);
  font-weight: 600;
  border-left-color: var(--mbl-teal-blue);
  background: transparent;
}
.bd-sidebar-secondary .bd-toc-item .caption-text,
.bd-sidebar-secondary .page-toc .title {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mbl-ink-muted);
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   PREV / NEXT PAGER — clean footer navigation cards
   ══════════════════════════════════════════════ */
.prev-next-area { margin-top: 3rem; margin-bottom: 1.5rem; gap: 1rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.prev-next-area a.left-prev,
.prev-next-area a.right-next {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
  background: #ffffff;
  max-width: 46%;
  transition: border-color 200ms ease, background 200ms ease;
}
.prev-next-area a.left-prev:hover,
.prev-next-area a.right-next:hover {
  border-color: var(--mbl-teal-blue);
  background: var(--mbl-canvas-tint);
  text-decoration: none;
}
.prev-next-area .prev-next-subtitle {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mbl-teal-blue);
  margin: 0 0 0.15rem;
}
.prev-next-area a p.prev-next-title,
.prev-next-area a p.prev-next-title:hover { color: var(--mbl-deep-navy); font-weight: 600; margin: 0; text-decoration: none; }
.prev-next-area i.fa-solid { color: var(--mbl-ink-muted); transition: transform 200ms ease, color 200ms ease; }
.prev-next-area a:hover i.fa-solid { color: var(--mbl-teal-blue); }
.prev-next-area a.right-next:hover i.fa-angle-right { transform: translateX(3px); }
.prev-next-area a.left-prev:hover i.fa-angle-left { transform: translateX(-3px); }

/* ══════════════════════════════════════════════
   DOCUMENT-QUALITY POLISH
   ══════════════════════════════════════════════ */

/* Anchored navigation: clicking a TOC link / heading anchor must not hide
   the heading under the sticky top header. Give headings scroll margin. */
.bd-article h1,
.bd-article h2,
.bd-article h3,
.bd-article h4,
.bd-article section[id],
.bd-article span[id] { scroll-margin-top: 5rem; }

/* Thematic break (---) → subtle brand divider, not a heavy default rule */
.bd-article:not(:has(.doxygen-content)) > section hr {
  border: none;
  height: 1px;
  background: var(--mbl-rule-soft);
  margin: 2.5rem 0;
}

/* Keyboard keys (kbd) → crisp technical chip */
.bd-article:not(:has(.doxygen-content)) kbd,
.bd-article:not(:has(.doxygen-content)) .kbd {
  font-family: var(--mbl-font-mono);
  font-size: 0.8em;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--mbl-rule);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #ffffff;
  color: var(--mbl-deep-navy);
  box-shadow: none;
}

/* Definition lists (field lists, glossaries) */
.bd-article:not(:has(.doxygen-content)) > section dl dt {
  font-weight: 600;
  color: var(--mbl-deep-navy);
}
.bd-article:not(:has(.doxygen-content)) > section dl dd { color: var(--mbl-ink-soft); }

/* Footer → quiet, legible; clearly separated from the prev/next pager */
/* The copyright footer is `.bd-footer-content` in this theme (not .bd-footer).
   Separate it clearly from the prev/next pager above. */
.prev-next-footer { margin-bottom: 1rem; }
.bd-footer-content { border-top: 1px solid var(--mbl-rule-soft); margin-top: 1.25rem; padding-top: 1.5rem; }
.bd-footer-content .footer-item p,
.bd-footer-content .copyright { color: var(--mbl-ink-muted); font-size: 0.82rem; }

/* ══════════════════════════════════════════════
   OS / VARIANT TABS  (sphinx-design tab-set)
   Branded styling for {tab-set} on install pages (Linux / Windows).
   !important defeats sphinx-design's own defaults (loaded separately).
   ══════════════════════════════════════════════ */
.bd-article .sd-tab-set { margin: 1.5rem 0; }
.bd-article .sd-tab-set > label.sd-tab-label {
  color: var(--mbl-ink-muted) !important;
  font-weight: 600;
  font-size: 0.92rem;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 0.55rem 1.1rem;
  margin-bottom: 0;
  transition: color 160ms ease, border-color 160ms ease;
}
.bd-article .sd-tab-set > label.sd-tab-label:hover { color: var(--mbl-deep-navy) !important; }
.bd-article .sd-tab-set > input:checked + label.sd-tab-label {
  color: var(--mbl-teal-blue) !important;
  border-bottom-color: var(--mbl-teal-blue) !important;
}
.bd-article .sd-tab-content {
  border: 0 !important;
  border-top: 1px solid var(--mbl-rule-soft) !important;
  padding: 1.25rem 0.2rem 0.2rem !important;
  box-shadow: none !important;
}

/* Plain Markdown lists promoted to cards by doc-enhancements.js.
   Authors write ordinary bullets / numbered lists; HTML gets a richer
   navigation surface while PDF keeps the source list as-is. */
.mbl-plain-card-list {
  list-style: none;
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0;
  align-items: stretch;
}
.mbl-plain-card-list.cols-1 { grid-template-columns: 1fr; }
.mbl-plain-card-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mbl-plain-card-list:not(.cols-1) { grid-auto-rows: 1fr; }
ol.mbl-plain-card-list,
ul.mbl-plain-card-list { padding-left: 0 !important; }
.mbl-plain-card-list > li::marker {
  content: "" !important;
  font-size: 0;
}
.mbl-plain-card-list > li {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 5.75rem;
  height: 100%;
  box-sizing: border-box;
  width: 100%;
  align-self: stretch;
  margin: 0 !important;
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 12px;
  padding: 0.95rem 1.05rem;
  background: #ffffff;
  color: var(--mbl-ink-muted);
  transition: border-color 200ms ease, background 200ms ease;
}
.mbl-plain-card-list > li.has-link:hover {
  border-color: var(--mbl-teal-blue);
  background: var(--mbl-canvas-tint);
}
.mbl-plain-card-list > li.is-disabled { opacity: 0.78; }
.mbl-plain-card-list > li > p { margin: 0; }
.mbl-plain-card-icon {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(21, 96, 130, 0.08);
  color: var(--mbl-teal-blue);
}
.mbl-plain-card-icon svg {
  width: 20px;
  height: 20px;
}
.mbl-plain-card-body {
  grid-column: 2;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}
.mbl-plain-card-title {
  color: var(--mbl-deep-navy);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}
.mbl-plain-card-desc {
  color: var(--mbl-ink-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}
.mbl-plain-card-list a,
.mbl-plain-card-list strong { color: var(--mbl-deep-navy); }
.mbl-plain-card-list a:hover { color: var(--mbl-teal-blue); text-decoration: none; }
.mbl-plain-card-list > li.has-link::after {
  content: "›";
  grid-column: 3;
  align-self: center;
  color: var(--mbl-ink-muted);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 200ms ease, color 200ms ease;
}
.mbl-plain-card-list > li.has-link:hover::after {
  color: var(--mbl-teal-blue);
  transform: translateX(3px);
}
.mbl-plain-card-list.numbered {
  grid-template-columns: 1fr;
  counter-reset: mbl-step;
}
.mbl-plain-card-list.numbered > li {
  counter-increment: mbl-step;
}
.mbl-plain-card-list.numbered > li::before {
  content: counter(mbl-step);
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--mbl-deep-navy);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mbl-plain-card-list.features {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: mbl-feat;
}
.mbl-plain-card-list.features > li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  counter-increment: mbl-feat;
  min-height: 8rem;
  padding: 1.45rem 1.3rem 1.3rem;
  border-radius: 14px;
}
/* Mono index (01 / 02 / 03) marks the three modules as an ordered SDK set */
.mbl-plain-card-list.features > li::after {
  content: counter(mbl-feat, decimal-leading-zero);
  position: absolute;
  top: 1.4rem;
  right: 1.3rem;
  font-family: var(--mbl-font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mbl-ink-muted);
  font-variant-numeric: tabular-nums;
}
.mbl-plain-card-list.features .mbl-plain-card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 0.9rem;
}
.mbl-plain-card-list.features .mbl-plain-card-icon svg {
  width: 22px;
  height: 22px;
}
.mbl-plain-card-list.features .mbl-plain-card-title {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.mbl-plain-card-list.features .mbl-plain-card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .mbl-plain-card-list,
  .mbl-plain-card-list.cols-3,
  .mbl-plain-card-list.features { grid-template-columns: 1fr; }
}

/* ── Search dialog (Ctrl/⌘ + K) → brand ── */
#pst-search-dialog,
.search-button__search-container { border-radius: 12px; }
#search-input,
.bd-search-container input.form-control { border-radius: 8px; }
#pst-search-dialog .search-button__search-container,
dialog#pst-search-dialog { border: 1px solid var(--mbl-rule-soft); box-shadow: 0 16px 48px rgba(10, 22, 40, 0.22); }
.search-button__overlay,
dialog#pst-search-dialog::backdrop { background: rgba(10, 22, 40, 0.38); }
#pst-search-dialog kbd,
.search-button__kbd-shortcut kbd { background: var(--mbl-canvas-tint); border: 1px solid var(--mbl-rule-soft); color: var(--mbl-ink-muted); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE
   Reading canvas → ink navy; sidebar darkens one step further so
   chrome stays distinct. Accents shift to the brighter cyan that
   reads on dark (per brand: accent-cyan on dark surfaces).
   ══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --pst-color-primary:     #4DA6D9;
  --pst-color-secondary:   #AECFE8;
  --pst-color-link:        #6FBCE6;
  --pst-color-link-hover:  #AECFE8;
  --pst-color-inline-code: #AECFE8;
  --pst-color-text-base:   #D7E2EC;
  --pst-color-text-muted:  #8A9BAC;
  --pst-color-border:      #22344A;
  --pst-color-accent:      #4DA6D9;
  --pst-heading-color:     #EAF2F9;

  --pst-color-background:    #0A1322;
  --pst-color-on-background: #0E2841;
}

html[data-theme="dark"] a { color: #6FBCE6; }
html[data-theme="dark"] a:hover { color: #AECFE8; }
html[data-theme="dark"] ::selection { background: #1A3A5C; color: #EAF2F9; }

/* Sidebar: dark surface in dark mode; restore light-on-dark text, search
   and version styling (the light-mode defaults above would be unreadable). */
html[data-theme="dark"] .bd-sidebar-primary {
  background: #06101E;
  color: rgba(255, 255, 255, 0.72);
  border-right-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .bd-sidebar-primary .caption,
html[data-theme="dark"] .bd-sidebar-primary p.caption,
html[data-theme="dark"] .bd-sidebar-primary .caption-text { color: rgba(255, 255, 255, 0.42); }
html[data-theme="dark"] .bd-sidebar-primary nav.bd-links a,
html[data-theme="dark"] .bd-sidebar-primary .bd-toc-item a { color: rgba(255, 255, 255, 0.72); }
html[data-theme="dark"] .bd-sidebar-primary nav.bd-links a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
html[data-theme="dark"] .bd-sidebar-primary nav.bd-links .current > a,
html[data-theme="dark"] .bd-sidebar-primary nav.bd-links a.current,
html[data-theme="dark"] .bd-sidebar-primary nav.bd-links li.active > a {
  color: #ffffff;
  background: rgba(77, 166, 217, 0.16);
  box-shadow: inset 2px 0 0 var(--mbl-accent-cyan);
}
html[data-theme="dark"] .bd-sidebar-primary .bd-search,
html[data-theme="dark"] .bd-sidebar-primary .bd-search:active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
html[data-theme="dark"] .bd-sidebar-primary .bd-search:focus-within {
  border-color: var(--mbl-accent-cyan);
  box-shadow: 0 0 0 2px rgba(77, 166, 217, 0.25);
}
html[data-theme="dark"] .bd-sidebar-primary .bd-search input.form-control,
html[data-theme="dark"] .bd-sidebar-primary form.bd-search input { color: #ffffff; }
html[data-theme="dark"] .bd-sidebar-primary .bd-search input.form-control::placeholder { color: rgba(255, 255, 255, 0.45); }
html[data-theme="dark"] .bd-sidebar-primary .bd-search i.fa-solid,
html[data-theme="dark"] .bd-sidebar-primary .bd-search svg { color: rgba(255, 255, 255, 0.55); }
html[data-theme="dark"] .bd-sidebar-primary .search-button__kbd-shortcut,
html[data-theme="dark"] .bd-sidebar-primary .bd-search .search-button__kbd-shortcut kbd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.6);
}
html[data-theme="dark"] .sidebar-switchers .switchers-title { color: rgba(255, 255, 255, 0.42); }
html[data-theme="dark"] .sidebar-switchers #ver-switcher-btn {
  background: var(--mbl-ink-navy);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
html[data-theme="dark"] .sidebar-switchers #ver-switcher-btn:hover,
html[data-theme="dark"] .sidebar-switchers #ver-switcher-btn:focus {
  background: #030a14;
  border-color: rgba(255, 255, 255, 0.28);
}

/* Header */
html[data-theme="dark"] .bd-header {
  background: rgba(10, 19, 34, 0.85);
  border-bottom-color: #1A2A40;
}
html[data-theme="dark"] .article-header-buttons .btn,
html[data-theme="dark"] .article-header-buttons .nav-link.pst-navbar-icon {
  background: #122236;
  border-color: #22344A;
  color: #C5D2DE;
}
html[data-theme="dark"] .article-header-buttons .btn:hover,
html[data-theme="dark"] .article-header-buttons .nav-link.pst-navbar-icon:hover {
  background: #18293E;
  border-color: #2E445C;
}
html[data-theme="dark"] .article-header-buttons .dropdown-download-buttons .dropdown-menu {
  background: #0E2032;
  border-color: #22344A;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .article-header-buttons .dropdown-download-buttons .dropdown-item { color: #C5D2DE; }
html[data-theme="dark"] .article-header-buttons .dropdown-download-buttons .dropdown-item:hover,
html[data-theme="dark"] .article-header-buttons .dropdown-download-buttons .dropdown-item:focus {
  background: #18293E;
  color: #EAF2F9;
}
html[data-theme="dark"] .article-header-buttons .dropdown-download-buttons .dropdown-item .btn__icon-container { color: #4DA6D9; }

/* Headings */
html[data-theme="dark"] .bd-article h1 { color: #EAF2F9; }
html[data-theme="dark"] .bd-article h2 { color: #CFE0EE; border-bottom-color: #1E3147; }
html[data-theme="dark"] .bd-article h3 { color: #CFE0EE; }
html[data-theme="dark"] .bd-article > section > p:first-of-type { color: #A8B8C8; }

/* Code */
html[data-theme="dark"] .bd-article > section div.highlight {
  background: #0B1726;
  border-color: #1E3147;
}
html[data-theme="dark"] .bd-article > section div[class*="highlight-"]::before {
  background: #16263A;
  color: #8A9BAC;
  border-right-color: #1E3147;
  border-bottom-color: #1E3147;
}
html[data-theme="dark"] .bd-article > section code.literal,
html[data-theme="dark"] .bd-article > section :not(pre) > code {
  background: #122236;
  border-color: #22344A;
  color: #AECFE8;
}
html[data-theme="dark"] .bd-article button.copybtn {
  background: #122236;
  border-color: #22344A;
}
html[data-theme="dark"] .bd-article button.copybtn:hover {
  background: #156082;
  border-color: #156082;
}

/* Blockquote */
html[data-theme="dark"] .bd-article > section blockquote {
  background: #0B1726;
  border-left-color: #4DA6D9;
}
html[data-theme="dark"] .bd-article > section blockquote p { color: #A8B8C8; }

/* Images */
html[data-theme="dark"] .bd-article > section img {
  border-color: #1E3147;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Tables */
html[data-theme="dark"] .bd-article > section table { border-color: #1E3147; }
html[data-theme="dark"] .bd-article > section table thead th {
  background: #0E2032;
  border-bottom-color: #22344A;
  color: #9FB0C0;
}
html[data-theme="dark"] .bd-article > section table td {
  background: #0A1322;
  border-bottom-color: #16263A;
  color: #C8D4E0;
}
html[data-theme="dark"] .bd-article > section table tbody tr:hover td { background: #0E2032; }

/* Admonitions (dark — keep hue, deepen surface) */
html[data-theme="dark"] .bd-article .admonition.note,
html[data-theme="dark"] .bd-article .admonition.seealso { background: #0C2231; }
html[data-theme="dark"] .bd-article .admonition.tip,
html[data-theme="dark"] .bd-article .admonition.hint { background: #0C2433; }
html[data-theme="dark"] .bd-article .admonition.warning,
html[data-theme="dark"] .bd-article .admonition.caution,
html[data-theme="dark"] .bd-article .admonition.attention { background: #2A2008; border-left-color: #E0930F; }
html[data-theme="dark"] .bd-article .admonition.warning > .admonition-title,
html[data-theme="dark"] .bd-article .admonition.caution > .admonition-title,
html[data-theme="dark"] .bd-article .admonition.attention > .admonition-title { color: #E0930F; }
html[data-theme="dark"] .bd-article .admonition.important,
html[data-theme="dark"] .bd-article .admonition.danger,
html[data-theme="dark"] .bd-article .admonition.error { background: #2A1414; border-left-color: #E25555; }
html[data-theme="dark"] .bd-article .admonition.important > .admonition-title,
html[data-theme="dark"] .bd-article .admonition.danger > .admonition-title,
html[data-theme="dark"] .bd-article .admonition.error > .admonition-title { color: #E25555; }

/* Code language tabs (dark) */
html[data-theme="dark"] .bd-article .mbl-codetabs-nav { border-bottom-color: #1E3147; }
html[data-theme="dark"] .bd-article .mbl-codetab-btn { color: #8A9BAC; }
html[data-theme="dark"] .bd-article .mbl-codetab-btn:hover { color: #CFE0EE; }
html[data-theme="dark"] .bd-article .mbl-codetab-btn.is-active { color: #6FBCE6; border-bottom-color: #4DA6D9; }

/* Right TOC */
html[data-theme="dark"] .toc-entry a.nav-link,
html[data-theme="dark"] .bd-toc nav a { border-left-color: #1E3147; color: #8A9BAC; }
html[data-theme="dark"] .toc-entry a.nav-link:hover,
html[data-theme="dark"] .bd-toc nav a:hover,
html[data-theme="dark"] .toc-entry a.nav-link.active,
html[data-theme="dark"] .bd-toc nav a.active { color: #6FBCE6; border-left-color: #4DA6D9; }

/* Pager */
html[data-theme="dark"] .prev-next-area a.left-prev,
html[data-theme="dark"] .prev-next-area a.right-next { border-color: #1E3147; background: #0E2032; }
html[data-theme="dark"] .prev-next-area a.left-prev:hover,
html[data-theme="dark"] .prev-next-area a.right-next:hover { border-color: #4DA6D9; background: #122A3D; }
html[data-theme="dark"] .prev-next-area a p.prev-next-title { color: #CFE0EE; }
html[data-theme="dark"] .prev-next-area .prev-next-subtitle { color: #6FBCE6; }

/* Sidebar scrollbar (dark) */
html[data-theme="dark"] .bd-sidebar-primary:hover { scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
html[data-theme="dark"] .bd-sidebar-primary:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }

/* ══════════════════════════════════════════════════════════════
   DOXYGEN API PAGES — structural polish
   doxygen-awesome.css loads AFTER this file, so its colour *variables*
   are overridden in doxygen-awesome-colors.css. Structural rules here
   win instead by out-specifying its bare selectors: every rule is
   prefixed with `.doxygen-content` (≥ 0,2,x vs doxygen-awesome's 0,1,x),
   so it takes effect regardless of load order. Goal: make the generated
   reference read like the rest of the manual — navy section headers,
   brand rules, comfortable rhythm — without fighting doxygen's layout.
   ══════════════════════════════════════════════════════════════ */

/* Page title ("Class Reference") → brand h1 register */
.bd-article .doxygen-content .headertitle .title,
.bd-article .doxygen-content div.title {
  color: var(--mbl-ink-navy);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Member-group headers ("Public Member Functions") → navy with brand rule.
   Specificity must beat doxygen.css's `.doxygen-content td h2.groupheader`
   (0,2,2) and its box-shadow underline trick, which both load after us. */
.bd-article .doxygen-content td h2.groupheader,
.bd-article .doxygen-content h2.groupheader,
.bd-article .doxygen-content .groupheader {
  color: var(--mbl-deep-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 2px solid var(--mbl-rule-soft);
  box-shadow: none;
  padding-bottom: 0.4rem;
  margin-top: 2.2rem;
}

/* Member item title bar → navy text on the brand tint */
.bd-article .doxygen-content h2.memtitle,
.bd-article .doxygen-content .memtitle {
  color: var(--mbl-deep-navy);
  font-weight: 600;
}

/* Entity links in prose and tables → teal (doxygen leaves these near-black) */
.bd-article .doxygen-content .textblock a.el,
.bd-article .doxygen-content .memdoc a.el,
.bd-article .doxygen-content td.memItemRight a.el,
.bd-article .doxygen-content .memberdecls a.el {
  color: var(--mbl-teal-blue);
  font-weight: 500;
}

/* Doxygen's own breadcrumb (navpath) is redundant with the theme header */
.doxygen-content #nav-path,
.bd-article #nav-path { display: none; }

/* ── Deep polish: parameters, member tables, sections, fragments ── */

/* Parameter / return-value description lists in member docs */
.bd-article .doxygen-content dl.params dt,
.bd-article .doxygen-content dl.retval dt,
.bd-article .doxygen-content dl.tparams dt { color: var(--mbl-deep-navy); font-weight: 600; }
.bd-article .doxygen-content .paramname,
.bd-article .doxygen-content table.params .paramname {
  color: var(--mbl-teal-blue);
  font-style: normal;
  font-weight: 600;
  font-family: var(--mbl-font-mono);
}
.bd-article .doxygen-content .paramtype { color: var(--mbl-ink-muted); font-family: var(--mbl-font-mono); }
/* FIX: template/param tables lost doxygen's default cell spacing under the
   font overrides — "T" ran into its description. Restore a clear gutter. */
.bd-article .doxygen-content table.tparams td.paramname,
.bd-article .doxygen-content table.params td.paramname { padding-right: 0.85rem; white-space: nowrap; }

/* Returns / Note / Warning / See-also blocks → brand admonition register */
.bd-article .doxygen-content dl.section {
  border-left: 3px solid var(--mbl-rule);
  background: var(--mbl-canvas-tint);
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.95rem;
  margin: 1rem 0;
}
.bd-article .doxygen-content dl.section dt { color: var(--mbl-deep-navy) !important; }
.bd-article .doxygen-content dl.section.return,
.bd-article .doxygen-content dl.section.see { border-left-color: var(--mbl-teal-blue); background: #F4F8FB; }
.bd-article .doxygen-content dl.section.return dt,
.bd-article .doxygen-content dl.section.see dt { color: var(--mbl-teal-blue) !important; }
.bd-article .doxygen-content dl.section.note { border-left-color: var(--mbl-accent-cyan); background: #F2F9FD; }
.bd-article .doxygen-content dl.section.note dt { color: #1E7CA8 !important; }
.bd-article .doxygen-content dl.section.warning,
.bd-article .doxygen-content dl.section.attention { border-left-color: #D97706; background: #FEFAF1; }
.bd-article .doxygen-content dl.section.warning dt,
.bd-article .doxygen-content dl.section.attention dt { color: #B45309 !important; }

/* Member summary table: muted return type, monospace names, row hover */
.bd-article .doxygen-content table.memberdecls .memItemLeft,
.bd-article .doxygen-content table.memberdecls .memTemplItemLeft { color: var(--mbl-ink-muted); font-family: var(--mbl-font-mono); }
.bd-article .doxygen-content table.memberdecls .memItemRight { font-family: var(--mbl-font-mono); }
.bd-article .doxygen-content table.memberdecls tr[class^="memitem"]:hover > td { background: var(--mbl-canvas-tint); }

/* Struct / enum field tables */
.bd-article .doxygen-content table.fieldtable th { color: var(--mbl-deep-navy); }
.bd-article .doxygen-content table.fieldtable td.fieldname { font-family: var(--mbl-font-mono); color: var(--mbl-teal-blue); }

/* @code example fragments → match the brand code-block look */
.bd-article .doxygen-content div.fragment,
.bd-article .doxygen-content pre.fragment {
  background: var(--mbl-canvas-tint);
  border: 1px solid var(--mbl-rule-soft);
  border-radius: 10px;
}

/* Dark variants for the deep-polish elements */
html[data-theme="dark"] .bd-article .doxygen-content dl.params dt,
html[data-theme="dark"] .bd-article .doxygen-content dl.retval dt,
html[data-theme="dark"] .bd-article .doxygen-content dl.tparams dt { color: #CFE0EE; }
html[data-theme="dark"] .bd-article .doxygen-content .paramname,
html[data-theme="dark"] .bd-article .doxygen-content table.params .paramname { color: #6FBCE6; }
html[data-theme="dark"] .bd-article .doxygen-content dl.section { background: #0E2032; border-left-color: #2E445C; }
html[data-theme="dark"] .bd-article .doxygen-content dl.section dt { color: #CFE0EE; }
html[data-theme="dark"] .bd-article .doxygen-content dl.section.return,
html[data-theme="dark"] .bd-article .doxygen-content dl.section.see { background: #0C2231; border-left-color: var(--mbl-accent-cyan); }
html[data-theme="dark"] .bd-article .doxygen-content dl.section.return dt,
html[data-theme="dark"] .bd-article .doxygen-content dl.section.see dt { color: #6FBCE6; }
html[data-theme="dark"] .bd-article .doxygen-content dl.section.note { background: #0C2433; }
html[data-theme="dark"] .bd-article .doxygen-content dl.section.warning,
html[data-theme="dark"] .bd-article .doxygen-content dl.section.attention { background: #2A2008; border-left-color: #E0930F; }
html[data-theme="dark"] .bd-article .doxygen-content dl.section.warning dt,
html[data-theme="dark"] .bd-article .doxygen-content dl.section.attention dt { color: #E0930F; }
html[data-theme="dark"] .bd-article .doxygen-content table.memberdecls tr[class^="memitem"]:hover > td { background: #0E2032; }
html[data-theme="dark"] .bd-article .doxygen-content div.fragment,
html[data-theme="dark"] .bd-article .doxygen-content pre.fragment { background: #0B1726; border-color: #1E3147; }

/* Dark mode: titles/headers lift to light ink */
html[data-theme="dark"] .bd-article .doxygen-content .headertitle .title,
html[data-theme="dark"] .bd-article .doxygen-content div.title { color: #EAF2F9; }
html[data-theme="dark"] .bd-article .doxygen-content td h2.groupheader,
html[data-theme="dark"] .bd-article .doxygen-content h2.groupheader,
html[data-theme="dark"] .bd-article .doxygen-content .groupheader { color: #CFE0EE; border-bottom-color: #1E3147; }
html[data-theme="dark"] .bd-article .doxygen-content h2.memtitle,
html[data-theme="dark"] .bd-article .doxygen-content .memtitle { color: #CFE0EE; }
html[data-theme="dark"] .bd-article .doxygen-content .textblock a.el,
html[data-theme="dark"] .bd-article .doxygen-content .memdoc a.el,
html[data-theme="dark"] .bd-article .doxygen-content td.memItemRight a.el,
html[data-theme="dark"] .bd-article .doxygen-content .memberdecls a.el { color: #6FBCE6; }

/* Quality-polish elements — dark variants */
html[data-theme="dark"] .bd-article:not(:has(.doxygen-content)) > section hr { background: #1E3147; }
html[data-theme="dark"] .bd-article:not(:has(.doxygen-content)) kbd,
html[data-theme="dark"] .bd-article:not(:has(.doxygen-content)) .kbd {
  background: #122236;
  border-color: #2E445C;
  color: #CFE0EE;
}
html[data-theme="dark"] .bd-article:not(:has(.doxygen-content)) > section dl dt { color: #CFE0EE; }
html[data-theme="dark"] .bd-article:not(:has(.doxygen-content)) > section dl dd { color: #A8B8C8; }
html[data-theme="dark"] .bd-footer-content { border-top-color: #1E3147; }
/* OS/variant tabs — dark */
html[data-theme="dark"] .bd-article .sd-tab-set > label.sd-tab-label { color: #8A9BAC; }
html[data-theme="dark"] .bd-article .sd-tab-set > label.sd-tab-label:hover { color: #CFE0EE; }
html[data-theme="dark"] .bd-article .sd-tab-set > input:checked + label.sd-tab-label { color: #6FBCE6; border-bottom-color: var(--mbl-accent-cyan); }
html[data-theme="dark"] .bd-article .sd-tab-content { border-color: #1E3147; }
html[data-theme="dark"] #pst-search-dialog .search-button__search-container,
html[data-theme="dark"] dialog#pst-search-dialog { border-color: #1E3147; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); }

/* Plain Markdown card lists — dark */
html[data-theme="dark"] .mbl-plain-card-list > li { background: #0E2032; border-color: #1E3147; color: #8A9BAC; }
html[data-theme="dark"] .mbl-plain-card-list > li.has-link:hover { border-color: var(--mbl-accent-cyan); background: #122A3D; }
html[data-theme="dark"] .mbl-plain-card-icon { background: rgba(77, 166, 217, 0.14); color: var(--mbl-accent-cyan); }
html[data-theme="dark"] .mbl-plain-card-title { color: #CFE0EE; }
html[data-theme="dark"] .mbl-plain-card-desc { color: #8A9BAC; }
html[data-theme="dark"] .mbl-plain-card-list a,
html[data-theme="dark"] .mbl-plain-card-list strong { color: #CFE0EE; }
html[data-theme="dark"] .mbl-plain-card-list a:hover,
html[data-theme="dark"] .mbl-plain-card-list > li.has-link:hover::after { color: #6FBCE6; }
html[data-theme="dark"] .mbl-plain-card-list > li.has-link::after { color: #8A9BAC; }
html[data-theme="dark"] .mbl-plain-card-list.numbered > li::before { background: var(--mbl-teal-blue); color: #ffffff; }

/* ══════════════════════════════════════════════
   AUTO AFFORDANCES (no authoring required)
   ══════════════════════════════════════════════ */

/* External links get a subtle ↗ (skip anchors and image links) */
.bd-article a[href^="http://"]:not(.headerlink):not(:has(img))::after,
.bd-article a[href^="https://"]:not(.headerlink):not(:has(img))::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.12em;
  font-size: 0.82em;
  color: var(--mbl-ink-muted);
  text-decoration: none;
}

/* Copy-link feedback toast on headings */
.mbl-copy-toast {
  position: fixed;
  z-index: 1090;
  background: var(--mbl-deep-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(10, 22, 40, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.mbl-copy-toast.is-on { opacity: 1; transform: translateY(0); }
.bd-article .headerlink { cursor: pointer; }

/* Content images are zoomable */
.bd-article .sd-tab-content img,
.bd-article:not(:has(.doxygen-content)) > section img { cursor: zoom-in; }

/* Lightbox overlay */
.mbl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(10, 22, 40, 0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  cursor: zoom-out;
}
.mbl-lightbox.is-on { opacity: 1; pointer-events: auto; }
.mbl-lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #fff;
}
html[data-theme="dark"] .mbl-lightbox { background: rgba(3, 8, 16, 0.9); }
html[data-theme="dark"] .bd-article a[href^="http://"]::after,
html[data-theme="dark"] .bd-article a[href^="https://"]::after { color: #8A9BAC; }

/* ══════════════════════════════════════════════
   RELEASE NOTES  (regular-form labels + version timeline,
   built by doc-enhancements.js initReleaseNotes)
   ══════════════════════════════════════════════ */
.bd-article .mbl-rel-hide { display: none !important; }

/* legend */
.bd-article .mbl-rel-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 14px 0 32px; padding: 12px 16px;
  background: #fff; border: 1px solid var(--mbl-rule-soft); border-radius: 12px;
}
.bd-article .mbl-rel-legend-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mbl-ink-muted);
}
.bd-article .mbl-rel-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--mbl-ink-soft); }
.bd-article .mbl-rel-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.bd-article .mbl-cat-added { background: #1F8A5B; }
.bd-article .mbl-cat-revised { background: #2563EB; }
.bd-article .mbl-cat-removed { background: #B45309; }
.bd-article .mbl-cat-known { background: #64748B; }
.bd-article .mbl-rel-legend-flag {
  font-size: 0.78rem; color: var(--mbl-ink-muted);
  border-left: 1px solid var(--mbl-rule-soft); padding-left: 14px;
}

/* version block + timeline rail */
.bd-article .mbl-rel-version { position: relative; padding-left: 30px; padding-bottom: 12px; }
.bd-article .mbl-rel-version::before {
  content: ""; position: absolute; left: 6px; top: 16px; height: 100%; width: 2px; background: #E2E5E9;
}
.bd-article .mbl-rel-version.mbl-rel-last::before { height: 0; }
.bd-article .mbl-rel-version::after {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 15px; height: 15px; border-radius: 50%; background: #fff;
  border: 3px solid var(--mbl-teal-blue); box-sizing: border-box;
}
.bd-article .mbl-rel-version[data-bump="Major"]::after { border-color: #B91C1C; }
.bd-article .mbl-rel-version[data-bump="Minor"]::after { border-color: var(--mbl-teal-blue); }
.bd-article .mbl-rel-version[data-bump="Patch"]::after { border-color: var(--mbl-ink-muted); }

/* version header: number + type chip + date */
.bd-article .mbl-rel-version > h2 {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mbl-font-mono); letter-spacing: -0.01em; margin-top: 0.4rem;
}
.bd-article .mbl-rel-type {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; font-family: var(--mbl-font-sans);
}
.bd-article .mbl-rel-version[data-bump="Major"] .mbl-rel-type { color: #B91C1C; background: #FBECEC; }
.bd-article .mbl-rel-version[data-bump="Minor"] .mbl-rel-type { color: var(--mbl-teal-blue); background: #EAF2F6; }
.bd-article .mbl-rel-version[data-bump="Patch"] .mbl-rel-type { color: var(--mbl-ink-muted); background: #F0F0F0; }
.bd-article .mbl-rel-date {
  margin-left: auto; font-family: var(--mbl-font-sans);
  font-size: 0.85rem; font-weight: 400; color: var(--mbl-ink-muted);
}
.bd-article .mbl-rel-summary { font-size: 1.02rem; line-height: 1.6; color: var(--mbl-ink-soft); margin-top: 0.3rem; }

/* category label (replaces the h3 text) */
.bd-article .mbl-rel-cat > h3 { margin: 1.1rem 0 0.6rem; font-size: 1rem; }
.bd-article .mbl-rel-label {
  display: inline-flex; align-items: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 9px; font-family: var(--mbl-font-sans);
}
.bd-article .mbl-rel-cat[data-cat="added"] .mbl-rel-label { color: #1F8A5B; background: #E8F4EE; }
.bd-article .mbl-rel-cat[data-cat="revised"] .mbl-rel-label { color: #2563EB; background: #E9F0FE; }
.bd-article .mbl-rel-cat[data-cat="removed"] .mbl-rel-label { color: #B45309; background: #FBF1E6; }
.bd-article .mbl-rel-cat[data-cat="known"] .mbl-rel-label { color: #64748B; background: #EEF1F4; }

/* coloured list markers per category */
.bd-article .mbl-rel-cat[data-cat="added"] li::marker { color: #1F8A5B; }
.bd-article .mbl-rel-cat[data-cat="revised"] li::marker { color: #2563EB; }
.bd-article .mbl-rel-cat[data-cat="removed"] li::marker { color: #B45309; }
.bd-article .mbl-rel-cat[data-cat="known"] li::marker { color: #64748B; }

/* inline flags */
.bd-article .mbl-rel-flag {
  display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 5px; padding: 1px 6px; margin-right: 7px;
  vertical-align: middle; font-family: var(--mbl-font-sans);
}
.bd-article .mbl-flag-breaking { color: #B91C1C; background: #FBECEC; }
.bd-article .mbl-flag-highlight { color: #0E7490; background: #E6F1F5; }

/* dark mode */
html[data-theme="dark"] .bd-article .mbl-rel-legend { background: #0E2032; border-color: #22344A; }
html[data-theme="dark"] .bd-article .mbl-rel-version::before { background: #2A3B52; }
html[data-theme="dark"] .bd-article .mbl-rel-version::after { background: #0A1628; }
html[data-theme="dark"] .bd-article .mbl-rel-version[data-bump="Minor"] .mbl-rel-type { color: #7FC7E8; background: rgba(21,96,130,0.22); }
html[data-theme="dark"] .bd-article .mbl-rel-version[data-bump="Major"] .mbl-rel-type { color: #F2A5A5; background: rgba(185,28,28,0.18); }
html[data-theme="dark"] .bd-article .mbl-rel-cat[data-cat="added"] .mbl-rel-label { color: #74C49B; background: rgba(31,138,91,0.16); }
html[data-theme="dark"] .bd-article .mbl-rel-cat[data-cat="revised"] .mbl-rel-label { color: #8FB4F5; background: rgba(37,99,235,0.16); }
html[data-theme="dark"] .bd-article .mbl-rel-cat[data-cat="removed"] .mbl-rel-label { color: #E0A86A; background: rgba(180,83,9,0.16); }
html[data-theme="dark"] .bd-article .mbl-rel-cat[data-cat="known"] .mbl-rel-label { color: #A6B2C2; background: rgba(100,116,139,0.18); }
html[data-theme="dark"] .bd-article .mbl-flag-breaking { color: #F2A5A5; background: rgba(185,28,28,0.18); }
html[data-theme="dark"] .bd-article .mbl-flag-highlight { color: #6FC7E6; background: rgba(14,116,144,0.18); }


/* ══════════════════════════════════════════════
   SETUP STEPPER  (installation flow — built by doc-enhancements.js)
   Driver → Runtime Library → Compatibility, above the page title.
   ══════════════════════════════════════════════ */
.mbl-setup-stepper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 0 0 2rem;
}
.mbl-setup-stepper .mbl-step-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mbl-ink-muted);
  margin-right: 1.1rem;
}
.mbl-setup-stepper .mbl-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.mbl-setup-stepper a.mbl-step:hover { text-decoration: none; }
.mbl-setup-stepper .mbl-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--mbl-rule);
  color: var(--mbl-ink-muted);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, color 160ms ease;
}
.mbl-setup-stepper .mbl-step-name {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mbl-ink-muted);
  transition: color 160ms ease;
}
.mbl-setup-stepper a.mbl-step:hover .mbl-step-num { border-color: var(--mbl-teal-blue); color: var(--mbl-teal-blue); }
.mbl-setup-stepper a.mbl-step:hover .mbl-step-name { color: var(--mbl-deep-navy); }
.mbl-setup-stepper .mbl-step.is-current .mbl-step-num {
  background: var(--mbl-teal-blue);
  border-color: var(--mbl-teal-blue);
  color: #ffffff;
}
.mbl-setup-stepper .mbl-step.is-current .mbl-step-name { font-weight: 600; color: var(--mbl-deep-navy); }
.mbl-setup-stepper .mbl-step-line { width: 34px; height: 1px; background: var(--mbl-rule); margin: 0 10px; }

/* dark */
html[data-theme="dark"] .mbl-setup-stepper .mbl-step-num { background: #122236; border-color: #2E445C; color: #8A9BAC; }
html[data-theme="dark"] .mbl-setup-stepper .mbl-step-name { color: #8A9BAC; }
html[data-theme="dark"] .mbl-setup-stepper a.mbl-step:hover .mbl-step-num { border-color: var(--mbl-accent-cyan); color: #6FBCE6; }
html[data-theme="dark"] .mbl-setup-stepper a.mbl-step:hover .mbl-step-name { color: #CFE0EE; }
html[data-theme="dark"] .mbl-setup-stepper .mbl-step.is-current .mbl-step-num { background: var(--mbl-teal-blue); border-color: var(--mbl-teal-blue); color: #ffffff; }
html[data-theme="dark"] .mbl-setup-stepper .mbl-step.is-current .mbl-step-name { color: #CFE0EE; }
html[data-theme="dark"] .mbl-setup-stepper .mbl-step-line { background: #2A3B52; }