/* Shared dialog surfaces, with a photograph-first gallery. */
#modal {
  --dialog-surface: #fcfdfd;
  --dialog-soft: #f0f3f3;
  --dialog-stroke: rgb(30 48 45 / 9%);
  --dialog-focus: #16856b;
  width: calc(100% - 32px);
  max-width: 440px;
  max-height: calc(100dvh - 40px);
  padding: 28px;
  border: 1px solid var(--dialog-stroke);
  border-radius: 28px;
  background: var(--dialog-surface);
  box-shadow: 0 32px 100px rgb(0 15 13 / 24%), 0 4px 16px rgb(0 15 13 / 8%);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  overflow: hidden;
}
#modal #content {max-height: calc(100dvh - 98px);overflow-y: auto;overscroll-behavior: contain;scrollbar-width: thin;}
.dark #modal {
  --dialog-surface: #1b2224;
  --dialog-soft: #263032;
  --dialog-stroke: rgb(229 249 243 / 10%);
  --dialog-focus: #83d3bb;
  box-shadow: 0 32px 100px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 3%);
}
#modal[open] {animation: dialog-enter 200ms cubic-bezier(.2,.75,.25,1) both;}
#modal::backdrop {
  background: rgb(5 14 15 / 46%);
  backdrop-filter: blur(16px) saturate(.75);
  -webkit-backdrop-filter: blur(16px) saturate(.75);
  animation: backdrop-enter 180ms ease-out both;
}
.dark #modal::backdrop {background: rgb(0 7 8 / 64%);}
#modal #close {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dialog-soft);
  color: var(--muted);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
#modal #close svg {width: 18px;height: 18px;stroke-width: 1.7;}
#modal #close:active {transform: scale(.92);}
#modal :is(button,a,input,textarea,select):focus-visible {
  outline: 2px solid var(--dialog-focus);
  outline-offset: 3px;
}
#modal h2:focus, #modal:focus {outline: none;}
#modal #content h2 {
  margin: 0 48px 24px 0;
  font-size: 23px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
#modal #content > p {font-size: 14px;line-height: 1.65;}
#modal #content > button:not(.primary) {
  min-height: 48px;
  padding: 13px 14px;
  margin: 4px 0;
  border: 0;
  border-radius: 14px;
  background: var(--dialog-soft);
  font-size: 14px;
  font-weight: 500;
}
#modal #content > a:not(.album-link) {font-size: 14px;line-height: 1.6;color: var(--green);}
#modal #content label {margin: 16px 0;font-size: 12px;font-weight: 500;color: var(--muted);}
#modal :is(input:not([type="checkbox"]),textarea,select) {
  margin-top: 7px;
  padding: 12px 14px;
  border: 1px solid var(--dialog-stroke);
  border-radius: 13px;
  background: var(--dialog-soft);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}
#modal textarea {min-height: 120px;resize: vertical;}
#modal .primary {border-radius: 14px;font-size: 14px;min-height: 48px;}
#modal .field-action {border-radius: 12px;font-size: 13px;}
#modal .form-error:empty {margin: 0;}
#modal.object-editor {max-width: 560px;}
#modal .upload-zone {border-radius: 16px;}

#modal.gallery-dialog {
  max-width: min(840px,72dvh);
  padding: 0;
  overflow: hidden;
  background: var(--dialog-surface);
}
#modal.gallery-dialog #content {max-height: none;overflow: hidden;border-radius: inherit;}
#modal.gallery-dialog #close {
  top: 16px;
  right: 16px;
  background: rgb(15 25 24 / 38%);
  color: #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
}
.gallery-hero {position: relative;isolation: isolate;aspect-ratio: 1;max-height: min(72dvh,740px);background: #0c1414;}
.gallery-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgb(0 12 11 / 76%),rgb(0 12 11 / 28%) 30%,transparent 52%,transparent 62%,rgb(0 12 11 / 58%));
}
#modal #content #gallery-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.gallery-heading {position: absolute;z-index: 1;left: 28px;right: 80px;top: 25px;pointer-events: none;}
.gallery-eyebrow {margin: 0 0 8px;color: rgb(255 255 255 / 75%);font-size: 10px;font-weight: 500;letter-spacing: .13em;text-transform: uppercase;}
#modal #content .gallery-title {display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;margin: 0;color: #fff;font-size: 23px;font-weight: 500;line-height: 1.2;letter-spacing: -.035em;text-wrap: balance;text-shadow: 0 1px 8px rgb(0 0 0 / 30%);}
#modal .gallery-controls {
  position: absolute;
  z-index: 1;
  inset: auto 24px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
}
#modal .gallery-controls[hidden] {display: none;}
#modal #content .gallery-controls > button {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(15 25 24 / 32%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%);
  color: #fff;
  transition: transform 160ms ease, background 160ms ease;
}
#modal .gallery-controls svg {width: 20px;height: 20px;stroke-width: 1.6;}
.gallery-position {display: grid;justify-items: center;gap: 2px;}
#modal #photo-count {color: #fff;font-size: 11px;font-weight: 500;letter-spacing: .06em;font-variant-numeric: tabular-nums;}
.gallery-dots {display: flex;gap: 0;}
#modal #content .gallery-dot {
  display: grid;
  place-items: center;
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
}
.gallery-dot::after {content: "";width: 5px;height: 5px;border-radius: 50%;background: rgb(255 255 255 / 40%);transition: width 160ms ease, background 160ms ease;}
.gallery-dot[aria-current="true"]::after {width: 16px;background: #fff;border-radius: 4px;}
#modal .gallery-owner-actions {gap: 8px;margin: 0;padding: 14px 20px;}
#modal #content .gallery-owner-actions button {
  min-height: 40px;
  padding: 10px 12px;
  border: 0;
  background: var(--dialog-soft);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
#modal .album-link {padding: 18px 24px;font-size: 13px;color: var(--text);text-decoration-color: var(--muted);text-underline-offset: 4px;}
#modal .album-link + .gallery-owner-actions {padding-top: 0;}
@media (hover: hover) {
  #modal #close:hover {background: var(--line);color: var(--text);}
  #modal.gallery-dialog #close:hover, #modal .gallery-controls > button:hover {background: rgb(15 25 24 / 60%);color: #fff;}
  #modal #content > button:not(.primary):hover {background: var(--line);}
}
@media (max-width: 699px) {
  #modal {padding: 24px;max-height: calc(100dvh - 32px);border-radius: 25px;}
  #modal #content {max-height: calc(100dvh - 82px);}
  #modal #close {top: 14px;right: 14px;}
  #modal #content h2 {font-size: 21px;margin-bottom: 22px;}
  #modal.gallery-dialog {width: calc(100% - 24px);max-width: 440px;padding: 0;}
  #modal.gallery-dialog #close {top: 14px;right: 14px;}
  .gallery-heading {left: 20px;top: 20px;right: 76px;}
  #modal #content .gallery-title {font-size: 21px;margin: 0;}
  .gallery-hero {max-height: calc(100dvh - 154px);}
  #modal .gallery-controls {inset: auto 16px 14px;}
  #modal .gallery-owner-actions {padding: 12px;}
}
@keyframes dialog-enter {from {opacity: 0;transform: translateY(10px) scale(.975);}to {opacity: 1;transform: none;}}
@keyframes backdrop-enter {from {opacity: 0;}to {opacity: 1;}}
@media (prefers-reduced-motion: reduce) {#modal[open],#modal::backdrop {animation: none;}#modal * {transition: none;}}