#slide-view {
  /* The space a slide may fill: the viewport minus padding and the fixed controls. */
  --slide-view-height: 100dvh;
  --slide-padding: var(--space-7);
  --slide-controls-space: var(--space-7);
  --slide-avail-h: calc(var(--slide-view-height) - 2 * var(--slide-padding) - var(--slide-controls-space));

  height: var(--slide-view-height);
  display: flex;
  overflow: auto;
  padding: var(--slide-padding) var(--slide-padding) calc(var(--slide-padding) + var(--slide-controls-space));
  box-sizing: border-box;
}

#slide-content {
  margin: auto;
  max-width: 100%;
  min-width: 0;
  font-size: 150%;
}

/* Media shrinks to fit the slide while keeping its aspect ratio; small media keeps its size. */
#slide-content :is(img, video, iframe):not(.ppt-slide *) {
  max-width: 100%;
  max-height: var(--slide-avail-h);
  height: auto;
  object-fit: contain;
  vertical-align: top;
}

#slide-content figure {
  margin: 0;
}

/* The tree view's indentation allowance does not apply here; keep only the readable width. */
#slide-content > .creative-content {
  min-width: 0;
  max-width: min(100%, calc(var(--max-width) - 160px));
  margin-block: 0;
  padding-top: 0;
}

/* Outer margins would push a full-height image past the screen. */
#slide-content > .creative-content > :first-child { margin-top: 0; }
#slide-content > .creative-content > :last-child { margin-bottom: 0; }

#slide-content .trix-content {
    line-height: 1.8;
}

#slide-controls {
  position: fixed;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

#slide-counter {
  pointer-events: none;
}

#slide-goto {
  text-decoration: none;
}

#slide-swipe {
  display: none;
}

#slide-caption {
  display: none;
}

#slide-timer {
  display: none;
}

@media (display-mode: fullscreen) {
  #slide-view {
    --slide-padding: var(--space-2);
  }
}

@media (max-width: 768px) {
  #slide-view {
    /* The swipe area covers the bottom 20% and already hosts the controls. */
    --slide-view-height: 80dvh;
    --slide-padding: var(--space-3);
    --slide-controls-space: 0px;
  }

  #slide-swipe {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20dvh;
    background: var(--border-color);
    align-items: center;
    justify-content: center;
  }

  #slide-caption {
    display: block;
    pointer-events: none;
    padding: var(--space-2);
    text-align: center;
    white-space: pre-wrap;
  }

  #slide-timer {
    display: block;
    margin-top: var(--space-2);
    font-variant-numeric: tabular-nums;
  }
}

/* Presentation slides fill the screen, limited by whichever side runs out first. */
#slide-content:has(.ppt-slide) {
  width: 100%;
}

/* Slides with media or a presentation use the whole width instead of the reading width. */
#slide-content:has(.ppt-slide, img, video, iframe) > .creative-content {
  max-width: none;
}

#slide-view .ppt-slide {
  --ppt-ratio: 16 / 9;

  width: min(100%, calc(var(--slide-avail-h) * var(--ppt-ratio)));
  max-width: none;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
}

#slide-view .ppt-slide--standard { --ppt-ratio: 4 / 3; }
#slide-view .ppt-slide--square { --ppt-ratio: 1; }
#slide-view .ppt-slide--portrait { --ppt-ratio: 3 / 4; }

#slide-content .ppt-slide-notes {
  display: none;
}

.ppt-viewer { background: var(--surface-bg); }
.ppt-viewer:fullscreen { width: 100%; height: 100%; }
.ppt-viewer-slide[hidden] { display: none; }
.ppt-viewer .ppt-slide-notes { display: none; }
.ppt-viewer #slide-content { width: 100%; }

/* Overlay controls keep the inline preview focused on the slide. */
.ppt-viewer #slide-view {
  --slide-view-height: 100dvh;
  --slide-padding: 0px;
  --slide-controls-space: 0px;
}
.ppt-viewer #slide-controls {
  position: absolute;
  inset: 0;
  transform: none;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.ppt-viewer { position: relative; cursor: zoom-in; }
.ppt-viewer:fullscreen { cursor: default; }
.ppt-viewer #slide-controls :is(button, a) {
  pointer-events: none;
  position: absolute;
  background: transparent;
  border: 0;
  color: white;
  filter: drop-shadow(0 1px 2px black);
  padding: 12px;
  cursor: pointer;
}
.ppt-viewer #slide-controls svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.ppt-viewer #slide-controls [data-ppt-previous],
.ppt-viewer #slide-controls [data-ppt-next] {
  top: 50%;
  transform: translateY(-50%);
}
.ppt-viewer [data-ppt-previous] { left: 0; }
.ppt-viewer [data-ppt-next] { right: 0; }
.ppt-viewer .ppt-viewer-download { top: 0; right: 56px; }
.ppt-viewer [data-ppt-close] { top: 0; right: 0; }
.ppt-viewer [data-ppt-fullscreen] { bottom: 0; right: 0; }
.ppt-viewer [data-ppt-counter] {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-shadow: 0 1px 2px black;
}
.ppt-viewer [data-ppt-error] { position: absolute; bottom: 48px; }
.ppt-viewer:not(:fullscreen) [data-ppt-close],
.ppt-viewer:fullscreen [data-ppt-fullscreen] { display: none; }
@media (hover: hover) {
  .ppt-viewer:not(:fullscreen):hover #slide-controls,
  .ppt-viewer:not(:fullscreen):focus-visible #slide-controls,
  .ppt-viewer:not(:fullscreen) #slide-controls:focus-within { opacity: 1; }
  .ppt-viewer:not(:fullscreen):hover #slide-controls :is(button, a),
  .ppt-viewer:not(:fullscreen):focus-visible #slide-controls :is(button, a),
  .ppt-viewer:not(:fullscreen) #slide-controls:focus-within :is(button, a) { pointer-events: auto; }
  .ppt-viewer [data-ppt-fullscreen] { display: none; }
}
.ppt-viewer.ppt-controls-visible #slide-controls,
.ppt-viewer #slide-controls:has(:focus-visible) { opacity: 1; }
.ppt-viewer.ppt-controls-visible #slide-controls :is(button, a),
.ppt-viewer #slide-controls:has(:focus-visible) :is(button, a) { pointer-events: auto; }

/* Inline slides follow their frame width; fullscreen still fits both axes. */
.ppt-viewer:not(:fullscreen) #slide-view .ppt-slide {
  width: 100%;
}