css: tokenize admin fee margins + remove redundant inline style — spacing audit pass 3

Replaced 2 hardcoded 6px margin-bottom values with var(--space-xs) in admin-fee-header
and admin-waive-savings. Removed redundant inline style="margin-bottom:16px" from sec-01
subtitle (handled by section-content * + * rule). Full visual audit across Dark/Light/Glass
at 1920px, print media, and mobile (375px/600px/780px landscape) — no regressions found.
Updated SESSION-HANDOFF, CLAUDE.md, DECISION-LOG, KNOWN-ISSUES, and MASTER-SESSION-PROMPT.

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

docs/SESSION-HANDOFF.md

@@ -1,49 +1,70 @@
 # Session Handoff — SVS MSP CALC
 
 **Last updated:** 2026-03-16
-**Session:** Section I & II Visual Polish (Pass 2)
-**Status:** COMPLETE — all 3 issues from Pass 1 resolved
+**Session:** Visual Polish Pass 3 — Spacing Audit + Section III + Print/Mobile Verification
+**Status:** COMPLETE — all 4 tasks verified, minor token cleanup applied
 
 ## What Was Done This Session
 
-### Section Polish Pass 2 — Premium Feel
-Addressed all 3 issues flagged after Pass 1, verified across Dark/Light/Glass at 1920px + 600px.
+### 1. Deeper Spacing Audit (Collapsible Bodies)
+Playwright screenshots of all 6 sections expanded across Dark/Light/Glass at 1920px. Audited vertical rhythm within collapsible bodies:
+- **Collapsible body top/bottom padding (10px)** — visually balanced, no change needed
+- **Addon grid gap (8px) vs feature list gap (12px)** — addon rows have internal padding compensating, no change needed
+- **VoIP addon-grid inline `margin-top:8px`** — intentional tight coupling to tier selector, kept as-is
 
-1. **Vertical spacing rhythm** — bumped `.section-content > * + *` base gap from `--space-stack` (14px) to `--space-stack-roomy` (16px) for more breathing room between elements
-2. **M365 app strip cleanup** — removed all per-item borders and backgrounds; items now float cleanly within the container. Removed icon drop-shadows. Removed accent-tinted container background/border (now uses neutral `--surface-feature` + `--border`). Removed border-top separator from note area.
-3. **Collapsible header refinement** — switched from accent-tinted background (`--surface-accent-soft`) to neutral `--surface-feature`. Border changed from accent-tinted `color-mix()` to plain `--border`. Hover uses very subtle accent (6% mix) instead of heavy 10%. Result feels native across all 3 themes.
+### 2. Section III (Site Management) Polish Pass
+Verified sec-01 expanded in all 3 themes:
+- Progress bar/threshold bar renders correctly
+- Admin fee header + fee table spacing balanced
+- Waived savings badge appears/disappears cleanly
+- Feature card grid inside "What's Covered" collapsible well-spaced
+- Collapsible headers already using neutral Pass 2 styling (global CSS)
+- **Minor cleanup:** tokenized 2 hardcoded `6px` margins → `var(--space-xs)` (4px)
+- **Minor cleanup:** removed redundant `style="margin-bottom:16px;"` from sec-01 subtitle (the `* + *` rule already handles it)
 
-### Visual QA
-- Playwright screenshots taken at 1920px desktop and 600px mobile
-- Dark, Light, Glass themes all verified — collapsibles and M365 strip look native in each
-- Section II (Endpoint Package) confirmed consistent with Section I styling
+### 3. Print/PDF Verification
+Playwright print media emulation confirmed:
+- All sections expand correctly, interactive controls hidden
+- Collapsible headers hidden (`display: none !important`)
+- Feature cards, fee table, addon rows render cleanly
+- Footer text present via `body::after`
+- Sidebar appears after sections
+- No regression from 14→16px gap change or other Pass 2 CSS changes
+
+### 4. Mobile Panel Verification
+Playwright at 375px, 600px, 780px landscape:
+- **375px:** MRR pill visible and positioned, mobile panel opens with correct sidebar clone, all values sync correctly between desktop and mobile
+- **600px:** Controls stacked, touch targets correct, pill visible
+- **780px landscape:** 2-column restored, pill/panel hidden, static sidebar visible
+- HST toggle and value sync confirmed working
 
 ## Files Modified (this session)
 
 | File | Changes |
 |------|---------|
-| `SVS-MSP-Calculator-components.css` | Section content gap 14→16px; M365 strip: removed per-item borders/bg/shadow, neutral container; collapsible headers: neutral bg/border, softer hover; strip note: removed border-top |
+| `SVS-MSP-Calculator-components.css` | `.admin-fee-header` margin-bottom: `6px` → `var(--space-xs)`; `.admin-waive-savings` margin-bottom: `6px` → `var(--space-xs)` |
+| `SVS-MSP-Calculator.html` | Removed redundant inline `style="margin-bottom:16px;"` from sec-01 `.section-subtitle` |
 
 ## Test Status
 ```
 254/254 tests passing
-node svsmspcalc/tests/test-quote-engine.js
+node tests/test-quote-engine.js
 ```
 
 ## What's Next
 
 Potential next steps (user to prioritize):
-1. **Deeper spacing audit** — check vertical rhythm within expanded collapsible bodies (feature list items, addon rows) if user wants finer tuning
-2. **Section III (Site Management)** polish pass — same treatment if needed
-3. **Print/PDF verification** — confirm CSS changes don't affect print layout
-4. **Mobile panel** — verify mobile panel rendering matches desktop sidebar
+1. **Sections IV–VI activation** — Server, ZT, VoIP sections structurally complete but content gated (Medium priority per KNOWN-ISSUES)
+2. **Spacing token consolidation** — 150+ magic-number px values in components.css; dedicated cleanup pass (Low priority per KNOWN-ISSUES)
+3. **Mobile panel UX enhancements** — gesture-based close, swipe-to-dismiss
+4. **Beta readiness audit** — comprehensive cross-browser testing, accessibility pass
 
 ## Continuation Prompt
 
 ```
-Read svsmspcalc/docs/SESSION-HANDOFF.md then svsmspcalc/docs/QUICK-REF.md.
-3 themes: Dark, Light, Glass. Pre-alpha in svsmspcalc/pre-alpha/ (read-only).
-254 tests must pass: node svsmspcalc/tests/test-quote-engine.js
+Read docs/SESSION-HANDOFF.md then docs/QUICK-REF.md.
+3 themes: Dark, Light, Glass.
+254 tests must pass: node tests/test-quote-engine.js
 
 ## Plugins Available — USE THEM
 - **frontend-design** — invoke for design decisions, spacing, color, layout