/* site/css/phone.css
 *
 * THE DEVICES, burropack, 2026-10-30. Two current phones drawn in CSS, no
 * images, so every screen inside is live markup that can be redesigned in a
 * minute. Tyler: "Use the exact brand-new phones that are out. We're going to
 * be Apple- and Android-friendly."
 *
 *   .dev--ios      an iPhone Pro: thin titanium band, the Dynamic Island,
 *                  action and volume buttons left, side button right
 *   .dev--android  a Pixel Pro style Android: thin flat band, a centred
 *                  hole punch camera, slightly squarer corners, power and
 *                  volume on the right, a short gesture bar
 *
 *   <div class="dev dev--ios"><div class="dev__screen"> ...ui... </div></div>
 *
 * The class is .dev and never .phone: the old burropay sheet in bp.css owns
 * .phone__screen with fixed pixel rules, and they pulled the island left
 * (Tyler, 30 October: "the camera black pill and the bottom line" off centre).
 * Size a device with --pw, everything inside scales from it through --u.
 * Every centred piece uses left 0, right 0 and auto margins, never 50 percent
 * and a translate. The models are not named on the page, so it never dates.
 *
 * No oxford commas, no em dashes.
 */
.dev{--pw:300px;--u:calc(var(--pw) / 300);position:relative;width:var(--pw);aspect-ratio:300/650;flex:none;box-sizing:border-box}
.dev__screen{position:absolute;overflow:hidden;background:#0E1311;color:#F2EFE7;font-size:calc(13 * var(--u));line-height:1.35;isolation:isolate}

/* ── an iPhone Pro ── */
.dev--ios{border-radius:calc(50 * var(--u));
  background:linear-gradient(135deg,#8E918E 0%,#4B4F4C 12%,#2A2D2B 40%,#3A3E3B 70%,#7D817E 100%);
  box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.35),0 calc(46 * var(--u)) calc(80 * var(--u)) calc(-34 * var(--u)) rgba(5,8,6,.5),0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(5,8,6,.3)}
.dev--ios::before{content:"";position:absolute;inset:calc(3 * var(--u));border-radius:calc(47 * var(--u));background:#050605}
.dev--ios .dev__screen{inset:calc(7.5 * var(--u));border-radius:calc(43 * var(--u))}
.dev--ios .dev__cam{position:absolute;z-index:9;top:calc(10 * var(--u));left:0;right:0;margin:0 auto;width:calc(88 * var(--u));height:calc(26 * var(--u));border-radius:999px;background:#000}
.dev--ios .dev__btn{position:absolute;width:calc(2.6 * var(--u));border-radius:calc(2 * var(--u));background:linear-gradient(90deg,#3A3D3B,#8A8D8A)}
.dev--ios .dev__btn--a{left:calc(-2 * var(--u));top:calc(104 * var(--u));height:calc(24 * var(--u))}
.dev--ios .dev__btn--b{left:calc(-2 * var(--u));top:calc(148 * var(--u));height:calc(44 * var(--u))}
.dev--ios .dev__btn--c{left:calc(-2 * var(--u));top:calc(200 * var(--u));height:calc(44 * var(--u))}
.dev--ios .dev__btn--d{right:calc(-2 * var(--u));top:calc(166 * var(--u));height:calc(70 * var(--u));background:linear-gradient(270deg,#3A3D3B,#8A8D8A)}
.dev--ios .dev__home{width:36%;height:calc(4.6 * var(--u));bottom:calc(7 * var(--u))}

/* ── a Pixel Pro style Android ── */
.dev--android{border-radius:calc(40 * var(--u));
  background:linear-gradient(135deg,#C9CCC8 0%,#7C807C 14%,#3D413E 45%,#5C605D 75%,#B5B8B4 100%);
  box-shadow:inset 0 0 0 calc(1 * var(--u)) rgba(255,255,255,.4),0 calc(46 * var(--u)) calc(80 * var(--u)) calc(-34 * var(--u)) rgba(5,8,6,.5),0 calc(10 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(5,8,6,.3)}
.dev--android::before{content:"";position:absolute;inset:calc(2.6 * var(--u));border-radius:calc(37.5 * var(--u));background:#050605}
.dev--android .dev__screen{inset:calc(7 * var(--u));border-radius:calc(33 * var(--u))}
.dev--android .dev__cam{position:absolute;z-index:9;top:calc(12 * var(--u));left:0;right:0;margin:0 auto;width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;background:radial-gradient(circle at 40% 38%,#2A3240 0 18%,#000 30%);box-shadow:0 0 0 calc(1.2 * var(--u)) #111}
.dev--android .dev__btn{position:absolute;right:calc(-2 * var(--u));width:calc(2.6 * var(--u));border-radius:calc(2 * var(--u));background:linear-gradient(270deg,#5A5E5B,#B0B3AF)}
.dev--android .dev__btn--a{top:calc(128 * var(--u));height:calc(34 * var(--u))}
.dev--android .dev__btn--b{top:calc(178 * var(--u));height:calc(66 * var(--u))}
.dev--android .dev__home{width:28%;height:calc(3.6 * var(--u));bottom:calc(8 * var(--u))}

/* the home bar or gesture bar, in the screen's own ink */
.dev__home{position:absolute;z-index:9;left:0;right:0;margin:0 auto;border-radius:999px;background:currentColor;opacity:.85}

/* the status bar. iOS: time left, signal and battery right. Android the same
   row, a touch smaller, the camera between */
.dev__bar{position:absolute;z-index:8;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;height:calc(46 * var(--u));padding:calc(4 * var(--u)) calc(26 * var(--u)) 0 calc(30 * var(--u));font-size:calc(13.5 * var(--u));font-weight:600;letter-spacing:-.01em}
.dev--android .dev__bar{height:calc(38 * var(--u));padding:calc(2 * var(--u)) calc(22 * var(--u)) 0;font-size:calc(12 * var(--u));font-weight:500}
.dev__bar i{display:flex;gap:calc(5 * var(--u));align-items:center}
.dev__bar i b{display:block;width:calc(16 * var(--u));height:calc(9 * var(--u));border-radius:calc(2.5 * var(--u));border:calc(1.1 * var(--u)) solid currentColor;position:relative;opacity:.9}
.dev__bar i b::after{content:"";position:absolute;inset:calc(1.2 * var(--u));right:calc(3 * var(--u));border-radius:calc(1 * var(--u));background:currentColor}
.dev__bar i s{display:block;width:calc(13 * var(--u));height:calc(9 * var(--u));background:currentColor;clip-path:polygon(0 100%,100% 0,100% 100%);opacity:.9}