From fd4753905e9d85a646fa2ecb9574df74bf857c19 Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Tue, 21 Apr 2026 09:15:24 +0200
Subject: [PATCH] refactor(ui): drop redundant page headers, rework measure
 profile UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes decorative route-label h1s across fitness, recipe and cospend
pages — replaced with sr-only h1s for assistive tech and a shared
.sr-only utility in app.css. On the measure page, the tucked-away
profile chip becomes a dismissible setup banner that only appears
when sex/height/birth year are missing, with a permanent "Edit profile"
link at the foot of the page.
---
 package.json                                  |   2 +-
 src/app.css                                   |  13 ++
 src/lib/js/fitnessI18n.ts                     |   7 +
 .../dash/+page.svelte                         |   9 +-
 .../list/+page.svelte                         |   9 +-
 .../payments/+page.svelte                     |   9 +-
 .../payments/add/+page.svelte                 |   8 +-
 .../payments/edit/[id]/+page.svelte           |   8 +-
 .../recurring/+page.svelte                    |   8 +-
 .../recurring/edit/[id]/+page.svelte          |   7 +-
 .../settle/+page.svelte                       |  14 +-
 .../category/+page.svelte                     |   8 +-
 .../favorites/+page.svelte                    |   7 +-
 .../[recipeLang=recipeLang]/tag/+page.svelte  |   6 +-
 .../[exercises=fitnessExercises]/+page.svelte |   7 +-
 .../[[month=fitnessMonth]]/+page.svelte       |   6 +-
 .../[measure=fitnessMeasure]/+page.svelte     | 211 +++++++++++++-----
 .../fitness/[stats=fitnessStats]/+page.svelte |   7 +-
 18 files changed, 192 insertions(+), 154 deletions(-)

diff --git a/package.json b/package.json
index a38f9f8d..a7a904aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.38.2",
+	"version": "1.39.0",
 	"private": true,
 	"type": "module",
 	"scripts": {
diff --git a/src/app.css b/src/app.css
index 858499b6..580a1e19 100644
--- a/src/app.css
+++ b/src/app.css
@@ -366,6 +366,19 @@ a:focus-visible {
 	transition: var(--transition-fast);
 }
 
+/* Visually hidden but accessible to screen readers */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 /* Interactive hover/focus effects */
 .g-interactive {
 	transition: var(--transition-fast);
diff --git a/src/lib/js/fitnessI18n.ts b/src/lib/js/fitnessI18n.ts
index 0dc0484c..07378df4 100644
--- a/src/lib/js/fitnessI18n.ts
+++ b/src/lib/js/fitnessI18n.ts
@@ -195,6 +195,13 @@ const translations: Translations = {
 	// Measure page
 	measure_title: { en: 'Measure', de: 'Messen' },
 	profile: { en: 'Profile', de: 'Profil' },
+	profile_setup_cta: {
+		en: 'Add height & birth year to unlock BMI, TDEE and calorie balance stats.',
+		de: 'Größe & Geburtsjahr eintragen, um BMI, TDEE und Kalorienbilanz freizuschalten.'
+	},
+	set_up_profile: { en: 'Set up', de: 'Einrichten' },
+	edit_profile: { en: 'Edit profile', de: 'Profil bearbeiten' },
+	dismiss: { en: 'Dismiss', de: 'Verwerfen' },
 	new_measurement: { en: 'New Measurement', de: 'Neue Messung' },
 	edit_measurement: { en: 'Edit Measurement', de: 'Messung bearbeiten' },
 	weight_kg: { en: 'Weight (kg)', de: 'Gewicht (kg)' },
diff --git a/src/routes/[cospendRoot=cospendRoot]/dash/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/dash/+page.svelte
index f1f9ef98..48e4e2cb 100644
--- a/src/routes/[cospendRoot=cospendRoot]/dash/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/dash/+page.svelte
@@ -128,7 +128,7 @@
 </svelte:head>
 
 <main class="cospend-main">
-    <h1>{t('cospend', lang)}</h1>
+    <h1 class="sr-only">{t('cospend', lang)}</h1>
 
   <!-- Responsive layout for balance and chart -->
   <div class="dashboard-layout">
@@ -272,13 +272,6 @@
     overflow-x: hidden;
   }
 
-  h1 {
-    text-align: center;
-    font-size: 2.5rem;
-    margin-block: 0.5rem 1.5rem;
-    color: var(--color-text-primary);
-  }
-
   .loading, .error {
     text-align: center;
     padding: 2rem;
diff --git a/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
index 9e5d46ec..2de7ec7c 100644
--- a/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/list/+page.svelte
@@ -373,7 +373,8 @@
 <div class="shopping-page">
   <header class="page-header">
     <div class="header-row">
-      <h1>{t('shopping_list_title', lang)} <SyncIndicator status={sync.status} /></h1>
+      <h1 class="sr-only">{t('shopping_list_title', lang)}</h1>
+      <SyncIndicator status={sync.status} />
       {#if !isGuest}
         <button class="btn-share" onclick={openShareModal} title={t('share', lang)}>
           <Share2 size={16} />
@@ -613,11 +614,6 @@
     justify-content: center;
     gap: 0.5rem;
   }
-  h1 {
-    font-size: 1.5rem;
-    font-weight: 700;
-    margin: 0;
-  }
   .btn-share {
     display: flex;
     align-items: center;
@@ -892,7 +888,6 @@
 
   @media (max-width: 500px) {
     .shopping-page { padding: 1rem 0.75rem; }
-    h1 { font-size: 1.3rem; }
     .card-grid {
       grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
       gap: 0.4rem;
diff --git a/src/routes/[cospendRoot=cospendRoot]/payments/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/payments/+page.svelte
index ce0578a8..7dad70b0 100644
--- a/src/routes/[cospendRoot=cospendRoot]/payments/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/+page.svelte
@@ -132,7 +132,7 @@
 <main class="payments-list">
   <div class="header">
     <div class="header-content">
-      <h1>{t('all_payments_title', lang)}</h1>
+      <h1 class="sr-only">{t('all_payments_title', lang)}</h1>
     </div>
   </div>
 
@@ -288,13 +288,6 @@
     padding: 1rem;
   }
 
-   h1 {
-    margin-block: 0 1rem;
-    margin-inline: auto;
-    color: var(--color-text-primary);
-    text-align: center;
-  }
-
   .btn {
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
diff --git a/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.svelte
index 21aabc28..be790454 100644
--- a/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/add/+page.svelte
@@ -368,7 +368,7 @@
 
 <main class="add-payment">
   <div class="header">
-    <h1>{t('add_payment_title', lang)}</h1>
+    <h1 class="sr-only">{t('add_payment_title', lang)}</h1>
     <p>{t('add_payment_subtitle', lang)}</p>
   </div>
 
@@ -625,12 +625,6 @@
     margin-bottom: 2rem;
   }
 
-  .header h1 {
-    margin: 0 0 0.5rem 0;
-    color: var(--color-text-primary);
-    font-size: 2rem;
-  }
-
   .header p {
     margin: 0;
     color: var(--color-text-secondary);
diff --git a/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.svelte
index 91a5b1da..edf51a8b 100644
--- a/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/payments/edit/[id]/+page.svelte
@@ -373,7 +373,7 @@
 
 <main class="edit-payment">
   <div class="header">
-    <h1>{t('edit_payment_title', lang)}</h1>
+    <h1 class="sr-only">{t('edit_payment_title', lang)}</h1>
     <p>{t('edit_payment_subtitle', lang)}</p>
   </div>
 
@@ -613,12 +613,6 @@
     margin-bottom: 2rem;
   }
 
-  .header h1 {
-    margin: 0 0 0.5rem 0;
-    color: var(--color-text-primary);
-    font-size: 2rem;
-  }
-
   .header p {
     margin: 0;
     color: var(--color-text-secondary);
diff --git a/src/routes/[cospendRoot=cospendRoot]/recurring/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/recurring/+page.svelte
index 4a3a47c5..366c4739 100644
--- a/src/routes/[cospendRoot=cospendRoot]/recurring/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/recurring/+page.svelte
@@ -103,7 +103,7 @@
 
 <main class="recurring-payments">
   <div class="header">
-    <h1>{t('recurring_title', lang)}</h1>
+    <h1 class="sr-only">{t('recurring_title', lang)}</h1>
     <p>{t('recurring_subtitle', lang)}</p>
   </div>
 
@@ -246,12 +246,6 @@
     text-align: center;
   }
 
-  .header h1 {
-    margin: 0 0 0.5rem 0;
-    color: var(--color-text-primary);
-    font-size: 2rem;
-  }
-
   .header p {
     margin: 0;
     color: var(--color-text-secondary);
diff --git a/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.svelte
index 3df53ea9..a0622421 100644
--- a/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/recurring/edit/[id]/+page.svelte
@@ -295,7 +295,7 @@
 
 <main class="edit-recurring-payment">
   <div class="header">
-    <h1>{t('edit_recurring_title', lang)}</h1>
+    <h1 class="sr-only">{t('edit_recurring_title', lang)}</h1>
   </div>
 
   {#if loadingPayment}
@@ -507,11 +507,6 @@
     margin-bottom: 2rem;
   }
 
-  .header h1 {
-    margin: 0;
-    color: var(--color-text-primary);
-  }
-
   .loading {
     text-align: center;
     padding: 2rem;
diff --git a/src/routes/[cospendRoot=cospendRoot]/settle/+page.svelte b/src/routes/[cospendRoot=cospendRoot]/settle/+page.svelte
index a2b30ac3..02a6cb93 100644
--- a/src/routes/[cospendRoot=cospendRoot]/settle/+page.svelte
+++ b/src/routes/[cospendRoot=cospendRoot]/settle/+page.svelte
@@ -152,7 +152,7 @@
 
 <main class="settle-main">
   <div class="header-section">
-    <h1>{t('settle_title', lang)}</h1>
+    <h1 class="sr-only">{t('settle_title', lang)}</h1>
     <p>{t('settle_subtitle', lang)}</p>
   </div>
 
@@ -373,11 +373,6 @@
     margin-bottom: 2rem;
   }
 
-  .header-section h1 {
-    color: var(--nord0);
-    margin-bottom: 0.5rem;
-  }
-
   .header-section p {
     color: var(--nord3);
     font-size: 1.1rem;
@@ -690,10 +685,6 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    :global(:root:not([data-theme="light"])) .header-section h1 {
-      color: var(--font-default-dark);
-    }
-
     :global(:root:not([data-theme="light"])) .header-section p {
       color: var(--nord4);
     }
@@ -793,9 +784,6 @@
       border-color: var(--nord2);
     }
   }
-:global(:root[data-theme="dark"]) .header-section h1 {
-	color: var(--font-default-dark);
-}
 :global(:root[data-theme="dark"]) .header-section p {
 	color: var(--nord4);
 }
diff --git a/src/routes/[recipeLang=recipeLang]/category/+page.svelte b/src/routes/[recipeLang=recipeLang]/category/+page.svelte
index 81678df5..5e8598ef 100644
--- a/src/routes/[recipeLang=recipeLang]/category/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/category/+page.svelte
@@ -14,13 +14,7 @@
 <svelte:head>
     <title>{labels.title} - {labels.siteTitle}</title>
 </svelte:head>
-<style>
-	h1 {
-		text-align: center;
-		font-size: 1.5rem;
-	}
-</style>
-<h1>{labels.title}</h1>
+<h1 class="sr-only">{labels.title}</h1>
 <section>
 <TagCloud>
 {#each data.categories as tag}
diff --git a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
index 78c09437..16f45bf2 100644
--- a/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/favorites/+page.svelte
@@ -43,11 +43,6 @@
 </script>
 
 <style>
-h1{
-    text-align: center;
-    margin-bottom: 0;
-    font-size: 4rem;
-}
 .subheading{
     text-align: center;
     margin-top: 0;
@@ -87,7 +82,7 @@ h1{
     <meta name="description" content={labels.metaDescription} />
 </svelte:head>
 
-<h1>{labels.title}</h1>
+<h1 class="sr-only">{labels.title}</h1>
 <p class=subheading>
     {#if data.favorites.length > 0}
         {labels.count}
diff --git a/src/routes/[recipeLang=recipeLang]/tag/+page.svelte b/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
index 3de3aa87..a5cefb31 100644
--- a/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
+++ b/src/routes/[recipeLang=recipeLang]/tag/+page.svelte
@@ -23,10 +23,6 @@
     <title>{labels.title} - {labels.siteTitle}</title>
 </svelte:head>
 <style>
-	h1 {
-		font-size: 1.5rem;
-		text-align: center;
-	}
 	.search-wrap {
 		max-width: 400px;
 		margin: 0 auto 1rem;
@@ -42,7 +38,7 @@
 		color: var(--color-text-primary);
 	}
 </style>
-<h1>{labels.title}</h1>
+<h1 class="sr-only">{labels.title}</h1>
 <div class="search-wrap">
 	<input type="search" placeholder={labels.search} bind:value={query} />
 </div>
diff --git a/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte b/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte
index c85b5b85..7d060f5f 100644
--- a/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte
+++ b/src/routes/fitness/[exercises=fitnessExercises]/+page.svelte
@@ -101,7 +101,7 @@
 		<MuscleFilter bind:selectedGroups={muscleGroups} {lang} split />
 	</div>
 
-	<h1>{t('exercises_title', lang)}</h1>
+	<h1 class="sr-only">{t('exercises_title', lang)}</h1>
 
 	<!-- Mobile: inline, not split -->
 	<div class="mobile-filter">
@@ -225,11 +225,6 @@
 		margin: 0 auto;
 		position: relative;
 	}
-	h1 {
-		margin: 0;
-		font-size: 1.4rem;
-	}
-
 	/* Mobile: show inline filter, hide desktop split */
 	.desktop-filter {
 		display: none;
diff --git a/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte b/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte
index 93aad152..ba3a6be7 100644
--- a/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte
+++ b/src/routes/fitness/[history=fitnessHistory]/[[month=fitnessMonth]]/+page.svelte
@@ -55,7 +55,7 @@
 <svelte:head><title>{t('history_title', lang)} - Bocken</title></svelte:head>
 
 <div class="history-page">
-	<h1>{t('history_title', lang)}</h1>
+	<h1 class="sr-only">{t('history_title', lang)}</h1>
 
 	{#if sessions.length === 0}
 		<p class="empty">{t('no_workouts_yet', lang)}</p>
@@ -97,10 +97,6 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
-	h1 {
-		margin: 0;
-		font-size: 1.4rem;
-	}
 	.empty {
 		text-align: center;
 		color: var(--color-text-secondary);
diff --git a/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte b/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
index 8765fee9..eeeb2db2 100644
--- a/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
+++ b/src/routes/fitness/[measure=fitnessMeasure]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { page } from '$app/stores';
-	import { Pencil, Trash2, ChevronRight, ChevronDown, Venus, Mars, Weight, Percent, Ruler, Plus, Minus, X } from '@lucide/svelte';
+	import { Pencil, Trash2, ChevronRight, ChevronDown, Venus, Mars, Weight, Percent, Ruler, Plus, Minus, X, UserCog, Sparkles } from '@lucide/svelte';
 	import { detectFitnessLang, t } from '$lib/js/fitnessI18n';
 	import { toast } from '$lib/js/toast.svelte';
 	import { confirm } from '$lib/js/confirmDialog.svelte';
@@ -34,16 +34,19 @@
 	let profileBirthYear = $state(data.profile?.birthYear != null ? String(data.profile.birthYear) : '');
 	let profileSaving = $state(false);
 	let profileEditing = $state(false);
+	let bannerDismissed = $state(false);
+	/** @type {HTMLElement | undefined} */
+	let profileFormEl = $state(undefined);
 
-	const profileParts = $derived.by(() => {
-		/** @type {string[]} */
-		const parts = [];
-		const h = data.profile?.heightCm;
-		if (h) parts.push(`${h}cm`);
-		const by = data.profile?.birthYear;
-		if (by) parts.push(`*${by}`);
-		return parts;
-	});
+	const profileComplete = $derived(!!(data.profile?.sex && data.profile?.heightCm && data.profile?.birthYear));
+	const showSetupBanner = $derived(!profileComplete && !bannerDismissed && !profileEditing);
+
+	function openProfileEdit() {
+		profileEditing = true;
+		setTimeout(() => {
+			profileFormEl?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+		}, 40);
+	}
 
 	let profileDirty = $derived(
 		profileSex !== (data.profile?.sex ?? 'male') ||
@@ -222,29 +225,26 @@
 <svelte:head><title>{lang === 'en' ? 'Measure' : 'Messen'} - Bocken</title></svelte:head>
 
 <div class="measure-page">
-	<div class="page-header">
-		<h1>{t('measure_title', lang)}</h1>
-		<div class="profile-meta">
-			{#if data.profile?.sex}
-				<span class="profile-sex-icon">
-					{#if data.profile.sex === 'female'}
-						<Venus size={16} />
-					{:else}
-						<Mars size={16} />
-					{/if}
-				</span>
-			{/if}
-			{#if profileParts.length > 0}
-				<span class="profile-summary">{profileParts.join(' · ')}</span>
-			{/if}
-			<button class="profile-edit-btn" onclick={() => profileEditing = !profileEditing} aria-label="Edit profile">
-				<Pencil size={12} />
+	<h1 class="sr-only">{t('measure_title', lang)}</h1>
+
+	{#if showSetupBanner}
+		<div class="setup-banner" role="status">
+			<span class="setup-banner-icon" aria-hidden="true"><Sparkles size={18} /></span>
+			<span class="setup-banner-text">{t('profile_setup_cta', lang)}</span>
+			<button type="button" class="setup-banner-cta" onclick={openProfileEdit}>
+				{t('set_up_profile', lang)}
+			</button>
+			<button type="button" class="setup-banner-dismiss" onclick={() => bannerDismissed = true} aria-label={t('dismiss', lang)}>
+				<X size={14} />
 			</button>
 		</div>
-	</div>
+	{/if}
 
 	{#if profileEditing}
-		<div class="profile-fields">
+		<div class="profile-fields" bind:this={profileFormEl}>
+			<button type="button" class="profile-close-btn" onclick={() => profileEditing = false} aria-label={t('cancel', lang)}>
+				<X size={14} />
+			</button>
 			<div class="form-group">
 				<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label>{t('sex', lang)}</label>
@@ -427,6 +427,13 @@
 	{#each data.sharedPeriods ?? [] as shared (shared.owner)}
 		<PeriodTracker periods={shared.entries} {lang} readOnly ownerName={shared.owner} />
 	{/each}
+
+	<div class="page-footer-actions">
+		<button type="button" class="edit-profile-link" onclick={openProfileEdit}>
+			<UserCog size={14} />
+			<span>{t('edit_profile', lang)}</span>
+		</button>
+	</div>
 </div>
 
 <style>
@@ -435,57 +442,151 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
-	h1 {
-		margin: 0;
-		font-size: 1.4rem;
-	}
 	h2 {
 		margin: 0 0 0.5rem;
 		font-size: 1.1rem;
 	}
 
-	/* Header with inline profile */
-	.page-header {
-		display: flex;
-		align-items: baseline;
-		justify-content: space-between;
-		gap: 0.5rem;
-	}
-	.profile-meta {
+	/* Setup banner — only visible when profile incomplete */
+	.setup-banner {
+		position: relative;
 		display: flex;
 		align-items: center;
-		gap: 0.4rem;
+		gap: 0.75rem;
+		padding: 0.75rem 0.9rem;
+		border-radius: var(--radius-lg);
+		background: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface));
+		border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
 	}
-	.profile-sex-icon {
-		display: flex;
-		color: var(--color-text-secondary);
+	.setup-banner-icon {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		flex-shrink: 0;
+		border-radius: 50%;
+		background: color-mix(in oklab, var(--color-primary) 22%, transparent);
+		color: var(--color-primary);
 	}
-	.profile-summary {
+	.setup-banner-text {
+		flex: 1;
+		font-size: 0.85rem;
+		line-height: 1.35;
+		color: var(--color-text-primary);
+	}
+	.setup-banner-cta {
+		flex-shrink: 0;
+		padding: 0.4rem 0.85rem;
+		background: var(--color-primary);
+		color: var(--color-text-on-primary);
+		border: none;
+		border-radius: var(--radius-pill);
+		font-weight: 600;
 		font-size: 0.8rem;
-		color: var(--color-text-secondary);
-		letter-spacing: 0.02em;
+		cursor: pointer;
+		transition: background var(--transition-normal);
 	}
-	.profile-edit-btn {
+	.setup-banner-cta:hover {
+		background: var(--color-primary-hover);
+	}
+	.setup-banner-dismiss {
 		display: flex;
 		align-items: center;
-		padding: 0.25rem;
+		justify-content: center;
+		width: 1.6rem;
+		height: 1.6rem;
+		padding: 0;
+		flex-shrink: 0;
 		background: none;
 		border: none;
-		cursor: pointer;
+		border-radius: 50%;
 		color: var(--color-text-tertiary);
+		cursor: pointer;
 		opacity: 0.6;
-		transition: opacity 0.15s;
+		transition: opacity var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
 	}
-	.profile-edit-btn:hover {
+	.setup-banner-dismiss:hover {
 		opacity: 1;
-		color: var(--color-text-secondary);
+		background: color-mix(in oklab, var(--color-text-primary) 8%, transparent);
 	}
+	@media (max-width: 480px) {
+		.setup-banner {
+			flex-wrap: wrap;
+			padding-right: 2.25rem;
+			gap: 0.5rem 0.75rem;
+		}
+		.setup-banner-text {
+			flex-basis: calc(100% - 2.75rem);
+			font-size: 0.8rem;
+		}
+		.setup-banner-cta {
+			margin-left: auto;
+		}
+		.setup-banner-dismiss {
+			position: absolute;
+			top: 0.4rem;
+			right: 0.4rem;
+		}
+	}
+
 	.profile-fields {
+		position: relative;
 		display: flex;
 		gap: 0.5rem;
 		align-items: flex-end;
-		justify-content: flex-end;
 		flex-wrap: wrap;
+		padding: 0.75rem 0.9rem 0.9rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		background: var(--color-surface);
+	}
+	.profile-close-btn {
+		position: absolute;
+		top: 0.35rem;
+		right: 0.35rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.6rem;
+		height: 1.6rem;
+		padding: 0;
+		background: none;
+		border: none;
+		border-radius: 50%;
+		color: var(--color-text-tertiary);
+		cursor: pointer;
+		opacity: 0.7;
+		transition: opacity var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
+	}
+	.profile-close-btn:hover {
+		opacity: 1;
+		background: color-mix(in oklab, var(--color-text-primary) 8%, transparent);
+	}
+
+	/* Footer: slim "Edit profile" link */
+	.page-footer-actions {
+		display: flex;
+		justify-content: center;
+		padding-top: 0.5rem;
+		margin-top: 0.5rem;
+	}
+	.edit-profile-link {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.35rem;
+		padding: 0.4rem 0.75rem;
+		background: none;
+		border: none;
+		color: var(--color-text-tertiary);
+		font-size: 0.8rem;
+		font-weight: 500;
+		cursor: pointer;
+		border-radius: var(--radius-pill);
+		transition: color var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
+	}
+	.edit-profile-link:hover {
+		color: var(--color-text-primary);
+		background: color-mix(in oklab, var(--color-text-primary) 6%, transparent);
 	}
 	.sex-pills {
 		display: flex;
diff --git a/src/routes/fitness/[stats=fitnessStats]/+page.svelte b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
index c8403bb9..383727d7 100644
--- a/src/routes/fitness/[stats=fitnessStats]/+page.svelte
+++ b/src/routes/fitness/[stats=fitnessStats]/+page.svelte
@@ -138,7 +138,7 @@
 <svelte:head><title>{t('stats_title', lang)} - Bocken</title></svelte:head>
 
 <div class="stats-page">
-	<h1>{t('stats_title', lang)}</h1>
+	<h1 class="sr-only">{t('stats_title', lang)}</h1>
 
 	<div class="lifetime-cards">
 		<div class="lifetime-card workouts">
@@ -364,11 +364,6 @@
 		flex-direction: column;
 		gap: 1rem;
 	}
-	h1 {
-		margin: 0;
-		font-size: 1.4rem;
-	}
-
 	.lifetime-cards {
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);