Update: consistent spacing and Member Detail stat polish (#75)

* 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: document .env.local copy step for new worktrees

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

* Update: consistent spacing and Member Detail polish

- Standardise all scrollable bodies to bg-[#F8FAFC] px-6 pt-6 pb-8
  (fixes px-4/px-5 side margins and bg-white backgrounds on forms,
  history, converter, notifications, resources, measure, settings)
- Member Detail stat rows: CapitalCase labels, pl-4 indent to align
  with name text, mt-[11px] above first row, mb-[11px] below name
- Add Head (headCircumference) to Member Detail stat rows

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

* Update: group Member Detail stats and add Head attribute

- Reorder stat rows: Age/Height/Weight, then Head/Hand/Foot
- Add 3px visual gap before the second group (spaceBefore on Head)
- Add Head (headCircumference) attribute to stat rows

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

* Fix: stat row grouping using inline style instead of dynamic Tailwind class

Split statRows into two explicit groups; apply marginTop via inline style
on the first item of group 2 to avoid Tailwind v4 purge of dynamic classes.

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

* Update: consistent 8px gaps and deeper label indent in Member Detail stats

- 8px gap before Age (name→Age), before Height (Age→Height),
  and before Head (Weight→Head) — all group separators now uniform
- Increase label indent pl-4→pl-[18px] to align under 'e' in name

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/EditMeasurementEntryScreen.tsx

@@ -177,7 +177,7 @@ export function EditMeasurementEntryScreen({
         onBack={onBack}
       />
 
-      <div className="flex-1 overflow-y-auto bg-white px-5 py-5">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8">
         <form onSubmit={handleSubmit} noValidate className="space-y-4">
           {/* Date */}
           <div>

src/components/GearForm.tsx

@@ -257,7 +257,7 @@ export function GearForm({
         className="flex flex-col flex-1 min-h-0"
       >
         {/* Scrollable content */}
-        <div className="flex-1 overflow-y-auto bg-white px-6 py-5 flex flex-col gap-6">
+        <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8 flex flex-col gap-6">
           {error && (
             <div className="bg-red-50 border border-red-200 text-red-600 text-sm font-bold rounded-xl px-4 py-3">
               {error}

src/components/MeasureScreen.tsx

@@ -12,7 +12,7 @@ export function MeasureScreen({ members, onSelectMember }: MeasureScreenProps) {
   return (
     <div className="flex flex-col min-h-0 flex-1">
       <ScreenHeader title="Measure" />
-      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8">
         <p className="text-xs text-slate-400 font-bold tracking-widest mb-4">
           Select a member to update measurements
         </p>

src/components/MeasurementHistoryScreen.tsx

@@ -78,7 +78,7 @@ export function MeasurementHistoryScreen({
         }
       />
 
-      <div className="flex-1 overflow-y-auto bg-white px-4 py-4">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8">
         {entries.length === 0 ? (
           <p className="text-slate-400 text-sm text-center py-8">
             No measurement history yet. Tap + to add an entry.

src/components/MemberDetail.tsx

@@ -250,6 +250,7 @@ export function MemberDetail({
 
   const showFoot = settings?.display.showFoot ?? true;
   const showHand = settings?.display.showHand ?? true;
+  const headDisplay = m.headCircumference ? `${m.headCircumference} cm` : '—';
   const separateFeetHands = settings?.display.separateFeetHands ?? false;
 
   // Format shoe size for display
@@ -281,19 +282,19 @@ export function MemberDetail({
     ? `${Math.round(m.weight * 2.2046)} lbs`
     : `${m.weight} kg`;
 
-  const statRows = [
+  type StatRow = { label: string; value: string; badge?: string | null; onToggle?: () => void; action?: () => void };
+
+  const statGroup1: StatRow[] = [
     { label: 'Age',    value: `${age} yrs` },
     { label: 'Height', value: heightDisplay, badge: growthBadgeReason, onToggle: () => setHeightUnit(u => u === 'cm' ? 'ft' : 'cm') },
     { label: 'Weight', value: weightDisplay, onToggle: () => setWeightUnit(u => u === 'kg' ? 'lbs' : 'kg') },
-    ...(showFoot ? [{ label: 'Foot', value: shoeDisplay, action: footLength > 0 ? onOpenConverter : undefined, onToggle: footLength > 0 ? () => setFootUnit(u => u === 'cm' ? 'in' : 'cm') : undefined }] : []),
+  ];
+
+  const statGroup2: StatRow[] = [
+    { label: 'Head', value: headDisplay },
     ...(showHand ? [{ label: 'Hand', value: handDisplay }] : []),
-  ] as Array<{
-    label: string;
-    value: string;
-    badge?: string | null;
-    onToggle?: () => void;
-    action?: () => void;
-  }>;
+    ...(showFoot ? [{ label: 'Foot', value: shoeDisplay, action: footLength > 0 ? onOpenConverter : undefined, onToggle: footLength > 0 ? () => setFootUnit(u => u === 'cm' ? 'in' : 'cm') : undefined }] : []),
+  ];
 
   return (
     <div className="member-detail flex flex-col min-h-screen">
@@ -331,16 +332,16 @@ export function MemberDetail({
 
           {/* Right column: name + stats + history */}
           <div className="flex-1 pt-1 min-w-0">
-            <div className="flex items-center gap-2 mb-5">
+            <div className="flex items-center gap-2 mb-0">
               <h2 className="text-2xl font-black text-slate-900 tracking-tight leading-none truncate">
                 {member.name}
               </h2>
             </div>
 
-            <div className="mb-3">
-              {statRows.map((row) => (
-                <div key={row.label} className="flex items-center border-b border-slate-100 py-2.5">
-                  <span className="flex-1 text-[11px] text-slate-400 font-bold tracking-widest uppercase">
+            <div className="mb-3 mt-0">
+              {[...statGroup1, ...statGroup2].map((row, i) => (
+                <div key={row.label} className="flex items-center border-b border-slate-100 py-2.5" style={(i === 0 || i === 1 || i === statGroup1.length) ? { marginTop: '8px' } : undefined}>
+                  <span className="flex-1 pl-[18px] text-[11px] text-slate-400 font-bold tracking-widest">
                     {row.label}
                   </span>
                   <div className="flex items-center gap-1.5">

src/components/MemberForm.tsx

@@ -134,7 +134,7 @@ export function MemberForm({ member, onSubmit, onCancel, separateFeetHands = fal
         className="flex flex-col flex-1 min-h-0"
       >
         {/* Scrollable fields */}
-        <div className="flex-1 overflow-y-auto bg-white px-6 py-5 flex flex-col gap-6">
+        <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8 flex flex-col gap-6">
           {error && (
             <div className="bg-red-50 border border-red-200 text-red-600 text-sm font-bold rounded-xl px-4 py-3">
               {error}

src/components/NotificationsScreen.tsx

@@ -24,7 +24,7 @@ export function NotificationsScreen({ notifications, onUndismiss, onBack }: Prop
     <div className="flex flex-col min-h-0 flex-1">
       <ScreenHeader title="Dismissed Notifications" onBack={onBack} />
 
-      <div className="flex-1 overflow-y-auto bg-white px-6 py-6">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8">
         {notifications.length === 0 ? (
           <p className="empty-state">No dismissed notifications.</p>
         ) : (

src/components/ResourcesScreen.tsx

@@ -54,7 +54,7 @@ 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 flex flex-col gap-[22px]">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8 flex flex-col gap-[22px]">
         <h2 className={SECTION_HEADER_CLS} style={{ color: COLOR_PRIMARY }}>
           Quick Sizing Reference
         </h2>

src/components/SettingsScreen.tsx

@@ -52,7 +52,7 @@ export function SettingsScreen({
     <div className="flex flex-col min-h-0 flex-1">
       <ScreenHeader title="Settings" onBack={onBack} />
 
-      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 py-6 flex flex-col gap-8">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8 flex flex-col gap-8">
 
         {/* ── Units ─────────────────────────────────── */}
         <section>

src/components/ShoeSizeConverter.tsx

@@ -61,7 +61,7 @@ export function ShoeSizeConverter({
     <div className="flex flex-col min-h-0 flex-1">
       <ScreenHeader title="Size Converter" onBack={onClose} />
 
-      <div className="flex-1 overflow-y-auto bg-white px-6 py-5 flex flex-col gap-6">
+      <div className="flex-1 overflow-y-auto bg-[#F8FAFC] px-6 pt-6 pb-8 flex flex-col gap-6">
         {/* Input section */}
         <section>
           <label className="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">