john/svsmspcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
John OReilly
2026-03-16 15:28:49 -04:00
parent e6c0baef3b
commit e462953a2a
7 changed files with 359 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
CLAUDE.md Normal file
View File

@@ -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` |

4
SVS-MSP-Calculator-components.css
View File

@@ -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); } .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 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-waive-toggle { margin-left: auto; }
.admin-fee-strike { text-decoration: line-through; color: var(--muted); text-decoration-color: var(--muted); } .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; } .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); } .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; } .admin-waive-savings.hidden { display: none; }
#adminWaivedAmt { font-weight: 700; } #adminWaivedAmt { font-weight: 700; }

2
SVS-MSP-Calculator.html
View File

@@ -209,7 +209,7 @@
<div class="section-body" id="sec-01-body" style="display:none;"> <div class="section-body" id="sec-01-body" style="display:none;">
<div class="section-content"> <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"> <div class="admin-fee-header">
<span class="admin-fee-title">Site Admin Fee</span> <span class="admin-fee-title">Site Admin Fee</span>

35
docs/DECISION-LOG.md Normal file
View File

@@ -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.

24
docs/KNOWN-ISSUES.md Normal file
View File

@@ -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 |

17
docs/MASTER-SESSION-PROMPT.md
View File

@@ -26,7 +26,7 @@ You do not introduce change for its own sake. You improve with purpose, validate
### What "Beta" Means Here ### What "Beta" Means Here
- All active sections (I–III) are visually polished and production-quality - 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 - Mobile experience is smooth, reliable, and parity-complete with desktop
- Print/PDF invoice is clean, branded, and pixel-accurate - Print/PDF invoice is clean, branded, and pixel-accurate
- Quote math, persistence, and export are verified and regression-safe - 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-render.js # DOM rendering + nudge engine (662 lines)
├── quote-persistence.js # localStorage save/restore (212 lines) ├── quote-persistence.js # localStorage save/restore (212 lines)
├── quote-export.js # Print/PDF + JSON export (295 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) ├── mobile-sync.js # Mobile panel + 100+ element sync (236 lines)
├── SVS-MSP-Calculator.css # Manifest: @imports all CSS files ├── SVS-MSP-Calculator.css # Manifest: @imports all CSS files
├── SVS-MSP-Calculator-tokens.css # Design tokens + CSS vars ├── 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-print.css # Print-specific rules
├── SVS-MSP-Calculator-light.css # Light theme overrides ├── SVS-MSP-Calculator-light.css # Light theme overrides
├── SVS-MSP-Calculator-glass.css # Glass theme (glassmorphism) ├── 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.json # Overrideable pricing (JSON, categorized with descriptions)
├── package-prices.csv # Legacy pricing reference (no longer loaded at runtime) ├── package-prices.csv # Legacy pricing reference (no longer loaded at runtime)
├── tests/ ├── tests/
@@ -78,7 +77,7 @@ svsmspcalc/
- **No build tools.** Open the HTML in a browser — it runs. - **No build tools.** Open the HTML in a browser — it runs.
- **No npm.** No webpack, Vite, Rollup, Parcel, or transpilation. - **No npm.** No webpack, Vite, Rollup, Parcel, or transpilation.
- **No TypeScript.** Plain `.js` files. - **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`. - **State:** localStorage only. Key: `svs-msp-quote-v1`.
- **Fonts:** Google Fonts (Cinzel, Poppins, Lato, DM Mono). - **Fonts:** Google Fonts (Cinzel, Poppins, Lato, DM Mono).
- **Icons:** Font Awesome 7 Sharp (local SVGs), M365 icon set (local). - **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 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. 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. 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. 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. 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. 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. 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. 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? - [ ] 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? - [ ] Spacing system — Is padding/margin using tokens consistently? Are section cards visually balanced?
- [ ] Color usage — Are `--accent`, `--green`, `--amber`, `--muted` used purposefully, not decoratively? - [ ] 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? - [ ] 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? - [ ] 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? - [ ] 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 ### After Making Changes
1. Verify syntax (especially JS — no console errors on load) 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 3. Check mobile panel renders correctly at ≤780px
4. Verify sidebar totals are mathematically correct for a test quote 4. Verify sidebar totals are mathematically correct for a test quote
5. If CSS touched: verify print output is unaffected 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: The build is ready to call "beta" when:
- [ ] All Sections I–III are visually polished and functionally complete - [ ] 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 - [ ] Print/PDF invoice is clean and professionally branded
- [ ] Mobile panel is fully synced and usable at 375px - [ ] Mobile panel is fully synced and usable at 375px
- [ ] Quote math passes all combinations in the verification matrix - [ ] Quote math passes all combinations in the verification matrix

61
docs/SESSION-HANDOFF.md
View File

@@ -1,49 +1,70 @@
# Session Handoff — SVS MSP CALC # Session Handoff — SVS MSP CALC
**Last updated:** 2026-03-16 **Last updated:** 2026-03-16
**Session:** Section I & II Visual Polish (Pass 2) **Session:** Visual Polish Pass 3 — Spacing Audit + Section III + Print/Mobile Verification
**Status:** COMPLETE — all 3 issues from Pass 1 resolved **Status:** COMPLETE — all 4 tasks verified, minor token cleanup applied
## What Was Done This Session ## What Was Done This Session
### Section Polish Pass 2 — Premium Feel ### 1. Deeper Spacing Audit (Collapsible Bodies)
Addressed all 3 issues flagged after Pass 1, verified across Dark/Light/Glass at 1920px + 600px. 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. Section III (Site Management) Polish Pass
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. Verified sec-01 expanded in all 3 themes:
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. - 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 ### 3. Print/PDF Verification
- Playwright screenshots taken at 1920px desktop and 600px mobile Playwright print media emulation confirmed:
- Dark, Light, Glass themes all verified — collapsibles and M365 strip look native in each - All sections expand correctly, interactive controls hidden
- Section II (Endpoint Package) confirmed consistent with Section I styling - 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) ## Files Modified (this session)
| File | Changes | | 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 ## Test Status
``` ```
254/254 tests passing 254/254 tests passing
node svsmspcalc/tests/test-quote-engine.js node tests/test-quote-engine.js
``` ```
## What's Next ## What's Next
Potential next steps (user to prioritize): 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 1. **Sections IV–VI activation** — Server, ZT, VoIP sections structurally complete but content gated (Medium priority per KNOWN-ISSUES)
2. **Section III (Site Management)** polish pass — same treatment if needed 2. **Spacing token consolidation** — 150+ magic-number px values in components.css; dedicated cleanup pass (Low priority per KNOWN-ISSUES)
3. **Print/PDF verification** — confirm CSS changes don't affect print layout 3. **Mobile panel UX enhancements** — gesture-based close, swipe-to-dismiss
4. **Mobile panel** — verify mobile panel rendering matches desktop sidebar 4. **Beta readiness audit** — comprehensive cross-browser testing, accessibility pass
## Continuation Prompt ## Continuation Prompt
``` ```
Read svsmspcalc/docs/SESSION-HANDOFF.md then svsmspcalc/docs/QUICK-REF.md. Read docs/SESSION-HANDOFF.md then docs/QUICK-REF.md.
3 themes: Dark, Light, Glass. Pre-alpha in svsmspcalc/pre-alpha/ (read-only). 3 themes: Dark, Light, Glass.
254 tests must pass: node svsmspcalc/tests/test-quote-engine.js 254 tests must pass: node tests/test-quote-engine.js
## Plugins Available — USE THEM ## Plugins Available — USE THEM
- **frontend-design** — invoke for design decisions, spacing, color, layout - **frontend-design** — invoke for design decisions, spacing, color, layout