/* The existing daily summary travels with the rank strip; its renderer stays shared. */
.rank-strip > .today{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:3px;
  padding:10px 0 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:none;
  text-align:center;
  white-space:normal;
  font-size:12px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.rank-strip > .today b{color:var(--text);}
.rank-strip > .today .today-count{margin-left:auto;white-space:nowrap;}
.rank-strip > .today.rest{color:var(--muted);}
.completion-boxes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%;}
.completion-boxes[hidden]{display:none;}
.completion-box{
  position:relative;
  flex:0 0 22px;
  height:22px;
  border-radius:50%;
  background:rgba(167,155,194,.18);
  display:grid;
  place-items:center;
  transition:transform 160ms var(--ease-out);
}
.completion-box.is-arriving{transform:translateY(-3px) scale(1.12);}
.completion-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:#38b981;
  opacity:0;
  clip-path:inset(0 100% 0 0 round 50%);
  transition:opacity 120ms var(--ease-out),clip-path 180ms var(--ease-out);
}
.completion-box::after{
  content:"";
  position:relative;
  width:4px;
  height:8px;
  border:solid #102a20;
  border-width:0 2px 2px 0;
  opacity:0;
  transform:translateY(-1px) rotate(45deg);
  clip-path:inset(0 0 100% 0);
  transition:opacity 100ms var(--ease-out),clip-path 140ms var(--ease-out);
}
.completion-box.is-complete::before{
  opacity:1;
  clip-path:inset(0 0 0 0 round 50%);
  transition-duration:120ms,240ms;
}
.completion-box.is-complete::after{
  opacity:1;
  clip-path:inset(0 0 0 0);
  transition-delay:80ms;
}
.completion-instant .completion-box,
.completion-instant .completion-box::before,
.completion-instant .completion-box::after{transition:none;}
@media(prefers-reduced-motion:reduce){
  .completion-box,.completion-box.is-arriving{transform:none;transition:none;}
  .completion-box::before,.completion-box.is-complete::before,
  .completion-box::after,.completion-box.is-complete::after{clip-path:none;}
  .completion-box::before,.completion-box.is-complete::before,
  .completion-box::after,.completion-box.is-complete::after{transition:opacity 100ms var(--ease-out);}
  .completion-instant .completion-box::before,.completion-instant .completion-box::after{transition:none;}
}