/* Optional modal presentation only: the source is always the existing marked preview. */
#photoModal .photo-viewer-stage.dynamic-preview-active #modalImage {
    filter: blur(15px);
}
#photoModal .photo-viewer-stage.dynamic-preview-active:not(.dynamic-preview-zoomed) #modalImage {
    touch-action: pinch-zoom !important;
    cursor: grab;
}
#photoModal .photo-viewer-stage.dynamic-preview-held #modalImage { cursor: grabbing; }
#photoModal .dynamic-preview-layer,
#photoModal .dynamic-preview-outline {
    position: absolute; pointer-events: none; user-select: none;
}
#photoModal .dynamic-preview-layer {
    z-index: 1; background-size: 100% 100%; background-repeat: no-repeat;
}
#photoModal .dynamic-preview-outline {
    z-index: 2; border-block: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 -1px 8px rgba(0,0,0,.2), 0 1px 8px rgba(0,0,0,.2);
}
#photoModal .dynamic-preview-help {
    position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
    z-index: 3; width: max-content; max-width: calc(100% - 18px);
    padding: 5px 9px; border-radius: 9px; color: #edf4f7;
    background: rgba(7,17,32,.88); text-align: center; font-size: .72rem;
    line-height: 1.4; pointer-events: none;
}
#photoModal .dynamic-preview-active .mobile-viewer-swipe-hint { display: none; }
#photoModal .dynamic-preview-pause {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    min-width: 44px; min-height: 44px; padding: 6px 10px;
    border: 1px solid #a5bdb4; border-radius: 10px;
    color: #fff; background: rgba(7,17,32,.88); font-size: .78rem;
}
#photoModal .dynamic-preview-pause:focus-visible { outline: 3px solid #80e2b3; outline-offset: 2px; }
#photoModal .dynamic-preview-position {
    position: absolute; top: 8px; left: 8px; z-index: 5;
    width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
#photoModal .dynamic-preview-position:focus {
    width: min(55%, 240px); height: 44px; opacity: 1; pointer-events: auto;
    background: #071120; accent-color: #80e2b3;
}
#photoModal .photo-viewer-stage.is-loading .dynamic-preview-layer,
#photoModal .photo-viewer-stage.is-loading .dynamic-preview-outline { visibility: hidden; }

/* A one-tap alternative to swiping, only while the optional viewer is active. */
@media (max-width: 767px) and (pointer: coarse) {
    #photoModal .dynamic-preview-active #prevPhoto,
    #photoModal .dynamic-preview-active #nextPhoto {
        width: 44px !important; height: 44px !important;
        padding: 0 !important; margin: 0 !important;
        clip: auto !important; clip-path: none !important;
        border: 1px solid rgba(255,255,255,.4) !important;
    }
}