diff --git a/CLAUDE.md b/CLAUDE.md
index 38ffbfb..31ab7f4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -14,10 +14,10 @@ npm run preview
 
 There are no tests and no test runner in this project.
 
-`npm run lint` currently reports 12 pre-existing errors — 8 `react-hooks/refs`, 3
-`react-hooks/set-state-in-effect`, 1 `react-refresh/only-export-components` (the provider
-file exports both a component and a hook). A clean run is not the baseline; compare against
-this count rather than against zero.
+`npm run lint` currently reports 14 pre-existing errors — 8 `react-hooks/refs`, 3
+`react-hooks/set-state-in-effect`, 3 `react-refresh/only-export-components` (the provider
+and portfolio files export both a component and hooks). A clean run is not the baseline;
+compare against this count rather than against zero.
 
 Local dev reads `VITE_ZINO_API_URL` from `.env` (`https://dev.getzino.in`). A deployed
 build does **not** — see "Runtime config" below.
@@ -50,12 +50,33 @@ Workflow config is seeded outside this repo, from `sm2/custom-apps/zurich-kotak/
 - `src/api/errors.js` — `describeError()` turns the gateway's five error shapes into a
   sentence plus a `kind` the caller branches on (`stale` re-fetches, `gone` returns to the
   list).
-- `src/layout/Shell.jsx` — header + the sidebar, grouped by `NAV_GROUPS` (who is holding
-  the lead) rather than by pipeline position, with queue counts from one tallied list call.
+- `src/layout/Shell.jsx` — 56px header (brand, `GlobalSearch`, `UserMenu`) + the sidebar,
+  grouped by `NAV_GROUPS` (who is holding the lead) rather than by pipeline position, with
+  queue counts from one tallied list call and the AI roster at its foot.
+- `src/layout/GlobalSearch.jsx` — finds a lead from anywhere. Filters the rows
+  `PortfolioProvider` already holds (name, business, ref, mobile, registration) — no request
+  of its own. `/` focuses it.
+- `src/api/display.js` — read-side labels only: `roleLabel`, `humanize` (snake_case tokens →
+  English; names, refs, emails pass through untouched), `initials`/`toneFor` for customer
+  avatars, money and date formatters, `findingOf`/`leadIn`/`mdRuns` for AI prose. Nothing in
+  here changes a value that is SENT anywhere.
+- `src/components/Icon.jsx` — the one monoline icon set. Use the NAME, never a path.
+- `src/index.css` — the tokens plus the shared primitives every screen builds from:
+  `.card`, `.pill`, `.btn`, `.avatar`, `.live`, `.h-sec`/`.h-sub`. Screen stylesheets style
+  content; these style containers. Page ground is `--zk-ground`, bounded regions are white
+  cards.
 - `src/screens/Pipeline.jsx` — a queue: one record view filtered server-side on
-  `current_state_name`.
-- `src/screens/Lead.jsx` — one lead: detail view, allowed activities, timeline, then
-  field groups (`GROUPS`, in the order the lead is worked).
+  `current_state_name`. The filter bar (search, product, channel, expiry band, stalled,
+  hide closed) and the column sort narrow the PAGE that came back, client-side; they never
+  change the request.
+- `src/screens/Lead.jsx` — one lead: header (avatar, chips, Your move / whose move), a
+  metrics card with the `StageRail` inside it, the status strip, Next step, the timeline
+  (newest first by default, toggle to read as a story), and a sticky reference rail: the AI
+  team with per-agent step counts, then At a glance. The full record is `LeadFileDialog`
+  (`GROUPS`, in the order the lead is worked).
+- `src/pages/Login.jsx` — sign-in plus a demo persona picker (the README accounts for org
+  84). Picking one fills the EMAIL only and focuses the password box — no credential lives
+  in the bundle. What the persona may do is still the workflow's decision.
 - `src/screens/AddLead.jsx` — the INIT doors from `ENTRY`; skips the chooser when only
   one is surfaced.
 - `src/components/ActivityForm.jsx` — renders the **live** activity schema and submits it
diff --git a/src/api/display.js b/src/api/display.js
new file mode 100644
index 0000000..00fd05a
--- /dev/null
+++ b/src/api/display.js
@@ -0,0 +1,214 @@
+/**
+ * How raw workflow values read on screen.
+ *
+ * The platform stores roles and enums as snake_case tokens — `sme_underwriter`,
+ * `verbal_call`, `due_now` — and the console was printing them as-is in the
+ * header chip, the lead file and the trail. Nothing here changes a value that
+ * is SENT anywhere; these are read-side labels only. A token missing from the
+ * maps still reads as English through `humanize`, so a value added to the
+ * workflow tomorrow does not come back as a slug.
+ */
+
+export const ROLE_LABELS = {
+  ops_admin: 'Operations',
+  partner_agent: 'Partner agent',
+  bank_rm: 'Bancassurance RM',
+  csr_direct: 'Direct sales',
+  sme_underwriter: 'SME underwriter',
+  ai_intake: 'Intake AI',
+  ai_engage: 'Engage AI',
+  ai_advisor: 'Advisor AI',
+  ai_kyc: 'KYC AI',
+  ai_uw_referral: 'Referral AI',
+}
+
+export function roleLabel(role) {
+  if (!role) return ''
+  return ROLE_LABELS[role] ?? humanize(role)
+}
+
+/** Enum values the workflow writes, in the words a person would use. */
+const VALUE_LABELS = {
+  // channels & lines
+  direct: 'Direct',
+  bancassurance: 'Bancassurance',
+  agency: 'Agency',
+  motor: 'Motor',
+  sme_package: 'SME Package',
+  // consent / contact
+  verbal_call: 'Verbal, on the call',
+  written: 'Written',
+  whatsapp: 'WhatsApp',
+  email: 'Email',
+  connected: 'Connected',
+  no_answer: 'No answer',
+  callback: 'Callback requested',
+  not_interested: 'Not interested',
+  wrong_number: 'Wrong number',
+  due_now: 'Due now',
+  too_early: 'Too early',
+  lapsed: 'Lapsed',
+  // documents / outcomes
+  complete: 'Complete',
+  partial: 'Partial',
+  pending: 'Pending',
+  received: 'Received',
+  proceed: 'Proceed',
+  clear: 'Clear',
+  cleared: 'Cleared',
+  refer: 'Refer',
+  referred: 'Referred',
+  decline: 'Decline',
+  declined: 'Declined',
+  accepted: 'Accepted',
+  rejected: 'Rejected',
+  paid: 'Paid',
+  unpaid: 'Unpaid',
+  issued: 'Issued',
+  yes: 'Yes',
+  no: 'No',
+  // vehicle
+  petrol: 'Petrol',
+  diesel: 'Diesel',
+  cng: 'CNG',
+  electric: 'Electric',
+  hybrid: 'Hybrid',
+  // kyc
+  ckyc: 'CKYC',
+  okyc: 'Aadhaar OTP',
+  vkyc: 'Video KYC',
+  match: 'Match',
+  mismatch: 'Mismatch',
+}
+
+/** Words that keep their case when a slug is spelt out. */
+const KEEP = {
+  pan: 'PAN', gstin: 'GSTIN', gst: 'GST', kyc: 'KYC', ai: 'AI', sme: 'SME',
+  uw: 'UW', od: 'OD', tp: 'TP', idv: 'IDV', ncb: 'NCB', rm: 'RM', posp: 'POSP',
+  rc: 'RC', otp: 'OTP', id: 'ID', bi: 'BI', ee: 'EE', wip: 'WIP', amc: 'AMC',
+  irdai: 'IRDAI', msme: 'MSME', rsa: 'RSA', pa: 'PA', cpa: 'CPA', ckyc: 'CKYC', sms: 'SMS',
+}
+
+/** Looks like a stored token rather than free text: lowercase words joined by
+ *  underscores, nothing else. Names, references, emails and numbers all fail
+ *  this test and pass through untouched. */
+const TOKEN = /^[a-z][a-z0-9]*(?:_[a-z0-9]+)*$/
+
+export function isToken(v) {
+  return typeof v === 'string' && v.length <= 40 && TOKEN.test(v)
+}
+
+/**
+ * A snake_case token as English. Anything that is not a token — a name, an
+ * email, a registration number, a sentence — comes back exactly as given.
+ */
+export function humanize(v) {
+  if (!isToken(v)) return v
+  if (VALUE_LABELS[v]) return VALUE_LABELS[v]
+  const words = v.split('_').map((w) => KEEP[w] ?? w)
+  const s = words.join(' ')
+  return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+/** Initials for a customer or a person, two letters at most. */
+export function initials(name) {
+  const parts = String(name || '').trim().split(/\s+/).filter(Boolean)
+  if (!parts.length) return '·'
+  const a = parts[0][0] || ''
+  const b = parts.length > 1 ? parts[parts.length - 1][0] : (parts[0][1] || '')
+  return (a + b).toUpperCase()
+}
+
+/** A stable tone for a name, so the same customer wears the same colour on
+ *  every screen. Six hues, all readable with white text. */
+const TONES = ['blue', 'teal', 'violet', 'amber', 'plum', 'slate']
+export function toneFor(name) {
+  const s = String(name || '')
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0
+  return TONES[h % TONES.length]
+}
+
+/** Indian money, short. */
+export function inrShort(v) {
+  const n = Number(v)
+  if (!Number.isFinite(n) || !n) return null
+  if (n >= 1e7) return '₹' + (n / 1e7).toFixed(n >= 1e8 ? 0 : 2) + ' Cr'
+  if (n >= 1e5) return '₹' + (n / 1e5).toFixed(n >= 1e6 ? 0 : 2) + ' L'
+  return '₹' + Math.round(n).toLocaleString('en-IN')
+}
+
+/** Indian money, in full. */
+export function inrFull(v) {
+  const n = Number(v)
+  if (!Number.isFinite(n)) return null
+  return '₹' + n.toLocaleString('en-IN')
+}
+
+/** dd Mon yyyy, the way an Indian insurer writes a date. */
+export function dateLong(v) {
+  if (!v) return ''
+  const d = new Date(String(v).length === 10 ? String(v) + 'T00:00:00' : v)
+  if (isNaN(d)) return String(v)
+  return d.toLocaleDateString('en-IN', { day: 'numeric', month: 'short', year: 'numeric' })
+}
+
+/** How long ago, short. */
+export function ago(ts) {
+  if (!ts) return ''
+  const d = new Date(ts)
+  if (isNaN(d)) return ''
+  const mins = Math.round((Date.now() - d.getTime()) / 60000)
+  if (mins < 1) return 'just now'
+  if (mins < 60) return mins + 'm ago'
+  if (mins < 1440) return Math.round(mins / 60) + 'h ago'
+  return Math.round(mins / 1440) + 'd ago'
+}
+
+/**
+ * The first sentence of an AI paragraph — the employees write the conclusion
+ * first, so this IS the finding. Null when the split would be useless.
+ */
+export function findingOf(text) {
+  const m = String(text).match(/^(.{24,200}?[^\d\s][.!?])(\s|$)/)
+  return m ? m[1].trim() : null
+}
+
+/**
+ * The first ~180 characters as a finding when no clean first sentence exists,
+ * cut at a word so it never ends mid-token.
+ */
+export function leadIn(text, max = 180) {
+  const t = String(text || '').replace(/\s+/g, ' ').trim()
+  if (t.length <= max) return t
+  const cut = t.slice(0, max)
+  return cut.slice(0, Math.max(cut.lastIndexOf(' '), 100)) + '…'
+}
+
+/**
+ * The employees write light markdown — **bold** and list markers. Rendered as
+ * plain runs with the bold kept, so a paragraph never shows its asterisks.
+ */
+export function mdRuns(text) {
+  const t = String(text || '')
+  const out = []
+  const re = /\*\*(.+?)\*\*/g
+  let last = 0, m
+  while ((m = re.exec(t))) {
+    if (m.index > last) out.push({ b: false, t: t.slice(last, m.index) })
+    out.push({ b: true, t: m[1] })
+    last = m.index + m[0].length
+  }
+  if (last < t.length) out.push({ b: false, t: t.slice(last) })
+  return out
+}
+
+/** The icon each queue kind wears in the sidebar and on the overview. */
+export const KIND_ICON = {
+  needs: 'inbox',
+  customer: 'chat',
+  auto: 'bot',
+  waiting: 'clock',
+  end: 'archive',
+  all: 'list',
+}
diff --git a/src/components/ActivityForm.css b/src/components/ActivityForm.css
index 4d38e37..507826c 100644
--- a/src/components/ActivityForm.css
+++ b/src/components/ActivityForm.css
@@ -28,32 +28,37 @@
 .af__field > span {
   font-size: var(--fs-2xs);
   font-weight: 500;
-  letter-spacing: 0.03em;
-  color: var(--zk-muted);
+  color: var(--zk-ink);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
 .af__req {
   font-style: normal;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--zk-blue);
-  background: var(--zk-tint-blue);
-  padding: 2px 7px;
-  border-radius: var(--r-pill);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--zk-danger);
+  margin-left: -4px;
 }
 
+.af__legend {
+  margin: -8px 0 0;
+  font-size: var(--fs-2xs);
+  color: var(--zk-grey);
+}
+.af__legend .af__req { margin: 0 3px 0 0; font-size: var(--fs-xs); }
+
+.af__hint { font-size: 11.5px; color: var(--zk-muted); margin-top: -2px; }
+
 .af input,
 .af select,
 .af textarea {
   font: inherit;
   font-size: var(--fs-xs);
   padding: 10px 12px;
-  border-radius: var(--r-md);
+  border-radius: var(--r-sm);
   border: 1px solid var(--zk-line);
   background: var(--zk-white);
   color: var(--zk-ink);
@@ -117,7 +122,7 @@
 }
 
 .af__chip.is-on {
-  background: var(--grad-blue);
+  background: var(--zk-blue);
   border-color: var(--zk-blue);
   color: var(--zk-white);
   box-shadow: var(--sh-xs);
@@ -136,17 +141,17 @@
   font-size: var(--fs-xs);
   font-weight: 500;
   padding: 10px 26px;
-  border-radius: var(--r-md);
+  border-radius: var(--r-sm);
   cursor: pointer;
   border: 0;
-  background: var(--grad-blue);
+  background: var(--zk-blue);
   color: var(--zk-white);
   box-shadow: var(--sh-sm);
   transition: background var(--t), box-shadow var(--t), transform var(--t-fast), opacity var(--t-fast);
 }
 
 .af__submit:hover:not(:disabled) {
-  background: var(--grad-blue-hover);
+  background: var(--zk-blue-dark);
   box-shadow: var(--sh-md);
   transform: translateY(-1px);
 }
@@ -166,7 +171,7 @@
   font: inherit;
   font-size: var(--fs-xs);
   padding: 10px 20px;
-  border-radius: var(--r-md);
+  border-radius: var(--r-sm);
   cursor: pointer;
   border: 1px solid var(--zk-line);
   background: var(--zk-white);
@@ -211,7 +216,7 @@
 .af__auto {
   font-size: var(--fs-xs);
   padding: 10px 12px;
-  border-radius: var(--r-md);
+  border-radius: var(--r-sm);
   min-height: 41px;
   border: 1px dashed var(--zk-line);
   background: var(--zk-tint);
diff --git a/src/components/ActivityForm.jsx b/src/components/ActivityForm.jsx
index 8e564b3..5e465e5 100644
--- a/src/components/ActivityForm.jsx
+++ b/src/components/ActivityForm.jsx
@@ -3,6 +3,7 @@ import { useZino } from '../api/provider.jsx'
 import { baseFieldId, fieldApplies, fieldIsStamped } from '../api/config.js'
 import { describeError, describeValidation } from '../api/errors.js'
 import FileField from './FileField.jsx'
+import { dateLong } from '../api/display.js'
 import './ActivityForm.css'
 
 /**
@@ -288,7 +289,7 @@ export default function ActivityForm({ activityUid, instanceId, lead, onDone, on
                 + (f.data_type === 'longtext' ? ' af__field--wide' : '')
                 + (missing.includes(f.id) ? ' is-missing' : '')}
             >
-              <span>{f.name}{f.mandatory ? <em className="af__req">required</em> : null}</span>
+              <span>{f.name}{f.mandatory ? <em className="af__req" title="Required" aria-label="required">*</em> : null}</span>
 
               {f.data_type === 'file' || f.data_type === 'ocr' ? (
                 <FileField
@@ -303,7 +304,7 @@ export default function ActivityForm({ activityUid, instanceId, lead, onDone, on
                 </div>
               ) : f.data_type === 'select' ? (
                 <select value={v} onChange={(e) => set(f.id, e.target.value)}>
-                  <option value="">—</option>
+                  <option value="">Select…</option>
                   {opts.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
                 </select>
               ) : f.data_type === 'multiselect' ? (
@@ -318,6 +319,13 @@ export default function ActivityForm({ activityUid, instanceId, lead, onDone, on
                 </div>
               ) : f.data_type === 'longtext' ? (
                 <textarea rows={3} value={v} onChange={(e) => set(f.id, e.target.value)} />
+              ) : f.data_type === 'date' ? (
+                <>
+                  <input type="date" value={v} onChange={(e) => set(f.id, e.target.value)} />
+                  {/* The native picker shows the browser's locale order; the
+                      hint says the date the way an Indian insurer writes it. */}
+                  {v ? <small className="af__hint">{dateLong(v)}</small> : null}
+                </>
               ) : (
                 <input
                   type={INPUT_TYPES[f.data_type] ?? 'text'}
@@ -329,6 +337,10 @@ export default function ActivityForm({ activityUid, instanceId, lead, onDone, on
         })}
       </div>
 
+      {fields.some((f) => f.mandatory && f.data_type !== 'id_gen') ? (
+        <p className="af__legend"><em className="af__req">*</em> required</p>
+      ) : null}
+
       {/* The form's own complaint, before anything is sent. */}
       {missing.length ? (
         <div className="af__err af__err--soft" role="alert">
diff --git a/src/components/AgentChip.css b/src/components/AgentChip.css
index ed5002e..14515b5 100644
--- a/src/components/AgentChip.css
+++ b/src/components/AgentChip.css
@@ -1,33 +1,33 @@
-.who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
 
 .who__disc {
   position: relative;
   display: grid;
   place-items: center;
   flex: none;
-  width: 20px;
-  height: 20px;
+  width: 22px;
+  height: 22px;
   border-radius: 50%;
-  font-size: var(--fs-2xs);
-  font-weight: 600;
+  font-size: 10px;
+  font-weight: var(--fw-semi);
   letter-spacing: 0.02em;
   color: #fff;
   user-select: none;
 }
 
-.who--md .who__disc { width: 26px; height: 26px; font-size: var(--fs-2xs); }
+.who--md .who__disc { width: 30px; height: 30px; font-size: 11.5px; }
 
 .who__name {
   font-size: var(--fs-2xs);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   color: var(--zk-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* Five agents, five hues, all readable on white at 20px and all distinguishable
-   from the Zurich blue the interface already uses for its own chrome. */
+/* Five agents, five hues, all readable on white and all distinguishable
+   from the Zurich blue the interface uses for its own chrome. */
 .who__disc--blue   { background: #2167ae; }
 .who__disc--teal   { background: #0f7b78; }
 .who__disc--violet { background: #5b4bb7; }
@@ -41,13 +41,16 @@
   cursor: pointer;
   padding: 2px 8px 2px 2px;
   border: 1px solid transparent;
-  border-radius: var(--r-pill, 999px);
+  border-radius: var(--r-pill);
   background: transparent;
-  transition: background .12s, border-color .12s;
+  transition: background .12s, border-color .12s, transform .12s;
 }
-.who--btn:hover { background: var(--zk-tint); border-color: var(--zk-line); }
+.who--btn:hover { background: var(--zk-hover); border-color: var(--zk-card-line); }
 .who--btn:hover .who__i { opacity: 1; }
 .who--btn:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
+/* A name-less chip is a bare disc; give it a hover lift instead of a border. */
+.who--btn:not(:has(.who__name)) { padding: 2px; }
+.who--btn:not(:has(.who__name)):hover { background: transparent; border-color: transparent; transform: translateY(-1px); }
 
 .who__i {
   width: 12px;
@@ -57,11 +60,9 @@
   opacity: 0;
   transition: opacity .12s;
 }
+.who--btn:not(:has(.who__name)) .who__i { display: none; }
 
-/* The AI mark, on the disc rather than beside the name: it has to survive
-   showName={false}, and it belongs to the worker, not to the label. Sits
-   proud of the disc so it stays legible against every one of the five hues,
-   with a white ring to separate it from the colour underneath. */
+/* The AI mark, on the disc rather than beside the name. */
 .who__ai {
   position: absolute;
   right: -3px;
@@ -69,12 +70,11 @@
   width: 11px;
   height: 11px;
   fill: var(--zk-amber, #b5761f);
-  stroke: var(--zk-white, #fff);
+  stroke: var(--zk-card, #fff);
   stroke-width: 0.9;
   stroke-linejoin: round;
   paint-order: stroke fill;
 }
-
 .who--md .who__ai { width: 13px; height: 13px; right: -3px; bottom: -3px; }
 
 /* Said out loud for a screen reader, which cannot see a sparkle. */
@@ -90,7 +90,6 @@
   border: 0;
 }
 
-/* Role icon fills most of the disc, leaving room for the AI spark at the
-   corner. Sized off the disc so it scales with .who--md. */
+/* Role icon fills most of the disc, leaving room for the AI spark. */
 .who__glyph { width: 60%; height: 60%; }
-.who--md .who__glyph { width: 58%; height: 58%; }
+.who--md .who__glyph { width: 56%; height: 56%; }
diff --git a/src/components/CallTranscript.jsx b/src/components/CallTranscript.jsx
index 14634fe..14aa557 100644
--- a/src/components/CallTranscript.jsx
+++ b/src/components/CallTranscript.jsx
@@ -96,9 +96,8 @@ export default function CallTranscript({ text, name, onClose }) {
         </div>
 
         <p className="conv__note">
-          Recorded by the voice agent as the call happened. This is what was said —
-          the call notes in the trail are Engage&apos;s reading of it, which is a
-          different thing.
+          Recorded by the voice agent as the call happened. The call notes in the trail
+          are Engage&apos;s summary of this.
         </p>
       </div>
     </div>
diff --git a/src/components/ChainOfThought.css b/src/components/ChainOfThought.css
index 7a30fe4..3d702cc 100644
--- a/src/components/ChainOfThought.css
+++ b/src/components/ChainOfThought.css
@@ -1,59 +1,102 @@
-.cot { margin-top: var(--sp-2); }
-
-/* The finding, always visible — the one sentence that answers "what did it
-   conclude" without opening anything. */
+/* The finding, when this component is asked to show it. */
 .cot__finding {
   margin: 0 0 var(--sp-2);
   font-size: var(--fs-sm);
   line-height: var(--lh-normal);
-  font-weight: var(--fw-medium);
   color: var(--zk-ink);
 }
 
+/* Default toggle look, for anywhere the Timeline's footer row is not
+   restyling it. */
 .cot__toggle {
   display: inline-flex;
   align-items: center;
-  gap: var(--sp-2);
-  padding: var(--sp-1) 0;
+  gap: 6px;
+  padding: 4px 0;
   border: 0;
   background: none;
   cursor: pointer;
   font: inherit;
   font-size: var(--fs-2xs);
-  font-weight: var(--fw-semi);
+  font-weight: var(--fw-medium);
   color: var(--zk-blue-dark);
 }
-.cot__brain { width: 15px; height: 15px; flex: none; }
-.cot__ct { color: var(--zk-grey); font-weight: var(--fw-normal); }
-.cot__caret { width: 11px; height: 11px; transition: transform .18s var(--ease); }
-.cot__caret.is-open { transform: rotate(90deg); }
+.cot__brain { flex: none; }
+.cot__ct {
+  font-size: 11px;
+  font-weight: var(--fw-semi);
+  font-variant-numeric: tabular-nums;
+  padding: 0 6px;
+  border-radius: var(--r-pill);
+  background: var(--zk-line-soft);
+  color: var(--zk-muted);
+}
+.cot__toggle.is-open .cot__ct { background: var(--zk-blue-light); color: var(--zk-navy); }
+.cot__caret { transition: transform .18s var(--ease); }
+.cot__caret.is-open { transform: rotate(180deg); }
 
+/* The chain itself: a rail of rungs. */
 .cot__steps {
   list-style: none;
-  margin: var(--sp-3) 0 0;
-  padding: var(--sp-3) 0 var(--sp-2);
-  border-left: 2px solid var(--zk-blue-light);
-  padding-left: var(--sp-4);
+  margin: 4px 0 0;
+  padding: 12px 16px 10px 18px;
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-sm);
+  background: var(--zk-card);
 }
 
-.cot__step { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: var(--sp-3); padding: var(--sp-2) 0; }
-.cot__step::before {
-  content: ""; position: absolute; left: calc(var(--sp-4) * -1 - 6px); top: 9px;
-  width: 9px; height: 9px; border-radius: 50%; background: var(--zk-white); border: 2px solid var(--zk-blue);
+.cot__step {
+  position: relative;
+  display: grid;
+  grid-template-columns: 96px minmax(0, 1fr);
+  gap: var(--sp-3);
+  padding: 6px 0 6px 18px;
 }
+.cot__step::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 11px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--zk-card);
+  border: 2px solid var(--zk-blue-light);
+}
+.cot__step::after {
+  content: '';
+  position: absolute;
+  left: 5.5px;
+  top: 22px;
+  bottom: -6px;
+  width: 2px;
+  background: var(--zk-line-soft);
+}
+.cot__step:last-child::after { display: none; }
+.cot__step--decided::before { background: var(--zk-blue); border-color: var(--zk-blue); }
 
 .cot__mark {
-  font-size: var(--fs-3xs);
+  font-size: 11px;
   font-weight: var(--fw-semi);
-  letter-spacing: .06em;
+  letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--zk-blue-dark);
-  padding-top: 1px;
+  padding-top: 2px;
 }
 
-.cot__b { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--zk-muted); overflow-wrap: anywhere; }
+.cot__b { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--zk-muted); overflow-wrap: anywhere; white-space: pre-wrap; }
 .cot__b b { color: var(--zk-ink); font-weight: var(--fw-semi); }
 
-.cot__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
-.cot__conf { font-size: 11.5px; font-weight: var(--fw-semi); color: var(--zk-blue-dark); background: var(--zk-tint-blue); border: 1px solid var(--zk-blue-light); padding: 1px 9px; border-radius: var(--r-pill); }
+.cot__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
+.cot__conf {
+  font-size: 11.5px;
+  font-weight: var(--fw-semi);
+  color: var(--zk-blue-dark);
+  background: var(--zk-tint-blue);
+  padding: 1px 9px;
+  border-radius: var(--r-pill);
+}
 
+@media (max-width: 720px) {
+  .cot__step { grid-template-columns: 1fr; gap: 2px; }
+}
diff --git a/src/components/ChainOfThought.jsx b/src/components/ChainOfThought.jsx
index e2c15b9..1f502b9 100644
--- a/src/components/ChainOfThought.jsx
+++ b/src/components/ChainOfThought.jsx
@@ -1,4 +1,6 @@
 import { useState } from 'react'
+import Icon from './Icon.jsx'
+import { findingOf, mdRuns } from '../api/display.js'
 import './ChainOfThought.css'
 
 /**
@@ -6,28 +8,17 @@ import './ChainOfThought.css'
  *
  * This is the trust surface. A person signing off on — or overriding — a
  * machine's decision needs the answer to one question first: WHY did it do
- * that. Before this, the reasoning existed (the employees write it as workflow
- * fields, so it is already in the audit trail) but the console showed only the
- * conclusion. An operator either trusted it blind or went digging. Neither is
- * oversight.
- *
- * The chain reads the way the employee's own record reads: what it REASONED and
- * what it DECIDED. It is assembled from real fields already on the step — the
- * employee's own words for the reasoning, the activity it committed and the
- * state it moved the lead to for the decision — never narrated after the fact.
- * A step may carry more than one reasoning field (attribution AND eligibility,
- * say); each is its own rung.
+ * that. The chain reads the way the employee's own record reads: what it
+ * REASONED and what it DECIDED, assembled from real fields already on the step
+ * — never narrated after the fact. A step may carry more than one reasoning
+ * field (attribution AND eligibility, say); each is its own rung.
  *
  * The finding — the first sentence, since the employees write the conclusion
- * first — is lifted out and stays visible, so the "why" can be read without
- * opening the chain.
+ * first — is lifted out so the "why" can be read without opening the chain.
+ * The Timeline renders that finding itself and passes `showFinding={false}`,
+ * so the toggle can sit in the entry's footer row beside its neighbours.
  */
-function findingOf(text) {
-  const m = String(text).match(/^(.{24,200}?[.!?])(\s|$)/)
-  return m ? m[1].trim() : null
-}
-
-export default function ChainOfThought({ reasoning, decided, confidence }) {
+export default function ChainOfThought({ reasoning, decided, confidence, showFinding = true }) {
   const [open, setOpen] = useState(false)
 
   const primary = reasoning.length ? reasoning[0][1] : ''
@@ -36,25 +27,19 @@ export default function ChainOfThought({ reasoning, decided, confidence }) {
   const steps = reasoning.length + 1 // each reasoning rung, plus Decided
 
   return (
-    <div className="cot">
-      {finding ? <p className="cot__finding">{finding}</p> : null}
+    <>
+      {showFinding && finding ? <p className="cot__finding">{finding}</p> : null}
 
       <button
         type="button"
-        className="cot__toggle"
+        className={'cot__toggle' + (open ? ' is-open' : '')}
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
       >
-        <svg className="cot__brain" viewBox="0 0 16 16" aria-hidden="true">
-          <path d="M6 2.5a2 2 0 0 0-2 2 2 2 0 0 0-1 3.7A2 2 0 0 0 4 11.5a2 2 0 0 0 2 2M10 2.5a2 2 0 0 1 2 2 2 2 0 0 1 1 3.7 2 2 0 0 1-1 3.3 2 2 0 0 1-2 2M8 3v10"
-                fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-        </svg>
+        <Icon name="brain" size={14} className="cot__brain" />
         Chain of thought
-        <span className="cot__ct">· {steps} step{steps === 1 ? '' : 's'}</span>
-        <svg className={'cot__caret' + (open ? ' is-open' : '')} viewBox="0 0 12 12" aria-hidden="true">
-          <path d="M4 2.5 8 6l-4 3.5" fill="none" stroke="currentColor" strokeWidth="1.6"
-                strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
+        <span className="cot__ct">{steps}</span>
+        <Icon name="chevronDown" size={12} className={'cot__caret' + (open ? ' is-open' : '')} />
       </button>
 
       {open ? (
@@ -62,11 +47,13 @@ export default function ChainOfThought({ reasoning, decided, confidence }) {
           {reasoning.map(([label, text], i) => (
             <li className="cot__step" key={label}>
               <span className="cot__mark">{i === 0 ? 'Reasoned' : label}</span>
-              <div className="cot__b">{text}</div>
+              <div className="cot__b">
+                {mdRuns(text).map((r, j) => (r.b ? <b key={j}>{r.t}</b> : <span key={j}>{r.t}</span>))}
+              </div>
             </li>
           ))}
 
-          <li className="cot__step">
+          <li className="cot__step cot__step--decided">
             <span className="cot__mark">Decided</span>
             <div className="cot__b">
               <b>{decided.what}</b>
@@ -82,6 +69,6 @@ export default function ChainOfThought({ reasoning, decided, confidence }) {
           </li>
         </ol>
       ) : null}
-    </div>
+    </>
   )
 }
diff --git a/src/components/ClampText.css b/src/components/ClampText.css
index 6dd1050..9035b84 100644
--- a/src/components/ClampText.css
+++ b/src/components/ClampText.css
@@ -96,8 +96,8 @@
   max-height: min(76vh, 720px);
   display: flex;
   flex-direction: column;
-  background: var(--zk-white);
-  border-radius: var(--r-lg);
+  background: var(--zk-card);
+  border-radius: var(--r-card);
   box-shadow: 0 24px 60px -12px rgba(23, 31, 40, 0.3);
   outline: none;
   animation: zk-rise 0.18s var(--ease) both;
@@ -114,8 +114,9 @@
 
 .prose__head h3 {
   margin: 0;
-  font-size: var(--fs-sm);
-  font-weight: 500;
+  font-size: var(--fs-md);
+  font-weight: 600;
+  letter-spacing: -0.01em;
   line-height: 1.35;
   color: var(--zk-ink);
 }
diff --git a/src/components/Conversation.css b/src/components/Conversation.css
index d77f78c..e72e607 100644
--- a/src/components/Conversation.css
+++ b/src/components/Conversation.css
@@ -41,17 +41,19 @@
 
 .bub--them {
   align-self: flex-start;
-  background: var(--zk-line-soft);
+  background: var(--zk-ground);
+  border: 1px solid var(--zk-card-line);
   color: var(--zk-ink);
   border-bottom-left-radius: 4px;
 }
 
 .bub--us {
   align-self: flex-end;
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
+  background: var(--zk-blue);
+  color: #fff;
   border-bottom-right-radius: 4px;
 }
+.bub--us span { opacity: .8; }
 
 .conv__note {
   margin: 0;
diff --git a/src/components/Conversation.jsx b/src/components/Conversation.jsx
index d2aa0ec..0f0d86e 100644
--- a/src/components/Conversation.jsx
+++ b/src/components/Conversation.jsx
@@ -122,10 +122,8 @@ export default function Conversation({ rows, name, onClose }) {
         </div>
 
         <p className="conv__note">
-          Shows the customer&apos;s messages and everything written back to them,
-          including the acceptance confirmation. One automatic send is not here:
-          the quote, which goes out as a registered WhatsApp template rather than
-          text we compose.
+          Everything the customer sent and everything written back. The quote itself
+          goes out as a WhatsApp template and is not shown here.
         </p>
       </div>
     </div>
diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx
new file mode 100644
index 0000000..77e1e2e
--- /dev/null
+++ b/src/components/Icon.jsx
@@ -0,0 +1,70 @@
+/**
+ * One monoline icon set for the whole console — 16-unit grid, 1.6 stroke,
+ * round caps. Drawn inline so nothing is fetched and the colour is always
+ * `currentColor`. Use the NAME, never the path, so an icon changed here
+ * changes everywhere it appears.
+ */
+const PATHS = {
+  home: <><path d="M2.5 8.2 8 3.4l5.5 4.8" /><path d="M4 7.4V13h8V7.4" /></>,
+  list: <><path d="M5.5 4.2h8M5.5 8h8M5.5 11.8h8" /><circle cx="2.8" cy="4.2" r=".9" fill="currentColor" stroke="none" /><circle cx="2.8" cy="8" r=".9" fill="currentColor" stroke="none" /><circle cx="2.8" cy="11.8" r=".9" fill="currentColor" stroke="none" /></>,
+  inbox: <><path d="M2.5 9.5V4.8a1.3 1.3 0 0 1 1.3-1.3h8.4a1.3 1.3 0 0 1 1.3 1.3v4.7" /><path d="M2.5 9.5h3.2l.8 1.6h3l.8-1.6h3.2v2.2a1.3 1.3 0 0 1-1.3 1.3H3.8a1.3 1.3 0 0 1-1.3-1.3z" /></>,
+  chat: <path d="M2.8 3.6h10.4v6.4H7.4l-3 2.4v-2.4H2.8z" strokeLinejoin="round" />,
+  bot: <><rect x="3" y="5" width="10" height="7.5" rx="2" /><path d="M8 2.6V5M6 8.4h.01M10 8.4h.01" /><path d="M6 10.6h4" /></>,
+  clock: <><circle cx="8" cy="8" r="5.6" /><path d="M8 4.8V8l2.2 1.4" /></>,
+  archive: <><rect x="2.5" y="3" width="11" height="3" rx=".8" /><path d="M3.5 6v6.2a.8.8 0 0 0 .8.8h7.4a.8.8 0 0 0 .8-.8V6M6.5 8.8h3" /></>,
+  search: <><circle cx="7" cy="7" r="4.3" /><path d="M10.3 10.3 13.5 13.5" /></>,
+  plus: <path d="M8 3.2v9.6M3.2 8h9.6" />,
+  chevronRight: <path d="M6 3.5 10.5 8 6 12.5" />,
+  chevronLeft: <path d="M10 3.5 5.5 8 10 12.5" />,
+  chevronDown: <path d="M3.5 6 8 10.5 12.5 6" />,
+  arrowRight: <path d="M3 8h9.5M8.8 4.3 12.5 8l-3.7 3.7" />,
+  lock: <><rect x="3.5" y="7" width="9" height="6.5" rx="1.3" /><path d="M5.5 7V5.3a2.5 2.5 0 0 1 5 0V7" /></>,
+  eye: <><path d="M1.8 8s2.3-4 6.2-4 6.2 4 6.2 4-2.3 4-6.2 4S1.8 8 1.8 8z" /><circle cx="8" cy="8" r="1.8" /></>,
+  file: <><path d="M4 1.8h5.2L12.5 5v9.2H4z" strokeLinejoin="round" /><path d="M9 1.9v3.3h3.4" strokeLinejoin="round" /></>,
+  phone: <path d="M3.4 2.8h2.4l1.2 3-1.5 1a7.5 7.5 0 0 0 3.7 3.7l1-1.5 3 1.2v2.4a1 1 0 0 1-1.1 1A10.6 10.6 0 0 1 2.4 3.9a1 1 0 0 1 1-1.1Z" strokeLinejoin="round" />,
+  whatsapp: <><path d="M8 1.6a6.3 6.3 0 0 0-5.4 9.5L1.7 14.4l3.4-.9A6.3 6.3 0 1 0 8 1.6z" strokeLinejoin="round" /><path d="M5.7 5.6c.5-.1.7.1.9.5l.3.7c.1.2 0 .4-.1.5l-.3.3c-.1.1-.2.3-.1.4a3.4 3.4 0 0 0 1.6 1.6c.2.1.3 0 .4-.1l.3-.3c.2-.2.3-.2.5-.1l.8.4c.4.2.5.4.4.8-.1.5-.6.9-1.1.9-1.6 0-4-2.4-4-4 0-.5.3-1 .8-1.1z" fill="currentColor" stroke="none" /></>,
+  shield: <path d="M8 1.8 13 3.8v3.6c0 3.1-2.1 5.2-5 6.8-2.9-1.6-5-3.7-5-6.8V3.8z" strokeLinejoin="round" />,
+  alert: <><path d="M8 2.2 14 12.8H2z" strokeLinejoin="round" /><path d="M8 6.4v3M8 11.2h.01" /></>,
+  refresh: <><path d="M13 8a5 5 0 0 1-8.7 3.4M3 8a5 5 0 0 1 8.7-3.4" /><path d="M11.8 1.8v3h-3M4.2 14.2v-3h3" /></>,
+  signOut: <><path d="M6.5 2.8H3.6a1 1 0 0 0-1 1v8.4a1 1 0 0 0 1 1h2.9" /><path d="M10 5.2 12.8 8 10 10.8M6.3 8h6.4" /></>,
+  check: <path d="M3 8.4l3.2 3.2L13 4.8" />,
+  x: <path d="M4 4l8 8M12 4l-8 8" />,
+  user: <><circle cx="8" cy="5.5" r="2.7" /><path d="M2.8 13.4a5.2 5.2 0 0 1 10.4 0" /></>,
+  users: <><circle cx="6" cy="5.6" r="2.4" /><path d="M1.8 13a4.2 4.2 0 0 1 8.4 0" /><path d="M10.4 3.6a2.4 2.4 0 0 1 0 4M12 9.2a4.2 4.2 0 0 1 2.2 3.8" /></>,
+  sparkle: <path d="M8 1.6 9.6 6.4l4.8 1.6-4.8 1.6L8 14.4 6.4 9.6 1.6 8l4.8-1.6z" strokeLinejoin="round" />,
+  money: <><rect x="1.8" y="4" width="12.4" height="8" rx="1.3" /><circle cx="8" cy="8" r="1.9" /><path d="M4.2 6.4h.01M11.8 9.6h.01" /></>,
+  trend: <path d="M2 11.5 6 7.5l2.6 2.6L14 4.6M10.5 4.6H14v3.5" />,
+  filter: <path d="M2.5 3.5h11L9.4 8.6v4.2l-2.8-1.4V8.6z" strokeLinejoin="round" />,
+  sortAsc: <path d="M4.5 12.5v-9M2.2 5.8l2.3-2.3 2.3 2.3M9 4h4.5M9 8h3.5M9 12h2.5" />,
+  sortDesc: <path d="M4.5 3.5v9M2.2 10.2l2.3 2.3 2.3-2.3M9 4h2.5M9 8h3.5M9 12h4.5" />,
+  brain: <path d="M6 2.5a2 2 0 0 0-2 2 2 2 0 0 0-1 3.7A2 2 0 0 0 4 11.5a2 2 0 0 0 2 2M10 2.5a2 2 0 0 1 2 2 2 2 0 0 1 1 3.7 2 2 0 0 1-1 3.3 2 2 0 0 1-2 2M8 3v10" />,
+  calendar: <><rect x="2.5" y="3.5" width="11" height="10" rx="1.3" /><path d="M2.5 7h11M5.5 2v3M10.5 2v3" /></>,
+  car: <><path d="M3 9.5 4.2 5.8A1.2 1.2 0 0 1 5.3 5h5.4a1.2 1.2 0 0 1 1.1.8L13 9.5v3H3z" strokeLinejoin="round" /><circle cx="5.3" cy="10.8" r=".9" fill="currentColor" stroke="none" /><circle cx="10.7" cy="10.8" r=".9" fill="currentColor" stroke="none" /></>,
+  building: <><rect x="3" y="2.5" width="10" height="11" rx="1" /><path d="M6 5.5h1M9 5.5h1M6 8h1M9 8h1M7 13.5v-3h2v3" /></>,
+  mail: <><rect x="2" y="3.5" width="12" height="9" rx="1.3" /><path d="m2.5 4.5 5.5 4.3 5.5-4.3" /></>,
+  id: <><rect x="2" y="3.4" width="12" height="9.2" rx="1.4" /><circle cx="5.8" cy="7" r="1.5" /><path d="M9 6.4h3M9 8.6h3M4 10.4h5" /></>,
+}
+
+export default function Icon({ name, size = 16, className = '', strokeWidth = 1.6, ...rest }) {
+  const body = PATHS[name]
+  if (!body) return null
+  return (
+    <svg
+      className={'ico' + (className ? ' ' + className : '')}
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...rest}
+    >
+      {body}
+    </svg>
+  )
+}
+
diff --git a/src/components/StageRail.css b/src/components/StageRail.css
index 1de0f7b..c34e605 100644
--- a/src/components/StageRail.css
+++ b/src/components/StageRail.css
@@ -1,16 +1,6 @@
-/* The journey, across the top. Eight steps have to fit without wrapping on a
-   laptop, so the labels are short and the dots carry the state. */
-.rail {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-6);
-  flex-wrap: wrap;
-  margin: var(--sp-6) 0;
-  padding: var(--sp-2) 0 var(--sp-5);
-  border: 0;
-  border-bottom: 1px solid var(--zk-line);
-  background: transparent;
-}
+/* The journey, across the width of the metrics card. Eight steps have to fit
+   on a laptop, so the labels are short and the dots carry the state. */
+.rail { width: 100%; }
 
 .rail ol {
   display: flex;
@@ -18,8 +8,6 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  flex: 1;
-  min-width: 0;
 }
 
 .rail__s {
@@ -27,18 +15,18 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--sp-3);
+  gap: 8px;
   flex: 1;
   min-width: 0;
   text-align: center;
 }
 
 .rail__dot {
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   flex: none;
-  background: var(--zk-white);
+  background: var(--zk-card);
   border: 2px solid var(--zk-line);
   z-index: 1;
   transition: background var(--t-fast), border-color var(--t-fast);
@@ -57,7 +45,7 @@
 /* The connector sits behind the dots, drawn from each step to the next. */
 .rail__bar {
   position: absolute;
-  top: 6px;
+  top: 5px;
   left: 50%;
   width: 100%;
   height: 2px;
@@ -71,33 +59,62 @@
 .is-here .rail__dot {
   background: var(--zk-blue);
   border-color: var(--zk-blue);
-  box-shadow: 0 0 0 5px rgba(33, 103, 174, 0.15);
-}
-.is-here .rail__l {
-  color: var(--zk-blue-dark);
-  font-weight: var(--fw-semi);
-  font-size: var(--fs-xs);
+  box-shadow: 0 0 0 4px rgba(33, 103, 174, 0.15);
 }
+.is-here .rail__l { color: var(--zk-blue-dark); font-weight: var(--fw-semi); }
 
-/* Off the path — Parked, Referred, Lost, Declined. Named rather than drawn
-   into the row: these are departures, not points every lead passes. */
-.rail__off {
-  flex: none;
-  font-size: var(--fs-xs);
-  font-weight: var(--fw-medium);
+/* Beyond a branch the path is unknowable, so it is drawn faint. */
+.is-faint .rail__dot { border-color: var(--zk-line-soft); }
+.is-faint .rail__l { color: var(--zk-line); }
+
+/* The branch: a node hanging beneath the stage the lead left the line at. */
+.rail__branch {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-top: 6px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  z-index: 2;
+}
+.rail__branch::before {
+  content: '';
+  width: 2px;
+  height: 10px;
+  background: var(--zk-amber-line);
+}
+.rail__bdot {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  transform: rotate(45deg);
+  background: var(--zk-amber);
+  box-shadow: 0 0 0 4px var(--zk-amber-tint);
+}
+.rail__bl {
+  display: flex;
+  align-items: baseline;
+  gap: 5px;
+  margin-top: 2px;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-semi);
   color: var(--zk-amber-ink);
-  background: var(--zk-amber-tint);
-  border: 1px solid var(--zk-amber-line);
-  padding: var(--sp-2) var(--sp-4);
+  white-space: nowrap;
+  padding: 2px 10px;
   border-radius: var(--r-pill);
+  background: var(--zk-amber-tint);
 }
-.rail__off.is-closed {
-  color: var(--zk-muted);
-  background: var(--zk-tint);
-  border-color: var(--zk-line);
-}
+.rail__bl small { font-size: 10.5px; font-weight: var(--fw-medium); opacity: .8; }
+.rail__branch.is-closed::before { background: var(--zk-line); }
+.rail__branch.is-closed .rail__bdot { background: var(--zk-grey); box-shadow: 0 0 0 4px var(--zk-line-soft); }
+.rail__branch.is-closed .rail__bl { color: var(--zk-muted); background: var(--zk-line-soft); }
+
+/* Room for the branch beneath the rail when one is drawn. */
+.rail:has(.rail__branch) { padding-bottom: 52px; }
 
 @media (max-width: 900px) {
   .rail__l { display: none; }
-  .rail { padding: 14px 18px; }
 }
diff --git a/src/components/StageRail.jsx b/src/components/StageRail.jsx
index d10733d..868c4c1 100644
--- a/src/components/StageRail.jsx
+++ b/src/components/StageRail.jsx
@@ -4,28 +4,23 @@ import './StageRail.css'
 /**
  * Where this lead has been, where it is, and what is left.
  *
- * The page said the stage in one chip in the corner and nothing about the
- * journey, so "how far along is this?" — the first question anyone asks about
- * a lead — could only be answered by knowing the workflow by heart.
- *
  * PASSED IS READ FROM THE AUDIT, NOT ASSUMED FROM THE ORDER. A lead can skip
- * (documents uploaded from Qualified carried one straight past Contacted) and
- * can go backwards (a callback returns it to Awaiting Contact). Colouring
- * everything left of the current stage would have claimed steps that never
- * happened. The trail knows which states this lead actually entered; this
- * reads that.
+ * and can go backwards, so colouring everything left of the current stage
+ * would claim steps that never happened. The trail knows which states this
+ * lead actually entered; this reads that.
  *
- * The side states — Parked, Referred, Lost, Declined — are deliberately NOT on
- * the rail. They are departures from the path rather than points along it, and
- * putting them in a row would suggest every lead passes through. When the lead
- * is in one, the rail says so at the end instead.
+ * The side states — Parked, Referred, Lost, Declined — are not points every
+ * lead passes through, so they are not on the main rail. When the lead is in
+ * one, it is drawn as a BRANCH: a node hanging off the last stage the lead
+ * reached on the path, so the picture says "it left the line here", rather
+ * than a pill floating at the end of the row.
  */
 const PATH = [
   'zk-state-new', 'zk-state-qualified', 'zk-state-contacted', 'zk-state-docs',
   'zk-state-quoted', 'zk-state-payment', 'zk-state-issued', 'zk-state-onboarded',
 ]
 
-/** Short enough to fit eight across; the queue names are written for a sidebar. */
+/** Short enough to fit eight across. */
 const SHORT = {
   'zk-state-new': 'Filed',
   'zk-state-qualified': 'Called',
@@ -35,47 +30,60 @@ const SHORT = {
   'zk-state-payment': 'Payment',
   'zk-state-issued': 'Issued',
   'zk-state-onboarded': 'Onboarded',
+  'zk-state-referred': 'Referred',
+  'zk-state-parked': 'Parked',
+  'zk-state-lost': 'Lost',
+  'zk-state-declined': 'Declined',
 }
 
 export default function StageRail({ audit, currentName }) {
   const current = STAGES.find((s) => s.name === currentName)
-  const visited = new Set(
-    (audit || [])
-      .map((r) => r.execution_state)
-      .filter((v) => PATH.includes(v)),
-  )
+  const visitedList = (audit || [])
+    .map((r) => r.execution_state)
+    .filter((v) => PATH.includes(v))
+  const visited = new Set(visitedList)
   if (current) visited.add(current.uid)
 
   const currentIndex = PATH.indexOf(current?.uid)
   // A lead sitting somewhere off the path — Parked, Referred, Lost, Declined.
   const aside = current && currentIndex === -1 ? current : null
 
+  // Where the branch hangs: the furthest point along the path the lead
+  // reached before it left.
+  const reached = Math.max(-1, ...PATH.map((uid, i) => (visited.has(uid) ? i : -1)))
+  const branchAfter = aside ? Math.max(0, reached) : -1
+
   return (
     <div className="rail" aria-label="Progress">
       <ol>
         {PATH.map((uid, i) => {
           const been = visited.has(uid)
           const here = uid === current?.uid
-          // Ahead of a lead that has left the path is unknowable — a referred
-          // risk may never see payment — so nothing after it is called "to do".
-          const state = here ? 'here' : been ? 'done' : 'todo'
+          // Ahead of a lead that has left the path is unknowable, so nothing
+          // after the branch is called "to do" with any confidence — it is
+          // drawn faint.
+          const state = here ? 'here' : been ? 'done' : aside && i > branchAfter ? 'faint' : 'todo'
+          const nextDone = visited.has(PATH[i + 1])
           return (
-            <li key={uid} className={'rail__s is-' + state}>
+            <li key={uid} className={'rail__s is-' + state + (i === branchAfter && aside ? ' has-branch' : '')}>
               <span className="rail__dot" aria-hidden="true" />
               <span className="rail__l">{SHORT[uid]}</span>
               {i < PATH.length - 1 ? (
-                <span className={'rail__bar' + (visited.has(PATH[i + 1]) ? ' is-done' : '')} aria-hidden="true" />
+                <span className={'rail__bar' + (nextDone ? ' is-done' : '')} aria-hidden="true" />
+              ) : null}
+              {i === branchAfter && aside ? (
+                <span className={'rail__branch' + (aside.kind === 'end' ? ' is-closed' : '')}>
+                  <span className="rail__bdot" aria-hidden="true" />
+                  <span className="rail__bl">
+                    <small>{aside.kind === 'end' ? 'Ended' : 'Now'}</small>
+                    {SHORT[aside.uid] || aside.name}
+                  </span>
+                </span>
               ) : null}
             </li>
           )
         })}
       </ol>
-
-      {aside ? (
-        <div className={'rail__off' + (aside.kind === 'end' ? ' is-closed' : '')}>
-          {aside.kind === 'end' ? 'Ended in' : 'Now in'} <strong>{aside.name}</strong>
-        </div>
-      ) : null}
     </div>
   )
 }
diff --git a/src/components/Timeline.css b/src/components/Timeline.css
index 8b3591a..85f328b 100644
--- a/src/components/Timeline.css
+++ b/src/components/Timeline.css
@@ -1,351 +1,259 @@
+/* The trail. The worker's face is the node on the rail; the entry is a title,
+   a finding, and one footer row of controls. */
 .tl {
   list-style: none;
   margin: 0;
-  padding: 0 0 0 4px;
+  padding: 0;
 }
 
 .tl__loading,
-.tl__err {
-  color: var(--zk-muted);
-  font-size: var(--fs-xs);
-  padding: 14px 2px;
-}
-
-.tl__err {
-  color: var(--zk-danger-ink);
-}
+.tl__err { color: var(--zk-muted); font-size: var(--fs-xs); padding: 14px 2px; }
+.tl__err { color: var(--zk-danger-ink); }
 
 .tl__item {
   position: relative;
-  padding: 0 0 var(--sp-6) var(--sp-7);
-  border-left: 2px solid var(--zk-line-soft);
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 0 14px;
+  padding-bottom: var(--sp-5);
 }
 
-.tl__item:last-child {
-  border-left-color: transparent;
-  padding-bottom: 4px;
-}
-
-.tl__dot {
+/* The connecting line, drawn from node to node. */
+.tl__item::before {
+  content: '';
   position: absolute;
-  left: -8px;
-  top: 3px;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--zk-white);
-  border: 2px solid var(--zk-grey);
-  box-shadow: 0 0 0 4px var(--zk-white);
+  left: 17px;
+  top: 40px;
+  bottom: 0;
+  width: 2px;
+  background: var(--zk-line-soft);
+}
+.tl__item:last-child::before { display: none; }
+.tl__item:last-child { padding-bottom: 4px; }
+
+.tl__node {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+}
+/* The agent disc at md is 26px; centre it and ring it in white so the line
+   passes cleanly behind. */
+.tl__node .who--md .who__disc { width: 32px; height: 32px; box-shadow: 0 0 0 3px var(--zk-card); }
+.tl__node .who--btn { padding: 0; border: 0; }
+.tl__node .who__i { display: none; }
+.tl__node .avatar { width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 3px var(--zk-card); }
+.tl__sysdot { width: 12px; height: 12px; border-radius: 50%; background: var(--zk-line); box-shadow: 0 0 0 3px var(--zk-card); }
+.tl__wanode {
+  display: grid; place-items: center;
+  width: 32px; height: 32px; border-radius: 50%;
+  color: #fff; background: var(--zk-wa);
+  box-shadow: 0 0 0 3px var(--zk-card);
 }
 
-/* Machine work is blue, people are amber, the platform itself is grey — so a
-   file can be read at a glance for how much of it was done by hand. */
-.tl__item--ai .tl__dot {
-  border-color: var(--zk-blue);
-  background: var(--zk-blue);
-  box-shadow: 0 0 0 4px var(--zk-white), 0 0 0 7px rgba(33, 103, 174, 0.12);
-}
-
-.tl__item--human .tl__dot {
-  border-color: var(--zk-amber);
-  background: var(--zk-white);
-  box-shadow: 0 0 0 4px var(--zk-white), 0 0 0 7px rgba(181, 118, 31, 0.14);
-}
-
-.tl__item--sys .tl__dot {
-  border-color: var(--zk-line);
-  background: var(--zk-line);
-}
+/* The newest entry is marked — it is what the page is refreshed for. */
+.tl--newest .tl__item.is-latest .tl__body { background: var(--zk-ground); }
 
 .tl__body {
   display: flex;
   flex-direction: column;
-  gap: var(--sp-2);
-  padding: var(--sp-2) var(--sp-3) var(--sp-3);
-  margin-left: calc(var(--sp-3) * -1);
+  gap: 6px;
+  min-width: 0;
+  padding: 6px 12px 10px;
+  margin: 0 0 0 -4px;
   border-radius: var(--r-md);
   transition: background var(--t-fast);
 }
-
-.tl__item:hover .tl__body {
-  background: var(--zk-tint);
-}
+.tl__item:hover .tl__body { background: var(--zk-ground); }
 
 .tl__head {
   display: flex;
-  flex-wrap: wrap;
   align-items: baseline;
-  gap: var(--sp-1) var(--sp-2);
+  justify-content: space-between;
+  gap: 12px;
 }
-
-/* Who and when sit on their own line: in a 384px rail, badge-beside-title wraps
-   into a ragged block that is harder to scan than two clean rows. */
-.tl__meta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-1) var(--sp-3);
-}
-
-.tl__what {
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.008em;
-  color: var(--zk-ink);
-}
-
-.tl__who {
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  padding: 3px 9px;
-  border-radius: var(--r-pill);
-  white-space: nowrap;
-}
-
-.tl__who--ai {
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-}
-
-.tl__who--human {
-  background: var(--zk-amber-tint);
-  color: var(--zk-amber-ink);
-}
-
-.tl__who--sys {
-  background: var(--zk-tint);
-  color: var(--zk-muted);
-  border: 1px solid var(--zk-line);
-}
-
+.tl__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
+.tl__what { font-size: var(--fs-sm); font-weight: var(--fw-semi); letter-spacing: -0.008em; color: var(--zk-ink); }
+.tl__item--sys .tl__what { color: var(--zk-muted); font-weight: var(--fw-medium); }
 .tl__stage {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   font-size: var(--fs-2xs);
-  color: var(--zk-blue);
+  font-weight: var(--fw-medium);
+  color: var(--zk-blue-dark);
+  padding: 1px 8px 1px 6px;
+  border-radius: var(--r-pill);
+  background: var(--zk-tint-blue);
 }
+.tl__when { flex: none; font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tl__when em { font-style: normal; }
 
-.tl__when {
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-}
-
-.tl__say {
-  margin-top: var(--sp-2);
-  padding: var(--sp-3) var(--sp-4);
-  border-left: 2px solid var(--zk-blue-light);
-  border-radius: 0 var(--r-md) var(--r-md) 0;
-  background: var(--zk-tint);
-}
-
-.tl__item:hover .tl__say {
-  background: var(--zk-white);
-}
-
-.tl__saylabel {
-  display: block;
-  font-size: var(--fs-3xs);
+.tl__meta { display: flex; align-items: center; gap: 8px; margin-top: -2px; }
+.tl__who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--zk-muted); }
+.tl__who--cust { color: var(--zk-wa); font-weight: var(--fw-medium); }
+.tl__aitag {
+  font-size: 9.5px;
   font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-  margin-bottom: var(--sp-2);
+  letter-spacing: .06em;
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: var(--zk-amber-ink);
+  background: var(--zk-amber-tint);
 }
 
-.tl__say p {
-  margin: 0;
+/* The finding — body copy, not a quote box. */
+.tl__finding {
+  margin: 2px 0 0;
   font-size: var(--fs-sm);
   line-height: var(--lh-normal);
-  color: var(--zk-muted);
-  max-width: 76ch;
+  color: var(--zk-ink);
+  max-width: 78ch;
 }
 
-.tl__figs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 9px;
+/* A quoted line: a person's reason, or what was said to/by the customer. */
+.tl__say {
+  margin-top: 2px;
+  padding: 10px 14px;
+  border-left: 3px solid var(--zk-blue-light);
+  border-radius: 0 var(--r-sm) var(--r-sm) 0;
+  background: var(--zk-card);
+  border-top: 1px solid var(--zk-line-soft);
+  border-right: 1px solid var(--zk-line-soft);
+  border-bottom: 1px solid var(--zk-line-soft);
 }
+.tl__say--chat { border-left-color: var(--zk-wa); }
+.tl__saylabel {
+  display: block;
+  font-size: 11px;
+  font-weight: var(--fw-medium);
+  color: var(--zk-grey);
+  margin-bottom: 4px;
+}
+.tl__say p { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--zk-ink); max-width: 76ch; }
 
+.tl__figs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
 .tl__figs span {
   font-size: var(--fs-2xs);
   color: var(--zk-ink);
   font-variant-numeric: tabular-nums;
-  padding: 4px 11px;
+  padding: 3px 10px;
   border-radius: var(--r-pill);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
 }
+.tl__figs em { font-style: normal; color: var(--zk-grey); text-transform: capitalize; margin-right: 5px; }
 
-.tl__figs em {
-  font-style: normal;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  text-transform: capitalize;
-  margin-right: 5px;
-}
-
-/* ---- system noise ---- */
-.tl__toggle {
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  margin-bottom: 14px;
-  padding: 5px 12px;
-  border-radius: var(--r-pill);
-  border: 1px solid var(--zk-line);
-  background: var(--zk-white);
-  color: var(--zk-muted);
-  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
-}
-
-.tl__toggle:hover {
-  border-color: var(--zk-blue-light);
-  background: var(--zk-tint);
-  color: var(--zk-blue-dark);
-}
-
-/* ── What was attached ────────────────────────────────────────────────────
-   The audit trail's job at this step is to prove receipt. A line saying
-   "Collect Documents" and nothing else left the operator to open the record
-   and count for themselves — and until the views were fixed, the record could
-   not see the files either. */
+/* Documents received */
 .tl__docs {
-  margin-top: 8px;
-  padding: 9px 11px;
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-sm, 6px);
-  background: var(--zk-tint);
+  margin-top: 2px;
+  padding: 9px 12px;
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-sm);
+  background: var(--zk-card);
 }
-
 .tl__docshead {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-  color: var(--zk-muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-ink);
   margin-bottom: 7px;
 }
-
+.tl__docshead svg { color: var(--zk-blue); }
 .tl__doclist { display: flex; flex-wrap: wrap; gap: 6px; }
-
 .tl__doc {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
   text-decoration: none;
-  padding: 4px 10px 4px 8px;
-  border-radius: var(--r-pill, 999px);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
+  padding: 3px 10px;
+  border-radius: var(--r-pill);
+  background: var(--zk-tint-blue);
   color: var(--zk-blue-dark);
-  transition: border-color .12s, background .12s;
+  transition: background .12s;
 }
-.tl__doc svg { width: 12px; height: 12px; flex: none; opacity: .7; }
-.tl__doc:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
+.tl__doc:hover { background: var(--zk-blue-light); color: var(--zk-navy); }
 .tl__doc:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
 
-/* ── the conversation, as one entry ───────────────────────────────────────
-   Every WhatsApp turn used to be its own entry, so a four-message exchange
-   took more of the trail than the whole underwriting chain. */
-.tl__wa {
+/* ONE FOOTER ROW. Chain of thought, fields written, the call, the thread —
+   ghost buttons side by side, and whichever is opened unfolds beneath the
+   whole row. `details` is display:contents so its summary sits in the row
+   and its list drops below it. */
+.tl__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  margin-top: 4px;
+}
+.tl__foot .cot__toggle,
+.tl__wrote > summary,
+.tl__open {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: #0f7b45;
-}
-.tl__wa svg { width: 15px; height: 15px; }
-
-.tl__n {
-  font-size: var(--fs-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-muted);
-  padding: 1px 8px;
-  border-radius: var(--r-pill, 999px);
-  background: var(--zk-line-soft);
-}
-
-/* The channel performs these as the system, but the person who typed is the
-   actor worth naming. "System · Customer Reply" said the opposite. */
-.tl__who--cust { color: #0f7b45; font-weight: 500; }
-
-.tl__open {
   font: inherit;
   font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  padding: 0;
-  border: 0;
-  background: none;
-  color: var(--zk-blue);
-  margin-left: auto;
-}
-.tl__open:hover { color: var(--zk-blue-dark); text-decoration: underline; }
-.tl__open:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
-
-/* A chat entry's dot takes the channel's colour, so a scan down the rail shows
-   where the conversation happened without reading a word. */
-.tl__item--chat .tl__dot { background: #0f7b45; border-color: #0f7b45; }
-
-/* ── what this step wrote ────────────────────────────────────────────────
-   Folded by default: most steps write a dozen fields and the trail has to
-   stay readable as a story. Opened, the entry becomes an itemised account of
-   what the agent decided — which is the closest an app JWT can get to its
-   reasoning, since ai_reasoning is on the row but not in the API. */
-.tl__wrote { margin-top: 8px; }
-
-.tl__wrote > summary {
+  font-weight: var(--fw-medium);
+  color: var(--zk-muted);
+  padding: 4px 10px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-card);
   cursor: pointer;
   list-style: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-blue);
+  white-space: nowrap;
+  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
 }
+.tl__foot .cot__toggle:hover,
+.tl__wrote > summary:hover,
+.tl__open:hover { border-color: var(--zk-blue-light); color: var(--zk-blue-dark); background: var(--zk-tint-blue); }
+.tl__foot .cot__toggle.is-open,
+.tl__wrote[open] > summary { border-color: var(--zk-blue-light); color: var(--zk-blue-dark); background: var(--zk-tint-blue); }
+.tl__foot .cot__toggle { order: 1; }
+.tl__wrote { display: contents; }
+.tl__wrote > summary { order: 2; }
 .tl__wrote > summary::-webkit-details-marker { display: none; }
-.tl__wrote > summary::after {
-  content: '';
-  width: 5px; height: 5px;
-  border-right: 1.4px solid currentColor;
-  border-bottom: 1.4px solid currentColor;
-  transform: rotate(45deg) translate(-1px, -1px);
-  transition: transform var(--t-fast);
+.tl__open { order: 3; }
+.tl__foot .cot__steps { order: 10; flex-basis: 100%; }
+.tl__wrote > dl { order: 11; flex-basis: 100%; }
+.tl__wcaret { transition: transform var(--t-fast); }
+.tl__wrote[open] .tl__wcaret { transform: rotate(180deg); }
+
+.tl__wrote > dl {
+  margin: 4px 0 0;
+  padding: 10px 14px;
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-sm);
+  background: var(--zk-card);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 4px 24px;
 }
-.tl__wrote[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
-.tl__wrote > summary:hover { color: var(--zk-blue-dark); }
+.tl__wrote dl > div { display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 3px 0; }
+.tl__wrote dt { font-size: var(--fs-2xs); color: var(--zk-grey); overflow-wrap: anywhere; }
+.tl__wrote dd { margin: 0; min-width: 0; font-size: var(--fs-2xs); color: var(--zk-ink); overflow-wrap: anywhere; }
 
-.tl__wrote dl {
-  margin: 8px 0 0;
-  padding: 10px 12px;
-  border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-sm, 6px);
-  background: var(--zk-tint);
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.tl__wrote dl > div { display: flex; gap: 10px; align-items: baseline; }
-
-.tl__wrote dt {
-  flex: none;
-  width: 42%;
+/* Platform noise, folded — offered at the foot rather than the head. */
+.tl__toggle {
+  font: inherit;
   font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  overflow-wrap: anywhere;
+  font-weight: var(--fw-medium);
+  cursor: pointer;
+  margin: 8px 0 0 50px;
+  padding: 5px 12px;
+  border-radius: var(--r-pill);
+  border: 1px dashed var(--zk-line);
+  background: transparent;
+  color: var(--zk-muted);
+  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
 }
+.tl__toggle:hover { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
 
-.tl__wrote dd {
-  margin: 0;
-  flex: 1;
-  min-width: 0;
-  font-size: var(--fs-2xs);
-  color: var(--zk-ink);
-  overflow-wrap: anywhere;
+@media (max-width: 720px) {
+  .tl__head { flex-direction: column; align-items: flex-start; gap: 2px; }
 }
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx
index 89a30bd..848fb51 100644
--- a/src/components/Timeline.jsx
+++ b/src/components/Timeline.jsx
@@ -3,31 +3,18 @@ import { useZino } from '../api/provider.jsx'
 import AgentChip from './AgentChip.jsx'
 import ClampText from './ClampText.jsx'
 import ChainOfThought from './ChainOfThought.jsx'
+import Icon from './Icon.jsx'
 import { AGENTS } from '../api/agents.js'
 import { APP_ID, STAGES, baseFieldId } from '../api/config.js'
+import { findingOf, humanize, initials, leadIn, mdRuns, toneFor } from '../api/display.js'
 import './Timeline.css'
 
-/* The roster lives in api/agents.js now — one short name, one colour and one
-   set of initials per employee, so the same worker looks the same everywhere
-   it appears. This file only needs to know which roles are agents. */
+/* The roster lives in api/agents.js — one short name, one colour and one set
+   of initials per employee, so the same worker looks the same everywhere. */
 
-/**
- * The fields worth surfacing per activity — an agent's reasoning, a rule's
- * output, a call's notes. Everything else stays in the file below; a timeline
- * that shows every field is a table, not a story.
- *
- * Keyed on the BASE field id. An audit row's data is keyed by the ACTIVITY's
- * field ids, which carry a per-form suffix — the call notes arrive as
- * `contact_notes_2`, the document request as `documents_notes_3`. Matching the
- * global ids directly, as this did, meant almost nothing ever matched: the
- * timeline showed a bare list of activity names, and the one narrative line
- * that did appear was an accident (a DATA_UPDATE row happens to write the
- * unsuffixed key).
- */
 /* AN AI STEP'S REASONING, in the order it is worth reading. These become the
-   "Reasoned" rung of the chain of thought — the employee's own words for why
-   it did what it did — rather than loose quote blocks. The first present one
-   is the finding shown without opening the chain. */
+   "Reasoned" rung of the chain of thought. The first present one is the
+   finding shown without opening the chain. */
 const REASONING = [
   ['attribution_reason', 'Attribution'],
   ['eligibility_reason', 'Eligibility'],
@@ -43,7 +30,7 @@ const REASONING = [
 ]
 
 /* CONVERSATION lines stay as plain quotes — they are what was said to and by
-   the customer, not the machine's reasoning, and belong beside the thread. */
+   the customer, not the machine's reasoning. */
 const CONVERSATION = [
   ['customer_reply', 'The customer said'],
   ['customer_answer', 'We replied'],
@@ -54,15 +41,10 @@ const NARRATIVE = [...REASONING, ...CONVERSATION]
 
 const MONEY = new Set(['quoted_premium', 'commission_amount', 'sme_value_at_risk', 'motor_idv'])
 
-/**
- * Fields already shown elsewhere in the entry, so the "what it wrote" list
- * does not repeat them: the narrative prose above it, the money figures below
- * it, the document chips, and the platform's own bookkeeping.
- */
+/** Fields already shown elsewhere in the entry. */
 const SHOWN_ELSEWHERE = new Set([...NARRATIVE.map(([k]) => k), ...MONEY, '_system'])
 
-/** A value as one short line. Long prose is already in the narrative block, so
- *  anything here is a field value, not a paragraph. */
+/** A value as one short line. */
 function short(f) {
   const v = f.value
   if (v === null || v === undefined || v === '') return null
@@ -70,20 +52,15 @@ function short(f) {
     const named = v
       .map((x) => (x && typeof x === 'object' ? (x.original_name || x.uuid || '') : x))
       .filter(Boolean)
-    return named.length ? named.join(', ') : null
+    return named.length ? named.map(humanize).join(', ') : null
   }
   if (typeof v === 'object') return null
   const t = String(v).trim()
   if (!t) return null
-  // A value long enough to be prose belongs in the narrative block, not in a
-  // list of what changed — truncating it here would show half a sentence and
-  // teach the reader that this list is unreliable.
-  return t.length > 90 ? t.slice(0, 88) + '…' : t
+  if (t.length > 90) return t.slice(0, 88) + '…'
+  return humanize(t)
 }
 
-/** Document slots, in the order they are worth reading. Labels are shorter than
- *  the workflow's own — "Registration Certificate (RC)" is a chip, not a form
- *  label — and a slot missing from here still renders under its server label. */
 const DOC_LABELS = {
   doc_rc: 'RC',
   doc_prev_policy: 'Expiring policy',
@@ -101,23 +78,20 @@ const DOC_LABELS = {
 const FILE_TYPES = new Set(['file', 'ocr'])
 
 function when(ts) {
-  if (!ts) return ''
+  if (!ts) return { abs: '', rel: '' }
   const d = new Date(ts)
   const mins = Math.round((Date.now() - d.getTime()) / 60000)
   const rel = mins < 1 ? 'just now'
     : mins < 60 ? `${mins}m ago`
     : mins < 1440 ? `${Math.round(mins / 60)}h ago`
     : `${Math.round(mins / 1440)}d ago`
-  return `${d.toLocaleString('en-IN', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} · ${rel}`
+  return {
+    abs: d.toLocaleString('en-IN', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }),
+    rel,
+  }
 }
 
-/**
- * Last resort for a step whose activity_name did not come back. Without this
- * the timeline — the screen the whole product is demonstrated on — prints a
- * raw slug like "zk-act-doc-reminder" in the middle of an otherwise readable
- * story. Turning it into "Doc Reminder" is a guess, but it is a guess that
- * reads as English.
- */
+/** Last resort for a step whose activity_name did not come back. */
 function prettyUid(uid) {
   if (!uid) return 'Step'
   return String(uid)
@@ -134,19 +108,20 @@ function filesIn(value) {
   return value.filter((f) => f && typeof f === 'object' && f.uuid)
 }
 
-/**
- * `rows` is owned by the lead page and refreshed on its poll, so the trail
- * keeps up with a lead that five agents are working through in three minutes.
- * This component fetched them itself once on mount and never again.
- */
 /** The two activities that ARE the WhatsApp thread. */
 const CHAT_ACTS = new Set(['zk-act-customer-reply', 'zk-act-answer-customer'])
 
-export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall }) {
+/**
+ * `rows` is owned by the lead page and refreshed on its poll, so the trail
+ * keeps up with a lead that five agents are working through in three minutes.
+ *
+ * `newestFirst` flips the reading order. The story reads forwards; a live
+ * demo wants the latest step at the top, where the eye lands. The merge and
+ * the grouping below are always done oldest-first and the finished list is
+ * reversed at the end, so the order never changes what is merged.
+ */
+export default function Timeline({ rows, newestFirst = false, onOpenAgent, onOpenChat, onOpenCall }) {
   const { client } = useZino()
-  // DATA_UPDATE entries are the platform writing fields, not anyone deciding
-  // anything. They are the bulk of a busy trail and they are hidden until asked
-  // for — the story is what people and agents did.
   const [showSys, setShowSys] = useState(false)
 
   if (!rows) return <p className="tl__loading">Loading the timeline…</p>
@@ -155,33 +130,15 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
   // Oldest first: a timeline reads forwards.
   const ordered = [...rows].sort((a, b) => String(a.created_at).localeCompare(String(b.created_at)))
 
-  // ONE SUBMISSION WRITES SEVERAL ROWS. The platform records each stage of a
-  // submission separately, told apart by execution_state:
-  //
-  //   zk-act-qualify   TRIGGER_PERFORMED     the trigger's commit
-  //   zk-act-qualify   TRIGGER_PERFORMED     ...again, on the settle path
-  //   zk-act-qualify   zk-state-qualified    the one that moved the lead
-  //
-  // Rendered literally that is "Qualify Lead" three times in a row, which
-  // reads as the AI having done the same thing three times. Only the row
-  // carrying a real state means anything to somebody reading the file.
-  //
-  // Collapsed on (same activity, within fifteen seconds) rather than on the
-  // execution_state alone, because a genuine repeat has to survive: Collect
-  // Documents really is performed twice on a lead whose first upload was
-  // incomplete, and those are minutes apart, not milliseconds.
-  //
-  // The kept row takes the EARLIEST timestamp — when the operator acted — and
-  // whichever state and payload is actually populated.
+  // ONE SUBMISSION WRITES SEVERAL ROWS, told apart by execution_state. Only the
+  // row carrying a real state means anything to somebody reading the file.
+  // Collapsed on (same activity, within fifteen seconds), because a genuine
+  // repeat has to survive.
   const isStage = (v) => STAGES.some((s) => s.uid === v)
   const SAME_SUBMISSION_MS = 15000
 
   const merged = []
   for (const r of ordered) {
-    // Look BACK for a match rather than only at the previous entry: the
-    // platform interleaves a DATA_UPDATE row between the two halves of one
-    // submission, so the rows to merge are near each other in time but not
-    // adjacent in the list.
     let at = -1
     for (let i = merged.length - 1; i >= 0; i--) {
       if (Date.parse(r.created_at) - Date.parse(merged[i].created_at) >= SAME_SUBMISSION_MS) break
@@ -192,9 +149,7 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
       const prev = merged[at]
       merged[at] = {
         ...prev,
-        // The settle row is the one that names the resulting stage.
         execution_state: isStage(r.execution_state) ? r.execution_state : prev.execution_state,
-        // Whichever row actually carries the submission and the AI's working.
         data: (r.data && Object.keys(r.data).length) ? r.data : prev.data,
         fields: (r.fields && r.fields.length) ? r.fields : prev.fields,
         user_name: prev.user_name || r.user_name,
@@ -209,22 +164,10 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
   let lastStage = null
   const items = merged.map((r, i) => {
     const roles = r.user_roles || []
-    // SYSTEM FIRST. A DATA_UPDATE row inherits the roles of whoever caused it,
-    // so an AI's own field write matched the agent roster, was classed as its work,
-    // and appeared in the trail as an entry titled "Data updated" — twice,
-    // while the toggle below still offered to reveal two others. The row's
-    // activity id is what says it is bookkeeping; the roles say who triggered
-    // the bookkeeping, which is a different question.
     const isSystem = r.activity_id === 'DATA_UPDATE'
     const aiRole = roles.find((x) => AGENTS[x])
     const kind = isSystem ? 'sys' : aiRole ? 'ai' : 'human'
 
-    /**
-     * The value view. `fields[]` is the platform's own typed rendering of the
-     * submission — one entry per configured field with its label, data type and
-     * value — and it is what makes a file field knowable as a file. `data` is
-     * the raw untyped fallback for a row the workflow could not resolve.
-     */
     const fields = Array.isArray(r.fields) && r.fields.length
       ? r.fields
       : Object.entries(r.data || {}).map(([k, v]) => ({ field_id: k, label: '', data_type: '', value: v }))
@@ -232,14 +175,10 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
     const byBase = new Map()
     for (const f of fields) {
       const base = baseFieldId(f.field_id)
-      // `_system` is the platform's own marker on every submission.
       if (base === '_system') continue
       if (!byBase.has(base)) byBase.set(base, f)
     }
 
-    // What was attached. This is the answer to "show me that the documents
-    // were captured": the names, from the submission that carried them, each
-    // one openable.
     const docs = []
     for (const [base, f] of byBase) {
       if (!FILE_TYPES.has(f.data_type) && !base.startsWith('doc_')) continue
@@ -248,20 +187,16 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
       }
     }
 
-    // The channel performs these as the system, but the meaningful actor is
-    // the person who typed. "System · Customer Reply" told the reader the
-    // opposite of what happened.
     const isChat = CHAT_ACTS.has(r.activity_id)
-    // Log Contact is where the call lands. Offer the words themselves beside
-    // the summary, because they are not the same thing.
     const hasCall = r.activity_id === 'zk-act-contact' && Boolean(byBase.get('call_transcript')?.value)
     const stage = STAGES.find((s) => s.uid === r.execution_state)
-    // A self-loop — Capture Motor Risk runs inside Document Pending and settles
-    // back into it — is not a move, and printing "→ Document Pending" against
-    // four consecutive entries reads as the lead bouncing.
     const moved = stage && stage.uid !== lastStage
     if (stage) lastStage = stage.uid
 
+    const reasoning = REASONING
+      .map(([k, label]) => [label, byBase.get(k)?.value])
+      .filter(([, v]) => v !== undefined && v !== null && typeof v !== 'object' && String(v).trim() !== '')
+
     return {
       key: r.id ?? i,
       kind: isChat ? 'chat' : kind,
@@ -273,17 +208,11 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
       stage: moved ? stage : null,
       when: when(r.created_at),
       docs,
-      // The reasoning rungs of the chain of thought — the employee's own text.
-      reasoning: REASONING
-        .map(([k, label]) => [label, byBase.get(k)?.value])
-        .filter(([, v]) => v !== undefined && v !== null && typeof v !== 'object' && String(v).trim() !== ''),
-      // Conversation lines stay as plain quotes.
+      reasoning,
+      finding: kind === 'ai' && reasoning.length ? (findingOf(reasoning[0][1]) ?? leadIn(reasoning[0][1])) : null,
       conversation: CONVERSATION
         .map(([k, label]) => [label, byBase.get(k)?.value])
         .filter(([, v]) => v !== undefined && v !== null && typeof v !== 'object' && String(v).trim() !== ''),
-      // The decision's confidence, when the step recorded it — ai_recommendation_confidence
-      // is a real field the advice step writes into the audit data, so it needs
-      // no backend change to reach here.
       confidence: (() => {
         const c = byBase.get('ai_recommendation_confidence')?.value
         const n = c == null ? null : Number(c)
@@ -292,22 +221,7 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
       figures: [...byBase]
         .filter(([base, f]) => MONEY.has(base) && f.value)
         .map(([base, f]) => [base.replace(/_/g, ' '), '₹' + Number(f.value).toLocaleString('en-IN')]),
-
-      /**
-       * EVERYTHING THIS STEP WROTE.
-       *
-       * Twelve fields were rendered as prose and four as money; the other
-       * hundred-odd were invisible. So Capture Motor Risk — which writes engine
-       * capacity, fuel, year, NCB, previous insurer, policy number, IDV and the
-       * add-ons — showed as a heading and a timestamp, and the only way to see
-       * what an agent had actually decided was to open the Lead file and guess
-       * which values came from that step.
-       *
-       * This is not the model's internal reasoning; that is recorded on the row
-       * (ai_reasoning, ai_tool_calls) and the audit endpoint does not return it.
-       * It is the next best and arguably more useful thing: the decision it
-       * committed, field by field, against the step that made it.
-       */
+      // Everything this step wrote, field by field.
       wrote: [...byBase]
         .filter(([base]) => !SHOWN_ELSEWHERE.has(base) && !base.startsWith('doc_'))
         .map(([base, f]) => [f.label || base.replace(/_/g, ' '), short(f)])
@@ -315,31 +229,15 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
     }
   })
 
-  /**
-   * THE CONVERSATION IS ONE THING, NOT NINE.
-   *
-   * Every WhatsApp turn was its own entry — "Customer Reply", "Customer
-   * Reply", "Customer Reply", "Answer the Customer" — each with a heading, an
-   * actor and a quote box, so a four-message exchange occupied more of the
-   * trail than the entire underwriting chain. A resend made it worse: the same
-   * sentence printed four times because the customer sent it four times.
-   *
-   * A contiguous run of chat turns now collapses to one entry that says how
-   * many messages, shows the last of them, and opens the thread. The trail goes
-   * back to being a list of decisions, and the conversation goes back to being
-   * a conversation.
-   *
-   * Contiguous, not global: a second exchange after underwriting is a separate
-   * episode in this lead's story and should read as one.
-   */
+  // THE CONVERSATION IS ONE THING, NOT NINE. A contiguous run of chat turns
+  // collapses to one entry that says how many messages, shows the last of
+  // them, and opens the thread.
   const grouped = []
   for (const it of items) {
     const last = grouped[grouped.length - 1]
     if (it.isChat && last && last.isChat) {
       last.count += 1
       last.when = it.when
-      // Keep the newest line as the preview — an operator scanning the trail
-      // wants where the conversation GOT to, not where it started.
       if (it.conversation.length) last.conversation = it.conversation
       last.docs = last.docs.concat(it.docs)
       continue
@@ -348,65 +246,79 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
   }
 
   const sysCount = grouped.filter((it) => it.kind === 'sys').length
-  const visible = showSys ? grouped : grouped.filter((it) => it.kind !== 'sys')
+  const visible = (showSys ? grouped : grouped.filter((it) => it.kind !== 'sys'))
+  const listed = newestFirst ? [...visible].reverse() : visible
 
   return (
     <>
-      {sysCount ? (
-        <button type="button" className="tl__toggle" onClick={() => setShowSys((v) => !v)}>
-          {showSys ? 'Hide' : 'Show'} {sysCount} system update{sysCount === 1 ? '' : 's'}
-        </button>
-      ) : null}
+      <ol className={'tl' + (newestFirst ? ' tl--newest' : '')}>
+        {listed.map((it, idx) => (
+          <li key={it.key} className={'tl__item tl__item--' + it.kind + (idx === 0 && newestFirst ? ' is-latest' : '')}>
+            {/* THE WORKER IS THE NODE. The face on the rail says who did it
+                before a word is read: a machine wears its role icon, a person
+                their initials, the customer the WhatsApp mark. */}
+            <div className="tl__node">
+              {it.kind === 'sys' ? (
+                <span className="tl__sysdot" aria-hidden="true" />
+              ) : it.isChat && !it.agentKey ? (
+                <span className="tl__wanode" aria-hidden="true"><Icon name="whatsapp" size={16} /></span>
+              ) : it.agentKey ? (
+                <AgentChip agentKey={it.agentKey} size="md" showName={false} onOpen={onOpenAgent} />
+              ) : (
+                <span className={'avatar avatar--' + toneFor(it.actor)} aria-hidden="true">{initials(it.actor)}</span>
+              )}
+            </div>
 
-      <ol className="tl">
-        {visible.map((it) => (
-          <li key={it.key} className={'tl__item tl__item--' + it.kind}>
-            <span className="tl__dot" aria-hidden="true" />
             <div className="tl__body">
               <div className="tl__head">
-                {it.isChat ? (
-                  <span className="tl__wa">
-                    <svg viewBox="0 0 16 16" aria-hidden="true">
-                      <path d="M8 1.6a6.3 6.3 0 0 0-5.4 9.5L1.7 14.4l3.4-.9A6.3 6.3 0 1 0 8 1.6z"
-                            fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
-                      <path d="M5.7 5.6c.5-.1.7.1.9.5l.3.7c.1.2 0 .4-.1.5l-.3.3c-.1.1-.2.3-.1.4a3.4 3.4 0 0 0 1.6 1.6c.2.1.3 0 .4-.1l.3-.3c.2-.2.3-.2.5-.1l.8.4c.4.2.5.4.4.8-.1.5-.6.9-1.1.9-1.6 0-4-2.4-4-4 0-.5.3-1 .8-1.1z"
-                            fill="currentColor" />
-                    </svg>
-                    WhatsApp
-                  </span>
-                ) : (
+                <div className="tl__title">
                   <strong className="tl__what">{it.what}</strong>
-                )}
-                {it.count > 1 ? <span className="tl__n">{it.count} messages</span> : null}
-                {it.stage && !it.isChat ? <span className="tl__stage">→ {it.stage.name}</span> : null}
-              </div>
-              {/* The worker, as a face. Recognition down a column beats
-                  reading five names to notice it was one agent throughout. */}
-              <div className="tl__meta">
-                {it.kind === 'sys'
-                  ? <span className="tl__who tl__who--sys">system</span>
-                  : it.isChat && !it.agentKey
-                    ? <span className="tl__who tl__who--cust">the customer</span>
-                    : <AgentChip agentKey={it.agentKey} name={it.actor} onOpen={onOpenAgent} />}
-                <span className="tl__when">{it.when}</span>
-                {it.isChat && onOpenChat ? (
-                  <button type="button" className="tl__open" onClick={onOpenChat}>
-                    Open thread
-                  </button>
-                ) : null}
-                {it.hasCall && onOpenCall ? (
-                  <button type="button" className="tl__open" onClick={onOpenCall}>
-                    Hear the call
-                  </button>
-                ) : null}
+                  {it.count > 1 ? <span className="pill">{it.count} messages</span> : null}
+                  {it.stage && !it.isChat ? (
+                    <span className="tl__stage"><Icon name="arrowRight" size={12} />{it.stage.name}</span>
+                  ) : null}
+                </div>
+                <span className="tl__when" title={it.when.abs}>{it.when.rel}<em> · {it.when.abs}</em></span>
               </div>
 
-              {/* What was received, named and openable. The count is stated
-                  rather than left to be inferred from a list — "3 documents
-                  received" is the sentence the operator is looking for. */}
+              <div className="tl__meta">
+                {it.kind === 'sys'
+                  ? <span className="tl__who">platform</span>
+                  : it.isChat && !it.agentKey
+                    ? <span className="tl__who tl__who--cust">the customer</span>
+                    : <span className="tl__who">{it.actor}{it.agentKey ? <span className="tl__aitag">AI</span> : null}</span>}
+              </div>
+
+              {/* The finding — the one sentence that answers "what did it
+                  conclude" — as the entry's body. */}
+              {it.finding ? (
+                <p className="tl__finding">
+                  {mdRuns(it.finding).map((r, j) => (r.b ? <b key={j}>{r.t}</b> : <span key={j}>{r.t}</span>))}
+                </p>
+              ) : null}
+
+              {/* A human step's reason, and an AI step whose reasoning has
+                  no clean first sentence, stay as a quote. */}
+              {it.kind !== 'ai'
+                ? it.reasoning.map(([label, v]) => (
+                    <div className="tl__say" key={label}>
+                      <span className="tl__saylabel">{label}</span>
+                      <ClampText text={String(v)} title={`${label} — ${it.what}`} lines={2} threshold={120} />
+                    </div>
+                  ))
+                : null}
+
+              {it.conversation.map(([label, v]) => (
+                <div className="tl__say tl__say--chat" key={label}>
+                  <span className="tl__saylabel">{label}</span>
+                  <ClampText text={String(v)} title={`${label} — ${it.what}`} lines={2} threshold={120} />
+                </div>
+              ))}
+
               {it.docs.length ? (
                 <div className="tl__docs">
                   <span className="tl__docshead">
+                    <Icon name="file" size={13} />
                     {it.docs.length} document{it.docs.length === 1 ? '' : 's'} received
                   </span>
                   <div className="tl__doclist">
@@ -419,12 +331,6 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
                         rel="noreferrer"
                         title={d.original_name}
                       >
-                        <svg viewBox="0 0 14 14" aria-hidden="true">
-                          <path d="M3.5 1.5h4.2L11 4.8v7.7H3.5z" fill="none" stroke="currentColor" strokeWidth="1.2"
-                                strokeLinejoin="round" />
-                          <path d="M7.6 1.6v3.3H11" fill="none" stroke="currentColor" strokeWidth="1.2"
-                                strokeLinejoin="round" />
-                        </svg>
                         {d.slot}
                       </a>
                     ))}
@@ -432,39 +338,6 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
                 </div>
               ) : null}
 
-              {/* THE CHAIN OF THOUGHT. For an AI step, the reasoning is not a
-                  loose quote — it is how the employee reached the decision, so
-                  it renders as the chain: what it checked, what it reasoned,
-                  what it decided. This is the answer to "why did it do that",
-                  which is the first thing a person needs before trusting or
-                  overriding a machine. */}
-              {it.kind === 'ai' && it.reasoning.length ? (
-                <ChainOfThought
-                  reasoning={it.reasoning}
-                  confidence={it.confidence}
-                  decided={{ what: it.what, stage: it.stage ? it.stage.name : null }}
-                />
-              ) : null}
-
-              {/* A human step's reason, and the AI step's reasoning when it is
-                  not the story's actor (rare), stay as a plain quote. */}
-              {it.kind !== 'ai'
-                ? it.reasoning.map(([label, v]) => (
-                    <div className="tl__say" key={label}>
-                      <span className="tl__saylabel">{label}</span>
-                      <ClampText text={String(v)} title={`${label} — ${it.what}`} lines={2} threshold={120} />
-                    </div>
-                  ))
-                : null}
-
-              {/* What was said to and by the customer — always a plain quote. */}
-              {it.conversation.map(([label, v]) => (
-                <div className="tl__say" key={label}>
-                  <span className="tl__saylabel">{label}</span>
-                  <ClampText text={String(v)} title={`${label} — ${it.what}`} lines={2} threshold={120} />
-                </div>
-              ))}
-
               {it.figures.length ? (
                 <div className="tl__figs">
                   {it.figures.map(([k, v]) => (
@@ -473,23 +346,55 @@ export default function Timeline({ rows, onOpenAgent, onOpenChat, onOpenCall })
                 </div>
               ) : null}
 
-              {/* Folded, because most steps write a lot and the trail has to
-                  stay readable as a story. Open it and the step becomes an
-                  itemised account of what it decided. */}
-              {it.wrote.length ? (
-                <details className="tl__wrote">
-                  <summary>{it.wrote.length} field{it.wrote.length === 1 ? '' : 's'} written</summary>
-                  <dl>
-                    {it.wrote.map(([k, v]) => (
-                      <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
-                    ))}
-                  </dl>
-                </details>
+              {/* ONE FOOTER ROW: the chain of thought, what was written, the
+                  call, the thread. These used to stack as three rows of blue
+                  links under every entry. */}
+              {(it.kind === 'ai' && it.reasoning.length) || it.wrote.length || (it.isChat && onOpenChat) || (it.hasCall && onOpenCall) ? (
+                <div className="tl__foot">
+                  {it.kind === 'ai' && it.reasoning.length ? (
+                    <ChainOfThought
+                      reasoning={it.reasoning}
+                      confidence={it.confidence}
+                      decided={{ what: it.what, stage: it.stage ? it.stage.name : null }}
+                      showFinding={false}
+                    />
+                  ) : null}
+                  {it.wrote.length ? (
+                    <details className="tl__wrote">
+                      <summary>
+                        <Icon name="list" size={13} />
+                        {it.wrote.length} field{it.wrote.length === 1 ? '' : 's'} written
+                        <Icon name="chevronDown" size={12} className="tl__wcaret" />
+                      </summary>
+                      <dl>
+                        {it.wrote.map(([k, v]) => (
+                          <div key={k}><dt>{k}</dt><dd>{v}</dd></div>
+                        ))}
+                      </dl>
+                    </details>
+                  ) : null}
+                  {it.isChat && onOpenChat ? (
+                    <button type="button" className="tl__open" onClick={onOpenChat}>
+                      <Icon name="whatsapp" size={13} /> Open thread
+                    </button>
+                  ) : null}
+                  {it.hasCall && onOpenCall ? (
+                    <button type="button" className="tl__open" onClick={onOpenCall}>
+                      <Icon name="phone" size={13} /> Read the call
+                    </button>
+                  ) : null}
+                </div>
               ) : null}
             </div>
           </li>
         ))}
       </ol>
+
+      {sysCount ? (
+        <button type="button" className="tl__toggle" onClick={() => setShowSys((v) => !v)}>
+          {showSys ? 'Hide' : 'Show'} {sysCount} platform update{sysCount === 1 ? '' : 's'}
+        </button>
+      ) : null}
     </>
   )
 }
diff --git a/src/index.css b/src/index.css
index 782fac4..6c0680f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -56,6 +56,23 @@
   --zk-danger-tint: #fdeceb;
   --zk-danger-line: #f0c2bd;
 
+  /* ── Surfaces ───────────────────────────────────────────────
+     One ground, one card. The page sits on a cool off-white and every
+     bounded region is a white card with a hairline and a whisper of shadow,
+     so the eye reads groups before it reads text. */
+  --zk-ground: #f4f6f9;
+  --zk-card: #ffffff;
+  --zk-card-line: #e4e9ef;
+  --zk-hover: #f7f9fc;
+  --zk-green: #1f9d63;
+  --zk-green-ink: #157347;
+  --zk-green-tint: #e6f6ee;
+  --zk-green-line: #b4e3c9;
+  --zk-violet: #5b4bb7;
+  --zk-violet-tint: #eeebfa;
+  --zk-slate: #5b6b7f;
+  --zk-wa: #0f7b45;
+
   /* ── Shape, depth, motion ────────────────────────────────────
      One scale, used everywhere. The palette above is untouched; every shadow
      below is the brand navy at low alpha, so depth reads as part of the brand
@@ -66,6 +83,9 @@
   --r-lg: 16px;
   --r-xl: 20px;
   --r-pill: 999px;
+  --r-card: 14px;
+  --sh-card: 0 1px 2px rgba(35, 54, 111, 0.04), 0 1px 3px rgba(35, 54, 111, 0.06);
+  --sh-card-hover: 0 1px 2px rgba(35, 54, 111, 0.05), 0 8px 20px -10px rgba(35, 54, 111, 0.18);
 
   --sh-xs: 0 1px 2px rgba(35, 54, 111, 0.05);
   --sh-sm: 0 1px 2px rgba(35, 54, 111, 0.05), 0 2px 6px -2px rgba(35, 54, 111, 0.07);
@@ -141,7 +161,7 @@
      ground — the generic admin-template look. The content ground is white
      now; the sidebar is the only tinted surface, and sections are separated
      by hairlines and space rather than boxed in shadowed cards. */
-  background: var(--zk-white);
+  background: var(--zk-ground);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -159,7 +179,144 @@ body,
 
 body {
   margin: 0;
-  background: var(--zk-white);
+  background: var(--zk-ground);
+}
+
+/* ── Shared primitives ───────────────────────────────────────
+   Used by every screen so a card, an eyebrow or an avatar looks the same
+   wherever it appears. Screen stylesheets style CONTENT; these style the
+   containers. */
+.card {
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-card);
+  box-shadow: var(--sh-card);
+}
+
+/* A small label above a value. Sentence case, quiet, never letter-spaced
+   into a shout. */
+.eyebrow {
+  display: block;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-muted);
+  letter-spacing: 0.01em;
+}
+
+/* Section heading: a real heading at 16-18px, with an optional one-line
+   subtitle. */
+.h-sec {
+  margin: 0;
+  font-size: var(--fs-lg);
+  font-weight: var(--fw-semi);
+  letter-spacing: -0.015em;
+  line-height: var(--lh-tight);
+  color: var(--zk-ink);
+}
+.h-sub {
+  margin: 4px 0 0;
+  font-size: var(--fs-2xs);
+  color: var(--zk-muted);
+  line-height: 1.5;
+}
+
+/* A round face for a person or a customer. */
+.avatar {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-semi);
+  letter-spacing: 0.02em;
+  color: #fff;
+  background: var(--zk-slate);
+  user-select: none;
+}
+.avatar--sm { width: 26px; height: 26px; font-size: 11px; }
+.avatar--lg { width: 44px; height: 44px; font-size: var(--fs-sm); }
+.avatar--blue   { background: var(--zk-blue); }
+.avatar--teal   { background: var(--zk-teal); }
+.avatar--violet { background: var(--zk-violet); }
+.avatar--amber  { background: var(--zk-amber); }
+.avatar--plum   { background: #8a3d6b; }
+.avatar--slate  { background: var(--zk-slate); }
+
+/* Small status pills: product line, channel, stage, tone. */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: var(--r-pill);
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  line-height: 1.5;
+  white-space: nowrap;
+  color: var(--zk-muted);
+  background: var(--zk-line-soft);
+}
+.pill--blue   { color: var(--zk-blue-dark);  background: var(--zk-tint-blue); }
+.pill--teal   { color: var(--zk-teal-ink);   background: var(--zk-teal-tint); }
+.pill--amber  { color: var(--zk-amber-ink);  background: var(--zk-amber-tint); }
+.pill--red    { color: var(--zk-danger-ink); background: var(--zk-danger-tint); }
+.pill--green  { color: var(--zk-green-ink);  background: var(--zk-green-tint); }
+.pill--violet { color: var(--zk-violet);     background: var(--zk-violet-tint); }
+.pill--line   { background: transparent; border: 1px solid var(--zk-line); }
+
+/* Buttons. Three weights, one shape. */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 14px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-line);
+  background: var(--zk-card);
+  color: var(--zk-ink);
+  font: inherit;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
+  line-height: 1.3;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
+}
+.btn:hover { background: var(--zk-hover); border-color: var(--zk-grey); }
+.btn:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
+.btn:disabled { opacity: .55; cursor: default; }
+.btn--primary { background: var(--zk-blue); border-color: var(--zk-blue); color: #fff; }
+.btn--primary:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); }
+.btn--ghost { border-color: transparent; background: transparent; color: var(--zk-blue-dark); }
+.btn--ghost:hover { background: var(--zk-tint-blue); border-color: transparent; }
+.btn--sm { padding: 5px 10px; font-size: var(--fs-2xs); border-radius: var(--r-xs); }
+.btn--danger { color: var(--zk-danger-ink); border-color: var(--zk-danger-line); }
+.btn--danger:hover { background: var(--zk-danger-tint); border-color: var(--zk-danger); }
+
+/* A live dot: something is refreshing or in motion. */
+.live {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: var(--fs-2xs);
+  color: var(--zk-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.live__dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: var(--zk-green);
+  box-shadow: 0 0 0 0 rgba(31, 157, 99, .5);
+  animation: zk-live 2.2s var(--ease) infinite;
+}
+@keyframes zk-live {
+  70% { box-shadow: 0 0 0 7px rgba(31, 157, 99, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(31, 157, 99, 0); }
 }
 
 button,
diff --git a/src/layout/GlobalSearch.jsx b/src/layout/GlobalSearch.jsx
new file mode 100644
index 0000000..4fc16fb
--- /dev/null
+++ b/src/layout/GlobalSearch.jsx
@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { usePortfolio } from '../api/portfolio.jsx'
+import { STAGES } from '../api/config.js'
+import { initials, toneFor } from '../api/display.js'
+import Icon from '../components/Icon.jsx'
+
+/**
+ * Find a lead from anywhere.
+ *
+ * Reads the book the PortfolioProvider already holds — the same rows the
+ * sidebar tallies and the overview count — so this costs no request and can
+ * never disagree with them. Matches on the customer, the business, the
+ * reference and the mobile number, because those are the four things a caller
+ * gives you.
+ */
+export default function GlobalSearch() {
+  const { rows } = usePortfolio()
+  const navigate = useNavigate()
+  const [q, setQ] = useState('')
+  const [open, setOpen] = useState(false)
+  const [cursor, setCursor] = useState(0)
+  const wrap = useRef(null)
+  const input = useRef(null)
+
+  const hits = useMemo(() => {
+    const term = q.trim().toLowerCase()
+    if (term.length < 2) return []
+    const out = []
+    for (const r of rows) {
+      const hay = [r.customer_name, r.entity_name, r.lead_ref, r.mobile, r.motor_reg_no]
+        .filter(Boolean).map((x) => String(x).toLowerCase())
+      if (hay.some((h) => h.includes(term))) out.push(r)
+      if (out.length >= 8) break
+    }
+    return out
+  }, [rows, q])
+
+  // Close on an outside click, and jump to the box on "/".
+  useEffect(() => {
+    function onDown(e) { if (!wrap.current?.contains(e.target)) setOpen(false) }
+    function onKey(e) {
+      if (e.key === '/' && !/input|textarea|select/i.test(document.activeElement?.tagName || '')) {
+        e.preventDefault()
+        input.current?.focus()
+      }
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [])
+
+  function go(r) {
+    const id = r.instance_id ?? r.id
+    setQ(''); setOpen(false)
+    navigate(`/lead/${id}`)
+  }
+
+  function onKeyDown(e) {
+    if (e.key === 'Escape') { setOpen(false); input.current?.blur(); return }
+    if (!hits.length) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setCursor((c) => (c + 1) % hits.length) }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setCursor((c) => (c - 1 + hits.length) % hits.length) }
+    if (e.key === 'Enter') { e.preventDefault(); go(hits[cursor]) }
+  }
+
+  const showList = open && q.trim().length >= 2
+
+  return (
+    <div className={'gs' + (open ? ' is-open' : '')} ref={wrap} role="search">
+      <Icon name="search" className="gs__icon" />
+      <input
+        ref={input}
+        type="search"
+        value={q}
+        placeholder="Search a lead — name, reference, mobile…"
+        aria-label="Search leads"
+        onChange={(e) => { setQ(e.target.value); setCursor(0); setOpen(true) }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={onKeyDown}
+      />
+      <kbd className="gs__kbd" aria-hidden="true">/</kbd>
+
+      {showList ? (
+        <div className="gs__menu" role="listbox">
+          {hits.length ? hits.map((r, i) => {
+            const id = r.instance_id ?? r.id
+            const stage = STAGES.find((s) => s.name === r.current_state_name)
+            return (
+              <button
+                key={id}
+                type="button"
+                role="option"
+                aria-selected={i === cursor}
+                className={'gs__hit' + (i === cursor ? ' is-cursor' : '')}
+                onMouseEnter={() => setCursor(i)}
+                onClick={() => go(r)}
+              >
+                <span className={'avatar avatar--sm avatar--' + toneFor(r.customer_name)}>
+                  {initials(r.customer_name)}
+                </span>
+                <span className="gs__t">
+                  <strong>{r.customer_name || r.lead_ref || `#${id}`}</strong>
+                  <span>{r.lead_ref}{r.mobile ? ` · ${r.mobile}` : ''}</span>
+                </span>
+                <span className={'pill ' + (stage?.kind === 'end' ? '' : stage?.kind === 'needs' ? 'pill--amber' : 'pill--blue')}>
+                  {r.current_state_name}
+                </span>
+              </button>
+            )
+          }) : (
+            <p className="gs__none">No lead matches &ldquo;{q.trim()}&rdquo;.</p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}
diff --git a/src/layout/Shell.css b/src/layout/Shell.css
index 5917e7b..765df21 100644
--- a/src/layout/Shell.css
+++ b/src/layout/Shell.css
@@ -2,62 +2,128 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: var(--zk-tint);
+  background: var(--zk-ground);
 }
 
-/* ── Top bar ───────────────────────────────────────────────── */
+/* ── Top bar ───────────────────────────────────────────────────
+   56px, white, three zones: brand, search, identity. */
 .shell__top {
   position: sticky;
   top: 0;
   z-index: 30;
-  display: flex;
+  display: grid;
+  grid-template-columns: 232px minmax(0, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
   gap: var(--sp-6);
-  height: 72px;
-  padding: 0 var(--sp-7);
-  background: var(--zk-white);
-  border-bottom: 1px solid var(--zk-line);
+  height: 56px;
+  padding: 0 var(--sp-5) 0 var(--sp-5);
+  background: var(--zk-card);
+  border-bottom: 1px solid var(--zk-card-line);
 }
 
 .shell__brand {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
   min-width: 0;
 }
 
 .shell__brand img {
-  height: 30px;
+  height: 26px;
   width: auto;
   display: block;
+  border-radius: 4px;
 }
 
 .shell__brandtext {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  line-height: 1.2;
-  padding-left: 16px;
+  padding-left: 12px;
   border-left: 1px solid var(--zk-line);
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-semi);
+  letter-spacing: -0.01em;
+  color: var(--zk-ink);
+  white-space: nowrap;
 }
 
-.shell__brandtext strong {
-  font-size: var(--fs-md);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.012em;
+/* ── Global search ───────────────────────────────────────────── */
+.gs {
+  position: relative;
+  justify-self: center;
+  width: min(100%, 520px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 10px 0 12px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-ground);
+  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
+}
+.gs:hover { border-color: var(--zk-line); }
+.gs:focus-within { background: var(--zk-card); border-color: var(--zk-blue); box-shadow: var(--ring); }
+.gs__icon { flex: none; color: var(--zk-grey); }
+.gs:focus-within .gs__icon { color: var(--zk-blue); }
+.gs input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  font: inherit;
+  font-size: var(--fs-xs);
   color: var(--zk-ink);
 }
-
-.shell__brandtext span {
-  font-size: var(--fs-3xs);
-  font-weight: 400;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.gs input::placeholder { color: var(--zk-grey); }
+.gs input::-webkit-search-cancel-button { cursor: pointer; }
+.gs__kbd {
+  flex: none;
+  font: inherit;
+  font-size: 11px;
+  line-height: 1;
+  padding: 3px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--zk-line);
+  background: var(--zk-card);
   color: var(--zk-grey);
 }
+.gs:focus-within .gs__kbd { display: none; }
 
-/* ── Body ──────────────────────────────────────────────────── */
+.gs__menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  padding: 6px;
+  border-radius: var(--r-md);
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
+  box-shadow: var(--sh-lg);
+  animation: zk-rise 0.14s var(--ease) both;
+}
+.gs__hit {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: var(--r-sm);
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: var(--zk-ink);
+  cursor: pointer;
+}
+.gs__hit.is-cursor { background: var(--zk-tint-blue); }
+.gs__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
+.gs__t strong { font-size: var(--fs-xs); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gs__t span { font-size: var(--fs-2xs); color: var(--zk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gs__none { margin: 0; padding: 14px 12px; font-size: var(--fs-2xs); color: var(--zk-muted); }
+
+/* ── Body ────────────────────────────────────────────────────── */
 .shell__body {
   display: flex;
   flex: 1;
@@ -67,136 +133,196 @@
 
 .shell__nav {
   position: sticky;
-  top: 72px;
+  top: 56px;
   align-self: flex-start;
-  width: 264px;
+  width: 248px;
   flex: none;
-  min-height: calc(100vh - 72px);
-  max-height: calc(100vh - 72px);
+  min-height: calc(100vh - 56px);
+  max-height: calc(100vh - 56px);
   overflow-y: auto;
   overscroll-behavior: contain;
-  background: var(--zk-tint);
-  border-right: 1px solid var(--zk-line);
-  padding: var(--sp-6) var(--sp-4) var(--sp-8);
+  background: var(--zk-card);
+  border-right: 1px solid var(--zk-card-line);
+  padding: var(--sp-4) var(--sp-3) var(--sp-5);
   display: flex;
   flex-direction: column;
+  gap: var(--sp-5);
 }
 
+.shell__navtop { display: flex; flex-direction: column; gap: 2px; }
+
 .shell__navlabel {
-  margin: 0 0 var(--sp-3);
-  padding: 0 var(--sp-3);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.shell__group + .shell__group {
-  margin-top: var(--sp-7);
-}
-
-/* The stage list is drawn as a rail with a node per state: the sidebar should
-   look like the pipeline it represents, not like a list of links. */
-.shell__stages {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-1);
-}
-
-.shell__stages::before {
-  content: '';
-  position: absolute;
-  left: 18px;
-  top: 20px;
-  bottom: 20px;
-  width: 2px;
-  border-radius: var(--r-pill);
-  background: linear-gradient(180deg, var(--zk-line) 0%, var(--zk-line-soft) 100%);
-}
-
-.shell__stage {
-  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--sp-2);
-  padding: var(--sp-3) var(--sp-3) var(--sp-3) 40px;
-  border-radius: var(--r-md);
+  gap: 8px;
+  margin: 0 0 6px;
+  padding: 0 var(--sp-3);
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-grey);
+}
+
+.shell__group { display: flex; flex-direction: column; }
+
+.shell__stages {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* One shape for every nav row: icon, label, count. */
+.shell__stage,
+.shell__today {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px var(--sp-3);
+  border-radius: var(--r-sm);
   text-decoration: none;
   color: var(--zk-muted);
   font-size: var(--fs-xs);
-  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
+  font-weight: var(--fw-medium);
+  line-height: 1.35;
+  transition: background var(--t-fast), color var(--t-fast);
 }
+.shell__ico { flex: none; color: var(--zk-grey); transition: color var(--t-fast); }
+.shell__stage:hover,
+.shell__today:hover { background: var(--zk-hover); color: var(--zk-ink); }
+.shell__stage:hover .shell__ico,
+.shell__today:hover .shell__ico { color: var(--zk-muted); }
 
-.shell__stage::before {
-  content: '';
-  position: absolute;
-  left: 13px;
-  top: 50%;
-  width: 12px;
-  height: 12px;
-  margin-top: -6px;
-  border-radius: 50%;
-  background: var(--zk-white);
-  border: 2px solid var(--zk-line);
-  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
-}
-
-.shell__stage:hover {
-  background: var(--zk-tint);
-  color: var(--zk-ink);
-}
-
-.shell__stage:hover::before {
-  border-color: var(--zk-blue-light);
-}
-
-.shell__stage.is-active {
+.shell__stage.is-active,
+.shell__today.is-active {
   background: var(--zk-tint-blue);
   color: var(--zk-blue-dark);
-  font-weight: 500;
 }
-
-.shell__stage.is-active::before {
+.shell__stage.is-active .shell__ico,
+.shell__today.is-active .shell__ico { color: var(--zk-blue); }
+.shell__stage.is-active::before,
+.shell__today.is-active::before {
+  content: '';
+  position: absolute;
+  left: -12px;
+  top: 7px;
+  bottom: 7px;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
   background: var(--zk-blue);
-  border-color: var(--zk-blue);
-  box-shadow: 0 0 0 4px rgba(33, 103, 174, 0.14);
 }
 
 /* Queues where the machine stops and a person decides. */
-.shell__stage.is-needed .shell__stagename {
-  font-weight: 500;
-  color: var(--zk-ink);
-}
+.shell__stage.is-needed { color: var(--zk-ink); }
+.shell__stage.is-needed .shell__ico { color: var(--zk-amber); }
+.shell__stage.is-needed.is-active .shell__ico { color: var(--zk-blue); }
 
-.shell__stage.is-needed.is-active .shell__stagename {
+.shell__stagename { flex: 1; min-width: 0; }
+
+.shell__stage.is-empty { color: var(--zk-grey); font-weight: var(--fw-normal); }
+.shell__stage.is-empty .shell__ico { color: var(--zk-line); }
+
+/* ── Queue tallies ───────────────────────────────────────────── */
+.shell__tally { display: flex; align-items: center; gap: 6px; flex: none; }
+
+.shell__n {
+  min-width: 22px;
+  padding: 1px 7px;
+  border-radius: var(--r-pill);
+  text-align: center;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-semi);
+  font-variant-numeric: tabular-nums;
   color: var(--zk-blue-dark);
+  background: var(--zk-tint-blue);
+}
+.shell__stage.is-needed .shell__n { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
+.shell__stage.is-active .shell__n { color: #fff; background: var(--zk-blue); }
+.shell__n.is-zero { color: var(--zk-grey); background: transparent; font-weight: var(--fw-normal); }
+
+.shell__auto {
+  font-style: normal;
+  font-size: var(--fs-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--zk-blue-mid);
+}
+.shell__auto::after { content: '·'; margin-left: 5px; color: var(--zk-line); }
+
+.shell__urgent { width: 6px; height: 6px; border-radius: 50%; background: var(--zk-danger); flex: none; }
+
+.shell__grouptally {
+  font-size: 11px;
+  font-weight: var(--fw-semi);
+  font-variant-numeric: tabular-nums;
+  color: #fff;
+  background: var(--zk-amber);
+  border-radius: var(--r-pill);
+  padding: 1px 7px;
 }
 
-/* Stage names wrap rather than truncate: "Referred to Underwriting" is the one
-   queue a person has to find, and it is also the longest label. */
-.shell__stagename {
-  min-width: 0;
-  line-height: 1.35;
+/* ── Closed, folded ──────────────────────────────────────────── */
+.shell__closed > summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  list-style: none;
+  padding: 6px var(--sp-3);
+  border-radius: var(--r-sm);
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-grey);
+}
+.shell__closed > summary::-webkit-details-marker { display: none; }
+.shell__closed > summary:hover { color: var(--zk-muted); background: var(--zk-hover); }
+.shell__closed > summary b {
+  margin-left: auto;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--zk-grey);
+}
+.shell__caret { transition: transform var(--t-fast); color: var(--zk-grey); }
+.shell__closed[open] .shell__caret { transform: rotate(90deg); }
+.shell__closed .shell__stages { margin-top: 4px; }
+
+/* ── AI team, at the foot ─────────────────────────────────────── */
+.shell__team {
+  margin-top: auto;
+  padding: var(--sp-4) var(--sp-3) 0;
+  border-top: 1px solid var(--zk-line-soft);
+}
+.shell__team .shell__navlabel { padding: 0; }
+.shell__teamrow { display: flex; flex-wrap: wrap; gap: 4px; }
+.shell__teamnote {
+  display: block;
+  margin-top: 8px;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--zk-grey);
 }
 
+/* ── Main ────────────────────────────────────────────────────── */
 .shell__main {
   flex: 1;
   min-width: 0;
-  background: var(--zk-white);
   width: 100%;
-  max-width: 1460px;
+  max-width: 1440px;
   margin: 0 auto;
-  padding: 30px 34px 76px;
+  padding: var(--sp-6) var(--sp-7) var(--sp-9);
+}
+
+/* ── Narrow viewports: the rail lies down and scrolls ────────── */
+@media (max-width: 1100px) {
+  .shell__top { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); }
+  .shell__brandtext { display: none; }
 }
 
-/* ── Narrow viewports: the rail lies down and scrolls ──────── */
 @media (max-width: 900px) {
-  .shell__body {
-    flex-direction: column;
-  }
+  .shell__top { grid-template-columns: auto auto; }
+  .gs { display: none; }
+
+  .shell__body { flex-direction: column; }
 
   .shell__nav {
     position: static;
@@ -204,167 +330,21 @@
     min-height: 0;
     max-height: none;
     border-right: 0;
-    border-bottom: 1px solid var(--zk-line);
-    padding: 14px 16px 16px;
-  }
-
-  .shell__stages {
+    border-bottom: 1px solid var(--zk-card-line);
+    padding: 10px 14px;
     flex-direction: row;
-    overflow-x: auto;
-    padding-bottom: 4px;
+    flex-wrap: wrap;
+    gap: 8px;
   }
-
-  /* Laid out horizontally the stages are a scrolling strip of pills, and a rail
-     behind them would just be a line struck through the row. */
-  .shell__stages::before {
-    display: none;
-  }
-
-  .shell__stage {
-    padding: 8px 14px;
+  .shell__navtop, .shell__group, .shell__closed { display: contents; }
+  .shell__navlabel, .shell__team, .shell__closed > summary { display: none; }
+  .shell__stages { flex-direction: row; flex-wrap: wrap; gap: 6px; }
+  .shell__stage, .shell__today {
+    padding: 6px 12px;
     white-space: nowrap;
-    background: var(--zk-white);
     border: 1px solid var(--zk-line);
+    background: var(--zk-card);
   }
-
-  .shell__stage::before {
-    display: none;
-  }
-
-  .shell__main {
-    padding: 22px 18px 56px;
-  }
+  .shell__stage.is-active::before, .shell__today.is-active::before { display: none; }
+  .shell__main { padding: 18px 16px 48px; }
 }
-
-/* The way back to the overview. It sits above "Add a lead" because reading
-   the book is the commoner act — most sessions start by looking, not filing. */
-.shell__today {
-  display: block;
-  margin: 0 0 8px;
-  padding: 9px 12px;
-  border-radius: var(--r-sm);
-  font-size: var(--fs-xs);
-  font-weight: 500;
-  color: var(--zk-ink);
-  text-decoration: none;
-  transition: background .12s, color .12s;
-}
-.shell__today:hover { background: var(--zk-tint); }
-.shell__today.is-active { background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
-
-/* ── Queue tallies ─────────────────────────────────────────────────────────
-   Three numbers, deliberately unequal in weight, because they are unequal in
-   importance: what needs YOU, what an agent holds, and whether anything in
-   there is about to lapse. */
-.shell__tally {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: none;
-}
-
-/* What is waiting on a person. The only figure with full contrast. */
-.shell__n {
-  min-width: 20px;
-  padding: 1px 6px;
-  border-radius: var(--r-pill);
-  text-align: center;
-  font-size: var(--fs-2xs);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-blue-dark);
-  background: var(--zk-tint-blue);
-}
-
-/* Zero is shown, not hidden. "Nothing here" is an answer, and a queue that
-   disappears when it empties makes the sidebar move under the cursor. */
-.shell__n.is-zero {
-  color: var(--zk-grey);
-  background: transparent;
-  font-weight: 400;
-}
-
-/* What an agent is carrying. Present, quiet, and never added to the badge —
-   it is in the queue, it is not your work. */
-.shell__auto {
-  font-style: normal;
-  font-size: var(--fs-2xs);
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-blue-mid);
-}
-.shell__auto::after {
-  content: '·';
-  margin-left: 5px;
-  color: var(--zk-line);
-}
-
-/* A renewal inside a week sitting in this queue. */
-.shell__urgent {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--zk-amber);
-  flex: none;
-}
-
-.shell__stage.is-empty { color: var(--zk-grey); }
-.shell__stage.is-empty::before { border-color: var(--zk-line-soft); }
-.shell__stage.is-empty.is-needed .shell__stagename { color: var(--zk-muted); font-weight: 400; }
-
-/* The one number worth carrying on a group heading: everything this role has
-   to clear, across its queues. */
-.shell__navlabel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.shell__grouptally {
-  font-size: var(--fs-2xs);
-  font-weight: 600;
-  letter-spacing: 0;
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-white);
-  background: var(--zk-blue);
-  border-radius: var(--r-pill);
-  padding: 1px 7px;
-}
-
-/* ── Closed, folded ───────────────────────────────────────────────────────
-   Three of the twelve queues, opened about once a week. */
-.shell__closed { margin-top: 22px; }
-
-.shell__closed > summary {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  cursor: pointer;
-  list-style: none;
-  padding: 0 10px 10px;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-.shell__closed > summary::-webkit-details-marker { display: none; }
-.shell__closed > summary:hover { color: var(--zk-muted); }
-.shell__closed > summary b {
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0;
-  font-variant-numeric: tabular-nums;
-  color: var(--zk-grey);
-}
-.shell__closed > summary::after {
-  content: '';
-  order: -1;
-  width: 5px; height: 5px;
-  border-right: 1.5px solid currentColor;
-  border-bottom: 1.5px solid currentColor;
-  transform: rotate(-45deg);
-  transition: transform var(--t-fast);
-}
-.shell__closed[open] > summary::after { transform: rotate(45deg); }
diff --git a/src/layout/Shell.jsx b/src/layout/Shell.jsx
index 64ef4f7..d2ba376 100644
--- a/src/layout/Shell.jsx
+++ b/src/layout/Shell.jsx
@@ -1,8 +1,15 @@
+import { useState } from 'react'
 import { NavLink, Outlet } from 'react-router-dom'
 import { NAV_GROUPS } from '../api/config.js'
+import { AGENTS } from '../api/agents.js'
 import { rolesOf, visibleStages } from '../api/permissions.js'
 import { useStageCounts } from '../api/portfolio.jsx'
 import { useZino } from '../api/provider.jsx'
+import AgentCard from '../components/AgentCard.jsx'
+import AgentChip from '../components/AgentChip.jsx'
+import Icon from '../components/Icon.jsx'
+import { KIND_ICON } from '../api/display.js'
+import GlobalSearch from './GlobalSearch.jsx'
 import UserMenu from './UserMenu.jsx'
 import logo from '../assets/brand/zurich_logo.webp'
 import './Shell.css'
@@ -13,22 +20,13 @@ import './Shell.css'
  * is not the question anyone signing in has; these answer "is anything waiting
  * on me?". Queues that need a person are named by what they want done.
  *
- * IT CARRIES COUNTS NOW. It used not to, on the reasoning that a tally could
- * only come from a second full list call that would then disagree with the
- * queue's own total. That was right about the cost and wrong about the
- * conclusion — with no numbers, the only way to learn whether anything is
- * waiting on you is to open all nine queues in turn, which is precisely the
- * question navigation exists to answer. The overview's existing fetch moved
- * into PortfolioProvider and both surfaces read it, so this is one call fewer
- * than before rather than one more.
+ * The counts come from PortfolioProvider — one fetch shared with the overview,
+ * so the two cannot disagree. The badge counts leads whose PHASE needs a
+ * person, not leads in the state (see phaseOf); a dot marks a queue holding a
+ * renewal inside a week.
  *
- * The badge counts leads whose PHASE needs a person, not leads in the state —
- * see phaseOf. A dot marks a queue holding a renewal inside a week, which is
- * the only reason to open one queue before another.
- *
- * The closed states are folded away. They are three of the twelve, they are
- * reporting rather than work, and at equal weight they made the live queues
- * harder to find.
+ * The closed states are folded away: three of the twelve, reporting rather
+ * than work, and at equal weight they made the live queues harder to find.
  */
 export default function Shell() {
   const { user } = useZino()
@@ -37,6 +35,7 @@ export default function Shell() {
   // lives on the overview, which counts the whole book for everyone.
   const stages = visibleStages(roles)
   const { counts, ready } = useStageCounts()
+  const [openAgent, setOpenAgent] = useState(null)
 
   // One queue row. Extracted because the live groups and the folded Closed
   // group render the same thing and drifted apart when they did not.
@@ -54,12 +53,13 @@ export default function Shell() {
           + (ready && !n && !c.working ? ' is-empty' : '')
         }
       >
+        <Icon name={KIND_ICON[s.kind] || 'list'} className="shell__ico" />
         <span className="shell__stagename">{s.need ?? s.name}</span>
         {ready ? (
           <span className="shell__tally">
             {c.urgent ? <span className="shell__urgent" title={`${c.urgent} expiring within 7 days`} /> : null}
-            {/* The agents' share is shown in the middle dot notation rather
-                than added in: it is in the queue, it is not your work. */}
+            {/* The agents' share is shown apart rather than added in: it is in
+                the queue, it is not your work. */}
             {c.working ? <em className="shell__auto" title={`${c.working} being worked by an agent`}>{c.working}</em> : null}
             <b className={'shell__n' + (n ? '' : ' is-zero')}>{n}</b>
           </span>
@@ -73,35 +73,24 @@ export default function Shell() {
       <header className="shell__top">
         <div className="shell__brand">
           <img src={logo} alt="Zurich Kotak General Insurance" />
-          <div className="shell__brandtext">
-            <strong>Lead Desk</strong>
-            <span>Lead to Policy</span>
-          </div>
+          <span className="shell__brandtext">Lead Desk</span>
         </div>
+        <GlobalSearch />
         <UserMenu />
       </header>
 
       <div className="shell__body">
         <nav className="shell__nav" aria-label="Pipeline">
-          <NavLink
-            to="/"
-            end
-            className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}
-          >
-            Overview
-          </NavLink>
-          <NavLink
-            to="/stage/all"
-            className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}
-          >
-            All leads
-          </NavLink>
-
-          {/* "New lead" used to sit here. A sidebar is for moving between
-              places; filing a lead is an ACTION, and an action in a list of
-              destinations is the one item that does not behave like its
-              neighbours. It lives on the screens where leads are looked at —
-              the overview and the queues — beside the thing it adds to. */}
+          <div className="shell__navtop">
+            <NavLink to="/" end className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}>
+              <Icon name="home" className="shell__ico" />
+              Overview
+            </NavLink>
+            <NavLink to="/stage/all" className={({ isActive }) => 'shell__today' + (isActive ? ' is-active' : '')}>
+              <Icon name="list" className="shell__ico" />
+              All leads
+            </NavLink>
+          </div>
 
           {NAV_GROUPS.filter((g) => g.kind !== 'end').map((group) => {
             const inGroup = stages.filter((s) => s.kind === group.kind)
@@ -120,11 +109,11 @@ export default function Shell() {
             )
           })}
 
-          {/* Closed. Folded, because it is reporting rather than work — and at
-              equal weight with the live queues it made them harder to find. */}
+          {/* Closed. Folded, because it is reporting rather than work. */}
           {stages.some((s) => s.kind === 'end') ? (
             <details className="shell__closed">
               <summary>
+                <Icon name="chevronRight" className="shell__caret" />
                 Closed
                 {ready ? (
                   <b>{stages.filter((s) => s.kind === 'end')
@@ -134,12 +123,26 @@ export default function Shell() {
               <div className="shell__stages">{stages.filter((s) => s.kind === 'end').map(queue)}</div>
             </details>
           ) : null}
+
+          {/* The team that carries the work. Five employees, each one click
+              from what it does and what it may touch. */}
+          <div className="shell__team">
+            <p className="shell__navlabel">AI employees</p>
+            <div className="shell__teamrow">
+              {Object.keys(AGENTS).map((k) => (
+                <AgentChip key={k} agentKey={k} size="md" showName={false} onOpen={setOpenAgent} />
+              ))}
+            </div>
+            <span className="shell__teamnote">Working every open lead. Click one to see its remit.</span>
+          </div>
         </nav>
 
         <main className="shell__main">
           <Outlet />
         </main>
       </div>
+
+      {openAgent ? <AgentCard agentKey={openAgent} onClose={() => setOpenAgent(null)} /> : null}
     </div>
   )
 }
diff --git a/src/layout/UserMenu.css b/src/layout/UserMenu.css
index b3d5912..b126718 100644
--- a/src/layout/UserMenu.css
+++ b/src/layout/UserMenu.css
@@ -1,96 +1,43 @@
-.um {
-  position: relative;
-}
+.um { position: relative; justify-self: end; }
 
 .um__trigger {
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
-  padding: 5px 12px 5px 5px;
+  padding: 4px 10px 4px 4px;
   border-radius: var(--r-pill);
   background: transparent;
   border: 1px solid transparent;
   color: inherit;
   transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
 }
-
-.um__trigger:hover {
-  background: var(--zk-tint);
-  border-color: var(--zk-line);
-}
-
-.um__trigger.is-open {
-  background: var(--zk-tint-blue);
-  border-color: var(--zk-blue-light);
-}
-
-.um__trigger:focus-visible {
-  outline: none;
-  border-color: var(--zk-blue);
-  box-shadow: var(--ring);
-}
-
-.um__avatar {
-  flex: none;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  background: var(--grad-blue);
-  color: var(--zk-white);
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0.03em;
-  box-shadow: var(--sh-xs);
-}
-
-.um__avatar--lg {
-  width: 40px;
-  height: 40px;
-  font-size: var(--fs-xs);
-}
+.um__trigger:hover { background: var(--zk-hover); border-color: var(--zk-card-line); }
+.um__trigger.is-open { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
+.um__trigger:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
 
 .um__id {
   display: flex;
   flex-direction: column;
   text-align: left;
-  line-height: 1.3;
+  line-height: 1.25;
 }
+.um__id strong { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
+.um__id > span { font-size: 11.5px; color: var(--zk-muted); }
 
-.um__id strong {
-  font-size: var(--fs-xs);
-  font-weight: 500;
-}
-
-.um__id > span {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-}
-
-.um__caret {
-  width: 12px;
-  height: 12px;
-  flex: none;
-  color: var(--zk-grey);
-  transition: transform var(--t);
-}
-
-.um__trigger.is-open .um__caret {
-  transform: rotate(180deg);
-}
+.um__caret { flex: none; color: var(--zk-grey); transition: transform var(--t); }
+.um__trigger.is-open .um__caret { transform: rotate(180deg); }
 
 .um__menu {
   position: absolute;
-  top: calc(100% + 10px);
+  top: calc(100% + 8px);
   right: 0;
   z-index: 40;
   min-width: 300px;
-  padding: 7px;
-  border-radius: var(--r-lg);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
+  padding: 6px;
+  border-radius: var(--r-md);
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
   box-shadow: var(--sh-lg);
   transform-origin: top right;
   animation: zk-rise 0.16s var(--ease) both;
@@ -106,56 +53,31 @@
 .um__headid {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
   line-height: 1.35;
   min-width: 0;
 }
-
-.um__headid strong {
-  font-size: var(--fs-xs);
-  font-weight: 500;
-}
-
-.um__headid span {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  overflow-wrap: anywhere;
-}
-
-.um__headid .um__roles {
-  margin-top: 4px;
-  align-self: flex-start;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-  background: var(--zk-tint-blue);
-  border-radius: var(--r-pill);
-  padding: 2px 9px;
-}
+.um__headid strong { font-size: var(--fs-xs); font-weight: var(--fw-medium); }
+.um__headid > span { font-size: var(--fs-2xs); color: var(--zk-muted); overflow-wrap: anywhere; }
+.um__roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
 
 .um__item {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 9px;
   width: 100%;
   text-align: left;
   cursor: pointer;
   font: inherit;
-  font-size: var(--fs-2xs);
-  padding: 10px 11px;
+  font-size: var(--fs-xs);
+  padding: 9px 11px;
   border-radius: var(--r-sm);
   background: none;
   border: 0;
   border-top: 1px solid var(--zk-line-soft);
+  border-radius: 0 0 var(--r-sm) var(--r-sm);
   color: var(--zk-ink);
   transition: background var(--t-fast), color var(--t-fast);
 }
-
-.um__item:hover {
-  background: var(--zk-tint);
-  color: var(--zk-blue-dark);
-}
-
-.um__item:focus-visible {
-  outline: none;
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-}
+.um__item:hover { background: var(--zk-hover); color: var(--zk-blue-dark); }
+.um__item:focus-visible { outline: none; background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
diff --git a/src/layout/UserMenu.jsx b/src/layout/UserMenu.jsx
index 95f17a8..860c8b5 100644
--- a/src/layout/UserMenu.jsx
+++ b/src/layout/UserMenu.jsx
@@ -1,20 +1,15 @@
 import { useEffect, useRef, useState } from 'react'
 import { useZino } from '../api/provider.jsx'
+import { initials, roleLabel } from '../api/display.js'
+import Icon from '../components/Icon.jsx'
 import './UserMenu.css'
 
-/** First letters of the first two words — a name is all we have for an avatar. */
-function initials(user) {
-  const from = user?.name || user?.email || ''
-  const parts = from.replace(/@.*$/, '').split(/[\s._-]+/).filter(Boolean)
-  if (!parts.length) return '?'
-  return (parts[0][0] + (parts[1]?.[0] || '')).toUpperCase()
-}
-
 /**
  * The signed-in identity, with sign-out folded inside it.
  *
  * The role stays visible on the trigger rather than only inside the menu: RBAC is
  * the demo, so who you are signed in as should never take a click to find out.
+ * It reads as a label — "SME underwriter" — never as the stored slug.
  */
 export default function UserMenu() {
   const { user, signOut } = useZino()
@@ -43,7 +38,8 @@ export default function UserMenu() {
   }, [open])
 
   const name = user?.name || user?.email || 'Signed in'
-  const roles = (user?.roles || []).join(', ')
+  const roles = (user?.roles || []).map(roleLabel).filter(Boolean)
+  const who = initials(user?.name || (user?.email || '').replace(/@.*$/, '').replace(/[._-]+/g, ' '))
 
   return (
     <div className="um" ref={wrapRef}>
@@ -55,28 +51,30 @@ export default function UserMenu() {
         aria-haspopup="menu"
         aria-expanded={open}
       >
-        <span className="um__avatar" aria-hidden="true">{initials(user)}</span>
+        <span className="avatar avatar--sm avatar--blue" aria-hidden="true">{who}</span>
         <span className="um__id">
           <strong>{name}</strong>
-          <span>{roles || user?.email}</span>
+          <span>{roles.join(' · ') || user?.email}</span>
         </span>
-        <svg className="um__caret" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true">
-          <path d="M2.5 4.5 6 8l3.5-3.5" fill="none" stroke="currentColor" strokeWidth="1.4"
-                strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
+        <Icon name="chevronDown" size={14} className="um__caret" />
       </button>
 
       {open ? (
         <div className="um__menu" role="menu">
           <div className="um__head">
-            <span className="um__avatar um__avatar--lg" aria-hidden="true">{initials(user)}</span>
+            <span className="avatar avatar--lg avatar--blue" aria-hidden="true">{who}</span>
             <div className="um__headid">
               <strong>{name}</strong>
               {user?.email ? <span>{user.email}</span> : null}
-              {roles ? <span className="um__roles">{roles}</span> : null}
+              {roles.length ? (
+                <span className="um__roles">
+                  {roles.map((r) => <span key={r} className="pill pill--blue">{r}</span>)}
+                </span>
+              ) : null}
             </div>
           </div>
           <button type="button" role="menuitem" className="um__item" onClick={signOut}>
+            <Icon name="signOut" />
             Sign out
           </button>
         </div>
diff --git a/src/pages/Login.css b/src/pages/Login.css
index cabccf7..a83bc25 100644
--- a/src/pages/Login.css
+++ b/src/pages/Login.css
@@ -1,6 +1,6 @@
 .login {
   display: grid;
-  grid-template-columns: 45% 55%;
+  grid-template-columns: minmax(380px, 44%) minmax(0, 1fr);
   min-height: 100%;
 }
 
@@ -9,12 +9,10 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   padding: 40px 48px;
   overflow: hidden;
   color: var(--zk-white);
-  background:
-    linear-gradient(160deg, var(--zk-navy) 0%, #1d4c86 55%, var(--zk-blue) 100%);
+  background: linear-gradient(160deg, var(--zk-navy) 0%, #1d4c86 55%, var(--zk-blue) 100%);
 }
 
 .login__grid {
@@ -31,22 +29,14 @@
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(
-      520px circle at 12% 12%,
-      rgba(84, 149, 207, 0.38),
-      transparent 62%
-    ),
-    radial-gradient(
-      620px circle at 78% 96%,
-      rgba(199, 235, 249, 0.16),
-      transparent 60%
-    );
+    radial-gradient(520px circle at 12% 12%, rgba(84, 149, 207, 0.38), transparent 62%),
+    radial-gradient(620px circle at 78% 96%, rgba(199, 235, 249, 0.16), transparent 60%);
 }
 
 .login__logo {
   position: relative;
   z-index: 1;
-  width: 186px;
+  width: 170px;
   height: auto;
   border-radius: 8px;
 }
@@ -54,153 +44,146 @@
 .login__brand-body {
   position: relative;
   z-index: 1;
-  margin-top: auto;
-  margin-bottom: auto;
+  margin: auto 0;
+  padding: 48px 0 24px;
   max-width: 480px;
 }
 
 .login__badge {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border: 1px solid rgba(199, 235, 249, 0.34);
+  gap: 9px;
+  padding: 6px 14px 6px 10px;
+  border: 1px solid rgba(199, 235, 249, 0.3);
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.08);
   color: var(--zk-cyan);
   font-size: var(--fs-2xs);
-  font-weight: 400;
-  letter-spacing: 0.01em;
+  font-weight: var(--fw-medium);
 }
-
-.login__badge svg {
-  width: 15px;
-  height: 15px;
+.login__badgedot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: #7ee2b8;
+  box-shadow: 0 0 0 0 rgba(126, 226, 184, .6);
+  animation: zk-live 2.2s var(--ease) infinite;
 }
 
 .login__headline {
-  /* Zurich Kotak set their hero in Zurich Sans Light */
-  margin: 26px 0 0;
-  font-size: var(--fs-3xl);
-  font-weight: 300;
-  line-height: 1.16;
-  letter-spacing: -0.01em;
-}
-
-.login__headline-accent {
-  display: block;
-  background: linear-gradient(
-    92deg,
-    #a9dcf6 0%,
-    var(--zk-cyan) 55%,
-    #e9f8ff 100%
-  );
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  margin: 22px 0 0;
+  font-size: 44px;
+  font-weight: 500;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
 }
 
 .login__lede {
-  margin: 16px 0 0;
-  max-width: 430px;
+  margin: 14px 0 0;
+  max-width: 440px;
   text-wrap: balance;
   font-size: var(--fs-md);
   font-weight: 300;
-  line-height: 1.5;
-  color: rgba(255, 255, 255, 0.8);
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.82);
 }
 
 .login__features {
-  margin: 36px 0 0;
+  margin: 34px 0 0;
   padding: 0;
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: 22px;
-}
-
-.login__features li {
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
+  gap: 18px;
 }
+.login__features li { display: flex; align-items: flex-start; gap: 14px; }
 
 .login__feature-icon {
   display: grid;
   place-items: center;
   flex: none;
-  width: 34px;
-  height: 34px;
+  width: 36px;
+  height: 36px;
   border: 1px solid rgba(199, 235, 249, 0.26);
-  border-radius: 9px;
+  border-radius: 10px;
   background: rgba(255, 255, 255, 0.1);
   color: var(--zk-cyan);
 }
 
-.login__feature-icon svg {
-  width: 17px;
-  height: 17px;
-}
-
 .login__features strong {
   display: block;
   font-size: var(--fs-sm);
   font-weight: 500;
-  letter-spacing: 0.005em;
 }
-
 .login__features em {
   display: block;
   margin-top: 3px;
   font-size: var(--fs-xs);
   font-style: normal;
   font-weight: 300;
+  line-height: 1.5;
   color: rgba(255, 255, 255, 0.74);
 }
 
+.login__team {
+  margin-top: 36px;
+  padding-top: 22px;
+  border-top: 1px solid rgba(255, 255, 255, 0.14);
+}
+.login__team > span {
+  display: block;
+  margin-bottom: 10px;
+  font-size: var(--fs-2xs);
+  color: rgba(255, 255, 255, 0.6);
+}
+.login__teamrow { display: flex; flex-wrap: wrap; gap: 6px 14px; }
+.login__teamrow .who__name { color: rgba(255, 255, 255, 0.86); }
+
 /* ── Right form panel ──────────────────────────────────────── */
 .login__panel {
-  display: grid;
-  place-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 22px;
   padding: 40px 24px;
-  background: var(--zk-tint);
+  background: var(--zk-ground);
 }
 
-.login__form-wrap {
+.login__card {
   width: 100%;
-  max-width: 360px;
+  max-width: 440px;
+  padding: 34px 36px 30px;
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-xl);
+  box-shadow: var(--sh-md);
 }
 
-.login__logo--mobile {
-  display: none;
-  margin-bottom: 28px;
-}
+.login__logo--mobile { display: none; margin-bottom: 24px; }
 
 .login__title {
   margin: 0;
   font-size: var(--fs-2xl);
   font-weight: 500;
-  letter-spacing: -0.015em;
+  letter-spacing: -0.02em;
   color: var(--zk-navy);
 }
 
 .login__subtitle {
-  margin: 8px 0 0;
+  margin: 6px 0 0;
   font-size: var(--fs-xs);
-  font-weight: 300;
   color: var(--zk-muted);
 }
 
 .login__form {
-  margin-top: 30px;
+  margin-top: 26px;
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 16px;
 }
 
 .login__field span {
   display: block;
-  margin-bottom: 7px;
+  margin-bottom: 6px;
   font-size: var(--fs-2xs);
   font-weight: 500;
   color: var(--zk-ink);
@@ -210,31 +193,45 @@
   width: 100%;
   padding: 11px 14px;
   border: 1px solid var(--zk-line);
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   background: var(--zk-white);
   font-size: var(--fs-xs);
-  font-weight: 400;
   color: var(--zk-ink);
-  transition:
-    border-color 0.16s ease,
-    box-shadow 0.16s ease;
+  transition: border-color 0.16s ease, box-shadow 0.16s ease;
 }
+.login__field input::placeholder { color: var(--zk-grey); }
+.login__field input:focus { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
 
-.login__field input::placeholder {
+.login__pw { position: relative; }
+.login__pw input { padding-right: 44px; }
+.login__eye {
+  position: absolute;
+  right: 6px; top: 50%;
+  transform: translateY(-50%);
+  display: grid; place-items: center;
+  width: 32px; height: 32px;
+  border: 0; border-radius: 6px;
+  background: none;
   color: var(--zk-grey);
+  cursor: pointer;
 }
-
-.login__field input:focus {
-  outline: none;
-  border-color: var(--zk-blue);
-  box-shadow: 0 0 0 3px rgba(33, 103, 174, 0.14);
-}
+.login__eye:hover { background: var(--zk-hover); color: var(--zk-ink); }
+.login__eye[aria-pressed="true"] { color: var(--zk-blue); }
 
 .login__error {
-  margin: -4px 0 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: -2px 0 0;
+  padding: 10px 12px;
+  border-radius: var(--r-sm);
+  background: var(--zk-danger-tint);
+  border: 1px solid var(--zk-danger-line);
   font-size: var(--fs-2xs);
-  color: var(--zk-danger);
+  line-height: 1.45;
+  color: var(--zk-danger-ink);
 }
+.login__error svg { flex: none; margin-top: 2px; }
 
 .login__submit {
   display: inline-flex;
@@ -244,44 +241,67 @@
   margin-top: 4px;
   padding: 12px 18px;
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--r-sm);
   background: var(--zk-blue);
   color: var(--zk-white);
   font-size: var(--fs-xs);
   font-weight: 500;
   cursor: pointer;
-  transition:
-    background 0.16s ease,
-    box-shadow 0.16s ease;
+  transition: background 0.16s ease, box-shadow 0.16s ease;
 }
+.login__submit:hover:not(:disabled) { background: var(--zk-blue-dark); }
+.login__submit:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(33, 103, 174, 0.28); }
+.login__submit:disabled { opacity: 0.72; cursor: default; }
 
-.login__submit svg {
-  width: 16px;
-  height: 16px;
+/* ── Personas ─────────────────────────────────────────────── */
+.login__personas {
+  margin-top: 26px;
+  padding-top: 20px;
+  border-top: 1px solid var(--zk-line-soft);
 }
+.login__personas-l {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin: 0 0 10px;
+}
+.login__personas-l span { font-size: var(--fs-2xs); font-weight: 500; color: var(--zk-ink); }
+.login__personas-l em { font-size: 11.5px; font-style: normal; color: var(--zk-grey); }
 
-.login__submit:hover:not(:disabled) {
-  background: var(--zk-blue-dark);
-}
+.login__personagrid { display: flex; flex-direction: column; gap: 4px; }
 
-.login__submit:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(33, 103, 174, 0.28);
-}
-
-.login__submit:disabled {
-  opacity: 0.72;
-  cursor: default;
+.persona {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 11px;
+  width: 100%;
+  padding: 7px 10px 7px 7px;
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  color: var(--zk-ink);
+  cursor: pointer;
+  transition: background var(--t-fast), border-color var(--t-fast);
 }
+.persona:hover { background: var(--zk-hover); border-color: var(--zk-card-line); }
+.persona.is-on { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
+.persona:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
+.persona__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
+.persona__t strong { font-size: var(--fs-2xs); font-weight: 500; }
+.persona__t span { font-size: 11.5px; color: var(--zk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.persona__ok { color: var(--zk-blue); }
 
 .login__powered {
-  margin: 26px 0 0;
+  margin: 0;
   text-align: center;
   font-size: var(--fs-2xs);
   font-weight: 300;
   color: var(--zk-grey);
 }
-
 .login__powered span {
   font-weight: 500;
   letter-spacing: 0.06em;
@@ -291,34 +311,13 @@
 
 /* ── Responsive ────────────────────────────────────────────── */
 @media (max-width: 1024px) {
-  .login__brand {
-    padding: 32px;
-  }
-
-  .login__headline {
-    font-size: var(--fs-3xl);
-  }
-
-  .login__lede {
-    font-size: var(--fs-sm);
-  }
+  .login__brand { padding: 32px; }
+  .login__headline { font-size: 38px; }
 }
 
 @media (max-width: 860px) {
-  .login {
-    grid-template-columns: 1fr;
-  }
-
-  .login__brand {
-    display: none;
-  }
-
-  .login__panel {
-    align-content: center;
-    background: var(--zk-white);
-  }
-
-  .login__logo--mobile {
-    display: block;
-  }
+  .login { grid-template-columns: 1fr; }
+  .login__brand { display: none; }
+  .login__logo--mobile { display: block; }
+  .login__card { padding: 26px 22px; }
 }
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index c4148c7..82af900 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,51 +1,64 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useZino } from '../api/provider.jsx'
 import { ORG_ID } from '../api/config.js'
+import { AGENTS } from '../api/agents.js'
+import AgentChip from '../components/AgentChip.jsx'
+import Icon from '../components/Icon.jsx'
 import logo from '../assets/brand/zurich_logo.webp'
 import './Login.css'
 
-const FEATURES = [
+/**
+ * What the console is, said to the person about to use it — not what the
+ * insurer sells. The old panel carried retail copy ("we cover it all"); this is
+ * an operator's tool, and the three lines are the three claims the demo makes.
+ */
+const CLAIMS = [
   {
-    title: 'Instant policy issuance',
-    body: 'No inspection; hassle free policy',
-    icon: (
-      <>
-        <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" />
-        <path d="M14 3v5h5" />
-        <path d="m9.2 14.2 1.9 1.9 3.7-3.7" />
-      </>
-    ),
+    icon: 'bot',
+    title: 'Autonomous by default',
+    body: 'Five AI employees qualify, call, chase, price and check every renewal lead.',
   },
   {
-    title: '24/7 claim assistance',
-    body: 'Making claims simple, transparent, and customer-first',
-    icon: (
-      <>
-        <path d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
-        <path d="M12 7.2V12l3.2 1.9" />
-      </>
-    ),
+    icon: 'user',
+    title: 'A person at the gates',
+    body: 'Documents, the underwriting call and the premium sign-off stay with people.',
   },
   {
-    title: 'A trusted brand',
-    body: 'You can count on Zurich Kotak General Insurance at all times',
-    icon: (
-      <>
-        <path d="M12 3 4.8 5.9v5.4c0 4.3 3 8.3 7.2 9.4 4.2-1.1 7.2-5.1 7.2-9.4V5.9L12 3Z" />
-        <path d="m9.2 12.1 2 2 3.6-3.8" />
-      </>
-    ),
+    icon: 'brain',
+    title: 'Every decision on record',
+    body: 'Each step shows who took it, what it wrote, and the reasoning behind it.',
   },
 ]
 
+/**
+ * Demo sign-ins. These are the accounts listed in README.md for org 84; the
+ * picker only saves typing the address during a walkthrough. No password is
+ * held here — the gateway authenticates every sign-in as it always did, and
+ * anything a persona can do is still decided by the workflow, server-side.
+ */
+const PERSONAS = [
+  { email: 'sanjay.uw@zurichkotak.example',   name: 'Sanjay Bhat',  role: 'SME underwriter',   does: 'Clears or declines referrals', tone: 'blue' },
+  { email: 'arjun.posp@zurichkotak.example',  name: 'Arjun Shetty', role: 'Partner agent',     does: 'Files leads, uploads documents', tone: 'teal' },
+  { email: 'meera.rm@zurichkotak.example',    name: 'Meera Rao',    role: 'Bancassurance RM',  does: 'Files partner-bank leads', tone: 'violet' },
+  { email: 'kavya.csr@zurichkotak.example',   name: 'Kavya Nair',   role: 'Direct sales',      does: 'Files self-serve leads', tone: 'amber' },
+  { email: 'deepa.ops@zurichkotak.example',   name: 'Deepa Iyer',   role: 'Operations',        does: 'Sees every queue, confirms premiums', tone: 'plum' },
+]
+
+function initialsOf(name) {
+  const p = name.split(' ')
+  return (p[0][0] + (p[1]?.[0] || '')).toUpperCase()
+}
+
 export default function Login() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [showPw, setShowPw] = useState(false)
   const [error, setError] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const { signIn } = useZino()
   const navigate = useNavigate()
+  const pwRef = useRef(null)
 
   async function handleSubmit(event) {
     event.preventDefault()
@@ -72,83 +85,69 @@ export default function Login() {
     }
   }
 
+  function pick(p) {
+    setEmail(p.email)
+    setError('')
+    // The address is filled; the password is still theirs to type.
+    pwRef.current?.focus()
+  }
+
+  const picked = PERSONAS.find((p) => p.email === email)
+
   return (
     <main className="login">
       <section className="login__brand">
         <div className="login__grid" aria-hidden="true" />
         <div className="login__glow" aria-hidden="true" />
 
-        <img
-          className="login__logo"
-          src={logo}
-          alt="Zurich Kotak General Insurance"
-        />
+        <img className="login__logo" src={logo} alt="Zurich Kotak General Insurance" />
 
         <div className="login__brand-body">
           <span className="login__badge">
-            <svg
-              viewBox="0 0 24 24"
-              aria-hidden="true"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.6"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M3.2 12.4a8.8 8.8 0 0 1 17.6 0H3.2Z" />
-              <path d="M12 12.4v5.9a2.4 2.4 0 0 0 4.8 0" />
-            </svg>
-            General insurance that has it all
+            <span className="login__badgedot" aria-hidden="true" />
+            Lead to Policy · operator console
           </span>
 
           <h1 className="login__headline">
-            Protecting what
-            <span className="login__headline-accent">
-              matters the most to you
-            </span>
+            Lead Desk
           </h1>
 
           <p className="login__lede">
-            Get tailored insurance for all your needs, cause we cover it all
+            Every motor and SME renewal lead, from the first call to the issued policy —
+            carried by AI employees, with people at the decisions that need one.
           </p>
 
           <ul className="login__features">
-            {FEATURES.map((feature) => (
-              <li key={feature.title}>
+            {CLAIMS.map((c) => (
+              <li key={c.title}>
                 <span className="login__feature-icon" aria-hidden="true">
-                  <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.7"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    {feature.icon}
-                  </svg>
+                  <Icon name={c.icon} size={18} strokeWidth={1.5} />
                 </span>
                 <span>
-                  <strong>{feature.title}</strong>
-                  <em>{feature.body}</em>
+                  <strong>{c.title}</strong>
+                  <em>{c.body}</em>
                 </span>
               </li>
             ))}
           </ul>
+
+          <div className="login__team">
+            <span>The team</span>
+            <div className="login__teamrow">
+              {Object.keys(AGENTS).map((k) => (
+                <AgentChip key={k} agentKey={k} size="md" />
+              ))}
+            </div>
+          </div>
         </div>
       </section>
 
       <section className="login__panel">
-        <div className="login__form-wrap">
-          <img
-            className="login__logo login__logo--mobile"
-            src={logo}
-            alt="Zurich Kotak General Insurance"
-          />
+        <div className="login__card">
+          <img className="login__logo login__logo--mobile" src={logo} alt="Zurich Kotak General Insurance" />
 
           <h2 className="login__title">Sign in</h2>
-          <p className="login__subtitle">
-            Enter your credentials to access your dashboard.
-          </p>
+          <p className="login__subtitle">Use your Lead Desk account for organisation {ORG_ID}.</p>
 
           <form className="login__form" onSubmit={handleSubmit} noValidate>
             <label className="login__field">
@@ -157,7 +156,7 @@ export default function Login() {
                 type="email"
                 name="email"
                 autoComplete="email"
-                placeholder="you@company.com"
+                placeholder="you@zurichkotak.example"
                 value={email}
                 onChange={(event) => setEmail(event.target.value)}
               />
@@ -165,44 +164,69 @@ export default function Login() {
 
             <label className="login__field">
               <span>Password</span>
-              <input
-                type="password"
-                name="password"
-                autoComplete="current-password"
-                placeholder="••••••••"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-              />
+              <div className="login__pw">
+                <input
+                  ref={pwRef}
+                  type={showPw ? 'text' : 'password'}
+                  name="password"
+                  autoComplete="current-password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(event) => setPassword(event.target.value)}
+                />
+                <button
+                  type="button"
+                  className="login__eye"
+                  onClick={() => setShowPw((v) => !v)}
+                  aria-label={showPw ? 'Hide password' : 'Show password'}
+                  aria-pressed={showPw}
+                >
+                  <Icon name="eye" />
+                </button>
+              </div>
             </label>
 
             {error ? (
               <p className="login__error" role="alert">
+                <Icon name="alert" size={14} />
                 {error}
               </p>
             ) : null}
 
             <button className="login__submit" type="submit" disabled={submitting}>
-              {submitting ? 'Signing in…' : 'Sign in'}
-              {submitting ? null : (
-                <svg
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.9"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M4 12h15m0 0-5.5-5.5M19 12l-5.5 5.5" />
-                </svg>
-              )}
+              {submitting ? 'Signing in…' : picked ? `Sign in as ${picked.name.split(' ')[0]}` : 'Sign in'}
+              {submitting ? null : <Icon name="arrowRight" />}
             </button>
           </form>
 
-          <p className="login__powered">
-            Powered by <span>zino</span>
-          </p>
+          <div className="login__personas">
+            <p className="login__personas-l">
+              <span>Demo personas</span>
+              <em>pick one to fill the email</em>
+            </p>
+            <div className="login__personagrid">
+              {PERSONAS.map((p) => (
+                <button
+                  key={p.email}
+                  type="button"
+                  className={'persona' + (email === p.email ? ' is-on' : '')}
+                  onClick={() => pick(p)}
+                >
+                  <span className={'avatar avatar--' + p.tone} aria-hidden="true">{initialsOf(p.name)}</span>
+                  <span className="persona__t">
+                    <strong>{p.name}</strong>
+                    <span>{p.role} · {p.does}</span>
+                  </span>
+                  {email === p.email ? <Icon name="check" className="persona__ok" /> : null}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
+
+        <p className="login__powered">
+          Powered by <span>zino</span>
+        </p>
       </section>
     </main>
   )
diff --git a/src/screens/Lead.jsx b/src/screens/Lead.jsx
index c36bc72..e3bfd59 100644
--- a/src/screens/Lead.jsx
+++ b/src/screens/Lead.jsx
@@ -7,13 +7,15 @@ import AgentChip from '../components/AgentChip.jsx'
 import CallTranscript from '../components/CallTranscript.jsx'
 import ClampText from '../components/ClampText.jsx'
 import Conversation from '../components/Conversation.jsx'
+import Icon from '../components/Icon.jsx'
 import LeadFileDialog from '../components/LeadFileDialog.jsx'
 import StageRail from '../components/StageRail.jsx'
 import Timeline from '../components/Timeline.jsx'
-import { APP_ID, DOC_SLOTS, DV_LEAD, PRODUCTS, STAGES, STALL_AFTER_MS, blockedOn, nudgeFor, phaseOf } from '../api/config.js'
+import { APP_ID, CHANNELS, DOC_SLOTS, DV_LEAD, PRODUCTS, STAGES, STALL_AFTER_MS, blockedOn, nudgeFor, phaseOf } from '../api/config.js'
 import { AGENTS } from '../api/agents.js'
 import { actionsFor, rolesOf } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
+import { humanize, initials, toneFor } from '../api/display.js'
 import './screens.css'
 
 /** The countdown, not just the date. On a renewal book this is the number
@@ -50,10 +52,6 @@ const GROUPS = [
   ['Customer',       ['customer_name','entity_name','mobile','email','pan','gstin','udyam_no']],
   ['Intake',         ['lead_score','attribution_status','attribution_reason','dedupe_match_ref','eligibility_outcome','eligibility_reason']],
   ['Contact',        ['contact_outcome','outreach_window','contact_notes','call_transcript']],
-  // The five OCR slots led this list and were absent from it, which is how a
-  // lead with an RC, an expiring policy and a PAN attached showed "Documents 2"
-  // — the status and the notes. They were also absent from the view itself
-  // until 76; adding them here without that would have changed nothing.
   ['Documents',      ['doc_rc','doc_prev_policy','doc_pan','doc_gst_cert','doc_udyam_cert',
                       'doc_address_proof','doc_premises_proof','doc_stock_statement','doc_premises_photos',
                       'doc_vehicle_photos','doc_financials','documents_status','documents_notes']],
@@ -74,22 +72,10 @@ const GROUPS = [
 const LONG = 150
 
 /**
- * WHAT THE PAGE SHOWS WITHOUT BEING ASKED.
- *
- * Three things are always true of a lead — who the customer is, what is being
- * insured, and what has been attached — so those are always here. The fourth
- * section depends on where the lead has got to: a lead in Quoted needs the
- * cover and the quote's expiry; the same lead in Onboarded needs the policy
- * number and when it renews. Everything else is in the full file.
- *
- * THIS IS A MIRROR, in the same sense as STAGES, ACTIONS and DOC_SLOTS, and it
- * carries the same hazard: a stage not listed here simply gets no fourth
- * section, and a field renamed in the workflow quietly stops appearing. That is
- * the safe direction to fail — the full file is generated from the data and
- * still holds everything — but it is a mirror, not a source.
- *
- * The metrics strip at the top of the page already carries premium, commission,
- * product, renewal date, lead age and AI confidence. Nothing is repeated here.
+ * WHAT THE PAGE SHOWS WITHOUT BEING ASKED. Three things are always true of a
+ * lead — who the customer is, what is being insured, and what has been
+ * attached — so those are always here. The fourth section depends on where
+ * the lead has got to. Everything else is in the full file.
  */
 const GLANCE_STAGE = {
   'zk-state-new':       ['lead_score', 'eligibility_outcome'],
@@ -111,14 +97,7 @@ const GLANCE_RISK = {
   sme:   ['sme_product_variant', 'sme_occupancy', 'sme_value_at_risk'],
 }
 
-/**
- * Field ids are snake_case and several carry acronyms, which sentence-casing
- * turns into "Pan" and "Gstin". Only the words that need it are listed; every
- * other word passes through.
- *
- * This is the FALLBACK. The detail view ships an output_label for every field
- * and that is preferred — this covers a field the config does not describe.
- */
+/** Fallback labels for a field the config does not describe. */
 const WORDS = {
   pan: 'PAN', gstin: 'GSTIN', kyc: 'KYC', ai: 'AI', sme: 'SME', uw: 'UW',
   od: 'OD', tp: 'TP', gst: 'GST', idv: 'IDV', ncb: 'NCB', rm: 'RM', si: 'SI',
@@ -136,73 +115,70 @@ function filesOf(v) {
   return Array.isArray(v) ? v.filter((f) => f && typeof f === 'object' && f.uuid) : []
 }
 
+/** Fields whose value is a code that must NOT be spelt out. */
+const VERBATIM = new Set(['lead_ref', 'pan', 'gstin', 'udyam_no', 'motor_reg_no', 'partner_code', 'policy_no',
+  'payment_ref', 'kyc_ref', 'acceptance_ref', 'dedupe_match_ref', 'payout_ref', 'product_code', 'motor_prev_policy_no', 'email', 'mobile'])
+
 function fmt(k, v) {
   if (v === null || v === undefined || v === '') return null
   if (k === 'product_line') return PRODUCTS[v] ?? String(v)
   if (Array.isArray(v)) {
-    // A file field holds an array of upload references — {uuid, original_name,
-    // blob_path, …} — so joining it raw prints [object Object].
     return v
-      .map((x) => (x && typeof x === 'object' ? (x.original_name || x.file_name || x.uuid || '') : x))
+      .map((x) => (x && typeof x === 'object' ? (x.original_name || x.file_name || x.uuid || '') : humanize(x)))
       .filter((x) => x !== '' && x !== null && x !== undefined)
       .join(', ') || null
   }
-  // No field carries a bare object today, but one arriving as JSON should not
-  // print as [object Object].
   if (typeof v === 'object') return JSON.stringify(v)
   if (MONEY.has(k)) { const n = Number(v); return Number.isFinite(n) ? '₹' + n.toLocaleString('en-IN') : String(v) }
-  return String(v)
+  // Stored tokens read as English; references, names and prose pass through.
+  return VERBATIM.has(k) ? String(v) : humanize(String(v))
 }
 
 /**
- * Whose move it is, right now — the question an operator opens a lead to
- * answer, said as a coloured pill in the header. Derived from the stage's own
- * kind, so it stays in step with the workflow: an AI-run stage is with the AI,
- * a customer-gated one is with the customer, a person-gated one is waiting on
- * someone, and a closed lead holds nobody.
+ * Whose move it is, right now — said as a coloured pill in the header.
  */
 function holdsOf(stage) {
   if (!stage) return null
   switch (stage.kind) {
-    case 'auto':     return { tone: 'ai',     label: 'With the AI' }
-    case 'customer': return { tone: 'grey', pillTone: 'cust', label: 'With the customer' }
-    case 'needs':    return { tone: 'person', label: stage.approval ? 'Awaiting your approval' : 'Waiting on a person' }
-    case 'waiting':  return { tone: 'grey',   label: 'In nurture' }
-    case 'end':      return { tone: 'grey',   label: 'Closed' }
+    case 'auto':     return { tone: 'ai',     icon: 'bot',  label: 'With the AI' }
+    case 'customer': return { tone: 'cust',   icon: 'chat', label: 'With the customer' }
+    case 'needs':    return { tone: 'person', icon: 'user', label: stage.approval ? 'Awaiting your approval' : 'Waiting on a person' }
+    case 'waiting':  return { tone: 'grey',   icon: 'clock', label: 'In nurture' }
+    case 'end':      return { tone: 'grey',   icon: 'archive', label: 'Closed' }
     default:         return null
   }
 }
 
+/** A file's extension, for the little type tag on a document chip. */
+function extOf(name) {
+  const m = String(name || '').match(/\.([a-z0-9]{2,5})$/i)
+  return m ? m[1].toUpperCase() : 'FILE'
+}
+
 export default function Lead() {
   const { instanceId } = useParams()
   const { client, user } = useZino()
   const roles = rolesOf(user)
   const navigate = useNavigate()
   const location = useLocation()
-  // What the workflow said when the last activity was submitted. It is written
-  // per activity — "Documents received — capturing the risk" — and is the
-  // workflow telling the operator what it just set in motion, so it is shown
+  // What the workflow said when the last activity was submitted — shown
   // verbatim rather than replaced with a generic "Saved".
   const [note, setNote] = useState(location.state?.message ?? null)
   const [row, setRow] = useState(null)
   const [err, setErr] = useState(null)
   const [open, setOpen] = useState(null)
   const [labels, setLabels] = useState({})
-  // The audit rows live HERE, not inside Timeline, for two reasons: Timeline
-  // fetched them once on mount and never again — so a lead worked by five
-  // agents in three minutes showed the trail as it was when you opened the
-  // page — and the conversation view needs the same rows. One fetch, one
-  // poll, two readers that cannot disagree.
+  // The audit rows live HERE, not inside Timeline: one fetch, one poll, and
+  // the conversation view reads the same rows.
   const [audit, setAudit] = useState(null)
   const [showChat, setShowChat] = useState(false)
   const [openAgent, setOpenAgent] = useState(null)
   const [showCall, setShowCall] = useState(false)
-  // The full record, on demand — see the panel comment below.
   const [showFile, setShowFile] = useState(false)
-  // A clock in state rather than Date.now() in the render body. Reading the
-  // wall clock while rendering is impure — React may render twice and get two
-  // answers — and it also means the "nothing for 6 minutes" counter would only
-  // move when something else happened to re-render the page. This ticks it.
+  // Newest first by default: on a live demo the step that just happened is
+  // the one everybody is looking for. One click reads it as a story instead.
+  const [newestFirst, setNewestFirst] = useState(true)
+  // A clock in state rather than Date.now() in the render body.
   const [now, setNow] = useState(() => Date.now())
 
   const load = useCallback((quiet = false) => {
@@ -215,8 +191,6 @@ export default function Lead() {
     return client.detailView(DV_LEAD, instanceId)
       .then((r) => {
         setRow(r?.data ?? r?.record ?? r)
-        // The detail view ships an output_label for every field. Using the
-        // server's names means a field renamed in Studio is renamed here.
         const fields = r?.config?.fields
         if (Array.isArray(fields)) {
           setLabels(Object.fromEntries(
@@ -225,26 +199,19 @@ export default function Lead() {
         }
       })
       // A poll that fails leaves the screen exactly as it is. Only a first load
-      // becomes an error page: a gateway blip must not throw away a lead the
-      // operator is reading, or unmount a half-filled form under them.
+      // becomes an error page.
       .catch((e) => { if (!quiet) setErr(e) })
   }, [client, instanceId])
 
-  // `load` is CALLED here, not handed to useEffect: it returns a promise so the
-  // poll below and onDone can chain on it, and an effect that returns anything
-  // but a function has that value called as cleanup — React invokes the promise
-  // as destroy(), throws, and unmounts the whole tree to a blank screen.
+  // `load` is CALLED here, not handed to useEffect: it returns a promise.
   useEffect(() => { load() }, [load])
 
-  // The message is handed over on the history entry, so it would show again
-  // every time this lead is reached by Back — on a lead that has since moved on.
-  // Consume it once, then strike it from the entry.
+  // The message is handed over on the history entry; consume it once.
   useEffect(() => {
     if (location.state?.message) navigate(location.pathname, { replace: true, state: null })
   }, [location.state, location.pathname, navigate])
 
-  // A lead that no longer exists is not a page to look at. Send the operator
-  // back to the queue rather than leaving them on an empty shell.
+  // A lead that no longer exists is not a page to look at.
   useEffect(() => {
     if (err && describeError(err).kind === 'gone') {
       const id = setTimeout(() => navigate('/', { replace: true }), 1600)
@@ -252,22 +219,14 @@ export default function Lead() {
     }
   }, [err, navigate])
 
-  /**
-   * Nothing is pushed — no socket, no SSE — and most of this workflow is carried
-   * by AI employees that take one to three minutes a step, so a lead genuinely
-   * moves while it is on screen. Poll quietly: no spinner, no skeleton, and not
-   * at all while the tab is in the background.
-   */
   useEffect(() => {
     const id = setInterval(() => setNow(Date.now()), 20000)
     return () => clearInterval(id)
   }, [])
 
   useEffect(() => {
-    // Not while a form is open. A successful poll rewrites `actions`, and if the
-    // lead has moved on the open form unmounts — taking whatever was typed into
-    // it with no warning. A submission against a stale state is refused by the
-    // workflow anyway, and that refusal is handled properly below.
+    // Not while a form is open: a successful poll rewrites `actions`, and if
+    // the lead has moved on the open form unmounts with whatever was typed.
     if (open) return undefined
     const id = setInterval(() => {
       if (document.visibilityState === 'visible') load(true)
@@ -285,7 +244,15 @@ export default function Lead() {
       </div>
     )
   }
-  if (!row) return <p className="empty">Loading…</p>
+  if (!row) {
+    return (
+      <section aria-busy="true">
+        <header className="page__head"><div className="page__lead"><span className="skel__disc" /><div><div className="skel__line skel__line--title" /><div className="skel__line" /></div></div></header>
+        <div className="skel skel--tiles"><div /><div /><div /><div /></div>
+        <div className="skel"><div className="skel__row" /><div className="skel__row" /><div className="skel__row" /><div className="skel__row" /></div>
+      </section>
+    )
+  }
 
   // Only groups that actually hold something; an empty tab is a dead end.
   const groups = GROUPS
@@ -296,22 +263,12 @@ export default function Lead() {
     .filter(([, shown]) => shown.length)
 
   const stateName = row.current_state_name || ''
-  // The state, then what is really happening inside it — see phaseOf. Actions
-  // are still looked up on the state's own uid; only the presentation moves.
   const stage = phaseOf(STAGES.find((s) => s.name === stateName), row)
   const holds = holdsOf(stage)
-  // Only what THIS user may run. The workflow refuses the rest server-side
-  // anyway; showing them a row of buttons that all 403 reads as a broken app
-  // rather than as a control.
+  // Only what THIS user may run. The workflow refuses the rest server-side.
   const actions = actionsFor(roles, stage?.uid)
 
-  // THE ONE THING THIS USER MUST DO, promoted to the header. "What do I do
-  // now" is the first question an operator asks of a lead, and it was answered
-  // only by scrolling past the metrics and the stage rail to the Next step
-  // panel. When this user has an action, it belongs top-right, where the eye
-  // goes for the next move; when they do not, the passive status stays there
-  // instead. `role: 'do'` is the committing step — never a re-run or a
-  // recovery lever, which must not be dressed as the thing to do.
+  // THE ONE THING THIS USER MUST DO, promoted to the header.
   const acceptedAlready = Boolean(row.acceptance_ref)
   const primaryAction = actions.find(
     (a) => a.role === 'do' && !(acceptedAlready && a.uid === 'zk-act-accept'),
@@ -319,16 +276,11 @@ export default function Lead() {
   const goToAction = () => {
     if (!primaryAction) return
     setOpen(primaryAction.uid)
-    // Let the form mount, then bring the working surface into view.
     requestAnimationFrame(() =>
       document.getElementById('lead-next')?.scrollIntoView({ behavior: 'smooth', block: 'center' }))
   }
   const fieldCount = groups.reduce((n, [, shown]) => n + shown.length, 0)
 
-  // Built from the SAME rows the full file renders, so the two can never
-  // disagree about a value. A section with nothing in it is dropped rather
-  // than rendered empty — an SME lead has no registration number, and a
-  // heading over a blank box reads as a bug.
   const pick = (keys) => keys
     .map((k) => [k, fmt(k, row[k]), filesOf(row[k])])
     .filter(([, v]) => v !== null)
@@ -337,25 +289,22 @@ export default function Lead() {
   const line = row.product_line === 'sme_package' ? 'sme' : 'motor'
 
   const glance = [
-    ['Customer', pick(['customer_name', 'entity_name', 'mobile', 'email'])],
-    [line === 'sme' ? 'The risk' : 'The vehicle', pick(GLANCE_RISK[line])],
-    ['Documents', pick(docKeys)],
-    // THE CALL IS THE ONE STEP NOBODY CAN REPLAY FROM THE FIELDS. Everything
-    // else on this lead was typed or derived; this happened out loud, and
-    // until now its outcome sat in the full file with the source channel while
-    // the words themselves were reachable only from a button halfway down the
-    // trail. It gets its own card whenever a call has actually happened.
-    ['The call', pick(['contact_outcome', 'outreach_window', 'contact_notes'])],
-    ['This stage', pick(GLANCE_STAGE[stage?.uid] || [])],
-  ].filter(([, rows]) => rows.length)
+    ['Customer', 'user', pick(['customer_name', 'entity_name', 'mobile', 'email'])],
+    [line === 'sme' ? 'The risk' : 'The vehicle', line === 'sme' ? 'building' : 'car', pick(GLANCE_RISK[line])],
+    ['Documents', 'file', pick(docKeys)],
+    ['The call', 'phone', pick(['contact_outcome', 'outreach_window', 'contact_notes'])],
+    ['This stage', 'sparkle', pick(GLANCE_STAGE[stage?.uid] || [])],
+  ].filter(([, , rows]) => rows.length)
 
-
-  // Two different reasons for an empty action list, and they must not read the
-  // same. A terminal lead is finished; a live one you cannot act on belongs to
-  // somebody else, and saying "closed" about it would be a lie.
-  // Derived from the same audit rows the trail renders, so they cannot drift.
-  const worked = [...new Set((audit || [])
-    .flatMap((r) => (r.user_roles || []).filter((x) => AGENTS[x])))]
+  // Who worked this lead, and how many steps each took. Derived from the same
+  // audit rows the trail renders, so they cannot drift.
+  const stepsBy = {}
+  for (const r of audit || []) {
+    if (r.activity_id === 'DATA_UPDATE') continue
+    const k = (r.user_roles || []).find((x) => AGENTS[x])
+    if (k) stepsBy[k] = (stepsBy[k] || 0) + 1
+  }
+  const worked = Object.keys(AGENTS).filter((k) => stepsBy[k])
   const chatTurns = (audit || []).reduce((n, r) => {
     const fs = Array.isArray(r.fields) && r.fields.length ? r.fields : []
     return n + fs.filter((f) => {
@@ -365,74 +314,53 @@ export default function Lead() {
     }).length
   }, 0)
 
-  // An automated stage that has stopped for a stated reason. Checked before
-  // the "in progress" strip below, which would otherwise keep promising that
-  // something is happening for as long as the lead is left alone.
   const blocked = stage?.kind === 'auto' ? blockedOn(row) : null
-  // An automated step that has sat too long. Distinct from `blocked`, which is
-  // the workflow refusing for a stated reason — this is the agent not having
-  // come back, and the cause is usually outside this app entirely: a slow or
-  // failing model provider, a thinking budget that ran out mid-sentence, a
-  // wake that never arrived. The console cannot see any of that, so it reports
-  // the only thing it can know — nothing has happened for a while — and offers
-  // the way out rather than going on promising two minutes.
   const stillFor = row.updated_at ? now - Date.parse(row.updated_at) : 0
   const stalled = !blocked && stage?.kind === 'auto' && stillFor > STALL_AFTER_MS
     ? { mins: Math.round(stillFor / 60000), nudge: nudgeFor(stage, row) }
     : null
 
+  const e = expiryOf(row.renewal_due_date)
+  const premium = inrShort(row.quoted_premium)
+  const commission = inrShort(row.commission_amount)
+  const conf = Number(row.ai_recommendation_confidence)
+  const ch = CHANNELS[row.source_channel]
+  const openAction = open ? [...actions, { uid: 'zk-act-collect-docs', label: 'Replace or add a document', by: 'you' }].find((a) => a.uid === open) : null
 
   return (
     <section>
-      <header className="page__head">
+      <header className="page__head page__head--lead">
         <div className="page__lead">
-          {/* React Router stamps the first entry in a session with key 'default',
-              so a lead opened from its own URL has nothing to go back TO and
-              lands on the queue instead of leaving the app. */}
           <button
             type="button" className="backbtn" title="Back to the queue" aria-label="Back to the queue"
             onClick={() => (location.key === 'default' ? navigate('/') : navigate(-1))}
           >
-            <svg viewBox="0 0 16 16" aria-hidden="true">
-              <path d="M9.5 3.5 5 8l4.5 4.5" fill="none" stroke="currentColor" strokeWidth="1.7"
-                    strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
+            <Icon name="chevronLeft" />
           </button>
-          <div>
-          <h1 className="page__title">{row.customer_name || row.lead_ref || `Lead ${instanceId}`}</h1>
-          <p className="page__sub">
-            {row.lead_ref || `Lead ${instanceId}`}
-            {row.entity_name ? ` · ${row.entity_name}` : ''}
-          </p>
+          <span className={'avatar avatar--lg avatar--' + toneFor(row.customer_name)} aria-hidden="true">{initials(row.customer_name)}</span>
+          <div className="page__idblock">
+            <h1 className="page__title">{row.customer_name || row.lead_ref || `Lead ${instanceId}`}</h1>
+            <p className="page__sub page__sub--chips">
+              <span className="page__ref">{row.lead_ref || `Lead ${instanceId}`}</span>
+              {row.product_line ? <span className={'pill ' + (line === 'motor' ? 'pill--blue' : 'pill--violet')}>{PRODUCTS[row.product_line] ?? row.product_line}</span> : null}
+              {ch ? <span className="pill pill--line">{ch.label}</span> : null}
+              {row.entity_name ? <span className="page__entity">{row.entity_name}</span> : null}
+            </p>
           </div>
         </div>
-        {/* WHOSE MOVE IT IS. The stage name is in the rail below; this says
-            who holds the lead right now, which is the question the header is
-            really being asked. The customer tone reuses the teal cust palette. */}
         {primaryAction ? (
-          /* YOUR MOVE. When this user owns the next step, the header carries it
-             as the prominent thing — amber, because it is waiting on a person —
-             and pressing it opens the form below and scrolls to it. */
+          /* YOUR MOVE. When this user owns the next step, the header carries
+             it as the prominent thing. */
           <button type="button" className="cta" onClick={goToAction}>
             <span className="cta__txt">
               <small>Your move</small>
               <b>{primaryAction.label}</b>
             </span>
-            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
+            <Icon name="arrowRight" />
           </button>
         ) : holds ? (
-          <div className={'holds holds--' + (holds.pillTone === 'cust' ? 'cust' : holds.tone)}>
-            <span className="holds__puck" aria-hidden="true">
-              {holds.tone === 'ai' ? (
-                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M6 3a2 2 0 0 0-2 2 2 2 0 0 0-1 3.6A2 2 0 0 0 4 12a2 2 0 0 0 2 2M14 3a2 2 0 0 1 2 2 2 2 0 0 1 1 3.6A2 2 0 0 1 16 12a2 2 0 0 1-2 2M10 3.5v12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
-              ) : holds.pillTone === 'cust' ? (
-                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M4 5h12v8h-6l-3 2.5V13H4z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>
-              ) : holds.tone === 'person' ? (
-                <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="6.5" r="2.8" fill="none" stroke="currentColor" strokeWidth="1.5"/><path d="M4.5 15.5a5.5 5.5 0 0 1 11 0" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
-              ) : (
-                <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 5.5v4.5l3 2" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><circle cx="10" cy="10" r="6.5" fill="none" stroke="currentColor" strokeWidth="1.5"/></svg>
-              )}
-            </span>
+          <div className={'holds holds--' + holds.tone}>
+            <span className="holds__puck" aria-hidden="true"><Icon name={holds.icon} size={16} /></span>
             <span className="holds__txt">
               <small>Right now</small>
               <b>{holds.label}</b>
@@ -441,86 +369,67 @@ export default function Lead() {
         ) : null}
       </header>
 
-      {/* Measures, not fields. Age and dwell time are computed — neither is on
-          the record — and they are the two that answer "is this lead moving?",
-          which no label/value pair on the page could. */}
-      {(() => {
-        const e = expiryOf(row.renewal_due_date)
-        const premium = inrShort(row.quoted_premium)
-        const commission = inrShort(row.commission_amount)
-        const conf = Number(row.ai_recommendation_confidence)
-        // FOUR NUMBERS, NOT SEVEN. Money leads, because that is what a renewal
-        // is about; the AI's confidence in the cover sits beside it; the
-        // renewal countdown is the one deadline that matters. Dropped: lead age
-        // and time-in-stage (they overlapped each other and the feed carries
-        // timing), and product/vehicle (the rail's "The vehicle" holds them).
-        // Nothing is lost — every removed measure is still on the page once,
-        // where it belongs.
-        return (
-          <div className="lmetrics">
-            <div className="lm lm--hero">
-              <span className="lm__l">Premium</span>
-              <strong className="lm__v">{premium ?? '—'}</strong>
-              <span className="lm__s">{premium ? 'quoted, incl. GST' : 'not yet rated'}</span>
-            </div>
-            <div className="lm lm--hero">
-              <span className="lm__l">Commission</span>
-              <strong className="lm__v">{commission ?? '—'}</strong>
-              <span className="lm__s">
-                {row.commission_rate_pct ? row.commission_rate_pct + '% · on issue' : 'on placement'}
-              </span>
-            </div>
-            {Number.isFinite(conf) && conf > 0 ? (
-              <div className="lm">
-                <span className="lm__l">AI confidence</span>
-                <strong className="lm__v">{conf}%</strong>
-                <span className="lm__s">on the cover advice</span>
-              </div>
-            ) : null}
-            <div className="lm">
-              <span className="lm__l">Renewal</span>
-              <strong className={'lm__v' + (e ? ' due--' + e.tone : '')}>{e ? e.label : '—'}</strong>
-              <span className="lm__s">{e ? e.on : 'no date on file'}</span>
-            </div>
+      {/* Measures, not fields. FOUR NUMBERS: money leads, the AI's confidence
+          sits beside it, the renewal countdown is the one deadline that matters. */}
+      <div className="lmetrics card">
+        <div className="lm lm--hero">
+          <span className="lm__l">Premium</span>
+          <strong className="lm__v">{premium ?? '—'}</strong>
+          <span className="lm__s">{premium ? 'quoted, incl. GST' : 'not yet rated'}</span>
+        </div>
+        <div className="lm lm--hero">
+          <span className="lm__l">Commission</span>
+          <strong className="lm__v">{commission ?? '—'}</strong>
+          <span className="lm__s">
+            {row.commission_rate_pct ? row.commission_rate_pct + '% · on issue' : 'on placement'}
+          </span>
+        </div>
+        {Number.isFinite(conf) && conf > 0 ? (
+          <div className="lm">
+            <span className="lm__l">AI confidence</span>
+            <strong className="lm__v">{conf}%</strong>
+            <span className="lm__s">on the cover advice</span>
           </div>
-        )
-      })()}
-
-      <StageRail audit={audit} currentName={stateName} />
+        ) : null}
+        <div className="lm">
+          <span className="lm__l">Renewal</span>
+          <strong className={'lm__v' + (e ? ' lm__v--' + e.tone : '')}>{e ? e.label : '—'}</strong>
+          <span className="lm__s">{e ? e.on : 'no date on file'}</span>
+        </div>
+        <div className="lm lm--rail">
+          <StageRail audit={audit} currentName={stateName} />
+        </div>
+      </div>
 
       <div className="lead">
         <div className="lead__main">
           {note ? (
             <div className="said" role="status">
+              <Icon name="check" className="said__ico" />
               <p>{note}</p>
-              <button type="button" onClick={() => setNote(null)} aria-label="Dismiss">×</button>
+              <button type="button" onClick={() => setNote(null)} aria-label="Dismiss"><Icon name="x" size={14} /></button>
             </div>
           ) : null}
 
           {/* An AI-carried stage has no empty action bar and no idle screen: it
-              says what is happening and who is doing it. The activities below it
-              stay available — ops can run them by hand — but they are not the
-              answer to "why is nothing moving?". */}
+              says what is happening and who is doing it. */}
           {blocked ? (
             <div className="doing doing--blocked">
-              <span className="doing__stop" aria-hidden="true" />
+              <span className="doing__ico"><Icon name="alert" size={18} /></span>
               <div>
                 <strong>Stopped — {blocked.what}</strong>
                 <span>
                   {blocked.fix} The agents will pick the lead up again on their own once it
                   is there; nothing else is running in the meantime.
                 </span>
-                <button
-                  type="button" className="doing__fix"
-                  onClick={() => setOpen(blocked.via)}
-                >
+                <button type="button" className="doing__fix" onClick={() => setOpen(blocked.via)}>
                   Open Collect Documents
                 </button>
               </div>
             </div>
           ) : stalled ? (
             <div className="doing doing--stalled">
-              <span className="doing__stop" aria-hidden="true" />
+              <span className="doing__ico"><Icon name="clock" size={18} /></span>
               <div>
                 <strong>{stage.doing} — nothing for {stalled.mins} minutes</strong>
                 <span>
@@ -532,22 +441,15 @@ export default function Lead() {
                     : ' There is no step to re-run from here; the actions below are the way on.'}
                 </span>
                 {stalled.nudge ? (
-                  <button
-                    type="button" className="doing__fix"
-                    onClick={() => setOpen(stalled.nudge.uid)}
-                  >
+                  <button type="button" className="doing__fix" onClick={() => setOpen(stalled.nudge.uid)}>
                     {stalled.nudge.label}
                   </button>
                 ) : null}
               </div>
             </div>
           ) : stage?.kind === 'customer' && stage.doing ? (
-            /* Not an agent working, and not a task of yours either — the lead
-               is with someone outside the business. Without this the screen
-               went blank at exactly the stage where an operator is most likely
-               to wonder whether something has broken. */
             <div className="doing doing--waiting">
-              <span className="doing__wait" aria-hidden="true" />
+              <span className="doing__ico"><Icon name="chat" size={18} /></span>
               <div>
                 <strong>{stage.doing}</strong>
                 <span>
@@ -558,7 +460,7 @@ export default function Lead() {
             </div>
           ) : stage?.kind === 'auto' ? (
             <div className="doing">
-              <span className="doing__pulse" aria-hidden="true" />
+              <span className="doing__ico doing__ico--pulse"><Icon name="bot" size={18} /></span>
               <div>
                 <strong>{stage.doing}</strong>
                 <span>
@@ -570,26 +472,12 @@ export default function Lead() {
             </div>
           ) : null}
 
-          {/* WHAT TO DO NEXT, not what is permitted.
-              Every action carries a role: `do` is the step this stage is
-              waiting on, `again` is a bounded loop, `force` is an AI's own job
-              offered only so a stalled lead can be pushed by hand, `exit` is
-              Mark Lost. Rendering them as one flat row of equals is what made
-              six buttons appear where one was the answer. */}
+          {/* WHAT TO DO NEXT, not what is permitted. `do` is the step this
+              stage is waiting on, `again` a bounded loop, `force` an AI's own
+              job offered only so a stalled lead can be pushed by hand, `exit`
+              Mark Lost. */}
           {(() => {
-            // Once the documents are in, the upload is not the step, not an
-            // alternative to the step, and not a loop worth offering: it is
-            // recovery. Demoting it only to 'again' still printed an Upload
-            // documents button under a panel saying the documents had been
-            // received, which is the contradiction that was reported. It goes
-            // into the fold with the other recovery levers, relabelled for what
-            // it is actually for — a wrong file, or one more.
             const docsDone = stage?.after === 'documents received'
-            // Recording an acceptance a second time is not a loop, a recovery
-            // or an alternative — it is meaningless. The customer accepted on
-            // WhatsApp at a stated time and the lead carries the reference;
-            // offering the button again invites somebody to overwrite that
-            // with a worse record of the same event.
             const accepted = Boolean(row.acceptance_ref)
             const recast = (a) => (docsDone && a.uid === 'zk-act-collect-docs'
               ? { ...a, role: 'force', label: 'Replace or add a document', by: 'you' }
@@ -605,6 +493,15 @@ export default function Lead() {
 
             const form = open ? (
               <div className="acts__form">
+                <div className="acts__formhead">
+                  <div>
+                    <h3>{openAction?.label ?? 'Complete the step'}</h3>
+                    {openAction?.by ? <p>Performed by {openAction.by}</p> : null}
+                  </div>
+                  <button type="button" className="btn btn--ghost btn--sm" onClick={() => setOpen(null)}>
+                    <Icon name="x" size={13} /> Close
+                  </button>
+                </div>
                 <ActivityForm
                   activityUid={open}
                   instanceId={Number(instanceId)}
@@ -623,26 +520,16 @@ export default function Lead() {
             if (!step.length && !again.length && !extras.length) return null
 
             return (
-              <div className="panel" id="lead-next">
-                {/* THE HEADING IS FOR A REAL STEP ONLY. When there is no `do`
-                    action, the "what is happening / nothing owed" story is
-                    already told once — by the status strip above and the
-                    header — so repeating it here as "Next step: nothing is
-                    waiting on you" was the same sentence a third time. The
-                    secondary actions (add a document, mark lost) still render
-                    below, without the framing. */}
+              <div className="card sect" id="lead-next">
                 {step.length ? (
-                  <div className="panel__head">
+                  <div className="sect__head">
                     <div>
-                      <h2 className="panel__title">Next step</h2>
-                      <p className="panel__sub">This is what this lead is waiting on.</p>
+                      <h2 className="h-sec">Next step</h2>
+                      <p className="h-sub">This is what this lead is waiting on.</p>
                     </div>
                   </div>
                 ) : null}
 
-                {/* The step. One button, sized like a decision. Referred has
-                    two because clear and decline are a pair, not a choice
-                    between doing something and doing nothing. */}
                 {step.length ? (
                   <div className="step">
                     {step.map((a) => (
@@ -652,8 +539,11 @@ export default function Lead() {
                           + (a.uid === 'zk-act-uw-decline' ? ' step__btn--no' : '')}
                         onClick={() => setOpen(open === a.uid ? null : a.uid)}
                       >
-                        <strong>{a.label}</strong>
-                        <span>{a.by}</span>
+                        <span className="step__ico"><Icon name={a.uid === 'zk-act-uw-decline' ? 'x' : 'check'} /></span>
+                        <span className="step__t">
+                          <strong>{a.label}</strong>
+                          <span>{a.by}</span>
+                        </span>
                       </button>
                     ))}
                   </div>
@@ -673,12 +563,9 @@ export default function Lead() {
 
                 {form}
 
-                {/* Recovery, folded. An operator needs these on the day an
-                    agent stalls and never otherwise, and putting them in the
-                    open makes an AI's own work look like an outstanding task. */}
                 {extras.length ? (
                   <details className="stuck">
-                    <summary>Lead not moving?</summary>
+                    <summary><Icon name="chevronRight" size={12} className="stuck__caret" />Lead not moving?</summary>
                     <p className="stuck__why">
                       {force.length
                         ? 'These normally run by themselves. Use one only if this lead has been sitting longer than it should.'
@@ -701,38 +588,31 @@ export default function Lead() {
             )
           })()}
 
-          {/* THE STORY IS THE MAIN COLUMN NOW.
-              This sat in a 384px gutter with its own inner scrollbar, beside a
-              panel of reference fields that had the whole width. That was
-              exactly backwards. The trail is what this product is FOR — it is
-              the record of work nobody watched happen — and putting it in a
-              sidebar said it was a footnote to the form fields.
-
-              It gets the wide column and the page's own scroll. The reference
-              data moved to the rail, where short key/value pairs belong and
-              where a narrow measure costs nothing. */}
-          <div className="panel">
-            <div className="panel__head">
+          {/* THE STORY IS THE MAIN COLUMN. */}
+          <div className="card sect">
+            <div className="sect__head">
               <div>
-                <h2 className="panel__title">What happened</h2>
-                <p className="panel__sub">
-                  Every step on this lead, who took it, and what they wrote.
-                </p>
+                <h2 className="h-sec">What happened</h2>
+                <p className="h-sub">Every step on this lead, who took it, and what they wrote.</p>
+              </div>
+              <div className="sect__tools">
+                {chatTurns ? (
+                  <button type="button" className="btn btn--sm" onClick={() => setShowChat(true)}>
+                    <Icon name="whatsapp" size={13} />
+                    Conversation
+                    <b className="btn__n">{chatTurns}</b>
+                  </button>
+                ) : null}
+                <div className="seg" role="group" aria-label="Order">
+                  <button type="button" className={'seg__b' + (newestFirst ? ' is-on' : '')} aria-pressed={newestFirst} onClick={() => setNewestFirst(true)}>Newest first</button>
+                  <button type="button" className={'seg__b' + (!newestFirst ? ' is-on' : '')} aria-pressed={!newestFirst} onClick={() => setNewestFirst(false)}>As it happened</button>
+                </div>
               </div>
-              {chatTurns ? (
-                <button type="button" className="panel__act" onClick={() => setShowChat(true)}>
-                  <svg viewBox="0 0 16 16" aria-hidden="true">
-                    <path d="M2.5 3.5h11v7h-6l-3 2.5v-2.5h-2z" fill="none" stroke="currentColor"
-                          strokeWidth="1.3" strokeLinejoin="round" />
-                  </svg>
-                  Conversation
-                  <b>{chatTurns}</b>
-                </button>
-              ) : null}
             </div>
 
             <Timeline
               rows={audit}
+              newestFirst={newestFirst}
               onOpenAgent={setOpenAgent}
               onOpenChat={() => setShowChat(true)}
               onOpenCall={() => setShowCall(true)}
@@ -743,44 +623,43 @@ export default function Lead() {
         {/* Reference, not narrative. Sticky, so the facts stay put while the
             story is read against them. */}
         <aside className="lead__side">
-          {/* Who worked this lead. Five agents carry it and their names appear
-              only inside individual entries, so the team was never visible at
-              a glance. */}
+          {/* The team on this lead: who, what it does, how many steps. */}
           {worked.length ? (
-            <div className="panel panel--crew">
-              <span className="crew__l">Worked by</span>
-              <div className="crew">
-                {worked.map((k) => <AgentChip key={k} agentKey={k} onOpen={setOpenAgent} />)}
+            <div className="card sect sect--tight">
+              <div className="sect__head">
+                <div>
+                  <h2 className="h-sec">AI team on this lead</h2>
+                  <p className="h-sub">{Object.values(stepsBy).reduce((a, b) => a + b, 0)} steps taken without a person.</p>
+                </div>
               </div>
+              <ul className="crew">
+                {worked.map((k) => (
+                  <li key={k} className="crew__row">
+                    <AgentChip agentKey={k} size="md" showName={false} onOpen={setOpenAgent} />
+                    <div className="crew__t">
+                      <button type="button" className="crew__name" onClick={() => setOpenAgent(k)}>{AGENTS[k].full}</button>
+                      <span>{AGENTS[k].does}</span>
+                    </div>
+                    <b className="crew__n">{stepsBy[k]}</b>
+                  </li>
+                ))}
+              </ul>
             </div>
           ) : null}
-          {/* WHAT MATTERS HERE, NOT EVERYTHING THERE IS.
-              The whole record used to sit open on the page: fifty-seven
-              fields over thirteen groups, which pushed the audit trail — the
-              part people actually read — a screen and a half down. Most of it
-              is reference material. Nobody opens a lead to find its source
-              channel; they open it to see who the customer is, what is being
-              insured, what has been attached, and what this stage turns on.
 
-              So the page carries that, and the complete file is one click
-              away with a filter on it. Hiding is only safe when it stays
-              findable, which is why the trigger below names the number it is
-              holding back rather than saying "more". */}
           {glance.length ? (
-            <div className="panel">
-              <div className="panel__head">
+            <div className="card sect sect--tight">
+              <div className="sect__head">
                 <div>
-                  <h2 className="panel__title">At a glance</h2>
-                  <p className="panel__sub">
-                    The customer, the risk, and what this stage turns on.
-                  </p>
+                  <h2 className="h-sec">At a glance</h2>
+                  <p className="h-sub">The customer, the risk, and what this stage turns on.</p>
                 </div>
               </div>
 
               <div className="glance">
-                {glance.map(([title, rows]) => (
+                {glance.map(([title, icon, rows]) => (
                   <section className="fgroup" key={title}>
-                    <h3>{title}<span>{rows.length}</span></h3>
+                    <h3><Icon name={icon} size={14} />{title}<span>{rows.length}</span></h3>
                     <dl className="props">
                       {rows.map(([k, v, files]) => (
                         <div className="prop" key={k}>
@@ -790,19 +669,17 @@ export default function Lead() {
                               {files.map((f) => (
                                 <a
                                   key={f.uuid}
-                                  className="prop__file"
+                                  className="doc"
                                   href={`${client.baseUrl}/app/${APP_ID}/view/files/${f.uuid}/preview`}
                                   target="_blank" rel="noreferrer"
+                                  title={f.original_name}
                                 >
-                                  {f.original_name || 'Document'}
+                                  <span className="doc__ext">{extOf(f.original_name)}</span>
+                                  <span className="doc__name">{f.original_name || 'Document'}</span>
                                 </a>
                               ))}
                             </dd>
                           ) : v.length > LONG ? (
-                            /* A stage reason can run to a paragraph —
-                               uw_referral_reason and lost_reason both do — and
-                               a paragraph printed raw here would rebuild the
-                               wall this panel exists to remove. */
                             <dd><ClampText text={v} title={labels[k] ?? label(k)} lines={2} /></dd>
                           ) : (
                             <dd className={MONEY.has(k) ? 'prop__num' : undefined}>{v}</dd>
@@ -811,11 +688,8 @@ export default function Lead() {
                       ))}
                     </dl>
                     {title === 'The call' && row.call_transcript ? (
-                      <button type="button" className="glance__act" onClick={() => setShowCall(true)}>
-                        <svg viewBox="0 0 16 16" aria-hidden="true">
-                          <path d="M3.4 2.8h2.4l1.2 3-1.5 1a7.5 7.5 0 0 0 3.7 3.7l1-1.5 3 1.2v2.4a1 1 0 0 1-1.1 1A10.6 10.6 0 0 1 2.4 3.9a1 1 0 0 1 1-1.1Z"
-                                fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
-                        </svg>
+                      <button type="button" className="btn btn--sm glance__act" onClick={() => setShowCall(true)}>
+                        <Icon name="phone" size={13} />
                         Read what was actually said
                       </button>
                     ) : null}
@@ -825,12 +699,10 @@ export default function Lead() {
 
               {fieldCount ? (
                 <button type="button" className="glance__all" onClick={() => setShowFile(true)}>
-                  <svg viewBox="0 0 16 16" aria-hidden="true">
-                    <path d="M3 3.5h10M3 8h10M3 12.5h6" fill="none" stroke="currentColor"
-                          strokeWidth="1.4" strokeLinecap="round" />
-                  </svg>
+                  <Icon name="list" size={15} />
                   Open the full lead file
                   <b>{fieldCount} fields</b>
+                  <Icon name="chevronRight" size={14} />
                 </button>
               ) : null}
             </div>
diff --git a/src/screens/Overview.jsx b/src/screens/Overview.jsx
index b0db725..515b9cf 100644
--- a/src/screens/Overview.jsx
+++ b/src/screens/Overview.jsx
@@ -5,7 +5,9 @@ import { useZino } from '../api/provider.jsx'
 import { ENTRY, STAGES, phaseOf } from '../api/config.js'
 import { entryDoorsFor, rolesOf, visibleStages } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
+import { initials, toneFor, inrShort, KIND_ICON } from '../api/display.js'
 import NewLeadDialog from '../components/NewLeadDialog.jsx'
+import Icon from '../components/Icon.jsx'
 import './screens.css'
 
 /**
@@ -41,10 +43,7 @@ const num = (v) => { const n = Number(v); return Number.isFinite(n) ? n : 0 }
 
 /** Indian money, short. A dashboard tile has no room for eight digits. */
 function inr(n) {
-  if (!n) return '₹0'
-  if (n >= 1e7) return '₹' + (n / 1e7).toFixed(n >= 1e8 ? 0 : 2) + ' Cr'
-  if (n >= 1e5) return '₹' + (n / 1e5).toFixed(n >= 1e6 ? 0 : 2) + ' L'
-  return '₹' + Math.round(n).toLocaleString('en-IN')
+  return inrShort(n) ?? '₹0'
 }
 
 function expiryTone(d) {
@@ -55,6 +54,9 @@ function expiryTone(d) {
   return 'later'
 }
 
+/** The colour a stage's share of the book wears in the flow bar. */
+const FLOW_TONE = { needs: 'amber', customer: 'teal', auto: 'blue', waiting: 'grey', end: 'line' }
+
 export default function Overview() {
   const { user } = useZino()
   const navigate = useNavigate()
@@ -63,6 +65,9 @@ export default function Overview() {
   // Filing a lead happens over this page, not instead of it — see
   // NewLeadDialog. The overview behind it keeps its counts and its poll.
   const [adding, setAdding] = useState(false)
+  // Which renewal bucket the table below is narrowed to. Null is "all due
+  // within 30 days", as before.
+  const [bucket, setBucket] = useState(null)
   const state = usePortfolio()
 
   const m = useMemo(() => {
@@ -135,8 +140,7 @@ export default function Overview() {
 
     // THE HEADLINE OF AN AGENTIC CONSOLE IS WHO HOLDS THE WORK RIGHT NOW.
     // Every open lead is in exactly one of three hands: a person's, the AI's,
-    // or the customer's. The page led with money, which is the outcome; this
-    // is the state, and it is the sentence the whole product exists to say.
+    // or the customer's.
     const byStageDef = new Map(STAGES.map((s) => [s.name, s]))
     let withAI = 0, withCustomer = 0, withPerson = 0
     for (const r of open) {
@@ -148,9 +152,14 @@ export default function Overview() {
       else withPerson += 1
     }
 
+    // The flow: every stage in pipeline order with its share of the book.
+    const flow = STAGES.map((s) => ({ ...s, n: byStage[s.name] || 0 }))
+    const flowOpen = flow.filter((s) => s.kind !== 'end')
+    const flowTotal = flowOpen.reduce((t, s) => t + s.n, 0)
+
     return {
       byStage, open, won, lost, closed, gwp, commission, pipeline, exposure, attention, actionable, approvals,
-      withAI, withCustomer, withPerson,
+      withAI, withCustomer, withPerson, flow, flowOpen, flowTotal,
       conversion: closed ? Math.round((won.length / closed) * 100) : null,
       maxStage: Math.max(1, ...STAGES.map((s) => byStage[s.name] || 0)),
     }
@@ -176,11 +185,16 @@ export default function Overview() {
     return (
       <section>
         <header className="page__head"><div><h1 className="page__title">Portfolio overview</h1></div></header>
-        <div className="skel" aria-busy="true"><div className="skel__row" /><div className="skel__row" /></div>
+        <div className="skel skel--tiles" aria-busy="true"><div /><div /><div /><div /></div>
+        <div className="skel" aria-busy="true"><div className="skel__row" /><div className="skel__row" /><div className="skel__row" /></div>
       </section>
     )
   }
 
+  const shownAttention = bucket
+    ? m.exposure[bucket]
+    : m.attention
+
   return (
     <section>
       <header className="page__head">
@@ -188,55 +202,97 @@ export default function Overview() {
           <h1 className="page__title">Portfolio overview</h1>
           <p className="page__sub">Motor and SME renewals · organisation-wide</p>
         </div>
-        {/* The action sits with the thing it acts on. It was in the sidebar,
-            which is for moving between places — an action among destinations
-            is the one item that does not behave like its neighbours. */}
         <div className="page__right">
           {state.at ? (
-            <span className="stamp">
-              Updated {state.at.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' })}
+            <span className="live" title="Refreshes every 30 seconds while this tab is visible">
+              <span className="live__dot" aria-hidden="true" />
+              Live · {state.at.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' })}
             </span>
           ) : null}
           {canFile ? (
-            <button type="button" className="newlead" onClick={() => setAdding(true)}>
-              <svg viewBox="0 0 16 16" aria-hidden="true">
-                <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
-                      strokeWidth="1.7" strokeLinecap="round" />
-              </svg>
+            <button type="button" className="btn btn--primary" onClick={() => setAdding(true)}>
+              <Icon name="plus" />
               New lead
             </button>
           ) : null}
         </div>
       </header>
 
-      {/* Who holds the work, right now. Three numbers, one sentence: this many
-          are being worked by the AI, this many are waiting on a person, this
-          many on a customer. It sits above the money because it is the claim
-          the money is evidence for. */}
+      {/* Who holds the work, right now. Three numbers and one risk, as four
+          quiet cards — the one that is actually owed warms up. */}
       <div className="now">
-        <div className="now__cell now__cell--ai">
+        <div className="now__cell card now__cell--ai">
+          <span className="now__ico"><Icon name="bot" size={18} /></span>
           <span className="now__l">With the AI</span>
           <strong className="now__v">{m.withAI}</strong>
-          <span className="now__s">being qualified, rated, checked or chased — no one waiting</span>
+          <span className="now__s">being qualified, rated, checked or chased</span>
         </div>
-        <div className={'now__cell now__cell--person' + (m.withPerson ? ' is-live' : '')}>
+        <div className={'now__cell card now__cell--person' + (m.withPerson ? ' is-live' : '')}>
+          <span className="now__ico"><Icon name="user" size={18} /></span>
           <span className="now__l">Waiting on a person</span>
           <strong className="now__v">{m.withPerson}</strong>
           <span className="now__s">{m.withPerson ? 'a decision or an upload is owed' : 'nothing owed by anyone'}</span>
         </div>
-        <div className="now__cell now__cell--cust">
+        <div className="now__cell card now__cell--cust">
+          <span className="now__ico"><Icon name="chat" size={18} /></span>
           <span className="now__l">With the customer</span>
           <strong className="now__v">{m.withCustomer}</strong>
           <span className="now__s">a quote or a payment is theirs to answer</span>
         </div>
-        <div className={'now__cell now__cell--risk' + (m.exposure.lapsed.length ? ' is-live' : '')}>
+        <div className={'now__cell card now__cell--risk' + (m.exposure.lapsed.length ? ' is-live' : '')}>
+          <span className="now__ico"><Icon name="alert" size={18} /></span>
           <span className="now__l">Renewals at risk</span>
           <strong className="now__v">{m.exposure.lapsed.length + m.exposure.week.length}</strong>
           <span className="now__s">{m.exposure.lapsed.length} lapsed · {m.exposure.week.length} within 7 days</span>
         </div>
       </div>
 
-      <div className="kpis">
+      {/* The pipeline as one bar. Every open stage in order, sized by its
+          share, coloured by who holds it — and every stage, zeroes included,
+          named beneath so a stage that has quietly stopped receiving leads is
+          visible as a zero. */}
+      <div className="card flow">
+        <div className="flow__head">
+          <div>
+            <h2 className="h-sec">Pipeline</h2>
+            <p className="h-sub">{m.open.length} open leads across {m.flowOpen.filter((s) => s.n).length} stages · {m.closed} closed</p>
+          </div>
+          <div className="flow__legend">
+            <span><i className="flow__sw flow__sw--blue" />AI</span>
+            <span><i className="flow__sw flow__sw--amber" />Person</span>
+            <span><i className="flow__sw flow__sw--teal" />Customer</span>
+            <span><i className="flow__sw flow__sw--grey" />Scheduled</span>
+          </div>
+        </div>
+        <div className="flow__bar" aria-hidden="true">
+          {m.flowOpen.filter((s) => s.n).map((s) => (
+            <Link
+              key={s.uid}
+              to={`/stage/${s.uid}`}
+              className={'flow__seg flow__seg--' + FLOW_TONE[s.kind]}
+              style={{ flexGrow: s.n }}
+              title={`${s.name} · ${s.n}`}
+            >
+              <span>{s.n}</span>
+            </Link>
+          ))}
+          {!m.flowTotal ? <span className="flow__seg flow__seg--line" style={{ flexGrow: 1 }} /> : null}
+        </div>
+        <ol className="flow__stages">
+          {m.flow.map((s) => (
+            <li key={s.uid}>
+              <Link to={`/stage/${s.uid}`} className={'flow__stage' + (s.n ? '' : ' is-zero') + (s.kind === 'end' ? ' is-end' : '')}>
+                <Icon name={KIND_ICON[s.kind]} size={13} className={'flow__ki flow__ki--' + FLOW_TONE[s.kind]} />
+                <span className="flow__sname">{s.name}</span>
+                <b>{s.n}</b>
+              </Link>
+            </li>
+          ))}
+        </ol>
+      </div>
+
+      {/* Money and outcome, one row. */}
+      <div className="card kpis">
         <div className="kpi">
           <span className="kpi__l">Open leads</span>
           <strong className="kpi__v">{m.open.length}</strong>
@@ -265,11 +321,10 @@ export default function Overview() {
       </div>
 
       {/* SIGN-OFF, not work. The only queue that is a person's approval rather
-          than a task, shown to the role that owns it and to nobody else. It sat
-          fourth in a list of six and read like any other item, which is the
-          wrong weight for the step that decides whether cover begins. */}
+          than a task, shown to the role that owns it and to nobody else. */}
       {m.approvals.map((s) => (
-        <Link key={s.uid} to={`/stage/${s.uid}`} className={'appr' + (s.n ? ' is-live' : '')}>
+        <Link key={s.uid} to={`/stage/${s.uid}`} className={'appr card' + (s.n ? ' is-live' : '')}>
+          <span className="appr__ico"><Icon name="lock" size={18} /></span>
           <strong className="appr__n">{s.n}</strong>
           <span className="appr__t">
             {s.approvalLabel}
@@ -277,52 +332,74 @@ export default function Overview() {
           </span>
           <span className="appr__go">
             {s.n ? (s.oldest !== undefined ? `oldest ${s.oldest}d` : 'review') : 'nothing waiting'}
+            <Icon name="chevronRight" />
           </span>
         </Link>
       ))}
 
       <div className="split">
-        <div>
-          <h2 className="sec">Action required</h2>
+        <div className="card sect">
+          <div className="sect__head">
+            <div>
+              <h2 className="h-sec">Action required</h2>
+              <p className="h-sub">Queues where a person has to move a lead on.</p>
+            </div>
+          </div>
           <div className="qlist">
             {m.actionable.map((s) => (
               <Link key={s.uid} to={`/stage/${s.uid}`} className={'q' + (s.n ? ' is-live' : '')}>
-                <strong className="q__n">{s.n}</strong>
+                <span className={'q__ico q__ico--' + s.kind}><Icon name={KIND_ICON[s.kind]} size={16} /></span>
                 <span className="q__t">
                   {s.need ?? s.name}
-                  <em>{s.by}</em>
+                  <em>{s.by}{s.working ? ` · +${s.working} with the AI` : ''}</em>
                 </span>
                 <span className="q__age">
                   {s.n === 0 ? 'clear' : s.oldest !== undefined ? `oldest ${s.oldest}d` : ''}
-                  {s.working ? <b className="q__auto">+{s.working} with the AI</b> : null}
                 </span>
-                {!mine.has(s.uid) ? <span className="q__ro" title="View only for your role">view</span> : null}
+                <strong className="q__n">{s.n}</strong>
+                {!mine.has(s.uid)
+                  ? <span className="q__go q__go--ro" title="View only for your role"><Icon name="eye" size={14} /></span>
+                  : <span className="q__go"><Icon name="chevronRight" size={14} /></span>}
               </Link>
             ))}
           </div>
+        </div>
 
-          <h2 className="sec">Renewal exposure<span className="sec__hint">open leads by time to expiry</span></h2>
-          <div className="buckets">
-            <div className="bucket bucket--lapsed">
-              <strong>{m.exposure.lapsed.length}</strong><span>Lapsed</span>
-            </div>
-            <div className="bucket bucket--urgent">
-              <strong>{m.exposure.week.length}</strong><span>Within 7 days</span>
-            </div>
-            <div className="bucket bucket--soon">
-              <strong>{m.exposure.month.length}</strong><span>8 to 30 days</span>
+        <div className="card sect">
+          <div className="sect__head">
+            <div>
+              <h2 className="h-sec">Renewal exposure</h2>
+              <p className="h-sub">Open leads by time to expiry. Pick a band to narrow the list.</p>
             </div>
           </div>
+          <div className="buckets" role="group" aria-label="Expiry band">
+            {[
+              ['lapsed', 'Lapsed', m.exposure.lapsed.length],
+              ['week', 'Within 7 days', m.exposure.week.length],
+              ['month', '8 to 30 days', m.exposure.month.length],
+            ].map(([k, label, n]) => (
+              <button
+                key={k}
+                type="button"
+                className={'bucket bucket--' + k + (bucket === k ? ' is-on' : '')}
+                aria-pressed={bucket === k}
+                onClick={() => setBucket(bucket === k ? null : k)}
+              >
+                <strong>{n}</strong><span>{label}</span>
+              </button>
+            ))}
+          </div>
 
-          {m.attention.length ? (
-            <div className="gridwrap">
+          {shownAttention.length ? (
+            <div className="gridwrap gridwrap--flush">
               <table className="grid grid--tight">
                 <thead>
                   <tr><th>Lead</th><th>Expiry</th><th>Stage</th><th className="num">Premium</th></tr>
                 </thead>
                 <tbody>
-                  {m.attention.slice(0, 8).map((r) => {
+                  {shownAttention.slice(0, 8).map((r) => {
                     const id = r.instance_id ?? r.id
+                    const st = STAGES.find((s) => s.name === r.current_state_name)
                     return (
                       <tr
                         key={id}
@@ -336,44 +413,35 @@ export default function Overview() {
                         aria-label={`Open ${r.customer_name || r.lead_ref || id}`}
                       >
                         <td>
-                          <span className="grid__name">{r.customer_name || r.lead_ref || `#${id}`}</span>
-                          <div className="grid__sub">{r.lead_ref || ''}</div>
+                          <div className="grid__who">
+                            <span className={'avatar avatar--sm avatar--' + toneFor(r.customer_name)}>{initials(r.customer_name)}</span>
+                            <div>
+                              <span className="grid__name">{r.customer_name || r.lead_ref || `#${id}`}</span>
+                              <div className="grid__sub">{r.lead_ref || ''}</div>
+                            </div>
+                          </div>
                         </td>
                         <td><span className={'due due--' + expiryTone(r._d)}>
                           {r._d < 0 ? Math.abs(r._d) + 'd overdue' : r._d === 0 ? 'today' : r._d + 'd'}
                         </span></td>
-                        <td><span className="grid__sub">{r.current_state_name}</span></td>
+                        <td><span className={'pill ' + (st?.kind === 'needs' ? 'pill--amber' : st?.kind === 'customer' ? 'pill--teal' : 'pill--blue')}>{r.current_state_name}</span></td>
                         <td className="num">{r.quoted_premium ? inr(num(r.quoted_premium)) : '—'}</td>
                       </tr>
                     )
                   })}
                 </tbody>
               </table>
+              {shownAttention.length > 8 ? (
+                <Link to="/stage/all" className="grid__more">See all {shownAttention.length} in the lead list <Icon name="arrowRight" size={13} /></Link>
+              ) : null}
             </div>
           ) : (
-            <p className="empty">No renewals due within 30 days.</p>
+            <p className="empty empty--flush">
+              <Icon name="check" size={18} />
+              {bucket ? 'No renewals in this band.' : 'No renewals due within 30 days.'}
+            </p>
           )}
         </div>
-
-        <div>
-          <h2 className="sec">Pipeline distribution</h2>
-          {/* Every stage, zeroes included. A stage that has quietly stopped
-              receiving leads is only visible if its zero is on the page. */}
-          <div className="dist">
-            {STAGES.map((s) => {
-              const n = m.byStage[s.name] || 0
-              return (
-                <Link key={s.uid} to={`/stage/${s.uid}`} className={'dist__r' + (n ? '' : ' is-zero')}>
-                  <span className="dist__l">{s.name}</span>
-                  <span className="dist__bar" aria-hidden="true">
-                    <span style={{ width: (n / m.maxStage) * 100 + '%' }} className={'dist__f dist__f--' + s.kind} />
-                  </span>
-                  <span className="dist__n">{n}</span>
-                </Link>
-              )
-            })}
-          </div>
-        </div>
       </div>
       {adding ? <NewLeadDialog onClose={() => setAdding(false)} /> : null}
     </section>
diff --git a/src/screens/Pipeline.jsx b/src/screens/Pipeline.jsx
index b5bf40f..ce63d3c 100644
--- a/src/screens/Pipeline.jsx
+++ b/src/screens/Pipeline.jsx
@@ -1,10 +1,13 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useZino } from '../api/provider.jsx'
 import { CHANNELS, ENTRY, RV_LEADS, STAGES, phaseOf } from '../api/config.js'
 import { entryDoorsFor, rolesOf } from '../api/permissions.js'
 import { describeError } from '../api/errors.js'
+import { initials, toneFor, inrFull, KIND_ICON } from '../api/display.js'
 import NewLeadDialog from '../components/NewLeadDialog.jsx'
+import Icon from '../components/Icon.jsx'
+import './screens.css'
 
 /** Short absolute date plus how long ago — a queue needs both: the absolute
  *  for "when exactly", the relative for "is this going stale". */
@@ -27,21 +30,15 @@ function added(ts) {
  * Is an automated stage actually moving?
  *
  * The agents carry six of the nine stages, and a lead sitting in one is in
- * exactly one of two states: being worked right now, or stuck. The row showed
- * neither, so a lead three hours into "Calling the customer" looked identical
- * to one thirty seconds in — which is the failure this console exists to catch.
- *
- * The threshold is generous on purpose. An employee wake takes a minute or two
- * and a scheduled retry can be hours out, so `stalled` means "longer than any
+ * exactly one of two states: being worked right now, or stuck. The threshold
+ * is generous on purpose. An employee wake takes a minute or two and a
+ * scheduled retry can be hours out, so `stalled` means "longer than any
  * normal step", not "longer than average".
  */
 function progress(row, stage) {
   if (!stage || stage.kind !== 'auto') return null
   // `updated_at` ONLY. Falling back to created_at dates the measure from when
-  // the lead was filed rather than from its last step, so every lead older than
-  // half an hour reports "stalled" — an alarm on every row is an alarm on none.
-  // The view returns the column since 76; before that it was silently absent,
-  // which is exactly how that fallback got there.
+  // the lead was filed rather than from its last step.
   const t = Date.parse(row.updated_at)
   if (isNaN(t)) return null
   const mins = (Date.now() - t) / 60000
@@ -50,8 +47,7 @@ function progress(row, stage) {
   return { state: 'stalled', label: 'No movement for ' + (mins < 120 ? Math.round(mins) + ' minutes' : Math.round(mins / 60) + ' hours') }
 }
 
-/** Days to expiry, and how alarmed to be about it. This is a renewal book —
- *  the countdown is the most operationally useful number in the row. */
+/** Days to expiry, and how alarmed to be about it. */
 function expiry(dateStr) {
   if (!dateStr) return null
   const d = new Date(String(dateStr).substring(0, 10) + 'T00:00:00Z')
@@ -61,30 +57,36 @@ function expiry(dateStr) {
   const label = days < 0 ? Math.abs(days) + 'd overdue' : days === 0 ? 'today' : 'in ' + days + 'd'
   return { days, tone, label, on: d.toLocaleDateString('en-IN', { day: 'numeric', month: 'short' }) }
 }
-import './screens.css'
+
+/** The tone a closed state's chip wears. */
+const END_TONE = { 'Onboarded': 'green', 'Policy Issued': 'green', 'Lost / Dropped': '', 'Declined': 'red' }
+
+const SORTS = {
+  customer: (r) => String(r.customer_name || '').toLowerCase(),
+  stage: (r) => STAGES.findIndex((s) => s.name === r.current_state_name),
+  renewal: (r) => { const t = Date.parse(String(r.renewal_due_date || '').substring(0, 10)); return isNaN(t) ? Infinity : t },
+  premium: (r) => Number(r.quoted_premium) || 0,
+  waiting: (r) => { const t = Date.parse(r.created_at); return isNaN(t) ? 0 : t },
+}
 
 /**
  * One record view drives every queue; the stage is a server-side filter on
  * current_state_name. Filtering server-side rather than fetching everything and
  * narrowing in the browser is what keeps a queue honest once there are more
  * leads than one page.
+ *
+ * The filter bar below narrows the PAGE that came back — product, channel,
+ * expiry band, stalled — client-side, on data already fetched. It never
+ * changes the request.
  */
 export default function Pipeline() {
   const { stageUid } = useParams()
   const navigate = useNavigate()
   const { client, user } = useZino()
   const canFile = entryDoorsFor(rolesOf(user), ENTRY).length > 0
-  // Over the queue rather than away from it: filing a lead used to cost you
-  // your place in the list you were working through.
   const [adding, setAdding] = useState(false)
-  // "all" is not a stage — it is every lead in one list, so an operator
-  // wanting to find one does not have to guess which queue it is in.
-  //
-  // IT MEANS ALL. This view used to drop closed leads, so a lead that was lost
-  // or onboarded disappeared from the page called "All leads" — the one place
-  // somebody goes when they cannot find something. A lead that ended is still
-  // a lead, and "where did it go?" is exactly the question this page exists to
-  // answer. Closed rows are shown, and dimmed, and can be hidden by choice.
+  // "all" is not a stage — it is every lead in one list. IT MEANS ALL: closed
+  // rows are shown, dimmed, and can be hidden by choice.
   const isAll = stageUid === 'all'
   const [hideClosed, setHideClosed] = useState(false)
   const stage = isAll
@@ -92,33 +94,38 @@ export default function Pipeline() {
     : STAGES.find((s) => s.uid === stageUid)
 
   const [state, setState] = useState({ status: 'loading', rows: [], total: 0, error: null })
+  const [at, setAt] = useState(null)
+
+  // Filters. Reset when the queue changes so a product filter does not follow
+  // the operator into a queue where it hides everything.
+  const [q, setQ] = useState('')
+  const [product, setProduct] = useState('')
+  const [channel, setChannel] = useState('')
+  const [band, setBand] = useState('')
+  const [stalledOnly, setStalledOnly] = useState(false)
+  const [sort, setSort] = useState({ key: 'waiting', dir: 'desc' })
+  useEffect(() => { setQ(''); setProduct(''); setChannel(''); setBand(''); setStalledOnly(false) }, [stageUid])
 
   useEffect(() => {
     let cancelled = false
 
     // `quiet` is what makes polling bearable: the first load may show a skeleton,
-    // a refresh may not — dropping back to the loading state every 30 seconds
-    // would flash the whole queue away under whoever is reading it.
+    // a refresh may not.
     function fetchRows(quiet) {
       if (!quiet) setState({ status: 'loading', rows: [], total: 0, error: null })
       return client
         .recordView(RV_LEADS, {
           limit: isAll ? 200 : 100,
-          // No stage filter on the all view. Closed leads are dropped below
-          // rather than in the query: one request beats three negations, and
-          // 200 covers a demo book comfortably.
           ...(isAll ? {} : { filters: [{ field_key: 'current_state_name', value: stage?.name ?? '' }] }),
         })
         .then((res) => {
           if (cancelled) return
           let rows = res?.data ?? res?.rows ?? res?.records ?? []
-          // Nothing is dropped here any more. Whether closed leads are shown
-          // is a choice made below, on data already fetched — a filter that
-          // throws rows away at the query cannot be undone by a toggle.
           // total_count is the size of the QUEUE; rows is one page of at most
           // 100 of it. Counting the page would quietly under-report a busy stage.
           const total = isAll ? rows.length : (res?.pagination?.total_count ?? rows.length)
           setState({ status: 'ready', rows, total, error: null })
+          setAt(new Date())
         })
         .catch((err) => {
           if (cancelled) return
@@ -136,62 +143,175 @@ export default function Pipeline() {
     return () => { cancelled = true; clearInterval(id) }
   }, [client, stageUid, stage?.name, isAll])
 
-  // Split rather than filtered at the query, so the header can say how many
-  // are closed instead of silently showing fewer than the page claims.
-  const CLOSED = new Set(STAGES.filter((x) => x.kind === 'end').map((x) => x.name))
+  const CLOSED = useMemo(() => new Set(STAGES.filter((x) => x.kind === 'end').map((x) => x.name)), [])
   const closedCount = isAll ? state.rows.filter((r) => CLOSED.has(r.current_state_name)).length : 0
-  const shownRows = isAll && hideClosed
-    ? state.rows.filter((r) => !CLOSED.has(r.current_state_name))
-    : state.rows
+
+  // Decorate once, then filter and sort on the decorated row.
+  const decorated = useMemo(() => state.rows.map((r) => {
+    const rowStage = phaseOf(STAGES.find((x) => x.name === r.current_state_name), r)
+    return { r, rowStage, prog: progress(r, rowStage), exp: expiry(r.renewal_due_date), add: added(r.created_at) }
+  }), [state.rows])
+
+  const canStall = decorated.some((d) => d.prog)
+  const channelsPresent = useMemo(() => [...new Set(state.rows.map((r) => r.source_channel).filter(Boolean))], [state.rows])
+  const productsPresent = useMemo(() => [...new Set(state.rows.map((r) => r.product_line).filter(Boolean))], [state.rows])
+
+  const shown = useMemo(() => {
+    const term = q.trim().toLowerCase()
+    let out = decorated.filter(({ r, prog, exp }) => {
+      if (isAll && hideClosed && CLOSED.has(r.current_state_name)) return false
+      if (product && r.product_line !== product) return false
+      if (channel && r.source_channel !== channel) return false
+      if (stalledOnly && prog?.state !== 'stalled') return false
+      if (band) {
+        if (!exp) return false
+        if (band === 'lapsed' && exp.days >= 0) return false
+        if (band === 'week' && (exp.days < 0 || exp.days > 7)) return false
+        if (band === 'month' && (exp.days <= 7 || exp.days > 30)) return false
+      }
+      if (term) {
+        const hay = [r.customer_name, r.entity_name, r.lead_ref, r.mobile, r.motor_reg_no, r.current_state_name]
+          .filter(Boolean).map((x) => String(x).toLowerCase())
+        if (!hay.some((h) => h.includes(term))) return false
+      }
+      return true
+    })
+    const f = SORTS[sort.key]
+    if (f) {
+      out = [...out].sort((a, b) => {
+        const x = f(a.r), y = f(b.r)
+        const c = x < y ? -1 : x > y ? 1 : 0
+        return sort.dir === 'asc' ? c : -c
+      })
+    }
+    return out
+  }, [decorated, q, product, channel, band, stalledOnly, sort, isAll, hideClosed, CLOSED])
+
+  const filtering = Boolean(q.trim() || product || channel || band || stalledOnly || (isAll && hideClosed))
+  const stalledCount = decorated.filter((d) => d.prog?.state === 'stalled').length
+
+  function toggleSort(key) {
+    setSort((s) => (s.key === key ? { key, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: key === 'customer' || key === 'stage' ? 'asc' : 'desc' }))
+  }
+  // A sortable header cell. A plain function, not a component: it is called
+  // in place, so React never sees a new component type per render.
+  const sortHead = (k, text, className) => (
+    <th key={k} className={className} aria-sort={sort.key === k ? (sort.dir === 'asc' ? 'ascending' : 'descending') : 'none'}>
+      <button type="button" className={'grid__sort' + (sort.key === k ? ' is-on' : '')} onClick={() => toggleSort(k)}>
+        {text}
+        <Icon name={sort.key === k && sort.dir === 'asc' ? 'sortAsc' : 'sortDesc'} size={13} />
+      </button>
+    </th>
+  )
 
   if (!stage) return <p className="empty">Unknown stage.</p>
 
+  const headCount = state.status === 'ready' ? (isAll ? state.rows.length - (hideClosed ? closedCount : 0) : state.total) : null
+
   return (
     <section>
       <header className="page__head">
-        <div>
-          <h1 className="page__title">{stage.need ?? stage.name}</h1>
-          <p className="page__sub">
-            {isAll
-              ? 'Every lead not yet closed, across all stages.'
-              : stage.kind === 'auto'
-              ? `Automated · ${stage.doing.toLowerCase()}`
-              : stage.kind === 'end'
-                ? 'Closed — retained for reporting.'
-                : stage.kind === 'waiting'
-                  ? 'Held until the renewal window opens. Re-enters outreach automatically.'
-                  : `Pending action by ${stage.by}.`}
-            {stage.need ? <span className="page__stage">Stage · {stage.name}</span> : null}
-          </p>
+        <div className="page__lead">
+          <span className={'page__kind page__kind--' + stage.kind}><Icon name={KIND_ICON[stage.kind] || 'list'} size={20} /></span>
+          <div>
+            <h1 className="page__title">
+              {stage.need ?? stage.name}
+              {headCount !== null ? <span className="page__n">{headCount}</span> : null}
+            </h1>
+            <p className="page__sub">
+              {isAll
+                ? 'Every lead, open and closed, across all stages.'
+                : stage.kind === 'auto'
+                ? `Automated · ${stage.doing.toLowerCase()}`
+                : stage.kind === 'end'
+                  ? 'Closed — retained for reporting.'
+                  : stage.kind === 'waiting'
+                    ? 'Held until the renewal window opens. Re-enters outreach automatically.'
+                    : `Pending action by ${stage.by}.`}
+              {stage.need ? <span className="page__stage"> · Stage: {stage.name}</span> : null}
+            </p>
+          </div>
         </div>
-        {state.status === 'ready' ? (
-          <div className="page__right">
-            {/* Offered only where there is something to hide, and OFF by
-                default: this page's job is that nothing disappears from it. */}
-            {isAll && closedCount ? (
-              <label className="toggle">
-                <input type="checkbox" checked={hideClosed}
-                       onChange={(ev) => setHideClosed(ev.target.checked)} />
-                Hide {closedCount} closed
-              </label>
-            ) : null}
-            <div className="page__count">
-              <strong>{isAll ? shownRows.length : state.total}</strong>
-              <span>{(isAll ? shownRows.length : state.total) === 1 ? 'lead' : 'leads'}</span>
-            </div>
-            {canFile ? (
-            <button type="button" className="newlead" onClick={() => setAdding(true)}>
-              <svg viewBox="0 0 16 16" aria-hidden="true">
-                <path d="M8 3.2v9.6M3.2 8h9.6" fill="none" stroke="currentColor"
-                      strokeWidth="1.7" strokeLinecap="round" />
-              </svg>
+        <div className="page__right">
+          {at ? (
+            <span className="live" title="Refreshes every 30 seconds while this tab is visible">
+              <span className="live__dot" aria-hidden="true" />
+              Live · {at.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit' })}
+            </span>
+          ) : null}
+          {canFile ? (
+            <button type="button" className="btn btn--primary" onClick={() => setAdding(true)}>
+              <Icon name="plus" />
               New lead
             </button>
-            ) : null}
-          </div>
-        ) : null}
+          ) : null}
+        </div>
       </header>
 
+      {state.status === 'ready' && state.rows.length ? (
+        <div className="filters card">
+          <label className="filters__q">
+            <Icon name="search" />
+            <input
+              type="search"
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Filter by name, reference, mobile, registration…"
+              aria-label="Filter this list"
+            />
+          </label>
+          {productsPresent.length > 1 ? (
+            <select className="filters__sel" value={product} onChange={(e) => setProduct(e.target.value)} aria-label="Product line">
+              <option value="">All products</option>
+              <option value="motor">Motor</option>
+              <option value="sme_package">SME Package</option>
+            </select>
+          ) : null}
+          {channelsPresent.length > 1 ? (
+            <select className="filters__sel" value={channel} onChange={(e) => setChannel(e.target.value)} aria-label="Channel">
+              <option value="">All channels</option>
+              {channelsPresent.map((c) => <option key={c} value={c}>{CHANNELS[c]?.label || c}</option>)}
+            </select>
+          ) : null}
+          <select className="filters__sel" value={band} onChange={(e) => setBand(e.target.value)} aria-label="Renewal band">
+            <option value="">Any expiry</option>
+            <option value="lapsed">Lapsed</option>
+            <option value="week">Within 7 days</option>
+            <option value="month">8 to 30 days</option>
+          </select>
+          {canStall ? (
+            <button
+              type="button"
+              className={'filters__tog' + (stalledOnly ? ' is-on' : '')}
+              aria-pressed={stalledOnly}
+              onClick={() => setStalledOnly((v) => !v)}
+            >
+              <span className="run__dot run__dot--stalled" aria-hidden="true" />
+              Stalled{stalledCount ? ` · ${stalledCount}` : ''}
+            </button>
+          ) : null}
+          {isAll && closedCount ? (
+            <button
+              type="button"
+              className={'filters__tog' + (hideClosed ? ' is-on' : '')}
+              aria-pressed={hideClosed}
+              onClick={() => setHideClosed((v) => !v)}
+            >
+              <Icon name="archive" size={13} />
+              Hide {closedCount} closed
+            </button>
+          ) : null}
+          {filtering ? (
+            <span className="filters__count">
+              {shown.length} of {state.rows.length}
+              <button type="button" className="btn btn--ghost btn--sm" onClick={() => { setQ(''); setProduct(''); setChannel(''); setBand(''); setStalledOnly(false); setHideClosed(false) }}>
+                Clear
+              </button>
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+
       {state.status === 'loading' ? (
         <div className="skel" aria-busy="true" aria-label="Loading the queue">
           {Array.from({ length: 6 }, (_, i) => <div className="skel__row" key={i} />)}
@@ -206,39 +326,36 @@ export default function Pipeline() {
         </div>
       ) : null}
 
-      {state.status === 'ready' && shownRows.length === 0 ? (
-        <p className="empty">{isAll ? 'No leads yet.' : 'No records in this stage.'}</p>
+      {state.status === 'ready' && shown.length === 0 ? (
+        <p className="empty">
+          <Icon name={filtering ? 'filter' : 'check'} size={18} />
+          {filtering ? 'Nothing matches these filters.' : isAll ? 'No leads yet.' : 'Nothing in this queue.'}
+        </p>
       ) : null}
 
-      {state.status === 'ready' && shownRows.length > 0 ? (
-        <div className="gridwrap">
+      {state.status === 'ready' && shown.length > 0 ? (
+        <div className="gridwrap card">
           <table className="grid">
             <thead>
               <tr>
-                <th>Customer</th>
-                <th>{isAll ? 'Stage' : 'Status'}</th>
-                <th>Renewal due</th>
-                <th className="num">Premium</th>
-                <th>Waiting</th>
+                {sortHead('customer', 'Customer')}
+                {sortHead('stage', isAll ? 'Stage' : 'Status')}
+                {sortHead('renewal', 'Renewal due')}
+                {sortHead('premium', 'Premium', 'num')}
+                {sortHead('waiting', 'Added')}
               </tr>
             </thead>
             <tbody>
-              {shownRows.map((r) => {
+              {shown.map(({ r, rowStage, prog, exp, add }) => {
                 const id = r.instance_id ?? r.id
-                const ch = CHANNELS[r.source_channel] || { label: r.source_channel || '—' }
-                const exp = expiry(r.renewal_due_date)
-                const add = added(r.created_at)
-                // What is really happening in the state, not just its name —
-                // a lead whose documents are in is being worked by the AI, not
-                // waiting on the agent whose queue it is sitting in.
-                const rowStage = phaseOf(STAGES.find((x) => x.name === r.current_state_name), r)
-                const prog = progress(r, rowStage)
+                const ch = CHANNELS[r.source_channel] || { label: r.source_channel || '' }
+                const closed = CLOSED.has(r.current_state_name)
                 return (
                   <tr
                     key={id}
                     className={'grid__row'
                       + (prog ? ' is-' + prog.state : '')
-                      + (CLOSED.has(r.current_state_name) ? ' is-done' : '')}
+                      + (closed ? ' is-done' : '')}
                     onClick={() => navigate(`/lead/${id}`)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate(`/lead/${id}`) }
@@ -248,11 +365,16 @@ export default function Pipeline() {
                     aria-label={`Open ${r.customer_name || r.lead_ref || id}`}
                   >
                     <td>
-                      <span className="grid__name">{r.customer_name || '—'}</span>
-                      <div className="grid__sub">
-                        {r.lead_ref || `#${id}`}
-                        {r.product_line ? ` · ${r.product_line === 'motor' ? 'Motor' : 'SME'}` : ''}
-                        {ch.label ? ` · ${ch.label}` : ''}
+                      <div className="grid__who">
+                        <span className={'avatar avatar--' + toneFor(r.customer_name)}>{initials(r.customer_name)}</span>
+                        <div className="grid__id">
+                          <span className="grid__name">{r.customer_name || '—'}</span>
+                          <div className="grid__sub">
+                            <span className="grid__ref">{r.lead_ref || `#${id}`}</span>
+                            {r.product_line ? <span className={'pill ' + (r.product_line === 'motor' ? 'pill--blue' : 'pill--violet')}>{r.product_line === 'motor' ? 'Motor' : 'SME'}</span> : null}
+                            {ch.label ? <span className="pill pill--line">{ch.label}</span> : null}
+                          </div>
+                        </div>
                       </div>
                     </td>
                     {/* Who holds it, and — where an agent does — whether it is
@@ -265,8 +387,10 @@ export default function Pipeline() {
                           <span className="run__dot" aria-hidden="true" />
                           {prog.label}
                         </span>
+                      ) : closed ? (
+                        <span className={'pill ' + (END_TONE[r.current_state_name] ? 'pill--' + END_TONE[r.current_state_name] : '')}>{r.current_state_name}</span>
                       ) : isAll ? (
-                        <span className="grid__sub">{r.current_state_name || '—'}</span>
+                        <span className={'pill ' + (rowStage?.kind === 'needs' ? 'pill--amber' : rowStage?.kind === 'customer' ? 'pill--teal' : 'pill--blue')}>{r.current_state_name || '—'}</span>
                       ) : (
                         <span className="grid__sub">
                           {rowStage?.by ? `with ${rowStage.by}` : '—'}
@@ -279,8 +403,8 @@ export default function Pipeline() {
                             <div className="grid__sub">{exp.on}</div></>
                         : <span className="grid__sub">—</span>}
                     </td>
-                    <td className="num">{r.quoted_premium ? '₹' + Number(r.quoted_premium).toLocaleString('en-IN') : '—'}</td>
-                    <td><span className="grid__sub">{add.rel || add.abs}</span></td>
+                    <td className="num">{r.quoted_premium ? inrFull(r.quoted_premium) : <span className="grid__sub">—</span>}</td>
+                    <td><span className="grid__sub" title={add.abs}>{add.rel || add.abs}</span></td>
                   </tr>
                 )
               })}
diff --git a/src/screens/screens.css b/src/screens/screens.css
index ea66307..6e4e4bf 100644
--- a/src/screens/screens.css
+++ b/src/screens/screens.css
@@ -1,123 +1,236 @@
-/* ---- page header ---- */
+/* ═══════════════════════════════════════════════════════════════════════════
+   Screens — overview, queues, lead.
+
+   One language: the page sits on the ground colour, every bounded region is
+   a .card (index.css), headings are sentence-case at real sizes, labels are
+   quiet, and colour is spent on state — who holds a lead, how urgent a
+   renewal is — never on decoration.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Page header ─────────────────────────────────────────────────────────── */
 .page__head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 24px;
-  margin-bottom: 24px;
+  gap: var(--sp-6);
+  margin-bottom: var(--sp-5);
 }
 
 .page__title {
   margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-size: var(--fs-2xl);
   font-weight: var(--fw-semi);
-  letter-spacing: -0.022em;
-  line-height: 1.2;
+  letter-spacing: -0.025em;
+  line-height: 1.15;
   color: var(--zk-ink);
 }
 
+/* The count, inline with the title: "Document collection  9". */
+.page__n {
+  font-size: var(--fs-md);
+  font-weight: var(--fw-semi);
+  letter-spacing: 0;
+  line-height: 1;
+  padding: 4px 10px;
+  border-radius: var(--r-pill);
+  color: var(--zk-blue-dark);
+  background: var(--zk-tint-blue);
+  font-variant-numeric: tabular-nums;
+}
+
 .page__sub {
-  margin: 6px 0 0;
+  margin: 5px 0 0;
   max-width: 72ch;
   font-size: var(--fs-xs);
   line-height: 1.5;
   color: var(--zk-muted);
 }
+.page__stage { color: var(--zk-grey); }
 
-/* The queue depth, as a stat tile rather than a loose number. */
-.page__count {
-  flex: none;
+.page__lead {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 1px;
-  min-width: 84px;
-  padding: 10px 18px;
-  border-radius: var(--r-lg);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  box-shadow: var(--sh-sm);
+  gap: var(--sp-4);
+  min-width: 0;
 }
+.page__idblock { min-width: 0; }
+.page__sub--chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
+.page__ref { font-variant-numeric: tabular-nums; color: var(--zk-muted); }
+.page__entity { color: var(--zk-muted); }
+.page__entity::before { content: '·'; margin-right: 8px; color: var(--zk-grey); }
 
-.page__count strong {
-  font-size: var(--fs-2xl);
-  font-weight: 500;
-  line-height: 1.1;
-  color: var(--zk-blue);
-  font-variant-numeric: tabular-nums;
+/* The queue's kind, as a tinted disc beside its title. */
+.page__kind {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  color: var(--zk-blue-dark);
+  background: var(--zk-tint-blue);
 }
+.page__kind--needs    { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
+.page__kind--customer { color: var(--zk-teal-ink);  background: var(--zk-teal-tint); }
+.page__kind--waiting,
+.page__kind--end,
+.page__kind--all      { color: var(--zk-muted);     background: var(--zk-line-soft); }
 
-.page__count span {
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
+.page__right { display: flex; align-items: center; gap: var(--sp-4); flex: none; margin-top: 4px; }
+
+/* ── Back ────────────────────────────────────────────────────────────────── */
+.backbtn {
+  flex: none;
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-card);
+  color: var(--zk-muted);
+  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
 }
+.backbtn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
+.backbtn:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
 
+/* ── Generic states ──────────────────────────────────────────────────────── */
 .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   margin: 0;
   color: var(--zk-muted);
   font-size: var(--fs-xs);
   text-align: center;
   padding: 44px 24px;
-  border-radius: var(--r-lg);
+  border-radius: var(--r-card);
   border: 1px dashed var(--zk-line);
-  background: linear-gradient(180deg, var(--zk-white) 0%, var(--zk-tint) 100%);
+  background: var(--zk-card);
 }
+.empty svg { color: var(--zk-grey); }
+.empty--flush { border: 0; border-top: 1px dashed var(--zk-line); border-radius: 0; padding: 28px 0 8px; }
 
 .notice {
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
   border-left: 3px solid var(--zk-blue);
-  border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-xs);
-  box-shadow: var(--sh-sm);
+  border-radius: var(--r-xs) var(--r-card) var(--r-card) var(--r-xs);
+  box-shadow: var(--sh-card);
   padding: 18px 22px;
   max-width: 64ch;
 }
-
-.notice strong {
-  display: block;
-  font-weight: 500;
-  margin-bottom: 7px;
-}
-
-.notice p {
-  margin: 0 0 6px;
-  font-size: var(--fs-xs);
-  color: var(--zk-muted);
-  line-height: 1.55;
-}
-
-.notice__detail {
-  font-size: var(--fs-2xs) !important;
-  color: var(--zk-grey) !important;
-}
-
+.notice strong { display: block; font-weight: var(--fw-medium); margin-bottom: 7px; }
+.notice p { margin: 0 0 6px; font-size: var(--fs-xs); color: var(--zk-muted); line-height: 1.55; }
+.notice__detail { font-size: var(--fs-2xs) !important; color: var(--zk-grey) !important; }
 .notice code {
   font-family: var(--font-mono);
   font-size: 0.8em;
-  background: var(--zk-tint);
+  background: var(--zk-hover);
   border: 1px solid var(--zk-line-soft);
   border-radius: var(--r-xs);
   padding: 1px 5px;
 }
 
-/* ---- queue table ---- */
+/* Skeletons */
+.skel {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 14px 0;
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+.skel__row,
+.skel__line,
+.skel__disc,
+.skel--tiles > div {
+  border-radius: var(--r-sm);
+  background: linear-gradient(90deg, var(--zk-line-soft) 0%, var(--zk-ground) 40%, var(--zk-line-soft) 80%);
+  background-size: 420px 100%;
+  animation: zk-shimmer 1.25s linear infinite;
+}
+.skel__row { height: 18px; margin: 9px 16px; }
+.skel__row:nth-child(odd) { width: calc(100% - 32px); }
+.skel__row:nth-child(3n) { width: 72%; }
+.skel__row:nth-child(3n + 2) { width: 88%; }
+.skel--tiles {
+  flex-direction: row;
+  gap: 12px;
+  padding: 0;
+  margin-bottom: 14px;
+  background: transparent;
+  border: 0;
+}
+.skel--tiles > div { flex: 1; height: 118px; border-radius: var(--r-card); }
+.skel__disc { width: 44px; height: 44px; border-radius: 50%; }
+.skel__line { height: 12px; width: 140px; margin-top: 6px; }
+.skel__line--title { height: 22px; width: 220px; margin-top: 0; }
+
+/* ── Sections (cards with a heading) ─────────────────────────────────────── */
+.sect { padding: var(--sp-5) var(--sp-6) var(--sp-6); margin-bottom: var(--sp-5); }
+.sect--tight { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
+.sect__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sp-4);
+  margin-bottom: var(--sp-4);
+}
+.sect--tight .sect__head { margin-bottom: var(--sp-3); }
+.sect--tight .h-sec { font-size: var(--fs-md); }
+.sect__tools { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
+
+.btn__n {
+  font-size: 11px;
+  font-weight: var(--fw-semi);
+  font-variant-numeric: tabular-nums;
+  padding: 1px 6px;
+  border-radius: var(--r-pill);
+  background: var(--zk-green-tint);
+  color: var(--zk-green-ink);
+}
+
+/* Segmented control */
+.seg {
+  display: inline-flex;
+  padding: 2px;
+  border-radius: var(--r-sm);
+  background: var(--zk-line-soft);
+}
+.seg__b {
+  font: inherit;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--zk-muted);
+  cursor: pointer;
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.seg__b:hover { color: var(--zk-ink); }
+.seg__b.is-on { background: var(--zk-card); color: var(--zk-ink); box-shadow: var(--sh-xs); }
+
+/* ── Tables ──────────────────────────────────────────────────────────────── */
 .gridwrap {
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
+  min-width: 0;
   overflow: hidden;
   overflow-x: auto;
 }
+.gridwrap--flush { margin: 0 calc(var(--sp-6) * -1) calc(var(--sp-6) * -1); border-top: 1px solid var(--zk-line-soft); }
 
 .grid {
   width: 100%;
-  /* Eight columns of operational data do not compress: below this the card
-     scrolls sideways rather than squeezing every cell into two words a line. */
-  min-width: 1000px;
+  min-width: 720px;
   border-collapse: separate;
   border-spacing: 0;
   font-size: var(--fs-sm);
@@ -128,997 +241,504 @@
   top: 0;
   z-index: 1;
   text-align: left;
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-  padding: 12px 16px;
-  background: var(--zk-tint);
-  border-bottom: 1px solid var(--zk-line);
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-muted);
+  padding: 10px 16px;
+  background: var(--zk-card);
+  border-bottom: 1px solid var(--zk-card-line);
   white-space: nowrap;
 }
+.grid th.num { text-align: right; }
+
+.grid__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.grid__sort svg { opacity: 0; transition: opacity var(--t-fast); color: var(--zk-grey); }
+.grid__sort:hover svg, .grid__sort.is-on svg { opacity: 1; }
+.grid__sort.is-on { color: var(--zk-ink); }
+.grid__sort.is-on svg { color: var(--zk-blue); }
 
 .grid td {
-  padding: var(--sp-4) var(--sp-5);
+  padding: 11px 16px;
   border-bottom: 1px solid var(--zk-line-soft);
   vertical-align: middle;
 }
+.grid tbody tr:last-child td { border-bottom: none; }
+.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
 
-.grid tbody tr {
-  transition: background var(--t-fast);
-}
-
-.grid tbody tr:last-child td {
-  border-bottom: none;
-}
-
-.grid tbody tr:hover {
-  background: var(--zk-tint);
-}
-
-/* An accent that arrives on hover, drawn inside the cell so it never disturbs
-   the table's own borders. */
-.grid tbody tr:hover td:first-child {
-  box-shadow: inset 3px 0 0 var(--zk-blue);
-}
-
-.grid .num {
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
-
-/* The lead reference is the thing an operator quotes on a call. */
-.grid__ref {
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  color: var(--zk-muted);
-}
-
+.grid__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.grid__id { min-width: 0; }
+.grid__name { font-weight: var(--fw-medium); color: var(--zk-ink); }
 .grid__sub {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
   font-size: var(--fs-2xs);
   color: var(--zk-muted);
   margin-top: 3px;
 }
+td > .grid__sub { display: block; }
+.grid__ref { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; }
+.grid--tight { min-width: 0; }
 
-.grid__link {
-  color: var(--zk-blue);
-  text-decoration: none;
-  font-weight: 500;
-  border-bottom: 1px solid transparent;
-  transition: border-color var(--t-fast);
-}
+/* The row IS the control. */
+.grid__row { cursor: pointer; transition: background .11s; }
+.grid__row:hover { background: var(--zk-hover); }
+.grid__row:hover .grid__name { color: var(--zk-blue-dark); }
+.grid__row:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: -2px; background: var(--zk-hover); }
 
-.grid__link:hover {
-  border-bottom-color: currentColor;
-}
+/* A left edge that says who holds the lead. Stalled rows are tinted too —
+   a lead three hours into a two-minute step is what this console is for. */
+.grid__row.is-stalled td { background: rgba(211, 47, 47, 0.035); }
+.grid__row.is-stalled td:first-child { box-shadow: inset 3px 0 0 var(--zk-danger); }
+.grid__row.is-working td:first-child { box-shadow: inset 3px 0 0 var(--zk-blue-mid); }
+.grid__row.is-stalled:hover td { background: rgba(211, 47, 47, 0.06); }
 
-/* ---- loading skeleton ---- */
-.skel {
+/* A finished lead, dimmed rather than removed. */
+.grid__row.is-done { color: var(--zk-grey); }
+.grid__row.is-done .grid__name { color: var(--zk-muted); font-weight: var(--fw-normal); }
+.grid__row.is-done .avatar { opacity: .55; }
+.grid__row.is-done:hover { color: var(--zk-ink); }
+.grid__row.is-done:hover .grid__name { color: var(--zk-blue-dark); }
+
+.grid__more {
   display: flex;
-  flex-direction: column;
-  gap: 1px;
-  padding: 14px 0;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
-  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 12px;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-blue-dark);
+  text-decoration: none;
+  border-top: 1px solid var(--zk-line-soft);
+}
+.grid__more:hover { background: var(--zk-hover); }
+
+/* Agent status in a row */
+.run { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); line-height: 1.3; }
+.run__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
+.run--working { color: var(--zk-blue-dark); }
+.run--working .run__dot { background: var(--zk-blue); animation: runPulse 1.6s ease-in-out infinite; }
+.run--waiting { color: var(--zk-muted); }
+.run--waiting .run__dot { background: var(--zk-blue-light); }
+.run--stalled { color: var(--zk-danger-ink); font-weight: var(--fw-medium); }
+.run--stalled .run__dot, .run__dot--stalled { background: var(--zk-danger); }
+@keyframes runPulse {
+  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(33,103,174,.45); }
+  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(33,103,174,0); }
 }
 
-.skel__row {
-  height: 18px;
-  margin: 9px 16px;
-  border-radius: var(--r-sm);
-  background: linear-gradient(90deg, var(--zk-line-soft) 0%, var(--zk-tint) 40%, var(--zk-line-soft) 80%);
-  background-size: 420px 100%;
-  animation: zk-shimmer 1.25s linear infinite;
-}
-
-.skel__row:nth-child(odd) { width: calc(100% - 32px); }
-.skel__row:nth-child(3n) { width: 72%; }
-.skel__row:nth-child(3n + 2) { width: 88%; }
-
-/* ---- chips ---- */
-.chip {
+/* Renewal countdown */
+.due {
   display: inline-flex;
   align-items: center;
   font-size: var(--fs-2xs);
-  font-weight: 500;
-  padding: 3px 10px;
+  font-weight: var(--fw-medium);
+  padding: 2px 9px;
   border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  border: 1px solid var(--zk-blue-light);
-}
-
-.chip--warn {
-  background: var(--zk-amber-tint);
-  color: var(--zk-amber-ink);
-  border-color: var(--zk-amber-line);
-}
-
-/* ---- doors ---- */
-.doors {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
-  gap: 18px;
+  white-space: nowrap;
+}
+.due--lapsed { background: var(--zk-danger-tint); color: var(--zk-danger-ink); }
+.due--urgent { background: var(--zk-amber-tint);  color: var(--zk-amber-ink); }
+.due--soon   { background: var(--zk-tint-blue);   color: var(--zk-blue-dark); }
+.due--later  { background: var(--zk-line-soft);   color: var(--zk-muted); }
+
+/* ── Filter bar ──────────────────────────────────────────────────────────── */
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  margin-bottom: var(--sp-4);
+}
+.filters__q {
+  flex: 1 1 260px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-ground);
+  color: var(--zk-grey);
+}
+.filters__q:focus-within { border-color: var(--zk-blue); background: var(--zk-card); box-shadow: var(--ring); color: var(--zk-blue); }
+.filters__q input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: var(--fs-xs); color: var(--zk-ink); }
+.filters__q input::placeholder { color: var(--zk-grey); }
+
+.filters__sel {
+  height: 34px;
+  padding: 0 30px 0 12px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-card);
+  font: inherit;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-ink);
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235d6162' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 11px;
+  cursor: pointer;
+}
+.filters__sel:hover { border-color: var(--zk-grey); }
+.filters__sel:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
+
+.filters__tog {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-card);
+  font: inherit;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-muted);
+  cursor: pointer;
+  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+}
+.filters__tog:hover { border-color: var(--zk-grey); color: var(--zk-ink); }
+.filters__tog.is-on { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); color: var(--zk-blue-dark); }
+.filters__count {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-size: var(--fs-2xs);
+  color: var(--zk-muted);
+  font-variant-numeric: tabular-nums;
 }
 
+/* ── Doors (new-lead chooser) ────────────────────────────────────────────── */
+.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
 .door {
   position: relative;
   font: inherit;
   text-align: left;
   cursor: pointer;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-lg);
-  box-shadow: var(--sh-sm);
-  padding: 22px 22px 20px;
+  background: var(--zk-card);
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-card);
+  padding: 20px 20px 18px;
   display: flex;
   flex-direction: column;
   gap: 10px;
-  overflow: hidden;
-  transition: box-shadow var(--t), transform var(--t-fast), border-color var(--t-fast);
+  transition: box-shadow var(--t), border-color var(--t-fast);
 }
-
-/* The accent bar is the door's handle: 3px at rest, the full brand gradient
-   once the pointer is on it. */
-.door::before {
-  content: '';
-  position: absolute;
-  inset: 0 0 auto;
-  height: 3px;
-  background: var(--grad-blue);
-  transform-origin: left;
-  transition: height var(--t);
-}
-
-.door:hover {
-  border-color: var(--zk-blue-light);
-  box-shadow: var(--sh-md);
-  transform: translateY(-2px);
-}
-
-.door:hover::before {
-  height: 5px;
-}
-
-.door:focus-visible {
-  border-color: var(--zk-blue);
-  box-shadow: var(--ring);
-}
-
-.door strong {
-  font-size: var(--fs-md);
-  font-weight: 500;
-  letter-spacing: -0.01em;
-  color: var(--zk-ink);
-}
-
-.door p {
-  margin: 0;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  line-height: 1.55;
-}
-
-.door .chip {
-  align-self: flex-start;
-}
-
-/* ---- panel ---- */
-.panel {
-  /* FLAT. Was a shadowed white card; now a plain section on the white
-     canvas, set off by its heading and by space, not by a box. */
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  padding: 0;
-  margin-bottom: var(--sp-8);
-}
-
-.panel__head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--sp-5);
-  margin-bottom: var(--sp-6);
-}
-
-.panel__title {
-  margin: 0;
-  font-size: var(--fs-lg);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.018em;
-  line-height: var(--lh-tight);
-}
-
-.panel__sub {
-  margin: 5px 0 0;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  max-width: 62ch;
-  line-height: 1.55;
-}
-
-/* ---- actions ---- */
-.acts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.act {
-  font: inherit;
-  cursor: pointer;
-  text-align: left;
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-md);
-  padding: 11px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 196px;
-  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
-}
-
-.act:hover {
-  border-color: var(--zk-blue-light);
-  background: var(--zk-tint);
-  box-shadow: var(--sh-sm);
-  transform: translateY(-1px);
-}
-
-.act.is-open {
-  border-color: var(--zk-blue);
-  background: var(--zk-tint-blue);
-  box-shadow: var(--ring);
-  transform: none;
-}
-
-.act strong {
-  font-size: var(--fs-xs);
-  font-weight: 500;
-}
-
-.act__by {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-}
-
-.acts__form {
-  margin-top: 22px;
-  padding-top: 22px;
-  border-top: 1px solid var(--zk-line-soft);
-  animation: zk-rise 0.24s var(--ease) both;
-}
-
-/* ---- what the machine is doing ----
-   Shown where an empty action bar used to be. Most stages are carried by an AI
-   employee that takes a minute or two, and a screen that says nothing for two
-   minutes reads as broken. */
-.doing {
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  margin-bottom: 22px;
-  padding: 16px 20px;
-  border-radius: var(--r-lg);
-  border: 1px solid var(--zk-blue-light);
-  background: var(--zk-tint-blue);
-}
-
-.doing div {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.doing strong {
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-}
-
-.doing span {
-  font-size: var(--fs-2xs);
-  line-height: 1.5;
-  color: var(--zk-muted);
-}
-
-.doing__pulse {
-  flex: none;
-  margin-top: 5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--zk-blue);
-  box-shadow: 0 0 0 0 rgba(33, 103, 174, 0.5);
-  animation: zk-pulse 1.9s var(--ease) infinite;
-}
-
-@keyframes zk-pulse {
-  70%  { box-shadow: 0 0 0 9px rgba(33, 103, 174, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(33, 103, 174, 0); }
-}
-
-/* ---- and when it has stopped ----
-   Same strip, amber, and NOT pulsing: the animation is what says "something is
-   happening", so it is the first thing that has to go when nothing is. The
-   agents refuse rather than invent — the rating engine will not price without
-   an IDV — and that refusal used to be visible only as a lead that never moved
-   again. */
-.doing--blocked {
-  border-color: var(--zk-amber-line);
-  background: var(--zk-amber-tint);
-  align-items: flex-start;
-}
-
-.doing--blocked strong { color: var(--zk-amber-ink); }
-
-.doing__stop {
-  flex: none;
-  margin-top: 5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-  background: var(--zk-amber);
-}
-
-.doing__fix {
-  align-self: flex-start;
-  margin-top: 9px;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  padding: 7px 15px;
-  border-radius: var(--r-pill);
-  color: var(--zk-amber-ink);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-amber-line);
-  transition: background var(--t-fast), border-color var(--t-fast);
-}
-.doing__fix:hover { background: #fff8f1; border-color: var(--zk-amber); }
-.doing__fix:focus-visible { outline: 2px solid var(--zk-amber); outline-offset: 1px; }
-
-/* ---- what the workflow said ----
-   The message the API returns per activity, shown verbatim: it is the workflow
-   telling the operator what it just set in motion. */
-.said {
-  display: flex;
-  align-items: flex-start;
-  gap: 14px;
-  margin-bottom: 22px;
-  padding: 14px 16px 14px 20px;
-  border-radius: var(--r-lg);
-  border: 1px solid var(--zk-line);
-  border-left: 3px solid var(--zk-blue);
-  background: var(--zk-white);
-  box-shadow: var(--sh-sm);
-  animation: zk-rise 0.24s var(--ease) both;
-}
-
-.said p {
-  flex: 1;
-  margin: 0;
-  font-size: var(--fs-xs);
-  line-height: 1.5;
-  color: var(--zk-ink);
-}
-
-.said button {
-  flex: none;
-  font: inherit;
-  font-size: var(--fs-lg);
-  line-height: 1;
-  cursor: pointer;
-  padding: 2px 6px;
-  border: 0;
-  border-radius: var(--r-sm);
-  background: none;
-  color: var(--zk-grey);
-  transition: background var(--t-fast), color var(--t-fast);
-}
-
-.said button:hover {
-  background: var(--zk-tint);
-  color: var(--zk-ink);
-}
-
-/* The stage a queue named by need actually maps to. */
-.page__stage {
-  display: block;
-  margin-top: 4px;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-}
-
-/* ---- back ----
-   An icon, not a sentence: the way out of a record is a known shape and does not
-   need naming twice on the page. It carries a title and an aria-label, so the
-   name is still there for a pointer that hovers and for a screen reader. */
-.backbtn {
-  flex: none;
-  margin-top: var(--sp-1);
-  width: 38px;
-  height: 38px;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  border-radius: var(--r-md);
-  border: 1px solid var(--zk-line);
-  background: var(--zk-white);
-  color: var(--zk-muted);
-  box-shadow: var(--sh-xs);
-  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
-}
-
-.backbtn svg {
-  width: 16px;
-  height: 16px;
-  transition: transform var(--t-fast);
-}
-
-.backbtn:hover {
-  border-color: var(--zk-blue-light);
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  box-shadow: var(--sh-sm);
-}
-
-.backbtn:hover svg {
-  transform: translateX(-2px);
-}
-
-.backbtn:focus-visible {
-  outline: none;
-  border-color: var(--zk-blue);
-  box-shadow: var(--ring);
-}
-
-.page__lead {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sp-4);
-  min-width: 0;
-}
-
-/* ---- lead: the file beside the story ---- */
-.lead {
-  display: grid;
-  /* THE STORY GETS THE WIDE COLUMN. The trail used to sit in a 384px gutter
-     with its own scrollbar while a panel of reference fields had the whole
-     width — exactly backwards for a product whose point is the record of
-     work nobody watched. Now the narrative has the measure prose needs and
-     the reference rail is narrow, because short key/value pairs are the one
-     thing a narrow column is good for. */
-  grid-template-columns: minmax(0, 1fr) 340px;
-  gap: var(--sp-6);
-  align-items: start;
-}
-
-.lead__main {
-  min-width: 0;
-}
-
-/* The trail stays in view while the file is read against it. */
-.lead__side {
-  position: sticky;
-  top: 92px;
-  min-width: 0;
-  max-height: calc(100vh - 108px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-/* Rail panels are tighter than main panels — a 340px measure cannot afford
-   32px of padding on each side. */
-.lead__side .panel { padding: 0; margin-bottom: var(--sp-6); }
-.lead__side .panel > .panel__head { padding: 0; margin-bottom: var(--sp-4); }
-.lead__side .panel--crew { padding: 0 0 var(--sp-6); border-bottom: 1px solid var(--zk-line); }
-/* rail headings sit at label size, not the big panel-title size — the rail is
-   reference, and a 18px "Customer" heading would shout over the facts. */
-.lead__side .panel__title {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
-}
-.lead__side .panel__sub { display: none; }
-
-.panel--rail {
-  padding: 0;
-  margin-bottom: 0;
-  overflow: hidden;
-}
-
-.panel--rail .panel__head {
-  padding: 20px 22px 0;
-  margin-bottom: 14px;
-}
-
-/* .lead__feed is gone: the trail is page content and scrolls with the page.
-   An inner scroll region is a widget; the story is not a widget. */
-
-/* One column below the width where a rail stops paying for itself. */
-@media (max-width: 1100px) {
-  .lead {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .lead__side {
-    position: static;
-    max-height: none;
-    overflow: visible;
-  }
-}
-
-/* ---- tabs ----
-   Underline rather than pills: these swap the whole panel below them, which is
-   what a tab is for; a pill segment reads as a filter on shared content. The
-   2px rule lives on the button, so a strip that wraps to two rows still marks
-   the active one correctly. */
-.props {
-  margin: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
-  gap: 0 36px;
-}
-
-.prop {
-  display: grid;
-  grid-template-columns: minmax(96px, 33%) minmax(0, 1fr);
-  gap: 16px;
-  align-items: baseline;
-  padding: 11px 10px;
-  margin: 0 -10px;
-  border-radius: var(--r-md);
-  border-bottom: 1px solid var(--zk-line-soft);
-  transition: background var(--t-fast);
-}
-
-.prop:hover {
-  background: var(--zk-tint);
-}
-
-.prop dt {
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  line-height: 1.45;
-}
-
-.prop dd {
-  margin: 0;
-  font-size: var(--fs-xs);
-  color: var(--zk-ink);
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.prop__num {
-  font-variant-numeric: tabular-nums;
-  font-weight: 500;
-}
-
-/* Prose is not a property. It takes the full width, is labelled above rather
-   than beside, and is folded by ClampText. */
-.prop--note {
-  grid-column: 1 / -1;
-  display: block;
-  margin: 10px -10px;
-  padding: 14px 16px;
-  border-bottom: 0;
-  border: 1px solid var(--zk-line-soft);
-  border-left: 3px solid var(--zk-blue-light);
-  border-radius: 0 var(--r-md) var(--r-md) 0;
-  background: var(--zk-tint);
-}
-
-.prop--note:hover {
-  background: var(--zk-tint);
-  border-color: var(--zk-blue-light);
-}
-
-.prop--note dt {
-  margin-bottom: 7px;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
+.door:hover { border-color: var(--zk-blue-light); box-shadow: var(--sh-card-hover); }
+.door:focus-visible { border-color: var(--zk-blue); box-shadow: var(--ring); outline: none; }
+.door strong { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--zk-ink); }
+.door p { margin: 0; font-size: var(--fs-2xs); color: var(--zk-muted); line-height: 1.55; }
+.chip {
+  display: inline-flex; align-items: center; align-self: flex-start;
+  font-size: var(--fs-2xs); font-weight: var(--fw-medium);
+  padding: 2px 9px; border-radius: var(--r-pill);
+  background: var(--zk-tint-blue); color: var(--zk-blue-dark);
 }
 
-.prop--note dd {
-  margin: 0;
-}
-
-/* ---- lead file ---- */
-.lead__stage {
-  flex: none;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: var(--sp-2);
-  text-align: right;
-}
-
-.lead__stagelabel {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.lead__closed {
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-}
-
-.lead__stage strong {
-  font-size: var(--fs-md);
-  font-weight: var(--fw-semi);
-  letter-spacing: -0.01em;
-  color: var(--zk-blue-dark);
-  padding: var(--sp-2) var(--sp-5);
-  border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-  border: 1px solid var(--zk-blue-light);
-}
-
-/* A closed lead is not a live stage; it should not wear the live stage's blue. */
-.lead__stage strong.is-closed {
-  color: var(--zk-muted);
-  background: var(--zk-tint);
-  border-color: var(--zk-line);
-}
-
-/* ---- renewal countdown ---- */
-.due {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  padding: 3px 10px;
-  border-radius: var(--r-pill);
-  white-space: nowrap;
-}
-
-.due--lapsed {
-  background: var(--zk-danger-tint);
-  color: var(--zk-danger-ink);
-  border: 1px solid var(--zk-danger-line);
-}
-
-.due--urgent {
-  background: var(--zk-amber-tint);
-  color: var(--zk-amber-ink);
-  border: 1px solid var(--zk-amber-line);
-}
-
-.due--soon {
-  background: var(--zk-tint-blue);
-  color: var(--zk-blue-dark);
-  border: 1px solid var(--zk-blue-light);
-}
-
-.due--later {
-  background: var(--zk-tint);
-  color: var(--zk-muted);
-  border: 1px solid var(--zk-line);
-}
-
-/* ---- lead header meta ---- */
-.lead__meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 0 0 22px;
-}
-
-.lead__meta div {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  padding: 9px 16px;
-  border-radius: var(--r-md);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  box-shadow: var(--sh-xs);
-}
-
-.lead__meta dt {
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-.lead__meta dd {
-  margin: 0;
-  font-size: var(--fs-xs);
-  color: var(--zk-ink);
-}
-
-.lead__meta--money {
-  border-color: var(--zk-blue-light) !important;
-  background: var(--zk-tint-blue) !important;
-}
-
-.lead__meta--money dd {
-  font-size: var(--fs-md);
-  font-weight: 500;
-  color: var(--zk-blue-dark);
-  font-variant-numeric: tabular-nums;
-}
-
-/* ── Portfolio overview ──────────────────────────────────────────────────
-   An operations dashboard: numbers first, prose nowhere. Every measure on
-   this page is derived from the lead list in the browser, so nothing here is
-   a figure the reader cannot get back to by opening a queue. */
-
-.stamp {
-  flex: none;
-  align-self: center;
-  font-size: var(--fs-3xs);
-  letter-spacing: .04em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   OVERVIEW
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-/* ── Right now ─────────────────────────────────────────────────────────────
-   The overview's first row. Four large numbers on a navy ground so the page
-   opens on a statement rather than a grid: this is who holds the work. Each
-   cell carries its own hue at the top edge — blue for the machine, amber for
-   a person, teal for the customer, red for risk — so the row can be read as
-   colour before it is read as text. */
+/* Who holds the work — four quiet cards; the ones actually owed warm up. */
 .now {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--sp-3);
-  margin-bottom: var(--sp-5);
+  margin-bottom: var(--sp-3);
 }
-
 .now__cell {
   position: relative;
-  padding: var(--sp-6) var(--sp-6) var(--sp-5);
-  border-radius: var(--r-lg);
-  background: var(--zk-navy);
-  color: var(--zk-white);
-  overflow: hidden;
-  box-shadow: var(--sh-md);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-areas: 'ico label' 'ico value' 'ico sub';
+  column-gap: 14px;
+  row-gap: 2px;
+  padding: var(--sp-4) var(--sp-5);
+  transition: box-shadow var(--t);
 }
-
-.now__cell::before {
-  content: '';
-  position: absolute;
-  inset: 0 0 auto 0;
-  height: 4px;
-  background: var(--zk-blue-light);
+.now__ico {
+  grid-area: ico;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 11px;
+  color: var(--zk-blue-dark);
+  background: var(--zk-tint-blue);
 }
-.now__cell--person::before { background: var(--zk-amber-line); }
-.now__cell--cust::before   { background: var(--zk-cyan); }
-.now__cell--risk::before   { background: var(--zk-danger-line); }
-
-/* A live person-queue or a lapsed renewal is the one thing on this page that
-   is actually owed. It warms up; the rest stay navy. */
-.now__cell--person.is-live { background: var(--zk-amber-ink); }
-.now__cell--risk.is-live   { background: var(--zk-danger-ink); }
-
-.now__l {
-  display: block;
-  margin-bottom: var(--sp-3);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .09em;
-  text-transform: uppercase;
-  opacity: .78;
-}
-
+.now__l { grid-area: label; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--zk-muted); }
 .now__v {
-  display: block;
-  margin-bottom: var(--sp-2);
-  font-size: var(--fs-3xl);
+  grid-area: value;
+  font-size: var(--fs-2xl);
   font-weight: var(--fw-semi);
-  line-height: 1;
-  letter-spacing: -.03em;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  color: var(--zk-ink);
   font-variant-numeric: tabular-nums;
 }
+.now__s { grid-area: sub; font-size: var(--fs-2xs); line-height: 1.4; color: var(--zk-grey); }
 
-.now__s {
-  display: block;
-  font-size: var(--fs-2xs);
-  line-height: var(--lh-snug);
-  opacity: .82;
-}
+.now__cell--person .now__ico { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
+.now__cell--cust .now__ico   { color: var(--zk-teal-ink);  background: var(--zk-teal-tint); }
+.now__cell--risk .now__ico   { color: var(--zk-danger-ink); background: var(--zk-danger-tint); }
 
-/* KPI strip. Whitespace rather than rules — see .lmetrics for why the cage
-   went. Tabular figures so the row does not jitter as it refreshes. */
-.kpis {
+.now__cell--person.is-live { border-color: var(--zk-amber-line); background: linear-gradient(180deg, #fff 0%, var(--zk-amber-tint) 100%); }
+.now__cell--person.is-live .now__v { color: var(--zk-amber-ink); }
+.now__cell--risk.is-live   { border-color: var(--zk-danger-line); background: linear-gradient(180deg, #fff 0%, var(--zk-danger-tint) 100%); }
+.now__cell--risk.is-live .now__v { color: var(--zk-danger-ink); }
+
+/* The pipeline, as one bar */
+.flow { padding: var(--sp-5) var(--sp-6) var(--sp-5); margin-bottom: var(--sp-3); }
+.flow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
+.flow__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-2xs); color: var(--zk-muted); }
+.flow__legend span { display: inline-flex; align-items: center; gap: 6px; }
+.flow__sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
+.flow__sw--blue  { background: var(--zk-blue); }
+.flow__sw--amber { background: var(--zk-amber); }
+.flow__sw--teal  { background: var(--zk-teal); }
+.flow__sw--grey  { background: var(--zk-grey); }
+
+.flow__bar {
   display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-6) var(--sp-8);
-  padding: var(--sp-6) 0;
-  border-top: 1px solid var(--zk-line);
-  border-bottom: 1px solid var(--zk-line);
-  margin-bottom: var(--sp-6);
+  gap: 3px;
+  height: 34px;
+  border-radius: 9px;
+  overflow: hidden;
 }
-
-.kpi { min-width: 0; }
-
-.kpi__l {
-  display: block;
-  margin-bottom: var(--sp-2);
-  font-size: var(--fs-3xs);
+.flow__seg {
+  flex: 1 1 0;
+  min-width: 34px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  color: #fff;
+  font-size: var(--fs-2xs);
   font-weight: var(--fw-semi);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  transition: filter var(--t-fast), transform var(--t-fast);
 }
+.flow__seg:hover { filter: brightness(1.08); }
+.flow__seg--blue  { background: var(--zk-blue); }
+.flow__seg--amber { background: var(--zk-amber); }
+.flow__seg--teal  { background: var(--zk-teal); }
+.flow__seg--grey  { background: var(--zk-grey); }
+.flow__seg--line  { background: var(--zk-line-soft); }
 
+.flow__stages {
+  list-style: none;
+  margin: var(--sp-4) 0 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 4px 8px;
+}
+.flow__stage {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--r-xs);
+  text-decoration: none;
+  color: var(--zk-ink);
+  font-size: var(--fs-2xs);
+  transition: background var(--t-fast);
+}
+.flow__stage:hover { background: var(--zk-hover); }
+.flow__stage b { margin-left: auto; font-weight: var(--fw-semi); font-variant-numeric: tabular-nums; }
+.flow__stage.is-zero { color: var(--zk-grey); }
+.flow__stage.is-zero b { font-weight: var(--fw-normal); }
+.flow__stage.is-end .flow__sname { color: var(--zk-muted); }
+.flow__sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.flow__ki { flex: none; }
+.flow__ki--blue  { color: var(--zk-blue); }
+.flow__ki--amber { color: var(--zk-amber); }
+.flow__ki--teal  { color: var(--zk-teal); }
+.flow__ki--grey  { color: var(--zk-grey); }
+.flow__ki--line  { color: var(--zk-grey); }
+
+/* KPI strip */
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--sp-4) var(--sp-6);
+  padding: var(--sp-4) var(--sp-6);
+  margin-bottom: var(--sp-5);
+}
+.kpi { min-width: 0; padding-left: var(--sp-4); border-left: 1px solid var(--zk-line-soft); }
+.kpi:first-child { padding-left: 0; border-left: 0; }
+.kpi__l { display: block; margin-bottom: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--zk-muted); }
 .kpi__v {
   display: block;
-  margin-bottom: var(--sp-1);
-  font-size: var(--fs-3xl);
+  margin-bottom: 2px;
+  font-size: var(--fs-xl);
   font-weight: var(--fw-semi);
   line-height: var(--lh-tight);
   color: var(--zk-navy);
   font-variant-numeric: tabular-nums;
-  letter-spacing: -.028em;
+  letter-spacing: -.025em;
 }
+.kpi__s { display: block; font-size: var(--fs-2xs); line-height: 1.4; color: var(--zk-grey); }
 
-.kpi__s {
-  display: block;
-  font-size: var(--fs-2xs);
-  line-height: var(--lh-snug);
-  color: var(--zk-muted);
-}
-
-/* Two columns on a desk, one on anything narrower. The distribution is the
-   half that survives being pushed below the fold. */
-.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; align-items: start; }
-
-.sec {
+/* A sign-off, not a task */
+.appr {
   display: flex;
-  align-items: baseline;
-  gap: 10px;
-  margin: 0 0 12px;
-  font-size: var(--fs-3xs);
-  font-weight: 500;
-  letter-spacing: .07em;
-  text-transform: uppercase;
-  color: var(--zk-muted);
+  align-items: center;
+  gap: 16px;
+  margin-bottom: var(--sp-5);
+  padding: 14px 20px;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color var(--t-fast), box-shadow var(--t-fast);
 }
-.split > div > .sec:not(:first-child) { margin-top: 30px; }
-.sec__hint { font-size: var(--fs-2xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--zk-grey); }
+.appr:hover { box-shadow: var(--sh-card-hover); }
+.appr:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
+.appr__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--zk-muted); background: var(--zk-line-soft); flex: none; }
+.appr.is-live { border-color: var(--zk-amber-line); background: linear-gradient(90deg, var(--zk-amber-tint) 0%, #fff 60%); }
+.appr.is-live .appr__ico { color: var(--zk-amber-ink); background: #fff; }
+.appr__n { flex: none; min-width: 34px; font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: 1; letter-spacing: -0.02em; color: var(--zk-grey); font-variant-numeric: tabular-nums; }
+.appr.is-live .appr__n { color: var(--zk-amber-ink); }
+.appr__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--zk-ink); }
+.appr__t em { font-style: normal; font-size: var(--fs-2xs); font-weight: var(--fw-normal); line-height: 1.45; color: var(--zk-muted); }
+.appr__go { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); color: var(--zk-muted); white-space: nowrap; }
 
-/* Work queues. A row rather than a card: five of them as cards is a wall. */
+/* Two columns: what needs a person / what is about to lapse. */
+.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sp-5); align-items: start; }
+
+/* Work queues */
 .qlist { display: flex; flex-direction: column; gap: 6px; }
 .q {
   display: grid;
-  grid-template-columns: 44px 1fr auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
   align-items: center;
   gap: 12px;
-  padding: 11px 14px;
+  padding: 10px 12px 10px 10px;
   border: 1px solid var(--zk-line-soft);
-  border-radius: var(--r-sm);
-  background: var(--zk-white);
+  border-radius: var(--r-md);
+  background: var(--zk-card);
   text-decoration: none;
   color: inherit;
   transition: border-color .12s, background .12s;
 }
-.q:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
-.q__n { font-size: var(--fs-xl); font-weight: 500; color: var(--zk-grey); font-variant-numeric: tabular-nums; text-align: right; }
-.q__t { font-size: var(--fs-xs); color: var(--zk-ink); }
-.q__t em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--zk-muted); margin-top: 1px; }
-.q__age { font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
-.q__ro {
-  font-size: var(--fs-3xs); letter-spacing: .06em; text-transform: uppercase;
-  color: var(--zk-grey); border: 1px solid var(--zk-line); border-radius: 3px; padding: 1px 5px;
-}
-/* Only a queue with work in it earns weight. The eye should land on the
-   number that needs clearing, not read five identical rows. */
-.q.is-live { border-color: var(--zk-line); }
-.q.is-live .q__n { color: var(--zk-navy); }
+.q:hover { border-color: var(--zk-blue-light); background: var(--zk-hover); }
+.q__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--zk-muted); background: var(--zk-line-soft); }
+.q__ico--needs    { color: var(--zk-amber-ink); background: var(--zk-amber-tint); }
+.q__ico--customer { color: var(--zk-teal-ink); background: var(--zk-teal-tint); }
+.q__t { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--zk-ink); min-width: 0; }
+.q__t em { display: block; font-style: normal; font-weight: var(--fw-normal); font-size: var(--fs-2xs); color: var(--zk-muted); margin-top: 1px; }
+.q__age { font-size: var(--fs-2xs); color: var(--zk-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.q__n { min-width: 28px; text-align: right; font-size: var(--fs-lg); font-weight: var(--fw-semi); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
+.q.is-live .q__n { color: var(--zk-ink); }
+.q__go { display: grid; place-items: center; width: 22px; height: 22px; color: var(--zk-grey); }
+.q:hover .q__go { color: var(--zk-blue); }
+.q__go--ro { color: var(--zk-grey); }
 
-.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
+/* Expiry bands as filters */
+.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--sp-4); }
 .bucket {
-  padding: 13px 15px;
-  border: 1px solid var(--zk-line);
-  border-left-width: 3px;
-  border-radius: var(--r-sm);
-  background: var(--zk-white);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  padding: 10px 12px;
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-md);
+  background: var(--zk-card);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
 }
-.bucket strong { display: block; font-size: var(--fs-xl); font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
-.bucket span { display: block; margin-top: 2px; font-size: var(--fs-2xs); color: var(--zk-muted); }
-.bucket--lapsed { border-left-color: var(--zk-danger); }
+.bucket:hover { border-color: var(--zk-grey); }
+.bucket strong { font-size: var(--fs-lg); font-weight: var(--fw-semi); line-height: 1.1; font-variant-numeric: tabular-nums; }
+.bucket span { font-size: var(--fs-2xs); color: var(--zk-muted); }
 .bucket--lapsed strong { color: var(--zk-danger-ink); }
-.bucket--urgent { border-left-color: var(--zk-amber); }
-.bucket--urgent strong { color: var(--zk-amber-ink); }
-.bucket--soon   { border-left-color: var(--zk-blue-mid); }
-.bucket--soon strong { color: var(--zk-blue-dark); }
+.bucket--week strong   { color: var(--zk-amber-ink); }
+.bucket--month strong  { color: var(--zk-blue-dark); }
+.bucket--lapsed.is-on { background: var(--zk-danger-tint); border-color: var(--zk-danger-line); }
+.bucket--week.is-on   { background: var(--zk-amber-tint);  border-color: var(--zk-amber-line); }
+.bucket--month.is-on  { background: var(--zk-tint-blue);   border-color: var(--zk-blue-light); }
+.bucket:focus-visible { outline: none; border-color: var(--zk-blue); box-shadow: var(--ring); }
 
-/* Stage distribution. A bar per stage, scaled to the largest — enough to see
-   where the book is banked without pulling in a charting library. */
-.dist { display: flex; flex-direction: column; gap: 3px; }
-.dist__r {
-  display: grid;
-  grid-template-columns: 1fr 74px 26px;
+/* ═══════════════════════════════════════════════════════════════════════════
+   LEAD
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Whose move it is — a pill in the header */
+.holds {
+  flex: none;
+  display: inline-flex;
   align-items: center;
   gap: 10px;
-  padding: 5px 8px;
-  border-radius: var(--r-xs);
-  text-decoration: none;
-  color: inherit;
+  padding: 6px 14px 6px 6px;
+  border-radius: var(--r-pill);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-card);
 }
-.dist__r:hover { background: var(--zk-tint); }
-.dist__l { font-size: var(--fs-2xs); color: var(--zk-ink); }
-.dist__bar { height: 6px; border-radius: 3px; background: var(--zk-line-soft); overflow: hidden; }
-.dist__f { display: block; height: 100%; border-radius: 3px; background: var(--zk-blue-mid); min-width: 0; }
-.dist__f--needs { background: var(--zk-amber); }
-.dist__f--customer { background: var(--zk-blue); }
-.dist__f--auto { background: var(--zk-blue-light); }
-.dist__f--waiting { background: var(--zk-grey); }
-.dist__f--end { background: var(--zk-line); }
-.dist__n { font-size: var(--fs-2xs); text-align: right; color: var(--zk-muted); font-variant-numeric: tabular-nums; }
-.dist__r.is-zero .dist__l, .dist__r.is-zero .dist__n { color: var(--zk-grey); }
+.holds__puck { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--zk-muted); background: var(--zk-line-soft); }
+.holds__txt { display: flex; flex-direction: column; line-height: 1.2; }
+.holds__txt small { font-size: 11px; font-weight: var(--fw-medium); color: var(--zk-grey); }
+.holds__txt b { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--zk-ink); }
+.holds--ai .holds__puck     { color: var(--zk-blue-dark);  background: var(--zk-tint-blue); }
+.holds--person .holds__puck { color: var(--zk-amber-ink);  background: var(--zk-amber-tint); }
+.holds--cust .holds__puck   { color: var(--zk-teal-ink);   background: var(--zk-teal-tint); }
 
-.grid--tight th, .grid--tight td { padding-top: 8px; padding-bottom: 8px; }
-
-@media (max-width: 1080px) {
-  .split { grid-template-columns: 1fr; gap: 26px; }
-}
-@media (max-width: 640px) {
-  .buckets { grid-template-columns: 1fr; }
+/* Your move */
+.cta {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  padding: 8px 14px 8px 16px;
+  border: 0;
+  border-radius: var(--r-md);
+  background: var(--zk-amber);
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 6px 16px -8px rgba(181, 118, 31, .6);
+  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
 }
+.cta:hover { background: var(--zk-amber-ink); transform: translateY(-1px); }
+.cta:focus-visible { outline: 2px solid var(--zk-amber-ink); outline-offset: 2px; }
+.cta__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
+.cta__txt small { font-size: 11px; font-weight: var(--fw-medium); opacity: .85; }
+.cta__txt b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
 
-/* ── Lead measures ───────────────────────────────────────────────────────
-   The same strip as the portfolio KPIs, at lead scale. Age and dwell time are
-   computed rather than stored, and they are the two figures that answer "is
-   this moving?" — a question the record itself cannot answer. */
-/* ── The numbers that matter ──────────────────────────────────────────────
-   This was a 1px-gap hairline grid — seven equal cells in a cage, every
-   value the same size as every label. The cage is a 2015 device and the
-   equality was the real fault: if nothing is bigger, the reader has to do
-   the prioritising themselves, seven times, on every lead.
-
-   Whitespace separates the cells now instead of rules, and the values are
-   22px against 12px labels. Premium and commission — the two numbers
-   anyone actually came for — are bigger again. */
+/* The numbers that matter, plus the journey */
 .lmetrics {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-6) var(--sp-8);
-  padding: var(--sp-6) 0;
-  border-top: 1px solid var(--zk-line);
-  border-bottom: 1px solid var(--zk-line);
-  margin-bottom: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: var(--sp-4) var(--sp-6);
+  padding: var(--sp-4) var(--sp-6) 0;
+  margin-bottom: var(--sp-5);
 }
-
-.lm { min-width: 0; }
-
-.lm__l {
-  display: block;
-  margin-bottom: var(--sp-2);
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
+.lm { min-width: 0; padding-bottom: var(--sp-4); }
+.lm__l { display: block; margin-bottom: 4px; font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--zk-muted); }
 .lm__v {
   display: block;
-  margin-bottom: var(--sp-1);
+  margin-bottom: 2px;
   font-size: var(--fs-xl);
   font-weight: var(--fw-semi);
   line-height: var(--lh-tight);
@@ -1126,84 +746,165 @@
   font-variant-numeric: tabular-nums;
   letter-spacing: -.02em;
 }
-
-/* Money leads. Size does the prioritising so the reader does not have to. */
 .lm--hero .lm__v { font-size: var(--fs-2xl); }
+.lm__s { display: block; font-size: var(--fs-2xs); line-height: 1.4; color: var(--zk-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* The countdown carries its tone as COLOUR only — no pill box on a figure. */
+.lm__v--lapsed { color: var(--zk-danger-ink); }
+.lm__v--urgent { color: var(--zk-amber-ink); }
+.lm__v--soon   { color: var(--zk-blue-dark); }
+.lm--rail { grid-column: 1 / -1; padding: var(--sp-3) 0 var(--sp-2); border-top: 1px solid var(--zk-line-soft); }
 
-.lm__v--sm { font-size: var(--fs-md); font-weight: var(--fw-medium); }
-
-.lm__s {
-  display: block;
-  font-size: var(--fs-2xs);
-  line-height: var(--lh-snug);
-  color: var(--zk-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* Two columns: the story, and the reference rail */
+.lead {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 340px;
+  gap: var(--sp-5);
+  align-items: start;
 }
+.lead__main { min-width: 0; }
+.lead__side {
+  position: sticky;
+  top: 72px;
+  min-width: 0;
+  max-height: calc(100vh - 88px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.lead__side .sect { margin-bottom: var(--sp-4); }
 
-/* The countdown carries its own tone here, the same one the queues use, so a
-   lapsed renewal reads the same wherever it appears. */
-.lm__v.due--lapsed { color: var(--zk-danger-ink); }
-.lm__v.due--urgent { color: var(--zk-amber-ink); }
+/* What the workflow said */
+.said {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: var(--sp-4);
+  padding: 12px 12px 12px 16px;
+  border-radius: var(--r-md);
+  border: 1px solid var(--zk-green-line);
+  background: var(--zk-green-tint);
+  animation: zk-rise 0.24s var(--ease) both;
+}
+.said__ico { flex: none; color: var(--zk-green-ink); }
+.said p { flex: 1; margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--zk-green-ink); }
+.said button { flex: none; display: grid; place-items: center; width: 26px; height: 26px; cursor: pointer; border: 0; border-radius: 6px; background: none; color: var(--zk-green-ink); }
+.said button:hover { background: rgba(255,255,255,.6); }
 
-/* ── Next step ───────────────────────────────────────────────────────────
-   One decision, sized like one. The stage's own step is the only thing at
-   full weight; loops sit under it, and an AI's own work is folded away
-   entirely — it is recovery, not an outstanding task. */
+/* What the machine is doing */
+.doing {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin-bottom: var(--sp-4);
+  padding: 14px 18px;
+  border-radius: var(--r-card);
+  border: 1px solid var(--zk-blue-light);
+  background: var(--zk-tint-blue);
+}
+.doing > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+.doing strong { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--zk-blue-dark); }
+.doing span { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-muted); }
+.doing__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--zk-blue-dark); background: #fff; }
+.doing__ico--pulse { box-shadow: 0 0 0 0 rgba(33, 103, 174, 0.4); animation: zk-pulse 1.9s var(--ease) infinite; }
+@keyframes zk-pulse {
+  70%  { box-shadow: 0 0 0 9px rgba(33, 103, 174, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(33, 103, 174, 0); }
+}
+.doing--blocked, .doing--stalled { border-color: var(--zk-amber-line); background: var(--zk-amber-tint); }
+.doing--blocked strong, .doing--stalled strong { color: var(--zk-amber-ink); }
+.doing--blocked .doing__ico, .doing--stalled .doing__ico { color: var(--zk-amber-ink); }
+.doing--waiting { border-color: var(--zk-teal-line); background: var(--zk-teal-tint); }
+.doing--waiting strong { color: var(--zk-teal-ink); }
+.doing--waiting .doing__ico { color: var(--zk-teal-ink); }
+.doing__fix {
+  align-self: flex-start;
+  margin-top: 8px;
+  font: inherit;
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
+  cursor: pointer;
+  padding: 6px 13px;
+  border-radius: var(--r-sm);
+  color: var(--zk-amber-ink);
+  background: #fff;
+  border: 1px solid var(--zk-amber-line);
+  transition: background var(--t-fast), border-color var(--t-fast);
+}
+.doing__fix:hover { border-color: var(--zk-amber); }
 
+/* Next step */
 .step { display: flex; flex-wrap: wrap; gap: 10px; }
 .step__btn {
   flex: 1 1 220px;
-  display: block;
-  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
   border: 1px solid var(--zk-blue);
   border-radius: var(--r-md);
   background: var(--zk-blue);
-  color: var(--zk-white);
+  color: #fff;
   text-align: left;
   cursor: pointer;
+  font: inherit;
   transition: background .12s, border-color .12s, box-shadow .12s;
 }
-.step__btn:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); box-shadow: 0 2px 10px rgba(33,103,174,.25); }
-.step__btn strong { display: block; font-size: var(--fs-sm); font-weight: 500; }
-.step__btn span { display: block; margin-top: 2px; font-size: var(--fs-2xs); opacity: .85; }
-.step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); }
-
-/* Decline sits beside Clear as an equal — an underwriter is choosing between
-   two decisions, not deciding whether to act. It is outlined rather than
-   filled so the pair does not read as two identical recommendations. */
-.step__btn--no {
-  background: var(--zk-white);
-  color: var(--zk-danger-ink);
-  border-color: var(--zk-danger-line);
-}
+.step__btn:hover { background: var(--zk-blue-dark); border-color: var(--zk-blue-dark); box-shadow: 0 6px 16px -8px rgba(33,103,174,.6); }
+.step__btn.is-open { background: var(--zk-blue-deep); border-color: var(--zk-blue-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
+.step__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); flex: none; }
+.step__t { display: flex; flex-direction: column; min-width: 0; }
+.step__t strong { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
+.step__t span { font-size: var(--fs-2xs); opacity: .85; margin-top: 1px; }
+.step__btn--no { background: #fff; color: var(--zk-danger-ink); border-color: var(--zk-danger-line); }
+.step__btn--no .step__ico { background: var(--zk-danger-tint); }
 .step__btn--no:hover { background: var(--zk-danger-tint); border-color: var(--zk-danger); box-shadow: none; }
-.step__btn--no.is-open { background: var(--zk-danger-tint); border-color: var(--zk-danger); }
+.step__btn--no.is-open { background: var(--zk-danger-tint); border-color: var(--zk-danger); box-shadow: none; }
 
-/* Loops. Real, bounded, and never the answer to "what now". */
 .alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
 .alt__btn {
-  padding: 8px 13px;
-  border: 1px solid var(--zk-line);
+  padding: 7px 12px;
+  border: 1px solid var(--zk-card-line);
   border-radius: var(--r-sm);
-  background: var(--zk-white);
+  background: var(--zk-card);
   color: var(--zk-ink);
+  font: inherit;
   font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
   cursor: pointer;
   transition: border-color .12s, background .12s;
 }
-.alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-tint); }
-.alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); }
-.alt__btn em { font-style: normal; margin-left: 7px; font-size: var(--fs-2xs); color: var(--zk-grey); }
+.alt__btn:hover { border-color: var(--zk-blue-light); background: var(--zk-hover); }
+.alt__btn.is-open { border-color: var(--zk-blue); background: var(--zk-tint-blue); color: var(--zk-blue-dark); }
+.alt__btn em { font-style: normal; margin-left: 7px; font-weight: var(--fw-normal); color: var(--zk-grey); }
 .alt__btn--exit { color: var(--zk-danger-ink); }
 .alt__btn--exit:hover { border-color: var(--zk-danger-line); background: var(--zk-danger-tint); }
 
-/* Recovery, folded. Needed on the day an agent stalls and never otherwise. */
-.stuck { margin-top: 18px; border-top: 1px solid var(--zk-line-soft); padding-top: 14px; }
+/* The form, in a bounded panel with the action's own name on it */
+.acts__form {
+  margin-top: var(--sp-4);
+  padding: var(--sp-4) var(--sp-5) var(--sp-5);
+  border: 1px solid var(--zk-card-line);
+  border-radius: var(--r-md);
+  background: var(--zk-ground);
+  animation: zk-rise 0.24s var(--ease) both;
+}
+.acts__formhead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: var(--sp-4);
+  padding-bottom: var(--sp-3);
+  border-bottom: 1px solid var(--zk-line-soft);
+}
+.acts__formhead h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--zk-ink); }
+.acts__formhead p { margin: 2px 0 0; font-size: var(--fs-2xs); color: var(--zk-muted); }
+
+/* Recovery, folded */
+.stuck { margin-top: 16px; border-top: 1px solid var(--zk-line-soft); padding-top: 12px; }
 .stuck > summary {
   cursor: pointer;
   font-size: var(--fs-2xs);
+  font-weight: var(--fw-medium);
   color: var(--zk-muted);
   list-style: none;
   display: inline-flex;
@@ -1211,622 +912,171 @@
   gap: 6px;
 }
 .stuck > summary::-webkit-details-marker { display: none; }
-.stuck > summary::before { content: '▸'; font-size: var(--fs-2xs); color: var(--zk-grey); }
-.stuck[open] > summary::before { content: '▾'; }
+.stuck__caret { transition: transform var(--t-fast); }
+.stuck[open] .stuck__caret { transform: rotate(90deg); }
 .stuck > summary:hover { color: var(--zk-blue-dark); }
 .stuck__why { margin: 10px 0 0; font-size: var(--fs-2xs); color: var(--zk-muted); max-width: 64ch; }
 
-/* ── The row IS the control ───────────────────────────────────────────────
-   An "Open" button was a ~90px target inside a 1000px row that already reads
-   as one object, and it put a second tab stop on every line. The row carries
-   the click, the keyboard and the affordance; the button is gone.
-
-   role="link" + tabIndex on a <tr> rather than wrapping cells in <a>: an
-   anchor cannot span table cells without breaking the table layout, and
-   display:block on a <td> collapses the column alignment the queue depends on. */
-.grid__row { cursor: pointer; transition: background .11s, box-shadow .11s; }
-.grid__row:hover { background: var(--zk-tint); }
-.grid__row:hover .grid__name { color: var(--zk-blue-dark); }
-.grid__row:focus-visible {
-  outline: 2px solid var(--zk-blue);
-  outline-offset: -2px;
-  background: var(--zk-tint);
-}
-.grid__name { font-weight: 500; color: var(--zk-ink); }
-
-/* A left edge that says who holds the lead, readable before any text is.
-   Only the states worth acting on are marked — colouring every row would
-   make the marking mean nothing. */
-.grid__row.is-stalled td:first-child { box-shadow: inset 3px 0 0 var(--zk-danger); }
-.grid__row.is-working td:first-child { box-shadow: inset 3px 0 0 var(--zk-blue-mid); }
-
-/* ── What the agent is doing ──────────────────────────────────────────────
-   Agent-status disclosure: an automated stage is either moving or stuck, and
-   after an hour those look identical without this. `working` pulses because
-   something is happening right now; `waiting` is steady because it is normal;
-   `stalled` is red because a lead three hours into a two-minute step is the
-   thing this console exists to catch. */
-.run { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-2xs); line-height: 1.3; }
-.run__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
-
-.run--working { color: var(--zk-blue-dark); }
-.run--working .run__dot { background: var(--zk-blue); animation: runPulse 1.6s ease-in-out infinite; }
-
-.run--waiting { color: var(--zk-muted); }
-.run--waiting .run__dot { background: var(--zk-blue-light); }
-
-.run--stalled { color: var(--zk-danger-ink); font-weight: 500; }
-.run--stalled .run__dot { background: var(--zk-danger); }
-
-@keyframes runPulse {
-  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(33,103,174,.45); }
-  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(33,103,174,0); }
-}
-/* Respect a reader who has asked the interface to stop moving. */
-@media (prefers-reduced-motion: reduce) {
-  .run--working .run__dot { animation: none; }
-}
-
-/* ── An attached document is a thing to open ──────────────────────────────
-   The record printed a filename as text, so the only way to see what an
-   agent had actually uploaded was to perform the activity again. */
-.prop__files { display: flex; flex-wrap: wrap; gap: 6px; }
-
-.prop__file {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  max-width: 100%;
-  font-size: var(--fs-2xs);
-  text-decoration: none;
-  padding: 3px 10px;
-  border-radius: var(--r-pill, 999px);
-  background: var(--zk-tint-blue);
-  border: 1px solid transparent;
-  color: var(--zk-blue-dark);
-  overflow-wrap: anywhere;
-}
-.prop__file:hover { border-color: var(--zk-blue-light); }
-.prop__file:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
-
-/* The part of a queue that is not anyone's task. Reported rather than hidden:
-   the leads are in that state, they are just being carried by an agent, and an
-   operator who counts the queue by hand should find the same total. */
-.q__auto {
-  display: block;
-  font-weight: 400;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  margin-top: 2px;
-}
-
-/* ---- waiting on someone outside the business ----
-   Neither an agent working nor a task of yours. Grey rather than blue, and
-   no pulse: nothing is happening, and that is the correct state. */
-.doing--waiting {
-  border-color: var(--zk-line);
-  background: var(--zk-tint);
-}
-.doing--waiting strong { color: var(--zk-ink); }
-
-.doing__wait {
-  flex: none;
-  margin-top: 5px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid var(--zk-grey);
-  background: transparent;
-}
-
-/* ---- panel action ----
-   A secondary control on a panel heading. Quiet: it opens a view, it does not
-   change anything. */
-.panel__act {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  flex: none;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  cursor: pointer;
-  padding: 6px 12px;
-  border-radius: var(--r-pill);
-  color: var(--zk-blue-dark);
-  background: var(--zk-white);
-  border: 1px solid var(--zk-line);
-  transition: background var(--t-fast), border-color var(--t-fast);
-}
-.panel__act svg { width: 13px; height: 13px; opacity: .75; }
-.panel__act b {
-  font-size: var(--fs-2xs);
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  padding: 1px 6px;
-  border-radius: var(--r-pill);
-  background: var(--zk-tint-blue);
-}
-.panel__act:hover { background: var(--zk-tint); border-color: var(--zk-blue-light); }
-.panel__act:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
-
-/* ---- who worked this lead ----
-   Five agents carry a lead and their names appeared only inside individual
-   entries. The team is a fact about the lead, so it sits above the trail. */
-.panel--crew { padding: var(--sp-5) var(--sp-6); }
-
-.crew {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-2) var(--sp-4);
-  margin-top: var(--sp-3);
-}
-
-.crew__l {
-  display: block;
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-/* ---- a sign-off, not a task ----
-   Confirming a premium is the only step in this workflow that is a person's
-   approval rather than a piece of work, and the only one locked to one role.
-   It sat fourth in a list of six queues, which is the wrong weight for the
-   decision that starts somebody's cover. Shown only to the role that owns it. */
-.appr {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  margin-bottom: 22px;
-  padding: 16px 22px;
-  border-radius: var(--r-lg);
-  text-decoration: none;
-  border: 1px solid var(--zk-line);
-  background: var(--zk-white);
-  transition: border-color var(--t-fast), box-shadow var(--t-fast);
-}
-
-/* Amber only when something is actually waiting. A permanent alert colour on
-   an empty queue teaches people to stop seeing it. */
-.appr.is-live {
-  border-color: var(--zk-amber-line);
-  background: var(--zk-amber-tint);
-}
-.appr:hover { box-shadow: var(--sh-sm); border-color: var(--zk-blue-light); }
-.appr:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
-
-.appr__n {
-  flex: none;
-  min-width: 46px;
-  font-size: var(--fs-2xl);
-  font-weight: 300;
-  line-height: 1;
-  letter-spacing: -0.02em;
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
-.appr.is-live .appr__n { color: var(--zk-amber-ink); }
-
-.appr__t {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-  flex: 1;
-  font-size: var(--fs-sm);
-  font-weight: 500;
-  color: var(--zk-ink);
-}
-.appr__t em {
-  font-style: normal;
-  font-size: var(--fs-2xs);
-  font-weight: 400;
-  line-height: 1.45;
-  color: var(--zk-muted);
-}
-
-.appr__go {
-  flex: none;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  white-space: nowrap;
-}
-
-/* ---- an agent that has not come back ----
-   Amber like `blocked`, because both need a person — but worded and coloured
-   apart from it: blocked means the workflow refused for a stated reason and
-   the fix is known; stalled means nobody knows, and the honest offer is to try
-   again. No pulse either way. */
-.doing--stalled {
-  border-color: var(--zk-amber-line);
-  background: var(--zk-amber-tint);
-}
-.doing--stalled strong { color: var(--zk-amber-ink); }
-
-/* ---- header right-hand cluster ---- */
-.page__right { display: flex; align-items: center; gap: 18px; flex: none; }
-
-.toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  font-size: var(--fs-2xs);
-  color: var(--zk-muted);
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-}
-.toggle input { accent-color: var(--zk-blue); cursor: pointer; }
-.toggle:hover { color: var(--zk-ink); }
-
-/* A finished lead, still listed. Dimmed rather than removed: "where did it
-   go?" is the question this page exists to answer, and a lead that ended is
-   still a lead. Hover restores it — it is muted, not disabled. */
-.grid__row.is-done { color: var(--zk-grey); }
-.grid__row.is-done .grid__name { color: var(--zk-muted); font-weight: 400; }
-.grid__row.is-done:hover { color: var(--zk-ink); }
-.grid__row.is-done:hover .grid__name { color: var(--zk-blue-dark); }
-
-/* ---- file a lead ----
-   Moved off the sidebar. A nav is for moving between places; this adds
-   something, and it now sits beside the lists it adds to. */
-.newlead {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-  padding: 9px 16px;
-  border-radius: var(--r-pill);
-  text-decoration: none;
-  font-size: var(--fs-xs);
-  font-weight: 500;
-  color: var(--zk-white);
-  background: var(--grad-blue);
-  box-shadow: var(--sh-sm);
-  transition: box-shadow var(--t), transform var(--t-fast), background var(--t);
-}
-.newlead svg { width: 14px; height: 14px; }
-.newlead:hover { background: var(--grad-blue-hover); box-shadow: var(--sh-md); transform: translateY(-1px); }
-.newlead:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 2px; }
-
-/* ── the lead file, all of it ─────────────────────────────────────────────
-   This was thirteen tabs with one group visible at a time, so "what do we
-   know about this lead?" took thirteen clicks and a good memory. Then it was
-   thirteen groups in CSS columns, which was worse in a different way: column
-   flow reads top-to-bottom-then-across, so a file whose groups run Source,
-   Customer, Intake landed on the page in an order nobody could predict, and
-   the groups are wildly uneven — Motor risk has twelve fields, Proposal has
-   two — so the columns tore raggedly.
-
-   A GRID OF CARDS instead. Reading order is left-to-right like every other
-   list on this screen, each group is bounded so its fields cannot be mistaken
-   for the next group's, and an uneven card leaves a clean gap under itself
-   rather than dragging the next heading up into the previous group's fields. */
-.file360 {
-  padding: 4px 22px 22px;
+/* The AI team on this lead */
+.crew { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.crew__row {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 14px;
-  align-items: start;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-top: 1px solid var(--zk-line-soft);
 }
-
-.fgroup {
-  padding: var(--sp-5) 0;
+.crew__row:first-child { border-top: 0; padding-top: 0; }
+.crew__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
+.crew__name {
+  font: inherit;
+  font-size: var(--fs-xs);
+  font-weight: var(--fw-medium);
+  color: var(--zk-ink);
+  padding: 0;
   border: 0;
-  border-bottom: 1px solid var(--zk-line);
-  border-radius: 0;
-  background: transparent;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+}
+.crew__name:hover { color: var(--zk-blue-dark); text-decoration: underline; }
+.crew__t span { font-size: 11.5px; color: var(--zk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.crew__n {
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-semi);
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  border-radius: var(--r-pill);
+  color: var(--zk-blue-dark);
+  background: var(--zk-tint-blue);
 }
 
+/* At a glance / lead file groups */
+.glance { display: grid; grid-template-columns: 1fr; }
+.fgroup { padding: var(--sp-3) 0; border-top: 1px solid var(--zk-line-soft); }
+.glance .fgroup:first-child { border-top: 0; padding-top: 0; }
 .fgroup h3 {
   display: flex;
   align-items: center;
-  gap: var(--sp-2);
-  margin: 0 0 var(--sp-4);
-  padding-bottom: var(--sp-3);
-  border-bottom: 1px solid var(--zk-line-soft);
-  font-size: var(--fs-3xs);
+  gap: 7px;
+  margin: 0 0 6px;
+  font-size: var(--fs-2xs);
   font-weight: var(--fw-semi);
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--zk-blue-dark);
-}
-
-.fgroup h3 span {
-  margin-left: auto;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
-  letter-spacing: 0;
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
-}
-
-/* Label and value on ONE line. Stacked pairs doubled the height of every fact
-   in the file for no gain — these are two-word labels against short values,
-   and a label gutter is what makes a column of them scannable. */
-.file360 .props { display: block; padding: 0; }
-
-.file360 .prop {
-  display: grid;
-  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-  gap: var(--sp-4);
-  align-items: baseline;
-  margin: 0;
-  padding: var(--sp-2) 0;
-  border: 0;
-  border-radius: 0;
-}
-
-.file360 .prop:hover { background: transparent; }
-
-.file360 .prop dt {
-  font-size: var(--fs-2xs);
-  line-height: 1.5;
-  color: var(--zk-grey);
-  margin: 0;
-}
-
-.file360 .prop dd {
-  font-size: var(--fs-2xs);
-  line-height: 1.5;
   color: var(--zk-ink);
-  overflow-wrap: anywhere;
 }
+.fgroup h3 svg { color: var(--zk-blue); }
+.fgroup h3 span { margin-left: auto; font-size: 11px; font-weight: var(--fw-medium); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
 
-/* ── the prose, folded ────────────────────────────────────────────────────
-   The AI paragraphs used to render inline with the same weight the audit
-   trail gives them — a tinted block, a bolded finding, a "Read the reasoning"
-   button — and with seven of them the file read as a wall of quotations with
-   the facts hidden between. Here they are a caption and two lines of grey.
-   Nothing is lost: the full text is one click away in the same dialog, and
-   the trail still shows each paragraph against the step that wrote it. */
-.fnotes {
-  margin-top: 11px;
-  padding-top: 10px;
-  border-top: 1px dashed var(--zk-line);
+.props { margin: 0; display: block; padding: 0; }
+.prop {
   display: grid;
-  gap: 10px;
-}
-
-.fnote__l {
-  display: block;
-  margin-bottom: 2px;
-  font-size: var(--fs-3xs);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--zk-grey);
-}
-
-/* The finding is emphasised in the trail, where it is the entry. Here it is
-   one fact among fifty, so it drops to body weight and two lines. */
-.file360 .clamp__lead,
-.file360 .clamp__text {
-  font-size: var(--fs-2xs);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--zk-muted);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.file360 .clamp__more { margin-top: 3px; font-size: var(--fs-2xs); }
-
-/* ── at a glance ──────────────────────────────────────────────────────────
-   The same card as the full file uses, so opening the drawer feels like more
-   of the thing you were already reading rather than a different screen. Four
-   sections at most, so a fixed auto-fit grid never leaves a lone card on a
-   row of its own the way the thirteen-group version did. */
-.glance {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0;
-  padding: 0;
-}
-
-.glance .props { display: block; padding: 0; }
-
-.glance .prop {
-  display: grid;
-  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-  gap: var(--sp-4);
+  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
+  gap: var(--sp-3);
   align-items: baseline;
   margin: 0;
-  padding: var(--sp-2) 0;
-  border: 0;
-  border-radius: 0;
+  padding: 5px 0;
 }
+.prop dt { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-grey); margin: 0; }
+.prop dd { margin: 0; font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; }
+.prop__num { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
+.prop__files { display: flex; flex-wrap: wrap; gap: 6px; }
 
-.glance .prop:hover { background: transparent; }
-.glance .prop dt { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-grey); margin: 0; }
-.glance .prop dd { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-ink); overflow-wrap: anywhere; }
-
-/* Same de-weighting as the full file: at a glance a reason is one fact among
-   a dozen, not the entry it is in the trail. */
-.glance .clamp__lead,
-.glance .clamp__text {
-  font-size: var(--fs-2xs);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--zk-muted);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.glance .clamp__more { margin-top: 3px; font-size: var(--fs-2xs); }
-
-/* An action that belongs to one card, not to the panel. Quiet until hovered:
-   the notes above it are the answer most of the time, and the transcript is
-   the follow-up question. */
-.glance__act {
+/* A document chip: type tag + name */
+.doc,
+.prop__file {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  margin-top: 10px;
-  padding: 5px 10px 5px 8px;
-  border: 1px solid var(--zk-line);
-  border-radius: var(--r-pill);
-  background: var(--zk-white);
-  cursor: pointer;
-  font: inherit;
-  font-size: var(--fs-2xs);
-  font-weight: 500;
+  gap: 7px;
+  max-width: 100%;
+  padding: 3px 9px 3px 4px;
+  border-radius: var(--r-sm);
+  border: 1px solid var(--zk-card-line);
+  background: var(--zk-card);
   color: var(--zk-blue-dark);
-  transition: background var(--t-fast), border-color var(--t-fast);
+  font-size: var(--fs-2xs);
+  text-decoration: none;
+  transition: border-color var(--t-fast), background var(--t-fast);
 }
+.doc:hover, .prop__file:hover { border-color: var(--zk-blue-light); background: var(--zk-tint-blue); }
+.doc__ext {
+  flex: none;
+  font-size: 9.5px;
+  font-weight: var(--fw-semi);
+  letter-spacing: .04em;
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: #fff;
+  background: var(--zk-danger);
+}
+.doc__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.glance__act:hover { background: var(--zk-tint-blue); border-color: var(--zk-blue-light); }
-.glance__act:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
-.glance__act svg { width: 13px; height: 13px; flex: none; }
+.glance .clamp__lead, .glance .clamp__text,
+.file360 .clamp__lead, .file360 .clamp__text {
+  font-size: var(--fs-2xs);
+  font-weight: var(--fw-normal);
+  line-height: 1.5;
+  color: var(--zk-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.glance .clamp__more, .file360 .clamp__more { margin-top: 2px; font-size: var(--fs-2xs); }
+
+.glance__act { margin-top: 8px; }
 
-/* HIDING IS ONLY SAFE WHILE IT STAYS FINDABLE, so this names the number it is
-   holding rather than saying "more". Full width and on the panel's own floor:
-   a link tucked into the header would be the discoverability problem that
-   sinks progressive disclosure. */
 .glance__all {
   display: flex;
   align-items: center;
   gap: 9px;
-  width: 100%;
-  padding: 13px 22px;
+  width: calc(100% + var(--sp-5) * 2);
+  margin: var(--sp-3) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
+  padding: 12px var(--sp-5);
   border: 0;
   border-top: 1px solid var(--zk-line-soft);
-  border-radius: 0 0 var(--r-lg) var(--r-lg);
-  background: none;
+  border-radius: 0 0 var(--r-card) var(--r-card);
+  background: var(--zk-ground);
   cursor: pointer;
   font: inherit;
   font-size: var(--fs-2xs);
-  font-weight: 500;
+  font-weight: var(--fw-medium);
   color: var(--zk-blue-dark);
   transition: background var(--t-fast);
 }
-
-.glance__all:hover { background: var(--zk-tint); }
+.glance__all:hover { background: var(--zk-tint-blue); }
 .glance__all:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: -2px; }
-.glance__all svg { width: 15px; height: 15px; flex: none; }
+.glance__all b { margin-left: auto; font-weight: var(--fw-normal); color: var(--zk-grey); font-variant-numeric: tabular-nums; }
 
-.glance__all b {
-  margin-left: auto;
-  font-weight: 400;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
+/* The full file, in its dialog */
+.file360 {
+  padding: 4px 22px 22px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 6px 28px;
+  align-items: start;
 }
+.file360 .fgroup { border-top: 0; padding: var(--sp-4) 0; }
+.file360 .fgroup h3 { padding-bottom: 8px; border-bottom: 1px solid var(--zk-line-soft); margin-bottom: 8px; }
+.fnotes { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--zk-line); display: grid; gap: 10px; }
+.fnote__l { display: block; margin-bottom: 2px; font-size: 11px; font-weight: var(--fw-medium); color: var(--zk-grey); }
 
-.panel__meta {
-  flex: none;
-  font-size: var(--fs-2xs);
-  color: var(--zk-grey);
-  font-variant-numeric: tabular-nums;
+/* ── Responsive ──────────────────────────────────────────────────────────── */
+@media (max-width: 1180px) {
+  .now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .kpi { border-left: 0; padding-left: 0; }
+  .split { grid-template-columns: minmax(0, 1fr); }
+  .lead { grid-template-columns: minmax(0, 1fr); }
+  .lead__side { position: static; max-height: none; overflow: visible; }
 }
-
-
-/* ── modern surface pass ──────────────────────────────────────────────────
-   The layout was right but the surface still read as a flat corporate form.
-   Two levers close most of the gap: a display face on the things the eye
-   lands on — the page title, panel headings and every figure — and one warm,
-   coloured signal for who holds the lead right now. */
-.page__title,
-.panel__title,
-.lead__stage strong,
-.lm__v,
-.kpi__v,
-.now__v,
-.fig .v {
-  font-family: var(--font-display);
-  letter-spacing: -0.02em;
+@media (max-width: 720px) {
+  .now, .kpis { grid-template-columns: minmax(0, 1fr); }
+  .buckets { grid-template-columns: 1fr; }
+  .page__head { flex-direction: column; }
+  .page__right { margin-top: 0; }
 }
-
-.page__title { letter-spacing: -0.03em; }
-
-/* WHO HOLDS THE LEAD, as a coloured pill — the first thing the eye should
-   catch. The stage name lives in the rail below; this says whose move it is,
-   which is the question an operator actually opens a lead to answer. */
-.holds {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-2);
-  padding: 0;
-  border: 0;
-  background: transparent;
+@media (prefers-reduced-motion: reduce) {
+  .run--working .run__dot, .doing__ico--pulse { animation: none; }
 }
-.holds__puck {
-  flex: none;
-  width: 10px; height: 10px;
-  border-radius: 50%;
-  background: var(--zk-teal);
-  box-shadow: 0 0 0 4px var(--zk-teal-tint);
-}
-/* the icon inside the disc is dropped in the flat treatment — the dot alone
-   carries the tone, and the label says the rest. */
-.holds__puck svg { display: none; }
-.holds__txt { display: inline; line-height: 1.3; }
-.holds__txt small { display: inline; }
-.holds__txt small {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .09em;
-  text-transform: uppercase;
-  color: var(--zk-teal-ink);
-  opacity: .9;
-}
-.holds__txt b {
-  font-weight: var(--fw-semi);
-  font-size: var(--fs-sm);
-  color: var(--zk-ink);
-  margin-left: var(--sp-1);
-}
-
-.holds--ai .holds__puck { background: var(--zk-blue); box-shadow: 0 0 0 4px var(--zk-tint-blue); }
-.holds--ai .holds__txt small { color: var(--zk-blue-dark); }
-
-.holds--person .holds__puck { background: var(--zk-amber); box-shadow: 0 0 0 4px var(--zk-amber-tint); }
-.holds--person .holds__txt small { color: var(--zk-amber-ink); }
-
-.holds--grey .holds__puck { background: var(--zk-grey); box-shadow: 0 0 0 4px var(--zk-tint); }
-.holds--grey .holds__txt small { color: var(--zk-muted); }
-
-.holds--cust .holds__puck { background: var(--zk-teal); box-shadow: 0 0 0 4px var(--zk-teal-tint); }
-.holds--cust .holds__txt small { color: var(--zk-teal-ink); }
-
-/* ── Your move: the immediate action, in the header ───────────────────────
-   The one thing this user must do, promoted top-right where the eye looks for
-   the next move. Amber because it is waiting on a person; pressing it opens
-   the form and scrolls to it. When nothing is owed, the passive holds status
-   sits here instead. */
-.cta {
-  flex: none;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-3);
-  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
-  border: 0;
-  border-radius: var(--r-md);
-  background: var(--zk-amber);
-  color: #fff;
-  cursor: pointer;
-  box-shadow: var(--sh-sm);
-  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
-}
-.cta:hover { background: var(--zk-amber-ink); box-shadow: var(--sh-md); }
-.cta:focus-visible { outline: 2px solid var(--zk-amber-ink); outline-offset: 2px; }
-.cta__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
-.cta__txt small {
-  font-size: var(--fs-3xs);
-  font-weight: var(--fw-semi);
-  letter-spacing: .08em;
-  text-transform: uppercase;
-  opacity: .82;
-}
-.cta__txt b { font-size: var(--fs-sm); font-weight: var(--fw-semi); }
-.cta svg { width: 16px; height: 16px; flex: none; }