/* Keep the close control in its own row, clear of the image and its focus ring. */
dialog.photo-dialog {
 width: min(1120px,calc(100vw - 32px));
 max-width: none;
 max-height: calc(100vh - 32px);
 max-height: calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 margin: auto;
 padding: 16px;
 overflow: hidden;
 overscroll-behavior: contain;
}
dialog.photo-dialog[open] { display: flex; flex-direction: column; gap: 12px; }
.photo-dialog .photo-close {
 position: static;
 inset: auto;
 flex: 0 0 auto;
 align-self: flex-end;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 min-width: 90px;
 min-height: 44px;
 max-width: 100%;
 margin: 0;
 padding: 10px 12px;
 border: 1px solid #ffffff35;
 border-radius: 8px;
 background: #ffffff08;
 color: #e0e9f1;
 font: 500 .875rem/1.2 var(--sans);
 white-space: nowrap;
 transition: border-color .2s,background .2s,color .2s;
}
.photo-dialog .photo-close > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; font-size: inherit; line-height: 1; }
.photo-dialog .photo-close .ui-icon { display: block; width: 20px; height: 20px; margin: 0; }
.photo-dialog .photo-close:hover { border-color: #ff6b2b; background: #ff4b0015; color: #fff; }
.photo-dialog .photo-close:focus-visible { outline: 2px solid #ff6b2b; outline-offset: 2px; }
.photo-dialog > figure { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; margin: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.photo-dialog > figure > img { display: block; flex: 0 0 auto; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 172px); max-height: calc(100dvh - 172px); margin: 0 auto; border-radius: 6px; object-fit: contain; }
.photo-dialog > figure > figcaption { flex: 0 0 auto; width: 100%; margin: 12px 0 0; padding-inline: 6px; font-size: .8125rem; line-height: 1.7; white-space: normal; text-wrap: wrap; overflow-wrap: anywhere; }
@media (max-width:600px) {
 dialog.photo-dialog { width: calc(100vw - 24px); padding: 12px; }
}
@media (prefers-reduced-motion:reduce) { .photo-dialog .photo-close { transition: none; } }