/* antora-doc-layout: layered after antora default UI and site-extra.css (dark theme).
   Source Sans 3 + Plus Jakarta Sans (headings), a doc mast (breadcrumbs) instead of a separate
   in-article toolbar, and a sidebar with component label + page navigation tree. */

:root {
  --adt-mast-h: 2.75rem;
  --adt-mast-total: calc(3.5rem + var(--adt-mast-h));
  --adt-font: "Source Sans 3", system-ui, "Segoe UI", sans-serif;
  --adt-font-display: "Plus Jakarta Sans", var(--adt-font);
  --adt-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  /* Surfaces — site-visual.css may refine; keep sensible defaults if visual CSS is omitted */
  --adt-canvas: #f3f5f8;
  --adt-elevated: #ffffff;
  --adt-ink: #141820;
  --adt-ink-muted: #5a6270;
  --adt-accent: #0f766e;
  --adt-accent-hover: #0d9488;
  --adt-accent-soft: rgba(15, 118, 110, 0.1);
  --adt-border: #d9dee7;
  --adt-chrome: var(--adt-canvas);
  --adt-chrome-border: var(--adt-border);
  /* Component + version breadcrumb kickers (same color for both) */
  --adt-bc-kicker-fg: var(--adt-accent);
  --adt-bc-kicker-bg: var(--adt-accent-soft);
  --adt-bc-kicker-border: color-mix(in srgb, var(--adt-accent) 28%, transparent);
  /* Top bar: all controls (logo hit-area, title, theme, org GitHub) share one line height */
  --adt-header-ctrl: 2.5rem;
  /* Light theme (default): chrome matches page canvas */
  --adt-header-bar-bg: var(--adt-chrome);
  --adt-header-bar-fg: var(--adt-ink);
  --adt-header-bar-border: var(--adt-chrome-border);
  --adt-header-bar-hover: var(--adt-accent-soft);
  /* Raster/SVG VCS marks (white in file): invert for light top bar. */
  --adt-header-vcs-icon-filter: brightness(0) opacity(0.92);
  /* Tool band sits above the 3-col row (.adt-shell > .adt-tool-band + .body.adt-body):
     - --adt-global-rail-top: top inset under the mast for the tool band.
     - --adt-tool-band: height of the read-width control row.
     - --adt-tool-gap: space under the tool band before tree / title / TOC.
     Columns share a common baseline (--adt-col-rail-top) below the band.
     Site-wide search lives in .adt-site-navbar (own width, not column measure). */
  --adt-global-rail-top: 0.85rem;
  --adt-content-rail-top: 0;
  --adt-tool-band: 2.15rem;
  --adt-tool-gap: 0.65rem;
  --adt-col-rail-top: 0;
  --adt-toc-rail-top: var(--adt-col-rail-top);
  /* Horizontal rail: mast + left nav share an inset so home / component title line up. */
  --adt-mast-pad-h: 1.25rem;
  --adt-global-rail-hpad: var(--adt-mast-pad-h);
  /* Centered page shell + reading measure (site-visual applies the layout rules).
     --adt-shell-max is a soft fallback; site-visual derives it from nav + gaps + doc + toc.
     Nav and TOC share --adt-side-width so the article sits optically centered. */
  --adt-shell-pad: 1.75rem;
  --adt-side-width: 16rem;
  --adt-nav-width: var(--adt-side-width);
  --adt-col-gap: 2rem;
  --adt-toc-width: var(--adt-side-width);
  --adt-doc-max: 82ch;
  --adt-shell-max: calc(
    var(--adt-nav-width) + var(--adt-col-gap) + var(--adt-doc-max) + var(--adt-col-gap) + var(--adt-toc-width) +
      2 * var(--adt-shell-pad)
  );
  --adt-footer-pad-top: 1.5rem;
  --adt-footer-pad-h: 1.5rem;
  --adt-footer-pad-bottom: 1.5rem;
}

html.dark-theme {
  --adt-canvas: #0b0e13;
  --adt-elevated: #141a22;
  --adt-ink: #e8ebf0;
  --adt-ink-muted: #9aa3b2;
  --adt-accent: #2dd4bf;
  --adt-accent-hover: #5eead4;
  --adt-accent-soft: rgba(45, 212, 191, 0.12);
  --adt-border: rgba(255, 255, 255, 0.09);
  --adt-chrome: var(--adt-canvas);
  --adt-chrome-border: var(--adt-border);
  --adt-bc-kicker-fg: var(--adt-accent);
  --adt-bc-kicker-bg: var(--adt-accent-soft);
  --adt-bc-kicker-border: color-mix(in srgb, var(--adt-accent) 35%, transparent);
  /* Dark header: keep white foreground on dark bar (GitHub mark stays white; no filter) */
  --adt-header-bar-bg: var(--adt-chrome);
  --adt-header-bar-fg: var(--adt-ink);
  --adt-header-bar-border: var(--adt-chrome-border);
  --adt-header-bar-hover: var(--adt-accent-soft);
  --adt-header-vcs-icon-filter: none;
}

html {
  font-family: var(--adt-font);
}

/* Default UI: body { padding-top: var(--navbar-height) } for a fixed, separate top .navbar. FTN uses
   a single in-flow .header; that padding leaves an empty 3.5rem gap—remove it. */
html body {
  padding-top: 0 !important;
}

body,
button,
input,
select,
optgroup,
textarea,
.navbar,
.navbar-item,
.breadcrumbs,
.doc,
footer.footer {
  font-family: var(--adt-font) !important;
}

code,
kbd,
pre,
.spectrum,
.doc .conum {
  /* Keep a distinct monospace; Roboto still loads from the default bundle as fallback */
  font-family: var(--adt-font-mono);
}

/* ——— Top bar: light strip in “light” theme, dark strip in dark theme ——— */
.header.adt-header {
  display: block;
  color: var(--adt-header-bar-fg);
  box-sizing: border-box;
  /* Mast has its own fill and bottom border; top row is .adt-site-navbar (sticky + opaque). */
  background: transparent;
}

/* Sticky first row: must be solid so page content does not show through on scroll.
   z-index must beat .adt-tool-band (20): Lunr .search-result-dropdown-menu and the
   Ask panel live inside this sticky stacking context, so a low navbar z-index traps
   overlays under the read-width tool band. */
.adt-site-navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  min-height: 3.5rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 0.6rem 0 0.5rem;
  column-gap: 0.75rem;
  background: var(--adt-header-bar-bg) !important;
  color: inherit;
  border-bottom: 1px solid var(--adt-header-bar-border);
}

/* Brand may shrink; title ellipsizes so search/actions never overlap it. */
.adt-site-navbar .adt-header-brand {
  flex: 0 1 auto;
  max-width: min(40%, 22rem);
}

/* Site-wide search (command palette): flex middle slot — not absolute center.
   Absolute centering + min-width caused brand/title overlap at high zoom / narrow widths.
   search-chat JS toggles .is-collapsed → icon; popover drops under the toggle. */
.adt-navbar-search {
  position: relative;
  z-index: 9;
  flex: 1 1 auto;
  box-sizing: border-box;
  width: auto;
  max-width: 36rem;
  min-width: 0;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
}

.adt-navbar-search.is-collapsed {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-inline: 0 0.25rem;
}

.adt-navbar-search .adt-nav-search,
.adt-navbar-search .adt-search-chat {
  width: 100%;
  max-width: none;
  min-height: 2.15rem;
}

.adt-navbar-search.is-collapsed .adt-search-chat {
  width: auto;
}

.header.adt-header .adt-topbar,
.header.adt-header .adt-topbar .navbar-end {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: auto;
}

.adt-header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 0.15rem;
  min-height: var(--adt-header-ctrl);
}

/* Keep the end links visible: no Bulma burger for this project */
.header.adt-header .navbar-menu.adt-topbar {
  display: flex !important;
  flex: 0 0 auto;
  max-height: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.header.adt-header .adt-topbar,
.header.adt-header .adt-topbar .navbar-end {
  color: inherit;
  background: transparent;
}

/* Brand: food truck mark (→ main site) + “Documentation” (→ docs home) */
.adt-header-brand {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  min-height: var(--adt-header-ctrl);
  column-gap: 0.15rem;
}

.adt-header-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--adt-header-ctrl);
  height: var(--adt-header-ctrl);
  min-width: var(--adt-header-ctrl);
  min-height: var(--adt-header-ctrl);
  padding: 0;
  line-height: 0;
  border-radius: 0.2rem;
  text-decoration: none;
  box-sizing: border-box;
}

.adt-header-logo-item:hover,
.adt-header-logo-item:focus {
  background: var(--adt-header-bar-hover);
  outline: none;
}

.adt-header-logo {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* Light/dark asset pair (site.keys.header_logo_dark): show one mark per theme. */
.adt-header-logo--for-dark {
  display: none;
}

html.dark-theme .adt-header-logo--for-light {
  display: none;
}

html.dark-theme .adt-header-logo--for-dark {
  display: block;
}

/* Brand logos (default): no filter — colored marks stay as authored in light and dark.
   Opt in with site.keys.header_logo_tone: mono for single-ink marks that need invert on the dark bar.
   Pair mode (header_logo_dark) skips tone filters — each asset is authored for its bar. */
html.dark-theme .adt-header-logo--mono {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* Guide: header logo strategy fixtures (mocked bars; not live chrome). */
.adt-logo-fixture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
}

.adt-logo-fixture-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--adt-header-bar-fg, #1f2933);
}

.adt-logo-fixture-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.75rem;
  border-radius: 0.35rem;
}

.adt-logo-fixture-bar--light {
  background: #f7f9fb;
  border: 1px solid #d5dde6;
}

.adt-logo-fixture-bar--dark {
  background: #1a2332;
  border: 1px solid #2c3a4d;
}

.adt-logo-fixture-bar img,
.adt-logo-fixture-bar object {
  width: 48px;
  height: 48px;
  display: block;
}

/* Show mono fix beside the intentional failure mock. */
.adt-logo-fixture-bar--mono-fixed img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

a.adt-header-title,
.navbar-item.adt-header-title {
  color: var(--adt-header-bar-fg) !important;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  padding: 0 0.4rem 0 0.15rem;
  min-width: 0;
  max-width: 100%;
  height: var(--adt-header-ctrl);
  min-height: var(--adt-header-ctrl);
  line-height: var(--adt-header-ctrl);
  display: block;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.adt-header-title:hover,
a.adt-header-title:focus {
  text-decoration: none;
  opacity: 0.9;
}

/* Header end controls (GitHub, theme) — one shape; beats site-extra .theme-toggle:hover colors. */
.header.adt-header .navbar .navbar-end .adt-header-icon-btn {
  min-width: var(--adt-header-ctrl) !important;
  min-height: var(--adt-header-ctrl) !important;
  width: var(--adt-header-ctrl) !important;
  height: var(--adt-header-ctrl) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  border: none;
  border-radius: 0.2rem;
  text-decoration: none;
  color: var(--adt-header-bar-fg) !important;
  background: transparent !important;
  cursor: pointer;
}

/* :focus (mouse click) would keep the “hover” fill until click-away—use :focus-visible for keyboard. */
.header.adt-header .navbar .navbar-end .adt-header-icon-btn:hover {
  background: var(--adt-header-bar-hover) !important;
  text-decoration: none;
}

.header.adt-header .navbar .navbar-end .adt-header-icon-btn:focus {
  outline: none;
  background: transparent !important;
}

.header.adt-header .navbar .navbar-end .adt-header-icon-btn:focus-visible {
  background: var(--adt-header-bar-hover) !important;
  outline: 2px solid var(--adt-header-bar-fg);
  outline-offset: 2px;
}

/* VCS mark in file is white: filter on light top bar, none on dark. */
.adt-header-vcs .adt-header-vcs-img,
.adt-header-icon-btn.adt-header-vcs .adt-header-vcs-img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  filter: var(--adt-header-vcs-icon-filter, none);
}

.header.adt-header .adt-header-icon-btn .theme-icon,
.header.adt-header .navbar .navbar-end .theme-toggle .theme-icon {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header.adt-header .adt-header-icon-btn .theme-icon path,
.header.adt-header .adt-header-icon-btn .theme-icon circle,
.header.adt-header .navbar .navbar-end .theme-toggle .theme-icon path,
.header.adt-header .navbar .navbar-end .theme-toggle .theme-icon circle {
  fill: none;
}

/* Theme toggle matches other header icon buttons (dark-mode JS adds adt-header-icon-btn). */
.header.adt-header .navbar .navbar-end .theme-toggle.adt-header-icon-btn {
  min-width: var(--adt-header-ctrl) !important;
  min-height: var(--adt-header-ctrl) !important;
  width: var(--adt-header-ctrl) !important;
  height: var(--adt-header-ctrl) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  border: none;
  border-radius: 0.2rem;
  color: var(--adt-header-bar-fg) !important;
  background: transparent !important;
  cursor: pointer;
}

.header.adt-header .navbar .navbar-end .theme-toggle.adt-header-icon-btn:hover {
  background: var(--adt-header-bar-hover) !important;
}

.header.adt-header .navbar .navbar-end .theme-toggle.adt-header-icon-btn:focus {
  outline: none;
  background: transparent !important;
}

.header.adt-header .navbar .navbar-end .theme-toggle.adt-header-icon-btn:focus-visible {
  background: var(--adt-header-bar-hover) !important;
  outline: 2px solid var(--adt-header-bar-fg);
  outline-offset: 2px;
}

@media screen and (min-width: 1024px) {
  .adt-header .adt-topbar,
  .adt-header .adt-topbar .navbar-end {
    flex: 0 0 auto;
  }
  .adt-header-brand {
    min-width: 0;
  }
}

/* ——— Doc mast: component, version, breadcrumb trail, edit — not in the content column ——— */
.adt-doc-mast {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--adt-mast-h);
  padding: 0.35rem var(--adt-mast-pad-h) 0.35rem var(--adt-mast-pad-h);
  position: sticky;
  top: 3.5rem;
  z-index: 3;
  background: var(--adt-chrome);
  border-bottom: 1px solid var(--adt-chrome-border);
  box-sizing: border-box;
}

html.dark-theme .adt-doc-mast {
  background: var(--adt-chrome);
  border-bottom-color: var(--adt-chrome-border);
}

.adt-doc-mast .nav-toggle {
  flex: 0 0 auto;
  align-self: center;
}

@media screen and (min-width: 1024px) {
  .adt-doc-mast .nav-toggle {
    display: none;
  }
}

.adt-doc-mast-center {
  flex: 1 1 auto;
  min-width: 0;
}

/* Left nav: in-flow column fills the same height as main; tree uses overflow only when needed. */
@media screen and (min-width: 1024px) {
  .body.adt-body {
    align-items: stretch;
  }

  .nav-container {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    min-height: 0 !important;
  }

  .nav {
    position: static !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .nav .panels {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .nav-panel-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
  }
}

.nav-panel-menu,
.nav-panel-explore .components {
  overflow-y: auto !important;
}

/* Default UI sets overscroll-behavior: none (and -ms-scroll-chaining: none) on nav panels and
   the TOC list. That traps the mouse wheel even when the panel has nothing left to scroll.
   Restore scroll chaining so the page moves when the pointer is over a sidebar. */
.nav-panel-menu,
.nav-panel-explore .components,
.toc.sidebar .toc-menu ul {
  overscroll-behavior: auto !important;
  -ms-scroll-chaining: chained !important;
}

/* Mobile overlay: account for the mast in addition to the main navbar */
@media screen and (max-width: 1023.5px) {
  .nav-container {
    top: var(--adt-mast-total) !important;
  }

  .nav {
    top: 2.5rem;
    height: calc(100vh - var(--adt-mast-total) - 2.5rem);
  }
}

/* Article column no longer has the old toolbar; avoid extra top gap if any */
.adt-article {
  min-width: 0;
}

/* Inset article + in-page TOC. Tool band is outside columns; peers share col rail. */
.adt-article .content {
  padding-top: var(--adt-col-rail-top, 0);
  box-sizing: border-box;
}

/* ——— Content rail: TOC h3 (Antora’s fake height/flex) ——— */
.body.adt-body > aside.toc.sidebar .toc-menu h3,
.adt-article .content .toc .toc-menu h3 {
  display: block;
  height: auto;
  min-height: 0;
  flex-direction: unset;
  justify-content: unset;
  /* Top inset is TOC padding-top / .content’s padding; only label↔list gap */
  margin: 0;
  padding: 0 0 0.25rem 0;
}

/* ——— Page title (Edit link lives in the mast next to the breadcrumb trail) ——— */
/* Antora: .doc h1 { margin: 1rem 0 0 } still matches the layout h1 (not only .doc > h1:first-child).
   Zero it here so the only top inset is .content’s padding. */
.doc .adt-page-header,
.adt-article .adt-page-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0.35rem;
  padding-top: 0;
}

.doc .adt-page-header h1.page.adt-page-title,
.adt-article .adt-page-header h1.page.adt-page-title {
  margin: 0;
  padding: 0;
}

.doc .adt-page-title,
.adt-article .adt-page-title {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 480px) {
  .doc .adt-page-title,
  .adt-article .adt-page-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* ——— Section permalinks (§) ———
   Antora UI Default hides `.anchor` with `visibility: hidden`, which removes the
   icon from hit-testing. The glyph also sits at `margin-left: -1.5ex` (slightly
   outside the heading content edge), so the gutter beside the title is a dead
   zone until you first hover the title text, then slide left onto the link.
   Use opacity instead, keep the box hit-testable, and pad the target so approach
   from the left / above / below into that gutter still reveals the link. */
.doc h1,
.doc h2,
.doc h3,
.doc h4,
.doc h5,
.doc h6 {
  position: relative;
}

.doc h1 .anchor,
.doc h2 .anchor,
.doc h3 .anchor,
.doc h4 .anchor,
.doc h5 .anchor,
.doc h6 .anchor {
  visibility: visible;
  opacity: 0;
  /* Keep Antora’s absolute + negative-margin placement; pad the hit box. */
  padding: 0.45em 0.3em 0.45em 0.7em;
  margin-left: calc(-1.5ex - 0.7em);
  margin-top: -0.35em;
  box-sizing: content-box;
  color: var(--adt-ink-muted, #5b6472);
  text-decoration: none !important;
  z-index: 1;
}

.doc h1:hover .anchor,
.doc h2:hover .anchor,
.doc h3:hover .anchor,
.doc h4:hover .anchor,
.doc h5:hover .anchor,
.doc h6:hover .anchor,
.doc h1 .anchor:hover,
.doc h2 .anchor:hover,
.doc h3 .anchor:hover,
.doc h4 .anchor:hover,
.doc h5 .anchor:hover,
.doc h6 .anchor:hover,
.doc h1 .anchor:focus,
.doc h2 .anchor:focus,
.doc h3 .anchor:focus,
.doc h4 .anchor:focus,
.doc h5 .anchor:focus,
.doc h6 .anchor:focus,
.doc h1 .anchor:focus-visible,
.doc h2 .anchor:focus-visible,
.doc h3 .anchor:focus-visible,
.doc h4 .anchor:focus-visible,
.doc h5 .anchor:focus-visible,
.doc h6 .anchor:focus-visible {
  opacity: 1;
  color: var(--adt-accent, #0d6e6e) !important;
}

/* ——— Breadcrumb row in mast ——— */
.adt-breadcrumbs {
  display: block;
  width: 100%;
  font-size: 0.85rem;
  line-height: 1.25;
}

.adt-breadcrumbs > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Row gap only when wrapping. No column-gap — Antora’s li::after "/" already
     pads both sides; an extra gap shoved crumbs right of each slash center. */
  row-gap: 0.25rem;
  column-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.adt-breadcrumbs > ul > li {
  max-width: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Own the separators so padding stays symmetric (optically center on "/"). */
.adt-breadcrumbs > ul > li::after {
  content: "/";
  padding: 0 0.45rem;
  font-weight: 400;
  color: var(--adt-ink-muted, inherit);
  pointer-events: none;
}

.adt-breadcrumbs > ul > li:last-of-type::after {
  content: none;
  padding: 0;
}

.adt-breadcrumb-masthead {
  flex: 0 0 auto;
}

/* Trail segments: borrow doc-style link weight (don’t paint parent li +li gray — that hid link color) */
.adt-breadcrumb-trail {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
  line-height: 1.4;
  font-size: 0.9rem;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.adt-breadcrumb-trail .adt-breadcrumb-trail-link {
  color: var(--adt-accent);
  font-weight: 400;
  text-decoration: none;
}

.adt-breadcrumb-trail .adt-breadcrumb-trail-link:hover {
  text-decoration: underline;
}

.adt-breadcrumb-trail--current .adt-breadcrumb-trail-link,
.adt-breadcrumb-trail--current .adt-breadcrumb-trail-text,
.adt-breadcrumb-trail-text {
  color: var(--adt-ink);
  font-weight: 500;
}

html.dark-theme .adt-breadcrumb-trail .adt-breadcrumb-trail-link {
  color: var(--adt-accent);
}

html.dark-theme .adt-breadcrumb-trail--current .adt-breadcrumb-trail-link,
html.dark-theme .adt-breadcrumb-trail--current .adt-breadcrumb-trail-text,
html.dark-theme .adt-breadcrumb-trail-text {
  color: var(--adt-ink);
}

/* “Edit” next to page trail (compact label vs. old in-article “Edit this page”) */
.adt-breadcrumb-edit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 0.1rem;
  list-style: none;
}

.adt-breadcrumb-edit .adt-edit-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--adt-accent);
  text-decoration: none;
  white-space: nowrap;
}

.adt-breadcrumb-edit .adt-edit-inline-link:hover {
  text-decoration: underline;
}

html.dark-theme .adt-breadcrumb-edit .adt-edit-inline-link {
  color: var(--adt-accent);
}

/* White VCS assets: dark silhouette on light mast; full color on dark mast */
.adt-breadcrumb-edit .adt-edit-vcs-img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) opacity(0.55);
  vertical-align: middle;
}

html.dark-theme .adt-breadcrumb-edit .adt-edit-vcs-img {
  filter: none;
  opacity: 0.95;
}

.adt-bc-menu-item a,
.adt-bc-menu-item a.adt-cmp-version-pill {
  text-decoration: none;
}

.adt-breadcrumbs a:hover {
  text-decoration: underline;
}

/* Default UI adds `/` after every .breadcrumbs li and uses display:inline — breaks component dropdown */
.adt-breadcrumbs .adt-bc-dropdown li,
.breadcrumbs.adt-breadcrumbs .adt-bc-dropdown li {
  display: block !important;
}

.adt-breadcrumbs .adt-bc-dropdown li::after,
.breadcrumbs.adt-breadcrumbs .adt-bc-dropdown li::after {
  content: none !important;
  padding: 0 !important;
}

.adt-breadcrumb-home {
  flex: 0 0 auto;
  list-style: none;
}

.adt-breadcrumb-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  border: 1px solid var(--adt-bc-kicker-border);
  border-radius: 0.2rem;
  background: var(--adt-bc-kicker-bg);
  color: var(--adt-bc-kicker-fg);
  text-decoration: none;
  vertical-align: middle;
}

.adt-breadcrumb-home-link:hover {
  border-color: color-mix(in srgb, var(--adt-accent) 45%, transparent);
  background: color-mix(in srgb, var(--adt-accent) 18%, var(--adt-bc-kicker-bg));
  text-decoration: none;
}

html.dark-theme .adt-breadcrumb-home-link {
  color: var(--adt-bc-kicker-fg);
  background: var(--adt-bc-kicker-bg);
  border-color: var(--adt-bc-kicker-border);
}

html.dark-theme .adt-breadcrumb-home-link:hover {
  border-color: color-mix(in srgb, var(--adt-accent) 45%, transparent);
  background: color-mix(in srgb, var(--adt-accent) 18%, var(--adt-bc-kicker-bg));
}

.adt-breadcrumb-home-icon {
  display: block;
}

/* Vertical | between component/version kickers — hidden; trail still uses / separators */
.adt-bc-sep {
  display: none;
}

.adt-bc-cluster {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.3rem;
  min-width: 0;
  max-width: 100%;
}

.adt-bc-menu {
  position: relative;
  display: inline-block;
  min-width: 0;
}

.adt-bc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 12rem;
  min-height: 1.5rem;
  margin: 0;
  padding: 0.15rem 0.35rem 0.15rem 0.4rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--adt-bc-kicker-fg);
  background: var(--adt-bc-kicker-bg);
  border: 1px solid var(--adt-bc-kicker-border);
  border-radius: 0.2rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  outline: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Small muted stroke chevron — reads as a menu without competing with the label. */
.adt-bc-kicker::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55em;
  height: 0.55em;
  opacity: 0.7;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6L8 11L12.5 6' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6L8 11L12.5 6' stroke='black' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.adt-bc-kicker:hover {
  border-color: color-mix(in srgb, var(--adt-accent) 45%, transparent);
}

.adt-bc-kicker:hover::after {
  opacity: 0.9;
}

/* Mouse click must not leave a UA / double ring; keyboard still gets a clean ring. */
.adt-bc-kicker:focus {
  outline: none;
}

.adt-bc-kicker:focus-visible {
  outline: 2px solid var(--adt-accent);
  outline-offset: 2px;
}

.adt-bc-kicker[aria-expanded='true'] {
  outline: none;
  border-color: var(--adt-accent);
  background: color-mix(in srgb, var(--adt-accent) 18%, var(--adt-bc-kicker-bg));
}

.adt-bc-kicker[aria-expanded='true']::after {
  transform: rotate(180deg);
  opacity: 0.9;
}

.adt-bc-kicker-label,
.adt-bc-kicker-version {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adt-bc-kicker-version {
  max-width: 7rem;
}

/* [hidden] must win over #adt-bc-proj / #adt-bc-ver (ID + display:block !important from layout fixes) */
.adt-bc-dropdown[hidden],
#adt-bc-proj[hidden],
#adt-bc-ver[hidden],
.adt-bc-dropdown--components[hidden],
.adt-bc-dropdown--version[hidden] {
  display: none !important;
}

.adt-bc-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0.2rem 0 0 0;
  min-width: 10rem;
  max-width: 20rem;
  max-height: 16rem;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 20;
  padding: 0.2rem 0;
  list-style: none;
  display: block !important;
  flex-wrap: nowrap !important;
  flex-direction: column !important;
  columns: 1 !important;
  white-space: normal;
  background: var(--adt-elevated);
  border: 1px solid var(--adt-border);
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

/* Single column, full-width rows (override bundle / spectrum flex or multi-col creep) */
.adt-bc-dropdown--components,
.adt-bc-dropdown--version,
#adt-bc-proj,
#adt-bc-ver {
  display: block !important;
  width: max-content;
  min-width: min(100%, 12rem);
  max-width: min(100vw - 1.5rem, 24rem) !important;
}

.adt-bc-dropdown--components > li,
.adt-bc-dropdown--version > li,
#adt-bc-proj > li,
#adt-bc-ver > li {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box;
}

#adt-bc-proj .adt-bc-menu-item a {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#adt-bc-ver .adt-bc-menu-item a {
  display: block !important;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark-theme .adt-bc-dropdown {
  background: var(--adt-elevated);
  border-color: var(--adt-border);
  box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.45);
}

.adt-bc-menu-item a {
  display: block;
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--adt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.dark-theme .adt-bc-menu-item a {
  color: var(--adt-ink);
}

.adt-bc-menu-item a.is-current,
.adt-bc-menu-item a.is-current:hover {
  font-weight: 600;
  background: var(--adt-accent-soft);
}

html.dark-theme .adt-bc-menu-item a.is-current {
  background: var(--adt-accent-soft);
}

.adt-bc-version-pill.is-missing {
  opacity: 0.5;
  pointer-events: none;
}

/* ——— Nav: insets = mast horizontal padding so the tree lines up with .adt-breadcrumb-home.
   The base ui-bundle’s .nav-menu still sets padding: … calc(toolbar-height/4); dark-theme or load
   order can restore that, so this rule is !important. Panel wrappers must not add a second inset. ——— */
body.adt-body .nav .nav-panel-menu {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  overflow: visible;
}

/* Search chrome: placement is .adt-navbar-search in the site navbar. */
.adt-nav-search,
.adt-tool-search {
  flex: 0 0 auto;
  position: relative;
  z-index: 6;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.15rem;
  margin: 0;
  padding: 0;
  background: transparent !important;
}

.adt-nav-search:hover,
.adt-nav-search:focus,
.adt-nav-search:focus-within,
.adt-tool-search:hover,
.adt-tool-search:focus,
.adt-tool-search:focus-within {
  background: transparent !important;
}

body.adt-body .nav nav.nav-menu.nav-tree-only,
body.adt-body .nav nav.nav-menu.adt-nav-tree-only,
nav.nav-menu.nav-tree-only,
nav.nav-menu.adt-nav-tree-only {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--adt-global-rail-hpad) 0.5rem var(--adt-global-rail-hpad) !important;
}

/* Component label is <p class="adt-nav-component-title"> — not a heading; avoids .nav-menu h3.title / .doc h3. */
.adt-nav-component-title {
  margin: 0 0 0.4rem 0;
  padding: 0.12rem 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--adt-ink);
}

/* ——— Sidebar: component root + tree; hide legacy explore ——— */

.adt-nav-component-title a {
  text-decoration: none;
  color: inherit;
}

.adt-nav-component-title a:hover {
  text-decoration: underline;
}

/* Dark nav link color (site-extra.css is overwritten by sync-valentus-theme.cjs) */
html.dark-theme .nav .adt-nav-component-title,
html.dark-theme .nav .adt-nav-component-title a {
  color: var(--adt-ink);
}

/* Page tree: smaller + lighter + muted vs. component title.
   — Reserve a caret column with margin-left (outside the label box) so highlight
     backgrounds/padding wrap the text glyphs; wrapped lines still share one
     text origin. Extra rem gap keeps the toggle clear of the label. */
nav.nav-menu.nav-tree-only .nav-item,
nav.nav-menu.adt-nav-tree-only .nav-item {
  position: relative;
}

/* Same label column for links (leaves) and .nav-text (section title without link). */
nav.nav-menu.nav-tree-only .nav-item > .nav-link,
nav.nav-menu.adt-nav-tree-only .nav-item > .nav-link,
nav.nav-menu.nav-tree-only .nav-item > .nav-text,
nav.nav-menu.adt-nav-tree-only .nav-item > .nav-text {
  display: block;
  box-sizing: border-box;
  margin: 0 0 0 calc(0.85em + 0.55rem);
  width: calc(100% - (0.85em + 0.55rem));
  max-width: calc(100% - (0.85em + 0.55rem));
  min-height: 0;
  text-indent: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0.12rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--adt-ink-muted);
}

nav.nav-menu.nav-tree-only .nav-item.is-current-page > .nav-link,
nav.nav-menu.adt-nav-tree-only .nav-item.is-current-page > .nav-link,
nav.nav-menu.nav-tree-only .nav-item.is-current-page > .nav-link .nav-text,
nav.nav-menu.adt-nav-tree-only .nav-item.is-current-page > .nav-link .nav-text {
  font-weight: 600;
  color: var(--adt-accent);
}

html.dark-theme nav.nav-menu.nav-tree-only .nav-item > .nav-link,
html.dark-theme nav.nav-menu.adt-nav-tree-only .nav-item > .nav-link,
html.dark-theme nav.nav-menu.nav-tree-only .nav-item > .nav-text,
html.dark-theme nav.nav-menu.adt-nav-tree-only .nav-item > .nav-text {
  color: var(--adt-ink-muted);
}

html.dark-theme nav.nav-menu.nav-tree-only .nav-item.is-current-page > .nav-link,
html.dark-theme nav.nav-menu.adt-nav-tree-only .nav-item.is-current-page > .nav-link,
html.dark-theme nav.nav-menu.nav-tree-only .nav-item.is-current-page > .nav-link .nav-text,
html.dark-theme nav.nav-menu.adt-nav-tree-only .nav-item.is-current-page > .nav-link .nav-text {
  color: var(--adt-accent);
  font-weight: 600;
}

.nav-panel-explore {
  display: none !important;
}

.adt-panels-solo {
  min-height: 0;
}

.nav-tree-only .nav-menu-toggle,
.adt-nav-tree-only .nav-menu-toggle {
  display: none !important;
}

/* Don’t need dimmed “inactive” state when only one panel exists */
.nav-panel-menu.is-active {
  opacity: 1 !important;
}

.nav-panel-menu.is-active::after {
  content: none !important;
  display: none !important;
}

.nav-panel-menu {
  height: 100% !important;
}

/* ——— Page shell: content fills leftover viewport; footer stays natural height ——— */
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header.adt-header {
  flex: 0 0 auto;
}

/* Outside the 3-col row: shell grows so short pages push the footer to the viewport bottom. */
.adt-shell {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* 3-col group stretches within the shell (nav/main/TOC fill down to the footer). */
.body.adt-body {
  flex: 1 1 auto;
  min-height: 0;
  /* Cross-axis centering when max-width binds (see site-visual @1024) */
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Tool band: read-width centered over the article column (not search). */
.adt-tool-band {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
  padding: var(--adt-global-rail-top) var(--adt-shell-pad, 1.75rem) var(--adt-tool-gap);
}

.adt-tool-nav-slot,
.adt-tool-search,
.adt-tool-search-slot {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 22rem;
  position: relative;
  z-index: 21;
  overflow: visible;
}

.adt-tool-band-center {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-start: auto;
}

.adt-tool-toc-slot {
  display: none;
}

@media screen and (min-width: 1024px) {
  .adt-tool-band {
    gap: var(--adt-col-gap);
    padding-inline: 0;
  }

  .adt-tool-nav-slot,
  .adt-tool-search,
  .adt-tool-search-slot {
    flex: 0 0 var(--adt-nav-width);
    width: var(--adt-nav-width);
    max-width: none;
  }

  .adt-tool-band-center {
    flex: 0 1 auto;
    width: var(--adt-doc-max);
    max-width: var(--adt-doc-max);
    min-width: 0;
    margin-inline-start: 0;
    transition: width 0.25s ease, max-width 0.25s ease;
  }

  .adt-tool-toc-slot {
    display: block;
    flex: 0 0 var(--adt-toc-width);
    width: var(--adt-toc-width);
  }
}

/* Footer is outside .adt-shell / .adt-body; natural height only (does not grow). */
footer.footer {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--adt-footer-pad-top) var(--adt-footer-pad-h) var(--adt-footer-pad-bottom);
}

footer.footer > p {
  margin: 0;
  max-width: 100%;
}