/* Click-to-enlarge for reduced illustrations in solution pages. */
img.rs-zoomable { cursor: zoom-in; transition: opacity .15s ease; }
img.rs-zoomable:hover { opacity: .92; }
img.rs-zoomable:focus-visible { outline: 2px solid var(--cyan, #18e1f0); outline-offset: 3px; }

/* !important on positioning: the site applies
   `body:not([data-page^="admin"]) > * { position:relative; z-index:1 }`
   to every direct child of <body>, which would pull the overlay into the
   page flow instead of covering the window. */
.rs-zoom-overlay {
  position: fixed !important; inset: 0 !important; z-index: 10000 !important;
  width: auto !important; height: auto !important; margin: 0 !important;
  display: flex; align-items: center; justify-content: center;
  padding: 2vh 2vw;
  background: rgba(3, 8, 12, .86);
  cursor: zoom-out;
  opacity: 0; transition: opacity .16s ease;
}
.rs-zoom-overlay[hidden] { display: none; }
.rs-zoom-overlay.is-visible { opacity: 1; }

.rs-zoom-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 80vw; }
/* Real size, but never more than 80% of the window; aspect ratio kept. */
.rs-zoom-figure img {
  display: block;
  /* Keep the enlarged image's own aspect ratio. The previous inline natural
     width combined with max-height could create a wider image box and
     object-fit letterboxing; its #fff background then appeared as white bars. */
  width: auto !important; height: auto !important;
  max-width: 80vw; max-height: 80vh;
  object-fit: contain;
  background: transparent;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  transform: scale(.985); transition: transform .16s ease;
}
.rs-zoom-overlay.is-visible .rs-zoom-figure img { transform: none; }
.rs-zoom-figure figcaption { max-width: 80vw; color: #c9d6dd; font-size: 14px; line-height: 1.45; text-align: center; }

.rs-zoom-close {
  position: absolute; top: 14px; right: 18px;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 0;
  background: rgba(0, 0, 0, .35); color: #fff;
  font: 400 28px/1 system-ui, sans-serif; cursor: pointer;
}
.rs-zoom-close:hover, .rs-zoom-close:focus-visible { border-color: var(--cyan, #18e1f0); outline: none; }

html.rs-zoom-open, html.rs-zoom-open body { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .rs-zoom-overlay, .rs-zoom-figure img { transition: none; transform: none; }
}