/* .field-label comes from base.css. Only tokens here; see Task 7's design rules. */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
.stats > div { display: flex; flex-direction: column-reverse; padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stats dt { font-size: var(--text-small); color: var(--text-muted); }
.stats dd { margin: 0; font-size: var(--text-title); font-weight: 700; font-variant-numeric: tabular-nums; }
/* The page's headline number is a highlighted result, so it gets the accent border. */
[data-primary="characters"] [data-stat="characters"],
[data-primary="words"] [data-stat="words"] { order: -1; grid-column: span 2; border-color: var(--accent); }
.limits { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.limits li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--space-2); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.limits .count { font-variant-numeric: tabular-nums; }
.limits [data-state="over"] .count { font-weight: 700; }
/* Neutral progress bar: no traffic-light colours, so the accent stays the only colour. "(N over)" text carries the warning. */
.limits .bar { grid-column: 1 / -1; height: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.limits .bar span { display: block; height: 100%; background: var(--text-muted); }
.limits [data-state="over"] .bar span { background: var(--text); }
.limits .note { grid-column: 1 / -1; margin: 0; font-size: var(--text-small); color: var(--text-muted); }
.error { font-weight: 700; }
@media (max-width: 400px) { [data-primary] [data-stat] { grid-column: auto; } }
.case-buttons { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.case-buttons [aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 700; }
.wpm-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0; }
.wpm-row label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 700; }
.wpm-row input { width: 10rem; }