/* The photo is the entire dialog: no panel, letterboxing, captions or chrome. */
#photo-viewer{
  position:fixed;
  inset:0;
  width:max-content;
  height:max-content;
  max-width:min(90vw,calc(100vw - 48px));
  max-height:min(86vh,calc(100vh - 48px));
  max-height:min(86dvh,calc(100dvh - 48px));
  margin:auto;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}
#photo-viewer::backdrop{background:rgb(10 7 8 / 88%)}
#photo-viewer .viewer-image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(90vw,calc(100vw - 48px));
  max-height:min(86vh,calc(100vh - 48px));
  max-height:min(86dvh,calc(100dvh - 48px));
  margin:0;
  object-fit:contain;
  background:transparent;
}
#photo-viewer .viewer-prev,
#photo-viewer .viewer-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  padding:0;
  border:1px solid rgb(255 255 255 / 25%);
  border-radius:50%;
  background:rgb(15 12 13 / 50%);
  color:#fff;
  touch-action:manipulation;
}
#photo-viewer .viewer-prev{left:12px}
#photo-viewer .viewer-next{right:12px}
#photo-viewer button:hover{background:rgb(15 12 13 / 68%)}
#photo-viewer button:focus-visible{outline:3px solid #fff;outline-offset:3px}
#photo-viewer button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media(max-width:700px){
  #photo-viewer .viewer-prev{left:8px}
  #photo-viewer .viewer-next{right:8px}
}