/* 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; }
}