/* ——— The tally ———
   BC's little pie beside a list's title: how much of the list is done, a shu
   wedge filling a shu-tint disc — BC's two greens, said in the house red
   (user, 2026-08-11) — at the todo-check's own size, so the mark rhymes with
   the circles it counts. No hairline: the tint draws the shape. The angle
   reads two custom properties a MutationObserver keeps honest
   (tally_controller.js); everything drawn is drawn here. */
@layer components {
  .tally {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-image: conic-gradient(
      var(--color-accent) calc(var(--done, 0) / var(--total, 1) * 1turn),
      var(--color-accent-tint) 0
    );
  }
}