/* signatomics documentation. Design taken from the learning chapter "A Mouthful of DNA":
   Bricolage Grotesque headings, Public Sans text, JetBrains Mono code; one reading column;
   eyebrows above headings; soft grey "on the example data" boxes; rounded fold-out boxes;
   numbered routes with filled (available) and hollow (planned) dots.
   Colours come from protein stains, one per section, as the chapter used the Gram-stain dyes:
     Preprocessing        Coomassie blue  (the classic protein gel stain)
     Statistical analysis Ponceau red     (stains proteins on membranes)
     Machine learning     SYPRO orange    (a fluorescent protein stain) */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&display=swap");

:root {
  --sg-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
}

/* ---------- colour tokens ---------- */
[data-md-color-scheme="default"] {
  --sg-paper: #ffffff;
  --sg-ink: #1d1d1f;
  --sg-muted: #6b6b73;
  --sg-rule: #e4e4ea;
  --sg-wash: #f4f4f7;
  --sg-pre: #2b4a9b;   --sg-pre-soft: #e8edf8;
  --sg-stat: #b0344f;  --sg-stat-soft: #f8e7eb;
  --sg-ml: #b4610d;    --sg-ml-soft: #fbeedd;
  --sg-accent: var(--sg-pre);
  --sg-accent-soft: var(--sg-pre-soft);
  --sg-edge: #b9bbc2;

  --md-default-bg-color: var(--sg-paper);
  --md-default-fg-color: var(--sg-ink);
  --md-default-fg-color--light: var(--sg-muted);
  --md-default-fg-color--lighter: var(--sg-rule);
  --md-primary-fg-color: var(--sg-ink);
  --md-primary-bg-color: var(--sg-paper);
  --md-accent-fg-color: var(--sg-accent);
  --md-typeset-a-color: var(--sg-accent);
  --md-code-bg-color: var(--sg-wash);
  --md-footer-bg-color: var(--sg-paper);
  --md-footer-bg-color--dark: var(--sg-paper);
  --md-footer-fg-color: var(--sg-ink);
  --md-footer-fg-color--light: var(--sg-muted);
  --md-footer-fg-color--lighter: var(--sg-muted);
}

[data-md-color-scheme="slate"] {
  --sg-paper: #16181b;
  --sg-ink: #e8e8ec;
  --sg-muted: #a0a0aa;
  --sg-rule: #2c2f34;
  --sg-wash: #1f2226;
  --sg-pre: #8ea9ef;   --sg-pre-soft: #1b2440;
  --sg-stat: #ec8fa3;  --sg-stat-soft: #3a1f27;
  --sg-ml: #efab5f;    --sg-ml-soft: #3a2a15;
  --sg-accent: var(--sg-pre);
  --sg-accent-soft: var(--sg-pre-soft);
  --sg-edge: #4a4d55;

  --md-default-bg-color: var(--sg-paper);
  --md-default-fg-color: var(--sg-ink);
  --md-default-fg-color--light: var(--sg-muted);
  --md-default-fg-color--lighter: var(--sg-rule);
  --md-primary-fg-color: var(--sg-ink);
  --md-primary-bg-color: var(--sg-paper);
  --md-accent-fg-color: var(--sg-accent);
  --md-typeset-a-color: var(--sg-accent);
  --md-code-bg-color: var(--sg-wash);
  --md-footer-bg-color: var(--sg-paper);
  --md-footer-bg-color--dark: var(--sg-paper);
  --md-footer-fg-color: var(--sg-ink);
  --md-footer-fg-color--light: var(--sg-muted);
  --md-footer-fg-color--lighter: var(--sg-muted);
}

body { background: var(--sg-paper); }

/* ---------- header, tabs, footer ---------- */
.md-header, .md-tabs { background-color: var(--sg-paper); color: var(--sg-ink); }
.md-header, .md-header--shadow { box-shadow: none; border-bottom: 1px solid var(--sg-rule); }
.md-header__topic:first-child { font-family: var(--sg-display); font-weight: 700; letter-spacing: -0.01em; }
.md-header__button.md-logo { color: var(--sg-accent); }
.md-header__button.md-logo svg { height: 1.4rem; width: 1.4rem; }
.md-tabs { border-bottom: 1px solid var(--sg-rule); }
.md-tabs__link { opacity: 1; color: var(--sg-muted); font-weight: 600; }
.md-tabs__link:hover, .md-tabs__item--active .md-tabs__link { color: var(--sg-accent); }
.md-footer { border-top: 1px solid var(--sg-rule); }
.md-footer-meta { background: var(--sg-paper); }
@media screen and (min-width: 60em) {
  .md-search__form { background-color: var(--sg-wash); }
  .md-search__form:hover { background-color: var(--sg-rule); }
  .md-search__input { color: var(--sg-ink); }
  .md-search__input::placeholder, .md-search__icon { color: var(--sg-muted); }
}

/* ---------- type: one reading column ---------- */
.md-typeset { font-size: 0.85rem; line-height: 1.62; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--sg-display); color: var(--sg-ink); text-wrap: balance;
}
.md-typeset h1 { font-weight: 700; font-size: 2.2rem; line-height: 1.05; letter-spacing: -0.025em; margin: 0.15em 0 0.5em; }
.md-typeset h2 { font-weight: 700; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.01em; margin: 2.2em 0 0.6em; }
.md-typeset h3 { font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin: 1.8em 0 0.5em; }
.md-typeset h2 code, .md-typeset h3 code { font-size: 0.85em; background: var(--sg-accent-soft); color: var(--sg-accent); }
.md-typeset .eyebrow {
  font-size: 0.62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sg-accent); margin: 0;
}
.md-typeset .lede { font-size: 0.95rem; line-height: 1.55; }
.md-typeset .small { font-size: 0.75rem; color: var(--sg-muted); }
.md-typeset hr { border-bottom: 1px solid var(--sg-rule); }

/* ---------- tables: hairlines, small-caps headers ---------- */
.md-typeset table:not([class]) { border: none; box-shadow: none; font-size: 0.78rem; border-radius: 0; }
.md-typeset table:not([class]) th {
  background: transparent; color: var(--sg-muted); font-size: 0.6rem; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--sg-rule);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--sg-rule); vertical-align: top; }
.md-typeset table:not([class]) tr:hover { background: transparent; box-shadow: none; }
.md-typeset table:not([class]) td code { white-space: nowrap; }

/* ---------- code ---------- */
.md-typeset pre > code { border-radius: 10px; }
.md-typeset code { border-radius: 5px; }

/* ---------- "on the example data" box (the chapter's real-data box) ---------- */
.md-typeset .sg-example { background: var(--sg-wash); border-radius: 14px; padding: 0.8rem 1rem 0.2rem; margin: 1.2em 0; }
.md-typeset .sg-example .tag {
  font-size: 0.6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sg-accent); margin: 0 0 0.3em;
}
.md-typeset .sg-example pre > code { background: var(--sg-paper); }

/* ---------- fold-out boxes (options, check yourself) ---------- */
.md-typeset details, .md-typeset .admonition {
  border: 1px solid var(--sg-rule); border-radius: 12px; box-shadow: none;
  background: transparent; font-size: 0.8rem; margin: 0.7em 0;
}
.md-typeset details > summary, .md-typeset .admonition-title {
  background: transparent !important; font-weight: 600; border: none !important;
}
/* no icons in the fold-out boxes: the titles say enough */
.md-typeset details > summary::before, .md-typeset .admonition-title::before { display: none; }
.md-typeset details > summary, .md-typeset .admonition-title { padding-left: 0.9rem !important; }
.md-typeset details > summary::after { background-color: var(--sg-muted) !important; }
.md-typeset details.question { border-style: dashed; border-color: var(--sg-edge); }

/* ---------- the route: numbered steps with filled / hollow dots ---------- */
.md-typeset ol.sg-route { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3em 0; padding: 0; margin: 0.4em 0 1.4em; font-size: 0.72rem; }
.md-typeset ol.sg-route li { display: flex; align-items: center; gap: 0.45em; margin: 0; color: var(--sg-muted); }
.md-typeset ol.sg-route li + li::before { content: ""; width: 1.4em; height: 1.5px; background: var(--sg-rule); margin: 0 0.45em; }
.md-typeset ol.sg-route .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sg-edge); flex: none; }
.md-typeset ol.sg-route li.done .dot { background: var(--sg-accent); border-color: var(--sg-accent); }
.md-typeset ol.sg-route li.here { color: var(--sg-ink); font-weight: 600; }
.md-typeset ol.sg-route li.here .dot { box-shadow: 0 0 0 3px var(--sg-accent-soft); }
.md-typeset ol.sg-route a { color: inherit; }
/* an optional step (bridging): hollow dot, dashed link, and the word 'optional' */
.md-typeset ol.sg-route li.opt .dot { background: var(--sg-paper); border-style: dashed; }
.md-typeset ol.sg-route li.opt::before { background: repeating-linear-gradient(90deg, var(--sg-rule) 0 3px, transparent 3px 6px); }
.md-typeset ol.sg-route li.opt::after { content: "optional"; font-size: 0.85em; color: var(--sg-muted); font-weight: 400; }

/* ---------- previous / next at the end of a guide ---------- */
.md-typeset .sg-lessonnav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 1em;
  margin-top: 2.2em; padding-top: 0.8em; border-top: 1px dashed var(--sg-rule); font-size: 0.75rem; }

/* ---------- home ---------- */
.md-typeset .sg-title { font-size: clamp(2.4rem, 7vw, 3.2rem); margin-top: 0.3em; }
.md-typeset .sg-for { color: var(--sg-muted); }
.md-typeset .sg-button { display: inline-block; background: var(--sg-accent); color: #fff; font-weight: 600;
  padding: 0.55em 1.2em; border-radius: 999px; margin: 1.2em 1.2em 0 0; }
.md-typeset .sg-button:hover { color: #fff; filter: brightness(1.1); }
[data-md-color-scheme="slate"] .md-typeset .sg-button, [data-md-color-scheme="slate"] .md-typeset .sg-button:hover { color: #101214; }
.md-typeset .sg-more { font-weight: 600; }

/* ---------- the route map (website/snippets/route.html) ---------- */
.sg-map { margin: 1.6em 0 0.6em; overflow-x: auto; }
.sg-map svg { display: block; width: 100%; height: auto; min-width: 640px; }
.sg-map text { font-family: var(--md-text-font-family); font-size: 13px; fill: var(--sg-muted); }
.sg-map .sec { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }
.sg-map .pre { --c: var(--sg-pre); } .sg-map .stat { --c: var(--sg-stat); } .sg-map .ml { --c: var(--sg-ml); }
.sg-map .sec.pre, .sg-map .sec.stat, .sg-map .sec.ml { fill: var(--c); }
.sg-map .e { stroke: var(--sg-edge); stroke-width: 1.5; fill: none; }
.sg-map .e.plan { stroke-dasharray: 4 4; }
.sg-map .n circle { stroke: var(--c); stroke-width: 1.8; fill: var(--sg-paper); }
.sg-map .n.done circle { fill: var(--c); }
.sg-map .n.done text { fill: var(--sg-ink); font-weight: 600; }
.sg-map .opt-note { font-size: 11.5px; font-style: italic; }
.sg-map a:hover text { fill: var(--c); text-decoration: underline; }
.sg-map a:focus-visible circle { stroke-width: 3.5; }
.md-typeset .sg-legend { font-size: 0.7rem; color: var(--sg-muted); }
.md-typeset .sg-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--sg-pre); margin: 0 0.35em 0 0; }
.md-typeset .sg-legend i.done { background: var(--sg-pre); }
.md-typeset .sg-legend span + span { margin-left: 1.2em; }

/* ---------- concept diagrams (website/snippets/*.html) ---------- */
.md-typeset figure.sg-fig, .md-typeset figure.sg-chart { display: block; max-width: 100%; width: 100%; margin: 1.6em 0; text-align: left; }
.md-typeset figure.sg-fig figcaption, .md-typeset figure.sg-chart figcaption {
  max-width: none; margin: 0.6em 0 0; font-size: 0.72rem; font-style: normal; color: var(--sg-muted); line-height: 1.5;
}
.sg-fig-scroll { overflow-x: auto; }
.sg-fig svg { display: block; width: 100%; height: auto; min-width: 560px; }
.sg-fig .d-t { font-family: var(--md-text-font-family); font-size: 13px; fill: var(--sg-muted); }
.sg-fig .d-k { font-family: var(--md-text-font-family); font-size: 13px; font-weight: 600; fill: var(--sg-ink); }
.sg-fig .d-m { font-family: var(--md-code-font-family); font-size: 12.5px; fill: var(--sg-ink); }
.sg-fig .d-m.d-acc { fill: var(--sg-accent); font-weight: 600; }
.sg-fig .d-line { stroke: var(--sg-edge); stroke-width: 1.4; fill: none; }
.sg-fig .d-line.acc { stroke: var(--sg-accent); opacity: 0.55; }
.sg-fig .d-dash { stroke-dasharray: 4 4; }
.sg-fig .d-head { fill: var(--sg-edge); }
.sg-fig .d-rule { stroke: var(--sg-ink); stroke-width: 1; }
.sg-fig .d-box { fill: none; stroke: var(--sg-edge); stroke-width: 1.2; }
.sg-fig .d-cell { fill: var(--sg-paper); stroke: var(--sg-edge); stroke-width: 1; }
.sg-fig .d-node { fill: var(--sg-accent); }
.sg-fig .d-dot { fill: var(--sg-edge); }
.sg-fig .d-lod { stroke: var(--sg-ink); stroke-width: 2; }

/* ---------- charts: interactive when the library loads, a picture otherwise ---------- */
.sg-plot { border: 1px solid var(--sg-rule); border-radius: 10px; overflow: hidden; background: #fcfcfb; }
[data-md-color-scheme="slate"] .sg-plot[data-state="live"] { background: #16181b; }
.sg-plot img { display: block; width: 100%; height: auto; }
.sg-plot-live { width: 100%; }

/* "optional" next to a heading (Start: bridging) */
.md-typeset .sg-opt { font-size: 0.62em; font-weight: 400; color: var(--sg-muted); margin-left: 0.5em; letter-spacing: 0; }