/* Zoom and in-place video for the jury slideshows. Paired with static/js/slide_zoom.js.

   Everything here is scoped to the image pane. The scoring panel beside it is what the
   juror is typing into, and magnifying a brushstroke must not move the control you score
   it with — so no rule below touches anything outside the pane it is given. */

/* The transform is set inline by the script; this is only what makes it feel immediate.
   No transition while dragging, or the picture lags a half-second behind the cursor. */
.sz-pane img {
  transition: transform 0.12s ease-out, opacity 0.3s;
  will-change: transform;
}
.sz-pane.sz-zoomed img { transition: none; }
.sz-pane.sz-zoomed { cursor: grab; }
.sz-pane.sz-zoomed:active { cursor: grabbing; }

/* The controls, bottom-left of the picture, out of the way of the swipe arrows which sit
   at the pane's vertical centre. Visible rather than hover-revealed: a control nobody can
   see is a feature nobody has. */
.sz-controls {
  position: absolute;
  left: .6rem; bottom: .6rem;
  z-index: 4;
  display: flex;
  gap: .35rem;
  align-items: center;
}
.sz-btn {
  background: rgba(0, 0, 0, .62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 4px;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .55rem;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sz-btn:hover { background: rgba(0, 0, 0, .85); }
.sz-btn[disabled] { opacity: .35; cursor: default; }
.sz-level {
  color: #fff;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, .62);
  border-radius: 4px;
  padding: .3rem .45rem;
  min-width: 2.6rem;
  text-align: center;
}
.sz-btn--play { width: auto; gap: .3rem; }

/* The video, filling the picture's place exactly. */
.sz-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  z-index: 5;
}
.sz-pane.sz-playing img,
.sz-pane.sz-playing .sz-controls { display: none; }

.sz-video-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .45rem .7rem;
  background: rgba(0, 0, 0, .78);
  flex-wrap: wrap;
}
.sz-video-back {
  background: #64968c;
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: .35rem .7rem;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.sz-video-back:hover { background: #55837a; }
/* The blind-review note. Amber rather than red: it is worth reading before pressing play
   and it is not an error. */
.sz-video-warn { color: #ffd480; font-size: .8rem; }

@media (max-width: 760px) {
  .sz-controls { left: .4rem; bottom: .4rem; gap: .25rem; }
  .sz-btn { min-width: 1.8rem; height: 1.8rem; font-size: .85rem; }
  .sz-video-warn { font-size: .72rem; }
}

/* ── The artist's other views ─────────────────────────────────────────────
   **Over the picture, never beside the rubric.** The strip is positioned inside
   the image pane, so the scoring panel keeps every pixel it had — but the pane
   itself is only 28vh once the layout stacks on a phone, and a row of chunky
   thumbnails would crowd the very thing a juror is trying to look at.

   So: sized from the viewport rather than fixed, bounded to one row, and capped
   in number by the script. Small enough to read as "there is more here" and to
   be hit with a thumb, and no larger. */
.sz-extras {
  position: absolute;
  /* Clear of the screen edge, and of iOS's own edge-swipe-back gesture, which owns the
     outermost strip of the display. Measured at the first phone run sitting five pixels
     from the right edge of a 413px viewport — hittable, and in exactly the place where
     a thumb reaching for it is as likely to navigate the browser backwards. */
  right: calc(.9rem + env(safe-area-inset-right, 0px));
  bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  gap: .25rem;
  align-items: flex-end;
  flex-wrap: nowrap;              /* one row: wrapping is how this eats a small pane */
  /* No width cap. The row is anchored to the right edge and never wraps, so a cap makes
     the overflow spill *past* the pane rather than shrink — which put the "and N more"
     chip half off screen and unclickable. The count cap in the script is what keeps this
     small; four chips at the clamp above come to about 11rem even at their largest. */
}
.sz-extra {
  /* Grows a little on a roomy screen, never past the point where four of them and
     the zoom controls meet in the middle. */
  width: clamp(1.6rem, 4.2vmin, 2.4rem);
  height: clamp(1.6rem, 4.2vmin, 2.4rem);
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .72);
  border-radius: 3px;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 auto;
  line-height: 0;
}
.sz-extra img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sz-extra:hover, .sz-extra:focus-visible {
  border-color: #64968c;
  outline: none;
}
/* The "and N more" chip, which opens the first of the ones with no room to show. */
.sz-extra--more {
  color: #fff;
  font-size: clamp(.6rem, 1.6vmin, .75rem);
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .68);
}

/* The expanded view, filling the picture's place exactly as the video does. The
   rule below is why it is `contain` rather than the thumbnails' `cover`: a detail
   shot cropped to a square tells a juror less than nothing. */
.sz-extra-full {
  object-fit: contain;
  background: #000;
}
.sz-pane.sz-playing .sz-extras { display: none !important; }

/* Stacked layout: the pane is a band across the top and the rubric is under it, so
   the strip gets out of the way rather than compete for the little height there is. */
@media (max-width: 760px) {
  .sz-extras {
    right: calc(.8rem + env(safe-area-inset-right, 0px));
    bottom: calc(.45rem + env(safe-area-inset-bottom, 0px));
    gap: .2rem;
  }
  .sz-extra { width: clamp(1.5rem, 5.5vmin, 2rem); height: clamp(1.5rem, 5.5vmin, 2rem); }
}