/* Badges (category chips) and pills (small grey label).
   NOTE: bill.html (via pages/bill.css) intentionally redefines .pill with
   a larger uppercase variant. That override depends on the page-css block
   loading AFTER this file in base.html — do NOT merge the two. */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; text-transform: capitalize; }
.b-bill { background: var(--accent-soft); color: var(--accent-text); }
.b-receipt { background: var(--good-soft); color: var(--good); }
.b-invoice { background: var(--warn-soft); color: var(--warn); }
.b-refund { background: var(--refund-soft); color: var(--refund); }
.b-money-request { background: var(--danger-soft); color: var(--danger); }
.b-transfer-out, .b-transfer-in { background: var(--transfer-soft); color: var(--transfer); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--muted); }