Pre-Alpha to Alpha Ready

pre-alpha/docs/QUICK-REF.md

@@ -0,0 +1,108 @@
+# 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`