1 files changed, 15 insertions, 7 deletions
diff --git a/src/style.css b/src/style.css
index bcec4a5..dd90ec1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -284,14 +284,22 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si
 .coin { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-top: 1px solid var(--line); }
 .coin:first-child { border-top: 0; }
 .coin input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
-/* per-coin fact pills: each datum wears its own little labeled chip */
-.coin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
-.coin-chip {
-  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
-  border: 1px solid var(--line); border-radius: 999px;
-  font-size: 11.5px; color: var(--muted); white-space: nowrap;
+/* the Spending coins table: labels once in the header, numbers right-
+   aligned in tabular figures; on a narrow screen the WRAPPER scrolls
+   sideways so the page itself never does */
+.coin-scroll { overflow-x: auto; margin: 4px -2px 0; -webkit-overflow-scrolling: touch; }
+.coin-table { border-collapse: collapse; width: 100%; font-size: 13.5px; white-space: nowrap; }
+.coin-table th {
+  text-align: left; font-weight: 600; font-size: 12px; color: var(--muted);
+  padding: 4px 5px 8px; border-bottom: 1px solid var(--line-strong);
 }
-.coin-chip.warn { color: var(--accent-ink); border-color: var(--accent); }
+.coin-table td { padding: 10px 5px; border-top: 1px solid var(--line); vertical-align: middle; }
+.coin-table tbody tr:first-child td { border-top: 0; }
+.coin-table th:first-child, .coin-table td:first-child { width: 22px; padding-left: 2px; padding-right: 2px; }
+.coin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.coin-table td.warn { color: var(--accent-ink); font-weight: 600; }
+.coin-table tr.clickable { cursor: pointer; }
+.coin-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; display: block; }
 
 /* ---- review / summary ---- */
 .summary { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }