/* ==========================================================================
   OpenBiota documentation — the main site's design applied to MkDocs Material.

   Tokens, type and components are lifted from openbiota.com/style.css so
   openbiota.com and openbiota.com/docs/ read as one site: paper background,
   forest ink, Georgia display headings, DM Sans body, Manrope labels,
   hairline rules, white cards, dark 8px buttons.

   Material's root font size is 125% (1rem = 20px) and .md-typeset is .8rem,
   so px values are used wherever the main site uses px.
   ========================================================================== */

/* Self-hosted variable fonts, shared with the landing page (SIL Open Font License). */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../fonts/dm-sans-latin.woff2) format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../fonts/dm-sans-latin-ext.woff2) format('woff2');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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../fonts/manrope-latin.woff2) format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../fonts/manrope-latin-ext.woff2) format('woff2');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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../../fonts/jetbrains-mono-latin.woff2) format('woff2');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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Material sets its palette under [data-md-color-scheme], which outranks
   :root, so the tokens are declared on both. */
:root,
[data-md-color-scheme="default"] {
  --paper: #f6f6ef;
  --ink: #193e30;
  --muted: #61765b;
  --line: #d7dfd0;
  --forest: #092b22;
  --sage: #5f7c68;
  --sage-light: #829c6e;
  --leaf: #668857;
  --card: #ffffff;
  --wash: #e9eedf;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', Arial, sans-serif;
  --heading: 'Manrope', Arial, sans-serif;
  --ob-header-height: 84px;

  /* Material's palette, mapped onto the site's tokens. */
  --md-default-bg-color: var(--paper);
  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: #9aac91;
  --md-default-fg-color--lightest: var(--line);
  --md-primary-fg-color: var(--forest);
  --md-primary-fg-color--light: #18523c;
  --md-primary-fg-color--dark: var(--forest);
  --md-primary-bg-color: #f2f5e7;
  --md-accent-fg-color: var(--leaf);
  --md-accent-fg-color--transparent: rgba(102, 136, 87, 0.1);
  --md-typeset-color: var(--ink);
  --md-typeset-a-color: #2f6b52;
  --md-typeset-mark-color: #dcebbb;
  --md-typeset-kbd-color: var(--wash);
  --md-typeset-kbd-accent-color: #fff;
  --md-typeset-kbd-border-color: var(--line);
  --md-typeset-table-color: var(--line);
  --md-typeset-table-color--light: #eef0e6;
  --md-code-bg-color: #eceee3;
  --md-code-fg-color: var(--ink);
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: var(--ink);
  --md-footer-fg-color--light: var(--muted);
  --md-footer-fg-color--lighter: var(--muted);
  --md-shadow-z1: 0 1px 2px rgba(9, 43, 34, 0.04), 0 8px 24px rgba(9, 43, 34, 0.05);
  --md-shadow-z2: 0 1px 2px rgba(9, 43, 34, 0.06), 0 16px 40px rgba(9, 43, 34, 0.08);
  --md-shadow-z3: 0 2px 4px rgba(9, 43, 34, 0.08), 0 24px 56px rgba(9, 43, 34, 0.12);
  --md-text-font: var(--sans);
  --md-code-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

/* Scrollbars inside the sidebars: thin, the site's hairline green, no
   reserved gutter, so they only appear when a list is taller than the
   viewport and read as part of the design when they do. */
.md-sidebar__scrollwrap {
  scrollbar-width: thin;
  scrollbar-gutter: auto;
  scrollbar-color: rgba(9, 43, 34, 0.14) transparent;
}
.md-sidebar__scrollwrap:hover { scrollbar-color: rgba(9, 43, 34, 0.26) transparent; }
.md-sidebar__scrollwrap::-webkit-scrollbar { width: 6px; height: 6px; }
.md-sidebar__scrollwrap::-webkit-scrollbar-track { background: transparent; }
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb { background: rgba(9, 43, 34, 0.14); border-radius: 6px; }
.md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb { background: rgba(9, 43, 34, 0.26); }

/* Text selection in the site's forest green, type in paper white. */
::selection { background: #18523c; color: #f2f5e7; }
::-moz-selection { background: #18523c; color: #f2f5e7; }

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

/* --------------------------------------------------------------------------
   Header — the main site's header, on the docs
   -------------------------------------------------------------------------- */

.ob-header {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: var(--ob-header-height);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
  color: var(--ink);
  transition: none;
}
.ob-header[hidden] { transform: none; }
/* Same row as openbiota.com/style.css .header: 16px vertical padding,
   30px gaps, the wrap's horizontal padding formula. */
.ob-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 30px;
  /* The main site's 84px includes its 1px bottom border (border-box). */
  min-height: calc(var(--ob-header-height) - 1px);
  padding: 16px var(--ob-side-pad);
}
:root, [data-md-color-scheme="default"] { --ob-side-pad: max(28px, calc((100vw - 1336px) / 2)); }
.ob-brand { display: inline-flex; flex: 0 0 auto; }
.ob-brand img { width: 166px; height: auto; display: block; }

.ob-nav {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-left: auto;
  font-size: 14px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.ob-nav a { color: var(--ink); padding-block: 10px; line-height: 1.7; text-decoration: none; }
.ob-nav a:hover { color: var(--leaf); }

.ob-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ob-header .icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }

/* The site's .button, usable in the header and in Markdown as
   { .ob-button .ob-button--dark }. */
.ob-button, .md-typeset .ob-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 15px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 550 14px/1.4 var(--sans);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s;
}
.ob-button--dark, .md-typeset .ob-button--dark { background: var(--forest); color: #f2f5e7; }
.ob-button--dark:hover, .md-typeset .ob-button--dark:hover { background: #18523c; color: #f2f5e7; }
.ob-button--quiet, .md-typeset .ob-button--quiet { background: transparent; color: var(--ink); }
.ob-button--quiet:hover, .md-typeset .ob-button--quiet:hover { background: var(--wash); }
.ob-button--outline, .md-typeset .ob-button--outline { border-color: #bbc9b1; color: var(--ink); }
.ob-button--outline:hover, .md-typeset .ob-button--outline:hover { background: var(--wash); }

/* The menu button, drawn like the main site's .menu-toggle (44px, 40px on
   phones). Hidden while the section links are in the bar. */
.ob-header .md-header__button.md-icon {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}
.ob-header .md-header__button.md-icon:hover { color: var(--leaf); opacity: 1; }
.ob-header .md-header__button.md-icon svg { width: 20px; height: 20px; fill: none; }

/* ---- Breakpoints: the main site's, to the pixel --------------------------
   >1250      full bar: 84px, 166px wordmark, row gap 30, links gap 25,
              buttons gap 12 / padding 15
   1101–1250  side padding fixed at 28, row gap 20, links gap 18,
              buttons gap 8 / padding 12
   761–1100   links folded into the 44px menu button, 151px wordmark,
              row gap 14, buttons padding 10
   ≤760       72px bar, 12px 20px padding, row gap 10, buttons hidden
              (report bar at the bottom of the screen instead), 40px menu
   Material folds its page sidebar at 1220px, so between 1101 and 1220 the
   sidebar is put back in the flow (below) and the bar keeps its links. */
@media (max-width: 1250px) {
  :root, [data-md-color-scheme="default"] { --ob-side-pad: 28px; }
  .ob-header__inner { gap: 20px; }
  .ob-nav { gap: 18px; }
  .ob-actions { gap: 8px; }
  .ob-actions .ob-button { padding-inline: 12px; }
}
@media (max-width: 1100px) {
  .ob-brand img { width: 151px; }
  .ob-header__inner { gap: 14px; }
  .ob-nav { display: none; }
  .ob-actions { margin-left: auto; }
  .ob-actions .ob-button { padding-inline: 10px; }
  .ob-header .md-header__button.ob-drawer { display: grid; }
}
@media (max-width: 760px) {
  :root, [data-md-color-scheme="default"] { --ob-side-pad: 20px; --ob-header-height: 72px; }
  .ob-header__inner { padding: 12px 20px; gap: 10px; }
  .ob-actions .ob-button { display: none; }
  .ob-header .md-header__button.ob-drawer { width: 40px; height: 40px; }
}

/* Sticky sidebars and anchor targets clear the taller header. Material
   measures the header and sizes the sidebars itself; no height override. */
@media screen and (min-width: 1101px) {
  .md-sidebar { top: var(--ob-header-height); }
}
.md-typeset :target { --md-scroll-margin: calc(var(--ob-header-height) + 24px); }
.md-main__inner { margin-top: 32px; }

/* --------------------------------------------------------------------------
   Sidebars
   -------------------------------------------------------------------------- */

.md-nav { font-family: var(--sans); font-size: 14px; }
.md-nav__title,
.md-nav__item--section > .md-nav__link {
  font: 600 12px/1.6 var(--heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}
.md-sidebar--secondary .md-nav__title { padding-left: 0; }
.md-nav__link { color: var(--ink); }
.md-nav__link:hover, .md-nav__link:focus { color: var(--leaf); }
.md-nav__link--active, .md-nav__link--active:hover { color: var(--ink); font-weight: 600; }
.md-nav__item .md-nav__link--active { position: relative; }
.md-sidebar--primary .md-nav__link--active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--sage-light);
}
.md-sidebar--secondary .md-nav__link { color: var(--muted); }
.md-sidebar--secondary .md-nav__link--active { color: var(--ink); }

/* On desktop the header already carries the wordmark, so the sidebar does
   not repeat the logo and site name above the page list. */
@media (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }
  .md-sidebar--primary .md-nav--primary > .md-nav__list { padding-top: 0; }
}

/* Between 1101px and Material's 1220px sidebar breakpoint the bar is the
   full bar (no menu button), so the page list has to be where it is on
   desktop: a sticky sidebar in the flow. Material's drawer styling for this
   range is undone here. */
@media screen and (min-width: 1101px) and (max-width: 76.234375em) {
  [dir="ltr"] .md-sidebar--primary,
  [dir="rtl"] .md-sidebar--primary,
  .md-sidebar--primary {
    position: sticky;
    top: var(--ob-header-height);
    left: auto;
    right: auto;
    width: 12.1rem;
    height: auto;
    padding: 1.2rem 0;
    flex-shrink: 0;
    align-self: flex-start;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
    z-index: auto;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap { position: relative; inset: auto; height: auto !important; max-height: none; margin: 0 0.2rem; overflow: visible; }
  .md-nav--primary,
  .md-nav--primary .md-nav { position: static; display: block; height: auto; background: transparent; }
  .md-nav--primary > .md-nav__list,
  .md-nav--primary .md-nav__title ~ .md-nav__list { flex: none; overflow: visible !important; box-shadow: none !important; padding: 0; }
  .md-nav--primary .md-nav__item { padding: 0 0.6rem; border: 0; }
  .md-nav--primary .md-nav__link { margin-top: 0.625em; padding: 0; font-size: 14px; line-height: 1.3; color: var(--ink); }
  .md-nav--primary .md-nav__link--active { font-weight: 600; }
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__source,
  .md-nav--primary .md-nav__icon,
  .md-nav--primary .md-nav__item--active > .md-nav--secondary { display: none !important; }
}

/* At and below 1100px the section links are in the menu, as on the main
   site, and the page list opens as a plain panel under the header — not
   Material's full-height drawer with its title block, logo and GitHub bar.
   The header stays put (wordmark, menu button to close); a tap anywhere
   else closes it. */
@media screen and (max-width: 1100px) {
  [dir="ltr"] .md-sidebar--primary,
  [dir="rtl"] .md-sidebar--primary,
  .md-sidebar--primary {
    position: fixed;
    /* one pixel up, over the header's bottom border: one continuous surface */
    top: calc(var(--ob-header-height) - 1px);
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: auto;
    max-height: calc(100vh - var(--ob-header-height));
    padding: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 20px rgba(9, 43, 34, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s, transform 0.18s, visibility 0s 0.18s;
    /* above Material's tap-outside overlay (z-index 5), below nothing else */
    z-index: 6;
  }
  [dir="ltr"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary,
  [dir="rtl"] [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary,
  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: 0 14px 20px rgba(9, 43, 34, 0.05);
    transition: opacity 0.18s, transform 0.18s;
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: static;
    height: auto !important; /* Material's JS sets a full-height inline style */
    max-height: calc(100vh - var(--ob-header-height) - 1px);
    margin: 0;
    overflow-y: auto;
  }
  .md-sidebar--primary .md-sidebar__inner { padding: 10px 20px 16px; }
  .md-nav--primary,
  .md-nav--primary .md-nav { position: static; display: block; height: auto; background: transparent; }
  .md-nav--primary > .md-nav__list,
  .md-nav--primary .md-nav__title ~ .md-nav__list { flex: none; overflow: visible !important; padding: 0; box-shadow: none !important; }
  .md-nav--primary .md-nav__title,
  .md-nav--primary .md-nav__source,
  .md-nav--primary .md-nav__icon,
  .md-nav--primary .md-nav__item--active > .md-nav--secondary { display: none !important; }
  .md-nav--primary .md-nav__item { padding: 0; border: 0; }
  .md-nav--primary .md-nav__link {
    margin: 0;
    padding: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
  }
  .md-nav--primary .md-nav__link:hover { color: var(--leaf); }
  .md-nav--primary .md-nav__link--active { font-weight: 600; }
  .md-sidebar--primary .md-nav__link--active::before { display: none; }
  /* Material's tap-outside-to-close layer: keep it, make it invisible, and
     start it below the header so the header stays live. */
  .md-overlay { top: var(--ob-header-height); background: transparent; }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.md-typeset {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.md-typeset p { text-wrap: pretty; }
.md-typeset h1 {
  font: 400 44px/1.1 var(--serif);
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 20px;
}
.md-typeset h1 em, .md-typeset h2 em { font-style: italic; font-weight: 400; color: #69855d; }
.md-typeset h2 {
  font: 400 31px/1.15 var(--serif);
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 2.2em 0 0.7em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
}
.md-typeset h1 + h2, .md-typeset .eyebrow + h2 { border-top: 0; padding-top: 0; margin-top: 1.2em; }
/* Pages that separate sections with `---` already have a rule; do not draw two. */
.md-typeset hr + h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.md-typeset h3 {
  font: 550 21px/1.35 var(--heading);
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 1.8em 0 0.5em;
}
.md-typeset h4, .md-typeset h5 {
  font: 600 13px/1.6 var(--heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 1.8em 0 0.5em;
}
.md-typeset .headerlink { color: #bbc9b1; }
.md-typeset .headerlink:hover { color: var(--leaf); }

.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-color: #bbc9b1;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.md-typeset a:hover { color: var(--leaf); text-decoration-color: var(--leaf); }
.md-typeset strong { font-weight: 600; }
.md-typeset hr { border-top: 1px solid var(--line); margin: 2.4em 0; }
.md-typeset blockquote {
  border-left: 2px solid var(--sage-light);
  color: var(--muted);
  font: italic 18px/1.6 var(--serif);
}

/* The site's section label (its "01 — THE MISSION" style) above page titles. */
.md-typeset .eyebrow, .eyebrow {
  display: block;
  margin: 0 0 18px;
  font: 550 13px/1.6 var(--heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
}

/* Lead paragraph directly under a title. */
.md-typeset h1 + p { font-size: 18px; line-height: 1.6; color: var(--ink); }
.md-typeset .lead { font-size: 18px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

.md-typeset code, .md-typeset kbd {
  font-family: var(--md-code-font);
  font-size: 0.875em;
  border-radius: 5px;
}
.md-typeset code { padding: 0.1em 0.35em; background: var(--md-code-bg-color); color: var(--ink); }
.md-typeset pre {
  margin: 1.2em 0;
}
.md-typeset pre > code {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  background: #eef0e6;
  font-size: 14px;
  line-height: 1.65;
}
.md-typeset .highlight .filename { background: var(--wash); border-radius: 10px 10px 0 0; border: 1px solid var(--line); border-bottom: 0; font-family: var(--sans); font-size: 13px; }
.md-typeset .highlight .filename + pre > code { border-radius: 0 0 10px 10px; }
.md-clipboard { color: var(--muted); }
.md-clipboard:hover { color: var(--leaf); }
.md-typeset .highlight span.filename, .md-typeset .highlight .linenos { color: var(--muted); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.md-typeset__table { display: block; }
.md-typeset table:not([class]) {
  display: table;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: 15px;
  line-height: 1.55;
  box-shadow: none;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  font: 600 12px/1.6 var(--heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  vertical-align: bottom;
}
.md-typeset table:not([class]) td {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.md-typeset table:not([class]) tr:first-child td { border-top: 0; }
.md-typeset table:not([class]) tbody tr:hover { background: #fbfbf6; box-shadow: none; }

/* --------------------------------------------------------------------------
   Admonitions, details
   -------------------------------------------------------------------------- */

.md-typeset .admonition, .md-typeset details {
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--sage-light) !important;
  border-radius: 10px;
  background: var(--card);
  box-shadow: none;
  font-size: 15px;
  padding: 0 20px 4px;
  margin: 1.6em 0;
}
.md-typeset .admonition-title, .md-typeset summary {
  background: transparent !important;
  font: 600 15px/1.5 var(--heading);
  color: var(--ink);
  margin: 0 -20px 8px;
  padding: 14px 20px 0 52px;
  border: 0;
}
.md-typeset .admonition-title::before, .md-typeset summary::before {
  background-color: var(--sage) !important;
  left: 20px;
  top: 14px;
}
.md-typeset .admonition > :last-child, .md-typeset details > :last-child { margin-bottom: 14px; }
.md-typeset details summary::after { color: var(--muted); }

/* --------------------------------------------------------------------------
   Cards (the "grid cards" on the docs home)
   -------------------------------------------------------------------------- */

.md-typeset .grid.cards > ul { gap: 16px; }
.md-typeset .grid.cards > ul > li {
  position: relative; /* the title link's ::after covers the whole card */
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--md-shadow-z1);
  padding: 22px 24px 20px;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.md-typeset .grid.cards > ul > li:hover, .md-typeset .grid.cards > ul > li:focus-within {
  border-color: #bbc9b1;
  box-shadow: var(--md-shadow-z2);
  transform: translateY(-1px);
}
.md-typeset .grid.cards > ul > li > p:first-child { margin: 0 0 6px; }
.md-typeset .grid.cards > ul > li > p:first-child a {
  font: 550 18px/1.35 var(--heading);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.md-typeset .grid.cards > ul > li > p:first-child a::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.md-typeset .grid.cards > ul > li:hover > p:first-child a { color: var(--leaf); }
.md-typeset .grid.cards > ul > li > p:last-child { color: var(--muted); font-size: 15px; margin: 0; }
.md-typeset .grid.cards > ul > li > hr { display: none; }

/* Figures: report pages get a hairline and a caption in the site's muted serif. */
.md-typeset figure { margin: 1.8em 0; }
.md-typeset figure img {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--md-shadow-z1);
  background: #fff;
}
.md-typeset figcaption { font: italic 15px/1.6 var(--serif); color: var(--muted); max-width: 44rem; margin: 12px auto 0; }

/* --------------------------------------------------------------------------
   Content chrome
   -------------------------------------------------------------------------- */

.md-content__inner { padding-bottom: 40px; }
.md-content__inner::before { height: 0; }
.md-content__button { color: var(--muted); }
.md-content__button:hover { color: var(--leaf); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.md-footer { margin-top: 32px; }
.md-footer-meta { border-top: 1px solid var(--line); }
.md-footer-meta__inner { padding: 20px 0 28px; align-items: center; }
.md-copyright { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.md-copyright a { color: var(--ink); text-decoration: none; }
.md-copyright a:hover { color: var(--leaf); }
.ob-foot__sep { margin: 0 6px; }
.md-social { padding: 0; margin: 0; }
/* The main site's footer .text-link: icon, 9px, word; 15px; hover to leaf. */
.ob-code-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
}
.ob-code-link:hover { color: #618449; }
.ob-code-link .icon { width: 20px; height: 20px; flex: 0 0 auto; }
/* Narrower than the content grid: the footer takes the content's side margins. */
@media screen and (max-width: 76.234375em) {
  .md-footer-meta__inner { padding: 20px 0.8rem 28px; }
}
/* Phones: one fact per line, GitHub link under them, flush with the text. */
@media (max-width: 760px) {
  .md-footer-meta__inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 20px 28px; }
  .md-copyright { font-size: 13px; width: 100%; }
  .ob-foot__sep { display: none; }
  .ob-foot__part { display: block; }
}

/* The report bar at the bottom of phone screens, as on the main site. */
.ob-mobile-actions { display: none; }
@media (max-width: 760px) {
  .ob-mobile-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 7; /* above the open menu panel */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: rgba(246, 246, 239, 0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px rgba(9, 43, 34, 0.02);
  }
  /* Sized as the main site's bar: two labels, "Get sample report" and
     "Get Free Report", side by side on a 375px phone. */
  .ob-mobile-actions .ob-button { min-height: 48px; font-size: 14px; gap: 8px; padding: 13px 8px; }
  .ob-mobile-actions .icon { width: 18px; height: 18px; }
  /* The open menu stops above the report bar so its last entries stay reachable. */
  .md-sidebar--primary .md-sidebar__scrollwrap { max-height: calc(100vh - var(--ob-header-height) - 90px); }
  .ob-mobile-actions .ob-button--outline { background: var(--paper); }
  .md-footer { padding-bottom: 88px; }
}
/* Narrow phones (360px): both labels stay on one line. */
@media (max-width: 370px) {
  .ob-mobile-actions .ob-button { font-size: 13px; gap: 6px; padding-inline: 6px; }
}
/* The smallest phones (320px): the bar drops its icons so the labels fit. */
@media (max-width: 340px) {
  .ob-mobile-actions .icon { display: none; }
}

/* Responsive fine-tuning */
@media (max-width: 720px) {
  .md-typeset h1 { font-size: 34px; }
  .md-typeset h2 { font-size: 26px; }
  .md-typeset { font-size: 15.5px; }
}

/* Accessible text alternative for icon-only controls. */
.ob-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Code-block tokens: Material's defaults for comments and numbers fall under
   4.5:1 on this code background; these pass (comment 5.2:1, number 5.1:1). */
.md-typeset .highlight .c, .md-typeset .highlight .c1, .md-typeset .highlight .cm, .md-typeset .highlight .ch, .md-typeset .highlight .cs { color: #566b50; }
.md-typeset .highlight .m, .md-typeset .highlight .mi, .md-typeset .highlight .mf, .md-typeset .highlight .mh, .md-typeset .highlight .mo { color: #b32222; }