/* A single toolbar, the photograph, and a compact thumbnail strip. */
.viewer{background:#161916;color:#ebece6;height:100vh;height:100dvh;display:flex;flex-direction:column}
.viewer a:hover{color:var(--accent-on-dark)}
.viewer-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;flex:none;min-height:56px;padding:6px 12px}
.viewer-stop-link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;min-width:0}
.viewer-be{color:#aab1a3}
.viewer-control{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-height:44px;padding:0 12px;border:1px solid #647fac;border-radius:0;background:transparent;color:inherit;font:13px/1 system-ui,sans-serif;white-space:nowrap}
.viewer-control span{font-size:20px;line-height:1}
.viewer-control:hover{border-color:var(--accent);background:#233657;color:var(--accent-on-dark)}
.viewer-close{background:#233657}
.viewer-main{display:flex;flex-direction:column;flex:1;min-height:0}
.viewer-stage{position:relative;flex:1;min-height:0}
.full-image{position:absolute;inset:0;display:block}
.full-image picture,.full-image img{display:block;width:100%;height:100%;max-width:none;max-height:none}
.full-image img{object-fit:contain}
.viewer-arrow{position:absolute;z-index:2;top:calc(50% - 22px);display:grid;place-items:center;width:44px;height:44px;border:1px solid #9998;border-radius:50%;background:#161916b8;font-size:22px}
.viewer-arrow:hover{border-color:var(--accent)}
.previous{left:8px}.next{right:8px}
.viewer-bottom{flex:none;min-width:0}
.viewer-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;padding:0 12px;font-size:11px}
.photo-info{display:flex;align-items:center;gap:14px;min-width:0;margin:0;color:#aab1a3;font:11px/1.5 ui-monospace,monospace}
.photo-info>span{white-space:nowrap}
.photo-info>span:not(:first-child){min-width:0;overflow:hidden;text-overflow:ellipsis}
.photo-counter{color:#ebece6}
.viewer-caption>a{display:flex;align-items:center;align-self:stretch;flex:none}
.photo-description{margin:0;padding:4px 12px;font-size:12px;max-height:4em;overflow:auto}
.filmstrip{display:flex;gap:6px;overflow-x:auto;padding:4px 12px;scrollbar-width:thin}
.filmstrip a{flex:none;display:block;border:2px solid transparent;padding:2px;opacity:.65}
.filmstrip a:first-child{margin-left:auto}.filmstrip a:last-child{margin-right:auto}
.filmstrip a[aria-current]{border-color:var(--accent);opacity:1}
.filmstrip a:hover{opacity:1}
.filmstrip img{width:56px;height:36px;object-fit:cover}
.share-status{position:fixed;z-index:5;bottom:90px;left:50%;transform:translateX(-50%);max-width:90vw;margin:0;padding:10px 14px;background:#233657;font-size:13px}
.share-status:empty{display:none}
@media(max-width:700px){
  .viewer-header{gap:6px;padding:6px 8px}
  .viewer-stop-link{font-size:13px}
  .viewer-be{display:none}
  .viewer-control{padding:0 9px;font-size:12px}
  .viewer-caption{gap:8px;padding:0 8px;font-size:10px}
  .photo-info{gap:8px;font-size:10px}
  .filmstrip{padding-inline:8px}
}
@media(max-height:500px) and (min-aspect-ratio:1/1){
  .filmstrip{display:none}
}

/* PhotoSwipe owns gestures and image transforms; the controls stay fixed. */
.viewer-enhanced{overflow:hidden}
.viewer-enhanced>.viewer-main{display:none}
.archive-gallery{--pswp-bg:#161916;--pswp-icon-color:#ebece6}
.archive-gallery .viewer-header,.archive-gallery .viewer-bottom{position:absolute;left:0;right:0;z-index:20;background:#161916;pointer-events:auto}
.archive-gallery .viewer-header{top:0;padding-top:calc(6px + env(safe-area-inset-top));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
.archive-gallery .viewer-bottom{bottom:0;padding-bottom:env(safe-area-inset-bottom)}
.archive-gallery .photo-description{height:32px;max-height:32px;overflow:auto;margin:0}
.archive-gallery .pswp__top-bar{display:none}
.archive-gallery .pswp__button--arrow{width:44px;height:44px;margin-top:-22px;background:#161916b8;border:1px solid #9998;border-radius:50%}
.archive-gallery .pswp__button--arrow--prev{left:8px}
.archive-gallery .pswp__button--arrow--next{right:8px}
.archive-gallery .pswp__button--arrow .pswp__icn{top:7px;left:7px;width:28px;height:28px}
.archive-gallery .pswp__img{max-width:none}
.archive-gallery .viewer-caption .photo-info{font-size:11px}
.archive-gallery .share-status{z-index:30}
.archive-gallery .filmstrip{height:52px;overflow-y:hidden}
@media(prefers-reduced-motion:reduce){.archive-gallery *{scroll-behavior:auto!important}}