/* ==========================================================================
   NosoGraph docs.css — MkDocs Material shell overrides ONLY.
   Header, tabs, search, focus, content typography, links, code, tables,
   admonitions, sidebar/nav, footer. Generic primitives live in components.css;
   homepage layout lives in home.css. Consumes tokens.css only — no raw hex.
   ========================================================================== */

/* ==========================================================================
   1. Global shell — single-row instrument header. Deep navy chassis in BOTH
   schemes (token-independent hairlines via mist mixes). Markup lives in
   docs-theme/partials/header.html; the center column embeds .md-tabs.
   ========================================================================== */

.md-header {
  background: var(--ng-deep-navy);
  box-shadow: none;
}

.md-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: color-mix(in srgb, var(--ng-mist) 14%, transparent);
  pointer-events: none;
}

.ng-header-grid {
  align-items: center;
  height: 60px;
  gap: var(--ng-sp-8);
  padding-inline: var(--ng-gutter);
}

/* Brand lockup: mark + typeset wordmark, one link, one accessible name. */
.md-header .ng-brand {
  display: inline-flex;
  align-items: center;
  align-self: center;
  height: 44px;
  gap: 10px;
  margin-left: calc(-1 * var(--ng-sp-8));
  padding: var(--ng-sp-4) var(--ng-sp-8);
  border-radius: var(--ng-radius-sm);
}

.ng-header-grid .ng-brand .ng-mark {
  width: auto;
  height: 32px; /* brand minimum for the detailed mark (docs/assets/brand/README.md) */
  border-radius: var(--ng-radius-xs);
}


.ng-brand .ng-wordmark {
  color: color-mix(in srgb, var(--ng-white) 88%, var(--ng-teal));
  font: 600 17px/1 var(--ng-font-display);
  letter-spacing: -0.01em;
  transition: color var(--ng-fast) var(--ng-ease);
}

.ng-brand:hover .ng-wordmark,
.ng-brand:focus-visible .ng-wordmark {
  color: var(--ng-white);
}

/* Version/maturity chip — data injected by scripts/site_hooks.py. */
.ng-version-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--ng-teal) 32%, transparent);
  border-radius: var(--ng-radius-pill);
  color: var(--ng-teal);
  font: 500 12px/1.4 var(--ng-font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: border-color var(--ng-fast) var(--ng-ease), color var(--ng-fast) var(--ng-ease);
}

.ng-version-chip:hover,
.ng-version-chip:focus-visible {
  border-color: color-mix(in srgb, var(--ng-teal) 62%, transparent);
  color: var(--ng-teal);
}

.ng-version-chip .ng-version-num {
  font-weight: 700;
}

.ng-version-chip .ng-version-maturity {
  color: #b8c5d9;
  text-transform: uppercase;
  letter-spacing: var(--ng-tracking-caps);
  font-size: 11px;
}

.ng-header-nav {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.ng-header-nav .md-tabs {
  display: block;
  width: auto;
  overflow: visible;
  background: transparent;
  line-height: 1;
  z-index: auto;
}

.ng-header-nav .md-tabs .md-grid {
  display: flex;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.md-tabs__list {
  display: flex;
  height: 100%;
  gap: 2px;
}

.ng-header-nav .md-tabs__item {
  display: flex;
  height: auto;
  padding-inline: 0;
}

.md-tabs__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 9px;
  margin-top: 0;
  color: color-mix(in srgb, var(--ng-mist) 74%, var(--ng-deep-navy));
  font: 500 13.5px/1 var(--ng-font-text);
  letter-spacing: 0.01em;
  opacity: 1;
  transition: color var(--ng-fast) var(--ng-ease), background-color var(--ng-fast) var(--ng-ease);
}

.md-tabs__link:hover,
.md-tabs__link:focus-visible {
  color: var(--ng-white);
  background: color-mix(in srgb, var(--ng-navy-raised) 72%, transparent);
  opacity: 1;
}

/* Selected mode: brighter text + thin teal structural rail on the chassis
   hairline. Nothing glows, no giant underline animation. */
.md-tabs__item--active .md-tabs__link {
  color: var(--ng-white);
  background: transparent;
}

.md-tabs__item--active .md-tabs__link::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 2px;
  border-radius: 1px 1px 0 0;
  background: var(--ng-teal);
}

.md-source {
  color: var(--ng-mist);
}

/* ---- Right utility cluster ---- */
.ng-menu-btn,
.ng-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--ng-radius-sm);
  color: color-mix(in srgb, var(--ng-mist) 86%, var(--ng-deep-navy));
  transition: color var(--ng-fast) var(--ng-ease), background-color var(--ng-fast) var(--ng-ease);
}

.ng-menu-btn:hover,
.ng-menu-btn:focus-visible,
.ng-search-btn:hover,
.ng-search-btn:focus-visible {
  color: var(--ng-white);
  background: color-mix(in srgb, var(--ng-navy-raised) 72%, transparent);
}

.md-header__option .md-header__button {
  color: color-mix(in srgb, var(--ng-mist) 86%, var(--ng-deep-navy));
}

/* GitHub: compact icon action; repo name stays for assistive tech only. */
.md-header__source {
  margin-left: 0;
}

.md-header__source .md-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--ng-sp-8);
  border-radius: var(--ng-radius-sm);
  color: color-mix(in srgb, var(--ng-mist) 86%, var(--ng-deep-navy));
  transition: color var(--ng-fast) var(--ng-ease), background-color var(--ng-fast) var(--ng-ease);
}

.md-header__source .md-source__icon {
  display: contents;
}

.md-header__source .md-source .md-icon svg,
.md-header__source .md-source svg {
  width: 20px;
  height: 20px;
}

.md-header__source .md-source:hover,
.md-header__source .md-source:focus-visible {
  color: var(--ng-white);
  background: color-mix(in srgb, var(--ng-navy-raised) 72%, transparent);
}

/* Beat stock [dir=ltr] .md-header__source { width: 11.7rem; margin-left: 1.4rem }. */
.md-header__source,
[dir="ltr"] .md-header__source {
  width: auto;
  max-width: none;
  margin-left: var(--ng-sp-4);
}

.md-header__source .md-source__repository {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Search: first-class instrument affordance ---- */
/* Inline form ≥60em replaces the icon trigger (stock Material behavior). */
@media screen and (min-width: 60em) {
  .ng-search-btn {
    display: none;
  }
}

.ng-header .md-search__inner {
  width: min(200px, 17vw);
}

.ng-header .md-search__form {
  height: 36px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ng-mist) 26%, transparent);
  border-radius: var(--ng-radius-sm);
  transition: background-color var(--ng-fast) var(--ng-ease), border-color var(--ng-fast) var(--ng-ease);
}

.ng-header .md-search__form:hover {
  background: color-mix(in srgb, var(--ng-navy-raised) 55%, transparent);
  border-color: color-mix(in srgb, var(--ng-mist) 42%, transparent);
}

.ng-header .md-search__input {
  background: transparent;
  color: var(--ng-white);
  font-size: var(--ng-text-md);
  height: 100%;
}

.ng-header .md-search__input::placeholder {
  color: color-mix(in srgb, var(--ng-mist) 58%, var(--ng-deep-navy));
}

/* Keyboard cue "/" — hidden once the search dialog opens. */
.ng-header .md-search__form::after {
  content: "/";
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--ng-mist) 30%, transparent);
  border-radius: var(--ng-radius-xs);
  color: color-mix(in srgb, var(--ng-mist) 64%, var(--ng-deep-navy));
  font: 500 var(--ng-text-micro)/1.5 var(--ng-font-mono);
  pointer-events: none;
  transition: opacity var(--ng-fast) var(--ng-ease);
}

/* ---- Search dialog: navy instrument panel, no glass ---- */
[data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
  background: color-mix(in srgb, var(--ng-deep-navy) 82%, transparent);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
  background: var(--ng-navy-layer);
  border: 1px solid color-mix(in srgb, var(--ng-mist) 16%, transparent);
  border-radius: var(--ng-radius-sm);
  box-shadow: var(--ng-shadow-overlay);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--ng-deep-navy);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ng-mist) 14%, transparent);
  border-radius: var(--ng-radius-sm) var(--ng-radius-sm) 0 0;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form::after {
  opacity: 0;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__output {
  background: var(--ng-navy-layer);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__scrollwrap {
  background: var(--ng-navy-layer);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ng-mist) 22%, transparent) transparent;
}

/* Result voice: Material renders titles as plain h1 inside .md-typeset. */
.md-search-result__meta {
  color: color-mix(in srgb, var(--ng-mist) 62%, var(--ng-deep-navy));
  font: 600 var(--ng-text-micro)/1.4 var(--ng-font-mono);
  letter-spacing: var(--ng-tracking-caps);
  text-transform: uppercase;
}

.md-search-result__article {
  border-radius: var(--ng-radius-sm);
}

.md-search-result .md-search-result__link:hover .md-search-result__article,
.md-search-result__link[data-md-state="active"] .md-search-result__article {
  background: color-mix(in srgb, var(--ng-navy-raised) 68%, transparent);
}

.md-search-result__icon {
  color: color-mix(in srgb, var(--ng-mist) 70%, var(--ng-deep-navy));
}

[data-md-toggle="search"]:checked ~ .md-header .md-search-result__article {
  color: color-mix(in srgb, var(--ng-mist) 80%, var(--ng-deep-navy));
}

[data-md-toggle="search"]:checked ~ .md-header .md-search-result__article h1 {
  color: var(--ng-white);
  font-family: var(--ng-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search-result__article p {
  font-size: var(--ng-text-sm);
  line-height: 1.55;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search-result__article code {
  background: transparent;
  border-color: color-mix(in srgb, var(--ng-mist) 30%, transparent);
  color: color-mix(in srgb, var(--ng-mist) 88%, var(--ng-deep-navy));
}

[data-md-toggle="search"]:checked ~ .md-header .md-search-result__article :is(p, h1) mark {
  background: transparent;
  color: var(--ng-teal);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ng-teal) 45%, transparent);
  text-underline-offset: 2px;
}

.md-search-result kbd {
  border: 1px solid color-mix(in srgb, var(--ng-mist) 30%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--ng-mist) 78%, var(--ng-deep-navy));
  font-family: var(--ng-font-mono);
}

/* 3. Global keyboard focus — one low-specificity rule covers content links, header, tabs, nav, and homepage elements alike. Outline is never removed. */
:focus-visible {
  outline: var(--ng-focus-ring-width) solid var(--ng-focus-ring);
  outline-offset: var(--ng-focus-ring-offset);
  border-radius: var(--ng-radius-xs);
}

/* Always-dark chrome (navy header/footer in BOTH schemes) needs the dark
   scheme's teal ring: the light-scheme ring is only ~1.5:1 on deep navy,
   below the WCAG 2.4.11 3:1 focus-indicator floor. */
:is(.md-header, .md-footer) {
  --ng-focus-ring: var(--ng-teal);
}

/* 4. Documentation reading shell */
.ng-doc-frame {
  max-width: var(--ng-width-standard);
  margin: 0 auto;
  padding: 32px var(--ng-gutter) 64px;
}

.ng-doc-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  color: var(--ng-ink-muted);
  font: 600 11px/1.4 var(--ng-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ng-doc-context__label { color: var(--ng-link); }
.ng-doc-context__separator { color: var(--ng-border-strong); }

.ng-doc-frame .md-main__inner {
  max-width: none;
  margin: 0;
}

.ng-doc-frame .md-content {
  max-width: var(--ng-width-reading);
  margin: 0;
}

.ng-doc-frame .md-content__inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

.ng-doc-frame .md-content__inner > :first-child { margin-top: 0; }
.ng-doc-frame .md-content__inner > h1:first-child { margin-top: 0; }

/* 5. Content area */
.md-content__inner {
  max-width: var(--ng-width-standard);
}

.md-typeset img {
  border-radius: var(--ng-radius-sm);
}

/* 5. Typography — display voice for headings, refined scale. */
.md-typeset {
  font-size: var(--ng-text-base);
  line-height: var(--ng-leading-body);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--ng-font-display);
  color: var(--ng-ink);
  letter-spacing: var(--ng-tracking-display);
  line-height: var(--ng-leading-tight);
}

.md-typeset h1 {
  font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  font-weight: 650;
}

.md-typeset h2 {
  margin-top: var(--ng-sp-32);
  font-size: clamp(1.4375rem, 1.25rem + 0.9vw, 1.75rem);
  font-weight: 620;
}

.md-typeset h3 {
  margin-top: var(--ng-sp-24);
  font-size: var(--ng-text-h3);
  font-weight: 600;
}

.md-typeset h4 {
  margin-top: var(--ng-sp-24);
  font-size: var(--ng-text-base);
  font-weight: 600;
}

/* Page header: the h1 anchors the article with a hairline, separating the
   title block from the body flow. */
.ng-doc-frame .md-content__inner > h1:first-child {
  padding-bottom: var(--ng-sp-16);
  border-bottom: 1px solid var(--ng-border);
  margin-bottom: var(--ng-sp-24);
}

/* 6. Links — color everywhere, underline scoped to article content only so nav/sidebar/tab links stay clean. */
.md-typeset a {
  color: var(--ng-link);
  transition: color var(--ng-fast) var(--ng-ease);
}

.md-typeset a:hover {
  color: var(--ng-link-hover);
}

.md-content a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ng-link) 35%, transparent);
  text-underline-offset: 3px;
}

.md-content a:hover {
  text-decoration-color: currentColor;
}

/* 6b. Blockquotes — hairline leader, upright text (scientific voice, not
   stock italic). Used for research-scope callouts across the walkthroughs. */
.md-typeset blockquote {
  margin: var(--ng-sp-24) 0;
  padding: 2px 0 2px var(--ng-sp-16);
  border-left: 2px solid var(--ng-border-strong);
  color: var(--ng-ink-soft);
  font-style: normal;
}

.md-typeset blockquote strong {
  color: var(--ng-ink);
}

/* 6c. Horizontal rules, search marks, keyboard keys — tokenized hairlines. */
.md-typeset hr {
  border-top: 1px solid var(--ng-border);
}

.md-typeset mark {
  background: color-mix(in srgb, var(--ng-teal) 26%, transparent);
  color: inherit;
}

.md-typeset kbd {
  border: 1px solid var(--ng-border-strong);
  border-radius: var(--ng-radius-xs);
  background: var(--ng-surface);
  color: var(--ng-ink-soft);
  box-shadow: none;
  font-family: var(--ng-font-mono);
}

/* 7. Code surfaces — hairline plates, no neon. Material syntax highlighting and copy behavior remain native. */
.md-typeset .highlight,
.md-typeset .highlight pre,
.md-typeset pre.highlight {
  position: relative;
  border: 1px solid var(--ng-border);
  border-radius: var(--ng-radius-md);
  background: var(--ng-navy-layer);
  box-shadow: none;
}

.md-typeset .highlight pre { margin: 0; border: 0; border-radius: 0; }
.md-typeset .highlight code { color: var(--ng-mist); }
.md-typeset .highlight .filename {
  display: block;
  padding: 9px 16px;
  border-bottom: 1px solid color-mix(in srgb,var(--ng-mist) 18%,transparent);
  color: var(--ng-mist);
  font: 600 var(--ng-text-micro)/1.4 var(--ng-font-mono);
}
.md-typeset .md-clipboard {
  color: var(--ng-mist);
  background: transparent;
}
.md-typeset .md-clipboard:hover,
.md-typeset .md-clipboard:focus-visible { color: var(--ng-teal); }

/* Inline and block code */
.md-typeset code {
  background: var(--ng-surface-alt);
  border: 1px solid var(--ng-border);
  border-radius: var(--ng-radius-sm);
  padding: 0.12em 0.4em;
  font-size: 0.85em;
  color: var(--ng-ink);
  word-break: break-word;
}

.md-typeset pre {
  background: var(--ng-surface-alt);
  border: 1px solid var(--ng-border);
  border-radius: var(--ng-radius-md);
  padding: var(--ng-sp-16) var(--ng-sp-24);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow: auto;
}

/* Block code resets the inline plate (:is keeps this at 0,1,x specificity). */
.md-typeset :is(pre > code) {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: var(--ng-ink);
  word-break: normal;
}

/* 8. Tables — hairline scientific grid mirroring the .ng-table system,
   presented as a rounded plate with an inset header band. */
.md-typeset .md-typeset__scrollwrap {
  overflow-x: auto;
  border: 1px solid var(--ng-border);
  border-radius: var(--ng-radius-md);
  background: var(--ng-surface);
}
.md-typeset .md-typeset__scrollwrap table { margin: 0; }
.md-typeset table:not(.ng-homepage table) { display: table; overflow: visible; }
.md-typeset table th:first-child { color: var(--ng-ink); }
.md-typeset table code { overflow-wrap:anywhere; }

/* Existing Material table styling follows for compatible defaults. */
.md-typeset table {
  width: 100%;
  font-size: var(--ng-text-ui);
  border-collapse: collapse;
}

.md-typeset table th {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--ng-border-strong);
  background: var(--ng-surface-alt);
  color: var(--ng-ink-soft);
  font: 600 var(--ng-text-micro)/1.4 var(--ng-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.md-typeset table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--ng-border);
  color: var(--ng-ink-soft);
}

.md-typeset tr:where(:last-child) td {
  border-bottom: 0;
}


/* 9. Admonitions — semantic, flat, and role-preserving. Type colors map to
   status tokens (never the brand spectrum); Material's native disclosure and
   icon behavior remain intact. */
.md-typeset .admonition,
.md-typeset details {
  border: 0;
  border-left: 2px solid var(--ng-adm-fg, var(--ng-border-strong));
  border-radius: var(--ng-radius-sm);
  background: color-mix(in srgb, var(--ng-adm-fg, var(--ng-border-strong)) 7%, var(--ng-surface));
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset details > summary {
  background: transparent;
  color: var(--ng-ink);
  font-family: var(--ng-font-text);
  font-weight: 650;
}
.md-typeset .admonition-title::before { color: var(--ng-adm-fg, var(--ng-link)); }

/* Type → status token mapping (pymdownx/Material type classes). */
.md-typeset :is(.admonition.note, .admonition.info, details.note, details.info) { --ng-adm-fg: var(--ng-info); }
.md-typeset :is(.admonition.tip, .admonition.success, .admonition.check, details.tip, details.success, details.check) { --ng-adm-fg: var(--ng-success); }
.md-typeset :is(.admonition.warning, .admonition.caution, .admonition.attention, details.warning, details.caution, details.attention) { --ng-adm-fg: var(--ng-warning); }
.md-typeset :is(.admonition.danger, .admonition.error, .admonition.failure, .admonition.fail, .admonition.bug, details.danger, details.error, details.failure, details.fail, details.bug) { --ng-adm-fg: var(--ng-error); }
.md-typeset :is(.admonition.abstract, .admonition.example, .admonition.question, details.abstract, details.example, details.question) { --ng-adm-fg: var(--ng-provenance); }
.md-typeset :is(.admonition.quote, details.quote) { --ng-adm-fg: var(--ng-border-strong); }

/* Existing Material sizing follows. */
.md-typeset :is(.admonition, details) {
  border-radius: var(--ng-radius-sm);
}

.md-typeset :is(.admonition-title, summary) {
  font-size: var(--ng-text-md);
}

/* 10. Definition lists and semantic metadata */
.md-typeset dl:not(.ng-homepage dl) { margin: var(--ng-sp-24) 0; }
.md-typeset dl:not(.ng-homepage dl) dt { color: var(--ng-ink); font-weight: 650; }
.md-typeset dl:not(.ng-homepage dl) dd { margin: 4px 0 12px 0; color: var(--ng-ink-soft); }

/* 11. Sidebar / nav — section labels stay quiet (no stock surface pills).
   The compact-width drawer re-themes titles in §13. */
.md-sidebar--primary .md-nav__title {
  background: transparent;
  box-shadow: none;
}

/* Beat stock .md-nav--lifted active-label surface (0,4,0). */
.md-sidebar--primary label.md-nav__link,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > label.md-nav__link {
  background: var(--ng-bg);
  box-shadow: none;
}

.md-nav__link {
  color: var(--ng-ink-soft);
  transition: color var(--ng-fast) var(--ng-ease);
}

.md-nav__link:hover {
  color: var(--ng-link);
}

.md-nav__link--active {
  color: var(--ng-link);
  font-weight: 600;
}

.md-nav__title {
  color: var(--ng-ink-muted);
  font: 600 var(--ng-text-micro)/1.4 var(--ng-font-mono);
  letter-spacing: var(--ng-tracking-caps);
  text-transform: uppercase;
}

/* 11b. Primary sidebar (desktop reading room): active page gets a teal rail
   marker, mirroring the compact drawer (not color-only). */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__link--active {
    position: relative;
    box-shadow: inset 2px 0 0 var(--ng-teal);
  }

  .md-sidebar--primary .md-nav__list {
    /* quiet track for the rail */
    border-left: 1px solid var(--ng-border);
    margin-left: 0.6rem;
  }

  .md-sidebar--primary .md-nav--primary > .md-nav__list {
    border-left: 0;
    margin-left: 0;
  }
}

/* 11c. Table-of-contents sidebar: quiet track, teal active rail, readable
   nested levels. Pairs with toc.follow scrollspy. */
.md-sidebar--secondary .md-nav__list {
  border-left: 1px solid var(--ng-border);
}

.md-sidebar--secondary .md-nav__link {
  color: var(--ng-ink-muted);
  font-size: var(--ng-text-sm);
  transition: color var(--ng-fast) var(--ng-ease);
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--ng-ink);
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--ng-link);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ng-teal);
}

.md-sidebar--secondary .md-nav__title {
  color: var(--ng-ink-muted);
}

/* 12. Footer — unbranded footer gets the navy chrome in BOTH schemes. (.md-copyright is Material's class for the copyright line.) */
.md-footer {
  background: var(--ng-deep-navy);
  color: var(--ng-mist);
}

.md-footer a {
  color: var(--ng-mist);
  transition: color var(--ng-fast) var(--ng-ease);
}

.md-footer a:hover {
  color: var(--ng-teal);
}

.md-footer-meta,
.md-copyright {
  font-size: var(--ng-text-sm);
  color: color-mix(in srgb, var(--ng-mist) 75%, var(--ng-deep-navy));
}

/* 13. Header edit button */
.md-content__button {
  color: var(--ng-ink-muted);
  transition: color var(--ng-fast) var(--ng-ease);
}

.md-content__button:hover {
  color: var(--ng-link);
}

/* ==========================================================================
   13. Compact-width drawer — the mobile/primary sidebar IS the Material
   drawer below 76.25em. Navy chassis, mono section labels, teal active rail.
   Scoped to the drawer media range so the desktop reading-room sidebar in
   §10 is untouched.
   ========================================================================== */

@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary {
    /* Dark drawer chrome needs the dark scheme's teal focus ring (3:1 floor). */
    --ng-focus-ring: var(--ng-teal);
    background: var(--ng-navy-layer);
    border-right: 1px solid color-mix(in srgb, var(--ng-mist) 12%, transparent);
  }

  .md-sidebar--primary .md-nav--primary {
    background: var(--ng-navy-layer);
  }

  .md-nav--primary .md-nav,
  .md-nav--primary .md-nav__title ~ .md-nav__list,
  .md-nav--primary .md-nav__item,
  .md-nav--primary label.md-nav__link,
  .md-nav--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    background: transparent;
    box-shadow: none;
  }

  /* Sticky active-section label keeps a chassis surface while scrolling. */
  .md-nav--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    background: var(--ng-navy-layer);
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ng-mist) 20%, transparent) transparent;
  }

  /* Drawer header: brand row on the deep chassis. */
  .md-nav--primary .md-nav__title[for="__drawer"] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--ng-sp-16);
    background: var(--ng-deep-navy);
    color: var(--ng-white);
    font: 600 1rem/1.2 var(--ng-font-display);
    letter-spacing: -0.01em;
    text-transform: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ng-mist) 14%, transparent);
    box-shadow: none;
  }

  .md-nav--primary .md-nav__title[for="__drawer"] img {
    width: auto;
    height: 22px;
  }


  .md-nav--primary .md-nav__source {
    padding: var(--ng-sp-12) var(--ng-sp-16);
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--ng-mist) 12%, transparent);
  }

  .md-nav--primary .md-nav__source .md-source {
    display: flex;
    align-items: center;
    gap: 10px;
    color: color-mix(in srgb, var(--ng-mist) 84%, var(--ng-deep-navy));
  }

  .md-nav--primary .md-nav__source .md-source__repository {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    font: 500 var(--ng-text-sm)/1.3 var(--ng-font-mono);
  }

  /* Section labels: quiet mono metadata voice. */
  .md-nav--primary .md-nav__item > .md-nav__title:not([for="__drawer"]) {
    margin-top: var(--ng-sp-8);
    padding: var(--ng-sp-8) var(--ng-sp-16) var(--ng-sp-4);
    color: color-mix(in srgb, var(--ng-mist) 58%, var(--ng-deep-navy));
    font: 600 var(--ng-text-micro)/1.4 var(--ng-font-mono);
    letter-spacing: var(--ng-tracking-caps);
    text-transform: uppercase;
  }

  /* Links and nested levels. */
  .md-nav--primary .md-nav__link {
    color: color-mix(in srgb, var(--ng-mist) 82%, var(--ng-deep-navy));
  }

  .md-nav--primary .md-nav__link:hover,
  .md-nav--primary .md-nav__link:focus-visible {
    color: var(--ng-white);
  }

  /* Active page: teal text + left rail marker (not color-only). */
  .md-nav--primary .md-nav__link--active {
    position: relative;
    color: var(--ng-teal);
    font-weight: 600;
  }

  .md-nav--primary .md-nav__link--active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    border-radius: 1px;
    background: var(--ng-teal);
  }

  .md-nav--primary .md-nav__list .md-nav__list {
    border-left: 1px solid color-mix(in srgb, var(--ng-mist) 10%, transparent);
  }

  .md-overlay {
    background: color-mix(in srgb, var(--ng-deep-navy) 62%, transparent);
  }
}

/* ==========================================================================
   14. Responsive shell transitions (deliberate, not accidental).
   ≥80em      full header: brand · chip · tabs · search · GitHub · theme
   64–79.99em version chip drops (optional label dies first)
   <64em      tabs fold into drawer; header = menu · brand · search · theme
   Search stays inline from 60em up (Material native), icon-trigger below.
   ========================================================================== */

/* Re-enable tabs between 64em and 76.23em where Material hides them but our
   single-row shell keeps them coherent. */
@media screen and (min-width: 64em) {
  .ng-header-nav .md-tabs {
    display: block;
  }
}

@media screen and (max-width: 79.9375em) {
  .ng-version-chip {
    display: none;
  }

  /* GitHub moves to the drawer below 80em — primary nav keeps the row. */
  .md-header__source {
    display: none;
  }

  .ng-header .md-search__inner {
    width: min(160px, 15vw);
  }

  .md-tabs__link {
    padding-inline: 10px;
  }

  .ng-header-nav .md-tabs__item {
    padding-inline: 0.1rem;
  }
}

@media screen and (max-width: 63.984375em) {
  .ng-doc-frame { padding: 24px var(--ng-gutter) 48px; }
  .ng-doc-frame .md-content { max-width: none; }

  .ng-header-grid {
    height: 56px;
  }

  .ng-header-nav {
    display: none;
  }
}

/* Docs reading shell: keep the article anchored to the scoped frame while the
   Material sidebars yield at compact widths. */
@media screen and (min-width: 76.25em) {
  html.ng-page-docs .md-content__inner { max-width: none; margin: 0; }
  html.ng-page-docs .md-main__inner { max-width: var(--ng-width-standard); margin: 0 auto; }
}

/* Homepage: align the header grid to the homepage container width. */
html.ng-page-home .ng-header-grid {
  max-width: var(--ng-width-standard);
}


/* Component reflow and print safeguards */
@media screen and (max-width: 600px) {
  .md-typeset .highlight pre, .md-typeset pre { padding: var(--ng-sp-12) var(--ng-sp-16); }
  .md-typeset .admonition, .md-typeset details { margin: var(--ng-sp-16) 0; }
  .md-typeset table { min-width: 38rem; }
  .md-typeset .md-typeset__scrollwrap { max-width: 100%; overflow-x: auto; }
}

/* At 320px Material's off-canvas sidebar remains geometrically translated
   outside the viewport and contributes 32px to document scrollWidth. The
   sidebar is already drawer-controlled here, so contain that off-canvas
   layer at the document root rather than hiding content inside the drawer. */
@media screen and (max-width: 360px) {
  html, body { overflow-x: clip; }
}
@media print {
  .md-header, .md-sidebar, .md-footer, .md-toc, .md-content__button { display: none !important; }
  .ng-doc-frame, .md-content { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .md-typeset .highlight { background: #fff; color: #000; box-shadow: none; }
  .md-typeset .highlight code { color: #000; }
}