/*
 * iPod Player — iOS shell geometry (the approved layout study, verbatim:
 * Docs/ios-layout-study). Every rule below is gated on
 * html[data-platform="ios"]; the file is inert on macOS.
 *
 * The stamp arrives two ways: the iOS app injects a documentStart
 * WKUserScript (before anything parses, so there is no desktop-chrome
 * flash), and app.js honors ?platform=ios as the browser/QA path (the CSP
 * allows no inline scripts).
 *
 * The geometry in one line: the body is the full screen width, flush with
 * the phone screen's sides and bottom, and ONE radius rules everything —
 * the screen clip's 62pt (iPhone 17 Pro, MEASURED via _displayCornerRadius
 * on Aug 30 — the first pass assumed the 15/16's 55pt at 393 and the
 * phone's glass clipped ~6pt deeper than the drawn bottom arcs), which is
 * 62 / (402/272) = 41.9502 device units at the reference width. The desktop's squircle body sprites are drawn
 * for the mock's 20-unit corners and cannot be stretched into that
 * geometry (that was the "sloppy" first pass), so iOS retires them and
 * wears the regenerated pair (ios-bevel-band/-lines, from
 * Docs/ios-layout-study/gen-bevels.mjs). The acrylic face sits a uniform
 * 5 units inside the band — the desktop's 7.146 bottom inset is a 3/4-view
 * artifact of the Figma mock — so its radius is the same constant minus
 * the inset. The screen, wheel, and every
 * interaction layer keep their shipping geometry untouched.
 *
 * Every corner on this shell is CONTINUOUS-curvature at Figma's 60%
 * smoothing (Geoff, Aug 31), the profile iOS itself draws — the sprites and
 * the two masks below all come off one generator, so band, hairline, and
 * face stay concentric. Curvature ramps 0 → 1/r → 0 across a 1.6r footprint
 * instead of stepping at a tangent point. It is also safe against the
 * phone's own glass, which clips circularly: a continuous corner shares the
 * circular one's central arc and eases inboard of it everywhere else
 * (measured worst case 0.77 css px inside), so the drawn bottom corners
 * can't be amputated. Verified by .qa-corner-inside.mjs.
 */

/* The bevel pair exists in the markup on every platform; only the stamped
   document shows it. */
.iosBevelBand,
.iosBevelLines {
  display: none;
  inset: 0;
}

html[data-platform="ios"],
html[data-platform="ios"] body {
  background: #000;
}

/* A held Menu/rewind press is a control gesture, not a text selection — kill
   the iOS long-press callout and selection everywhere on the device. */
html[data-platform="ios"] body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The frame IS the device: full screen width, pinned to the bottom edge.
   The phone's own screen corners clip the body's bottom arcs; the top arcs
   are the bevel sprite's silhouette against the black page. --px keeps its
   desktop definition (a cqw fraction of the frame) and simply scales up. */
html[data-platform="ios"] .frame {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  /* app.css caps the desktop frame at 83.63vh for the windowed gutters;
     the phone body is allowed to be exactly as tall as its aspect says. */
  max-height: none;
  margin: 0;
  /* The blog article's triple drop-shadow has no floor to fall on here. */
  filter: none;
}

/* Placement (Settings → Placement). Bottom is the default rule above; Top
   and Middle re-anchor the same fixed box. Middle is an explicit computed
   top rather than a translateY(-50%): the frame's height is exactly
   (449.143 / 272) × 100vw (app.css aspect-ratio at full width), and the
   resize choreography owns inline transforms on .frame — a transform here
   would be silently clobbered by its next style flush. */
/* Top stops at the safe area, not the glass: viewport-fit=cover means top: 0
   is UNDER the dynamic island, which parked the island on the LCD's title
   bar. env(safe-area-inset-top) is the island's own clearance (59pt on the
   17 Pro), so the body starts exactly where iOS says content may. */
html[data-placement="top"][data-platform="ios"] .frame {
  top: env(safe-area-inset-top, 0px);
  bottom: auto;
}

html[data-placement="middle"][data-platform="ios"] .frame {
  top: calc(50dvh - 50vw * (449.143 / 272));
  bottom: auto;
}

/* No windowless-macOS shadow underlay on a phone (the native Shadow menu
   doesn't exist on iOS either — .deviceShadow retires with its parent). */
html[data-platform="ios"] .shadowRim {
  display: none;
}

/* The desktop body chrome retires wholesale: the squircle stroke pair, the
   3/4-view under-curve sprites (bodySide/bodySideCap — straight-on there is
   no under-curve to see), and the photograph blend layers + shell-glare
   mask, all of whose edges are registered to the 20-unit squircle
   silhouette. */
html[data-platform="ios"] .bodyStroke,
html[data-platform="ios"] .bodyStrokeInner,
html[data-platform="ios"] .bodySide,
html[data-platform="ios"] .bodySideCap,
html[data-platform="ios"] .bodyOverlay,
html[data-platform="ios"] .bodyMultiply,
html[data-platform="ios"] .bodyMask {
  display: none;
}

html[data-platform="ios"] .iosBevelBand,
html[data-platform="ios"] .iosBevelLines {
  display: block;
}

/* Clip the body art to its own 62pt silhouette so bodyFill's outward drop
   shadow can't paint past the bevel band into the black page. The
   .interactive sibling is untouched — controls never get shaved.
   The corner is CONTINUOUS-curvature, not a plain arc (Geoff, Aug 31): the
   phone's own display corners are continuous, so an arc at the same radius
   was always the approximation. No browser has a continuous border-radius,
   and clip-path: path() takes absolute px — so the silhouette arrives as a
   mask whose SVG is drawn in the device's own 272-unit space with
   preserveAspectRatio='none', which scales with --px for free (the same
   trick bodyFill's gradient sprites already use). border-radius and
   overflow stay as the pre-mask fallback; the mask is strictly inboard of
   them, so nothing shows through the gap. The path comes from
   Docs/ios-layout-study/gen-corner-path.mjs — the generator that also
   draws the ios-bevel sprites, so band and clip stay concentric. */
html[data-platform="ios"] .device {
  border-radius: calc(41.9502 * var(--px));
  overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 449.143' preserveAspectRatio='none'><path fill='%23000' d='M204.8797 0C228.374 0 240.1212 0 249.0948 4.5723A41.9502 41.9502 0 0 1 267.4277 22.9052C272 31.8788 272 43.626 272 67.1203L272 382.0227C272 405.517 272 417.2642 267.4277 426.2378A41.9502 41.9502 0 0 1 249.0948 444.5707C240.1212 449.143 228.374 449.143 204.8797 449.143L67.1203 449.143C43.626 449.143 31.8788 449.143 22.9052 444.5707A41.9502 41.9502 0 0 1 4.5723 426.2378C0 417.2642 0 405.517 0 382.0227L0 67.1203C0 43.626 0 31.8788 4.5723 22.9052A41.9502 41.9502 0 0 1 22.9052 4.5723C31.8788 0 43.626 0 67.1203 0Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 449.143' preserveAspectRatio='none'><path fill='%23000' d='M204.8797 0C228.374 0 240.1212 0 249.0948 4.5723A41.9502 41.9502 0 0 1 267.4277 22.9052C272 31.8788 272 43.626 272 67.1203L272 382.0227C272 405.517 272 417.2642 267.4277 426.2378A41.9502 41.9502 0 0 1 249.0948 444.5707C240.1212 449.143 228.374 449.143 204.8797 449.143L67.1203 449.143C43.626 449.143 31.8788 449.143 22.9052 444.5707A41.9502 41.9502 0 0 1 4.5723 426.2378C0 417.2642 0 405.517 0 382.0227L0 67.1203C0 43.626 0 31.8788 4.5723 22.9052A41.9502 41.9502 0 0 1 22.9052 4.5723C31.8788 0 43.626 0 67.1203 0Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The face: uniform 5-unit inset on all four edges (desktop keeps its
   1.113% top / 97.296% height pair, whose extra 3 bottom units read as a
   thicker bottom bevel at phone scale). Radius is concentric by
   construction: 38.0662 − 5 units. Left/width already equal 5/272 and
   262/272 in the desktop rule and stay inherited. */
/* The face carries the same continuous corner, one radius inboard, and it is
   not optional: the face paints AFTER both bevel sprites (DOM order), so a
   circular corner here would lap over the band's continuous inner edge and
   lift the hairline off it — up to ~0.7px at the reference width, which is
   exactly the kind of drift that reads as a wrong radius. The two paths are
   concentric by construction: radius(inset) = 41.9502 − 5.
   Known tradeoff: a mask clips the element's OUTER box-shadow, so the face
   loses its 1/2/15% contact shadow into the band. The band sprite's own
   inner-shadow filter carries the recess. */
html[data-platform="ios"] .bodyFill {
  top: 1.1132%; /* 5 / 449.143 */
  height: 97.7735%; /* 439.143 / 449.143 */
  border-radius: calc(36.9502 * var(--px));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 262 439.143' preserveAspectRatio='none'><path fill='%23000' d='M202.8797 0C223.5737 0 233.9208 0 241.8248 4.0273A36.9502 36.9502 0 0 1 257.9727 20.1752C262 28.0792 262 38.4263 262 59.1203L262 380.0227C262 400.7167 262 411.0638 257.9727 418.9678A36.9502 36.9502 0 0 1 241.8248 435.1157C233.9208 439.143 223.5737 439.143 202.8797 439.143L59.1203 439.143C38.4263 439.143 28.0792 439.143 20.1752 435.1157A36.9502 36.9502 0 0 1 4.0273 418.9678C0 411.0638 0 400.7167 0 380.0227L0 59.1203C0 38.4263 0 28.0792 4.0273 20.1752A36.9502 36.9502 0 0 1 20.1752 4.0273C28.0792 0 38.4263 0 59.1203 0Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 262 439.143' preserveAspectRatio='none'><path fill='%23000' d='M202.8797 0C223.5737 0 233.9208 0 241.8248 4.0273A36.9502 36.9502 0 0 1 257.9727 20.1752C262 28.0792 262 38.4263 262 59.1203L262 380.0227C262 400.7167 262 411.0638 257.9727 418.9678A36.9502 36.9502 0 0 1 241.8248 435.1157C233.9208 439.143 223.5737 439.143 202.8797 439.143L59.1203 439.143C38.4263 439.143 28.0792 439.143 20.1752 435.1157A36.9502 36.9502 0 0 1 4.0273 418.9678C0 411.0638 0 400.7167 0 380.0227L0 59.1203C0 38.4263 0 28.0792 4.0273 20.1752A36.9502 36.9502 0 0 1 20.1752 4.0273C28.0792 0 38.4263 0 59.1203 0Z'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The shell glare. The desktop's bodyMask sprite is the same wedge masked
   to the squircle, so it retired above; this is the study's replacement,
   riding the same --glare scalar the native Glare control writes. */
html[data-platform="ios"] .bodyFill::after {
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: inherit;
  background: linear-gradient(
    172deg,
    rgb(255 255 255 / 42%) 4%,
    rgb(255 255 255 / 0%) 46%
  );
  opacity: var(--glare, 1);
  pointer-events: none;
}
