/* Thumbnail preview (image-preview.js). Uses the site theme tokens from site.css. */
img[data-image-preview=open]{cursor:zoom-in}
img[data-image-preview=open]:focus-visible{outline:2px solid var(--accent,#d3ff62);outline-offset:2px}

/* The magnifier over an image whose own click does something else. */
.image-preview-lens{box-sizing:border-box;position:fixed;z-index:1060;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line,#ffffff1c);border-radius:50%;background:var(--page,#10110f);color:var(--ink,#f3f3e9);font-size:13px;line-height:1;cursor:zoom-in;opacity:.92;box-shadow:0 1px 6px #0006}
.image-preview-lens:hover{opacity:1;border-color:var(--accent,#d3ff62);color:var(--accent,#d3ff62)}
[data-bs-theme=light] .image-preview-lens:hover{color:var(--ink)}
.image-preview-lens:focus-visible{outline:2px solid var(--accent,#d3ff62);outline-offset:2px}
.image-preview-lens[hidden]{display:none}

/* The dialog fills the viewport; everything that is not the picture is backdrop. */
dialog.image-preview-dialog{box-sizing:border-box;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:12px 56px;border:0;border-radius:0;background:transparent;color:var(--ink,#f3f3e9);overflow:hidden}
dialog.image-preview-dialog[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.image-preview-dialog::backdrop{background:#000d;backdrop-filter:blur(3px)}
.image-preview-stage{grid-column:2;margin:0;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.image-preview-stage img{display:block;max-width:100%;max-height:calc(100dvh - 90px);width:auto;height:auto;object-fit:contain;border-radius:6px;background:var(--surface,#191b17);box-shadow:0 8px 40px #000a;cursor:default}
.image-preview-dialog.is-loading .image-preview-stage img{min-width:min(60vw,640px);opacity:.85}
.image-preview-stage figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;max-width:100%;font-size:13px;color:#e8e8de;text-align:center;overflow-wrap:anywhere}
.image-preview-count,.image-preview-status{color:#b8bbaf}
.image-preview-status:empty,.image-preview-count:empty,.image-preview-caption:empty{display:none}
.image-preview-close,.image-preview-step{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #ffffff33;border-radius:50%;background:#000a;color:#fff;font-size:16px}
.image-preview-close:hover,.image-preview-step:hover{border-color:var(--accent,#d3ff62);color:var(--accent,#d3ff62)}
.image-preview-close:focus-visible,.image-preview-step:focus-visible{outline:2px solid var(--accent,#d3ff62);outline-offset:2px}
.image-preview-close{position:absolute;top:10px;right:10px;z-index:1}
.image-preview-step[data-step="-1"]{grid-column:1}
.image-preview-step[data-step="1"]{grid-column:3}
.image-preview-step[hidden]{visibility:hidden;display:grid}
@media(max-width:575px){
 dialog.image-preview-dialog{padding:56px 8px 64px}
 dialog.image-preview-dialog[open]{grid-template-columns:minmax(0,1fr)}
 .image-preview-stage{grid-column:1;grid-row:1}
 .image-preview-stage img{max-height:calc(100dvh - 150px)}
 .image-preview-step{position:absolute;bottom:12px}
 .image-preview-step[data-step="-1"]{left:calc(50% - 52px)}
 .image-preview-step[data-step="1"]{right:calc(50% - 52px)}
}