/* Lightbox overlay — three-row grid (bar / stage / foot) so the picture
   never fights the chrome. On phones the prev/next arrows live in the
   bottom control row instead of floating over the plate; on desktop they
   move out to the side gutters, which the frame width reserves for them. */

.viewer-overlay {
  align-content: stretch;
  background: rgba(18, 14, 11, 0.995);
  display: none;
  grid-template-areas:
    "vbar"
    "vstage"
    "vfoot";
  grid-template-rows: auto minmax(0, 1fr) auto;
  inset: 0;
  overscroll-behavior: contain;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  position: fixed;
  z-index: 1200;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.viewer-overlay.is-open {
  display: grid;
}

/* ── Top bar: context breadcrumb + close ─────────────────────── */

.viewer-bar {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  grid-area: vbar;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
}
.viewer-info__context {
  /* the overlay is always dark in both themes — fixed light ink */
  color: #d8ccb6;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Stage: the plate itself ─────────────────────────────────── */

.viewer-stage {
  align-items: center;
  display: flex;
  grid-area: vstage;
  justify-content: center;
  min-height: 0;
  padding: 0 0.5rem;
  position: relative;
}
.viewer-frame {
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.35);
  max-width: min(920px, calc(100vw - 1.5rem));
  overflow: hidden;
  padding: 0.5rem;
  position: relative;
}
.viewer-frame img,
.viewer-img {
  background: var(--paper-deep);
  display: block;
  /* Two ceilings, whichever bites first: a share of the viewport (so the
     plate never fills the screen edge to edge) and the height actually
     left over after the bar and foot (so it never grows into them on a
     short screen). */
  max-height: min(66dvh, calc(100dvh - 300px));
  max-width: 100%;
  object-fit: contain;
}

/* ── Foot: caption, filmstrip, controls ──────────────────────── */

.viewer-foot {
  display: grid;
  gap: 0.5rem;
  grid-area: vfoot;
  justify-items: center;
  padding: 0.55rem 0.75rem 0.85rem;
}
.viewer-info {
  color: #d8ccb6;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  max-height: min(20dvh, 5.5rem);
  max-width: 68ch;
  overflow-y: auto;
  text-align: center;
}
.viewer-info__title {
  color: #f6efe2;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
}
.viewer-info__desc,
.viewer-info__credit {
  margin-top: 0.2rem;
}

.viewer-controls {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.viewer-counter {
  /* the overlay is always dark in both themes — fixed light ink */
  color: #f1e8d8;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  min-width: 5.5ch;
  text-align: center;
}

.viewer-nav,
.viewer-close {
  align-items: center;
  background: var(--paper-soft);
  border: 1px solid var(--rule);
  color: var(--ink);
  display: grid;
  flex: none;
  font-size: 1.35rem;
  height: 44px;
  justify-content: center;
  line-height: 1;
  width: 44px;
  z-index: 1210;
}
.viewer-nav:focus-visible,
.viewer-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.viewer-strip {
  display: flex;
  gap: 0.35rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.25rem;
  scrollbar-width: none;
}
.viewer-strip::-webkit-scrollbar {
  display: none;
}
.viewer-strip__thumb {
  /* strip sits on the always-dark overlay — fixed light outline */
  border: 1px solid #f1e8d8;
  cursor: pointer;
  flex: none;
  height: 34px;
  opacity: 0.55;
  padding: 0;
  width: 46px;
}
.viewer-strip__thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.viewer-strip__thumb.is-active {
  opacity: 1;
  outline: 2px solid var(--accent);
}

/* ── Desktop: arrows move out to the gutters ─────────────────── */

@media (min-width: 901px) {
  .viewer-frame img,
  .viewer-img {
    max-height: min(70vh, calc(100vh - 300px));
  }
  .viewer-frame {
    max-width: min(920px, calc(100vw - 9rem));
  }
  .viewer-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }
  .viewer-nav--prev {
    left: 1.25rem;
  }
  .viewer-nav--next {
    right: 1.25rem;
  }
  .viewer-strip__thumb {
    height: 40px;
    width: 54px;
  }
}

/* Short viewports (landscape phones): drop the filmstrip, it steals
   more height than it earns. */
@media (max-height: 480px) {
  .viewer-strip {
    display: none !important;
  }
  .viewer-bar {
    padding: 0.35rem 0.75rem;
  }
  .viewer-foot {
    gap: 0.35rem;
    padding: 0.35rem 0.75rem 0.5rem;
  }
  .viewer-info {
    max-height: min(16dvh, 3.5rem);
  }
  .viewer-frame img,
  .viewer-img {
    max-height: min(62dvh, calc(100dvh - 205px));
  }
}

/* Click-to-zoom: 2x pixel view with drag-pan inside the frame */
.viewer-img {
  cursor: zoom-in;
  transition: transform 220ms ease;
}
.viewer-img.is-zoomed {
  cursor: grab;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .viewer-img {
    transition: none;
  }
}

/* The floating page furniture must not sit on top of the lightbox. */
body.viewer-open .settings-fab,
body.viewer-open .back-to-top,
body.viewer-open .navbar-corner,
body.viewer-open .mobile-topbar {
  opacity: 0;
  pointer-events: none;
}