.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 60px;
    width: 60px;
    object-fit: contain;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 4px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Container to control the iframe size and scaling */
.iframe-container {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Iframe styles */
  iframe {
    width: 100%;
    border: solid 2px #00796b;
  }

  /* if a div with <div class="upper-alpha"> wraps a list, then number A.B.C.D etc */
  /* this requires that the markdown extension md_in_html is enabled in the mkdocs.yml file */
  .upper-alpha ol {
    list-style-type: upper-alpha;
  }

/* Styling for the Copy Button */
.admonition.prompt {
  position: relative;
}

.admonition.prompt .copy-button {
  position: absolute;
  top: 4px;
  right: 6px;
  background-color: #0056d6;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.3rem;
  cursor: pointer;
  font-size: 0.7rem;
}

.admonition.prompt .copy-button:hover {
  background-color: #0041a4; /* Darker blue on hover */
}

/* MicroSim build-status indicators in the nav.
   Material Community renders <span class="md-status md-status--<name>"> as
   an empty span and paints the icon via a CSS `mask-image` driven by the
   --md-status--<name> custom property. Material only ships variables for
   `new`, `deprecated`, and `encrypted`, so we define our own here.
   The visible color comes from the :after background-color, NOT from `color`,
   because the SVG is applied as a mask.

   Footgun warning: do NOT add `theme.icon.status` to mkdocs.yml to try to
   set these icons — that key is silently Insiders-only on the Material
   community edition and the icons will fall back to the generic "i in a
   circle" indicator with no warning at build time. The CSS variables below
   are the load-bearing piece on community Material. */
:root {
  /* Filled circle (Material Design Icons "circle") */
  --md-status--scaffold: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"/></svg>');
  --md-status--built: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"/></svg>');
  /* Check-circle (Material Design Icons "check-circle") */
  --md-status--approved: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"/></svg>');
  /* Filled circle, like scaffold/built: the sim works */
  --md-status--implemented: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"/></svg>');
  /* Signal (Material Design Icons "access-point"): the sim emits xAPI events. The standard
     xAPI-instrumentation icon in every book; do not substitute another glyph. */
  --md-status--instrumented: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z"/></svg>');
}

.md-status--scaffold:after {
  background-color: #d32f2f; /* red — scaffold, not yet implemented */
  -webkit-mask-image: var(--md-status--scaffold);
          mask-image: var(--md-status--scaffold);
}
.md-status--built:after {
  background-color: #f57c00; /* orange — built, awaiting review */
  -webkit-mask-image: var(--md-status--built);
          mask-image: var(--md-status--built);
}
.md-status--approved:after {
  background-color: #388e3c; /* green — approved */
  -webkit-mask-image: var(--md-status--approved);
          mask-image: var(--md-status--approved);
}
.md-status--implemented:after {
  background-color: #1976d2; /* blue — implemented, the sim works */
  -webkit-mask-image: var(--md-status--implemented);
          mask-image: var(--md-status--implemented);
}
.md-status--instrumented:after {
  background-color: #00897b; /* teal — instrumented, emits xAPI events */
  -webkit-mask-image: var(--md-status--instrumented);
          mask-image: var(--md-status--instrumented);
}

/* Material's default :hover rule swaps the background to currentcolor (the
   nav text color) which would erase our reds/oranges/greens. Pin the hover
   color to a darker shade of the status color instead.
   Use a same-hue darken (e.g. Orange 700 → Orange 800), not a value drop
   that crosses into a redder hue (Orange 700 → Orange 900 reads as red). */
.md-status--scaffold:hover:after { background-color: #b71c1c; }
.md-status--built:hover:after    { background-color: #ef6c00; }
.md-status--approved:hover:after { background-color: #1b5e20; }
.md-status--implemented:hover:after  { background-color: #1565c0; }
.md-status--instrumented:hover:after { background-color: #00695c; }

/* ============================================
   Gut Check signature boxes
   Hype Meter grades, family sidebars, claim box, model limits
   ============================================ */
.md-typeset .admonition.hype-strong, .md-typeset details.hype-strong,
.md-typeset .admonition.hype-moderate, .md-typeset details.hype-moderate,
.md-typeset .admonition.hype-preliminary, .md-typeset details.hype-preliminary,
.md-typeset .admonition.hype-hype, .md-typeset details.hype-hype,
.md-typeset .admonition.families, .md-typeset details.families,
.md-typeset .admonition.living-with, .md-typeset details.living-with,
.md-typeset .admonition.claim-box, .md-typeset details.claim-box,
.md-typeset .admonition.model-limits, .md-typeset details.model-limits {
  font-size: inherit;
  border-width: 0 0 0 .3rem;
}
.md-typeset .hype-strong      { border-color: #2e7d32; background: #edf7ee; }
.md-typeset .hype-moderate    { border-color: #1565c0; background: #e9f1fb; }
.md-typeset .hype-preliminary { border-color: #b26a00; background: #fff4e0; }
.md-typeset .hype-hype        { border-color: #c62828; background: #fdecec; }
.md-typeset .families         { border-color: #00796b; background: #e8f5f3; }
.md-typeset .living-with      { border-color: #d9534f; background: #fdf0ef; }
.md-typeset .claim-box        { border-color: #5d4037; background: #f6f1ee; }
.md-typeset .model-limits     { border-color: #546e7a; background: #eef2f4; }

.md-typeset .hype-strong > .admonition-title, .md-typeset .hype-strong > summary           { background: #2e7d32; color: #fff; }
.md-typeset .hype-moderate > .admonition-title, .md-typeset .hype-moderate > summary       { background: #1565c0; color: #fff; }
.md-typeset .hype-preliminary > .admonition-title, .md-typeset .hype-preliminary > summary { background: #b26a00; color: #fff; }
.md-typeset .hype-hype > .admonition-title, .md-typeset .hype-hype > summary               { background: #c62828; color: #fff; }
.md-typeset .families > .admonition-title, .md-typeset .families > summary                 { background: #00796b; color: #fff; }
.md-typeset .living-with > .admonition-title, .md-typeset .living-with > summary           { background: #d9534f; color: #fff; }
.md-typeset .claim-box > .admonition-title, .md-typeset .claim-box > summary               { background: #5d4037; color: #fff; }
.md-typeset .model-limits > .admonition-title, .md-typeset .model-limits > summary         { background: #546e7a; color: #fff; }

/* Small text icon before each signature title instead of Material's default icon */
.md-typeset [class*="hype-"] > .admonition-title::before, .md-typeset [class*="hype-"] > summary::before,
.md-typeset .families > .admonition-title::before, .md-typeset .families > summary::before,
.md-typeset .living-with > .admonition-title::before, .md-typeset .living-with > summary::before,
.md-typeset .claim-box > .admonition-title::before, .md-typeset .claim-box > summary::before,
.md-typeset .model-limits > .admonition-title::before, .md-typeset .model-limits > summary::before { display: none; }
.md-typeset [class*="hype-"] > .admonition-title, .md-typeset .families > .admonition-title,
.md-typeset .living-with > .admonition-title, .md-typeset .claim-box > .admonition-title,
.md-typeset .model-limits > .admonition-title,
.md-typeset [class*="hype-"] > summary, .md-typeset .families > summary,
.md-typeset .living-with > summary, .md-typeset .claim-box > summary,
.md-typeset .model-limits > summary { padding-left: .8rem; }

/* Hype Meter scale bar shown inside each hype box */
.hype-scale { display: flex; gap: 4px; margin: .4rem 0 .6rem; font-size: .7rem; font-weight: 700; }
.hype-scale span { flex: 1; text-align: center; padding: .15rem 0; border-radius: 3px; background: #e0e0e0; color: #616161; }
.hype-strong .hype-scale span:nth-child(1)      { background: #2e7d32; color: #fff; }
.hype-moderate .hype-scale span:nth-child(2)    { background: #1565c0; color: #fff; }
.hype-preliminary .hype-scale span:nth-child(3) { background: #b26a00; color: #fff; }
.hype-hype .hype-scale span:nth-child(4)        { background: #c62828; color: #fff; }

[data-md-color-scheme="slate"] .md-typeset .hype-strong,
[data-md-color-scheme="slate"] .md-typeset .hype-moderate,
[data-md-color-scheme="slate"] .md-typeset .hype-preliminary,
[data-md-color-scheme="slate"] .md-typeset .hype-hype,
[data-md-color-scheme="slate"] .md-typeset .families,
[data-md-color-scheme="slate"] .md-typeset .living-with,
[data-md-color-scheme="slate"] .md-typeset .claim-box,
[data-md-color-scheme="slate"] .md-typeset .model-limits { color: #1d1d1d; }

/* Coral accent for the site header gradient */
.md-header { background: linear-gradient(90deg, #00695c 0%, #00796b 60%, #c9574f 100%); }

/* Some MicroSims stack their controls on phones and need a taller iframe there.
   The sim canvas switches to its narrow layout below 500px wide (viewport about 532px). */
@media screen and (max-width: 560px) {
  .md-typeset iframe.tall-ch02-vagus-signal-router, .md-typeset iframe[src*="ch02-vagus-signal-router"]  { height: 770px !important; }
  .md-typeset iframe.tall-ch06-fiber-to-butyrate, .md-typeset iframe[src*="ch06-fiber-to-butyrate"]     { height: 770px !important; }
  .md-typeset iframe.tall-ch10-rome-criteria-explorer, .md-typeset iframe[src*="ch10-rome-criteria-explorer"] { height: 840px !important; }
  .md-typeset iframe.tall-ch16-trial-reader, .md-typeset iframe[src*="ch16-trial-reader"]          { height: 715px !important; }
}