/* User Provided Stylesheet */

/*
 * The book's stylesheet, registered as `site.options.style` in myst.yml.
 *
 * `style` takes one file, so the rules for all media plugins live here rather
 * than beside each plugin. Six groups, in order:
 *
 *   1. {simulation} / {openlyceum} / {phet}   plugins/simulation.mjs
 *   2. {audio}                                plugins/audio.mjs
 *   3. {animation}                            plugins/animation.mjs
 *   4. {video}                                plugins/video.mjs
 *   5. {h5p}                                  plugins/h5p.mjs
 *   6. book styles
 *
 * Groups 1, 3, 4, and 5 are load-bearing. Those directives emit a website-only
 * iframe *and* a static fallback as siblings of one container, because no
 * single node type survives every MyST output format; on the website both
 * would be visible, so this file hides the static fallback and flips the pair
 * back around for print.
 */

/* ---------------------------------------------------------------- 1. Simulations */

/* The static fallback exists for PDF, DOCX, Markdown, and print. */
.simulation-placeholder {
  display: none;
}

/*
 * The MyST theme wraps every iframe in a div carrying an inline
 * `padding-bottom: 60%`, which is the aspect ratio. 60% matches the
 * SceneryStack 1024x618 frame almost exactly, so only other ratios need a rule
 * here -- and each one has to win against an inline style.
 */
.simulation-aspect-768x504 > div {  /* PhET */
  padding-bottom: 65.63% !important;
}

.simulation-aspect-16x9 > div {
  padding-bottom: 56.25% !important;
}

.simulation-aspect-4x3 > div {
  padding-bottom: 75% !important;
}

.simulation-aspect-1x1 > div {
  padding-bottom: 100% !important;
}

/* The caption line that links to the live simulation. */
.simulation-link {
  font-size: 0.9em;
}

/* ---------------------------------------------------------------- 2. Audio */

/*
 * MyST has no audio node, so the live controls are served by a compact iframe.
 * The theme gives every iframe a 60% aspect ratio; override that here so an
 * audio player does not reserve a video-sized rectangle.
 */
.audio-player > div {
  height: 4.8rem;
  padding-bottom: 0 !important;
}

.audio-player iframe {
  height: 4.8rem;
}

.audio-transcript,
.audio-link {
  font-size: 0.9em;
}

.audio-link a {
  font-weight: 600;
}

/*
 * Most plot SVGs were drawn for a light page and have transparent canvases.
 * Keep them on a light "paper" surface in dark mode so their black labels,
 * axes, and fine strokes retain their intended contrast. `color-scheme: light`
 * also keeps an SVG's own prefers-color-scheme rules consistent with that
 * surface instead of producing light marks on white.
 */
.dark figure img:is([src$=".svg"], [data-canonical-url$=".svg"]) {
  color-scheme: light;
  background-color: #fff;
}

/* ---------------------------------------------------------------- 3. Animations */

/* The static fallback exists for PDF, DOCX, Markdown, and print. */
.animation-placeholder {
  display: none;
}

/* The default {animation} aspect ratio: a single wide plot panel. */
.animation-aspect-2x1 > div {
  padding-bottom: 50% !important;
}

.animation-aspect-1x1 > div {
  padding-bottom: 100% !important;
}

.animation-aspect-4x3 > div {
  padding-bottom: 75% !important;
}

/* ---------------------------------------------------------------- 4. Videos */

/* The poster exists for PDF, DOCX, Markdown, and print. */
.video-placeholder {
  display: none;
}

.video-aspect-16x9 > div {
  padding-bottom: 56.25% !important;
}

.video-aspect-4x3 > div {
  padding-bottom: 75% !important;
}

.video-link {
  font-size: 0.9em;
}

.video-link a {
  font-weight: 600;
}

/* ---------------------------------------------------------------- 5. H5P exercises */

/*
 * H5P activities do not share one useful aspect ratio. Use a generous default
 * viewport rather than the theme's video-style percentage-padding trick; a
 * content type that needs more room can opt into a taller custom class.
 */
.h5p-frame > div {
  height: 30rem;
  padding-bottom: 0 !important;
}

.h5p-frame iframe {
  height: 30rem;
}

/* The static fallback exists for PDF, DOCX, Markdown, and print. */
.h5p-fallback {
  display: none;
}

/* ---------------------------------------------------------------- 6. Book */

/* Keep long calculations readable on narrow screens. */
.math-display {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Open-license photographs are supporting illustrations, not full-page plates. */
figure img[src*="/images/open/"] {
  max-width: 72%;
  max-height: 22rem;
  width: auto;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/*
 * Printing from the browser is the fourth static path, alongside PDF, DOCX,
 * and Markdown. An audio element prints as a blank strip of controls at best,
 * so swap in the figure the exports already use.
 */
@media print {
  .audio-player,
  .simulation-frame,
  .animation-frame,
  .video-frame,
  .h5p-frame {
    display: none;
  }

  .simulation-placeholder,
  .animation-placeholder,
  .video-placeholder {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .h5p-fallback {
    display: block;
  }
}