/* One live viewport for photos AND videos, independent of map containment. */
html body.photo-lightbox-open main.app-shell {
  transform: none !important; filter: none !important; perspective: none !important;
  contain: none !important; content-visibility: visible !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox.photo-lightbox {
  position: fixed !important; inset: 0 auto auto 0 !important;
  width: var(--memory-viewer-width, 100vw) !important;
  min-width: var(--memory-viewer-width, 100vw) !important;
  max-width: var(--memory-viewer-width, 100vw) !important;
  height: var(--memory-viewer-height, 100dvh) !important;
  min-height: var(--memory-viewer-height, 100dvh) !important;
  max-height: var(--memory-viewer-height, 100dvh) !important;
  box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  background: #00243f !important; transform: none !important;
  overflow: hidden !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox .photo-lightbox-frame {
  box-sizing: border-box !important; width: 100% !important; max-width: 100% !important;
  height: 100% !important; min-height: 0 !important; max-height: 100% !important;
  margin: 0 !important; transform: none !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox.video-mode .photo-lightbox-frame {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  padding: calc(max(12px, env(safe-area-inset-top)) + 48px) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  gap: 10px !important; overflow: hidden !important; background: #00243f !important; border: 0 !important; border-radius: 0 !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox.video-mode #photoLightboxVideo {
  grid-row: 1 !important; display: block !important; width: 100% !important; height: 100% !important;
  min-height: 0 !important; max-height: 100% !important; max-width: 100% !important;
  object-fit: contain !important; background: #00243f !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox.video-mode #photoLightboxCaption { margin: 0 !important; color: #eaf7fb !important; text-align: center; }
html body.photo-lightbox-open main.app-shell > #photoLightbox.video-mode .photo-lightbox-close {
  position: absolute !important; top: max(12px, env(safe-area-inset-top)) !important; right: max(16px, env(safe-area-inset-right)) !important;
  left: auto !important; width: 44px !important; height: 44px !important; z-index: 12 !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox .photo-lightbox-backdrop { background: #00243f !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body.photo-lightbox-open main.app-shell > #photoLightbox #photoLightboxPlayInline { color: #00243f !important; background: #73dac6 !important; box-shadow: none !important; }

/* One photo per page on phones and tablets, just like the capsule preview.
   Stable frames reserve the space before decoding; the full image is never cropped. */
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-frame {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  padding: 0 !important; gap: 0 !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) #photoLightboxGallery {
  grid-area: 1 / 1 !important;
  display: flex !important; flex-flow: row nowrap !important;
  width: 100% !important; height: 100% !important; min-height: 0 !important;
  padding: 0 !important; gap: 0 !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important; scroll-padding: 0 !important;
  overscroll-behavior: contain !important; touch-action: pan-x pinch-zoom !important;
  scrollbar-width: none !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-gallery-item {
  box-sizing: border-box !important; position: relative !important;
  flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important;
  height: 100% !important; min-height: 0 !important;
  display: grid !important; place-items: center !important;
  padding: calc(max(12px, env(safe-area-inset-top)) + 52px) max(12px, env(safe-area-inset-right)) 58px max(12px, env(safe-area-inset-left)) !important;
  scroll-snap-align: center !important; scroll-snap-stop: always !important;
  touch-action: pan-x pinch-zoom !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-gallery-item > img {
  width: 100% !important; height: 100% !important; min-height: 0 !important;
  max-width: 100% !important; max-height: 100% !important;
  object-fit: contain !important; object-position: center !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  touch-action: pan-x pinch-zoom !important;
}
/* One stable footer group, outside the image frame. Keep both arrow slots at
   the ends of the gallery so the counter never shifts when direction changes. */
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-pagination:not([hidden]) {
  display: grid !important;
  grid-template-columns: 44px minmax(64px, auto) 44px !important;
  align-items: center !important; gap: 12px !important;
  position: relative !important; grid-area: 1 / 1 !important;
  align-self: end !important; justify-self: center !important;
  top: auto !important; bottom: 8px !important;
  margin: 0 !important; padding: 0 !important;
  z-index: 10 !important;
}
html body main.app-shell > #photoLightbox .photo-lightbox-pagination[hidden],
html body main.app-shell > #photoLightbox.video-mode .photo-lightbox-pagination {
  display: none !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-gallery-nav:not([hidden]) {
  display: inline-flex !important;
  position: static !important; grid-area: auto !important;
  inset: auto !important;
  width: 44px !important; height: 44px !important; min-width: 44px !important;
  box-sizing: border-box !important; margin: 0 !important; padding: 0 !important;
  transform: none !important; box-shadow: none !important;
  touch-action: manipulation !important;
  transition: opacity 140ms ease !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-gallery-nav:disabled {
  visibility: visible !important; opacity: .35 !important; cursor: default !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox .photo-lightbox-gallery-nav:focus-visible {
  outline: 2px solid #73dfc8 !important; outline-offset: 3px !important;
}
html body.photo-lightbox-open main.app-shell > #photoLightbox .photo-lightbox-position {
  display: block !important;
  width: max(64px, var(--photo-lightbox-counter-width, 7ch)) !important;
  margin: 0 !important; padding: 0 !important;
  color: #eaf7fb !important; text-align: center !important;
  font: 600 14px/1.2 system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums !important;
}
html body.photo-lightbox-open.visual-viewport-zoomed main.app-shell > #photoLightbox:not(.video-mode) #photoLightboxGallery {
  scroll-snap-type: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body.photo-lightbox-open main.app-shell > #photoLightbox:not(.video-mode) .photo-lightbox-gallery-nav:not([hidden]) {
    transition: none !important;
  }
}