/* shared/ui/photo-viewer.css
 *
 * Canonical full-screen photo lightbox for every Ener.co surface that shows
 * captured photos (Scout survey review, Scout desktop dashboard, QC review,
 * field Game Plan). Consolidates Scout's old `openGallery` and QC's `openPhoto`
 * into one viewer. Pairs with photo-viewer.js (global `PhotoViewer`).
 *
 *   <link rel="stylesheet" href="/shared/ui/photo-viewer.css">
 *   <script src="/shared/ui/photo-viewer.js"></script>
 *   PhotoViewer.open(items, startIndex)   // items: url strings or {url|blob, caption}
 */
.pv-overlay {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pv-stage {
  flex: 1; display: flex; align-items: center; justify-content: center;
  max-height: 100vh; padding: 24px;
}
.pv-img {
  max-width: 100%; max-height: calc(100vh - 80px);
  object-fit: contain; border-radius: 6px; background: #111;
}
.pv-close {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  background: rgba(255, 255, 255, 0.15); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1;
  cursor: pointer;
}
.pv-close:hover { background: rgba(255, 255, 255, 0.3); }
.pv-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: rgba(255, 255, 255, 0.15); color: #fff; border: none;
  width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1;
  cursor: pointer;
}
.pv-nav:hover { background: rgba(255, 255, 255, 0.3); }
.pv-prev { left: 12px; }
.pv-next { right: 12px; }
.pv-bottom {
  position: absolute; bottom: 16px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 14px; font-weight: 600; pointer-events: none;
  display: flex; flex-direction: column; gap: 4px;
}
.pv-caption { font-weight: 400; font-size: 13px; opacity: 0.85; }
@media (max-width: 560px) {
  .pv-nav { width: 40px; height: 40px; font-size: 24px; }
  .pv-stage { padding: 12px; }
}