/*
 * EEI Knowledge Base theme.
 *
 * Matched to the VirtualForge console shell (vforge-console/src/{app.css,lib/components}), whose
 * design language is deliberately restrained: **white chrome on a slate-50 page, with brand green
 * reserved for state** — active navigation (`bg-brand-50 text-brand-700`), links, and focus rings.
 * Green is not the chrome. Amber is the logo swoosh and is used sparingly.
 *
 * Brand source of truth is the **EEI 2025 Style Sheet**, which defines exactly four colors and one
 * typeface. Verified against it:
 *
 *   Pantone Black  #201E20   ink — wordmark, headings
 *   Pantone 7489C  #6CB352   green — primary: links, active state, focus
 *   Pantone 1235C  #FAA819   orange — accent: hover, emphasis, attention
 *   Pantone 424C   #707271   gray — secondary text, meta
 *   Montserrat
 *
 * **There is no blue in the brand, and none is introduced here.** A UI does need more hues than a
 * brand has, but those are neutrals (the slate scale below), not additional brand colors — adding a
 * fifth "brand" color is how a four-color identity quietly becomes an eight-color one. The cool/
 * warm balance the palette needs is already present: green is cool, orange is warm, and ink + gray
 * anchor both. That is exactly what the primary logo does — an orange mark against gray and near-
 * black. Where a mark's own artwork uses an off-palette color, it stays inside the artwork and is
 * never promoted to a system color.
 *
 * These values are a documented mirror until the tokens are extracted into eei-engineering-common
 * and imported by both the console and every site.
 *
 * Material is themed through --md-* custom properties and has no Tailwind, so the console's
 * `@theme` block cannot be reused directly — this is a translation, not a copy. Overrides are
 * scoped to Material's own scheme attribute so they beat the palette CSS it generates.
 */

/* ---------------------------------------------------------------------------------------------- */
/* Brand typeface — self-hosted, matching the console's @fontsource approach (no Google Fonts).    */
/* ---------------------------------------------------------------------------------------------- */

@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------------------------- */
/* Tokens                                                                                          */
/* ---------------------------------------------------------------------------------------------- */

:root {
  /* Brand — the four Style Sheet colors, plus tints/shades derived from them for UI state only. */
  --eei-green: #6cb352; /* Pantone 7489C — the brand value */
  --eei-orange: #faa819; /* Pantone 1235C — the brand value */
  --eei-ink: #201e20; /* Pantone Black */
  --eei-gray: #707271; /* Pantone 424C */

  /* Derived green ramp: 500 is the brand value; darker steps carry AA contrast on white, lighter
     steps carry active-state fills and dark-mode text. */
  --eei-green-50: #f3f9ee;
  --eei-green-100: #e3f1d5;
  --eei-green-400: #85c25b;
  --eei-green-500: var(--eei-green);
  --eei-green-600: #559a3f;
  --eei-green-700: #437c33;

  /* Derived orange ramp: 500 is the brand value. Orange is emphasis, never a surface. */
  --eei-orange-100: #fff0d4;
  --eei-orange-400: #ffc04d;
  --eei-orange-500: var(--eei-orange);
  --eei-orange-600: #e08c00; /* darkened for AA on white where orange must carry text */

  /*
   * Active/selected state, defined once so the hue is a one-line decision rather than a hunt.
   *
   * Orange rather than green: green is the *primary* color here (links, focus), and a color doing
   * double duty as "interactive" and "you are here" cannot signal either strongly. Orange is the
   * brand's attention color — the logo's mark — which is exactly this job.
   *
   * The fill is deliberately firmer than the green it replaces (#f3f9ee was ~97% lightness, so it
   * read as white in light mode regardless of hue), and it is paired with a left bar: position in a
   * sidebar is best signalled by an edge, which survives even a very light fill.
   */
  --eei-active-bg: var(--eei-orange-100);
  --eei-active-fg: var(--eei-ink);
  --eei-active-bar: var(--eei-orange-500);

  /* Back-compat aliases so existing rules keep reading naturally. */
  --eei-brand-50: var(--eei-green-50);
  --eei-brand-100: var(--eei-green-100);
  --eei-brand-400: var(--eei-green-400);
  --eei-brand-500: var(--eei-green-500);
  --eei-brand-600: var(--eei-green-600);
  --eei-brand-700: var(--eei-green-700);
  --eei-accent-500: var(--eei-orange-500);

  /* Console shell metrics (app.css --spacing-topbar / --spacing-sidenav). */
  --eei-topbar-height: 3.5rem;
  /* Slightly wider than the console's 15rem SideNav: that navigates ~4 fixed app routes, this
     navigates a growing document tree with real titles at several levels of nesting. */
  --eei-sidenav-width: 16.5rem;

  /* Slate scale, matching the console's Tailwind usage. */
  --eei-slate-50: #f8fafc;
  --eei-slate-200: #e2e8f0;
  --eei-slate-400: #94a3b8;
  --eei-slate-600: #475569;
  --eei-slate-900: #0f172a;

  --md-text-font: "Montserrat Variable", ui-sans-serif, system-ui, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
}

/* ---------------------------------------------------------------------------------------------- */
/* Light scheme — white chrome, green for state only                                               */
/* ---------------------------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  /* Header/nav chrome is WHITE with ink text, as in the console's TopBar — not brand-colored. */
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #ffffff;
  --md-primary-bg-color: var(--eei-ink);
  --md-primary-bg-color--light: var(--eei-slate-600);

  /* Green carries links and active state; amber is hover/focus emphasis. */
  --md-accent-fg-color: var(--eei-brand-600);
  --md-typeset-a-color: var(--eei-brand-600);

  --md-default-fg-color: var(--eei-slate-900);
  --md-default-fg-color--light: var(--eei-slate-600);
  --md-default-bg-color: #ffffff;

  /*
   * Sidebar nav color tiers. Held as variables so the light and dark values live in their scheme
   * blocks while the *rules* stay scheme-agnostic — which matters more than it looks. A
   * `[data-md-color-scheme="slate"] .md-nav__link` override would be (0,2,0), tying the
   * active-state rules below and beating them on source order, so it would silently kill the
   * active-item color in dark mode only. Same approach --eei-active-* already uses.
   */
  --eei-nav-fg: var(--eei-slate-600);         /* nested page links */
  --eei-nav-fg-strong: var(--eei-slate-900);  /* top-level entries, and hover text */
  --eei-nav-hover-bg: #f1f5f9;                /* slate-100 */

  /*
   * Footer foreground. Material assumes a DARK footer and defaults these to white
   * (--md-footer-fg-color--light: #ffffffb3), which is invisible against our white footer bar.
   * These must be set as variables rather than styled directly: Material's own
   * `.md-footer-meta.md-typeset a` puts two classes on one element (0,2,1) and beats any
   * `.eei-footer__links a` rule (0,1,1) regardless of load order. Fix the variable it reads.
   *
   * Links use brand-700 rather than the brand-600 of body links: footer type is 0.7rem, and
   * brand-700 clears WCAG AA on white (5.04:1) where brand-600 does not (3.45:1).
   */
  --md-footer-fg-color: var(--eei-accent-500);        /* link hover/focus */
  --md-footer-fg-color--light: var(--eei-brand-700);  /* the footer links */
  --md-footer-fg-color--lighter: var(--eei-gray);     /* .md-copyright container text */
}

/* Page background matches the console shell (bg-slate-50) while content sits on white. */
[data-md-color-scheme="default"] .md-main {
  background-color: var(--eei-slate-50);
}
[data-md-color-scheme="default"] .md-content {
  background-color: var(--eei-slate-50);
}

/* Header: fixed height + hairline border instead of Material's drop shadow. */
.md-header {
  height: var(--eei-topbar-height);
  border-bottom: 1px solid var(--eei-slate-200);
  box-shadow: none;
}
.md-header--shadow {
  box-shadow: none;
}
.md-header__title {
  font-size: 0.9375rem; /* console wordmark is text-[15px] */
  font-weight: 600;
}
/*
 * Header mark: GearBulb, the "EEI Knowledge" sub-brand. Its artwork is portrait (roughly 1576x1857),
 * so it is sized by height and allowed to stay narrow — unlike the console's horizontal lockup.
 * The parent Endeavor Engineering lockup lives in the footer (overrides/partials/copyright.html),
 * which keeps one mark per zone instead of two competing inside a 3.5rem bar.
 */
.md-header__button.md-logo :is(img, svg) {
  /* Deliberately taller than the 3.5rem bar and allowed to overhang, so a portrait mark still reads
     at a glance. Material clips nothing here, and the header keeps its console-matching height. */
  height: 2.75rem;
  width: auto;
}
.md-header__button.md-logo {
  padding: 0 0.375rem 0 0;
  margin-right: 0.25rem;
  display: flex;
  align-items: center;
}

/* Tabs strip, when enabled, continues the white chrome rather than inverting. */
.md-tabs {
  background-color: #ffffff;
  color: var(--eei-slate-600);
  border-bottom: 1px solid var(--eei-slate-200);
}
.md-tabs__link--active {
  color: var(--eei-brand-700);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------- */
/* Sidebar navigation — console SideNav: fixed width, rounded pills, brand-50 active               */
/* ---------------------------------------------------------------------------------------------- */

/*
 * Sidebar width is DESKTOP-ONLY. Below 76.25em Material converts this element into a fixed slide-out
 * drawer whose geometry is arithmetic: `left: -12.1rem`, `width: 12.1rem`, revealed by
 * `translateX(12.1rem)`. Overriding the width unconditionally desynchronizes that — the open drawer
 * hides part of itself off-screen and the closed drawer peeks in at the left edge.
 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: var(--eei-sidenav-width);
  }
  /*
   * Padding must NOT be applied to `.md-nav__container`. Material gives a nested section BOTH a
   * container div and an inner anchor, and both carry the class `md-nav__link` — so a naive
   * `.md-nav__link { padding }` applies twice, nested, stealing double the horizontal room and
   * truncating labels ("Develo…"). The container only positions the link and its chevron.
   */
  .md-nav__link:not(.md-nav__container) {
    padding: 0.3rem 0.4rem;
  }
  .md-nav__container {
    padding: 0;
  }
}

.md-nav__link {
  border-radius: 0.375rem; /* rounded-md */
  color: var(--eei-nav-fg);
  transition: background-color 120ms ease, color 120ms ease;
}
/* Drawer widths: keep Material's roomier hit area so nav items stay thumb-sized (~44px). */
@media screen and (max-width: 76.234375em) {
  .md-nav__link:not(.md-nav__container) {
    padding: 0.5rem 0.5rem;
  }
  .md-nav__container {
    padding: 0;
  }
}

/*
 * Let labels wrap instead of truncating. Material applies `overflow: hidden; text-overflow: ellipsis`
 * to `.md-ellipsis` for a uniform single-line sidebar, which is the wrong trade for documentation:
 * titles are long, and a truncated label is unreadable while a two-line one is merely taller. A
 * hovering tooltip is not navigation.
 */
.md-sidebar--primary .md-nav__link > .md-ellipsis {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}
/* 0.7rem is ~11px — legible but mean. A touch larger reads much better at sidebar distance. */
.md-sidebar--primary .md-nav {
  font-size: 0.75rem;
}
.md-nav__link:hover {
  background-color: var(--eei-nav-hover-bg);
  color: var(--eei-nav-fg-strong);
}
.md-nav__item .md-nav__link--active,
.md-nav__link[aria-current="page"] {
  background-color: var(--eei-active-bg);
  color: var(--eei-active-fg);
  font-weight: 600;
  /* Inset rather than a real border so the row does not shift by 3px when it becomes active. */
  box-shadow: inset 3px 0 0 var(--eei-active-bar);
}
/* The container is the row wrapper for a nested section; without this the fill stops short of the
   chevron and the highlight looks clipped. */
.md-nav__item .md-nav__container:has(> .md-nav__link--active),
.md-nav__item .md-nav__container:has(> .md-nav__link[aria-current="page"]) {
  background-color: var(--eei-active-bg);
  border-radius: 0.375rem;
  box-shadow: inset 3px 0 0 var(--eei-active-bar);
}
.md-nav__item .md-nav__container:has(> .md-nav__link--active) > .md-nav__link,
.md-nav__item .md-nav__container:has(> .md-nav__link[aria-current="page"]) > .md-nav__link {
  box-shadow: none;
}

/*
 * Navigation icons — the console's SideNav pairs every item with an icon, and Material supports the
 * same natively: `icon: material/<name>` in a page's frontmatter is rendered by
 * partials/nav-item.html. No plugin and no template override, which matters given MkDocs 2.0 is set
 * to remove the plugin system. All that is needed here is sizing and color.
 *
 * Because a section's icon comes from its index page, each source repo chooses its own section icon
 * — consistent with documentation living beside its subject matter.
 */
/* Material already supplies `gap: .4rem` on the flex link — an extra margin here just narrows the
   label for no visual gain. Size trimmed to 1rem for the same reason. */
.md-nav__link > svg:first-child {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem; /* optical alignment against Material's align-items: flex-start */
  fill: currentColor;
  opacity: 0.7;
}
.md-nav__item .md-nav__link--active > svg:first-child,
.md-nav__link[aria-current="page"] > svg:first-child {
  opacity: 1;
  color: var(--eei-active-bar); /* the icon joins the accent rather than staying neutral */
}
/* `subtitle:` frontmatter renders a second line; keep it quiet so it reads as support text. */
.md-nav__link small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--eei-gray);
  line-height: 1.3;
}

/*
 * Top-level nav entries (products / areas) are the primary wayfinding as the KB grows, so they read
 * heavier and darker than the pages nested beneath them — recovering some of the old group-heading
 * emphasis while staying collapsible (navigation.sections removed). A little space between them
 * separates one product from the next.
 */
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link {
  font-weight: 700;
  color: var(--eei-nav-fg-strong);
}
.md-sidebar--primary .md-nav--primary > .md-nav__list > .md-nav__item + .md-nav__item {
  margin-top: 0.3rem;
}

/* Focus ring mirrors the console's focus-visible:ring-2 ring-brand-500. */
.md-nav__link:focus-visible,
.md-content a:focus-visible,
.md-header a:focus-visible {
  outline: 2px solid var(--eei-brand-500);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ---------------------------------------------------------------------------------------------- */
/* Typeset                                                                                         */
/* ---------------------------------------------------------------------------------------------- */

.md-typeset h1 {
  color: var(--eei-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.md-typeset h2 {
  color: var(--eei-ink);
  font-weight: 600;
  margin-top: 2rem;
}
.md-typeset h3 {
  font-weight: 600;
}

/* Amber only where emphasis is genuinely wanted — the logo swoosh color, used sparingly. */
.md-typeset a:hover {
  color: var(--eei-accent-500);
}

.md-typeset table:not([class]) th {
  background-color: var(--eei-slate-50);
  color: var(--eei-ink);
  font-weight: 600;
}

/* Grid cards on the landing page. */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--eei-slate-200);
  border-radius: 0.5rem;
  box-shadow: none;
  transition: border-color 120ms ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--eei-brand-400);
}

/* Buttons pick up brand green rather than Material's primary. */
.md-typeset .md-button {
  border-color: var(--eei-brand-600);
  color: var(--eei-brand-600);
}
.md-typeset .md-button:is(:hover, :focus) {
  background-color: var(--eei-brand-600);
  border-color: var(--eei-brand-600);
  color: #ffffff;
}

/* ---------------------------------------------------------------------------------------------- */
/* Footer — the parent-brand half of the layered identity                                          */
/* ---------------------------------------------------------------------------------------------- */

.md-footer-meta {
  background-color: #ffffff;
  border-top: 1px solid var(--eei-slate-200);
}
.eei-footer {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  width: 100%;
}
/*
 * The lockup SVG declares a viewBox but no width/height, so it has an intrinsic *ratio* but no
 * intrinsic *width*. Inside a flex row that resolves `width: auto` to zero — the image is present
 * and correct in the DOM, and invisible on screen. Hence an explicit width (viewBox 287.49x121.26
 * -> ratio 2.371, so 3rem tall is 7.11rem wide) and a flex item that refuses to shrink.
 */
.eei-footer__brand {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.eei-footer__logo {
  height: 3rem;
  width: 7.11rem;
  max-width: none;
  display: block;
}
.eei-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--eei-gray);
}
/* Tagline set in brand green, as it appears beneath the wordmark in the primary logo. */
.eei-footer__tagline {
  color: var(--eei-green-600);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eei-footer__links {
  display: flex;
  gap: 0.5rem;
}
/*
 * The build SHA is a monospace token, not a code sample. `.md-footer-meta` carries `md-typeset`, so
 * Material's `code` chip (background, padding, 0.85em) applies unless it is turned off — and at the
 * footer's 0.7rem that chip reads as an error badge rather than a version.
 */
.eei-footer__build code {
  background-color: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
/* Legal line sits quietest of all — present and findable, not competing with the content above. */
.eei-footer__legal {
  color: var(--eei-gray);
  font-size: 0.66rem;
  margin-top: 0.125rem;
}
/*
 * Footer link color is NOT set here. Material ships `.md-footer-meta.md-typeset a` — two classes
 * on one element (0,2,1) — which outranks any `.eei-footer__links a` rule (0,1,1) whatever the
 * load order, so a rule here silently does nothing. It is set through
 * --md-footer-fg-color--light in the two color-scheme blocks above instead.
 */

[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: #1b1c1d;
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------------------------------------- */
/* Content width + reader-controlled panes                                                         */
/*                                                                                                 */
/* Material caps `.md-grid` at 61rem, so on a wide display the content column stays ~976px and the  */
/* rest of the window is margin. Raising the cap is what actually gives content room — collapsing a  */
/* sidebar without doing this just centers the same narrow column in more whitespace.               */
/*                                                                                                 */
/* 88rem is a deliberate middle: wide enough that a 1440px+ display is used, still short enough that */
/* prose lines stay readable (much past ~100 characters and the eye loses the line on return).       */
/* ---------------------------------------------------------------------------------------------- */

@media screen and (min-width: 76.25em) {
  .md-grid {
    max-width: 88rem;
  }
}

/*
 * Collapsible panes. Material ships nothing for this, so it is a custom control — see
 * assets/js/pane-toggle.js. A toggle rather than a drag handle is deliberate: the need is binary
 * ("get out of my way while I read this page"), a <button> is keyboard-accessible and announceable
 * where a drag handle is neither, and there is no half-collapsed state anyone wants.
 *
 * State lives on <html> rather than <body> because Material's instant navigation replaces body
 * content between pages.
 */
html.eei-hide-primary .md-sidebar--primary,
html.eei-hide-secondary .md-sidebar--secondary {
  display: none;
}

.eei-pane-toggle {
  display: none; /* only meaningful where the panes are persistent */
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.125rem;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--eei-slate-600);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.eei-pane-toggle:hover {
  background-color: #f1f5f9;
  color: var(--eei-slate-900);
}
.eei-pane-toggle:focus-visible {
  outline: 2px solid var(--eei-green-500);
  outline-offset: 2px;
}
.eei-pane-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
/* Pressed = pane SHOWN, matching how editors light a panel toggle while its panel is visible.
   Uses the same active tokens as the sidebar so "this control is on" and "this page is current"
   read as one language rather than two. */
.eei-pane-toggle[aria-pressed="true"] {
  background-color: var(--eei-active-bg);
  color: var(--eei-active-bar);
  box-shadow: inset 0 -2px 0 var(--eei-active-bar);
}

@media screen and (min-width: 76.25em) {
  .eei-pane-toggle {
    display: inline-flex;
  }
}
/* The right-hand table of contents only exists from 60em up. */
@media screen and (max-width: 76.234375em) {
  .eei-pane-toggle--secondary {
    display: none;
  }
}

[data-md-color-scheme="slate"] .eei-pane-toggle {
  color: rgba(255, 255, 255, 0.7);
}
[data-md-color-scheme="slate"] .eei-pane-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}
/* Dark values come from the scheme's --eei-active-* overrides, so no separate rule is needed here. */

/* ---------------------------------------------------------------------------------------------- */
/* Responsive                                                                                      */
/*                                                                                                 */
/* Material's own breakpoints are reused verbatim so overrides switch in step with the theme rather */
/* than half a step out of it:                                                                     */
/*   min-width 76.25em      desktop — persistent sidebar                                           */
/*   max-width 76.234375em  drawer mode — sidebar becomes a slide-out                              */
/*   max-width 44.984375em  phone                                                                  */
/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 44.984375em) {
  /* A 2.75rem mark plus hamburger, title and search icon does not fit a 320px bar. The mark shrinks
     to the bar rather than the title truncating — the property name is what orients a reader. */
  .md-header__button.md-logo :is(img, svg) {
    height: 2rem;
  }
  .md-header__title {
    font-size: 0.875rem;
  }

  /* Footer stacks: the lockup above, the meta beneath, both left-aligned. Wrapping a fixed-width
     logo beside flowing text produces a ragged two-column result at narrow widths. */
  .eei-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .eei-footer__logo {
    height: 2.5rem;
    width: 5.93rem; /* same 2.371 ratio */
  }
  .eei-footer__links {
    flex-wrap: wrap;
  }

  /* Grid cards go single-column; Material handles the grid, but the hover border reads as clutter
     on touch where there is no hover. */
  .md-typeset .grid.cards > ul > li:hover {
    border-color: var(--eei-slate-200);
  }
}

/* Tables are the most common horizontal-overflow culprit in technical docs. Let them scroll inside
   their own box instead of stretching the page and creating a whole-document sideways scroll. */
@media screen and (max-width: 76.234375em) {
  .md-typeset table:not([class]) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------------------------- */
/* Dark scheme — lift green off the dark surface for AA contrast                                    */
/* ---------------------------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #1b1c1d;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--eei-brand-400);
  --md-typeset-a-color: var(--eei-brand-400);

  /*
   * Sidebar nav, dark counterparts. Without these the light values land on the #1e2129 sidebar:
   * the bold top-level entries measured 1.11:1 and nested links 2.12:1 — black on black. The tiers
   * mirror light mode, strongest for wayfinding and a step down for pages, so the hierarchy reads
   * the same either way. #f1f5f9 is the dark-mode heading color used below, reused deliberately
   * rather than introducing another near-white.
   */
  --eei-nav-fg: var(--eei-slate-400);        /* #94a3b8 on #1e2129 = 6.28:1 */
  --eei-nav-fg-strong: #f1f5f9;              /* 14.69:1 */
  --eei-nav-hover-bg: rgba(255, 255, 255, 0.06);

  /* Footer foreground — see the note in the default scheme. brand-400 on #1b1c1d is 8.02:1. */
  --md-footer-fg-color: var(--eei-accent-500);
  --md-footer-fg-color--light: var(--eei-brand-400);
  --md-footer-fg-color--lighter: var(--eei-gray);
}
[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1b1c1d;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-md-color-scheme="slate"] .md-main,
[data-md-color-scheme="slate"] .md-content {
  background-color: transparent;
}
/* Same relationship inverted: a translucent orange wash with orange text, which carries contrast on
   a dark surface where ink would not. The left bar is unchanged, so the cue reads identically. */
[data-md-color-scheme="slate"] {
  --eei-active-bg: rgba(250, 168, 25, 0.18);
  --eei-active-fg: var(--eei-orange-400);
  --eei-active-bar: var(--eei-orange-500);
}
[data-md-color-scheme="slate"] .md-typeset :is(h1, h2) {
  color: #f1f5f9;
}