/* qmViewer: the photo viewer (see js/qm-viewer.js). Always dark, so a picture looks the same in the light and the dark theme. */
/* The page is not locked (no overflow:hidden, so no scrollbar jump); the viewer covers it, keeps the wheel and touch for itself, and does not pass scrolling on to the page. */
.qv{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:rgba(7,12,9,.94);color:#e9f2ec;opacity:0;transition:opacity .28s ease;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
.qv[hidden]{display:none}
.qv.qv-on{opacity:1}
.qv-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:6px;padding:10px 12px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent)}
.qv-sp{flex:1}
.qv-count{font-size:14px;font-weight:600;padding-left:6px;opacity:.9}
.qv-b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);border:0;cursor:pointer;transition:background .15s,opacity .15s}
.qv-b:hover{background:rgba(255,255,255,.22)}
.qv-b:focus-visible{outline:2px solid #86e0ab;outline-offset:2px}
.qv-b[disabled]{opacity:.35;cursor:default}.qv-b[disabled]:hover{background:rgba(255,255,255,.1)}
.qv-b[hidden]{display:none}
.qv-b svg{width:20px;height:20px}
.qv-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:zoom-in}
.qv-zoomed .qv-stage{cursor:grab}.qv-drag .qv-stage{cursor:grabbing}
.qv-img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:50% 50%;will-change:transform;-webkit-user-drag:none;background:transparent}
.qv-drag .qv-img{transition:none}
.qv-busy .qv-img{opacity:0}
.qv-img{transition:opacity .25s ease}
.qv-load{display:none;position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#86e0ab;animation:qv-spin .8s linear infinite}
.qv-busy .qv-load{display:block}
.qv-err{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:12px 18px;border-radius:12px;background:rgba(255,255,255,.1);font-size:15px}.qv-err[hidden]{display:none}
.qv-nav{position:absolute;top:50%;z-index:3;margin-top:-21px;width:48px;height:48px}
.qv-prev{left:14px}.qv-next{right:14px}
.qv-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:34px 70px 16px;text-align:center;font-size:14.5px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);pointer-events:none}
.qv-cap[hidden]{display:none}
@keyframes qv-spin{to{transform:rotate(360deg)}}
@media(max-width:600px){.qv-nav{width:42px;height:42px;margin-top:-21px}.qv-prev{left:8px}.qv-next{right:8px}.qv-cap{padding:30px 56px 14px}}
@media(prefers-reduced-motion:reduce){.qv,.qv-img{transition:none}.qv-load{animation-duration:2s}}
/* a picture that opens in the viewer shows it can */
a[data-qm-view]{cursor:zoom-in}

/* grow from / shrink into the thumbnail */
.qv-anim .qv-img{transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.qv-closing{pointer-events:none}
@media(prefers-reduced-motion:reduce){.qv-anim .qv-img{transition:none}}