/* gallery.css: the full-screen photo viewer (gallery.js). The page's tokens with fallbacks: --ff-ui, --ink, --shadow,
   --sat / --sab (the safe areas). z-index 70: above the sheet (30), the filter picker (33) and the toast (60). */
.gal{position:fixed;inset:0;z-index:70;background:rgba(12,14,20,.94);color:#fff;font-family:var(--ff-ui,"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);
  touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .18s ease;overscroll-behavior:contain}
.gal.on{opacity:1}
.gal[hidden]{display:none}
/* one definite grid track: a percentage height on the photo resolves against the padded stage, so the whole photo
   fits (with an auto track the img took its natural height for the full width and overflow:hidden cut the bottom) */
.gal-stage{position:absolute;inset:0;padding:calc(60px + var(--sat,0px)) 0 calc(52px + var(--sab,0px));display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;cursor:zoom-out}
.gal-img{display:block;width:100%;height:100%;object-fit:contain;cursor:default;-webkit-user-drag:none;will-change:transform,opacity}
.gal-img[hidden]{display:none}
.gal-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;animation:gal-spin .8s linear infinite;position:absolute;left:50%;top:50%;margin:-17px 0 0 -17px}
.gal-spin[hidden]{display:none}
@keyframes gal-spin{to{transform:rotate(360deg)}}
.gal-fail{margin:0;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.1);font:400 15px/1.4 inherit;color:rgba(255,255,255,.85);text-align:center;cursor:default}
.gal-fail[hidden]{display:none}
.gal-x,.gal-arr{position:absolute;z-index:2;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink,#1A1A20);
  box-shadow:var(--shadow,0 0 0 1px rgba(26,26,32,.06),0 2px 6px -2px rgba(20,30,50,.16),0 10px 24px -14px rgba(20,30,50,.26));cursor:pointer;-webkit-tap-highlight-color:transparent}
.gal-x svg,.gal-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gal-x{top:calc(12px + var(--sat,0px));right:12px}
.gal-arr{top:50%;margin-top:-22px;display:none}
.gal-arr.l{left:14px}.gal-arr.r{right:14px}
.gal-arr[hidden]{display:none}
.gal-n{position:absolute;z-index:2;left:12px;top:calc(18px + var(--sat,0px));height:32px;padding:0 11px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(0,0,0,.45);
  font:600 13px/1 inherit;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#fff}
.gal.one .gal-n{display:none}
.gal-cap{position:absolute;z-index:2;left:16px;right:16px;bottom:calc(16px + var(--sab,0px));margin:0;text-align:center;font:400 13px/1.4 inherit;color:rgba(255,255,255,.82);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
.gal-cap[hidden]{display:none}
.gal-x:focus-visible,.gal-arr:focus-visible{outline:3px solid var(--focus,#E8A317);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .gal-arr{display:grid}
  .gal-arr[hidden]{display:none}
  .gal-stage{padding-left:72px;padding-right:72px}
  .gal-x,.gal-arr{transition:transform .15s,box-shadow .15s}
  .gal-x:hover,.gal-arr:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(26,26,32,.14),0 3px 8px -2px rgba(20,30,50,.22),0 12px 26px -12px rgba(20,30,50,.32)}
  .gal-arr:hover{transform:translateY(-1px)}
}
@media (prefers-reduced-motion:reduce){.gal{transition:none}.gal-img{transition:none!important}}