/* ============================================================================
   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 15px / 1.6 (Material rem base = 20px) */
.md-typeset {
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .002em;
  color: var(--gx-text);
}

.md-main { background: #ffffff; }

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

/* full-width shell: the header / main / footer grid fills the viewport; the
   article is held to a wider centred measure inside its column */
.md-grid { max-width: none; }
.md-content__inner {
  max-width: 64rem;
  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);
}

/* ---------------------------------------------------------- architecture diagram */
.md-typeset .galapagos-arch-diagram {
  margin: 1.4rem 0 1.8rem;
  overflow: hidden;
  border: 1px solid var(--gx-hairline-green);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 138, 100, .10), transparent 34%),
    radial-gradient(circle at 92% 6%, rgba(192, 106, 67, .10), transparent 28%),
    #ffffff;
  box-shadow: 0 16px 42px rgba(22, 32, 27, .08);
}

.md-typeset .arch-map {
  padding: 1rem;
}

.md-typeset .arch-map__header {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .9rem;
}

.md-typeset .arch-map__header strong {
  color: var(--gx-ink);
  font-size: 1rem;
  letter-spacing: -.02em;
}

.md-typeset .arch-map__header span {
  color: var(--md-default-fg-color--light);
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.md-typeset .arch-stage {
  border: 1px solid rgba(220, 232, 223, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  padding: .75rem;
}

.md-typeset .arch-stage + .arch-flow,
.md-typeset .arch-flow + .arch-stage {
  margin-top: .65rem;
}

.md-typeset .arch-stage__label {
  margin-bottom: .55rem;
  color: var(--gx-label);
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.md-typeset .arch-stage__grid {
  display: grid;
  gap: .55rem;
}

.md-typeset .arch-box {
  position: relative;
  min-height: 4.35rem;
  padding: .72rem .78rem;
  border: 1px solid var(--gx-hairline-green);
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #f7fbf8);
  box-shadow: 0 8px 20px rgba(22, 32, 27, .06);
}

.md-typeset .arch-box--primary {
  border-color: rgba(28, 107, 77, .32);
  background: linear-gradient(135deg, rgba(226, 236, 229, .75), #ffffff);
}

.md-typeset .arch-box--green {
  border-color: rgba(47, 138, 100, .28);
}

.md-typeset .arch-box--soft {
  background: #f8faf8;
}

.md-typeset .arch-box--storage {
  border-color: rgba(192, 106, 67, .30);
  background: linear-gradient(135deg, #fff8f3, #ffffff);
}

.md-typeset .arch-box--future {
  border-style: dashed;
  background: linear-gradient(135deg, rgba(31, 158, 146, .08), #ffffff);
}

.md-typeset .arch-box strong {
  display: block;
  color: var(--gx-ink);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}

.md-typeset .arch-box small {
  display: block;
  margin-top: .22rem;
  color: var(--md-default-fg-color--light);
  font-size: .63rem;
  line-height: 1.35;
}

.md-typeset .arch-dot {
  display: inline-block;
  width: .52rem;
  height: .52rem;
  margin-right: .35rem;
  border-radius: 999px;
  background: var(--gx-green);
  box-shadow: 0 0 0 4px rgba(47, 138, 100, .12);
  vertical-align: .02rem;
}

.md-typeset .arch-chip {
  display: inline-flex;
  margin-top: .45rem;
  margin-right: .3rem;
  padding: .12rem .42rem;
  border: 1px solid rgba(28, 107, 77, .22);
  border-radius: 999px;
  background: rgba(226, 236, 229, .72);
  color: var(--gx-green);
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .52rem;
  font-weight: 600;
}

.md-typeset .arch-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--gx-green);
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.md-typeset .arch-flow::before,
.md-typeset .arch-flow::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(28, 107, 77, .35), transparent);
}

.md-typeset .arch-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .75rem;
  padding: .62rem .75rem;
  border: 1px solid rgba(192, 106, 67, .28);
  border-radius: 999px;
  background: rgba(255, 248, 243, .82);
  color: var(--gx-ink);
  font-size: .66rem;
}

.md-typeset .arch-review__badge {
  color: var(--gx-coral);
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .md-typeset .arch-map {
    padding: 1.25rem;
  }

  .md-typeset .arch-stage__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md-typeset .arch-stage__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ----------------------------------------------------- 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: .5rem;
  overflow: hidden;
}
.md-typeset .highlight {
  border: 1px solid var(--gx-hairline);
  box-shadow: 0 1px 2px rgba(17, 20, 14, .05);
}
.md-typeset .highlighttable .linenos {
  background: #efe9dd;
  color: var(--gx-border);
}
.highlight .gp { color: var(--gx-green); }              /* prompt sigils */
/* copy button: quiet by default, brand-green on hover, and a touch more
   prominent when the block is hovered — matches the hub's code panels */
.md-clipboard {
  color: var(--md-default-fg-color--lighter);
  transition: color .15s;
}
.md-clipboard:hover,
.md-typeset .highlight:hover .md-clipboard { 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); }

/* ====================================================================== */
/*  Reading density                                                       */
/*  The pages are reference material people scan, not essays they read    */
/*  start to finish. Material's stock rhythm is tuned for prose: it costs */
/*  roughly a third of the vertical space to a table-and-list page, which */
/*  pushes the next heading below the fold and hides the structure. Tune  */
/*  the rhythm down so a section's shape is visible without scrolling.    */
/* ====================================================================== */

/* headings sit closer to the block they introduce than to the one they end */
.md-typeset h2 { margin: 2rem 0 .6rem; }
.md-typeset h3 { margin: 1.5rem 0 .45rem; }

/* lists: tighten the inter-item gap, keep the intra-item leading readable */
.md-typeset ul li,
.md-typeset ol li { margin-bottom: .3em; }
.md-typeset li > ul,
.md-typeset li > ol { margin-top: .3em; margin-bottom: .3em; }

/* tables carry most of the facts on this site — make them scannable, not airy */
.md-typeset table:not([class]) th { padding: .5em .8em; }
.md-typeset table:not([class]) td { padding: .45em .8em; vertical-align: top; }

/* ====================================================================== */
/*  The six-component loop  ·  <div class="gx-loop">                      */
/*                                                                        */
/*  The loop is THE mental model of Galapagos, and it was drawn twice in  */
/*  hand-aligned box-drawing characters (concepts/overview.md and         */
/*  concepts/components.md) — both misaligned, since a box's border has   */
/*  to be re-counted by hand whenever a component is renamed. It also     */
/*  overflowed on a phone and read as a blob to a screen reader.          */
/*                                                                        */
/*  This renders the same figure from real elements, so it wraps, scales, */
/*  and stays aligned by construction. Each node carries its component's  */
/*  accent from the six-colour palette already defined at the top of this */
/*  file — the colour is the same one the prose uses for that component,  */
/*  so the diagram and the text teach one vocabulary instead of two.      */
/* ====================================================================== */
.md-typeset .gx-loop {
  margin: 1.3rem 0 1.6rem;
  padding: 1rem 1rem .85rem;
  border: 1px solid var(--gx-hairline-green);
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfdfb, #ffffff);
}

/* Memory sits ABOVE the chain and is dashed: it is the one optional slot, read
   by the PromptBuilder and written after evaluation, not a stage of the chain. */
.md-typeset .gx-loop__memory {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .3rem;
  padding: .4rem .7rem;
  border: 1px dashed rgba(31, 158, 146, .45);
  border-radius: 8px;
  background: rgba(31, 158, 146, .05);
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
}
.md-typeset .gx-loop__memory strong { color: var(--gx-memory); }

/* the read/write tick marks that tie Memory to the chain below it */
.md-typeset .gx-loop__ties {
  display: flex;
  justify-content: center;
  gap: 5rem;
  margin-bottom: .3rem;
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gx-label);
}

/* the chain itself — wraps on a narrow viewport instead of overflowing */
.md-typeset .gx-loop__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: .3rem;
}

.md-typeset .gx-loop__node {
  flex: 1 1 7rem;
  min-width: 6.4rem;
  padding: .5rem .6rem;
  border: 1px solid currentColor;
  border-top-width: 3px;          /* the component's colour, carried on one edge */
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
.md-typeset .gx-loop__node b {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
}
/* the role line is body-coloured: the accent identifies, it does not shout */
.md-typeset .gx-loop__node span {
  display: block;
  margin-top: .18rem;
  font-size: .6rem;
  line-height: 1.3;
  color: var(--md-default-fg-color--light);
}

.md-typeset .gx-loop__arrow {
  align-self: center;
  color: var(--gx-border);
  font-size: .75rem;
  line-height: 1;
}

/* the return edge: the scored Genome going back into the store, which is what
   makes this a loop rather than a pipeline */
.md-typeset .gx-loop__back {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gx-green);
}
.md-typeset .gx-loop__back::before,
.md-typeset .gx-loop__back::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(28, 107, 77, .38), transparent);
}

/* ====================================================================== */
/*  At a glance  ·  <div class="gx-facts" markdown> … </div>              */
/*                                                                        */
/*  A page opens with the facts a reader came for — what this is, what it */
/*  needs, what it costs — before the prose that explains them. Label/    */
/*  value rows, so the answer is findable without reading.                */
/*                                                                        */
/*  AUTHORING (the `markdown` attribute is load-bearing, do not drop it): */
/*                                                                        */
/*      <div class="gx-facts" markdown>                                   */
/*      <div markdown>                                                    */
/*      **Label**                                                         */
/*                                                                        */
/*      the value, with [normal links](page.md) and `code`                */
/*      </div>                                                            */
/*      </div>                                                            */
/*                                                                        */
/*  Write the value as MARKDOWN, never as raw <p>/<a> HTML. MkDocs only   */
/*  rewrites `page.md` → `page.html` in markdown it parsed; a hand-written */
/*  <a href="page.md"> inside a raw HTML block is stashed before that pass */
/*  runs and ships to production as a dead link. md_in_html (enabled in    */
/*  mkdocs.yml) parses the row bodies, which is what keeps links honest —  */
/*  hence the two <p> children this rule styles.                          */
/* ====================================================================== */
.md-typeset .gx-facts {
  margin: 1rem 0 1.6rem;
  border: 1px solid var(--gx-border);
  border-left: 3px solid var(--gx-green);
  border-radius: .2rem;
  background: var(--gx-bg-active);
  font-size: .72rem;
}
.md-typeset .gx-facts > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: .9rem;
  padding: .45rem .8rem;
  border-top: 1px solid var(--gx-border);
}
.md-typeset .gx-facts > div:first-child { border-top: 0; }

/* first child paragraph = the label (md_in_html wraps `**Label**` in a <p>) */
.md-typeset .gx-facts > div > p:first-child {
  padding-top: .1em;
  font-family: var(--md-code-font), ui-monospace, monospace;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gx-label);
}
.md-typeset .gx-facts > div > p:first-child strong { font-weight: 600; }
.md-typeset .gx-facts p { margin: 0; }
.md-typeset .gx-facts p + p { margin-top: .2rem; }

/* on a phone the two-column row collapses to label-over-value */
@media screen and (max-width: 44em) {
  .md-typeset .gx-facts > div { grid-template-columns: 1fr; gap: .1rem; }
}