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.

design/_imports/2026-06-19/README.md

@@ -0,0 +1,109 @@
+# Import bundle — mobile-first redesign round-trip (2026-06-19)
+
+Provenance for the `/design` round-trip that produced the mobile-first design. This folder is
+**raw input / provenance** (per `~/Projects/standards/guides/design.md`); the durable contract
+is `design/DESIGN.md` + `design/tokens.tokens.json`, which were distilled **from** this bundle.
+
+## Source
+
+- **Tool:** Claude Design (cloud, `claude.ai/design`), driven by Grant.
+- **Project:** "Venture-CRM mobile redesign" — `91e62d47-4c4d-43fb-9135-edb05bc59970`
+- **URL:** https://claude.ai/design/p/91e62d47-4c4d-43fb-9135-edb05bc59970
+- **Input packet:** `design/BRIEF.md` (the mobile-first brief) + uploaded `DESIGN.md`,
+  `tokens.tokens.json`, brand SVGs, and desktop screenshots.
+
+## What's in this folder vs. still in the cloud project
+
+The Claude Design MCP (`DesignSync`) streams file **content into context**; it has no
+bulk-download / binary-export path. So:
+
+- **Byte-captured here:** `GridApp.dc.html` — the canonical surface, and the richest single
+  artifact: it embodies the shared **data model**, the **derived-field formulas**, the stage/
+  staleness/note **color logic**, and the locked **card model**. The other surfaces reuse the
+  same patterns (verified by reading them).
+- **Recoverable from the cloud project (not byte-copied):** the shell + the three other app
+  files, `store.js`, `support.js` (the DC runtime), the option-exploration files, and **all
+  screenshots**. The full inventory + the distilled logic below preserve the design intent in
+  text; re-pull any specific file from the project URL on request.
+
+> These are **Claude Design runtime prototypes** (`<x-dc>` / `<sc-if>` / `<sc-for>` + a
+> `DCLogic` class + `support.js`, fed by a client-only seed `store.js`). They are **not
+> drop-in** code for `frontend/index.html` (inline-Babel React, real API). They are the
+> visual + interaction spec; implementation is a separate scoped build (see `ROADMAP.md`).
+
+## File inventory (cloud project)
+
+**The signed-off mobile set (what "Implement" refers to):**
+- `Ten31 Mobile.dc.html` — shell: phone frame + 4-tab bottom bar over a shared
+  `window.T31Store` singleton, switching between the four surfaces (dark + light theme).
+- `GridApp.dc.html` — Fundraising Grid (canonical). *[captured here]*
+- `PipelineApp.dc.html` — Pipeline (swipe-between-stages + accordion variant).
+- `RemindersApp.dc.html` — Reminders (urgency groups + swipe complete/snooze).
+- `ContactsApp.dc.html` — Contacts (read-only A–Z directory + detail).
+- `store.js` — shared client store (data model + derived helpers + mutations).
+- `support.js` — the Claude Design runtime (generic; not design content).
+
+**Earlier explorations / option sheets (superseded by the App set):**
+- `Fundraising Grid Mobile.dc.html`, `Contacts Mobile.dc.html`, `Pipeline Mobile.dc.html`,
+  `Reminders Mobile.dc.html` — static single-screen studies.
+- `Existing-LP Flag Options.dc.html` — star vs. corner-earmark vs. top-banner trial (the App
+  set defaults to **earmark**; star is the lighter alternative).
+- `Font Options.dc.html` — IBM Plex vs. Manrope vs. Hanken Grotesk trial (kept **Plex**).
+
+**`screenshots/`** (~25 PNGs, in-cloud) — per-state renders: grid cards/detail, sort, contact
+detail, pipeline dots/log, swipe-reveal, sheets (name/note/view), reminders, LP-flag, fonts.
+
+**`uploads/`** (in-cloud) — the inputs we fed in (`BRIEF.md`, `DESIGN.md`, `tokens`, desktop
+screenshots); originals already live in `design/`.
+
+## Data model (from `store.js`)
+
+Investor = `{ id, name, priority:bool, stage:'lead'|'engaged'|'diligence'|'commitment'|null,
+daysAgo, contacts:[{name,email}], funds:[[fundName, amount], …], views:[…], notes:[[type,
+summary, isoDate], …] }`. Reminder = `{ id, note, orgId, due:iso, done:bool }`. One canonical
+copy in a `window` singleton so a stage move / logged comm / reminder edit on any tab reflects
+on the others. Mirrors the server model (grid is system of record; `daysAgo` ← server
+`last_activity_at`; commitments read-only on mobile).
+
+## Derived-field formulas (sourced — reuse verbatim in implementation)
+
+- **Committed $:** `sum(funds[].amount)`. **Existing-Investor** flag = `committed > 0`
+  (auto-derived; not a stored field).
+- **Money format:** `≥1e6 → $N[.N]M` (drop `.0`); `≥1e3 → $NK`; `0 → $0`.
+- **Staleness** (last-contact overlay, one global threshold — values **TBD with team**):
+  `AMBER=10`, `STALE=30` days. `<10` grey → `≥10` amber (`#e0b341` dark / `#a76a07` light) →
+  `≥30` red + "`Nd stale`" (`#f87171` / `#c0322f`).
+- **Stage order:** `lead → engaged → diligence → commitment`. Stage chip shows **only when in
+  pipeline** (`stage != null`).
+- **Reminder urgency buckets:** overdue (`<0d`) → today (`0`) → this-week (`1–7`) → later
+  (`>7`), colors red / due-soon / accent / subtle.
+
+## Color logic introduced by the comps (reconcile in the contract)
+
+- **Stage chips** use semantic tints (within the existing tinted-badge idiom, not new hues):
+  lead = subtle grey, engaged = accent blue, diligence = due-soon `#e0b341`, commitment =
+  success `#10b981`/`#6ee7b7`.
+- **Light theme** — the comps add a full light palette + a theme toggle. **Adopted as a planned
+  feature** (owner decision 2026-06-19): dark stays the default, light ships behind a toggle. Core
+  palette is in `tokens.tokens.json` `color.light`; full per-component light tints live in
+  `GridApp.dc.html` here. See `DESIGN.md` §8 + the mobile backlog in `ROADMAP.md`.
+
+## Per-surface interaction model
+
+- **Grid:** card list (name · committed · stage chip · staleness last-contact) + Existing-LP
+  earmark + Priority corner badge; tappable view-name → bottom-sheet **view picker**; search +
+  `+` create (name typeahead → existing-match guard). Tap card → **full-screen detail** with
+  per-field **bottom-sheet** edits (name, contact pills, stage, reminder, log note); commitments
+  read-only. Graveyard view renders muted (opacity 0.55).
+- **Pipeline:** segmented stage control + **snap-scroll** between full-width stage columns
+  (page dots), per-card `‹ back / fwd ›` stage move, tap → detail/log sheet. Accordion variant
+  included as the alternative.
+- **Reminders:** urgency-grouped list; **pointer-drag** card to reveal complete (swipe-left,
+  threshold 70px) / snooze (swipe-right); `+` add; tap → edit sheet (note, investor, due chips).
+- **Contacts:** read-only A–Z grouped directory (sticky letter headers) + search; tap →
+  full-screen read-only detail (email copy, linked investor, last note); pencil = quick-log.
+
+**Shared chrome:** 46px status bar (cosmetic), top bar (·Ten31· + theme toggle + account
+avatar), 4-tab bottom bar (Grid·Pipeline·Reminders·Contacts; 56px tall; translucent +
+backdrop-blur; `padding-bottom:18px` for safe-area), bottom sheets (radius-20 top, 38×4 drag
+handle, `sheetUp` 280ms), toasts (above nav), account popover (profile + logout).