/* Fit the viewer to its image rather than stretching an auto-width dialog. */
dialog.photo-dialog{position:fixed;inset:0;margin:auto;width:fit-content;min-width:min(260px,calc(100vw - 32px));max-width:calc(100vw - 32px);height:fit-content;max-height:calc(100dvh - 32px);padding:0;overflow:hidden;border:1px solid #a9b3a2;background:#102a23;color:#f1eddd;box-shadow:0 24px 90px #071b2266}
dialog.photo-dialog[open]{display:flex;flex-direction:column;align-items:stretch}
.photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex:0 0 auto;min-height:54px;padding:8px 12px 8px 20px;background:#102a23;border-bottom:1px solid #ffffff24}
.photo-toolbar p{color:#e6dec3;font:500 13px/1.6 var(--sans);margin:0}
.photo-toolbar .dialog-close{position:static;flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;padding:0;line-height:1;border:1px solid #b7c4b366;background:transparent;color:#f6f0dc;font-size:27px}
.photo-toolbar .dialog-close:hover{background:#ffffff18}
.photo-canvas{display:grid;place-items:center;min-width:0;min-height:0;background:#0b211b;line-height:0}
.photo-canvas>img{display:block;width:auto;height:auto;max-width:min(1080px,calc(100vw - 34px));max-height:calc(100dvh - 112px);margin:0 auto;object-fit:contain;flex-shrink:1}
@media(max-width:540px){dialog.photo-dialog{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.photo-toolbar{min-height:50px;padding:6px 8px 6px 14px}.photo-toolbar p{font-size:12px}.photo-canvas>img{max-width:calc(100vw - 18px);max-height:calc(100dvh - 90px)}}