/* Zoomable lightbox, shared by both themes. Colours come from --lb-* set in v1.css / v2.css. */
.lightbox { position: fixed; inset: 0; z-index: 50; background: var(--lb-bg); color: var(--lb-fg); }
.lightbox[hidden] { display: none; }
.lightbox button {
  position: absolute; background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: 300 32px/1 system-ui, -apple-system, sans-serif; opacity: .65; transition: opacity .2s;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }

.lb-stage {
  position: absolute; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  inset: calc(56px + env(safe-area-inset-top, 0px)) 72px calc(76px + env(safe-area-inset-bottom, 0px));
  cursor: zoom-in;
}
.is-zoomed .lb-stage { cursor: grab; }
.is-panning .lb-stage { cursor: grabbing; }
.lb-img {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  will-change: transform; -webkit-user-drag: none; pointer-events: none;
}
.is-loading .lb-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 1.5px solid var(--lb-line); border-top-color: var(--lb-fg); border-radius: 50%;
  animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lb-caption {
  position: absolute; left: 72px; right: 72px; bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  margin: 0; text-align: center; font-size: 13px; line-height: 1.4; color: var(--lb-muted); transition: opacity .2s;
}
.lb-caption:empty { display: none; }

.lb-close { top: calc(10px + env(safe-area-inset-top, 0px)); right: 14px; width: 44px; height: 44px; }
.lb-prev, .lb-next { top: 50%; width: 56px; height: 88px; margin-top: -44px; font-size: 42px; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
.is-single .lb-prev, .is-single .lb-next { display: none; }
.is-zoomed .lb-prev, .is-zoomed .lb-next, .is-zoomed .lb-caption { opacity: 0; pointer-events: none; }

.lb-bar {
  position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px; font: 12px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .08em; color: var(--lb-muted); font-variant-numeric: tabular-nums;
}
.lightbox .lb-bar button {
  position: static; width: 34px; height: 34px; border: 1px solid var(--lb-line); border-radius: 50%;
  font-size: 18px; line-height: 32px; opacity: .8;
}
body.lb-open { overflow: hidden; }

@media (max-width: 640px) {
  .lb-stage { left: 0; right: 0; }
  .lb-prev, .lb-next { display: none; }
  .lb-caption { left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lb-img { transition: none !important; } }