:root {
  --navbar-bg: #14507a;
  --navbar-fg: #eaf4ff;
  --navbar-fg-active: #ffffff;
}

/* ── Top menubar (Quarto navbar) — blue background, white/light-blue text ──
   Quarto pins the header via `header.fixed-top` and offsets the body via
   `body.nav-fixed{padding-top:64px}`; do NOT set position:fixed on .navbar
   here (it would take the nav out of the header's flow, collapse the header
   height to 0, and make Quarto's headerOffset() return 0 → content slides
   under the bar). Only recolor. */
.navbar {
  background-color: var(--navbar-bg) !important;
}
/* Keep the navbar visible at all times. Quarto's headroom JS normally hides
   the bar (translateY(-100%)) on scroll-down; override the unpinned state so
   it always stays fixed and visible while scrolling. */
header.headroom--unpinned { transform: translateY(0%) !important; }
/* Recolor the blue ribbon logo so it stands out against the blue navbar. */
.navbar .navbar-brand-logo .navbar-logo {
  filter: brightness(0) invert(1);
  /* Bootstrap sets only max-height:24px; the SVG's square viewBox then
     collapses to 0×0 in the inline-flex brand. Give an explicit height so
     the ribbon actually renders. */
  height: 24px;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-toggler {
  color: var(--navbar-fg) !important;
}
.navbar .navbar-brand:hover,
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link:focus {
  color: var(--navbar-fg-active) !important;
}
.navbar .navbar-toggler {
  border-color: color-mix(in srgb, var(--navbar-fg) 60%, transparent);
}
.navbar .navbar-toggler-icon {
  filter: invert(90%) sepia(10%) saturate(300%) hue-rotate(180deg);
}
/* Make the navbar search lens (loupe) white so it is visible against the
   blue bar. Quarto's search injects the icon via an Algolia autocomplete;
   Bootstrap paints the SVG glyph gray (rgb(84,85,85)). Override the stroke
   colour on the injected icon. */
.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon,
.navbar #quarto-search.type-overlay .aa-Autocomplete .aa-Form .aa-Label svg,
.navbar #quarto-search.type-overlay .aa-Autocomplete .aa-Form .aa-LoadingIndicator svg {
  color: var(--navbar-fg-active) !important;
}
.navbar .dropdown-menu {
  background-color: var(--navbar-bg);
}
.navbar .dropdown-menu .dropdown-item {
  color: var(--navbar-fg) !important;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item.active {
  background-color: color-mix(in srgb, var(--navbar-bg) 85%, var(--bs-white));
  color: var(--navbar-fg-active) !important;
}
/* Keep the right margin sidebar (TOC, blog categories) pinned while scrolling.
   Quarto makes it sticky by default; this site's previous override forced it to
   `position: static`, so the TOC scrolled out of view on long pages and the
   scrollspy highlight ("current section") was invisible while reading. Sticky
   keeps it in the right margin below the fixed header, where the active-section
   highlight from Quarto's IntersectionObserver is actually useful. Quarto also
   sets inline top/max-height on the element, so `!important` is required to win
   over that inline style. */
 #quarto-margin-sidebar {
   position: sticky !important;
   top: 72px !important;          /* just below the 64px fixed header */
   align-self: start;
   overflow-y: auto;
   overscroll-behavior: contain;
   max-height: calc(100vh - 88px) !important;
 }
/* NOTE: these rules are deliberately UNLAYERED. styles.css is linked after
   Bootstrap/Quarto CSS in the site, so unlayered rules win over Quarto's
   unlayered callout styles by source order. Wrapping them in @layer would
   DEMOTE them below unlayered CSS and the overrides would not apply. */
  body, p, li, dd, td, th { text-align: justify; hyphens: auto; }
  h1,h2,h3,h4,h5,h6, nav, .sidebar, pre, code,
  .callout-title-container, .registry-badge, .registry-name,
  dt, caption, figcaption, .quarto-title-meta { text-align: unset; }

  figure img { max-inline-size: 100%; block-size: auto; }
  .math.display { overflow-x: auto; padding-block: 0.2em; }
  .sidebar nav[role="doc-toc"] ul { list-style-type: none; padding-inline-start: 0.8em; }

  /* Accent boxes — one shared frame. Each box sets `--box-accent` (a cosmo
     token) and `--box-accent-strong` (a fully saturated, darkened variant),
     from which the border, the tinted fill, and the vivid title badge derive.
     `--box-accent-strong` is set PER FAMILY (below), not computed here, so it
     can be tuned per hue to guarantee WCAG AA contrast (>= 4.5:1) of the
     white title text against the badge. Selectors repeat the full
     `.callout.callout-style-default.callout-*` chain Quarto uses for headers,
     so these have at least equal specificity and win by source order.

     Box fill = a visible tint of the accent over white (~15%, matching the
     theme's own -bg-subtle approach; Bootstrap computes these from the
     accent at similar proportions). Title badge = the saturated dark accent. */
  .callout.callout-style-default.callout-warning,
  .callout.callout-style-default.callout-note,
  .callout.callout-style-default.callout-important,
  .callout.callout-style-default.callout-tip,
  .callout.callout-style-default.callout-caution,
  .callout.callout-style-default.env-hypothesis,
  .callout.callout-style-default.env-proposal,
  .callout.callout-style-default.env-direction,
  .callout.callout-style-default.env-speculation,
  .callout.callout-style-default.env-key-point,
  .callout.callout-style-default.env-achievement,
  .callout.callout-style-default.env-open-question,
  .callout.callout-style-default.env-limitation,
  .callout.callout-style-default.env-warning,
  .callout.callout-style-default.env-prediction,
  .callout.callout-style-default.env-model-insight,
  .callout.callout-style-default.env-recommendation,
  .callout.callout-style-default.env-synthesis,
  .callout.callout-style-default.env-clinical-finding,
  .callout.callout-style-default.env-observation,
  .callout.callout-style-default.env-finding {
    border-inline-start: 4.5px solid var(--box-accent-strong);
    border-top: 1px solid color-mix(in srgb, var(--box-accent) 60%, var(--bs-white));
    border-right: 1px solid color-mix(in srgb, var(--box-accent) 60%, var(--bs-white));
    border-bottom: 1px solid color-mix(in srgb, var(--box-accent) 60%, var(--bs-white));
    background-color: var(--box-bg);
    /* subtle lightening toward the top — a soft, almost imperceptible sheen
       that lifts the fill off a flat pastel, without a visible band. */
    background-image: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 42%);
    color: var(--box-fg, color-mix(in srgb, var(--box-accent) 60%, var(--bs-black)));
    padding: 0.8rem 1rem;
    margin-block-end: 1rem;
  }
  /* Quarto callout header — icon + title on one line. Transparent so the
     box's own pale fill shows through; only the title badge carries the
     vivid accent. */
  .callout.callout-style-default > .callout-header {
    display: flex; align-items: center; gap: 0.5em; margin-block-end: 0.4em;
    background: transparent !important;
    opacity: 1;
    padding-top: 0; padding-bottom: 0;
  }
  .callout-icon-container { display: inline-flex; align-items: center; }
  .callout.callout-style-default > .callout-header .callout-title-container {
    background: var(--box-accent-strong);
    color: var(--bs-white);
    padding: 0.2em 0.6em;
    border-radius: var(--bs-border-radius);
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    font-weight: 600;
  }
  /* Icon glyph recolored to the title-badge color. Quarto paints the glyph as
     a background-image SVG on .callout-icon::before; to tint the GLYPH (not a
     filled rectangle) to the box's accent, drop the SVG fill and use the glyph
     as a CSS mask filled with `--box-accent-strong`. The glyph URL comes from
     Bootstrap itself (stored per callout type in --callout-icon). */
  .callout.callout-style-default > .callout-header .callout-icon {
    color: var(--box-accent-strong);
  }
  .callout.callout-style-default > .callout-header .callout-icon::before {
    background-image: none;
    -webkit-mask-image: var(--callout-icon);
    mask-image: var(--callout-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--box-accent-strong);
  }
  /* Box body text = a darker version of the box's accent (theme -text-emphasis
     where available, else a color-mix of the accent toward black). */
  .callout.callout-style-default .callout-body-container {
    color: var(--box-fg, color-mix(in srgb, var(--box-accent) 60%, var(--bs-black)));
  }

  /* Quarto base callouts → theme-native hue + subtle fill + saturated dark
     strong variant (title badge bg / border / icon). Fill uses the theme's
     own -bg-subtle token; strong is chosen so white title text meets AA.
     `--callout-icon` is the glyph Bootstrap paints for each type, reused as a
     CSS mask so the icon takes the title-badge colour. */
  .callout-warning   { --box-accent: #ff6b8a;  --box-accent-strong: #a63a56; --box-bg: #ffd6e0;  --box-fg: #6b1f36;  --callout-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/><path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/></svg>"); }
  .callout-note      { --box-accent: #3d7ef7; --box-accent-strong: #1758b8; --box-bg: #cfe7ff; --box-fg: #123c6b;   --callout-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></svg>"); }
  .callout-important { --box-accent: #2fbf6e; --box-accent-strong: #1a7a43; --box-bg: #cdf3df; --box-fg: #0e4a29; --callout-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/></svg>"); }
  .callout-tip       { --box-accent: #00b8e0; --box-accent-strong: #087381; --box-bg: #b8f2ff; --box-fg: #00566b;    --callout-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z'/></svg>"); }
  .callout-caution   { --box-accent: #ff9f43; --box-accent-strong: #a85f00; --box-bg: #ffddb0; --box-fg: #7a3a00; --callout-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M9.97 4.88l.953 3.811C10.158 8.878 9.14 9 8 9c-1.14 0-2.159-.122-2.923-.309L6.03 4.88C6.635 4.957 7.3 5 8 5s1.365-.043 1.97-.12zm-.245-.978L8.97.88C8.718-.13 7.282-.13 7.03.88L6.274 3.9C6.8 3.965 7.382 4 8 4c.618 0 1.2-.036 1.725-.098zm4.396 8.613a.5.5 0 0 1 .037.96l-6 2a.5.5 0 0 1-.316 0l-6-2a.5.5 0 0 1 .037-.96l2.391-.598.565-2.257c.862.212 1.964.339 3.165.339s2.303-.127 3.165-.339l.565 2.257 2.391.598z'/></svg>"); }

  /* Environment families → cosmo hues. These come AFTER the Quarto callout
     types because env boxes carry BOTH a callout-* type class and an env-*
     class; the env-* class carries the true epistemic meaning and must win
     (e.g. #hypothesis → .callout-important + .env-hypothesis → blue). Teal,
     indigo, and info have no theme -bg-subtle token, so env fills use a
     color-mix tint of their accent over white. */
   /* Environment families → distinct, cool, modern hues. Each family carries a
      base callout-* type class AND an env-* class; env-* must win. Colors are
      bright-but-soft pastel fills with vivid accents and dark-saturated text
      (light on the eyes, no old-paper warmth), chosen to differ from the base
      callout they may ride on. */
   .env-hypothesis, .env-proposal, .env-direction { --box-accent: #e6b800; --box-accent-strong: #9a6b00; --box-bg: #ffea9c; --box-fg: #6b5400; }
   .env-speculation, .env-key-point { --box-accent: #00b8e0; --box-accent-strong: #087381; --box-bg: #b8f2ff; --box-fg: #00566b; }
   .env-recommendation, .env-achievement { --box-accent: #8bc534; --box-accent-strong: #4c7009; --box-bg: #d6f2a3; --box-fg: #3c5700; }
   .env-open-question, .env-synthesis { --box-accent: #18c091; --box-accent-strong: #00825c; --box-bg: #bdf5e2; --box-fg: #005b46; }
   .env-prediction, .env-model-insight { --box-accent: #2f8bd0; --box-accent-strong: #14507a; --box-bg: #bfe3ff; --box-fg: #0a3d5c; }
   .env-clinical-finding { --box-accent: #7c5ce0; --box-accent-strong: #4b3a99; --box-bg: #d9c6ff; --box-fg: #3a2b6b; }
   .env-observation      { --box-accent: #bd8ff0; --box-accent-strong: #7a4da0; --box-bg: #ecd9ff; --box-fg: #4a3266; }
   .env-limitation { --box-accent: #ff9f43; --box-accent-strong: #a85f00; --box-bg: #ffddb0; --box-fg: #7a3a00; }
   .env-warning    { --box-accent: #ff6b8a; --box-accent-strong: #a63a56; --box-bg: #ffd6e0; --box-fg: #6b1f36; }
   .env-finding { --box-accent: #7bff00; --box-accent-strong: #016b2d; --box-bg: #d6ffb0; --box-fg: #0d3a22; }

   /* Families without an explicit --box-fg (teal, indigo): dark version of
      their accent, so text matches hue regardless of the base callout type. */
   .env-open-question, .env-synthesis,
   .env-clinical-finding {
     --box-fg: color-mix(in srgb, var(--box-accent) 72%, var(--bs-black));
   }

   /* Families without an explicit --box-bg (teal, indigo have no theme
      -bg-subtle token): tint their accent over white. All other env families
      carry their own explicit fill above. */
   .env-open-question, .env-synthesis,
   .env-clinical-finding {
     --box-bg: color-mix(in srgb, var(--box-accent) 15%, var(--bs-white));
   }

  /* Finding block — a defined zone with a clear border on all sides (not just
     the left accent edge), so it reads as a distinct box. The heading badge
     keeps the saturated accent; interior fields sit on the pale fill. */
  .env-finding {
    border: 1px solid var(--box-accent-strong);
    border-radius: var(--bs-border-radius);
    padding: 0.8rem 1rem;
    background-color: var(--box-bg);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 42%);
    color: var(--box-fg);
  }
  .env-finding + .env-finding { margin-block-start: 1.5em; }
  /* Finding uses the standard Quarto callout header (icon + full-width title
     bar) like every other env box, so no bespoke heading styles are needed
     beyond the accent token (set on .env-finding below) and the fields list. */
  .env-finding-explanation { margin-block-end: 0.5em; }
  .env-finding-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin-block: 0;
    font-size: 0.9em;
  }
  .env-finding-fields dt { font-weight: 500; color: var(--box-fg); white-space: nowrap; }
  .env-finding-fields dd { margin-inline-start: 0; }

  /* Registry entry cards — reuse the same accent system */
  .registry-entry {
    --box-fg: color-mix(in srgb, var(--box-accent) 72%, var(--bs-black));
    border-inline-start: 4.5px solid var(--box-accent-strong);
    border-top: 1px solid color-mix(in srgb, var(--box-accent) 60%, var(--bs-white));
    border-right: 1px solid color-mix(in srgb, var(--box-accent) 60%, var(--bs-white));
    border-bottom: 1px solid color-mix(in srgb, var(--box-accent) 60%, var(--bs-white));
    background-color: var(--box-bg, color-mix(in srgb, var(--box-accent) 15%, var(--bs-white)));
    background-image: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 42%);
    color: var(--box-fg);
    padding: 0.75rem 1rem 0.5rem;
    margin-block-end: 1rem;
  }
  .registry-header { display: flex; align-items: baseline; gap: 0.6em; margin-block-end: 0.5em; }
  .registry-badge { font-size: 0.78em; font-weight: bold; padding: 0.15em 0.45em; white-space: nowrap; color: var(--bs-white); background: var(--box-accent-strong); border-radius: var(--bs-border-radius); }
  .registry-name { font-weight: bold; font-size: 0.95em; color: var(--box-fg); }
  .registry-fields {
    display: grid;
    grid-template-columns: 7em 1fr;
    gap: 0.2em 0.75em;
    font-size: 0.88em;
    margin: 0;
  }
  .registry-fields dt { font-weight: bold; color: var(--box-fg); padding-block-start: 0.1em; margin: 0; }
  .registry-fields dd { color: var(--box-fg); margin: 0; }

  .registry-H  { --box-accent: #e6b800; --box-accent-strong: #9a6b00; --box-bg: #ffea9c; --box-fg: #6b5400; }   /* hypothesis (gold) */
  .registry-S  { --box-accent: #00b8e0; --box-accent-strong: #087381; --box-bg: #b8f2ff; --box-fg: #00566b; }   /* speculation (cyan) */
  .registry-OQ { --box-accent: #18c091; --box-accent-strong: #00825c; --box-bg: #bdf5e2; --box-fg: #005b46; }   /* open question (teal) */
  .registry-P  { --box-accent: #2f8bd0; --box-accent-strong: #14507a; --box-bg: #bfe3ff; --box-fg: #0a3d5c; }   /* prediction (azure) */

  /* Epigraphs / blockquotes — theme border width + subtle hue */
  :where(.epigraph, blockquote) {
    border-inline-start: var(--bs-border-width) solid var(--bs-gray-400);
    background: var(--bs-light);
    color: var(--bs-secondary-color);
    font-style: italic;
    padding: 0.6em 1em;
  }

  /* ch29 response marks — ✓/✗ icons, not prose */
  .response-mark.positive { color: var(--bs-success); }
  .response-mark.negative { color: var(--bs-danger); }

  /* ── Glossary tooltips (custom popover) ── */
  /* Underline + "?" badge follow the box's text colour (--box-fg) when inside
     an env/callout box, else fall back to #0079ab (the tip callout title
     background — a lighter, more vivid blue than the dark primary). */
  .gt, glossary-term { border-bottom: 1.5px dashed var(--box-fg, #0079ab); cursor: help; color: inherit; display: inline; }
  /* The "?" badge uses the same colour as the underline (box text in-box, tip
     blue otherwise), with a white glyph. Raised slightly to sit level with
     surrounding text. */
  .gt-icon, :is(.gt, glossary-term):not(:has(.gt-icon))::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 12px; block-size: 12px; border-radius: 50%;
    background: var(--box-fg, #0079ab);
    color: var(--bs-white); font-size: 9px; line-height: 1;
    cursor: help; vertical-align: 0.5em;
  }
  .gt-icon { margin-inline-start: 2px; user-select: none; }
  :is(.gt, glossary-term):not(:has(.gt-icon))::after { content: '?'; margin-inline-start: 2px; }

  .gt-pop {
    position: fixed; z-index: 99999; max-inline-size: min(90vw, 520px);
    background: var(--bs-body-bg); border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg); box-shadow: var(--bs-box-shadow);
    padding: 12px 14px; font-size: 0.875rem; line-height: 1.5;
    display: flex; flex-direction: column; gap: 4px;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
    pointer-events: none; overflow-wrap: break-word; word-break: break-word;
    max-block-size: min(80vh, 600px); overflow-y: auto;
  }
  .gt-show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

  .gt-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--bs-secondary-color); }
  .gt-term { font-weight: 700; font-size: 0.95rem; color: var(--bs-body-color); }
  .gt-def { color: var(--bs-body-color); }

  .gt-td {
    font-size: 0.8rem; line-height: 1.45; color: var(--bs-body-color); margin: 2px 0; padding: 3px 6px;
    background: var(--bs-light); border-left: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
  }
  .gt-td b, .gt-dz-cat b { text-transform: uppercase; letter-spacing: 0.04em; }
  .gt-td b { font-size: 0.65rem; }

  .gt-dz-table { width: 100%; border-collapse: collapse; margin: 4px 0; font-size: 0.75rem; }
  .gt-dz-table th { text-align: left; font-weight: 600; color: var(--bs-secondary-color); padding: 2px 4px; border-bottom: var(--bs-border-width) solid var(--bs-border-color); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .gt-dz-table td { padding: 3px 4px; vertical-align: top; border-bottom: var(--bs-border-width) solid var(--bs-border-color); line-height: 1.35; }
  .gt-dz-dose { white-space: nowrap; color: var(--bs-secondary-color); width: 1%; }
  .gt-dz-cat { white-space: nowrap; width: 1%; }
  .gt-dz-cat b { font-size: 0.6rem; }
  .gt-dz-mech { color: var(--bs-secondary-color); }
  tr:only-child .gt-dz-dose.gt-dz-single { display: none; }

  .gt-also, .gt-sources { font-size: 0.8rem; color: var(--bs-secondary-color); border-top: var(--bs-border-width) solid var(--bs-border-color); padding-top: 4px; margin-top: 2px; }
  .gt-sources { font-size: 0.75rem; line-height: 1.6; }
  .gt-sources a { color: #0d6efd !important; text-decoration: none; }
  .gt-sources a:hover { text-decoration: underline; }
  .gt-pop b { color: var(--bs-emphasis-color); }

  .unbulleted { list-style-type: none; padding-inline-start: 0; }

  /* Empty placeholder <span> nodes emitted between items by some Quarto
     versions in the grid-listing template. As direct children of the CSS grid
     they would each occupy a grid cell, spacing the article cards apart. Hide
     them so only real .g-col-* items fill the grid. */
  .quarto-listing-container-grid .list.grid > span { display: none; }

  /* Quarto's HTML writer injects whitespace-only placeholder <span> nodes as
     direct children of #quarto-content (version-dependent; seen in some
     deployed Quarto builds). Because #quarto-content is a CSS grid
     (page-columns / page-rows-contents), each such span becomes a grid item
     and pushes the real content down. Every direct-child <span> of
     #quarto-content is a placeholder — real content sits in <nav>, <div>,
     <main>, <script> siblings. No element-children check is needed: there are
     no legitimate direct-child spans in Quarto's output, so a plain child
     selector is safe. Mirrors the .list.grid > span rule above. */
  #quarto-content > span { display: none; }

  /* ── mecfs-sidebar: fixed left navigation column ─────────────────────
     The <mecfs-sidebar> web component is injected via include-after-body,
     so Quarto places it after </main> in normal flow. On desktop we pin it
     to the left edge of the viewport (below the fixed header) as a docked
     column, and shift #quarto-content right to make room. On small screens
     it becomes an off-canvas drawer toggled by the hamburger button. */
  mecfs-sidebar {
    position: fixed;
    top: 0;                   /* JS sets the real top below the fixed navbar */
    left: 0;
    bottom: 0;
    width: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bs-white, #fff);
    border-right: 1px solid #dee2e6;
    padding: 0.5rem 0.75rem 2rem;
    z-index: 1020;            /* above content, below the fixed header */
    font-size: 0.9rem;
    -webkit-overflow-scrolling: touch;
  }
  /* The component renders a nested <ul>; normalize spacing. */
  mecfs-sidebar ul { list-style: none; padding-inline-start: 0; }
  mecfs-sidebar li { margin-block: 0.15em; }
  mecfs-sidebar .sidebar-item-container {
    display: flex; align-items: center; justify-content: space-between;
  }
  mecfs-sidebar a.sidebar-item-text {
    display: inline-flex; align-items: center; gap: 0.4em;
    color: #343a40; text-decoration: none;
    padding: 0.2em 0.4em; border-radius: 0.25em; width: 100%;
  }
  mecfs-sidebar a.sidebar-item-text:hover { background: #f1f3f5; color: #0d6efd; }
  mecfs-sidebar a.sidebar-item-text.active { background: #e9ecef; font-weight: 600; color: #0d6efd; }
  mecfs-sidebar .sidebar-section { margin-left: 0.3em; }
  mecfs-sidebar .sidebar-item-toggle {
    border: 0; background: transparent; color: #6c757d; cursor: pointer;
    padding: 0.2rem 0.4rem; border-radius: 0.25rem;
  }
  mecfs-sidebar .sidebar-item-toggle:hover { background: #e9ecef; color: #0d6efd; }
  /* Rotate the chevron for an open (expanded) section. Bootstrap toggles
     .show on the .collapse target. */
  mecfs-sidebar li.sidebar-item-section:has(.collapse.show) > .sidebar-item-container .bi-chevron-right {
    transform: rotate(90deg);
  }

  /* Medical disclaimer pinned at the bottom of the left navigation column.
     Sits after the nav <ul>, so it is pushed down as sections expand (inside
     the sidebar's own scroll area). */
  mecfs-sidebar .sidebar-disclaimer {
    margin-block-start: 1.5rem;
    padding-block-start: 0.75rem;
    border-top: 1px solid #dee2e6;
    font-size: 0.8rem;
    color: #6c757d;
  }
  mecfs-sidebar .sidebar-disclaimer-title {
    font-weight: 600;
    color: #495057;
    margin-block-end: 0.3rem;
  }
  mecfs-sidebar .sidebar-disclaimer-body { margin-block: 0; }

  /* Collapse the right margin sidebar when it holds no content (Quarto emits
     an empty #quarto-margin-sidebar when a page has no TOC / margin items).
     Merge the margin columns into the body so the main content spans the full
     available width. JS adds .no-margin-sidebar when the sidebar is empty. */
  #quarto-content.no-margin-sidebar {
    grid-template-columns: [screen-start] 1.5em [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] minmax(0px, 1fr) [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset] 1.5em [screen-end];
  }
  #quarto-content.no-margin-sidebar #quarto-margin-sidebar { display: none; }

  /* Sidebar toggle button (hamburger) shown only on small screens. */
  .mecfs-sidebar-toggle {
    position: fixed;
    top: 60px; left: 0;
    width: 34px; height: 34px;
    display: none;
    align-items: center; justify-content: center;
    background: #f8f9fa; border: 1px solid #dee2e6; border-left: 0;
    border-radius: 0 0.25rem 0.25rem 0;
    color: #343a40; cursor: pointer; z-index: 1021;
    font-size: 1rem;
  }
  .mecfs-sidebar-toggle:hover { background: #e9ecef; }

  /* Offset the main content right to clear the fixed sidebar (desktop). */
  #quarto-content { margin-inline-start: 280px; }

  /* ── Responsive: off-canvas drawer on small screens ────────────────── */
  @media (max-width: 991.98px) {
    mecfs-sidebar {
      top: 0;
      width: min(320px, 85vw);
      transform: translateX(-100%);
      transition: transform 0.2s ease-in-out;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
      z-index: 1040;             /* above the fixed header */
    }
    mecfs-sidebar.open { transform: translateX(0); }
    /* Keep the hamburger above the open drawer so it stays clickable. */
    .mecfs-sidebar-toggle { display: flex; z-index: 1050; }
    /* Remove the desktop offset; the drawer overlays content. */
    #quarto-content { margin-inline-start: 0; }
  }

  /* ── Home page: chapter explorer accordion + carousel ──────────────── */
  /* Unlayered so these win over Bootstrap defaults by source order. Uses a
     cool pastel azure/violet palette consistent with the box-color system. */

  /* On wide screens place "The Paper" and "Recent Blog Articles" side by
     side; below the breakpoint each stays full-width and stacks. The two
     columns sit in the home page .grid (12 columns), each spanning 6. */
  @media (min-width: 1600px) {
    .grid > .home-col {
      grid-column: span 6;
    }
  }

  .part-accordion { margin-block: 1rem; }
  part-accordion { display: block; }

  .part-accordion-item {
    border: 1px solid #dee2e6;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
  }
  /* Unified accordion: round only the outer corners, no gaps between items. */
  .part-accordion-item:first-of-type {
    border-radius: 0.5rem 0.5rem 0 0;
  }
  .part-accordion-item:last-of-type {
    border-radius: 0 0 0.5rem 0.5rem;
  }
  .part-accordion-item:not(:first-of-type) {
    border-top: 0;
  }
  .part-accordion-item .accordion-button {
    background: #f4f7fb;
    color: #0a3d5c;
    font-weight: 600;
    padding-block: 1rem;
    box-shadow: none;
  }
  .part-accordion-item .accordion-button:not(.collapsed) {
    background: #e3effc;
    color: #0a3d5c;
  }
  .part-accordion-item .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(47,139,208,0.25);
  }
  .part-accordion-item .accordion-button::after {
    color: #14507a;
  }
  .part-accordion-title { flex: 1; }
  .part-accordion-meta {
    font-size: 0.85rem;
    font-weight: 500;
    color: #5a6b7a;
    margin-inline-start: 0.75rem;
    white-space: nowrap;
  }
  .part-accordion-body {
    padding: 0.5rem 1.25rem 1.25rem;
    background: #ffffff;
  }
  .part-accordion-blurb {
    color: #3c4c5c;
    margin-block: 0.5rem 0.75rem;
    font-size: 0.98rem;
  }

  .part-carousel { padding-block: 0.25rem 2rem; }
  .part-carousel .carousel-inner {
    background: #f7fafd;
    border: 1px solid #dbe6f0;
    border-radius: 0.5rem;
    padding: 1.5rem 3rem;
    min-height: 11rem;
  }
  .part-carousel-slide { text-align: center; }
  .part-carousel-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #0a3d5c;
    margin-block-end: 0.5rem;
  }
  .part-carousel-num {
    display: inline-block;
    background: #14507a;
    color: #ffffff;
    border-radius: 0.35rem;
    padding: 0.1rem 0.45rem;
    margin-inline-end: 0.5rem;
    font-size: 0.85rem;
    vertical-align: middle;
  }
  .part-carousel-about {
    color: #2b3b4b;
    margin-block-end: 0.75rem;
    font-size: 0.95rem;
    max-width: 46rem;
    margin-inline: auto;
  }
  .part-carousel-link {
    border-color: #14507a;
    color: #14507a;
  }
  .part-carousel-link:hover {
    background: #14507a;
    color: #ffffff;
  }

  .part-carousel-indicators {
    position: static;
    margin-block: 0.75rem 0;
  }
  .part-carousel-indicators [data-bs-target] {
    background-color: #14507a;
    width: 12px; height: 12px;
    border-radius: 50%;
    opacity: 0.35;
  }
  .part-carousel-indicators .active { opacity: 1; }

  .part-carousel-control {
    width: 2.5rem;
    color: #14507a;
    filter: none;
  }
  .part-carousel-control:hover,
  .part-carousel-control:focus {
    color: #0a3d5c;
  }
  .part-carousel-control .carousel-control-prev-icon,
  .part-carousel-control .carousel-control-next-icon {
    filter: invert(28%) sepia(60%) saturate(1200%) hue-rotate(185deg);
  }

  .part-carousel-labels {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-block: 0.75rem;
    padding: 0;
    color: inherit;
    text-shadow: none;
    left: auto; right: auto;
  }
  .part-carousel-labels [data-bs-target] {
    border: 1px solid #cfdce8;
    border-radius: 0.4rem;
    background: #eef4fa;
    color: #33536b;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    opacity: 1;
    text-shadow: none;
  }
  .part-carousel-labels [data-bs-target].active {
    background: #14507a;
    border-color: #14507a;
    color: #ffffff;
  }

  .part-accordion-error { color: #a63a56; }

  @media (max-width: 575.98px) {
    .part-carousel .carousel-inner { padding: 1.25rem 0.75rem; }
    .part-carousel-control { width: 1.5rem; }
    .part-carousel-labels { display: none; }
    .part-accordion-meta { display: none; }
  }

  /* ── Homepage title-logo hero ─────────────────────────────────────────
     The homepage replaces the text title (YAML `title:`) with the awareness
     ribbon logo (src/main/web/logos/ribbon.svg) beside the title text. Quarto
     still renders the YAML title as `#title-block-header` for metadata/search;
     on the homepage we hide that text block and show the ribbon + title
     instead. The ribbon carries the brand blue (#2780e3) and the text repeats
     the full title for accessibility. */
  body:has(.homepage-title-logo) #title-block-header { display: none; }
  .homepage-title-logo {
    margin-block: 0.5rem 1rem;
  }
  /* The logo + title are the page's sole <h1> (Quarto's auto title is hidden
     above); lay them out horizontally to save vertical space. */
  .homepage-title-logo h1 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .homepage-title-logo img {
    height: 90px;
    width: auto;
    flex-shrink: 0;
  }
  .homepage-title-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2780e3;
    text-align: left;
  }
  .homepage-title-main {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
  }
  .homepage-title-sub {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
    margin-block-start: 0.25rem;
  }

  @media (max-width: 576px) {
    .homepage-title-logo h1 {
      flex-direction: column;
      gap: 0.5rem;
    }
    .homepage-title-text { text-align: center; }
    .homepage-title-main { font-size: 2rem; }
    .homepage-title-sub { font-size: 1rem; }
  }

  /* ── Breadcrumb trail (mecfs-breadcrumb.js) ──────────────────────────────
     Injected at the top of each document page so a reader who lands mid-way
     can see where they are in the part/chapter hierarchy and jump up one level. */
  .mecfs-breadcrumb {
    font-size: 0.85rem;
    margin-block-end: 0.75rem;
    --bs-breadcrumb-divider: "›";
  }
  .mecfs-breadcrumb .breadcrumb-item a {
    color: #0d6efd;
    text-decoration: none;
  }
  .mecfs-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
  .mecfs-breadcrumb .breadcrumb-item.active { color: var(--bs-secondary-color); }

  /* ── Previous / Next chapter navigation (mecfs-breadcrumb.js) ────────────
     Injected after </main> so the reader can step linearly through the
     document's reading order without returning to the TOC or sidebar. */
  .mecfs-pager {
    border-top: 1px solid var(--bs-border-color);
    margin-block: 2rem 0.5rem;
    padding-block-start: 1rem;
  }
  .mecfs-pager-row { gap: 1rem; }
  .mecfs-pager-item { min-width: 0; flex: 1 1 0; }
  .mecfs-pager-link {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    color: inherit;
    text-decoration: none;
    background: var(--bs-body-bg);
    transition: border-color .15s ease, background-color .15s ease;
  }
  .mecfs-pager-link:hover {
    border-color: #0d6efd;
    background: #f0f6ff;
  }
  .mecfs-pager-caption {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    margin-block-end: 0.15rem;
  }
  .mecfs-pager-title {
    font-weight: 600;
    color: #0d6efd;
    overflow-wrap: break-word;
  }
  .mecfs-pager-next .mecfs-pager-caption::after { content: " →"; }
  .mecfs-pager-prev .mecfs-pager-caption::before { content: "← "; }

  @media (max-width: 576px) {
    .mecfs-pager-row { flex-direction: column; }
  }