/*
 * device.css: one modern Android phone, seen from the front, around a real 1080 x 2400 capture.
 *
 * It is the phone tools/store_screenshots.py draws for the Play Store (its front()), so the website
 * and the store show the same phone. Checked pixel by pixel against that script at full size: the
 * same within 2 levels everywhere but the anti-aliased edges, which are smoother here. Its numbers,
 * in capture pixels (the screen is 1080 wide):
 *   screen corners 104, black glass 30 all round, metal rim 7 (light at the top, darker at the
 *   bottom), outer corners 141; the punch-hole camera centred 50 below the top of the screen (ring
 *   20.5, hole 15.5, a small blue-grey glint); a faint sheen across the whole phone from the upper
 *   left; the volume and power keys just proud of the right edge; and a soft shadow that falls away
 *   from the light, down and a little to the right.
 * Every length is a number of capture pixels times --u, so the phone scales as one picture and
 * stays crisp at any size.
 *
 * Markup. The screen is an img, a picture or a video and fills the screen exactly, corners and all:
 *   <figure class="device" style="--device-w: 320px">
 *     <img src="media/screens/home-dark-plain.webp" width="1080" height="2400" alt="...">
 *   </figure>
 *   <figure class="device"><picture><source type="image/avif" srcset="..."><img ...></picture></figure>
 *   <figure class="device"><video muted loop playsinline poster="..."></video></figure>
 * A screen that is not captured yet gets a labelled placeholder, never a drawn screen
 * (media/media.js makes it from the screen's name):
 *   <figure class="device"><div class="device-placeholder" role="img" aria-label="Screen to come: Weather page">
 *     <span>Screen to come</span><b>Weather page</b></div></figure>
 * Several screens in one phone stack in the same place, so they can crossfade.
 *
 * Size: --device-w is the phone's outer width. Any length works (px, rem, vw, svh, cqi, min(),
 * clamp()), but not a percentage. It can be set on the phone or on any parent. Default:
 * min(340px, 74vw). The height follows (outer 1154 x 2474 capture pixels).
 *
 * Shadow: tuned for light pages. On a dark page add .device--on-dark; for none, .device--flat.
 * --device-shadow-rgb tints the shadow (three numbers, default 16 22 38, a deep blue-black).
 */

.device {
  --u: calc(var(--device-w, min(340px, 74vw)) / 1154);
  --device-shadow-rgb: 16 22 38;
  --device-shadow:
    calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * 10) rgb(var(--device-shadow-rgb) / 0.16),
    calc(var(--u) * 10) calc(var(--u) * 28) calc(var(--u) * 54) calc(var(--u) * -10) rgb(var(--device-shadow-rgb) / 0.18),
    calc(var(--u) * 34) calc(var(--u) * 84) calc(var(--u) * 150) calc(var(--u) * -34) rgb(var(--device-shadow-rgb) / 0.22),
    calc(var(--u) * 80) calc(var(--u) * 190) calc(var(--u) * 300) calc(var(--u) * -90) rgb(var(--device-shadow-rgb) / 0.18);

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: block;
  flex: none;
  inline-size: var(--device-w, min(340px, 74vw));
  aspect-ratio: 1154 / 2474;
  margin: 0;
  /* The rim is the padding; the black glass is the content box inside it, whose corners follow
     the rim's (141 - 7 = 134). Padding, unlike a border, is never rounded to whole pixels, so the
     screen keeps its exact 1080 by 2400 shape at every size. */
  padding: calc(var(--u) * 7);
  border: 0;
  border-radius: calc(var(--u) * 141);
  background:
    linear-gradient(#070708, #070708) content-box,
    linear-gradient(180deg, rgb(150 153 160), rgb(70 72 78)) border-box;
  box-shadow:
    /* the phone's side, just past the rim */
    0 0 0 calc(var(--u) * 1.6) rgb(30 31 35),
    var(--device-shadow);
}

/* The screen: whatever capture is inside fills the 1080 x 2400 area exactly (rim 7 and glass 30
   in from the phone's edge). */
.device > :is(img, video, canvas, .device-placeholder),
.device > picture > img {
  position: absolute;
  inset: calc(var(--u) * 37);
  box-sizing: border-box;
  display: block;
  inline-size: calc(100% - var(--u) * 74);
  block-size: calc(100% - var(--u) * 74);
  max-inline-size: none;
  margin: 0;
  border-radius: calc(var(--u) * 104);
  object-fit: cover;
  background: #000;
}
.device > picture { display: contents; }

/* Camera and sheen, above the screen, over the whole phone as the store draws them: the sheen from
   the upper left on top, then the glint, the hole and its ring. The camera's centre is 87.5 capture
   pixels below the phone's top edge (rim 7, glass 30, then 50 into the screen, plus half a pixel
   where the store's drawing puts it). */
.device::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: calc(var(--u) * 141);
  pointer-events: none;
  background:
    linear-gradient(105.91deg,
      rgb(255 255 255 / 0) 8.28%, rgb(255 255 255 / 0.001) 11.72%, rgb(255 255 255 / 0.0039) 15.17%,
      rgb(255 255 255 / 0.0088) 18.62%, rgb(255 255 255 / 0.0157) 22.07%, rgb(255 255 255 / 0.0245) 25.52%,
      rgb(255 255 255 / 0.0353) 28.97%, rgb(255 255 255 / 0.0245) 32.41%, rgb(255 255 255 / 0.0157) 35.86%,
      rgb(255 255 255 / 0.0088) 39.31%, rgb(255 255 255 / 0.0039) 42.76%, rgb(255 255 255 / 0.001) 46.21%,
      rgb(255 255 255 / 0) 49.66%),
    radial-gradient(circle calc(var(--u) * 3.5) at calc(50% - var(--u) * 3.5) calc(var(--u) * 82.5),
      rgb(46 52 70) calc(var(--u) * 3.5 - 0.6px), rgb(46 52 70 / 0) calc(var(--u) * 3.5)),
    radial-gradient(circle calc(var(--u) * 15.5) at calc(50% + var(--u) * 0.5) calc(var(--u) * 87.5),
      rgb(2 2 3) calc(var(--u) * 15.5 - 0.7px), rgb(2 2 3 / 0) calc(var(--u) * 15.5)),
    radial-gradient(circle calc(var(--u) * 20.5) at calc(50% + var(--u) * 0.5) calc(var(--u) * 87.5),
      rgb(18 19 22) calc(var(--u) * 20.5 - 0.7px), rgb(18 19 22 / 0) calc(var(--u) * 20.5));
}

/* Volume and power keys on the right edge, as far down as on the store phone (20 to 31 % and
   36 to 43 % of its height), standing just proud of the rim. */
.device::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20%;
  height: 23%;
  right: calc(var(--u) * -4.5);
  width: calc(var(--u) * 4.5);
  border-radius: 0 calc(var(--u) * 3) calc(var(--u) * 3) 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(52 54 60) 0 47.8%, transparent 47.8% 69.6%, rgb(52 54 60) 69.6% 100%);
}

.device--on-dark {
  --device-shadow:
    calc(var(--u) * 16) calc(var(--u) * 40) calc(var(--u) * 120) calc(var(--u) * -20) rgb(0 0 0 / 0.55),
    0 0 calc(var(--u) * 2) calc(var(--u) * 1) rgb(255 255 255 / 0.06);
}
.device--flat { --device-shadow: 0 0 0 0 transparent; }

/* A screen that is not captured yet: clearly a placeholder, with the screen's name. */
.device > .device-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 64);
  text-align: center;
  color: #A8A49C;
  background:
    linear-gradient(#0E0E0D, #0E0E0D) padding-box,
    repeating-linear-gradient(135deg, #2C2B28 0 calc(var(--u) * 18), transparent calc(var(--u) * 18) calc(var(--u) * 36)) border-box;
  border: calc(var(--u) * 10) solid transparent;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: max(11px, calc(var(--u) * 40));
  line-height: 1.3;
  letter-spacing: 0;
}
.device > .device-placeholder > span {
  font-size: max(8px, calc(var(--u) * 30));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-wrap: balance;
}
.device > .device-placeholder > b {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: max(13px, calc(var(--u) * 64));
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ECE9E2;
  text-wrap: balance;
}