/* The dialog article.js opens over a gallery photograph.
   Split from article.css and enqueued only when a rendered article contains a
   gallery: an announcement of three paragraphs and a PDF should not carry the
   appearance of a photograph viewer it will never open. */
/* The dialog fills the viewport and centres its own contents, rather than
   relying on the user agent's `margin: auto` to centre the box.
   Measured on the live site: a bare <dialog> there computes `margin: 0px` and
   sits at 0,0, because the theme ships a global reset that zeroes margin on
   everything - so the viewer opened pinned to the top-left corner with the
   page showing around it. Nothing in this stylesheet was wrong; the assumption
   that the UA rule would survive was. It does not survive here, so centring is
   stated outright and cannot be reset away.

   The ground is on the dialog itself for the same reason: ::backdrop sits
   behind the box, and a box that now covers the viewport would hide it. The
   ::backdrop rule stays as well, so the dark holds during the open animation
   and on any engine that sizes the box differently. */
.rxsu-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  /* The opaque ground is the default, not the fallback of last resort: a
     browser without backdrop-filter must not be handed the thinner colour and
     no blur, because then the page behind shows through sharp and the caption
     competes with it. */
  background: rgba(20, 26, 20, 0.92);
  color: #fefefc;
  overscroll-behavior: contain;
}

/* Frosted, where the browser can actually frost. 0.82 is where this stops: the
   worst case behind the dialog is a white page, which lightens the composite to
   rgb(62,67,62). Measured against that: close 10.0:1, caption 8.5:1, counter
   6.4:1. At 0.70 the counter falls to 4.1:1, under the 4.5:1 normal text needs
   - so the number is set by the measurement, not by taste. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .rxsu-lightbox {
    background: rgba(20, 26, 20, 0.82);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}

/* A reader who asked for less transparency gets the flat ground back. The blur
   is decoration; their setting is not. */
@media (prefers-reduced-transparency: reduce) {
  .rxsu-lightbox {
    background: rgb(20, 26, 20);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Only when open: `display` on a closed dialog would defeat the UA's
   `display: none` and leave the viewer on screen over every article. */
.rxsu-lightbox[open] {
  display: grid;
  align-content: center;
  justify-items: center;
}

.rxsu-lightbox::backdrop {
  background: rgba(20, 26, 20, 0.92);
}

.rxsu-lightbox figure {
  display: grid;
  max-width: 100%;
  margin: 0;
  gap: 10px;
  justify-items: center;
}

.rxsu-lightbox img {
  width: auto;
  max-width: min(92vw, 1400px);
  /* Room reserved for the caption and the counter beneath. */
  max-height: 78dvh;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

.rxsu-lightbox figcaption {
  max-width: 34rem;
  padding-inline: 16px;
  color: #e9ece4;
  font-size: 0.9375rem;
  line-height: 1.75;
  text-align: center;
}

.rxsu-lightbox figcaption[hidden] { display: none; }

.rxsu-lightbox__status {
  margin: 0;
  padding-block-end: max(10px, env(safe-area-inset-bottom));
  color: #c9d0c2;
  font-size: 0.8125rem;
  text-align: center;
}

.rxsu-lightbox__close,
.rxsu-lightbox__nav {
  position: fixed;
  z-index: 1;
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(254, 254, 252, 0.35);
  border-radius: 999px;
  background: rgba(20, 26, 20, 0.6);
  color: #fefefc;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 650;
}

.rxsu-lightbox__close {
  inset-block-start: max(12px, env(safe-area-inset-top));
  inset-inline-end: max(12px, env(safe-area-inset-right));
  padding-inline: 16px;
}

.rxsu-lightbox__nav {
  inset-block-start: 50%;
  translate: 0 -50%;
}

.rxsu-lightbox__nav.is-prev { inset-inline-start: max(10px, env(safe-area-inset-left)); }
.rxsu-lightbox__nav.is-next { inset-inline-end: max(10px, env(safe-area-inset-right)); }
.rxsu-lightbox__nav[hidden] { display: none; }

.rxsu-lightbox__nav::before {
  content: "‹";
  font-size: 1.75rem;
  line-height: 1;
}

.rxsu-lightbox__nav.is-next::before { content: "›"; }

.rxsu-lightbox__close:hover,
.rxsu-lightbox__nav:hover,
.rxsu-lightbox__close:focus-visible,
.rxsu-lightbox__nav:focus-visible {
  border-color: #fefefc;
  background: rgba(20, 26, 20, 0.85);
}

.rxsu-lightbox__close:focus-visible,
.rxsu-lightbox__nav:focus-visible {
  outline: 3px solid #fefefc;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rxsu-article__enlarge { transition: none; }
  .rxsu-article__enlarge:hover { transform: none; }
}