visual updates

src/routes/weather/compare/[location]/+page.svelte

@@ -359,31 +359,44 @@
 
 <!-- chart count derives from the selected variables (not the fetched data),
      so the reserved height is right even before the response arrives -->
-<ChartContainer
-	{loading}
-	chartCount={params.hourly?.filter((v) => v !== 'weather_code').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}
-				{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}
+						{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?.filter((v) => v !== 'weather_code').length || 1}
+		chartHeight={340}
+		bleed={false}
+	/>
+{/if}
 
 {#if fetchedData && !loading}
 	<ModelPictogramTimeline