Distill mobile-first design round-trip into the contract

Phase C/D of the /design round-trip (Claude Design "Venture-CRM mobile
redesign", 2026-06-19). Captures the cloud output and folds it into the
durable design/ contract; no frontend reskin in this pass.

- _imports/2026-06-19/: provenance — GridApp.dc.html (byte-exact canonical
  surface) + a manifest README (project URL/inventory, data model, derived-
  field formulas, per-surface interaction model). DesignSync can't bulk-
  download, so screenshots/other sources stay recoverable from the cloud URL.
- DESIGN.md: §8 Responsive rewritten to the landed mobile-first system
  (4-tab bottom bar, card/detail, bottom sheets, swipe/snap, safe areas);
  §4 mobile component states; §3 15px mobile type scale; §2 stage/staleness
  + light-theme palette pointers.
- tokens.tokens.json: new `mobile` group (type scale, radii, touch sizing,
  safe-area) + `motion.sheet`; `color.light` palette — light theme adopted
  as a planned, toggle-gated feature (dark stays default).
- ROADMAP.md: mobile-first implementation backlog (contract-vs-code gap),
  gated on the inline-style->CSS migration and the locked pipeline spec.

ROADMAP.md

@@ -269,6 +269,53 @@ Items 3–6 are cheap (derived/read-time/frontend, reuse `last_activity_at`, no
 - **Last-contact recency** carries the staleness color (grey→amber→red, "Nd stale").
 - This **replaces the design-mockup's INVESTOR/PROSPECT category chip** — we have no prospect/investor *type*; that two-value badge was the tool deriving committed-$>0, which is exactly our Existing-Investor flag. Feeds `design/BRIEF.md` §3a.
 
+### Mobile-first implementation — backlog (design landed 2026-06-19)
+*The `/design` round-trip is complete: the contract now describes the mobile-first system
+(`design/DESIGN.md` §8 + the `mobile` token group), provenance + per-surface interaction model
+are in `design/_imports/2026-06-19/`, and the input brief is `design/BRIEF.md`. This is the gap
+between that contract and the current desktop-only `frontend/index.html` — the implementation
+backlog. **Not yet started; scope/plan to be developed next (the user's stated next step).**
+The comps are signed-off prototypes, **not drop-in** (Claude Design runtime, seed data) — each
+surface is re-authored in the app's React idiom and wired to the **real API**.*
+
+**Hard prerequisite — inline-style→CSS migration.** Responsive layout cannot live in the
+~1,300 inline `style={{}}` objects (they can't carry media queries). Mobile-first means
+authoring a 375px base + `min-width` enhancements in the CSS `<style>` block / utility classes.
+This migration is **large and not yet scoped** — it gates everything below and is the first
+thing the implementation plan must size. (Precedent for a mechanical sweep: the design guide's
+inline-hex→`var()` field notes; this is bigger — structural layout, not just values.)
+
+**Data-layer dependency — the locked pipeline-stages/flags spec** (see the section above) lands
+**first or together**: the mobile cards render the 4-stage chip, the auto-derived
+Existing-Investor star, and the staleness overlay, all of which need the stage enum + migration +
+`total_invested>0` derivation + the `last_activity_at` ramp. Building the cards before the data
+layer means hardcoding against a model that's about to change.
+
+**UI workstreams (rough order; real sequencing comes with the plan):**
+1. **Responsive shell + nav:** viewport-gated mobile shell, the safe-area-aware **4-tab bottom
+   bar** (Grid·Pipeline·Reminders·Contacts), the top-bar account/logout control, the bottom-sheet
+   primitive, and the type/touch bump — the chrome every surface shares.
+2. **Grid (do first — canonical + the crux):** card list + bottom-sheet **view picker** + search;
+   full-screen detail with per-field bottom-sheet edits (name, contact pills, stage, reminder, log
+   note) + the `+`-create flow with client-side dedup typeahead. **Writes go through the targeted
+   one-row `POST /api/fundraising/log-communication` path + the pipeline link→`PATCH stage` flow —
+   never whole-grid `PUT /state`** (the `BRIEF.md` §3a "Backend reality"). Commitments read-only.
+3. **Contacts (lowest-risk validator):** read-only A–Z list + full-screen detail; proves the
+   list+detail+sheet pattern before the heavier surfaces.
+4. **Pipeline:** swipe-between-stages (snap-scroll + segmented control + dots), per-card stage move
+   sharing the same opportunities endpoints as the Grid detail.
+5. **Reminders:** urgency-grouped list, swipe complete/snooze, add/edit sheets on `/api/reminders`.
+6. **Light theme + toggle (adopted as a planned feature, 2026-06-19).** Ship the light palette
+   (`tokens.tokens.json` `color.light`) behind a `[data-theme]` switch + a top-bar toggle; dark
+   stays the default. Naturally co-lands with the inline-style→CSS migration (theming wants CSS
+   custom properties, not per-element inline values). Per-component light tints (stage/staleness/
+   note badges) are in `_imports/2026-06-19/GridApp.dc.html`.
+
+**Note on `design-checker`:** not run for this round-trip — it audits *existing* UI conformance,
+and the desktop UI still conforms to §1–7 (unchanged). The mobile gap is greenfield
+implementation (captured here), not conformance drift, so there's nothing for it to flag yet; run
+it after the mobile surfaces exist.
+
 ## Definition of done for "Airtable substitute" v1
 - Team can manage all investors in one master table
 - Saved views replicate current Airtable workflows