/* Responsive layout repairs kept in a versioned file to avoid stale caches. */

/* Preserve a diagram's natural size so its labels remain readable. Wide
   diagrams scroll inside their own viewport instead of shrinking to tiny text. */
.flowchart-viewport {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 0.5rem 0;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable both-edges;
  width: 100%;
}

.flowchart-viewport > svg.flowchart {
  height: auto !important;
  max-width: none !important;
  overflow: visible;
  width: var(--flowchart-intrinsic-width, 100%) !important;
}

/* Fit a flowchart on the screen once the layout script has measured it: never
   wider than the column, and no taller than 85% of the window, but never below
   60% of its natural size, so its text stays readable. The full-page view shows
   a diagram that still does not fit. */
@media screen {
  .flowchart-viewport > svg.flowchart[style*="--flowchart-ratio"] {
    aspect-ratio: var(--flowchart-ratio);
    height: min(
      var(--flowchart-intrinsic-height),
      max(85vh, calc(var(--flowchart-intrinsic-height) * 0.6)),
      calc(100cqw / var(--flowchart-ratio))
    ) !important;
    width: auto !important;
  }
}

/* Quarto stacks cells on small screens. Inline-size containment gives a
   diagram no intrinsic cell width, so use the available column width. */
@media screen and (max-width: 767.98px) {
  .quarto-layout-row > .quarto-layout-cell:has(.flowchart-viewport) {
    align-self: stretch;
  }
}

/* In the full-page view a small flowchart grows to fill the dialog and a large
   one keeps its natural size and scrolls, so its text is at least full size.
   The viewport box that scrolls it on the page would otherwise have no size
   there. */
.qfp-content .flowchart-viewport {
  container-type: normal;
  height: calc(94dvh - 6.5rem);
  max-width: none;
  overflow: auto;
  padding: 0;
  width: calc(94dvw - 4rem);
}

.qfp-content .flowchart-viewport > svg.flowchart {
  height: 100% !important;
  width: 100% !important;
}

.qfp-content .flowchart-viewport > svg.flowchart[style*="--flowchart-ratio"] {
  aspect-ratio: var(--flowchart-ratio);
  flex: none;
  height: max(
    var(--flowchart-intrinsic-height),
    min(calc(94dvh - 6.5rem), calc((94dvw - 4rem) / var(--flowchart-ratio)))
  ) !important;
  max-height: none !important;
  max-width: none !important;
  width: auto !important;
}

/* Quarto videos must fit the reading column at every viewport width. */
.quarto-video {
  max-width: 100%;
}

.quarto-video > iframe {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto !important;
  margin-inline: auto;
  max-width: 100%;
  width: min(100%, 400px) !important;
}

/* Quarto marks centered publication elements with quarto-figure-center.
   Center their captions as well as the artifact itself. */
main.content .quarto-figure.quarto-figure-center figcaption,
main.content .quarto-figure.quarto-figure-center .quarto-float-caption {
  text-align: center !important;
}

/* Make Quarto's requested striped tables visibly banded while leaving custom
   worksheet and form tables under their component-specific styling. */
main.content table.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: rgba(17, 24, 39, 0.07);
}

/* Keep wide, captioned teaching tables readable on narrow screens. Quarto
   places the table in the first child of its float; that child becomes the
   horizontal viewport while the caption remains at the page width. */
main.content .quarto-float-tbl > div[aria-describedby] {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable both-edges;
}

/* Paired live loop examples need a full-width editor on narrow screens. */
@media (max-width: 720px) {
  :is(#lst-list-comprehension-speedup, #lst-list-comprehension-ex1,
      #lst-list-comprehension-ex2, #lst-list-comprehension-ex3,
      #lst-list-comprehension-ex4) .quarto-layout-row {
    flex-direction: column;
  }

  :is(#lst-list-comprehension-speedup, #lst-list-comprehension-ex1,
      #lst-list-comprehension-ex2, #lst-list-comprehension-ex3,
      #lst-list-comprehension-ex4) .quarto-layout-cell {
    min-width: 0;
    width: 100% !important;
  }
}

/* Reader mode removes both sidebars but keeps prose at a readable measure. */
@media (min-width: 992px) {
  body:has(.quarto-reader-toggle.reader) #quarto-sidebar,
  body:has(.quarto-reader-toggle.reader) #quarto-margin-sidebar {
    display: none !important;
  }

  body:has(.quarto-reader-toggle.reader) #quarto-content.page-columns {
    grid-template-columns:
      [screen-start] 1.5rem
      [screen-start-inset] 0
      [page-start] minmax(0, 1fr)
      [page-start-inset] 0
      [body-start-outset] 0
      [body-start] 0
      [body-content-start] minmax(0, 1000px)
      [body-content-end] 0
      [body-end] 0
      [body-end-outset] 0
      [page-end-inset] minmax(0, 1fr)
      [page-end] 0
      [screen-end-inset] 1.5rem
      [screen-end];
  }

  body:has(.quarto-reader-toggle.reader) main.content {
    max-width: 1000px;
    width: 100%;
  }
}