/* Event2Reward round 12: shared plug-run film component (see plug.js). Page palette: --ink, --muted, --blue, --line, --soft. */
.plug{--pl-ink:var(--ink,#20242b);--pl-muted:var(--muted,#656d79);--pl-blue:var(--blue,#2557a7);--pl-line:var(--line,#e4e7ec);--pl-soft:var(--soft,#f6f8fb);
  --pl-warm:#e9ecf0;--pl-fail:#f3f5f8;--pl-fail-edge:#c3cad4;--pl-pend:#ffffff;--pl-tile-h:22px;--pl-gap:3px;--pl-ggap:10px;
  position:relative;min-width:0;color:var(--pl-ink);font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif)}
.plug *{box-sizing:border-box}
.plug-stage{position:relative;min-width:0}
.plug-stage video{display:block;width:100%;height:auto;background:#eef1f4;border:1px solid var(--pl-line);border-radius:8px}
.plug-stage video::-webkit-media-controls{display:none!important}
.plug-stage .plug-hit{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer;border-radius:8px}
.plug-stage .plug-hit:focus-visible{outline:3px solid #668fd1;outline-offset:3px}
.plug-big{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:#ffffffe8;
  box-shadow:0 1px 8px #0002;display:grid;place-items:center;pointer-events:none;transition:opacity .2s}
.plug-big svg{width:24px;height:24px;fill:var(--pl-ink);margin-left:3px}
.plug.is-playing .plug-big,.plug.has-played .plug-big{opacity:0}

/* control row: play | scrubber | clock */
.plug-controls{display:flex;align-items:center;gap:12px;margin-top:12px;min-width:0}
.plug-play{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--pl-line);background:#fff;display:grid;place-items:center;padding:0;color:var(--pl-ink)}
.plug-play:hover{border-color:#c7ced8;background:var(--pl-soft)}
.plug-play svg{width:14px;height:14px;fill:currentColor}
.plug-scrub{position:relative;flex:1 1 auto;min-width:60px;height:24px;cursor:pointer;touch-action:none}
.plug-scrub::before{content:"";position:absolute;left:0;right:0;top:11px;height:3px;border-radius:2px;background:var(--pl-line)}
.plug-scrub-fill{position:absolute;left:0;top:11px;height:3px;border-radius:2px;background:var(--pl-blue);width:0}
.plug-scrub-knob{position:absolute;top:5px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid var(--pl-blue);left:0}
.plug-scrub:focus-visible{outline:3px solid #668fd1;outline-offset:2px;border-radius:4px}
.plug-clock{flex:none;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.plug-clock b{font-size:20px;font-weight:620;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.plug-clock span{font-size:12px;color:var(--pl-muted)}

/* info row: phase · streak */
.plug-info{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:8px;font-size:13px;color:var(--pl-muted);line-height:1.4}
.plug-phase{font-weight:600;color:var(--pl-ink)}
.plug-streak b{font-variant-numeric:tabular-nums;color:var(--pl-ink);font-weight:620}
.plug.is-criterion .plug-streak,.plug.is-criterion .plug-streak b{color:var(--pl-blue)}

/* trial bar */
.plug-bar{position:relative;margin-top:14px;padding-top:22px;user-select:none;-webkit-user-select:none;touch-action:none;outline:none}
.plug-bar:focus-visible{outline:3px solid #668fd1;outline-offset:4px;border-radius:4px}
.plug-tiles{position:relative;display:flex;align-items:stretch;height:var(--pl-tile-h)}
.plug-tile{position:relative;flex:1 1 0;min-width:0;margin-right:var(--pl-gap);border-radius:3px;border:1px solid var(--pl-line);background:var(--pl-pend);cursor:pointer;padding:0;overflow:hidden}
.plug-tile:last-child{margin-right:0}
.plug-tile.is-g1{margin-right:var(--pl-ggap)}
.plug-tile.is-done.is-warmup{background:var(--pl-warm);border-color:var(--pl-warm)}
.plug-tile.is-done.is-warmup::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#9aa3af}
.plug-tile.is-done.is-fail{background:var(--pl-fail);border-color:var(--pl-fail-edge)}
.plug-tile.is-done.is-success{background:var(--pl-blue);border-color:var(--pl-blue)}
.plug-tile.is-current{border:2px solid var(--pl-blue);z-index:1}
.plug-tile.is-done.is-success.is-current{box-shadow:0 0 0 2px #fff inset}
.plug-tile i{position:absolute;left:0;bottom:0;height:3px;background:#2557a755;width:0}
.plug-tile.is-done i{display:none}
.plug-prop .plug-tile{flex:none}
/* bracket over the streak */
.plug-bracket{position:absolute;top:0;height:18px;border:1.5px solid #b9c3d3;border-bottom:0;border-radius:3px 3px 0 0;pointer-events:none}
.plug-bracket span{position:absolute;left:50%;top:-1px;transform:translate(-50%,-55%);background:#fff;padding:0 5px;font-size:12px;line-height:1.2;color:var(--pl-muted);white-space:nowrap}
.plug.is-criterion .plug-bracket{border-color:var(--pl-blue)}
.plug.is-criterion .plug-bracket span{color:var(--pl-blue);font-weight:600}
/* group labels + legend under the bar */
.plug-groups{position:relative;height:18px;margin-top:5px;font-size:12px;color:var(--pl-muted);line-height:18px}
.plug-groups span{position:absolute;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plug-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12px;color:var(--pl-muted);line-height:1.4}
.plug-legend span{display:inline-flex;align-items:center;gap:6px}
.plug-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--pl-line);position:relative}
.plug-legend .lg-warm{background:var(--pl-warm);border-color:var(--pl-warm)}
.plug-legend .lg-warm::after{content:"";position:absolute;left:4px;top:4px;width:4px;height:4px;border-radius:50%;background:#9aa3af}
.plug-legend .lg-fail{background:var(--pl-fail);border-color:var(--pl-fail-edge)}
.plug-legend .lg-success{background:var(--pl-blue);border-color:var(--pl-blue)}

/* key moments */
.plug-moments{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.plug-moment{font-size:13px;line-height:1.3;padding:6px 12px;border-radius:999px;border:1px solid var(--pl-line);background:#fff;color:var(--pl-ink)}
.plug-moment:hover{border-color:#b9c3d3;background:var(--pl-soft)}
.plug-moment b{color:var(--pl-blue);font-weight:620;font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .plug{--pl-tile-h:18px;--pl-gap:2px;--pl-ggap:6px}
  .plug-clock b{font-size:18px}
  .plug-controls{gap:10px}
}
@media (prefers-reduced-motion:reduce){.plug-big{transition:none}}