/* MV_PhotoViewer — the enlarged-photo viewer with zoom, pan & size controls
   (#362). Lives under .photo-viewer per the COMPONENT RULE. The image is sized
   by CSS to fit the stage (zoom 1 = fit); JS layers a translate+scale transform
   on top for pan + zoom. The control pill is a child of the root (not the
   clipped stage), so it can hug the bottom edge without being cut off. */

/* The viewer fills whatever container it's given (the full-screen lightbox
   modal body, #362) — a flex column whose stage grows to take all the room. */
.photo-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 100%;
  outline: none; /* the visible focus lives on the controls, not this wrapper */
}

.photo-viewer__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* The warm near-black lightbox field shows through behind a letterboxed
     photo — the modal owns the backdrop, the stage stays transparent. */
  background: transparent;
  /* All touch input drives zoom/pan here, not page scroll or browser pinch. */
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
}

/* Pan hand uses the custom SVG cursors, never the bare grab/grabbing keywords —
   Chromium's bundled bitmaps lose their outline at some Windows DPI scales
   (#230, enforced by cursor-visibility.test.js). */
.photo-viewer__stage--zoomed {
  cursor: var(--cursor-grab);
}

.photo-viewer__stage--zoomed:active {
  cursor: var(--cursor-grabbing);
}

.photo-viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform-origin: center center;
  transition: transform 200ms var(--ease-out-soft);
  -webkit-user-drag: none;
  user-select: none;
  will-change: transform;
}

/* ---- control pill (bottom-centre, over the stage) ---- */

.photo-viewer__controls {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.photo-viewer__btn {
  min-width: var(--touch-target-min);
  height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  transition: background-color var(--transition-fast), color var(--transition-fast),
    transform var(--transition-fast);
}

.photo-viewer__btn:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.photo-viewer__btn:active {
  transform: scale(0.92);
}

.photo-viewer__btn:focus-visible {
  outline: none;
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.photo-viewer__btn .icon svg {
  width: 22px;
  height: 22px;
}

/* The fit ⇄ actual toggle carries a short text label ("1:1" / "Fit") rather
   than an icon — clearer about which state it switches to. */
.photo-viewer__btn--toggle {
  padding: 0 var(--space-sm);
  font-variant-numeric: tabular-nums;
}

/* ---- reduced motion: no transform easing, no button micro-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .photo-viewer__img,
  .photo-viewer__btn {
    transition: none;
  }
  .photo-viewer__btn:active {
    transform: none;
  }
}