/* ── Image lightbox ───────────────────────────────────────────
 *
 * Fullscreen overlay for previewing storyboard panels and style
 * frames. Loaded by index.html (in-app view) and share.html (read-
 * only shared brief). The overlay markup itself is injected by
 * /assets/lightbox.js on DOM ready, so pages don't have to include
 * the markup inline.
 *
 * Pages opt in by:
 *   1. Loading this stylesheet and /assets/lightbox.js
 *   2. Calling openImageLightbox(url, label) on click (typically
 *      via inline onclick on <img> tags)
 *   3. Optionally adding `cursor: zoom-in` to their clickable
 *      <img> selectors so the affordance is obvious
 * ───────────────────────────────────────────────────────────── */

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s;
}
.lightbox-overlay.open {
  display: flex;
  opacity: 1;
}
.lightbox-img {
  max-width: min(88vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.7);
  cursor: default;
  user-select: none;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}
.lightbox-label {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-family: var(--mono);
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 14px;
  border-radius: 20px;
  white-space: nowrap;
}