loads of mobile ui layout upgrades

frontend/src/routes/[fam]/+page.svelte

@@ -49,7 +49,6 @@
 	let tileChores = $derived(
 		summary?.summaries?.reduce((s: number, m: any) => s + (m.choresCompleted || 0), 0) ?? 0
 	);
-
 	// ─── All-time header stats (server-computed) ───
 	let allTimePts = $derived(Number(stats.allTimePts) || 0);
 	let allTimeCash = $derived(Number(stats.allTimeCash) || 0);
@@ -58,6 +57,9 @@
 	// ─── Goals completed (rewards from bonus configs, pocket money excluded) ───
 	// Derived from famStore so realtime updates (a goal met / revoked) flow in.
 	let rewards = $derived(famStore.initialized ? famStore.rewards : data.rewards || []);
+	// All-time goals achieved — every materialized bonus reward (prize / points /
+	// cash), including pocket money configs.
+	let tileGoals = $derived(rewards.filter((r: any) => r.bonusConfigId).length);
 	let bonusConfigs = $derived(
 		famStore.initialized ? famStore.bonusConfigs : data.bonusConfigs || []
 	);
@@ -326,6 +328,10 @@
 		<span class="tile-val">£{tileMoney.toFixed(2)}</span>
 		<span class="tile-lbl">cash this week</span>
 	</div>
+	<div class="tile tile-goals">
+		<span class="tile-val">{tileGoals}</span>
+		<span class="tile-lbl">goals achieved</span>
+	</div>
 </div>
 
 <CardGrid>
@@ -364,7 +370,7 @@
 					{@const scVal = avgDailyPointsFor(s)}
 					{@const scPct = scPot > 0 ? Math.min(100, Math.round((scVal / scPot) * 100)) : 0}
 					{@const goals = goalsByMember.get(s.memberId)}
-					<div class="column col-member">
+					<div class="column col-member" style="--mc: {s.memberColor}">
 						<div class="member-head">
 							<span class="dot" style="background:{s.memberColor}"></span>
 							<span class="member-name">{s.memberName}</span>
@@ -527,7 +533,8 @@
 	/* ── Tiles (matching child dashboard) ── */
 	.tiles {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		/* members 1 unit wide; goals / points / cash 2 units each (1+2+2+2 on one row) */
+		grid-template-columns: 1fr 2fr 2fr 2fr;
 		gap: 0.75rem;
 		margin-bottom: 1rem;
 	}
@@ -535,6 +542,9 @@
 		.tiles {
 			grid-template-columns: repeat(2, 1fr);
 		}
+		.vh-num {
+			font-size: 1.5em;
+		}
 	}
 	.tile {
 		border-radius: 14px;
@@ -557,6 +567,9 @@
 	.tile-chores {
 		background: linear-gradient(135deg, #0284c7, #38bdf8);
 	}
+	.tile-goals {
+		background: linear-gradient(135deg, #f59e0b, #f97316);
+	}
 	.tile-val {
 		font-size: 1.6rem;
 		font-weight: 800;
@@ -584,7 +597,8 @@
 	}
 	.col-member {
 		border-top-color: #6366f1;
-		background: #eef2ff;
+		/* Translucent wash of the member's own colour (set via --mc inline) */
+		background: color-mix(in srgb, var(--mc, #6366f1) 12%, transparent);
 	}
 
 	.member-head {
@@ -705,4 +719,13 @@
 		text-align: center;
 		padding: 1.5rem;
 	}
+	/* Mobile: member columns stack full width (same convention as the chores
+	   kanban) instead of the 450px horizontal scroll. Declared last so it wins
+	   over the base .kanban rule. */
+	@media (max-width: 639px) {
+		.kanban {
+			grid-template-columns: 1fr;
+			min-width: 0;
+		}
+	}
 </style>