.count-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.count-cell{border:1px solid var(--line);border-radius:8px;padding:10px var(--s3);background:var(--card)}
.count-cell .num{font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--brand-ink)}
.count-cell .lab{font-size:var(--t2);color:var(--mut)}

#counter-input{width:100%;min-height:7em;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit}
.counter-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s5);margin-top:var(--s5);align-items:start}
.counter-actions #counter-copy{grid-column:1;grid-row:1}
.counter-actions #counter-clear{grid-column:2;grid-row:1}
.counter-actions .undo-slot{grid-column:2;grid-row:2;display:flex;min-height:var(--touch)}
.counter-actions .undo-slot>[hidden]{display:inline-flex!important;visibility:hidden}
.counter-actions{row-gap:var(--s3)}
.counter-actions .undo-slot:has(>button[hidden]){display:none}
[data-task="counter"] #copy-status:empty{min-height:0;margin:0}
[data-task="counter"] .count-grid{margin-top:var(--s3)}

.diff-fields{display:grid;gap:var(--s3);margin-top:var(--s2)}
@media(min-width:640px){.diff-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.diff-field{display:grid;gap:var(--s1);min-width:0}
#diff-before,#diff-after{width:100%;min-height:5em;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit}
.count-cell .diff-pair{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}