/* The dialog is built by the lightbox script onto <body>, so it wears the theme's
 * tokens rather than an opening section's tone remap. */

.sk-lightbox {
  --sk-lightbox-pad: clamp(1rem, 3vw, 2.5rem);
  --sk-lightbox-gap: clamp(0.5rem, 1vw, 0.875rem);
  --sk-lightbox-measure: 46ch;
  --sk-lightbox-glyph: 1.375rem;
  --sk-lightbox-tap: 2.75rem;
  --sk-lightbox-edge: clamp(0.5rem, 1.25vw, 1rem);
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-ink);
  display: flex;
  flex-direction: column;
}
.sk-lightbox:not([open]) {
  display: none;
}

/* ::backdrop inherits from its dialog only since 2023; the literal is the
 * floor, because an unresolvable var paints no ground at all. */
.sk-lightbox::backdrop {
  background: color-mix(in srgb, var(--sk-bg, rgb(14, 12, 10)) 96%, transparent);
}

/* Chrome owns BANDS, never a layer: the stage is what is left between them,
 * so no image can run under the close or the rail. */
.sk-lightbox-head,
.sk-lightbox-rail {
  -webkit-user-select: none;
  user-select: none;
}

.sk-lightbox-head {
  flex: none;
  display: flex;
  justify-content: flex-end;
  padding: var(--sk-lightbox-edge) var(--sk-lightbox-pad) 0;
}

.sk-lightbox-stage {
  flex: 1;
  min-height: 0;
  /* ONE cell: the picture a step leaves and the one arriving share the
     centre, each in its own box. `minmax(0, …)`, or a tall picture's
     min-content would grow the track past the stage. */
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: var(--sk-lightbox-gap) var(--sk-lightbox-pad);
  /* The stage owns the ONE-finger gesture: left to the browser, the
     compositor claims it and cancels the pointer before the walk can read it.
     Two fingers stay the browser's, so a reader can still pinch the picture. */
  touch-action: pinch-zoom;
}
/* focus-ring-exempt: tabindex="-1", so no reader reaches this by Tab. */
.sk-lightbox-stage:focus-visible {
  --sk-focus-ring-width: 0;
}

.sk-lightbox-image,
.sk-lightbox-ghost {
  grid-area: 1 / 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--sk-media-radius);
  /* NO `--sk-image-filter`, deliberately, against the shared every-photo rule:
     the overlay is the destination, so the picture shows as it is. The morph
     therefore ends on a tonality shift. */
}
/* The picture a step leaves behind, fading under the one arriving. The step's
   motion is the script's (WAAPI): it sequences on decode, not on a class. */
.sk-lightbox-ghost {
  pointer-events: none;
}
/* Only while OPEN: a dialog mid fade-out still renders, and its copy of the
   name would collide with the thumbnail the next open claims. Both morph
   captures happen with the dialog open, so this loses nothing. */
.sk-lightbox[open] .sk-lightbox-image {
  view-transition-name: sk-lightbox;
}

.sk-lightbox-rail {
  flex: none;
  min-height: var(--sk-lightbox-tap);
  display: grid;
  grid-template-columns: var(--sk-lightbox-tap) 1fr var(--sk-lightbox-tap);
  align-items: center;
  gap: 1rem;
  padding: 0 var(--sk-lightbox-pad) var(--sk-lightbox-edge);
}

.sk-lightbox-words {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-width: var(--sk-lightbox-measure);
  margin-inline: auto;
  text-align: center;
}
.sk-lightbox-caption {
  margin: 0;
  color: var(--sk-ink);
}
.sk-lightbox-caption:empty {
  display: none;
}
.sk-lightbox-counter {
  margin: 0;
  color: var(--sk-ink-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: calc(var(--kit-track-detail) * 1em);
}

.sk-lightbox-nav,
.sk-lightbox-close {
  --sk-icon-size: var(--sk-lightbox-glyph);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sk-lightbox-tap);
  height: var(--sk-lightbox-tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sk-ink-muted);
  cursor: pointer;
  transition: color 160ms var(--sk-ease-out);
}
.sk-lightbox-nav:hover,
.sk-lightbox-close:hover {
  color: var(--sk-ink);
}
.sk-lightbox-nav[data-dir="prev"] {
  grid-column: 1;
  justify-self: start;
}
.sk-lightbox-nav[data-dir="next"] {
  grid-column: 3;
  justify-self: end;
}
.sk-lightbox[data-lone] .sk-lightbox-nav,
.sk-lightbox[data-lone] .sk-lightbox-counter {
  display: none;
}
.sk-lightbox[data-lone]:has(.sk-lightbox-caption:empty) .sk-lightbox-rail {
  min-height: 0;
}

/* Never beside the morph: a transition running during one is captured in the
 * new snapshot mid-flight. The lightbox script sets the mark. */
.sk-lightbox[data-fade] {
  opacity: 1;
  transition:
    opacity 260ms var(--sk-ease-out),
    display 260ms allow-discrete,
    overlay 260ms allow-discrete;
}
.sk-lightbox[data-fade]:not([open]) {
  opacity: 0;
}
@starting-style {
  .sk-lightbox[data-fade][open] {
    opacity: 0;
  }
}

/* The OUTGOING root HOLDS while only the new fades: a crossfade leaves both
 * snapshots translucent at once, showing whatever backs the document (the
 * gallery stages pages in a white-backed iframe). The attribute is what
 * outranks the shared root pair; the scrim settles before the image. */
html[data-sk-lightbox-vt]::view-transition-old(root) {
  animation: none;
  opacity: 1;
}
html[data-sk-lightbox-vt]::view-transition-new(root) {
  animation: sk-lightbox-ground 550ms ease;
}
html[data-sk-lightbox-vt]::view-transition-group(sk-lightbox) {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sk-lightbox-ground {
  from {
    opacity: 0;
  }
}

/* Zero specificity, so an opting section's dress for the box wins this rule
 * whichever sheet a document links first. */
:where(.sk-lightbox-trigger) {
  appearance: none;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
/* A UA stylesheet gives a button `cursor: default`. Only once the engine has
 * enabled it: scripts off, the picture is not clickable. */
.sk-lightbox-trigger:enabled {
  cursor: pointer;
}