:root {
  --unit-bg: #f4f4f4;
  --unit-bg-dark: #222021;
  --unit-text: #222021;
  --unit-text-light: #f4f4f4;
  --unit-primary: #ffd541;
  --unit-active-light: #1d4ed8;
  --unit-danger: #d92d20;
  --unit-border-soft: rgba(34, 32, 33, 0.28);
  --unit-border-light-soft: rgba(244, 244, 244, 0.22);
  --unit-header-height: 62px;
  --unit-nav-row-height: 2.4rem;
  --unit-nav-indent: 1.2rem;
  --unit-sidebar-width: 12.1rem;
  --md-text-font: "Figtree";
  --md-code-font: "Roboto Mono";
  --md-primary-fg-color: var(--unit-bg);
  --md-primary-bg-color: var(--unit-text);
  --md-accent-fg-color: var(--unit-primary);
  --md-typeset-a-color: var(--unit-text);
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--unit-bg);
  --md-default-fg-color: var(--unit-text);
  --md-default-fg-color--light: rgba(34, 32, 33, 0.7);
  --md-default-fg-color--lighter: rgba(34, 32, 33, 0.45);
  --md-default-fg-color--lightest: rgba(34, 32, 33, 0.18);
  --md-code-bg-color: rgba(34, 32, 33, 0.06);
  --md-code-fg-color: var(--unit-text);
  --md-footer-bg-color: var(--unit-bg-dark);
  --md-footer-bg-color--dark: #171616;
  --unit-nav-border: var(--unit-border-soft);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--unit-bg-dark);
  --md-default-fg-color: var(--unit-text-light);
  --md-default-fg-color--light: rgba(244, 244, 244, 0.72);
  --md-default-fg-color--lighter: rgba(244, 244, 244, 0.5);
  --md-default-fg-color--lightest: rgba(244, 244, 244, 0.2);
  --md-code-bg-color: rgba(244, 244, 244, 0.08);
  --md-code-fg-color: var(--unit-text-light);
  --md-typeset-a-color: var(--unit-primary);
  --unit-nav-border: var(--unit-border-light-soft);
}

html { scroll-padding-top: 72px; }

body {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-family: "Figtree", sans-serif;
}

[hidden] { display: none !important; }

/* Disabled by sidebar-brand.js for the first paint of every page so the
   sidebar appears in its restored state without animating in. */
.unit-no-transition .md-sidebar--primary,
.unit-no-transition .md-header__inner,
.unit-no-transition .md-main__inner,
.unit-no-transition .md-overlay {
  transition: none !important;
}

.md-grid { max-width: 82rem; }

/* ============================================================
   HEADER
   Order: [Hamburger] [Theme toggle] [Search bar] ... right
   ============================================================ */

.md-header,
[data-md-color-primary="black"] .md-header,
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="slate"] .md-header {
  background: var(--unit-bg-dark);
  background-color: var(--unit-bg-dark);
  border-bottom: 1px solid var(--unit-border-light-soft);
  box-shadow: 0 1px 0 rgba(244, 244, 244, 0.06);
  color: var(--unit-text-light);
  height: var(--unit-header-height);
  min-height: var(--unit-header-height);
}

.md-header__inner {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  height: var(--unit-header-height);
  max-width: none;
  min-height: var(--unit-header-height);
  overflow: visible;
  padding: 0 0.8rem 0 1rem;
}

.md-header__button {
  align-items: center;
  border-radius: 0;
  color: currentcolor;
  justify-content: center;
  margin: 0;
}

.md-header__button:not([hidden]) { display: inline-flex; }

.md-header__button:hover {
  color: var(--unit-primary);
  opacity: 1;
}

/* Hide the redundant logo and the search-toggle button */
.md-header__button.md-logo,
.md-header__button[for="__search"] {
  display: none !important;
}

/* Hide the duplicate title block (brand lives in the sidebar) */
.md-header__title {
  display: none !important;
}

/* Hamburger sits at the far left, always visible, white icon */
.md-header__button[for="__drawer"] {
  color: var(--unit-text-light);
  display: inline-flex !important;
  margin-right: 0.2rem;
  order: -3;
  padding: 0;
  width: 2.4rem;
}

.md-header__button[for="__drawer"] svg {
  fill: currentcolor;
  height: 1.2rem;
  width: 1.2rem;
}

/* Theme palette sits to the left of the search bar, on the right side */
.md-header__option[data-md-component="palette"] {
  margin-left: auto;
  order: 1;
}

/* Search bar: docked at the right side; one icon inside it.
   Grows on focus to give room for typing + results, shrinks back on blur. */
.md-header .md-search {
  display: block !important;
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
  order: 2;
  padding: 0;
  position: relative;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: clamp(9rem, 22vw, 14rem);
}

.md-header .md-search:focus-within {
  width: clamp(14rem, 60vw, 28rem);
}

.md-search__overlay {
  display: none !important;
}

.md-header .md-search__inner {
  float: none !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  z-index: 1;
}

.md-search__form {
  background: transparent !important;
  border: 1px solid currentcolor;
  border-radius: 16px;
  color: currentcolor;
  height: 2rem !important;
}

.md-search__form:hover,
.md-search__form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 213, 65, 0.36);
}

.md-search__input {
  background: transparent;
  color: currentcolor;
  font-size: 0.7rem;
  height: 100%;
  padding: 0 0.6rem 0 1.8rem;
  width: 100%;
}

.md-search__input::placeholder { color: currentcolor; opacity: 0.7; }

/* Keep only the magnifier icon inside the search form, vertically centred */
.md-search__form > .md-search__icon[for="__search"] {
  align-items: center;
  color: currentcolor;
  display: inline-flex;
  height: 1rem;
  justify-content: center;
  left: 0.6rem;
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
}

.md-search__form > .md-search__icon[for="__search"] svg {
  display: block;
  height: 0.9rem;
  width: 0.9rem;
}

.md-search__form > .md-search__icon[for="__search"] svg:nth-of-type(2) {
  display: none;
}

.md-search__output {
  background: var(--md-default-bg-color);
  border: 1px solid var(--unit-border-light-soft);
  border-radius: 0;
  bottom: auto !important;
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.45);
  color: var(--md-default-fg-color);
  margin-top: 0.25rem;
  max-height: calc(100vh - var(--unit-header-height) - 1rem);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem) !important;
  transition: opacity 0.2s;
  visibility: hidden;
  width: 100%;
  z-index: 100;
}

/* Show the dropdown only while the search element has focus inside it.
   :focus-within stays true while focus is on the input or any result item,
   and clears as soon as focus moves elsewhere; so clicking away closes it. */
.md-header .md-search:focus-within .md-search__output {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.md-search__output .md-search__scrollwrap {
  max-height: calc(100vh - var(--unit-header-height) - 2rem);
  overflow-y: auto;
}

/* Keep palette toggle visible even while search is open
   (Material collapses .md-header__option to max-width:0 / opacity:0) */
[data-md-toggle="search"]:checked ~ .md-header .md-header__option[data-md-component="palette"],
.md-header__option[data-md-component="palette"] {
  max-width: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  visibility: visible !important;
}

/* Likewise keep the hamburger usable while search is open */
[data-md-toggle="search"]:checked ~ .md-header .md-header__button[for="__drawer"] {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.md-main {
  background-color: var(--md-default-bg-color);
  background-image:
    linear-gradient(rgba(34, 32, 33, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 32, 33, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
}

[data-md-color-scheme="slate"] .md-main {
  background-image:
    linear-gradient(rgba(244, 244, 244, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 244, 244, 0.055) 1px, transparent 1px);
}

.md-main__inner { margin-top: 1.5rem; }
.md-content__inner { padding-top: 1.1rem; }

.md-typeset {
  color: var(--md-default-fg-color);
  font-size: 0.85rem;
  line-height: 1.55;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--md-default-fg-color);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

.md-typeset h1 {
  font-size: 2.6rem;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}

.md-typeset h2 {
  border-top: 1px solid var(--unit-active-light);
  font-size: 1.55rem;
  line-height: 1.12;
  margin-top: 2.4rem;
  padding-top: 1rem;
}

[data-md-color-scheme="slate"] .md-typeset h2 { border-top-color: var(--unit-primary); }

.unit-principle-number { color: var(--unit-active-light); }
[data-md-color-scheme="default"] .unit-logo-slash { color: var(--unit-active-light); }
.unit-logo-slash { color: var(--unit-primary); }
[data-md-color-scheme="slate"] .unit-principle-number { color: var(--unit-primary); }
[data-md-color-scheme="slate"] .unit-logo-slash { color: var(--unit-primary); }

.md-typeset a {
  color: inherit;
  text-decoration-color: var(--unit-primary);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

.md-typeset a:hover {
  background: var(--unit-primary);
  color: var(--unit-text);
  text-decoration: none;
}

[data-md-color-scheme="default"] .md-typeset a:hover,
[data-md-color-scheme="default"] .md-typeset .md-button:hover,
[data-md-color-scheme="default"] .md-typeset .md-button:focus,
[data-md-color-scheme="default"] .md-typeset .md-button--primary,
[data-md-color-scheme="default"] .md-typeset .unit-page-button:hover,
[data-md-color-scheme="default"] .md-typeset .unit-page-button:focus {
  background: var(--unit-active-light);
  border-color: var(--unit-active-light);
  color: var(--unit-text-light);
}

[data-md-color-scheme="slate"] .md-typeset a:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:focus,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary,
[data-md-color-scheme="slate"] .md-typeset .unit-page-button:hover,
[data-md-color-scheme="slate"] .md-typeset .unit-page-button:focus {
  color: var(--unit-text);
}

.md-typeset table:not([class]) {
  border: 1px solid var(--unit-border-soft);
  border-radius: 0;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--unit-bg-dark);
  color: var(--unit-text-light);
  font-weight: 600;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th { border-color: var(--unit-border-soft); }

.md-typeset code,
.md-typeset pre { border-radius: 0; }

.md-typeset .admonition,
.md-typeset details {
  background: transparent;
  border: 1px solid var(--unit-border-soft);
  border-radius: 0;
  box-shadow: none;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: var(--unit-primary);
  color: var(--unit-text);
  font-family: "Figtree", sans-serif;
  font-weight: 600;
}

.unit-outcome-constraints {
  background: transparent;
  border: 1px solid var(--unit-danger);
  color: var(--md-default-fg-color);
  margin: 1rem 0 0;
  padding: 1rem;
}

.unit-outcome-constraints p:first-child { margin-top: 0; }

.unit-outcome-constraints p strong {
  color: var(--unit-danger);
  font-family: "Figtree", sans-serif;
  font-weight: 700;
}

.unit-outcome-constraints ul { margin-bottom: 0; }

.unit-coming-soon {
  background: var(--unit-primary);
  border: 1px solid var(--unit-primary);
  color: var(--unit-text);
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
}

.unit-page-actions {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin: 1.2rem 0 0;
}

.md-typeset .unit-page-button {
  align-items: center;
  border: 1px solid currentcolor;
  color: var(--md-default-fg-color);
  display: inline-flex;
  font-family: "Chakra Petch", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  width: 100%;
}

.md-typeset .unit-page-button:hover,
.md-typeset .unit-page-button:focus {
  background: var(--unit-primary);
  border-color: var(--unit-primary);
  color: var(--unit-text);
  text-decoration: none;
}

.unit-workflow-split {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(12rem, 30%) minmax(0, 70%);
  margin: 2rem 0;
}

.unit-workflow-split__aside,
.unit-workflow-split__chart {
  border: 1px solid var(--unit-border-soft);
  padding: 1rem;
}

.unit-workflow-split__aside {
  background: transparent;
  border-color: var(--unit-primary);
  color: var(--md-default-fg-color);
}

.unit-workflow-split__aside h2 { margin-top: 0; }

.unit-workflow-split__hint {
  align-items: center;
  border-top: 1px solid var(--unit-primary);
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 1rem;
}

.unit-workflow-split__hint::after {
  color: var(--unit-primary);
  content: "->";
  flex-shrink: 0;
  font-family: "Chakra Petch", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.unit-workflow-split__chart .highlight,
.unit-workflow-split__chart .mermaid { width: 100%; }

.md-footer { border-top: 1px solid var(--unit-border-light-soft); }

.md-footer-meta {
  background: #171616;
  display: none;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.md-sidebar--primary,
.md-sidebar--secondary { color: var(--md-default-fg-color); }

/* Force-pin the sidebar to the viewport's top-left corner regardless of
   what Material's per-breakpoint rules try. Specifically Material applies:
     - left: -12.1rem (at ≤1220px); would push sidebar offscreen left
     - transform: translateX(12.1rem) on the open state; would push it back to 0
   The combination of those plus our own `left: 0` ends up landing the sidebar
   at +12.1rem (visible gap on the left). Using `inset` + `!important` here
   means we own the pinning at every viewport width. */
.md-sidebar--primary,
[dir="ltr"] .md-sidebar--primary,
[dir="rtl"] .md-sidebar--primary {
  background: var(--md-default-bg-color);
  border-right: 1px solid var(--unit-border-light-soft);
  height: 100vh !important;
  inset: 0 auto 0 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  width: var(--unit-sidebar-width) !important;
  z-index: 5;
}

[dir="rtl"] .md-sidebar--primary {
  inset: 0 0 0 auto !important;
}

/* Pin the scrollwrap to fill the full sidebar height. Using both inset and
   an explicit height prevents the residual 62px gap that appears on wide
   viewports (Material's own absolute rule only fires below 1220px). */
.md-sidebar--primary .md-sidebar__scrollwrap {
  background: var(--md-default-bg-color);
  bottom: 0 !important;
  height: 100vh !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: 100vh !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute !important;
  right: 0 !important;
  scrollbar-width: thin;
  top: 0 !important;
  width: auto !important;
}

.md-sidebar--primary .md-sidebar__inner {
  min-height: 100%;
  padding: 0;
}

/* ============================================================
   SIDEBAR NAV; single set of universal rules
   Every link, at every depth, has the same height/border/padding.
   Hover only changes color, never size.
   ============================================================ */

.md-nav { font-size: 0.76rem; }

/* Material's default [dir=ltr] .md-nav--primary .md-nav__list adds
   padding-left at each nesting level, which compounds and shrinks deeper
   items. Force every container to span the full sidebar width; visual
   indentation comes from the .md-nav__link's own padding-left below. */
.md-sidebar--primary .md-nav,
.md-sidebar--primary .md-nav__list,
.md-sidebar--primary .md-nav__item,
[dir="ltr"] .md-sidebar--primary .md-nav,
[dir="ltr"] .md-sidebar--primary .md-nav__list,
[dir="ltr"] .md-sidebar--primary .md-nav__item,
[dir="rtl"] .md-sidebar--primary .md-nav,
[dir="rtl"] .md-sidebar--primary .md-nav__list,
[dir="rtl"] .md-sidebar--primary .md-nav__item {
  background: transparent;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.md-sidebar--primary .md-nav__list { display: block; }
.md-sidebar--primary .md-nav__item { border: 0; }

/* Drawer brand at the top */
.md-sidebar--primary .md-nav__title {
  background: var(--unit-bg-dark);
  color: var(--unit-text-light);
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
}

.md-sidebar--primary .md-nav__title[for="__drawer"] {
  align-items: center;
  background: var(--unit-bg-dark);
  border-bottom: 1px solid var(--unit-border-light-soft);
  box-shadow: 0 1px 0 rgba(244, 244, 244, 0.06);
  box-sizing: border-box;
  color: var(--unit-text-light);
  cursor: pointer;
  display: flex;
  font-family: "Chakra Petch", sans-serif;
  font-size: 0;
  font-weight: 700;
  gap: 0;
  height: var(--unit-header-height);
  line-height: 1;
  margin: 0;
  min-height: var(--unit-header-height);
  padding: 0 0.8rem 0 var(--unit-nav-indent);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 2;
}

.md-sidebar--primary .md-nav__title[for="__drawer"] .md-logo { display: none; }

.md-sidebar--primary .md-nav__title[for="__drawer"]::before {
  color: var(--unit-primary);
  content: "/";
  font-size: 1.05rem;
  line-height: 1;
}

.md-sidebar--primary .md-nav__title[for="__drawer"]::after {
  color: var(--unit-text-light);
  content: "unitt.wiki";
  font-size: 1.05rem;
  line-height: 1;
}

/* Hide nested-nav titles (Material clones the parent's label into its child nav) */
.md-sidebar--primary .md-nav .md-nav .md-nav__title { display: none !important; }

/* Hide the TOC inside the primary sidebar (it appears in the secondary one) */
.md-sidebar--primary .md-nav--secondary,
.md-sidebar--primary .md-nav__link[for="__toc"] { display: none !important; }

/* === THE ONE LINK RULE === */
.md-sidebar--primary .md-nav__link,
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav__link:focus,
.md-sidebar--primary .md-nav__link--active {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--unit-nav-border);
  box-sizing: border-box;
  color: var(--md-default-fg-color);
  display: flex;
  font-family: "Figtree", sans-serif;
  font-weight: 400;
  gap: 0.4rem;
  height: var(--unit-nav-row-height);
  line-height: 1.2;
  margin: 0;
  min-height: var(--unit-nav-row-height);
  padding: 0 0.8rem 0 var(--unit-nav-indent);
  scroll-snap-align: start;
  text-decoration: none;
  transition: background-color 120ms, color 120ms;
  width: 100%;
}

/* Nested depth indentation; pure left padding, no height change */
.md-sidebar--primary .md-nav .md-nav .md-nav__link { padding-left: calc(var(--unit-nav-indent) + 0.55rem); }
.md-sidebar--primary .md-nav .md-nav .md-nav .md-nav__link { padding-left: calc(var(--unit-nav-indent) + 1.1rem); }
.md-sidebar--primary .md-nav .md-nav .md-nav .md-nav .md-nav__link { padding-left: calc(var(--unit-nav-indent) + 1.65rem); }

/* Nested-section parents are labels rather than anchors; same rule applies. */
.md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
}

/* Active link; yellow text in dark mode, blue in light mode */
.md-sidebar--primary .md-nav__link--active,
.md-sidebar--primary .md-nav__item--active > .md-nav__link {
  color: var(--unit-active-light);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link--active,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--active > .md-nav__link {
  color: var(--unit-primary);
}

/* Secondary sidebar TOC scroll-spy state.
   Dark mode keeps the site yellow accent; light mode switches to the sidebar
   active blue so the TOC scroll-spy highlight matches the primary nav. */
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__item--active > .md-nav__link {
  color: var(--unit-primary);
  font-weight: 600;
}

[data-md-color-scheme="default"] .md-sidebar--secondary .md-nav__link--active,
[data-md-color-scheme="default"] .md-sidebar--secondary .md-nav__item--active > .md-nav__link {
  color: var(--unit-active-light);
}

/* Hover/focus; yellow background in dark mode, blue in light mode.
   Listed after the active rule and with matching specificity so the hover
   colour wins on items that are both active AND hovered (otherwise the
   active rule's yellow text would sit on a yellow background). */
.md-sidebar--primary .md-nav__link:hover,
.md-sidebar--primary .md-nav__link:focus,
.md-sidebar--primary .md-nav__link--active:hover,
.md-sidebar--primary .md-nav__link--active:focus,
.md-sidebar--primary .md-nav__item--active > .md-nav__link:hover,
.md-sidebar--primary .md-nav__item--active > .md-nav__link:focus {
  background: var(--unit-primary);
  color: var(--unit-text);
}

[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link:hover,
[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link:focus,
[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link--active:hover,
[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link--active:focus,
[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__item--active > .md-nav__link:hover,
[data-md-color-scheme="default"] .md-sidebar--primary .md-nav__item--active > .md-nav__link:focus {
  background: var(--unit-active-light);
  color: var(--unit-text-light);
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link:focus,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link--active:hover,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__link--active:focus,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--active > .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--active > .md-nav__link:focus {
  background: var(--unit-primary);
  color: var(--unit-text);
}

/* Caret on right side of nested items */
.md-sidebar--primary .md-nav__icon {
  flex-shrink: 0;
  margin-left: auto;
}

/* Ellipsis can wrap if needed but height is fixed by the link */
.md-sidebar--primary .md-nav__link .md-ellipsis {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expand/collapse animation; pure max-height, no padding swap */
.md-sidebar--primary .md-nav__item--nested > .md-nav:not(.md-nav--secondary) {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.2s;
  visibility: hidden;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav:not(.md-nav--secondary),
.md-sidebar--primary .md-nav__item--nested > .md-nav__toggle.md-toggle--indeterminate ~ .md-nav:not(.md-nav--secondary) {
  max-height: 80rem;
  opacity: 1;
  visibility: visible;
}

.md-sidebar--primary .md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon::after,
.md-sidebar--primary .md-nav__item--nested > .md-nav__toggle.md-toggle--indeterminate ~ .md-nav__link .md-nav__icon::after {
  transform: rotate(90deg);
}

/* ============================================================
   RESPONSIVE LAYOUT
   ============================================================ */

/* Desktop: sidebar docked, hamburger toggles it open/closed.
   Override Material's mobile drawer-stacking (absolute-positioned nested
   navs that overlay the parent) so the full hierarchy is always inline. */
@media screen and (min-width: 48em) {
  [dir="ltr"] .md-sidebar--primary { left: 0; right: auto; }
  [dir="rtl"] .md-sidebar--primary { left: auto; right: 0; }

  /* Drawer state is owned by html.unit-drawer-(open|closed). The inline <head>
     script writes that class BEFORE first paint, the body-tail JS keeps it
     in sync with the #__drawer checkbox on every toggle. !important is
     necessary because Material's higher-specificity checkbox rule sets
     transform: translateX(12.1rem) on the open state; without forcing
     the override the sidebar lands 12.1rem to the right of the viewport edge. */
  .md-sidebar--primary {
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  [dir="rtl"] .md-sidebar--primary { transform: translateX(100%) !important; }

  html.unit-drawer-open .md-sidebar--primary { transform: translateX(0) !important; }

  .md-header__inner,
  .md-main__inner {
    box-sizing: border-box;
    padding-inline-start: 0;
    transition: padding-inline-start 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html.unit-drawer-open .md-header__inner,
  html.unit-drawer-open .md-main__inner {
    padding-inline-start: var(--unit-sidebar-width);
  }

  [data-md-toggle="drawer"] ~ .md-overlay,
  [data-md-toggle="drawer"]:checked ~ .md-overlay {
    background: transparent !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

}

/* Override Material's mobile drawer-stacking (absolute-positioned nested
   navs that overlay the parent) at EVERY viewport; not just desktop;
   so an open drawer at narrow widths renders the full hierarchy in a
   normal scrollable column instead of piling levels on top of each other. */
.md-sidebar--primary .md-nav--primary,
.md-sidebar--primary .md-nav--primary .md-nav {
  background: transparent;
  display: block;
  flex-direction: initial;
  height: auto;
  left: auto;
  position: static;
  right: auto;
  top: auto;
  z-index: auto;
}

.md-sidebar--primary .md-nav--primary .md-nav__title { display: none !important; }
.md-sidebar--primary .md-nav--primary > .md-nav__title[for="__drawer"] { display: flex !important; }

/* Mobile: sidebar drawer hidden offscreen until hamburger pressed.
   Same html.unit-drawer-(open|closed) class drives the state; keeps the
   pre-paint position consistent across all viewports. !important on
   transform here mirrors the desktop override to defeat Material's
   open-state translateX(12.1rem). */
@media screen and (max-width: 47.9375em) {
  [dir="ltr"] .md-sidebar--primary { transform: translateX(-100%) !important; }
  [dir="rtl"] .md-sidebar--primary { transform: translateX(100%) !important; }

  .md-sidebar--primary { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); }

  html.unit-drawer-open .md-sidebar--primary {
    transform: translateX(0) !important;
  }

  html.unit-drawer-open .md-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    display: block !important;
    height: 100vh !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100vw !important;
  }
}

@media screen and (max-width: 36em) {
  .unit-workflow-split { grid-template-columns: 1fr; }
}