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>
2026-03-16 15:28:49 -04:00
parent e6c0baef3b
commit e462953a2a
7 changed files with 359 additions and 32 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,248 @@
+# CLAUDE.md — SVS MSP Calculator
+
+> Master instruction set for Claude Code. This is the SINGLE file to read on session start.
+> It references deeper docs — do not duplicate them here.
+
+## Project Identity
+
+**App:** SVS MSP Calculator — a live quote/pricing calculator for SVS Managed Services.
+**Used by:** Sales team, live on screen with prospects during discovery calls.
+**Tech:** Vanilla HTML5 / CSS3 / JS (ES5-compatible). No frameworks, no npm, no build tools. Open `SVS-MSP-Calculator.html` in a browser — it runs.
+**Status:** Alpha-ready, pushing to Beta.
+**Tests:** 254 passing (`node tests/test-quote-engine.js`)
+**Themes:** 3 — Dark (flagship), Light, Glass
+
+For full architecture, file maps, DOM IDs, and pricing constants see `docs/QUICK-REF.md`.
+For business logic and pricing rules see `docs/quote-rules.md`.
+For the complete architecture brief see `docs/MASTER-SESSION-PROMPT.md`.
+
+---
+
+## Session Start Protocol
+
+On every new conversation, execute in order:
+
+1. **Read context** (parallel):
+   - `docs/SESSION-HANDOFF.md` — what happened last, what is next
+   - `docs/QUICK-REF.md` — file map, DOM IDs, pricing, danger zones
+2. **Run baseline tests:** `node tests/test-quote-engine.js` — confirm 254/254 pass
+3. **Ask the user** what they want to work on. Do not assume. Do not start changing things.
+4. **Read task-specific docs only when needed:**
+   - `docs/quote-rules.md` — pricing or business logic work
+   - `docs/regression-checklist.md` — validation work
+   - `docs/MASTER-SESSION-PROMPT.md` — unfamiliar areas, full architecture
+   - `docs/DECISION-LOG.md` — check if a relevant decision was already made
+   - `docs/KNOWN-ISSUES.md` — check if the issue is already tracked
+
+---
+
+## Session End Protocol
+
+Before ending any session:
+
+1. **Run full test suite:** `node tests/test-quote-engine.js` — all 254 must pass
+2. **Update `docs/SESSION-HANDOFF.md`** with:
+   - What was done (brief, specific)
+   - Files modified (table format)
+   - Test status (pass count)
+   - What is next (prioritized)
+3. **Update `docs/CHECKPOINT.md`** if structural work was completed
+4. **Update `docs/DECISION-LOG.md`** if any decisions were made
+5. **Use `superpowers:finishing-a-development-branch`** for commit and cleanup
+
+---
+
+## Orchestration Engine — Superpowers
+
+Use the **superpowers** plugin as the execution backbone for all non-trivial work.
+
+### Workflow Selection
+
+| Situation | Superpowers Skill to Use |
+|-----------|--------------------------|
+| Planning any feature or multi-step work | `superpowers:writing-plans` |
+| Executing a plan with review gates | `superpowers:subagent-driven-development` |
+| 2+ independent tasks (e.g., fix CSS in all 3 themes) | `superpowers:dispatching-parallel-agents` |
+| Investigating a bug or failure | `superpowers:systematic-debugging` |
+| Writing or modifying quote engine logic | `superpowers:test-driven-development` |
+| Final checks before marking work done | `superpowers:verification-before-completion` |
+| Committing, branch cleanup, merge prep | `superpowers:finishing-a-development-branch` |
+| Visual brainstorming for design or UX | `superpowers:brainstorming` |
+
+### Subagent-Driven Development Flow
+
+For any plan with 2+ tasks, use `superpowers:subagent-driven-development`:
+
+```
+Per task:
+  1. Dispatch implementer subagent (with role-specific model — see below)
+  2. Spec compliance review (did it match requirements?)
+  3. Code quality review (is it well-built?)
+  4. Mark task complete
+After all tasks:
+  Final code review → superpowers:finishing-a-development-branch
+```
+
+---
+
+## Agent Roles & Model Routing
+
+When dispatching subagents (via superpowers or directly), route to the right role and model.
+
+### Frontend Coder — Opus (default)
+**When:** JS logic, CSS changes, HTML structure, bug fixes, refactoring.
+**How:** Surgical precision. Read the file first, make the minimal change.
+**Post-change:** Run the full validation pipeline.
+
+### UI/UX Designer — Opus + ui-ux-pro-max Skill
+**When:** Design decisions — palettes, typography, spacing, layout, visual hierarchy, component styling.
+**How:** Invoke the ui-ux-pro-max skill BEFORE implementation. Feed design system output to the implementer subagent.
+**Sub-skills:** banner-design, brand, design-system, design, slides, ui-styling
+**Constraint:** Translate all output to vanilla CSS — this project has no framework.
+
+### Copywriter — Sonnet Model
+**When:** ALL user-facing text — button labels, section descriptions, nudge messages, tooltip copy, sidebar labels, sales language, feature descriptions, comparison text, pitch bar copy.
+**How:** Dispatch Agent with `model: "sonnet"`. Provide context about:
+  - The sales use case (live on calls with prospects)
+  - The specific UI element being written for
+  - The current text (if revising)
+**Tone:** Confident, concise, client-facing. Not marketing fluff. This is a tool used live.
+**Rule:** Copy is UX. Every label guides behavior. Every nudge drives a decision.
+
+### Calculation Validator — Opus
+**When:** After ANY change to `quote-engine.js`, `quote-pricing.js`, `package-prices-data.js`, or sidebar render values.
+**How:**
+  1. Run `node tests/test-quote-engine.js` — all 254 must pass
+  2. Manually verify 2+ quote configs against the verification matrix in `docs/MASTER-SESSION-PROMPT.md` (Priority 4)
+  3. Cross-check sidebar display values against engine output
+  4. Verify admin fee floor/threshold logic at edge cases (0 users, 1 endpoint)
+
+### QA / Regression Tester — Opus
+**When:** After any visual, structural, or behavioral change.
+**How:** Run the validation pipeline below. Use Playwright MCP for visual verification.
+**Reference:** `docs/regression-checklist.md` for full manual QA procedures.
+
+---
+
+## Validation Pipeline
+
+After every change, validate in order. Stop and fix at the first failure.
+
+```
+1. TESTS        node tests/test-quote-engine.js (254/254 must pass)
+2. SYNTAX       No console errors on fresh browser load
+3. THEMES       Playwright: verify Dark, Light, Glass all render correctly
+4. MOBILE       Playwright: verify at 375px — floating MRR pill, bottom sheet, sync
+5. PRINT        If CSS touched: verify print output is unaffected
+6. PERSISTENCE  If state/form touched: save → reload → verify all values restore
+7. EXPORT       If export touched: JSON export valid, version field present
+```
+
+---
+
+## Hard Constraints
+
+These are inviolable. Every change must preserve them.
+
+| # | Constraint |
+|---|-----------|
+| 1 | **DOM IDs are a contract.** `mobile-sync.js` maps 100+ ID pairs (desktop ↔ `_m` suffix). Renaming breaks sync silently. |
+| 2 | **Quote math is sacred.** Any `quote-engine.js` or `quote-pricing.js` change requires test validation. |
+| 3 | **localStorage round-trip must work.** Key: `svs-msp-quote-v1`. Verify after form/state changes. |
+| 4 | **All 3 themes must work.** Dark (flagship), Light, Glass. Token/component changes cascade to all. |
+| 5 | **Mobile parity maintained.** Sidebar clone in mobile panel must stay in sync. Usable at 375px. |
+| 6 | **Print/PDF tested after CSS changes.** Print CSS is sensitive to component class changes. |
+| 7 | **No framework or build-tool migration.** Vanilla JS by design. |
+| 8 | **No broad rewrites.** Surgical, approved changes only. |
+| 9 | **Read before editing.** Always inspect current code before making changes. |
+| 10 | **Ask before assuming.** When requirements are ambiguous, ask the user. |
+
+---
+
+## Regression Hotspots
+
+| Area | Risk | Why |
+|------|------|-----|
+| `quote-engine.js` math | Critical | Wrong quotes in real sales calls |
+| localStorage round-trip | High | Silent failures lose configured quotes |
+| Mobile sync ID map | High | 100+ pairs desync silently if IDs change |
+| Print/PDF CSS | Medium | Separate cascade, sensitive to class changes |
+| Theme switching | Medium | All 3 themes affected by token changes |
+| `update()` call chain | Medium | Side effects cascade: calc → render → sidebar → nudges → summaries → save |
+
+---
+
+## Installed Plugins & Skills
+
+### Plugins (use when applicable)
+
+| Plugin | When to Use |
+|--------|-------------|
+| `superpowers` | Orchestration: planning, agents, reviews, TDD, debugging, branch mgmt |
+| `frontend-design` | Frontend design patterns and implementation |
+| `code-review` | Structured code review |
+| `code-simplifier` | Simplification and cleanup passes |
+| `playwright` | Browser automation, visual verification, screenshot comparison |
+| `claude-md-management` | Maintaining this CLAUDE.md file |
+| `skill-creator` | Creating new custom skills for this project |
+
+### Skills (ui-ux-pro-max)
+
+| Skill | When to Use |
+|-------|-------------|
+| `ui-ux-pro-max` | Main design intelligence — styles, colors, typography, UX rules |
+| `design-system` | Token architecture, component specs |
+| `brand` | Voice, visual identity, messaging consistency |
+| `ui-styling` | Component styling (translate to vanilla CSS) |
+| `design` | Logo, icons, visual assets |
+| `banner-design` | Marketing banners and heroes |
+| `slides` | HTML presentations |
+
+**Search command** (requires Python 3):
+```bash
+python3 .claude/skills/ui-ux-pro-max/src/ui-ux-pro-max/scripts/search.py "<query>" --domain <domain>
+```
+Domains: `style`, `color`, `typography`, `product`, `landing`, `chart`, `ux`
+
+---
+
+## Commit Protocol
+
+- One concern per commit. Do not bundle unrelated changes.
+- Message format: `<area>: <what> — <why>`
+- Examples: `css: fix glass theme sidebar blur — backdrop-filter not applying at 900px`
+- Examples: `engine: correct admin fee at zero users — floor logic was bypassed`
+- Do not commit temp files or `.bak-focusmode` files.
+- Run validation pipeline before committing.
+- Use `superpowers:finishing-a-development-branch` for final commit + cleanup.
+
+---
+
+## Design Principles
+
+1. **Sales clarity over visual novelty.** Prospects must read numbers at a glance.
+2. **Trust through polish.** Misaligned inputs erode prospect confidence.
+3. **Progressive disclosure.** Lead with MRR total. Detail unfolds on demand.
+4. **Feedback immediacy.** Every input change updates sidebar within 1 frame.
+5. **Dark theme is the flagship.** Light and Glass must meet the same bar.
+6. **The sidebar is the hero.** Design it like a financial summary, not a DOM dump.
+7. **Copy is UX.** Labels, nudges, and button text are design decisions.
+8. **Mobile is first-class.** A sales rep on a tablet must run a full quote.
+
+---
+
+## File Reference
+
+See `docs/QUICK-REF.md` for the complete file map, DOM IDs, and pricing constants.
+
+| Category | Key Files |
+|----------|-----------|
+| Orchestration | `SVS-MSP-Calculator.js`, `SVS-MSP-Calculator.html` |
+| Quote Engine | `quote-engine.js`, `quote-pricing.js`, `package-prices-data.js` |
+| Rendering | `quote-render.js`, `mobile-sync.js`, `theme-manager.js` |
+| Persistence | `quote-persistence.js`, `quote-export.js`, `quote-import.js` |
+| CSS Tokens | `SVS-MSP-Calculator-tokens.css` (source of truth for design tokens) |
+| CSS Themes | `*-light.css`, `*-glass.css` |
+| CSS Layout | `*-layout.css`, `*-components.css`, `*-responsive.css`, `*-print.css` |
+| Tests | `tests/test-quote-engine.js` (254 tests, zero deps) |
+| Docs | `docs/QUICK-REF.md`, `docs/SESSION-HANDOFF.md`, `docs/MASTER-SESSION-PROMPT.md`, `docs/quote-rules.md`, `docs/DECISION-LOG.md`, `docs/KNOWN-ISSUES.md` |
--- a/SVS-MSP-Calculator-components.css
+++ b/SVS-MSP-Calculator-components.css
@@ -1790,12 +1790,12 @@
  .sl-otf-waived .otf-waived-label { text-decoration: none; font-weight: 600; letter-spacing: 0.06em; font-size: 0.7rem; margin-right: var(--space-xs); }

  /* ── ADMIN FEE WAIVED display */
-  .admin-fee-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-stack-tight); margin-bottom: 6px; }
+  .admin-fee-header { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-stack-tight); margin-bottom: var(--space-xs); }
  .admin-fee-waive-toggle { margin-left: auto; }
  .admin-fee-strike { text-decoration: line-through; color: var(--muted); text-decoration-color: var(--muted); }
  .admin-fee-waived-badge { font-family: 'DM Mono', monospace; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--green); background: var(--surface-positive-badge); border: 1px solid var(--border-positive-badge); border-radius: var(--radius-control); padding: 2px var(--space-sm); vertical-align: middle; }
  .sl-admin-waived > span:first-child { text-decoration: line-through; text-decoration-color: var(--muted); color: var(--muted); }
-  .admin-waive-savings { display: flex; align-items: center; gap: var(--space-sm); font-family: 'DM Mono', monospace; font-size: 0.78125rem; letter-spacing: 0.04em; color: var(--green); background: var(--surface-positive-panel); border: 1px solid var(--border-positive-panel); border-radius: var(--radius-control); padding: var(--space-stack-tight) var(--space-stack); margin-top: var(--space-md); margin-bottom: 6px; }
+  .admin-waive-savings { display: flex; align-items: center; gap: var(--space-sm); font-family: 'DM Mono', monospace; font-size: 0.78125rem; letter-spacing: 0.04em; color: var(--green); background: var(--surface-positive-panel); border: 1px solid var(--border-positive-panel); border-radius: var(--radius-control); padding: var(--space-stack-tight) var(--space-stack); margin-top: var(--space-md); margin-bottom: var(--space-xs); }
  .admin-waive-savings.hidden { display: none; }
  #adminWaivedAmt { font-weight: 700; }

--- a/SVS-MSP-Calculator.html
+++ b/SVS-MSP-Calculator.html
@@ -209,7 +209,7 @@
    <div class="section-body" id="sec-01-body" style="display:none;">
    <div class="section-content">

-      <div class="section-subtitle" style="margin-bottom:16px;">Ongoing oversight for your environment, vendors, and IT documentation so everything stays coordinated, accountable, and easier to support.</div>
+      <div class="section-subtitle">Ongoing oversight for your environment, vendors, and IT documentation so everything stays coordinated, accountable, and easier to support.</div>

      <div class="admin-fee-header">
        <span class="admin-fee-title">Site Admin Fee</span>
--- a/docs/DECISION-LOG.md
+++ b/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.
--- a/docs/KNOWN-ISSUES.md
+++ b/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 |
--- a/docs/MASTER-SESSION-PROMPT.md
+++ b/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
--- a/docs/SESSION-HANDOFF.md
+++ b/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