visual updates

src/routes/weather/14-day/[location]/+page.svelte

@@ -334,7 +334,7 @@
 			/>
 		</svg>
 		<span>
-			This model's ensemble only reaches about <strong>{validDays} days</strong> ahead — the spread is
+			This model's ensemble only reaches about <strong>{validDays} days</strong> ahead, the spread is
 			trimmed to its available range.
 		</span>
 	</div>
@@ -348,29 +348,42 @@
 	</div>
 {/if}
 
-<ChartContainer {loading} chartCount={params.hourly?.length || 1} chartHeight={300} bleed={false}>
-	{#if fetchedData}
+{#if fetchedData}
+	<!-- full-bleed graphs until lg / contained card on lg+; titles stay within
+	     the page margins (padded), the graphs bleed to the edges -->
+	<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">
 		{#each chartDefs as def, i (i)}
-			<CanvasChart
-				bind:this={chartComponents[i]}
-				timestamps={timestampsSec}
-				timezone={fetchedData.timezone}
-				series={def.series}
-				bands={fetchedData.daylightBands}
-				unit={def.unit}
-				title={def.title}
-				subtitle={def.subtitle}
-				showCredit={def.showCredit}
-				zeroBaseLeft={def.zeroBaseLeft ?? true}
-				yMin={def.yMin}
-				yMax={def.yMax}
-				{showLegend}
-				height={300}
-				group={CHART_GROUP}
-			/>
+			<div class="px-0 pt-1.5 pb-1 lg:px-4 lg:pb-3 {i > 0 ? 'border-t border-border/50' : ''}">
+				<div class="mb-1 px-3 lg:px-0">
+					<h4 class="text-sm font-bold tracking-tight">{def.title}</h4>
+					{#if def.subtitle}
+						<p class="text-xs text-muted-foreground">{def.subtitle}</p>
+					{/if}
+				</div>
+				<ChartContainer {loading} chartCount={1} chartHeight={300} minWidth={520} bleed={false}>
+					<CanvasChart
+						bind:this={chartComponents[i]}
+						timestamps={timestampsSec}
+						timezone={fetchedData.timezone}
+						series={def.series}
+						bands={fetchedData.daylightBands}
+						unit={def.unit}
+						showCredit={def.showCredit}
+						zeroBaseLeft={def.zeroBaseLeft ?? true}
+						yMin={def.yMin}
+						yMax={def.yMax}
+						{showLegend}
+						height={300}
+						group={CHART_GROUP}
+					/>
+				</ChartContainer>
+			</div>
 		{/each}
-	{/if}
-</ChartContainer>
+	</div>
+{:else}
+	<!-- reserve the chart area height before data arrives (no layout shift) -->
+	<ChartContainer loading chartCount={params.hourly?.length || 1} chartHeight={340} bleed={false} />
+{/if}
 
 <!-- ─── Toolbar: Controls + Download ───────────────────────────────────────── -->