/* Slide activity: a 16:9 presentation deck. Every slide is a background image
   with absolutely positioned markdown blocks on top of it, so the whole deck
   scales with the container while keeping the authored proportions. The text
   blocks are intentionally white in both themes — they sit over an image that
   does not follow the light/dark switch. */

.learn-slide-stage {
  display: flex;
  flex-direction: column;
  margin-top: var(--theme-space-4);
}

.learn-slide-empty {
  color: var(--theme-text-tertiary);
}

/* The mode currently on screen stays highlighted in the unit toolbar. */
.learn-slide-mode.is-active {
  color: var(--theme-color-primary);
}

/* ---- One slide ---- */

.learn-slide-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--theme-radius-md);
  background: #000;
}

.learn-slide-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The inset comes from the activity instructions and is set inline. */
.learn-slide-text {
  position: absolute;
  padding: var(--theme-space-2);
  border-radius: var(--theme-radius-sm);
  background: #fff;
  color: #111827;
  font-size: calc(var(--theme-font-sm, 13px) * 1.5);
  line-height: var(--theme-line-height-base);
  overflow: hidden;
}

/* The block itself never scrolls — the body inside it does, so the hint arrows
   can stay pinned to the block's edges. */
.learn-slide-text-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.learn-slide-text-body.is-h-scroll { overflow-x: auto; }
.learn-slide-text-body.is-v-scroll { overflow-y: auto; }

.learn-slide-text-body > *:first-child { margin-top: 0; }
.learn-slide-text-body > *:last-child  { margin-bottom: 0; }

.learn-slide-text-body img {
  max-width: 100%;
}

/* ---- Scroll hints ---- */

.learn-slide-hint {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--theme-radius-full);
  background: rgba(17, 24, 39, 0.75);
  color: #fff;
  pointer-events: none;
}

.learn-slide-hint.is-visible { display: inline-flex; }

.learn-slide-hint--up    { top: 2px;    left: 50%; transform: translateX(-50%); }
.learn-slide-hint--down  { bottom: 2px; left: 50%; transform: translateX(-50%); }
.learn-slide-hint--left  { left: 2px;   top: 50%;  transform: translateY(-50%); }
.learn-slide-hint--right { right: 2px;  top: 50%;  transform: translateY(-50%); }

/* ---- Slide mode ---- */

.learn-slide-deck {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-3);
}

.learn-slide-frame {
  width: 100%;
}

.learn-slide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-2);
}

.learn-slide-nav-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.learn-slide-nav-button:disabled:hover {
  color: var(--theme-text-secondary);
  background: transparent;
}

.learn-slide-position {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-space-1);
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-sm);
  font-variant-numeric: tabular-nums;
}

.learn-slide-position-input {
  width: 3.5rem;
  padding: var(--theme-space-1);
  border: 1px solid var(--theme-border-default);
  border-radius: var(--theme-radius-sm);
  background: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  font: inherit;
  text-align: center;
}

/* ---- Fullscreen ---- */

.learn-slide-stage--fullscreen {
  justify-content: center;
  padding: var(--theme-space-4);
  background: var(--theme-bg-primary);
}

.learn-slide-stage--fullscreen .learn-slide-item {
  /* Bound by height so a wide screen never crops the 16:9 slide. */
  max-height: calc(100vh - 6rem);
  max-width: calc((100vh - 6rem) * 16 / 9);
  margin: 0 auto;
}

/* ---- List mode ---- */

.learn-slide-list {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-4);
  max-height: 70vh;
  overflow-y: auto;
  padding-right: var(--theme-space-2);
}

.learn-slide-list-item {
  position: relative;
  border-radius: var(--theme-radius-md);
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
}

.learn-slide-list-item.is-current {
  outline-color: var(--theme-color-primary);
}

.learn-slide-list-number {
  position: absolute;
  top: var(--theme-space-2);
  left: var(--theme-space-2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  padding: 0 var(--theme-space-1);
  border-radius: var(--theme-radius-full);
  background: rgba(17, 24, 39, 0.75);
  color: #fff;
  font-size: var(--theme-font-sm);
  font-variant-numeric: tabular-nums;
}

/* ---- PDF export ---- */

/* Rendered at a fixed pixel size so every page is identical regardless of the
   viewport, then removed once html2pdf is done. The sheet sits at the document
   origin — html2canvas captures a region anchored there, and a sheet pushed
   off-screen with a negative offset falls outside it and prints blank. It is
   hidden from the student by the zero-sized clipping holder instead. */
.learn-slide-holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
}

.learn-slide-sheet {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}

/* No break-after/page-break-after here on purpose: html2canvas honours those
   properties while cloning and stops after the first one, which is what made
   the export come out blank. Pagination is instead purely geometric — the
   exporter sizes every slide to exactly one page, so slicing the canvas at the
   page height lands on the slide boundaries. */
.learn-slide-sheet .learn-slide-item {
  border-radius: 0;
  aspect-ratio: auto;
}