revamp weather UI: cards, meteograms, units in header, location favorites and range controls

src/lib/components/navigation/header.svelte

@@ -10,6 +10,7 @@
 	import { buildLocationRoute } from '$lib/utils/location';
 
 	import LocationSearch from '$lib/components/location/location-search.svelte';
+	import UnitSelector from '$lib/components/unit-selector.svelte';
 
 	interface Props {
 		onMenuToggle?: () => void;
@@ -68,22 +69,23 @@
 	<!-- Current location display -->
 	{#if location}
 		<div
-			class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 sm:flex"
+			class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex"
 		>
 			<img
-				class="h-6 w-6 rounded-full ring-1 ring-border"
+				class="h-6 w-6 shrink-0 rounded-full ring-1 ring-border"
 				src="/images/country-flags/{(location.country_code || 'united_nations').toLowerCase()}.svg"
 				alt={location.country}
 			/>
-			<span class="text-sm font-semibold text-foreground">
+			<!-- full location (desktop); the page hero carries it on smaller screens -->
+			<span class="whitespace-nowrap text-sm font-semibold text-foreground">
 				{location.name}
+				{#if location.admin1 || location.country}
+					<span class="font-normal text-muted-foreground">
+						· {#if location.admin1}{location.admin1},
+						{/if}{location.country ?? ''}
+					</span>
+				{/if}
 			</span>
-			{#if location.admin1 || location.country}
-				<span class="hidden text-xs text-muted-foreground lg:inline">
-					{#if location.admin1}{location.admin1},{/if}
-					{location.country}
-				</span>
-			{/if}
 		</div>
 	{/if}
 
@@ -100,6 +102,9 @@
 		/>
 	</div>
 
+	<!-- Measurement units -->
+	<UnitSelector />
+
 	<!-- Theme toggle: system → light → dark -->
 	<button
 		class="flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-border/70 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"