money: wishlist tier totals fit on one line (compact €, scales with card, exact amount in tooltip)

src/routes/trackers/money/money-tracker.css

@@ -92,25 +92,42 @@
 }
 .money-app .wish-tier-grid {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
-	gap: 6px;
+	grid-template-columns: repeat(5, minmax(0, 1fr));
+	gap: clamp(4px, 1.2vw, 6px);
 }
 .money-app .wish-tier-grid > div {
 	display: grid;
 	gap: 3px;
-	padding: 9px 11px;
+	padding: 8px clamp(4px, 1.2vw, 11px);
 	min-width: 0;
 	border: 1px solid var(--site-border);
 	border-radius: 7px;
+	container-type: inline-size;
 }
+.money-app .wish-tier-grid > div > * {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+/* Totals are compact ("€ 8.865", "€ 28,1k") and scale with the card so they stay on one line. */
 .money-app .wish-tier-grid strong {
-	font-size: 14px;
+	font-size: clamp(10px, 23cqi, 15px);
 	font-weight: 600;
-	overflow-wrap: anywhere;
+	font-variant-numeric: tabular-nums;
+	letter-spacing: -0.01em;
+}
+.money-app .wish-tier-grid small,
+.money-app .wish-tier-grid .eyebrow {
+	font-size: clamp(10px, 19cqi, 12px);
 }
 .money-app .wish-tier-grid small {
 	color: var(--site-muted);
-	font-size: 11px;
+}
+/* On very narrow phones the tier cards drop the euro sign; the exact amount stays in the tooltip. */
+@container (max-width: 42px) {
+	.money-app .wish-tier-grid .currency {
+		display: none;
+	}
 }
 .money-app .capitalize {
 	text-transform: capitalize;