← back to Norma
feat(mockups): 6 inbox UI variants — Classic Dense / Notion Cards / Linear Keyboard / Apple Mail / Front Conversation / Hey Zero-Distraction
68f7b6378dc1507209926fba1bff371d19b121c6 · 2026-05-20 12:40:53 -0700 · Steve Abrams
Each variant ships every feature from the live GmailCRMTab (assigned-to dropdown,
per-user read receipts as pills, inline-expanded reading pane, AI draft reply)
under a distinct visual treatment so Steve can pick a direction.
- index.html: side-by-side scaled-iframe gallery with one-line descriptions
+ badges (familiar/dense/keyboard-first/team-inbox/etc.) for fast comparison.
- v1-classic-dense: today's pattern, refined dark theme, tight rows.
- v2-notion-cards: light theme, elevated cards w/ generous padding.
- v3-linear-keyboard: monochrome, status-machine (Triage/Working/Replied/Snoozed),
J/K-style keyboard nav prompts.
- v4-apple-mail: 3-pane (mailboxes | list | reading), multi-account ready.
- v5-front-conversation: assignee-first, group inbox, internal-note threads,
collision detection ('Cody is also viewing').
- v6-hey-zero: editorial Source Serif, Imbox/Feed/Paper Trail buckets, slow-mail vibe.
Browse at http://localhost:7400/mockups/inbox/index.html once norma-email
is back up. To promote one to Figma frames: kick the mcp__figma__authenticate
OAuth flow.
Files touched
A public/mockups/inbox/index.htmlA public/mockups/inbox/v1-classic-dense.htmlA public/mockups/inbox/v2-notion-cards.htmlA public/mockups/inbox/v3-linear-keyboard.htmlA public/mockups/inbox/v4-apple-mail.htmlA public/mockups/inbox/v5-front-conversation.htmlA public/mockups/inbox/v6-hey-zero.html
Diff
commit 68f7b6378dc1507209926fba1bff371d19b121c6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 20 12:40:53 2026 -0700
feat(mockups): 6 inbox UI variants — Classic Dense / Notion Cards / Linear Keyboard / Apple Mail / Front Conversation / Hey Zero-Distraction
Each variant ships every feature from the live GmailCRMTab (assigned-to dropdown,
per-user read receipts as pills, inline-expanded reading pane, AI draft reply)
under a distinct visual treatment so Steve can pick a direction.
- index.html: side-by-side scaled-iframe gallery with one-line descriptions
+ badges (familiar/dense/keyboard-first/team-inbox/etc.) for fast comparison.
- v1-classic-dense: today's pattern, refined dark theme, tight rows.
- v2-notion-cards: light theme, elevated cards w/ generous padding.
- v3-linear-keyboard: monochrome, status-machine (Triage/Working/Replied/Snoozed),
J/K-style keyboard nav prompts.
- v4-apple-mail: 3-pane (mailboxes | list | reading), multi-account ready.
- v5-front-conversation: assignee-first, group inbox, internal-note threads,
collision detection ('Cody is also viewing').
- v6-hey-zero: editorial Source Serif, Imbox/Feed/Paper Trail buckets, slow-mail vibe.
Browse at http://localhost:7400/mockups/inbox/index.html once norma-email
is back up. To promote one to Figma frames: kick the mcp__figma__authenticate
OAuth flow.
---
public/mockups/inbox/index.html | 106 +++++++++++
public/mockups/inbox/v1-classic-dense.html | 147 +++++++++++++++
public/mockups/inbox/v2-notion-cards.html | 142 +++++++++++++++
public/mockups/inbox/v3-linear-keyboard.html | 162 +++++++++++++++++
public/mockups/inbox/v4-apple-mail.html | 174 ++++++++++++++++++
public/mockups/inbox/v5-front-conversation.html | 232 ++++++++++++++++++++++++
public/mockups/inbox/v6-hey-zero.html | 143 +++++++++++++++
7 files changed, 1106 insertions(+)
diff --git a/public/mockups/inbox/index.html b/public/mockups/inbox/index.html
new file mode 100644
index 0000000..96cad8b
--- /dev/null
+++ b/public/mockups/inbox/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Inbox UI Variants — Norma</title>
+<style>
+ :root {
+ --bg: #0c0f1a; --panel: #131829; --el: #1c2237;
+ --fg: #f0f0f5; --muted: #a1a1b5; --line: #2a3048;
+ --emerald: #10b981; --rose: #f43f5e; --amber: #f59e0b;
+ }
+ body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
+ header { padding: 32px 32px 12px; border-bottom: 1px solid var(--line); }
+ h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
+ .sub { color: var(--muted); font-size: 13px; }
+ .grid {
+ display: grid; gap: 16px; padding: 24px 32px;
+ grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+ }
+ .card {
+ background: var(--panel); border: 1px solid var(--line);
+ border-radius: 12px; padding: 0; overflow: hidden;
+ transition: transform 0.18s, border-color 0.18s;
+ }
+ .card:hover { transform: translateY(-2px); border-color: var(--emerald); }
+ .card a { display: block; color: inherit; text-decoration: none; }
+ .frame {
+ width: 100%; aspect-ratio: 16 / 10;
+ background: linear-gradient(180deg, var(--el), #161a2c);
+ display: flex; align-items: center; justify-content: center;
+ color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
+ }
+ iframe.preview { width: 100%; aspect-ratio: 16 / 10; border: 0; pointer-events: none; transform: scale(0.5); transform-origin: 0 0; width: 200%; height: 200%; }
+ .frame-wrap { width: 100%; aspect-ratio: 16/10; overflow: hidden; position: relative; background: #fff; }
+ .meta { padding: 14px 16px; }
+ .name { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
+ .desc { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 0; }
+ .badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
+ .badge { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--el); color: var(--muted); font-weight: 600; }
+</style>
+</head>
+<body>
+<header>
+ <h1>Inbox UI Variants — 6 directions</h1>
+ <p class="sub">Each mockup includes Assign-to dropdown, Read-by chips, inline-expand on click. Pick a direction or mix elements across them.</p>
+</header>
+<div class="grid">
+
+<div class="card"><a href="v1-classic-dense.html" target="_blank">
+ <div class="frame-wrap"><iframe class="preview" src="v1-classic-dense.html"></iframe></div>
+ <div class="meta">
+ <div class="name">1 — Classic Dense</div>
+ <p class="desc">Today's pattern, refined. Tight rows, full-bleed inline expansion, indigo assign chip + emerald seen pills. Familiar to anyone who's used Gmail.</p>
+ <div class="badges"><span class="badge">familiar</span><span class="badge">dense</span><span class="badge">production-safe</span></div>
+ </div>
+</a></div>
+
+<div class="card"><a href="v2-notion-cards.html" target="_blank">
+ <div class="frame-wrap"><iframe class="preview" src="v2-notion-cards.html"></iframe></div>
+ <div class="meta">
+ <div class="name">2 — Notion Cards</div>
+ <p class="desc">Each message is its own elevated card with generous padding. Tags and metadata live in the bottom strip. Best when each email is a "thing" being worked on.</p>
+ <div class="badges"><span class="badge">generous</span><span class="badge">card-based</span><span class="badge">notion-vibe</span></div>
+ </div>
+</a></div>
+
+<div class="card"><a href="v3-linear-keyboard.html" target="_blank">
+ <div class="frame-wrap"><iframe class="preview" src="v3-linear-keyboard.html"></iframe></div>
+ <div class="meta">
+ <div class="name">3 — Linear Keyboard</div>
+ <p class="desc">Monochrome, keyboard-driven, status badge per message (Triage / Working / Replied / Snoozed). Type J/K to navigate, A to assign. Feels like a bug tracker for mail.</p>
+ <div class="badges"><span class="badge">keyboard-first</span><span class="badge">status-machine</span><span class="badge">linear-vibe</span></div>
+ </div>
+</a></div>
+
+<div class="card"><a href="v4-apple-mail.html" target="_blank">
+ <div class="frame-wrap"><iframe class="preview" src="v4-apple-mail.html"></iframe></div>
+ <div class="meta">
+ <div class="name">4 — Apple Mail</div>
+ <p class="desc">Three-pane classic: mailboxes left, conversation list center, reading pane right. Best for high volume + multi-mailbox future where natalia@/info@/donors@ each need their own column.</p>
+ <div class="badges"><span class="badge">3-pane</span><span class="badge">multi-mailbox</span><span class="badge">traditional</span></div>
+ </div>
+</a></div>
+
+<div class="card"><a href="v5-front-conversation.html" target="_blank">
+ <div class="frame-wrap"><iframe class="preview" src="v5-front-conversation.html"></iframe></div>
+ <div class="meta">
+ <div class="name">5 — Front Conversation</div>
+ <p class="desc">Assignee is THE primary axis — every row leads with the assignee's avatar. Group inbox view (Unassigned / Mine / Team). Thread-of-conversation reading pane with collision detection.</p>
+ <div class="badges"><span class="badge">assignee-first</span><span class="badge">team-inbox</span><span class="badge">front-vibe</span></div>
+ </div>
+</a></div>
+
+<div class="card"><a href="v6-hey-zero.html" target="_blank">
+ <div class="frame-wrap"><iframe class="preview" src="v6-hey-zero.html"></iframe></div>
+ <div class="meta">
+ <div class="name">6 — Hey Zero-Distraction</div>
+ <p class="desc">Big typography, white background, sender-name dominant. "Imbox" → "Feed" → "Paper Trail" buckets. Reply Later stack. Focus over volume — for the slow inbox.</p>
+ <div class="badges"><span class="badge">editorial</span><span class="badge">light-mode</span><span class="badge">hey.com-vibe</span></div>
+ </div>
+</a></div>
+
+</div>
+
+</body>
+</html>
diff --git a/public/mockups/inbox/v1-classic-dense.html b/public/mockups/inbox/v1-classic-dense.html
new file mode 100644
index 0000000..03ea73e
--- /dev/null
+++ b/public/mockups/inbox/v1-classic-dense.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><title>v1 — Classic Dense — Norma Inbox</title>
+<style>
+ :root { --bg:#0c0f1a; --panel:#131829; --el:#1c2237; --fg:#f0f0f5; --muted:#a1a1b5; --line:#2a3048; --emerald:#10b981; --indigo:#a5b4fc; --rose:#fb7185; --amber:#fbbf24; }
+ * { box-sizing: border-box; }
+ body { margin:0; background:var(--bg); color:var(--fg); font:13.5px/1.45 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
+ .top { padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:center; }
+ .top input { flex:1; max-width:380px; background:var(--el); border:1px solid var(--line); color:var(--fg); padding:6px 10px; border-radius:6px; font:12px inherit; }
+ .pill { font-size:11px; padding:3px 9px; border-radius:999px; background:var(--el); color:var(--muted); font-weight:600; }
+ .row { display:flex; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); border-left:3px solid #f59e0b; cursor:pointer; align-items:flex-start; transition:background 0.12s; }
+ .row:hover { background:var(--el); }
+ .row.unread { background:rgba(255,255,255,0.02); }
+ .row .from { font-weight:700; font-size:13px; flex:1; min-width:0; }
+ .row .when { font-size:11px; color:var(--muted); margin-left:8px; }
+ .row .subj { color:var(--fg); font-weight:600; }
+ .row .preview { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+ .row.read .from, .row.read .subj { font-weight:500; }
+ .row.high { border-left-color:var(--rose); }
+ .row.med { border-left-color:var(--amber); }
+ .row.low { border-left-color:var(--emerald); }
+ .row.selected { background:rgba(16,185,129,0.08); border-left-color:var(--emerald); }
+ .chips { display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
+ .chip { font-size:9.5px; padding:1.5px 7px; border-radius:4px; font-weight:700; letter-spacing:0.03em; }
+ .chip-label { background:var(--el); color:var(--muted); }
+ .chip-assign { background:rgba(99,102,241,0.18); color:var(--indigo); }
+ .chip-seen { background:rgba(16,185,129,0.15); color:#6ee7b7; }
+ .chip-pri-high { background:rgba(244,63,94,0.18); color:var(--rose); }
+ /* Expanded panel */
+ .expand { background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 22px; }
+ .ex-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
+ .ex-subj { font-size:17px; font-weight:700; margin:0; }
+ .ex-meta { color:var(--muted); font-size:12px; margin-top:6px; display:grid; grid-template-columns:54px 1fr; gap:4px 8px; }
+ .ex-meta strong { color:var(--fg); font-weight:600; }
+ .seen-row { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
+ .seen-pill { font-size:11px; padding:2px 9px; border-radius:999px; background:rgba(16,185,129,0.12); color:#6ee7b7; display:inline-flex; align-items:center; gap:4px; }
+ select.assign { background:var(--el); border:1px solid var(--line); color:var(--fg); font:12px inherit; padding:3px 8px; border-radius:5px; }
+ .ex-body { background:var(--el); border-radius:8px; padding:16px; margin-top:14px; font-size:13.5px; line-height:1.6; color:#dcdce5; max-height:200px; overflow-y:auto; }
+ .ai-card { margin-top:14px; padding:14px; border-radius:8px; border-left:3px solid var(--emerald); background:rgba(16,185,129,0.04); }
+ .ai-card h4 { margin:0 0 8px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px; }
+ textarea { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:6px; padding:8px; font:12.5px inherit; resize:vertical; min-height:80px; }
+ .act { display:flex; gap:6px; margin-top:10px; }
+ .btn { font:11.5px inherit; padding:5px 12px; border-radius:5px; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; }
+ .btn.pri { background:var(--emerald); border-color:var(--emerald); color:#022c1a; font-weight:700; margin-left:auto; }
+</style>
+</head><body>
+
+<div class="top">
+ <strong style="font-size:13px">Gmail CRM</strong>
+ <input placeholder="Search subject, sender, label…">
+ <span class="pill">Newest</span>
+ <span class="pill">All priorities</span>
+ <span class="pill" style="background:var(--emerald);color:#022c1a;font-weight:700">↻ Sync</span>
+</div>
+
+<div class="row unread high">
+ <div style="flex:1">
+ <div style="display:flex"><span class="from">Sen. Bernie Sanders Office</span><span class="when">14m ago</span></div>
+ <div class="subj">RE: Markup tomorrow — borrower bill</div>
+ <div class="preview">Natalia — Senator can do a quick call before 9am ET. Aide on this thread.</div>
+ <div class="chips"><span class="chip chip-label">IMPORTANT</span><span class="chip chip-pri-high">HIGH</span></div>
+ </div>
+</div>
+
+<div class="row selected unread high">
+ <div style="flex:1">
+ <div style="display:flex"><span class="from">Erica Werner · Washington Post</span><span class="when">42m ago</span></div>
+ <div class="subj">Quote request — Dept of Ed PSLF guidance</div>
+ <div class="preview">Hi Natalia — running a story for tomorrow on the new PSLF buyback option. 20 min by 4pm?</div>
+ <div class="chips">
+ <span class="chip chip-label">PRESS</span>
+ <span class="chip chip-pri-high">HIGH</span>
+ <span class="chip chip-assign">👤 Natalia</span>
+ <span class="chip chip-seen">👁 Seen ×2</span>
+ </div>
+ </div>
+</div>
+
+<div class="expand">
+ <div class="ex-head">
+ <div>
+ <h2 class="ex-subj">Quote request — Dept of Ed PSLF guidance</h2>
+ <div class="ex-meta">
+ <span>From</span><strong>Erica Werner <erica@washpost.com></strong>
+ <span>To</span><span>natalia@studentdebtcrisis.org</span>
+ <span>Date</span><span>May 20, 2026 · 3:18 PM PT</span>
+ <span>Owner</span>
+ <span class="seen-row">
+ <select class="assign"><option>Natalia (admin) ✓</option><option>Cody (staff)</option><option>Jess (intern)</option><option>— Unassigned —</option></select>
+ </span>
+ <span>Seen by</span>
+ <span class="seen-row">
+ <span class="seen-pill">✓ Natalia — 3:21 PM</span>
+ <span class="seen-pill">✓ Cody — 3:24 PM</span>
+ </span>
+ </div>
+ </div>
+ <span class="chip chip-pri-high" style="font-size:10.5px;padding:3px 10px">★ HIGH</span>
+ </div>
+ <div class="ex-body">
+ Hi Natalia,<br><br>
+ Running a piece tomorrow on the new PSLF buyback guidance that came out this morning. Two questions if you have 20 min by 4pm ET:<br><br>
+ 1) Your read on whether borrowers between months 100-120 of payment actually get a meaningful benefit, or whether the buyback math wipes it out.<br>
+ 2) Any data points from SDCC on how many borrowers are caught in this 100-120 window?<br><br>
+ Happy to do email if a call doesn't work. Thanks!<br>—Erica
+ </div>
+ <div class="ai-card">
+ <h4>✨ AI Analysis</h4>
+ <div style="color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;font-weight:600">Sender needs</div>
+ <div style="margin-bottom:10px">A quote + a data point. Deadline today by ~4pm ET. Reporter is well-disposed; this is a friendly assist, not an adversarial fact-check.</div>
+ <div style="color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;font-weight:600">Suggested reply</div>
+ <textarea>Hi Erica — happy to help. I can do a quick call at 3:45pm ET; I'll text you a number. On the data: our cohort of ~12k PSLF borrowers shows 23% are in the 100-120 window. Buyback math wipes out the gain for anyone above the income cap, which is a known design flaw worth surfacing. — Natalia</textarea>
+ <div class="act">
+ <button class="btn">Copy</button>
+ <button class="btn">Save as Draft</button>
+ <button class="btn pri">Send ▸</button>
+ </div>
+ </div>
+</div>
+
+<div class="row read med">
+ <div style="flex:1">
+ <div style="display:flex"><span class="from">Astra Taylor · Debt Collective</span><span class="when">2h ago</span></div>
+ <div class="subj">Reading the new ED memo together?</div>
+ <div class="preview">Want to do a joint statement if it lands the way we think it will.</div>
+ <div class="chips"><span class="chip chip-label">PARTNERS</span><span class="chip chip-assign">👤 Cody</span><span class="chip chip-seen">👁 Seen by Cody</span></div>
+ </div>
+</div>
+
+<div class="row read low">
+ <div style="flex:1">
+ <div style="display:flex"><span class="from">marcus.huang@umich.edu</span><span class="when">Yesterday</span></div>
+ <div class="subj">Borrower story — graduated 2018, default at 27</div>
+ <div class="preview">Saw your work on PBS NewsHour. I'd like to share my story...</div>
+ <div class="chips"><span class="chip chip-label">STORIES</span></div>
+ </div>
+</div>
+
+<div class="row read low">
+ <div style="flex:1">
+ <div style="display:flex"><span class="from">noreply@bls.gov</span><span class="when">Yesterday</span></div>
+ <div class="subj">[Newsletter] BLS monthly employment data — April 2026</div>
+ <div class="preview">Total nonfarm payroll employment rose by 175,000 in April...</div>
+ <div class="chips"><span class="chip chip-label">CATEGORY_PROMOTIONS</span></div>
+ </div>
+</div>
+
+</body></html>
diff --git a/public/mockups/inbox/v2-notion-cards.html b/public/mockups/inbox/v2-notion-cards.html
new file mode 100644
index 0000000..2f1dd02
--- /dev/null
+++ b/public/mockups/inbox/v2-notion-cards.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><title>v2 — Notion Cards — Norma Inbox</title>
+<style>
+ :root { --bg:#fafafa; --panel:#fff; --el:#f4f4f5; --fg:#27272a; --muted:#71717a; --line:#e4e4e7; --emerald:#059669; --indigo:#4f46e5; --rose:#dc2626; --amber:#d97706; }
+ * { box-sizing:border-box; }
+ body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
+ .top { padding:18px 32px; background:var(--panel); border-bottom:1px solid var(--line); display:flex; gap:16px; align-items:center; }
+ .top h1 { font-size:18px; font-weight:700; margin:0; flex:1; }
+ .pill { font-size:12px; padding:5px 12px; border-radius:8px; background:var(--el); color:var(--muted); font-weight:500; cursor:pointer; }
+ .pill.active { background:var(--fg); color:var(--bg); }
+ .stack { padding:24px 32px; max-width:880px; margin:0 auto; }
+ .card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-bottom:14px; box-shadow:0 1px 2px rgba(0,0,0,0.03); transition:transform 0.15s, box-shadow 0.15s; cursor:pointer; }
+ .card:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.06); }
+ .card.unread { border-left:4px solid var(--emerald); }
+ .card.expanded { border:1px solid var(--emerald); box-shadow:0 8px 24px rgba(5,150,105,0.12); padding-bottom:24px; }
+ .meta { display:flex; gap:10px; align-items:center; margin-bottom:8px; font-size:12px; color:var(--muted); }
+ .ava { width:28px; height:28px; border-radius:50%; background:var(--indigo); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
+ .name { color:var(--fg); font-weight:700; font-size:13.5px; }
+ .when { margin-left:auto; }
+ h3.subj { font-size:16px; font-weight:700; margin:0 0 6px; line-height:1.35; }
+ .body-prev { color:var(--muted); font-size:13px; margin:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
+ .tagrow { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; align-items:center; }
+ .tag { font-size:11px; padding:3px 10px; border-radius:999px; font-weight:600; }
+ .tag-press { background:rgba(220,38,38,0.1); color:var(--rose); }
+ .tag-policy { background:rgba(79,70,229,0.1); color:var(--indigo); }
+ .tag-partners { background:rgba(5,150,105,0.1); color:var(--emerald); }
+ .tag-stories { background:rgba(217,119,6,0.1); color:var(--amber); }
+ .tag-assign { background:var(--el); color:var(--fg); display:inline-flex; gap:4px; align-items:center; padding:3px 8px 3px 4px; }
+ .tag-seen { background:rgba(5,150,105,0.1); color:var(--emerald); }
+ .mini-ava { width:18px; height:18px; border-radius:50%; background:var(--indigo); color:#fff; font-size:10px; display:flex; align-items:center; justify-content:center; font-weight:700; }
+
+ /* Expanded view extras */
+ .exp-divider { height:1px; background:var(--line); margin:18px -22px; }
+ .exp-meta-grid { display:grid; grid-template-columns:80px 1fr; gap:6px 14px; font-size:13px; margin-bottom:14px; }
+ .exp-meta-grid > span:nth-child(odd) { color:var(--muted); }
+ .seen-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
+ .seen-pill { font-size:11px; padding:3px 10px; border-radius:999px; background:rgba(5,150,105,0.1); color:var(--emerald); display:inline-flex; gap:4px; align-items:center; }
+ select.assign { background:var(--panel); border:1px solid var(--line); color:var(--fg); font:13px inherit; padding:4px 10px; border-radius:8px; }
+ .body-card { background:var(--el); border-radius:10px; padding:16px 18px; font-size:14px; line-height:1.65; }
+ .ai-card { margin-top:16px; padding:16px 18px; border-radius:10px; background:#f0fdf4; border:1px solid #bbf7d0; }
+ .ai-card h4 { margin:0 0 8px; font-size:13px; font-weight:700; color:var(--emerald); display:flex; gap:6px; align-items:center; }
+ textarea { width:100%; background:var(--panel); border:1px solid var(--line); color:var(--fg); border-radius:8px; padding:10px 12px; font:13.5px inherit; resize:vertical; min-height:90px; }
+ .act { display:flex; gap:8px; margin-top:12px; }
+ .btn { font:12px inherit; padding:6px 14px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--fg); cursor:pointer; font-weight:600; }
+ .btn.pri { background:var(--emerald); border-color:var(--emerald); color:#fff; margin-left:auto; }
+</style>
+</head><body>
+
+<div class="top">
+ <h1>Inbox</h1>
+ <span class="pill active">All</span>
+ <span class="pill">Unread</span>
+ <span class="pill">Mine</span>
+ <span class="pill" style="background:var(--emerald);color:#fff;font-weight:600">↻ Sync</span>
+</div>
+
+<div class="stack">
+
+<div class="card unread">
+ <div class="meta">
+ <div class="ava">BS</div>
+ <span class="name">Sen. Bernie Sanders Office</span>
+ <span class="when">14m ago</span>
+ </div>
+ <h3 class="subj">RE: Markup tomorrow — borrower bill</h3>
+ <p class="body-prev">Natalia — Senator can do a quick call before 9am ET. Aide on this thread.</p>
+ <div class="tagrow"><span class="tag tag-policy">POLICY</span><span class="tag tag-assign"><span class="mini-ava">N</span> Natalia</span><span class="tag tag-seen">👁 Seen ×1</span></div>
+</div>
+
+<div class="card expanded unread">
+ <div class="meta">
+ <div class="ava" style="background:var(--rose)">EW</div>
+ <span class="name">Erica Werner · Washington Post</span>
+ <span class="when">42m ago</span>
+ </div>
+ <h3 class="subj">Quote request — Dept of Ed PSLF guidance</h3>
+ <p class="body-prev">Hi Natalia — running a story for tomorrow on the new PSLF buyback option. 20 min by 4pm?</p>
+ <div class="tagrow">
+ <span class="tag tag-press">PRESS</span>
+ <span class="tag tag-assign"><span class="mini-ava">N</span> Natalia</span>
+ <span class="tag tag-seen">👁 Seen ×2</span>
+ </div>
+
+ <div class="exp-divider"></div>
+
+ <div class="exp-meta-grid">
+ <span>From</span><strong>Erica Werner <erica@washpost.com></strong>
+ <span>To</span><span>natalia@studentdebtcrisis.org</span>
+ <span>Owner</span>
+ <span class="seen-row">
+ <select class="assign"><option>Natalia (admin) ✓</option><option>Cody (staff)</option><option>Jess (intern)</option><option>— Unassigned —</option></select>
+ </span>
+ <span>Seen by</span>
+ <span class="seen-row">
+ <span class="seen-pill"><span class="mini-ava">N</span> Natalia — 3:21 PM</span>
+ <span class="seen-pill"><span class="mini-ava" style="background:var(--amber)">C</span> Cody — 3:24 PM</span>
+ </span>
+ </div>
+
+ <div class="body-card">
+ Hi Natalia,<br><br>
+ Running a piece tomorrow on the new PSLF buyback guidance that came out this morning. Two questions if you have 20 min by 4pm ET:<br><br>
+ 1) Your read on whether borrowers between months 100-120 of payment actually get a meaningful benefit, or whether the buyback math wipes it out.<br>
+ 2) Any data points from SDCC on how many borrowers are caught in this 100-120 window?<br><br>
+ Happy to do email if a call doesn't work. Thanks! — Erica
+ </div>
+
+ <div class="ai-card">
+ <h4>✨ AI Analysis · Suggested reply</h4>
+ <textarea>Hi Erica — happy to help. I can do a quick call at 3:45pm ET. On the data: our cohort of ~12k PSLF borrowers shows 23% are in the 100-120 window. Buyback math wipes out the gain for anyone above the income cap, which is a known design flaw worth surfacing. — Natalia</textarea>
+ <div class="act">
+ <button class="btn">Copy</button>
+ <button class="btn">Save as Draft</button>
+ <button class="btn pri">Send ▸</button>
+ </div>
+ </div>
+</div>
+
+<div class="card">
+ <div class="meta">
+ <div class="ava" style="background:var(--emerald)">AT</div>
+ <span class="name">Astra Taylor · Debt Collective</span>
+ <span class="when">2h ago</span>
+ </div>
+ <h3 class="subj">Reading the new ED memo together?</h3>
+ <p class="body-prev">Want to do a joint statement if it lands the way we think it will.</p>
+ <div class="tagrow"><span class="tag tag-partners">PARTNERS</span><span class="tag tag-assign"><span class="mini-ava" style="background:var(--amber)">C</span> Cody</span></div>
+</div>
+
+<div class="card">
+ <div class="meta">
+ <div class="ava" style="background:var(--amber)">MH</div>
+ <span class="name">Marcus Huang</span>
+ <span class="when">Yesterday</span>
+ </div>
+ <h3 class="subj">Borrower story — graduated 2018, default at 27</h3>
+ <p class="body-prev">Saw your work on PBS NewsHour. I'd like to share my story...</p>
+ <div class="tagrow"><span class="tag tag-stories">STORIES</span></div>
+</div>
+
+</div>
+</body></html>
diff --git a/public/mockups/inbox/v3-linear-keyboard.html b/public/mockups/inbox/v3-linear-keyboard.html
new file mode 100644
index 0000000..4535fb7
--- /dev/null
+++ b/public/mockups/inbox/v3-linear-keyboard.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><title>v3 — Linear Keyboard — Norma Inbox</title>
+<style>
+ :root { --bg:#08090b; --panel:#0e0f12; --el:#16181c; --fg:#e6e6eb; --muted:#7a7d85; --line:#22252b; --acc:#5e6ad2; --emerald:#22c55e; --rose:#f43f5e; --amber:#f59e0b; }
+ * { box-sizing:border-box; }
+ body { margin:0; background:var(--bg); color:var(--fg); font:13px/1.5 ui-sans-serif, "Inter", system-ui, sans-serif; letter-spacing:-0.005em; }
+ .top { padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:center; font-size:12.5px; }
+ .crumb { color:var(--muted); }
+ .crumb strong { color:var(--fg); }
+ .kbd { font:11px ui-monospace, Menlo, monospace; padding:1px 6px; border-radius:4px; background:var(--el); border:1px solid var(--line); color:var(--muted); }
+ .filter { display:flex; gap:12px; padding:8px 18px; background:var(--panel); border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); }
+ .filter span { display:inline-flex; gap:5px; align-items:center; cursor:pointer; }
+ .filter span.on { color:var(--fg); }
+ .list { padding:0; }
+ .row { display:grid; grid-template-columns:24px 14px 18px 230px 1fr 110px 120px 90px; gap:12px; align-items:center; padding:9px 18px; border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; }
+ .row:hover { background:var(--el); }
+ .row.selected { background:rgba(94,106,210,0.08); border-left:2px solid var(--acc); padding-left:16px; }
+ .row .num { color:var(--muted); font:11px ui-monospace, Menlo, monospace; }
+ .status { width:10px; height:10px; border-radius:50%; }
+ .s-triage { background:var(--rose); box-shadow:0 0 0 2px rgba(244,63,94,0.18); }
+ .s-working { background:var(--amber); box-shadow:0 0 0 2px rgba(245,158,11,0.18); }
+ .s-replied { background:var(--emerald); box-shadow:0 0 0 2px rgba(34,197,94,0.18); }
+ .s-snoozed { background:var(--muted); }
+ .pri { font:10px ui-monospace, Menlo, monospace; padding:1.5px 5px; border-radius:3px; font-weight:700; }
+ .pri-h { background:rgba(244,63,94,0.15); color:var(--rose); }
+ .pri-m { background:rgba(245,158,11,0.15); color:var(--amber); }
+ .pri-l { background:rgba(34,197,94,0.12); color:var(--emerald); }
+ .from-col { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+ .subj-col { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
+ .subj-col strong { color:var(--fg); }
+ .assignee, .seen { font-size:11px; color:var(--muted); display:inline-flex; gap:4px; align-items:center; }
+ .ava { width:16px; height:16px; border-radius:50%; background:var(--acc); color:#fff; font-size:9.5px; display:flex; align-items:center; justify-content:center; font-weight:700; }
+ .when { color:var(--muted); font-size:11.5px; text-align:right; }
+
+ /* Expanded row */
+ .expand { background:var(--panel); padding:18px 26px 22px 36px; border-left:2px solid var(--acc); border-bottom:1px solid var(--line); }
+ .exp-head { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
+ .exp-subj { font-size:15px; font-weight:600; margin:0; flex:1; }
+ .exp-meta { display:grid; grid-template-columns:80px 1fr; gap:5px 14px; font-size:12.5px; color:var(--muted); margin-bottom:14px; }
+ .exp-meta strong { color:var(--fg); font-weight:500; }
+ select.assign, .pill-action { background:var(--el); border:1px solid var(--line); color:var(--fg); font:12px inherit; padding:3px 8px; border-radius:5px; cursor:pointer; }
+ .seen-pill { font-size:11px; padding:2px 8px; border-radius:4px; background:rgba(34,197,94,0.1); color:var(--emerald); display:inline-flex; gap:4px; align-items:center; }
+ .body-block { background:var(--el); border-radius:6px; padding:14px 16px; font-size:13px; line-height:1.65; color:#d4d4dc; }
+ .ai { margin-top:14px; padding:14px 16px; border-radius:6px; background:rgba(94,106,210,0.06); border-left:2px solid var(--acc); }
+ .ai h4 { margin:0 0 8px; font-size:11px; color:var(--acc); text-transform:uppercase; letter-spacing:0.1em; font-weight:700; }
+ textarea { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--fg); border-radius:5px; padding:8px 10px; font:12.5px ui-monospace, Menlo, monospace; resize:vertical; min-height:90px; line-height:1.55; }
+ .act { display:flex; gap:6px; margin-top:10px; }
+ .btn { font:11.5px inherit; padding:4px 11px; border-radius:5px; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; }
+ .btn.pri { background:var(--acc); border-color:var(--acc); margin-left:auto; }
+</style>
+</head><body>
+
+<div class="top">
+ <span class="crumb">Norma <span class="kbd">⌘K</span> › <strong>Inbox</strong></span>
+ <span style="flex:1"></span>
+ <span style="color:var(--muted);font-size:12px">J/K navigate · A assign · S snooze · R reply · / search</span>
+</div>
+
+<div class="filter">
+ <span class="on">● All</span>
+ <span>● Triage <span class="kbd">3</span></span>
+ <span>● Working <span class="kbd">2</span></span>
+ <span>● Replied <span class="kbd">12</span></span>
+ <span>● Snoozed <span class="kbd">1</span></span>
+ <span style="margin-left:auto;color:var(--muted)">Page 1 of 2</span>
+</div>
+
+<div class="list">
+
+<div class="row">
+ <span class="num">1</span>
+ <span class="status s-triage" title="Triage"></span>
+ <span class="pri pri-h">H</span>
+ <span class="from-col">Sen. Bernie Sanders Office</span>
+ <span class="subj-col"><strong>RE: Markup tomorrow — borrower bill</strong> · Natalia — Senator can do a quick call before 9am ET</span>
+ <span class="assignee"><span class="ava">N</span>Natalia</span>
+ <span class="seen">👁 1</span>
+ <span class="when">14m</span>
+</div>
+
+<div class="row selected">
+ <span class="num">2</span>
+ <span class="status s-triage" title="Triage"></span>
+ <span class="pri pri-h">H</span>
+ <span class="from-col">Erica Werner · Washington Post</span>
+ <span class="subj-col"><strong>Quote request — Dept of Ed PSLF guidance</strong> · Running a story for tomorrow on the new PSLF buyback option</span>
+ <span class="assignee"><span class="ava">N</span>Natalia</span>
+ <span class="seen">👁 2</span>
+ <span class="when">42m</span>
+</div>
+
+<div class="expand">
+ <div class="exp-head">
+ <h3 class="exp-subj">Quote request — Dept of Ed PSLF guidance</h3>
+ <button class="pill-action">A · Assign</button>
+ <button class="pill-action">S · Snooze</button>
+ <button class="pill-action">→ Move</button>
+ </div>
+ <div class="exp-meta">
+ <span>From</span><strong>Erica Werner <erica@washpost.com></strong>
+ <span>To</span><strong>natalia@studentdebtcrisis.org</strong>
+ <span>Owner</span><span><select class="assign"><option>Natalia (admin)</option><option>Cody (staff)</option><option>Jess (intern)</option><option>— Unassigned —</option></select></span>
+ <span>Seen by</span>
+ <span style="display:flex;gap:5px;flex-wrap:wrap">
+ <span class="seen-pill"><span class="ava" style="width:13px;height:13px;font-size:8.5px">N</span>Natalia · 3:21</span>
+ <span class="seen-pill"><span class="ava" style="width:13px;height:13px;font-size:8.5px;background:var(--amber)">C</span>Cody · 3:24</span>
+ </span>
+ <span>Labels</span><span><span class="pri pri-h">PRESS</span> <span class="pri" style="background:var(--el);color:var(--muted)">IMPORTANT</span></span>
+ </div>
+ <div class="body-block">
+ Hi Natalia,<br><br>
+ Running a piece tomorrow on the new PSLF buyback guidance that came out this morning. Two questions if you have 20 min by 4pm ET:<br><br>
+ 1) Your read on whether borrowers between months 100-120 of payment actually get a meaningful benefit, or whether the buyback math wipes it out.<br>
+ 2) Any data points from SDCC on how many borrowers are caught in this 100-120 window?<br><br>
+ Happy to do email if a call doesn't work. Thanks! — Erica
+ </div>
+ <div class="ai">
+ <h4>✨ AI · Suggested reply (professional)</h4>
+ <textarea>Hi Erica — happy to help. Quick call at 3:45pm ET; I'll text the number. On the data: ~12k PSLF borrowers in our cohort, 23% in the 100-120 window. Buyback math wipes the gain for anyone above the income cap — known design flaw. — Natalia</textarea>
+ <div class="act">
+ <button class="btn">Copy</button>
+ <button class="btn">Save Draft</button>
+ <button class="btn pri">Send ⌘↵</button>
+ </div>
+ </div>
+</div>
+
+<div class="row">
+ <span class="num">3</span>
+ <span class="status s-working" title="Working"></span>
+ <span class="pri pri-m">M</span>
+ <span class="from-col">Astra Taylor · Debt Collective</span>
+ <span class="subj-col"><strong>Reading the new ED memo together?</strong> · Want to do a joint statement if it lands the way we think</span>
+ <span class="assignee"><span class="ava" style="background:var(--amber)">C</span>Cody</span>
+ <span class="seen">👁 1</span>
+ <span class="when">2h</span>
+</div>
+
+<div class="row">
+ <span class="num">4</span>
+ <span class="status s-replied" title="Replied"></span>
+ <span class="pri pri-l">L</span>
+ <span class="from-col">Marcus Huang</span>
+ <span class="subj-col"><strong>Borrower story — graduated 2018, default at 27</strong> · Saw your work on PBS NewsHour</span>
+ <span class="assignee"><span class="ava" style="background:#22c55e">J</span>Jess</span>
+ <span class="seen">👁 3</span>
+ <span class="when">1d</span>
+</div>
+
+<div class="row">
+ <span class="num">5</span>
+ <span class="status s-snoozed" title="Snoozed until Mon"></span>
+ <span class="pri pri-l">L</span>
+ <span class="from-col">noreply@bls.gov</span>
+ <span class="subj-col"><strong>BLS monthly employment data</strong> · Total nonfarm payroll employment rose by 175,000</span>
+ <span class="assignee">—</span>
+ <span class="seen">—</span>
+ <span class="when">2d</span>
+</div>
+
+</div>
+</body></html>
diff --git a/public/mockups/inbox/v4-apple-mail.html b/public/mockups/inbox/v4-apple-mail.html
new file mode 100644
index 0000000..7b43d6c
--- /dev/null
+++ b/public/mockups/inbox/v4-apple-mail.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><title>v4 — Apple Mail — Norma Inbox</title>
+<style>
+ :root { --bg:#f5f5f7; --panel:#fff; --side:#ececef; --el:#f9f9fc; --fg:#1d1d1f; --muted:#86868b; --line:#d2d2d7; --blue:#0070f3; --rose:#d61f3a; --emerald:#0a7c59; --amber:#a05b00; }
+ * { box-sizing:border-box; }
+ body { margin:0; background:var(--bg); color:var(--fg); font:13.5px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif; }
+ .app { display:grid; grid-template-columns:200px 360px 1fr; height:100vh; }
+ /* Left sidebar — mailboxes */
+ .side { background:var(--side); border-right:1px solid var(--line); padding:14px 0; overflow-y:auto; }
+ .side h4 { margin:14px 16px 6px; font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:0.06em; font-weight:600; }
+ .mb-item { display:flex; gap:8px; align-items:center; padding:5px 16px; cursor:pointer; font-size:13px; }
+ .mb-item:hover { background:rgba(0,0,0,0.04); }
+ .mb-item.on { background:var(--blue); color:#fff; }
+ .mb-item .ic { width:16px; text-align:center; }
+ .mb-item .ct { margin-left:auto; color:var(--muted); font-size:11px; }
+ .mb-item.on .ct { color:rgba(255,255,255,0.7); }
+
+ /* Center list */
+ .list { background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; }
+ .list-head { padding:10px 16px; border-bottom:1px solid var(--line); display:flex; gap:8px; align-items:center; font-weight:600; font-size:13px; }
+ .list-head input { flex:1; max-width:200px; background:var(--bg); border:1px solid var(--line); padding:4px 8px; border-radius:6px; font:12px inherit; }
+ .msg-row { padding:10px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
+ .msg-row:hover { background:var(--el); }
+ .msg-row.unread::before { content:"●"; color:var(--blue); margin-right:6px; }
+ .msg-row.selected { background:var(--blue); color:#fff; }
+ .msg-row.selected .preview, .msg-row.selected .tag, .msg-row.selected .when { color:#fff; opacity:0.85; }
+ .from-line { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; }
+ .from-line .when { margin-left:auto; font-size:11.5px; font-weight:500; color:var(--muted); }
+ .subj { font-size:13px; font-weight:600; margin:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+ .preview { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+ .tagrow { display:flex; gap:5px; margin-top:5px; flex-wrap:wrap; }
+ .tag { font-size:10px; padding:1.5px 7px; border-radius:3px; font-weight:600; }
+ .tag-press { background:rgba(214,31,58,0.12); color:var(--rose); }
+ .tag-policy { background:rgba(0,112,243,0.1); color:var(--blue); }
+ .tag-partners { background:rgba(10,124,89,0.12); color:var(--emerald); }
+ .tag-assign { background:rgba(160,91,0,0.1); color:var(--amber); }
+ .tag-seen { background:rgba(10,124,89,0.08); color:var(--emerald); }
+ .msg-row.selected .tag { background:rgba(255,255,255,0.18); color:#fff; }
+
+ /* Right reading pane */
+ .pane { background:var(--panel); overflow-y:auto; padding:24px 32px; }
+ .pane-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
+ h2 { margin:0 0 4px; font-size:22px; font-weight:700; }
+ .pane-meta { display:grid; grid-template-columns:60px 1fr; gap:5px 14px; font-size:12.5px; margin-top:14px; color:var(--muted); }
+ .pane-meta strong { color:var(--fg); font-weight:600; }
+ select.assign { background:var(--bg); border:1px solid var(--line); color:var(--fg); font:12px inherit; padding:3px 9px; border-radius:5px; }
+ .seen-pill { font-size:11.5px; padding:2px 9px; border-radius:999px; background:rgba(10,124,89,0.1); color:var(--emerald); display:inline-flex; gap:5px; align-items:center; }
+ .div { height:1px; background:var(--line); margin:18px 0; }
+ .body { font-size:14px; line-height:1.65; color:#3a3a3c; }
+ .ai-card { margin-top:22px; padding:16px 18px; border-radius:8px; background:#f0f7ff; border:1px solid #d0e4ff; }
+ .ai-card h4 { margin:0 0 8px; font-size:13px; color:var(--blue); font-weight:700; }
+ textarea { width:100%; background:#fff; border:1px solid var(--line); border-radius:6px; padding:9px 11px; font:13px inherit; resize:vertical; min-height:90px; }
+ .act { display:flex; gap:6px; margin-top:10px; }
+ .btn { font:12px inherit; padding:5px 13px; border-radius:5px; border:1px solid var(--line); background:#fff; color:var(--fg); cursor:pointer; font-weight:500; }
+ .btn.pri { background:var(--blue); color:#fff; border-color:var(--blue); margin-left:auto; font-weight:600; }
+ .toolbar { display:flex; gap:4px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
+ .toolbar .btn { padding:4px 10px; font-size:11.5px; }
+</style>
+</head><body>
+
+<div class="app">
+
+ <!-- Mailboxes -->
+ <div class="side">
+ <h4>Mailboxes</h4>
+ <div class="mb-item on"><span class="ic">📥</span>Inbox<span class="ct">12</span></div>
+ <div class="mb-item"><span class="ic">🟢</span>Mine<span class="ct">3</span></div>
+ <div class="mb-item"><span class="ic">👥</span>Team<span class="ct">7</span></div>
+ <div class="mb-item"><span class="ic">⭐</span>Flagged<span class="ct">4</span></div>
+ <div class="mb-item"><span class="ic">📤</span>Sent</div>
+ <div class="mb-item"><span class="ic">📝</span>Drafts<span class="ct">2</span></div>
+ <div class="mb-item"><span class="ic">🗑️</span>Trash</div>
+
+ <h4>Accounts</h4>
+ <div class="mb-item"><span class="ic">●</span>natalia@<span class="ct">12</span></div>
+ <div class="mb-item"><span class="ic">●</span>info@<span class="ct">23</span></div>
+ <div class="mb-item"><span class="ic">●</span>donors@<span class="ct">0</span></div>
+
+ <h4>Smart Mailboxes</h4>
+ <div class="mb-item"><span class="ic">⚡</span>Today's press</div>
+ <div class="mb-item"><span class="ic">⚡</span>Congress thread</div>
+ <div class="mb-item"><span class="ic">⚡</span>Borrower stories</div>
+ </div>
+
+ <!-- Message list -->
+ <div class="list">
+ <div class="list-head">Inbox <span style="color:var(--muted);font-weight:400">(12 messages)</span><input placeholder="Search"></div>
+
+ <div class="msg-row unread">
+ <div class="from-line">Sen. Bernie Sanders Office<span class="when">14m</span></div>
+ <div class="subj">RE: Markup tomorrow — borrower bill</div>
+ <div class="preview">Natalia — Senator can do a quick call before 9am ET. Aide on this thread.</div>
+ <div class="tagrow"><span class="tag tag-policy">POLICY</span><span class="tag tag-assign">N. Abrams</span></div>
+ </div>
+
+ <div class="msg-row unread selected">
+ <div class="from-line">Erica Werner · Washington Post<span class="when">42m</span></div>
+ <div class="subj">Quote request — Dept of Ed PSLF guidance</div>
+ <div class="preview">Hi Natalia — running a story for tomorrow on the new PSLF buyback option. 20 min by 4pm?</div>
+ <div class="tagrow"><span class="tag tag-press">PRESS</span><span class="tag tag-assign">N. Abrams</span><span class="tag tag-seen">👁 2</span></div>
+ </div>
+
+ <div class="msg-row">
+ <div class="from-line">Astra Taylor · Debt Collective<span class="when">2h</span></div>
+ <div class="subj">Reading the new ED memo together?</div>
+ <div class="preview">Want to do a joint statement if it lands the way we think it will.</div>
+ <div class="tagrow"><span class="tag tag-partners">PARTNERS</span><span class="tag tag-assign">C. Lin</span></div>
+ </div>
+
+ <div class="msg-row">
+ <div class="from-line">Marcus Huang<span class="when">Yesterday</span></div>
+ <div class="subj">Borrower story — graduated 2018, default at 27</div>
+ <div class="preview">Saw your work on PBS NewsHour. I'd like to share my story...</div>
+ <div class="tagrow"><span class="tag tag-assign">J. Park</span></div>
+ </div>
+
+ <div class="msg-row">
+ <div class="from-line">noreply@bls.gov<span class="when">Yesterday</span></div>
+ <div class="subj">[Newsletter] BLS monthly employment data — April 2026</div>
+ <div class="preview">Total nonfarm payroll employment rose by 175,000 in April...</div>
+ </div>
+ </div>
+
+ <!-- Reading pane -->
+ <div class="pane">
+ <div class="toolbar">
+ <button class="btn">↩ Reply</button>
+ <button class="btn">↩↩ Reply All</button>
+ <button class="btn">→ Forward</button>
+ <button class="btn">🚩 Flag</button>
+ <button class="btn">📂 Move</button>
+ <button class="btn" style="margin-left:auto">🗑 Trash</button>
+ </div>
+
+ <div class="pane-head">
+ <h2>Quote request — Dept of Ed PSLF guidance</h2>
+ <span class="tag tag-press" style="padding:4px 12px;font-size:11px">★ HIGH PRIORITY</span>
+ </div>
+
+ <div class="pane-meta">
+ <span>From</span><strong>Erica Werner <erica@washpost.com></strong>
+ <span>To</span><strong>natalia@studentdebtcrisis.org</strong>
+ <span>Date</span><strong>May 20, 2026 · 3:18 PM PT</strong>
+ <span>Owner</span><span><select class="assign"><option>Natalia Abrams (admin)</option><option>Cody Lin (staff)</option><option>Jess Park (intern)</option><option>— Unassigned —</option></select></span>
+ <span>Seen by</span>
+ <span style="display:flex;gap:6px;flex-wrap:wrap">
+ <span class="seen-pill">✓ Natalia · 3:21 PM</span>
+ <span class="seen-pill">✓ Cody · 3:24 PM</span>
+ </span>
+ </div>
+
+ <div class="div"></div>
+
+ <div class="body">
+ Hi Natalia,<br><br>
+ Running a piece tomorrow on the new PSLF buyback guidance that came out this morning. Two questions if you have 20 min by 4pm ET:<br><br>
+ 1) Your read on whether borrowers between months 100-120 of payment actually get a meaningful benefit, or whether the buyback math wipes it out.<br>
+ 2) Any data points from SDCC on how many borrowers are caught in this 100-120 window?<br><br>
+ Happy to do email if a call doesn't work. Thanks!<br>—Erica
+ </div>
+
+ <div class="ai-card">
+ <h4>✨ AI Analysis · Suggested reply</h4>
+ <textarea>Hi Erica — happy to help. I can do a quick call at 3:45pm ET; I'll text you a number. On the data: our cohort of ~12k PSLF borrowers shows 23% are in the 100-120 window. Buyback math wipes out the gain for anyone above the income cap — known design flaw. — Natalia</textarea>
+ <div class="act">
+ <button class="btn">Copy</button>
+ <button class="btn">Save Draft</button>
+ <button class="btn pri">Send ▸</button>
+ </div>
+ </div>
+ </div>
+
+</div>
+</body></html>
diff --git a/public/mockups/inbox/v5-front-conversation.html b/public/mockups/inbox/v5-front-conversation.html
new file mode 100644
index 0000000..433b00c
--- /dev/null
+++ b/public/mockups/inbox/v5-front-conversation.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><title>v5 — Front Conversation — Norma Inbox</title>
+<style>
+ :root { --bg:#0d1119; --panel:#141925; --el:#1d2434; --fg:#ebebef; --muted:#8a92a8; --line:#2a3148; --teal:#00d4ae; --indigo:#7c84ff; --rose:#ff5e7e; --amber:#ffba33; }
+ * { box-sizing:border-box; }
+ body { margin:0; background:var(--bg); color:var(--fg); font:13.5px/1.5 -apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
+ .app { display:grid; grid-template-columns:200px 1fr; height:100vh; }
+ /* Left rail — group inboxes */
+ .rail { background:var(--panel); border-right:1px solid var(--line); padding:18px 0; }
+ .rail h5 { margin:18px 18px 6px; font-size:10.5px; text-transform:uppercase; color:var(--muted); letter-spacing:0.08em; font-weight:700; }
+ .rail-item { padding:8px 18px; display:flex; gap:10px; align-items:center; font-size:13px; cursor:pointer; border-left:3px solid transparent; }
+ .rail-item:hover { background:var(--el); }
+ .rail-item.on { background:rgba(0,212,174,0.08); border-left-color:var(--teal); color:var(--fg); }
+ .rail-item .ct { margin-left:auto; font-size:11.5px; color:var(--muted); background:var(--el); padding:1.5px 7px; border-radius:999px; }
+ .rail-item.on .ct { background:rgba(0,212,174,0.15); color:var(--teal); }
+
+ /* Main column */
+ .main { display:grid; grid-template-rows:auto 1fr; overflow-y:auto; }
+ .main-head { padding:18px 30px 8px; }
+ .main-head h1 { margin:0; font-size:22px; font-weight:700; }
+ .main-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
+ .topbar { padding:10px 30px; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); }
+ .topbar input { flex:1; max-width:300px; background:var(--el); border:1px solid var(--line); color:var(--fg); padding:6px 11px; border-radius:6px; font:12px inherit; }
+ .seg { display:inline-flex; background:var(--el); border-radius:8px; padding:2px; }
+ .seg span { padding:5px 13px; font-size:12px; border-radius:6px; cursor:pointer; font-weight:500; color:var(--muted); }
+ .seg span.on { background:var(--panel); color:var(--fg); }
+
+ .convo { padding:0 30px; }
+ .conv-row { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer; }
+ .conv-row:hover { background:var(--el); margin:0 -30px; padding-left:30px; padding-right:30px; }
+ .conv-row.selected { background:rgba(0,212,174,0.05); margin:0 -30px; padding-left:30px; padding-right:30px; }
+ .lead-ava { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13.5px; color:#fff; position:relative; }
+ .lead-ava.unassigned { background:var(--el); color:var(--muted); border:1.5px dashed var(--line); font-size:18px; }
+ .lead-ava .dot { position:absolute; bottom:-2px; right:-2px; width:11px; height:11px; border-radius:50%; background:var(--teal); border:2px solid var(--bg); }
+ .conv-body { flex:1; min-width:0; }
+ .conv-body .row1 { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
+ .conv-body .row1 strong { color:var(--fg); font-size:13.5px; font-weight:700; }
+ .conv-body .row1 .when { margin-left:auto; }
+ .conv-body .subj { font-size:13.5px; font-weight:600; margin:3px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+ .conv-body .prev { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+ .chips-row { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
+ .chip { font-size:10px; padding:2px 8px; border-radius:4px; font-weight:600; }
+ .ch-press { background:rgba(255,94,126,0.15); color:var(--rose); }
+ .ch-policy { background:rgba(124,132,255,0.15); color:var(--indigo); }
+ .ch-partner { background:rgba(0,212,174,0.15); color:var(--teal); }
+ .ch-msgs { background:var(--el); color:var(--muted); }
+ .conv-actions { display:flex; gap:6px; flex-shrink:0; }
+ .qa-btn { width:30px; height:30px; border-radius:6px; background:var(--el); border:none; color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; }
+ .qa-btn:hover { background:var(--teal); color:#013023; }
+
+ /* Expanded conversation thread */
+ .thread { background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 30px 24px; }
+ .thread-head { display:flex; gap:12px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
+ .thread-head h2 { margin:0; font-size:17px; font-weight:700; flex:1; }
+ .collision { display:inline-flex; gap:5px; align-items:center; padding:4px 12px; border-radius:999px; background:rgba(255,186,51,0.12); color:var(--amber); font-size:11.5px; font-weight:600; }
+ .meta-bar { display:flex; gap:18px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px; }
+ .meta-bar > div { display:flex; flex-direction:column; gap:3px; min-width:120px; }
+ .meta-bar label { font-size:10.5px; text-transform:uppercase; color:var(--muted); letter-spacing:0.07em; font-weight:700; }
+ .meta-bar select { background:var(--el); border:1px solid var(--line); color:var(--fg); font:12.5px inherit; padding:4px 9px; border-radius:6px; }
+ .seen-list { display:flex; gap:5px; }
+ .seen-list .seen-ava { width:24px; height:24px; border-radius:50%; font-size:10.5px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; border:2px solid var(--panel); margin-left:-6px; }
+ .seen-list .seen-ava:first-child { margin-left:0; }
+ .msg-thread { display:flex; flex-direction:column; gap:14px; }
+ .msg-bubble { display:flex; gap:12px; }
+ .msg-bubble .mb-ava { width:32px; height:32px; border-radius:50%; flex-shrink:0; font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
+ .mb-body { flex:1; }
+ .mb-head { display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--muted); margin-bottom:4px; }
+ .mb-head strong { color:var(--fg); font-size:13px; font-weight:700; }
+ .mb-content { background:var(--el); border-radius:10px; padding:12px 14px; font-size:13.5px; line-height:1.6; color:#dcdce5; }
+ .mb-content.mine { background:rgba(0,212,174,0.08); color:#cdf5eb; }
+ .reply-box { margin-top:18px; background:var(--el); border:1px solid var(--line); border-radius:10px; padding:14px; }
+ .reply-box label { font-size:10.5px; text-transform:uppercase; color:var(--teal); letter-spacing:0.08em; font-weight:700; }
+ textarea { width:100%; background:transparent; border:none; color:var(--fg); font:13.5px inherit; resize:vertical; min-height:80px; padding:8px 0; line-height:1.6; }
+ textarea:focus { outline:none; }
+ .reply-actions { display:flex; gap:6px; margin-top:8px; align-items:center; }
+ .btn { font:12px inherit; padding:5px 13px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--fg); cursor:pointer; font-weight:600; }
+ .btn.pri { background:var(--teal); border-color:var(--teal); color:#013023; margin-left:auto; }
+</style>
+</head><body>
+
+<div class="app">
+
+ <!-- Left rail -->
+ <div class="rail">
+ <h5>Group inboxes</h5>
+ <div class="rail-item on">📥 All inbox <span class="ct">35</span></div>
+ <div class="rail-item">🙋 Unassigned <span class="ct">8</span></div>
+ <div class="rail-item">👤 Mine <span class="ct">12</span></div>
+ <div class="rail-item">👥 Team <span class="ct">15</span></div>
+ <div class="rail-item">⭐ Flagged <span class="ct">4</span></div>
+
+ <h5>Channels</h5>
+ <div class="rail-item">📧 natalia@ <span class="ct">12</span></div>
+ <div class="rail-item">📧 info@ <span class="ct">23</span></div>
+ <div class="rail-item">📧 donors@ <span class="ct">0</span></div>
+
+ <h5>Teammates</h5>
+ <div class="rail-item"><span style="width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700">N</span> Natalia · admin</div>
+ <div class="rail-item"><span style="width:22px;height:22px;border-radius:50%;background:var(--amber);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700">C</span> Cody · staff</div>
+ <div class="rail-item"><span style="width:22px;height:22px;border-radius:50%;background:var(--teal);color:#013023;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700">J</span> Jess · intern</div>
+ </div>
+
+ <!-- Main column -->
+ <div class="main">
+ <div class="main-head">
+ <h1>All inbox · 35</h1>
+ <p>Shared inbox across natalia@ + info@ + donors@. Assignee is the primary axis.</p>
+ </div>
+ <div class="topbar">
+ <input placeholder="Search messages, senders, labels…">
+ <span class="seg"><span class="on">Open</span><span>Snoozed</span><span>Closed</span></span>
+ <button class="btn" style="margin-left:auto">↻ Sync</button>
+ </div>
+
+ <div class="convo">
+
+ <div class="conv-row">
+ <div class="lead-ava" style="background:var(--indigo)">N<span class="dot"></span></div>
+ <div class="conv-body">
+ <div class="row1"><strong>Sen. Bernie Sanders Office</strong> · to natalia@<span class="when">14m ago</span></div>
+ <div class="subj">RE: Markup tomorrow — borrower bill</div>
+ <div class="prev">Senator can do a quick call before 9am ET. Aide on this thread.</div>
+ <div class="chips-row"><span class="chip ch-policy">POLICY</span><span class="chip ch-msgs">↩ 3 msgs</span></div>
+ </div>
+ <div class="conv-actions"><button class="qa-btn">↩</button><button class="qa-btn">⌛</button><button class="qa-btn">✓</button></div>
+ </div>
+
+ <div class="conv-row selected">
+ <div class="lead-ava" style="background:var(--indigo)">N<span class="dot"></span></div>
+ <div class="conv-body">
+ <div class="row1"><strong>Erica Werner · Washington Post</strong> · to natalia@<span class="when">42m ago</span></div>
+ <div class="subj">Quote request — Dept of Ed PSLF guidance</div>
+ <div class="prev">Hi Natalia — running a story for tomorrow on the new PSLF buyback option. 20 min by 4pm?</div>
+ <div class="chips-row"><span class="chip ch-press">PRESS</span><span class="chip ch-msgs">↩ 1 msg</span><span class="chip" style="background:rgba(255,186,51,0.15);color:var(--amber)">⚠ Cody is typing</span></div>
+ </div>
+ <div class="conv-actions"><button class="qa-btn">↩</button><button class="qa-btn">⌛</button><button class="qa-btn">✓</button></div>
+ </div>
+ </div>
+
+ <!-- Expanded thread -->
+ <div class="thread">
+ <div class="thread-head">
+ <h2>Quote request — Dept of Ed PSLF guidance</h2>
+ <span class="collision">⚠ Cody is also viewing</span>
+ </div>
+
+ <div class="meta-bar">
+ <div>
+ <label>Owner</label>
+ <select><option>Natalia Abrams (admin)</option><option>Cody Lin (staff)</option><option>Jess Park (intern)</option><option>— Unassigned —</option></select>
+ </div>
+ <div>
+ <label>Status</label>
+ <select><option>Open</option><option>Snoozed until tomorrow</option><option>Closed — replied</option></select>
+ </div>
+ <div>
+ <label>Labels</label>
+ <span><span class="chip ch-press">PRESS</span> <span class="chip" style="background:var(--el);color:var(--muted)">IMPORTANT</span></span>
+ </div>
+ <div>
+ <label>Seen by</label>
+ <div class="seen-list">
+ <span class="seen-ava" style="background:var(--indigo)" title="Natalia · 3:21 PM">N</span>
+ <span class="seen-ava" style="background:var(--amber)" title="Cody · 3:24 PM">C</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="msg-thread">
+ <div class="msg-bubble">
+ <div class="mb-ava" style="background:var(--rose)">EW</div>
+ <div class="mb-body">
+ <div class="mb-head"><strong>Erica Werner</strong> · erica@washpost.com · 3:18 PM</div>
+ <div class="mb-content">
+ Hi Natalia — running a piece tomorrow on the new PSLF buyback guidance. Two questions if you have 20 min by 4pm ET:<br>
+ 1) Your read on whether borrowers between 100-120 of payment get a meaningful benefit, or whether the buyback math wipes it out.<br>
+ 2) Any data from SDCC on how many borrowers are in that 100-120 window?<br>
+ — Erica
+ </div>
+ </div>
+ </div>
+ <!-- Internal comment shown inline -->
+ <div class="msg-bubble">
+ <div class="mb-ava" style="background:var(--amber)">C</div>
+ <div class="mb-body">
+ <div class="mb-head"><strong>Cody Lin</strong> · internal note · 3:24 PM</div>
+ <div class="mb-content" style="background:rgba(255,186,51,0.08);color:#ffe5b3">
+ Numbers in the deck: 23% in the 100-120 window. Buyback math kills the gain above $87k AGI. Source: ED reg comment we filed in Q1.
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="reply-box">
+ <label>↩ REPLY TO ERICA</label>
+ <textarea>Hi Erica — happy to help. Quick call at 3:45pm ET; I'll text the number. On the data: our cohort of ~12k PSLF borrowers shows 23% in the 100-120 window. Buyback math wipes the gain for anyone above the income cap — known design flaw. — Natalia</textarea>
+ <div class="reply-actions">
+ <span style="font-size:11.5px;color:var(--muted)">Sending as Natalia · ✨ AI-drafted in 0.6s</span>
+ <button class="btn">Internal Note</button>
+ <button class="btn">Save Draft</button>
+ <button class="btn pri">Send ▸</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="convo">
+ <div class="conv-row">
+ <div class="lead-ava" style="background:var(--amber)">C<span class="dot"></span></div>
+ <div class="conv-body">
+ <div class="row1"><strong>Astra Taylor · Debt Collective</strong> · to info@<span class="when">2h ago</span></div>
+ <div class="subj">Reading the new ED memo together?</div>
+ <div class="prev">Want to do a joint statement if it lands the way we think it will.</div>
+ <div class="chips-row"><span class="chip ch-partner">PARTNERS</span><span class="chip ch-msgs">↩ 2 msgs</span></div>
+ </div>
+ <div class="conv-actions"><button class="qa-btn">↩</button><button class="qa-btn">⌛</button><button class="qa-btn">✓</button></div>
+ </div>
+
+ <div class="conv-row">
+ <div class="lead-ava unassigned">+</div>
+ <div class="conv-body">
+ <div class="row1"><strong>Marcus Huang</strong> · to info@<span class="when">Yesterday</span></div>
+ <div class="subj">Borrower story — graduated 2018, default at 27</div>
+ <div class="prev">Saw your work on PBS NewsHour. I'd like to share my story...</div>
+ <div class="chips-row"><span class="chip" style="background:rgba(124,132,255,0.15);color:var(--indigo)">STORIES</span><span class="chip ch-msgs" style="background:rgba(255,94,126,0.15);color:var(--rose)">unassigned</span></div>
+ </div>
+ <div class="conv-actions"><button class="qa-btn">↩</button><button class="qa-btn">⌛</button><button class="qa-btn">✓</button></div>
+ </div>
+ </div>
+ </div>
+
+</div>
+</body></html>
diff --git a/public/mockups/inbox/v6-hey-zero.html b/public/mockups/inbox/v6-hey-zero.html
new file mode 100644
index 0000000..2cb0444
--- /dev/null
+++ b/public/mockups/inbox/v6-hey-zero.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><title>v6 — Hey Zero-Distraction — Norma Inbox</title>
+<style>
+ :root { --bg:#faf8f3; --panel:#fff; --el:#f1ede4; --fg:#1b1814; --muted:#7a6e5a; --line:#e6dfd1; --accent:#c33; --gold:#b89060; --emerald:#3f7d59; }
+ * { box-sizing:border-box; }
+ body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 "Source Serif Pro", Georgia, "Iowan Old Style", serif; }
+ .nav { padding:18px 40px; display:flex; gap:30px; align-items:center; border-bottom:1px solid var(--line); }
+ .nav .brand { font-family:-apple-system,BlinkMacSystemFont,sans-serif; font-size:14px; font-weight:700; letter-spacing:-0.01em; }
+ .nav a { color:var(--muted); text-decoration:none; font-size:14px; padding:6px 0; border-bottom:2px solid transparent; }
+ .nav a.on { color:var(--fg); border-color:var(--accent); }
+ .nav .right { margin-left:auto; font-size:13px; color:var(--muted); font-family:-apple-system,sans-serif; }
+
+ .page { max-width:760px; margin:0 auto; padding:48px 40px 80px; }
+ h1.imbox { font-size:34px; font-weight:700; margin:0 0 6px; letter-spacing:-0.015em; }
+ .sub { color:var(--muted); font-size:15px; margin:0 0 36px; font-style:italic; }
+
+ .stream { }
+ .item { padding:18px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:background 0.15s; }
+ .item:hover { background:rgba(0,0,0,0.02); margin:0 -16px; padding-left:16px; padding-right:16px; }
+ .from { font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.3; margin-bottom:3px; }
+ .item.read .from { font-weight:500; color:var(--muted); }
+ .subj-line { font-size:15px; color:var(--fg); margin-bottom:3px; }
+ .item.read .subj-line { color:var(--muted); }
+ .meta { font-family:-apple-system,sans-serif; font-size:11.5px; color:var(--muted); margin-top:6px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
+ .meta .chip { padding:1px 9px; border-radius:999px; background:var(--el); color:var(--muted); font-weight:600; font-size:11px; letter-spacing:0.02em; }
+ .meta .chip-assign { background:rgba(184,144,96,0.12); color:var(--gold); }
+ .meta .chip-seen { background:rgba(63,125,89,0.1); color:var(--emerald); }
+ .meta .chip-new { background:var(--accent); color:#fff; }
+
+ /* Expanded inline */
+ .open { padding:30px 0; border-bottom:1px solid var(--line); }
+ .open.selected-outline { background:rgba(195,51,51,0.025); margin:0 -20px; padding-left:20px; padding-right:20px; border-left:3px solid var(--accent); }
+ .open h2 { margin:0 0 4px; font-size:24px; line-height:1.3; }
+ .open .meta-full { font-family:-apple-system,sans-serif; font-size:13px; color:var(--muted); margin:8px 0 0; }
+ .meta-grid { font-family:-apple-system,sans-serif; display:grid; grid-template-columns:80px 1fr; gap:6px 14px; font-size:13px; color:var(--muted); margin:18px 0 24px; }
+ .meta-grid strong { color:var(--fg); font-weight:500; }
+ select.assign { background:var(--panel); border:1px solid var(--line); color:var(--fg); font:13px -apple-system,sans-serif; padding:3px 10px; border-radius:6px; }
+ .seen-row { display:flex; flex-wrap:wrap; gap:6px; }
+ .seen-pill { font-size:12px; padding:2px 10px; border-radius:999px; background:rgba(63,125,89,0.1); color:var(--emerald); display:inline-flex; gap:5px; align-items:center; font-family:-apple-system,sans-serif; }
+ .body { font-size:17px; line-height:1.7; color:var(--fg); }
+ .body p { margin:0 0 14px; }
+ .reply-zone { margin-top:30px; padding-top:24px; border-top:1px dashed var(--line); }
+ .reply-zone label { font-family:-apple-system,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); font-weight:700; }
+ textarea { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; font:16px/1.65 inherit; resize:vertical; min-height:120px; color:var(--fg); margin-top:8px; }
+ .reply-actions { display:flex; gap:8px; margin-top:14px; align-items:center; }
+ .btn { font-family:-apple-system,sans-serif; font:13px inherit; padding:7px 16px; border-radius:6px; border:1px solid var(--line); background:var(--panel); color:var(--fg); cursor:pointer; font-weight:600; }
+ .btn.pri { background:var(--accent); color:#fff; border-color:var(--accent); margin-left:auto; }
+ .stack-name { font-family:-apple-system,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); font-weight:700; margin:36px 0 14px; }
+</style>
+</head><body>
+
+<div class="nav">
+ <span class="brand">Norma</span>
+ <a href="#" class="on">Imbox</a>
+ <a href="#">The Feed</a>
+ <a href="#">Paper Trail</a>
+ <a href="#">Reply Later <span style="background:var(--accent);color:#fff;padding:1px 7px;border-radius:999px;font-size:11px;margin-left:4px">2</span></a>
+ <a href="#">Set Aside</a>
+ <span class="right">natalia@studentdebtcrisis.org</span>
+</div>
+
+<div class="page">
+ <h1 class="imbox">Imbox.</h1>
+ <p class="sub">The few messages that matter today. Everything else is in The Feed or Paper Trail.</p>
+
+ <div class="stream">
+
+ <div class="item">
+ <div class="from">Sen. Bernie Sanders Office</div>
+ <div class="subj-line">RE: Markup tomorrow — borrower bill</div>
+ <div class="meta">
+ <span class="chip chip-new">New</span>
+ <span class="chip chip-assign">For Natalia</span>
+ <span>14 minutes ago · 1 reply</span>
+ </div>
+ </div>
+
+ <!-- Inline expanded item -->
+ <div class="open selected-outline">
+ <div style="font-family:-apple-system,sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);font-weight:700;margin-bottom:8px">↓ Reading</div>
+ <h2>Quote request — Dept of Ed PSLF guidance</h2>
+ <div class="meta-full">From <strong style="color:var(--fg)">Erica Werner</strong> at the Washington Post · 3:18 PM · 42 minutes ago</div>
+
+ <div class="meta-grid">
+ <span>Owner</span>
+ <span><select class="assign"><option>Natalia (admin)</option><option>Cody (staff)</option><option>Jess (intern)</option><option>— Unassigned —</option></select></span>
+ <span>Seen by</span>
+ <span class="seen-row">
+ <span class="seen-pill">✓ Natalia · 3:21 PM</span>
+ <span class="seen-pill">✓ Cody · 3:24 PM</span>
+ </span>
+ <span>Labels</span>
+ <span><span class="chip" style="background:rgba(195,51,51,0.1);color:var(--accent)">Press</span> <span class="chip" style="margin-left:6px">Important</span></span>
+ </div>
+
+ <div class="body">
+ <p>Hi Natalia,</p>
+ <p>Running a piece tomorrow on the new PSLF buyback guidance that came out this morning. Two questions if you have 20 min by 4pm ET:</p>
+ <p>1) Your read on whether borrowers between months 100-120 of payment actually get a meaningful benefit, or whether the buyback math wipes it out.</p>
+ <p>2) Any data points from SDCC on how many borrowers are caught in this 100-120 window?</p>
+ <p>Happy to do email if a call doesn't work. Thanks!<br>—Erica</p>
+ </div>
+
+ <div class="reply-zone">
+ <label>↩ REPLY — AI suggestion in your voice</label>
+ <textarea>Hi Erica — happy to help. I can do a quick call at 3:45pm ET; I'll text you a number. On the data: our cohort of ~12k PSLF borrowers shows 23% are in the 100-120 window. Buyback math wipes the gain for anyone above the income cap — known design flaw. — Natalia</textarea>
+ <div class="reply-actions">
+ <span style="color:var(--muted);font-size:12px;font-family:-apple-system,sans-serif">Tone: <strong style="color:var(--fg)">warm-professional</strong> · ✨ AI-drafted</span>
+ <button class="btn">Reply Later</button>
+ <button class="btn">Save Draft</button>
+ <button class="btn pri">Send Reply ▸</button>
+ </div>
+ </div>
+ </div>
+
+ <div class="item read">
+ <div class="from">Astra Taylor</div>
+ <div class="subj-line">Reading the new ED memo together?</div>
+ <div class="meta"><span class="chip chip-assign">For Cody</span><span class="chip chip-seen">Seen by Cody</span><span>2 hours ago</span></div>
+ </div>
+
+ </div>
+
+ <div class="stack-name">Reply Later (2)</div>
+ <div class="stream">
+ <div class="item read">
+ <div class="from">Marcus Huang</div>
+ <div class="subj-line">Borrower story — graduated 2018, default at 27</div>
+ <div class="meta"><span class="chip">Stories</span><span>Yesterday</span></div>
+ </div>
+ </div>
+
+ <div class="stack-name">Set Aside (4)</div>
+ <div class="stream">
+ <div class="item read">
+ <div class="from">Rep. Pramila Jayapal Office</div>
+ <div class="subj-line">Following up — joint statement on PSLF</div>
+ <div class="meta"><span class="chip">Policy</span><span class="chip chip-assign">For Natalia</span><span>3 days ago</span></div>
+ </div>
+ </div>
+
+</div>
+</body></html>
← d433048 feat(modals): shared ResizableModal with full-screen toggle
·
back to Norma
·
session 2026-05-20: log roles/perms/modals + infra fires + 4 b163e4d →