/* 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 {
  --valentus-mast-h: 2.75rem;
  --valentus-mast-total: calc(3.5rem + var(--valentus-mast-h));
  /* Left nav sticky offset tracks visible site chrome (mast hides with navbar on scroll-away). */
  --valentus-chrome-sticky-top: var(--valentus-mast-total);
  --valentus-font: "Source Sans 3", system-ui, "Segoe UI", sans-serif;
  --valentus-font-display: "Plus Jakarta Sans", var(--valentus-font);
  --valentus-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  /* Surfaces — site-visual.css may refine; keep sensible defaults if visual CSS is omitted */
  --valentus-canvas: #f3f5f8;
  --valentus-elevated: #ffffff;
  --valentus-ink: #141820;
  --valentus-ink-muted: #5a6270;
  --valentus-accent: #0f766e;
  --valentus-accent-hover: #0d9488;
  --valentus-accent-soft: rgba(15, 118, 110, 0.1);
  --valentus-border: #d9dee7;
  --soft-nav-context: var(--valentus-canvas);
  /* Opaque top-bar / mast surface (was --adt-chrome before 3.0.0; keep defined or bars go transparent). */
  --valentus-chrome: var(--valentus-canvas);
  --valentus-chrome-border: var(--valentus-border);
  /* Component + version breadcrumb kickers (same color for both) */
  --valentus-bc-kicker-fg: var(--valentus-accent);
  --valentus-bc-kicker-bg: var(--valentus-accent-soft);
  --valentus-bc-kicker-border: color-mix(in srgb, var(--valentus-accent) 28%, transparent);
  /* Shared mast control height: home chip + component/version kickers */
  --valentus-bc-ctrl-h: 1.75rem;
  /* Top bar: all controls (logo hit-area, title, theme, org GitHub) share one line height */
  --valentus-header-ctrl: 2.5rem;
  /* Light theme (default): chrome matches page canvas */
  --valentus-header-bar-bg: var(--valentus-chrome);
  --valentus-header-bar-fg: var(--valentus-ink);
  --valentus-header-bar-border: var(--valentus-chrome-border);
  --valentus-header-bar-hover: var(--valentus-accent-soft);
  /* Raster/SVG VCS marks (white in file): invert for light top bar. */
  --valentus-header-vcs-icon-filter: brightness(0) opacity(0.92);
  /* Doc-column toolbar (.valentus-doc-toolbar in main): read-width + condensed font-size.
     - --valentus-global-rail-top: shared top inset under mast for nav, TOC, and doc toolbar.
     - --valentus-tool-band: control row height token (read-width / font-size).
     - --valentus-tool-gap: space under the toolbar before the page title.
     Side columns no longer reserve phantom width for a full-shell tool band.
     Site-wide search lives in .valentus-site-navbar (own width, not column measure). */
  --valentus-global-rail-top: 0.85rem;
  --valentus-content-rail-top: 0;
  --valentus-tool-band: 2.15rem;
  --valentus-tool-gap: 0.65rem;
  /* Antora Default UI article inset (`.doc { padding: 0 1rem 4rem }`); toolbar is a `.content` sibling. */
  --valentus-doc-pad-inline: 1rem;
  --valentus-doc-pad-bottom: 4rem;
  --valentus-col-rail-top: var(--valentus-global-rail-top);
  --valentus-toc-rail-top: var(--valentus-col-rail-top);
  /* Horizontal rail: mast + left nav share an inset so home / component title line up. */
  --valentus-mast-pad-h: 1.25rem;
  --valentus-global-rail-hpad: var(--valentus-mast-pad-h);
  /* Centered page shell + reading measure (site-visual applies the layout rules).
     --valentus-shell-max is a soft fallback; site-visual derives it from nav + gaps + doc + toc.
     Nav and TOC share --valentus-side-width so the article sits optically centered. */
  --valentus-shell-pad: 1.75rem;
  --valentus-side-width: 16rem;
  --valentus-nav-width: var(--valentus-side-width);
  --valentus-col-gap: 2rem;
  --valentus-toc-width: var(--valentus-side-width);
  --valentus-doc-max: 82ch;
  --valentus-shell-max: calc(
    var(--valentus-nav-width) + var(--valentus-col-gap) + var(--valentus-doc-max) + var(--valentus-col-gap) + var(--valentus-toc-width) +
      2 * var(--valentus-shell-pad)
  );
  --valentus-footer-pad-top: 1.5rem;
  --valentus-footer-pad-h: 1.5rem;
  --valentus-footer-pad-bottom: 1.5rem;
}

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

html {
  font-family: var(--valentus-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(--valentus-font) !important;
}

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

/* ——— Top bar: light strip in “light” theme, dark strip in dark theme ——— */
.header.valentus-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 30;
  color: var(--valentus-header-bar-fg);
  box-sizing: border-box;
  background: transparent;
  overflow: visible;
  transition: transform 0.22s ease;
  will-change: transform;
}

/* Scroll down: chrome leaves the viewport; scroll up (or near top): reveal without scrolling to 0. */
html.valentus-chrome-scroll-away .header.valentus-header {
  transform: translateY(-100%);
  pointer-events: none;
}

html.valentus-chrome-scroll-away {
  --valentus-chrome-sticky-top: 0px;
}

/* Navbar row: opaque fill (sticky stack lives on .header.valentus-header).
   z-index must beat .valentus-doc-mast (z-index: 2): the navbar owns the search
   omnibox, whose scope menu / results / Ask panel drop down over the mast.
   At z-index: 1 those menus were trapped under the mast stacking context. */
.valentus-site-navbar {
  position: relative;
  top: auto;
  z-index: 20;
  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(--valentus-header-bar-bg) !important;
  color: inherit;
  border-bottom: 1px solid var(--valentus-header-bar-border);
}

/* Brand may shrink; title ellipsizes so search/actions never overlap it. */
.valentus-site-navbar .valentus-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. */
.valentus-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;
}

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

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

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

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

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

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

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

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

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

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

.valentus-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. */
.valentus-header-logo--for-dark {
  display: none;
}

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

html.dark-theme .valentus-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 .valentus-header-logo--mono {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

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

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

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

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

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

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

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

a.valentus-header-title,
.navbar-item.valentus-header-title {
  color: var(--valentus-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(--valentus-header-ctrl);
  min-height: var(--valentus-header-ctrl);
  line-height: var(--valentus-header-ctrl);
  display: block;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Header end controls (GitHub, theme) — one shape; beats site-extra .theme-toggle:hover colors. */
.header.valentus-header .navbar .navbar-end .valentus-header-icon-btn {
  min-width: var(--valentus-header-ctrl) !important;
  min-height: var(--valentus-header-ctrl) !important;
  width: var(--valentus-header-ctrl) !important;
  height: var(--valentus-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(--valentus-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.valentus-header .navbar .navbar-end .valentus-header-icon-btn:hover {
  background: var(--valentus-header-bar-hover) !important;
  text-decoration: none;
}

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

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

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

.header.valentus-header .valentus-header-icon-btn .theme-icon,
.header.valentus-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.valentus-header .valentus-header-icon-btn .theme-icon path,
.header.valentus-header .valentus-header-icon-btn .theme-icon circle,
.header.valentus-header .navbar .navbar-end .theme-toggle .theme-icon path,
.header.valentus-header .navbar .navbar-end .theme-toggle .theme-icon circle {
  fill: none;
}

/* Theme toggle matches other header icon buttons (JS adds valentus-header-icon-btn; button.theme-toggle covers stale bundle JS). */
.header.valentus-header .navbar .navbar-end .theme-toggle.valentus-header-icon-btn,
.header.valentus-header .navbar .navbar-end button.theme-toggle {
  min-width: var(--valentus-header-ctrl) !important;
  min-height: var(--valentus-header-ctrl) !important;
  width: var(--valentus-header-ctrl) !important;
  height: var(--valentus-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(--valentus-header-bar-fg) !important;
  background: transparent !important;
  cursor: pointer;
}

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

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

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

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

/* ——— Doc mast: component, version, breadcrumb trail, edit — not in the content column ——— */
.valentus-doc-mast {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--valentus-mast-h);
  padding: 0.35rem var(--valentus-mast-pad-h) 0.35rem var(--valentus-mast-pad-h);
  position: relative;
  top: auto;
  /* Dropdowns must beat .valentus-tool-band (20–21) when the band is present. */
  z-index: 2;
  background: var(--valentus-chrome);
  border-bottom: 1px solid var(--valentus-chrome-border);
  box-sizing: border-box;
}

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

/*
 * Self-contained toggle icon: inline SVG in currentColor, not the Default UI
 * background-image (menu.svg/back.svg carry a hardcoded #222 and only render
 * when that bundle asset + load order cooperate; dark mode previously needed
 * a mask hack on the button itself). Neutralize the bundle + mask rules so
 * the glyph is visible in both themes and both toggle states.
 */
.valentus-doc-mast .nav-toggle {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: none !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  color: var(--valentus-ink);
  cursor: pointer;
}

.valentus-doc-mast .nav-toggle .valentus-nav-toggle-icon--back {
  display: none;
}

.valentus-doc-mast .nav-toggle.is-active .valentus-nav-toggle-icon--menu {
  display: none;
}

.valentus-doc-mast .nav-toggle.is-active .valentus-nav-toggle-icon--back {
  display: block;
}

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

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

/* Left nav: viewport-tall sticky column (tree scrolls; switcher stays at visible bottom).
   Do not stretch the nav column to document height — that breaks mast/navbar sticky context
   and leaves the read-width tool band visually pinned while chrome scrolls away. */
@media screen and (min-width: 1024px) {
  .body.valentus-body {
    align-items: flex-start;
  }

  /* Sticky lives on .nav-container (a flex item of .body), NOT on .nav. The container is
     align-self:flex-start, so its box is only as tall as its content; a sticky child inside it
     has no scroll travel and the rail scrolls away with the page. Making the container itself
     sticky lets it ride the full height of .body. .nav is a plain flex column inside it. */
  .nav-container {
    display: flex !important;
    flex-direction: column !important;
    align-self: flex-start !important;
    position: sticky !important;
    top: var(--valentus-chrome-sticky-top) !important;
    height: calc(100vh - var(--valentus-chrome-sticky-top)) !important;
    max-height: calc(100vh - var(--valentus-chrome-sticky-top)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-top: var(--valentus-col-rail-top);
    box-sizing: border-box;
  }

  @supports (height: 100dvh) {
    .nav-container {
      height: calc(100dvh - var(--valentus-chrome-sticky-top)) !important;
      max-height: calc(100dvh - var(--valentus-chrome-sticky-top)) !important;
    }
  }

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

  .nav .panels {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  .nav-panel-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .nav-panel-explore {
    position: static !important;
    flex: 0 0 auto !important;
    width: 100% !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(--valentus-mast-total) !important;
  }

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

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

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

/* Share horizontal inset with `.valentus-doc-toolbar` (sibling, not inside `article.doc`). */
main.valentus-article > .content > article.doc {
  padding-inline: var(--valentus-doc-pad-inline);
  padding-bottom: var(--valentus-doc-pad-bottom);
}

/* ——— Content rail: TOC h3 (Antora’s fake height/flex) ——— */
.body.valentus-body > aside.toc.sidebar .toc-menu h3,
.valentus-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 .valentus-page-header,
.valentus-article .valentus-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 .valentus-page-header h1.page.valentus-page-title,
.valentus-article .valentus-page-header h1.page.valentus-page-title {
  margin: 0;
  padding: 0;
}

.doc .valentus-page-title,
.valentus-article .valentus-page-title {
  flex: 1 1 auto;
  min-width: 0;
  /* Raised line-height + bottom padding fit display-font descenders inside overflow:hidden.
     Do not split overflow axes — overflow-y:visible with overflow-x:hidden computes to auto
     and introduces a vertical scrollbar on the title mast. */
  line-height: 1.35;
  padding-bottom: 0.1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* ——— 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(--valentus-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(--valentus-accent, #0d6e6e) !important;
}

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

.valentus-breadcrumbs > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Row gap only when wrapping. Separators are real "/" text nodes (copyable). */
  row-gap: 0.25rem;
  column-gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

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

/* Kill Default UI / legacy pseudo separators — real path chars live in the DOM. */
.valentus-breadcrumbs > ul > li::after,
.breadcrumbs.valentus-breadcrumbs > ul > li::after {
  content: none !important;
  padding: 0 !important;
}

.valentus-breadcrumb-sep {
  flex: 0 0 auto;
  padding: 0 0.45rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--valentus-ink-muted, inherit);
  pointer-events: none;
  user-select: text;
}

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

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

/* Trail: accent + underline for visitable links and current page; plain folder labels stay un-underlined. */
.valentus-breadcrumb-trail .valentus-breadcrumb-trail-link,
.valentus-breadcrumb-trail--current .valentus-breadcrumb-trail-link,
.valentus-breadcrumb-trail--current .valentus-breadcrumb-trail-text {
  color: var(--valentus-accent);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.valentus-breadcrumb-trail:not(.valentus-breadcrumb-trail--current) .valentus-breadcrumb-trail-text {
  color: var(--valentus-accent);
  font-weight: 400;
  text-decoration: none;
}

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

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

/* Zoned article contract (`article.hbs`: header / meta / body / footer). */
.doc[data-zone-root] .doc-zone--meta:empty {
  display: none;
}

.doc[data-zone-root] .doc-zone--header .page-context-source-line {
  margin-top: 0.35rem;
}

/* Source line: “Source:” + VCS mark + View | Edit (from @antora-supplemental/page-edit) sits directly under the page title,
   above the page-context lead (byline + metadata table). Same position on every page; never a table row.
   Wraps onto its own line on narrow screens. */
.page-context-source-line,
.doc .page-context-source-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.82em;
  line-height: 1.35;
  color: var(--valentus-ink-muted, #6b7380);
}

/* “View | Edit” in page-context lead table (from @antora-supplemental/page-edit); breadcrumb stub is empty. */
.page-context-source-actions,
.doc .page-context-source-actions,
.page-context-actions,
.doc .page-context-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.page-context-lead > .page-context-actions,
.doc .page-context-lead > .page-context-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0.35rem 0.9rem 0.25rem;
}

.page-context-source-sep,
.doc .page-context-source-sep {
  opacity: 0.55;
  user-select: none;
}

.page-context-source-actions .valentus-view-inline-link,
.page-context-source-actions .valentus-edit-inline-link,
.doc .page-context-source-actions .valentus-view-inline-link,
.doc .page-context-source-actions .valentus-edit-inline-link,
.page-context-actions .valentus-edit-inline-link,
.doc .page-context-actions .valentus-edit-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.15rem;
  border-radius: 0.2rem;
  font-size: 0.95em;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.page-context-source-actions .valentus-view-inline-link:hover,
.page-context-source-actions .valentus-edit-inline-link:hover,
.doc .page-context-source-actions .valentus-view-inline-link:hover,
.doc .page-context-source-actions .valentus-edit-inline-link:hover,
.page-context-actions .valentus-edit-inline-link:hover,
.doc .page-context-actions .valentus-edit-inline-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.1em;
}

.page-context-source-key,
.doc .page-context-source-key {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.page-context-source-key .valentus-edit-vcs-svg,
.doc .page-context-source-key .valentus-edit-vcs-svg,
.page-context-actions .valentus-edit-vcs-svg,
.doc .page-context-actions .valentus-edit-vcs-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--valentus-ink-muted, currentColor);
  opacity: 0.75;
}

html.dark-theme .page-context-source-key .valentus-edit-vcs-svg,
html.dark-theme .doc .page-context-source-key .valentus-edit-vcs-svg,
html.dark-theme .page-context-actions .valentus-edit-vcs-svg,
html.dark-theme .doc .page-context-actions .valentus-edit-vcs-svg {
  opacity: 0.9;
}

/* Legacy: icon used to live on Edit; keep selectors harmless if old HTML remains */
.page-context-source-actions .valentus-edit-vcs-svg,
.doc .page-context-source-actions .valentus-edit-vcs-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--valentus-ink-muted, currentColor);
  opacity: 0.75;
}

/* Legacy breadcrumb edit selectors kept for hubs that still emit that markup */
.valentus-breadcrumb-edit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 0.1rem;
  list-style: none;
}

.valentus-breadcrumb-edit .valentus-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(--valentus-accent);
  text-decoration: none;
  white-space: nowrap;
}

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

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

.valentus-breadcrumb-edit .valentus-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 .valentus-breadcrumb-edit .valentus-edit-vcs-img {
  filter: none;
  opacity: 0.95;
}

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

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

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

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

/* Beat Default UI `.breadcrumbs li { margin: 0 }` (0,1,1) — that zeroed the home→component gap. */
.valentus-breadcrumbs > ul > li.valentus-breadcrumb-home {
  flex: 0 0 auto;
  list-style: none;
  margin-inline-end: 0.45rem;
}

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

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

.valentus-breadcrumb-home-link:focus {
  outline: none;
}

.valentus-breadcrumb-home-link:focus-visible {
  outline: 2px solid var(--valentus-accent);
  outline-offset: 2px;
}

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

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

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

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

.valentus-bc-cluster-gap {
  flex: 0 0 auto;
  white-space: pre;
}

/* Component + version read as one mast segment (version sits tight to the right). */
.valentus-bc-cluster {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem;
  min-width: 0;
  max-width: 100%;
}

/* Empty masthead (no kickers) must not leave `/  /` separators in the trail. */
.valentus-breadcrumbs > ul > li.valentus-breadcrumb-masthead:not(:has(.valentus-bc-menu, .valentus-bc-version-plain)) {
  display: none;
}

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

.valentus-bc-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  gap: 0.28rem;
  max-width: 12rem;
  height: var(--valentus-bc-ctrl-h);
  min-height: var(--valentus-bc-ctrl-h);
  margin: 0;
  padding: 0 0.4rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  color: var(--valentus-accent);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.2rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  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. */
.valentus-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;
}

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

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

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

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

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

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

/* Block + nowrap: text-overflow does not paint "…" on a flex container (2.0.32
   used inline-flex for vertical centering; the parent kicker already flex-centers). */
.valentus-bc-kicker-label,
.valentus-bc-kicker-version {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

/* Version kicker is secondary to the component name — same box height, compact mono type. */
.valentus-bc-kicker--version {
  max-width: 5.5rem;
  height: var(--valentus-bc-ctrl-h);
  min-height: var(--valentus-bc-ctrl-h);
  padding: 0 0.35rem;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.valentus-bc-version-plain {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--valentus-bc-ctrl-h);
  min-height: var(--valentus-bc-ctrl-h);
  padding: 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1;
  color: var(--valentus-accent);
  text-decoration: none;
  white-space: nowrap;
}

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

.valentus-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(--valentus-elevated);
  border: 1px solid var(--valentus-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) */
.valentus-bc-dropdown--components,
.valentus-bc-dropdown--version,
#valentus-bc-proj,
#valentus-bc-ver {
  display: block !important;
  width: max-content;
  min-width: min(100%, 12rem);
  max-width: min(100vw - 1.5rem, 24rem) !important;
}

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

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

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

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

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

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

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

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

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

/* ——— Nav: insets = mast horizontal padding so the tree lines up with .valentus-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.valentus-body .nav .nav-panel-menu {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Clip horizontal growth; tree scrollport is nav.nav-menu (overflow-x:auto). */
  overflow-x: hidden;
  overflow-y: visible;
}

/* Search chrome: placement is .valentus-navbar-search in the site navbar. */
.valentus-nav-search,
.valentus-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;
}

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

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

/* Antora Default UI sets .nav-list { margin-left: .75rem } for nesting.
   Top-level list under the menu already has rail padding — drop the extra inset.
   Nested .nav-list margins stay for tree indentation. */
nav.nav-menu.nav-tree-only > .nav-list,
nav.nav-menu.valentus-nav-tree-only > .nav-list {
  margin-left: 0;
}

/* Component label is <p class="valentus-nav-component-title"> — not a heading; avoids .nav-menu h3.title / .doc h3. */
.valentus-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(--valentus-ink);
}

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

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

.valentus-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 .valentus-nav-component-title,
html.dark-theme .nav .valentus-nav-component-title a {
  color: var(--valentus-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.valentus-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.valentus-nav-tree-only .nav-item > .nav-link,
nav.nav-menu.nav-tree-only .nav-item > .nav-text,
nav.nav-menu.valentus-nav-tree-only .nav-item > .nav-text {
  display: block;
  box-sizing: border-box;
  margin: 0 0 0 calc(0.85em + 0.55rem);
  width: max-content;
  min-width: calc(100% - (0.85em + 0.55rem));
  max-width: none;
  min-height: 0;
  text-indent: 0;
  overflow: visible;
  padding: 0.12rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--valentus-ink-muted);
}

nav.nav-menu.nav-tree-only .nav-item.is-current-page > .nav-link,
nav.nav-menu.valentus-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.valentus-nav-tree-only .nav-item.is-current-page > .nav-link .nav-text {
  font-weight: 600;
  color: var(--valentus-accent);
}

html.dark-theme nav.nav-menu.nav-tree-only .nav-item > .nav-link,
html.dark-theme nav.nav-menu.valentus-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.valentus-nav-tree-only .nav-item > .nav-text {
  color: var(--valentus-ink-muted);
}

html.dark-theme nav.nav-menu.nav-tree-only .nav-item.is-current-page > .nav-link,
html.dark-theme nav.nav-menu.valentus-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.valentus-nav-tree-only .nav-item.is-current-page > .nav-link .nav-text {
  color: var(--valentus-accent);
  font-weight: 600;
}

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

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

.nav-tree-only .nav-menu-toggle,
.valentus-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.valentus-header {
  flex: 0 0 auto;
  overflow: visible;
}

/* Outside the 3-col row: shell grows so short pages push the footer to the viewport bottom. */
.valentus-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.valentus-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;
}

/* Doc-column toolbar: read-width (desktop) + font-size (condensed). */
.valentus-doc-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  /* Align with the start of the article column (doc title / prose). */
  justify-content: flex-start;
  gap: 0.5rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: var(--valentus-tool-band, 2.15rem);
  padding-top: var(--valentus-global-rail-top);
  padding-inline: var(--valentus-doc-pad-inline);
  padding-bottom: var(--valentus-tool-gap);
}

/* Legacy shell tool band (removed from body.hbs in 2.1.0) — hide if a hub still renders it. */
.valentus-shell > .valentus-tool-band {
  display: none !important;
}

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

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