/* VENDORED from /system/components/device-frame.css @ 6eb7015 (2026-10-12, v3: no fake Dynamic Island). Re-copy to update; never hand-edit. */
/* ds-component device-frame v3 · source system/components/device-frame.css · vendor this file; change the source, then re-vendor */
/* THE iPHONE FRAME — the device a prototype or a showcase sits in. One source (2026-09-28) for what the
   playground shell (rewards/ is the reference), the hub's split preview and the website each drew their
   own way: bezel and hardware buttons (no Dynamic Island since v3), sized by ONE variable.
   Geometry is the iPhone 17 Pro in points: the screen is 402 x 874, the island 125 x 37 sitting 11 down,
   the screen corner 55. Everything scales from --dvf-h (the SCREEN height); width follows at 402:874.
   USE:
     <div class="dvf" style="--dvf-h: 780px">
       <div class="dvf-screen"> …the prototype, an <iframe>, an image or a canvas at 402:874… </div>
     </div>
   .dvf.dark  = the frame on a dark page (the rim goes lighter so the edge still reads)
   .dvf.wire  = a WIREFRAME: lines only, no black body (Rashid, 2026-09-28: "a wireframe build, with
                lines, gray lines, very light gray"); --dvf-wire sets the line colour, --dvf-wire-w its weight
   .dvf.flat  = no drop shadow (inside a card, a print capture)
   The screen's ground is --ds-surface-page-secondary so an empty frame reads as a page in both themes.
   v3 (2026-10-12, Rashid: "we shouldn't have one. The dynamic island implementation is native. We only need to account
   for its space ... without adding fake dynamic islands. Remove all instances"): THE FRAME DRAWS NO ISLAND. .dvf-island
   is kept as a hidden no-op so markup that still carries it renders nothing; drop it from your markup when you next touch it.
   A prototype reserves the island's space the way iOS does - the top safe area (62 pt on this device, env(safe-area-
   inset-top) on a real one) - and never paints a stand-in for it. */
.dvf { --dvf-h: 780px; --dvf-w: calc(var(--dvf-h) * 402 / 874); --dvf-bezel: 12px;
  position: relative; box-sizing: content-box; width: var(--dvf-w); height: var(--dvf-h); padding: var(--dvf-bezel);
  border-radius: calc(var(--dvf-w) * 0.16); background: #0b0e12;
  box-shadow: inset 0 0 0 2px #3a4250, inset 0 0 0 5px #0b0e12, 0 40px 80px -30px rgba(11,14,18,.45); }
.dvf.dark { box-shadow: inset 0 0 0 2px #59627a, inset 0 0 0 5px #0b0e12, 0 40px 80px -30px rgba(0,0,0,.7); }
.dvf.flat { box-shadow: inset 0 0 0 2px #3a4250, inset 0 0 0 5px #0b0e12; }
/* hardware: volume up/down on the left, side button on the right; proportions of the screen height */
.dvf::before, .dvf::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #2a303a; }
.dvf::before { left: -3px; top: 22%; height: 9%; box-shadow: 0 calc(var(--dvf-h) * .12) 0 #2a303a; }
.dvf::after { right: -3px; top: 30%; height: 13%; }
.dvf-screen { position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--dvf-w) * 55 / 402); background: var(--ds-surface-page-secondary, #f2f2f2); }
.dvf-screen > iframe, .dvf-screen > canvas, .dvf-screen > img, .dvf-screen > video { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.dvf-island { display: none !important; }   /* v3: no fake Dynamic Island - the real one is native (Rashid) */
/* a prototype rendered at its own 402x874 CSS pixels: scale it to the frame with transform, never resize it */
.dvf-scale { position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform-origin: 0 0;
  transform: scale(calc(var(--dvf-w) / 402px)); }
/* v2 · WIRE. Every part is the same outline: body, buttons, screen edge. 1.5px in the hairline
   token (very light grey in light, the slate hairline in dark); on a dark page the token already lifts. */
.dvf.wire { --dvf-wire: var(--ds-border-primary-default-subtle, #e5e5e5); --dvf-wire-w: 1.5px;
  background: transparent; box-shadow: inset 0 0 0 var(--dvf-wire-w) var(--dvf-wire); }
.dvf.wire::before, .dvf.wire::after { background: transparent; width: 4px; box-shadow: inset 0 0 0 var(--dvf-wire-w) var(--dvf-wire); border-radius: 2px; }
.dvf.wire::before { left: -4px; }   /* the volume-down ghost is dropped: an outline cannot be shadowed */
.dvf.wire::after { right: -4px; }
.dvf.wire .dvf-screen { background: var(--ds-surface-page, #fff); box-shadow: 0 0 0 var(--dvf-wire-w) var(--dvf-wire); }