# Quick Reference — SVS MSP CALC

## Stack
Vanilla HTML5/CSS3/JS (ES5-compatible). No frameworks, no npm, no build tools. Open HTML in browser to run.

## File Map

### JS Runtime
| File | Purpose |
|------|---------|
| `SVS-MSP-Calculator.js` | Orchestration: `update()`, `calcQuote()`, section toggles, `initQuote()` |
| `quote-engine.js` | Pure math: `calculateQuote(state, pricing)`, `readFormState()`, `getPricingConfig()` |
| `quote-pricing.js` | Defaults (34 keys), JSON loader, `getSnapshot()`, globals |
| `quote-render.js` | DOM rendering: sidebar, summaries, nudges, `setSummary()`, `renderNudge()` |
| `quote-persistence.js` | `saveState()` / `restoreState()` / `resetState()` via localStorage |
| `quote-export.js` | Print/PDF (respects HST toggle) + JSON export (schema v1.0) |
| `theme-manager.js` | Dark/Light/Glass/70s Retro toggle + persistence |
| `mobile-sync.js` | Clones sidebar to mobile panel, wraps `update()` for `_m` ID sync |

### CSS (load order via manifest)
| File | Purpose |
|------|---------|
| `*-tokens.css` | Design tokens — single source for spacing, colors, radii, typography |
| `*-base.css` | Global chrome, top bar, resets |
| `*-layout.css` | Grid: `.outer`, `.main-col`, `.sidebar`, `.client-bar` |
| `*-components.css` | Sections, headers, `sec-controls-row`, badges, steppers, sidebar, VS comparison, export |
| `*-responsive.css` | Media queries: ≤1350, ≤1100, ≤900, ≤600 + landscape |
| `*-print.css` | Print overrides — hides controls, forces expand |
| `*-light.css` | Light theme color overrides |
| `*-glass.css` | Glass theme (glassmorphism) overrides |
| `*-70retro.css` | 70s Retro theme overrides |

### HTML Structure (section display order)
| Order | ID | Numeral | Title | Has Stepper |
|-------|----|---------|-------|-------------|
| 1 | sec-02 | I | User Package | userCount |
| 2 | sec-03 | II | Endpoint Package | endpointCount |
| 3 | sec-01 | III | Site Management | — (badges only) |
| 4 | sec-04 | IV | Server Management | serverCount |
| 5 | sec-05 | V | Zero Trust Networking (HaaS) | ztNetSeats |
| 6 | sec-06 | VI | VoIP / Unified Comms (UCaaS) | voipSeats |

### Section Header Layout (all 6 sections)
```
Grid Row 1:  [numeral]  [title-block]  [chevron]
Grid Row 2:  [sec-controls-row: stepper + badge + price]
Grid Row 3:  [section-subtitle — expanded only]
```

### Key DOM IDs (do not rename — mobile sync depends on these)
- Inputs: `userCount`, `endpointCount`, `serverCount`, `ztNetSeats`, `ztNetRouters`, `voipSeats`
- Summaries: `sec01-summary` through `sec06-summary`
- Admin: `adminFeeDisplay`, `adminWaived`, `feeBreakdown`
- Sidebar: `sidebarMRR`, `sidebarAnnual`, `sidebarDiscount`, etc.
- Progress: `floorBar`, `floorNote`

### Pricing Defaults (from quote-pricing.js)
```
Users:     M365 $140 (m2m) / $130 (12mo/24mo) | BYOL $110 | ExtHrs +$25 | 1PWM +$9 | INKY +$8 | ZT +$55
Endpoints: $35/ea | USB +$4 | BMB +$25
Servers:   $120/ea
ZT Net:    $25/seat | $100/router
Admin:     Floor $150 | Min $650 | ZT premium +$250 | 1PWM markup 10%
VoIP:      Basic $28 | Standard $35 | Premium $45 | Phone +$15 | Fax +$10
Discounts: m2m 0% | 12mo 3% + 50% off onboarding | 24mo 5% + complimentary onboarding
HST:       13% (Ontario)
```

## Tests
```
node svsmspcalc/tests/test-quote-engine.js
```
254 tests, zero dependencies. Run after any pricing/engine changes.


## Remind User
After reading docs, always say:
> You have an automated test suite (254 tests). I can run it anytime, or modify it for new scenarios.

## Token Architecture (Stage 10)

### Color Token Layers
- **Core palette:** `--ink`, `--paper`, `--accent`, `--muted`, `--border`, `--card`, `--green`, `--amber`, `--sky`
- **Semantic aliases:** `--surface-positive-soft/strong`, `--border-positive-soft/strong`, `--text-on-accent/soft/subtle`
- **Sidebar quote tokens:** `--sidebar-zone-services/invoice/value/summary/tax`, `--sidebar-line-rule`, `--sidebar-total-rule`, `--sidebar-row-stripe`
- **Overlay tokens:** `--surface-overlay-btn`, `--border-overlay-btn`, `--focus-ring-overlay`, `--shadow-sidebar-focus`
- **Section grouping:** `--group-strip` (bracket color per theme)
- **Retro helpers:** `--retro-cream`, `--retro-dark`, `--retro-cta-gradient`, `--retro-dark-gradient`

### Section Grouping (Stage 10)
- `.group-label` — "MANAGED IT SERVICES (Sections I, II, III)" eyebrow above section I
- `::after` bracket — vertical accent strip with top/bottom caps on `#sec-02`, `#sec-03`, `#sec-01`
- `.group-divider` — HR between Site Management (III) and Server Management (IV), `order: 3`
- Mobile (≤600px): bracket hidden, sections I–III get `border-left: 3px solid var(--group-strip)` instead

### Sidebar (Live Quote)
- `.sidebar-group--monthly/tax/invoice/value/summary` — zone backgrounds via tokens
- `.sidebar-line` — dashed rule via `--sidebar-line-rule`, no border on last-child
- `.sidebar-line-total` — solid top border via `--sidebar-total-rule`, no bottom border
- `.export-wrap` — transparent background, no border (buttons float naturally)
- `.side-col` — `position: static` (scrolls with page, not sticky)

## Danger Zones
- DOM IDs → mobile sync breaks silently if renamed
- `quote-engine.js` math → run tests after any change
- Print CSS → sensitive to component class changes
- `update()` call chain → side effects cascade
- localStorage key: `svs-msp-quote-v1`