/* Phone video: an app screen recording inside the same iPhone as the Custom Card Creator demo
   (css/card-demo.css), drawn in CSS so it scales: black body, edge highlight, side buttons, drop shadow.
   Proportions come from that device (414 × 868, screen 390 × 844); 1cqw = 1% of the device's width.
   <figure class="pv-demo">
     <div class="pv-device"><div class="pv-body"><video class="pv-screen" src="…" autoplay muted loop playsinline></video></div></div>
     <figcaption class="pv-caption"><button type="button" class="pv-toggle"></button><span>…</span></figcaption>
   </figure>
   js/phone-video.js wires the pause / play button. */

.pv-demo { margin: 0; position: sticky; top: 96px; }
.pv-device { width: 100%; max-width: 340px; margin: 0 auto; container-type: inline-size; }   /* sizes the phone; 1cqw = 1% of its width */
.pv-body {
  position: relative; aspect-ratio: 414 / 868;
  padding: 2.9cqw; border-radius: 16.4cqw; background: #0c0c0d;
  box-shadow: inset 0 0 0 1.5px #4a4a4e, inset 0 0 0 4px #1b1b1d, 0 30px 60px -20px rgba(0,0,0,.45);
}
/* side buttons: volume up and down on the left, power on the right */
.pv-body::before, .pv-body::after { content: ""; position: absolute; width: 4px; background: #2a2a2c; border-radius: 2px; }
.pv-body::before { left: -3px; top: 45.9cqw; height: 15.5cqw; box-shadow: 0 20.3cqw 0 #2a2a2c; }
.pv-body::after { right: -3px; top: 58cqw; height: 24.2cqw; }
.pv-screen { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 13.5cqw; background: #f4f4f6; }

.pv-caption { display: flex; align-items: flex-start; gap: 12px; max-width: 340px; margin: 18px auto 0; font-size: 14px; line-height: 1.4; }
.pv-toggle {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 0; background: #000; color: #fff; cursor: pointer;
}
.pv-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.pv-toggle:focus-visible { outline: 3px solid var(--highlight, #ffe600); outline-offset: 2px; }

@media (max-width: 640px) {
  .pv-demo { position: static; margin-top: 8px; }
  .pv-device, .pv-caption { max-width: 300px; }
}

/* placeholder screens while recordings are pending */
.shot-placeholder { display: grid; place-items: center; background: var(--newsprint, #edebe6); color: #555; font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; }
.shot-placeholder--mac { width: 100%; aspect-ratio: 16 / 10; border: var(--rule, 4px solid #000); }