/* Photo viewer / slideshow (public/js/lightbox.js builds the DOM). Flat photobook style.
   Tokens from tokens.css only. Desktop >= 760px: header / chevron columns / photo / footer.
   Mobile < 760px: progress strip, header, edge-to-edge photo, frame number, 4-up action bar. */
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;background:var(--color-viewer);color:var(--color-bg);font-family:var(--font-body);user-select:none;-webkit-user-select:none;overscroll-behavior:contain;outline:none;overflow:hidden}
.lb[hidden]{display:none}
.lb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* progress strip (mobile only) */
.lb-strip{display:none;flex:none;gap:3px;padding:calc(env(safe-area-inset-top) + 10px) 12px 0}
.lb-strip span{position:relative;flex:1;height:3px;background:var(--viewer-seg);overflow:hidden}
.lb-strip span.done{background:var(--color-bg)}
.lb-strip i{position:absolute;inset:0;display:none;background:var(--color-accent);transform-origin:0 50%}
.lb-strip span.cur i{display:block}
.lb-strip.cont span{background:var(--viewer-seg)}
.lb-strip.cont i{display:block;right:auto;transition:width .3s}

/* header */
.lb-bar{flex:none;display:flex;align-items:center;gap:4px;height:80px;padding:0 44px 0 56px;transition:opacity .3s}
.lb-count{margin-right:auto;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-title{font-weight:600}
.lb-ch,.lb-pos{color:var(--viewer-muted);font-variant-numeric:tabular-nums}
.lb-ch{display:none}
.lb-actions{display:flex;align-items:center;gap:4px}

.lb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 14px;border:0;border-radius:var(--radius);background:none;color:inherit;font:600 14px/1 var(--font-body);cursor:pointer;transition:color .15s,background .15s}
.lb-btn:hover{color:var(--color-accent)}
.lb-btn:focus-visible,.lb-nav:focus-visible,.lb-interval:focus-visible,.lb-exif a:focus-visible{outline:2px solid var(--color-accent);outline-offset:-2px}
.lb-btn[aria-pressed=true]{color:var(--color-accent)}
.lb-btn[aria-pressed=true] .i.heart{fill:currentColor}
.lb-btn[hidden]{display:none}
.lb-btn .i{width:18px;height:18px;flex:none}
.lb-bar .lb-btn[data-act=close] .i{width:20px;height:20px}
.lb-bar .lb-btn[data-act=zoom] .i,.lb-bar .lb-btn[data-act=fullscreen] .i{width:20px;height:20px}
.lb-interval{display:none;height:36px;border:1px solid var(--viewer-line);border-radius:var(--radius);background:var(--viewer-surface);color:inherit;font:600 13px var(--font-body);padding:0 8px}
.lb--show .lb-interval{display:block}

/* photo row: chevron | photo | chevron */
.lb-main{flex:1;min-height:0;display:grid;grid-template-columns:96px 1fr 96px;align-items:center}
.lb-nav{height:100%;display:grid;place-items:center;border:0;background:none;color:var(--viewer-muted);cursor:pointer;transition:color .15s,opacity .3s}
.lb-nav:hover{color:var(--color-bg)}
.lb-nav .i{width:28px;height:28px}
.lb.single .lb-nav{visibility:hidden}
.lb-stage{position:relative;min-width:0;height:100%;max-height:640px;overflow:hidden;touch-action:none;cursor:zoom-in}
.lb.zoomed .lb-stage{cursor:grab}
.lb.zoomed .lb-stage:active{cursor:grabbing}
.lb-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;opacity:0;transition:opacity .5s ease;will-change:transform;-webkit-user-drag:none;pointer-events:none}
.lb-img.on{opacity:1}
.lb-spinner{position:absolute;z-index:3;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid var(--viewer-seg);border-top-color:var(--color-accent);animation:lb-spin .8s linear infinite;pointer-events:none}
.lb-spinner[hidden]{display:none}
@keyframes lb-spin{to{transform:rotate(360deg)}}

/* footer: caption + EXIF + tags, actions */
.lb-foot{flex:none;display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px;padding:28px 56px 36px;transition:opacity .3s}
.lb-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.lb-num{display:none}
.lb-cap{margin:0;font-size:18px;line-height:1.4}
.lb-cap:empty{display:none}
.lb-exif{margin:0;font-size:13px;line-height:1.5;color:var(--viewer-muted)}
.lb-exif:empty{display:none}
.lb-exif a{color:var(--viewer-soft);text-decoration:none}
.lb-exif a:hover{color:var(--color-accent)}
.lb-acts{display:flex;align-items:center;gap:8px}
.lb-hint{display:none}

/* info panel (full EXIF) */
.lb-info{position:absolute;z-index:4;left:56px;bottom:132px;max-width:min(420px,calc(100% - 112px));padding:16px 20px;background:var(--viewer-surface);border:1px solid var(--viewer-line);font-size:14px;line-height:1.5;user-select:text;-webkit-user-select:text}
.lb-info[hidden]{display:none}
.lb-info p{margin:0}
.lb-info .cap{font-weight:600;margin-bottom:6px}
.lb-info .row{color:var(--viewer-dim)}

/* slideshow progress bar */
.lb-progress{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;display:none;background:var(--viewer-track)}
.lb--show .lb-progress{display:block}
.lb-strip i{height:100%}
.lb-progress i{display:block;height:100%;background:var(--color-accent);transform-origin:0 50%;transform:scaleX(0)}
.lb-progress i.run{animation:lb-progress var(--dur,5s) linear forwards}
.lb-strip span.cur i{transform:scaleX(1)}
.lb--show .lb-strip span.cur i{transform:scaleX(0)}
.lb--show .lb-strip span.cur i.run{animation:lb-progress var(--dur,5s) linear forwards}
.lb--paused .lb-progress i,.lb--paused .lb-strip i{animation-play-state:paused}
@keyframes lb-progress{to{transform:scaleX(1)}}

/* in a running slideshow the chrome fades out when idle */
.lb--show.idle .lb-bar,.lb--show.idle .lb-foot,.lb--show.idle .lb-nav{opacity:0;pointer-events:none}
.lb--show.idle .lb-stage{cursor:none}

@media (prefers-reduced-motion:reduce){
  .lb-img{transition:none}
  .lb-bar,.lb-foot,.lb-nav{transition:none}
}

@media (max-width:759.98px){
  .lb-strip{display:flex}
  .lb-bar{height:52px;gap:0;padding:0 4px 0 calc(env(safe-area-inset-left) + 16px)}
  .lb-count{font-size:13px}
  .lb-ch{display:inline}
  .lb-pos,.lb-interval,.lb--show .lb-interval,.lb-bar .lb-btn[data-act=zoom],.lb-bar .lb-btn[data-act=fullscreen]{display:none}
  .lb-bar .lb-btn{min-width:44px;padding:0}
  .lb-bar .lb-btn .lb-t{display:none}
  .lb-bar .lb-btn .i{width:20px;height:20px}
  .lb-bar .lb-btn[data-act=close] .i{width:22px;height:22px}
  .lb-main{display:block;flex:none;margin-top:40px}
  .lb-nav{display:none}
  .lb-stage{height:66.67vw;max-height:none}
  .lb-foot{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:0}
  .lb-meta{flex:1;min-height:0;justify-content:center;gap:6px;padding:0 16px;overflow:hidden}
  .lb-num{display:flex;align-items:baseline;gap:10px}
  .lb-n{font:800 72px/.8 var(--font-heading);letter-spacing:-.05em;color:var(--color-accent);font-variant-numeric:tabular-nums}
  .lb-of{font-size:14px;color:var(--viewer-dim)}
  .lb-cap{margin-top:6px;font-size:15px}
  .lb-acts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;border-top:2px solid var(--viewer-line)}
  .lb-acts .lb-btn{justify-content:flex-start;height:60px;padding:0 12px;border-left:1px solid var(--viewer-line-soft);font-size:12px}
  .lb-acts .lb-btn:first-child{border-left:0}
  .lb-acts .lb-btn:hover{background:var(--viewer-hover)}
  .lb-hint{display:block;margin:0;padding:8px 16px calc(env(safe-area-inset-bottom) + 14px);font-size:11px;color:var(--viewer-muted)}
  .lb-info{left:12px;right:12px;max-width:none;bottom:calc(env(safe-area-inset-bottom) + 110px)}
  .lb-progress{display:none!important}
}