/* Load after the case and embed styles. Product windows must exist before the
   optional sizing controller runs, and remain visible if that script fails.

   All captured artboards are 1440px wide. HyperShadow's settings captures use
   the same 900px viewport as the initial provider list, even when their saved
   source documents are taller. The controller keeps that identical contract.
   New native dimensions should be added here alongside their data attributes. */
[data-exact-capture] {
  --exact-fallback-height: 900;
  aspect-ratio: 1440 / var(--exact-fallback-height);
}

[data-exact-capture][data-exact-height="800"] { --exact-fallback-height: 800; }
[data-exact-capture][data-exact-height="967"] { --exact-fallback-height: 967; }
[data-exact-capture][data-exact-height="1060"] { --exact-fallback-height: 1060; }

[data-exact-capture] > iframe {
  width: var(--exact-width, 1440px);
  height: var(--exact-height, calc(var(--exact-fallback-height) * 1px));
}

/* Native-size HTML, scaled by the window's own width rather than the viewport.
   JS-provided dimensions and scale take precedence; normal rendering is not
   changed. The ratio reserves space while the absolute iframe is still loading. */
@supports (container-type: inline-size) and (transform: scale(calc(100cqw / 1440px))) {
  [data-exact-capture] { container-type: inline-size; }
  [data-exact-capture] > iframe {
    transform: scale(var(--exact-scale, calc(100cqw / 1440px)));
  }
}

/* Older browsers get a bounded, scrollable native canvas instead of a 1px
   window. Once the existing controller supplies its scale, this no-JS-only
   fallback stops applying and the established case styles take over. */
@supports not ((container-type: inline-size) and (transform: scale(calc(100cqw / 1440px)))) {
  [data-exact-capture]:not([style*="--exact-scale"]) {
    height: min(72vw, 740px);
    min-height: 280px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  [data-exact-capture]:not([style*="--exact-scale"]) > iframe {
    transform: none;
  }
}