/* ============================================================
   DEMO — Scroll-driven attention lens on the Quick Mode toggle.
   Additive only. Loaded AFTER style.css. Touches nothing shared,
   scoped entirely to #qmScene / .lens-overlay.

   v2 changes from the first pass, per feedback:
   - Peak magnification raised to 2x (was a barely-there 1.16x).
   - Dropped the "dim the rest of the screenshot" approach. This is
     a real product screen, dimming parts of it reads as "disabled,"
     not "look here." Replaced with a ring that fades in/out around
     the lens instead, everything else in the image stays untouched.
   - Ring uses a wide-gamut colour on P3-capable screens for extra
     vividness (see note above the media query below on what this
     does and doesn't do).
   - transform-origin biased toward the top of the lens box (not
     dead centre) so growth happens mostly downward. The toggle
     sits close to the top edge of the screenshot; centred growth
     at 2x would push past the image's own top edge and get clipped
     by #qmScene's overflow:hidden.
   ============================================================ */

#qmScene,
#trScene {
  position: relative;
}

.lens-overlay {
  position: absolute;
  /* Calibrated against the actual screenshot pixels, not the Figma
     frame, the two didn't share an origin. See toggle-crop.svg for
     the source crop; these percentages are that crop's box mapped
     onto Patient-Quick-Findings.png's own 1920x1080 dimensions.
     Driven by real left/top/width/height rather than a CSS
     transform, see the JS comment on why: transform:scale left the
     SVG looking blurry at 2x. */
  left: var(--lens-left, 51.068%);
  top: var(--lens-top, 3.380%);
  width: var(--lens-width, 14.583%);
  height: var(--lens-height, 6.481%);
  border-radius: 8px;
}

/* lightbox.js's zoom-trigger/zoom-icon (the enlarge button in the
   bottom-right corner) is a sibling of .lens-overlay, added after it
   in the DOM once the script wraps the base image. Both are
   position:absolute with no z-index, so without this, the lens
   overlay, being later in source order at the widest zoomed state,
   could end up painting over the icon instead of under it. This
   guarantees the enlarge button stays clickable and on top no
   matter how large the lens gets. */
.zoom-icon {
  z-index: 10;
}

/* z-index:1 matters here: .lens-overlay's own transform establishes
   a stacking context, and inside it, a positioned element with no
   z-index (the ::before plate) would otherwise paint ABOVE a
   non-positioned block-level img regardless of source order, that's
   just how CSS stacking works. Without this, the white plate below
   would sit on top of and hide the toggle entirely. */
.lens-overlay img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* A white backing plate behind the toggle, not just a stroke around
   it. The screenshot's own background near the toggle is already
   near-white, so a thin line alone had almost no contrast to read
   against. Lifting the toggle onto its own white card, with a real
   elevation shadow, separates it from the interface behind it the
   way the site's own cards already do, rather than trying to draw
   attention with an outline that has nothing to contrast against.
   Rounded to match the toggle's own shape rather than a circle: see
   the earlier note, the toggle sits too close to the image's top
   edge for a circle to work without overflowing or clipping. */
.lens-overlay::before {
  content: "";
  position: absolute;
  inset: -8px; /* fixed, one step on the site's 8px spacing scale */
  border-radius: 8px;
  background: #fff;
  /* Zero offset on purpose, any y-offset (even a "resting on the
     surface" 3px) reads as more shadow below than above, which is
     exactly the top/bottom imbalance that was flagged. A pure
     ambient blur with no direction keeps it even. */
  box-shadow: 0 0 16px rgba(15, 15, 10, 0.22);
  opacity: var(--lens-p, 0);
  pointer-events: none;
  z-index: 0;
}

/* Experimental: an attempt at the actual brighter-than-white HDR
   luminance boost (not just a wider-gamut colour, an extended-range
   value), gated to displays reporting HDR headroom. Flagging this
   honestly: this is inconsistently supported across browsers/OSes
   right now, it may render identically to the plain white plate
   above on your machine, or not apply at all. It's here so you can
   judge it on your own screen rather than me asserting it works. */
@media (dynamic-range: high) {
  .lens-overlay::before {
    background: color(rec2100-hlg 1.3 1.3 1.25);
  }
}