/* ============================================================================
   Galapagos documentation — brand stylesheet
   Harbor-docs composition (goharbor.io/docs): flat, sober, all-white canvas,
   3 quiet columns — re-coloured to the Galapagos brand.
   Display + body : Space Grotesk (self-hosted, variable 300–700)
   Code / labels  : IBM Plex Mono (self-hosted, 400/500/600)
   Palette : primary green #1c6b4d · deep #11402f · bright #2f8a64
             terracotta #c06a43 · teal #1f9e92 · ink #16201b
             paper #faf9f6 · cream #f6f2ea · hairlines #dce8df / #e6e3d8
   Harbor neutrals (chrome) : text #4a4a4a · strong #363636 · label #7a7a7a
             border #dbdbdb · hover #f5f5f5 · active #fafafa
   Harbor role map : accent #4495d7 → brand green
   Six components : population #2f8a64 · selection #3d7ea6 · prompt #b9892e
                    proposer #c06a43 · evaluator #7a5cb0 · memory #1f9e92
   ============================================================================ */

/* --------------------------------------------------- self-hosted webfonts */
/* Space Grotesk — variable axis 300–700 (display + body) */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk/SpaceGrotesk-Variable.woff2?v=2") format("woff2");
}

/* IBM Plex Mono — static weights (code, labels, eyebrows) */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* brand — colors lifted straight from the tortoise mark */
  --gx-green:        #1c6b4d;   /* primary: links, active nav (Harbor's #4495d7 role) */
  --gx-green-bright: #2f8a64;   /* hover / secondary (shell tree strokes)  */
  --gx-deep:         #11402f;   /* pressed / link hover                    */
  --gx-coral:        #c06a43;   /* terracotta accent (the tree nodes)      */
  --gx-teal:         #1f9e92;   /* the root node                           */
  --gx-ink:          #16201b;   /* near-black with a green cast            */
  --gx-paper:        #faf9f6;   /* warm off-white surface                  */
  --gx-cream:        #f6f2ea;   /* deeper paper tint (code blocks)         */
  --gx-hairline:     #e6e3d8;   /* warm paper hairline (code-block border) */
  --gx-hairline-green: #dce8df; /* cool shell hairline                     */
  --gx-danger:       #c2453a;   /* distinct red, reserved for danger       */

  /* Harbor neutrals — flat sober chrome (Bulma greys, role-for-role) */
  --gx-text:         #4a4a4a;   /* body / sidebar text                     */
  --gx-text-strong:  #363636;   /* headings, hovered links                 */
  --gx-label:        #7a7a7a;   /* uppercase menu-labels                   */
  --gx-border:       #dbdbdb;   /* 1px chrome hairlines                    */
  --gx-bg-hover:     #f5f5f5;   /* light-gray hover rows / code chips      */
  --gx-bg-active:    #fafafa;   /* very pale active-page row               */

  /* six component accents — retuned to the earthier brand range */
  --gx-population: #2f8a64;
  --gx-selection:  #3d7ea6;
  --gx-prompt:     #b9892e;
  --gx-proposer:   #c06a43;
  --gx-evaluator:  #7a5cb0;
  --gx-memory:     #1f9e92;

  /* small list glyph for the "On this page" TOC title */
  --gx-icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h12v2.2H3zM3 10h18v2.2H3zM3 15h12v2.2H3zM3 20h18v2.2H3z'/%3E%3C/svg%3E");

  /* fonts (theme.font is false; Material picks these up) */
  --md-text-font:  "Space Grotesk";
  --md-code-font:  "IBM Plex Mono";

  /* Material colour overrides — green takes Harbor's single-accent role */
  --md-primary-fg-color:             var(--gx-green);
  --md-primary-fg-color--light:      var(--gx-green-bright);
  --md-primary-fg-color--dark:       var(--gx-deep);
  --md-primary-bg-color:             #ffffff;
  --md-primary-bg-color--light:      rgba(255,255,255,.72);

  --md-accent-fg-color:              var(--gx-green-bright);
  --md-accent-fg-color--transparent: rgba(47,138,100,.10);

  --md-default-fg-color:             var(--gx-text);
  --md-default-fg-color--light:      #5a635d;
  --md-default-fg-color--lighter:    #84938a;
  --md-default-fg-color--lightest:   rgba(22,32,27,.08);
  --md-default-bg-color:             #ffffff;

  --md-typeset-a-color:              var(--gx-green);
  --md-code-bg-color:                var(--gx-bg-hover);
  --md-code-fg-color:                #28352e;

  /* footer: flat white band, dark text (Harbor restraint) */
  --md-footer-bg-color:              #ffffff;
  --md-footer-bg-color--dark:        var(--gx-bg-active);
  --md-footer-fg-color:              var(--gx-text-strong);
  --md-footer-fg-color--light:       var(--gx-label);
  --md-footer-fg-color--lighter:     #9a9a9a;
}

/* ------------------------------------------------------------ base canvas */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* body: Space Grotesk at a comfortable 16px / 1.6 (Material rem base = 20px) */
.md-typeset {
  font-size: .8rem;
  line-height: 1.6;
  letter-spacing: .002em;
  color: var(--gx-text);
}

.md-main { background: #ffffff; }

::selection { background: rgba(47,138,100,.22); }

/* center column: constrained measure, generous gutters, no card chrome */
.md-grid { max-width: 64rem; }
.md-content__inner {
  max-width: 40rem;
  margin: 0 auto 1.6rem;
  padding: .6rem .8rem 0;
}

/* ----------------------------------------------------------- typography */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--md-text-font), system-ui, sans-serif;
  color: var(--gx-ink);
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.125;
  letter-spacing: -0.03em;
  margin: 0 0 .9rem;
}

.md-typeset h2 {
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin: 2.4rem 0 .8rem;
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.014em;
  margin: 1.8rem 0 .55rem;
}

.md-typeset h4 {
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -0.006em;
}

/* anchor permalinks: quiet until hover */
.md-typeset .headerlink { color: var(--gx-border); transition: color .15s; }
.md-typeset :hover > .headerlink { color: var(--gx-green-bright); }

/* lead paragraph immediately after an h1 reads as a deck */
.md-typeset h1 + p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--md-default-fg-color--light);
}

/* ----------------------------------------------------------------- links */
/* Harbor: a{color:accent; no underline} a:hover{darken + underline} */
.md-typeset a {
  color: var(--gx-green);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: .06em;
  transition: color .15s, text-decoration-color .15s;
}
.md-typeset a:hover {
  color: var(--gx-deep);
  text-decoration: underline;
  text-decoration-color: rgba(17,64,47,.45);
}

/* ----------------------------------------------------- header (sticky) */
/* Harbor navbar: white, dark text, thin bottom border — no texture/blur */
.md-header {
  background: #ffffff;
  color: var(--gx-ink);
  border-bottom: 1px solid var(--gx-border);
  box-shadow: none;
}
.md-header--shadow { box-shadow: none; }
.md-header__title {
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.012em;
}
.md-header .md-header__button { color: var(--gx-ink); }
.md-header .md-header__button:hover { opacity: 1; color: var(--gx-green); }

/* header brand lockup — tortoise + lowercase "galapagos" (Space Grotesk 700), mirroring the
   platform Nav wordmark so docs and platform share one mark. */
.md-header .gx-logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: .4rem;            /* ~8px between icon and wordmark, like the platform Nav */
  width: auto;
  padding: 0 .15rem;
}
.md-header .gx-logo-lockup img {
  width: 2rem;           /* 40px tortoise — exact match to the platform Nav (<Logo size={40}>) */
  height: 2rem;
}
.gx-wordmark {
  font-family: "Space Grotesk", var(--md-text-font), system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;    /* 27px — exact match to the platform Nav wordmark */
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: lowercase;
  color: var(--gx-ink);
}
/* the lockup now carries the wordmark — hide Material's separate site-name/page title,
   but keep it in flow as the flex spacer so search / platform-link stay right-aligned */
.md-header__title { visibility: hidden; }

/* search box: flat light-gray fill, no heavy inset */
.md-search__form {
  background: var(--gx-bg-hover);
  border: 1px solid transparent;
  border-radius: .2rem;
  box-shadow: none;
}
.md-search__form:hover { background: #efefef; }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: #fff;
  border-color: var(--gx-border);
  border-radius: .2rem;
  box-shadow: none;
}
.md-search__input { color: var(--gx-ink); }
.md-search__input::placeholder { color: var(--md-default-fg-color--lighter); }
/* Material paints the closed-state magnifier with --md-primary-bg-color
   (= white here) at >=60em — recolor it so it shows on the flat gray field */
@media screen and (min-width: 60em) {
  .md-search__input + .md-search__icon { color: var(--gx-label); }
}
.md-search__output {
  border: 1px solid var(--gx-border);
  border-top: 0;
  box-shadow: 0 6px 16px rgba(22,32,27,.06);
}

/* ----------------------------------------------- platform back-link button */
.gx-platform-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .35rem;
  margin-right: 1rem;  /* breathing room so it isn't crammed against the search box */
  padding: .28rem .6rem;
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gx-green);
  background: #fff;
  border: 1px solid var(--gx-border);
  border-radius: .2rem;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.gx-platform-link:hover {
  color: var(--gx-deep);
  background: var(--gx-bg-hover);
  border-color: var(--gx-green);
}
.gx-platform-link .gx-arrow { font-size: .95em; line-height: 1; }
@media screen and (max-width: 44em) {
  .gx-platform-link .gx-platform-link__label { display: none; }
  .gx-platform-link { padding: .28rem .42rem; }
}

/* --------------------------------------------------------- left navigation
   Harbor docs-menu: a quiet version label on top, uppercase gray menu-labels,
   flat link rows (no radius), pale active row, 1px left border on nesting. */
.md-nav { font-size: .72rem; }

/* version label injected by overrides/main.html at the top of the sidebar */
.gx-version {
  display: block;
  margin: 0 0 1.1em;
  padding: .5em 0;
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gx-label);
  transition: color .14s;
}
.gx-version:hover { color: var(--gx-green); }
/* the drawer (below 76.25em) keeps its stock layout — label is desktop-only */
@media screen and (max-width: 76.234375em) { .gx-version { display: none; } }

.md-nav__title {
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gx-label);
}

/* The Harbor sidebar look applies only where Material renders the nav as a
   flat inline list (>=76.25em). Below that the nav is the slide-in drawer,
   which keeps Material's stock touch-friendly presentation. */
@media screen and (min-width: 76.25em) {

  /* the drawer's "site title" header is redundant next to the version label */
  .md-sidebar--primary .md-nav__title[for="__drawer"] { display: none; }

  /* section group labels (navigation.sections): uppercase gray menu-labels */
  .md-sidebar--primary .md-nav__item--section > .md-nav__link {
    font-family: var(--md-text-font), system-ui, sans-serif;
    font-weight: 500;
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gx-label);
    padding: 0;
    background: none;
  }

  /* page links: quiet flat rows */
  .md-sidebar--primary .md-nav__link {
    margin-top: 0;
    padding: .5em .75em;
    border-radius: 0;
    color: var(--gx-text);
    transition: color .14s, background .14s;
  }
  .md-sidebar--primary .md-nav__link:hover,
  .md-sidebar--primary .md-nav__link:focus {
    background: var(--gx-bg-hover);
    color: var(--gx-text-strong);
  }
  .md-sidebar--primary .md-nav__link--active,
  .md-sidebar--primary .md-nav__link--active:hover {
    background: var(--gx-bg-active);
    color: var(--gx-green);
    font-weight: 500;
  }

  /* align the section list with its label (Material out-dents it by .6rem) */
  .md-sidebar--primary .md-nav__item--section > .md-nav {
    margin-left: 0;
    margin-right: 0;
  }

  /* the Harbor nesting cue: 1px left border on lists below the first level.
     NOTE: inert today — the nav is two levels deep, so every nested item is
     also a section. Kept for when deeper nesting appears. */
  .md-sidebar--primary .md-nav__item--nested:not(.md-nav__item--section) > .md-nav {
    border-left: 1px solid var(--gx-border);
    margin: .75em 0 .75em .75em;
  }

  /* no drawer-style item separators when the list renders inline */
  .md-sidebar--primary .md-nav__item { border-top: 0; }
}

/* ------------------------------------------------- right table of contents
   Harbor "On this page": bold title with a small list glyph, then plain
   links — top level bold dark, deeper levels plain gray, tight leading.
   (The title text itself is set via mdx toc.title in mkdocs.yml.) */
.md-sidebar--secondary .md-nav__title {
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gx-text-strong);
}
.md-sidebar--secondary .md-nav__title::before {
  content: "";
  display: inline-block;
  width: .7rem;
  height: .7rem;
  margin-right: .35rem;
  vertical-align: -.1rem;
  background-color: var(--gx-label);
  -webkit-mask: var(--gx-icon-list) no-repeat center / contain;
  mask: var(--gx-icon-list) no-repeat center / contain;
}
.md-sidebar--secondary .md-nav__link {
  color: var(--gx-text);
  line-height: 1.3;
}
.md-sidebar--secondary .md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 700;
  color: var(--gx-text-strong);
}
.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link--active {
  color: var(--gx-green);
}

/* ------------------------------------------------------------- code blocks */
.md-typeset code,
.md-typeset pre > code {
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-feature-settings: "liga" 0;
}
/* inline code: Harbor light-gray chip — normal weight, .875em, no border */
.md-typeset code {
  font-size: .875em;
  font-weight: 400;
  background: var(--gx-bg-hover);
  border: 0;
  border-radius: 4px;
  padding: .12em .42em;
}
/* block code: keep the cream highlight scheme, flatten the container */
.md-typeset pre > code {
  border: 0;
  padding: .9rem 1.05rem;
  line-height: 1.6;
  background: var(--gx-cream);
  box-shadow: none;
}
.md-typeset .highlight,
.md-typeset pre {
  border-radius: .25rem;
  overflow: hidden;
}
.md-typeset .highlight { border: 1px solid var(--gx-hairline); }
.md-typeset .highlighttable .linenos { background: #efe9dd; }
.highlight .gp { color: var(--gx-green); }              /* prompt sigils */
.md-clipboard { color: var(--md-default-fg-color--lighter); }
.md-clipboard:hover { color: var(--gx-green); }

/* inline-code inside headings/links shouldn't fight the surrounding colour */
.md-typeset a code { color: inherit; }

/* ------------------------------------------------------------------ tables */
.md-typeset table:not([class]) {
  font-size: .74rem;
  border: 1px solid var(--gx-border);
  border-radius: .2rem;
  overflow: hidden;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--gx-bg-active);
  color: var(--gx-text-strong);
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.005em;
  border-bottom: 1px solid var(--gx-border);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--gx-border); }
.md-typeset table:not([class]) tr:hover { background: var(--gx-bg-active); }

/* -------------------------------------------------------------- admonitions */
/* flat & sober: thin 1px border, a colored 3px left edge per component role,
   no tinted fills, no shadow.
   Material ships saturated per-type rules at 0,3,0 specificity
   (.md-typeset .admonition.note { border-color:#448aff }, tinted title fills,
   colored title icons), so every neutralisation below must repeat the
   per-type selectors to win the cascade. */
.md-typeset .admonition,
.md-typeset details {
  font-size: .76rem;
  border-radius: .2rem;
  border: 1px solid var(--gx-border);
  border-left-width: 3px;
  box-shadow: none;
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.005em;
  background: transparent;
}

/* neutralise Material's per-type border colors (gray on all sides …) */
.md-typeset .admonition.note,     .md-typeset details.note,
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.info,     .md-typeset details.info,
.md-typeset .admonition.tip,      .md-typeset details.tip,
.md-typeset .admonition.warning,  .md-typeset details.warning,
.md-typeset .admonition.example,  .md-typeset details.example,
.md-typeset .admonition.quote,    .md-typeset details.quote,
.md-typeset .admonition.danger,   .md-typeset details.danger {
  border-color: var(--gx-border);
}

/* … and the tinted title fills */
.md-typeset .note > .admonition-title,     .md-typeset .note > summary,
.md-typeset .abstract > .admonition-title, .md-typeset .abstract > summary,
.md-typeset .info > .admonition-title,     .md-typeset .info > summary,
.md-typeset .tip > .admonition-title,      .md-typeset .tip > summary,
.md-typeset .warning > .admonition-title,  .md-typeset .warning > summary,
.md-typeset .example > .admonition-title,  .md-typeset .example > summary,
.md-typeset .quote > .admonition-title,    .md-typeset .quote > summary,
.md-typeset .danger > .admonition-title,   .md-typeset .danger > summary {
  background-color: transparent;
}

/* per-type brand accent: 3px left edge */
.md-typeset .admonition.note,     .md-typeset details.note     { border-left-color: var(--gx-selection); }
.md-typeset .admonition.abstract, .md-typeset details.abstract { border-left-color: var(--gx-green-bright); }
.md-typeset .admonition.info,     .md-typeset details.info     { border-left-color: var(--gx-teal); }
.md-typeset .admonition.tip,      .md-typeset details.tip      { border-left-color: var(--gx-memory); }
.md-typeset .admonition.warning,  .md-typeset details.warning  { border-left-color: var(--gx-prompt); }
.md-typeset .admonition.example,  .md-typeset details.example  { border-left-color: var(--gx-evaluator); }
.md-typeset .admonition.quote,    .md-typeset details.quote    { border-left-color: var(--gx-label); }
.md-typeset .admonition.danger,   .md-typeset details.danger   { border-left-color: var(--gx-danger); }

/* title icon (::before mask) + details chevron (::after mask) follow suit;
   untyped admonitions fall back to brand green instead of Material blue */
.md-typeset .admonition-title::before, .md-typeset summary::before { background-color: var(--gx-green); }
.md-typeset .note > .admonition-title::before,     .md-typeset .note > summary::before,
.md-typeset .note > .admonition-title::after,      .md-typeset .note > summary::after      { background-color: var(--gx-selection); }
.md-typeset .abstract > .admonition-title::before, .md-typeset .abstract > summary::before,
.md-typeset .abstract > .admonition-title::after,  .md-typeset .abstract > summary::after  { background-color: var(--gx-green-bright); }
.md-typeset .info > .admonition-title::before,     .md-typeset .info > summary::before,
.md-typeset .info > .admonition-title::after,      .md-typeset .info > summary::after      { background-color: var(--gx-teal); }
.md-typeset .tip > .admonition-title::before,      .md-typeset .tip > summary::before,
.md-typeset .tip > .admonition-title::after,       .md-typeset .tip > summary::after       { background-color: var(--gx-memory); }
.md-typeset .warning > .admonition-title::before,  .md-typeset .warning > summary::before,
.md-typeset .warning > .admonition-title::after,   .md-typeset .warning > summary::after   { background-color: var(--gx-prompt); }
.md-typeset .example > .admonition-title::before,  .md-typeset .example > summary::before,
.md-typeset .example > .admonition-title::after,   .md-typeset .example > summary::after   { background-color: var(--gx-evaluator); }
.md-typeset .quote > .admonition-title::before,    .md-typeset .quote > summary::before,
.md-typeset .quote > .admonition-title::after,     .md-typeset .quote > summary::after     { background-color: var(--gx-label); }
.md-typeset .danger > .admonition-title::before,   .md-typeset .danger > summary::before,
.md-typeset .danger > .admonition-title::after,    .md-typeset .danger > summary::after    { background-color: var(--gx-danger); }

/* --------------------------------------------------------------- buttons */
.md-typeset .md-button {
  border-radius: .2rem;
  font-weight: 600;
  letter-spacing: -.005em;
  border-width: 1px;
  transition: background .15s, border-color .15s, color .15s;
}
.md-typeset .md-button--primary {
  background: var(--gx-green);
  border-color: var(--gx-green);
  color: #fff;
}
.md-typeset .md-button--primary:hover {
  background: var(--gx-deep);
  border-color: var(--gx-deep);
  box-shadow: none;
}
.md-typeset .md-button:not(.md-button--primary):hover {
  border-color: var(--gx-green);
  color: var(--gx-green);
}

/* back-to-top pill: flat */
.md-top {
  background: #fff;
  border: 1px solid var(--gx-border);
  color: var(--gx-text);
  box-shadow: none;
}
.md-top:hover { background: var(--gx-bg-hover); color: var(--gx-green); }

/* ---------------------------------------------------------------- footer */
/* flat light band, thin top border — Harbor restraint, no dark slab */
.md-footer {
  background: #ffffff;
  border-top: 1px solid var(--gx-border);
}
.md-footer-meta { background: var(--gx-bg-active); }
.md-footer__link { color: var(--gx-text); }
.md-footer__link:hover { opacity: 1; color: var(--gx-green); }
.md-footer__title { color: var(--gx-text-strong); }
.md-footer__direction {
  font-family: var(--md-text-font), system-ui, sans-serif;
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gx-label);
}
html .md-footer-meta.md-typeset a { color: var(--gx-text); }
html .md-footer-meta.md-typeset a:hover { color: var(--gx-green); }

/* horizontal rule as a hairline */
.md-typeset hr { border-bottom: 1px solid var(--gx-border); margin: 2rem 0; }

/* blockquote: quiet gray edge (Harbor-style) */
.md-typeset blockquote {
  border-left: 3px solid var(--gx-border);
  color: var(--md-default-fg-color--light);
}

/* tabbed labels: flat, green accent on the active tab. pymdownx (alternate
   style) puts the labels inside .tabbed-labels, never adjacent to the inputs,
   so the active cue is the JS-driven ::before indicator bar (and Material's
   own nth-child chains keep the active label text dark). */
.md-typeset .tabbed-labels { box-shadow: 0 -1px var(--gx-border) inset; }
.md-typeset .tabbed-labels > label { font-weight: 600; }
.js .md-typeset .tabbed-labels > label:hover { color: var(--gx-green); }
.js .md-typeset .tabbed-labels::before { background: var(--gx-green); }

/* ====================================================================== */
/*  Six-component accent utility classes                                  */
/*  Use in Markdown:  [Proposer]{.c-proposer}   ·   <span class="c-dot c-memory"> */
/* ====================================================================== */
.c-population { color: var(--gx-population); }
.c-selection  { color: var(--gx-selection); }
.c-prompt     { color: var(--gx-prompt); }
.c-proposer   { color: var(--gx-proposer); }
.c-evaluator  { color: var(--gx-evaluator); }
.c-memory     { color: var(--gx-memory); }

/* pill / chip variant — a soft tinted label */
.c-pill {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: .4rem;
  font-family: var(--md-code-font), monospace;
  font-size: .72em;
  font-weight: 600;
  border: 1px solid currentColor;
  line-height: 1.5;
}
.c-pill.c-population { background: rgba(47,138,100,.10); border-color: rgba(47,138,100,.35); }
.c-pill.c-selection  { background: rgba(61,126,166,.10); border-color: rgba(61,126,166,.35); }
.c-pill.c-prompt     { background: rgba(185,137,46,.12); border-color: rgba(185,137,46,.38); }
.c-pill.c-proposer   { background: rgba(192,106,67,.10); border-color: rgba(192,106,67,.35); }
.c-pill.c-evaluator  { background: rgba(122,92,176,.10); border-color: rgba(122,92,176,.35); }
.c-pill.c-memory     { background: rgba(31,158,146,.10); border-color: rgba(31,158,146,.35); }

/* small leading dot for diagrams / legends */
.c-dot::before {
  content: "";
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .4em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .04em;
}

/* ====================================================================== */
/*  Status badges  ·  use {.badge .stable} etc. in Markdown               */
/* ====================================================================== */
.badge {
  display: inline-block;
  padding: .05rem .42rem;
  border-radius: .4rem;
  font-family: var(--md-code-font), monospace;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid;
  line-height: 1.6;
  vertical-align: .1em;
}
.badge.stable       { color:#2e7d46; border-color:rgba(46,125,70,.40);  background:rgba(46,125,70,.10); }
.badge.runnable     { color:#1c6b4d; border-color:rgba(28,107,77,.40);  background:rgba(28,107,77,.10); }
.badge.experimental { color:#a1742a; border-color:rgba(161,116,42,.42); background:rgba(161,116,42,.10); }
.badge.spec         { color:#6e7a72; border-color:rgba(110,122,114,.40);background:rgba(110,122,114,.10); }
.badge.search       { color:#3d7ea6; border-color:rgba(61,126,166,.40); background:rgba(61,126,166,.10); }
.badge.roadmap      { color:#c06a43; border-color:rgba(192,106,67,.42); background:rgba(192,106,67,.10); }