/* Device frame: iPhone 16/17 Pro class. One component, one variable: --device-w.
   Geometry in 1000 units = device width (71.5 mm). u = --device-w / 1000.
     outer        1000 x 2099 (ratio 2.099), outer radius 160 (0.160 of width)
     metal rim    14        bezel (black glass) 18        total bezel 32 (0.032 of width)
     screen       936 x 2035 at (32, 32), ratio 0.4600 (1206 x 2622 px panel), radius 128 (0.1368 of screen width)
     concentric   outer radius 160 = screen radius 128 + total bezel 32
     island       293 x 86, top 64.6 (see overlay.svg)
   Usage: <div class="device" style="--device-w:640px"><div class="device-screen"> ...markup or <img>... </div></div> */
.device {
  --device-w: 640px;
  --u: calc(var(--device-w) / 1000);
  position: relative;
  width: var(--device-w);
  height: calc(var(--u) * 2099);
  border-radius: calc(var(--u) * 160);
  box-shadow:
    0 calc(var(--u) * 80) calc(var(--u) * 140) color-mix(in srgb, var(--ink) 28%, transparent),
    0 calc(var(--u) * 20) calc(var(--u) * 38) color-mix(in srgb, var(--ink) 18%, transparent);
}
.device::before, .device::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; }
/* body layer is 1016 wide so side buttons can stand proud of the body by 6 units each side */
.device::before { left: calc(var(--u) * -8); top: 0; width: calc(var(--u) * 1016); height: calc(var(--u) * 2099); background-image: url("body.svg"); z-index: 0; }
.device::after { left: 0; top: 0; width: 100%; height: 100%; background-image: url("overlay.svg"); z-index: 2; }
.device-screen {
  position: absolute; z-index: 1; overflow: hidden; background: #000;
  left: calc(var(--u) * 32); top: calc(var(--u) * 32);
  width: calc(var(--u) * 936); height: calc(var(--u) * 2035);
  border-radius: calc(var(--u) * 128);
}
.device-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* The device owns the Dynamic Island; hide the reconstruction's own so there is never a double. */
.device-screen .wa .island { display: none; }
/* iOS centres the time and the status icons on the island's centre line. The device island centre is
   75.6/936 of the screen width down (32 UI units at ui 1.5 on the 599px slot); the reconstruction's
   bottom-aligned row sat about 8 units low. Centre the row on 32. */
.device-screen .wa .status { height: 64px; align-items: center; padding-bottom: 0; }