fix(fitness): fit body-parts wizard to viewport and tint thigh SVG

Cap shell height to viewport minus header so the bottombar stays visible,
allow the stage to scroll internally, and swap the thigh diagram to a
mask-tinted SVG that tracks the text-primary color across themes.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "homepage",
-	"version": "1.37.1",
+	"version": "1.37.2",
 	"private": true,
 	"type": "module",
 	"scripts": {

src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte

@@ -24,7 +24,7 @@
 		{ key: 'forearms',  labelKey: 'l_forearm', img: null,            paired: true,  tipKey: 'measure_tip_forearms',  dbLeft: 'leftForearm', dbRight: 'rightForearm' },
 		{ key: 'waist',     labelKey: 'waist',     img: 'waist.png',     paired: false, tipKey: 'measure_tip_waist',     dbSingle: 'waist' },
 		{ key: 'hips',      labelKey: 'hips',      img: 'hips.png',      paired: false, tipKey: 'measure_tip_hips',      dbSingle: 'hips' },
-		{ key: 'thighs',    labelKey: 'l_thigh',   img: 'thigh.png',     paired: true,  tipKey: 'measure_tip_thighs',    dbLeft: 'leftThigh',   dbRight: 'rightThigh' },
+		{ key: 'thighs',    labelKey: 'l_thigh',   img: 'thigh.svg',     paired: true,  tipKey: 'measure_tip_thighs',    dbLeft: 'leftThigh',   dbRight: 'rightThigh' },
 		{ key: 'calves',    labelKey: 'calves',    img: 'calves.png',    paired: true,  tipKey: 'measure_tip_calves',    dbLeft: 'leftCalf',    dbRight: 'rightCalf' }
 	];
 
@@ -347,7 +347,16 @@
 				<section class="card" in:fly={flyOpts}>
 					<div class="hero">
 						{#if step.img}
-							<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
+							{#if step.img.endsWith('.svg')}
+								<div
+									class="hero-pic hero-svg"
+									style="--hero-svg-src: url(/fitness/measure/{step.img})"
+									role="img"
+									aria-label={stepLabel(step)}
+								></div>
+							{:else}
+								<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
+							{/if}
 						{:else}
 							<div class="hero-placeholder" aria-hidden="true">
 								<Ruler size={72} strokeWidth={1.4} />
@@ -578,11 +587,12 @@
 	}
 
 	.shell {
-		min-height: 100vh;
+		--fitness-header-offset: calc(3rem + 12px + env(safe-area-inset-top, 0px));
+		height: calc(100svh - var(--fitness-header-offset));
+		min-height: 0;
 		display: flex;
 		flex-direction: column;
 		background:
-			radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 60%),
 			radial-gradient(800px 400px at 90% 110%, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 55%),
 			var(--color-bg-primary);
 		color: var(--color-text-primary);
@@ -638,7 +648,8 @@
 		align-items: flex-start;
 		justify-content: center;
 		padding: 0.5rem 1rem 2rem;
-		overflow: hidden;
+		overflow-y: auto;
+		min-height: 0;
 	}
 	.card {
 		width: 100%;
@@ -661,25 +672,27 @@
 		box-shadow: var(--shadow-md);
 		position: relative;
 	}
-	.hero::after {
-		content: '';
-		position: absolute;
-		inset: -2px;
-		border-radius: 50%;
-		border: 1px dashed color-mix(in oklab, var(--color-primary) 45%, transparent);
-		opacity: 0.6;
-		pointer-events: none;
-	}
 	.hero-pic {
 		width: 150px;
 		height: 150px;
 		object-fit: contain;
 	}
-	@media (prefers-color-scheme: dark) {
+	.hero-svg {
-		.hero-pic { filter: invert(1); }
+		mask-image: var(--hero-svg-src);
+		-webkit-mask-image: var(--hero-svg-src);
+		mask-size: contain;
+		-webkit-mask-size: contain;
+		mask-repeat: no-repeat;
+		-webkit-mask-repeat: no-repeat;
+		mask-position: center;
+		-webkit-mask-position: center;
+		background-color: var(--color-text-primary);
 	}
-	:global(:root[data-theme="dark"]) .hero-pic { filter: invert(1); }
+	@media (prefers-color-scheme: dark) {
-	:global(:root[data-theme="light"]) .hero-pic { filter: none; }
+		img.hero-pic { filter: invert(1); }
+	}
+	:global(:root[data-theme="dark"]) img.hero-pic { filter: invert(1); }
+	:global(:root[data-theme="light"]) img.hero-pic { filter: none; }
 
 	.hero-placeholder {
 		display: flex;
@@ -977,15 +990,14 @@
 
 	@media (min-width: 1024px) {
 		.shell {
-			--fitness-header-offset: calc(3rem + 12px + env(safe-area-inset-top, 0px));
 			display: grid;
 			grid-template-columns: 260px minmax(0, 1fr) 360px;
-			grid-template-rows: auto 1fr auto;
+			grid-template-rows: auto minmax(0, 1fr) auto;
 			grid-template-areas:
 				"rail topbar panel"
 				"rail stage  panel"
 				"rail bottom panel";
-			min-height: 100vh;
+			height: 100vh;
 			margin-top: calc(-1 * var(--fitness-header-offset));
 		}
 		.rail   { grid-area: rail; }

static/fitness/measure/thigh.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="230.97847mm"
+   height="161.57938mm"
+   viewBox="0 0 230.97847 161.57938"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(10.583333,-67.733332)" fill="none" stroke="currentColor" stroke-width="7.9375" stroke-linecap="round" stroke-linejoin="round">
+    <path d="m -5.2938776,75.349546 c 0,0 37.0210826,-4.638254 65.9220826,-3.451251 16.254828,0.667607 16.716356,0.857996 37.092959,6.092661 20.583856,5.287909 30.187556,12.829711 52.828226,19.244569 22.64067,6.414855 47.35673,7.358215 58.11105,22.263325 10.75432,14.90511 4.33946,48.11142 4.33946,48.11142 0,0 4.7168,25.47075 3.01875,35.47038 -1.69804,9.99963 -4.7168,22.26332 -4.7168,22.26332" />
+    <path d="m -6.6145834,170.25168 c 0,0 19.8105854,15.09378 43.2059404,17.73519 23.395358,2.64141 79.431013,-10.1883 95.090803,-13.39573 15.6598,-3.20743 19.81059,1.88672 19.81059,1.88672 0,0 -6.7922,14.52776 -6.60353,28.86686 0.18867,14.33909 2.45274,19.62191 2.45274,19.62191" />
+    <path d="m 30.275732,127.2863 c 0,0 18.901817,1.34096 48.200862,10.32508 27.805246,8.52607 33.634316,12.94496 33.634316,12.94496" />
+  </g>
+</svg>