/* 06-components/_tally.css — .c-tally: a big mono number over a label; .c-tally-strip: a row of them. */
.c-tally-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--space-md); }
.c-tally { padding: var(--space-md) var(--pad-panel); background: var(--surface); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); }
.c-tally__num { font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--weight-medium); line-height: 1.05; color: var(--band-ink, var(--ink)); letter-spacing: -0.01em; }
.c-tally__num small { font-size: 0.5em; color: var(--ink-faint); margin-inline-start: 0.1em; }
.c-tally__label { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--ink-muted); }
.c-tally__delta { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--band-ink, var(--ink-faint)); }
.c-tally--sm .c-tally__num { font-size: var(--text-xl); }
/* added for production/runs/show: six small tallies, which auto-fit left as five and one at 1024 px.
   Two rows of three on a tablet in either orientation, one row of six from lg, two columns on a phone. */
.c-tally-strip--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .c-tally-strip--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .c-tally-strip--six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }