/* ============ VIDEO PLAYER ============
   A screen recording with chapters (pagekit video(chapters=...), js/video.js).
   The video and its controls share one frame: the site's hairline and
   radius wrap both, and the controls sit in a strip along the frame's foot,
   so they never cover the recording. In the strip: play/pause, normal and
   slower speed as two buttons, then one segment per chapter (as wide as its
   share of the video, filling as it plays, tappable to jump there). The
   current chapter's label is darker.

   Phones get two rows: the buttons and the current chapter's name, then the
   segments across the full width (labels hidden, taller tap area). */

/* ---- the frame ---- */
.media-set .vplayer{
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  background:var(--paper);
}
/* the frame draws the edge now, so the video itself has none */
.media-set.has-stroke .vplayer video{outline:none;}
.media-set .vplayer video{border-radius:0;cursor:pointer;}

/* ---- the control strip ---- */
.vbar{
  display:flex;align-items:flex-start;gap:16px;
  padding:10px 14px 12px;
  border-top:1px solid var(--rule);
}
.vctl{flex:none;display:flex;align-items:center;gap:8px;}

.vbtn{
  flex:none;width:28px;height:28px;padding:0;
  display:inline-grid;place-items:center;
  border:1px solid var(--rule);border-radius:999px;
  background:var(--paper);color:var(--ink);
  cursor:pointer;
  transition:color .1s,border-color .1s;
}
.vbtn:hover{color:var(--accent-text);border-color:var(--accent);}
.vplay svg{width:14px;height:14px;fill:currentColor;}
.vplay .i-play,
.vplayer.is-paused .vplay .i-pause{display:none;}
.vplayer.is-paused .vplay .i-play{display:block;}

/* normal / slower: two buttons in one pill, the current one filled */
.vspeeds{
  display:inline-flex;height:28px;padding:2px;gap:2px;
  border:1px solid var(--rule);border-radius:999px;
}
.vspeed{
  min-width:36px;min-height:24px;padding:0 8px;border:0;border-radius:999px;
  background:none;color:var(--ink-3);
  font:500 var(--t-label-size)/1 var(--body);font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:color .1s,background-color .1s;
}
.vspeed:hover{color:var(--accent-text);}
.vspeed[aria-pressed="true"]{background:var(--sink);color:var(--ink);}

.vbtn:focus-visible,.vspeed:focus-visible,.vchap:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---- chapters ---- */
.vchapters{flex:1;min-width:0;display:flex;gap:4px;}
.vchap{
  flex-basis:0;min-width:0;
  display:flex;flex-direction:column;gap:7px;
  padding:12px 0 0;border:0;background:none;
  text-align:left;color:var(--ink-3);cursor:pointer;
}
.vtrack{display:block;height:4px;border-radius:2px;overflow:hidden;background:var(--rule);}
.vfill{display:block;height:100%;width:calc(var(--p, 0) * 100%);background:var(--accent);}
.vlabel{
  font:var(--t-label-size)/1.3 var(--body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .1s;
}
.vchap:hover .vlabel{color:var(--accent-text);}
.vchap.is-active .vlabel{color:var(--ink);font-weight:500;}

.vnow{display:none;}

/* phones: two rows. Controls and the current step's name on top, the
   chapter segments across the full width below, with a taller tap area */
@media (max-width:699px){
  .vbar{
    display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:10px 12px;padding:12px 14px 6px;
  }
  .vnow{
    display:block;margin:0;min-width:0;
    font:500 var(--t-label-size)/1.3 var(--body);color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;
  }
  .vchapters{grid-column:1 / -1;}
  .vchap{padding:10px 0;}
  .vchap .vlabel{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .vbtn,.vspeed,.vlabel{transition:none;}
}