diff --git a/src/lib/services/index.ts b/src/lib/services/index.ts
index 1d5b913..a159018 100644
--- a/src/lib/services/index.ts
+++ b/src/lib/services/index.ts
@@ -7,7 +7,6 @@ export {
 	getDates,
 	getValues,
 	getInt64Values,
-	extractValues,
 	unitToDisplayString
 } from './weather';
 
diff --git a/src/lib/services/weather.ts b/src/lib/services/weather.ts
index 8c09492..417b470 100644
--- a/src/lib/services/weather.ts
+++ b/src/lib/services/weather.ts
@@ -175,6 +175,8 @@ export interface WeekHourlyData {
 	winddirection_10m: number[];
 	cloud_cover: number[];
 	relative_humidity_2m: number[];
+	apparent_temperature: number[];
+	dew_point_2m: number[];
 }
 
 export interface WeekDailyData {
@@ -259,7 +261,9 @@ const WEEK_HOURLY_VARS = [
 	'wind_speed_10m',
 	'wind_direction_10m',
 	'cloud_cover',
-	'relative_humidity_2m'
+	'relative_humidity_2m',
+	'apparent_temperature',
+	'dew_point_2m'
 ] as const;
 
 const WEEK_DAILY_VARS = [
@@ -324,7 +328,9 @@ export async function fetchWeekForecast(params: WeekForecastParams): Promise<Wee
 		windspeed_10m: getValues(hourlyBlock.variables(4)!),
 		winddirection_10m: getValues(hourlyBlock.variables(5)!),
 		cloud_cover: getValues(hourlyBlock.variables(6)!),
-		relative_humidity_2m: getValues(hourlyBlock.variables(7)!)
+		relative_humidity_2m: getValues(hourlyBlock.variables(7)!),
+		apparent_temperature: getValues(hourlyBlock.variables(8)!),
+		dew_point_2m: getValues(hourlyBlock.variables(9)!)
 	};
 
 	// Daily: variables are in the same order as WEEK_DAILY_VARS
diff --git a/src/routes/weather/canvas/temp-gradient.ts b/src/routes/weather/canvas/temp-gradient.ts
index 1b44a24..94c7772 100644
--- a/src/routes/weather/canvas/temp-gradient.ts
+++ b/src/routes/weather/canvas/temp-gradient.ts
@@ -8,10 +8,10 @@ export default (
 ): void => {
 	if (ctx && series) {
 		const tempGradientFill = ctx.createLinearGradient(0, 0, 0, config.maxY);
-		tempGradientFill.addColorStop(0, getColor(config.maxTemp.toFixed(0), unit) + '5c');
-		tempGradientFill.addColorStop(0.25, getColor(config.maxTemp.toFixed(0), unit) + '5c');
-		tempGradientFill.addColorStop(0.85, getColor(config.minTemp.toFixed(0), unit) + '06');
-		tempGradientFill.addColorStop(1, getColor(config.minTemp.toFixed(0), unit) + '00');
+		tempGradientFill.addColorStop(0, getColor(config.maxTemp, unit) + '5c');
+		tempGradientFill.addColorStop(0.25, getColor(config.maxTemp, unit) + '5c');
+		tempGradientFill.addColorStop(0.85, getColor(config.minTemp, unit) + '06');
+		tempGradientFill.addColorStop(1, getColor(config.minTemp, unit) + '00');
 
 		ctx.beginPath();
 		ctx.moveTo(
diff --git a/src/routes/weather/utils/colors.ts b/src/routes/weather/utils/colors.ts
index 777f8fc..7ad1963 100644
--- a/src/routes/weather/utils/colors.ts
+++ b/src/routes/weather/utils/colors.ts
@@ -25,19 +25,18 @@ export function rgbToHex(rgb: string) {
 	return hex;
 }
 
-export const getColor = (tempString: string, unit = 'celsius'): string => {
+export const getColor = (temperature: number, unit = 'celsius'): string => {
 	let index = 0;
-	const temp = Number(tempString);
 	if (unit === 'celsius') {
-		if (temp <= -40) {
+		if (temperature <= -40) {
 			index = 0;
-		} else if (temp >= 60) {
+		} else if (temperature >= 60) {
 			index = colorScaleHex.length - 1;
 		} else {
-			index = temp + 40;
+			index = temperature + 40;
 		}
 	} else {
-		const tempInCelsius = Math.round(((temp - 32) * 5) / 9);
+		const tempInCelsius = Math.round(((temperature - 32) * 5) / 9);
 		if (tempInCelsius <= -40) {
 			index = 0;
 		} else if (tempInCelsius >= 60) {
diff --git a/src/routes/weather/week/[location]/+page.svelte b/src/routes/weather/week/[location]/+page.svelte
index 515ef06..2ace8c2 100644
--- a/src/routes/weather/week/[location]/+page.svelte
+++ b/src/routes/weather/week/[location]/+page.svelte
@@ -29,12 +29,10 @@
 
 	import type { GeoLocation } from '$lib/stores/settings';
 
-	// ─── Constants ──────────────────────────────────────────────────────────────
-
 	const CHART_GROUP = 'week-meteogram';
 	const MS_PER_DAY = 24 * 3600 * 1000;
-
-	// ─── State ──────────────────────────────────────────────────────────────────
+	const CELL_W = 38;
+	const CURVE_H = 120;
 
 	let params = $state({
 		latitude: [$storedLocation.latitude],
@@ -60,8 +58,8 @@
 	let selectedDayIndex = $state(1);
 
 	let tableScrollDiv: HTMLElement | undefined = $state();
-
-	// ─── Fetched Data ───────────────────────────────────────────────────────────
+	let hourlyInterval = $state<1 | 3>(3);
+	let showDetailedCharts = $state(false);
 
 	interface FetchedHourly {
 		hourly: WeekHourlyData;
@@ -79,8 +77,6 @@
 	let fetchedHourly: FetchedHourly | null = $state(null);
 	let fetchedDaily: FetchedDaily | null = $state(null);
 
-	// ─── Scroll-to-Day ──────────────────────────────────────────────────────────
-
 	function scrollChartsToDay(day: Date): void {
 		if (!fetchedHourly || chartInstances.length === 0) return;
 
@@ -138,8 +134,6 @@
 		}
 	}
 
-	// ─── Lifecycle ──────────────────────────────────────────────────────────────
-
 	onMount(() => {
 		mounted = true;
 
@@ -171,8 +165,6 @@
 		chartComponents = [];
 	});
 
-	// ─── Helpers ────────────────────────────────────────────────────────────────
-
 	function handleChartReady(chart: echarts.ECharts): void {
 		chart.group = CHART_GROUP;
 		chartInstances = [...chartInstances, chart];
@@ -239,7 +231,69 @@
 		return `rgba(0, 240, 240, ${hum ** 3.8 / 10 ** 8.2})`;
 	}
 
-	// ─── Data Fetching ──────────────────────────────────────────────────────────
+	function getWindArrowRotation(deg: number): string {
+		return `rotate(${deg}deg)`;
+	}
+
+	function getDayLabel(date: Date): string {
+		const diff = Math.round(
+			(new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() -
+				new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime()) /
+				MS_PER_DAY
+		);
+		if (diff === 0) return 'Today';
+		if (diff === 1) return 'Tomorrow';
+		if (diff === -1) return 'Yesterday';
+		return `${date.getMonth() + 1}-${date.getDate()}`;
+	}
+
+	function getFilteredIndices(dates: Date[]): number[] {
+		if (hourlyInterval === 1) {
+			return dates.map((_, i) => i);
+		}
+		return dates.reduce<number[]>((acc, date, i) => {
+			if (date.getHours() % 3 === 0) acc.push(i);
+			return acc;
+		}, []);
+	}
+
+	function getPrecipBarHeight(val: number, maxVal: number): number {
+		if (!val || val <= 0 || !maxVal) return 0;
+		return Math.min(100, (val / Math.max(maxVal, 1)) * 100);
+	}
+
+	function buildCurvePath(temps: number[], indices: number[], minT: number, maxT: number): string {
+		if (indices.length < 2) return '';
+		const rangeT = maxT - minT || 1;
+		const points: [number, number][] = indices.map((idx, i) => {
+			const x = i * CELL_W + CELL_W / 2;
+			const t = temps[idx] ?? minT;
+			const y = CURVE_H - 20 - ((t - minT) / rangeT) * (CURVE_H - 40);
+			return [x, y];
+		});
+
+		let d = `M ${points[0][0]},${points[0][1]}`;
+		for (let i = 1; i < points.length; i++) {
+			const prev = points[i - 1];
+			const curr = points[i];
+			const cpx1 = prev[0] + (curr[0] - prev[0]) * 0.4;
+			const cpx2 = prev[0] + (curr[0] - prev[0]) * 0.6;
+			d += ` C ${cpx1},${prev[1]} ${cpx2},${curr[1]} ${curr[0]},${curr[1]}`;
+		}
+		return d;
+	}
+
+	function buildAreaPath(temps: number[], indices: number[], minT: number, maxT: number): string {
+		const curvePath = buildCurvePath(temps, indices, minT, maxT);
+		if (!curvePath) return '';
+		const lastX = (indices.length - 1) * CELL_W + CELL_W / 2;
+		const firstX = CELL_W / 2;
+		return `${curvePath} L ${lastX},${CURVE_H} L ${firstX},${CURVE_H} Z`;
+	}
+
+	function getCloudOpacity(cover: number): number {
+		return Math.min(0.7, (cover ?? 0) / 120);
+	}
 
 	$effect(() => {
 		const loc = location;
@@ -259,7 +313,7 @@
 				temperature_unit: params.temperature_unit as 'celsius' | 'fahrenheit',
 				wind_speed_unit: params.wind_speed_unit as 'kmh' | 'ms' | 'mph' | 'kn',
 				precipitation_unit: params.precipitation_unit as 'mm' | 'inch',
-				forecast_days: 6,
+				forecast_days: 7,
 				past_days: 1
 			});
 
@@ -282,8 +336,6 @@
 		loadData();
 	});
 
-	// ─── Chart Option Building ──────────────────────────────────────────────────
-
 	$effect(() => {
 		if (!fetchedHourly) return;
 
@@ -361,8 +413,6 @@
 			}
 		];
 
-		// ── Chart 1: Temperature + Cloud Cover ──────────────────────────────
-
 		const tempOption: Record<string, unknown> = {
 			title: {
 				text: 'Temperature & Cloud Cover',
@@ -481,8 +531,6 @@
 			textStyle: { color: colors.text }
 		};
 
-		// ── Chart 2: Precipitation + Probability ────────────────────────────
-
 		const precipOption: Record<string, unknown> = {
 			title: {
 				text: 'Precipitation & Probability',
@@ -585,8 +633,6 @@
 			textStyle: { color: colors.text }
 		};
 
-		// ── Chart 3: Wind & Humidity ─────────────────────────────────────────
-
 		const windOption: Record<string, unknown> = {
 			title: {
 				text: 'Wind Speed & Humidity',
@@ -722,51 +768,36 @@
 	<meta name="description" content="7-day weather forecast with detailed hourly data" />
 </svelte:head>
 
-<div class="">
+<div class="week-page">
 	<div class="weather-content" style="min-height: 50vh">
-		<!-- ─── Daily Summary Cards ────────────────────────────────────────── -->
-		<div
-			in:fade
-			out:fade
-			style="min-height: 256px"
-			class="weather-week gap-md-2 mb-4 flex flex-col md:flex-row"
-		>
-			{#if fetchedDaily}
-				{#each fetchedDaily.dailyDates as time, index (index)}
-					{@const selected = time.getDate() === selectedDay.getDate()}
-					{@const tempMax = fetchedDaily.daily.temperature_2m_max[index]}
-					{@const tempMin = fetchedDaily.daily.temperature_2m_min[index]}
-					{@const wCode = fetchedDaily.daily.weather_code[index]}
-					{@const sunDuration = fetchedDaily.daily.sunshine_duration[index]}
-					{@const precipSum = fetchedDaily.daily.precipitation_sum[index]}
-					{#if tempMax != null && !isNaN(tempMax)}
-						<button
-							style="transition: 300ms; min-width: 13%; {selected ? 'transform: scale(1.025)' : ''}"
-							class="cursor-pointer"
-							onclick={() => {
-								switchDay(time, index);
-							}}
-						>
-							<div
-								class="gap-md-1 flex flex-row items-center justify-center rounded-xl p-1 md:flex-col md:justify-center md:p-3 {selected
-									? 'bg-accent'
-									: ''}"
+		<!-- Daily Summary Cards -->
+		<div in:fade out:fade class="daily-cards-wrapper">
+			<div class="daily-cards-scroll">
+				{#if fetchedDaily}
+					{#each fetchedDaily.dailyDates as time, index (index)}
+						{@const selected = time.getDate() === selectedDay.getDate()}
+						{@const tempMax = fetchedDaily.daily.temperature_2m_max[index]}
+						{@const tempMin = fetchedDaily.daily.temperature_2m_min[index]}
+						{@const wCode = fetchedDaily.daily.weather_code[index]}
+						{@const sunDuration = fetchedDaily.daily.sunshine_duration[index]}
+						{@const precipSum = fetchedDaily.daily.precipitation_sum[index]}
+						{@const windMax = fetchedDaily.daily.windspeed_10m_max[index]}
+						{@const gustMax = fetchedDaily.daily.windgusts_10m_max[index]}
+						{@const windDir = fetchedDaily.daily.winddirection_10m_dominant[index]}
+						{#if tempMax != null && !isNaN(tempMax)}
+							<button
+								class="daily-card {selected ? 'selected' : ''}"
+								onclick={() => switchDay(time, index)}
 							>
-								<div class="weather-week-date">
-									<b>{time.getDate()} - {time.getMonth() + 1}</b>
+								<div class="card-day-name">
+									{time.toLocaleDateString('en-GB', { weekday: 'short' }).toUpperCase()}
+								</div>
+								<div class="card-day-date">
+									{getDayLabel(time)}
 								</div>
 
-								<div
-									data-text={time.toLocaleDateString('en-GB', { weekday: 'long' })}
-									class="grow-text relative mx-auto inline-flex flex-col {selected
-										? 'font-bold'
-										: ''}"
-								>
-									{time.toLocaleDateString('en-GB', { weekday: 'long' })}
-								</div>
-
-								<div class="weather-week-icon pe-none py-2">
-									<svg class="fill-foreground" width="60px" height="60px">
+								<div class="card-icon">
+									<svg class="fill-foreground" width="52px" height="52px">
 										<use
 											xlink:href="/images/weather-icons/wi-day-{weatherCodes[
 												wCode as keyof typeof weatherCodes
@@ -774,290 +805,522 @@
 										></use>
 									</svg>
 								</div>
+
 								<div
-									class="weather-temp-max flex min-w-[65px] justify-center rounded-t p-1 text-sm"
+									class="card-temp-max"
 									style="background-color: {getColor(
 										tempMax,
 										String(params.temperature_unit)
-									)}; color: {tempMin < (params.temperature_unit === 'celsius' ? 4 : 7) ||
-									tempMin >= (params.temperature_unit === 'celsius' ? 30 : 104)
-										? 'white'
-										: 'black'}"
+									)}; color: {getTextColorForTemp(tempMax, String(params.temperature_unit))}"
 								>
-									{tempMax.toFixed(1)}
-									{params.temperature_unit === 'celsius' ? '°C' : '°F'}
+									{tempMax.toFixed(0)}°{params.temperature_unit === 'celsius' ? 'C' : 'F'}
 								</div>
 								<div
-									class="weather-temp-min flex min-w-[65px] justify-center rounded-b p-1 text-sm"
-									style="background: {getColor(
+									class="card-temp-min"
+									style="background-color: {getColor(
 										tempMin,
 										String(params.temperature_unit)
-									)}; color: {tempMin < (params.temperature_unit === 'celsius' ? 4 : 7) ||
-									tempMin >= (params.temperature_unit === 'celsius' ? 30 : 104)
-										? 'white'
-										: 'black'}"
+									)}; color: {getTextColorForTemp(tempMin, String(params.temperature_unit))}"
 								>
-									{tempMin.toFixed(1)}
-									{params.temperature_unit === 'celsius' ? '°C' : '°F'}
+									{tempMin.toFixed(0)}°{params.temperature_unit === 'celsius' ? 'C' : 'F'}
 								</div>
-								<div class="mt-2 flex items-center justify-center gap-1">
-									<div class="relative flex h-6 w-6 items-center justify-center">
-										<div class="absolute">
-											<svg class="fill-foreground" width="26px" height="26px">
-												<use
-													class="stroke-2"
-													xlink:href="/images/weather-icons/wi-day-sunny.svg#Layer_1"
-												></use>
-											</svg>
-										</div>
-									</div>
-									{Number((sunDuration ?? 0) / 3600).toFixed(0)}h
-								</div>
-								<div class="mt-1 flex items-center justify-center">
-									<div class="relative flex h-6 w-6 items-center justify-center">
-										<div class="absolute">
-											<svg class="fill-foreground" width="28px" height="28px">
-												<use
-													class="stroke-2"
-													xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"
-												></use>
-											</svg>
-										</div>
-									</div>
-									{Number(precipSum).toFixed(1)}{params.precipitation_unit === 'mm' ? 'mm' : "'"}
-								</div>
-							</div>
-						</button>
-					{/if}
-				{/each}
-			{/if}
-		</div>
 
-		<!-- ─── Selected Day Header ───────────────────────────────────────── -->
-		<div class="mb-2 flex items-center gap-3">
-			<h3 class="text-xl font-bold">
-				{selectedDay.toLocaleDateString('en-GB', { weekday: 'long' })}
-				<small>
-					{selectedDay.getDate() === new Date(today.getTime() - 24 * 60 * 60 * 1000).getDate()
-						? ' (Yesterday)'
-						: ''}
-					{selectedDay.getDate() === today.getDate() ? ' (Today)' : ''}
-					{selectedDay.getDate() === new Date(today.getTime() + 24 * 60 * 60 * 1000).getDate()
-						? ' (Tomorrow)'
-						: ''}
-				</small>
-			</h3>
-			<button type="button" class="zoom-reset-btn" title="Show all days (Esc)" onclick={resetZoom}>
-				Show All
-			</button>
-		</div>
-
-		<!-- ─── ECharts Meteogram ─────────────────────────────────────────── -->
-
-		<ChartContainer {loading} chartCount={3} chartHeight={300}>
-			{#each chartOptions as option, i (i)}
-				<EChart
-					{option}
-					height={i === 2 ? '320px' : '300px'}
-					onChartReady={handleChartReady}
-					bind:this={chartComponents[i]}
-				/>
-			{/each}
-		</ChartContainer>
-
-		<!-- ─── Hourly Data Table ──────────────────────────────────────────── -->
-		{#if fetchedHourly}
-			{@const hourly = fetchedHourly.hourly}
-			{@const dates = fetchedHourly.hourlyDates}
-			<div class="mt-4">
-				<h4 class="mb-2 text-lg font-semibold">Hourly Details</h4>
-			</div>
-			<div
-				bind:this={tableScrollDiv}
-				class="hourly-table-scroll -mx-5 overflow-x-auto overflow-y-hidden md:mx-0"
-			>
-				<table class="hourly-table">
-					<caption class="sr-only">Hourly weather details for {location.name}</caption>
-					<tbody>
-						<!-- Time row -->
-						<tr>
-							<th class="row-header" scope="row">Time</th>
-							{#each dates as date, i (i)}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td
-									class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
-									data-date={date.getDate()}
-								>
-									{pad(date.getHours())}
-								</td>
-							{/each}
-						</tr>
-
-						<!-- Weather icons row -->
-						<tr>
-							<th class="row-header" scope="row">
-								<svg class="fill-foreground inline-block" width="18px" height="18px">
-									<use xlink:href="/images/weather-icons/wi-day-cloudy.svg#Layer_1"></use>
-								</svg>
-							</th>
-							{#each dates as date, i (i)}
-								{@const wCode = hourly.weather_code[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const daytime = isDaytimeHour(date.getHours())}
-								{@const isMidnight = date.getHours() === 0}
-								<td class="hour-cell icon-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
-									<svg
-										class="fill-foreground {isNow ? 'scale-125' : ''}"
-										width="22px"
-										height="22px"
-									>
-										<use
-											xlink:href="/images/weather-icons/wi-{daytime
-												? 'day'
-												: 'night'}-{weatherCodes[wCode as keyof typeof weatherCodes] ??
-												'clear'}.svg#Layer_1"
-										></use>
+								<div class="card-detail">
+									<svg class="fill-foreground detail-icon" width="16px" height="16px">
+										<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
 									</svg>
-								</td>
-							{/each}
-						</tr>
+									<span>{windMax?.toFixed(0) ?? '-'}-{gustMax?.toFixed(0) ?? '-'}</span>
+								</div>
 
-						<!-- Temperature row -->
-						<tr>
-							<th class="row-header" scope="row">Temperature</th>
-							{#each dates as date, i (i)}
-								{@const temp = hourly.temperature_2m[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td
-									class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
-									style="background: {getColor(
-										temp,
-										String(params.temperature_unit)
-									)}; color: {getTextColorForTemp(temp ?? 0, String(params.temperature_unit))}"
-								>
-									{temp?.toFixed(1) ?? '-'}
-								</td>
-							{/each}
-						</tr>
+								<div class="card-detail">
+									<svg class="fill-foreground detail-icon" width="16px" height="16px">
+										<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
+									</svg>
+									<span>
+										{Number(precipSum ?? 0).toFixed(0)}{params.precipitation_unit === 'mm'
+											? ' mm'
+											: "'"}
+									</span>
+								</div>
 
-						<!-- Precipitation row -->
-						<tr>
-							<th class="row-header" scope="row">Precipitation</th>
-							{#each dates as date, i (i)}
-								{@const val = hourly.precipitation[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
-									{val?.toFixed(1) ?? '-'}
-								</td>
-							{/each}
-						</tr>
+								<div class="card-detail">
+									<svg class="fill-foreground detail-icon" width="16px" height="16px">
+										<use xlink:href="/images/weather-icons/wi-day-sunny.svg#Layer_1"></use>
+									</svg>
+									<span>{Number((sunDuration ?? 0) / 3600).toFixed(0)} h</span>
+								</div>
 
-						<!-- Precipitation Probability row -->
-						<tr>
-							<th class="row-header" scope="row">Precip Prob.</th>
-							{#each dates as date, i (i)}
-								{@const prob = hourly.precipitation_probability[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td
-									class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
-									style="background: {getPrecipProbBg(prob ?? 0)}; color: {getPrecipProbColor(
-										prob ?? 0
-									)}"
-								>
-									{prob?.toFixed(0) ?? '-'}
-								</td>
-							{/each}
-						</tr>
-
-						<!-- Wind Speed row -->
-						<tr>
-							<th class="row-header" scope="row">Wind</th>
-							{#each dates as date, i (i)}
-								{@const wind = hourly.windspeed_10m[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
-									{wind?.toFixed(0) ?? '-'}
-								</td>
-							{/each}
-						</tr>
-
-						<!-- Relative Humidity row -->
-						<tr>
-							<th class="row-header" scope="row">Rel. Hum.</th>
-							{#each dates as date, i (i)}
-								{@const hum = hourly.relative_humidity_2m[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td
-									class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
-									style="background: {getHumidityBg(hum ?? 0)}"
-								>
-									{hum?.toFixed(0) ?? '-'}
-								</td>
-							{/each}
-						</tr>
-
-						<!-- Wind Direction row -->
-						<tr>
-							<th class="row-header" scope="row">Wind Dir.</th>
-							{#each dates as date, i (i)}
-								{@const windDir = hourly.winddirection_10m[i]}
-								{@const isNow = isCurrentHour(date)}
-								{@const isMidnight = date.getHours() === 0}
-								<td class="hour-cell icon-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
-									{#if windDir != null && !isNaN(windDir)}
-										<div style="transform: rotate({windDir}deg); display: inline-block">
-											<svg class="fill-foreground" width="22px" height="22px">
+								{#if windDir != null && !isNaN(windDir)}
+									<div class="card-wind-dir">
+										<div style="transform: {getWindArrowRotation(windDir)}; display: inline-block">
+											<svg class="fill-foreground" width="18px" height="18px">
 												<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"></use>
 											</svg>
 										</div>
-									{:else}
-										-
-									{/if}
-								</td>
-							{/each}
-						</tr>
-					</tbody>
-				</table>
+									</div>
+								{/if}
+							</button>
+						{/if}
+					{/each}
+				{/if}
+			</div>
+		</div>
+
+		<!-- Hourly Section Header -->
+		{#if fetchedHourly}
+			{@const hourly = fetchedHourly.hourly}
+			{@const dates = fetchedHourly.hourlyDates}
+			{@const filteredIdx = getFilteredIndices(dates)}
+			{@const maxPrecip = Math.max(
+				...hourly.precipitation.filter((v) => v != null && !isNaN(v)),
+				0.1
+			)}
+			{@const allTemps = hourly.temperature_2m.filter((t) => t != null && !isNaN(t))}
+			{@const minTemp = Math.min(...allTemps)}
+			{@const maxTemp = Math.max(...allTemps)}
+			{@const totalWidth = filteredIdx.length * CELL_W}
+
+			<div class="hourly-header">
+				<h3 class="hourly-title">
+					{selectedDay.toLocaleDateString('en-GB', { weekday: 'long' })} - Hourly
+				</h3>
+				<div class="interval-toggle">
+					<span class="interval-label">3h</span>
+					<button
+						class="toggle-track {hourlyInterval === 1 ? 'active' : ''}"
+						onclick={() => (hourlyInterval = hourlyInterval === 1 ? 3 : 1)}
+						title="Toggle between 1-hour and 3-hour intervals"
+					>
+						<span class="toggle-thumb {hourlyInterval === 1 ? 'right' : 'left'}"></span>
+					</button>
+					<span class="interval-label">1h</span>
+				</div>
+			</div>
+
+			<!-- Combined Hourly Meteogram + Table -->
+			<div bind:this={tableScrollDiv} class="hourly-scroll">
+				<div class="hourly-inner" style="min-width: {totalWidth + 96}px">
+					<!-- Temperature Curve + Icons Area -->
+					<div class="curve-area">
+						<div class="curve-row-header"></div>
+						<div class="curve-container" style="width: {totalWidth}px; height: {CURVE_H}px">
+							<!-- Cloud cover background -->
+							<svg
+								class="curve-svg"
+								width={totalWidth}
+								height={CURVE_H}
+								viewBox="0 0 {totalWidth} {CURVE_H}"
+							>
+								<defs>
+									<linearGradient id="tempGrad" x1="0" y1="0" x2="1" y2="0">
+										{#each filteredIdx as idx, i (idx)}
+											{@const t = hourly.temperature_2m[idx]}
+											<stop
+												offset="{(i / Math.max(filteredIdx.length - 1, 1)) * 100}%"
+												stop-color={getColor(t, String(params.temperature_unit))}
+												stop-opacity="0.45"
+											/>
+										{/each}
+									</linearGradient>
+								</defs>
+
+								<!-- Cloud cover bands per cell -->
+								{#each filteredIdx as idx, i (idx)}
+									{@const cloud = hourly.cloud_cover[idx]}
+									<rect
+										x={i * CELL_W}
+										y={0}
+										width={CELL_W}
+										height={CURVE_H}
+										fill="rgb(160,175,190)"
+										opacity={getCloudOpacity(cloud)}
+									/>
+								{/each}
+
+								<!-- Temperature area fill -->
+								<path
+									d={buildAreaPath(hourly.temperature_2m, filteredIdx, minTemp, maxTemp)}
+									fill="url(#tempGrad)"
+								/>
+
+								<!-- Temperature curve line -->
+								<path
+									d={buildCurvePath(hourly.temperature_2m, filteredIdx, minTemp, maxTemp)}
+									fill="none"
+									stroke="#d84315"
+									stroke-width="2.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+
+								<!-- Temperature value labels -->
+								{#each filteredIdx as idx, i (idx)}
+									{@const t = hourly.temperature_2m[idx]}
+									{@const rangeT = maxTemp - minTemp || 1}
+									{@const y = CURVE_H - 20 - ((t - minTemp) / rangeT) * (CURVE_H - 40)}
+									<text
+										x={i * CELL_W + CELL_W / 2}
+										y={y - 8}
+										text-anchor="middle"
+										class="curve-temp-label"
+										fill="currentColor"
+									>
+										{t?.toFixed(0) ?? '-'}°
+									</text>
+								{/each}
+							</svg>
+
+							<!-- Weather icons overlaid on top -->
+							<div class="curve-icons" style="width: {totalWidth}px">
+								{#each filteredIdx as idx, i (idx)}
+									{@const wCode = hourly.weather_code[idx]}
+									{@const daytime = isDaytimeHour(dates[idx].getHours())}
+									<div class="curve-icon-cell" style="width: {CELL_W}px; left: {i * CELL_W}px">
+										<svg class="fill-foreground" width="20px" height="20px">
+											<use
+												xlink:href="/images/weather-icons/wi-{daytime
+													? 'day'
+													: 'night'}-{weatherCodes[wCode as keyof typeof weatherCodes] ??
+													'clear'}.svg#Layer_1"
+											></use>
+										</svg>
+									</div>
+								{/each}
+							</div>
+						</div>
+					</div>
+
+					<!-- Hourly Data Table -->
+					<table class="hourly-table">
+						<caption class="sr-only">Hourly weather details for {location.name}</caption>
+						<tbody>
+							<!-- Time row -->
+							<tr>
+								<th class="row-header" scope="row">
+									<svg class="fill-foreground inline-block" width="14px" height="14px">
+										<use xlink:href="/images/weather-icons/wi-time-4.svg#Layer_1"></use>
+									</svg>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell time-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
+										data-date={date.getDate()}
+									>
+										{pad(date.getHours())}<sup class="time-sup">00</sup>
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Precipitation bars row -->
+							<tr>
+								<th class="row-header" scope="row">
+									<div class="row-header-stack">
+										<span class="row-unit">{hourlyInterval}h</span>
+										<span class="row-unit">{params.precipitation_unit === 'mm' ? 'mm' : 'in'}</span>
+									</div>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const val = hourly.precipitation[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell precip-cell {isNow ? 'now' : ''} {isMidnight
+											? 'midnight'
+											: ''}"
+									>
+										<div class="precip-bar-container">
+											{#if val > 0}
+												<div
+													class="precip-bar"
+													style="height: {getPrecipBarHeight(val, maxPrecip)}%"
+												></div>
+											{/if}
+										</div>
+										<span class="precip-val">{val > 0 ? val.toFixed(1) : ''}</span>
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Precipitation Probability -->
+							<tr>
+								<th class="row-header" scope="row">
+									<span class="row-unit">%</span>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const prob = hourly.precipitation_probability[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
+										style="background: {getPrecipProbBg(prob ?? 0)}; color: {getPrecipProbColor(
+											prob ?? 0
+										)}"
+									>
+										{prob != null ? prob.toFixed(0) + '%' : '-'}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Precipitation type icons -->
+							<tr>
+								<th class="row-header" scope="row">
+									<svg class="fill-foreground inline-block" width="14px" height="14px">
+										<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
+									</svg>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const val = hourly.precipitation[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell icon-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
+									>
+										{#if val > 0}
+											<svg
+												class="fill-foreground"
+												width="16px"
+												height="16px"
+												style="opacity: {Math.min(1, val / 3)}"
+											>
+												<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
+											</svg>
+										{/if}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Wind Speed + Direction -->
+							<tr>
+								<th class="row-header" scope="row">
+									<svg class="fill-foreground inline-block" width="14px" height="14px">
+										<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
+									</svg>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const _wind = hourly.windspeed_10m[idx]}
+									{@const windDir = hourly.winddirection_10m[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell wind-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
+									>
+										{#if windDir != null && !isNaN(windDir)}
+											<div class="wind-arrow" style="transform: {getWindArrowRotation(windDir)}">
+												<svg class="fill-foreground" width="16px" height="16px">
+													<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"
+													></use>
+												</svg>
+											</div>
+										{/if}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Apparent Temperature (Feels Like) -->
+							<tr>
+								<th class="row-header" scope="row">
+									<svg class="fill-foreground inline-block" width="14px" height="14px">
+										<use xlink:href="/images/weather-icons/wi-thermometer.svg#Layer_1"></use>
+									</svg>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const temp = hourly.apparent_temperature[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
+										{temp != null ? temp.toFixed(0) + '°' : '-'}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Humidity -->
+							<tr>
+								<th class="row-header" scope="row">
+									<span class="row-unit">%</span>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const hum = hourly.relative_humidity_2m[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
+										style="background: {getHumidityBg(hum ?? 0)}"
+									>
+										{hum != null ? hum.toFixed(0) + '%' : '-'}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Wind Direction Labels -->
+							<tr>
+								<th class="row-header" scope="row">
+									<svg class="fill-foreground inline-block" width="14px" height="14px">
+										<use xlink:href="/images/weather-icons/wi-wind-deg.svg#Layer_1"></use>
+									</svg>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const windDir = hourly.winddirection_10m[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td
+										class="hour-cell icon-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}"
+									>
+										{#if windDir != null && !isNaN(windDir)}
+											<div style="transform: rotate({windDir}deg); display: inline-block">
+												<svg class="fill-foreground" width="18px" height="18px">
+													<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"
+													></use>
+												</svg>
+											</div>
+										{:else}
+											-
+										{/if}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Wind Speed values -->
+							<tr>
+								<th class="row-header" scope="row">
+									<div class="row-header-stack">
+										<svg class="fill-foreground inline-block" width="14px" height="14px">
+											<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
+										</svg>
+									</div>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const wind = hourly.windspeed_10m[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
+										{wind?.toFixed(0) ?? '-'}
+									</td>
+								{/each}
+							</tr>
+
+							<!-- Dew Point -->
+							<tr>
+								<th class="row-header" scope="row">
+									<svg class="fill-foreground inline-block" width="14px" height="14px">
+										<use xlink:href="/images/weather-icons/wi-raindrops.svg#Layer_1"></use>
+									</svg>
+								</th>
+								{#each filteredIdx as idx (idx)}
+									{@const dp = hourly.dew_point_2m[idx]}
+									{@const date = dates[idx]}
+									{@const isNow = isCurrentHour(date)}
+									{@const isMidnight = date.getHours() === 0}
+									<td class="hour-cell {isNow ? 'now' : ''} {isMidnight ? 'midnight' : ''}">
+										{dp != null ? dp.toFixed(0) + '°' : '-'}
+									</td>
+								{/each}
+							</tr>
+						</tbody>
+					</table>
+				</div>
 			</div>
 		{/if}
 
-		<!-- ─── Toolbar ───────────────────────────────────────────────────── -->
+		<!-- Sunrise / Sunset Info -->
+		{#if fetchedDaily}
+			{@const sunriseTs = fetchedDaily.daily.sunrise[selectedDayIndex]}
+			{@const sunsetTs = fetchedDaily.daily.sunset[selectedDayIndex]}
+			{#if sunriseTs && sunsetTs}
+				{@const sunrise = new Date(sunriseTs * 1000)}
+				{@const sunset = new Date(sunsetTs * 1000)}
+				<div class="sun-info">
+					<div class="sun-item">
+						<svg class="fill-foreground" width="24px" height="24px">
+							<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"></use>
+						</svg>
+						<span>{pad(sunrise.getHours())}:{pad(sunrise.getMinutes())}</span>
+					</div>
+					<div class="sun-item">
+						<svg class="fill-foreground" width="24px" height="24px">
+							<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"></use>
+						</svg>
+						<span>{pad(sunset.getHours())}:{pad(sunset.getMinutes())}</span>
+					</div>
+				</div>
+			{/if}
+		{/if}
 
-		<div class="mt-6 md:mt-10">
-			<ChartToolbar charts={chartInstances} fileName="week-forecast" />
+		<!-- Detailed Charts Toggle -->
+		<div class="charts-toggle-section">
+			<button class="charts-toggle-btn" onclick={() => (showDetailedCharts = !showDetailedCharts)}>
+				<span>Detailed Meteogram Charts</span>
+				<svg
+					class="toggle-chevron {showDetailedCharts ? 'open' : ''}"
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<polyline points="6 9 12 15 18 9" />
+				</svg>
+			</button>
 		</div>
+
+		{#if showDetailedCharts}
+			<div class="detailed-charts" in:fade={{ duration: 200 }}>
+				<div class="mb-2 flex items-center gap-3">
+					<h3 class="text-xl font-bold">
+						{selectedDay.toLocaleDateString('en-GB', { weekday: 'long' })}
+						<small>
+							{selectedDay.getDate() === new Date(today.getTime() - 24 * 60 * 60 * 1000).getDate()
+								? ' (Yesterday)'
+								: ''}
+							{selectedDay.getDate() === today.getDate() ? ' (Today)' : ''}
+							{selectedDay.getDate() === new Date(today.getTime() + 24 * 60 * 60 * 1000).getDate()
+								? ' (Tomorrow)'
+								: ''}
+						</small>
+					</h3>
+					<button
+						type="button"
+						class="zoom-reset-btn"
+						title="Show all days (Esc)"
+						onclick={resetZoom}
+					>
+						Show All
+					</button>
+				</div>
+
+				<ChartContainer {loading} chartCount={3} chartHeight={300}>
+					{#each chartOptions as option, i (i)}
+						<EChart
+							{option}
+							height={i === 2 ? '320px' : '300px'}
+							onChartReady={handleChartReady}
+							bind:this={chartComponents[i]}
+						/>
+					{/each}
+				</ChartContainer>
+
+				<div class="mt-6 md:mt-10">
+					<ChartToolbar charts={chartInstances} fileName="week-forecast" />
+				</div>
+			</div>
+		{/if}
 	</div>
 
-	<!-- ─── Sunrise / Sunset ──────────────────────────────────────────────── -->
-	{#if fetchedDaily}
-		{@const sunriseTs = fetchedDaily.daily.sunrise[selectedDayIndex]}
-		{@const sunsetTs = fetchedDaily.daily.sunset[selectedDayIndex]}
-		{#if sunriseTs && sunsetTs}
-			{@const sunrise = new Date(sunriseTs * 1000)}
-			{@const sunset = new Date(sunsetTs * 1000)}
-			<div class="mt-6">
-				<div class="flex items-center gap-1">
-					<svg class="fill-foreground" width="28px" height="28px">
-						<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"></use>
-					</svg>Sunrise: {pad(sunrise.getHours())}:{pad(sunrise.getMinutes())}
-				</div>
-				<div class="flex items-center gap-1">
-					<svg class="fill-foreground" width="28px" height="28px">
-						<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"></use>
-					</svg>
-					Sunset: {pad(sunset.getHours())}:{pad(sunset.getMinutes())}
-				</div>
-			</div>
-		{/if}
-	{/if}
-
-	<!-- ─── Model Selector ────────────────────────────────────────────────── -->
+	<!-- Model Selector -->
 	<div>
 		<div class="mt-6 flex gap-6 md:mt-12">
 			<div class="relative w-1/2">
@@ -1093,17 +1356,426 @@
 </div>
 
 <style>
-	.weather-week-icon {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background: #0061a5;
-		margin: 5px 0;
-		border-radius: 5px;
+	/* ═══ Daily Cards ═══════════════════════════════════════════════════════════ */
+
+	.daily-cards-wrapper {
+		margin-bottom: 1.5rem;
+		min-height: 260px;
 	}
 
-	/* ─── Zoom Reset Button ─────────────────────────────────────────────── */
+	.daily-cards-scroll {
+		display: flex;
+		gap: 4px;
+		overflow-x: auto;
+		scrollbar-width: thin;
+		padding-bottom: 4px;
+	}
+
+	.daily-card {
+		flex: 0 0 auto;
+		min-width: 110px;
+		max-width: 130px;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 8px 6px;
+		border-radius: 12px;
+		cursor: pointer;
+		border: 2px solid transparent;
+		background: hsl(var(--card));
+		transition: all 200ms ease;
+		gap: 2px;
+	}
+
+	.daily-card:hover {
+		background: hsl(var(--accent));
+	}
+
+	.daily-card.selected {
+		border-color: hsl(var(--primary));
+		background: hsl(var(--accent));
+		transform: scale(1.03);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+	}
+
+	.card-day-name {
+		font-weight: 700;
+		font-size: 14px;
+		letter-spacing: 0.5px;
+	}
+
+	.card-day-date {
+		font-size: 11px;
+		color: hsl(var(--muted-foreground));
+		margin-bottom: 2px;
+	}
+
+	.card-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding: 4px 0;
+		background: #0061a5;
+		border-radius: 6px;
+		margin: 3px 0;
+	}
+
+	.card-temp-max {
+		width: 100%;
+		text-align: center;
+		font-weight: 600;
+		font-size: 15px;
+		padding: 3px 0;
+		border-radius: 4px 4px 0 0;
+	}
+
+	.card-temp-min {
+		width: 100%;
+		text-align: center;
+		font-weight: 600;
+		font-size: 15px;
+		padding: 3px 0;
+		border-radius: 0 0 4px 4px;
+		margin-bottom: 4px;
+	}
+
+	.card-detail {
+		display: flex;
+		align-items: center;
+		gap: 3px;
+		font-size: 11px;
+		white-space: nowrap;
+	}
+
+	.detail-icon {
+		flex-shrink: 0;
+	}
+
+	.card-wind-dir {
+		margin-top: 2px;
+	}
+
+	/* ═══ Hourly Section ════════════════════════════════════════════════════════ */
+
+	.hourly-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 8px;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.hourly-title {
+		font-size: 1.15rem;
+		font-weight: 700;
+	}
+
+	.interval-toggle {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 13px;
+		font-weight: 600;
+	}
+
+	.interval-label {
+		color: hsl(var(--muted-foreground));
+		user-select: none;
+	}
+
+	.toggle-track {
+		position: relative;
+		width: 44px;
+		height: 24px;
+		border-radius: 12px;
+		background: hsl(var(--muted));
+		border: 1px solid hsl(var(--border));
+		cursor: pointer;
+		transition: background 200ms;
+	}
+
+	.toggle-track.active {
+		background: hsl(var(--primary));
+	}
+
+	.toggle-thumb {
+		position: absolute;
+		top: 2px;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: white;
+		transition: left 200ms;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	}
+
+	.toggle-thumb.left {
+		left: 2px;
+	}
+
+	.toggle-thumb.right {
+		left: 22px;
+	}
+
+	/* ═══ Horizontal Scroll Container ═══════════════════════════════════════════ */
+
+	.hourly-scroll {
+		overflow-x: auto;
+		overflow-y: hidden;
+		scrollbar-width: thin;
+		margin-left: -1.25rem;
+		margin-right: -1.25rem;
+		border: 1px solid hsl(var(--border));
+		border-radius: 8px;
+	}
+
+	@media (min-width: 768px) {
+		.hourly-scroll {
+			margin-left: 0;
+			margin-right: 0;
+		}
+	}
+
+	.hourly-inner {
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* ═══ Temperature Curve Area ═══════════════════════════════════════════════ */
+
+	.curve-area {
+		display: flex;
+		border-bottom: 2px solid hsl(var(--border));
+		background: hsl(var(--card) / 0.5);
+	}
+
+	.curve-row-header {
+		position: sticky;
+		left: 0;
+		z-index: 10;
+		min-width: 90px;
+		max-width: 90px;
+		background: hsl(var(--background));
+		border-right: 2px solid hsl(var(--border));
+	}
+
+	.curve-container {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.curve-svg {
+		display: block;
+	}
+
+	.curve-temp-label {
+		font-size: 10px;
+		font-weight: 600;
+	}
+
+	.curve-icons {
+		position: absolute;
+		top: 2px;
+		left: 0;
+		display: flex;
+		pointer-events: none;
+	}
+
+	.curve-icon-cell {
+		position: absolute;
+		top: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 22px;
+	}
+
+	/* ═══ Hourly Data Table ═══════════════════════════════════════════════════ */
+
+	.hourly-table {
+		border-collapse: collapse;
+		white-space: nowrap;
+		font-size: 11px;
+		width: 100%;
+	}
+
+	.hourly-table tr {
+		border-top: 1px solid hsl(var(--border));
+	}
+
+	.hourly-table tr:first-child {
+		border-top: none;
+	}
+
+	.row-header {
+		position: sticky;
+		left: 0;
+		z-index: 10;
+		min-width: 90px;
+		max-width: 90px;
+		padding: 3px 6px;
+		text-align: center;
+		font-weight: 600;
+		font-size: 11px;
+		background: hsl(var(--background));
+		border-right: 2px solid hsl(var(--border));
+		white-space: nowrap;
+	}
+
+	.row-header-stack {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0;
+		line-height: 1.1;
+	}
+
+	.row-unit {
+		font-size: 10px;
+		font-weight: 600;
+		color: hsl(var(--muted-foreground));
+	}
+
+	.hour-cell {
+		min-width: 38px;
+		max-width: 38px;
+		padding: 3px 1px;
+		text-align: center;
+		font-size: 11px;
+		border-right: 1px solid hsl(var(--border) / 0.4);
+	}
+
+	.hour-cell.midnight {
+		border-left: 2px solid hsl(var(--primary) / 0.5);
+	}
+
+	.hour-cell.now {
+		font-weight: bold;
+		box-shadow: inset 0 0 0 2px hsl(var(--destructive) / 0.5);
+	}
+
+	.time-cell {
+		font-weight: 700;
+		font-size: 10px;
+		background: hsl(var(--muted) / 0.3);
+	}
+
+	.time-sup {
+		font-size: 7px;
+		vertical-align: super;
+	}
+
+	/* ═══ Precipitation Bar ═══════════════════════════════════════════════════ */
+
+	.precip-cell {
+		vertical-align: bottom;
+		padding: 1px;
+	}
+
+	.precip-bar-container {
+		width: 100%;
+		height: 22px;
+		display: flex;
+		align-items: flex-end;
+		justify-content: center;
+	}
+
+	.precip-bar {
+		width: 60%;
+		min-height: 2px;
+		background: linear-gradient(to top, rgba(30, 136, 229, 0.5), rgba(30, 136, 229, 0.9));
+		border-radius: 2px 2px 0 0;
+	}
+
+	.precip-val {
+		display: block;
+		font-size: 9px;
+		line-height: 1;
+		color: hsl(var(--muted-foreground));
+		text-align: center;
+	}
+
+	.icon-cell {
+		padding: 2px;
+		vertical-align: middle;
+		line-height: 0;
+	}
+
+	.icon-cell > div,
+	.icon-cell > svg {
+		display: inline-block;
+	}
+
+	/* ═══ Wind Cell ═══════════════════════════════════════════════════════════ */
+
+	.wind-cell {
+		vertical-align: middle;
+		line-height: 0;
+	}
+
+	.wind-arrow {
+		display: inline-block;
+	}
+
+	/* ═══ Sun Info ═════════════════════════════════════════════════════════════ */
+
+	.sun-info {
+		display: flex;
+		gap: 1.5rem;
+		margin-top: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.sun-item {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		font-size: 14px;
+	}
+
+	/* ═══ Detailed Charts Toggle ═══════════════════════════════════════════════ */
+
+	.charts-toggle-section {
+		margin-top: 1.5rem;
+		margin-bottom: 0.5rem;
+	}
+
+	.charts-toggle-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		padding: 0.5rem 1rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		color: hsl(var(--muted-foreground));
+		background: hsl(var(--muted) / 0.5);
+		border: 1px solid hsl(var(--border));
+		border-radius: var(--radius, 0.375rem);
+		cursor: pointer;
+		transition: all 150ms ease;
+	}
+
+	.charts-toggle-btn:hover {
+		color: hsl(var(--foreground));
+		background: hsl(var(--muted));
+	}
+
+	.toggle-chevron {
+		transition: transform 200ms;
+	}
+
+	.toggle-chevron.open {
+		transform: rotate(180deg);
+	}
+
+	.detailed-charts {
+		margin-top: 0.5rem;
+	}
+
+	/* ═══ Zoom Reset Button ═══════════════════════════════════════════════════ */
 
 	.zoom-reset-btn {
 		display: inline-flex;
@@ -1128,68 +1800,22 @@
 		background: hsl(var(--muted));
 	}
 
-	/* ─── Hourly Data Table ─────────────────────────────────────────────── */
+	/* ═══ Responsive ══════════════════════════════════════════════════════════ */
 
-	.hourly-table-scroll {
-		scrollbar-width: thin;
-	}
+	@media (max-width: 768px) {
+		.daily-card {
+			min-width: 95px;
+			max-width: 110px;
+		}
 
-	.hourly-table {
-		border-collapse: collapse;
-		white-space: nowrap;
-		font-size: 12px;
-		border: 1px solid hsl(var(--border));
-	}
+		.card-icon svg {
+			width: 40px;
+			height: 40px;
+		}
 
-	.hourly-table tr {
-		border-top: 1px solid hsl(var(--border));
-	}
-
-	.hourly-table tr:first-child {
-		border-top: none;
-	}
-
-	.row-header {
-		position: sticky;
-		left: 0;
-		z-index: 10;
-		min-width: 90px;
-		max-width: 90px;
-		padding: 4px 8px;
-		text-align: left;
-		font-weight: 600;
-		font-size: 11px;
-		background: hsl(var(--background));
-		border-right: 2px solid hsl(var(--border));
-		white-space: nowrap;
-	}
-
-	.hour-cell {
-		min-width: 36px;
-		max-width: 36px;
-		padding: 3px 2px;
-		text-align: center;
-		font-size: 12px;
-		border-right: 1px solid hsl(var(--border) / 0.5);
-	}
-
-	.hour-cell.midnight {
-		border-left: 2px solid hsl(var(--border));
-	}
-
-	.hour-cell.now {
-		font-weight: bold;
-		box-shadow: inset 0 0 0 2px hsl(var(--destructive) / 0.5);
-	}
-
-	.icon-cell {
-		padding: 2px;
-		vertical-align: middle;
-		line-height: 0;
-	}
-
-	.icon-cell > div,
-	.icon-cell > svg {
-		display: inline-block;
+		.card-temp-max,
+		.card-temp-min {
+			font-size: 13px;
+		}
 	}
 </style>