/* ============================================================
   VIDYA · the phone the app recordings play in
   Proportions are an iPhone 15 Pro's: a 393 x 852 pt screen behind a
   thin black bezel and a brushed titanium band, with the side buttons
   where they sit on the device. The screen is a real one, top to bottom:
   a 54 pt status bar that holds the Dynamic Island, the recording (the
   app at 393 x 764), and a 34 pt home-indicator strip. So the island
   never covers the app's own header, as it would not on a phone.

   Size it with --pw (the device's width), set on the phone or on the
   figure around it, so the caption below takes the same width.
   data-look="light" or "dark" on .phone matches the bars to the
   recording inside (each recording has a fixed look).

   Markup (tools/phone-markup.py writes it):
   <div class="phone" data-look="light">
     <div class="phone-screen">
       <div class="ph-status" aria-hidden="true">time, island, icons</div>
       <video ...></video>
       <div class="ph-home" aria-hidden="true"></div>
     </div>
   </div>
   ============================================================ */
.phone{--ph-w:var(--pw,300px);--ti:calc(var(--ph-w) * .012);--bz:calc(var(--ph-w) * .036);
  position:relative;width:var(--ph-w);max-width:100%;margin:0 auto;aspect-ratio:71.6/146.6;
  padding:var(--ti);border-radius:calc(var(--ph-w) * .178);
  background:linear-gradient(135deg,#9AA09F 0%,#4A504F 16%,#B7BCBB 34%,#5C6261 52%,#9EA3A2 70%,#3F4544 86%,#8C9291 100%);
  box-shadow:0 0 0 .5px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.35),
    0 2px 3px rgba(6,16,15,.12),0 30px 60px -28px rgba(6,16,15,.45),0 60px 120px -60px rgba(12,97,112,.45)}
/* the side buttons: action and two volume on the left, the side button on the right */
.phone::before,.phone::after{content:"";position:absolute;width:calc(var(--ph-w) * .011);border-radius:2px;
  background:linear-gradient(90deg,#3C4241,#A4A9A8 55%,#5A605F)}
.phone::before{left:calc(var(--ph-w) * -.009);top:17.5%;height:4.2%;
  box-shadow:0 calc(var(--ph-w) * .145) 0 0 #7E8483,0 calc(var(--ph-w) * .27) 0 0 #7E8483}
.phone::after{right:calc(var(--ph-w) * -.009);top:27%;height:10.5%}

/* the bezel and the glass */
.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--ph-w) * .166);
  border:var(--bz) solid #050707;background:#050707;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);isolation:isolate}
.phone-screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 22%,rgba(255,255,255,0) 40%)}

/* the screen, top to bottom: 54 / 764 / 34 of 852 */
.ph-status{position:absolute;left:0;right:0;top:0;height:6.338%;z-index:3;display:flex;align-items:center;justify-content:space-between;
  padding:0 7.5% 0 9.5%;font:600 calc(var(--ph-w) * .046)/1 -apple-system,"SF Pro Text","Montserrat",system-ui,sans-serif;letter-spacing:-.01em}
.ph-time{position:relative;top:4%}
.ph-icons{display:flex;align-items:center;gap:calc(var(--ph-w) * .016);position:relative;top:4%}
.ph-icons svg{display:block;height:calc(var(--ph-w) * .036);width:auto;fill:currentColor}
.ph-icons svg.bat{height:calc(var(--ph-w) * .042)}
.ph-island{position:absolute;left:50%;top:21%;transform:translateX(-50%);width:33%;height:58%;border-radius:999px;background:#000}
.phone-screen video,.phone-screen > img{position:absolute;left:0;top:6.338%;width:100%;height:89.671%;object-fit:cover;display:block;z-index:1}
.ph-home{position:absolute;left:0;right:0;bottom:0;height:3.991%;z-index:3}
.ph-home::after{content:"";position:absolute;left:50%;bottom:28%;width:36%;height:calc(var(--ph-w) * .016);transform:translateX(-50%);border-radius:999px}

/* the looks: bars match the app behind them */
.phone[data-look="light"] .phone-screen{background:#F5F9F8}
.phone[data-look="light"] .ph-status,.phone[data-look="light"] .ph-home{background:#F5F9F8;color:#0B1110}
.phone[data-look="light"] .ph-home::after{background:#0B1110}
.phone[data-look="dark"] .phone-screen{background:#090E0D}
.phone[data-look="dark"] .ph-status,.phone[data-look="dark"] .ph-home{background:#090E0D;color:#F4F7F6}
.phone[data-look="dark"] .ph-home::after{background:#F4F7F6}

/* caption and pause control under a phone */
.phone-cap{display:flex;align-items:center;justify-content:center;gap:10px;width:min(var(--pw,300px),100%);margin:18px auto 0}
.phone-cap-t{font-size:13px;font-weight:600;text-align:center;color:var(--fg-1,#15201E)}
.phone-cap-t em{display:block;font-style:italic;font-weight:300;font-size:12.5px;color:var(--fg-4,#687270)}