/* ─────────────────────────────────────────────────────────────
   Product demo player — a click-through of real product frames.

   Every picture is a screenshot of the running app (scripts/demo-capture.mjs
   drives three real sessions and shoots them); nothing here draws fake UI.
   The device frames are CSS only — no bezel images — so they cost nothing
   and follow the page's own tokens.

   Colours: landing/css/tokens.css variables only. No literal anywhere in
   this file (scripts/check-tokens.sh is the gate).

   Two device shapes:
     .dp-dev--phone     390x844 captures, rounded bezel + notch
     .dp-dev--browser   1280x820 captures, chrome bar + url pill
   Below 760 the browser frame pans horizontally inside its own screen
   instead of shrinking to an unreadable 358px — a 1280 screenshot scaled to
   a phone's width is a picture of a product, not a demo of one.
   ───────────────────────────────────────────────────────────── */

.d-player{margin-top:30px}
.dp{text-align:left}

/* ── chapter tabs (APG tablist; ←/→ inside the list switch chapters) ── */
.dp-tabs{display:flex;gap:4px;padding:4px;margin:0 auto 20px;width:max-content;max-width:100%;
  border-radius:var(--radius-full);background:var(--l-ink-a06);
  border:1px solid var(--l-hairline);overflow-x:auto;scrollbar-width:none}
.dp-tabs::-webkit-scrollbar{display:none}
html.dark .dp-tabs{background:var(--l-bg-a12)}
.dp-tab{flex:0 0 auto;border:none;background:none;cursor:pointer;font-family:var(--font);
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--l-muted);white-space:nowrap;
  padding:9px 18px;min-height:40px;border-radius:var(--radius-full);
  transition:background .2s ease,color .2s ease}
.dp-tab:hover{color:var(--l-ink)}
.dp-tab[aria-selected="true"]{background:var(--brand-accent);color:var(--x-white)}

/* ── the card: frame on one side, the words on the other ── */
.dp-card{display:grid;gap:24px;max-width:1100px;margin:0 auto;padding:20px;
  border-radius:var(--radius-xl);background:var(--l-box);
  border:1px solid var(--l-hairline);box-shadow:var(--l-shadow-sm)}
@media (min-width:1024px){
  .dp-card{grid-template-columns:minmax(0,1fr) 330px;gap:32px;padding:28px;align-items:center}
  /* A 288px phone alone in a 750px column is a small picture in a big empty
     room. The phone chapters get a narrower card and lead with the device. */
  .dp-card.is-phone{max-width:850px;grid-template-columns:300px minmax(0,1fr)}
}

/* ── device frames ── */
.dp-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.dp-dev{position:relative;width:100%;max-width:var(--dp-max,100%)}
.dp-dev--phone{--dp-max:288px;padding:9px;border-radius:42px;background:var(--x-ink);
  box-shadow:0 0 0 1px var(--l-hairline),var(--l-shadow-md)}
.dp-dev--phone .dp-screen{border-radius:33px}
/* the notch, drawn not photographed */
.dp-dev--phone::after{content:'';position:absolute;left:50%;top:14px;transform:translateX(-50%);
  width:84px;height:19px;border-radius:var(--radius-full);background:var(--x-ink);z-index:3}
.dp-dev--browser{border-radius:var(--radius-lg);overflow:hidden;background:var(--x-ink);
  box-shadow:0 0 0 1px var(--l-hairline),var(--l-shadow-md)}
.dp-chrome{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  background:var(--ds-color-neutral-900);border-bottom:1px solid var(--x-line-soft)}
.dp-tl{width:9px;height:9px;border-radius:var(--radius-full);flex:0 0 auto;opacity:.85}
.dp-tl-1{background:var(--x-danger)}
.dp-tl-2{background:var(--x-warn)}
.dp-tl-3{background:var(--x-ok)}
.dp-url{flex:0 1 260px;margin:0 auto;height:19px;border-radius:var(--radius-full);
  background:var(--x-ink);color:var(--x-text-3);font-family:var(--font);font-size:11px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap}

/* ── the screen: one <img> per step, crossfaded ── */
/* --dp-ar is set inline per chapter from the capture size (e.g. 1280/820). */
.dp-screen{position:relative;overflow:hidden;background:var(--x-canvas-bg);
  aspect-ratio:var(--dp-ar,16/10)}
.dp-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:hidden;
  overscroll-behavior-x:contain}
.dp-track{position:relative;height:100%;width:100%}
.dp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s ease}
.dp-img.on{opacity:1}

/* ── the spotlight: where the NEXT step goes.
      Three layers in one box-shadow, and all three earn their place:
      a white hairline so the ring is legible even when it lands on a
      brand-purple button (the first one does), the brand ring outside it,
      and a soft veil over everything else — 30%, enough to move the eye,
      light enough that the product is still being shown. The ::after ring
      pings outward so a still screenshot reads as "press here". ── */
.dp-spot{position:absolute;border-radius:10px;pointer-events:none;
  box-shadow:0 0 0 2px var(--x-white),0 0 0 5px var(--brand-accent),
             0 0 0 9999px var(--l-ink-a30)}
.dp-spot::after{content:'';position:absolute;inset:-5px;border-radius:15px;
  box-shadow:0 0 0 3px var(--brand-accent-soft);
  animation:dp-ping 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.dp-spot[hidden]{display:none}
@keyframes dp-ping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.22)}}

/* ── the words ── */
.dp-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.dp-count{font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--l-muted);font-variant-numeric:tabular-nums}
.dp-cap{margin-top:9px;font-family:var(--font);font-size:clamp(18px,2.2vw,22px);
  font-weight:700;line-height:1.3;color:var(--l-ink);text-wrap:balance}
.dp-note{margin-top:9px;font-size:15px;line-height:1.55;color:var(--l-muted)}
.dp-hint{margin-top:11px;font-size:12px;line-height:1.5;color:var(--l-muted);opacity:.85}
/* Keeps its line when there is nothing to say (a chapter's last step has no next
   element to ring), so the controls and the card's bottom edge never jump. */
.dp-hint[hidden]{display:block;visibility:hidden}

/* ── controls ── */
.dp-ctrls{display:flex;align-items:center;gap:10px}
.dp-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--radius-full);border:1px solid var(--l-hairline);
  background:var(--l-bg);color:var(--l-ink);cursor:pointer}
.dp-btn:hover:not(:disabled){border-color:var(--l-ink-a30)}
.dp-btn:disabled{opacity:.35;cursor:default}
.dp-btn svg{display:block}
.dp-dots{display:flex;align-items:center;justify-content:center;gap:7px;flex:1 1 auto;min-width:0}
.dp-dt{position:relative;flex:0 0 auto;width:8px;height:8px;padding:0;border:none;
  border-radius:var(--radius-full);background:var(--l-ink-a30);cursor:pointer;
  transition:width .2s ease,background .2s ease}
/* 44pt touch target without a 44px dot */
.dp-dt::before{content:'';position:absolute;inset:-16px -5px}
.dp-dt:hover{background:var(--l-ink-a45)}
.dp-dt[aria-current="true"]{width:22px;background:var(--brand-accent)}
/* --l-ink-a30 is a fixed dark alpha (it is not part of the html.dark swap), so
   on the dark shell the unvisited dots would be ink on ink — restate them. */
html.dark .dp-dt{background:var(--x-line-30)}
html.dark .dp-dt:hover{background:var(--brand-text-muted)}
html.dark .dp-dt[aria-current="true"]{background:var(--brand-accent)}
.dp-play[aria-pressed="true"]{background:var(--brand-accent);border-color:var(--brand-accent);
  color:var(--x-white)}
.dp-pan{display:none;margin-top:8px;font-size:11px;color:var(--l-muted);text-align:center}

/* ── phone: the browser frame pans instead of shrinking ── */
@media (max-width:760px){
  .d-player{margin-top:24px}
  .dp-card{padding:14px;gap:18px}
  .dp-dev--phone{--dp-max:260px}
  /* 720 x 461 keeps the 1280x820 capture at ~0.56 scale — labels stay legible
     and the page itself never scrolls sideways (the overflow is the screen's). */
  .dp-dev--browser .dp-screen{aspect-ratio:auto;height:461px}
  .dp-dev--browser .dp-scroll{overflow-x:auto}
  .dp-dev--browser .dp-track{width:720px}
  .dp-stage.is-browser .dp-pan{display:block}
  .dp-note{font-size:14.5px}
  /* Stacked under the frame, the words set the card's height; reserve two lines of
     caption and three of note so a shorter step does not pull the CTA below upward. */
  .dp-live{min-height:150px}
}

@media (prefers-reduced-motion:reduce){
  .dp-img{transition:none}
  .dp-spot{animation:none;opacity:.95}
  .dp-tab,.dp-dt{transition:none}
}