/* Sonar Ruler site, round 1 kit: device.css
 *
 * Flat drawn devices to hold a screenshot or a clip, the same phone and iPad the App Store art draws round the app
 * (app/appstore/storeshots.py: `phone()` and `pad()`): a rounded metal band, a thin black bezel, the screen with its
 * own corner radius, a Dynamic Island on the iPhone, side buttons, and depth from lighting only: a faint shade
 * across the band (lit from the left) and a soft contact shadow. No outlines.
 *
 *   <div class="sr-device sr-iphone">                    portrait iPhone
 *     <div class="sr-device__body">
 *       <div class="sr-device__screen"><img src="…" alt="…"></div>
 *     </div>
 *   </div>
 *
 * Kinds: `sr-iphone`, `sr-iphone sr-landscape`, `sr-ipad`, `sr-ipad sr-landscape`. Landscape matches the app's
 * captures (`*-steady-r`, the videos): an iPhone's speaker edge on the right (its island on the left), an iPad's top
 * edge on the right. `sr-flip` mirrors the frame (island and buttons) for a capture taken the other way round; it
 * never mirrors the screen.
 *
 * The device fills its container's width (set `width` or `max-width` on it to size it) and keeps the real
 * proportions. Every part is measured in the store art's own units, screen pixels of a 1206 px iPhone screen or a
 * 2064 px iPad screen (`--u`), so the frame scales as one piece. That relies on container query units (Chrome 105,
 * Safari 16): the device is the container, so it needs a definite width (don't let it shrink to its content).
 *
 * Colours: the band (--sr-device-ring), the bezel (--sr-device-glass) and the shadow's colour
 * (--sr-device-shadow-rgb, space-separated) can be set on any ancestor. The default band is the champagne the store
 * art uses on amber; `sr-device--graphite`, `--slate` and `--warm` are its bands for the darker pages. */

.sr-device {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: var(--sr-device-aspect);
  /* iPhone 17 Pro (the simulator the screenshots come from), portrait: a 1206 x 2622 screen, 19 px of bezel and
   * 8 px of band all round, so 1260 x 2676 outside. */
  --sr-device-aspect: 1260 / 2676;
  --u: calc(100cqw / 1260);
}

.sr-device.sr-landscape {
  --sr-device-aspect: 2676 / 1260;
  --u: calc(100cqw / 2676);
}

.sr-device.sr-ipad {
  /* iPad Pro 13-inch (M5): a 2064 x 2752 screen, 84 px of black bezel and an 8 px band (Xcode's device chrome). */
  --sr-device-aspect: 2248 / 2936;
  --u: calc(100cqw / 2248);
}

.sr-device.sr-ipad.sr-landscape {
  --sr-device-aspect: 2936 / 2248;
  --u: calc(100cqw / 2936);
}

/* The band: the device's outline is this fill, never a stroke. The shade runs across it from a little lighter on
 * the left to a little darker on the right, so the metal reads as lit from the left; on a 1-2 px band at small sizes
 * it all but disappears, which is the point. */
.sr-device__body {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--sr-r-out) * var(--u));
  background:
    linear-gradient(90deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 22%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.16)),
    var(--sr-device-ring, #E6D3AE);
  /* A contact shadow close under the device, and a wider, fainter one for the light it blocks: both straight down,
   * as the store art's, in the page's own warm brown on amber (never grey on orange). */
  box-shadow:
    0 calc(5 * var(--u)) calc(12 * var(--u)) rgb(var(--sr-device-shadow-rgb, 107 58 10) / 0.2),
    0 calc(20 * var(--u)) calc(56 * var(--u)) rgb(var(--sr-device-shadow-rgb, 107 58 10) / var(--sr-device-shadow-alpha, 0.3));
  --sr-r-out: 213;          /* screen corner 186 (62 pt) + bezel 19 + band 8 */
  --sr-r-glass: 205;
  --sr-band: 8;
  --sr-bezel: 19;
}

.sr-ipad .sr-device__body {
  --sr-r-out: 152;          /* screen corner 60 (30 pt) + bezel 84 + band 8 */
  --sr-r-glass: 144;
  --sr-bezel: 84;
}

.sr-device__screen {
  position: absolute;
  inset: calc(var(--sr-band) * var(--u));
  border: calc(var(--sr-bezel) * var(--u)) solid var(--sr-device-glass, #0C0A09);
  border-radius: calc(var(--sr-r-glass) * var(--u));
  overflow: hidden;           /* clips to the inner curve: the screen's own corner radius */
  background: #000;
  isolation: isolate;
}

.sr-device__screen > img,
.sr-device__screen > video,
.sr-device__screen > canvas,
.sr-device__screen > picture,
.sr-device__screen > svg,
.sr-device__screen > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.sr-device__screen > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Dynamic Island, drawn over the screen: the simulator leaves it out of some captures and bakes it into others,
 * and drawn here at its measured place (125 x 36.7 pt, 14 pt from the top) it covers a baked one exactly. */
.sr-iphone .sr-device__screen::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(42 * var(--u));
  width: calc(376 * var(--u));
  height: calc(110 * var(--u));
  translate: -50% 0;
  border-radius: calc(55 * var(--u));
  background: #000;
  pointer-events: none;
}

.sr-iphone.sr-landscape .sr-device__screen::after {
  left: calc(42 * var(--u));
  top: 50%;
  width: calc(110 * var(--u));
  height: calc(376 * var(--u));
  translate: 0 -50%;
}

.sr-iphone.sr-landscape.sr-flip .sr-device__screen::after {
  left: auto;
  right: calc(42 * var(--u));
}

/* Side buttons, in the band's colour, standing 11.6 px proud of it (store art: 4.2 pt thick). Each strip is one
 * gradient painting that side's buttons at their places down the frame, measured from the top of a 2676 px phone:
 * action 450-546, volume 654-810 and 864-1020 on the left; the side button 708-978 and Camera Control 1560-1716 on the
 * right. */
.sr-iphone .sr-device__body::before,
.sr-iphone .sr-device__body::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(12.6 * var(--u));
  pointer-events: none;
  --b: var(--sr-device-ring, #E6D3AE);
}

.sr-iphone .sr-device__body::before {
  left: calc(-11.6 * var(--u));
  background: linear-gradient(180deg,
    transparent calc(450 * var(--u)), var(--b) 0 calc(546 * var(--u)),
    transparent 0 calc(654 * var(--u)), var(--b) 0 calc(810 * var(--u)),
    transparent 0 calc(864 * var(--u)), var(--b) 0 calc(1020 * var(--u)),
    transparent 0);
}

.sr-iphone .sr-device__body::after {
  right: calc(-11.6 * var(--u));
  background: linear-gradient(180deg,
    transparent calc(708 * var(--u)), var(--b) 0 calc(978 * var(--u)),
    transparent 0 calc(1560 * var(--u)), var(--b) 0 calc(1716 * var(--u)),
    transparent 0);
}

/* On its side with the speaker edge right, the phone has turned a quarter left: the left side's buttons are along
 * the bottom and the right side's along the top, both still measured from the island's end (now the left). */
.sr-iphone.sr-landscape .sr-device__body::before,
.sr-iphone.sr-landscape .sr-device__body::after {
  top: auto;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: calc(12.6 * var(--u));
}

.sr-iphone.sr-landscape .sr-device__body::before {
  bottom: calc(-11.6 * var(--u));
  background: linear-gradient(var(--sr-dir, 90deg),
    transparent calc(450 * var(--u)), var(--b) 0 calc(546 * var(--u)),
    transparent 0 calc(654 * var(--u)), var(--b) 0 calc(810 * var(--u)),
    transparent 0 calc(864 * var(--u)), var(--b) 0 calc(1020 * var(--u)),
    transparent 0);
}

.sr-iphone.sr-landscape .sr-device__body::after {
  top: calc(-11.6 * var(--u));
  background: linear-gradient(var(--sr-dir, 90deg),
    transparent calc(708 * var(--u)), var(--b) 0 calc(978 * var(--u)),
    transparent 0 calc(1560 * var(--u)), var(--b) 0 calc(1716 * var(--u)),
    transparent 0);
}

/* Flipped, everything is measured from the right instead. */
.sr-landscape.sr-flip { --sr-dir: 270deg; }

/* The iPad's buttons (Xcode's chrome, 2 px a point): the top button on the top edge 148-211 px in from the right,
 * the volume buttons down the right edge 200-252 and 326-378 px from the top; 6 px thick, 5 proud. */
.sr-ipad .sr-device__body::before,
.sr-ipad .sr-device__body::after {
  content: "";
  position: absolute;
  pointer-events: none;
  --b: var(--sr-device-ring, #E6D3AE);
}

.sr-ipad .sr-device__body::before {
  top: calc(-5 * var(--u));
  right: calc(148 * var(--u));
  width: calc(63 * var(--u));
  height: calc(6 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--b);
}

.sr-ipad .sr-device__body::after {
  right: calc(-5 * var(--u));
  top: 0;
  bottom: 0;
  width: calc(6 * var(--u));
  background: linear-gradient(180deg,
    transparent calc(200 * var(--u)), var(--b) 0 calc(252 * var(--u)),
    transparent 0 calc(326 * var(--u)), var(--b) 0 calc(378 * var(--u)),
    transparent 0);
}

/* On its side with the top edge right, the iPad has turned a quarter right: the top button is on the right edge,
 * near the bottom, and the volume buttons along the bottom, measured from the right. */
.sr-ipad.sr-landscape .sr-device__body::before {
  top: auto;
  right: calc(-5 * var(--u));
  bottom: calc(148 * var(--u));
  width: calc(6 * var(--u));
  height: calc(63 * var(--u));
}

.sr-ipad.sr-landscape .sr-device__body::after {
  top: auto;
  right: 0;
  left: 0;
  bottom: calc(-5 * var(--u));
  width: auto;
  height: calc(6 * var(--u));
  background: linear-gradient(270deg,
    transparent calc(200 * var(--u)), var(--b) 0 calc(252 * var(--u)),
    transparent 0 calc(326 * var(--u)), var(--b) 0 calc(378 * var(--u)),
    transparent 0);
}

.sr-ipad.sr-landscape.sr-flip .sr-device__body::before { right: auto; left: calc(-5 * var(--u)); }
.sr-ipad.sr-landscape.sr-flip .sr-device__body::after {
  background: linear-gradient(90deg,
    transparent calc(200 * var(--u)), var(--b) 0 calc(252 * var(--u)),
    transparent 0 calc(326 * var(--u)), var(--b) 0 calc(378 * var(--u)),
    transparent 0);
}

/* MARK: Bands for darker pages (the store art's palettes). On graphite the shadow would be invisible, so it's left
 * faint; on slate and warm-dark it is black. */

.sr-device--graphite {
  --sr-device-ring: #4A4A52;
  --sr-device-glass: #050506;
  --sr-device-shadow-rgb: 0 0 0;
  --sr-device-shadow-alpha: 0.35;
}

.sr-device--slate {
  --sr-device-ring: #62626C;
  --sr-device-glass: #050506;
  --sr-device-shadow-rgb: 0 0 0;
}

.sr-device--warm {
  --sr-device-ring: #6E665C;
  --sr-device-glass: #060504;
  --sr-device-shadow-rgb: 0 0 0;
}

/* On cream the champagne band all but vanishes: a step deeper keeps the phone's edge without an outline. */
.sr-device--cream {
  --sr-device-ring: #D9C49B;
  --sr-device-shadow-rgb: 107 58 10;
  --sr-device-shadow-alpha: 0.22;
}

.sr-device--flat .sr-device__body { box-shadow: none; }