/* css.slopped.site exhibit: Keeping score. From css/exhibits/tally.mjs. */
.x-tally .checklist { max-width: 520px; margin: 0; padding: 0; border: 0; }
.x-tally legend { margin-bottom: 12px; font: 1000 26px/1.1 var(--head); letter-spacing: -.8px; font-synthesis: none; }
.x-tally .item { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line); cursor: pointer; }
.x-tally .item input { width: 22px; height: 22px; accent-color: var(--ink); }
.x-tally .item:has(:checked) span { text-decoration: line-through; color: var(--muted); }
.x-tally .score { margin: 14px 0 0; font: 1000 40px/1 var(--head); letter-spacing: -1px; font-synthesis: none; }
.x-tally .done { display: none; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--acid); color: var(--on-acid); font-weight: 700; }
/* key */
.x-tally .checklist { counter-reset: done total; }
.x-tally .item { counter-increment: total; }
.x-tally .item:has(:checked) { counter-increment: total done; }

/* the score comes after the list, so the counters have finished counting */
.x-tally .score::after { content: counter(done) " of " counter(total) " done"; }

/* no unchecked box left: the list is finished */
.x-tally .checklist:not(:has(input:not(:checked))) .done { display: block; }
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-counters .sup-no { display: none; }
@supports not (counter-increment: a) { .sup-counters .sup-yes { display: none; } .sup-counters .sup-no { display: inline; } .sup-counters { --sup: var(--no); } }
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }