/* ============================================================================
   BIH — a theme overlay for Zensical / Material-based docs
   ----------------------------------------------------------------------------
   Built on the Berlin Institute of Health palette sampled from the brand sheet.
   Navy carries the chrome, red is the only accent in the content, and the
   secondary colours are held back for one job: telling admonition types apart.

   The character is structural, not decorative. Three devices carry it:

     · THE MARGIN RAIL. The left margin is an instrument column. Every element
       that starts a new thought registers there with a mark whose weight
       encodes its rank: a 4px red bar for the page title, 2px navy for a
       section, a short grey stroke for a subsection, hanging red numerals for
       procedural steps. Read down the rail and you have the page's structure.

     · THE CLIPPED CORNER. Code blocks and admonitions lose their top-right
       corner, the way a medical filing card is cut so a misfiled one shows at
       a glance. Containers are objects you can pick out of a drawer.

   No graphics at all: no webfonts, no images, no gradients standing in for
   images. The page is flat colour, hairlines and type. What movement there is
   comes from modern CSS doing real work — a scroll-driven reading line, view
   transitions between pages, an animated disclosure, a target highlight that
   tells you where an anchor landed.

   Palette   navy #233952 · red #B42E20 · coral #CA5E57 · rose #EAB1AC
             teal #5996A5 · ochre #8F7235 · periwinkle #7876AF · blue #4B7AB6
   Type      Trebuchet MS, with Lucida, Tahoma and Verdana behind it
   ========================================================================== */


/* 1. Tokens — light ------------------------------------------------------- */

:root,
[data-md-color-scheme="default"] {
  /* Trebuchet first — a humanist sans already installed on most machines, so
     the page paints in the right face immediately. Lucida covers macOS,
     Tahoma and Verdana cover older Windows, and the generic keywords pick up
     whatever humanist sans Linux and Android ship. Nothing is downloaded. */
  --bih-sans: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode",
              "Lucida Sans", Tahoma, Verdana, ui-sans-serif, system-ui, sans-serif;
  --bih-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
              Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --md-text-font: var(--bih-sans);
  --md-code-font: var(--bih-mono);

  --bih-navy: #233952;
  --bih-navy-deep: #1a2b3e;
  --bih-red: #b42e20;
  --bih-red-deep: #6f2322;
  --bih-coral: #ca5e57;
  --bih-rose: #eab1ac;
  --bih-blue: #4b7ab6;
  --bih-teal: #5996a5;
  --bih-ochre: #8f7235;
  --bih-periwinkle: #7876af;

  --bih-grey-100: #f4f4f4;
  --bih-grey-200: #e6e6e6;
  --bih-grey-300: #d6d6d6;
  --bih-grey-500: #a3a3a3;

  /* How far structural marks hang into the left margin. */
  --bih-rail: 1rem;
  /* The corner bite taken out of containers. */
  --bih-cut: 12px;

  /* Semantic intermediates. Section 12 maps the Material palette tokens onto
     these, so light/dark values live in one place each. */
  --bih-link: #9e2f28;
  --bih-accent: var(--bih-red-deep);
  --bih-accent-wash: rgba(180, 46, 32, 0.05);
  --bih-primary-bg: #ffffff;

  --md-default-bg-color: #ffffff;
  --md-default-fg-color: #1f2b38;
  --md-default-fg-color--light: #56636f;
  --md-default-fg-color--lighter: #8b959e;
  --md-default-fg-color--lightest: #d6d6d6;

  --md-primary-fg-color: var(--bih-navy);
  --md-primary-fg-color--light: #2d4866;
  --md-primary-fg-color--dark: var(--bih-navy-deep);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);

  --md-accent-fg-color: var(--bih-red-deep);
  --md-accent-fg-color--transparent: rgba(180, 46, 32, 0.05);
  --md-typeset-a-color: #9e2f28;

  --md-code-fg-color: #263341;
  --md-code-bg-color: var(--bih-grey-100);
  --md-code-hl-comment-color: #8b959e;
  --md-code-hl-keyword-color: #7a4a9c;
  --md-code-hl-string-color: #2c6d61;
  --md-code-hl-number-color: #8f5a1e;
  --md-code-hl-function-color: #2f5f96;
  --md-code-hl-name-color: #263341;

  --md-footer-bg-color: var(--bih-navy);
  --md-footer-bg-color--dark: var(--bih-navy-deep);
}


/* 2. Tokens — dark -------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --bih-navy: #22374e;
  --bih-navy-deep: #14202c;
  --bih-red: #d4685c;
  --bih-red-deep: #eab1ac;

  --bih-grey-100: #1a2733;
  --bih-grey-200: #243343;
  --bih-grey-300: #2c3a49;
  --bih-grey-500: #74818f;

  --bih-link: #e79189;
  --bih-accent: #eab1ac;
  --bih-accent-wash: rgba(212, 104, 92, 0.1);
  --bih-primary-bg: #e9eef3;

  --md-default-bg-color: #131d27;
  --md-default-fg-color: #e4eaf0;
  --md-default-fg-color--light: #a6b2bf;
  --md-default-fg-color--lighter: #74818f;
  --md-default-fg-color--lightest: #2c3a49;

  --md-primary-fg-color: var(--bih-navy);
  --md-primary-bg-color: #e4eaf0;

  --md-accent-fg-color: #eab1ac;
  --md-accent-fg-color--transparent: rgba(212, 104, 92, 0.1);
  --md-typeset-a-color: #e79189;

  --md-code-fg-color: #d3dbe4;
  --md-code-bg-color: #1a2733;
  --md-code-hl-comment-color: #74818f;
  --md-code-hl-keyword-color: #c2a0dd;
  --md-code-hl-string-color: #7dc0b4;
  --md-code-hl-number-color: #dda76a;
  --md-code-hl-function-color: #8ab2e0;

  --md-footer-bg-color: var(--bih-navy-deep);
  --md-footer-bg-color--dark: #101a24;
}


/* 3. Page frame ----------------------------------------------------------- */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(234, 177, 172, 0.45);
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: var(--bih-grey-100);
}

::-webkit-scrollbar-thumb {
  background: var(--md-default-fg-color--lightest);
  border-radius: 9px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-default-fg-color--lighter);
}

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

.md-content__inner {
  padding-bottom: 4.5rem;
}

.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > blockquote {
  max-width: 44rem;
}


/* 4. Header and footer — the navy bar -------------------------------------- */

.md-header {
  position: sticky;
  top: 0;
  background-color: var(--bih-navy);
  box-shadow: none;
}

/* Where the header is sticky, let the page show through it faintly. */
@supports (backdrop-filter: blur(1px)) {
  .md-header {
    background-color: color-mix(in srgb, var(--bih-navy) 88%, transparent);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
  }
}

.md-header--shadow {
  box-shadow: 0 2px 16px rgba(26, 43, 62, 0.22);
}

/* The wordmark lockup: red bar, then the name. */
.md-header__title {
  position: relative;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding-inline-start: 0.62rem;
}

.md-header__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 3px;
  height: 0.92rem;
  transform: translateY(-50%);
  background: var(--bih-coral);
}

.md-tabs {
  background: transparent;
}

.md-tabs__link {
  position: relative;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.74;
  transition: opacity 120ms ease;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

/* The rail again, turned on its side. */
.md-tabs__link--active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.45rem;
  height: 2px;
  background: var(--bih-coral);
}

.md-search__form {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: background-color 130ms ease, box-shadow 130ms ease;
}

.md-search__form:hover {
  background: rgba(255, 255, 255, 0.15);
}

.md-search__form:focus-within {
  background: rgba(255, 255, 255, 0.17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.md-footer {
  position: relative;
  background-color: var(--md-footer-bg-color);
}

.md-footer-meta {
  background-color: var(--md-footer-bg-color--dark);
  font-size: 0.67rem;
}

.md-copyright {
  color: rgba(255, 255, 255, 0.72);
}


/* 5. Navigation ----------------------------------------------------------- */

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

.md-nav__title {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.md-nav__link {
  padding-block: 0.34em;
  transition: color 100ms ease;
}

.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
  font-weight: 600;
  color: var(--md-default-fg-color);
  border-top: 1px solid var(--bih-grey-200);
  margin-top: 0.5em;
  padding-top: 0.7em;
}

/* Every nav row owns a slot in the rail; it fills on hover and stays filled
   for the page you're on. */
.md-nav--primary .md-nav__link {
  position: relative;
}

.md-nav--primary .md-nav__link::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.85rem;
  top: 0.55em;
  width: 3px;
  height: 1em;
  background: transparent;
  transform: scaleY(0.35);
  transition: background-color 140ms ease, transform 140ms ease;
}

.md-nav--primary .md-nav__link:hover::before {
  background: var(--bih-grey-300);
  transform: scaleY(1);
}

.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link[aria-current="page"] {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-nav--primary .md-nav__link--active::before,
.md-nav--primary .md-nav__link[aria-current="page"]::before {
  background: var(--bih-red);
  transform: scaleY(1);
}

.md-nav--secondary .md-nav__list {
  border-left: 1px solid var(--bih-grey-200);
}

.md-nav--secondary .md-nav__link--active {
  color: var(--md-typeset-a-color);
}

.md-sidebar--secondary .md-nav__title {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--md-default-fg-color--light);
}


/* 6. Typography ----------------------------------------------------------- */

.md-typeset {
  font-size: 0.79rem;
  line-height: 1.78;
}

/* Trebuchet has a tall x-height, so it wants a little more leading and a
   little more air after a paragraph than a webfont of the same size would. */
.md-typeset p {
  margin-block: 1em 1.15em;
}

.md-typeset li {
  margin-block: 0.42em;
}

.md-typeset ul,
.md-typeset ol {
  margin-block: 1.1em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--bih-navy);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: var(--md-default-fg-color);
}

/* --- the margin rail ---------------------------------------------------- */
/* Headings hang a mark in the left margin. Its weight is its rank: the text
   itself never moves, so the rail reads as a column you can scan. */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset blockquote {
  position: relative;
  margin-inline-start: calc(var(--bih-rail) * -1);
  padding-inline-start: var(--bih-rail);
}

.md-typeset h1::before,
.md-typeset h2::before,
.md-typeset h3::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.md-typeset h1 {
  font-size: 1.95rem;
  line-height: 1.16;
  letter-spacing: -0.019em;
  margin-bottom: 1.35rem;
}

.md-typeset h1::before {
  top: 0.17em;
  bottom: 0.15em;
  width: 4px;
  background: var(--bih-red);
}

.md-typeset h1 + p {
  font-size: 0.9rem;
  line-height: 1.62;
  max-width: 40rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: -0.014em;
  margin-top: 3.3rem;
  margin-bottom: 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--bih-grey-200);
}

.md-typeset h2::before {
  top: calc(1.6rem + 0.22em);
  height: 0.82em;
  width: 2px;
  background: var(--bih-navy);
}

[data-md-color-scheme="slate"] .md-typeset h2::before {
  background: var(--md-default-fg-color--light);
}

.md-typeset h3 {
  font-size: 0.96rem;
  letter-spacing: -0.007em;
  margin-top: 2.2rem;
  margin-bottom: 0.55rem;
}

.md-typeset h3::before {
  top: 0.66em;
  width: 7px;
  height: 1px;
  background: var(--bih-grey-500);
}

.md-typeset h4 {
  font-size: 0.82rem;
  margin-top: 1.7rem;
  margin-bottom: 0.4rem;
}

.md-typeset h5,
.md-typeset h6 {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: none;
  color: var(--md-default-fg-color--light);
}

.md-typeset a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--md-typeset-a-color) 40%, transparent);
  transition: color 110ms ease, text-decoration-color 110ms ease;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.md-typeset h1 a,
.md-typeset h2 a,
.md-typeset h3 a,
.md-typeset h4 a,
.md-typeset .md-button {
  text-decoration: none;
}

/* Steps are the one list that really is a sequence, so they get the rail:
   tabular red numerals, hanging, with the prose edge staying put. */
.md-typeset ol {
  list-style: none;
  counter-reset: bih-step;
  padding-inline-start: 2.2rem;
}

.md-typeset ol > li {
  counter-increment: bih-step;
  position: relative;
}

.md-typeset ol > li::before {
  content: counter(bih-step);
  position: absolute;
  inset-inline-start: -2.2rem;
  width: 1.5rem;
  text-align: end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bih-red);
}

.md-typeset ol ol > li::before {
  color: var(--bih-grey-500);
  font-weight: 500;
}

.md-typeset ul > li::marker {
  color: var(--bih-grey-500);
}

.md-typeset blockquote {
  font-style: italic;
  color: var(--md-default-fg-color--light);
  border-inline-start: 2px solid var(--bih-rose);
}

.md-typeset hr {
  border-bottom: 1px solid var(--bih-grey-200);
  margin: 2.6rem 0;
}

.md-typeset mark {
  background: rgba(234, 177, 172, 0.5);
}


/* 7. Code ----------------------------------------------------------------- */

.md-typeset code {
  font-size: 0.82em;
  padding: 0.12em 0.36em;
  border-radius: 2px;
}

.md-typeset pre {
  position: relative;
  border: 1px solid var(--bih-grey-200);
  border-inline-start: 2px solid color-mix(in srgb, var(--bih-navy) 72%, var(--md-default-bg-color));
  border-radius: 0;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--bih-cut)),
    calc(100% - var(--bih-cut)) 100%,
    0 100%
  );
}

[data-md-color-scheme="slate"] .md-typeset pre {
  border-inline-start-color: var(--bih-grey-500);
}

/* The cut edge, drawn back in so the corner looks trimmed, not missing. */
.md-typeset pre::after,
.md-typeset .admonition::after,
.md-typeset details::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: 6.5px;
  width: 20px;
  height: 1px;
  background: var(--bih-grey-300);
  transform: rotate(-45deg);
}

.md-typeset pre > code {
  border: 0;
  padding: 1rem 1.1rem;
  line-height: 1.58;
}

.md-typeset .highlight .filename {
  background: var(--bih-grey-100);
  border-bottom: 1px solid var(--bih-grey-200);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
}

.md-typeset .highlighttable .linenos {
  border-color: var(--bih-grey-200);
  color: var(--md-default-fg-color--lighter);
}

.md-clipboard {
  color: var(--md-default-fg-color--lighter);
}

.md-clipboard:hover {
  color: var(--bih-red);
}


/* 8. Tables --------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: 0.73rem;
}

.md-typeset table:not([class]) th {
  background: transparent;
  color: var(--bih-navy);
  font-weight: 700;
  border-bottom: 1px solid var(--bih-navy);
  padding: 0.85em 1em 0.7em;
  letter-spacing: 0.008em;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  color: var(--md-default-fg-color);
  border-bottom-color: var(--md-default-fg-color--light);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--bih-grey-200);
  padding: 0.78em 1em;
  font-variant-numeric: tabular-nums;
}

/* The first column is the key you read down, so it carries more weight.
   600 rather than 500 because Trebuchet only ships regular and bold. */
.md-typeset table:not([class]) td:first-child {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.md-typeset table:not([class]) tbody tr:first-child td {
  border-top: 0;
}

.md-typeset table:not([class]) tbody tr:last-child td {
  border-bottom: 1px solid var(--bih-grey-300);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--bih-grey-100);
  box-shadow: inset 3px 0 0 var(--bih-red);
}


/* 9. Admonitions — the secondary palette, doing a job ---------------------- */

/* One variable per type drives the rail, the title wash and the icon, so the
   secondary palette stays a code rather than a decoration. */
.md-typeset .admonition,
.md-typeset details {
  --bih-adm: var(--bih-grey-500);
  position: relative;
  font-size: 0.73rem;
  background: color-mix(in srgb, var(--bih-adm) 5%, var(--md-default-bg-color));
  border: 1px solid color-mix(in srgb, var(--bih-adm) 24%, var(--md-default-bg-color));
  border-inline-start: 3px solid var(--bih-adm);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--bih-cut)),
    calc(100% - var(--bih-cut)) 100%,
    0 100%
  );
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: color-mix(in srgb, var(--bih-adm) 10%, transparent);
  font-weight: 700;
  color: var(--md-default-fg-color);
  border-bottom: 1px solid color-mix(in srgb, var(--bih-adm) 22%, transparent);
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--bih-adm);
}

.md-typeset .note          { --bih-adm: var(--bih-blue); }
.md-typeset .abstract,
.md-typeset .summary,
.md-typeset .tldr          { --bih-adm: var(--bih-navy); }
.md-typeset .info,
.md-typeset .todo          { --bih-adm: var(--bih-periwinkle); }
.md-typeset .tip,
.md-typeset .hint,
.md-typeset .important     { --bih-adm: var(--bih-teal); }
.md-typeset .success,
.md-typeset .check,
.md-typeset .done          { --bih-adm: #2c6d61; }
.md-typeset .question,
.md-typeset .help,
.md-typeset .faq           { --bih-adm: var(--bih-periwinkle); }
.md-typeset .warning,
.md-typeset .caution,
.md-typeset .attention     { --bih-adm: var(--bih-ochre); }
.md-typeset .failure,
.md-typeset .fail,
.md-typeset .missing       { --bih-adm: var(--bih-coral); }
.md-typeset .danger,
.md-typeset .error,
.md-typeset .bug           { --bih-adm: var(--bih-red); }
.md-typeset .example       { --bih-adm: var(--bih-blue); }
.md-typeset .quote,
.md-typeset .cite          { --bih-adm: var(--bih-grey-500); }

[data-md-color-scheme="slate"] .md-typeset .abstract,
[data-md-color-scheme="slate"] .md-typeset .summary,
[data-md-color-scheme="slate"] .md-typeset .tldr { --bih-adm: var(--bih-blue); }


/* 10. Buttons -------------------------------------------------------------- */

.md-typeset .md-button {
  border-radius: 2px;
  border: 1px solid var(--bih-navy);
  color: var(--bih-navy);
  font-weight: 600;
  padding: 0.55em 1.2em;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  border-color: var(--md-default-fg-color--light);
  color: var(--md-default-fg-color);
}

.md-typeset .md-button:hover {
  background: var(--bih-navy);
  border-color: var(--bih-navy);
  color: #fff;
}

.md-typeset .md-button--primary {
  background: var(--bih-red);
  border-color: var(--bih-red);
  color: #fff;
}

.md-typeset .md-button--primary:hover {
  background: var(--bih-red-deep);
  border-color: var(--bih-red-deep);
  color: #fff;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  color: var(--bih-navy-deep);
}


/* 11. Quality floor ------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--bih-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title {
    background-color: var(--bih-navy);
    color: #fff;
  }
  .md-nav--primary .md-nav__title ~ .md-nav__list {
    box-shadow: none;
  }
}

@media screen and (max-width: 44.9375em) {
  /* The rail folds inward rather than hanging off the screen edge. */
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset blockquote {
    margin-inline-start: 0;
    padding-inline-start: 0.7rem;
  }
  .md-typeset ol { padding-inline-start: 1.8rem; }
  .md-typeset ol > li::before { inset-inline-start: -1.8rem; width: 1.2rem; }
  .md-typeset h1 { font-size: 1.62rem; }
  .md-typeset h2 { font-size: 1.22rem; margin-top: 2.3rem; }
}


/* 12. Playing nicely with the palette toggle ------------------------------ */
/*
   Material and Zensical stamp the palette onto the <body> element:

     <body data-md-color-scheme="default"
           data-md-color-primary="indigo"
           data-md-color-accent="indigo">

   and then define the palette tokens against those attributes:

     [data-md-color-primary=indigo] { --md-primary-fg-color: #3f51b5;
                                      --md-typeset-a-color:  #3f51b5; }
     [data-md-color-accent=indigo]  { --md-accent-fg-color:  #536dfe; }

   Anything this file declares on :root sits on <html>, one level up. Custom
   properties inherit, so the body declaration is the one that reaches the
   content — indigo wins no matter how late the override loads. That is why the
   header, the links and every hover state were reverting.

   The fix is to restate the affected tokens at a selector that outranks
   Material's: `body[data-md-color-primary]` (0,1,1) beats
   `[data-md-color-primary=indigo]` (0,1,0), and matches whatever colour name
   is configured, so this keeps working if the config changes.

   Cleaner alternative: delete the `primary:` and `accent:` lines from the
   palette config. Without them the attributes are never emitted, the :root
   tokens above are all that exist, and this whole section becomes unnecessary.
   Keep `scheme:` and `toggle:` — those are what the light/dark switch needs.
*/

body[data-md-color-primary] {
  --md-primary-fg-color: var(--bih-navy);
  --md-primary-fg-color--light: #2d4866;
  --md-primary-fg-color--dark: var(--bih-navy-deep);
  --md-primary-bg-color: var(--bih-primary-bg);
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
  --md-typeset-a-color: var(--bih-link);
}

body[data-md-color-accent] {
  --md-accent-fg-color: var(--bih-accent);
  --md-accent-fg-color--transparent: var(--bih-accent-wash);
  --md-accent-bg-color: var(--bih-primary-bg);
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* Fonts are injected as an inline :root block by the `font:` config, which
   outranks this file for the same reason. Restated here at body level. */
body[data-md-color-scheme] {
  --md-text-font: var(--bih-sans);
  --md-code-font: var(--bih-mono);
}


/* 13. Modern polish ------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* Anchored headings land below the sticky bar, not under it. */
  scroll-padding-top: 4.5rem;
}

html {
  /* The track needs a colour of its own. Left transparent it shows the page
     background, which reads as a reserved empty column beside the navy bars —
     see the note in section 16. */
  scrollbar-color: var(--md-default-fg-color--lightest) var(--bih-grey-100);
  scrollbar-width: thin;
}

body {
  accent-color: var(--bih-red);
  caret-color: var(--bih-red);
}

/* Headings break where the sense is, not where the box ends; body copy avoids
   leaving a single word alone on the last line. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset .admonition-title,
.md-typeset summary {
  text-wrap: balance;
}

.md-typeset p,
.md-typeset li {
  text-wrap: pretty;
}

.md-typeset pre > code {
  tab-size: 2;
}

/* Scrolling a wide code block shouldn't trigger the browser's back-swipe. */
.md-typeset pre > code {
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.md-typeset :is(h1, h2, h3, h4)[id] {
  scroll-margin-top: 4.5rem;
}

/* Interactive states settle rather than snap. */
.md-nav__link,
.md-tabs__link,
.md-clipboard,
.md-footer__link {
  transition: color 130ms ease, opacity 130ms ease;
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color 130ms ease, box-shadow 130ms ease;
}

@media (prefers-contrast: more) {
  :root {
    --bih-grey-200: #b8b8b8;
    --bih-grey-300: #8f8f8f;
    --md-default-fg-color--light: #3c4855;
  }
  .md-typeset a { text-decoration-thickness: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* 14. Print --------------------------------------------------------------- */

@media print {
  .md-header,
  .md-footer,
  .md-sidebar,
  .md-tabs {
    display: none;
  }

  .md-typeset {
    color: #000;
    font-size: 10pt;
  }

  .md-typeset h1::before { background: #000; }
  .md-typeset h2, .md-typeset h3 { break-after: avoid; }
  .md-typeset pre, .md-typeset .admonition, .md-typeset table { break-inside: avoid; }

  /* Links are useless on paper unless you can read where they went. */
  .md-typeset a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }
}


/* 15. Modern web UI ------------------------------------------------------- */
/*
   Everything below is progressive: each block is gated on support, and the
   page is complete and correct without any of it.
*/

/* A reading line across the foot of the header, driven by scroll position
   alone — no script, no measurement, no scroll listener. */
@supports (animation-timeline: scroll()) {
  .md-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--bih-red);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: bih-read linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes bih-read {
    to { transform: scaleX(1); }
  }
}

/* Page-to-page navigation cross-fades instead of flashing white. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

/* Disclosures open and close at a real height rather than snapping. */
@supports selector(::details-content) {
  :root {
    interpolate-size: allow-keywords;
  }

  .md-typeset details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
      block-size 240ms ease,
      opacity 180ms ease,
      content-visibility 240ms allow-discrete;
  }

  .md-typeset details[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Follow an anchor and the heading says so, briefly. */
.md-typeset :is(h1, h2, h3, h4):target {
  animation: bih-land 1600ms ease-out;
}

@keyframes bih-land {
  0%, 30% { background-color: color-mix(in srgb, var(--bih-rose) 45%, transparent); }
  100%    { background-color: transparent; }
}

/* Finished tasks recede. */
.md-typeset li:has(> .task-list-control input:checked),
.md-typeset li:has(> input[type="checkbox"]:checked) {
  color: var(--md-default-fg-color--lighter);
}

/* Buttons take a press. */
.md-typeset .md-button {
  transform: translateY(0);
  transition:
    background-color 130ms ease,
    border-color 130ms ease,
    color 130ms ease,
    transform 90ms ease,
    box-shadow 130ms ease;
}

.md-typeset .md-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(26, 43, 62, 0.14);
}

.md-typeset .md-button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Permalinks stay out of the way until you go looking for them. */
.md-typeset .headerlink {
  opacity: 0;
  transition: opacity 130ms ease;
}

.md-typeset :is(h1, h2, h3, h4):hover .headerlink,
.md-typeset .headerlink:focus-visible {
  opacity: 0.55;
}

:focus-visible {
  transition: outline-offset 110ms ease;
}

/* Switching light and dark settles instead of flipping. */
@media (prefers-reduced-motion: no-preference) {
  body,
  .md-header,
  .md-footer,
  .md-typeset pre,
  .md-typeset code,
  .md-typeset .admonition,
  .md-typeset details {
    transition:
      background-color 240ms ease,
      border-color 240ms ease,
      color 240ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-header::after { animation: none; transform: scaleX(0); }
  .md-typeset :is(h1, h2, h3, h4):target { animation: none; }
  @view-transition { navigation: none; }
}


/* 16. Chrome contrast and the empty rail ----------------------------------- */
/*
   Two things this theme broke by changing the chrome colour.

   Zensical and Material derive header and footer text from palette tokens
   (--md-primary-bg-color, --md-footer-fg-color) that are set for whatever
   chrome the stock theme ships. This file repaints the header and footer navy
   without touching those tokens, so the text kept whatever colour the stock
   chrome wanted — dark text on a dark bar. Both are now set explicitly, and
   inherited down rather than left to the tokens.

   White on #233952 is 11.6:1; the muted variants below stay above 4.5:1.
*/

body[data-md-color-scheme] {
  --bih-on-dark: #ffffff;
  --md-primary-bg-color: var(--bih-on-dark);
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.76);
  --md-footer-fg-color: var(--bih-on-dark);
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.76);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.58);
}

.md-header,
.md-tabs,
.md-footer,
.md-footer-meta {
  color: var(--bih-on-dark);
}

.md-header a,
.md-header button,
.md-header label,
.md-header .md-icon,
.md-tabs a,
.md-footer a,
.md-footer__link,
.md-footer__title,
.md-copyright__highlight {
  color: inherit;
}

.md-header svg,
.md-tabs svg,
.md-footer svg {
  fill: currentColor;
}

.md-footer__direction {
  color: rgba(255, 255, 255, 0.72);
}

/* The search field lives on the navy bar too. */
.md-search__input,
.md-search__icon {
  color: var(--bih-on-dark);
}

.md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.66);
}

/* The search panel itself is a light surface, so it opts back out. */
.md-search__output,
.md-search__scrollwrap {
  color: var(--md-default-fg-color);
}

/*
   The right-hand column is the table of contents. When a page has no headings
   to list, Material still reserves the column, which reads as a stripe of bare
   background. Collapse it when there is nothing in it.
*/
.md-sidebar--secondary:not(:has(.md-nav__link)) {
  display: none;
}

.md-sidebar--secondary .md-nav__link {
  color: var(--md-default-fg-color--light);
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--md-typeset-a-color);
}


/* 17. Everything in the footer, and the scrollbar note --------------------- */
/*
   A blanket rule for the footer, written with :where() so it has zero
   specificity and every named rule in this file still beats it. Anything
   Zensical adds later — social icons, a generator line, a consent notice —
   inherits white on navy instead of arriving with its own light-chrome colour.
*/

.md-footer :where(a, button, span, p, li, small, strong, em, time) {
  color: inherit;
}

.md-footer :where(svg, path) {
  fill: currentColor;
}

/*
   The blanket rule above is (0,1,1). Material declares

     .md-footer-meta.md-typeset a { color: var(--md-footer-fg-color--light); }

   which is (0,2,1) — two classes and an element — so it beat the blanket rule
   and the social row and generator line kept the stock chrome colour. These
   selectors match or exceed it, so they land.
*/

.md-footer-meta.md-typeset a,
.md-footer .md-footer-meta a,
.md-footer .md-social__link,
.md-footer .md-copyright,
.md-footer .md-copyright__highlight {
  color: rgba(255, 255, 255, 0.78);
}

.md-footer-meta.md-typeset a:hover,
.md-footer .md-footer-meta a:hover,
.md-footer .md-social__link:hover,
.md-footer .md-social__link:focus-visible {
  color: #ffffff;
}

.md-footer .md-social__link {
  transition: color 130ms ease, transform 130ms ease;
}

.md-footer .md-social__link:hover {
  transform: translateY(-1px);
}

.md-footer .md-social__link svg,
.md-footer .md-footer-meta svg {
  fill: currentColor;
  max-height: 0.8rem;
}

/* Generator / consent / custom blocks that sit under the meta bar. */
.md-footer-meta :where(.md-footer-custom, .md-consent, .md-generator) {
  color: var(--md-footer-fg-color--light);
}

/*
   On the strip at the right edge: that is the scrollbar track, and it sits
   outside the layout viewport. The header and footer are laid out inside the
   viewport, so they physically cannot extend across it — no CSS reaches there.

   It only became visible because this file styled the scrollbar with a
   transparent track, which let the page background show through and made it
   read as a reserved column. The track now has a colour of its own (see
   section 13), so it looks like a scrollbar again rather than a gap.

   If you would rather have no strip at all, delete the `scrollbar-color`,
   `scrollbar-width` and `::-webkit-scrollbar*` rules entirely and take the
   browser's native scrollbar. On macOS and iOS that is an overlay scrollbar,
   which reserves no space and leaves the bars genuinely edge to edge.
*/


/* 18. Signal -------------------------------------------------------------- */
/*
   One idea, borrowed from how agentic systems are drawn rather than how they
   are marketed: a trace is a thread with nodes on it. No glow, no gradient
   mesh, no neon — just a hairline, a marker, and a caret.

   It shows up in the two places on a docs page that genuinely are traces:
   a numbered procedure, which is a run of steps, and the table of contents,
   which is your position in the document. Plus a caret in the header, and
   mono for the labels that are machine-facing rather than prose.
*/

/* --- the thread on a numbered procedure --- */

.md-typeset ol {
  position: relative;
}

.md-typeset ol::before {
  content: "";
  position: absolute;
  inset-block: 0.75em 0.75em;
  inset-inline-start: 1.72rem;
  width: 1px;
  background: color-mix(in srgb, var(--bih-red) 26%, transparent);
}

/* Nested lists are sub-steps, not their own run. */
.md-typeset ol ol::before {
  display: none;
}

/* --- your position in the page, as a node on the line --- */

.md-nav--secondary .md-nav__link {
  position: relative;
}

.md-nav--secondary .md-nav__link--active {
  font-weight: 600;
}

/* If the dot sits off the vertical rule on your build, this offset is the one
   number to nudge — it has to clear the list's border and padding. */
.md-nav--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.78rem;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bih-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bih-red) 16%, transparent);
}

/* --- the caret --- */

.md-header__title::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.84em;
  margin-inline-start: 0.3em;
  vertical-align: -0.08em;
  background: var(--bih-coral);
}

/* Slow enough to read as alive rather than as a blinking cursor. */
@media (prefers-reduced-motion: no-preference) {
  .md-header__title::after {
    animation: bih-pulse 3.4s ease-in-out infinite;
  }
}

@keyframes bih-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* --- mono for the machine-facing labels --- */
/* Prose stays in Trebuchet. The things that name or address something — a
   filename, the contents list, a minor label — go to the mono stack, which
   reads as an identifier rather than a sentence. */

.md-sidebar--secondary .md-nav__title,
.md-typeset .highlight .filename,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--bih-mono);
  font-size: 0.64rem;
  letter-spacing: 0.005em;
}

.md-typeset h5,
.md-typeset h6 {
  font-size: 0.7rem;
}

/* --- attention --- */
/* Hovering a block brings its rail up to the accent, the way a selected node
   lights in a graph view. Nothing moves; only the edge changes. */

.md-typeset pre,
.md-typeset .admonition,
.md-typeset details {
  transition: border-color 170ms ease, background-color 170ms ease;
}

.md-typeset pre:hover {
  border-inline-start-color: var(--bih-red);
}

.md-typeset .admonition:hover,
.md-typeset details:hover {
  background: color-mix(in srgb, var(--bih-adm) 8%, var(--md-default-bg-color));
  border-color: color-mix(in srgb, var(--bih-adm) 34%, var(--md-default-bg-color));
  border-inline-start-color: var(--bih-adm);
}


/* 19. Surfaces and scale --------------------------------------------------- */
/*
   Four decisions, rather than more detail:

     1. The page is a sheet on a canvas. Content sits on white, the surround is
        a cool grey with navy in it. Depth, and a defined column to read in.
     2. Code is a navy plate. The brand colour finally gets a surface big
        enough to register, and dark code on a light page is the single
        strongest contrast on the page.
     3. The title is allowed to be large. 2.6rem, tightly tracked — scale is
        the one way to be striking without adding ornament.
     4. Admonitions carry their colour in the title, not just the edge.
*/

/* --- 1. sheet on canvas --- */

:root,
[data-md-color-scheme="default"] {
  --bih-canvas: #e9ecf1;
  --bih-sheet-edge: #dfe3ea;
}

[data-md-color-scheme="slate"] {
  --bih-canvas: #0d151d;
  --bih-sheet-edge: #223040;
}

body {
  background-color: var(--bih-canvas);
}

.md-main__inner {
  margin-top: 1.4rem;
}

.md-content {
  background-color: var(--md-default-bg-color);
  border: 1px solid var(--bih-sheet-edge);
  border-radius: 6px;
  margin-bottom: 2.6rem;
  box-shadow:
    0 1px 2px rgba(26, 43, 62, 0.04),
    0 10px 28px -14px rgba(26, 43, 62, 0.16);
}

/* The rail hangs 1rem into the margin, so the sheet needs room for it. */
.md-content__inner {
  padding-inline: 2rem;
  padding-block: 1.4rem 4rem;
}

@media screen and (max-width: 76.1875em) {
  .md-content {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .md-content__inner { padding-inline: 1.2rem; }
}

/* --- 2. code as a navy plate --- */
/* The highlight tokens are redeclared on the block itself, so every span
   inside inherits the dark set while inline code stays light. */

.md-typeset pre > code {
  --md-code-fg-color: #d9e2ec;
  --md-code-bg-color: #1b2b3d;
  --md-code-hl-color: rgba(234, 177, 172, 0.16);
  --md-code-hl-comment-color: #7d8b9c;
  --md-code-hl-keyword-color: #c7a3e4;
  --md-code-hl-string-color: #86cfc0;
  --md-code-hl-number-color: #e3b276;
  --md-code-hl-function-color: #8fb4e8;
  --md-code-hl-name-color: #d9e2ec;
  --md-code-hl-operator-color: #a8b6c5;
  --md-code-hl-punctuation-color: #a8b6c5;
  --md-code-hl-variable-color: #e0b9b4;
  --md-code-hl-constant-color: #e3b276;
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  padding: 1.15rem 1.25rem;
}

.md-typeset pre {
  border: 0;
  border-inline-start: 3px solid var(--bih-coral);
  background-color: #1b2b3d;
}

[data-md-color-scheme="slate"] .md-typeset pre {
  border-inline-start-color: var(--bih-coral);
}

.md-typeset pre:hover {
  border-inline-start-color: var(--bih-rose);
}

.md-typeset .highlight .filename {
  background-color: #16242f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.62);
}

.md-typeset .highlighttable .linenos {
  background-color: #16242f;
  border-color: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.38);
}

.md-clipboard {
  color: rgba(255, 255, 255, 0.45);
}

.md-clipboard:hover {
  color: var(--bih-rose);
}

/* --- 3. scale --- */

.md-typeset h1 {
  font-size: 2.6rem;
  line-height: 1.08;
  letter-spacing: -0.026em;
  margin-bottom: 1.5rem;
}

.md-typeset h1::before {
  width: 5px;
  top: 0.14em;
  bottom: 0.18em;
}

.md-typeset h1 + p {
  font-size: 0.95rem;
  line-height: 1.58;
}

.md-typeset h2 {
  font-size: 1.55rem;
  letter-spacing: -0.017em;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset h1 { font-size: 1.95rem; }
  .md-typeset h2 { font-size: 1.3rem; }
}

/* --- 4. admonitions wear their colour --- */
/* Mixed toward the body colour so ochre and teal stay legible in both
   schemes instead of going pale on dark. */

.md-typeset .admonition-title,
.md-typeset summary {
  background: color-mix(in srgb, var(--bih-adm) 12%, transparent);
  color: color-mix(in srgb, var(--bih-adm) 72%, var(--md-default-fg-color));
  font-size: 0.76rem;
  letter-spacing: -0.004em;
}


/* 20. Architecture -------------------------------------------------------- */
/*
   Continuing the same logic: give structure real surfaces, and let the navy
   appear wherever something is a container rather than prose.
*/

/* --- section rules run the full width of the sheet --- */
/* A section break should read as a break in the page, not a line under some
   text. The rule extends past the text column to the sheet's own edges. */

.md-typeset h2 {
  border-top: 0;
}

.md-typeset h2::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: -1rem;
  width: calc(100% + 3rem);
  height: 1px;
  background: var(--bih-grey-200);
}

@media screen and (max-width: 76.1875em) {
  .md-typeset h2::after {
    inset-inline-start: -1.2rem;
    width: calc(100% + 2.4rem);
  }
}

@media screen and (max-width: 44.9375em) {
  .md-typeset h2::after {
    inset-inline-start: -1.2rem;
    width: calc(100% + 2.4rem);
  }
}

/* --- the table header is a navy band --- */
/* Same surface language as the code plate: a container gets the brand colour,
   prose never does. Mono, because a column name is a label. */

.md-typeset table:not([class]) th,
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--bih-navy);
  color: #ffffff;
  border-bottom: 0;
  font-family: var(--bih-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  padding: 0.72em 1em;
}

.md-typeset table:not([class]) thead tr th:first-child {
  border-start-start-radius: 4px;
}

.md-typeset table:not([class]) thead tr th:last-child {
  border-start-end-radius: 4px;
}

.md-typeset table:not([class]) tbody tr:first-child td {
  border-top: 0;
  padding-top: 0.85em;
}

/* --- inline code picks up the navy --- */

.md-typeset code {
  background-color: color-mix(in srgb, var(--bih-navy) 7%, var(--md-default-bg-color));
  color: color-mix(in srgb, var(--bih-navy) 80%, var(--md-default-fg-color));
  border: 1px solid color-mix(in srgb, var(--bih-navy) 13%, var(--md-default-bg-color));
  border-radius: 3px;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: color-mix(in srgb, #ffffff 6%, var(--md-default-bg-color));
  color: #d9e2ec;
  border-color: color-mix(in srgb, #ffffff 11%, var(--md-default-bg-color));
}

.md-typeset a code {
  color: inherit;
  border-color: color-mix(in srgb, var(--md-typeset-a-color) 30%, transparent);
}

/* --- the sidebars read as chrome, not as more page --- */

.md-nav__title {
  font-family: var(--bih-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.014em;
  color: var(--md-default-fg-color--light);
}

.md-nav--primary > .md-nav__list > .md-nav__item--nested > .md-nav__link {
  font-family: var(--bih-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.012em;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--bih-sheet-edge);
  margin-top: 0.8em;
  padding-top: 0.85em;
}

.md-nav--primary > .md-nav__list > .md-nav__item--nested:first-child > .md-nav__link {
  border-top: 0;
  margin-top: 0;
}

/* --- details inside the navy plate --- */

.md-typeset pre > code {
  scrollbar-color: rgba(255, 255, 255, 0.24) #16242f;
}

.md-typeset pre > code::-webkit-scrollbar-track {
  background: #16242f;
}

.md-typeset pre > code::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}

.md-typeset pre ::selection {
  background: rgba(234, 177, 172, 0.3);
}

.md-typeset pre :focus-visible {
  outline-color: var(--bih-rose);
}

/* --- buttons sized to the new scale --- */

.md-typeset .md-button {
  font-size: 0.74rem;
  padding: 0.62em 1.35em;
  border-radius: 3px;
}

/* --- a quotation is a voice, so give it room --- */

.md-typeset blockquote {
  font-size: 0.86rem;
  line-height: 1.68;
  padding-inline-start: 1.25rem;
}


/* 21. Surface treatment ---------------------------------------------------- */
/*
   Texture, light and depth — all of it made from gradients and shadows, so
   nothing is downloaded. The rule I held to: texture belongs on surfaces you
   don't read, light belongs where an edge would catch it, and every value here
   is under 10% except the plate gradient.
*/

:root,
[data-md-color-scheme="default"] {
  --bih-dot: rgba(35, 57, 82, 0.1);
  --bih-lift: rgba(255, 255, 255, 0.9);
  --bih-cast: rgba(26, 43, 62, 0.16);
}

[data-md-color-scheme="slate"] {
  --bih-dot: rgba(255, 255, 255, 0.05);
  --bih-lift: rgba(255, 255, 255, 0.045);
  --bih-cast: rgba(0, 0, 0, 0.5);
}

/* --- the canvas is a workbench --- */
/* A dot grid behind the sheet, fixed so it reads as a surface the page is
   resting on rather than something scrolling with it. It never sits under
   body text — the sheet covers it in the reading area. */

body {
  background-image:
    radial-gradient(circle at center, var(--bih-dot) 1px, transparent 1.2px),
    radial-gradient(60rem 34rem at 78% -8rem, rgba(202, 94, 87, 0.09), transparent 72%);
  background-size: 22px 22px, 100% 60rem;
  background-repeat: repeat, no-repeat;
  background-attachment: fixed, fixed;
}

/* --- the sheet is lit from above --- */

.md-content {
  background-image:
    radial-gradient(52rem 20rem at 6% -5rem, rgba(202, 94, 87, 0.07), transparent 70%);
  box-shadow:
    inset 0 1px 0 var(--bih-lift),
    0 1px 2px rgba(26, 43, 62, 0.05),
    0 18px 40px -22px var(--bih-cast);
}

/* --- the plate is an object --- */
/* A vertical gradient across the top, a highlight on the top edge, a cast
   shadow underneath, and a bloom of coral bleeding in from the rail. */

.md-typeset pre {
  box-shadow:
    0 16px 32px -22px rgba(13, 22, 33, 0.85),
    inset 8px 0 22px -16px rgba(202, 94, 87, 0.9);
}

.md-typeset pre > code {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 180px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.md-typeset pre:hover {
  box-shadow:
    0 18px 34px -20px rgba(13, 22, 33, 0.9),
    inset 10px 0 26px -16px rgba(202, 94, 87, 1);
}

/* --- the bars have a light source --- */

.md-header {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}

.md-footer {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* --- admonitions glow at the edge they are keyed by --- */

.md-typeset .admonition,
.md-typeset details {
  box-shadow: inset 7px 0 18px -14px color-mix(in srgb, var(--bih-adm) 85%, transparent);
}

.md-typeset .admonition:hover,
.md-typeset details:hover {
  box-shadow: inset 9px 0 22px -14px color-mix(in srgb, var(--bih-adm) 100%, transparent);
}

/* --- the primary button is struck, not filled --- */

.md-typeset .md-button--primary {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 18px -12px rgba(180, 46, 32, 0.95);
}

.md-typeset .md-button--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 12px 22px -12px rgba(180, 46, 32, 1);
}

/* --- the table band gets the same top light --- */

.md-typeset table:not([class]) th {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* --- the caret earns a faint bloom --- */

.md-header__title::after {
  box-shadow: 0 0 8px rgba(202, 94, 87, 0.75);
}

/* --- the active page marker, likewise --- */

.md-nav--primary .md-nav__link--active::before,
.md-nav--primary .md-nav__link[aria-current="page"]::before {
  box-shadow: 0 0 9px -1px color-mix(in srgb, var(--bih-red) 75%, transparent);
}