/* ── Palette ──────────────────────────────────────────────────────────────── */

:root {
  --ink: #14213d;
  --muted: #52616b;
  --link: #1d4ed8;
  --accent: #2a9d8f;
  --soft: #f6f8fb;
  --rule: #d9e2ec;
  --panel: #ffffff;
  --figure-bg: #ffffff;
  --shadow: 0 10px 26px rgba(20, 33, 61, 0.07);
}

body.quarto-dark {
  --ink: #e6edf3;
  --muted: #9fb0c0;
  --link: #79b8ff;
  --accent: #4fd1c5;
  --soft: #1c2128;
  --rule: #30363d;
  --panel: #161b22;
  --figure-bg: #ffffff;
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

body {
  color: var(--ink);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

main.content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

#quarto-content {
  column-gap: 3rem;
}

#quarto-margin-sidebar {
  min-width: 240px;
  padding-left: 1.2rem;
}

#TOC {
  border-left: 1px solid var(--rule);
  max-width: 230px;
  padding-left: 1rem;
  font-size: 0.94rem;
}

#TOC .nav-link {
  line-height: 1.25;
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
}

/* ── Typography ───────────────────────────────────────────────────────────── */

.quarto-title-block .title {
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.quarto-title-block .subtitle {
  color: var(--muted);
  margin-top: 0.4rem;
  font-weight: 400;
  line-height: 1.4;
}

a {
  color: var(--link);
  text-underline-offset: 2px;
}

h2 {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.35rem;
  margin-top: 2.75rem;
  letter-spacing: -0.005em;
}

h3 {
  margin-top: 1.9rem;
}

p,
li {
  line-height: 1.62;
}

/* First paragraph after a section heading carries the section. */
h2 + p {
  font-size: 1.03rem;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

table {
  font-size: 0.93rem;
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
}

thead th {
  background: var(--soft);
  border-bottom: 2px solid var(--rule);
  font-weight: 650;
  white-space: nowrap;
}

tbody tr + tr {
  border-top: 1px solid var(--rule);
}

tbody tr:hover {
  background: var(--soft);
}

th,
td {
  padding: 0.42rem 0.6rem;
}

/* Numeric columns read better tabular. */
td {
  font-variant-numeric: tabular-nums;
}

/* ── Code ─────────────────────────────────────────────────────────────────── */

pre {
  border-radius: 8px;
  border: 1px solid var(--rule);
}

pre code {
  font-size: 0.86rem;
  line-height: 1.5;
}

code:not(pre code) {
  font-size: 0.88em;
  padding: 0.1em 0.32em;
  border-radius: 4px;
  background: var(--soft);
}

blockquote {
  border-left: 4px solid var(--accent);
  color: var(--muted);
  padding-left: 1rem;
  margin-left: 0;
  font-style: normal;
}

/* ── Figures ──────────────────────────────────────────────────────────────── */

img {
  max-width: 100%;
  height: auto;
}

/* Diagrams carry their own light ground, so they sit on a panel in both
   themes rather than inheriting a dark page background. */
p img,
figure img {
  background: var(--figure-bg);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

figure {
  margin: 1.75rem 0;
}

figcaption,
.figure-caption {
  color: var(--muted);
  font-size: 0.87rem;
  line-height: 1.45;
  margin-top: 0.55rem;
}

/* Wide diagrams scroll inside their own box instead of the page. */
p:has(> img.figure-img) {
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

p:has(> img.figure-img) > img.figure-img {
  display: block;
}

.cell-output-display .mermaid {
  margin: 1.25rem 0;
}

/* ── Callouts ─────────────────────────────────────────────────────────────── */

.callout {
  border-radius: 8px;
  margin: 1.6rem 0;
}

.callout.callout-style-default .callout-body {
  font-size: 0.94rem;
}

.callout .callout-title {
  font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.nav-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1530px) {
  main.content {
    max-width: 900px;
  }

  #quarto-margin-sidebar {
    display: none;
  }
}

@media (max-width: 760px) {
  #quarto-content.page-columns {
    display: block;
  }

  main.content {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .quarto-title-block .title {
    overflow-wrap: anywhere;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Charts are ~980px of mostly whitespace and stay readable when scaled to
     the viewport, so they shrink to fit rather than forcing a sideways scroll. */
  p:has(> img.figure-img) > img.figure-img {
    width: 100%;
    max-width: 100%;
  }

  /* The two schematics carry 12px labels inside boxes. Scaling those to phone
     width makes them illegible, so they keep their size and scroll instead.
     Selected by filename because Quarto drops {.class} attributes on images. */
  p:has(> img[src$="pipeline-architecture.svg"]) > img,
  p:has(> img[src$="question-to-evidence.svg"]) > img {
    width: 1040px;
    max-width: none;
  }
}