Slide one shared grape pill between mobile nav items

The mobile bottom bar now draws a single absolutely positioned grape pill
(top 10 px, height 42 px) behind its items and implements handoff Motion
section 1: on a tab change it slides the pill from the old item's left and
width to the new one's over 420 ms on the --ease-spring curve, FLIPs every
moved item with the same timing, and fades the new label in (220 ms
ease-out after 120 ms). Icon colour crossfades via transition color .2s.
Under prefers-reduced-motion the pill jumps with no animation. The pill is
re-placed on resize and once document.fonts.ready resolves. Each item
keeps the full 62 px bar height as its tap target.

Maestro task d340ae00-3c2a-48cf-9ac6-35e0b8ed5a7c

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/shell/BottomBar.module.css

@@ -13,28 +13,38 @@
   background: var(--color-text);
 }
 
-/* The whole bar height is the tap target; the 42 px pill sits inside it. */
+/* The one grape pill, shared by every item: BottomBar sets its left and width
+   to the active item's and slides it between items. */
+.pill {
+  position: absolute;
+  top: 10px;
+  height: 42px;
+  z-index: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+  pointer-events: none;
+}
+
+/* The whole bar height is the tap target; the 42 px pill sits behind it.
+   Items stay above the pill. */
 .item {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
   height: 62px;
   min-width: 44px;
+  padding: 0 13px;
+  box-sizing: border-box;
   color: var(--color-neutral-400);
   text-decoration: none;
+  white-space: nowrap;
+  transition: color .2s;
 }
 
-.pill {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 42px;
-  padding: 0 13px;
-  border-radius: var(--radius-pill);
-}
-
-.active {
-  background: var(--color-accent);
+.item[aria-current='page'] {
   color: var(--on-accent);
 }