/* Phone curves scale with the device itself, never with the viewport.
 * Percentage radii use each box's own dimensions. The inner curve subtracts
 * the rim, accounting for the smaller image box: r% - (1 - 2r) * rim.
 * Keep the matching admin rules covered by check-device-frame-consistency.mjs.
 * Wallet cards, tablets, poster artwork and cropped modal previews are not phones.
 * --rl-image-ratio comes from the image's width/height attributes. Bare `auto`
 * overrides that HTML ratio and collapses lazy images before they load, moving
 * anchor destinations. `auto <ratio>` reserves space but keeps the natural ratio.
 */
html body :is(
  .device,
  .home-counter-proof__device,
  .how-day__phone-frame,
  .how-story__phone-shell,
  .screenshot-frame--phone,
  .device-preview-shell:not(:where(.proof-frame--modal .device-preview-shell)),
  .paid-cafe-phone-shell,
  .cs-phone,
  .app-video-preview--phone .app-video-preview__media
) {
  --rl-frame-bezel: 3px;
  --rl-frame-edge: 1px;
  --rl-frame-rim: calc(var(--rl-frame-bezel) + var(--rl-frame-edge));
  box-sizing: border-box;
  /* Geometry is invariant, including on pages with older inline media rules. */
  padding: var(--rl-frame-bezel) !important;
  border-width: var(--rl-frame-edge) !important;
  border-style: solid !important;
  border-radius: 13% / 6% !important;
}

html body :is(
  .device,
  .home-counter-proof__device,
  .how-day__phone-frame,
  .how-story__phone-shell,
  .screenshot-frame--phone,
  .device-preview-shell:not(:where(.proof-frame--modal .device-preview-shell)),
  .paid-cafe-phone-shell,
  .cs-phone,
  .app-video-preview--phone .app-video-preview__media
) > :is(img, video, .app-video-preview__viewport) {
  display: block;
  width: 100%;
  border: 0 !important;
  border-radius: calc(13% - var(--rl-frame-rim) * 0.74) / calc(6% - var(--rl-frame-rim) * 0.88) !important;
}

html body :is(.device, .home-counter-proof__device, .how-day__phone-frame, .how-story__phone-shell,
  .screenshot-frame--phone, .device-preview-shell:not(:where(.proof-frame--modal .device-preview-shell)),
  .paid-cafe-phone-shell, .cs-phone) > :is(img, video) {
  height: auto;
  aspect-ratio: auto var(--rl-image-ratio);
  object-fit: contain;
}

html body :is(.how-story__phone-shell, .paid-cafe-insight-media > .paid-cafe-phone-shell, .cs-phone) {
  --rl-frame-bezel: 1.5px;
}

html body .how-story__visual .how-story__phone-shell {
  width: min(100%, calc((clamp(182px, 17vw, 196px) - 5px) * 1206 / 2622 + 5px));
  height: auto;
  aspect-ratio: auto;
}

/* The homepage's decorative highlight follows the shell, not old vw tokens. */
html body .device::after {
  inset: 0;
  border-radius: inherit;
}