Update: GUI reference screen spacing and nav fixes (#72)

* Fix: replace add button circle with bare green plus; fix ALERTS spacing

- BTN_ADD_CLS: strip bg/rounded-full/shadow, keep text-[#008751] with hover state
- MemberDetail: swap PlusCircle -> Plus for add gear button
- NotificationsPanel: remove mt-5 (overridden by unlayered CSS reset)
- App: replace mt-5 wrapper with h-5 spacer div (height utilities bypass
  the * { margin: 0 } reset that overrides @layer utilities in Tailwind v4)
- docs/solutions: document CSS cascade/margin override pattern

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update: homepage font sizes +2px across all elements; fix MemberCard stat row layout

- Bump all homepage text +2px: stat values xs→base, labels xs→sm,
  names xl→24px, section headers xl→22px, notification copy sm/xs→base/sm
- Stat rows now justify-end with gap-2; value in w-12 text-right, unit in w-7
  so label+value+unit group sits right with clear spacing between number and unit
- Name row uses items-end so name baseline aligns with edit/delete button bottoms
- Fix docs/solutions tailwind cascade doc: correct physical vs logical property
  table (px-*/py-* work; pt-*/pb-* fail), update component count to 17 files
- CLAUDE.md: add design review/screenshot instructions, bug fix protocol,
  rebase-before-PR rule, TODO.md scope clarification
- TODO.md: remove completed Known Issues and Technical Debt items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update: fix ResourcesScreen sport spacing, increase sport label font, fix BottomNav clipping

- Replace space-y-* with flex flex-col gap-[22px] in ResourcesScreen (safe
  pattern — gap-* unaffected by unlayered CSS reset that zeros margin/padding)
- Sport label heading: text-xs → text-sm; broken mb-4 → h-4 spacer div
- Column header row: broken pb-2 mb-1 → py-2 (logical padding, CSS-reset safe)
- BottomNav: reduce px-8 → px-4 side padding; remove scale-110 active transform
  that pushed RESOURCES label beyond the right viewport edge
- Update BottomNav tests to assert active color class instead of removed scale-110

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: theredmoose <theredmoose@users.noreply.github.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: theredmoose

src/components/BottomNav.tsx

@@ -17,7 +17,7 @@ const TABS: { id: TopLevelTab; label: string; Icon: React.ElementType }[] = [
 export function BottomNav({ activeTab, onChange }: BottomNavProps) {
   return (
     <div
-      className="bg-white border-t border-slate-100 px-8 flex justify-between items-center shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.08)]"
+      className="bg-white border-t border-slate-100 px-4 flex justify-between items-center shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.08)]"
       style={{ paddingTop: '1.25rem', paddingBottom: 'max(2rem, env(safe-area-inset-bottom))' }}
     >
       {TABS.map(({ id, label, Icon }) => {
@@ -26,8 +26,8 @@ export function BottomNav({ activeTab, onChange }: BottomNavProps) {
           <button
             key={id}
             onClick={() => onChange(id)}
-            className={`flex flex-col items-center gap-2 transition-all min-w-[56px] ${
-              active ? 'text-[#008751] scale-110' : 'text-slate-400 hover:text-emerald-500'
+            className={`flex flex-col items-center gap-2 transition-all min-w-[56px] overflow-visible ${
+              active ? 'text-[#008751]' : 'text-slate-400 hover:text-emerald-500'
             }`}
           >
             <Icon className="w-6 h-6" />

src/components/ResourcesScreen.tsx

@@ -54,17 +54,18 @@ export function ResourcesScreen() {
   return (
     <div className="flex flex-col min-h-0 flex-1">
       <ScreenHeader title="Resources" />
-      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-5 pt-8 pb-8 space-y-7">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-5 pt-8 pb-8 flex flex-col gap-[22px]">
         <h2 className={SECTION_HEADER_CLS} style={{ color: COLOR_PRIMARY }}>
           Quick Sizing Reference
         </h2>
 
         {SIZING_GUIDES.map((guide) => (
           <div key={guide.sport} className={`${RADIUS_CARD} border px-5 pt-5 pb-4 ${guide.color}`}>
-            <h2 className={`text-xs font-black tracking-widest uppercase mb-4 ${guide.labelColor}`}>
+            <h2 className={`text-sm font-black tracking-widest uppercase ${guide.labelColor}`}>
               {guide.sport}
             </h2>
-            <div className="grid grid-cols-[5fr_7fr] items-center pb-2 mb-1 border-b border-black/10">
+            <div className="h-4" />
+            <div className="grid grid-cols-[5fr_7fr] items-center py-2 border-b border-black/10">
               <span className="font-mono text-xs font-bold text-slate-400 uppercase tracking-wider">Gear</span>
               <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Sizing Calculation</span>
             </div>

src/components/__tests__/BottomNav.test.tsx

@@ -29,18 +29,18 @@ describe('BottomNav', () => {
     const TABS: TopLevelTab[] = ['family', 'gear', 'measure', 'resources'];
 
     TABS.forEach((tab) => {
-      it(`applies active scale class to "${tab}" tab when it is active`, () => {
+      it(`applies active color class to "${tab}" tab when it is active`, () => {
         render(<BottomNav activeTab={tab} onChange={mockOnChange} />);
         const label = tab.toUpperCase();
         const btn = screen.getByText(label).closest('button')!;
-        expect(btn).toHaveClass('scale-110');
+        expect(btn).toHaveClass('text-[#008751]');
       });
     });
 
-    it('does not apply active class to inactive tabs', () => {
+    it('does not apply active color to inactive tabs', () => {
       render(<BottomNav activeTab="family" onChange={mockOnChange} />);
       const gearBtn = screen.getByText('GEAR').closest('button')!;
-      expect(gearBtn).not.toHaveClass('scale-110');
+      expect(gearBtn).not.toHaveClass('text-[#008751]');
     });
   });