/* Archive viewers follow the image ratio instead of an oversized fixed box. */
:is(#viewer,#image-dialog){box-sizing:border-box;width:var(--viewer-width,92vw);height:var(--viewer-height,fit-content);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;margin:auto;overflow:auto;background:#0b0d0b;border:1px solid #ff5a3055}
:is(#viewer,#image-dialog)::backdrop{background:#000e;backdrop-filter:blur(4px)}
#viewer .viewer-tools{margin:0 0 10px;flex-wrap:wrap;gap:6px;font-size:9px}
#viewer .viewer-tools>div{margin-left:auto}
#viewer .viewer-scroll{height:var(--image-height,65dvh);display:flex;align-items:flex-start;overflow:auto;background:transparent}
#viewer .viewer-scroll img{flex:none;width:100%;height:auto;max-height:none;object-fit:contain;display:block;margin:0 auto}
#image-dialog>.dialog-close{position:static;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 10px auto;min-height:44px;padding:8px 10px;background:#171b16;color:#ff5a30;font:10px monospace}
#image-dialog>img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--image-height,75dvh);object-fit:contain;margin:0 auto}
:is(#viewer,#image-dialog)>p{margin:10px 0 0;font:10px/1.5 monospace;color:#aaa596;text-wrap:pretty}
@media(max-width:700px){:is(#viewer,#image-dialog){padding:8px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}#viewer .viewer-tools>span{display:none}#viewer .viewer-tools>div{width:100%;justify-content:space-between}:is(#viewer,#image-dialog)>p{font-size:9px}}