money: thick €0 baseline on the wealth charts (all modes) so dips toward zero or below stand out

src/lib/money-tracker/MoneyChart.svelte

@@ -6,7 +6,8 @@
 		title,
 		unit = '€',
 		marker,
-		grid
+		grid,
+		zeroLine
 	}: {
 		series: ChartSeries[];
 		title: string;
@@ -14,7 +15,10 @@
 		marker?: { date: string; label: string };
 		/** Vertical gridlines: every month (1 January drawn stronger), every year, or every decade. */
 		grid?: GridMode;
+		/** Thick baseline at 0 (default on for money charts) so dips toward zero stand out. */
+		zeroLine?: boolean;
 	} = $props();
+	let showZero = $derived(zeroLine ?? unit === '€');
 	let clientWidth = $state(800);
 	let width = $derived(Math.max(280, clientWidth));
 	let compact = $derived(width < 520);
@@ -189,6 +193,9 @@
 						font-size="11">{format(value)}</text
 					>
 				{/each}
+				{#if showZero && min <= 0 && max >= 0}
+					<line class="zero-line" x1={plot.left} x2={width - plot.right} y1={y(0)} y2={y(0)} />
+				{/if}
 				{#each axisTicks as tick (tick)}
 					<text
 						x={x(tick)}
@@ -328,6 +335,13 @@
 		stroke-opacity: 0.55;
 		shape-rendering: crispEdges;
 	}
+	/* The €0 baseline: thicker and higher contrast than the gridlines, under the data lines. */
+	.zero-line {
+		stroke: var(--site-text, currentColor);
+		stroke-width: 2;
+		stroke-opacity: 0.6;
+		shape-rendering: crispEdges;
+	}
 	.grid-x.year {
 		stroke: var(--site-muted);
 		stroke-width: 1.5;