/* ============================================================
   1) Let a slide scroll if its content is taller than the
      slide box, instead of silently clipping with no way to
      reach the rest. Reveal.js does not enable this by default.
   ============================================================ */
.reveal .slides section {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* Prior attempt centered content with flexbox, which combined
   badly with overflow: content taller than the slide got
   centered around its midpoint, pushing the TOP off-screen with
   no way to scroll back up to it. Plain block layout (the
   default) keeps top-to-bottom reading order intact so overflow
   scroll behaves the way people expect. */

/* ============================================================
   2) Keep images inside the slide's own logical box.
      Reveal.js lays a slide out at a FIXED logical size
      (~960x700) then scales that whole box to the window with a
      CSS transform, so vh/vw inside a slide do not track the
      slide itself -- they must be pinned in logical px instead.
   ============================================================ */
.reveal .slides section img {
    max-height: 500px;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0.5rem auto;
}
.reveal .slides figure,
.reveal .slides .image-box,
.reveal .slides [class*="image"] {
    max-width: 100% !important;
    width: auto !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ============================================================
   3) Give dense math blocks (stacked equations, like Solution 9)
      a bit more room by trimming vertical spacing, so fewer
      slides need to scroll in the first place.
   ============================================================ */
.reveal .slides section .blockquote,
.reveal .slides section blockquote {
    font-size: 0.85em;
}
.reveal .slides section .displaymath,
.reveal .slides section mjx-container[display="true"] {
    margin: 0.3em 0 !important;
}

/* ============================================================
   4) Keep list items (and other block content) from running
      past the slide's own logical width. Reveal.js scales a
      fixed-size box (see note 2) but nothing here was stopping
      an <ol>/<li> with a long line of text from expanding that
      box sideways instead of wrapping -- so text got clipped
      at the right edge instead of wrapping to a second line.
   ============================================================ */
.reveal .slides section,
.reveal .slides section ol,
.reveal .slides section ul,
.reveal .slides section li {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.reveal .slides section ol,
.reveal .slides section ul {
    padding-left: 1.2em;
    margin: 0.3em 0;
}
/* ============================================================
   5) Shrink list text only inside sidebyside panels (e.g. a
      question list next to a graph), without touching list
      font-size on any other slide.
   ============================================================ */
.sidebyside ol,
.sidebyside li {
    font-size: 0.85em;
}