/* 4E how-to clips (web/shared/howto.js). Chip and buttons sit in the bottom corners: kit clips burn their
   captions in at the top; .vtt cues are lifted one line (cue.line = -2) to clear the buttons.
   Works with the landing tokens (tokens.css) and the app/guide tokens
   (tokens-app.css): only shared token names, with the other set as fallback. Dark and light come from the tokens. */
.hv{margin:14px 0;padding:0!important;background:none!important;min-width:0}
.hv-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--edge);
  background:var(--code,var(--card2,#111));box-shadow:0 10px 30px rgba(0,0,0,.28)}
.hv-frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:transparent}
.hv.phone{max-width:300px;margin-inline:auto}
.hv.phone .hv-frame{aspect-ratio:9/19.5;border-radius:24px;border:5px solid #111}
.hv figcaption{font-size:12.5px;color:var(--dim);margin:8px 2px 0!important;line-height:1.45}
.hv figcaption b{color:var(--text);font-weight:600}
/* the play/pause button covers the frame: click anywhere, Enter or Space */
.hv-toggle{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;color:#fff;-webkit-tap-highlight-color:transparent}
.hv-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,16,.62);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 22px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.hv-ic svg{width:26px;height:26px;display:block}
.hv.playing .hv-ic{opacity:0;transform:scale(.9)}
.hv.playing .hv-toggle:hover .hv-ic,.hv.playing .hv-toggle:focus-visible .hv-ic{opacity:1;transform:none}
.hv-toggle:focus-visible{outline:2px solid var(--accent-hi);outline-offset:-4px;border-radius:10px}
.hv-chip{position:absolute;left:10px;bottom:10px;z-index:1;pointer-events:none;font:600 11px/1 var(--ui,Inter,system-ui,sans-serif);
  letter-spacing:.04em;padding:5px 8px;border-radius:99px;color:#fff;background:rgba(10,12,16,.62);
  box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.hv-side{position:absolute;right:10px;bottom:10px;z-index:1;display:flex;gap:6px;align-items:center}
.hv-dur,.hv-cc{font:600 11px/1 var(--mono,ui-monospace,monospace);padding:5px 7px;border-radius:6px;color:#fff;
  background:rgba(10,12,16,.62);box-shadow:0 0 0 1px rgba(255,255,255,.16);border:0}
.hv-dur{pointer-events:none}
.hv-cc{cursor:pointer;min-width:32px;min-height:24px}
.hv-cc:hover{background:rgba(10,12,16,.82)}
.hv-cc:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.hv.phone .hv-chip{left:12px;bottom:14px}.hv.phone .hv-side{right:12px;bottom:14px}
.hv video::cue{font:500 15px/1.35 var(--ui,Inter,system-ui,sans-serif);color:#fff;background:rgba(10,12,16,.78)}
@media (max-width:600px){.hv video::cue{font-size:12px;line-height:1.3}.hv-chip,.hv-dur,.hv-cc{font-size:10px;padding:4px 6px}.hv-cc{min-height:22px}
  .hv-ic{width:48px;height:48px}.hv-ic svg{width:22px;height:22px}}
.hv-cc[aria-pressed="true"]{background:var(--accent);color:#fff}
.hv.missing .hv-frame::after{content:"Clip not found";position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:13px}
.hv.missing .hv-toggle,.hv.missing .hv-side{display:none}
@media (prefers-reduced-motion:reduce){.hv-ic{transition:none}}
/* landing strip: "See it in use" */
.hv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:start;margin-top:8px}
.hv-row .hv{margin:0}
.hv-row .hv.phone{max-width:260px}
@media (max-width:600px){.hv-row{grid-template-columns:1fr;gap:22px}}
/* 1.0.1: a finger-sized CC button on touch screens (was 24 px tall, 22 px on phones) */
@media (pointer:coarse){.hv-cc{min-width:36px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}}