/* Photo-viewer controls only. Photograph wrapper geometry is supplied inline. */
.reader-photo {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  appearance: none;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: zoom-in;
  touch-action: pan-x pan-y;
}

/* The wrapper owns the original geometry. turn.js needs the child image as the
   pointer target so an allowed page-corner gesture can reach its peel handler. */
#slider .reader-photo > img {
  position: static !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  image-rendering: auto;
  pointer-events: auto;
  user-select: none;
}

.reader-photo:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #005fcc;
}

#reader-photo-dialog {
  width: min(96vw, 1400px);
  max-width: none;
  height: min(92vh, 1000px);
  height: min(92dvh, 1000px);
  max-height: none;
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  border: 1px solid #716b77;
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  background: #242127;
  box-shadow: 0 12px 40px #0008;
  font: 16px/1.4 system-ui, sans-serif;
}

#reader-photo-dialog::backdrop {
  background: rgb(0 0 0 / 82%);
}

#reader-photo-dialog .reader-photo-dialog__panel {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 14px;
  overflow: auto;
  overscroll-behavior: contain;
}

#reader-photo-dialog .reader-photo-dialog__header,
#reader-photo-dialog .reader-photo-dialog__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#reader-photo-dialog .reader-photo-dialog__header {
  justify-content: space-between;
}

#reader-photo-dialog h2,
#reader-photo-dialog p {
  margin: 0;
}

#reader-photo-dialog h2 {
  min-width: 0;
  font-size: clamp(18px, 2.5vw, 26px);
  line-height: 1.2;
}

#reader-photo-dialog button {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #aaa3af;
  border-radius: 5px;
  color: #fff;
  background: #39343e;
  font: inherit;
  cursor: pointer;
}

#reader-photo-dialog button:hover:enabled {
  background: #504756;
}

#reader-photo-dialog button:disabled {
  color: #b9b4bc;
  border-color: #635c69;
  cursor: default;
}

#reader-photo-dialog button:focus-visible,
#reader-photo-dialog .reader-photo-dialog__viewport:focus-visible {
  outline: 3px solid #ffdb73;
  outline-offset: 3px;
}

#reader-photo-dialog .reader-photo-dialog__status,
#reader-photo-dialog .reader-photo-dialog__credit {
  color: #ddd7e2;
}

#reader-photo-dialog .reader-photo-dialog__viewport {
  min-width: 0;
  min-height: 180px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #716b77;
  border-radius: 4px;
  background: #111;
  scrollbar-gutter: stable;
  touch-action: pan-x pan-y pinch-zoom;
}

#reader-photo-dialog .reader-photo-dialog__stage {
  display: grid;
  place-items: center;
  min-width: 100%;
  min-height: 100%;
}

#reader-photo-dialog .reader-photo-dialog__image {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: contain;
  user-select: none;
}

#reader-photo-dialog [hidden] {
  display: none !important;
}

@media (max-width: 600px), (max-height: 600px) {
  #reader-photo-dialog {
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    height: calc(100dvh - 12px);
  }

  #reader-photo-dialog .reader-photo-dialog__panel {
    gap: 6px;
    padding: 8px;
  }

  #reader-photo-dialog .reader-photo-dialog__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #reader-photo-dialog .reader-photo-dialog__viewport {
    min-height: 0;
  }
}

@media (forced-colors: active) {
  .reader-photo:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }

  #reader-photo-dialog,
  #reader-photo-dialog .reader-photo-dialog__viewport {
    border-color: CanvasText;
  }
}