feat(variety): implement C3 variety review screen (Issue #28)

- Add /planner/variety route with mobile stacked + desktop 2-column layout
- Implement VarietyScoreHero: Fraunces score display + progress bar + color-coded description
- Implement ScoreBreakdownList: 3 sub-score rows (protein diversity, ingredient overlap, effort balance)
- Implement VarietyWarningCards: yellow-tint warning cards derived from API tagRepeats/ingredientOverlaps
- Implement EffortBar: proportional colored segments (Easy/Medium/Hard) with ×N labels
- Desktop: protein grid (7 columns, repeat highlight with yellow ring) + effort bar in right panel
- Client-side sub-score derivation from VarietyScoreResponse (tagged for TODO to move to API)
- 26 new tests across 5 components + server load function; 455 tests total, 0 type errors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/planner/VarietyWarningCards.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Warning {
+		title: string;
+		explanation: string;
+	}
+
+	let { warnings }: { warnings: Warning[] } = $props();
+</script>
+
+{#each warnings as warning}
+	<div
+		data-testid="warning-card"
+		class="rounded-[var(--radius-lg)] bg-[var(--yellow-tint)] px-4 py-3"
+	>
+		<p class="font-[var(--font-sans)] text-[13px] font-medium text-[var(--yellow-text)]">
+			{warning.title}
+		</p>
+		<p class="mt-1 font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)]">
+			{warning.explanation}
+		</p>
+	</div>
+{/each}