/* The existing image viewer, scoped to this page; artwork layout is unchanged. */
.flow-photo{position:relative;display:block;width:100%;padding:0;border:0;background:none;text-align:inherit;cursor:pointer}
#confluence .preview-direction,#held .preview-direction{display:none}
.slide-image .enlarge-mark,.flow-photo .enlarge-mark{position:absolute;right:10px;bottom:10px;background:#fdfcf9e8;padding:7px 10px;font-size:13px;line-height:1;opacity:0;transition:opacity 200ms}
.slide-image:hover .enlarge-mark,.slide-image:focus-visible .enlarge-mark,.flow-photo:hover .enlarge-mark,.flow-photo:focus-visible .enlarge-mark{opacity:1}
dialog.flow-viewer{width:calc(100% - 36px);max-width:1500px;height:calc(100dvh - 36px);max-height:none;padding:0;overflow:hidden;background:var(--paper)}
.flow-viewer[open]{display:flex;flex-direction:column}
.flow-viewer::backdrop{background:#23231ed9}
.flow-viewer button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.flow-viewer button:disabled{opacity:.3;cursor:default}
.flow-viewer .viewer-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;gap:18px;flex:0 0 auto;font-size:12px}
.flow-viewer .viewer-toolbar button{padding:12px;margin-left:8px}
.flow-viewer .viewer-scroll{min-height:0;flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:10px 25px;touch-action:pan-y}
.flow-viewer .viewer-image{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.flow-viewer .viewer-scroll.is-zoomed{display:block;touch-action:pan-x pan-y}
.flow-viewer .viewer-scroll.is-zoomed .viewer-image{max-width:none;max-height:none;width:auto;height:auto;margin:auto}
.flow-viewer .viewer-bottom{padding:18px 24px;display:flex;gap:25px;justify-content:space-between;align-items:center;flex:0 0 auto}
.flow-viewer .viewer-caption{font-size:12px;line-height:1.7;white-space:pre-line;max-width:850px}
.flow-viewer .viewer-controls{display:flex;align-items:center;gap:16px;white-space:nowrap;font-size:12px}
.flow-viewer .viewer-controls button{border:1px solid var(--line);border-radius:50%;width:48px;height:48px;font-size:23px;margin-left:8px}
.flow-viewer .viewer-controls button:hover:not(:disabled){background:#eeede7}
body.viewer-open{overflow:hidden}
@media(max-width:700px){
 dialog.flow-viewer{width:100%;height:100dvh;margin:0}
 .flow-viewer .viewer-toolbar{padding:8px 12px;gap:8px}
 .flow-viewer .viewer-toolbar button{padding:10px 6px;margin-left:0}
 .flow-viewer .viewer-scroll{padding:8px 12px}
 .flow-viewer .viewer-bottom{padding:14px 16px;display:block}
 .flow-viewer .viewer-caption{font-size:11px;max-height:22dvh;overflow:auto}
 .flow-viewer .viewer-controls{justify-content:center;margin-top:12px}
 .flow-viewer .viewer-controls button{width:44px;height:44px}
}