/* Photo galleries use a full-screen viewer. Price and promotion posters retain
   their existing cream dialog, as does the independent park map. */
#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) {
  --viewer-top: max(76px, calc(env(safe-area-inset-top, 0px) + 64px));
  --viewer-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  --viewer-side: max(88px, calc(env(safe-area-inset-left, 0px) + 72px), calc(env(safe-area-inset-right, 0px) + 72px));
  --viewer-footer: 44px;
  --viewer-control: 52px;
  position: fixed;
  inset: 0;
  width: 100vw;
  min-width: 0;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: var(--viewer-top) var(--viewer-side)
    calc(var(--viewer-bottom) + var(--viewer-footer));
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  border: 0;
  border-radius: 0;
  background: #101411;
  color: #fffdf6;
  box-shadow: none;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"])[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"])::backdrop {
  background: #101411;
}

#image-dialog[data-gallery="birthdays"] { --viewer-footer: 80px; }

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) > #gallery-image {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: calc(100vw - var(--viewer-side) - var(--viewer-side));
  max-height: calc(100dvh - var(--viewer-top) - var(--viewer-bottom) - var(--viewer-footer));
  margin: auto;
  object-fit: contain;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 8px 40px #0003;
  opacity: 1;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  transform-origin: center;
  transition: opacity 160ms ease;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .dialog-heading,
#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .gallery-controls {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .round-button {
  display: grid;
  place-items: center;
  width: var(--viewer-control);
  height: var(--viewer-control);
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #ffffff36;
  border-radius: 50%;
  background: #ffffff12;
  color: #fffdf6;
  box-shadow: 0 2px 12px #0002;
  transform: none;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease, scale 160ms ease;
}

#image-dialog .photo-viewer-zoom[hidden] { display: none; }

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .photo-viewer-zoom {
  position: absolute;
  z-index: 4;
  top: max(16px, env(safe-area-inset-top, 0px));
  left: max(20px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .photo-viewer-zoom-button {
  width: 44px;
  height: 44px;
  padding: 10px;
  background: #202821;
  cursor: pointer;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-photo-zoom="reset"] {
  width: 64px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .photo-viewer-zoom-button:disabled {
  opacity: .4;
  cursor: default;
  scale: 1;
  background: #202821;
  border-color: #ffffff36;
}

#image-dialog[data-photo-zoomed="true"] > #gallery-image { cursor: grab; }
#image-dialog[data-photo-dragging="true"] > #gallery-image { cursor: grabbing; }

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .round-button .icon {
  /* Override the shared navigation chevron's !important compact dimensions. */
  width: 24px !important;
  height: 24px !important;
  margin: 0;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="close-dialog"] {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(20px, env(safe-area-inset-right, 0px));
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="previous-image"],
#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="next-image"] {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="previous-image"] {
  left: max(20px, env(safe-area-inset-left, 0px));
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="next-image"] {
  right: max(20px, env(safe-area-inset-right, 0px));
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) #gallery-count {
  position: absolute;
  bottom: var(--viewer-bottom);
  left: 50%;
  display: block;
  min-width: 66px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid #ffffff24;
  border-radius: 999px;
  background: #ffffff0a;
  color: #fffdf6;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  translate: -50% 0;
}

#image-dialog[data-gallery="photos"] #image-dialog-title { display: none; }

#image-dialog[data-gallery="birthdays"] #image-dialog-title {
  position: absolute;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--viewer-bottom) + 46px);
  left: max(24px, env(safe-area-inset-left, 0px));
  max-width: 900px;
  margin: 0 auto;
  color: #fffdf6;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .photo-viewer-status {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: max-content;
  max-width: min(420px, calc(100vw - 64px));
  margin: 0;
  padding: 14px 20px;
  border: 1px solid #ffffff24;
  border-radius: 18px;
  background: #202821ed;
  color: #fffdf6;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  translate: -50% -50%;
  pointer-events: none;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"])[data-loading="true"] > #gallery-image {
  opacity: .3;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"])[data-image-error="true"] > #gallery-image {
  opacity: 0;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .round-button:focus-visible {
  outline: 3px solid #bde65c;
  outline-offset: 4px;
}

#image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .round-button:active {
  background: #ffffff2e;
  scale: .94;
}

@media (hover: hover) {
  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .round-button:hover {
    border-color: #ffffff66;
    background: #ffffff26;
  }
}

/* On a narrow portrait screen the whole photo keeps its available width;
   navigation has its own row underneath instead of covering its edges. */
@media (max-width: 680px) and (min-height: 551px) {
  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) {
    --viewer-top: max(72px, calc(env(safe-area-inset-top, 0px) + 60px));
    --viewer-side: max(12px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --viewer-bottom: max(20px, env(safe-area-inset-bottom, 0px));
    --viewer-footer: 64px;
    --viewer-control: 48px;
  }

  #image-dialog[data-gallery="birthdays"] { --viewer-footer: 110px; }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="close-dialog"] {
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .photo-viewer-zoom {
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .gallery-controls {
    inset: auto auto var(--viewer-bottom) 50%;
    display: grid;
    grid-template-columns: 48px minmax(66px, 1fr) 48px;
    align-items: center;
    gap: 18px;
    width: min(230px, calc(100vw - 48px));
    height: 48px;
    translate: -50% 0;
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .gallery-controls > * {
    position: static;
    inset: auto;
    translate: none;
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) #gallery-count {
    position: static;
    inset: auto;
    padding: 6px 10px;
    border: 0;
    background: none;
    translate: none;
  }

  #image-dialog[data-gallery="birthdays"] #image-dialog-title {
    right: 20px;
    bottom: calc(var(--viewer-bottom) + 65px);
    left: 20px;
    font-size: 20px;
  }
}

/* Short landscapes put controls beside the photo and reserve less headroom. */
@media (max-height: 550px) {
  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) {
    --viewer-top: max(68px, calc(env(safe-area-inset-top, 0px) + 56px));
    --viewer-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    --viewer-side: max(72px, calc(env(safe-area-inset-left, 0px) + 64px), calc(env(safe-area-inset-right, 0px) + 64px));
    --viewer-control: 44px;
    --viewer-footer: 38px;
  }

  #image-dialog[data-gallery="birthdays"] { --viewer-footer: 72px; }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .photo-viewer-zoom {
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="close-dialog"] {
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="previous-image"] {
    left: max(14px, env(safe-area-inset-left, 0px));
  }

  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) [data-action="next-image"] {
    right: max(14px, env(safe-area-inset-right, 0px));
  }

  #image-dialog[data-gallery="birthdays"] #image-dialog-title {
    bottom: calc(var(--viewer-bottom) + 42px);
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) > #gallery-image,
  #image-dialog:is([data-gallery="photos"], [data-gallery="birthdays"]) .round-button {
    transition: none;
  }
}