/* Question images: comfortable inline, full detail on demand.
 *
 * Every sheet used to say `img { max-width: 100%; height: auto }`, which caps
 * the WIDTH only. A 1200x1400 ultrasound then rendered a column wide and
 * roughly a screen and a half tall, pushing the choices below the fold: you
 * could not see the question and its options at the same time, which is the
 * one thing a question screen has to do.
 *
 * So the cap is on height, and it is in `vh` because the constraint is the
 * window, not the picture -- the image has to leave room for the stem above it
 * and four choices below. The detail is not lost, it moves one click away.
 *
 * Loaded by every screen that shows a question or a solution. It deliberately
 * repeats the selectors from marrow.css, exam.css and app.css and overrides
 * them; it is linked after all three.
 */
.q-text img,
.choice img,
.expl img,
.review-q img,
.solution img {
  max-width: 100%;
  max-height: 42vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  border-radius: 3px;
}

/* A scan is a figure, not a word. Left as an inline element it sits on the
 * stem's last text line and is aligned to its baseline, which reads as a
 * layout accident once the height cap stops it filling the column. */
.q-text img,
.expl img,
.review-q img,
.solution img {
  display: block;
  margin: 14px 0 4px;
}

/* Choices are the exception: an image there is often part of the option's
 * sentence, so it stays in the line and only sets its own height. */
.choice img { vertical-align: middle; max-height: 22vh; }

/* Small images are not worth a lightbox, and a zoom-in cursor over a 40px
 * diagram is a lie. zoom.js clears this on anything it will not open. */
.no-zoom { cursor: default !important; }

/* ---- the lightbox ---------------------------------------------------- */

.zoom-back {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(8, 12, 16, .93);
  display: flex; align-items: center; justify-content: center;
}
/* A class that sets `display` beats the UA stylesheet's [hidden] rule, so the
 * overlay needs this or it renders over the page the moment it is built. */
.zoom-back[hidden] { display: none !important; }

.zoom-scroll {
  width: 100%; height: 100%;
  overflow: auto;
  display: flex; align-items: center; justify-content: center;
  /* Leaves the toolbar and the hint their own strips: a fitted portrait scan
     is exactly as tall as this box, so anything overlapping it covers image.
     zoom.js measures this padding rather than repeating the numbers. */
  padding: 56px 20px 40px;
  box-sizing: border-box;
}
.zoom-scroll img {
  max-width: none; max-height: none;   /* the cap above must not follow it in */
  display: block;
  cursor: zoom-in;
  image-rendering: auto;
}
.zoom-back.is-zoomed .zoom-scroll img { cursor: grab; }
.zoom-back.is-dragging .zoom-scroll img { cursor: grabbing; }

.zoom-bar {
  position: fixed; top: 14px; right: 16px;
  display: flex; gap: 8px; align-items: center;
}
.zoom-bar button {
  min-width: 38px; height: 34px;
  font: inherit; font-size: 15px; line-height: 1;
  color: #eaf2f6; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px;
  cursor: pointer;
}
.zoom-bar button:hover { background: rgba(255, 255, 255, .22); }
.zoom-pct {
  color: #b9c6cf; font-size: 12px; min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.zoom-hint {
  position: fixed; bottom: 14px; left: 0; right: 0;
  text-align: center; color: #91a2ad; font-size: 12px;
  pointer-events: none;
}

@media (max-width: 900px) {
  /* A phone in portrait has no width to spare, so the picture gets more of the
     screen -- scrolling to the choices is the norm there anyway. */
  .q-text img, .choice img, .expl img, .review-q img, .solution img {
    max-height: 34vh;
  }
}