/* ---------------------------------------------------------------------------
   Video embeds

   BookStack exported these as fixed boxes: <iframe width="560" height="314">.
   Material stretches the iframe to the content width but leaves the height
   attribute untouched, so a 16:9 video renders as a letterbox slot roughly half
   the height it should be. Setting an explicit aspect ratio fixes it at any
   viewport width, which also makes them behave on mobile.

   Scoped to video hosts on purpose. Two Google Apps Script embeds and a Google
   Docs preview set their own heights deliberately and must not be reshaped.
   --------------------------------------------------------------------------- */
.md-typeset iframe[src*="youtube.com"],
.md-typeset iframe[src*="youtube-nocookie.com"],
.md-typeset iframe[src*="vimeo.com"] {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: 1em 0;
}

/* Non-video embeds keep their intended height but must not overflow a phone. */
.md-typeset iframe {
  max-width: 100%;
}

/* Pages imported from BookStack carry raw HTML tables with inline pixel and
   percentage widths. Let an oversized one scroll inside its own box rather than
   forcing the whole page to scroll sideways. */
.md-typeset table {
  max-width: 100%;
}