.side-by-side[data-v-614557ff] {
  display: flex;
  min-height: 250px;
  max-width: 100%;
}
.side-by-side.is-presentation[data-v-614557ff] {
  height: 100%;
}
/* Both panes are sized purely by their percentage widths. Without
 * `min-width: 0` a flex item refuses to shrink below its content's
 * min-content width, so a long formula, URL or wide image in the text pane
 * would push the whole row wider than the slide and produce a horizontal
 * scrollbar. Horizontal overflow is hidden here: display math scrolls
 * within its own .katex-display box and everything else wraps or scales. */
.left[data-v-614557ff],
.right[data-v-614557ff] {
  min-width: 0;
}
.left[data-v-614557ff] {
  overflow-y: auto;
  overflow-x: hidden;
}
/* SourceField lays out presentation sources as inline-block so that several
 * buttons/links can share a line. Inside the text pane that makes the text
 * source shrink-to-fit its min-content width instead of the pane width, so
 * force it back to a full-width block (same override as
 * InstructionDisplayField's .slide-links-container). */
.left[data-v-614557ff] .source-holder.presentation {
  display: block;
  width: 100%;
  margin-right: 0;
}
.left[data-v-614557ff] .text-source {
  overflow-wrap: anywhere;
}
.left[data-v-614557ff] .text-source img {
  max-width: 100%;
  height: auto;
}
.divider[data-v-614557ff] {
  width: 4px;
  background-color: #ccc;
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.divider[data-v-614557ff]:hover {
  background-color: #007bff;
}
.side-by-side.dragging .divider[data-v-614557ff] {
  background-color: #007bff;
}
/* Ensure the image within the right panel scales to fit (contain) rather than overflowing */
.right[data-v-614557ff] .v-img__img {
  object-fit: contain;
}

/* Stack side-by-side layout vertically on narrow screens */
@media (max-width: 768px) {
.side-by-side[data-v-614557ff] {
    flex-direction: column;
}
.left[data-v-614557ff],
  .right[data-v-614557ff] {
    width: 100% !important;
}
  /* When stacked, the right pane has no flex-row height to fill, and its
   * height:100% v-img needs a definite basis or it collapses to 0. */
.right[data-v-614557ff] {
    height: 40vh;
    min-height: 200px;
    max-height: 320px;
}
  /* The drag divider is mouse-only and meaningless when stacked. */
.divider[data-v-614557ff] {
    display: none;
}
}

.instruction-holder[data-v-a6793c8b] {
  position: relative;
}
.instruction-holder.presentation-fill[data-v-a6793c8b] {
  height: 100%;
}

/* TITLE instruction type */
.type-title[data-v-a6793c8b] {
  background-color: #000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title[data-v-a6793c8b] {
  background-color: #000 !important;
  color: #fff !important;
  padding: 10px;
  text-align: center;
  font-size: 2.5em;
  line-height: 1.2;
}

/* Flex layout shared by drawing/video/text-drawing instruction types */
.flex-wrapper[data-v-a6793c8b] {
  display: flex;
  flex-direction: column;
}

/* Only constrain to parent height inside presentation-crop (which has a definite height) */
.crop-holder.presentation-crop .flex-wrapper[data-v-a6793c8b] {
  height: 100%;
}
.flex-wrapper .title[data-v-a6793c8b] {
  flex-shrink: 0;
}
.flex-wrapper .content[data-v-a6793c8b] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SideBySide needs to fill the full width, not be centered */
.flex-wrapper .content[data-v-a6793c8b] .side-by-side {
  width: 100%;
}
.crop-holder.presentation-crop[data-v-a6793c8b] {
  background-color: black;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Enable container queries when crop-holder has a definite height
   (presentation mode), otherwise the element collapses to zero */
.crop-holder.presentation-crop .flex-wrapper .content[data-v-a6793c8b] {
  container-type: size;
}
.singular[data-v-a6793c8b] {
  height: 100%;
}
.type-video[data-v-a6793c8b] {
  height: 100%;
}
.type-drawing[data-v-a6793c8b] {
  height: 100%;
}

/* Singlepage video: white background, remove default bottom margin from VideoField */
.singlepage-video[data-v-a6793c8b] {
  background-color: #fff;
}
.singlepage-video[data-v-a6793c8b] .iframe-container {
  margin-bottom: 0;
}

/* Same horizontal/vertical spacing as .slide-links-container.presentation
   below, so single-page and slides modes read identically. */
.singlepage-sources[data-v-a6793c8b] {
  width: 100%;
  margin-top: 1rem;
  padding: 0 1rem 1rem;
}

/* Override SourceField's inline-block presentation layout to block in singlepage */
.singlepage-source[data-v-a6793c8b] .source-holder.presentation {
  display: block;
  margin-right: 0;
}

/* Standalone drawing image: scale to fit */
.flex-wrapper .content[data-v-a6793c8b] .v-img__img {
  object-fit: contain;
}

/* Use black background for images in presentation slide mode */
.crop-holder.presentation-crop .flex-wrapper .content[data-v-a6793c8b] .v-img__img {
  background-color: #000;
}

/* Use white background for images outside presentation mode (e.g. singlepage, display) */
.crop-holder:not(.presentation-crop) .flex-wrapper .content[data-v-a6793c8b] .v-img__img {
  background-color: #fff;
}

/* Slide navigation with integrated counter */
.slide-nav[data-v-a6793c8b] {
  position: absolute;
  top: 8px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 40;
}
.slide-indicator[data-v-a6793c8b] {
  color: #fff;
  font-size: 0.9em;
  padding: 0 4px;
}
.slide-nav-btn[data-v-a6793c8b] {
  background-color: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
}

/* Single-page presentation mode */
.singlepage-padding[data-v-a6793c8b] {
  padding-bottom: 0;
}

/* Constrain MULTIPLE instruction to the viewport in slide/presentation mode */
.type-multiple.slide-mode[data-v-a6793c8b] {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.type-multiple.slide-mode > .multiple-container[data-v-a6793c8b] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Title pinned at the top of the slide; content scrolls below it. */
.type-multiple.slide-mode > .multiple-container > .title[data-v-a6793c8b] {
  flex-shrink: 0;
}

/* Container for slide sources (text, buttons, links) */
.slide-links-container.presentation[data-v-a6793c8b] {
  width: 100%;
  margin-top: 1rem;
  padding: 0 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Text sources should stretch full width and stay left-aligned */
.slide-links-container.presentation[data-v-a6793c8b] .source-holder:has(.text-source) {
  align-self: stretch;
  display: block;
  text-align: left;
}

/* Responsive: reduce title size on smaller screens */
@media (max-width: 960px) {
.title[data-v-a6793c8b] {
    font-size: 2em;
}
}
@media (max-width: 600px) {
.title[data-v-a6793c8b] {
    font-size: 1.5em;
    padding: 6px;
}
}