/* ============ 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, then one
   segment per chapter (as wide as its share of the video, filling as it
   plays). Together the segments are a scrub line: click a point to jump
   there, drag to move through the video. Only the current chapter's name
   shows, under its segment; hovering (or focusing) another segment names it
   in a tooltip.

   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;}

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

/* ---- chapters ----
   The segments are also one scrub line (js/video.js): click any point to jump
   there, drag to move through the video. pan-y keeps a vertical swipe
   scrolling the page on touch screens; a sideways drag scrubs. */
.vchapters{
  --vlabel-h:calc(var(--t-label-size) * 1.3);
  position:relative;flex:1;min-width:0;display:flex;gap:4px;
  touch-action:pan-y;cursor:pointer;
}
.vplayer.is-scrubbing,.vplayer.is-scrubbing *{cursor:grabbing;user-select:none;-webkit-user-select:none;}
/* each segment's button reaches down over the label row, so the whole strip
   under the track is a target too */
.vchap{
  flex-basis:0;min-width:0;
  display:block;
  padding:12px 0 calc(7px + var(--vlabel-h));border:0;background:none;
  text-align:left;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);}
/* each chapter's own name stays in its button for readers of the markup;
   on screen, one name shows: the current chapter's (.vcur), under its
   segment, free to run past a short segment and kept inside the bar
   (js/video.js places it). Any other chapter names itself on hover (.vtip). */
.vlabel{display:none;}
.vcur{
  position:absolute;left:0;top:23px;pointer-events:none;
  font:500 var(--t-label-size)/1.3 var(--body);color:var(--ink);white-space:nowrap;
}
.vtip{
  position:absolute;left:0;bottom:calc(100% - 4px);pointer-events:none;
  padding:4px 8px;border-radius:6px;background:var(--ink);color:var(--paper);
  font:500 var(--t-label-size)/1.3 var(--body);white-space:nowrap;
  opacity:0;transform:translateY(2px);transition:opacity .12s,transform .12s;
}
.vtip.is-on{opacity:1;transform:none;}

.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;
  }
  /* the current name is in the top row (.vnow); while dragging it follows
     the finger, so it names the chapter under it (no tooltip needed: there
     is no hover, and it would only repeat that line) */
  .vchapters{grid-column:1 / -1;}
  .vchap{padding:10px 0;}
  .vcur,.vtip{display:none;}
}

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