/* Photo-only controls and one scrollable image surface, including both watermarks. */
.photo-viewer-controls{display:none}
#media-dialog.is-photo .dialog-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px}
#media-dialog.is-photo .photo-viewer-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
#media-dialog.is-photo .photo-zoom-controls{display:flex;align-items:center;flex:none;padding:3px;border:1px solid #ffffff20;border-radius:100px;background:linear-gradient(145deg,#ffffff09,#0008);box-shadow:inset 0 1px 0 #ffffff07}
#media-dialog.is-photo .photo-viewer-controls button{display:grid;place-items:center;min-width:34px;height:40px;padding:5px;border:0;border-radius:100px;background:transparent;color:#e4f6ff;font-size:.75rem;line-height:1.2;font-weight:650;touch-action:pan-x pan-y}
#media-dialog.is-photo #photo-zoom-reset{min-width:50px;font-variant-numeric:tabular-nums}
#media-dialog.is-photo .photo-viewer-controls #photo-fullscreen{width:46px;height:46px;border:1px solid #ffffff20;border-radius:14px;background:linear-gradient(145deg,#ffffff09,#0008)}
.photo-viewer-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.photo-viewer-controls button:hover{background:#ffffff0b!important}
.photo-viewer-controls button:disabled{opacity:.3;cursor:default}
.photo-viewer-controls button:focus-visible{outline:2px solid #ffffff80;outline-offset:2px}
#photo-fullscreen[aria-pressed="false"] .photo-fullscreen-exit,#photo-fullscreen[aria-pressed="true"] .photo-fullscreen-enter{display:none}
#media-dialog.is-photo #dialog-media{display:block!important;overflow:auto!important;overflow-anchor:none;overscroll-behavior:contain;scrollbar-gutter:auto;touch-action:pan-x pan-y}
.photo-zoom-viewport{display:flex;align-items:center;justify-content:center;width:max-content;min-width:100%;touch-action:pan-x pan-y}
.photo-zoom-stage{position:relative;flex:none;touch-action:pan-x pan-y}
#media-dialog.is-photo #dialog-media .photo-zoom-stage>.photo-watermark-frame{position:absolute;left:0;top:0;display:block;width:var(--photo-base-width)!important;height:var(--photo-base-height)!important;max-width:none;max-height:none;transform-origin:top left;touch-action:pan-x pan-y}
#media-dialog.is-photo #dialog-media .photo-zoom-stage img{pointer-events:none;-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none}
#dialog-media.photo-can-pan{cursor:grab}
#dialog-media.photo-is-panning{cursor:grabbing}
#media-dialog.is-photo.photo-viewer-expanded[open]{left:0!important;top:0!important;width:100vw!important;height:100dvh!important;max-width:100vw!important;max-height:100dvh!important;margin:0!important;transform:none!important;border-radius:0;padding:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));background:#080909}
#media-dialog.is-photo.photo-viewer-expanded #dialog-media{flex:1 1 auto!important;height:auto!important;min-height:0!important}
/* Keep the heading, zoom group, and close button in one header row. */
#media-dialog.is-photo .dialog-top>div:first-child{min-width:0}
#media-dialog.is-photo .photo-viewer-controls{flex-wrap:nowrap}
#media-dialog.is-photo #photo-fullscreen[hidden]{display:none!important}
@media(max-width:1024px){
 #media-dialog.is-photo .dialog-top{grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:12px}
 #media-dialog.is-photo .dialog-top>.photo-viewer-controls{grid-row:1;grid-column:2;align-self:center;padding:0;border:0}
 #media-dialog.is-photo .dialog-top>.close-button{grid-row:1;grid-column:3;align-self:center;width:42px;height:42px}
 #media-dialog.is-photo .dialog-top h2{font-size:clamp(.9375rem,2.6vw,1.25rem);line-height:1.3;overflow-wrap:anywhere}
}
@media(max-width:360px){
 #media-dialog.is-photo .dialog-top{gap:10px;padding:10px}
 #media-dialog.is-photo .photo-viewer-controls button{min-width:30px;height:40px}
 #media-dialog.is-photo #photo-zoom-reset{min-width:44px}
}
@media(max-width:760px) and (orientation:landscape),
      (max-width:1024px) and (max-height:500px) and (orientation:landscape){
 #media-dialog.is-photo:not(.photo-viewer-expanded)[open]{grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"top top" "media toolbar" "media description"}
 #media-dialog.is-photo:not(.photo-viewer-expanded) .dialog-top{grid-column:1/-1;padding:8px 12px}
 #media-dialog.is-photo:not(.photo-viewer-expanded) #dialog-media{height:100%!important}
 #media-dialog.is-photo .dialog-top h2{font-size:1rem}
}