Fix two mobile UI issues: segmented highlight + pill overlap

src/lib/components/bench/FocusView.svelte

@@ -67,6 +67,11 @@
 				<Workbench entry={focused} index={focusedIndex + 1} />
 			{/key}
 		</div>
+
+		<!-- Phone only: a real spacer so the workbench's last controls can scroll clear of the floating
+		     transport pill. A child with height counts in the scroll extent where a scroll container's own
+		     padding-bottom (through a grid + container-query subtree) does not. -->
+		<div class="pill-clearance" aria-hidden="true"></div>
 	</div>
 {/if}
 
@@ -195,22 +200,39 @@
 		container-name: detail;
 	}
 
+	/* Only a phone needs the pill clearance (desktop docks the controls in the sidebar). */
+	.pill-clearance {
+		display: none;
+	}
+
 	/*
 		The phone: no room for a side rail, so the whole focus becomes ONE vertically scrolling column -
 		the roster as a horizontal filmstrip on top, the workbench (itself fully stacked) beneath it.
 		The focus scrolls as a page rather than pinning a bounded rail + a bounded detail against a
 		screen that has no height to spare.
 	*/
 	@media (max-width: 768px) {
+		/* Block, not grid: the focus becomes a single scrolling column (filmstrip, workbench, then the
+		   pill clearance). A grid scroll container did not count a trailing spacer row in its scroll
+		   extent, so the last controls stayed pinned under the floating pill; block layout does. */
 		.focus {
-			grid-template-columns: minmax(0, 1fr);
-			grid-template-rows: auto auto;
+			display: block;
 			height: auto;
 			min-height: 100%;
 			overflow-y: auto;
 			overflow-x: hidden;
 			padding: var(--sp-4);
-			gap: var(--sp-4);
+		}
+
+		.rail-wrap {
+			margin-bottom: var(--sp-4);
+		}
+
+		/* The clearance that lets the last workbench controls scroll clear of the floating transport
+		   pill. It is a real grid row (an element with height), reliably counted in the scroll extent. */
+		.pill-clearance {
+			display: block;
+			height: calc(env(safe-area-inset-bottom, 0px) + 84px);
 		}
 
 		.rail {

src/lib/components/common/Segmented.svelte

@@ -110,9 +110,13 @@
 		color: var(--ink);
 	}
 
-	/* The chosen segment lifts off the track: it takes the panel colour and a small shadow. */
+	/* The chosen segment lifts OFF the track. The track is `--chip` (panel tinted TOWARD the ink - a
+	   little lighter in dark, a little darker in light), so a plain `--panel` fill lifts in light but
+	   SINKS in dark, where it comes out darker than the track (the selected segment read as a recessed
+	   hole with a leaking shadow). Mixing a touch of white in makes the thumb sit ABOVE the track in
+	   both themes - unchanged white in light, a genuinely lighter grey in dark. */
 	.checked {
-		background: var(--panel);
+		background: color-mix(in srgb, var(--panel), #fff 15%);
 		color: var(--ink);
 		box-shadow: var(--shadow-segment);
 	}