/* The film strip and its photo viewer: Events' Replays (linked inside the Events shadow root) and the Gallery (on the
   page). Colours come from each one's own --ink, --muted, --surface, --edge, --yellow and --blue, so they match
   their surroundings; the strip and the viewer themselves stay dark by day and by night. Script: js/film-strip.js. */

/* Photos on a film strip (a dark strip with sprocket holes top and bottom, which stays dark by
   day too). Every frame keeps its photo's own shape (--ar, set per frame in index.html), so nothing is cropped:
   tall photos are the strip's height, wide ones as wide as they need, but never wider than the strip, where they
   get shorter instead. The strip scrolls sideways and snaps frame by frame; tapping a frame opens the viewer. */
.fs-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fs-nav[hidden] {
  display: none;
}
.fs-count {
  margin-right: 4px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.fs-count b {
  color: var(--ink);
}
.fs-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--edge);
  border-radius: 50%;
  cursor: pointer;
  transition:
    transform 150ms var(--boing),
    box-shadow 150ms var(--boing);
}
.fs-btn .i {
  width: 22px;
  height: 22px;
}
.fs-btn:active {
  transform: scale(0.92);
}
@media (hover: hover) {
  .fs-btn:hover {
    transform: translate(-3px, -3px) rotate(-2deg);
    box-shadow: 3px 3px 0 var(--edge);
  }
}
.fs {
  --h: clamp(260px, 34cqi, 400px);
  container-type: inline-size; /* the frames' widths below (cqi) are measured from the strip */
  position: relative; /* the frames' offsetLeft, used by the arrows, is measured from here */
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: #141014;
  border: 3px solid var(--edge);
  border-radius: 10px;
}
/* :root on the page (the Gallery), .sr-page in the Events shadow root (Replays) */
:is(:root, .sr-page)[data-mode="day"] .fs {
  box-shadow: 5px 5px 0 var(--edge);
}
.fs::-webkit-scrollbar {
  display: none;
}
.fs > li {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  padding: 32px 7px;
  scroll-snap-align: start;
}
/* the sprocket holes, above and below each frame, so they scroll with the film */
.fs > li::before,
.fs > li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 8px,
    rgb(255 251 240 / 0.88) 8px 18px,
    transparent 18px 24px
  );
}
.fs > li::before {
  top: 10px;
}
.fs > li::after {
  bottom: 10px;
}
.fs-frame {
  display: block;
  height: var(--h);
  aspect-ratio: var(--ar);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
}
.fs > li.wide .fs-frame {
  height: auto;
  width: min(calc(var(--h) * var(--ar)), calc(100cqi - 30px));
}
.fs-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* the frame already has the photo's shape; this only hides a rounding pixel */
  transition: transform 300ms ease;
}
@media (hover: hover) {
  .fs-frame:hover img {
    transform: scale(1.04);
  }
}
.fs-frame:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.fs-btn:focus-visible,
.rp-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* the viewer: a full-screen <dialog> (the top layer, so nothing on the page can sit over it), dark by day and by
   night like a photo viewer. The photo is as big as fits; tapping it, the zoom button, a pinch or the mouse wheel
   zooms it (up to 4x), and while zoomed it drags around (js/film-strip.js). */
.rp {
  --rp-bg: #14171b;
  --rp-ink: #f0ebff;
  --rp-muted: #b3a8d6;
  --rp-surface: #171030;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--rp-bg);
  color: var(--rp-ink);
  border: 0;
  overflow: hidden;
}
.rp[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.rp::backdrop {
  background: #14171b;
}
.rp-top,
.rp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rp-nav {
  justify-content: center;
}
.rp-tools {
  display: flex;
  gap: 10px;
}
.rp-count {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rp-muted);
}
.rp-count b {
  color: var(--rp-ink);
}
.rp-hint {
  min-width: 11em;
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: var(--rp-muted);
}
.rp-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden; /* a zoomed photo stays between the count and the buttons */
  touch-action: none; /* pinches, drags and swipes on the photo are handled in js/film-strip.js */
  user-select: none;
}
.rp-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--z, 1));
  cursor: zoom-in;
  -webkit-user-drag: none;
}
.rp-stage.is-zoomed img {
  cursor: grab;
}
.rp-stage.is-easing img {
  transition: transform 220ms ease; /* a tap to zoom eases; pinches and drags follow the fingers directly */
}
.rp-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--rp-surface);
  color: var(--rp-ink);
  border: 2px solid var(--rp-ink);
  border-radius: 50%;
  cursor: pointer;
}
.rp-btn .i {
  width: 22px;
  height: 22px;
}
.rp-btn[aria-pressed="true"] {
  background: var(--rp-ink);
  color: var(--rp-bg);
}
@media (hover: hover) {
  .rp-btn:hover {
    background: var(--rp-ink);
    color: var(--rp-bg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rp-stage.is-easing img,
  .fs-frame img {
    transition: none;
  }
}