/* Road to 209 · chevron-bars.css (ui-designer)
   Completion bars from the tee's stacked chevrons. One segment per set.
   .chev            container (row of <i> segments)
   .chev-sm         replaces the 3 .pips dashes next to each exercise
   .chev-prog       replaces .wk-prog under the PUSH DAY title (one segment per set, grouped per move)
   i.on             filled (ember, spring pop). --d sets the stagger (chevron-bars.js writes it)
   .chev.all        every set done: segments flash warm white in sequence, then settle ember
   Needs springs.css tokens. Pure CSS; chevron-bars.js only writes classes and --d / --n. */

.chev{--depth:6px;--ch:16px;--gap:3px;display:flex;align-items:center;isolation:isolate}
.chev i{position:relative;flex:1 1 0;height:var(--ch);margin-left:calc(var(--depth) * -1 + var(--gap));
  clip-path:polygon(0 0,calc(100% - var(--depth)) 0,100% 50%,calc(100% - var(--depth)) 100%,0 100%,var(--depth) 50%);
  background:rgba(243,239,230,.17);font-style:normal}
.chev i:first-child{margin-left:0;clip-path:polygon(0 0,calc(100% - var(--depth)) 0,100% 50%,calc(100% - var(--depth)) 100%,0 100%)}
/* hollow centre so unfilled reads as an outline */
.chev i::before{content:"";position:absolute;inset:1.5px 2px;background:var(--card);
  clip-path:inherit}
.chev i::after{content:"";position:absolute;inset:0;background:var(--ember);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 140ms var(--ease-out-fast)}
.chev i.on::after{transform:none;transition:transform var(--sp-snap-d) var(--sp-snap) var(--d,0ms)}
.chev i.on{animation:chevPop var(--sp-pop-d) var(--sp-pop) var(--d,0ms) both}
@keyframes chevPop{from{transform:translateX(-3px) scale(.82)}to{transform:none}}
/* a wider gap between moves in the workout bar */
.chev i.grp{margin-left:calc(var(--depth) * -1 + var(--gap) + 7px)}
/* full complete: warm white flash rolls left to right, then settles ember */
.chev.all i::after{transform:none;animation:chevFlash 520ms ease-out calc(var(--n,0) * 50ms) both}
.chev.all i{animation:chevPopAll var(--sp-pop-d) var(--sp-pop) calc(var(--n,0) * 50ms) both}
@keyframes chevPopAll{from{transform:scale(1.18)}to{transform:none}}
/* segments rendered already filled do not replay the pop */
.chev i.on.pre{animation:none}
.chev i.on.pre::after{transition:none}
@keyframes chevFlash{0%{background:#fff0d6;box-shadow:none}35%{background:#fff0d6}100%{background:var(--ember)}}

/* sizes */
.chev-sm{--depth:4px;--ch:10px;--gap:2px;width:34px;margin:6px 0 0 auto}
.chev-sm i::before{inset:1.5px 1.5px}
.chev-prog{--depth:6px;--ch:14px;--gap:3px;margin-top:16px}
/* recovery days or single-set moves can use a mint-free dim tone */
.chev.dim i::after{background:#7a3a18}

@media (prefers-reduced-motion: reduce){
  .chev i,.chev i.on,.chev.all i{animation:none!important}
  .chev i::after,.chev i.on::after{transition:none!important}
  .chev.all i::after{animation:none!important;background:var(--ember)}
}