/* The picture, big (viewer.js): a dark room around the photo in both lights, as a photo viewer always is */
.viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0a0c15; color: #f4efe7; overflow: hidden; }
.viewer::backdrop { background: rgba(10, 12, 21, .6); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.v-bar { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; }
.v-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; text-decoration: none; }
.v-btn:hover { background: rgba(255, 255, 255, .12); }
.v-btn:disabled { opacity: .35; cursor: default; background: none; }
.v-btn:focus-visible { outline: 2px solid #f4efe7; outline-offset: -3px; }
.v-btn[data-v="close"] { margin-inline-start: 8px; }
.v-pct { min-width: 4ch; text-align: center; font: 600 .9375rem/1 var(--body, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.v-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; padding-bottom: env(safe-area-inset-bottom, 0px); }
.v-stage.big { cursor: grab; }
.v-stage.big:active { cursor: grabbing; }
.v-img { position: absolute; left: 50%; top: 50%; max-width: none;   /* centred on the stage at any size; x, y move it from there */
  user-select: none; -webkit-user-drag: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
@media (prefers-reduced-motion: no-preference) { .viewer[open] { animation: v-in .18s ease-out; } }
@keyframes v-in { from { opacity: 0; } }