/* Shared expanded-image viewer: the Recap Canvas look (bevelled frame, Previous · n / N … Next · Close Esc, caption below). */
dialog.photo-viewer{position:fixed;inset:0;margin:auto;width:min(1100px,calc(100% - 48px));max-width:none;height:fit-content;max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;box-shadow:none;overflow:visible;color:#333}
dialog.photo-viewer[open]{display:block}
dialog.photo-viewer::backdrop{background:#ffffffb8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.photo-viewer-frame{padding:8px;border:2px solid #bfbfbf;background:#bfbfbf;box-shadow:inset -2px -2px 0 #000,inset 2px 2px 0 #fff,inset -4px -4px 0 #808080,inset 4px 4px 0 #dbdbdb,0 20px 80px #0002;max-height:calc(100dvh - 32px);overflow:auto}
.photo-viewer-inner{background:#fff;padding:20px 24px 24px;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.photo-viewer-toolbar{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.photo-viewer-toolbar span{font-size:14px;color:#767676;margin-right:auto}
.photo-viewer-toolbar button{font:inherit;font-size:14px;border:0;background:none;padding:4px 0;color:#767676;cursor:pointer}
.photo-viewer-toolbar button:hover{color:#8050b5}
.photo-viewer-toolbar button:focus-visible{outline:none;color:#333;text-decoration:underline;text-decoration-color:#8050b5;text-decoration-thickness:1px;text-underline-offset:5px}
.photo-viewer-toolbar kbd{font:inherit;font-size:14px;line-height:1;padding:3px 5px;border:1px solid #d5d5d5;box-shadow:0 1px 0 #d5d5d5;background:#fafafa;color:#707070}
.photo-viewer-inner>img{display:block;width:auto;height:auto;max-width:100%;max-height:62dvh;margin:0 auto;object-fit:contain}
.photo-viewer-inner>p{margin:20px auto 0;max-width:720px;color:#707070;font-size:14px;text-align:center}
/* Paired screens (case galleries) sit side by side in the same frame. */
.photo-viewer.is-pair .photo-viewer-inner>img{display:none}
.photo-viewer .case-work-pair-viewer{height:62dvh;padding:0;background:none}
/* Dark mode: dark panel and a dark blurred backdrop. */
html[data-theme="dark"] dialog.photo-viewer{color:#ddd}
html[data-theme="dark"] .photo-viewer-inner{background:#202020}
html[data-theme="dark"] dialog.photo-viewer::backdrop,html[data-theme="dark"] #recap-dialog::backdrop{background:#0d0d0dc7}
html[data-theme="dark"] .photo-viewer-toolbar button:focus-visible{color:#f1f1f1}
html[data-theme="dark"] .photo-viewer-toolbar kbd{background:#2a2a2a;border-color:#444;box-shadow:0 1px 0 #444;color:#aaa}
html[data-theme="dark"] .photo-viewer-inner>p{color:#999}
@media(max-width:620px){dialog.photo-viewer{width:calc(100% - 24px)}.photo-viewer-frame{padding:6px}.photo-viewer-inner{padding:16px}.photo-viewer-toolbar{gap:14px}.photo-viewer-inner>img{max-height:58dvh}.photo-viewer .case-work-pair-viewer{height:auto;grid-template-columns:1fr}}
/* Minimal viewer (default): just the image and its caption over the blurred backdrop. "Framed" lives in the testing console. */
html:not([data-viewer-style="framed"]) .photo-viewer-frame{padding:0;border:0;background:none;box-shadow:none;overflow:visible;max-height:none}
html:not([data-viewer-style="framed"]) .photo-viewer-inner{background:none;padding:0;box-shadow:none}
html:not([data-viewer-style="framed"]) .photo-viewer-toolbar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:not([data-viewer-style="framed"]) .photo-viewer-inner>img{max-height:calc(100dvh - 120px);cursor:default}
html:not([data-viewer-style="framed"]) .photo-viewer .case-work-pair-viewer{height:calc(100dvh - 120px)}
html:not([data-viewer-style="framed"]) .photo-viewer-inner>p{margin-top:16px;color:#333}
html[data-theme="dark"]:not([data-viewer-style="framed"]) .photo-viewer-inner>p,html[data-theme="dark"]:not([data-viewer-style="framed"]) .photo-viewer-inner>p{color:#ddd}
html[data-theme="dark"]:not([data-viewer-style="framed"]) .photo-viewer-inner{background:none}
/* White images: edge treatments for the viewer (testing console "White images"). Default = tinted backdrop. */
html[data-image-edge="hairline"] .photo-viewer-inner>img,html[data-image-edge="card"] .photo-viewer-inner>img{box-shadow:0 0 0 1px rgba(0,0,0,.08),0 12px 40px rgba(0,0,0,.12)}
html[data-image-edge="card"] .photo-viewer-inner>img{border-radius:8px}
html:not([data-image-edge]) dialog.photo-viewer::backdrop,html[data-image-edge="tint"] dialog.photo-viewer::backdrop{background:#ececece6}
html[data-image-edge="mat"] .photo-viewer-inner>img{box-sizing:content-box;padding:10px;max-width:calc(100% - 20px);background:#f3f3f3;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
html[data-theme="dark"][data-image-edge="hairline"] .photo-viewer-inner>img,html[data-theme="dark"][data-image-edge="card"] .photo-viewer-inner>img{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 12px 40px rgba(0,0,0,.5)}
html[data-theme="dark"]:not([data-image-edge]) dialog.photo-viewer::backdrop,html[data-theme="dark"][data-image-edge="tint"] dialog.photo-viewer::backdrop{background:#1b1b1be6}
html[data-theme="dark"][data-image-edge="mat"] .photo-viewer-inner>img{background:#2a2a2a;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
/* Old per-viewer dark backgrounds (case-gallery/art) must not paint behind the minimal viewer. */
html[data-theme="dark"] dialog.photo-viewer{background:transparent;border:0}
/* Videos in the viewer: same footprint as images, silent loop, no controls or clicks. */
.photo-viewer-inner>video{display:none;width:auto;height:auto;max-width:100%;max-height:62dvh;margin:0 auto;object-fit:contain;pointer-events:none}
.photo-viewer.is-video .photo-viewer-inner>video{display:block}
.photo-viewer.is-video .photo-viewer-inner>img{display:none}
html:not([data-viewer-style="framed"]) .photo-viewer-inner>video{max-height:calc(100dvh - 120px)}