ten31-database/design/phase8-conformance.md

# Phase 8 — mobile visual-conformance build reference

**Status:** scoped 2026-06-19, not started. Working reference for ROADMAP Phase 8 (8a–8i). Delete/archive once Phase 8 lands.

**Anchor (read first):** the source of truth is each `*.dc.html` in `design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/` **rendered at its DEFAULT `data-props`** — NOT the `screenshots/` PNGs (those are option-history: rejected disposition badges, a 6-stage MEETING/FUNDED funnel, the star-everywhere flag, a contact-footer band). Defaults: all surfaces `theme=dark`; Grid `variant=compact, font=plex, lpFlag=earmark`; Pipeline `mode=swipe`. Spacing/type tokens (card radius 10, gap 10, title 16, body 15, detail title 22) **already match** — the gaps below are **anatomy/structure**, not spacing/theme.

> **Per-surface existing-LP signal:** **Grid = earmark corner-triangle · Pipeline = earmark corner-triangle** (Grant override 2026-06-19 — unify with Grid; the dc default was a ★ star, we don't follow it) **· Contacts = avatar ring**.

> **Contacts sort/tabs (decided, Grant 2026-06-19):** **remove the investor/prospect type tabs** — the `prospect` type isn't used anywhere useful (C2). **Keep a sort — by the Priority flag** — as a deliberate enhancement beyond the dc (which is search-only, no sort).

`*.dc.html:NN` = prototype line; `index.html:NN` = current app line.

---

## Surface 1 — GRID (`GridApp.dc.html`, app `MobileFundraisingGrid`)

**Authoritative card** (`GridApp:84–108`): `--panel` bg, 1px `--border`, radius 10, padding 12×14, `--shadow-card`, gap 8.
- **Existing-LP = earmark corner-triangle, top-left** (`:89–91`): `border-top:18px solid var(--accent); border-right:18px solid transparent`. At `lpFlag=earmark`, `lpEarmark` true / `lpStar`/`lpBanner` false (`:492–494`).
- Row 1 (`:92–102`): name 16px/600 left; **Priority** mono-10px pill right, *only if* `c.priority` (radius 4, amber `priBg/priText`). No investor/prospect badge.
- Row 2 (`:103–106`): `$amount` mono 15/600 (`amtColor` green if >0 else muted) · **4-stage chip** (mono 11, radius-999 pill; lead/engaged/diligence/commitment colors `:405–409`).
- Row 3 (`:107`): recency mono 12 ("2d ago"/"30d stale"; amber ≥10d, red ≥30d, `:421–426`).

**List header** (`:65–81`): tappable view-name 21/600 + ▾; row 2 = mono count (left) + **SORT pill** (right, mono 11 uppercase, sort-icon + label, `:72–75`); then search (44px) + gradient `+`. Sort sheet (`:633`): Name / Pipeline stage / Committed / Last contact / Priority.

**Investor detail** = full-screen (`:177–293`): title 22 + Edit; chip row = Priority + **"Existing LP" pill** (`:192–194`) + "Last contact …"; **Pipeline stage** card (tappable chip + "Change ›"); **Contacts** pills + "+ Add"; **Commitments** (read-only + Total); **Reminder** card; **Notes timeline** (dot-and-line, type tag + date + summary, "+ Log").

**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| G1 | Existing-LP wrong: app uses `border-left:3px` + `★` in detail title → **earmark corner-triangle** on card + **"Existing LP" pill** in detail | `2321`,`9659`,`9754` | `89–91`,`192–194` | **HIGH** |
| G2 | Priority is a `★` glyph → make it a **"PRIORITY" text pill** (collides with existing-LP star today) | `9662`,`2323` | `99–101` | **HIGH** |
| G3 | **No sort control** (only a count) → add SORT pill + sort sheet (5 opts) | `9687–9689` | `72–75`,`633` | **HIGH** |
| G4 | Detail pipeline: "Stage" row + button → single tappable **stage card** (chip inline + "Change ›") | `9762–9773` | `198–207` | MED |
| G5 | No dedicated **Reminder card** (reminder is a row in Activity) → dedicated card (note + due / "No reminder", ›) | `9802–9804` | `249–262` | MED |
| G6 | Notes = single text blob → **timeline** (dot+line rail, per-entry tag+date+summary) | `9805` | `270–289` | MED |
| G7 | Subtitle "$X committed · {lead}" → committed lives in Commitments card; subtitle = priority/LP/last-contact chips | `9757` | `188–196` | LOW |
| G8 | Card amount color: verify zero-commit dims to muted (`.zero` token parity) | `9665`,`2330` | `495` | LOW |

**Corrections to prior read:** DROP the left-accent-border (never the default — replace with earmark); the `★` is the rejected `lpFlag=star` option (remove); Priority is a pill not a star; the 4-stage chip is **correct, keep**.

---

## Surface 2 — CONTACTS (`ContactsApp.dc.html`, app `MobileContactsPage`/`MobileContactDetail`)

**Header** (`:59–65`): "Contacts" 21/600 + mono count; **search only — no segmented tabs, no sort**. List **always A–Z** (sticky mono headers, `:337–343`), hard-coded `name.localeCompare` (`:322`).

**Card** (`:72–83`): row, panel/border/radius-10, padding 11×13.
- **Avatar** (`:74`): 40px, `--elev`, **two-letter initials** mono 13 accentlight; **existing-LP = ring** `border:1.5px solid var(--accent)` else 1px `--border` (`:329`).
- Name 15/600 (`:76`); below: **org** 13 `--t3` **+ 4-stage pill** mono 9 (`:79`).
- Right: **recency** mono 11 (`:82`, `:272–278`).

**Detail = bottom sheet** (`:119–179`, *not* full-screen): 52px avatar+initials+ring, name 19 + org; **email-copy pill** ("EMAIL" + mono accent address + copy, `:134–140`); **two action buttons** — "Log communication" (gradient, flex 2) + "Email" (flex 1, `:143–146`); **Organization card** = earmark + org + stage pill + **Committed / Last-contact** stat pair + last-note tag + **"Open investor in Grid ›"** (`:149–175`).

**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| C1 | Card has **disposition (investor/prospect) badge** → remove; right-side signal is **4-stage pill (under name) + recency** | `5220`,`5219–5222` | `79`,`82` | **HIGH** |
| C2 | **Remove the All/Investors/Prospects type tabs** (prospect type unused); **keep a sort — by Priority flag** (enhancement; dc is search-only) — Grant 2026-06-19 | `5240–5250` | `59–65` | **HIGH** |
| C3 | Avatar = one initial, no ring → **two-letter initials + existing-LP ring** (`amt>0`) | `5214`,`2222–2227`,`5068` | `74`,`329`,`285–289` | **HIGH** |
| C4 | Card meta shows raw **date** (`formatDate`) → **recency text** ("2d ago") | `5221` | `82` | MED |
| C5 | Detail = full-screen field-dump → **bottom sheet** (email-copy pill, Log/Email pair, Org card w/ "Open in Grid") | `5075–5137` | `119–175` | **HIGH** |
| C6 | Card sub = org only → org **+ stage pill** same line | `5217` | `77–80` | MED |

**Corrections:** DROP the disposition badge (classifying signal is stage-pill + ring); the segmented tabs are an app-only addition, not in the design.

---

## Surface 3 — PIPELINE (`PipelineApp.dc.html`, app `MobilePipeline`)

**Header** (`:59–68`): "Pipeline" 21 + mono total + **SORT pill** (Name/Amount/Staleness/Priority, `:64–67`,`:422`). **4 stages** lead/engaged/diligence/commitment (`:369–370`).

**Swipe mode** (`:71–132`): horizontally-scrollable **segmented stage pills** (height 36, radius 999) with mono uppercase label **+ count badge** (`:76–79`); full-width **scroll-snap stage columns** (header = stage chip + count + sum; card list); **page dots** (active = 22px bar, `:125–132`).

**Card** (`:97–117`): panel/radius-10; tappable region + **divider + two move buttons** (‹ / ›, disabled at ends, `:112–115`).
- Row 1: **existing-LP = earmark corner-triangle** (Grant override 2026-06-19 — dc default was `★` at `:101`; **use the Grid earmark instead** for consistency) + name 16/600; **Priority pill** right (`:104`).
- Row 2: `$amount` mono 15/600 · 3px dot · recency mono 12 (`:106–110`).

**Detail = bottom sheet** (`:204–272`): name 19 + Priority/Existing-LP pills + last-contact; **Committed / Contacts stat tiles** (`:222–231`); **"Move stage" inline radio list** w/ checkmarks (`:233–241`); **Notes timeline + "+ Log"** (`:243–266`); separate **Log sheet** over it (`:274–302`).

**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| P1 | Segmented control = vertical count-over-label boxes → **horizontal-scroll pills + count badge** | `5945–5958`,`2400–2414` | `73–82` | MED |
| P2 | Cards lack **existing-LP flag, Priority pill, recency** (app = name + contact·org sub + amount) → **earmark** (Grant override, not ★) + name / Priority pill / amount·dot·recency | `5916–5933` | `99–110` | **HIGH** |
| P3 | **No SORT control** on header | `5935–5977` | `64–67` | MED |
| P4 | Detail = full-screen field-dump → **bottom sheet** (stat tiles + inline move-stage radio list + notes timeline + inline Log) | `5980–6036` | `204–272` | **HIGH** |
| P5 | Stage change = button → sub-sheet → make move-stage list **inline in the sheet** | `6005–6007`,`6023–6035` | `233–241` | MED |
| P6 | Page total "N deals · $X" → stage-column header = **chip + count + sum** | `5963–5966` | `88–94` | LOW |

**Corrections:** the app's **4-stage funnel is CORRECT** (dc `stages()` resolves to lead/engaged/diligence/commitment; the 6-stage MEETING/FUNDED/OUTREACH in screenshots is stale seed). Don't add a type/disposition badge. **Pipeline existing-LP = earmark corner-triangle** (Grant override 2026-06-19; the dc default was `★`, we don't follow it — reuse the Grid earmark component).

---

## Surface 4 — REMINDERS (`RemindersApp.dc.html`, app `MobileReminders`/`ReminderRow`)

**Header** (`:56–62`): "Reminders" 21 + a **mono summary** ("2 overdue · 1 today · 7 open", red when overdue, `:313–315`) + gradient `+`. **No Active/Done/All filter** — only a collapsible **Completed** section at list end (`:109–130`).

**Buckets** (`:317–332`): **4** — Overdue / Today / This week / Later, each header = **colored dot** (red/amber/blue/grey) + mono label + count.

**Row** (`:75–94`): swipe wrapper; **right=Snooze** (`:77–80`), **left=Complete** (`:82–85`), threshold 70 (`:257`). Card (`:87–93`): note 15/500; below = org 13 + **due-chip pill** (mono 10, radius 999, urgency bg/text/border, "3d overdue"/"Today"/"in 4d"/"Jun 24", `:91`,`:228–240`).

**Completed** (`:109–130`): collapsible; done row = filled check circle + strikethrough note + org.

**Deltas:**
| # | Delta | app | spec | sev |
|---|-------|-----|------|-----|
| R1 | Due = plain colored mono text → **urgency-colored chip pill** | `4620`,`2480` | `91` | **HIGH** |
| R2 | Buckets: Overdue/Due-soon/Later → **Overdue / Today / This week / Later** ("Today" its own bucket) | `4557–4563` | `318`,`235–239` | MED |
| R3 | Header = Active/Done/All filter + "+ New" → title + **summary line** + `+` | `4744–4755`,`4766` | `56–62` | **HIGH** |
| R4 | Group headers lack the **colored dot** (7px, red/amber/blue/grey) | `4766`,`2455–2461` | `68–72`,`317` | MED |
| R5 | Completed via filter tabs → **collapsible "Completed" section** at list end (active list is default) | `4748–4751`,`4764` | `109–130` | MED |
| R6 | Swipe left=Done / right=Snooze **matches** — keep (labels cosmetic) | `4607–4608` | `77,82` | LOW |
| R7 | Edit = bottom sheet — **correct**, keep | `4782` | `159–173` | — |

**Corrections:** left=Done/right=Snooze is correct (don't flip); edit-via-sheet is correct.

---

## Phase 8 punch-list (visual/structural only — DB-wiring parity is the separate functional report)

- **8a Grid card (HIGH):** G1 earmark corner-triangle (replace left-border); G2 PRIORITY text pill (replace ★); G8 zero-commit dim token parity.
- **8f Pipeline card (HIGH):** P2 add ★ + Priority pill + recency line; P1 horizontal-scroll pills + count badge; P6 stage-column header chip+count+sum.
- **8b Detail actions/structure (HIGH):** C5+P4 convert Contacts & Pipeline detail full-screen → **bottom sheets** with the dc anatomy; G4/G5/G6 Grid detail → tappable stage card + dedicated Reminder card + notes **timeline**; P5 inline move-stage list.
- **8c Quick-log (MED):** Grid/Pipeline notes post into a **timeline** (tag+date); dc Grid has a **top-bar quick-log pencil** (`GridApp:53–55`) the shell lacks → 8i.
- **8d Sort (HIGH/MED):** add SORT pill → sort sheet to Grid (`9687`) + Pipeline (`5935`). **Contacts (Grant decided): remove the investor/prospect type tabs** (`5240–5250`); **keep a Priority-flag sort** as an enhancement (dc had none).
- **8e Reminders (HIGH):** R1 due-chip pill; R3 header summary line (reconsider Active/Done/All vs dc collapsible Completed, R5); R2/R4 re-bucket Overdue/Today/This-week/Later with colored dots.
- **8i Shell (MED):** Contacts avatars → two-letter initials + existing-LP ring (C3); drop disposition badges (C1) + Contacts tabs (C2); dc top-bar = quick-log pencil + theme + account cluster (every dc `:50–58`).

**Severity order (whole phase):** G1, G2, C1, C2, C3, C5, P2, P4, R1, R3 (HIGH) → G3, P3, sort/bucket/dot/chip (MED) → G7, G8, P6, R6 (LOW).

**Theme-var note (DESIGN convention):** every new color (earmark, priority pill, ring, due-chip, segment count-badge) MUST use `:root` theme vars, not literals. Authoritative dark/light pairs: `GridApp.dc.html` `stageColors`/`priColors`/`recency` (`:400–442`), `RemindersApp.dc.html` `urgency` (`:228–240`).