Add Coach, take the reference's colours and copy its nav and motion

Coach is the centre tab: questions about routines, slips, streak, today,
active time and debt, answered on the device from the user's own data,
with a target bar chart and buttons that start routines or open the right
screen. The palette moves to neutral grey, near-black and one orange
accent, and Home's header becomes a light panel. The nav is now
overlapping frosted circles whose active disc pops forward, and tabs fade
and rise in on switch. Goals leaves the nav for Coach and stays one tap
away in Home's category row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KhQh614DMeYoQEH9SoMRUw

frontend/lib/Grounded/designs/FloatingNav.dart

@@ -1,14 +1,14 @@
 import 'package:flutter/material.dart';
 
-import '../utils/Colors.dart';
-import 'GlassSurface.dart';
+import 'FloatingNavState.dart';
 
 typedef NavEntry = ({IconData icon, String label, VoidCallback onTap});
 
-/// The floating tab bar: a cluster of round frosted buttons, icons only.
-/// The open tab rises out of the row as a solid white disc. It switches tabs
-/// in place; nothing here pushes a page.
-class FloatingNav extends StatelessWidget {
+/// The floating tab bar, after the reference: a row of frosted circles that
+/// just overlap, icons only. The open tab is a solid white disc that pops
+/// forward over its neighbours; a pressed circle dips. It switches tabs in
+/// place — nothing here pushes a page.
+class FloatingNav extends StatefulWidget {
   final List<NavEntry> entries;
 
   final int selected;
@@ -19,84 +19,6 @@ class FloatingNav extends StatelessWidget {
     required this.selected,
   });
 
-  static const double _size = 58;
-
   @override
-  Widget build(BuildContext context) {
-    return SafeArea(
-      top: false,
-      child: Padding(
-        padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
-        child: Center(
-          child: Container(
-            decoration: const BoxDecoration(
-              borderRadius: BorderRadius.all(Radius.circular(_size)),
-              boxShadow: [
-                BoxShadow(
-                  color: Color(0x1F1A1F1C),
-                  blurRadius: 30,
-                  offset: Offset(0, 12),
-                ),
-              ],
-            ),
-            child: GlassSurface(
-              radius: const BorderRadius.all(Radius.circular(_size)),
-              tint: colorGlass,
-              padding: const EdgeInsets.all(5),
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  for (int index = 0; index < entries.length; index++) ...[
-                    if (index > 0) const SizedBox(width: 4),
-                    _button(entries[index], index == selected),
-                  ],
-                ],
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _button(NavEntry entry, bool active) {
-    return Semantics(
-      button: true,
-      selected: active,
-      label: entry.label,
-      child: Tooltip(
-        message: entry.label,
-        child: GestureDetector(
-          onTap: entry.onTap,
-          behavior: HitTestBehavior.opaque,
-          child: AnimatedContainer(
-            duration: const Duration(milliseconds: 220),
-            curve: Curves.easeOutCubic,
-            width: _size,
-            height: _size,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              shape: BoxShape.circle,
-              color: active ? colorWhite : colorWhite.withValues(alpha: 0.35),
-              border: Border.all(
-                color: colorWhite.withValues(alpha: active ? 1 : 0.6),
-                width: 1,
-              ),
-              boxShadow: active
-                  ? const [
-                      BoxShadow(
-                        color: Color(0x261A1F1C),
-                        blurRadius: 16,
-                        offset: Offset(0, 6),
-                      ),
-                    ]
-                  : const [],
-            ),
-            child: Icon(entry.icon,
-                size: 22, color: active ? colorInk : colorInkSoft),
-          ),
-        ),
-      ),
-    );
-  }
+  State<FloatingNav> createState() => FloatingNavState();
 }