.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 60px;
    width: auto;
}

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

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

  /* 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>');
}

.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);
}

/* 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; }

/* MicroSim nav status: `instrumented` — the sim emits xAPI events.
   THE STANDARD ICON for xAPI instrumentation in every book (Dan, 2026-09-26): the
   Material Design Icons "access-point" broadcast signal, in teal. Added by the
   add-xapi-events-to-microsim skill (scripts/sync-status.py) — do not substitute
   another icon. Pairs with mkdocs.yml:
     extra:
       status:
         instrumented: Instrumented — the MicroSim emits xAPI events; add ?xapi=teaching to the URL to see them
   Material Community paints status icons as a CSS mask from --md-status--<name>; the
   visible color is the :after background-color (see the book's other .md-status rules). */
:root {
  --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--instrumented:after {
  background-color: #00897b; /* teal — instrumented, emits xAPI events */
  -webkit-mask-image: var(--md-status--instrumented);
          mask-image: var(--md-status--instrumented);
}
.md-status--instrumented:hover:after { background-color: #00695c; }