/* photos.css (2026-10-27, James: "can we also get a viewer for carousels? same way videos and comics have a viewer"):
   THE PHOTO VIEWER, /good-boy/photos/<slug>/ — a carousel's own page in the player's frame. style.css does the frame
   (body.player-page: the back chevron, the shade, the copy bottom left, the rail bottom right; on a desk the blurred
   ground and the copy + rail in a column beside the picture); this does the pictures: a sideways track photos.js moves,
   the "n / N" count, the dots, the desk's arrows. Values copied from feed.css's carousel. The pictures are CONTAINED,
   never cropped: the sets are text cards and the words run to the edges. Loaded after style.css. */
/* the blurred picture behind it at every size (the player shows it on a desk only: a phone's clip fills the screen,
   a contained 3:4 picture does not); photos.js swaps it with the picture */
.photos-page .player { background: none; }
.photos-page .player-ground { display: block; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100lvh; overflow: hidden; background: var(--lights-off); }
.photos-page .player-ground img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: blur(32px) saturate(1.15) brightness(0.5); transform: scale(1.15); }
.photos-page .player-ground::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: oklch(0.16 0.04 262 / 0.22); }
.photos-page .stage::after { display: none; }   /* the ground is dark enough; nothing sits over the picture */

/* A PHONE = A POST: the picture under the back chevron, then the title + caption, then the counts in a row (the feed
   card's order). The picture keeps the full width on a tall phone and shrinks on a short one (Safari with its bars), so
   the words and the counts never sit on it. The column is centred in what is left. */
.ph-frame {
  position: relative; overflow: hidden;
  width: var(--ph-w, 100vw); aspect-ratio: var(--ar, 9 / 16);
}
@media (max-width: 959.98px) {
  .photos-page .player {
    --ph-top: calc(max(6px, env(safe-area-inset-top)) + 54px); --ph-foot: 150px;
    --ph-w: min(100vw, (100dvh - var(--ph-top) - var(--ph-foot)) * var(--arn, 0.5625));
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px;
    padding: var(--ph-top) 0 max(14px, env(safe-area-inset-bottom));
  }
  .photos-page .stage { position: relative; inset: auto; flex: none; }
  .photos-page .stage-side { width: var(--ph-w); padding-inline: 16px; display: grid; gap: 8px; }
  .photos-page .stage-copy { position: static; gap: 4px; }
  .photos-page .rail { position: static; display: flex; gap: 14px; }
  .photos-page .rail-btn, .photos-page .rail-stat { grid-auto-flow: column; align-items: center; gap: 6px; min-width: 0; padding: 6px 6px 6px 0; }
  .photos-page .rail svg { width: 28px; height: 28px; }
  .photos-page .rail-stat svg { width: 24px; height: 24px; }
  .photos-page .rail-n { font-size: 0.9375rem; }
}
.ph-frame:focus-visible { outline: 3px solid var(--cyan); outline-offset: -3px; }
.ph-track {
  list-style: none; margin: 0; padding: 0; height: 100%;
  display: flex; overflow: visible;   /* the FRAME clips; the track is what moves */
  will-change: transform; transition: transform 340ms var(--ease-out);
}
.ph-track.is-dragging { transition: none; }
.ph-track li { flex: 0 0 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.ph-track img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.ph-n {
  position: absolute; z-index: 2; top: 12px; right: 12px; padding: 0.35em 0.6em 0.28em;
  font-family: var(--display); font-size: 0.8125rem; line-height: 1; letter-spacing: 0.04em; color: var(--cream);
  background: oklch(0.22 0.06 262 / 0.7); border: 2px solid oklch(0.97 0.03 95 / 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-variant-numeric: tabular-nums;
}
.ph-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; }
.ph-dot {
  width: 9px; height: 9px; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
  background: oklch(0.97 0.03 95 / 0.45); border: 2px solid oklch(0.08 0.02 262 / 0.7);
  transition: background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.ph-dot.on { background: var(--yellow); border-color: var(--ink); transform: scale(1.25); }
.ph-dot:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* the arrows: a mouse only (a phone swipes), the frame's siblings: over the picture's sides in a narrow window, OUTSIDE
   it on a desk (they sat on the text bubbles); gone at either end */
.ph-btn {
  position: absolute; z-index: 2; top: 50%; width: 48px; height: 48px; margin-top: -24px; padding: 0; border-radius: 50%;
  display: none; place-items: center; cursor: pointer; color: var(--cream);
  background: oklch(0.22 0.06 262 / 0.7); border: 2px solid oklch(0.97 0.03 95 / 0.9);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity 160ms var(--ease-out), background 160ms var(--ease-out);
}
.ph-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-prev { left: 12px; } .ph-prev svg { transform: scaleX(-1); }
.ph-next { right: 12px; }
.ph-btn:hover { background: oklch(0.22 0.06 262 / 0.9); }
.ph-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ph-btn { display: grid; }
  .ph-frame.at-start ~ .ph-prev, .ph-frame.at-end ~ .ph-next { opacity: 0; pointer-events: none; }
}
/* the caption under the title, like a post's */
.ph-line {
  margin: 0; max-width: 34ch; font-size: 0.875rem; line-height: 1.35;
  color: var(--navy-cream); text-shadow: 1px 1px 0 var(--ink);
}
/* a desk: style.css's player desk (the column beside the picture); the picture as tall as the window */
@media (min-width: 960px) {
  .photos-page .ph-stage { place-items: center; }
  /* as tall as the window, unless the width runs out first (the words' column + the arrows need ~640 px): the height
     follows the width then, so the box keeps the pictures' shape */
  .photos-page .ph-frame { width: auto; height: min(calc(100dvh - 64px), calc((100vw - 640px) / var(--arn, 0.5625))); }
  .ph-prev { left: -62px; } .ph-next { right: -62px; }
  .photos-page .player { column-gap: clamp(96px, 8vw, 140px); }   /* room for the arrow between the picture and the words */
  .ph-line { max-width: 30ch; font-size: 1.0625rem; text-shadow: none; }
}