diff --git a/src/lib/components/ElevationChart.svelte b/src/lib/components/ElevationChart.svelte
index 44ebc62..7f5d93e 100644
--- a/src/lib/components/ElevationChart.svelte
+++ b/src/lib/components/ElevationChart.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
 	let {
 		profile,
+		hoverD = null,
 		onhover,
 		onselect
 	}: {
 		profile: { d: number; ele: number }[];
+		/** shared hover distance controlled by the page, so charts stay in sync */
+		hoverD?: number | null;
 		onhover?: (d: number | null) => void;
 		onselect?: (d: number) => void;
 	} = $props();
@@ -49,22 +52,23 @@
 		`${linePath}L${x(totalDist).toFixed(1)},${height - pad.bottom}L${pad.left},${height - pad.bottom}Z`
 	);
 
-	let hover = $state<{ d: number; ele: number } | null>(null);
-
-	function onmove(event: PointerEvent) {
-		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
-		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-		const target = frac * totalDist;
-		// binary search closest point
+	// snap the shared hover distance to this chart's nearest point
+	const hover = $derived.by(() => {
+		if (hoverD === null || profile.length === 0) return null;
 		let lo = 0;
 		let hi = profile.length - 1;
 		while (hi - lo > 1) {
 			const mid = (lo + hi) >> 1;
-			if (profile[mid].d < target) lo = mid;
+			if (profile[mid].d < hoverD) lo = mid;
 			else hi = mid;
 		}
-		hover = target - profile[lo].d < profile[hi].d - target ? profile[lo] : profile[hi];
-		onhover?.(hover.d);
+		return hoverD - profile[lo].d < profile[hi].d - hoverD ? profile[lo] : profile[hi];
+	});
+
+	function onmove(event: PointerEvent) {
+		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
+		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		onhover?.(frac * totalDist);
 	}
 
 	const tooltipLeft = $derived(hover ? Math.min(Math.max(x(hover.d), 70), width - 70) : 0);
@@ -105,10 +109,7 @@
 			fill="transparent"
 			onpointermove={onmove}
 			onclick={() => hover && onselect?.(hover.d)}
-			onpointerleave={() => {
-				hover = null;
-				onhover?.(null);
-			}}
+			onpointerleave={() => onhover?.(null)}
 		/>
 	</svg>
 	{#if hover}
diff --git a/src/lib/components/MapSlot.svelte b/src/lib/components/MapSlot.svelte
index 460b3df..f4f118b 100644
--- a/src/lib/components/MapSlot.svelte
+++ b/src/lib/components/MapSlot.svelte
@@ -1,23 +1,11 @@
 <script lang="ts">
 	import { mapState } from '$lib/map-state.svelte';
 
-	let { height = '440px' }: { height?: string } = $props();
-	let el: HTMLDivElement;
-
-	// move the persistent map into this page's slot; return it on leave
+	// Marker component: pages render this to request the persistent map,
+	// which the layout shows in its fixed spot below the topbar - the same
+	// position on every page, so navigation never moves it.
 	$effect(() => {
-		if (mapState.carrier && el) {
-			mapState.attach(el);
-			return () => mapState.detach();
-		}
+		mapState.setWanted(true);
+		return () => mapState.setWanted(false);
 	});
 </script>
-
-<div class="map-slot" bind:this={el} style:height></div>
-
-<style>
-	.map-slot {
-		width: 100%;
-		border-radius: 0.875rem;
-	}
-</style>
diff --git a/src/lib/components/SpeedChart.svelte b/src/lib/components/SpeedChart.svelte
index 47c3732..e8c3918 100644
--- a/src/lib/components/SpeedChart.svelte
+++ b/src/lib/components/SpeedChart.svelte
@@ -3,10 +3,13 @@
 
 	let {
 		timed,
+		hoverD = null,
 		onhover,
 		onselect
 	}: {
 		timed: { d: number; t: number }[];
+		/** shared hover distance controlled by the page, so charts stay in sync */
+		hoverD?: number | null;
 		onhover?: (d: number | null) => void;
 		onselect?: (d: number) => void;
 	} = $props();
@@ -82,21 +85,23 @@
 			: ''
 	);
 
-	let hover = $state<{ d: number; v: number } | null>(null);
-
-	function onmove(event: PointerEvent) {
-		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
-		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
-		const target = frac * totalDist;
+	// snap the shared hover distance to this chart's nearest point
+	const hover = $derived.by(() => {
+		if (hoverD === null || series.length === 0) return null;
 		let lo = 0;
 		let hi = series.length - 1;
 		while (hi - lo > 1) {
 			const mid = (lo + hi) >> 1;
-			if (series[mid].d < target) lo = mid;
+			if (series[mid].d < hoverD) lo = mid;
 			else hi = mid;
 		}
-		hover = target - series[lo].d < series[hi].d - target ? series[lo] : series[hi];
-		onhover?.(hover.d);
+		return hoverD - series[lo].d < series[hi].d - hoverD ? series[lo] : series[hi];
+	});
+
+	function onmove(event: PointerEvent) {
+		const rect = (event.currentTarget as SVGRectElement).getBoundingClientRect();
+		const frac = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+		onhover?.(frac * totalDist);
 	}
 
 	const tooltipLeft = $derived(hover ? Math.min(Math.max(x(hover.d), 70), width - 70) : 0);
@@ -144,10 +149,7 @@
 			fill="transparent"
 			onpointermove={onmove}
 			onclick={() => hover && onselect?.(hover.d)}
-			onpointerleave={() => {
-				hover = null;
-				onhover?.(null);
-			}}
+			onpointerleave={() => onhover?.(null)}
 		/>
 	</svg>
 	{#if hover}
diff --git a/src/lib/map-state.svelte.ts b/src/lib/map-state.svelte.ts
index 2881978..3255b52 100644
--- a/src/lib/map-state.svelte.ts
+++ b/src/lib/map-state.svelte.ts
@@ -13,6 +13,7 @@ let detailTrack = $state<MapTrack | null>(null);
 let hoverPoint = $state<{ lat: number; lon: number } | null>(null);
 let carrier = $state<HTMLElement | null>(null);
 let active = $state(false);
+let wanted = $state(false);
 
 let home: HTMLElement | null = null;
 let peakClickHandler: ((id: number) => void) | null = null;
@@ -42,6 +43,12 @@ export const mapState = {
 	get active() {
 		return active;
 	},
+	get wanted() {
+		return wanted;
+	},
+	setWanted(value: boolean) {
+		wanted = value;
+	},
 
 	setPeaks(value: MapPeak[]) {
 		peaks = value;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 923999b..99c4804 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,11 +9,20 @@
 
 	let mapHome: HTMLDivElement;
 	let mapCarrier: HTMLDivElement;
+	let layoutSlot: HTMLDivElement;
 
 	$effect(() => {
 		if (mapCarrier && mapHome) mapState.registerCarrier(mapCarrier, mapHome);
 	});
 
+	// show the persistent map in its fixed spot whenever the page asks for it
+	$effect(() => {
+		if (mapState.wanted && layoutSlot && mapState.carrier) {
+			mapState.attach(layoutSlot);
+			return () => mapState.detach();
+		}
+	});
+
 	let mapComponent: Map | undefined = $state();
 	$effect(() => {
 		if (mapComponent) {
@@ -136,6 +145,11 @@
 </header>
 
 <main>
+	<div
+		class="layout-map-slot"
+		bind:this={layoutSlot}
+		style:display={mapState.wanted ? 'block' : 'none'}
+	></div>
 	{@render children()}
 </main>
 
@@ -378,4 +392,8 @@
 		width: 100%;
 		height: 100%;
 	}
+	.layout-map-slot {
+		height: min(440px, 52vh);
+		margin-bottom: 1.75rem;
+	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7f83d3f..075ff39 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -30,8 +30,7 @@
 	<StatTile label="Total ascent" value={fmtElevation(data.totals.elev_gain_m)} />
 </div>
 
-<h2>Worldmap</h2>
-<MapSlot height="440px" />
+<MapSlot />
 
 <h2>Recent activities</h2>
 {#if data.activities.length === 0}
diff --git a/src/routes/activities/[id]/+page.svelte b/src/routes/activities/[id]/+page.svelte
index 6e92c05..c34e983 100644
--- a/src/routes/activities/[id]/+page.svelte
+++ b/src/routes/activities/[id]/+page.svelte
@@ -1,282 +1,328 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
-	import MapSlot from '$lib/components/MapSlot.svelte';
-	import ElevationChart from '$lib/components/ElevationChart.svelte';
-	import SpeedChart from '$lib/components/SpeedChart.svelte';
-	import StatTile from '$lib/components/StatTile.svelte';
-	import { mapState } from '$lib/map-state.svelte';
-	import { fmtDate, fmtDistance, fmtDuration, fmtElevation, fmtSpeed } from '$lib/format';
+  import { enhance } from "$app/forms";
+  import MapSlot from "$lib/components/MapSlot.svelte";
+  import ElevationChart from "$lib/components/ElevationChart.svelte";
+  import SpeedChart from "$lib/components/SpeedChart.svelte";
+  import StatTile from "$lib/components/StatTile.svelte";
+  import { mapState } from "$lib/map-state.svelte";
+  import {
+    fmtDate,
+    fmtDistance,
+    fmtDuration,
+    fmtElevation,
+    fmtSpeed,
+  } from "$lib/format";
 
-	let { data, form } = $props();
-	const a = $derived(data.activity);
+  let { data, form } = $props();
+  const a = $derived(data.activity);
 
-	const avgSpeed = $derived(
-		a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null
-	);
+  const avgSpeed = $derived(
+    a.moving_s && a.moving_s > 0 ? fmtSpeed(a.distance_m / a.moving_s) : null,
+  );
 
-	let editing = $state(false);
-	let saving = $state(false);
+  let editing = $state(false);
+  let saving = $state(false);
 
-	// chart hover -> marker on the map at the matching track position
-	function pointAt(d: number): [number, number] {
-		const trackD = data.trackD;
-		let lo = 0;
-		let hi = trackD.length - 1;
-		while (hi - lo > 1) {
-			const mid = (lo + hi) >> 1;
-			if (trackD[mid] < d) lo = mid;
-			else hi = mid;
-		}
-		return data.latlngs[d - trackD[lo] < trackD[hi] - d ? lo : hi];
-	}
+  // chart hover -> marker on the map at the matching track position
+  function pointAt(d: number): [number, number] {
+    const trackD = data.trackD;
+    let lo = 0;
+    let hi = trackD.length - 1;
+    while (hi - lo > 1) {
+      const mid = (lo + hi) >> 1;
+      if (trackD[mid] < d) lo = mid;
+      else hi = mid;
+    }
+    return data.latlngs[d - trackD[lo] < trackD[hi] - d ? lo : hi];
+  }
 
-	function chartHover(d: number | null) {
-		if (d === null) {
-			mapState.setHoverPoint(null);
-			return;
-		}
-		const [lat, lon] = pointAt(d);
-		mapState.setHoverPoint({ lat, lon });
-	}
+  let hoverD = $state<number | null>(null);
 
-	// chart click -> fly the map to that spot
-	function chartSelect(d: number) {
-		const [lat, lon] = pointAt(d);
-		mapState.flyTo(lat, lon, 14.5);
-	}
+  function chartHover(d: number | null) {
+    hoverD = d;
+    if (d === null) {
+      mapState.setHoverPoint(null);
+      return;
+    }
+    const [lat, lon] = pointAt(d);
+    mapState.setHoverPoint({ lat, lon });
+  }
 
-	// the persistent map keeps the overview visible, dims the rest,
-	// and animates toward this activity
-	$effect(() => {
-		mapState.setDetailTrack({
-			id: a.id,
-			name: a.name,
-			username: a.username,
-			type: a.type,
-			date: a.date,
-			distance_m: a.distance_m,
-			latlngs: data.latlngs
-		});
-		mapState.setHighlight(a.id);
-		mapState.setPeaks(data.bagged);
-		mapState.setFocus(JSON.parse(a.bounds));
-		return () => mapState.reset();
-	});
+  // chart click -> fly the map to that spot
+  function chartSelect(d: number) {
+    const [lat, lon] = pointAt(d);
+    mapState.flyTo(lat, lon);
+  }
+
+  // the persistent map keeps the overview visible, dims the rest,
+  // and animates toward this activity
+  $effect(() => {
+    mapState.setDetailTrack({
+      id: a.id,
+      name: a.name,
+      username: a.username,
+      type: a.type,
+      date: a.date,
+      distance_m: a.distance_m,
+      latlngs: data.latlngs,
+    });
+    mapState.setHighlight(a.id);
+    mapState.setPeaks(data.bagged);
+    mapState.setFocus(JSON.parse(a.bounds));
+    return () => mapState.reset();
+  });
 </script>
 
 <svelte:head>
-	<title>{a.name} · Streba</title>
+  <title>{a.name} · Streba</title>
 </svelte:head>
 
 <a class="back" href="/">← Overview</a>
 
 <div class="head">
-	{#if editing}
-		<form
-			class="edit-form"
-			method="POST"
-			action="?/update"
-			use:enhance={() => {
-				saving = true;
-				return async ({ update, result }) => {
-					saving = false;
-					if (result.type === 'success') editing = false;
-					await update();
-				};
-			}}
-		>
-			<input class="edit-name" name="name" required maxlength="120" value={a.name} aria-label="Activity name" />
-			<input
-				class="edit-type"
-				name="type"
-				required
-				maxlength="40"
-				value={a.type}
-				list="activity-types"
-				aria-label="Activity type"
-			/>
-			<datalist id="activity-types">
-				{#each ['hike', 'run', 'ride', 'ski', 'climbing', 'walk', 'snowshoe'] as t (t)}
-					<option value={t}></option>
-				{/each}
-			</datalist>
-			<button class="btn" type="submit" disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
-			<button class="btn ghost" type="button" onclick={() => (editing = false)}>Cancel</button>
-			{#if form?.error}<span class="edit-error">{form.error}</span>{/if}
-		</form>
-	{:else}
-		<div>
-			<h1>
-				{a.name}
-				{#if data.canDelete}
-					<button class="edit-btn" title="Edit name and type" aria-label="Edit name and type" onclick={() => (editing = true)}>
-						✎
-					</button>
-				{/if}
-			</h1>
-			<p class="page-sub">
-				<a class="who" href="/users/{a.username}">{a.username}</a> · {fmtDate(a.date)} ·
-				<span class="type">{a.type}</span>
-			</p>
-		</div>
-	{/if}
-	{#if data.canDelete && !editing}
-		<form
-			method="POST"
-			action="?/delete"
-			use:enhance={({ cancel }) => {
-				if (!confirm('Delete this activity? Peaks it reached stay in your list.')) cancel();
-			}}
-		>
-			<button class="btn danger" type="submit">Delete</button>
-		</form>
-	{/if}
+  {#if editing}
+    <form
+      class="edit-form"
+      method="POST"
+      action="?/update"
+      use:enhance={() => {
+        saving = true;
+        return async ({ update, result }) => {
+          saving = false;
+          if (result.type === "success") editing = false;
+          await update();
+        };
+      }}
+    >
+      <input
+        class="edit-name"
+        name="name"
+        required
+        maxlength="120"
+        value={a.name}
+        aria-label="Activity name"
+      />
+      <input
+        class="edit-type"
+        name="type"
+        required
+        maxlength="40"
+        value={a.type}
+        list="activity-types"
+        aria-label="Activity type"
+      />
+      <datalist id="activity-types">
+        {#each ["hike", "run", "ride", "ski", "climbing", "walk", "snowshoe"] as t (t)}
+          <option value={t}></option>
+        {/each}
+      </datalist>
+      <button class="btn" type="submit" disabled={saving}
+        >{saving ? "Saving…" : "Save"}</button
+      >
+      <button class="btn ghost" type="button" onclick={() => (editing = false)}
+        >Cancel</button
+      >
+      {#if form?.error}<span class="edit-error">{form.error}</span>{/if}
+    </form>
+  {:else}
+    <div>
+      <h1>
+        {a.name}
+        {#if data.canDelete}
+          <button
+            class="edit-btn"
+            title="Edit name and type"
+            aria-label="Edit name and type"
+            onclick={() => (editing = true)}
+          >
+            ✎
+          </button>
+        {/if}
+      </h1>
+      <p class="page-sub">
+        <a class="who" href="/users/{a.username}">{a.username}</a> · {fmtDate(
+          a.date,
+        )} ·
+        <span class="type">{a.type}</span>
+      </p>
+    </div>
+  {/if}
+  {#if data.canDelete && !editing}
+    <form
+      method="POST"
+      action="?/delete"
+      use:enhance={({ cancel }) => {
+        if (
+          !confirm("Delete this activity? Peaks it reached stay in your list.")
+        )
+          cancel();
+      }}
+    >
+      <button class="btn danger" type="submit">Delete</button>
+    </form>
+  {/if}
 </div>
 
 <div class="kpis">
-	<StatTile label="Distance" value={fmtDistance(a.distance_m)} />
-	<StatTile label="Ascent" value={fmtElevation(a.elev_gain_m)} detail="↓ {fmtElevation(a.elev_loss_m)}" />
-	<StatTile
-		label="Moving time"
-		value={fmtDuration(a.moving_s ?? a.duration_s)}
-		detail={a.duration_s ? `total ${fmtDuration(a.duration_s)}` : ''}
-	/>
-	{#if avgSpeed}
-		<StatTile label="Avg moving speed" value={avgSpeed} />
-	{:else}
-		<StatTile label="Highest point" value={fmtElevation(a.elev_max_m)} />
-	{/if}
+  <StatTile label="Distance" value={fmtDistance(a.distance_m)} />
+  <StatTile
+    label="Ascent"
+    value={fmtElevation(a.elev_gain_m)}
+    detail="↓ {fmtElevation(a.elev_loss_m)}"
+  />
+  <StatTile
+    label="Moving time"
+    value={fmtDuration(a.moving_s ?? a.duration_s)}
+    detail={a.duration_s ? `total ${fmtDuration(a.duration_s)}` : ""}
+  />
+  {#if avgSpeed}
+    <StatTile label="Avg moving speed" value={avgSpeed} />
+  {:else}
+    <StatTile label="Highest point" value={fmtElevation(a.elev_max_m)} />
+  {/if}
 </div>
 
 {#if data.bagged.length > 0}
-	<div class="card bagged">
-		⛰ Peaks reached:
-		{#each data.bagged as peak, i (peak.id)}{i > 0 ? ', ' : ' '}<strong>{peak.name}</strong> ({peak.elevation_m} m){/each}
-	</div>
+  <div class="card bagged">
+    ⛰ Peaks reached:
+    {#each data.bagged as peak, i (peak.id)}{i > 0 ? ", " : " "}<strong
+        >{peak.name}</strong
+      >
+      ({peak.elevation_m} m){/each}
+  </div>
 {/if}
 
-<h2>Map</h2>
-<MapSlot height="440px" />
+<MapSlot />
 
 {#if data.profile.length > 1}
-	<h2>Elevation profile</h2>
-	<div class="card chart">
-		<ElevationChart profile={data.profile} onhover={chartHover} onselect={chartSelect} />
-		<div class="chart-meta">
-			<span>Low {fmtElevation(a.elev_min_m)}</span>
-			<span>High {fmtElevation(a.elev_max_m)}</span>
-		</div>
-	</div>
+  <h2>Elevation profile</h2>
+  <div class="card chart">
+    <ElevationChart
+      profile={data.profile}
+      {hoverD}
+      onhover={chartHover}
+      onselect={chartSelect}
+    />
+    <div class="chart-meta">
+      <span>Low {fmtElevation(a.elev_min_m)}</span>
+      <span>High {fmtElevation(a.elev_max_m)}</span>
+    </div>
+  </div>
 {/if}
 
 {#if data.timed.length > 2}
-	<h2>Speed</h2>
-	<div class="card chart">
-		<SpeedChart timed={data.timed} onhover={chartHover} onselect={chartSelect} />
-	</div>
+  <h2>Speed</h2>
+  <div class="card chart">
+    <SpeedChart
+      timed={data.timed}
+      {hoverD}
+      onhover={chartHover}
+      onselect={chartSelect}
+    />
+  </div>
 {/if}
 
 <style>
-	.back {
-		display: inline-block;
-		margin-bottom: 0.75rem;
-		font-size: 0.85rem;
-		font-weight: 500;
-		color: var(--text-secondary);
-		text-decoration: none;
-		padding: 0.25rem 0.6rem;
-		margin-left: -0.6rem;
-		border-radius: 0.45rem;
-	}
-	.back:hover {
-		background: var(--wash);
-		color: var(--text-primary);
-	}
-	.head {
-		display: flex;
-		justify-content: space-between;
-		align-items: flex-start;
-		gap: 1rem;
-	}
-	.edit-btn {
-		border: none;
-		background: none;
-		font-size: 1rem;
-		color: var(--text-muted);
-		cursor: pointer;
-		padding: 0.15rem 0.4rem;
-		border-radius: 0.4rem;
-		vertical-align: middle;
-	}
-	.edit-btn:hover {
-		background: var(--wash);
-		color: var(--text-primary);
-	}
-	.edit-form {
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-		flex-wrap: wrap;
-		width: 100%;
-	}
-	.edit-form input {
-		padding: 0.5rem 0.7rem;
-		border: 1px solid var(--border);
-		border-radius: 0.5rem;
-		background: var(--surface-1);
-		color: var(--text-primary);
-		font: inherit;
-	}
-	.edit-name {
-		flex: 1;
-		min-width: 200px;
-		font-weight: 600;
-	}
-	.edit-type {
-		width: 120px;
-		text-transform: capitalize;
-	}
-	.edit-form input:focus {
-		outline: 2px solid var(--accent);
-		outline-offset: 1px;
-	}
-	.edit-error {
-		color: var(--critical);
-		font-size: 0.85rem;
-	}
-	.type {
-		text-transform: capitalize;
-	}
-	.who {
-		font-weight: 600;
-		color: var(--accent-strong);
-		text-decoration: none;
-	}
-	.who:hover {
-		text-decoration: underline;
-	}
-	.kpis {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-		gap: 0.75rem;
-	}
-	.bagged {
-		margin-top: 1rem;
-		padding: 0.85rem 1.15rem;
-		border-left: 3px solid var(--good);
-		color: var(--text-secondary);
-	}
-	.bagged strong {
-		color: var(--text-primary);
-	}
-	.chart {
-		padding: 1rem 1rem 0.5rem;
-	}
-	.chart-meta {
-		display: flex;
-		gap: 1.25rem;
-		padding: 0.5rem 0.25rem 0.6rem;
-		font-size: 0.8rem;
-		color: var(--text-muted);
-	}
+  .back {
+    display: inline-block;
+    margin-bottom: 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-decoration: none;
+    padding: 0.25rem 0.6rem;
+    margin-left: -0.6rem;
+    border-radius: 0.45rem;
+  }
+  .back:hover {
+    background: var(--wash);
+    color: var(--text-primary);
+  }
+  .head {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+  .edit-btn {
+    border: none;
+    background: none;
+    font-size: 1rem;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.4rem;
+    vertical-align: middle;
+  }
+  .edit-btn:hover {
+    background: var(--wash);
+    color: var(--text-primary);
+  }
+  .edit-form {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  .edit-form input {
+    padding: 0.5rem 0.7rem;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    background: var(--surface-1);
+    color: var(--text-primary);
+    font: inherit;
+  }
+  .edit-name {
+    flex: 1;
+    min-width: 200px;
+    font-weight: 600;
+  }
+  .edit-type {
+    width: 120px;
+    text-transform: capitalize;
+  }
+  .edit-form input:focus {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+  }
+  .edit-error {
+    color: var(--critical);
+    font-size: 0.85rem;
+  }
+  .type {
+    text-transform: capitalize;
+  }
+  .who {
+    font-weight: 600;
+    color: var(--accent-strong);
+    text-decoration: none;
+  }
+  .who:hover {
+    text-decoration: underline;
+  }
+  .kpis {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+    gap: 0.75rem;
+  }
+  .bagged {
+    margin-top: 1rem;
+    padding: 0.85rem 1.15rem;
+    border-left: 3px solid var(--good);
+    color: var(--text-secondary);
+  }
+  .bagged strong {
+    color: var(--text-primary);
+  }
+  .chart {
+    padding: 1rem 1rem 0.5rem;
+  }
+  .chart-meta {
+    display: flex;
+    gap: 1.25rem;
+    padding: 0.5rem 0.25rem 0.6rem;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
 </style>
diff --git a/src/routes/peaks/+page.svelte b/src/routes/peaks/+page.svelte
index 2ab12ec..4b3df0e 100644
--- a/src/routes/peaks/+page.svelte
+++ b/src/routes/peaks/+page.svelte
@@ -158,7 +158,7 @@
 	Zoom in to reveal less prominent summits; click a peak to cross it off.
 </p>
 
-<MapSlot height="480px" />
+<MapSlot />
 
 <div class="search">
 	<input