/* grain/styles/lightbox.css — the image viewer modal (lightbox.js). Design tokens only,
   no hardcoded colors. Native <dialog>: it owns the top-layer + ::backdrop, so no z-index
   races and no scrim div. The dialog fills the viewport and centres the figure; the dark
   gutter around the image IS the light-dismiss target. */
/* no `display` on the base rule: the UA hides a closed <dialog> with display:none, and setting a
   display here would defeat that (the closed viewer would stay on screen). Layout goes on [open]. */
.lightbox {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-fg);
  overflow: hidden;
  opacity: 0; transition: opacity .16s ease;
}
.lightbox[open] {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  opacity: 1;
}
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: color-mix(in srgb, var(--ink) 82%, transparent); }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* the figure: the centre column, holds the image + its caption */
.lightbox__figure {
  grid-column: 2; justify-self: center; align-self: center;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 100%; max-height: 100dvh; margin: 0; padding: var(--space-3);
  box-sizing: border-box;
}
.lightbox__img {
  display: block; max-width: 100%; max-height: calc(100dvh - 6rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-md); background: var(--color-bg);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ink) 55%, transparent);
}
.lightbox__caption {
  text-align: center; font-size: .85rem; color: var(--color-bg);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 85%, transparent);
}

/* the controls sit ABOVE the backdrop as fixed chrome. Drawn on the dark gutter, so their
   ink is the inverted (page-bg) colour with a soft dark disc behind for contrast. */
.lightbox__close, .lightbox__nav {
  position: fixed; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  color: var(--color-bg);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  transition: background .12s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: color-mix(in srgb, var(--ink) 65%, transparent); }
.lightbox__close .icon, .lightbox__nav .icon { width: 1.25rem; height: 1.25rem; }
.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__nav--prev { left: var(--space-3); }
.lightbox__nav--next { right: var(--space-3); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav[hidden], .lightbox__close[hidden] { display: none; }

/* the dot rail + counter: fixed to the bottom gutter, only for a real gallery (lightbox.js
   hides both for a single image; dots give way to just the counter past ten photos). */
.lightbox__dots {
  position: fixed; z-index: 1; left: 0; right: 0; bottom: calc(var(--space-3) + 1.5rem);
  display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; padding: 0 var(--space-3);
}
.lightbox__dot {
  width: .55rem; height: .55rem; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-bg);
  background: color-mix(in srgb, var(--color-bg) 30%, transparent);
  transition: background .12s ease;
}
.lightbox__dot:hover { background: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.lightbox__dot[aria-selected="true"] { background: var(--color-bg); }
.lightbox__count {
  position: fixed; z-index: 1; left: 0; right: 0; bottom: var(--space-3);
  margin: 0; text-align: center; font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .06em; color: var(--color-bg);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 85%, transparent);
}
.lightbox__count[hidden], .lightbox__dots[hidden] { display: none; }