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/DECISION-LOG.md

@@ -0,0 +1,35 @@
+# Decision Log — SVS MSP Calculator
+
+Settled decisions that should not be re-debated in future sessions.
+
+---
+
+## 2026-03-15 — Retro Theme Removed from Cycle
+**Decision:** 70s Retro theme removed from the 3-theme toggle cycle (Dark → Light → Glass).
+**Why:** The warm paper/neon palette had low contrast and muddy colors. Full design pass deferred.
+**Impact:** `theme-manager.js` cycles 3 themes. `SVS-MSP-Calculator-70retro.css` file retained in repo for potential future revival. All theme references should say "3 themes" not "4 themes."
+
+## 2026-03-14 — INKY Add-on Price $5 → $8
+**Decision:** INKY Pro email protection add-on repriced from $5/user/mo to $8/user/mo.
+**Why:** Vendor price increase.
+**Impact:** `quote-pricing.js` ADDON_INKY default updated. 4 test expectations updated in `test-quote-engine.js`.
+
+## 2026-03-15 — Pricing CSV → JSON Migration
+**Decision:** Runtime pricing loaded from `package-prices-data.js` (script tag) instead of CSV.
+**Why:** JSON is structured, human-readable, and works on `file://` protocol without fetch/CORS issues.
+**Impact:** `package-prices.csv` retained as read-only reference. `package-prices-data.js` is the single source of truth. Edit `value` fields there to change pricing.
+
+## 2026-03-15 — JSON Export Schema v1.1
+**Decision:** Export schema bumped to v1.1 adding `repName` and `quoteNotes` fields.
+**Why:** Print invoice now includes rep name and quote notes.
+**Impact:** Import handles both v1.0 and v1.1 payloads (backward-compatible).
+
+## 2026-03-15 — Spacing Token Consolidation Deferred
+**Decision:** 150+ magic-number spacing values will NOT be migrated to tokens in the current phase.
+**Why:** Too many touchpoints (10px: 36, 12px: 35, 14px: 36, 16px: 24, 20px: 19). Migration scope too broad for surgical approach.
+**Impact:** Deferred to a dedicated spacing-focused stage. Existing `--space-stack-*` tokens used only 4× out of 150+.
+
+## 2026-03-15 — Font Awesome Icons as Inline Data URIs
+**Decision:** All 36 FA Sharp Solid SVG references converted to inline `data:image/svg+xml` URIs.
+**Why:** CSS `mask-image: url()` is blocked by browser security on `file://` protocol.
+**Impact:** Icons work on local file open. No external SVG file dependencies for icon rendering.

docs/KNOWN-ISSUES.md

@@ -0,0 +1,24 @@
+# Known Issues & Deferred Work — SVS MSP Calculator
+
+Items tracked here are intentional deferrals, not bugs. Check this list before starting new work.
+
+---
+
+## Deferred Work
+
+| # | Item | Severity | Source | Notes |
+|---|------|----------|--------|-------|
+| D1 | Spacing token consolidation | Low | Stage 8 audit | 150+ magic-number px values across components.css. Needs dedicated stage. |
+| D2 | `fmt()` duplicated in quote-render.js and quote-export.js | Low | Stage 3 audit | Both inside IIFEs — intentional isolation. One-liner formatter. |
+| D3 | Retro theme full design pass | Low | Stage 5 | Warm paper/neon palette functional but not polished. CSS file retained. |
+| D4 | Retro theme QA at all viewports | Low | Stage 5 | Only mobile verified during overhaul. Desktop/wide not fully tested. |
+| D5 | Sections IV–VI content activation | Medium | Master prompt | Server, ZT Networking, VoIP — structurally complete, content gated. Engine calculates when inputs present. |
+
+## Known Quirks (Intentional)
+
+| # | Quirk | Why It's OK |
+|---|-------|-------------|
+| Q1 | Glass theme uses 97 `!important` declarations | Standard glassmorphism override pattern — theme must beat compound parent selectors |
+| Q2 | `console.warn()` in pricing/persistence/import | Intentional error reporting for debugging — not dead code |
+| Q3 | 70retro.css still in repo but not in theme cycle | Retained for potential future revival per decision log |
+| Q4 | Sidebar focus toggle uses white rgba on colored header | Correct in all themes — verified during Phase 2 audit |

docs/MASTER-SESSION-PROMPT.md

@@ -26,7 +26,7 @@ You do not introduce change for its own sake. You improve with purpose, validate
 
 ### What "Beta" Means Here
 - All active sections (I–III) are visually polished and production-quality
-- All four themes (Dark, Light, Glass, 70s Retro) are consistent, tested, and professional
+- All three themes (Dark, Light, Glass) are consistent, tested, and professional
 - Mobile experience is smooth, reliable, and parity-complete with desktop
 - Print/PDF invoice is clean, branded, and pixel-accurate
 - Quote math, persistence, and export are verified and regression-safe
@@ -47,7 +47,7 @@ svsmspcalc/
 ├── quote-render.js               # DOM rendering + nudge engine (662 lines)
 ├── quote-persistence.js          # localStorage save/restore (212 lines)
 ├── quote-export.js               # Print/PDF + JSON export (295 lines)
-├── theme-manager.js              # Dark/Light/Glass/70s Retro switching (110 lines)
+├── theme-manager.js              # Dark/Light/Glass switching (110 lines)
 ├── mobile-sync.js                # Mobile panel + 100+ element sync (236 lines)
 ├── SVS-MSP-Calculator.css        # Manifest: @imports all CSS files
 ├── SVS-MSP-Calculator-tokens.css # Design tokens + CSS vars
@@ -58,7 +58,6 @@ svsmspcalc/
 ├── SVS-MSP-Calculator-print.css  # Print-specific rules
 ├── SVS-MSP-Calculator-light.css  # Light theme overrides
 ├── SVS-MSP-Calculator-glass.css  # Glass theme (glassmorphism)
-├── SVS-MSP-Calculator-70retro.css # 70s Retro theme overrides
 ├── package-prices.json           # Overrideable pricing (JSON, categorized with descriptions)
 ├── package-prices.csv            # Legacy pricing reference (no longer loaded at runtime)
 ├── tests/
@@ -78,7 +77,7 @@ svsmspcalc/
 - **No build tools.** Open the HTML in a browser — it runs.
 - **No npm.** No webpack, Vite, Rollup, Parcel, or transpilation.
 - **No TypeScript.** Plain `.js` files.
-- **CSS architecture:** Tokenized custom properties. Modular files. Four theme override layers.
+- **CSS architecture:** Tokenized custom properties. Modular files. Three theme override layers (Dark, Light, Glass).
 - **State:** localStorage only. Key: `svs-msp-quote-v1`.
 - **Fonts:** Google Fonts (Cinzel, Poppins, Lato, DM Mono).
 - **Icons:** Font Awesome 7 Sharp (local SVGs), M365 icon set (local).
@@ -95,7 +94,7 @@ debouncedSave()     → auto-save to localStorage (debounced 400ms)
 ```
 node svsmspcalc/tests/test-quote-engine.js
 ```
-88 tests, zero dependencies. Tests the pure `calculateQuote(state, pricing)` function against known-good expected values using default pricing. Covers: rates, add-ons, admin fee logic, discounts, HST, VoIP, ZT networking, edge cases, and MRR integrity.
+254 tests, zero dependencies. Tests the pure `calculateQuote(state, pricing)` function against known-good expected values using default pricing. Covers: rates, add-ons, admin fee logic, discounts, HST, VoIP, ZT networking, edge cases, MRR integrity, export schema, persistence shape, import mapping, and quote output invariants.
 
 Run after any change to `quote-engine.js`, `quote-pricing.js`, or pricing JSON values.
 
@@ -146,7 +145,7 @@ These are inviolable. Every change must preserve them:
 1. **HTML shell is stable.** DOM IDs are a contract. Mobile sync maps 100+ ID pairs (desktop ↔ `_m` suffix). Renaming an ID breaks sync silently and catastrophically.
 2. **Quote math is correct.** Any change to `quote-engine.js` requires before/after validation of all outputs. Do not "clean up" math without proving equivalence.
 3. **localStorage persistence is intact.** `saveState()` and `restoreState()` must round-trip cleanly. Verify after any form/state changes.
-4. **All four themes must work.** Dark (default), Light (soft khaki), Glass (glassmorphism), 70s Retro. Changes to tokens or components cascade to all four.
+4. **All three themes must work.** Dark (default), Light (soft khaki), Glass (glassmorphism). Changes to tokens or components cascade to all three.
 5. **Mobile parity is maintained.** The sidebar clone in the mobile panel must stay in sync. Mobile UX must be usable on a 375px viewport.
 6. **Print/PDF export must be tested after CSS changes.** Print CSS lives in a separate file but is sensitive to component class changes.
 7. **No framework or build-tool migration.** This is vanilla JS by design.
@@ -170,7 +169,7 @@ Work in this order unless directed otherwise. Each priority includes UX, code, a
 - [ ] Typography hierarchy — Is Cinzel/Poppins/Lato used consistently? Are font sizes, weights, and line-heights harmonious across sections?
 - [ ] Spacing system — Is padding/margin using tokens consistently? Are section cards visually balanced?
 - [ ] Color usage — Are `--accent`, `--green`, `--amber`, `--muted` used purposefully, not decoratively?
-- [ ] Interactive states — Do all buttons, inputs, toggles, and checkboxes have clear hover/focus/active states in all four themes?
+- [ ] Interactive states — Do all buttons, inputs, toggles, and checkboxes have clear hover/focus/active states in all three themes?
 - [ ] Card hierarchy — Is there a clear visual distinction between level-1 containers, level-2 cards, and level-3 controls?
 - [ ] Icon consistency — Are Font Awesome icons used at consistent sizes, weights, and optical alignment?
 - [ ] Section header design — Are the numbered section headers (I, II, III) visually strong and scannable?
@@ -348,7 +347,7 @@ Work in this order unless directed otherwise. Each priority includes UX, code, a
 
 ### After Making Changes
 1. Verify syntax (especially JS — no console errors on load)
-2. Check all four themes render correctly
+2. Check all three themes render correctly
 3. Check mobile panel renders correctly at ≤780px
 4. Verify sidebar totals are mathematically correct for a test quote
 5. If CSS touched: verify print output is unaffected
@@ -398,7 +397,7 @@ For manual QA: `docs/regression-checklist.md`
 The build is ready to call "beta" when:
 
 - [ ] All Sections I–III are visually polished and functionally complete
-- [ ] All four themes pass a full visual review at all major breakpoints
+- [ ] All three themes pass a full visual review at all major breakpoints
 - [ ] Print/PDF invoice is clean and professionally branded
 - [ ] Mobile panel is fully synced and usable at 375px
 - [ ] Quote math passes all combinations in the verification matrix

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