diff --git a/README.md b/README.md
index cc4b123b..df90cf70 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ This pipeline takes raw sequencing data (FASTQ/BAM/VCF) from any vendor and runs
 - One Nextflow DSL2 pipeline from FASTQ, BAM or VCF to the report, and every step also as a bash script you can run on its own.
 - Optional family analysis of two or more processed relatives (step 38, a pedigree file): a GLnexus joint call, a somalier check that the samples are the people the pedigree says, which allele a child got from each parent, de novo candidates with both parents, and compound heterozygotes in trans or in cis ([multi-sample](https://geiserx.github.io/OwnGenome/multi-sample/#family-analysis-step-38-opt-in)).
 - Optional couple carrier screen for two partners of the pedigree (step 39): the recessive genes where both carry a change (ClinVar hits, deletions, SMN1 copy loss, FMR1 and FXN repeats) with the chance for a child, the X-linked findings, and what the screen does not see ([step 39](https://geiserx.github.io/OwnGenome/39-couple/)).
-- On the live site, a page per family: the pedigree drawn from the family file, each child's chromosome map, the relationship check, the shared segments and the couple screen ([family page](https://geiserx.github.io/OwnGenome/multi-sample/#on-the-live-site)).
+- On the live site, a page per family: a pedigree where each sequenced person opens their own page, the couple screen, who is related how as a grid, each child's stretches painted by parent, the de novo and compound-het candidates, and the members' medicines genes and haplogroups side by side ([family page](https://geiserx.github.io/OwnGenome/multi-sample/#on-the-live-site)).
 - Ends in an HTML report and a MultiQC summary. Alternative callers (GATK, FreeBayes, Strelka2, Octopus, BWA-MEM2, TIDDIT, GRIDSS) are there for benchmarking.
 
 ## Quick start
@@ -66,7 +66,7 @@ The full documentation is at **https://geiserx.github.io/OwnGenome/**, one page
 - [Vendor compatibility guide](https://geiserx.github.io/OwnGenome/vendor-guide/): what each provider delivers and how to get it
 - [Pipeline overview](https://geiserx.github.io/OwnGenome/pipeline-overview/): every step with its tool and image, which ones a default run includes, and the page for each step
 - [Nextflow](https://geiserx.github.io/OwnGenome/nextflow/): the workflow runner, parallel steps and resume
-- [Watch a run live](https://geiserx.github.io/OwnGenome/live-site/): a step map in the browser while the run goes, behind a password. The [demo](https://geiserx.github.io/OwnGenome/demo/) replays an invented run
+- [Watch a run live](https://geiserx.github.io/OwnGenome/live-site/): each genome as a report that leads with what to take to a doctor, a page per finding, a report per family, and a timeline of the steps while the run goes, behind a password. The [demo](https://geiserx.github.io/OwnGenome/demo/) replays an invented run
 - [Interpreting your results](https://geiserx.github.io/OwnGenome/interpreting-results/): what each report means and what to do with it
 - [Multi-sample comparison](https://geiserx.github.io/OwnGenome/multi-sample/): partners, siblings, parents
 - [Long-read guide](https://geiserx.github.io/OwnGenome/long-read-guide/): Nanopore and PacBio HiFi
diff --git a/assets/live/core.js b/assets/live/core.js
index 64ec443f..b6e4ff07 100644
--- a/assets/live/core.js
+++ b/assets/live/core.js
@@ -1,6 +1,6 @@
-// core.js: what the live site's pages share (home.html, index.html, family.html). Element builders,
+// core.js: what the live site's pages share (home.html, index.html, finding.html, family.html). Element builders,
 // a fetch that sends the session and goes to the login on a 401, the pedigree symbol, dates, the
-// caveat block, the facts list and the table. Text only through textContent and createElementNS:
+// caveat block, the facts list, the table, and the Journal's level marks and chromosome map. Text only through textContent and createElementNS:
 // no innerHTML, no inline script, no eval. Everything hangs on window.PGPUI.
 (function () {
   'use strict';
@@ -124,6 +124,92 @@
     });
   }
 
+  // --- the Journal's shared marks: the level glyph and word, and the chromosome map of findings ---
+  var LEVEL_WORDS = { act: 'Take to a doctor', medicine: 'Tell your prescriber', review: 'Worth a look',
+    carrier: 'For family planning', trust: 'Data quality', info: 'For information' };
+  var LEVEL_SHORT = { act: 'doctor', medicine: 'prescriber', review: 'look', carrier: 'family', trust: 'quality', info: 'info' };
+  var LEVEL_ORDER = ['act', 'medicine', 'review', 'carrier', 'trust', 'info'];
+  // A level is always its glyph and a word, never a colour alone.
+  function level(lv, words, extra) {
+    var s = el('span', { 'class': 'lv ' + lv + (extra ? ' ' + extra : ''), 'data-level': lv });
+    add(s, el('span', { 'class': 'g', 'aria-hidden': 'true' }), words === undefined ? LEVEL_WORDS[lv] || lv : words);
+    return s;
+  }
+  // A finding's level: a data-quality finding is always a problem with the data, so its mark is red.
+  function findingLevel(lv, words) { return level(lv, words, lv === 'trust' ? 'problem' : undefined); }
+  // GRCh38: [name, length Mb, centromere Mb].
+  var CHR = [['1', 248.96, 123.4], ['2', 242.19, 93.9], ['3', 198.3, 90.9], ['4', 190.21, 50], ['5', 181.54, 48.8],
+    ['6', 170.81, 59.8], ['7', 159.35, 60.1], ['8', 145.14, 45.2], ['9', 138.39, 43], ['10', 133.8, 39.8],
+    ['11', 135.09, 53.4], ['12', 133.28, 35.5], ['13', 114.36, 17.7], ['14', 107.04, 17.2], ['15', 101.99, 19],
+    ['16', 90.34, 36.8], ['17', 83.26, 25.1], ['18', 80.37, 18.5], ['19', 58.62, 26.2], ['20', 64.44, 28.1],
+    ['21', 46.71, 12], ['22', 50.82, 15], ['X', 156.04, 60.6], ['Y', 57.23, 10.4]];
+  var LV_COLOUR = { act: '#d03b3b', medicine: '#ec835a', review: '#fab219', carrier: '#9085e9', trust: '#c3c2b7', info: '#c3c2b7' };
+  function glyph(g, lv, x, y) {
+    var c = LV_COLOUR[lv] || LV_COLOUR.info;
+    if (lv === 'act') { g.appendChild(svg('rect', { x: x - 4, y: y - 4, width: 8, height: 8, fill: c, transform: 'rotate(45 ' + x + ' ' + y + ')' })); }
+    else if (lv === 'medicine') { g.appendChild(svg('rect', { x: x - 5.5, y: y - 3, width: 11, height: 6, rx: 3, fill: c })); }
+    else if (lv === 'review') { g.appendChild(svg('path', { d: 'M' + x + ' ' + (y - 5) + 'L' + (x + 5) + ' ' + (y + 4) + 'L' + (x - 5) + ' ' + (y + 4) + 'Z', fill: c })); }
+    else if (lv === 'carrier') {
+      g.appendChild(svg('circle', { cx: x - 2.6, cy: y, r: 3.4, fill: 'none', stroke: c, 'stroke-width': 1.6 }));
+      g.appendChild(svg('circle', { cx: x + 2.6, cy: y, r: 3.4, fill: 'none', stroke: c, 'stroke-width': 1.6 }));
+    } else { g.appendChild(svg('circle', { cx: x, cy: y, r: 4, fill: 'none', stroke: c, 'stroke-width': 1.5 })); }
+  }
+  // "chr16:2087914" or "chr16:2084000-2096000" -> {chr: '16', mb: 2.08}; null for anything else.
+  function locus(v) {
+    var m = /^(?:chr)?([0-9]{1,2}|X|Y):([0-9]+)/.exec(String(v || ''));
+    return m ? { chr: m[1], mb: Number(m[2]) / 1e6 } : null;
+  }
+  // The chromosome map: the 24 chromosomes in a row, each finding a glyph on its chromosome, with its
+  // name beside it and the same words in a title (and in the list under the figure).
+  function karyogram(marks, opts) {
+    opts = opts || {};
+    var W = opts.width || 680, H = opts.height || 190, top = 22, bottom = 22;
+    var slot = (W - 56) / CHR.length, scale = (H - top - bottom) / 249;
+    var s = svg('svg', { viewBox: '0 0 ' + W + ' ' + H, role: 'img', 'aria-label': opts.aria || 'Where the findings sit, by chromosome' });
+    CHR.forEach(function (c, i) {
+      var x = i * slot + slot / 2 - 3.5;
+      s.appendChild(svg('rect', { 'class': 'chr', x: x, y: top, width: 7, height: Math.max(1, c[2] * scale - 1.2), rx: 3.5 }));
+      s.appendChild(svg('rect', { 'class': 'chr', x: x, y: top + c[2] * scale + 1.2, width: 7, height: Math.max(1, (c[1] - c[2]) * scale - 1.2), rx: 3.5 }));
+      var t = svg('text', { 'class': 'lab', x: x + 3.5, y: H - 6, 'text-anchor': 'middle' });
+      t.textContent = c[0];
+      s.appendChild(t);
+    });
+    (marks || []).forEach(function (m) {
+      var i = -1;
+      CHR.forEach(function (c, j) { if (c[0] === m.chr) { i = j; } });
+      if (i < 0) { return; }
+      var x = i * slot + slot / 2 + 7, y = top + Math.min(m.mb, CHR[i][1]) * scale;
+      var g = svg('g', { 'class': 'mk', tabindex: '0' });
+      var tt = svg('title', {});
+      tt.textContent = (LEVEL_WORDS[m.lv] || '') + ': ' + (m.tip || m.label);
+      g.appendChild(tt);
+      g.appendChild(svg('line', { x1: x - 10.5, x2: x - 1, y1: y, y2: y, stroke: LV_COLOUR[m.lv] || LV_COLOUR.info, 'stroke-width': 2 }));
+      glyph(g, m.lv, x + 4, y);
+      if (m.label) {
+        var t = svg('text', { x: x + 11, y: y + 3.5, stroke: '#0e0f10', 'stroke-width': 4, 'paint-order': 'stroke', 'stroke-linejoin': 'round' });
+        t.textContent = m.label;
+        g.appendChild(t);
+      }
+      if (m.href) {
+        g.setAttribute('role', 'link');
+        g.addEventListener('click', function () { window.location.href = m.href; });
+        g.addEventListener('keydown', function (e) { if (e.key === 'Enter') { window.location.href = m.href; } });
+      }
+      s.appendChild(g);
+    });
+    return s;
+  }
+  // A plain time: "14:22" in UTC, "4 Nov" for a day.
+  var MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  function hm(utc) { var d = new Date(utc); return isFinite(d) ? ('0' + d.getUTCHours()).slice(-2) + ':' + ('0' + d.getUTCMinutes()).slice(-2) : ''; }
+  function dm(utc) { var d = new Date(utc); return isFinite(d) ? d.getUTCDate() + ' ' + MONTHS[d.getUTCMonth()] : ''; }
+  function hours(a, b) {
+    var x = Date.parse(a), y = Date.parse(b);
+    return isFinite(x) && isFinite(y) && y > x ? (y - x) / 3600e3 : null;
+  }
+
   window.PGPUI = { el: el, svg: svg, add: add, getJSON: getJSON, avatar: avatar, day: day, caveat: caveat,
-    facts: facts, table: table, tablist: tablist, firstSentence: firstSentence };
+    facts: facts, table: table, tablist: tablist, firstSentence: firstSentence, level: level, findingLevel: findingLevel, glyph: glyph,
+    karyogram: karyogram, locus: locus, LEVEL_WORDS: LEVEL_WORDS, LEVEL_SHORT: LEVEL_SHORT, LEVEL_ORDER: LEVEL_ORDER,
+    hm: hm, dm: dm, hours: hours };
 }());
diff --git a/assets/live/family-page.js b/assets/live/family-page.js
index 8a95a211..3a0213ff 100644
--- a/assets/live/family-page.js
+++ b/assets/live/family-page.js
@@ -1,8 +1,10 @@
 // family-page.js: a family's page (assets/live/family.html), from family.json
-// (bin/owngenome_live_family.py): the pedigree with each sequenced person a link to their page, the
+// (bin/owngenome_live_family.py), the Journal design: a report in chapters, with a lead that answers
+// "what does it mean for our children?". The pedigree with each sequenced person a link to their page, the
 // members with their run progress, what steps 38 and 39 planned, each couple's carrier screen in full
-// (both carry, then X-linked, then one partner), who is related how, and each child's chromosome
-// map. It draws what the steps wrote and computes nothing about genetics. Text through textContent,
+// (both carry, then X-linked, then one partner), who is related how as a grid (a list of pairs on a
+// phone), each child's stretches painted by parent, the de novo and compound-het candidates, and the
+// members side by side. It draws what the steps wrote and computes nothing about genetics. Text through textContent,
 // the drawing through createElementNS; images from this server only.
 (function () {
   'use strict';
@@ -11,11 +13,60 @@
   var el = U.el, add = U.add, root = document.documentElement;
   var RESULT = { shared: 'Both carry', x_linked: 'X-linked', one_partner: 'One partner' };
 
+  // A chapter: its roman number in brass, its title in the serif.
+  var CHAPTER = { 'Pedigree': 'I', 'Who is related how': 'II', 'Couple carrier screen': 'III', 'Each child': 'IV',
+    'Side by side': 'V', 'Plan and reports': 'App.' };
   function section(title, cls) {
-    var s = el('section', { 'class': 'card ' + (cls || '') });
-    add(s, el('h2', {}, title));
+    var s = el('section', { 'class': 'card ' + (cls || ''), id: 'ch-' + (cls || 'x') });
+    var h = el('h2', {});
+    if (CHAPTER[title]) { add(h, el('span', { 'class': 'secnum' }, CHAPTER[title])); }
+    add(h, title);
+    add(s, h);
     return s;
   }
+  // Colour follows the person: the members in their order, one colour each, on every family figure.
+  var PCOL = ['#d95926', '#3987e5', '#199e70', '#c98500', '#9085e9'];
+  function colourOf(f, sample) {
+    var i = (f.state.members || []).map(function (m) { return m.sample; }).indexOf(sample);
+    return i >= 0 ? PCOL[i % PCOL.length] : null;
+  }
+  // The four equally likely children of two carriers of one recessive gene: 1 affected, 2 carriers, 1 neither.
+  // Drawn only when the screen's own chance is 1 in 4: another chance (a partner with two copies) has
+  // another split, and the row's words say it.
+  function fourChildren(risk) {
+    if (!/^\s*1 in 4\b/.test(risk || '')) { return null; }
+    var box = el('div', { 'class': 'kids4' });
+    var g = el('div', { 'class': 'grid4', role: 'img', 'aria-label': 'Each pregnancy: 1 in 4 affected, 2 in 4 carriers, 1 in 4 neither' });
+    add(g, el('span', { 'class': 'aff', title: 'affected' }), el('span', { title: 'carrier' }), el('span', { title: 'carrier' }),
+      el('span', { 'class': 'non', title: 'neither' }));
+    add(box, g, add(el('div', { 'class': 'kt' }), el('b', {}, '1 in 4'), ' per pregnancy affected', el('br', {}),
+      '2 in 4 carriers, not affected; 1 in 4 neither'));
+    return box;
+  }
+  // The family's lead: what the screen, the relationship check and the children say, in plain words.
+  function lead(f) {
+    var st = f.state, out = [];
+    var seq = (st.members || []).filter(function (m) { return m.sequenced; }).length;
+    out.push([seq + ' genome' + (seq === 1 ? '' : 's') + ' of this family are read together here. ', false]);
+    (st.couples || []).forEach(function (c) {
+      if (!c.screened) { out.push([c.a + ' and ' + c.b + ' are not screened as a couple yet. ', false]); return; }
+      if (c.shared) { out.push([c.a + ' and ' + c.b + ' both carry a change in ' + c.shared + ' gene' + (c.shared > 1 ? 's' : '') + ': chapter III gives the chance per pregnancy for each. ', true]); }
+      else { out.push([c.a + ' and ' + c.b + ' share no carrier gene in what the screen sees; ', false], ['it does not see everything. ', false]); }
+      if (c.x_linked) { out.push([c.x_linked + ' X-linked finding' + (c.x_linked > 1 ? 's' : '') + ' bear on sons. ', true]); }
+    });
+    var flags = (f.relationships || []).filter(function (r) { return r.verdict === 'mismatch' || r.verdict === 'warn'; }).length;
+    var rels = f.relationships || [];
+    var checked = rels.filter(function (r) { return r.verdict && r.verdict !== 'not_checked'; }).length;
+    if (rels.length) {
+      out.push([flags ? 'A measured relationship differs from the family tree: read chapter II before anything else. '
+        : checked === rels.length ? 'The measured relationships match the family tree. '
+          : 'Some relationships could not be checked: chapter II says which. ', !!flags]);
+    }
+    if ((st.children || []).length) {
+      out.push([(st.children.length === 1 ? 'One child' : st.children.length + ' children') + ': chapter IV shows what each inherited from whom.', false]);
+    }
+    return out;
+  }
   function memberUrl(f, s) { return f.runs && f.runs[s] ? f.runs[s].url : null; }
 
   // The pedigree drawn from the layout the server gives: a sequenced person with a run here is a link.
@@ -38,6 +89,9 @@
       var shape = p.sex === 'male' ? U.svg('rect', { x: p.x - h, y: p.y - h, width: L.size, height: L.size, 'class': cls })
         : p.sex === 'female' ? U.svg('circle', { cx: p.x, cy: p.y, r: h, 'class': cls })
           : U.svg('polygon', { points: [p.x, p.y - h, p.x + h, p.y, p.x, p.y + h, p.x - h, p.y].join(' '), 'class': cls });
+      var pc = p.sequenced ? colourOf(f, p.sample) : null;
+      if (pc) { shape.style.setProperty('stroke', pc); }
+      if (!p.sequenced) { shape.style.setProperty('stroke-dasharray', '4 3'); }
       g.appendChild(shape);
       var t = U.svg('text', { x: p.x, y: p.y + h + 17, 'text-anchor': 'middle', 'class': 'ped-name' });
       t.textContent = p.sample;
@@ -125,6 +179,13 @@
         'screen does not see. ';
       if (c.report) { add(p, el('a', { href: c.report }, 'What the screen does not see')); }
       add(s, p);
+      rows.filter(function (r) { return r.result === 'shared'; }).forEach(function (r) {
+        var box = el('div', { 'class': 'mini', 'data-shared': r.gene });
+        add(box, el('h3', { 'class': 'h3' }, (r.condition || r.gene) + ' (' + r.gene + ')'));
+        add(box, el('p', { 'class': 'soft' }, 'Both carry a change in ' + r.gene + '. Carriers are not affected; a child who inherits both changes is.'));
+        add(box, fourChildren(r.offspring_risk) || el('p', {}, 'Chance per pregnancy, as the screen gives it: ' + (r.offspring_risk || 'not given') + '.'));
+        add(s, box);
+      });
       add(s, U.table({ columns: ['Result', 'Gene', 'Condition', 'Chance for a child', c.a, c.b, 'Why'],
         rows: rows.map(function (r) {
           var aFirst = r.partner_a === c.a;
@@ -135,44 +196,211 @@
     return s;
   }
 
+  function pairKey(a, b) { return [a, b].sort().join(' '); }
+  // Step 38's verdicts: ok (shown as matching), warn, mismatch, not_checked (too few sites to tell).
+  function mismatch(v) { return v === 'mismatch' || v === 'warn'; }
   function related(f) {
     var s = section('Who is related how', 'related');
     var rel = f.relationships || [], ibd = f.ibd_pairs || [];
     if (!rel.length && !ibd.length) { add(s, el('p', { 'class': 'dim' }, 'Not run yet (step 38).')); return s; }
-    var byPair = {};
-    ibd.forEach(function (r) { byPair[[r.sample_a, r.sample_b].sort().join(' ')] = r; });
+    var byRel = {}, byIbd = {}, names = [];
+    function seen(n) { if (names.indexOf(n) < 0) { names.push(n); } }
+    rel.forEach(function (r) { byRel[pairKey(r.sample_a, r.sample_b)] = r; seen(r.sample_a); seen(r.sample_b); });
+    ibd.forEach(function (r) { byIbd[pairKey(r.sample_a, r.sample_b)] = r; seen(r.sample_a); seen(r.sample_b); });
+    var order = (f.state.members || []).map(function (m) { return m.sample; });
+    names.sort(function (a, b) { return order.indexOf(a) - order.indexOf(b); });
+    function cellText(a, b) {
+      var r = byRel[pairKey(a, b)] || {}, i = byIbd[pairKey(a, b)] || {};
+      var lines = [];
+      lines.push(i.degree || (r.relatedness ? 'relatedness ' + r.relatedness : 'not measured'));
+      if (i.shared_cm) { lines.push(i.shared_cm + ' cM shared'); }
+      var declared = r.declared || i.declared;
+      if (declared) { lines.push('declared ' + declared); }
+      if (r.verdict === 'not_checked') { lines.push('not checked: too few sites'); }
+      else if (!r.verdict) { lines.push('relationship check not run'); }
+      return { lines: lines, flag: mismatch(r.verdict), verdict: r.verdict, reason: r.reason };
+    }
+    // The grid: one cell per pair, the degree first, the declared relation and a flag when they differ.
+    var grid = el('div', { 'class': 'rel-grid-wrap' });
+    var t = el('table', { 'class': 'rel-grid' });
+    var head = el('tr', {});
+    add(head, el('th', { scope: 'col' }, ''));
+    names.forEach(function (n) { add(head, el('th', { scope: 'col' }, n)); });
+    add(t, add(el('thead', {}), head));
+    var body = el('tbody', {});
+    names.forEach(function (a) {
+      var tr = el('tr', {});
+      add(tr, el('th', { scope: 'row' }, a));
+      names.forEach(function (b) {
+        if (a === b) { add(tr, el('td', { 'class': 'self', 'aria-label': 'the same person' }, '·')); return; }
+        if (!byRel[pairKey(a, b)] && !byIbd[pairKey(a, b)]) { add(tr, el('td', { 'class': 'none' }, 'not measured')); return; }
+        var c = cellText(a, b);
+        var td = el('td', { 'class': c.flag ? 'flag' : '', title: c.reason || '' });
+        c.lines.forEach(function (l, i) { add(td, el('span', { 'class': i ? 'sub' : 'main' }, l)); });
+        if (c.flag) { add(td, el('span', { 'class': 'chip chip-attn' }, '⚑ ' + c.verdict)); }
+        add(tr, td);
+      });
+      add(body, tr);
+    });
+    add(t, body);
+    add(grid, t);
+    add(s, grid);
+    // On a phone: a list of pairs.
+    var ul = el('ul', { 'class': 'rel-pairs' });
+    names.forEach(function (a, i) {
+      names.slice(i + 1).forEach(function (b) {
+        if (!byRel[pairKey(a, b)] && !byIbd[pairKey(a, b)]) { return; }
+        var c = cellText(a, b);
+        var li = el('li', { 'class': c.flag ? 'flag' : '' });
+        add(li, el('span', { 'class': 'pair' }, a + ' and ' + b + ': '), c.lines.join(', '));
+        if (c.flag) { add(li, ' ', el('span', { 'class': 'chip chip-attn' }, '⚑ ' + c.verdict + (c.reason ? ': ' + c.reason : ''))); }
+        add(ul, li);
+      });
+    });
+    add(s, ul);
+    add(s, el('p', { 'class': 'dim legend-line' }, 'Each cell: the degree the shared stretches point to (or somalier’s ' +
+      'relatedness), the centimorgans shared and the declared relation. ⚑ marks a pair the measurement does not match.'));
     var rows = rel.map(function (r) {
-      var i = byPair[[r.sample_a, r.sample_b].sort().join(' ')] || {};
+      var i = byIbd[pairKey(r.sample_a, r.sample_b)] || {};
       return [r.sample_a + ' and ' + r.sample_b, r.declared, r.relatedness, r.ibs0, r.ibs2, i.shared_cm || '.',
         i.degree || '.', r.verdict, r.reason];
     });
     ibd.forEach(function (i) {
-      if (!rel.some(function (r) { return [r.sample_a, r.sample_b].sort().join(' ') === [i.sample_a, i.sample_b].sort().join(' '); })) {
+      if (!byRel[pairKey(i.sample_a, i.sample_b)]) {
         rows.push([i.sample_a + ' and ' + i.sample_b, i.declared, i.relatedness, '.', '.', i.shared_cm, i.degree, '.', '.']);
       }
     });
-    add(s, U.table({ columns: ['Pair', 'Declared', 'Relatedness', 'IBS0', 'IBS2', 'Shared cM', 'Degree', 'Verdict', 'Reason'],
+    var d = el('details', { 'class': 'w-fallback' });
+    add(d, el('summary', {}, 'Every measured number'));
+    add(d, U.table({ columns: ['Pair', 'Declared', 'Relatedness', 'IBS0', 'IBS2', 'Shared cM', 'Degree', 'Verdict', 'Reason'],
       rows: rows }, 20));
+    add(s, d);
     if (!ibd.length) { add(s, el('p', { 'class': 'dim' }, 'Shared segments need step 26b’s panel: only the somalier half is here.')); }
     return s;
   }
 
+  // A child's stretches, painted: per chromosome the father's copy above the mother's, each stretch
+  // coloured by the grandparent it came from (or by the parent when no grandparent was sequenced).
+  var SIDE = { paternal: 'father', maternal: 'mother' };
+  function painting(f, child, rows) {
+    var lengths = f.chrom_lengths || [];
+    var longest = Math.max.apply(null, lengths.map(function (x) { return x[1]; }).concat([1]));
+    var colours = Object.create(null), next = 1;
+    function colourOf(r) {
+      var who = r.ancestor && r.ancestor !== '.' ? r.ancestor : (r.parent && r.parent !== '.' ? r.parent : r.side + ' side');
+      if (!colours[who]) { colours[who] = { n: next > 5 ? 5 : next++, side: r.side, basis: r.basis }; }
+      return { who: who, n: colours[who].n };
+    }
+    var fig = el('figure', { 'class': 'painting', 'data-painting': child });
+    var grid = el('div', { 'class': 'paint-grid', role: 'img', 'aria-label': 'Stretches ' + child + ' got from each parent, ' +
+      'per chromosome; the table below lists them' });
+    lengths.forEach(function (cl) {
+      var chrom = cl[0];
+      add(grid, el('span', { 'class': 'paint-chr' }, chrom.replace(/^chr/, '')));
+      var both = el('span', { 'class': 'paint-tracks' });
+      ['paternal', 'maternal'].forEach(function (side) {
+        var track = el('span', { 'class': 'paint-track ' + side });
+        track.style.setProperty('--len', (100 * cl[1] / longest).toFixed(2) + '%');
+        rows.filter(function (r) { return r.chrom === chrom && r.side === side; }).forEach(function (r) {
+          var a = parseInt(r.start, 10), b = parseInt(r.end, 10);
+          if (!isFinite(a) || !isFinite(b) || b < a) { return; }
+          var c = colourOf(r);
+          var seg = el('span', { 'class': 'paint-seg anc' + c.n + (r.basis === 'other copy' ? ' other' : ''),
+            title: SIDE[side] + '’s copy, ' + chrom + ':' + a + '-' + b + ', from ' + c.who + ' (' + r.sites + ' sites, ' +
+              r.discordant + ' discordant)' });
+          seg.style.setProperty('--a', (100 * a / cl[1]).toFixed(3) + '%');
+          seg.style.setProperty('--w', Math.max(0.4, 100 * (b - a) / cl[1]).toFixed(3) + '%');
+          add(track, seg);
+        });
+        add(both, track);
+      });
+      add(grid, both);
+    });
+    add(fig, grid);
+    var leg = el('figcaption', { 'class': 'paint-legend' });
+    add(leg, el('span', { 'class': 'dim' }, 'Upper line: the father’s copy; lower: the mother’s. Colour: who the stretch came from. '));
+    Object.keys(colours).forEach(function (who) {
+      var it = el('span', { 'class': 'paint-key' });
+      add(it, el('span', { 'class': 'paint-swatch anc' + colours[who].n + (colours[who].basis === 'other copy' ? ' other' : '') }),
+        who + (colours[who].basis === 'other copy' ? ' (the copy not from the sequenced parent)' : ''));
+      add(leg, it);
+    });
+    add(leg, el('span', { 'class': 'dim' }, ' Grey: no stretch called (no informative site, a gap of the reference).'));
+    add(fig, leg);
+    var d = el('details', { 'class': 'w-fallback' });
+    add(d, el('summary', {}, 'Every stretch (' + rows.length + ')'));
+    add(d, U.table({ columns: ['Copy', 'Chromosome', 'Start', 'End', 'From', 'Sites', 'Discordant', 'Basis'],
+      rows: rows.map(function (r) { return [SIDE[r.side] || r.side, r.chrom, r.start, r.end,
+        r.ancestor !== '.' ? r.ancestor : r.parent, r.sites, r.discordant, r.basis]; }) }, 12));
+    add(fig, d);
+    return fig;
+  }
+
   function children(f) {
-    var s = section('Inherited stretches', 'children');
+    var s = section('Each child', 'children');
     if (!f.state.children.length) { add(s, el('p', { 'class': 'dim' }, 'The pedigree names no child.')); }
-    f.state.children.forEach(function (c) {
+    var plan = {};
+    (f.state.plan || []).forEach(function (r) { plan[r.analysis] = r; });
+    function absent(file, analysis) {
+      var r = plan[analysis];
+      return file + ' is not here' + (r ? ': ' + r.analysis.replace(/_/g, ' ') + ' ' + r.decision + (r.reason ? ' (' + r.reason + ')' : '') : '') + '.';
+    }
+    f.state.children.forEach(function (c, i) {
       var d = el('details', { 'data-child': c.child });
+      if (i === 0) { d.open = true; }
       add(d, el('summary', {}, c.child + ': father ' + (c.father || 'not named') + ', mother ' + (c.mother || 'not named')));
-      if (c.segments) {
+      add(d, el('h3', {}, 'Inherited stretches'));
+      var rows = (f.segments || {})[c.child];
+      if (rows && rows.length) {
+        add(d, painting(f, c.child, rows));
+      } else if (c.segments) {
         add(d, el('img', { src: c.segments, alt: 'Chromosome map of ' + c.child, 'class': 'segments' }));
       } else {
         add(d, el('p', { 'class': 'dim' }, 'No chromosome map yet: step 38 draws one for a child with a sequenced parent.'));
       }
+      var dn = (f.de_novo || []).filter(function (r) { return r.child === c.child; });
+      add(d, el('h3', {}, 'De novo candidates'));
+      if (dn.length) {
+        add(d, el('p', { 'class': 'dim' }, 'In the child and in neither parent. Most candidates in a genome are genotype errors: ' +
+          'check the reads before reading anything into one.'));
+        add(d, U.table({ columns: ['Variant', 'Child', 'Father', 'Mother', 'Child DP / GQ', 'Allele balance', 'Quality'],
+          rows: dn.map(function (r) { return [r.chrom + ':' + r.pos + ' ' + r.ref + '>' + r.alt, r.child_gt, r.father_gt,
+            r.mother_gt, r.child_dp + ' / ' + r.child_gq, r.child_ab, r.quality]; }) }, 8));
+      } else {
+        add(d, el('p', { 'class': 'dim' }, (f.trio_files || {})['de_novo.tsv'] ? 'None listed in de_novo.tsv for this child.'
+          : absent('de_novo.tsv', 'trio_phasing')));
+      }
+      var ch = (f.compound_het || []).filter(function (r) { return r.child === c.child; });
+      add(d, el('h3', {}, 'Compound-het pairs'));
+      if (ch.length) {
+        add(d, el('p', { 'class': 'dim' }, 'Two candidate variants in one gene, in trans first: one from each parent.'));
+        add(d, U.table({ columns: ['Gene', 'Phase', 'Variant A', 'From', 'Variant B', 'From'],
+          rows: ch.map(function (r) { return [r.gene, r.phase, r.variant_a, r.a_from, r.variant_b, r.b_from]; }) }, 8));
+      } else {
+        add(d, el('p', { 'class': 'dim' }, (f.trio_files || {})['compound_het.tsv'] ? 'None listed in compound_het.tsv for this child.'
+          : absent('compound_het.tsv', 'trio_phasing')));
+      }
       add(s, d);
     });
     return s;
   }
 
+  // The members side by side: what each one's report says of the genes that differ most between people.
+  function sideBySide(f) {
+    var sb = f.side_by_side;
+    var s = section('Side by side', 'side-by-side');
+    if (!sb || !sb.rows.length) { add(s, el('p', { 'class': 'dim' }, 'No member has a summary yet, or no summary lists these results.')); return s; }
+    add(s, el('p', { 'class': 'dim' }, 'Each member’s own report, one column per person: CYP2D6, the CPIC genes ' +
+      '(phenotypes in CPIC’s words), HLA, the haplogroups and the blood groups.'));
+    var group = null, rows = [];
+    sb.rows.forEach(function (r) {
+      rows.push([r.group === group ? '' : r.group, r.label].concat(r.values));
+      group = r.group;
+    });
+    add(s, U.table({ columns: ['', 'Gene or system'].concat(sb.members), rows: rows }, 14));
+    return s;
+  }
+
   function more(f) {
     var s = section('Plan and reports', 'plan');
     var plan = f.state.plan || [];
@@ -198,14 +426,26 @@
       root.setAttribute('data-pgp-status', 'ready');
       return;
     }
+    var cover = el('div', { 'class': 'famcover' });
+    var cl = el('div', {});
+    add(cl, el('div', { 'class': 'kicker' }, 'Family report \u00b7 in five chapters'));
+    add(cl, el('h1', { 'class': 'h-display' }, 'Family ' + f.state.name));
+    var lp = el('p', { 'class': 'lede dropcap', id: 'family-lead' });
+    lead(f).forEach(function (x) { add(lp, x[1] ? el('b', {}, x[0]) : x[0]); });
+    add(cl, lp);
+    var toc = el('ol', { 'class': 'famtoc' });
+    [['ch-ped', 'I', 'Pedigree and members'], ['ch-related', 'II', 'Who is related how'], ['ch-couples', 'III', 'Couple carrier screen'],
+      ['ch-children', 'IV', 'Each child: what they inherited'], ['ch-side-by-side', 'V', 'Side by side']].forEach(function (x) {
+      add(toc, add(el('li', {}), add(el('a', { href: '#' + x[0] }), el('span', { 'class': 'secnum' }, x[1]), el('span', {}, x[2]))));
+    });
+    add(cover, cl, add(el('aside', {}), el('div', { 'class': 'fig-label' }, 'The chapters'), toc));
+    add(page, cover);
     var top = el('div', { 'class': 'family-top' });
     var ped = section('Pedigree', 'ped');
     add(ped, pedigree(f), analyses(f));
     add(top, ped, members(f));
     add(page, top);
-    var grid = el('div', { 'class': 'family-grid' });
-    add(grid, couples(f), related(f));
-    add(page, grid, children(f));
+    add(page, related(f), couples(f), children(f), sideBySide(f));
     if ((f.state.plan || []).length || f.state.reports.length) { add(page, more(f)); }
     add(main, page);
     root.setAttribute('data-pgp-status', 'ready');
diff --git a/assets/live/family.html b/assets/live/family.html
index ebe0d057..b685eca0 100644
--- a/assets/live/family.html
+++ b/assets/live/family.html
@@ -10,13 +10,14 @@
 {{plugins}}
 </head>
 <body class="page-family">
-<header class="top">
-  <a class="brand" href="/">OwnGenome</a>
-  <nav class="crumbs" aria-label="Where you are"><span id="run-name">Family {{run}}</span></nav>
+<header class="top mast"><div class="mast-in">
+  <a class="brand wordmark" href="/">Own<i>Genome</i></a>
+  <nav class="crumbs" aria-label="Where you are"><a href="/">People</a><span class="sep" aria-hidden="true">/</span><span id="run-name">Family {{run}}</span></nav>
   <nav class="links"><a href="/" id="home-link">All runs</a></nav>
-</header>
+</div></header>
 <main id="family" class="family">
   <p class="dim">Loading the family.</p>
 </main>
+<footer class="colophon"><div class="colophon-in"><span class="wordmark">OwnGenome</span><span>GRCh38 no-ALT · a research pipeline, not a clinical test</span></div></footer>
 </body>
 </html>
diff --git a/assets/live/finding.html b/assets/live/finding.html
new file mode 100644
index 00000000..e1907433
--- /dev/null
+++ b/assets/live/finding.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en" data-theme="dark" data-mode="{{mode}}" data-run="{{run}}" data-finding="{{finding}}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{run}}: one finding: OwnGenome</title>
+<link rel="stylesheet" href="{{assets}}/live.css">
+<script src="{{assets}}/core.js" defer></script>
+<script src="{{assets}}/finding.js" defer></script>
+</head>
+<body class="page-finding">
+<header class="top mast"><div class="mast-in">
+  <a class="brand wordmark" href="/" id="home-link">Own<i>Genome</i></a>
+  <nav class="crumbs" id="crumbs" aria-label="Where you are"><a href="/">People</a><span class="sep" aria-hidden="true">/</span><a href="../../" id="person-crumb">{{run}}</a><span class="sep" aria-hidden="true">/</span><span class="here" id="finding-crumb">Finding</span></nav>
+  <nav class="links"><a href="../../" id="back-link">Back to the report</a></nav>
+</div></header>
+<div class="wrap fpage">
+  <main id="finding" aria-live="polite"><p class="dim">Loading the finding.</p></main>
+</div>
+<footer class="colophon"><div class="colophon-in"><span class="wordmark">OwnGenome</span><span>GRCh38 no-ALT · a research pipeline, not a clinical test</span></div></footer>
+</body>
+</html>
diff --git a/assets/live/finding.js b/assets/live/finding.js
new file mode 100644
index 00000000..aa7b630d
--- /dev/null
+++ b/assets/live/finding.js
@@ -0,0 +1,254 @@
+// finding.js: one finding on a page of its own (assets/live/finding.html, the route
+// /runs/<run>/finding/<id>/ of bin/owngenome_live_results.py). It answers "what do I do about it?":
+// the explanation, the plan under it, then the evidence (the numbers, the frequency on a log strip, the
+// reads with a link to the genome viewer), the caveat, the related findings and the family. Everything
+// comes from the run's results.json (bin/live_results.py findings); nothing is computed here about
+// genetics. A result to act on about a child of the family stays closed until it is opened on purpose.
+(function () {
+  'use strict';
+  var U = window.PGPUI;
+  if (!U) { return; }
+  var el = U.el, add = U.add;
+  var root = document.documentElement;
+  var BASE = '../../';
+  var fid = root.getAttribute('data-finding');
+  var replay = root.getAttribute('data-mode') === 'replay';
+  var main = document.getElementById('finding');
+  var ROMAN = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii'];
+
+  function abs(u) { return !u ? u : (u.charAt(0) === '/' ? u : BASE + u); }
+  function note(head, body, cls) {
+    var n = el('div', { 'class': 'note' + (cls ? ' ' + cls : '') });
+    add(n, el('span', { 'class': 'nh' }, head), body);
+    return n;
+  }
+  function dl(rows) {
+    var d = el('dl', {});
+    (rows || []).forEach(function (r) { add(d, el('dt', {}, r[0]), el('dd', {}, r[1])); });
+    return d;
+  }
+  // The frequency on a log strip from 1 in a million to 1: where this change sits among people.
+  function freqStrip(af) {
+    var box = el('figure', {});
+    add(box, el('div', { 'class': 'fig-label' }, 'How common it is (gnomAD), on a log scale'));
+    var s = el('div', { 'class': 'fstrip', role: 'img', 'aria-label': af === null ? 'Frequency unknown' : 'Allele frequency ' + af });
+    add(s, el('span', { 'class': 'axisline' }));
+    [[1e-6, '1 in a million'], [1e-4, '1 in 10,000'], [1e-2, '1 in 100'], [1, 'everyone']].forEach(function (t) {
+      var p = (Math.log10(t[0]) + 6) / 6 * 100;
+      var k = el('span', { 'class': 'tick' }); k.style.setProperty('left', p + '%'); add(s, k);
+      var l = el('span', { 'class': 'tl' }, t[1]); l.style.setProperty('left', p + '%'); add(s, l);
+    });
+    if (af !== null && af > 0) {
+      var m = el('span', { 'class': 'me', title: 'This change: ' + af });
+      m.style.setProperty('left', Math.max(0, Math.min(100, (Math.log10(af) + 6) / 6 * 100)) + '%');
+      add(s, m);
+    }
+    add(box, s);
+    add(box, el('figcaption', {}, af === null ? 'The frequency of this change is not known here, so it has not been checked: read the caveat.'
+      : af === 0 ? 'Not seen in gnomAD.' : 'Allele frequency ' + af + '. A change above 1 in 100 is unlikely to be a high-penetrance finding.'));
+    return box;
+  }
+  // A sketch of the reads at the position: what the genome viewer shows in full.
+  function readsSketch(f) {
+    var box = el('figure', { 'class': 'reads' });
+    add(box, el('div', { 'class': 'fig-label' }, 'The reads at ' + f.viewer));
+    var s = U.svg('svg', { viewBox: '0 0 680 90', role: 'img', 'aria-label': 'A sketch of reads over the position' });
+    for (var i = 0; i < 9; i++) {
+      var x = 30 + ((i * 97) % 260), w = 260 + ((i * 53) % 140);
+      s.appendChild(U.svg('rect', { x: x, y: 6 + i * 9, width: w, height: 5, rx: 1, fill: 'rgba(255,255,255,.14)' }));
+    }
+    s.appendChild(U.svg('line', { x1: 340, x2: 340, y1: 0, y2: 90, stroke: '#c8ab78', 'stroke-dasharray': '3 3' }));
+    box.appendChild(s);
+    var cap = el('figcaption', {});
+    add(cap, 'A sketch, not the data. ', el('a', { href: BASE + 'viewer/#' + encodeURIComponent(f.viewer) }, 'See the real reads in the genome viewer →'));
+    add(box, cap);
+    return box;
+  }
+  function draw(r, family) {
+    var f = (r.findings || []).filter(function (x) { return x.id === fid; })[0];
+    main.textContent = '';
+    if (!f) {
+      add(main, el('p', { 'class': 'empty' }, 'This finding is not in the results of this run now. The report lists every finding there is.'));
+      root.setAttribute('data-pgp-status', 'ready');
+      return;
+    }
+    var unknown = family === UNKNOWN;
+    if (unknown) { family = null; }
+    var me = family && (family.state.members || []).filter(function (m) { return m.sample === r.sample; })[0];
+    var child = unknown || !!(me && (me.father || me.mother));
+    // Closed: no title, gene or variant anywhere on the page (its title, crumb, cover, rail) until opened.
+    var closed = child && f.level === 'act' && !draw.open;
+    var title = closed ? 'A result to act on' : f.title;
+    document.title = title + ': ' + r.sample + ': OwnGenome';
+    document.getElementById('finding-crumb').textContent = title;
+    var sec = (r.journal || []).filter(function (s) { return s.n === f.section; })[0];
+    var same = (r.findings || []).filter(function (x) { return x.level === f.level; });
+    var order = (r.findings || []).filter(function (x) { return x.level !== 'info'; });
+    var next = order[order.indexOf(f) + 1];
+    if (next && child && next.level === 'act' && !draw.open) { next = null; }
+    // The rail: back to the report, this page's parts, the next finding of the report.
+    var rail = el('aside', { 'class': 'toc frail', 'aria-label': 'This finding' });
+    var back = el('a', { 'class': 'back', href: BASE + '#f/' + f.id });
+    add(back, el('span', { 'aria-hidden': 'true' }, '← '), r.sample + '’s report');
+    add(rail, back);
+    if (sec) { add(rail, el('div', { 'class': 'tsub' }, 'section ' + sec.n + ', ' + sec.title)); }
+    add(rail, el('div', { 'class': 'group' }, 'This finding'));
+    var parts = [['what', 'What it is'], ['plan-sec', 'What to do'], ['evidence', 'Evidence']];
+    if (f.viewer) { parts.push(['reads', 'The reads']); }
+    if (family) { parts.push(['family', 'In the family']); }
+    parts.push(['related', 'Related results'], ['sources', 'Caveat and sources']);
+    var tol = el('ol', {});
+    parts.forEach(function (p, i) {
+      var a = el('a', { href: '#' + p[0] });
+      add(a, el('span', { 'class': 'tn' }, ROMAN[i]), el('span', {}, p[1]));
+      add(tol, add(el('li', {}), a));
+    });
+    add(rail, tol);
+    if (next) {
+      add(rail, el('div', { 'class': 'group' }, 'Next in ' + r.sample + '’s report'));
+      add(rail, el('a', { 'class': 'next', href: '../' + encodeURIComponent(next.id) + '/' }, U.LEVEL_WORDS[next.level] + ': ' + next.title + ' →'));
+    }
+    var cover = el('div', { 'class': 'fcover', id: 'what' });
+    var lv = el('div', { 'class': 'fkick' });
+    add(lv, U.findingLevel(f.level, f.level_words));
+    add(lv, el('span', { 'class': 'dim' }, same.length === 1 ? 'The only finding at this level in ' + r.sample + '’s genome'
+      : same.length + ' findings at this level in ' + r.sample + '’s genome'));
+    add(cover, lv);
+    add(cover, el('h1', { 'class': 'h-display' }, title));
+    var chips = el('div', { 'class': 'chips' });
+    var cs = [];
+    if (f.gene) { cs.push(f.gene); }
+    if (f.detail) { cs.push(f.detail); }
+    if (f.viewer && cs.join(' ').indexOf(f.viewer) < 0) { cs.push(f.viewer); }
+    cs.forEach(function (c) { add(chips, el('span', { 'class': 'chip mono' }, c)); });
+    if (cs.length && !closed) { add(cover, chips); }
+    var main0 = el('div', {});
+    add(main0, cover);
+    var acts = el('aside', { 'class': 'actions' });
+    add(acts, el('a', { 'class': 'btn', href: BASE + '#f/' + f.id }, 'Back to the report'));
+    add(acts, el('a', { 'class': 'btn ghost', href: BASE + 'report.html#' + encodeURIComponent(f.anchor || f.card) }, 'This section in the full report'));
+    var body = el('div', { 'class': 'jlayout' });
+    var col = el('div', {});
+    var top = el('div', { 'class': 'row' });
+    add(top, main0, acts);
+    add(col, top);
+    if (closed) {
+      var v = el('div', { 'class': 'veil' });
+      add(v, add(el('div', { 'class': 'vt' }), el('b', {}, 'A result about a child. '),
+        'A result to act on in adult life is usually not looked at before the child can choose. It stays closed until you open it.'));
+      var b = el('button', { type: 'button', 'class': 'btn' }, 'Show the result');
+      b.addEventListener('click', function () { draw.open = true; draw(r, family); });
+      add(v, b);
+      add(col, v);
+      add(body, rail, col);
+      add(main, body);
+      root.setAttribute('data-pgp-status', 'ready');
+      return;
+    }
+    var row1 = el('div', { 'class': 'row' });
+    var m1 = el('div', {});
+    add(m1, el('p', { 'class': 'lede' }, f.text));
+    var box = el('div', { 'class': 'planbox lvl-' + f.level, id: 'plan-sec' });
+    add(box, el('h2', { 'class': 'h3' }, 'What to do'));
+    add(box, el('div', { 'class': 'secq' }, 'In this order. A research result: a certified laboratory confirms anything before it is acted on.'));
+    var ol = el('ol', { 'class': 'todo', id: 'plan' });
+    (f.plan || []).forEach(function (t) { add(ol, el('li', {}, t)); });
+    add(box, ol);
+    add(m1, box);
+    var a1 = el('aside', {});
+    if (f.level === 'carrier' && family) { add(a1, note('Family', add(el('span', {}), 'A carrier is not affected. ', el('a', { href: abs(familyUrl) }, 'The couple screen on the family page →')))); }
+    add(row1, m1, a1);
+    add(col, row1);
+    // The evidence.
+    var sec2 = el('section', { 'class': 'sec', id: 'evidence' });
+    add(sec2, add(el('div', { 'class': 'sechead' }), el('span', { 'class': 'secnum' }, 'iii'), el('h2', { 'class': 'h2' }, 'The evidence')));
+    add(sec2, el('div', { 'class': 'secq' }, 'The numbers behind it, as the run measured them.'));
+    var row2 = el('div', { 'class': 'row' });
+    var m2 = el('div', {});
+    var facts = U.facts(f.evidence);
+    if (facts) { add(m2, facts); } else { add(m2, el('p', { 'class': 'soft' }, 'The section in the full report holds the numbers.')); }
+    if ('af' in f && (f.af !== null || f.card === 'clinvar')) { add(m2, freqStrip(typeof f.af === 'number' ? f.af : null)); }
+    var a2 = el('aside', {});
+    if (f.caveat && f.caveat.length) {
+      var cv = el('div', {});
+      f.caveat.forEach(function (t) { add(cv, el('p', {}, t)); });
+      add(a2, note('Caveat', cv, 'caveat-note'));
+    }
+    add(row2, m2, a2);
+    add(sec2, row2);
+    add(col, sec2);
+    if (f.viewer) {
+      var sr = el('section', { 'class': 'sec', id: 'reads' });
+      add(sr, add(el('div', { 'class': 'sechead' }), el('span', { 'class': 'secnum' }, 'iv'), el('h2', { 'class': 'h2' }, 'The reads')));
+      add(sr, el('div', { 'class': 'secq' }, 'The sequenced fragments over the position, in the genome viewer.'));
+      add(sr, add(el('div', { 'class': 'row' }), add(el('div', {}), readsSketch(f)), el('aside', {})));
+      add(col, sr);
+    }
+    // Related findings and the family.
+    var rel = (f.related || []).map(function (id) { return (r.findings || []).filter(function (x) { return x.id === id; })[0]; })
+      .filter(function (x) { return x && !(child && x.level === 'act' && !draw.open); });
+    if (family) {
+      var sf = el('section', { 'class': 'sec', id: 'family' });
+      add(sf, add(el('div', { 'class': 'sechead' }), el('span', { 'class': 'secnum' }, ROMAN[parts.length - 3]), el('h2', { 'class': 'h2' }, 'In the family')));
+      var fam = el('p', { 'class': 'soft' });
+      add(fam, 'Who else in the family has a genome here: ');
+      (family.state.members || []).filter(function (m) { return m.sample !== r.sample; }).forEach(function (m, i) {
+        if (i) { add(fam, ', '); }
+        var u = family.runs && family.runs[m.sample] && family.runs[m.sample].url;
+        add(fam, u ? el('a', { href: abs(u) }, m.sample) : el('span', {}, m.sample + ' (no genome)'));
+      });
+      add(fam, '. ', el('a', { href: abs(familyUrl) }, 'The family report →'));
+      add(sf, fam);
+      add(col, sf);
+    }
+    var sec3 = el('section', { 'class': 'sec', id: 'related' });
+    add(sec3, add(el('div', { 'class': 'sechead' }), el('span', { 'class': 'secnum' }, ROMAN[parts.length - 2]), el('h2', { 'class': 'h2' }, 'Related results')));
+    add(sec3, el('div', { 'class': 'secq' }, 'Other findings of the same gene or the same step, and the family.'));
+    var ul = el('ul', { 'class': 'list-findings' });
+    rel.forEach(function (x) {
+      var li = el('li', {});
+      add(li, el('a', { 'class': 't', href: '../' + encodeURIComponent(x.id) + '/' }, x.title), U.findingLevel(x.level, x.level_words));
+      add(li, el('span', { 'class': 'x' }, x.text));
+      add(ul, li);
+    });
+    if (!rel.length) { add(ul, add(el('li', {}), el('span', { 'class': 'x' }, 'No other finding of this gene or this step.'))); }
+    add(sec3, ul);
+    add(col, sec3);
+    var sec4 = el('section', { 'class': 'sec', id: 'sources' });
+    add(sec4, add(el('div', { 'class': 'sechead' }), el('span', { 'class': 'secnum' }, ROMAN[parts.length - 1]), el('h2', { 'class': 'h2' }, 'Caveat and sources')));
+    var src = el('p', { 'class': 'soft' });
+    add(src, 'From the run’s ' + f.card + ' section (step ' + (f.steps || []).join(', ') + '). ',
+      el('a', { href: BASE + 'report.html#' + encodeURIComponent(f.anchor || f.card) }, 'Open it in the full report'), '.');
+    add(sec4, src);
+    add(col, sec4);
+    add(body, rail, col);
+    add(main, body);
+    root.setAttribute('data-pgp-status', 'ready');
+  }
+  var familyUrl = null;
+  var UNKNOWN = { unknown: true };
+  function familyOf(st) {
+    var fam = st && st.plugins && st.plugins.family;
+    var f = fam && fam.kind === 'member' && (fam.families || [])[0];
+    if (!f) { return Promise.resolve(null); }
+    familyUrl = f.url;
+    // A family that does not answer: roles unknown, so a result to act on stays closed (draw()).
+    return U.getJSON(abs(f.url) + 'family.json').then(function (d) { return d && d.state ? d : UNKNOWN; }).catch(function () { return UNKNOWN; });
+  }
+  function failed() {
+    main.textContent = '';
+    add(main, el('p', { 'class': 'empty' }, 'The results of this run could not be read just now.'));
+    var b = el('button', { type: 'button', 'class': 'btn' }, 'Try again');
+    b.addEventListener('click', function () { main.textContent = ''; add(main, el('p', { 'class': 'dim' }, 'Loading the finding.')); start(); });
+    add(main, b);
+    root.setAttribute('data-pgp-status', 'offline');
+  }
+  function start() {
+    var st = replay ? U.getJSON(BASE + 'frames.json').then(function (d) { var fr = (d && d.frames) || []; return fr.length ? fr[fr.length - 1].state : null; })
+      : U.getJSON(BASE + 'state.json');
+    Promise.all([U.getJSON(BASE + 'results.json'), st.then(familyOf).catch(function () { return UNKNOWN; })]).then(function (x) {
+      if (x[0]) { draw(x[0], x[1]); } else { failed(); }
+    }).catch(failed);
+  }
+  if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); }
+}());
diff --git a/assets/live/home.html b/assets/live/home.html
index 48ef0b22..667fa925 100644
--- a/assets/live/home.html
+++ b/assets/live/home.html
@@ -3,19 +3,20 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>OwnGenome: people</title>
+<title>OwnGenome: people and runs</title>
 <link rel="stylesheet" href="{{assets}}/live.css">
 <script src="{{assets}}/core.js" defer></script>
 <script src="{{assets}}/home.js" defer></script>
 </head>
 <body class="page-home">
-<header class="top">
-  <a class="brand" href="./">OwnGenome</a>
-  <nav class="crumbs" aria-label="Where you are"><span>People</span></nav>
+<header class="top mast"><div class="mast-in">
+  <a class="brand wordmark" href="./">Own<i>Genome</i></a>
+  <nav class="crumbs" aria-label="Where you are"><span class="here">People and runs</span></nav>
   <form method="post" action="/logout" class="logout"><button type="submit">Log out</button></form>
-</header>
+</div></header>
 <main id="home" class="home">
   <ul class="runs">{{runs}}</ul>
 </main>
+<footer class="colophon"><div class="colophon-in"><span class="wordmark">OwnGenome</span><span>GRCh38 no-ALT · a research pipeline, not a clinical test</span></div></footer>
 </body>
 </html>
diff --git a/assets/live/home.js b/assets/live/home.js
index 51d58ca7..87c9adfb 100644
--- a/assets/live/home.js
+++ b/assets/live/home.js
@@ -1,13 +1,19 @@
-// home.js: the live site's home page (assets/live/home.html): every person, grouped by family, from
-// /runs.json (bin/owngenome_live.py runs_index). A card shows the pedigree symbol, the person's place
-// in the family, the run's progress and how many cards the report flags; runs still going come first
-// in each family. The plain list of runs in the page is what shows without scripts.
+// home.js: the live site's home page (assets/live/home.html), the Journal design: "does anyone have
+// something to act on, and what is running?" From /runs.json (bin/owngenome_live.py runs_index): a
+// headline sentence, the findings that need attention across everyone, the run being written first,
+// then each family as a block (a small pedigree and one tile per person, with the person's lead and the
+// counts by level), the people in no family, and the log of every run. Colour follows the person: each
+// member of a family keeps one colour on this page. The plain list of runs is what shows without scripts.
 (function () {
   'use strict';
   var U = window.PGPUI;
   if (!U) { return; }
   var el = U.el, add = U.add;
   var root = document.documentElement;
+  var PCOL = ['var(--p1)', 'var(--p2)', 'var(--p3)', 'var(--p4)', 'var(--p5)'];
+  var WORDS = ['no', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+  function word(n) { return WORDS[n] || String(n); }
+  function cap(t) { return t.charAt(0).toUpperCase() + t.slice(1); }
 
   function role(m, fam) {
     var kids = fam.members.filter(function (x) { return x.father === m.sample || x.mother === m.sample; });
@@ -18,88 +24,275 @@
     return m.partner ? 'partner' : 'member';
   }
   function progressText(r) {
-    if (!r) { return 'No run on this server'; }
-    if (r.state === 'finished') { return 'Finished' + (r.finished_utc ? ' ' + U.day(r.finished_utc) : ''); }
-    if (r.state === 'running') { return 'Running: ' + r.done + ' of ' + r.planned + ' steps'; }
-    if (!r.planned) { return 'Not started'; }
+    if (!r) { return 'no genome on this server'; }
+    if (r.state === 'finished') { return 'finished' + (r.finished_utc ? ' ' + U.dm(r.finished_utc) : ''); }
+    if (r.state === 'running') { return 'being written: ' + r.done + ' of ' + r.planned + ' steps'; }
+    if (!r.planned) { return 'not started'; }
     return r.done + ' of ' + r.planned + ' steps';
   }
-  function lookText(r) {
-    if (!r || !r.results) { return r && r.done ? 'Results so far on the page' : ''; }
-    if (r.attention === null || r.attention === undefined) { return 'Results on the page'; }
-    return r.attention ? r.attention + ' worth a look' : 'Nothing flagged; see the caveats';
+  // The counts by level a tile shows: never a bare "nothing": no count means no finding of that level
+  // in what was assessed, and the tile says the report is the place to read it.
+  function countsRow(r) {
+    var row = el('div', { 'class': 'counts' });
+    var lv = (r && r.levels) || null;
+    if (!lv) { add(row, el('span', { 'class': 'dim' }, r && r.done ? 'Results so far on the page' : 'No result yet')); return row; }
+    [['act', 'doctor'], ['medicine', 'prescriber'], ['review', 'look'], ['carrier', 'family'], ['info', 'info']].forEach(function (x) {
+      if (lv[x[0]]) { add(row, U.level(x[0], lv[x[0]] + ' ' + x[1])); }
+    });
+    if (!row.childNodes.length) { add(row, el('span', { 'class': 'dim' }, 'No finding in what was assessed; read the caveats')); }
+    return row;
   }
-  function personCard(name, sex, sequenced, place, r) {
-    var li = el('li', { 'class': 'person-card' + (r ? ' has-run' : '') + (r && r.state === 'running' ? ' running' : '') });
-    var ratio = r && r.planned ? r.done / r.planned : null;
-    var inner = r ? el('a', { href: r.url, 'class': 'person-link' }) : el('div', { 'class': 'person-link' });
-    add(inner, U.avatar(sex, sequenced, ratio));
-    var txt = el('div', { 'class': 'person-text' });
-    add(txt, el('span', { 'class': 'person-name' }, name));
-    if (place) { add(txt, el('span', { 'class': 'person-place' }, place)); }
-    if (sequenced || r) {
-      if (r && r.planned) {
-        var bar = el('span', { 'class': 'bar', role: 'img', 'aria-label': r.done + ' of ' + r.planned + ' steps done' });
-        var fill = el('span', { 'class': 'bar-fill' });
-        fill.style.setProperty('--p', String(ratio));
-        add(bar, fill);
-        add(txt, bar);
-      }
-      add(txt, el('span', { 'class': 'person-state' }, progressText(r)));
-      var lk = lookText(r);
-      if (lk) { add(txt, el('span', { 'class': 'person-look' + (r && r.attention ? ' attn' : '') }, lk)); }
-    } else {
-      add(txt, el('span', { 'class': 'person-state' }, 'Not sequenced'));
+  function tile(m, fam, r, colour) {
+    var div = el('div', { 'class': 'ptile person-card' + (r ? ' has-run' : ' norun') + (r && r.state === 'running' ? ' running' : ''),
+      'data-sample': m.sample });
+    if (colour) { div.style.setProperty('--pcol', colour); }
+    add(div, el('span', { 'class': 'bar-top' }));
+    var h = el('h3', {});
+    add(h, r ? el('a', { href: r.url, 'class': 'person-link' }, m.sample) : el('span', {}, m.sample));
+    add(div, h);
+    var meta = el('div', { 'class': 'meta' });
+    add(meta, (fam ? role(m, fam) + ' · ' : '') + progressText(r));
+    if (r && r.failed) { add(meta, ' · ', el('span', { 'class': 'warn' }, r.failed + ' step' + (r.failed > 1 ? 's' : '') + ' not assessed')); }
+    add(div, meta);
+    var child = !!fam && fam.members.some(function (x) { return x.sample === m.father || x.sample === m.mother; });
+    var lead = r && (child ? r.lead_closed || '' : r.lead);
+    if (lead) {
+      // Two sentences: the first often says only that nothing needs a doctor, the second names what differs.
+      var one = U.firstSentence(lead), rest = lead.slice(one.length).trim();
+      add(div, el('p', { 'class': 'lead' }, rest ? one + ' ' + U.firstSentence(rest) : one));
     }
-    add(inner, txt);
-    add(li, inner);
-    return li;
+    else if (!r) { add(div, el('p', { 'class': 'lead' }, 'In the family tree, with no genome on this server.')); }
+    add(div, countsRow(r));
+    if (r) { add(div, el('a', { 'class': 'read', href: r.url }, 'Read the report →')); }
+    return div;
+  }
+  // A small pedigree, one row per generation; filled when sequenced, dashed when not. Square male,
+  // circle female, diamond when the sex is not known.
+  function miniPedigree(fam, colourOf) {
+    var ms = fam.members, W = 260, GAP = 66;
+    var by = {};
+    ms.forEach(function (m) { by[m.sample] = m; });
+    var depth = {};
+    function gen(m, seen) {
+      if (depth[m.sample] !== undefined) { return depth[m.sample]; }
+      if (seen[m.sample]) { return 0; }  // a loop in a malformed file: stop rather than recurse
+      seen[m.sample] = true;
+      var ps = [m.father, m.mother].filter(function (p) { return by[p]; });
+      depth[m.sample] = ps.length ? 1 + Math.max.apply(null, ps.map(function (p) { return gen(by[p], seen); })) : 0;
+      return depth[m.sample];
+    }
+    ms.forEach(function (m) { gen(m, {}); });
+    var rows = [];
+    ms.forEach(function (m) { (rows[depth[m.sample]] = rows[depth[m.sample]] || []).push(m); });
+    var H = 34 + (rows.length - 1) * GAP + 32;
+    var s = U.svg('svg', { viewBox: '0 0 ' + W + ' ' + H, width: W, height: H, role: 'img', 'aria-label': 'Pedigree of ' + fam.name });
+    var pos = {};
+    rows.forEach(function (list, g) {
+      (list || []).forEach(function (m, i) { pos[m.sample] = { x: (i + 1) * W / (list.length + 1), y: 34 + g * GAP }; });
+    });
+    ms.forEach(function (k) {
+      var ps = [k.father, k.mother].filter(function (p) { return pos[p]; });
+      if (!ps.length) { return; }
+      var py = Math.max.apply(null, ps.map(function (p) { return pos[p].y; }));
+      var mx = ps.reduce(function (a, p) { return a + pos[p].x; }, 0) / ps.length;
+      var mid = (py + pos[k.sample].y) / 2;
+      if (ps.length === 2) { s.appendChild(U.svg('line', { x1: pos[ps[0]].x, x2: pos[ps[1]].x, y1: py, y2: py, stroke: '#8f8d86' })); }
+      s.appendChild(U.svg('line', { x1: mx, x2: mx, y1: py, y2: mid, stroke: '#8f8d86' }));
+      s.appendChild(U.svg('line', { x1: mx, x2: pos[k.sample].x, y1: mid, y2: mid, stroke: '#8f8d86' }));
+      s.appendChild(U.svg('line', { x1: pos[k.sample].x, x2: pos[k.sample].x, y1: mid, y2: pos[k.sample].y - 11, stroke: '#8f8d86' }));
+    });
+    ms.forEach(function (m) {
+      var p = pos[m.sample], c = colourOf[m.sample] || '#8f8d86';
+      var attrs = { fill: '#15161a', stroke: m.sequenced ? c : '#8f8d86', 'stroke-width': 2 };
+      if (!m.sequenced) { attrs['stroke-dasharray'] = '3 3'; }
+      var shape = m.sex === 'male' ? U.svg('rect', Object.assign({ x: p.x - 11, y: p.y - 11, width: 22, height: 22 }, attrs))
+        : m.sex === 'female' ? U.svg('circle', Object.assign({ cx: p.x, cy: p.y, r: 11 }, attrs))
+          : U.svg('polygon', Object.assign({ points: [p.x, p.y - 13, p.x + 13, p.y, p.x, p.y + 13, p.x - 13, p.y].join(' ') }, attrs));
+      s.appendChild(shape);
+      var t = U.svg('text', { x: p.x, y: p.y + 26, 'text-anchor': 'middle', fill: '#c3c2b7', 'font-size': 11 });
+      t.textContent = m.sample;
+      s.appendChild(t);
+    });
+    return s;
   }
   function rank(r) { return !r ? 3 : r.state === 'running' ? 0 : r.state === 'finished' ? 1 : 2; }
+  function hoursOf(r) { var h = U.hours(r.started_utc, r.finished_utc); return h === null ? '—' : h.toFixed(1); }
 
   function draw(data) {
     var main = document.getElementById('home');
     main.textContent = '';
+    var runs = data.runs || [], fams = data.families || [];
     var byName = {};
-    (data.runs || []).forEach(function (r) { byName[r.name] = r; });
+    runs.forEach(function (r) { byName[r.name] = r; });
+    var colourOf = {};
+    fams.forEach(function (f) { f.members.forEach(function (m, i) { if (!colourOf[m.sample]) { colourOf[m.sample] = PCOL[i % PCOL.length]; } }); });
+    var going = runs.filter(function (r) { return r.state === 'running'; });
+    var done = runs.filter(function (r) { return r.state === 'finished'; });
+    var acts = runs.reduce(function (a, r) { return a + ((r.levels && r.levels.act) || 0); }, 0);
+    var assessed = runs.filter(function (r) { return r.levels; }).length;
+    // A child of a family: results to act on stay closed on this page too (the report opens them).
+    var children = {};
+    fams.forEach(function (f) {
+      f.members.forEach(function (m) { if (f.members.some(function (x) { return x.sample === m.father || x.sample === m.mother; })) { children[m.sample] = true; } });
+    });
+    function closedTitle(r, f) { return children[r.name] && f.level === 'act' ? 'A result to act on, closed until opened on the report' : f.title; }
+    // The dateline and the headline sentence.
+    var dl = el('div', { 'class': 'dateline' });
+    var today = new Date();
+    add(dl, el('span', { 'class': 'd' }, today.toUTCString().slice(0, 16)),
+      el('span', {}, runs.length + ' genome' + (runs.length === 1 ? '' : 's') + ' · ' + fams.length + ' famil' + (fams.length === 1 ? 'y' : 'ies') +
+        ' · ' + going.length + ' report' + (going.length === 1 ? '' : 's') + ' being written'));
+    add(main, dl);
+    var hero = el('section', { 'class': 'homehero' });
+    var left = el('div', {});
+    add(left, el('div', { 'class': 'kicker' }, 'On this server'));
+    var h1 = el('h1', { 'class': 'h-display' });
+    if (!runs.length) { add(h1, 'No genome here yet.'); }
+    else {
+      if (going.length) { add(h1, cap(word(going.length)) + ' report' + (going.length > 1 ? 's are ' : ' is '), el('em', {}, 'being written'), '. '); }
+      add(h1, (going.length ? cap(word(done.length)) + (done.length === 1 ? ' is' : ' are') : cap(word(done.length)) + ' report' + (done.length === 1 ? ' is' : 's are')) + ' finished, and ' +
+        (acts ? word(acts) + ' finding' + (acts === 1 ? ' should' : 's should') + ' go to a doctor.'
+          : !assessed ? 'none has results to read yet.'
+            : assessed < runs.length ? 'no finding in the ' + word(assessed) + ' with results so far needs a doctor.'
+              : 'no finding in what was assessed needs a doctor.'));
+    }
+    add(left, h1);
+    var sub = fams.map(function (f) { return 'Family ' + f.name + ': ' + f.members.filter(function (m) { return m.sequenced; }).length + ' genomes, read alone and together.'; });
+    if (going.length) { sub.push(going.map(function (r) { return r.name; }).join(', ') + ' ' + (going.length > 1 ? 'are' : 'is') + ' still running.'); }
+    if (sub.length) { add(left, el('p', { 'class': 'sub' }, sub.join(' '))); }
+    if (!runs.length) { add(left, el('p', { 'class': 'sub' }, 'Start one with scripts/run-all.sh and it shows here.')); }
+    var right = el('div', {});
+    add(right, el('div', { 'class': 'fig-label' }, 'Needs attention, across everyone'));
+    var ul = el('ul', { 'class': 'attnlist', id: 'attention' });
+    var order = { act: 0, medicine: 1, carrier: 2, review: 3, trust: -1 };
+    var items = [];
+    // One line per person and level: the first finding names the line, the rest are counted on it.
+    runs.forEach(function (r) {
+      var seen = {};
+      (r.top || []).forEach(function (f) {
+        if (order[f.level] === undefined) { return; }
+        if (seen[f.level]) { return; }
+        // The rest of the level from its count, not from the first four findings the index names.
+        seen[f.level] = { r: r, f: f, more: Math.max(0, ((r.levels && r.levels[f.level]) || 1) - 1) };
+        items.push(seen[f.level]);
+      });
+    });
+    items.sort(function (a, b) { return order[a.f.level] - order[b.f.level]; });
+    items.slice(0, 6).forEach(function (x) {
+      var a = el('a', { href: x.r.url + 'finding/' + encodeURIComponent(x.f.id) + '/' });
+      var who = el('span', { 'class': 'who' });
+      var pc = el('span', { 'class': 'pc' }, x.r.name);
+      if (colourOf[x.r.name]) { pc.style.setProperty('--pcol', colourOf[x.r.name]); }
+      add(who, pc, ' · ' + U.LEVEL_WORDS[x.f.level].toLowerCase());
+      add(a, U.findingLevel(x.f.level, ''), who, el('span', { 'class': 'what' }, closedTitle(x.r, x.f) + (x.more ? ' and ' + x.more + ' more' : '')), el('span', { 'class': 'arr', 'aria-hidden': 'true' }, '→'));
+      add(ul, add(el('li', {}), a));
+    });
+    if (!items.length) { add(ul, add(el('li', {}), el('p', { 'class': 'soft' }, runs.length ? 'No finding to act on, for a prescriber or for family planning in what the finished steps assessed. Each report says what its steps do not see.' : 'Nothing yet.'))); }
+    add(right, ul);
+    add(hero, left, right);
+    add(main, hero);
+    // Being written: a run in progress comes first.
+    going.forEach(function (r) {
+      var head = el('div', { 'class': 'blockhead' });
+      add(head, el('h2', {}, 'Being written'), el('span', { 'class': 'dim' }, 'a run in progress comes first'), el('a', { 'class': 'go', href: r.url }, 'Watch it →'));
+      add(main, head);
+      var card = el('div', { 'class': 'writing-card', 'data-run': r.name });
+      var c1 = el('div', {});
+      add(c1, el('div', { 'class': 'kicker' }, 'Being written'));
+      add(c1, add(el('h3', {}), el('a', { href: r.url }, r.name)));
+      add(c1, el('div', { 'class': 'meta dim' }, r.started_utc ? 'started ' + U.dm(r.started_utc) + ' ' + U.hm(r.started_utc) : ''));
+      var big = el('div', { 'class': 'bignum' }, String(r.done));
+      add(big, el('small', {}, 'of ' + r.planned + ' steps'));
+      add(c1, big);
+      var bar = el('div', { 'class': 'stepbar' });
+      [['d', r.done], ['r', r.running], ['f', r.failed]].forEach(function (x) {
+        if (!x[1]) { return; }
+        var i = el('i', { 'class': x[0] });
+        i.style.setProperty('width', (100 * x[1] / Math.max(1, r.planned)).toFixed(2) + '%');
+        add(bar, i);
+      });
+      add(c1, bar, add(el('div', { 'class': 'stepkey' }), el('span', {}, r.done + ' done'), el('span', {}, r.running + ' running'),
+        el('span', {}, (r.planned - r.done - r.running - r.failed) + ' waiting')));
+      var c2 = el('div', {});
+      add(c2, el('div', { 'class': 'fig-label' }, 'Found so far'));
+      var fs = el('ul', { 'class': 'fs' });
+      (r.top || []).forEach(function (f) { add(fs, add(el('li', {}), U.findingLevel(f.level, ''), ' ', closedTitle(r, f))); });
+      if (!fs.childNodes.length) { add(fs, el('li', {}, r.lead ? U.firstSentence(r.lead) : 'No section is written yet: the first ones appear as their steps end.')); }
+      add(c2, fs);
+      var c3 = el('div', {});
+      add(c3, el('div', { 'class': 'fig-label' }, 'Timing'));
+      var el2 = U.hours(r.started_utc, new Date().toISOString());
+      add(c3, add(el('div', { 'class': 'timing' }), add(el('div', {}), el('span', { 'class': 'k' }, 'Elapsed'),
+        el('span', { 'class': 'v' }, el2 !== null ? el2.toFixed(1) + ' h' : '—'))));
+      add(card, c1, c2, c3);
+      add(main, card);
+    });
+    // The families.
     var inFamily = {};
-    (data.families || []).forEach(function (f) {
-      var block = el('section', { 'class': 'family-block', 'data-family': f.name });
-      var h = el('header', { 'class': 'family-head' });
+    fams.forEach(function (f) {
+      var head = el('div', { 'class': 'blockhead family-block family-head', 'data-family': f.name });
       var seq = f.members.filter(function (m) { return m.sequenced; }).length;
-      var h2 = el('h2', {});
-      add(h2, el('a', { href: f.url }, 'Family ' + f.name));
-      add(h, h2, el('span', { 'class': 'dim' }, seq + ' of ' + f.members.length + ' sequenced'));
-      add(h, el('a', { href: f.url, 'class': 'open' }, 'Open the family page'));
-      add(block, h);
-      var ul = el('ul', { 'class': 'people' });
+      add(head, add(el('h2', {}), el('a', { href: f.url }, 'Family ' + f.name)),
+        el('span', { 'class': 'dim' }, seq + ' genome' + (seq === 1 ? '' : 's') + (f.members.length > seq ? ', ' + (f.members.length - seq) + ' without one' : '')),
+        el('a', { 'class': 'go', href: f.url }, 'Family report →'));
+      add(main, head);
+      var rowx = el('div', { 'class': 'family-row' });
+      var side = el('div', { 'class': 'fam-side' });
+      var cols = {};
+      f.members.forEach(function (m) { cols[m.sample] = { 'var(--p1)': '#d95926', 'var(--p2)': '#3987e5', 'var(--p3)': '#199e70', 'var(--p4)': '#c98500', 'var(--p5)': '#9085e9' }[colourOf[m.sample]]; });
+      add(side, miniPedigree(f, cols));
+      add(side, el('p', { 'class': 'soft' }, 'The family report reads the genomes together: who is related how, what the children inherited, and each couple’s carrier screen.'));
+      add(side, el('a', { href: f.url }, 'Read the family report →'));
+      var ppl = el('div', { 'class': 'fam-people' });
       f.members.slice().sort(function (a, b) { return rank(byName[a.sample]) - rank(byName[b.sample]); }).forEach(function (m) {
         inFamily[m.sample] = true;
-        add(ul, personCard(m.sample, m.sex, m.sequenced, role(m, f), byName[m.sample]));
+        add(ppl, tile(m, f, byName[m.sample], colourOf[m.sample]));
       });
-      add(block, ul);
-      add(main, block);
+      add(rowx, side, ppl);
+      add(main, rowx);
     });
-    var loose = (data.runs || []).filter(function (r) { return !inFamily[r.name]; })
-      .sort(function (a, b) { return rank(a) - rank(b) || (a.name < b.name ? -1 : 1); });
+    var loose = runs.filter(function (r) { return !inFamily[r.name]; }).sort(function (a, b) { return rank(a) - rank(b) || (a.name < b.name ? -1 : 1); });
     if (loose.length) {
-      var block = el('section', { 'class': 'family-block' });
-      add(block, add(el('header', { 'class': 'family-head' }), el('h2', {}, (data.families || []).length ? 'Not in a family' : 'People')));
-      var ul = el('ul', { 'class': 'people' });
-      loose.forEach(function (r) { add(ul, personCard(r.name, r.declared_sex, true, null, r)); });
-      add(block, ul);
-      add(main, block);
+      var lh = el('div', { 'class': 'blockhead family-block' });
+      add(lh, el('h2', {}, fams.length ? 'Not in a family' : 'People'));
+      add(main, lh);
+      var lp = el('div', { 'class': 'fam-people' });
+      loose.forEach(function (r) { add(lp, tile({ sample: r.name, sex: r.declared_sex }, null, r, null)); });
+      add(main, lp);
     }
-    if (!loose.length && !(data.families || []).length) {
-      add(main, el('p', { 'class': 'empty' }, 'No run under this folder yet. Start one with scripts/run-all.sh and it shows here.'));
+    // Every run: the log, for whoever runs the server.
+    if (runs.length) {
+      var eh = el('div', { 'class': 'blockhead' });
+      add(eh, el('h2', {}, 'Every run'), el('span', { 'class': 'dim' }, 'the log, for whoever runs the server'));
+      add(main, eh);
+      var t = el('table', { 'class': 'runlog', id: 'runlog' });
+      add(t, add(el('thead', {}), add(el('tr', {}), el('th', {}, 'Run'), el('th', {}, 'State'), el('th', { 'class': 'r' }, 'Steps'),
+        el('th', { 'class': 'r' }, 'Hours'), el('th', {}, 'Finished'), el('th', {}, 'Notes'))));
+      var tb = el('tbody', {});
+      runs.slice().sort(function (a, b) { return rank(a) - rank(b) || (a.name < b.name ? -1 : 1); }).forEach(function (r) {
+        var pc = el('span', { 'class': 'pc' }, r.name);
+        if (colourOf[r.name]) { pc.style.setProperty('--pcol', colourOf[r.name]); }
+        var stc = el('span', { 'class': 'st-' + r.state }, r.state === 'finished' ? '✓ finished' : r.state);
+        var notes = r.failed ? r.failed + ' step' + (r.failed > 1 ? 's' : '') + ' failed: not assessed' : r.running ? r.running + ' running now' : '';
+        add(tb, add(el('tr', {}), add(el('td', {}), add(el('a', { href: r.url }), pc)), add(el('td', {}), stc),
+          el('td', { 'class': 'r' }, r.done + ' / ' + r.planned), el('td', { 'class': 'r' }, hoursOf(r)),
+          el('td', {}, r.finished_utc ? U.dm(r.finished_utc) + ', ' + U.hm(r.finished_utc) : r.state === 'running' ? 'running' : '—'),
+          el('td', {}, notes)));
+      });
+      add(t, tb);
+      add(main, t);
     }
     root.setAttribute('data-pgp-people', String(main.querySelectorAll('.person-card').length));
     root.setAttribute('data-pgp-status', 'ready');
   }
 
+  // While a run goes, the page asks again every 30 seconds, as the family page does.
   function start() {
-    U.getJSON(root.getAttribute('data-data') || '/runs.json').then(function (d) { if (d) { draw(d); } })
-      .catch(function () { root.setAttribute('data-pgp-status', 'offline'); });
+    U.getJSON(root.getAttribute('data-data') || '/runs.json').then(function (d) {
+      if (!d) { return; }
+      draw(d);
+      if ((d.runs || []).some(function (r) { return r.state === 'running'; })) { setTimeout(start, 30000); }
+    }).catch(function () { root.setAttribute('data-pgp-status', 'offline'); setTimeout(start, 30000); });
   }
   if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); }
 }());
diff --git a/assets/live/index.html b/assets/live/index.html
index 6f170ec4..f02100f9 100644
--- a/assets/live/index.html
+++ b/assets/live/index.html
@@ -11,41 +11,71 @@
 {{plugins}}
 </head>
 <body class="page-person">
-<header class="top">
-  <a class="brand" href="/">OwnGenome</a>
-  <nav class="crumbs" id="crumbs" aria-label="Where you are"><span id="run-name">{{run}}</span></nav>
+<header class="top mast"><div class="mast-in">
+  <a class="brand wordmark" href="/">Own<i>Genome</i></a>
+  <nav class="crumbs" id="crumbs" aria-label="Where you are"><a href="/" id="home-crumb">People</a><span class="sep" aria-hidden="true">/</span><span id="run-name">{{run}}</span></nav>
   <div id="search-slot" class="search-slot"></div>
-  <nav class="links"><a href="report.html" id="report-link">Report</a> <a href="/" id="home-link">All runs</a></nav>
-</header>
+  <nav class="links"><span class="livebadge" id="live-badge" hidden><span class="dot-live"></span><span id="live-text">Live</span></span> <a href="report.html" id="report-link">Report</a> <a href="/" id="home-link">All runs</a></nav>
+</div></header>
 <div id="replay" class="replay" hidden>
   <button type="button" id="replay-play">Play</button>
   <input type="range" id="replay-slider" min="0" max="0" value="0" aria-label="Moment of the run">
   <span id="replay-time"></span>
 </div>
-<section class="person-head" aria-label="This person">
-  <h1><span id="avatar-slot"></span><span id="person-name">{{run}}</span> <span id="run-state" class="badge">loading</span></h1>
-  <p id="person-line" class="person-line"></p>
-  <a href="#progress" id="strip" class="strip" aria-label="Steps of the run: open the Progress tab"></a>
-  <p id="strip-text" class="strip-text"></p>
-</section>
-<div class="layout">
-  <nav id="rail" class="rail" role="tablist" aria-label="Chapters" aria-orientation="vertical"></nav>
-  <main id="content">
-    <section id="results" class="results" role="tabpanel" hidden></section>
-    <section id="progress" class="progress" role="tabpanel" aria-label="Progress">
-      <div class="progress-grid">
-        <section class="map-wrap" aria-label="Steps">
-          <div id="legend" class="legend"></div>
-          <div id="map"></div>
-        </section>
-        <aside class="side">
-          <section id="detail" class="card" aria-live="polite"><h2>Step</h2><p class="dim">Click a step to see its tasks.</p></section>
-          <section class="card"><h2>Found so far</h2><ul id="found" class="found"><li class="dim">Nothing finished yet.</li></ul></section>
-          <div id="plugin-panels"></div>
-        </aside>
+<div class="wrap">
+  <section class="cover" id="cover" aria-label="This person">
+    <div></div>
+    <div class="cover-main">
+      <div>
+        <div class="kicker" id="kicker">Personal genome report</div>
+        <h1 class="h-display"><span id="avatar-slot" hidden></span><span id="person-name">{{run}}</span></h1>
+        <p id="person-line" class="byline"></p>
+        <p class="byline"><span id="run-state" class="badge">loading</span> <span class="mono">{{run}} · GRCh38</span></p>
       </div>
-    </section>
-  </main>
+      <div class="actions" id="actions">
+        <a class="btn" href="report.html" id="report-btn">The full report (HTML)</a>
+        <a class="btn ghost" href="#s10">Raw data and files</a>
+      </div>
+    </div>
+  </section>
+  <section class="runhero" id="runhero" aria-label="The run" hidden>
+    <div>
+      <p class="lede" id="run-lede"></p>
+    </div>
+    <div>
+      <div class="bignum" id="bignum"></div>
+      <div class="stepbar" id="stepbar"></div>
+      <div class="stepkey" id="stepkey"></div>
+      <div class="timing" id="timing"></div>
+    </div>
+  </section>
+  <div class="jlayout">
+    <aside class="toc" id="rail" aria-label="In this report"></aside>
+    <main id="content">
+      <div id="lead-slot"></div>
+      <section id="results" class="results" aria-label="The report"></section>
+      <section id="progress" class="sec runsec" aria-label="The run, step by step">
+        <div class="sechead"><span class="secnum">&#8211;</span><h2 class="h2">How the run went</h2></div>
+        <p class="secq" id="progress-q">One line per step: when it ran, and what it found.</p>
+        <div class="progress-grid">
+          <section class="map-wrap" aria-label="Steps">
+            <div class="map-head"><span class="fig-label">Figure &middot; The run, one line per step</span><div id="legend" class="legend"></div></div>
+            <div id="map"></div>
+            <a href="#progress" id="strip" class="strip" aria-label="Steps of the run"></a>
+            <p id="strip-text" class="strip-text"></p>
+          </section>
+          <aside class="side">
+            <section id="running-now" class="panel" hidden><h2>Running now</h2><ul class="running-now" id="running-list"></ul></section>
+            <section id="detail" class="panel" aria-live="polite"><h2>Step</h2><p class="dim">Click a step to see its tasks.</p></section>
+            <section class="panel"><h2>The wire</h2><ul id="found" class="found"><li class="dim">Nothing finished yet.</li></ul></section>
+            <div id="plugin-panels"></div>
+          </aside>
+        </div>
+      </section>
+    </main>
+  </div>
 </div>
+<nav class="tabbar" id="tabbar" aria-label="Sections"></nav>
+<footer class="colophon"><div class="colophon-in"><span class="wordmark">OwnGenome</span><span>GRCh38 no-ALT · a research pipeline, not a clinical test</span><span class="right" id="colophon-note"></span></div></footer>
 </body>
 </html>
diff --git a/assets/live/live.css b/assets/live/live.css
index 08f6ce5e..e04b4d6b 100644
--- a/assets/live/live.css
+++ b/assets/live/live.css
@@ -1,320 +1,655 @@
-/* live.css: the live site's pages (assets/live): home, a person, a family, the login.
-   Dark first. No green anywhere: a result that ran is not a finding. --fail marks a failed step,
-   never a result. A tone is always a word and a symbol, never a colour alone. */
-:root { color-scheme: dark light;
-  --bg: #14181f; --card: #1d232d; --card2: #232a36; --rule: #2f3847; --text: #e4e7ec; --dim: #9aa3b2;
-  --info: #7fa6d9; --attn: #e0a64b; --low: #a99ad6; --fail: #c8664f; --focus: #7fa6d9;
-  --anc1: #6f8fb8; --anc2: #b98a5e; --anc3: #8b7fb5; --anc4: #5f9ea0; --anc5: #a8787f;
-  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --mono: ui-monospace, Menlo, monospace;
-  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
-  --r-card: 8px; --r-chip: 3px; }
-@media (prefers-color-scheme: light) { :root {
-  --bg: #f6f7f9; --card: #fff; --card2: #f0f2f5; --rule: #d5dae1; --text: #1b2029; --dim: #566070;
-  --info: #2f5f9e; --attn: #8a5a00; --low: #5f4ea0; --fail: #a33a26; --focus: #2f5f9e; } }
+/* live.css: the live site's pages (assets/live): home, a person's report, one finding, a family, the login.
+   The Journal design (docs/design/journal/): each genome reads as a typeset report. Dark only. Serif for
+   headings, the sans for UI text and inside every chart, tabular figures, mono ids. Brass marks section
+   numbers, links and "being written", never a level. Green marks data and run states only, never a
+   health result. A level is always a glyph and a word, never a colour alone. */
+:root { color-scheme: dark;
+  --page: #0e0f10; --paper: #15161a; --paper-2: #1b1c21;
+  --hair: rgba(255, 255, 255, .085); --hair-2: rgba(255, 255, 255, .14);
+  --ink: #f0efec; --ink-2: #c3c2b7; --ink-3: #8f8d86;
+  --brass: #c8ab78; --brass-dim: rgba(200, 171, 120, .35);
+  --act: #d03b3b; --med: #ec835a; --rev: #fab219; --car: #9085e9; --good: #0ca30c;
+  --p1: #d95926; --p2: #3987e5; --p3: #199e70; --p4: #c98500; --p5: #9085e9;
+  --serif: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif;
+  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: ui-monospace, "SF Mono", Menlo, monospace;
+  /* the older names the plugins and the family page use */
+  --bg: var(--page); --card: var(--paper); --card2: var(--paper-2); --rule: var(--hair-2); --text: var(--ink);
+  --dim: var(--ink-3); --info: var(--brass); --attn: var(--rev); --low: var(--car); --fail: #ef6a6a; --focus: var(--brass);
+  --anc1: #3987e5; --anc2: #d95926; --anc3: #199e70; --anc4: #c98500; --anc5: #9085e9;
+  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-card: 8px; --r-chip: 999px; }
 
 * { box-sizing: border-box; }
 html { -webkit-text-size-adjust: 100%; }
-body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); font-variant-numeric: tabular-nums; }
-a { color: var(--info); text-underline-offset: 2px; }
-a:hover { text-decoration-thickness: 2px; }
-:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
-h1, h2, h3 { font-weight: 600; margin: 0; }
-.dim, .muted { color: var(--dim); }
+html, body { margin: 0; background: var(--page); color: var(--ink); }
+body { font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: underline; text-decoration-color: var(--brass-dim); text-underline-offset: 3px;
+  text-decoration-thickness: 1px; }
+a:hover { text-decoration-color: var(--brass); }
+:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
+h1, h2, h3, h4 { font-weight: 400; margin: 0; }
+p { margin: 0 0 14px; }
 [hidden] { display: none !important; }
-button { font: inherit; background: var(--card2); color: var(--text); border: 1px solid var(--rule); border-radius: 6px;
-  padding: 5px 12px; cursor: pointer; }
-button:hover { border-color: var(--dim); }
+.dim, .muted { color: var(--ink-3); }
+.soft { color: var(--ink-2); }
+.mono { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }
+.num { font-variant-numeric: tabular-nums; }
+button { font: 500 13px/1 var(--sans); color: var(--ink); background: var(--paper-2); border: 1px solid var(--hair-2);
+  border-radius: 7px; padding: 9px 13px; cursor: pointer; }
+button:hover { border-color: var(--brass-dim); }
+.btn { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); color: var(--ink); background: var(--paper-2);
+  border: 1px solid var(--hair-2); border-radius: 7px; padding: 9px 13px; text-decoration: none; cursor: pointer; }
+.btn:hover { border-color: var(--brass-dim); }
+.btn.ghost { background: transparent; }
+.toggle { font: 500 12.5px var(--sans); color: var(--ink-2); cursor: pointer; background: none; border: 0; padding: 0;
+  text-decoration: underline; text-decoration-color: var(--brass-dim); text-underline-offset: 3px; }
 
-/* --- the header every page shares --- */
-.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s4); padding: 10px var(--s5);
-  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
-.brand { font-family: var(--serif); font-size: 19px; color: var(--text); text-decoration: none; letter-spacing: .01em; }
-.crumbs { display: flex; gap: var(--s2); align-items: baseline; color: var(--dim); min-width: 0; overflow: hidden;
+/* --- the masthead every page shares --- */
+.top, .mast { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--hair); background: var(--page); }
+.mast-in { max-width: 1320px; margin: 0 auto; padding: 0 40px; height: 58px; display: flex; align-items: center; gap: 28px; }
+.brand, .wordmark { font-family: var(--serif); font-size: 23px; letter-spacing: .005em; color: var(--ink); text-decoration: none; white-space: nowrap; }
+.brand i, .wordmark i { font-style: italic; color: var(--brass); }
+.crumbs { display: flex; gap: 10px; align-items: center; color: var(--ink-3); font-size: 13.5px; min-width: 0; overflow: hidden;
   white-space: nowrap; text-overflow: ellipsis; }
-.crumbs::before { content: "/"; color: var(--rule); }
-.crumbs a { color: var(--dim); }
-.crumbs .sep { color: var(--rule); }
-.crumbs #run-name { color: var(--text); }
-.links { margin-left: auto; display: flex; gap: var(--s4); white-space: nowrap; }
+.crumbs a { color: var(--ink-2); text-decoration: none; }
+.crumbs a:hover { color: var(--ink); }
+.crumbs .sep { color: var(--ink-3); opacity: .6; }
+.crumbs #run-name, .crumbs .here { color: var(--ink); }
+.links { margin-left: auto; display: flex; gap: 18px; white-space: nowrap; font-size: 13px; color: var(--ink-3); align-items: center; }
+.links a { color: var(--ink-2); }
 .search-slot + .links { margin-left: 0; }
 .logout { margin: 0 0 0 auto; }
-.demo-note { margin: 0 0 0 auto; color: var(--dim); font-size: 13px; text-align: right; }
+.logout button { padding: 7px 12px; }
+.demo-note { margin: 0 0 0 auto; color: var(--ink-3); font-size: 12.5px; text-align: right; }
+.livebadge { display: inline-flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink-3); }
+.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--brass); display: inline-block; box-shadow: 0 0 0 3px rgba(200, 171, 120, .18); }
 
-/* the search box (plugins/search.js) in the header */
-.search-slot { margin-left: auto; position: relative; width: min(320px, 40vw); }
+/* the search box (plugins/search.js) */
+.search-slot { margin-left: auto; position: relative; width: min(270px, 40vw); }
 .search-slot > section.plugin { background: none; border: 0; padding: 0; margin: 0; }
 .search-slot h2, .search-slot .search-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 .search-slot form { margin: 0; }
-.search-slot input[type=search] { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: var(--card);
-  border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; }
-.search-slot input[type=search]:disabled { color: var(--dim); }
+.search-slot input[type=search] { width: 100%; font: 13px var(--sans); color: var(--ink); background: var(--paper);
+  border: 1px solid var(--hair-2); border-radius: 999px; padding: 7px 14px; }
+.search-slot input[type=search]::placeholder { color: var(--ink-3); }
 .search-results { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: min(460px, 92vw); max-height: 70vh;
-  overflow: auto; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s3) var(--s4);
-  box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
+  overflow: auto; background: var(--paper); border: 1px solid var(--hair-2); border-radius: 8px; padding: 12px 16px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
 .search-slot:focus-within .search-results:not(:empty) { display: block; }
 .search-results ul { padding-left: 1.1em; margin: 4px 0; }
-.search-results h3 { font-size: 15px; }
-.search-results .suggestions button { padding: 1px 8px; margin: 2px; }
+.search-results h3 { font: 600 13px var(--sans); }
+.search-results .suggestions button { padding: 3px 8px; margin: 2px; }
 
-/* --- a person: the head, the strip --- */
-.person-head { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s3); }
-.person-head h1 { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-family: var(--serif); font-size: 30px;
-  font-weight: 500; line-height: 1.2; }
-.person-line { color: var(--dim); margin: var(--s2) 0 var(--s3); }
-.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden;
-  text-decoration: none; }
-.strip .cell { background: var(--rule); }
-.strip .cell.st-done { background: var(--info); }
-.strip .cell.st-running { background: repeating-linear-gradient(45deg, var(--info) 0 3px, var(--card2) 3px 6px); }
-.strip .cell.st-failed { background: var(--fail); }
-.strip .cell.st-skipped, .strip .cell.st-not-finished { background: var(--card2); }
-.strip-text { color: var(--dim); font-size: 13px; margin: 6px 0 0; }
-.badge { font: 600 12px/1 var(--sans); padding: 4px 8px; border-radius: var(--r-chip); border: 1px solid var(--rule); color: var(--dim);
-  letter-spacing: .02em; }
-.badge.run-running { color: var(--info); border-color: var(--info); }
-.badge.run-finished { color: var(--text); }
+/* --- levels: the one scale (act, medicine, review, carrier, trust, info) --- */
+.lv { display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--sans); letter-spacing: .06em;
+  text-transform: uppercase; white-space: nowrap; }
+.lv .g { width: 10px; height: 10px; flex: none; display: inline-block; }
+.lv.act { color: #ef6a6a; } .lv.act .g { background: var(--act); transform: rotate(45deg) scale(.82); }
+.lv.medicine { color: var(--med); } .lv.medicine .g { background: var(--med); border-radius: 5px; width: 13px; height: 7px; }
+.lv.review { color: var(--rev); } .lv.review .g { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent;
+  border-bottom: 10px solid var(--rev); }
+.lv.carrier { color: #aaa1f2; } .lv.carrier .g { width: 15px; height: 9px;
+  background: radial-gradient(circle at 4.5px 4.5px, transparent 2.6px, var(--car) 3px, var(--car) 4.4px, transparent 4.6px),
+  radial-gradient(circle at 10.5px 4.5px, transparent 2.6px, var(--car) 3px, var(--car) 4.4px, transparent 4.6px); }
+.lv.info { color: var(--ink-2); } .lv.info .g { border: 1.5px solid var(--ink-2); border-radius: 50%; width: 9px; height: 9px; }
+.lv.trust { color: #3fc43f; } .lv.trust .g { position: relative; width: 11px; }
+.lv.trust .g::after { content: "\2713"; position: absolute; top: -3px; left: 0; font-size: 12px; color: var(--good); }
+.lv.trust.problem { color: #ef6a6a; } .lv.trust.problem .g::after { content: "!"; color: #ef6a6a; font-weight: 700; }
+.lv.notrun { color: var(--rev); } .lv.notrun .g::after { content: "\25b3"; font-size: 11px; }
+.lv.plain { color: var(--ink-3); }
 
-/* the pedigree symbol, with its ring showing progress */
-.avatar { --p: 0; position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; }
-.avatar .glyph { width: 20px; height: 20px; border: 2px solid var(--text); }
-.avatar.sex-female .glyph { border-radius: 50%; }
-.avatar.sex-unknown .glyph { width: 16px; height: 16px; transform: rotate(45deg); }
-.avatar.filled .glyph { background: var(--text); }
-.avatar.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
-  background: conic-gradient(var(--info) calc(var(--p) * 360deg), var(--rule) 0);
-  -webkit-mask: radial-gradient(circle, transparent 14px, #000 15px); mask: radial-gradient(circle, transparent 14px, #000 15px); }
+/* stamps: written, being written, waiting, failed */
+.stamp { font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px;
+  border: 1px solid var(--hair-2); color: var(--ink-3); white-space: nowrap; }
+.stamp.writing { color: var(--brass); border-color: var(--brass-dim); }
+.stamp.written { color: var(--ink-2); }
+.stamp.failed { color: var(--rev); border-color: rgba(250, 178, 25, .4); }
+
+/* --- editorial type --- */
+.kicker + .h-display { margin-top: 14px; }
+.kicker { font: 600 11.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
+.h-display { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1.02; letter-spacing: -.012em; margin: 0; overflow-wrap: anywhere; }
+.h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: -.01em; }
+.h2 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: -.005em; }
+.h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; }
+.lede { font-family: var(--serif); font-size: 21px; line-height: 1.5; color: var(--ink); margin: 0; }
+.lede b { font-weight: 600; }
+.dropcap::first-letter { font-family: var(--serif); float: left; font-size: 74px; line-height: .86; padding: 6px 10px 0 0; color: var(--brass); }
+.body-serif { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--ink-2); }
+.body-serif b { color: var(--ink); font-weight: 600; }
+.secnum { font-family: var(--serif); font-style: italic; color: var(--brass); font-size: 18px; margin-right: 12px; }
+.sechead { display: flex; align-items: baseline; gap: 0; margin: 0 0 6px; }
+.sechead .stamp { margin-left: auto; align-self: center; }
+.secq { font: 13px var(--sans); color: var(--ink-3); margin: 0 0 22px; }
+.fig-label { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
+figure { margin: 0; }
+figcaption { font: 12.5px/1.5 var(--sans); color: var(--ink-3); margin-top: 10px; }
+figcaption b { color: var(--ink-2); font-weight: 600; }
+svg text { font-family: var(--sans); font-variant-numeric: tabular-nums; }
+
+/* margin notes */
+.note { font: 13px/1.5 var(--sans); color: var(--ink-2); border-top: 1px solid var(--hair-2); padding-top: 9px; }
+.note .nh { font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 7px; }
+.note.caveat-note .nh { color: var(--brass); }
+.note + .note { margin-top: 22px; }
+.note dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
+.note dt { color: var(--ink-3); }
+.note dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+
+/* --- a person's report --- */
+.wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
+.cover { padding: 54px 0 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; }
+.cover-main { display: grid; grid-template-columns: minmax(0, 680px) 260px; gap: 48px; }
+.byline { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 18px; }
+.byline b { color: var(--ink-2); font-weight: 500; }
+.actions { display: flex; flex-direction: column; gap: 8px; padding-top: 30px; }
+.actions .btn { justify-content: flex-start; }
+.jlayout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; margin-top: 40px; padding-bottom: 40px; }
+.toc { position: sticky; top: 86px; align-self: start; font-size: 13px; max-height: calc(100vh - 100px); overflow: auto; }
+.toc ol { list-style: none; margin: 0; padding: 0; }
+.toc li a { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px; padding: 6px 0; text-decoration: none; color: var(--ink-2);
+  border-top: 1px solid var(--hair); align-items: baseline; }
+.toc li a:hover, .toc li a[aria-current=true] { color: var(--ink); }
+.toc li a[aria-current=true] .tn { color: var(--brass); }
+.toc .tn { font-family: var(--serif); font-style: italic; color: var(--ink-3); }
+.toc .tc { font-size: 11px; gap: 4px; }
+.toc .tc .g { transform: scale(.85); }
+.toc .tc.act .g { transform: rotate(45deg) scale(.7); }
+.toc .tsub { grid-column: 2 / -1; font-size: 11.5px; color: var(--ink-3); }
+.toc .tsub.writing { color: var(--brass); }
+.toc .group { font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 8px; }
+.toc .group:first-child { margin-top: 0; }
+.toc .people a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; color: var(--ink-2); text-decoration: none; }
+.toc .people a:hover { color: var(--ink); }
+.row { display: grid; grid-template-columns: minmax(0, 680px) 260px; gap: 48px; }
+.row + .row { margin-top: 34px; }
+.row > aside { min-width: 0; }
+.row > div, .row > figure { min-width: 0; }
+section.sec { padding: 56px 0 8px; border-top: 1px solid var(--hair); margin-top: 56px; scroll-margin-top: 70px; }
+#results > section.sec:first-child { margin-top: 0; }
+.ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); margin: 34px 0 0; }
+.ledger .lv { font-size: 10.5px; letter-spacing: .05em; gap: 6px; white-space: normal; }
+.ledger a { text-decoration: none; padding: 16px 14px 14px 0; border-right: 1px solid var(--hair); display: block; min-width: 0; }
+.ledger a + a { padding-left: 16px; }
+.ledger a:last-child { border-right: 0; }
+.ledger .n { font: 300 38px/1 var(--sans); font-variant-numeric: tabular-nums; display: block; margin: 10px 0 4px; color: var(--ink); }
+.ledger .w { font-size: 12.5px; color: var(--ink-3); display: block; overflow-wrap: anywhere; }
+.trustline { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); margin-top: 16px; flex-wrap: wrap; }
+.trustline .sep { color: var(--ink-3); }
 
-/* --- the layout: the rail and the content --- */
-.layout { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5) var(--s7); display: grid; grid-template-columns: 200px minmax(0, 1fr);
-  gap: var(--s5); align-items: start; }
-.rail { position: sticky; top: 64px; display: flex; flex-direction: column; gap: 2px; padding-top: var(--s3); }
-.rail [role=tab] { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: 7px 10px;
-  border-radius: 6px; color: var(--dim); text-decoration: none; border-left: 3px solid transparent; }
-.rail [role=tab]:hover { color: var(--text); background: var(--card); }
-.rail [role=tab][aria-selected=true] { color: var(--text); background: var(--card); border-left-color: var(--info); }
-.rail [data-tab=progress], .rail [data-tab=leaves] { font-size: 14px; }
-.rail [data-tab=leaves] { margin-top: var(--s3); }
-.count { font-size: 12px; font-weight: 700; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 10px;
-  color: var(--bg); background: var(--attn); }
-#content { min-width: 0; }
+/* a finding in its section */
+.finding { padding: 0 0 4px; scroll-margin-top: 80px; }
+.finding + .finding { border-top: 1px solid var(--hair); padding-top: 26px; margin-top: 30px; }
+.finding h3 { margin: 12px 0 6px; }
+.finding h3 a { text-decoration: none; }
+.finding .gene { font: 13px var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
+.finding.new { box-shadow: -14px 0 0 -10px var(--brass); }
+.newband { display: inline-block; font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
+.todo { counter-reset: t; list-style: none; padding: 0; margin: 14px 0 0; }
+.todo li { counter-increment: t; position: relative; padding: 10px 0 10px 40px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink); }
+.todo li::before { content: counter(t); position: absolute; left: 0; top: 9px; font: italic 20px var(--serif); color: var(--brass); }
+.todo-h { font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 22px; }
+.readmore { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 14px; }
+.list-findings { list-style: none; margin: 0; padding: 0; }
+.list-findings li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 13px 0; border-top: 1px solid var(--hair); align-items: baseline; }
+.list-findings .t { font-family: var(--serif); font-size: 19px; color: var(--ink); text-decoration: none; }
+.list-findings .x { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }
+.list-findings .gene { font: 12.5px var(--mono); color: var(--ink-3); }
+.empty-sec { font-family: var(--serif); font-size: 18px; color: var(--ink-2); }
+.proof { display: grid; gap: 9px; margin: 6px 0 18px; }
+.proof i { display: block; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
+.proof i:nth-child(2) { width: 82%; } .proof i:nth-child(3) { width: 58%; }
+.waitnote { border-left: 2px solid var(--brass-dim); padding: 4px 0 4px 14px; font-size: 13.5px; color: var(--ink-2); }
+.notassessed { border: 1px solid rgba(250, 178, 25, .35); border-radius: 8px; padding: 12px 14px; background: rgba(250, 178, 25, .05); font-size: 14px; color: var(--ink-2); margin: 0 0 12px; }
+.notassessed b { color: var(--rev); font-weight: 600; }
+.veil { border: 1px dashed var(--hair-2); border-radius: 8px; padding: 14px 16px; display: flex; gap: 14px; align-items: center; margin: 14px 0;
+  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .015) 0 6px, transparent 6px 12px); }
+.veil .vt { font-size: 13.5px; color: var(--ink-2); flex: 1; }
+.veil .vt b { color: var(--ink); font-weight: 600; }
 
-.view-head { margin: var(--s3) 0 var(--s4); }
-.question { font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.25; }
-.view-head p { margin: 4px 0 0; max-width: 75ch; }
-.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
-#results, #progress, .view { min-width: 0; }
+/* section 8 and 9: assessed, no finding; what it cannot see */
+.nf { list-style: none; padding: 0; margin: 0; }
+.nf > li { border-top: 1px solid var(--hair); padding: 13px 0; font-size: 14px; }
+.nf > li > details > summary, .nf .nfrow { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; cursor: pointer; list-style: none; }
+.nf > li > details > summary::-webkit-details-marker { display: none; }
+.nf .nfname { font-weight: 500; color: var(--ink); }
+.nf .what { color: var(--ink-2); }
+.nf .cav { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
+.nf details[open] > summary { margin-bottom: 14px; }
+.cols2 { columns: 2; column-gap: 32px; font-size: 14px; color: var(--ink-2); padding-left: 18px; margin: 0; }
+.cols2 li { margin-bottom: 8px; break-inside: avoid; }
+.sources { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+.sources th { text-align: left; font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--hair-2); }
+.sources td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); vertical-align: top; overflow-wrap: anywhere; }
+.filebtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
 
-/* --- a card --- */
-.card { min-width: 0; overflow-wrap: anywhere; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s4) var(--s5); }
-.card > h2 { font-size: 15px; margin-bottom: var(--s2); }
-.result { position: relative; scroll-margin-top: 80px; }
-.result.attn { border-left: 4px solid var(--attn); padding-left: calc(var(--s5) - 3px); }
-.result.g-waiting { border-style: dashed; background: transparent; }
-.result.g-notrun, .result.g-empty { background: repeating-linear-gradient(45deg, transparent 0 9px, color-mix(in srgb, var(--rule) 35%, transparent) 9px 10px); }
-.result.target { outline: 2px solid var(--focus); outline-offset: 3px; }
-.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
-.card-head h3 { font-size: 17px; }
-.card-head h3 a { color: var(--text); text-decoration: none; }
-.card-head h3 a:hover { text-decoration: underline; }
-.chips { display: flex; gap: 6px; flex-wrap: wrap; }
-.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-chip);
-  border: 1px solid var(--rule); color: var(--dim); white-space: nowrap; }
+/* --- a card: one section of the report, with its numbers, rows and caveat --- */
+.card { min-width: 0; overflow-wrap: anywhere; }
+.result { position: relative; scroll-margin-top: 80px; margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); }
+.result.target { outline: 1px solid var(--brass); outline-offset: 8px; border-radius: 2px; }
+.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
+.card-head h3 { font-family: var(--serif); font-size: 21px; }
+.card-head h3 a { color: var(--ink); text-decoration: none; }
+.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.chip { display: inline-flex; align-items: center; gap: 6px; font: 12px/1 var(--sans); color: var(--ink-2); border: 1px solid var(--hair-2);
+  border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
 .chip .sym { font-size: 10px; }
-.chip-attn { color: var(--attn); border-color: var(--attn); }
-.chip-info { color: var(--dim); }
-.chip-recheck { color: var(--low); border-color: var(--low); }
-.state-text { color: var(--dim); margin: 0 0 var(--s2); }
-.headline { margin: 0 0 var(--s3); max-width: 75ch; }
-.note-stale { color: var(--attn); margin: 0 0 var(--s2); }
-.empty { color: var(--dim); max-width: 75ch; }
-.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2) var(--s5); margin: 0 0 var(--s3); }
-.fact { min-width: 0; }
-.fact dt { color: var(--dim); font-size: 13px; }
-.fact dd { margin: 0; overflow-wrap: anywhere; }
-.lines { margin: 0 0 var(--s3); padding-left: 1.1em; max-width: 75ch; color: var(--text); }
-.lines li { margin: 2px 0; }
-.table-wrap { overflow-x: auto; margin: 0 0 var(--s3); }
-table.rows { border-collapse: collapse; width: 100%; font-size: 14px; overflow-wrap: normal; }
-table.rows th { text-align: left; color: var(--dim); font-weight: 600; font-size: 13px; padding: 6px 10px; border-bottom: 1px solid var(--rule); }
-table.rows th { white-space: nowrap; }
-table.rows td { padding: 6px 10px; vertical-align: top; overflow-wrap: break-word; min-width: 4ch; }
-table.rows tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--rule) 30%, transparent); }
-.more { margin-top: 6px; font-size: 13px; }
-.caveat { border-top: 1px solid var(--rule); margin-top: var(--s3); padding-top: var(--s3); font-size: 13px; line-height: 1.55; color: var(--dim); }
+.chip-attn { color: var(--rev); border-color: rgba(250, 178, 25, .4); }
+.chip-info { color: var(--ink-2); }
+.chip-recheck, .chip.brass { color: var(--brass); border-color: var(--brass-dim); }
+.state-text { color: var(--ink-3); margin: 0 0 10px; }
+.headline { margin: 0 0 12px; color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
+.note-stale { color: var(--rev); margin: 0 0 8px; font-size: 14px; }
+.empty { color: var(--ink-2); max-width: 75ch; }
+.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); border-top: 1px solid var(--hair-2); margin: 0 0 16px; }
+.fact { min-width: 0; padding: 12px 14px 10px 0; border-bottom: 1px solid var(--hair); }
+.fact dt { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
+.fact dd { margin: 6px 0 0; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.lines { margin: 0 0 14px; padding-left: 1.1em; max-width: 75ch; color: var(--ink-2); font-size: 14px; }
+.lines li { margin: 3px 0; }
+.table-wrap { overflow-x: auto; margin: 0 0 14px; }
+table.rows { border-collapse: collapse; width: 100%; font-size: 13.5px; overflow-wrap: normal; }
+table.rows th { text-align: left; font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
+  padding: 0 12px 10px 0; border-bottom: 1px solid var(--hair-2); white-space: nowrap; }
+table.rows td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; color: var(--ink-2);
+  overflow-wrap: break-word; min-width: 4ch; font-variant-numeric: tabular-nums; }
+.more { margin-top: 8px; }
+.caveat { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--ink-2); border-top: 1px solid var(--hair-2); padding-top: 9px; }
+.caveat::before { content: "Caveat"; display: block; font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); margin-bottom: 7px; }
 .caveat p { margin: 0 0 6px; max-width: 75ch; }
-.caveat-lead::before { content: "\24d8"; margin-right: 6px; color: var(--info); }
-.caveat summary { cursor: pointer; color: var(--info); }
-.card-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s3) 0 0; font-size: 14px; }
-.behind { margin: 0 0 var(--s3); }
-.behind summary { cursor: pointer; color: var(--attn); }
-.explore { font-size: 14px; color: var(--dim); }
-img.plot { max-width: 100%; height: auto; background: #fff; border-radius: 4px; margin-bottom: var(--s3); }
+.caveat summary { cursor: pointer; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--brass-dim); text-underline-offset: 3px; font-size: 12.5px; }
+.card-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; font-size: 13.5px; }
+.behind { margin: 0 0 14px; border: 1px dashed var(--hair-2); border-radius: 8px; padding: 12px 14px;
+  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .015) 0 6px, transparent 6px 12px); }
+.behind summary { cursor: pointer; color: var(--ink); font-size: 13.5px; }
+.behind summary::after { content: " Show"; color: var(--brass); text-decoration: underline; }
+.behind[open] summary::after { content: ""; }
+.explore { font-size: 13.5px; color: var(--ink-3); }
+img.plot { max-width: 100%; height: auto; background: #fff; border-radius: 4px; margin-bottom: 14px; }
 
-/* charts (plugins/charts.js) inside a card */
+/* widgets (person.js): a track with bands, intervals and ticks placed by --a (start) and --w (width) */
+.widget { margin: 0 0 18px; }
+.w-row { margin: 0 0 12px; padding: 7px 0 0 8px; border-left: 2px solid transparent; border-top: 1px solid var(--hair); }
+.w-row.w-attn { border-left-color: var(--rev); }
+.w-head { margin: 0 0 5px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 13px; }
+.w-name { font: 13px var(--mono); color: var(--ink); }
+.w-label { font-weight: 600; color: var(--ink); }
+.w-val { font-variant-numeric: tabular-nums; color: var(--ink); }
+.w-extra { color: var(--ink-3); font-size: 12.5px; }
+.w-track { position: relative; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .05); }
+.w-band, .w-ci, .w-tick { position: absolute; left: var(--a); }
+.w-band { top: 0; bottom: 0; width: var(--w); }
+.w-normal { background: rgba(195, 194, 183, .16); }
+.w-patho { background: repeating-linear-gradient(45deg, rgba(250, 178, 25, .45) 0 2px, transparent 2px 7px); border-left: 1px solid var(--rev); }
+.w-blind { background: repeating-linear-gradient(-45deg, rgba(143, 141, 134, .4) 0 2px, transparent 2px 7px); border-right: 1px dashed var(--ink-3); }
+.w-ci { top: 50%; height: 1.5px; width: var(--w); margin-top: -1px; background: var(--ink-2); }
+.w-ci::before, .w-ci::after { content: ""; position: absolute; top: -4px; width: 1.5px; height: 9px; background: var(--ink-2); }
+.w-ci::before { left: 0; } .w-ci::after { right: 0; }
+.w-tick { top: 1px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--ink); }
+.w-tick.w-low { background: var(--page); border: 2px solid var(--car); }
+.w-tick.w-call { background: var(--rev); }
+.w-legend { margin: 5px 0 0; color: var(--ink-3); font-size: 12.5px; }
+.w-key { font-size: 12.5px; margin: 0; max-width: 75ch; color: var(--ink-3); }
+.w-calls { margin: 6px 0 0; padding-left: 1.1em; font-size: 13.5px; }
+.w-fallback summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; margin-top: 8px; }
+.w-copy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
+.w-copy-list li { display: grid; grid-template-columns: minmax(7ch, 14ch) auto 1fr; gap: 4px 14px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
+.w-copy-list .w-extra { grid-column: 2 / -1; }
+.w-dots { display: inline-flex; gap: 5px; align-items: center; min-height: 12px; }
+.w-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-2); }
+.w-low .w-dot { background: transparent; border: 2px solid var(--car); }
+ol.w-path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 0; align-items: stretch; }
+ol.w-path li { display: flex; flex-direction: column; padding: 6px 10px; border: 1px solid var(--hair-2); border-radius: 6px; background: var(--paper);
+  position: relative; margin-right: 18px; }
+ol.w-path li:not(:last-child)::after { content: "\203a"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 18px; }
+ol.w-path li.w-tip { border-color: var(--brass-dim); }
+ol.w-path li.w-low { border-style: dashed; border-color: var(--car); }
+.w-branch { font-family: var(--mono); font-size: 13px; color: var(--ink); }
+.w-count { color: var(--ink-3); font-size: 12px; }
+
+/* the chromosome map of the findings (person.js) and the charts plugin */
+.kary { margin-top: 12px; }
+.kary svg { width: 100%; height: auto; display: block; }
+.kary .chr { fill: rgba(255, 255, 255, .07); }
+.kary .lab { fill: var(--ink-3); font-size: 10px; }
+.kary .mk { cursor: pointer; }
+.kary .mk text { fill: var(--ink-2); font-size: 10.5px; }
 .chart-slot:empty { display: none; }
-figure.chart { margin: 0 0 var(--s3); }
-figure.chart h3 { font-size: 14px; color: var(--dim); margin-bottom: 4px; }
+figure.chart { margin: 0 0 14px; }
+figure.chart h3 { font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
 figure.chart > .caveat { border: 0; padding: 0; margin: 0 0 6px; }
+figure.chart > .caveat::before { content: none; }
 figure.chart svg { width: 100%; height: auto; max-width: 100%; }
-.chart-detail { background: var(--card2); border: 1px solid var(--rule); border-radius: 6px; padding: var(--s3); margin: 0 0 var(--s3); }
-.chart-detail h3 { font-size: 15px; }
+.chart-detail { background: var(--paper); border: 1px solid var(--hair-2); border-radius: 6px; padding: 12px; margin: 0 0 14px; }
+.chart-detail h3 { font: 600 14px var(--sans); }
 
-/* Look first */
-.look-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: none; }
-.look-list li { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--attn); border-radius: var(--r-card);
-  padding: var(--s3) var(--s4); }
-.look-list a { display: flex; gap: var(--s3); align-items: baseline; text-decoration: none; }
-.look-ch { color: var(--dim); font-size: 13px; min-width: 76px; }
-.look-title { font-weight: 600; font-size: 16px; }
-.look-head { margin: 4px 0 0; color: var(--dim); max-width: 75ch; }
-.look-empty { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s4); }
+/* --- the run being written: hero, timeline, running now, the wire --- */
+.runhero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; padding: 54px 0 0; }
+.bignum { font: 200 92px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
+.bignum small { font: 300 22px var(--sans); color: var(--ink-3); margin-left: 8px; }
+.stepbar { display: flex; height: 5px; margin: 14px 0 8px; background: rgba(255, 255, 255, .07); border-radius: 3px; overflow: hidden; }
+.stepbar i { display: block; height: 100%; }
+.stepbar .d { background: var(--ink-2); } .stepbar .r { background: var(--brass); } .stepbar .f { background: #ef6a6a; }
+.stepkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-3); }
+.stepkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
+.timing { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair-2); margin-top: 22px; }
+.timing div { padding: 12px 12px 0 0; }
+.timing div + div { padding-left: 12px; border-left: 1px solid var(--hair); }
+.timing .k { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
+.timing .v { font: 300 26px/1 var(--sans); display: block; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
+.timing .r { font-size: 12px; color: var(--ink-3); }
+.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; text-decoration: none; margin-top: 18px; }
+.strip .cell { background: rgba(255, 255, 255, .08); }
+.strip .cell.st-done { background: var(--ink-2); }
+.strip .cell.st-running { background: var(--brass); }
+.strip .cell.st-failed { background: #ef6a6a; }
+.strip-text { color: var(--ink-3); font-size: 12.5px; margin: 8px 0 0; }
+.badge { font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; border: 1px solid var(--hair-2); color: var(--ink-3); vertical-align: middle; }
+.badge.run-running { color: var(--brass); border-color: var(--brass-dim); }
 
-/* --- the Progress tab: the step map (live.js) --- */
-.progress-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s3); }
-.map-wrap { max-height: 70vh; }
-.map-wrap { overflow: auto; min-width: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s3); }
-.side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s3); align-items: start; }
-.side > * { min-width: 0; }
-#plugin-panels { display: contents; }
-.legend { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; color: var(--dim); font-size: 12px; }
-.legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -2px; border: 1px solid var(--rule); }
-.edges line { stroke: var(--rule); stroke-width: 1.2; }
+.runsec { padding: 0; border: 0; margin: 0; }
+.runsec .progress-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
+.map-wrap { min-width: 0; background: var(--paper); border: 1px solid var(--hair); border-radius: 10px; padding: 18px 20px; overflow: auto; max-height: 80vh; }
+.map-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
+.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ink-3); font-size: 11.5px; }
+.legend .swatch { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 2px; }
+#map svg { display: block; }
 .box { cursor: pointer; }
-.box rect { stroke: var(--rule); stroke-width: 1; }
-.box text { fill: var(--text); font-size: 12px; pointer-events: none; }
-.box.selected rect { stroke: var(--focus); stroke-width: 2; }
+.box .lbl { fill: var(--ink-3); font-size: 11px; }
+.box rect.bar { fill: rgba(255, 255, 255, .09); }
+.box rect.hit { fill: transparent; }
+.box:hover .lbl, .box.selected .lbl { fill: var(--ink); }
 .box:focus { outline: none; }
-.box:focus-visible rect { stroke: var(--focus); stroke-width: 3; stroke-dasharray: 4 2; }
-.s-waiting rect, .s-waiting .swatch { fill: var(--card2); background: var(--card2); }
-.s-running rect, .s-running .swatch { fill: #3a6aa6; background: #3a6aa6; }
-.s-done rect, .s-done .swatch { fill: #2b3a4f; background: #2b3a4f; }
-.s-failed rect, .s-failed .swatch { fill: var(--fail); background: var(--fail); }
-.s-skipped rect, .s-skipped .swatch { fill: #2b2838; background: #2b2838; }
-.s-notfinished rect, .s-notfinished .swatch { fill: #4a3c22; background: #4a3c22; }
-.s-notplanned rect, .s-notplanned .swatch { fill: var(--bg); background: var(--bg); }
-.s-skipped text, .s-notplanned text { fill: var(--dim); }
-/* Light theme: pale state fills under the dark label text, so every step name stays readable. */
-@media (prefers-color-scheme: light) {
-  .s-running rect, .s-running .swatch { fill: #b9d0ef; background: #b9d0ef; }
-  .s-done rect, .s-done .swatch { fill: #d3dbe6; background: #d3dbe6; }
-  .s-skipped rect, .s-skipped .swatch { fill: #e6e3ef; background: #e6e3ef; }
-  .s-notfinished rect, .s-notfinished .swatch { fill: #f1e0bd; background: #f1e0bd; }
-  .s-failed text { fill: #fff; }
-}
-.s-running rect { animation: pulse 2s ease-in-out infinite; }
-@keyframes pulse { 50% { opacity: .7; } }
-.recheck-mark { fill: var(--low); }
-dl { margin: 0 0 8px; }
-#detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
-#detail dt { color: var(--dim); }
+.box:focus-visible rect.hit { stroke: var(--brass); stroke-width: 1.5; }
+.s-done rect.bar, .s-done .swatch { fill: #9a988f; background: #9a988f; }
+.s-running rect.bar, .s-running .swatch { fill: var(--brass); background: var(--brass); }
+.s-running .lbl { fill: var(--ink); font-weight: 600; }
+.s-failed rect.bar, .s-failed .swatch { fill: #ef6a6a; background: #ef6a6a; }
+.s-waiting rect.bar, .s-waiting .swatch { fill: transparent; stroke: var(--hair-2); background: transparent; border: 1px solid var(--hair-2); }
+.s-skipped rect.bar, .s-skipped .swatch { fill: transparent; stroke: var(--ink-3); stroke-dasharray: 3 2; background: transparent; border: 1px dashed var(--ink-3); }
+.s-notfinished rect.bar, .s-notfinished .swatch { fill: #6b5a33; background: #6b5a33; }
+.s-notplanned rect.bar, .s-notplanned .swatch { fill: transparent; background: transparent; }
+.s-skipped .lbl, .s-notplanned .lbl { fill: rgba(143, 141, 134, .7); }
+.box rect.usual { fill: none; stroke: var(--brass-dim); }
+.axis text { fill: var(--ink-3); font-size: 10.5px; }
+.axis line { stroke: var(--hair); }
+.nowline { stroke: var(--ink-2); stroke-width: 1; }
+.nowlab { fill: var(--ink); font-size: 10.5px; font-weight: 600; }
+.recheck-mark { fill: var(--car); }
+.side { display: grid; gap: 26px; align-content: start; }
+.side > * { min-width: 0; }
+.side .panel, .side > section { border-top: 1px solid var(--hair-2); padding-top: 10px; }
+.side h2, .side h3 { font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
+#plugin-panels { display: contents; }
+#plugin-panels section { font-size: 13px; color: var(--ink-2); }
+#detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; font-size: 13px; }
+#detail dt { color: var(--ink-3); }
 #detail dd { margin: 0; }
-table.tasks { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 8px; }
-table.tasks th, table.tasks td { border-bottom: 1px solid var(--rule); padding: 2px 4px; text-align: right; }
+#detail h2 { color: var(--ink); text-transform: none; letter-spacing: 0; font: 400 18px var(--serif); }
+table.tasks { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
+table.tasks th, table.tasks td { border-bottom: 1px solid var(--hair); padding: 3px 4px; text-align: right; color: var(--ink-2); }
 table.tasks th:first-child, table.tasks td:first-child { text-align: left; }
-.found { list-style: none; margin: 0; padding: 0; }
-.found li { padding: 6px 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
-.found li[role=button]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
-.found .step { display: inline-block; min-width: 30px; color: var(--dim); }
-.tone-attention { border-left: 3px solid var(--attn); padding-left: 6px; }
-.tone-info { border-left: 3px solid var(--rule); padding-left: 6px; }
+.found { list-style: none; margin: 0; padding: 0; font-size: 13px; }
+.found li { padding: 7px 0; border-top: 1px solid var(--hair); cursor: pointer; color: var(--ink-2); }
+.found .step { display: inline-block; min-width: 32px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
+.tone-attention::before { content: "\25b2 "; color: var(--rev); font-size: 10px; }
+.running-now { list-style: none; margin: 0; padding: 0; }
+.running-now li { padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13.5px; }
+.running-now .rn { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); }
+.running-now .rn span:last-child { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
+.running-now .pb { height: 3px; background: rgba(255, 255, 255, .07); margin-top: 7px; border-radius: 2px; overflow: hidden; }
+.running-now .pb i { display: block; height: 100%; width: var(--p); background: var(--brass); }
 .plugin ul.plain { padding-left: 1.1em; }
-.replay { display: flex; gap: 10px; align-items: center; padding: 8px var(--s5); border-bottom: 1px solid var(--rule); max-width: 1120px; margin: 0 auto; }
-.replay input[type=range] { flex: 1; accent-color: var(--info); }
-#replay-time { color: var(--dim); font-size: 13px; }
+.replay { display: flex; gap: 12px; align-items: center; padding: 10px 40px; border-bottom: 1px solid var(--hair); max-width: 1320px; margin: 0 auto; font-size: 13px; }
+.replay input[type=range] { flex: 1; accent-color: var(--brass); }
+#replay-time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
 .family-table { border-collapse: collapse; width: 100%; font-size: 13px; }
-.family-table td, .family-table th { border-bottom: 1px solid var(--rule); padding: 3px 6px; text-align: left; }
+.family-table td, .family-table th { border-bottom: 1px solid var(--hair); padding: 4px 6px; text-align: left; }
+
+/* the pedigree symbol, with its ring showing progress */
+.avatar { --p: 0; position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; }
+.avatar .glyph { width: 16px; height: 16px; border: 1.5px solid var(--ink-2); }
+.avatar.sex-female .glyph { border-radius: 50%; }
+.avatar.sex-unknown .glyph { width: 13px; height: 13px; transform: rotate(45deg); }
+.avatar.filled .glyph { background: var(--paper-2); }
+.avatar.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
+  background: conic-gradient(var(--brass) calc(var(--p) * 360deg), var(--hair-2) 0);
+  -webkit-mask: radial-gradient(circle, transparent 12px, #000 13px); mask: radial-gradient(circle, transparent 12px, #000 13px); }
+
+/* --- one finding (finding.html) --- */
+.fpage .jlayout { margin-top: 0; padding-top: 50px; }
+.frail { padding-top: 4px; }
+.frail .back { color: var(--ink); text-decoration: none; font-size: 13.5px; }
+.frail .back span { color: var(--brass); }
+.frail .next { color: var(--ink-2); font-size: 12.5px; }
+.fkick { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 18px; }
+.fcover .h-display { font-size: 56px; }
+.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
+.fcover .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
+.fpage .lede { margin-top: 10px; }
+.planbox { border: 1px solid var(--hair-2); border-left: 3px solid var(--brass); border-radius: 8px; background: var(--paper); padding: 22px 26px 12px; margin-top: 30px; }
+.planbox.lvl-act { border-left-color: var(--act); }
+.planbox.lvl-medicine { border-left-color: var(--med); }
+.planbox.lvl-review { border-left-color: var(--rev); }
+.planbox.lvl-carrier { border-left-color: var(--car); }
+.planbox .secq { margin: 6px 0 4px; }
+.fstrip { position: relative; height: 34px; margin-top: 12px; }
+.fstrip .axisline { position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--hair-2); }
+.fstrip .tick { position: absolute; top: 12px; width: 1px; height: 9px; background: var(--ink-3); }
+.fstrip .tl { position: absolute; top: 22px; font-size: 10.5px; color: var(--ink-3); transform: translateX(-50%); }
+.fstrip .me { position: absolute; top: 9px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); }
+.reads { margin-top: 12px; }
+.reads svg { width: 100%; height: auto; }
 
-/* --- home: people by family --- */
-.home, .family { max-width: 1120px; margin: 0 auto; padding: var(--s5) var(--s5) var(--s7); }
-.family-block { margin-bottom: var(--s6); }
-.family-head { position: sticky; top: 52px; z-index: 5; display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
-  padding: var(--s2) 0; background: var(--bg); border-bottom: 1px solid var(--rule); margin-bottom: var(--s3); }
-.family-head h2 { font-family: var(--serif); font-size: 24px; font-weight: 500; }
-.family-head h2 a { color: var(--text); text-decoration: none; }
-.family-head .open { margin-left: auto; font-size: 14px; }
-.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s3); }
-.person-card .person-link { display: flex; gap: var(--s3); align-items: flex-start; height: 100%; padding: var(--s3) var(--s4);
-  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); color: var(--text); text-decoration: none; }
-.person-card:not(.has-run) .person-link { background: transparent; border-style: dashed; color: var(--dim); }
-.person-card a.person-link:hover { border-color: var(--dim); }
-.person-card.running .person-link { border-color: color-mix(in srgb, var(--info) 60%, var(--rule)); }
+/* --- home: people and runs --- */
+.home { max-width: 1320px; margin: 0 auto; padding: 0 40px 40px; }
+.dateline { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 34px 0 14px; border-bottom: 1px solid var(--hair-2);
+  font-size: 12.5px; color: var(--ink-3); }
+.dateline .d { font: italic 15px var(--serif); color: var(--ink-2); }
+.homehero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 80px; padding: 40px 0 20px; }
+.homehero .h-display { font-size: 56px; line-height: 1.08; margin-top: 14px; }
+.homehero .h-display em { color: var(--brass); }
+.homehero .sub { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 600px; margin-top: 22px; }
+.attnlist { list-style: none; margin: 0; padding: 0; }
+.attnlist li { border-top: 1px solid var(--hair-2); }
+.attnlist a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 16px; gap: 6px 10px; padding: 16px 0; text-decoration: none; align-items: start; }
+.attnlist .who { font-size: 12.5px; color: var(--ink-3); }
+.attnlist .what { grid-column: 2; font: 18px/1.35 var(--serif); color: var(--ink); }
+.attnlist .arr { grid-column: 3; grid-row: 1; color: var(--ink-3); }
+.attnlist .lv { grid-row: 1 / span 2; margin-top: 2px; }
+.blockhead { display: flex; align-items: baseline; gap: 16px; margin: 64px 0 18px; flex-wrap: wrap; }
+.blockhead h2 { font: 400 30px/1.1 var(--serif); }
+.blockhead h2 a { text-decoration: none; }
+.blockhead .dim { font-size: 13px; }
+.blockhead .go { margin-left: auto; font-size: 13px; }
+.writing-card { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--paper); }
+.writing-card > div { padding: 22px 24px; min-width: 0; }
+.writing-card > div + div { border-left: 1px solid var(--hair); }
+.writing-card h3 { font: 400 30px var(--serif); margin: 10px 0 6px; }
+.writing-card h3 a { text-decoration: none; }
+.writing-card .fs { list-style: none; margin: 0; padding: 0; }
+.writing-card .fs li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--ink-2); }
+.family-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-top: 1px solid var(--hair-2); }
+.family-row > .fam-side { padding: 22px 24px 22px 0; border-right: 1px solid var(--hair); }
+.fam-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+.ptile { padding: 22px 24px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); min-width: 0; }
+.ptile .bar-top { display: block; width: 26px; height: 3px; background: var(--pcol, var(--ink-3)); margin-bottom: 12px; }
+.ptile h3 { font: 400 28px/1.15 var(--serif); }
+.ptile h3 a { text-decoration: none; }
+.ptile .meta { font-size: 12.5px; color: var(--ink-3); margin: 6px 0 14px; }
+.ptile .meta .warn { color: var(--rev); }
+.ptile .lead { font: 16.5px/1.5 var(--serif); color: var(--ink-2); min-height: 4.5em; }
+.ptile .counts { display: flex; flex-wrap: wrap; gap: 8px 14px; border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 14px; }
+.ptile .counts .lv { font-size: 11.5px; text-transform: none; letter-spacing: 0; font-weight: 500; }
+.ptile .read { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--brass); }
+.ptile.norun { border-style: dashed; color: var(--ink-3); }
+.pc { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+.pc::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pcol, var(--ink-3)); flex: none; }
+.pc.nogenome::before { background: none; border: 1.5px dashed var(--ink-3); width: 8px; height: 8px; }
+.runlog { width: 100%; border-collapse: collapse; font-size: 13.5px; }
+.runlog th { text-align: left; font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--hair-2); }
+.runlog td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); font-variant-numeric: tabular-nums; }
+.runlog td.r, .runlog th.r { text-align: right; }
+.runlog .st-finished { color: #3fc43f; font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
+.runlog .st-running { color: var(--brass); }
+.runlog .st-failed { color: #ef6a6a; }
+ul.runs { list-style: none; padding: 0; }
+ul.runs li { padding: 6px 0; border-bottom: 1px solid var(--hair); }
+.kind { color: var(--ink-3); font-size: 12px; margin-left: 6px; }
+/* the older home cards, still drawn by the family page's member list */
+.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0; }
+.person-card .person-link { display: flex; gap: 12px; align-items: flex-start; height: 100%; padding: 14px 16px 14px 0; border-top: 1px solid var(--hair);
+  color: var(--ink); text-decoration: none; }
+.person-card:not(.has-run) .person-link { color: var(--ink-3); }
 .person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
-.person-name { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
-.person-place { color: var(--dim); font-size: 13px; }
-.person-state { font-size: 13px; color: var(--dim); }
-.person-look { font-size: 13px; color: var(--dim); }
-.person-look.attn { color: var(--attn); font-weight: 600; }
+.person-name { font: 19px var(--serif); overflow-wrap: anywhere; }
+.person-place, .person-state, .person-look { color: var(--ink-3); font-size: 12.5px; }
+.person-look.attn { color: var(--rev); }
 .person-look.attn::before { content: "\25b2  "; font-size: 10px; }
-.bar { display: block; height: 5px; border-radius: 3px; background: var(--rule); margin: 6px 0 2px; overflow: hidden; }
-.bar-fill { --p: 0; display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--info); }
-ul.runs { list-style: none; padding: 0; }
-ul.runs li { padding: 6px 0; border-bottom: 1px solid var(--rule); }
-.kind { color: var(--dim); font-size: 12px; margin-left: 6px; }
+.bar { display: block; height: 3px; border-radius: 2px; background: var(--hair-2); margin: 6px 0 2px; overflow: hidden; }
+.bar-fill { --p: 0; display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--brass); }
 
-/* --- a family --- */
-.family-page { display: grid; gap: var(--s4); }
-.family-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
-.family-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
+/* --- a family: a report in chapters --- */
+.family { max-width: 1320px; margin: 0 auto; padding: 0 40px 40px; }
+.family-page { display: block; }
+.family-page > .card, .family-page section.card { border-top: 1px solid var(--hair); padding: 48px 0 8px; margin-top: 48px; background: none; }
+.family-page section.card > h2 { font: 400 30px/1.15 var(--serif); margin-bottom: 18px; display: flex; align-items: baseline; }
+.family-page section.card > h2 .secnum { font-size: 18px; }
+.famcover { padding: 54px 0 0; display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 56px; }
+.famtoc { list-style: none; margin: 10px 0 0; padding: 0; }
+.famtoc li a { display: flex; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--hair); color: var(--ink-2); text-decoration: none; font-size: 14px; }
+.famtoc li a:hover { color: var(--ink); }
+.family-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
+.family-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
 .pedigree-figure { margin: 0; }
 .pedigree-svg { width: 100%; height: auto; max-height: 340px; display: block; margin: 0 auto; }
-.ped-lines line { stroke: var(--dim); stroke-width: 2; }
-.ped-shape { fill: var(--card); stroke: var(--text); stroke-width: 2; }
-.ped-shape.filled { fill: var(--text); }
-.ped-person.link .ped-shape { stroke: var(--info); }
-.ped-person.link:hover .ped-shape, .ped-person.link:focus .ped-shape { stroke-width: 4; }
-.ped-name { fill: var(--text); font: 13px var(--sans); }
-.ped-person.link .ped-name { fill: var(--info); text-decoration: underline; }
-.ped-flag { fill: var(--attn); font: 700 12px var(--sans); }
-.pedigree-figure figcaption { font-size: 13px; margin-top: var(--s2); }
-.pedigree-image summary { cursor: pointer; color: var(--info); font-size: 13px; }
-img.pedigree, img.segments { max-width: 100%; height: auto; display: block; margin-top: var(--s2); border-radius: 4px; }
+.ped-lines line { stroke: var(--ink-3); stroke-width: 1.5; }
+.ped-shape { fill: var(--paper-2); stroke: var(--ink-2); stroke-width: 2; }
+.ped-shape.filled { fill: rgba(200, 171, 120, .18); }
+.ped-person.link .ped-shape { stroke: var(--brass); }
+.ped-person.link:hover .ped-shape, .ped-person.link:focus .ped-shape { stroke-width: 3.5; }
+.ped-name { fill: var(--ink-2); font: 13px var(--sans); }
+.ped-person.link .ped-name { fill: var(--ink); text-decoration: underline; }
+.ped-flag { fill: var(--rev); font: 700 12px var(--sans); }
+.pedigree-figure figcaption { font-size: 12.5px; margin-top: 8px; }
+.pedigree-image summary { cursor: pointer; color: var(--ink-2); font-size: 12.5px; }
+img.pedigree, img.segments { max-width: 100%; height: auto; display: block; margin-top: 8px; border-radius: 4px; }
 .members .people { grid-template-columns: 1fr; }
-.analyses { margin: var(--s3) 0 0; color: var(--dim); font-size: 14px; }
-.analyses .label { color: var(--text); }
-.plan-item { color: var(--text); }
-.plan-item.d-skipped, .plan-item.d-waiting { color: var(--dim); }
-.couple-line { max-width: 75ch; }
-.couples .caveat-lead { font-size: 13px; color: var(--dim); max-width: 75ch; }
-details[data-child] { border-top: 1px solid var(--rule); padding: var(--s2) 0; }
-details[data-child] summary { cursor: pointer; }
+.analyses { margin: 12px 0 0; color: var(--ink-3); font-size: 13.5px; }
+.analyses .label { color: var(--ink); }
+.plan-item { color: var(--ink-2); }
+.plan-item.d-skipped, .plan-item.d-waiting { color: var(--ink-3); }
+.couple-line { max-width: 75ch; font: 18px/1.55 var(--serif); color: var(--ink-2); }
+.couples .caveat-lead { font-size: 13px; color: var(--ink-3); max-width: 75ch; }
+.kids4 { display: flex; gap: 18px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
+.grid4 { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; }
+.grid4 span { width: 30px; height: 30px; border-radius: 5px; border: 1.5px solid var(--car); }
+.grid4 span.aff { background: var(--car); }
+.grid4 span.non { border-color: var(--hair-2); }
+.kids4 .kt { font-size: 13.5px; color: var(--ink-2); }
+.kids4 .kt b { color: var(--ink); font-weight: 600; }
+details[data-child] { border-top: 1px solid var(--hair); padding: 12px 0; }
+details[data-child] summary { cursor: pointer; font: 19px var(--serif); }
+details[data-child] h3 { font: 600 10.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 8px; }
+.rel-grid-wrap { overflow-x: auto; }
+table.rel-grid { border-collapse: separate; border-spacing: 4px; font-size: 13px; }
+table.rel-grid th { color: var(--ink-3); font-weight: 600; text-align: left; padding: 2px 6px; white-space: nowrap; }
+table.rel-grid td { background: var(--paper); border: 1px solid var(--hair-2); border-radius: 6px; padding: 7px 9px; vertical-align: top; min-width: 11ch; }
+table.rel-grid td span { display: block; }
+table.rel-grid td .main { color: var(--ink); font-weight: 600; }
+table.rel-grid td .sub { color: var(--ink-3); font-size: 12px; }
+table.rel-grid td.self, table.rel-grid td.none { background: transparent; border-style: dashed; color: var(--ink-3); text-align: center; }
+table.rel-grid td.flag { border-color: var(--rev); border-left-width: 3px; }
+table.rel-grid td .chip { margin-top: 4px; white-space: normal; display: inline-flex; }
+ul.rel-pairs { display: none; list-style: none; margin: 0; padding: 0; }
+ul.rel-pairs li { padding: 7px 0; border-bottom: 1px solid var(--hair); }
+ul.rel-pairs li.flag { border-left: 3px solid var(--rev); padding-left: 8px; }
+ul.rel-pairs .pair { font-weight: 600; }
+ul.rel-pairs .chip { white-space: normal; }
+.legend-line { font-size: 12.5px; margin: 8px 0; }
+.painting { margin: 0 0 14px; }
+.paint-grid { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 3px 6px; align-items: center; }
+.paint-chr { color: var(--ink-3); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
+.paint-tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; }
+.paint-track { position: relative; display: block; height: 7px; width: var(--len); border-radius: 4px; background: rgba(255, 255, 255, .07); overflow: hidden; }
+.paint-seg { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--w); }
+.anc1 { background: var(--anc1); } .anc2 { background: var(--anc2); } .anc3 { background: var(--anc3); }
+.anc4 { background: var(--anc4); } .anc5 { background: var(--anc5); }
+.paint-seg.other, .paint-swatch.other { background-image: repeating-linear-gradient(45deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 4px); }
+.paint-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12.5px; margin-top: 8px; }
+.paint-key { display: inline-flex; gap: 6px; align-items: center; }
+.paint-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
+.side-by-side table.rows td:first-child { color: var(--ink-3); font-size: 13px; }
+.side-by-side table.rows td:nth-child(2) { font-family: var(--mono); font-size: 13px; }
+
+/* --- footer --- */
+.colophon { border-top: 1px solid var(--hair); margin-top: 60px; }
+.colophon-in { max-width: 1320px; margin: 0 auto; padding: 26px 40px 40px; display: flex; gap: 40px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); }
+.colophon-in .wordmark { font-size: 17px; color: var(--ink-2); }
+.colophon-in .right { margin-left: auto; }
 
 /* --- login --- */
 body.login main { display: flex; justify-content: center; padding-top: 12vh; }
-body.login form { width: 320px; display: flex; flex-direction: column; gap: 8px; }
-body.login h1 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin: 0 0 4px; }
-body.login .msg { color: var(--attn); min-height: 1em; margin: 0; }
-input[type=password] { font: inherit; background: var(--card); color: var(--text); border: 1px solid var(--rule); border-radius: 6px; padding: 8px; }
+body.login form { width: 320px; display: flex; flex-direction: column; gap: 10px; }
+body.login h1 { font-family: var(--serif); font-size: 30px; margin: 0 0 4px; }
+body.login .msg { color: var(--rev); min-height: 1em; margin: 0; }
+input[type=password] { font: inherit; background: var(--paper); color: var(--ink); border: 1px solid var(--hair-2); border-radius: 7px; padding: 9px; }
 
-/* --- narrow screens: one column, the rail becomes a row of tabs that scrolls sideways --- */
+/* --- the phone tab bar (a person's report) --- */
+.tabbar { display: none; }
+
+/* --- narrow screens: one column; on a phone a tab bar at the bottom --- */
+@media (max-width: 1100px) {
+  .cover, .jlayout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
+  .cover > div:first-child:empty { display: none; }
+  .toc { display: none; }
+  .runhero, .homehero, .famcover { grid-template-columns: minmax(0, 1fr); gap: 32px; }
+  .writing-card { grid-template-columns: minmax(0, 1fr); }
+  .writing-card > div + div { border-left: 0; border-top: 1px solid var(--hair); }
+  .family-row { grid-template-columns: minmax(0, 1fr); }
+  .family-row > .fam-side { border-right: 0; }
+}
 @media (max-width: 900px) {
-  .layout { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s3) var(--s6); gap: var(--s2); }
-  .rail { position: sticky; top: 52px; z-index: 10; flex-direction: row; overflow-x: auto; gap: 4px; padding: var(--s2) 0;
-    background: var(--bg); scrollbar-width: none; }
-  .rail [role=tab] { flex: none; border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; padding: 6px 10px; }
-  .rail [role=tab][aria-selected=true] { border-bottom-color: var(--info); }
-  .rail [data-tab=leaves] { margin-top: 0; }
-  .progress-grid, .family-top, .family-grid { grid-template-columns: minmax(0, 1fr); }
-  .person-head { padding: var(--s4) var(--s3) var(--s2); }
-  .person-head h1 { font-size: 24px; }
-  .top { padding: 8px var(--s3); gap: var(--s3); }
+  .row, .cover-main, .runsec .progress-grid, .family-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
+  .wrap, .home, .family, .mast-in, .colophon-in, .replay { padding-left: 18px; padding-right: 18px; }
+  .mast-in { gap: 14px; height: 52px; }
   .links #home-link { display: none; }
-  .home, .family { padding: var(--s4) var(--s3) var(--s6); }
-  .card { padding: var(--s3) var(--s4); }
-  .result.attn { padding-left: calc(var(--s4) - 3px); }
+  .actions { flex-direction: row; flex-wrap: wrap; padding-top: 0; }
+  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ledger a { padding-left: 0 !important; border-right: 0; border-bottom: 1px solid var(--hair); }
 }
 @media (max-width: 600px) {
-  .facts { grid-template-columns: minmax(0, 1fr); }
+  body.page-person { padding-bottom: 68px; }
+  .h-display { font-size: 44px; }
+  .homehero .h-display { font-size: 38px; }
+  .lede { font-size: 19px; }
+  .dropcap::first-letter { font-size: 58px; padding-right: 6px; }
+  .trustline { flex-direction: column; align-items: flex-start; gap: 6px; }
+  .trustline .sep { display: none; }
+  section.sec { padding-top: 36px; margin-top: 36px; }
   .search-slot { width: auto; flex: 1; min-width: 0; }
   .crumbs { display: none; }
+  .nf > li > details > summary, .nf .nfrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+  .cols2 { columns: 1; }
+  .timing { grid-template-columns: repeat(2, 1fr); }
+  .bignum { font-size: 72px; }
   table.rows thead { display: none; }
   table.rows, table.rows tbody, table.rows tr, table.rows td { display: block; width: 100%; }
-  table.rows tr { padding: 6px 0; border-bottom: 1px solid var(--rule); }
-  table.rows tbody tr:nth-child(even) td { background: none; }
-  table.rows td { padding: 1px 0; }
-  table.rows td::before { content: attr(data-label) ": "; color: var(--dim); font-size: 13px; }
-  .look-list a { flex-direction: column; gap: 0; }
-  .people { grid-template-columns: minmax(0, 1fr); }
+  table.rows tr { padding: 6px 0; border-bottom: 1px solid var(--hair); }
+  table.rows td { padding: 1px 0; border: 0; }
+  table.rows td::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 12.5px; }
+  .runlog thead { display: none; }
+  .runlog, .runlog tbody, .runlog tr, .runlog td { display: block; width: 100%; }
+  .runlog tr { padding: 8px 0; border-bottom: 1px solid var(--hair); }
+  .runlog td { padding: 1px 0; border: 0; text-align: left !important; }
+  .people, .fam-people { grid-template-columns: minmax(0, 1fr); }
+  .rel-grid-wrap { display: none; }
+  ul.rel-pairs { display: block; }
+  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: 64px;
+    background: rgba(14, 15, 16, .96); border-top: 1px solid var(--hair-2); backdrop-filter: blur(8px); }
+  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-decoration: none; color: var(--ink-3); font-size: 10.5px; }
+  .tabbar a[aria-current=true] { color: var(--ink); }
+  .tabbar .lv { font-size: 0; gap: 0; }
+  .tabbar .ti { font: italic 15px var(--serif); color: var(--brass); }
 }
 @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
diff --git a/assets/live/live.js b/assets/live/live.js
index efadf6fd..a019eaaa 100644
--- a/assets/live/live.js
+++ b/assets/live/live.js
@@ -1,10 +1,10 @@
 // live.js: the run's progress on a person's page (assets/live/index.html, served by bin/owngenome_live.py):
-// the step map, the step detail, "Found so far", the event stream and the replay, shown in the
-// Progress tab. One data source feeds the page: in live mode state.json plus the run's event stream;
+// the step timeline (one line per step), the step detail, the wire of what each step found, the event
+// stream and the replay, in the report's "How the run went" section. One data source feeds the page: in live mode state.json plus the run's event stream;
 // with <html data-mode="replay"> a frames.json of recorded states played on a timer. person.js draws
 // the results from the same states. No outside request, no inline script, no eval. Plugins call
 // window.PGP.register({name, onState, onEvent, panel, slot}); a panel goes into the element whose id
-// is slot when the page has one (the search box in the header), else into the Progress tab.
+// is slot when the page has one (the search box in the header), else beside the step timeline.
 (function () {
   'use strict';
   var root = document.documentElement;
@@ -25,9 +25,8 @@
     'not planned': ['s-notplanned', 'not planned']
   };
   var SVGNS = 'http://www.w3.org/2000/svg';
-  var BOX_W = 170, BOX_H = 34, GAP_X = 36, GAP_Y = 10, PAD = 8;
   var plugins = [];
-  var last = null, selected = null, layoutKey = null, boxes = {};
+  var last = null, selected = null, boxes = {};
 
   function el(tag, attrs, text) {
     var e = document.createElement(tag);
@@ -47,66 +46,92 @@
     return v.length ? v : steps;
   }
 
-  // Columns by depth: a step sits one column right of the deepest step it reads from.
-  function layout(steps) {
-    var by = {}, depth = {};
-    steps.forEach(function (s) { by[s.step] = s; });
-    function d(s, seen) {
-      if (depth[s.step] !== undefined) { return depth[s.step]; }
-      if (seen[s.step]) { return 0; }
-      seen[s.step] = true;
-      var m = -1;
-      (s.upstream || []).forEach(function (u) { if (by[u]) { m = Math.max(m, d(by[u], seen)); } });
-      depth[s.step] = m + 1;
-      return depth[s.step];
-    }
-    steps.forEach(function (s) { d(s, {}); });
-    var rows = {}, pos = {};
+  // The run as a timeline, one line per step (the Journal's step timeline): a step's bar runs from its
+  // start to its end; a running step's bar ends at now, with its usual hours drawn as an outline after
+  // it; a step still waiting has no bar yet. Steps are ordered by start, the waiting ones last, in the
+  // order assets/steps.tsv plans them. Each line is a button (g.box) that opens the step's detail.
+  function ms(t) { var v = t ? Date.parse(t) : NaN; return isFinite(v) ? v : null; }
+  function clock(v) { var d = new Date(v); return ('0' + d.getUTCHours()).slice(-2) + ':' + ('0' + d.getUTCMinutes()).slice(-2); }
+  function timeline(steps, nowText, running) {
+    // A finished run ends at its last step, not at the moment the page was asked for.
+    var now = running ? ms(nowText) : null;
+    var known = steps.map(function (s) { return ms(s.started_utc); }).filter(function (v) { return v !== null; });
+    var t0 = known.length ? Math.min.apply(null, known) : null;
+    var ends = steps.map(function (s) { return ms(s.ended_utc) || (s.state === 'running' ? now : null); })
+      .filter(function (v) { return v !== null; });
+    var t1 = Math.max.apply(null, ends.concat(known).concat(now !== null ? [now] : []).concat(t0 !== null ? [t0 + 3600e3] : [0]));
+    var order = steps.map(function (s, i) { return { s: s, i: i, t: ms(s.started_utc) }; });
+    order.sort(function (a, b) {
+      if (a.t === null && b.t === null) { return a.i - b.i; }
+      if (a.t === null) { return 1; } if (b.t === null) { return -1; }
+      return a.t - b.t || a.i - b.i;
+    });
+    // Leave room after now for the usual hours of what still runs.
+    var tail = 0;
     steps.forEach(function (s) {
-      var c = depth[s.step];
-      rows[c] = (rows[c] || 0) + 1;
-      pos[s.step] = { x: PAD + c * (BOX_W + GAP_X), y: PAD + (rows[c] - 1) * (BOX_H + GAP_Y) };
+      if (s.state === 'running' && s.hours && ms(s.started_utc) !== null) { tail = Math.max(tail, ms(s.started_utc) + s.hours * 3600e3 - t1); }
     });
-    var cols = Math.max.apply(null, Object.keys(rows).map(Number)) + 1;
-    var maxRows = Math.max.apply(null, Object.keys(rows).map(function (k) { return rows[k]; }));
-    return { pos: pos, w: 2 * PAD + cols * BOX_W + (cols - 1) * GAP_X, h: 2 * PAD + maxRows * BOX_H + (maxRows - 1) * GAP_Y };
+    return { order: order.map(function (o) { return o.s; }), t0: t0, t1: t1 + Math.max(0, Math.min(tail, (t1 - (t0 || t1)) * 0.6)), now: now };
   }
+  var LABEL_W = 190, ROW_H = 16, TOP = 8, AXIS_H = 26;
 
   function drawMap(steps) {
-    var key = steps.map(function (s) { return s.step; }).join(',');
     var map = document.getElementById('map');
-    if (key !== layoutKey) {
-      layoutKey = key;
-      boxes = {};
-      var L = layout(steps);
-      var s = svg('svg', { viewBox: '0 0 ' + L.w + ' ' + L.h, width: L.w, height: L.h, role: 'group', 'aria-label': 'Steps of the run' });
-      var edges = svg('g', { 'class': 'edges' });
-      s.appendChild(edges);
-      steps.forEach(function (st) {
-        (st.upstream || []).forEach(function (u) {
-          var a = L.pos[u], b = L.pos[st.step];
-          if (!a) { return; }
-          edges.appendChild(svg('line', { x1: a.x + BOX_W, y1: a.y + BOX_H / 2, x2: b.x, y2: b.y + BOX_H / 2 }));
-        });
-      });
-      steps.forEach(function (st) {
-        var p = L.pos[st.step];
-        var g = svg('g', { 'class': 'box', 'data-step': st.step, tabindex: '0', role: 'button' });
-        g.appendChild(svg('rect', { x: p.x, y: p.y, width: BOX_W, height: BOX_H, rx: 5 }));
-        var t = svg('text', { x: p.x + 8, y: p.y + BOX_H / 2 + 4 });
-        var label = st.step + ' ' + st.label;
-        t.textContent = label.length > 24 ? label.slice(0, 23) + '…' : label;
-        g.appendChild(t);
-        var title = svg('title', {});
-        g.appendChild(title);
-        g.addEventListener('click', function () { selected = st.step; detail(); });
-        g.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { selected = st.step; detail(); } });
-        s.appendChild(g);
-        boxes[st.step] = g;
-      });
-      map.textContent = '';
-      map.appendChild(s);
+    var T = timeline(steps, last && (last.generated_utc || null), !!(last && last.run && last.run.state === 'running'));
+    var h = TOP + T.order.length * ROW_H + AXIS_H;
+    // The chart takes the width the page gives it (at least 300 px of time), so no step sits off screen.
+    var CHART_W = Math.max(300, (map.clientWidth || 962) - LABEL_W - 12);
+    var W = LABEL_W + CHART_W + 12;
+    var s = svg('svg', { viewBox: '0 0 ' + W + ' ' + h, width: W, height: h, role: 'group', 'aria-label': 'Steps of the run' });
+    var span = T.t0 === null ? 1 : Math.max(T.t1 - T.t0, 60e3);
+    function x(v) { return LABEL_W + 8 + (T.t0 === null ? 0 : (v - T.t0) / span * (CHART_W - 8)); }
+    var axis = svg('g', { 'class': 'axis' });
+    if (T.t0 !== null) {
+      var stepH = span > 36 * 3600e3 ? 6 : span > 12 * 3600e3 ? 3 : span > 4 * 3600e3 ? 1 : 0.5;
+      for (var t = Math.ceil(T.t0 / (stepH * 3600e3)) * stepH * 3600e3; t <= T.t1; t += stepH * 3600e3) {
+        axis.appendChild(svg('line', { x1: x(t), x2: x(t), y1: TOP - 4, y2: h - AXIS_H + 2 }));
+        // No hour label under the "now" label of a running run.
+        if (T.now !== null && last && last.run && last.run.state === 'running' && Math.abs(x(t) - x(T.now)) < 56) { continue; }
+        var lab = svg('text', { x: x(t), y: h - 8, 'text-anchor': 'middle' });
+        lab.textContent = clock(t);
+        axis.appendChild(lab);
+      }
+    }
+    s.appendChild(axis);
+    boxes = {};
+    T.order.forEach(function (st, i) {
+      var y = TOP + i * ROW_H;
+      var g = svg('g', { 'class': 'box', 'data-step': st.step, tabindex: '0', role: 'button' });
+      g.appendChild(svg('rect', { 'class': 'hit', x: 0, y: y, width: W, height: ROW_H }));
+      var t = svg('text', { 'class': 'lbl', x: LABEL_W, y: y + ROW_H - 4, 'text-anchor': 'end' });
+      var label = st.label || st.step;
+      t.textContent = label.length > 30 ? label.slice(0, 29) + '…' : label;
+      g.appendChild(t);
+      var a = ms(st.started_utc), b = ms(st.ended_utc) || (st.state === 'running' ? T.now : null);
+      if (a !== null && T.t0 !== null) {
+        var x1 = x(a), x2 = Math.max(x(b !== null ? b : a), x1 + 3);
+        g.appendChild(svg('rect', { 'class': 'bar', x: x1, y: y + 4, width: x2 - x1, height: ROW_H - 8, rx: 1.5 }));
+        if (st.state === 'running' && st.hours) {
+          var u = x(a + st.hours * 3600e3);
+          if (u > x2) { g.appendChild(svg('rect', { 'class': 'usual', x: x2, y: y + 4.5, width: Math.min(u, W - 4) - x2, height: ROW_H - 9, rx: 1.5 })); }
+        }
+      } else {
+        g.appendChild(svg('rect', { 'class': 'bar', x: LABEL_W + 8, y: y + 5, width: 0, height: 0 }));
+      }
+      g.appendChild(svg('title', {}));
+      g.addEventListener('click', function () { selected = st.step; detail(); });
+      g.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { selected = st.step; detail(); } });
+      s.appendChild(g);
+      boxes[st.step] = g;
+    });
+    if (T.now !== null && T.t0 !== null && last && last.run && last.run.state === 'running') {
+      s.appendChild(svg('line', { 'class': 'nowline', x1: x(T.now), x2: x(T.now), y1: TOP - 4, y2: h - AXIS_H + 2 }));
+      var nl = svg('text', { 'class': 'nowlab', x: x(T.now), y: h - 8, 'text-anchor': 'middle' });
+      nl.textContent = 'now ' + clock(T.now);
+      s.appendChild(nl);
     }
+    map.textContent = '';
+    map.appendChild(s);
     steps.forEach(function (st) { paint(st.step, st.state, st.label); });
   }
 
@@ -169,7 +194,8 @@
         box.appendChild(el('a', { href: 'report.html#' + encodeURIComponent(anchor) }, 'Open in the report: ' + k));
       }
     });
-    drawMap(shown(last.steps));
+    // Repaint, never redraw: the focused step keeps its focus and the plugins' marks stay on.
+    shown(last.steps).forEach(function (s) { paint(s.step, s.state, s.label); });
   }
 
   function found(state) {
diff --git a/assets/live/login.html b/assets/live/login.html
index 2b58c7da..24f4b067 100644
--- a/assets/live/login.html
+++ b/assets/live/login.html
@@ -9,7 +9,7 @@
 <body class="login">
 <main>
   <form method="post" action="/login" class="card">
-    <h1>OwnGenome</h1>
+    <h1 class="wordmark">Own<i>Genome</i></h1>
     <p class="msg">{{message}}</p>
     <label for="password">Password</label>
     <input type="password" id="password" name="password" autocomplete="current-password" required autofocus>
diff --git a/assets/live/person.js b/assets/live/person.js
index 6433f7d1..ec019b3c 100644
--- a/assets/live/person.js
+++ b/assets/live/person.js
@@ -1,24 +1,28 @@
-// person.js: a person's results on their page (assets/live/index.html), from results.json
-// (bin/live_results.py, served by bin/owngenome_live_results.py) and the run's states (live.js).
-// The rail holds the report's seven chapter questions, "Look first" (every card worth a look) and
-// "What this leaves out"; Progress is live.js's step map. The tab lives in the URL fragment only
-// (#q/<chapter>, #s/<section>, #progress), which the browser never sends, so no tab or search reaches
-// a server log. A card shows its results once one of its steps is done in the current state, so live
-// and replay draw the same way and a replay reveals the results as the run goes.
+// person.js: a person's genome as a report, the Journal design (docs/design/journal/), on their page
+// (assets/live/index.html), from results.json (bin/live_results.py, served by
+// bin/owngenome_live_results.py) and the run's states (live.js). The page reads top to bottom: the lead
+// paragraph built from the findings, the counts by level, the chromosome map of the findings, then ten
+// numbered sections: 1 To act on, 2 Medicines, 3 For your family, 4 Worth a look, 5 Can I trust this?,
+// 6 Origins, 7 Traits and scores, 8 Assessed, no finding, 9 What it cannot see, 10 Sources and files.
+// A run still going is the same report being written: each section carries its stamp (written, being
+// written, waiting) and the step timeline sits on top. Every card of results.json is on the page under
+// its section; a card shows its results once one of its steps is done in the current state, so live
+// and replay draw the same way. Links inside the page live in the fragment (#s/<card>, #s3, #f/<id>,
+// #progress), which the browser never sends. Silence is never an all-clear: a section with no finding
+// says what its steps looked at and what they do not see.
 (function () {
   'use strict';
   if (!window.PGP || !window.PGPUI) { return; }
   var U = window.PGPUI, el = U.el, add = U.add;
   var root = document.documentElement;
   var replay = root.getAttribute('data-mode') === 'replay';
-  var results = null, state = null, fetchedFor = null, current = null, chosen = false, drawnKey = null;
-  var rail = document.getElementById('rail');
+  var results = null, state = null, family = null, familyFor = null, fetchedFor = null, drawnKey = null;
+  // 'none': in no family; 'pending' or 'failed': in one whose roles are not known (yet); 'known'.
+  var familyStatus = 'none';
+  var shown = {};  // veiled findings the reader opened, by id
   var panel = document.getElementById('results');
-  var progress = document.getElementById('progress');
-  var SHORT = { quality: 'Trust', clinical: 'Doctor', carrier: 'Child', medicines: 'Medicines', ancestry: 'Ancestors',
-    traits: 'Traits', other: 'Other' };
-  var LOOK_EMPTY = 'Nothing on this list. That is information, not a clean bill: each chapter’s caveats and ' +
-    '“What this leaves out” still apply.';
+  var rail = document.getElementById('rail');
+  var NOT_ALL_CLEAR = 'No finding in what these steps assessed.';
 
   function stepsBy() {
     var by = {};
@@ -29,144 +33,321 @@
     return ((state && state.steps) || []).filter(function (s) { return s.state === 'done'; })
       .map(function (s) { return s.step; }).join(',');
   }
-  function anyDone() { return doneSet() !== ''; }
-  // What a card can show at this moment: 'show', 'waiting' (a step still to come), 'notrun' (none planned)
-  // or 'empty' (its steps ended and wrote nothing for it).
+  function running() { return !!(state && state.run && state.run.state === 'running'); }
+  // What a card can show at this moment: 'show', 'waiting' (a step still to come), 'running' (one of its
+  // steps runs now), 'failed', 'notrun' (none planned) or 'empty' (its steps ended and wrote nothing).
   function gate(c) {
     var by = stepsBy(), steps = c.steps || [];
     var known = steps.filter(function (s) { return by[s]; });
     if (known.some(function (s) { return by[s].state === 'done'; })) { return c.state === 'missing' ? 'empty' : 'show'; }
-    if (known.some(function (s) { return ['waiting', 'running'].indexOf(by[s].state) >= 0; })) { return 'waiting'; }
+    if (known.some(function (s) { return by[s].state === 'running'; })) { return 'running'; }
+    if (known.some(function (s) { return by[s].state === 'waiting'; })) { return 'waiting'; }
     if (known.some(function (s) { return by[s].state === 'failed'; })) { return 'failed'; }
     if (!known.length && c.state !== 'missing' && !replay) { return 'show'; }
     return 'notrun';
   }
-  function waitingText(c) {
+  function pending(g) { return g === 'waiting' || g === 'running'; }
+  function stepWords(c) {
     var by = stepsBy();
     var s = (c.steps || []).filter(function (x) { return by[x] && by[x].state !== 'done'; })[0] || (c.steps || [])[0];
-    return 'Waiting for step ' + s + (by[s] ? ' (' + by[s].label + ')' : '') + '.';
+    return s ? (by[s] ? by[s].label : 'step ' + s) : 'its step';
   }
   function cards() {
     var out = [];
-    ((results && results.chapters) || []).forEach(function (ch) {
-      ch.sections.forEach(function (c) { out.push({ ch: ch, c: c }); });
-    });
+    ((results && results.chapters) || []).forEach(function (ch) { ch.sections.forEach(function (c) { out.push(c); }); });
     return out;
   }
+  function cardById(id) { return cards().filter(function (c) { return c.id === id; })[0]; }
+  function findingById(id) { return ((results && results.findings) || []).filter(function (f) { return f.id === id; })[0]; }
+  function findingsNow() {
+    return ((results && results.findings) || []).filter(function (f) { var c = cardById(f.card); return c && gate(c) === 'show'; });
+  }
+  function sectionsList() { return (results && results.journal) || []; }
   function attentionNow(c) { return c.attention && gate(c) === 'show'; }
+  function personName() { return (results && results.person && results.person.sample) || root.getAttribute('data-run') || ''; }
 
-  // --- the route --------------------------------------------------------------------------------
-  function parse() {
-    var h;
-    try { h = decodeURIComponent((window.location.hash || '').slice(1)); } catch (e) { return null; }  // a broken fragment
-    if (h === 'progress') { return { tab: 'progress' }; }
-    if (h.indexOf('q/') === 0) { return { tab: h.slice(2) }; }
-    if (h.indexOf('s/') === 0) { return { tab: 'section', id: h.slice(2) }; }
-    if (h && cards().some(function (x) { return x.c.id === h; })) { return { tab: 'section', id: h }; }  // an old #clinvar link
-    return null;
-  }
-  function chapterOf(id) {
-    var hit = cards().filter(function (x) { return x.c.id === id; })[0];
-    return hit ? hit.ch.key : null;
-  }
-  function defaultTab() { return results && results.chapters && results.chapters.length && anyDone() ? 'look' : 'progress'; }
-
-  function route(focus) {
-    var r = parse() || { tab: defaultTab() };
-    var tab = r.tab === 'section' ? (chapterOf(r.id) || 'look') : r.tab;
-    var valid = ['progress', 'look', 'leaves'].concat(((results && results.chapters) || []).map(function (c) { return c.key; }));
-    if (valid.indexOf(tab) < 0) { tab = defaultTab(); }
-    show(tab);
-    Array.prototype.forEach.call(rail.querySelectorAll('[role=tab]'), function (t) {
-      var on = t.getAttribute('data-tab') === tab;
-      t.setAttribute('aria-selected', on ? 'true' : 'false');
-      t.tabIndex = on ? 0 : -1;
+  // --- the family this person is in: family.json of the first family the family plugin names -------
+  function familyUrl() {
+    var fam = state && state.plugins && state.plugins.family;
+    var f = fam && fam.kind === 'member' && (fam.families || [])[0];
+    return f ? f : null;
+  }
+  function loadFamily() {
+    var f = familyUrl();
+    var key = f ? f.url : null;
+    if (key === familyFor) { return; }
+    familyFor = key;
+    if (!f) { family = null; familyStatus = 'none'; return; }
+    familyStatus = 'pending';
+    U.getJSON(f.url + 'family.json').then(function (d) {
+      if (familyFor !== key) { return; }
+      family = d && d.state ? { name: f.name, url: f.url, data: d } : null;
+      familyStatus = family ? 'known' : 'failed';
+      redraw(true);
+    }).catch(function () {
+      if (familyFor !== key) { return; }  // a late answer for a family this page no longer shows
+      family = null;
+      familyStatus = 'failed';
+      redraw(true);
     });
-    if (r.tab === 'section') {
-      var card = document.getElementById('card-' + r.id);
-      if (card) {
-        var d = card.querySelector('details.caveat-full');
-        if (d && focus !== false) { card.classList.add('target'); }
-        card.scrollIntoView({ block: 'start' });
-        card.focus({ preventScroll: true });
-      }
-    } else if (window.location.hash === '#progress') {
-      // #progress is also the section's id, so the browser jumps to it: keep the head and the rail in view.
-      setTimeout(function () { window.scrollTo(0, 0); }, 0);
+  }
+  function me() {
+    var ms = (family && family.data.state && family.data.state.members) || [];
+    return ms.filter(function (m) { return m.sample === personName(); })[0] || null;
+  }
+  // A child of the family: a member whose father or mother is listed. Results to act on about a child
+  // stay closed until someone opens them on purpose.
+  function isChild() { var m = me(); return !!(m && (m.father || m.mother)); }
+  // Results to act on stay closed for a child, and for anyone in a family whose roles are not known yet:
+  // the page cannot tell a child apart until family.json has answered.
+  function closedPage() { return isChild() || familyStatus === 'pending' || familyStatus === 'failed'; }
+  function memberUrl(s) {
+    var r = family && family.data.runs && family.data.runs[s];
+    return r && r.url ? r.url : null;
+  }
+  function role() {
+    var m = me();
+    if (!m) { return null; }
+    var ms = family.data.state.members;
+    var kids = ms.filter(function (x) { return x.father === m.sample || x.mother === m.sample; });
+    var bits = [];
+    if (m.father || m.mother) {
+      bits.push(({ male: 'son', female: 'daughter' }[m.sex] || 'child') + ' of ' + [m.father, m.mother].filter(Boolean).join(' and '));
     }
+    if (kids.length) { bits.push(({ male: 'father', female: 'mother' }[m.sex] || 'parent') + ' of ' + kids.map(function (k) { return k.sample; }).join(', ')); }
+    if (m.partner) { bits.push('partner of ' + m.partner); }
+    return bits.join(', ');
   }
-  function go(hash) {
-    if (window.location.hash === hash) { route(); } else { window.location.hash = hash; }
+
+  // --- widgets: a card's numbers drawn ---------------------------------------------------------------
+  // HTML placed in percent of a track (custom properties, never a style attribute), so the text stays
+  // at its size on a phone. Every mark is focusable and says itself in words; colour is never alone.
+  function num(v) { var n = parseFloat(v); return isFinite(n) ? n : null; }
+  function pct(v, max) { return Math.max(0, Math.min(100, 100 * v / max)); }
+  function nice(v) { var step = v > 200 ? 50 : 10; return Math.max(step, Math.ceil(v / step) * step); }
+  function place(e, from, to, max) {
+    e.style.setProperty('--a', pct(from, max).toFixed(2) + '%');
+    if (to !== undefined) { e.style.setProperty('--w', Math.max(0.6, pct(to, max) - pct(from, max)).toFixed(2) + '%'); }
+    return e;
+  }
+  function mark(cls, v, max, label) {
+    var m = el('span', { 'class': 'w-tick ' + (cls || ''), tabindex: '0', role: 'img', 'aria-label': label, title: label });
+    return place(m, v, undefined, max);
+  }
+  function trackOf(max, parts) {
+    var t = el('div', { 'class': 'w-track' });
+    parts.forEach(function (p) { if (p) { add(t, p); } });
+    return t;
+  }
+  function band(cls, from, to, max, label) {
+    return place(el('span', { 'class': 'w-band ' + cls, title: label || '' }), from, to, max);
+  }
+  function whisker(lo, hi, max, label) {
+    return place(el('span', { 'class': 'w-ci', title: label || '' }), lo, hi, max);
+  }
+  function wrow(head, track, legend, cls) {
+    var r = el('div', { 'class': 'w-row ' + (cls || '') });
+    add(r, head, track);
+    if (legend) { add(r, el('p', { 'class': 'w-legend' }, legend)); }
+    return r;
+  }
+  function whead(name, value, extra) {
+    var h = el('p', { 'class': 'w-head' });
+    add(h, el('span', { 'class': /^[A-Z0-9-]+( \(|$)/.test(name) ? 'w-name' : 'w-label' }, name), ' ', el('span', { 'class': 'w-val' }, value));
+    if (extra) { add(h, ' ', el('span', { 'class': 'w-extra' }, extra)); }
+    return h;
   }
-  window.addEventListener('hashchange', function () { chosen = true; route(); });
 
-  // --- the rail ---------------------------------------------------------------------------------
-  function drawRail() {
-    rail.textContent = '';
-    function tab(key, label, n, hash) {
-      var a = el('a', { role: 'tab', href: hash, id: 'tab-' + key, 'data-tab': key, 'aria-controls': key === 'progress' ? 'progress' : 'results' });
-      add(a, el('span', { 'class': 'tab-label' }, label));
-      if (n) { add(a, el('span', { 'class': 'count', 'aria-label': n + ' worth a look' }, String(n))); }
-      add(rail, a);
-      return a;
-    }
-    if (results && results.chapters && results.chapters.length) {
-      var all = cards().filter(function (x) { return attentionNow(x.c); }).length;
-      tab('look', 'Look first', all, '#q/look');
-      results.chapters.forEach(function (ch) {
-        var n = ch.sections.filter(attentionNow).length;
-        var t = tab(ch.key, SHORT[ch.key] || ch.title, n, '#q/' + ch.key);
-        t.setAttribute('title', ch.question);
+  // Repeat expansions: each allele against Stranger's thresholds, its 95% interval as a whisker.
+  function strGauge(w) {
+    var box = el('div', { 'class': 'widget w-str', 'data-widget': 'str' });
+    (w.loci || []).forEach(function (l) {
+      var counts = String(l.repeat_count || '').split('/');
+      var sizing = String(l.allele_sizing || '').split('/');
+      var cis = String(l.ci || '').split('/');
+      var nmax = num(l.normal_max), pmin = num(l.pathologic_min);
+      var top = 0;
+      counts.forEach(function (c, i) {
+        var ci = (cis[i] || '').split('-');
+        top = Math.max(top, num(c) || 0, num(ci[1]) || 0);
       });
-      tab('leaves', 'Leaves out', 0, '#q/leaves');
+      var max = nice(Math.max(top * 1.15, (pmin || 0) * 1.3, (nmax || 0) * 1.6, 10));
+      var parts = [];
+      if (nmax !== null) { parts.push(band('w-normal', 0, nmax, max, 'Stranger’s "normal": up to ' + nmax)); }
+      if (pmin !== null) { parts.push(band('w-patho', pmin, max, max, 'pathologic from ' + pmin)); }
+      counts.forEach(function (c, i) {
+        var v = num(c);
+        if (v === null) { return; }
+        var ci = (cis[i] || '').split('-');
+        var lo = num(ci[0]), hi = num(ci[1]);
+        if (lo !== null && hi !== null && hi > lo) { parts.push(whisker(lo, hi, max, '95% interval ' + lo + ' to ' + hi)); }
+        var unsized = sizing[i] && ['sized', 'unknown'].indexOf(sizing[i]) < 0;
+        parts.push(mark(unsized ? 'w-low' : '', v, max, l.locus + ' allele ' + (i + 1) + ': ' + c + ' repeats' +
+          (lo !== null && hi !== null ? ', 95% interval ' + lo + ' to ' + hi : '') + (unsized ? ', not sized from short reads' : '')));
+      });
+      var st = l.status ? 'Stranger: "' + l.status + '"' : 'no Stranger status';
+      var legend = (nmax !== null || pmin !== null)
+        ? [nmax !== null ? '"normal" up to ' + nmax : '', pmin !== null ? 'pathologic from ' + pmin : '', 'scale 0 to ' + max]
+          .filter(Boolean).join(' · ')
+        : 'No Stranger thresholds for this locus. Scale 0 to ' + max + '.';
+      var flagged = l.status && l.status.split(',').some(function (x) { return x && x !== 'normal'; });
+      add(box, wrow(whead(l.locus, (l.repeat_count || '.') + ' repeats', st), trackOf(max, parts), legend, flagged ? 'w-attn' : ''));
+    });
+    add(box, el('p', { 'class': 'w-key dim' }, 'Tick: an allele’s repeat count; line: its 95% interval; hollow: not sized ' +
+      'from short reads. Shaded: Stranger’s "normal" band; hatched: its pathologic range.'));
+    return box;
+  }
+
+  // A count with its 95% interval on a scale from 0 (Lp(a)'s KIV-2 repeats).
+  function ciBar(w) {
+    var box = el('div', { 'class': 'widget w-cibar', 'data-widget': 'ci' });
+    var max = w.max || nice(w.high * 1.25);
+    var label = w.label + ': ' + w.value + ', 95% interval ' + w.low + ' to ' + w.high;
+    add(box, wrow(whead(w.label, w.value + ' ' + (w.unit || ''), '95% interval ' + w.low + ' to ' + w.high +
+      (w['class'] ? ' · class "' + w['class'] + '"' : '')),
+      trackOf(max, [whisker(w.low, w.high, max, '95% interval'), mark('', w.value, max, label)]),
+      'Scale 0 to ' + max + ' ' + (w.unit || '') + '. The line is the 95% interval of the estimate.'));
+    return box;
+  }
+
+  // CHIP: each call's VAF against the smallest VAF this depth can see.
+  function vafChart(w) {
+    var box = el('div', { 'class': 'widget w-vaf', 'data-widget': 'vaf' });
+    var max = w.max || 0.5;
+    var limits = (w.genes || []).map(function (g) { return g.limit; }).filter(function (x) { return typeof x === 'number'; });
+    var lo = limits.length ? Math.min.apply(null, limits) : null, hi = limits.length ? Math.max.apply(null, limits) : null;
+    var parts = [];
+    if (hi !== null) { parts.push(band('w-blind', 0, hi, max, 'below the detection limit at this depth')); }
+    (w.calls || []).forEach(function (c) {
+      parts.push(mark('w-call', c.vaf, max, c.gene + ' ' + (c.change || '') + ': VAF ' + c.vaf));
+    });
+    var head = whead('Variant allele fraction', (w.calls || []).length ? (w.calls.length + ' call' + (w.calls.length > 1 ? 's' : ''))
+      : 'no call above the limit');
+    var legend = (hi !== null ? 'Hatched: below the smallest VAF this depth can see (' + lo + (hi !== lo ? ' to ' + hi : '') +
+      ' across ' + limits.length + ' genes); a clone that small is not seen. ' : '') + 'Scale VAF 0 to ' + max + '.';
+    add(box, wrow(head, trackOf(max, parts), legend));
+    if ((w.calls || []).length) {
+      var ul = el('ul', { 'class': 'w-calls' });
+      w.calls.forEach(function (c) { add(ul, el('li', {}, c.gene + ' ' + (c.change || '') + ' at VAF ' + c.vaf)); });
+      add(box, ul);
     }
-    tab('progress', 'Progress', 0, '#progress');
+    if ((w.genes || []).length) {
+      var d = el('details', { 'class': 'w-fallback' });
+      add(d, el('summary', {}, 'Detection limit per gene'));
+      add(d, U.table({ columns: ['Gene', 'Mean depth', 'Smallest VAF seen', 'Status'],
+        rows: w.genes.map(function (g) { return [g.gene, g.depth === null ? '.' : String(g.depth), g.limit === null ? '.' : String(g.limit), g.status || '.']; }) }, 40));
+      add(box, d);
+    }
+    return box;
   }
-  U.tablist(rail, function (t) { go(t.getAttribute('href')); });
 
-  // --- a card -----------------------------------------------------------------------------------
-  function badge(text, cls, symbol) {
-    var b = el('span', { 'class': 'chip ' + cls });
-    if (symbol) { add(b, el('span', { 'class': 'sym', 'aria-hidden': 'true' }, symbol)); }
-    add(b, text);
-    return b;
+  // Copy numbers as dots, one per copy; a call that is not "called" is hollow and says so.
+  function copyDots(w) {
+    var box = el('div', { 'class': 'widget w-copies', 'data-widget': 'copies' });
+    var ul = el('ul', { 'class': 'w-copy-list' });
+    (w.genes || []).forEach(function (g) {
+      var low = g.status !== 'called';
+      var li = el('li', { 'class': low ? 'w-low' : '' });
+      add(li, el('span', { 'class': 'w-name' }, g.gene));
+      var dots = el('span', { 'class': 'w-dots', role: 'img', tabindex: '0',
+        'aria-label': g.gene + ': ' + (g.copies === null ? 'no copy number' : g.copies + ' copies') + (low ? ', ' + g.status : '') });
+      for (var i = 0; i < Math.min(g.copies || 0, 8); i++) { add(dots, el('span', { 'class': 'w-dot' })); }
+      if ((g.copies || 0) > 8) { add(dots, '+' + (g.copies - 8)); }
+      add(li, dots);
+      add(li, el('span', { 'class': 'w-val' }, g.copies === null ? 'not called' : g.copies + (g.copies === 1 ? ' copy' : ' copies')));
+      if (low) { add(li, el('span', { 'class': 'w-extra' }, 'low confidence: ' + g.status)); }
+      add(ul, li);
+    });
+    add(box, ul);
+    return box;
   }
-  function recheckBadges(c) {
+
+  // The Y haplogroup's path from the root of the tree to its placement.
+  function yPath(w) {
+    var box = el('div', { 'class': 'widget w-ypath', 'data-widget': 'ypath' });
+    add(box, el('p', { 'class': 'w-head' }, 'From the root to ' + (w.tip || 'the placement') + (w.tree ? ' on ' + w.tree : '')));
+    var ol = el('ol', { 'class': 'w-path' });
+    (w.path || []).forEach(function (p, i, all) {
+      var seen = (p.derived || 0) + (p.ancestral || 0) + (p.no_call || 0);
+      var li = el('li', { 'class': (i === all.length - 1 ? 'w-tip' : '') + (p.ancestral ? ' w-low' : ''), tabindex: '0',
+        'aria-label': 'Level ' + p.level + ', ' + p.branch + ': ' + p.derived + ' of ' + seen + ' markers derived' +
+          (p.ancestral ? ', ' + p.ancestral + ' ancestral' : '') });
+      add(li, el('span', { 'class': 'w-branch' }, p.branch));
+      add(li, el('span', { 'class': 'w-count' }, (p.derived === null ? '.' : p.derived) + ' of ' + seen + ' derived' +
+        (p.ancestral ? ' · ' + p.ancestral + ' ancestral' : '')));
+      add(ol, li);
+    });
+    add(box, ol);
+    return box;
+  }
+  var WIDGETS = { str: strGauge, ci: ciBar, vaf: vafChart, copies: copyDots, ypath: yPath };
+  function widget(w) {
+    var fn = w && WIDGETS[w.kind];
+    if (!fn) { return null; }
+    try { return fn(w); } catch (e) { return el('p', { 'class': 'dim' }, 'This drawing could not be made; the table below has the numbers.'); }
+  }
+
+  // --- a card: one section of the report, with its numbers, its rows, its figure and its caveat -------
+  function recheckWords(c) {
     var r = state && state.plugins && state.plugins.recheck;
     var out = [];
     (c.steps || []).forEach(function (s) {
-      ((r && r.steps && r.steps[s]) || []).forEach(function (t) { out.push(badge(t, 'chip-recheck', '↻')); });
+      ((r && r.steps && r.steps[s]) || []).forEach(function (t) { if (out.indexOf(t) < 0) { out.push(t); } });
     });
     return out;
   }
-  function card(c, ch) {
+  function chip(text, cls, symbol) {
+    var b = el('span', { 'class': 'chip ' + cls });
+    if (symbol) { add(b, el('span', { 'class': 'sym', 'aria-hidden': 'true' }, symbol)); }
+    add(b, text);
+    return b;
+  }
+  // The findings of a card that a child's page keeps closed: while one is closed the card's own rows,
+  // numbers and drawing stay closed too, or its table would name the gene and variant under the veil.
+  function veiledOf(c) { return (c.findings || []).map(findingById).filter(function (f) { return f && veiled(f); }); }
+  function openVeiled(fs) { fs.forEach(function (f) { shown[f.id] = true; }); redraw(true); }
+  function card(c) {
     var g = gate(c);
-    var cls = 'card result g-' + g + (attentionNow(c) ? ' attn' : '');
-    var art = el('article', { 'class': cls, id: 'card-' + c.id, 'data-section': c.id, 'data-step': (c.steps || []).join(' '),
-      'data-state': c.state, tabindex: '-1', 'aria-labelledby': 'h-' + c.id });
+    var closedFs = g === 'show' ? veiledOf(c) : [];
+    var art = el('article', { 'class': 'card result g-' + g + (attentionNow(c) ? ' attn' : ''), id: 'card-' + c.id,
+      'data-section': c.id, 'data-step': (c.steps || []).join(' '), 'data-state': c.state, 'data-level': c.level || '',
+      tabindex: '-1', 'aria-labelledby': 'h-' + c.id });
     var head = el('header', { 'class': 'card-head' });
     var h = el('h3', { id: 'h-' + c.id });
     add(h, el('a', { href: '#s/' + c.id, 'class': 'self' }, c.title));
     add(head, h);
     var chips = el('div', { 'class': 'chips' });
     if (g === 'show') {
-      add(chips, attentionNow(c) ? badge('worth a look', 'chip-attn', '▲') : badge('for information', 'chip-info', '○'));
+      // The card's level, on the one scale: a card the report flags is "worth a look" at least.
+      var lv = c.level || (attentionNow(c) ? 'review' : 'info');
+      add(chips, U.level(lv, attentionNow(c) && lv === 'info' ? 'Worth a look' : undefined));
     }
-    recheckBadges(c).forEach(function (b) { add(chips, b); });
+    recheckWords(c).forEach(function (t) { add(chips, chip(t, 'chip-recheck', '↻')); });
     add(head, chips);
     add(art, head);
-    if (g === 'waiting') {
-      add(art, el('p', { 'class': 'state-text' }, waitingText(c)));
+    if (pending(g)) {
+      add(art, el('p', { 'class': 'state-text' }, (g === 'running' ? 'Being written: ' : 'Waiting for ') + stepWords(c) +
+        (g === 'running' ? ' is running now.' : '.')));
     } else if (g === 'notrun') {
-      add(art, el('p', { 'class': 'state-text' }, 'Not run in this run (step ' + (c.steps || []).join(', ') + ').'));
+      add(art, el('p', { 'class': 'notassessed' }, 'Not assessed: no step of this run made this section (step ' + (c.steps || []).join(', ') + ').'));
     } else if (g === 'failed') {
-      add(art, el('p', { 'class': 'state-text' }, 'Step ' + (c.steps || []).join(', ') + ' failed: the Progress tab says why.'));
+      add(art, add(el('p', { 'class': 'notassessed' }), el('b', {}, 'Not assessed. '),
+        'Step ' + (c.steps || []).join(', ') + ' failed: the timeline below says why, and a rerun of the step fills this section.'));
     } else if (g === 'empty') {
-      add(art, el('p', { 'class': 'state-text' }, 'Its step ended without a result for this section.'));
+      add(art, el('p', { 'class': 'notassessed' }, 'Not assessed: its step ended without a result for this section.'));
+    } else if (closedFs.length) {
+      var v = el('div', { 'class': 'veil' });
+      add(v, add(el('div', { 'class': 'vt' }), el('b', {}, 'A result about a child. '),
+        'This section holds a result to act on in adult life. It stays closed until you open it.'));
+      var vb = el('button', { type: 'button', 'class': 'btn' }, 'Show the result');
+      vb.addEventListener('click', function () { openVeiled(closedFs); var x = document.getElementById('card-' + c.id); if (x) { x.scrollIntoView({ block: 'start' }); } });
+      add(v, vb);
+      add(art, v);
     } else {
       (c.notes || []).forEach(function (n) { add(art, el('p', { 'class': 'note-stale' }, n)); });
       if (c.headline) { add(art, el('p', { 'class': 'headline' }, c.headline)); }
       add(art, U.facts(c.facts));
+      add(art, widget(c.widget));
       Object.keys((results && results.charts) || {}).forEach(function (chart) {
         if (results.charts[chart] === c.id) { add(art, el('div', { 'class': 'chart-slot', 'data-chart-slot': chart })); }
       });
@@ -179,6 +360,7 @@
         add(art, ul);
       }
       if (c.hidden) {
+        // APOE and the like: behind their warning, opened on purpose.
         var d = el('details', { 'class': 'behind' });
         add(d, el('summary', {}, c.hidden.summary), el('p', {}, c.hidden.text));
         add(art, d);
@@ -205,120 +387,494 @@
     return art;
   }
 
-  // --- the views --------------------------------------------------------------------------------
-  function heading(text, sub) {
-    var h = el('header', { 'class': 'view-head' });
-    add(h, el('h2', { 'class': 'question' }, text));
-    if (sub) { add(h, el('p', { 'class': 'dim' }, sub)); }
-    return h;
+  // --- a finding in its section ------------------------------------------------------------------------
+  function findingHref(f) { return 'finding/' + encodeURIComponent(f.id) + '/'; }
+  function newAt(f) {
+    if (!running()) { return null; }
+    var by = stepsBy(), t = null;
+    (f.steps || []).forEach(function (s) { if (by[s] && by[s].ended_utc) { t = by[s].ended_utc; } });
+    return t;
   }
-  function lookFirst() {
-    var box = el('div', { id: 'look-first', 'class': 'view' });
-    add(box, heading('Look at these first', 'The cards the report itself flags, in chapter order. A card not listed is for information; its caveats still apply.'));
-    var items = cards().filter(function (x) { return attentionNow(x.c); });
-    if (!items.length) {
-      add(box, el('p', { 'class': 'empty look-empty' }, LOOK_EMPTY));
-    } else {
-      var ol = el('ol', { 'class': 'look-list' });
-      items.forEach(function (x) {
-        var li = el('li', {});
-        var a = el('a', { href: '#s/' + x.c.id });
-        add(a, el('span', { 'class': 'look-ch' }, SHORT[x.ch.key] || x.ch.title), el('span', { 'class': 'look-title' }, x.c.title));
-        add(li, a);
-        if (x.c.headline) { add(li, el('p', { 'class': 'look-head' }, x.c.headline)); }
-        add(ol, li);
-      });
-      add(box, ol);
+  function note(head, body, cls) {
+    var n = el('div', { 'class': 'note' + (cls ? ' ' + cls : '') });
+    add(n, el('span', { 'class': 'nh' }, head));
+    add(n, body);
+    return n;
+  }
+  function evidence(rows) {
+    if (!rows || !rows.length) { return null; }
+    var dl = el('dl', {});
+    rows.forEach(function (r) { add(dl, el('dt', {}, r[0]), el('dd', {}, r[1])); });
+    return dl;
+  }
+  function caveatNote(list) {
+    if (!list || !list.length) { return null; }
+    var box = el('div', {});
+    var lead = U.firstSentence(list[0]);
+    add(box, el('span', {}, lead + ' '));
+    var d = el('details', {});
+    add(d, el('summary', { 'class': 'toggle' }, 'More'));
+    list.forEach(function (t) { add(d, el('p', {}, t)); });
+    add(box, d);
+    return note('Caveat', box, 'caveat-note');
+  }
+  function veiled(f) { return closedPage() && f.level === 'act' && !shown[f.id]; }
+  function findingArticle(f, big) {
+    var row = el('div', { 'class': 'row' });
+    var art = el('div', { 'class': 'finding', id: 'f-' + f.id, 'data-finding': f.id, 'data-level': f.level });
+    var at = newAt(f);
+    if (at) { art.classList.add('new'); add(art, el('span', { 'class': 'newband' }, 'New at ' + U.hm(at))); add(art, el('br', {})); }
+    add(art, U.findingLevel(f.level, f.level_words));
+    if (veiled(f)) {
+      var v = el('div', { 'class': 'veil' });
+      add(v, add(el('div', { 'class': 'vt' }), el('b', {}, 'A result about a child. '),
+        'A result to act on in adult life is usually not looked at before the child can choose. It stays closed until you open it.'));
+      var b = el('button', { type: 'button', 'class': 'btn' }, 'Show the result');
+      b.addEventListener('click', function () { shown[f.id] = true; redraw(true); var x = document.getElementById('f-' + f.id); if (x) { x.scrollIntoView({ block: 'start' }); } });
+      add(v, b);
+      add(art, v);
+      add(row, art, el('aside', {}));
+      return row;
     }
-    var waiting = cards().filter(function (x) { return gate(x.c) === 'waiting'; }).length;
-    if (waiting) { add(box, el('p', { 'class': 'dim' }, (waiting === 1 ? '1 card is' : waiting + ' cards are') + ' still waiting for its step.')); }
-    return box;
+    var h = el('h3', { 'class': big ? 'h1' : 'h3' });
+    add(h, el('a', { href: findingHref(f) }, f.title));
+    add(art, h);
+    if (f.detail) { add(art, el('div', { 'class': 'gene' }, f.detail)); }
+    add(art, el('p', { 'class': 'body-serif' }, f.text));
+    if (big && f.plan && f.plan.length) {
+      add(art, el('div', { 'class': 'todo-h' }, 'What to do'));
+      var ol = el('ol', { 'class': 'todo' });
+      f.plan.forEach(function (t) { add(ol, el('li', {}, t)); });
+      add(art, ol);
+    }
+    add(art, el('a', { 'class': 'readmore', href: findingHref(f) }, 'The full evidence and what to do →'));
+    var side = el('aside', {});
+    var ev = evidence(f.evidence);
+    if (ev) { add(side, note('Evidence', ev)); }
+    add(side, caveatNote(f.caveat));
+    var rel = (f.related || []).map(findingById).filter(function (r) { return r && !veiled(r); });
+    if (rel.length) {
+      var box = el('div', {});
+      rel.slice(0, 4).forEach(function (r, i) { if (i) { add(box, el('br', {})); } add(box, el('a', { href: '#f/' + r.id }, r.title)); });
+      add(side, note('Linked', box));
+    }
+    add(row, art, side);
+    return row;
   }
-  function chapter(ch) {
-    var box = el('div', { 'class': 'view chapter', 'data-chapter': ch.key });
-    add(box, heading(ch.question, ch.title));
-    var grid = el('div', { 'class': 'cards' });
-    ch.sections.forEach(function (c) { add(grid, card(c, ch)); });
-    add(box, grid);
-    return box;
+  function findingLine(f) {
+    var li = el('li', { id: 'f-' + f.id, 'data-finding': f.id, 'data-level': f.level });
+    add(li, el('a', { 'class': 't', href: findingHref(f) }, f.title), U.findingLevel(f.level, f.level_words));
+    if (f.detail) { add(li, el('span', { 'class': 'gene' }, f.detail)); }
+    add(li, el('span', { 'class': 'x' }, f.text));
+    return li;
+  }
+
+  // --- the sections ---------------------------------------------------------------------------------
+  // A section's stamp: written (with the time its last step ended), being written (a step runs), waiting.
+  // The chapters whose steps can still add a finding to sections 1 to 4 while they run.
+  var FEEDS = { clinical: true, carrier: true, medicines: true };
+  function feeding(sec) {
+    return sec.n <= 4 ? cards().filter(function (c) { return FEEDS[c.chapter] && sec.cards.indexOf(c.id) < 0; }) : [];
   }
-  function leaves() {
-    var box = el('div', { 'class': 'view' });
-    add(box, heading('What this leaves out', 'What no step looks at, and the steps that did not run.'));
-    function list(title, items) {
-      var s = el('section', { 'class': 'card' });
-      add(s, el('h3', {}, title));
-      var ul = el('ul', { 'class': 'lines' });
-      (items.length ? items : ['None.']).forEach(function (t) { add(ul, el('li', {}, t)); });
-      add(s, ul);
-      add(box, s);
+  function stamp(sec) {
+    var cs = sec.cards.map(cardById).filter(Boolean).concat(feeding(sec));
+    if (!cs.length) { return { k: 'written', t: 'Written' }; }
+    var gs = cs.map(gate);
+    if (gs.some(function (g) { return g === 'running'; })) { return { k: 'writing', t: 'Being written' }; }
+    if (gs.some(function (g) { return g === 'waiting'; })) {
+      return gs.some(function (g) { return g === 'show'; }) ? { k: 'writing', t: 'Half written' } : { k: 'waiting', t: 'Waiting' };
     }
-    list('No step looks at these', (results && results.not_assessed) || []);
-    list('Steps that did not run', (results && results.not_run) || []);
+    var by = stepsBy(), t = null;
+    cs.forEach(function (c) { (c.steps || []).forEach(function (s) { if (by[s] && by[s].ended_utc && (!t || by[s].ended_utc > t)) { t = by[s].ended_utc; } }); });
+    return { k: 'written', t: 'Written' + (t && running() ? ' ' + U.hm(t) : '') };
+  }
+  function sectionHead(sec) {
+    var head = el('div', { 'class': 'sechead' });
+    add(head, el('span', { 'class': 'secnum' }, String(sec.n)), el('h2', { 'class': 'h2' }, sec.title));
+    if (running()) { var st = stamp(sec); add(head, el('span', { 'class': 'stamp ' + st.k }, st.t)); }
+    return head;
+  }
+  function waitBlock(sec) {
+    var cs = sec.cards.map(cardById).filter(function (c) { return c && pending(gate(c)); });
+    if (!cs.length) { return null; }
+    var box = el('div', {});
+    add(box, add(el('div', { 'class': 'proof', 'aria-hidden': 'true' }), el('i', {}), el('i', {}), el('i', {})));
+    var names = cs.map(function (c) { return c.title + (gate(c) === 'running' ? ' (running)' : ''); });
+    add(box, el('p', { 'class': 'waitnote' }, 'This section stays open until its steps finish: ' + names.join(', ') +
+      '. Until then this page says nothing either way.'));
     return box;
   }
-  function show(tab) {
-    current = tab;
-    var isProgress = tab === 'progress';
-    progress.hidden = !isProgress;
-    panel.hidden = isProgress;
-    root.setAttribute('data-pgp-tab', tab);
-    if (isProgress) { return; }
+  // What the clinical steps of section 8 looked at, named in an empty section 1 to 4.
+  function assessedNames() {
+    var s8 = sectionsList().filter(function (s) { return s.n === 8; })[0];
+    return s8 ? s8.cards.map(cardById).filter(function (c) { return c && gate(c) === 'show'; }).map(function (c) { return c.title; }) : [];
+  }
+  function sectionBody(sec) {
+    var body = el('div', {});
+    var fs = sec.findings.map(findingById).filter(function (f) { var c = f && cardById(f.card); return c && gate(c) === 'show'; });
+    var cs = sec.cards.map(cardById).filter(Boolean);
+    var big = sec.n === 1 || (sec.n === 4 && fs.length <= 2);
+    if (sec.n <= 4 || sec.n === 5) {
+      if (fs.length) {
+        if (big || sec.n === 1 || fs.length <= 3) { fs.forEach(function (f) { add(body, findingArticle(f, big)); }); }
+        else { var ul = el('ul', { 'class': 'list-findings' }); fs.forEach(function (f) { add(ul, findingLine(f)); }); add(body, ul); }
+      } else if (sec.n !== 5) {
+        var w = waitBlock(sec);
+        var pend = feeding(sec).some(function (c) { return pending(gate(c)); });
+        if (w) { add(body, w); } else if (pend) {
+          add(body, el('p', { 'class': 'waitnote' }, 'This section stays open until the steps that can add a finding here finish. Until then this page says nothing either way.'));
+        } else {
+          var e = el('p', { 'class': 'empty-sec' }, NOT_ALL_CLEAR);
+          add(body, e);
+          var names = sec.n === 1 || sec.n === 4 ? assessedNames() : cs.filter(function (c) { return gate(c) === 'show'; }).map(function (c) { return c.title; });
+          if (names.length) { add(body, el('p', { 'class': 'soft' }, 'Assessed: ' + names.join(', ') + '. Section 8 lists what each looked at, section 9 what no step sees.')); }
+        }
+      }
+    }
+    if (sec.n === 8) {
+      var nf = el('ul', { 'class': 'nf' });
+      cs.forEach(function (c) {
+        var li = el('li', {});
+        var d = el('details', { 'data-card': c.id });
+        var sum = el('summary', {});
+        var g = gate(c);
+        var what = g === 'show' && veiledOf(c).length ? 'A result about a child, closed until opened.'
+          : g === 'show' ? (c.headline || (c.facts && c.facts[0] ? c.facts[0][0] + ': ' + c.facts[0][1] : NOT_ALL_CLEAR))
+          : pending(g) ? 'Waiting for ' + stepWords(c) + '.' : g === 'failed' ? 'Not assessed: its step failed.' : 'Not assessed in this run.';
+        var w2 = el('span', { 'class': 'what' }, what);
+        if (c.caveat && c.caveat.length) { add(w2, el('span', { 'class': 'cav' }, 'Does not see: ' + U.firstSentence(c.caveat[0]))); }
+        add(sum, el('span', { 'class': 'nfname' }, c.title), w2);
+        add(d, sum, card(c));
+        add(li, d);
+        add(nf, li);
+      });
+      add(body, nf);
+      return body;
+    }
+    if (sec.n === 9) {
+      var lists = [['No step looks at these', (results && results.not_assessed) || []], ['Steps that did not run', (results && results.not_run) || []]];
+      lists.forEach(function (x) {
+        add(body, el('h3', { 'class': 'h3' }, x[0]));
+        var ul2 = el('ul', { 'class': 'cols2' });
+        (x[1].length ? x[1] : ['None listed.']).forEach(function (t) { add(ul2, el('li', {}, t)); });
+        add(body, ul2);
+      });
+      return body;
+    }
+    if (sec.n === 10) {
+      var dbs = (results && results.databases) || {};
+      var keys = Object.keys(dbs);
+      if (keys.length) {
+        var t = el('table', { 'class': 'sources' });
+        add(t, add(el('tr', {}), el('th', {}, 'Source'), el('th', {}, 'Version or date')));
+        keys.forEach(function (k) { add(t, add(el('tr', {}), el('td', {}, k.replace(/_/g, ' ')), el('td', {}, dbs[k]))); });
+        add(body, t);
+      }
+      var rc = state && state.plugins && state.plugins.recheck;
+      if (rc && rc.banner) { add(body, el('p', { 'class': 'note-stale' }, rc.banner)); }
+      var fb = el('div', { 'class': 'filebtns' });
+      add(fb, el('a', { 'class': 'btn', href: 'report.html' }, 'The full report (HTML)'));
+      add(fb, el('a', { 'class': 'btn ghost', href: 'viewer/' }, 'Genome viewer'));
+      add(body, fb);
+    }
+    cs.forEach(function (c) { add(body, card(c)); });
+    return body;
+  }
+  function drawSections() {
     panel.textContent = '';
     if (results && results.note && !(results.chapters || []).length) {
       add(panel, el('p', { 'class': 'empty' }, results.note));
       return;
     }
-    if (tab === 'look') { add(panel, lookFirst()); } else if (tab === 'leaves') { add(panel, leaves()); } else {
-      var ch = ((results && results.chapters) || []).filter(function (c) { return c.key === tab; })[0];
-      if (ch) { add(panel, chapter(ch)); }
-    }
+    sectionsList().forEach(function (sec) {
+      var s = el('section', { 'class': 'sec', id: 's' + sec.n, 'data-journal': sec.key, 'aria-labelledby': 'sh' + sec.n });
+      var head = sectionHead(sec);
+      head.querySelector('h2').id = 'sh' + sec.n;
+      add(s, head, el('div', { 'class': 'secq' }, sec.question));
+      add(s, sectionBody(sec));
+      add(panel, s);
+    });
     root.setAttribute('data-pgp-results', String(panel.querySelectorAll('article.result').length));
+    root.setAttribute('data-pgp-findings', String(panel.querySelectorAll('[data-finding]').length));
     document.dispatchEvent(new CustomEvent('pgp:cards'));
   }
 
-  // --- the header -------------------------------------------------------------------------------
+  // --- the lead, the counts by level, the chromosome map ---------------------------------------------
+  function counts() {
+    var n = { act: 0, medicine: 0, review: 0, carrier: 0, trust: 0, info: 0 };
+    findingsNow().forEach(function (f) { n[f.level] += 1; });
+    n.info = cards().filter(function (c) { return gate(c) === 'show' && c.level === 'info'; }).length;
+    return n;
+  }
+  function drawLead() {
+    var slot = document.getElementById('lead-slot');
+    slot.textContent = '';
+    if (!results || !(results.chapters || []).length) { return; }
+    var row = el('div', { 'class': 'row' });
+    var main = el('div', {});
+    var p = el('p', { 'class': 'lede dropcap', id: 'lead' });
+    var closed = (results.findings || []).some(veiled);
+    var parts = (results.lead || []).map(function (x) {
+      return x[2] === 'act' && closed ? [': closed on this page until opened on purpose, in section 1. ', false] : x;
+    });
+    if (replay && running()) {
+      // A replay holds the results of the finished run: before its end the lead would name findings the
+      // sections do not show yet.
+      parts = [['This report is being written. ', true], ['The lead paragraph is written when the run ends; the sections below fill in as their steps finish.', false]];
+    } else if (running()) {
+      parts = [['This report is being written. ', true], ['What follows is what has been found so far; a section with steps still to run says so. ', false]]
+        .concat(parts.filter(function (x) { return !/^Mean depth/.test(x[0]); }));
+    }
+    parts.forEach(function (x) { add(p, x[1] ? el('b', {}, x[0]) : x[0]); });
+    add(main, p);
+    var n = counts();
+    var fs = findingsNow();
+    var led = el('div', { 'class': 'ledger', id: 'ledger' });
+    [['act', 1], ['medicine', 2], ['review', 4], ['carrier', 3], ['info', 6]].forEach(function (x) {
+      var a = el('a', { href: '#s' + x[1], 'data-level': x[0] });
+      add(a, U.level(x[0], { act: 'Take to a doctor', medicine: 'Prescriber', review: 'Worth a look', carrier: 'Family planning', info: 'Information' }[x[0]]));
+      add(a, el('span', { 'class': 'n' }, String(n[x[0]])));
+      var words = x[0] === 'info' ? 'Origins, traits, scores' : x[0] === 'act' && closed && n.act ? 'Closed until opened' :
+        fs.filter(function (f) { return f.level === x[0]; }).slice(0, 2).map(function (f) { return f.gene || f.title; }).join(', ') || 'None in what was assessed';
+      add(a, el('span', { 'class': 'w' }, words));
+      add(led, a);
+    });
+    add(main, led);
+    var trust = el('div', { 'class': 'trustline' });
+    var problems = fs.filter(function (f) { return f.level === 'trust'; });
+    add(trust, U.level('trust', 'Data quality', problems.length ? 'problem' : ''));
+    var qc = cardById('qc');
+    if (qc && gate(qc) === 'show') {
+      (qc.facts || []).filter(function (f) { return /depth|contamination|sex from/i.test(f[0]); }).slice(0, 3).forEach(function (f, i) {
+        if (i) { add(trust, el('span', { 'class': 'sep' }, '·')); }
+        add(trust, el('span', { title: f[0] + ': ' + f[1] }, String(f[0]).replace(/\s*\([^)]*\)/g, '') + ': ' + String(f[1]).split(/[.;(]\s/)[0].replace(/[.;]$/, '').trim()));
+      });
+    } else { add(trust, el('span', {}, 'Waiting for the quality steps.')); }
+    problems.forEach(function (f) { add(trust, el('span', { 'class': 'sep' }, '·'), el('a', { href: '#f/' + f.id }, f.title)); });
+    add(trust, el('span', { 'class': 'sep' }, '·'), el('a', { href: '#s5' }, 'Can I trust this?'));
+    add(main, trust);
+    var side = el('aside', {});
+    add(side, note('How to read this', el('span', {}, 'Sections run from what matters most to what is only interesting. A section with nothing to report still says what it looked at and what it cannot see.')));
+    add(side, note('A research pipeline', el('span', {}, 'Not a clinical test: anything to act on is confirmed by a certified laboratory first.')));
+    add(row, main, side);
+    add(slot, row);
+    // Figure 1: where the findings sit.
+    var marks = [];
+    fs.forEach(function (f) {
+      var l = U.locus(f.viewer);
+      if (l && !veiled(f)) { marks.push({ chr: l.chr, mb: l.mb, lv: f.level, label: f.gene || '', tip: f.title, href: findingHref(f) }); }
+    });
+    var fig = el('figure', { 'class': 'row fig1' });
+    var inner = el('div', {});
+    add(inner, el('div', { 'class': 'fig-label' }, 'Figure 1 · Where the findings sit'));
+    var k = el('div', { 'class': 'kary', id: 'kary' });
+    add(k, U.karyogram(marks));
+    add(inner, k);
+    add(inner, el('figcaption', {}, marks.length ? 'Each mark is one finding with a position, on its chromosome. Shape and colour give the level, as in the row above; every finding is also listed in its section.'
+      : 'No finding with a position yet. The findings without one (medicine genes, repeat counts, copy numbers) are listed in their sections.'));
+    add(fig, inner, el('aside', {}));
+    add(slot, fig);
+  }
+
+  // --- the table of contents, the phone tab bar, the cover ------------------------------------------
+  function drawToc() {
+    rail.textContent = '';
+    if (!sectionsList().length) { return; }
+    add(rail, el('div', { 'class': 'group' }, running() ? 'The report, section by section' : 'In this report'));
+    var ol = el('ol', {});
+    var n = counts();
+    var lvOf = { 1: 'act', 2: 'medicine', 3: 'carrier', 4: 'review' };
+    sectionsList().forEach(function (sec) {
+      var a = el('a', { href: '#s' + sec.n, 'data-toc': sec.n });
+      add(a, el('span', { 'class': 'tn' }, String(sec.n)), el('span', {}, sec.title));
+      var lv = lvOf[sec.n];
+      if (lv && n[lv]) { add(a, U.level(lv, String(n[lv]), 'tc')); }
+      else if (sec.n === 5) { add(a, U.level('trust', '', 'tc' + (n.trust ? ' problem' : ''))); }
+      else if (sec.n === 8) { add(a, el('span', { 'class': 'tc muted' }, String(sec.cards.length))); }
+      if (running()) { var st = stamp(sec); add(a, el('span', { 'class': 'tsub ' + st.k }, st.t.toLowerCase())); }
+      add(ol, add(el('li', {}), a));
+    });
+    add(rail, ol);
+    add(rail, el('div', { 'class': 'group' }, 'How the run went'));
+    add(rail, add(el('div', { 'class': 'people' }), add(el('a', { href: '#progress' }), el('span', {}, 'Step timeline'), el('span', { 'class': 'muted' }, '→'))));
+    if (family) {
+      add(rail, el('div', { 'class': 'group' }, 'The family'));
+      var ppl = el('div', { 'class': 'people' });
+      add(ppl, add(el('a', { href: family.url }), el('span', {}, 'Family report'), el('span', { 'class': 'muted' }, '→')));
+      (family.data.state.members || []).forEach(function (m) {
+        if (m.sample === personName()) { return; }
+        var u = memberUrl(m.sample);
+        var a = el(u ? 'a' : 'span', u ? { href: u } : { 'class': 'muted' });
+        add(a, el('span', { 'class': 'pc' + (m.sequenced ? '' : ' nogenome') }, m.sample));
+        var r = family.data.runs && family.data.runs[m.sample];
+        if (r && r.attention) { add(a, U.level('review', String(r.attention), 'tc')); }
+        add(ppl, a);
+      });
+      add(rail, ppl);
+    }
+  }
+  function drawTabbar() {
+    var bar = document.getElementById('tabbar');
+    if (!bar) { return; }
+    bar.textContent = '';
+    var n = counts();
+    [[1, 'To act', 'act'], [2, 'Medicines', 'medicine'], [3, 'Family', 'carrier'], [5, 'Trust', 'trust'], [8, 'More', null]].forEach(function (x) {
+      var a = el('a', { href: '#s' + x[0] });
+      add(a, el('span', { 'class': 'ti' }, String(x[0])));
+      add(a, el('span', {}, x[1] + (x[2] && n[x[2]] ? ' · ' + n[x[2]] : '')));
+      add(bar, a);
+    });
+  }
   function header() {
     var p = (results && results.person) || {};
-    var slot = document.getElementById('avatar-slot');
     var planned = ((state && state.steps) || []).filter(function (s) { return s.state !== 'not planned'; });
     var done = planned.filter(function (s) { return s.state === 'done'; }).length;
+    var slot = document.getElementById('avatar-slot');
     slot.textContent = '';
     add(slot, U.avatar(p.inferred_sex || (state && state.run && state.run.declared_sex), true, planned.length ? done / planned.length : 0));
+    var run = (state && state.run) || {};
+    var kicker = document.getElementById('kicker');
+    kicker.textContent = (running() ? 'Being written · ' : 'Personal genome report') + (family ? (running() ? '' : ' · ') + 'Family ' + family.name : '');
     var line = document.getElementById('person-line');
     line.textContent = '';
     var bits = [];
-    if (p.inferred_sex) { bits.push('Sex from the reads: ' + p.inferred_sex + (p.declared_sex ? ', declared ' + p.declared_sex : '')); }
-    if (bits.length) { add(line, bits.join('. ') + '. '); }
-    var fam = state && state.plugins && state.plugins.family;
+    if (p.inferred_sex || p.declared_sex) {
+      bits.push(el('span', {}, (p.inferred_sex ? p.inferred_sex + ' from the reads' : 'sex not measured') +
+        (p.declared_sex ? (p.declared_sex === p.inferred_sex ? ', as declared' : ', declared ' + p.declared_sex) : '')));
+    }
+    var r = role();
+    if (r) { bits.push(el('span', {}, r)); }
+    if (run.state === 'finished') {
+      var hh = U.hours(run.started_utc, run.finished_utc);
+      bits.push(el('span', {}, 'finished' + (run.finished_utc ? ' ' + U.dm(run.finished_utc) : '') + (hh ? ' after ' + hh.toFixed(1) + ' h' : '')));
+    } else if (running()) {
+      bits.push(el('span', {}, done + ' of ' + planned.length + ' steps done'));
+    }
+    bits.forEach(function (b) { add(line, b); });
+    // Breadcrumb: people / family / person.
     var crumbs = document.getElementById('crumbs');
     var name = document.getElementById('run-name');
+    var home = document.getElementById('home-crumb');
     crumbs.textContent = '';
-    ((fam && fam.kind === 'member' && fam.families) || []).forEach(function (f, i) {
-      if (i === 0) { add(line, 'In family '); } else { add(line, ', '); }
-      add(line, el('a', { href: f.url }, f.name));
-      add(crumbs, el('a', { href: f.url }, f.name), el('span', { 'class': 'sep', 'aria-hidden': 'true' }, '/'));
+    add(crumbs, home, el('span', { 'class': 'sep', 'aria-hidden': 'true' }, '/'));
+    var fam = state && state.plugins && state.plugins.family;
+    ((fam && fam.kind === 'member' && fam.families) || []).forEach(function (f) {
+      add(crumbs, el('a', { href: f.url }, 'Family ' + f.name), el('span', { 'class': 'sep', 'aria-hidden': 'true' }, '/'));
     });
     add(crumbs, name);
-    // The strip: one cell per planned step, filled when done, striped while it runs.
+    // The strip under the timeline: one cell per planned step.
     var strip = document.getElementById('strip');
     strip.textContent = '';
-    planned.forEach(function (s) {
-      add(strip, el('span', { 'class': 'cell st-' + s.state.replace(/\s+/g, '-'), title: s.step + ' ' + s.label + ': ' + s.state }));
-    });
-    var txt = document.getElementById('strip-text');
-    var running = planned.filter(function (s) { return s.state === 'running'; }).length;
+    planned.forEach(function (s) { add(strip, el('span', { 'class': 'cell st-' + s.state.replace(/\s+/g, '-'), title: s.step + ' ' + s.label + ': ' + s.state })); });
+    var nrun = planned.filter(function (s) { return s.state === 'running'; }).length;
     var failed = planned.filter(function (s) { return s.state === 'failed'; }).length;
-    var run = (state && state.run) || {};
     var t = done + ' of ' + planned.length + ' steps done';
     if (run.state === 'finished') { t = 'Finished' + (run.finished_utc ? ' ' + U.day(run.finished_utc) : '') + ': ' + t; }
-    else if (running) { t = 'Running: ' + t + ', ' + running + ' running now'; }
+    else if (nrun) { t = 'Running: ' + t + ', ' + nrun + ' running now'; }
     if (failed) { t += ', ' + failed + ' failed'; }
     var rc = state && state.plugins && state.plugins.recheck;
     if (rc && rc.checked_utc) { t += '. Databases re-checked ' + U.day(rc.checked_utc); }
-    txt.textContent = t + '.';
+    document.getElementById('strip-text').textContent = t + '.';
+    runHero(planned, done, nrun, failed);
+    root.setAttribute('data-pgp-run', run.state || '');
+  }
+  // While the run goes: the hero (31 of 54), the timing and what runs now.
+  function runHero(planned, done, nrun, failed) {
+    var hero = document.getElementById('runhero');
+    var badge = document.getElementById('live-badge');
+    hero.hidden = !running();
+    if (badge) { badge.hidden = !running(); }
+    var list = document.getElementById('running-list');
+    var box = document.getElementById('running-now');
+    list.textContent = '';
+    var now = Date.parse((state && state.generated_utc) || '');
+    planned.filter(function (s) { return s.state === 'running'; }).forEach(function (s) {
+      var li = el('li', {});
+      var el2 = isFinite(now) && s.started_utc ? (now - Date.parse(s.started_utc)) / 60e3 : null;
+      var usual = s.hours ? s.hours * 60 : null;
+      add(li, add(el('div', { 'class': 'rn' }), el('span', {}, s.label),
+        el('span', {}, (el2 !== null ? Math.round(el2) + ' min' : '') + (usual ? ' of ~' + Math.round(usual) + ' min' : ''))));
+      if (el2 !== null && usual) {
+        var pb = el('div', { 'class': 'pb' });
+        var i = el('i', {});
+        i.style.setProperty('--p', Math.min(100, 100 * el2 / usual).toFixed(1) + '%');
+        add(li, add(pb, i));
+      }
+      add(list, li);
+    });
+    box.hidden = !list.childNodes.length;
+    if (!running()) { return; }
+    var ops = state.plugins && state.plugins.ops;
+    // hours_left is the ops plugin's {low_s, high_s} range from the usual step times, or null.
+    var hl = ops && ops.hours_left;
+    var left = hl && typeof hl.high_s === 'number' ? hl.high_s / 3600 : null;
+    var low = hl && typeof hl.low_s === 'number' ? hl.low_s / 3600 : null;
+    var span = left === null ? null : (low !== null && Math.round(low) !== Math.round(left) ? Math.max(0, Math.round(low)) + '–' + Math.max(1, Math.round(left)) + ' h' : '~' + Math.max(1, Math.round(left)) + ' h');
+    var retries = ops && ops.memory ? ops.memory.retries || 0 : 0;
+    var alerts = (ops && ops.alerts) || [];
+    var lede = document.getElementById('run-lede');
+    lede.textContent = '';
+    add(lede, 'This report is being written as the steps finish, each section in its place. ',
+      el('b', {}, done + ' of ' + planned.length + ' are done'),
+      span !== null ? ', about ' + span.replace(' h', ' hours') + ' remain. ' : '. ',
+      failed ? el('b', {}, failed + ' failed: the timeline says which. ') : '',
+      alerts.length ? alerts.map(function (a) { return a.text; }).join('; ') + '. ' : (failed ? '' : 'Nothing needs you. '),
+      findingsNow().length ? 'The first findings are already in.' : 'No section is written yet.');
+    var big = document.getElementById('bignum');
+    big.textContent = String(done);
+    add(big, el('small', {}, 'of ' + planned.length + ' steps'));
+    var bar = document.getElementById('stepbar');
+    bar.textContent = '';
+    [['d', done], ['r', nrun], ['f', failed]].forEach(function (x) {
+      if (!x[1]) { return; }
+      var i = el('i', { 'class': x[0] });
+      i.style.setProperty('width', (100 * x[1] / Math.max(1, planned.length)).toFixed(2) + '%');
+      add(bar, i);
+    });
+    var key = document.getElementById('stepkey');
+    key.textContent = '';
+    add(key, el('span', {}, done + ' done'), el('span', {}, nrun + ' running'),
+      el('span', {}, (planned.length - done - nrun - failed) + ' waiting'), el('span', {}, failed + ' failed'));
+    var timing = document.getElementById('timing');
+    timing.textContent = '';
+    var started = state.run.started_utc || (planned.map(function (s) { return s.started_utc; }).filter(Boolean).sort()[0]);
+    var el3 = U.hours(started, state.generated_utc);
+    [['Elapsed', el3 !== null ? el3.toFixed(1) + ' h' : 'not known', started ? 'since ' + U.hm(started) : ''],
+      ['To go', span !== null ? span : 'not known', span !== null ? 'from usual step times' : 'no usual times yet'],
+      ['Retries', String(retries), retries ? 'recovered unless a step failed' : 'none']].forEach(function (x) {
+      add(timing, add(el('div', {}), el('span', { 'class': 'k' }, x[0]), el('span', { 'class': 'v' }, x[1]), el('span', { 'class': 'r' }, x[2])));
+    });
   }
 
+  // --- the route: #s/<card>, #s<n>, #f/<finding>, #q/<chapter>, #progress -----------------------------
+  var CHAPTER_SECTION = { quality: 5, clinical: 8, carrier: 3, medicines: 2, ancestry: 6, traits: 7, other: 10, look: 1, leaves: 9 };
+  function route() {
+    var h;
+    try { h = decodeURIComponent((window.location.hash || '').slice(1)); } catch (e) { return; }
+    if (!h) { return; }
+    var target = null, isCard = false;
+    if (h.indexOf('s/') === 0 || (h && !/^(s\d+|f\/.*|q\/.*|progress)$/.test(h) && cardById(h))) {
+      target = document.getElementById('card-' + (h.indexOf('s/') === 0 ? h.slice(2) : h));
+      isCard = true;
+    } else if (h.indexOf('f/') === 0) { target = document.getElementById('f-' + h.slice(2)); }
+    else if (h.indexOf('q/') === 0) { target = document.getElementById('s' + (CHAPTER_SECTION[h.slice(2)] || 1)); }
+    else { target = document.getElementById(h); }
+    if (!target) { return; }
+    var d = target.closest && target.closest('details');
+    if (d) { d.open = true; }
+    if (isCard) {
+      Array.prototype.forEach.call(panel.querySelectorAll('.result.target'), function (x) { x.classList.remove('target'); });
+      target.classList.add('target');
+    }
+    target.scrollIntoView({ block: 'start' });
+    if (target.focus) { target.focus({ preventScroll: true }); }
+    Array.prototype.forEach.call(rail.querySelectorAll('[data-toc]'), function (a) {
+      var sec = target.closest ? target.closest('section.sec') : null;
+      a.setAttribute('aria-current', sec && sec.id === 's' + a.getAttribute('data-toc') ? 'true' : 'false');
+    });
+  }
+  window.addEventListener('hashchange', route);
+
   // --- data ---------------------------------------------------------------------------------------
   function load() {
     var key = replay ? 'replay' : doneSet() + '|' + ((state && state.results_stamp) || '');
@@ -326,27 +882,46 @@
     fetchedFor = key;
     U.getJSON('results.json').then(function (r) {
       if (key !== fetchedFor) { return; }
-      if (!(r && (r.chapters || r.note))) { fetchedFor = null; return; }  // tried again on the next state
+      if (!(r && (r.chapters || r.note))) { fetchedFor = null; return; }
       results = r;
       redraw(true);
+      route();
     }).catch(function () { if (key === fetchedFor) { fetchedFor = null; } });
   }
   function redraw(force) {
-    var k = JSON.stringify([doneSet(), state && state.run && state.run.state, !!results,
-      state && state.plugins && state.plugins.recheck && state.plugins.recheck.mtime]);
-    if (!force && k === drawnKey) { return; }
+    var k = JSON.stringify([doneSet(), state && state.run && state.run.state, !!results, !!family, Object.keys(shown),
+      state && state.plugins && state.plugins.recheck && state.plugins.recheck.mtime,
+      // Every step's state: one can move from waiting to not finished with the done set unchanged.
+      ((state && state.steps) || []).map(function (s) { return s.step + ':' + s.state; })]);
+    if (!force && k === drawnKey) { header(); return; }
     drawnKey = k;
+    var y = window.scrollY;
+    var open = Array.prototype.map.call(panel.querySelectorAll('details[open]'), function (d) {
+      return d.getAttribute('data-card') || (d.closest('[id]') || {}).id; });
     header();
-    var keep = document.activeElement && rail.contains(document.activeElement) ? document.activeElement.getAttribute('data-tab') : null;
-    drawRail();
-    if (!chosen && !parse()) { show(defaultTab()); route(false); } else { route(false); }
-    if (keep) { var t = rail.querySelector('[data-tab="' + keep + '"]'); if (t) { t.focus(); } }
+    drawToc();
+    drawTabbar();
+    drawLead();
+    drawSections();
+    open.forEach(function (id) {
+      var d = panel.querySelector('details[data-card="' + id + '"]');
+      if (d) { d.open = true; }
+    });
+    window.scrollTo(0, y);
+    document.getElementById('progress-q').textContent = running()
+      ? 'Is it moving, when will it end, is anything wrong? One line per step.' : 'One line per step: when it ran, and what it found.';
+    // While the run goes the timeline leads the page; once it ends it closes the report.
+    var content = document.getElementById('content');
+    var prog = document.getElementById('progress');
+    if (running() && content.firstElementChild !== prog) { content.insertBefore(prog, content.firstElementChild); }
+    else if (!running() && content.lastElementChild !== prog) { content.appendChild(prog); }
   }
 
   window.PGP.register({
     name: 'person',
     onState: function (s) {
       state = s;
+      loadFamily();
       if (!replay || !results) { load(); }
       redraw(false);
     }
diff --git a/bin/live_results.py b/bin/live_results.py
index 74f77a53..b9431c70 100644
--- a/bin/live_results.py
+++ b/bin/live_results.py
@@ -24,6 +24,7 @@
 fields the summary already holds. A section id with no adapter falls back to its
 report headline and a link to the report.
 """
+import hashlib
 import re
 
 import render_report as rr
@@ -57,6 +58,15 @@ def cell(v):
     return str(v)
 
 
+def num(v):
+    """A summary value as a float, or None ('.', '', 'NA', a range)."""
+    try:
+        x = float(v)
+    except (TypeError, ValueError):
+        return None
+    return x if x == x and x not in (float("inf"), float("-inf")) else None
+
+
 def table(columns, rows, limit=200):
     rows = [[cell(c) for c in r] for r in rows]
     if not rows:
@@ -273,9 +283,12 @@ def a_expansions(S, s):
     return {"facts": facts, "attention": flagged,
             "table": table(["Locus", "Repeats", "Stranger status", "Normal up to", "Pathologic from", "95% interval",
                             "Sizing", "Intermediate zone"], rows),
-            "widget": {"kind": "str", "loci": [{k: l.get(k) for k in ("locus", "repeat_count", "status", "normal_max",
-                                                                          "pathologic_min", "ci")}
-                                                 for l in d.get("loci") or []]}}
+            # The gauge: each allele's count against Stranger's thresholds, its 95% interval as a whisker.
+            # status is render_report's str_status: never Stranger's "normal" for an allele not sized.
+            "widget": {"kind": "str", "loci": [dict({k: l.get(k) for k in ("locus", "repeat_count", "normal_max",
+                                                                               "pathologic_min", "ci", "allele_sizing")},
+                                                    status=rr.str_status(l))
+                                               for l in d.get("loci") or []]}}
 
 
 def a_vntyper(S, s):
@@ -301,17 +314,32 @@ def a_lpa(S, s):
     d = S["lpa"]["data"]
     facts = [["KIV-2 repeats", f"{d.get('kiv2_copies')} (95% interval {d.get('ci95_low')} to {d.get('ci95_high')})"
               if d.get("status") == "estimated" else d.get("status")], ["Class", d.get("class")]]
-    return {"facts": facts, "lines": rr.lpa_lines(d), "attention": d.get("flag") == "high"}
+    out = {"facts": facts, "lines": rr.lpa_lines(d), "attention": d.get("flag") == "high"}
+    v, lo, hi = num(d.get("kiv2_copies")), num(d.get("ci95_low")), num(d.get("ci95_high"))
+    if d.get("status") == "estimated" and v is not None and lo is not None and hi is not None:
+        # The count and its 95% interval on a scale from 0: the page draws the bar, the facts say it in words.
+        out["widget"] = {"kind": "ci", "label": "KIV-2 repeats, both chromosomes", "value": v, "low": lo, "high": hi,
+                         "unit": "repeats", "max": max(60, 10 * int(hi * 1.25 / 10 + 1)), "class": d.get("class")}
+    return out
 
 
 def a_chip(S, s):
     d = S["chip"]["data"]
     rows = [[c.get("gene"), c.get("protein_change"), c.get("vaf"), c.get("alt_reads"), c.get("depth"), c.get("status")]
             for c in d.get("calls") or []]
-    return {"facts": [["CHIP calls", len(d.get("calls") or [])],
-                      ["Typical detection limit at this depth (VAF)", d.get("median_limit")]],
-            "table": table(["Gene", "Change", "VAF", "Alt reads", "Depth", "Status"], rows),
-            "lines": rr.chip_lines(d, s.get("sample")), "attention": bool(d.get("calls"))}
+    genes = [{"gene": g.get("gene"), "limit": num(g.get("detection_limit_vaf")), "depth": num(g.get("mean_depth")),
+              "status": g.get("status")} for g in d.get("genes") or []]
+    calls = [{"gene": c.get("gene"), "change": c.get("protein_change"), "vaf": num(c.get("vaf"))}
+             for c in d.get("calls") or []]
+    out = {"facts": [["CHIP calls", len(d.get("calls") or [])],
+                     ["Typical detection limit at this depth (VAF)", d.get("median_limit")]],
+           "table": table(["Gene", "Change", "VAF", "Alt reads", "Depth", "Status"], rows),
+           "lines": rr.chip_lines(d, s.get("sample")), "attention": bool(d.get("calls"))}
+    if genes or calls:
+        # Each call's VAF against the smallest VAF this depth can see in each gene (chip_report's own limit):
+        # under the limit nothing can be seen, so an empty track is not an all-clear.
+        out["widget"] = {"kind": "vaf", "max": 0.5, "genes": genes, "calls": [c for c in calls if c["vaf"] is not None]}
+    return out
 
 
 def a_mosaic(S, s):
@@ -356,16 +384,28 @@ def a_couple(S, s):
             "table": table(["Result", "Gene", "Condition", "Chance for a child", "This person", "Partner"], rows)}
 
 
+# The genes the copy-number dots draw (the carrier screen's copy-number genes): SMN1 and SMN2, the two
+# alpha-globin genes and the RCCX module of CYP21A2.
+COPY_GENES = ("SMN1", "SMN2", "HBA1", "HBA2", "CYP21A2")
+
+
 def a_paralogs(S, s):
     lines = []
     if (S.get("parascopy") or {}).get("state") in ("ok", "stale"):
         d = S["parascopy"]["data"]
         lines += rr.parascopy_lines(d) + rr.parascopy_locus_lines(d) + rr.cn_interval_lines(d.get("cn_intervals"))
-    rows = []
+    rows, dots = [], []
     if (S.get("paralogs") or {}).get("state") in ("ok", "stale"):
-        rows = [[g.get("gene"), g.get("copy_number"), g.get("status"), g.get("detail")]
-                for g in S["paralogs"]["data"].get("genes") or []]
-    return {"lines": lines, "table": table(["Gene", "Copies", "Status", "Detail"], rows)}
+        for g in S["paralogs"]["data"].get("genes") or []:
+            rows.append([g.get("gene"), g.get("copy_number"), g.get("status"), g.get("detail")])
+            if str(g.get("gene") or "").split(" ")[0] in COPY_GENES:
+                n = num(g.get("copy_number"))
+                dots.append({"gene": g.get("gene"), "copies": int(n) if n is not None and n == int(n) and 0 <= n <= 20
+                             else None, "status": g.get("status") or "."})
+    out = {"lines": lines, "table": table(["Gene", "Copies", "Status", "Detail"], rows)}
+    if dots:
+        out["widget"] = {"kind": "copies", "genes": dots}
+    return out
 
 
 def a_pharmcat(S, s):
@@ -446,8 +486,15 @@ def a_y(S, s):
     st = (S.get("y_str") or {}).get("data") or {}
     if st.get("markers"):
         facts.append(["Y-STR markers read", sum(1 for m in st["markers"] if m.get("count"))])
-    return {"facts": facts, "explore": explore,
-            "table": table(["Level", "Branch", "Derived", "Ancestral", "No call"], rows)}
+    out = {"facts": facts, "explore": explore,
+           "table": table(["Level", "Branch", "Derived", "Ancestral", "No call"], rows)}
+    if t and t.get("path"):
+        # The path from the root of the tree to the placement, one branch per level, with its marker counts.
+        out["widget"] = {"kind": "ypath", "tree": t.get("tree"), "tip": t.get("haplogroup"),
+                         "path": [{"level": p.get("Level"), "branch": p.get("Branch"), "derived": num(p.get("Derived")),
+                                   "ancestral": num(p.get("Ancestral")), "no_call": num(p.get("No_call"))}
+                                  for p in t["path"]]}
+    return out
 
 
 def a_archaic(S, s):
@@ -594,7 +641,7 @@ def card(sid, title, keys, summary, files):
     cav = caveats(sid)
     out = {"id": sid, "title": title, "keys": list(keys), "steps": steps, "state": state, "anchor": sid,
            "attention": False, "headline": None, "facts": [], "table": None, "lines": [], "caveat": cav,
-           "empty_text": EMPTY.get(sid), "links": [], "notes": []}
+           "empty_text": EMPTY.get(sid), "links": [], "notes": [], "flagged": False}
     for k, sec in zip(keys, secs):
         if sec.get("state") in ("failed", "unreadable", "stale"):
             out["notes"].append(f"{sec.get('title') or k}: {plain(rr.stale_note(sec))}")
@@ -610,6 +657,7 @@ def card(sid, title, keys, summary, files):
             tones.append(tone)
     if "attention" in tones:
         out["attention"] = True
+        out["flagged"] = True
     if out["headline"]:
         # The step headline carries its caveat (the Progress tab shows no other); the card prints it below.
         for c in sorted({plain(c) for c in cav}, key=len, reverse=True):
@@ -628,6 +676,7 @@ def card(sid, title, keys, summary, files):
         out["lines"] = [plain(x) for x in got.get("lines") or [] if plain(x) and plain(x) not in notes
                         and plain(x) != out["headline"]]
         out["attention"] = out["attention"] or bool(got.get("attention"))
+        out["flagged"] = out.get("flagged", False) or bool(got.get("attention"))
         out["links"] = _links(got.get("links"), files)
         for k in ("widget", "explore", "image", "hidden", "viewer"):
             if got.get(k):
@@ -635,6 +684,366 @@ def card(sid, title, keys, summary, files):
     return out
 
 
+# --- the Journal: one level per result, the findings, the lead ---------------------------------
+# The live site reads each person's results as a report in ten numbered sections (docs/design/journal/).
+# A finding is one row the summary already holds (a ClinVar hit, a carrier gene, a changed-function
+# medicine gene) with its level on the one scale every page uses. Nothing here grades anything the
+# report does not: each rule below names the field it reads, and a card the report flags that no rule
+# turns into a finding still becomes one, at "review", worded by its own headline.
+
+LEVELS = ("act", "medicine", "review", "carrier", "trust", "info")
+LEVEL_WORDS = {"act": "Take to a doctor", "medicine": "Tell your prescriber", "review": "Worth a look",
+               "carrier": "For family planning", "trust": "Data quality", "info": "For information"}
+# (number, key, title, question). The live run uses the same numbers, so a section being written sits
+# where it will sit in the finished report.
+JOURNAL = (
+    (1, "act", "To act on", "Is there anything to take to a doctor?"),
+    (2, "medicines", "Medicines", "Which medicines should a prescriber know about?"),
+    (3, "family", "For your family", "What could I pass on to a child?"),
+    (4, "look", "Worth a look", "What deserves a conversation, but is not a diagnosis?"),
+    (5, "trust", "Can I trust this?", "This is about the data, not about the person."),
+    (6, "origins", "Origins", "Where do my ancestors come from?"),
+    (7, "traits", "Traits and scores", "What do studies say about traits and risk scores?"),
+    (8, "assessed", "Assessed, no finding", "What each step looked at, and what it does not see."),
+    (9, "cannot", "What it cannot see", "What no step of this run looks at."),
+    (10, "sources", "Sources and files", "The databases, the report and the files behind this page."),
+)
+LEVEL_SECTION = {"act": 1, "medicine": 2, "carrier": 3, "review": 4, "trust": 5}
+CHAPTER_SECTION = {"quality": 5, "clinical": 8, "carrier": 3, "medicines": 2, "ancestry": 6, "traits": 7, "other": 10}
+# What to do, by level: the same few steps for every finding of a level, never advice about one gene.
+PLAN = {
+    "act": ["Bring this page to a doctor or a genetic counsellor.",
+            "Ask for a clinical test in a certified laboratory to confirm it: this pipeline is research software.",
+            "Ask what it means for parents, brothers, sisters and children: close relatives may carry it too."],
+    "medicine": ["Show this to whoever prescribes for you, and to your pharmacist.",
+                 "Do not change a medicine on your own: the guidance is written for the prescriber.",
+                 "Ask for a clinical pharmacogenetic test before a prescription changes."],
+    "review": ["Read the evidence and its caveat below.",
+               "Talk it over with a doctor or a genetic counsellor if it bears on your health or a pregnancy.",
+               "A measurement or a clinical test settles it: this result alone is not a diagnosis."],
+    "carrier": ["A carrier is not affected by the condition.",
+                "It matters when a partner carries a change in the same gene: compare with the couple screen.",
+                "Relatives planning a pregnancy may carry it too."],
+    "trust": ["Read nothing else in this report until this is understood.",
+              "Check the sample's label and the run's inputs, then run it again."],
+}
+STR_WORDS = {"pre_mutation": "premutation range", "full_mutation": "full-mutation range"}
+CARRIER_NOTE = "A carrier has one changed copy of a gene where it takes two to cause the condition."
+
+
+def slug(*parts):
+    """A finding's id: lower case, digits and dashes, at most 80 characters (the route's own pattern)."""
+    raw = "-".join(str(p) for p in parts if p not in (None, ""))
+    t = re.sub(r"[^a-z0-9]+", "-", raw.lower()).strip("-")
+    if len(t) > 80:  # a long allele: cut, and keep two ids apart by a hash of the whole key
+        t = t[:71].rstrip("-") + "-" + hashlib.sha1(raw.encode()).hexdigest()[:8]
+    return t or "finding"
+
+
+FINDING_ID = re.compile(r"^[a-z0-9][a-z0-9-]{0,79}$")
+
+
+def _f(level, card_id, key, title, text, gene=None, detail=None, evidence=(), viewer=None, af=None):
+    return {"id": slug(*key), "level": level, "card": card_id, "title": plain(title), "text": plain(text),
+            "gene": gene, "detail": plain(detail) if detail else None,
+            "evidence": [[plain(a), plain(cell(b))] for a, b in evidence if b not in (None, "", ".")],
+            "viewer": viewer, "af": af}
+
+
+def _data(S, k):
+    sec = S.get(k) or {}
+    return sec.get("data") or {} if sec.get("state") in ("ok", "stale") else {}
+
+
+def _copies(n):
+    return "two copies" if n == "hom" else "one copy" if n == "het" else (n or "genotype not given")
+
+
+def finding_rows(summary):
+    """[finding] from the rows of the summary, each with its level, in the order of the rules."""
+    S = summary.get("sections") or {}
+    out = []
+    sf = (_data(S, "clinical").get("acmg_sf") or {})
+    sf_genes = {x.get("gene") for x in sf.get("clinvar_hits") or []}
+    car = _data(S, "carrier")
+    carrier_genes = {c.get("gene") for c in car.get("carriers") or []}
+    two_hit = {g if isinstance(g, str) else g.get("gene") for g in (car.get("two_hits") or {}).get("genes") or []}
+    # 1. ACMG secondary findings: the gene's own reporting rule already said "report".
+    for r in rr.sf_rows(sf) if sf and not sf.get("unavailable") else []:
+        out.append(_f("act", "clinical-filter", ("sf", r[0], r[1]), f"Secondary finding in {r[0]}",
+                      f"A change in {r[0]} that the ACMG secondary-findings list reports: {r[3]}.",
+                      gene=r[0], detail=f"{r[0]} {r[1]} {r[2] if r[2] != '.' else ''}".strip(),
+                      evidence=[["Variant", r[1]], ["Genotype", r[2]], ["Why it is reported", r[3]]]))
+    # 2. Cancer predisposition, CPSR's pathogenic and likely pathogenic rows.
+    for x in _data(S, "cpsr").get("plp") or []:
+        out.append(_f("act", "cpsr", ("cpsr", x.get("gene"), x.get("variant")),
+                      f"Cancer predisposition ({x.get('gene')})",
+                      f"CPSR grades this change in {x.get('gene')} as {x.get('final')}: it can raise the risk of some "
+                      f"cancers. It is not a diagnosis of cancer.", gene=x.get("gene"),
+                      detail=f"{x.get('gene')} {x.get('variant')}",
+                      evidence=[["Class", x.get("final")], ["ClinVar", x.get("clinvar")],
+                                ["Call", "low confidence" if x.get("low_confidence") else None]]))
+    # 3. Two hits in one carrier-list gene: possibly both copies changed.
+    for g in sorted(x for x in two_hit if x):
+        out.append(_f("act", "carrier-list", ("two-hits", g), f"Two changes in {g}",
+                      f"Two changes were found in {g}, a gene where it takes two to cause the condition. Whether they "
+                      f"sit on different copies decides whether it matters.", gene=g))
+    # 4. ClinVar P/LP hits not already a secondary finding or a carrier row.
+    for h in (_data(S, "clinvar").get("hits") or [])[:50]:
+        g = h.get("gene")
+        if g in sf_genes or g in carrier_genes or g in two_hit:
+            continue
+        var = f"{h.get('chrom')}:{h.get('pos')} {h.get('ref')}>{h.get('alt')}"
+        out.append(_f("review", "clinvar", ("clinvar", g, h.get("chrom"), h.get("pos"), h.get("ref"), h.get("alt")),
+                      f"{h.get('significance') or 'Pathogenic'} change in {g}",
+                      f"ClinVar lists this change in {g} as {str(h.get('significance') or '').lower()}; this genome "
+                      f"has {_copies(h.get('genotype'))}. Whether it matters depends on how the gene is inherited: "
+                      f"a genetic counsellor reads it with the rest of this report.",
+                      gene=g, detail=f"{g} {var} {h.get('genotype') or ''}".strip(),
+                      evidence=[["Significance", h.get("significance")], ["ClinVar review", "★" * int(h.get("stars") or 0) or "0 stars"],
+                                ["Genotype", h.get("genotype")], ["Frequency", rr.af_text(h) or "frequency unknown"],
+                                ["Call", clinvar_call(h)]],
+                      viewer=f"{h.get('chrom')}:{h.get('pos')}", af=h.get("af")))
+    # 5. Large deletions and duplications AnnotSV ranks class 4 or 5.
+    for x in _data(S, "annotsv").get("rows") or []:
+        genes = ", ".join(x.get("genes") or []) or "no gene"
+        out.append(_f("act" if str(x.get("acmg_class")) == "5" else "review", "structural-variants",
+                      ("sv", x.get("sv")), f"Large {x.get('type') or 'structural change'} over {genes}",
+                      f"A {x.get('type') or 'structural change'} of {abs(int(num(x.get('length')) or 0)):,} bases that "
+                      f"AnnotSV ranks class {x.get('acmg_class')}. Short reads can misplace large changes: confirm it.",
+                      gene=(x.get("genes") or [None])[0], detail=x.get("sv"),
+                      evidence=[["Class", x.get("acmg_class")], ["Callers", rr.annotsv_support_text(x)],
+                                ["Genotype", x.get("gt")]], viewer=str(x.get("sv") or "").replace(" ", "") or None))
+    # 6. Repeat expansions outside Stranger's "normal", or in an intermediate zone.
+    for l in _data(S, "expansions").get("loci") or []:
+        st = [x for x in (l.get("status") or "").split(",") if x and x != "normal"]
+        if not st and not l.get("zone"):
+            continue
+        full = any("full" in x for x in st)
+        lead_st = next((x for x in st if "full" in x), st[0]) if st else None
+        what = (STR_WORDS.get(lead_st, lead_st.replace("_", " ")) if lead_st
+                else f"{l.get('zone_label') or 'intermediate'} range")
+        count = rr.str_count(l) if l.get("repeat_count") else "not given"
+        out.append(_f("act" if full else "review", "expansions", ("str", l.get("locus")),
+                      f"{l.get('locus')} repeat in the {what}",
+                      f"{l.get('locus')} has {count} repeats: Stranger reads it as \"{what}\". "
+                      f"{'See a clinical geneticist.' if full else 'It may grow when passed on; worth a word with a genetic counsellor.'}",
+                      gene=l.get("locus"), detail=f"{l.get('locus')} {count} repeats",
+                      evidence=[["Repeats", count], ["95% interval", l.get("ci")],
+                                ["Pathologic from", l.get("pathologic_min")],
+                                ["Sizing", l.get("allele_sizing") or l.get("sizing")]]))
+    v = _data(S, "vntyper")
+    if v.get("status") in ("positive", "possible"):
+        out.append(_f("act" if v["status"] == "positive" else "review", "vntyper", ("muc1", v["status"]),
+                      f"MUC1 kidney gene: {v['status']}", f"VNtyper reads the MUC1 repeat as {v['status']}; it needs a "
+                      f"clinical confirmation.", gene="MUC1", evidence=[["Confidence", v.get("confidence")]]))
+    lp = _data(S, "lpa")
+    if lp.get("flag") == "high":
+        out.append(_f("review", "lpa", ("lpa",), "Lp(a) likely high",
+                      "The KIV-2 count suggests a high Lp(a); one blood measurement settles it.", gene="LPA",
+                      evidence=[["KIV-2 repeats", lp.get("kiv2_copies")], ["Class", lp.get("class")]]))
+    for c in _data(S, "chip").get("calls") or []:
+        out.append(_f("review", "chip", ("chip", c.get("gene"), c.get("protein_change")),
+                      f"A blood clone in {c.get('gene')} (CHIP)",
+                      f"{c.get('gene')} {c.get('protein_change') or ''} is carried by a share of the blood cells (VAF "
+                      f"{c.get('vaf')}). It becomes common with age; most people with it never get a blood cancer.",
+                      gene=c.get("gene"), evidence=[["VAF", c.get("vaf")], ["Reads", f"{c.get('alt_reads')} of {c.get('depth')}"]]))
+    for c in _data(S, "mosaic").get("calls") or []:
+        out.append(_f("review", "mosaic-mca", ("mca", c.get("chrom"), c.get("start")),
+                      f"A {c.get('type') or 'change'} on {c.get('chrom')} in some blood cells",
+                      f"MoChA sees a {c.get('type') or 'change'} of {c.get('length_mb')} Mb on {c.get('chrom')} in a share "
+                      f"of the blood cells ({c.get('cell_fraction')}).",
+                      evidence=[["Where", f"{c.get('chrom')}:{c.get('start')}-{c.get('end')}"],
+                                ["Cell fraction", c.get("cell_fraction")]]))
+    for x in (_data(S, "exomiser").get("genes") or [])[:3]:
+        out.append(_f("review", "exomiser", ("exomiser", x.get("gene")), f"Symptom ranking: {x.get('gene')} ranks {x.get('rank')}",
+                      "A ranking to bring to a clinical geneticist, not a diagnosis.", gene=x.get("gene"),
+                      evidence=[["Score", x.get("exomiser_score")], ["Inheritance", x.get("moi")]]))
+    # 7. Carriers: one changed copy in a gene of the carrier list, and the couple screen.
+    for c in car.get("carriers") or []:
+        if c.get("gene") in two_hit:
+            continue
+        gt = str(c.get("genotype") or "")
+        if gt in ("hom", "hemizygous"):
+            # Both copies changed, or the only copy (X in a male, or inside a deletion): not a carrier.
+            out.append(_f("act", "carrier-list", ("carrier", c.get("gene"), c.get("variant")),
+                          f"{c.get('condition') or c.get('gene')}: {'two changed copies' if gt == 'hom' else 'the only copy changed'}",
+                          f"This genome has {'two changed copies' if gt == 'hom' else 'no unchanged copy'} of "
+                          f"{c.get('gene')}, a gene of {c.get('condition') or 'a condition on the carrier list'} "
+                          f"({c.get('inheritance') or 'inheritance not given'}). That is not the pattern of a carrier: "
+                          f"a doctor or genetic counsellor reads it.",
+                          gene=c.get("gene"), detail=f"{c.get('gene')} {c.get('variant') or ''} {gt}".strip(),
+                          evidence=[["Genotype", gt], ["Significance", c.get("significance")], ["Stars", c.get("stars")],
+                                    ["Inheritance", c.get("inheritance")]]))
+            continue
+        out.append(_f("carrier", "carrier-list", ("carrier", c.get("gene"), c.get("variant")),
+                      f"{c.get('condition') or c.get('gene')} carrier" if c.get("condition") else f"Carrier in {c.get('gene')}",
+                      f"{CARRIER_NOTE} This genome has one changed copy of {c.get('gene')}: a carrier, not affected.",
+                      gene=c.get("gene"), detail=f"{c.get('gene')} {c.get('variant') or ''}".strip(),
+                      evidence=[["Significance", c.get("significance")], ["Stars", c.get("stars")],
+                                ["Inheritance", c.get("inheritance")]]))
+    cp = _data(S, "couple")
+    for lab, key in (("Both partners carry", "shared"), ("X-linked", "x_linked")):
+        for x in cp.get(key) or []:
+            out.append(_f("carrier", "couple", ("couple", key, x.get("gene")), f"{lab} {x.get('gene')}"
+                          if key == "shared" else f"X-linked finding in {x.get('gene')}",
+                          f"{x.get('condition') or x.get('gene')}: {x.get('risk') or 'see the couple screen'} for each "
+                          f"pregnancy, with {cp.get('partner')}.", gene=x.get("gene"),
+                          evidence=[["Chance for a child", x.get("risk")], ["Partner", cp.get("partner")]]))
+    smn1 = [g for g in _data(S, "paralogs").get("genes") or [] if g.get("gene") == "SMN1" and g.get("status") == "called"]
+    one = smn1 and str(smn1[0].get("copy_number")) == "1"
+    by = "Paraphase"
+    if not smn1:  # no Paraphase call: Parascopy's resolved count from short reads
+        cn = ((_data(S, "parascopy").get("smn1") or {}).get("cn"))
+        one, by = cn == 1, "Parascopy"
+    if one:
+        out.append(_f("carrier", "paralogs", ("smn1",), "Spinal muscular atrophy carrier (SMN1)",
+                      "One copy of SMN1 where most people have two: a carrier of spinal muscular atrophy, not "
+                      "affected.", gene="SMN1", evidence=[["SMN1 copies", "1"], ["Called by", by]]))
+    # 8. Medicines: each gene whose called phenotype changes function.
+    for g in _data(S, "cpic").get("genes") or []:
+        if g.get("status") not in ("non-normal", "ambiguous"):
+            continue
+        amb = g["status"] == "ambiguous"
+        out.append(_f("medicine", "cpic", ("pgx", g.get("gene")),
+                      f"{g.get('gene')}: {g.get('phenotype')}" if not amb else f"{g.get('gene')}: more than one possible result",
+                      f"{g.get('gene')} {g.get('diplotype')} reads as \"{g.get('phenotype')}\" in CPIC's words. The drugs "
+                      f"it bears on are in the CPIC report; tell whoever prescribes.", gene=g.get("gene"),
+                      detail=f"{g.get('gene')} {g.get('diplotype')}",
+                      evidence=[["Diplotype", g.get("diplotype")], ["Phenotype", g.get("phenotype")], ["Status", g.get("status")]]))
+    # 9. Trust: a problem with the data itself.
+    q = _data(S, "sample_qc")
+    if q.get("sex_check") == "mismatch":
+        out.append(_f("trust", "qc", ("sex",), "Declared and measured sex differ",
+                      "The sex the reads show differs from the one declared: a swapped or mislabelled sample, or a real "
+                      "sex-chromosome difference.", evidence=[["Declared", q.get("declared_sex")], ["From the reads", q.get("inferred_sex")]]))
+    if q.get("contamination") == "warn":
+        out.append(_f("trust", "qc", ("contamination",), "Another person's DNA may be mixed in",
+                      rr.freemix_text(q), evidence=[["FREEMIX", q.get("freemix")]]))
+    if q.get("same_person_as"):
+        out.append(_f("trust", "qc", ("same-person",), f"The same person as {q['same_person_as']}",
+                      "Two runs of this server hold the same genome.", evidence=[["Matches", q["same_person_as"]]]))
+    seen, uniq = set(), []
+    for x in out:
+        if x["id"] not in seen:
+            seen.add(x["id"])
+            uniq.append(x)
+    return uniq
+
+
+def level_of(card, found):
+    """A card's level: its highest finding's, else data quality for the quality chapter, else review
+    when the report flags it, else information. A failed or missing card has no level (None)."""
+    if card.get("state") in ("missing", "failed"):
+        return None
+    mine = [f["level"] for f in found if f["card"] == card["id"]]
+    for lv in LEVELS:
+        if lv in mine:
+            return lv
+    if card.get("chapter") == "quality":
+        return "trust"
+    return "review" if card.get("flagged") else "info"
+
+
+def journal(chapters, summary):
+    """findings, levels and the ten sections of one person's report, from the cards build() made."""
+    found = finding_rows(summary)
+    cards = []
+    for ch in chapters:
+        for c in ch["sections"]:
+            c["chapter"] = ch["key"]
+            cards.append(c)
+    by_id = {c["id"]: c for c in cards}
+    have = {f["card"] for f in found}
+    # A card the report flags (its headline or its own rule), for which no row rule found a finding,
+    # still becomes one: worded by its headline, at review.
+    for c in cards:
+        if c.get("flagged") and c["id"] not in have and c.get("state") not in ("missing", "failed"):
+            lv = "trust" if c["chapter"] == "quality" else "review"
+            found.append(_f(lv, c["id"], ("card", c["id"]), c["title"], c.get("headline") or
+                            f"The report flags this section: {c['title']}.", evidence=(c.get("facts") or [])[:4]))
+    for f in found:
+        c = by_id.get(f["card"]) or {}
+        f["section"] = LEVEL_SECTION[f["level"]]
+        f["steps"] = c.get("steps") or []
+        f["caveat"] = c.get("caveat") or []
+        f["anchor"] = c.get("anchor") or f["card"]
+        f["plan"] = PLAN[f["level"]]
+        f["level_words"] = LEVEL_WORDS[f["level"]]
+    for c in cards:
+        c["level"] = level_of(c, found)
+        lv = [f["level"] for f in found if f["card"] == c["id"]]
+        top = next((x for x in LEVELS if x in lv), None)
+        home = CHAPTER_SECTION.get(c["chapter"], 10)
+        if c["chapter"] == "clinical" and top in LEVEL_SECTION:
+            home = LEVEL_SECTION[top]
+        c["section"] = home
+        c["findings"] = [f["id"] for f in found if f["card"] == c["id"]]
+    for f in found:
+        f["related"] = [g["id"] for g in found if g["id"] != f["id"] and
+                        ((f["gene"] and g["gene"] == f["gene"]) or g["card"] == f["card"])][:6]
+    sections = []
+    for n, key, title, question in JOURNAL:
+        sections.append({"n": n, "key": key, "title": title, "question": question,
+                         "findings": [f["id"] for f in found if f["section"] == n],
+                         "cards": [c["id"] for c in cards if c["section"] == n]})
+    levels = {lv: sum(1 for f in found if f["level"] == lv) for lv in LEVELS if lv != "info"}
+    levels["info"] = sum(1 for c in cards if c["level"] == "info")
+    return found, levels, sections
+
+
+def _names(found, n=3):
+    t = [f["title"] for f in found[:n]]
+    more = len(found) - len(t)
+    s = ", ".join(t[:-1]) + (" and " if len(t) > 1 else "") + t[-1] if t else ""
+    return s + (f", and {more} more" if more > 0 else "")
+
+
+def _count(n, one, many):
+    words = {1: "one", 2: "two", 3: "three", 4: "four", 5: "five", 6: "six", 7: "seven", 8: "eight", 9: "nine"}
+    return f"{words.get(n, n)} {one if n == 1 else many}"
+
+
+def lead(found, levels, summary):
+    """The report's lead paragraph: [[text, bold]] segments (a third item "act" marks the names of the
+    findings to act on), plain sentences that name the findings by level. It never says a section is fine: with no finding of a level it says what was assessed."""
+    S = summary.get("sections") or {}
+    by = {lv: [f for f in found if f["level"] == lv] for lv in LEVELS}
+    out = []
+    if by["trust"]:
+        out += [["Read the data-quality section first: ", True], [_names(by["trust"]) + ". ", False]]
+    if by["act"]:
+        n = len(by["act"])
+        out += [["Of everything this genome was screened for, ", False],
+                [_count(n, "finding should", "findings should") + " go to a doctor", True],
+                [": " + _names(by["act"]) + ". ", False, "act"]]  # "act": the names a child's page keeps closed
+    elif any((S.get(k) or {}).get("state") in ("ok", "stale") for k in ("clinvar", "clinical", "cpsr")):
+        out += [["No finding in what these steps assessed needs a doctor; ", True],
+                ["sections 8 and 9 say what they do not see. ", False]]
+    else:  # no clinical screen has a result: saying nothing needs a doctor would read as an all-clear
+        out += [["The clinical screens have no result yet; ", True],
+                ["section 9 lists the steps that did not run. ", False]]
+    if by["medicine"]:
+        genes = sorted({f["gene"] for f in by["medicine"] if f["gene"]})
+        out += [[_count(len(by["medicine"]), "medicine result", "medicine results").capitalize(), True],
+                [f" bear{'s' if len(by['medicine']) == 1 else ''} on how drugs work ({', '.join(genes)}): tell whoever prescribes. ", False]]
+    if by["carrier"]:
+        out += [[f"A carrier of {_names(by['carrier'], 2)}", True],
+                [": carriers are not affected; it matters when a partner carries the same gene. ", False]]
+    if by["review"]:
+        out += [[_count(len(by["review"]), "result is", "results are").capitalize() + " worth a look", True],
+                [": " + _names(by["review"]) + ". ", False]]
+    cov = _data(S, "coverage").get("mean_depth")
+    q = _data(S, "sample_qc")
+    checked = q.get("contamination") == "ok" and q.get("sex_check") == "ok"  # both ran and raised nothing
+    if not by["trust"] and isinstance(cov, (int, float)):
+        out.append([f"Mean depth {cov:.1f}×" + ("; the identity and contamination checks raised no flag." if checked
+                    else "; the identity and contamination checks have no result here: section 5 says why."), False])
+    if out:
+        out[-1][0] = out[-1][0].rstrip()
+    return out
+
+
 def build(sample, summary, files=()):
     """results.json of one person from a summary.json; files: the run's paths the report links (for links)."""
     summary = summary or {}
@@ -648,8 +1057,12 @@ def build(sample, summary, files=()):
     sexc = (S.get("sex_check") or {}).get("data") or {}
     person = {"sample": sample, "declared_sex": (summary.get("run") or {}).get("declared_sex"),
               "inferred_sex": sexc.get("inferred_sex"), "karyotype": sexc.get("karyotype")}
+    found, levels, sections = journal(chapters, summary)
     return {"schema_version": SCHEMA, "sample": sample, "generated_utc": summary.get("generated_utc"),
             "person": person, "chapters": chapters,
+            "findings": found, "levels": levels, "journal": sections, "lead": lead(found, levels, summary),
+            "level_words": LEVEL_WORDS, "databases": {k: plain(cell(v)) for k, v in (summary.get("databases") or {}).items()
+                                                      if isinstance(v, (str, int, float))},
             "attention": sum(c["attention"] for c in chapters),
             "not_assessed": [plain(x) for x in summary.get("not_assessed") or []],
             "not_run": [plain(x) for x in summary.get("not_run") or []],
@@ -662,6 +1075,20 @@ def attention_count(summary):
     return build("", summary)["attention"]
 
 
+def overview(summary):
+    """What the home page shows of one person: the attention count, the counts by level, the findings to
+    act on first (at most four, by level) and the lead as plain text. No file read."""
+    r = build("", summary)
+    order = {lv: i for i, lv in enumerate(LEVELS)}
+    order["trust"] = -1  # a problem with the data comes before any finding read from it
+    top = sorted((f for f in r["findings"] if f["level"] != "info"), key=lambda f: order[f["level"]])[:4]
+    return {"attention": r["attention"], "levels": r["levels"],
+            "top": [{"id": f["id"], "level": f["level"], "title": f["title"]} for f in top],
+            "lead": "".join(x[0] for x in r["lead"]),
+            # The same lead with the names of the findings to act on left out: a child's tile shows this one.
+            "lead_closed": "".join(x[0] if x[2:] != ["act"] else ": closed until opened on purpose. " for x in r["lead"])}
+
+
 def strings(obj):
     """Every string in a JSON value, with its key path: the wording gate's input."""
     if isinstance(obj, dict):
diff --git a/bin/owngenome_live.py b/bin/owngenome_live.py
index eaa7a993..d0df1e16 100755
--- a/bin/owngenome_live.py
+++ b/bin/owngenome_live.py
@@ -89,7 +89,7 @@
 RUN_RE = re.compile(r"^[A-Za-z0-9][A-Za-z0-9._-]*$")  # validate_sample in scripts/lib/common.sh
 ASSET_RE = re.compile(r"^(?:plugins/)?[A-Za-z0-9][A-Za-z0-9._-]*$")
 # The page templates of assets/live: served filled in, never as an asset.
-PAGES = ("index.html", "login.html", "home.html", "family.html")
+PAGES = ("index.html", "login.html", "home.html", "family.html", "finding.html")
 TYPES = {".html": "text/html; charset=utf-8", ".js": "text/javascript; charset=utf-8", ".css": "text/css; charset=utf-8",
          ".json": "application/json", ".txt": "text/plain; charset=utf-8", ".tsv": "text/plain; charset=utf-8",
          ".md": "text/plain; charset=utf-8", ".svg": "image/svg+xml", ".png": "image/png", ".pdf": "application/pdf"}
@@ -524,6 +524,7 @@ def __init__(self, app, cfg, password_hash):
         self.streams = threading.BoundedSemaphore(cfg.max_streams)
         self.headline_cache = {}
         self.attention_cache = {}
+        self.live_overview = {}  # run -> (the headline cache key, live_results.overview of that summary)
         self.allowed = set(LOOPBACK_HOSTS) | {h.lower() for h in cfg.allowed_host or []}
         if cfg.bind not in ("0.0.0.0", "::"):
             self.allowed.add(cfg.bind.strip("[]").lower())
@@ -782,6 +783,12 @@ def index_page(self, kind=None):
     def attention(self, d):
         """(count of cards worth a look, mtime) from <run>/summary.json alone, cached by its mtime;
         (None, None) without one. The home page reads no result file beyond that."""
+        o, mtime = self.overview(d)
+        return (o["attention"] if o else None), mtime
+
+    def overview(self, d):
+        """(live_results.overview of <run>/summary.json, mtime), cached by its mtime; (None, None) without one:
+        the attention count, the counts by level, the first findings and the lead the home page shows."""
         p = os.path.join(d, "summary.json") if d else None
         if not p or not self.inside(p, os.path.realpath(d)) or not self.inside(p, self.root):
             return None, None  # a summary.json linking out of its run is never read
@@ -797,7 +804,7 @@ def attention(self, d):
         try:
             import live_results
             with open(p) as f:
-                n = live_results.attention_count(json.load(f))
+                n = live_results.overview(json.load(f))
         except Exception as e:  # one bad file must not take the home page down
             print(f"owngenome_live: {os.path.basename(os.path.dirname(p))}/summary.json not read: {type(e).__name__}",
                   file=sys.stderr)
@@ -807,11 +814,14 @@ def attention(self, d):
 
     def runs_index(self):
         """/runs.json: each run's progress, and the families with their members, for the home page.
-        No result beyond the attention count; no path."""
+        No result beyond the attention count, the counts by level, the titles of the first four
+        findings and the lead; no path."""
         runs = self.runs()
         # Forget the cached results of runs that are gone, so the caches hold only the runs there are.
         for k in [k for k in list(self.headline_cache) if k not in runs]:
             self.headline_cache.pop(k, None)
+        for k in [k for k in list(self.live_overview) if k not in runs]:
+            self.live_overview.pop(k, None)
         keep = {os.path.join(r["dir"] or os.path.join(self.root, n), "summary.json") for n, r in runs.items()}
         for k in [k for k in list(self.attention_cache) if k not in keep]:
             self.attention_cache.pop(k, None)
@@ -827,8 +837,25 @@ def runs_index(self):
                             running=sum(1 for s in planned if s["state"] == "running"),
                             failed=sum(1 for s in planned if s["state"] == "failed"))
                 # A run known from its messages alone still has its folder under the root once step 24 wrote there.
-                item["attention"], mtime = self.attention(r["dir"] or os.path.join(self.root, name))
+                o, mtime = self.overview(r["dir"] or os.path.join(self.root, name))
+                # While a run goes, the summary its page last read (results.json's own) is newer than
+                # summary.json: count from it, so the home never says less than the person page.
+                hit = self.headline_cache.get(name) if item["state"] == "running" else None
+                if hit and hit[2]:
+                    lo = self.live_overview.get(name)
+                    if not lo or lo[0] != hit[0]:
+                        try:
+                            import live_results
+                            lo = (hit[0], live_results.overview(hit[2]))
+                        except Exception as e:  # one bad summary must not take the home page down
+                            print(f"owngenome_live: overview of {name} not built: {type(e).__name__}", file=sys.stderr)
+                            lo = (hit[0], None)
+                        self.live_overview[name] = lo
+                    o = lo[1] or o
+                item["attention"] = o["attention"] if o else None
                 item["results"] = mtime is not None
+                if o:  # the Journal home: counts by level, the first findings, the lead
+                    item.update(levels=o["levels"], top=o["top"], lead=o["lead"], lead_closed=o["lead_closed"])
             else:
                 item["members"] = r.get("members") or []
             out.append(item)
diff --git a/bin/owngenome_live_family.py b/bin/owngenome_live_family.py
index 17ec9f87..40afb3d1 100644
--- a/bin/owngenome_live_family.py
+++ b/bin/owngenome_live_family.py
@@ -15,8 +15,13 @@
                                 the state below, the pedigree's layout (so each
                                 person is a link), the relationship and shared-
                                 segment rows with their measured numbers, each
-                                couple's gene rows, and each member's run progress
-                                and attention count (from its summary.json only)
+                                couple's gene rows, each child's inherited
+                                stretches (<child>_segments.tsv), the de novo and
+                                compound-het candidates (de_novo.tsv,
+                                compound_het.tsv), each member's run progress and
+                                attention count, and the members side by side:
+                                CYP2D6, the CPIC genes, HLA, the haplogroups and
+                                the blood groups (from each summary.json only)
 
 state.json gets plugins.family: {"kind": "family", ...} on a family's page,
 {"kind": "member", "families": [...]} on the page of a sample in a family,
@@ -182,7 +187,8 @@ def family_page(name, d):
     st = family_state(name, d)
     import render_report  # the couple screen's caveat, word for word
     out = {"state": st, "layout": None, "relationships": [], "ibd_pairs": [], "couples": {},
-           "couple_note": render_report.COUPLE_NOTE}
+           "couple_note": render_report.COUPLE_NOTE, "segments": {}, "de_novo": [], "compound_het": [],
+           "trio_files": {}, "side_by_side": None}
     if st.get("error"):
         return out
     order, members = members_of(d)
@@ -200,6 +206,9 @@ def family_page(name, d):
                 "partner_b", "findings_b", "explanation")
         rows = sorted(({k: r.get(k) for k in keep} for r in rows), key=lambda r: order_of.get(r.get("result"), 3))
         out["couples"]["%s %s" % (a, b)] = rows
+    out.update(child_depth(d, order, members))
+    import report_charts  # GRCh38's lengths, for the painting of each child's stretches
+    out["chrom_lengths"] = [[c, n] for c, n in report_charts.GRCH38 if c != "chrY"]
     # Step 38 writes the verdict "ok" for a pair that matches its declared relation. The page says that
     # in words: no word on the page reads as an all-clear (state.json keeps the file's own value).
     out["state"] = dict(st, relationships=[dict(r, verdict=verdict_words(r.get("verdict")))
@@ -209,10 +218,107 @@ def family_page(name, d):
     return out
 
 
+SEGMENT_KEYS = ("side", "parent", "chrom", "start", "end", "length_bp", "sites", "discordant", "ancestor", "basis")
+DE_NOVO_KEYS = ("child", "chrom", "pos", "ref", "alt", "child_gt", "father_gt", "mother_gt", "child_dp", "child_gq",
+                "child_ab", "quality")
+COMP_KEYS = ("child", "gene", "variant_a", "variant_b", "a_from", "b_from", "phase")
+PHASE_ORDER = {"in trans": 0, "unknown": 1, "in cis": 2}
+
+
+def child_depth(d, order, members):
+    """Each child's stretches (step 38's <child>_segments.tsv) and the trio tables, as the steps wrote them:
+    {segments: {child: [rows]}, de_novo: [rows], compound_het: [rows, in trans first]}."""
+    segs = {}
+    for s in order:
+        if not (members[s]["father"] or members[s]["mother"]):
+            continue
+        rows = read_tsv(os.path.join(d, "%s_segments.tsv" % s))
+        if rows:
+            segs[s] = [{k: r.get(k) for k in SEGMENT_KEYS} for r in rows]
+    comp = [{k: r.get(k) for k in COMP_KEYS} for r in read_tsv(os.path.join(d, "compound_het.tsv"))]
+    comp.sort(key=lambda r: PHASE_ORDER.get(r.get("phase"), 1))
+    return {"segments": segs,
+            "de_novo": [{k: r.get(k) for k in DE_NOVO_KEYS} for r in read_tsv(os.path.join(d, "de_novo.tsv"))],
+            "compound_het": comp,
+            # read_tsv's own test: a link out of the family folder counts as not there
+            "trio_files": {f: os.path.isfile(os.path.join(d, f)) and inside(os.path.join(d, f), os.path.abspath(d))
+                           for f in ("de_novo.tsv", "compound_het.tsv")}}
+
+
+def _sec(summary, key):
+    sec = ((summary or {}).get("sections") or {}).get(key) or {}
+    return sec.get("data") or {} if sec.get("state") in ("ok", "stale") else None
+
+
+def side_values(summary):
+    """[(group, label, value)] of one member's summary.json, as its report prints them; nothing computed."""
+    out = []
+    c = (summary or {}).get("cyp2d6") or {}
+    calls = ", ".join("%s %s" % (k, v) for k, v in (c.get("calls") or {}).items() if v)
+    if calls:
+        agree = c.get("agree")
+        out.append(("Medicines", "CYP2D6 (callers)", calls + (" (callers agree)" if agree else " (callers differ)" if agree is False
+                                                     else "")))
+    cpic = _sec(summary, "cpic")
+    for g in (cpic or {}).get("genes") or []:
+        ph = g.get("phenotype")
+        out.append(("Medicines", g.get("gene"), "%s%s" % (g.get("diplotype") or ".", ' "%s"' % ph if ph else "")))
+    for l in (_sec(summary, "hla") or {}).get("loci") or []:
+        out.append(("HLA", l.get("gene"), " ".join(l.get("alleles") or []) or "not typed"))
+    mt = _sec(summary, "haplogroup")
+    if mt is not None:
+        out.append(("Haplogroups", "Mitochondrial", mt.get("haplogroup") or "."))
+    y = _sec(summary, "y_tree") or _sec(summary, "y_haplogroup")
+    if y is not None:
+        out.append(("Haplogroups", "Y chromosome", y.get("haplogroup") or "."))
+    bt = _sec(summary, "bloodtype")
+    if bt is not None:
+        out.append(("Blood groups", "ABO", bt.get("abo") or next((x.get("phenotype") for x in bt.get("systems") or []
+                                                                  if x.get("system") == "ABO"), ".")))
+        out.append(("Blood groups", "RhD", bt.get("rhd") or next((x.get("phenotype") for x in bt.get("systems") or []
+                                                                  if x.get("system") == "RhD"), ".")))
+    return out
+
+
+def side_by_side(names, summaries):
+    """The members' results in one table: {members, rows: [{group, label, values}]}. A member with no
+    summary.json yet says so in its column; a row a member's summary does not have is '.'."""
+    per = {n: side_values(summaries.get(n)) for n in names}
+    rows, seen = [], {}
+    for n in names:
+        for g, label, _ in per[n]:
+            if (g, label) not in seen:
+                seen[(g, label)] = len(rows)
+                rows.append({"group": g, "label": label, "values": []})
+    groups = ["Medicines", "HLA", "Haplogroups", "Blood groups"]
+    rows.sort(key=lambda r: (groups.index(r["group"]) if r["group"] in groups else 9, seen[(r["group"], r["label"])]))
+    for r in rows:
+        for n in names:
+            if summaries.get(n) is None:
+                r["values"].append("no summary yet")
+            else:
+                r["values"].append(next((v for g, lab, v in per[n] if (g, lab) == (r["group"], r["label"])), "."))
+    return {"members": list(names), "rows": rows}
+
+
 def verdict_words(v):
     return "matches the declared relation" if (v or "").strip().lower() == "ok" else v
 
 
+def member_summary(live, d):
+    """A member run's summary.json as a dict, or None (none yet, unreadable, or a link out of the run)."""
+    import json
+    p = os.path.join(d, "summary.json") if d else None
+    if not p or not os.path.isfile(p) or not live.inside(p, os.path.realpath(d)) or not live.inside(p, live.root):
+        return None
+    try:
+        with open(p) as f:
+            got = json.load(f)
+    except (OSError, ValueError):
+        return None
+    return got if isinstance(got, dict) else None
+
+
 def member_state(root, sample):
     fams = []
     for name, d in family_dirs(root):
@@ -262,6 +368,14 @@ def page_data(req, m):
                                  "planned": len(planned), "done": sum(1 for s in planned if s["state"] == "done"),
                                  "attention": n, "results": mtime is not None}
         out["runs"] = runs
+        # The members side by side, from each sequenced member's summary.json alone (read as the home
+        # page's attention count reads it: never a file linking out of its run).
+        seq = [p["sample"] for p in out["state"].get("members") or [] if p.get("sequenced")]
+        sums = {}
+        for s_ in seq:
+            r = live.run(s_) if live else None
+            sums[s_] = member_summary(live, r["dir"] or os.path.join(live.root, r["name"])) if r else None
+        out["side_by_side"] = side_by_side(seq, sums) if seq else None
         app.log("family", name, "family.json", 200)
         return req.send_json(out)
 
diff --git a/bin/owngenome_live_results.py b/bin/owngenome_live_results.py
index 1684cf04..e3698175 100644
--- a/bin/owngenome_live_results.py
+++ b/bin/owngenome_live_results.py
@@ -2,7 +2,10 @@
 
   GET /runs/<run>/results.json   bin/live_results.py's build() of the run's summary: the
                                  report's seven chapters, one card per section with its
-                                 facts, its rows, its caveats and its attention flag
+                                 facts, its rows, its caveats and its attention flag, and
+                                 the Journal's findings, levels, lead and ten sections
+  GET /runs/<run>/finding/<id>/  one finding's page (assets/live/finding.html): 404 unless
+                                 <id> is a finding of that run's results.json now
 
 The summary is the one the server already reads for the step headlines
 (Live.summary): the run's summary.json when step 24 wrote it after every done
@@ -11,8 +14,10 @@
 summary.json is never served: no run_file glob is added, and results.json holds
 what the report prints. Every request writes one access-log row.
 """
+import html
 import os
 import sys
+import urllib.parse
 
 HERE = os.path.dirname(os.path.abspath(__file__))
 sys.path.insert(0, HERE)
@@ -49,3 +54,40 @@ def results(req, m):
 
     app.route("GET", r"/runs/(%s)/results\.json" % NAME, results)
 
+    def finding(req, m):
+        """One finding's page. The page itself reads ../../results.json; this only checks that the id is
+        a finding of the run now, so a typed or stale address is a plain 404, never an empty page."""
+        live = req.live
+        # A page: without a session it sends the browser to the login and back, as the viewer does.
+        if live.password_hash and req.sid is None:
+            app.log("finding", m.group(1), "-", 303)
+            return req.send_body(303, "text/plain", "", [("Location", "/login?next=" + urllib.parse.quote(
+                urllib.parse.urlsplit(req.path).path))])
+        run = live.run(m.group(1))
+        fid = m.group(2)
+        ok = False
+        if run and run.get("kind") != "family" and live_results_mod().FINDING_ID.match(fid):
+            try:
+                d = run["dir"] or os.path.join(live.root, run["name"])
+                summary = live.summary(run["name"], d, live.base_state(run))
+                ok = bool(summary) and any(f["id"] == fid for f in live_results_mod().build(run["name"], summary)["findings"])
+            except Exception as e:  # a reader bug is a 404 here, never a 500
+                print(f"owngenome_live: finding of {run['name']} not checked: {type(e).__name__}", file=sys.stderr)
+        if not ok:
+            app.log("finding", m.group(1), "-", 404)
+            return req.send_body(404, "text/plain; charset=utf-8", "not found\n")
+        with open(os.path.join(live.cfg.assets, "finding.html")) as f:
+            page = f.read()
+        page = (page.replace("{{assets}}", "/assets").replace("{{run}}", html.escape(run["name"]))
+                .replace("{{finding}}", html.escape(fid)).replace("{{mode}}", "live"))
+        app.log("finding", run["name"], fid, 200)
+        return req.send_body(200, "text/html; charset=utf-8", page)
+
+    # auth=False: finding() asks for the login itself, so a bookmarked finding leads to the login form.
+    app.route("GET", r"/runs/(%s)/finding/([^/]{1,200})/" % NAME, finding, auth=False)
+
+
+def live_results_mod():
+    import live_results
+    return live_results
+
diff --git a/bin/report_charts.py b/bin/report_charts.py
index c38a8c6f..394f69b9 100755
--- a/bin/report_charts.py
+++ b/bin/report_charts.py
@@ -21,9 +21,12 @@
             is the report's own note; a score of the other sex, or one with no
             percentile, says "no percentile" and is never placed.
   genome    the chromosomes 1 to 22, X and Y of GRCh38 with the runs of
-            homozygosity of 5 MB or more and a tick for each ClinVar hit;
+            homozygosity of 5 MB or more, a tick for each ClinVar hit, an
+            outlined span for each AnnotSV class 4 or 5 SV and a bar under the
+            chromosome for each mosaic chromosomal alteration MoChA reports;
             drawn in the ROH section, so only when ROH ran.
-            Hits on chrM and on other contigs are counted in not_drawn.
+            Hits, SVs and calls on chrM and on other contigs are counted in
+            not_drawn.
   mito      the heteroplasmic chrM sites by position and allele fraction, the
             D-loop poly-C length variants marked apart.
 
@@ -31,7 +34,8 @@
 not_drawn}: section is the collect_summary.SECTIONS key whose data it shows;
 each mark is {id, label, value, low, high, chrom, pos, end, tone, anchor,
 locus, detail}, with None for what does not apply; a ClinVar tick on the
-genome chart also carries the ClinVar caveat, the chart's own being ROH's. anchor is the id of the
+genome chart also carries the ClinVar caveat, an SV span AnnotSV's and a MoChA
+bar MoChA's, the chart's own being ROH's. anchor is the id of the
 report element the mark links to (the ClinVar hits table, or the section); locus
 is "chrom:pos" or "chrom:start-end" for the genome viewer. The caveat text
 is passed in by the caller (notes), never written here, so the chart and the
@@ -222,7 +226,44 @@ def genome_chart(S, notes):
                               detail=f"{h.get('significance') or '.'}, {h.get('stars')} star"
                               f"{'' if h.get('stars') == 1 else 's'}, {h.get('genotype') or '.'}"
                               + (", low-confidence call" if low else "")))
-    return spec("genome", "roh", "ideogram", "Runs of homozygosity and ClinVar hits on the chromosomes", notes,
+    if _ok(S, "annotsv"):
+        for i, r in enumerate(S["annotsv"]["data"].get("rows") or []):
+            sv = str(r.get("sv", ""))
+            # AnnotSV writes SV_chrom without the chr prefix: put it back, as collect_summary does.
+            m = REGION_RE.match(sv if sv.startswith("chr") else "chr" + sv)
+            if not m or m.group(1) not in CHROM_LEN:
+                not_drawn["AnnotSV class 4 and 5 SVs on other contigs"] = \
+                    not_drawn.get("AnnotSV class 4 and 5 SVs on other contigs", 0) + 1
+                continue
+            chrom, start, end = m.group(1), int(m.group(2)), int(m.group(3))
+            genes = ", ".join((r.get("genes") or [])[:5]) or "no gene"
+            marks.append(mark(f"sv-{i}", f"{r.get('type') or 'SV'} {r['sv']} (AnnotSV class {r.get('acmg_class')})",
+                              r.get("acmg_class"), chrom=chrom, pos=start, end=max(end, start), tone="attention",
+                              anchor="structural-variants", locus=f"{chrom}:{start}-{end}", kind="sv",
+                              caveat=notes.get("ANNOTSV_NOTE"),
+                              detail=f"AnnotSV class {r.get('acmg_class')} {r.get('type') or 'SV'}, "
+                              f"{r.get('length') or '.'} bp, genotype {r.get('gt') or '.'}, genes: {genes}"))
+    if _ok(S, "mosaic"):
+        for i, c in enumerate(S["mosaic"]["data"].get("calls") or []):
+            chrom = str(c.get("chrom") or "")
+            if chrom and not chrom.startswith("chr"):
+                chrom = "chr" + chrom
+            try:
+                start, end = int(c.get("start")), int(c.get("end"))
+            except (TypeError, ValueError):
+                start = end = None
+            if chrom not in CHROM_LEN or start is None or end < start:
+                not_drawn["MoChA calls on other contigs or with no position"] = \
+                    not_drawn.get("MoChA calls on other contigs or with no position", 0) + 1
+                continue
+            marks.append(mark(f"mca-{i}", f"MoChA {c.get('type') or 'call'} {chrom}:{start}-{end}",
+                              c.get("cell_fraction"), chrom=chrom, pos=start, end=end, tone="attention",
+                              anchor="mosaic-mca", locus=f"{chrom}:{start}-{end}", kind="mca",
+                              caveat=notes.get("MCA_NOTE"),
+                              detail=f"mosaic {c.get('type') or 'alteration'} over {c.get('length_mb') or '.'} Mb, "
+                              f"cell fraction {c.get('cell_fraction') or '.'}"))
+    return spec("genome", "roh", "ideogram", "Runs of homozygosity, ClinVar hits, structural variants and mosaic "
+                "alterations on the chromosomes", notes,
                 "ROH_NOTE", marks, axis={"assembly": "GRCh38"},
                 not_drawn=[{"what": k, "count": v} for k, v in not_drawn.items()])
 
@@ -419,6 +460,17 @@ def svg_ideogram(sp):
             a, b = sx(m["pos"]), sx(m["end"])
             inner = (f'<rect class="roh" x="{_f(a)}" y="{y + 2}" width="{_f(max(b - a, 1.5))}" height="8" '
                      f'fill="{TONE["info"]}"/>')
+        elif m.get("kind") == "sv":
+            # An outlined span over the chromosome, at least 5 px so a small deletion is seen.
+            a, b = sx(m["pos"]), sx(m["end"])
+            w = max(b - a, 5)
+            inner = (f'<rect class="sv" x="{_f(a - (w - (b - a)) / 2)}" y="{y - 1}" width="{_f(w)}" height="14" '
+                     f'fill="none" stroke="{TONE["attention"]}" stroke-width="2"/>')
+        elif m.get("kind") == "mca":
+            # A bar under the chromosome: a share of the cells, not the whole genome.
+            a, b = sx(m["pos"]), sx(m["end"])
+            inner = (f'<rect class="mca" x="{_f(a)}" y="{y + 12}" width="{_f(max(b - a, 3))}" height="3" '
+                     f'fill="{TONE["attention"]}"/>')
         else:
             x = sx(m["pos"])
             inner = (f'<rect class="tick" x="{_f(x - 1.5)}" y="{y - 1}" width="3" height="14" '
@@ -431,6 +483,16 @@ def svg_ideogram(sp):
               + _text(x0 + 258, y + 8, "ClinVar hit", 11)
               + f'<rect x="{x0 + 340}" y="{y - 2}" width="3" height="12" fill="{TONE["muted"]}"/>'
               + _text(x0 + 348, y + 8, "low-confidence ClinVar call", 11))
+    kinds = {m.get("kind") for m in sp["marks"]}
+    if kinds & {"sv", "mca"}:
+        # A second legend row, drawn only when the chart has these marks.
+        y += 18
+        if "sv" in kinds:
+            legend += (f'<rect x="{x0}" y="{y - 2}" width="14" height="12" fill="none" stroke="{TONE["attention"]}" '
+                       f'stroke-width="2"/>' + _text(x0 + 20, y + 8, "AnnotSV class 4 or 5 SV", 11))
+        if "mca" in kinds:
+            legend += (f'<rect x="{x0 + 250}" y="{y + 4}" width="14" height="3" fill="{TONE["attention"]}"/>'
+                       + _text(x0 + 270, y + 8, "mosaic alteration (MoChA), a share of cells", 11))
     foot, h = _footer(sp, y + 26)
     return _open(sp, h + 4) + "".join(body) + legend + foot + "</svg>"
 
diff --git a/bin/run_state.py b/bin/run_state.py
index a070e6d2..31f5d6df 100755
--- a/bin/run_state.py
+++ b/bin/run_state.py
@@ -47,6 +47,7 @@
 import re
 import sys
 import tempfile
+import threading
 from datetime import datetime, timezone
 
 SCHEMA_VERSION = 1
@@ -167,27 +168,57 @@ def parse_duration(v):
     return total if found else None
 
 
+# Parsed trace files, keyed on the path and its mtime and size: /runs.json builds every run's state, and a
+# finished run's trace files do not change, so each is read once until it does. Bounded, oldest out first.
+TRACE_CACHE = {}
+TRACE_CACHE_MAX = 64
+TRACE_LOCK = threading.Lock()  # the live server answers requests on several threads
+
+
+def _trace_rows(p):
+    """[(process, tag, task)] of one trace file, every sample's; None when it cannot be read."""
+    try:
+        st = os.stat(p)
+    except OSError:
+        return None
+    key = (st.st_mtime_ns, st.st_size)
+    with TRACE_LOCK:
+        hit = TRACE_CACHE.get(p)
+    if hit and hit[0] == key:
+        return hit[1]
+    try:
+        f = open(p, errors="replace")
+    except OSError:
+        return None
+    rows = []
+    with f:
+        header = f.readline().rstrip("\n").split("\t")
+        for line in f:
+            r = dict(zip(header, line.rstrip("\n").split("\t")))
+            proc, tag = task_name(r.get("name"))
+            if not proc or proc in SHARED_PROCESSES:
+                continue
+            start = parse_trace_time(r.get("submit"))
+            dur = parse_duration(r.get("duration"))
+            rows.append((proc, tag, {"id": r.get("task_id") or r.get("hash") or r.get("name"), "name": r.get("name"),
+                                     "process": proc, "status": (r.get("status") or "").upper(),
+                                     "exit": r.get("exit"), "start": start,
+                                     "end": start + dur if start is not None and dur is not None else None}))
+    with TRACE_LOCK:
+        TRACE_CACHE.pop(p, None)
+        TRACE_CACHE[p] = (key, rows)
+        while len(TRACE_CACHE) > TRACE_CACHE_MAX:
+            TRACE_CACHE.pop(next(iter(TRACE_CACHE)))
+    return rows
+
+
 def read_trace(paths, sample):
-    """Rows of the trace files tagged with the sample, as task dicts."""
+    """Rows of the trace files tagged with the sample, as task dicts (each a copy: callers may change it)."""
     tasks = []
     for p in paths:
-        try:
-            f = open(p, errors="replace")
-        except OSError:
-            continue
-        with f:
-            header = f.readline().rstrip("\n").split("\t")
-            for line in f:
-                r = dict(zip(header, line.rstrip("\n").split("\t")))
-                proc, tag = task_name(r.get("name"))
-                if not proc or proc in SHARED_PROCESSES or not is_sample(tag, sample):
-                    continue
-                start = parse_trace_time(r.get("submit"))
-                dur = parse_duration(r.get("duration"))
-                tasks.append({"id": r.get("task_id") or r.get("hash") or r.get("name"), "name": r.get("name"),
-                              "process": proc, "status": (r.get("status") or "").upper(),
-                              "exit": r.get("exit"), "start": start,
-                              "end": start + dur if start is not None and dur is not None else None})
+        for proc, tag, task in _trace_rows(p) or ():
+            if is_sample(tag, sample):
+                tasks.append(dict(task))
     return tasks
 
 
diff --git a/docs/24-html-report.md b/docs/24-html-report.md
index ee465b71..17f04d84 100644
--- a/docs/24-html-report.md
+++ b/docs/24-html-report.md
@@ -61,7 +61,7 @@ After them, "What this report leaves out" lists the steps not run and what no st
 - **Each section** has an anchor (`#clinvar`, `#cpic`, ...). Under its first card title a line gives the step, the state, the newest file date and a link to the section itself. The state badge is never green: a step that ran is not a finding. The caveat each card already printed (a `*_NOTE` sentence of `bin/render_report.py`) now sits right under that card's title, before the numbers. The PRS caption keeps its ancestry caveat inside its own sentence.
 - **Five charts** show how sure each finding is, each in its section and right below that section's caveat (the PRS chart below the caption whose sentence holds the caveat). They are inline SVG drawn by `bin/report_charts.py` from the same summary, with no script: hover a mark for its value, click it to jump to the table or section it comes from.
   - **ClinVar** (`#clinvar`): one bar per review star, 4 to 0, and a grey bar for the low-confidence calls (GQ or DP below the call floor), which the star counts leave out. Yellow and grey only, never green. With no hit, a grey frame says that no hit is not an all-clear.
-  - **Chromosomes** (`#roh`): chromosomes 1 to 22, X and Y of GRCh38 with the runs of homozygosity of 5 MB or more and a tick per ClinVar hit, grey for a low-confidence call. A hit on chrM or on another contig is not drawn; the line under the chart counts it. A tick for one of the first 50 hits links to the hits table, a later one to the ClinVar section.
+  - **Chromosomes** (`#roh`): chromosomes 1 to 22, X and Y of GRCh38 with the runs of homozygosity of 5 MB or more and a tick per ClinVar hit, grey for a low-confidence call. A hit on chrM or on another contig is not drawn; the line under the chart counts it. A tick for one of the first 50 hits links to the hits table, a later one to the ClinVar section. It also draws an outlined span for each AnnotSV class 4 or 5 SV and a bar under the chromosome for each mosaic chromosomal alteration MoChA reports, each linking to its section; an SV or a MoChA call on chrM, on another contig or with no position is counted in the same line under the chart.
   - **chrM** (`#mito`): each heteroplasmic site by position and allele fraction, the D-loop poly-C length variants as grey squares apart from them.
   - **Fine-grained ancestry** (`#ancestry-fine`): each group the tables list, its share as a dot and its bootstrap range as a line.
   - **PRS** (`#prs`): the percentiles on a 0 to 100 strip, only when pgsc_calc had an ancestry panel. A score with no percentile, or one of the other sex, says "no percentile" and gets no dot. Without a panel there is no strip: a raw score has no scale, and the caption already says so.
diff --git a/docs/images/demo-live-site.png b/docs/images/demo-live-site.png
index db28216f..0cba14cb 100644
Binary files a/docs/images/demo-live-site.png and b/docs/images/demo-live-site.png differ
diff --git a/docs/live-site.md b/docs/live-site.md
index 4484c95b..baecfd65 100644
--- a/docs/live-site.md
+++ b/docs/live-site.md
@@ -1,14 +1,14 @@
 # Watch a Run Live
 
-A full run takes a day or more. The live site shows each person's results as their steps finish, in a browser on any device that can reach the machine: the report's chapters as tabs, one card per section with its numbers, its rows and its caveat, and what is worth a look first. A Progress tab keeps the step map. A home page lists everyone by family, and each family has a page of its own. The pages repaint as messages arrive; nobody has to reload them.
+A full run takes a day or more. The live site shows each person's results as their steps finish, in a browser on any device that can reach the machine. Each genome reads as a report: a lead paragraph that says what to take to a doctor, what to tell a prescriber and what is worth a look, then ten numbered sections from what matters most to what the run cannot see, each finding with a page of its own. While the run goes, a timeline of its steps sits on top. A home page lists everyone by family, and each family has a report of its own. The pages repaint as messages arrive; nobody has to reload them.
 
 `bin/owngenome_live.py` is the server. It uses Python's standard library only, so the `python3` on the host is enough, and it has its own password, access log and limits, so it needs no web server in front of it.
 
 ## Try the demo
 
-https://geiserx.github.io/OwnGenome/demo/ is the live site on DEMO-001, the invented sample of the docs pictures. It replays a made-up run from the first task to the database re-check after it: press Play, or drag the slider, and watch the cards fill in as their steps end. Every number, result and family member in it is made up.
+https://geiserx.github.io/OwnGenome/demo/ is the live site on DEMO-001, the invented sample of the docs pictures. It replays a made-up run from the first task to the database re-check after it: press Play, or drag the slider, and watch the cards fill in as their steps end. Every number, result and family member in it is made up. The family is an invented trio: DEMO-001, the partner DEMO-002 and their son DEMO-003. Each of the three has a finished run with its own findings, so every card widget and the whole family page have something to draw: DEMO-002 carries an FMR1 premutation-range count, a CHIP call and a MoChA loss; DEMO-003 a class 4 AnnotSV deletion and a Y path.
 
-![The person page of DEMO-001 at the end of the demo run: the name with a progress strip of 54 finished steps, a tab column (Look first, Trust, Doctor, Child, Medicines, Ancestors, Traits, Other, Leaves out, Progress) with Doctor open, and the ClinVar card marked worth a look and newer ClinVar available, with its counts and the chromosome chart of its hits](images/demo-live-site.png){ loading=lazy }
+![The person page of DEMO-001 at the end of the demo run: the name with its family and run state, the contents of the ten sections with a count per level, the lead paragraph (no finding for a doctor, two medicine results, six worth a look), the five-level ledger, the data-quality line and the start of the chromosome map of the findings](images/demo-live-site.png){ loading=lazy }
 
 The pages and their plugins are the files of `assets/live/`, unchanged. Each moment of the replay is the server's own `state.json` at that moment: `tests/demo/build_live_demo.py` loads every plugin, stores the made-up messages of `tests/fixtures/live/demo-001.weblog.jsonl` one by one as the ingest port would, and reads the state after each. The cards come from the `results.json` the server would give at the end of the run; each shows once the replay reaches the end of its step. The home page, the charts, the search box, the run-health card, the database re-check and the family page work as they do on your own site. The genome viewer does not: it opens your own reads on your own computer, so its links lead to a page that says it is not in the demo.
 
@@ -16,7 +16,6 @@ What differs from your own site:
 
 - It is a static folder published with these docs, so it has no password and no access log. Nothing in it is private.
 - The run-health card measures an invented machine (64 GiB of RAM, a 2 TiB disk 55% used), not the one that built the page.
-- The CPIC recommendations have no file in the demo sample, so the demo shows that card as not run.
 
 ## Start it
 
@@ -45,26 +44,35 @@ weblog {
 
 ## What the pages show
 
-**Home** (`/`). Everyone, grouped by family, then the runs in no family. A card shows the pedigree symbol with a ring for the run's progress, the person's place in the family, the steps done and how many cards the report flags. Runs still going come first in each family. A family member with no run on this server is listed, dashed. Without scripts the page is a plain list of runs.
+Every result carries one of six levels, with a word, a shape and a colour, so the shape alone tells them apart: **Take to a doctor** (◆), **Tell your prescriber** (a pill), **Worth a look** (▲), **For family planning** (two rings), **Data quality** (✓, red when the data has a problem) and **For information** (○). `bin/live_results.py` sets the level from the rows the report already prints: an ACMG secondary finding, a pathogenic CPSR row or two hits in a carrier-list gene is to act on; a ClinVar hit, an AnnotSV class 4, a repeat outside Stranger's normal, a CHIP or MoChA call or an Exomiser top gene is worth a look (a full-mutation repeat, an AnnotSV class 5 and a positive VNtyper call are to act on); a carrier-list row, a gene both partners carry and one SMN1 copy are for family planning; a CPIC gene with changed function is for the prescriber; a sex mismatch, a contamination warning or a second run of the same person is data quality. Everything else is for information. No page says a section is fine: a section with no finding says "No finding in what these steps assessed" and what it looked at.
 
-**A person** (`/runs/<run>/`). The name, the declared and measured sex, the families they are in, and a strip with one cell per planned step. Below, one tab per chapter of the report, each named by its question:
+**Home** (`/`). A date line, then one sentence on where everyone stands (how many reports are finished or being written, and whether any finding needs a doctor), and beside it the findings that need attention across everyone, one line per person and level, each opening its finding page. A run still going comes first, as "Being written", with its steps done and the sections already written. Then each family: a small pedigree in the members' colours and one tile per person, with the first lines of their report's lead and their counts by level. A family member with no run on this server is listed, dashed. Last, every run as a log: state, steps, hours, when it ended. Without scripts the page is a plain list of runs.
 
-- **Look first** opens by default once a step has finished: the cards the report itself flags, in chapter order, each with its headline. A card not listed is for information; its caveats still apply.
-- **Trust, Doctor, Child, Medicines, Ancestors, Traits, Other** follow the report's seven chapters. One card per section, with the section's numbers, its rows (the first ones, then a button for all), its own sentences and its charts. Under each card sits its caveat: the first sentence, then the rest behind "Full caveat". A card is marked "worth a look" (▲) only where the report or the step headline raises a flag, and "for information" (○) otherwise; no card says a section is fine. A card whose step has not ended says so; one whose step failed or is older than its input says that. A newer database release shows on the cards it would change. APOE stays behind its warning in the traits card; the polygenic scores show only once they are placed against the ancestry panel.
-- **Leaves out** lists what the run does not assess.
-- **Progress** is the step map, a step's detail, Found so far, the run-health card and the database re-check, as before.
+**A person** (`/runs/<run>/`). The name, the sex the reads show against the declared one, the person's place in the family and the run state. Down the left, the contents: the ten sections with how many findings each level has, then the step timeline and the family. The page opens on the lead: a paragraph built from the findings (data-quality problems first, then the findings for a doctor named one by one, the medicine genes, the carrier genes, what is worth a look, and the mean depth; with no finding for a doctor it says so only when a clinical screen ran, and otherwise that the clinical screens have no result yet), the ledger of the five levels with a count each, the data-quality line, and Figure 1, the chromosomes with each finding at its place. Then the sections:
 
-Each card links to its section of the report and to the files it names. The header search finds a gene or rsID across the results and opens the card that names it. `#q/<chapter>` opens a tab, `#s/<section>` opens a card (the report's own anchors), `#progress` the step map.
+1. **To act on**, 2. **Medicines**, 3. **For your family**, 4. **Worth a look**, 5. **Can I trust this?**: each finding of the level, with what it is, what to do, and in the margin its evidence, its caveat and its link to the report; then the cards of the report's sections that belong there.
+6. **Origins** and 7. **Traits and scores**: the ancestry and trait cards.
+8. **Assessed, no finding**: one line per section that ran and raised nothing, each opening its full card.
+9. **What it cannot see**: what the run does not assess and the steps that did not run.
+10. **Sources and files**: the database versions, the database re-check, and the report and its files.
 
-- **The step map.** One box per step the run planned, drawn from `assets/steps.tsv`: a step sits right of the steps whose output it reads. The colour is the step's state from `bin/run_state.py` ([Where a Run Stands](run-state.md)): waiting, running, done, failed, skipped, not finished. Skipped steps stay on the map, greyed.
-- **A step's detail.** Click a box: its state and reason, start and end, the usual hours, each process with its tasks waiting, running, done, from the cache or failed, and the headline of its sections with a link into the report.
-- **Found so far.** One line per finished section, worded by the same code that writes the report, caveat included. No line ever says a section is fine. The ClinVar line, with no hit, is information, never an all-clear.
+A card has the section's numbers, its rows (the first ones, then a button for all), its own sentences and its charts, and under it its caveat: the first sentence, then the rest behind "Full caveat". A section waiting for its step says "being written" or "waiting", one whose step failed says so, and a newer database release shows on the cards it would change. Some cards draw their numbers as well: the repeat expansions as one gauge per locus (the count against Stranger's normal and pathologic thresholds, with its 95% interval; an allele not sized from short reads is drawn hollow and never called normal), Lp(a) as the KIV-2 count with its 95% interval, CHIP as each call's VAF against its gene's detection limit, the copy numbers of SMN1, SMN2, HBA1, HBA2 and the RCCX module as dots, and the Y haplogroup as its path from the root, with the marker counts of each level. Each drawing has the same numbers as text beside it. APOE stays behind its warning in the traits card; the polygenic scores show only once they are placed against the ancestry panel. On a child's page in a family, a result to act on stays closed behind "Show the result" until someone opens it on purpose: its title, gene and variant stay out of the lead, the ledger, the chromosome map, the home page and its own page, and the card it comes from stays closed with it (its rows, numbers and drawing), in its section and in section 8. A person in a family whose family report has not answered yet is treated the same way, since the page cannot tell yet whether they are a child.
+
+While the run goes, the page opens on the run instead: a sentence on how far it is ("23 of 27 are done, about 8–13 hours remain"), the steps done as a big number and a bar, the time elapsed, the time to go from the usual step times, the retries, and the tasks running now against their usual time. Each section in the contents says whether it is written, being written or waiting.
+
+- **How the run went.** One line per step the run planned, on a time axis: a bar from its start to its end, or to now while it runs, with an outline to its usual hours. The colour is the step's state from `bin/run_state.py` ([Where a Run Stands](run-state.md)): waiting, running, done, failed, skipped, not finished. Beside it the tasks running now, a step's detail and the wire of what was found so far.
+- **A step's detail.** Click a step: its state and reason, start and end, the usual hours, each process with its tasks waiting, running, done, from the cache or failed, and the headline of its sections with a link into the report.
+- **Found so far.** One line per finished section, worded by the same code that writes the report, caveat included. The ClinVar line, with no hit, is information, never a clean result.
 - **The report.** Once written, `report.html` opens the run's `<sample>_report.html`, and the files it links to beside it.
-- **The genome viewer.** `/runs/<run>/viewer/` shows the run's reads and variants in igv.js, as [`scripts/owngenome-view.sh`](viewer.md) does on one computer. The report's Viewer links and the charts' "See the reads" links open it at their position.
+- **The genome viewer.** `/runs/<run>/viewer/` shows the run's reads and variants in igv.js, as [`scripts/owngenome-view.sh`](viewer.md) does on one computer. The report's Viewer links, the charts' "See the reads" links and a finding page's reads open it at their position.
+
+The header search finds a gene or rsID across the results and opens the card that names it. `#s<n>` opens a section, `#s/<section>` a card (the report's own anchors), `#f/<finding>` a finding, `#q/<chapter>` the section a report chapter falls in, `#progress` the timeline.
+
+**A finding** (`/runs/<run>/finding/<id>/`). One finding on a page of its own: its level and how many others share it, the title, the gene and variant, a plain explanation, and **What to do** as numbered steps. Then the evidence (its numbers, how common the change is on a log scale from one in a million to everyone, the caveat in the margin), the reads with a link to the genome viewer, the rest of the family, the related findings of the same gene or step, and the section of the report it comes from. The contents on the left lead back to the report and on to the next finding. The page is 404 unless the id is a finding of that run's `results.json` now.
 
-**A family** (`/runs/<family>/`). The pedigree, drawn from `members.tsv` or `pedigree.tsv`, where each sequenced person with a run here opens their page and shows how many cards their report flags. Then the members, the analyses step 38 planned, each couple's carrier screen in full (genes where both carry a finding, X-linked genes, genes where one partner does), with the screen's caveat and a link to the couple report, who is related how (step 38's relationship check beside the shared segments), and each child's chromosome map.
+**A family** (`/runs/<family>/`). A report in five chapters, opened by a lead: how many genomes are read together, whether the couple shares a carrier gene, whether the measured relationships match the tree, and how many children. I, the pedigree, drawn from `members.tsv` or `pedigree.tsv` in the members' colours, where each sequenced person with a run here opens their page and shows how many cards their report flags, beside the members and the analyses step 38 planned. II, who is related how: step 38's relationship check beside the shared segments, as a grid of every pair, with ⚑ where the measured relationship differs from the declared one. III, each couple's carrier screen in full (genes where both carry a finding, drawn as four children with the chance for each, X-linked genes, genes where one partner does), with the screen's caveat and a link to the couple report. IV, each child: the stretches inherited from each parent painted per chromosome (coloured by grandparent where step 38 could tell), the de novo candidates and the compound-het pairs, in trans first. V, the members side by side: their CYP2D6 calls, CPIC phenotypes, HLA types, haplogroups and blood groups, one column each. On a phone the grid becomes a list of pairs.
 
-On a phone the tab column becomes a row that scrolls sideways and each table row becomes a short list of label and value. The pages follow the browser's dark or light setting.
+On a phone each page is one column and each table row becomes a short list of label and value. On a person's report the contents give way to a tab bar at the bottom (To act, Medicines, Family, Trust, More); a finding page drops its contents (the header links back to the report), and a family page keeps its chapter list above the chapters. The pages are dark.
 
 ## The genome viewer
 
@@ -74,9 +82,9 @@ Per run it serves the folder's BAM or CRAM, its VCF and its SV VCF, each with it
 
 The reads cross the network to the browser that logged in: only the byte ranges igv.js asks for, but they are the sample's reads. Off loopback, use TLS (`--tls-cert` and `--tls-key`, or a proxy that ends TLS); without it the password and the reads cross the network in clear. Opening the viewer writes one access-log row; the byte ranges igv.js reads write none.
 
-`GET /` lists the runs: each folder under `GENOME_DIR` holding `logs/run_status.tsv`, `nextflow/` or `run_manifest.tsv`, and each run the site has messages for. The home page reads `/runs.json`: each run's progress and attention count, and each family with its members.
+`GET /` lists the runs: each folder under `GENOME_DIR` holding `logs/run_status.tsv`, `nextflow/` or `run_manifest.tsv`, and each run the site has messages for. The home page reads `/runs.json`: each run's progress and attention count, and each family with its members. A run with results also has `levels` (its findings counted by level), `top` (up to four findings to show first, data-quality problems first: id, level, title), `lead` (its lead paragraph as plain text) and `lead_closed` (the same with the names of the findings to act on left out, for a child's tile). While a run goes these come from the summary its page last read, so the home page never shows less than the person page.
 
-The person page reads `/runs/<run>/results.json` from `bin/owngenome_live_results.py`: `bin/live_results.py` turns the run's summary (its `summary.json` when step 24 wrote it after every finished step, else the step files read again when a step ends; a rewritten `summary.json` is read again too, and the page fetches the cards again) into the report's chapters, one card per section. It computes nothing about genetics and holds only what the report prints. The family page reads `/runs/<family>/family.json` from the family plugin, and asks again every 30 seconds, so a member's progress and a new couple screen show without a reload.
+The person page reads `/runs/<run>/results.json` from `bin/owngenome_live_results.py`: `bin/live_results.py` turns the run's summary (its `summary.json` when step 24 wrote it after every finished step, else the step files read again when a step ends; a rewritten `summary.json` is read again too, and the page fetches the cards again) into the report's chapters, one card per section. Each card also has its `level`; the file adds `findings` (each with its id, level, section, title, plain text, gene, evidence, caveat, plan and related findings), `levels` (the counts), `journal` (the ten sections and the cards in each), `lead` (the lead paragraph as text pieces, the bold ones marked, and the names of the findings to act on marked `act`), `level_words` and `databases`. It computes nothing about genetics and holds only what the report prints. The family page reads `/runs/<family>/family.json` from the family plugin, and asks again every 30 seconds, so a member's progress and a new couple screen show without a reload.
 
 ## Privacy and what is stored
 
@@ -168,8 +176,8 @@ WantedBy=multi-user.target
 The core files (`bin/owngenome_live.py`, `assets/live/index.html`, `home.html`, `family.html`, `core.js`, `live.js`, `person.js`, `home.js`, `family-page.js`, `live.css`, `login.html`) are meant to stay small. A new view adds two files instead of editing them:
 
 - `bin/owngenome_live_<name>.py` with `register(app)`. At start the server imports every such file, sorted, and calls it. `app.route(method, pattern, fn, auth=True)` adds a page or an endpoint (behind the login unless `auth=False`), `app.run_file(glob)` lets the browser fetch more files of a run folder, `app.report_filter(fn)` rewrites the served report, `app.state_hook(name, fn)` adds `plugins[name]` to `state.json`, `app.run_kind(fn)` lists more runs, `app.add_argument(...)` adds a flag, `app.log(...)` writes an access-log row, and `app.config` holds the parsed flags.
-- `assets/live/plugins/<name>.js`. The run page loads every script in that folder after `live.js`; it calls `window.PGP.register({name, onState, onEvent, panel})`. `onState(state)` gets each new `state.json`, `onEvent(message)` each message from the stream, and `panel(element)` gets a card of its own in the Progress tab, or in the element whose id `slot` names (the search box sits in the header this way). A family's page loads the same scripts without `live.js`, so a plugin returns early when `window.PGP` is missing.
+- `assets/live/plugins/<name>.js`. The run page loads every script in that folder after `live.js`; it calls `window.PGP.register({name, onState, onEvent, panel})`. `onState(state)` gets each new `state.json`, `onEvent(message)` each message from the stream, and `panel(element)` gets a card of its own beside the run timeline, or in the element whose id `slot` names (the search box sits in the header this way). A family's page loads the same scripts without `live.js`, so a plugin returns early when `window.PGP` is missing.
 
 The page has a replay mode for a demo with no server: `<html data-mode="replay">` reads `frames.json` (`{"interval_ms": 1000, "frames": [{"t": ..., "state": <state.json>}]}`) and plays it with a play button and a slider, through the same drawing code.
 
-`tests/test_owngenome_live.py` checks the server, the login, the stored messages, the plugin interface and the page in a headless Chrome; `tests/test_live_results.py` checks `results.json` (every card's caveat word for word, no wording that reads as an all-clear, `results.json` behind the login); `tests/test_live_demo.py` builds the demo and checks every page, phone width included; `tests/test_live_post.sh` and `tests/fake-docker/run-all-live.sh` check what `run-all.sh` posts.
+`tests/test_owngenome_live.py` checks the server, the login, the stored messages, the plugin interface and the page in a headless Chrome; `tests/test_live_results.py` checks `results.json` (every card's caveat word for word, no wording that reads as an all-clear, `results.json` behind the login); `tests/test_live_journal.py` checks the levels, the lead paragraph and the finding page's route; `tests/test_live_demo.py` builds the demo and checks every page, phone width included; `tests/test_live_post.sh` and `tests/fake-docker/run-all-live.sh` check what `run-all.sh` posts.
diff --git a/docs/multi-sample.md b/docs/multi-sample.md
index 8ff23c8e..e51e8adb 100644
--- a/docs/multi-sample.md
+++ b/docs/multi-sample.md
@@ -114,14 +114,15 @@ The Nextflow pipeline writes them to `<outdir>/family/` (`<outdir>/<name>/` with
 
 ### On the live site
 
-The live site (`bin/owngenome_live.py`) lists each family folder under `GENOME_DIR` as a run of its own, of kind `family`: any folder holding `members.tsv` or `pedigree.tsv`. The plugin `bin/owngenome_live_family.py` and its page script `assets/live/plugins/family.js` add a Family card to that run's page:
+The live site (`bin/owngenome_live.py`) lists each family folder under `GENOME_DIR` as a run of its own, of kind `family`: any folder holding `members.tsv` or `pedigree.tsv`. The plugin `bin/owngenome_live_family.py` serves the family page (`assets/live/family.html`, drawn by `assets/live/family-page.js` from `/runs/<family>/family.json`); its card script `assets/live/plugins/family.js` adds the Family card to the run's progress view:
 
 - **The pedigree.** `bin/pedigree_svg.py` draws it from `members.tsv`, or from `pedigree.tsv` when step 38 has not run, each time the page asks. A square is a male, a circle a female, a diamond a sex not known; a filled symbol is a sequenced person (with only `pedigree.tsv`, a person with a row of their own). A line joins partners, and the children hang from it, one generation per row. It draws what the file declares; the relationship check below is what tests it.
-- **Each child's chromosome map**, `<child>_segments.svg`, under the child's name, or a line saying step 38 has not drawn one.
-- **The relationship check** (`relationships.tsv`), **the shared segments** (`ibd_pairs.tsv`) and **the plan** (`family_plan.tsv`, when there is one), row by row as the steps wrote them.
+- **Each child**: the stretches of `<child>_segments.tsv` painted per chromosome, the copy from the father above the copy from the mother, coloured by grandparent where step 38 could tell, else by parent; then the child's de novo candidates (`de_novo.tsv`) and compound-het pairs (`compound_het.tsv`, in trans first). Without `<child>_segments.tsv` the page shows `<child>_segments.svg`, or a line saying step 38 has not drawn one; a missing de novo or compound-het file is named with the reason, never shown as an empty list.
+- **The relationship check** (`relationships.tsv`) and **the shared segments** (`ibd_pairs.tsv`) as one grid of every pair, with ⚑ where the measured relationship differs from the declared one (a list of pairs on a phone), and **the plan** (`family_plan.tsv`, when there is one), row by row as the steps wrote them.
+- **The members side by side**: each sequenced member's CYP2D6 calls, CPIC phenotypes, HLA types, haplogroups and blood groups from their `summary.json`, one column each; `.` where a member's summary has no such row, "no summary yet" for a member without one.
 - **The couple carrier screen**, per couple: how many genes `couple_<a>_<b>.tsv` lists as `shared` and as `x_linked`, and a link to `couple_<a>_<b>.md`. A count of 0 is not an all-clear; the report says what the screen does not see.
 
-A sample's own page gets a link to the family it is in. The plugin reads the files the steps wrote and nothing else: it calls no tool and computes no genetics. It serves only the pedigree it draws and the result files named above, at `/family/<family>/<file>`, behind the site's login; any other file of the folder, such as `family.vcf.gz`, is 404. `tests/test_pedigree_svg.py` and `tests/test_owngenome_live_family.py` check the drawing and the card on an invented family (`tests/fixtures/families_live/`), with a swapped parent as the control that must fail.
+A sample's own page gets a link to the family it is in. The plugin reads the files the steps wrote and nothing else: it calls no tool and computes no genetics. It serves only the pedigree it draws and the result files named above, at `/family/<family>/<file>`, behind the site's login; any other file of the folder, such as `family.vcf.gz`, is 404. `tests/test_pedigree_svg.py` and `tests/test_owngenome_live_family.py` check the drawing and the card on an invented family (`tests/fixtures/families_live/`), with a swapped parent as the control that must fail; `tests/test_live_family_depth.py` checks the painting, the de novo and compound-het tables and the side by side on the demo's invented trio (`tests/fixtures/live/demo/DEMO-FAMILY/`).
 
 ```bash
 python3 bin/pedigree_svg.py "$GENOME_DIR/my_family" > pedigree.svg   # the same drawing, without the site
diff --git a/docs/parameters.md b/docs/parameters.md
index 41231f7c..021425f7 100644
--- a/docs/parameters.md
+++ b/docs/parameters.md
@@ -1,6 +1,6 @@
 # Nextflow Parameters
 
-Every parameter of the Nextflow pipeline (`main.nf`), grouped as in [`nextflow_schema.json`](https://github.com/GeiserX/OwnGenome/blob/main/nextflow_schema.json), with its default and the description the schema gives. `--pedigree` is read by `main.nf` but is not in the schema yet; its row is written here. Give one as `--<name> <value>` to `nextflow run`, or after the sex to `run-all.sh`, which hands the options after the sex to `nextflow run` unchanged. `run-all.sh` already passes the databases it finds under `GENOME_DIR` ([Full run](getting-started.md#full-run)). How a run is built: [Nextflow Execution](nextflow.md).
+Every parameter of the Nextflow pipeline (`main.nf`), grouped as in [`nextflow_schema.json`](https://github.com/GeiserX/OwnGenome/blob/main/nextflow_schema.json), with its default and the description the schema gives. Give one as `--<name> <value>` to `nextflow run`, or after the sex to `run-all.sh`, which hands the options after the sex to `nextflow run` unchanged. `run-all.sh` already passes the databases it finds under `GENOME_DIR` ([Full run](getting-started.md#full-run)). How a run is built: [Nextflow Execution](nextflow.md).
 
 A default of none means the parameter is unset; each description says what a run does without it.
 
@@ -11,7 +11,6 @@ Define where the pipeline should find input data and save output data.
 | Parameter | Default | What it does |
 |---|---|---|
 | `--input` | none | Path to comma-separated samplesheet: sample, then fastq_1,fastq_2 (aligned and called), or bam,bam_index (called), or vcf,vcf_index (a VCF with one sample) with an optional bam,bam_index; sex (male or female) is required on every row that is called and when expansion_hunter is enabled. A row can also give cram,crai instead of the BAM, and gvcf,gvcf_index beside the VCF; every column: [Samplesheet Format](nextflow.md#samplesheet-format). |
-| `--pedigree` | none | The family workflow (step 38, and step 39 for two samples the pedigree marks as partners): a tab-separated pedigree (sample, sex, father, mother, partner; `assets/pedigree.example.tsv`) or a families file with a leading family column (`assets/families.example.tsv`), naming samplesheet rows. Needs `--somalier_sites` and at least two of the named samples. [Family workflow](nextflow.md) and [Multi-sample comparison](multi-sample.md#family-analysis-step-38-opt-in) say what it runs. |
 | `--outdir` | `./results` | The output directory where results will be saved. |
 | `--allow_unfiltered` | `false` | Accept a VCF that has no FILTER=PASS record by treating FILTER '.' as PASS. Without it such a VCF stops the run, because every PASS-only step would report zero hits. |
 | `--publish_dir_mode` | `copy` | Method used to save pipeline results to output directory. One of: `symlink`, `rellink`, `link`, `copy`, `copyNoFollow`, `move`. |
@@ -95,6 +94,7 @@ Paths to clinical and population genetics reference data.
 | `--yleaf_data` | none | Yleaf's data folder (GRCh38 marker positions and haplogroup tree), which `scripts/setup.sh --yleaf-data` installs as reference/yleaf-&lt;version&gt;/data: the Yleaf image ships the code only. Its ytree/ subfolder, from the same command, holds the current YFull YTree the step also places the sample on. Required with y_haplogroup. |
 | `--hpo` | none | The symptoms of one person as Human Phenotype Ontology ids, comma separated (HP:0001250,HP:0001263; look them up at https://hpo.jax.org). Setting it runs exomiser (step 48), which ranks the genes and variants that could explain them; it needs --exomiser_data. |
 | `--exomiser_data` | none | Exomiser's data folder, which `scripts/setup.sh --exomiser-data` installs as reference/exomiser-&lt;release&gt; (its &lt;release&gt;_hg38 and &lt;release&gt;_phenotype folders). Required with --hpo. |
+| `--pedigree` | none | Opt-in: run the family workflow (steps 38 and 39) on the samples of the samplesheet this file names: a pedigree (assets/pedigree.example.tsv), or a families file with a leading family column (assets/families.example.tsv). A families file that holds more than one family needs --family_name, and only that family runs. The family that runs needs two or more of those samples, each with a gVCF, and --somalier_sites. |
 | `--family_name` | none | With --pedigree: the family to run when the file is a families file (a pedigree with a leading family column, assets/families.example.tsv) that holds more than one family, and the family's folder under --outdir. Without it the folder is family/. |
 | `--exomiser_proband` | none | The sample the --hpo terms describe. Needed when the samplesheet has more than one sample. |
 | `--exomiser_assembly` | `hg38` | The assembly of the Exomiser data. Keep hg38: hg19 is there for Exomiser's cut-down test release, which CI runs. One of: `hg38`, `hg19`. |
diff --git a/docs/recheck.md b/docs/recheck.md
index 221c6fc0..4fef29fc 100644
--- a/docs/recheck.md
+++ b/docs/recheck.md
@@ -91,7 +91,7 @@ python3 bin/owngenome_recheck.py --launch-dir /path/to/launch/dir
 
 ## In the reports and on the live site
 
-The next reports read `recheck/state.json`: both show one "Database re-check" line in the run facts. A check older than the sample's `run_manifest.tsv` describes an earlier run, so the reports leave it out until the next check. When the sample has a previous run in `history/` ([the delta report](delta-report.md)), a section whose results changed since it carries a badge such as "New since 2026-10-01T09:15:00Z", in both reports, and the delta report heads its changes the same way. The live site's re-check plugin (`bin/owngenome_live_recheck.py`, `assets/live/plugins/recheck.js`) shows the same line as a banner and marks each named step on the step map with a dot whose tooltip says "newer ClinVar available" or "redone 2026-10-05".
+The next reports read `recheck/state.json`: both show one "Database re-check" line in the run facts. A check older than the sample's `run_manifest.tsv` describes an earlier run, so the reports leave it out until the next check. When the sample has a previous run in `history/` ([the delta report](delta-report.md)), a section whose results changed since it carries a badge such as "New since 2026-10-01T09:15:00Z", in both reports, and the delta report heads its changes the same way. The live site's re-check plugin (`bin/owngenome_live_recheck.py`, `assets/live/plugins/recheck.js`) shows the same line as a banner, puts a badge (↻) such as "newer ClinVar available" in the header of every result card of a named step on the person page, and marks each named step on the run timeline with a dot at the end of its line, whose tooltip says the same or "redone 2026-10-05".
 
 The Nextflow `HTML_REPORT` process sees no `history/` folder, so its report has no "New since" badge.
 
diff --git a/scripts/ci/e2e-case-paths.tsv b/scripts/ci/e2e-case-paths.tsv
index 4ad412b7..d7f172ec 100644
--- a/scripts/ci/e2e-case-paths.tsv
+++ b/scripts/ci/e2e-case-paths.tsv
@@ -102,7 +102,7 @@ hba-short-read-accuracy-1-nf-report	assets/acmg_sf.tsv assets/callability_genes.
 hla-second-caller-1-bash	assets/pgx_genes.tsv assets/stub/db/hla.dat assets/stub/db/kir.dat bin/cn_loci.tsv bin/copy_number.py bin/cyp2d6_depth_check.py bin/hba_copy_number.py bin/lpa_kiv2.py bin/pgx_outside_calls.py bin/render_report.py scripts/08-hla-typing.sh scripts/24-html-report.sh scripts/32-pypgx.sh scripts/36-pgx-consensus.sh scripts/ci/fake-docker/lib.sh scripts/validate-setup.sh
 hla-second-caller-2-nextflow	assets/acmg_sf.tsv assets/callability_genes.tsv assets/carrier_genes.tsv assets/mito_confirmed.tsv assets/pgx_genes.tsv assets/stub/db/hla.dat assets/stub/db/kir.dat assets/stub/sample.vcf.gz bin/cn_loci.tsv bin/collect_summary.py bin/copy_number.py bin/cyp2d6_depth_check.py bin/hba_copy_number.py bin/lpa_kiv2.py bin/pgx_mito_merge.py bin/pgx_outside_calls.py bin/pgx_refblock_fill.py bin/render_report.py bin/results_index.py modules/local/hla_typing/* modules/local/html_report/* modules/local/pgx_consensus/* modules/local/pharmcat/* modules/local/t1k_build/* modules/local/vcf_precheck/* scripts/07-pharmacogenomics.sh scripts/08-hla-typing.sh scripts/21-cyrius.sh scripts/24-html-report.sh scripts/32-pypgx.sh scripts/36-pgx-consensus.sh scripts/ci/fake-docker/lib.sh scripts/cyrius-constraints.txt scripts/setup.sh scripts/validate-setup.sh
 ibd-segments-1	assets/families.example.tsv assets/par_grch38.bed assets/pedigree.example.tsv assets/stub/pedigree.tsv bin/family_report.py bin/family_segments.py bin/ibd_report.py scripts/38-family.sh scripts/ci/fake-docker/lib.sh scripts/setup.sh
-live-server-1-weblog	assets/live/home.html assets/live/index.html assets/live/live.css assets/live/login.html assets/viewer/index.html bin/live_results.py bin/owngenome_live.py bin/owngenome_live_results.py bin/render_report.py bin/run_state.py modules/local/roh/* modules/local/vcf_precheck/* scripts/11-roh-analysis.sh scripts/ci/fake-docker/lib.sh scripts/validate-setup.sh
+live-server-1-weblog	assets/live/finding.html assets/live/home.html assets/live/index.html assets/live/live.css assets/live/login.html assets/viewer/index.html bin/live_results.py bin/owngenome_live.py bin/owngenome_live_results.py bin/render_report.py bin/run_state.py modules/local/roh/* modules/local/vcf_precheck/* scripts/11-roh-analysis.sh scripts/ci/fake-docker/lib.sh scripts/validate-setup.sh
 lpa-1	assets/acmg_sf.tsv assets/callability_genes.tsv assets/carrier_genes.tsv assets/mito_confirmed.tsv assets/par_grch38.bed assets/stub/sample.vcf.gz bin/cn_loci.tsv bin/collect_summary.py bin/copy_number.py bin/hba_copy_number.py bin/lpa_kiv2.py bin/render_report.py bin/results_index.py modules/local/deepvariant/* modules/local/html_report/* modules/local/lpa/* modules/local/vcf_precheck/* scripts/24-html-report.sh scripts/46-lpa.sh scripts/ci/fake-docker/lib.sh scripts/validate-setup.sh
 mei-1	assets/mei_sites.tsv assets/par_grch38.bed assets/sv_rule_regions.tsv bin/annotsv_postfilter.py bin/cnvpytor_to_vcf.py bin/collect_summary.py bin/family_report.py bin/mei_report.py bin/sv_svlen_fix.py modules/local/align_minimap2/* modules/local/annotsv/* modules/local/deepvariant/* modules/local/fastp/* modules/local/mei/* modules/local/vcf_precheck/* scripts/01b-fastp-qc.sh scripts/05-annotsv.sh scripts/15-duphold.sh scripts/18-cnvpytor.sh scripts/19-delly.sh scripts/50-mei.sh scripts/ci/check-images.sh scripts/ci/fake-docker/lib.sh scripts/setup.sh scripts/validate-setup.sh tests/fixtures/annotsv/class45.sh
 mito-extended-1-deletions	assets/acmg_sf.tsv assets/callability_genes.tsv assets/carrier_genes.tsv assets/construct_variants.tsv assets/deep_intronic_sites.tsv assets/mito_confirmed.tsv assets/stub/db/clinvar.vcf.gz assets/stub/db/clinvar.vcf.gz.tbi assets/stub/sample.bam assets/stub/sample.bam.bai assets/stub/sample.vcf.gz bin/cdna_scan.py bin/clinvar_hits.awk bin/clinvar_join_adjacent.awk bin/clip_check.py bin/collect_summary.py bin/render_report.py bin/results_index.py modules/local/clinvar_screen/* modules/local/html_report/* modules/local/mito_variants/* modules/local/vcf_precheck/* scripts/06-clinvar-screen.sh scripts/16b-mosdepth.sh scripts/20-mtoolbox.sh scripts/24-html-report.sh scripts/ci/build-mito-confirmed.sh scripts/ci/fake-docker/lib.sh scripts/validate-setup.sh
diff --git a/tests/demo/build_live_demo.py b/tests/demo/build_live_demo.py
index 1d62b912..a7b0e01e 100644
--- a/tests/demo/build_live_demo.py
+++ b/tests/demo/build_live_demo.py
@@ -13,11 +13,18 @@
   runs/DEMO-001/results.json    the person's results (bin/live_results.py), as the results
                                 plugin serves them at the end of the run; each card shows
                                 once the replay reaches the end of its steps
+  runs/DEMO-001/finding/<id>/   one page per finding (assets/live/finding.html), as the
+                                results plugin's finding route serves it
   runs/DEMO-001/...             the files the plugins point at (the charts, the
                                 search index, the re-check), the report as
                                 report.html and the files it links to
-  runs/DEMO-FAMILY/             the family page (assets/live/family.html) of DEMO-001 and its
-                                invented partner, with family.json as the family plugin serves it
+  runs/DEMO-002/, runs/DEMO-003/  the person pages of DEMO-001's invented partner and their son,
+                                each a finished run of one frame (tests/demo/make_demo_sample.py
+                                --sample, with the findings that show the rest of the widgets)
+  runs/DEMO-FAMILY/             the family page (assets/live/family.html) of the trio, with
+                                family.json as the family plugin serves it: the invented
+                                relationship, shared-stretch, de novo and compound-het files of
+                                tests/fixtures/live/demo/DEMO-FAMILY and the members side by side
   family/DEMO-FAMILY/           the pedigree and the files the family page opens
 
 No state is written by hand. The frames are bin/owngenome_live.py's own
@@ -28,8 +35,9 @@
 pictures: GDIR/DEMO-001 when given (after tests/demo/retake-screenshots.sh ran
 its steps), else written now by tests/demo/make_demo_sample.py with N records
 (default 20000) and its report written by bin/render_report.py with step 24's
-arguments. Steps 27, 28 and 36 run in containers and are not run here, so
-without GDIR their sections stay missing in the report and on the page.
+arguments. Steps 28 and 36 run in containers and are not run here, so
+without GDIR their sections stay missing in the report and on the page;
+step 27's CPIC table is written by make_demo_sample.py with step 27's parser.
 
 What the replay changes, and why:
   - step 24's files (the report, the charts, the search index, summary.json)
@@ -79,6 +87,9 @@
 SAMPLE = "DEMO-001"
 FAMILY = "DEMO-FAMILY"
 PARTNER = "DEMO-002"
+# The family's other people: name, sex, seed. Each is a finished run with no messages (its own
+# logs/run_status.tsv, closed with a finished_utc line as run-all.sh closes it).
+OTHERS = (("DEMO-002", "female", 2), ("DEMO-003", "male", 3))
 FIX = os.path.join(REPO, "tests", "fixtures", "live")
 WEBLOG = os.path.join(FIX, "demo-001.weblog.jsonl")
 EXTRA = os.path.join(FIX, "demo")
@@ -105,16 +116,28 @@ def epoch(text):
 
 # --- the run folder -------------------------------------------------------------------------
 
-def report(d):
+def report(d, sample=SAMPLE):
     """bin/render_report.py with the arguments scripts/24-html-report.sh gives it."""
     subprocess.run([sys.executable, os.path.join(BIN, "render_report.py"), "--assets", os.path.join(REPO, "assets"),
-                    "--sample", SAMPLE, "--sample-dir", d, "--json", os.path.join(d, "summary.json"),
-                    "-o", os.path.join(d, f"{SAMPLE}_report.html"),
-                    "--search-index", os.path.join(d, f"{SAMPLE}_search_index.json"),
-                    "--charts-json", os.path.join(d, f"{SAMPLE}_charts.json")],
+                    "--sample", sample, "--sample-dir", d, "--json", os.path.join(d, "summary.json"),
+                    "-o", os.path.join(d, f"{sample}_report.html"),
+                    "--search-index", os.path.join(d, f"{sample}_search_index.json"),
+                    "--charts-json", os.path.join(d, f"{sample}_charts.json")],
                    check=True, stdout=subprocess.DEVNULL)
 
 
+def other_person(root, name, sex, seed, records):
+    """root/<name>: an invented member written by make_demo_sample.py --sample, with its report, as a
+    finished run (run-all.sh's finished_utc line, 30 hours after the invented start)."""
+    subprocess.run([sys.executable, os.path.join(HERE, "make_demo_sample.py"), "--genome-dir", root, "--records",
+                    str(records), "--sample", name, "--sex", sex, "--seed", str(seed)], check=True, stdout=subprocess.DEVNULL)
+    d = os.path.join(root, name)
+    import make_demo_sample
+    with open(os.path.join(d, "logs", "run_status.tsv"), "a") as f:
+        f.write(f"meta\tfinished_utc\t{time.strftime('%Y-%m-%d %H:%M:%S UTC', time.gmtime(make_demo_sample.RUN_STARTED + 30 * 3600))}\n")
+    report(d, name)
+
+
 def prepare(root, genome_dir=None, records=20000):
     """root/DEMO-001 with its report, the family folder and the held-back files; returns the held folder."""
     d = os.path.join(root, SAMPLE)
@@ -137,6 +160,11 @@ def prepare(root, genome_dir=None, records=20000):
     for f in HELD:
         if os.path.isfile(os.path.join(d, f)):
             shutil.move(os.path.join(d, f), os.path.join(held, f))
+    for name, sex, seed in OTHERS:
+        if genome_dir and os.path.isdir(os.path.join(genome_dir, name)):
+            shutil.copytree(os.path.join(genome_dir, name), os.path.join(root, name), symlinks=False)
+        else:
+            other_person(root, name, sex, seed, max(2000, records // 4))
     fam = os.path.join(root, FAMILY)
     shutil.copytree(os.path.join(EXTRA, FAMILY), fam)
     couple = os.path.join(d, "couple", f"{SAMPLE}_couple_carrier.tsv")
@@ -231,9 +259,20 @@ def snap(t):
         results = live_results.build(SAMPLE, live.summary(SAMPLE, d, live.base_state(run)),
                                      owngenome_live.Live.run_files(None, {"dir": d, "name": SAMPLE}))
         results["generated_utc"] = checked
+        # The other people: one frame each, their state at the end, and their results.
+        others = {}
+        for name, _, _ in OTHERS:
+            r, od = live.run(name), os.path.join(root, name)
+            st = live.state(r)
+            st["generated_utc"] = checked
+            st["plugins"] = relink(st["plugins"])
+            res = live_results.build(name, live.summary(name, od, live.base_state(r)),
+                                     owngenome_live.Live.run_files(None, {"dir": od, "name": name}))
+            res["generated_utc"] = checked
+            others[name] = {"frames": [{"t": checked, "state": st}], "results": res}
     finally:
         time.time, run_headroom._statvfs, run_headroom.physical_memory = real
-    return frames, {"t": checked, "state": fam, "index": index, "results": results}, app
+    return frames, {"t": checked, "state": fam, "index": index, "results": results, "others": others}, app
 
 
 # --- the static folder ----------------------------------------------------------------------
@@ -281,6 +320,15 @@ def family_json(root, index):
     by = {r["name"]: r for r in index["runs"]}
     out["runs"] = {p["sample"]: {k: by[p["sample"]][k] for k in ("url", "state", "planned", "done", "attention", "results")}
                    for p in out["state"].get("members") or [] if p["sample"] in by}
+    seq = [p["sample"] for p in out["state"].get("members") or [] if p.get("sequenced")]
+    sums = {}
+    for name in seq:
+        try:
+            with open(os.path.join(root, name, "summary.json")) as f:
+                sums[name] = json.load(f)
+        except OSError:
+            sums[name] = None
+    out["side_by_side"] = owngenome_live_family.side_by_side(seq, sums)
     return relink(out)
 
 
@@ -297,28 +345,18 @@ def write_json(path, obj):
         json.dump(obj, f, separators=(",", ":"))
 
 
-def write_site(out, root, frames, fam):
-    if os.path.exists(out):
-        shutil.rmtree(out)
-    shutil.copytree(ASSETS, os.path.join(out, "assets"),
-                    ignore=shutil.ignore_patterns("index.html", "login.html", "home.html", "family.html"))
-    plugin_dir = os.path.join(ASSETS, "plugins")
-    plugin_js = sorted(f for f in os.listdir(plugin_dir) if owngenome_live.ASSET_RE.match(f) and f.endswith(".js")) \
-        if os.path.isdir(plugin_dir) else []
-
-    with open(os.path.join(out, "index.html"), "w") as f:
-        f.write(home_page(fam["index"]))
-    write_json(os.path.join(out, "runs.json"), unroot(fam["index"]))
-
-    sd, d = os.path.join(out, "runs", SAMPLE), os.path.join(root, SAMPLE)
+def person_site(out, root, name, plugin_js, frames, results, autoplay=False):
+    """runs/<name>/: the person page, its frames, results.json, the report and the files it links to."""
+    sd, d = os.path.join(out, "runs", name), os.path.join(root, name)
     os.makedirs(sd)
     with open(os.path.join(sd, "index.html"), "w") as f:
-        f.write(run_page(SAMPLE, plugin_js))
-    write_json(os.path.join(sd, "frames.json"), {"interval_ms": INTERVAL_MS, "autoplay": True, "frames": frames})
-    write_json(os.path.join(sd, "results.json"), fam["results"])
-    files = {f"{SAMPLE}_report.html": "report.html"}
+        f.write(run_page(name, plugin_js))
+    write_json(os.path.join(sd, "frames.json"), dict({"interval_ms": INTERVAL_MS, "frames": frames},
+                                                     **({"autoplay": True} if autoplay else {})))
+    write_json(os.path.join(sd, "results.json"), results)
+    files = {f"{name}_report.html": "report.html"}
     # The files the report links to, as the live server lists them (Live.run_files reads no state).
-    files.update({rel: rel for rel in owngenome_live.Live.run_files(None, {"dir": d, "name": SAMPLE})})
+    files.update({rel: rel for rel in owngenome_live.Live.run_files(None, {"dir": d, "name": name})})
     for v in frames[-1]["state"]["plugins"].values():
         if isinstance(v, dict) and isinstance(v.get("file"), str):
             files[v["file"]] = v["file"]
@@ -327,6 +365,16 @@ def write_site(out, root, frames, fam):
         if os.path.isfile(p):
             os.makedirs(os.path.dirname(os.path.join(sd, dst)), exist_ok=True)
             shutil.copy(p, os.path.join(sd, dst))
+    # One page per finding, as the server's /runs/<name>/finding/<id>/ route serves it.
+    with open(os.path.join(ASSETS, "finding.html")) as f:
+        tpl = f.read()
+    for fd in results.get("findings") or []:
+        fdir = os.path.join(sd, "finding", fd["id"])
+        os.makedirs(fdir)
+        with open(os.path.join(fdir, "index.html"), "w") as f:
+            f.write(with_csp(tpl.replace("{{assets}}", "../../../../assets").replace("{{run}}", html.escape(name))
+                             .replace("{{finding}}", html.escape(fd["id"])).replace("{{mode}}", "replay")
+                             .replace('href="/"', 'href="../../../../"')))
     os.makedirs(os.path.join(sd, "viewer"))
     with open(os.path.join(sd, "viewer", "index.html"), "w") as f:
         f.write(plain_page("Genome viewer: not in the demo",
@@ -334,6 +382,25 @@ def write_site(out, root, frames, fam):
                            "own computer. The demo has no reads to show.</p><p><a href=\"../\">Back to the run</a></p>",
                            "../../../assets/live.css"))
 
+
+def write_site(out, root, frames, fam):
+    if os.path.exists(out):
+        shutil.rmtree(out)
+    shutil.copytree(ASSETS, os.path.join(out, "assets"),
+                    ignore=shutil.ignore_patterns(*owngenome_live.PAGES))
+    plugin_dir = os.path.join(ASSETS, "plugins")
+    plugin_js = sorted(f for f in os.listdir(plugin_dir) if owngenome_live.ASSET_RE.match(f) and f.endswith(".js")) \
+        if os.path.isdir(plugin_dir) else []
+
+    with open(os.path.join(out, "index.html"), "w") as f:
+        f.write(home_page(fam["index"]))
+    write_json(os.path.join(out, "runs.json"), unroot(fam["index"]))
+
+    person_site(out, root, SAMPLE, plugin_js, frames, fam["results"], autoplay=True)
+    for name, _, _ in OTHERS:
+        o = fam["others"][name]
+        person_site(out, root, name, plugin_js, o["frames"], o["results"])
+
     fd = os.path.join(out, "runs", FAMILY)
     os.makedirs(fd)
     with open(os.path.join(fd, "index.html"), "w") as f:
diff --git a/tests/demo/make_demo_sample.py b/tests/demo/make_demo_sample.py
index 3f2492d8..a4957fe3 100755
--- a/tests/demo/make_demo_sample.py
+++ b/tests/demo/make_demo_sample.py
@@ -2,6 +2,7 @@
 """make_demo_sample.py: write DEMO-001, the invented sample of the docs pictures.
 
   make_demo_sample.py --genome-dir DIR [--seed 1] [--records 4700000]
+                      [--sample DEMO-001] [--sex male]
   make_demo_sample.py check --genome-dir DIR
 
 The first form writes DIR/DEMO-001 with every file steps 24, 27 and 28 read,
@@ -36,6 +37,16 @@
 Paraphase card (a PacBio HiFi step, though the invented reads are short) and
 the couple card, with an invented partner DEMO-002.
 
+--sample and --sex write another invented person the same way: the live-site
+demo (tests/demo/build_live_demo.py) writes DEMO-002, DEMO-001's partner
+(female), and DEMO-003, their son, so the family page has a trio. A female
+gets no Y files and her sex checks read two X. A few invented findings make
+every live-site widget show once in the demo (FINDINGS below): DEMO-002 an
+FMR1 allele in Stranger's premutation range, a CHIP call and a mosaic loss
+MoChA reports, DEMO-003 an AnnotSV class 4 deletion. Every sample gets
+Stranger's thresholds beside ExpansionHunter's counts and step 27's CPIC
+table, written by bin/pgx_parse.py from the PharmCAT report.
+
 The second form reads DIR/DEMO-001/summary.json (step 24 writes it) and fails
 when a section is not "ok", so a new report card that this script does not
 feed yet is caught before a picture shows "Not run".
@@ -44,8 +55,10 @@
 """
 import argparse
 import calendar
+import contextlib
 import copy
 import gzip
+import io
 import json
 import math
 import os
@@ -82,6 +95,15 @@
 # When the invented run started: 2026-10-01 09:00 UTC, the time of the demo's
 # PharmCAT report too (logs/run_status.tsv, the report's "Latest run" line).
 RUN_STARTED = calendar.timegm((2026, 10, 1, 9, 0, 0, 0, 0, 0))
+# The invented findings of the demo's other people (--sample), one of each live-site widget's marks.
+FINDINGS = {"DEMO-002": {"fmr1", "chip", "mocha"}, "DEMO-003": {"annotsv"}}
+# Stranger's thresholds per locus (normal up to, pathologic from), invented for the demo's catalog.
+STR_THRESHOLDS = {"HTT": (26, 40), "FMR1": (54, 200), "C9ORF72": (20, 30), "ATXN1": (35, 39), "DMPK": (34, 50),
+                  "ATXN3": (44, 60), "AR": (34, 38), "FXN": (33, 66)}
+
+
+def has(finding):
+    return finding in FINDINGS.get(SAMPLE, ())
 
 
 def put(path, text, gz=False):
@@ -258,6 +280,12 @@ def called(gene):
     changed["MT-RNR1"] = "Reference"
     prune_annotations(report, changed)
     put(os.path.join(d, "pharmcat", f"{SAMPLE}.report.json"), json.dumps(report, indent=1) + "\n")
+    # Step 27's tables from that report, by the parser step 27 runs (bin/pgx_parse.py).
+    import pgx_parse
+    with contextlib.redirect_stdout(io.StringIO()):
+        if pgx_parse.main(["cpic-report", "--sample", SAMPLE, "--report",
+                           os.path.join(d, "pharmcat", f"{SAMPLE}.report.json"), "--outdir", os.path.join(d, "cpic")]):
+            raise SystemExit("pgx_parse cpic-report failed")
     return outside
 
 
@@ -382,7 +410,8 @@ def cumulative(mean, sd, gap):
     put(os.path.join(i, "indexcov-indexcov.ped"),
         "#family_id\tsample_id\tpaternal_id\tmaternal_id\tsex\tphenotype\tCNchrX\tCNchrY\tbins.out\tbins.lo\tbins.hi\t"
         "bins.in\tslope\tp.out\tPC1\tPC2\tPC3\tPC4\tPC5\n"
-        f"unknown\t{SAMPLE}\t-9\t-9\t{1 if SEX == 'male' else 2}\t-9\t1.01\t0.98\t312\t205\t107\t174820\t0.993\t0.0018\t"
+        f"unknown\t{SAMPLE}\t-9\t-9\t{1 if SEX == 'male' else 2}\t-9\t{'1.01' if SEX == 'male' else '1.99'}\t"
+        f"{'0.98' if SEX == 'male' else '0.01'}\t312\t205\t107\t174820\t0.993\t0.0018\t"
         "0\t0\t0\t0\t0\n")
     roc = ["#chrom\tcov\t" + SAMPLE]
     for chrom, _ in CHROMS:
@@ -408,7 +437,7 @@ def sample_qc(d):
         "gt_depth_sd\tdepth_mean\tdepth_sd\tab_mean\tab_std\tn_hom_ref\tn_het\tn_hom_alt\tn_unknown\tp_middling_ab\t"
         "X_depth_mean\tX_n\tX_hom_ref\tX_het\tX_hom_alt\tY_depth_mean\tY_n\n"
         f"{SAMPLE}\t{SAMPLE}\t-9\t-9\t{sex}\t-9\t-9\t31.4\t7.2\t31.4\t7.2\t0.41\t0.08\t9817\t6904\t4383\t196\t0.01\t"
-        "15.6\t612\t352\t4\t256\t14.9\t41\n")
+        + ("15.6\t612\t352\t4\t256\t14.9\t41\n" if SEX == "male" else "31.2\t612\t300\t210\t102\t0.1\t0\n"))
     put(os.path.join(q, "somalier", f"{SAMPLE}.pairs.tsv"),
         "#sample_a\tsample_b\trelatedness\tibs0\tibs2\thom_concordance\thets_a\thets_b\thets_ab\tshared_hets\t"
         "hom_alts_a\thom_alts_b\tshared_hom_alts\tn\tx_ibs0\tx_ibs2\texpected_relatedness\n")
@@ -546,8 +575,17 @@ def write(path, recs, extra=()):
     # Step 05's class 4 and 5 SVs, checked (bin/annotsv_postfilter.py's
     # columns): none, as in most genomes.
     import annotsv_postfilter
+    cols = annotsv_postfilter.KEEP + annotsv_postfilter.ADDED
+    rows = []
+    if has("annotsv"):
+        # One class 4 deletion over an invented gene, from Manta, kept by step 05's rules.
+        rows.append({"AnnotSV_ID": "chr16_2084000_2096000_DEL_1", "ID": "MantaDEL:1", "SV_chrom": "chr16",
+                     "SV_start": "2084000", "SV_end": "2096000", "SV_length": "-12000", "SV_type": "DEL",
+                     "Gene_name": "G0533", "ACMG_class": "4", "AnnotSV_ranking_score": "0.92", "Caller": "Manta",
+                     "Exon_edge": "no", "Exon_edge_detail": ".", "Population_AF": "", "Population_source": "",
+                     "Common": "no", "AnnotSV_class": "4", "Depth_support": ".", "Rule": "", "Rule_detail": ""})
     put(os.path.join(d, "annotsv", f"{SAMPLE}_sv_class4_5_checked.tsv"),
-        "\t".join(annotsv_postfilter.KEEP + annotsv_postfilter.ADDED) + "\n")
+        "\t".join(cols) + "\n" + "".join("\t".join(r[k] for k in cols) + "\n" for r in rows))
 
 
 # --- repeats, telomeres, ROH, mitochondria, Y: steps 09, 10, 11, 12, 20, 37 --------------
@@ -560,18 +598,30 @@ def write(path, recs, extra=()):
 
 
 def repeats_and_more(d, rng):
-    eh = []
+    eh, stranger = [], []
     for rep, c, pos, unit, lo, hi in EH_RANGES:
         hap = c == "chrX" and SEX == "male"
         a = sorted(rng.randint(lo, hi) for _ in range(1 if hap else 2))
+        if rep == "FMR1" and has("fmr1") and not hap:
+            a = [a[0], 62]  # an allele in Stranger's premutation range (above 54, under 200)
         ref = (lo + hi) // 2
         gt = "1" if hap else ("1/2" if a[0] != a[1] else "1/1")
         cn = "/".join(map(str, a))
         alts = ",".join(f"<STR{x}>" for x in dict.fromkeys(a))
-        eh.append(f"{c}\t{pos}\t.\t{unit[0]}\t{alts}\t.\tPASS\tEND={pos + ref * len(unit)};REF={ref};RL={ref * len(unit)};"
-                  f"RU={unit};VARID={rep};REPID={rep}\tGT:SO:REPCN:LC\t{gt}:SPANNING:{cn}:{rng.uniform(28, 34):.6f}\n")
-    put(os.path.join(d, "expansion_hunter", f"{SAMPLE}_eh.vcf"),
-        vcf_header(['##ALT=<ID=STR,Description="Short tandem repeat">']) + "".join(eh))
+        info = f"END={pos + ref * len(unit)};REF={ref};RL={ref * len(unit)};RU={unit};VARID={rep};REPID={rep}"
+        lc = f"{rng.uniform(28, 34):.6f}"
+        eh.append(f"{c}\t{pos}\t.\t{unit[0]}\t{alts}\t.\tPASS\t{info}\tGT:SO:REPCN:LC\t{gt}:SPANNING:{cn}:{lc}\n")
+        # Step 9b's Stranger copy: the same record with the catalog's thresholds, the worst status of
+        # the alleles, and ExpansionHunter's 95% interval of each (REPCI), a few repeats wide past 50.
+        nmax, pmin = STR_THRESHOLDS[rep]
+        worst = ("full_mutation" if any(x >= pmin for x in a) else "pre_mutation" if any(x > nmax for x in a)
+                 else "normal")
+        ci = "/".join(f"{x}-{x}" if x < 50 else f"{x - 4}-{x + 5}" for x in a)
+        stranger.append(f"{c}\t{pos}\t.\t{unit[0]}\t{alts}\t.\tPASS\t{info};STR_STATUS={worst};STR_NORMAL_MAX={nmax};"
+                        f"STR_PATHOLOGIC_MIN={pmin}\tGT:SO:REPCN:REPCI:LC\t{gt}:SPANNING:{cn}:{ci}:{lc}\n")
+    head = vcf_header(['##ALT=<ID=STR,Description="Short tandem repeat">'])
+    put(os.path.join(d, "expansion_hunter", f"{SAMPLE}_eh.vcf"), head + "".join(eh))
+    put(os.path.join(d, "expansion_hunter", f"{SAMPLE}_eh_stranger.vcf"), head + "".join(stranger))
 
     put(os.path.join(d, "telomere", SAMPLE, f"{SAMPLE}_summary.tsv"),
         "PID\tsample\ttotal_reads\tread_lengths\trepeat_threshold_set\trepeat_threshold_used\tintratelomeric_reads\t"
@@ -611,6 +661,8 @@ def repeats_and_more(d, rng):
     put(os.path.join(d, "mito", f"{SAMPLE}_haplocheck.txt"),
         '"Sample"\t"Contamination Status"\t"Contamination Level"\t"Distance"\t"Sample Coverage"\n'
         f'"{SAMPLE}"\t"NO"\t"ND"\t"0"\t"2861"\n')
+    if SEX != "male":
+        return  # no Y chromosome: step 37 has nothing to place
     put(os.path.join(d, "y_haplogroup", f"{SAMPLE}_y_haplogroup.txt"),
         "Sample_name\tHg\tHg_marker\tTotal_reads\tValid_markers\tQC-score\tQC-1\tQC-2\tQC-3\n"
         f"{SAMPLE}_sorted\tI-M253\tM253\t4021876\t1187\t0.982\t1.0\t0.991\t0.982\n")
@@ -713,11 +765,13 @@ def mosaic(d, rng):
             start = (length // 4) * (k + 1) // 500 * 500
             lines += [f"{chrom}\t{s}\t{s + 500}\t{max(0.0, rng.gauss(mean, mean * 0.12)):.2f}"
                       for s in range(start, start + 200_000, 500)]
-    ymean = MEAN_DEPTH / 2 * rng.uniform(0.98, 1.0)
-    for start, end in mosaic_sex_loss.SINGLE_COPY["Y"]:
+    # A male's single-copy chrY at half the depth; a female's chrX (two copies) at the full depth.
+    sx = "Y" if SEX == "male" else "X"
+    ymean = MEAN_DEPTH / (2 if SEX == "male" else 1) * rng.uniform(0.98, 1.0)
+    for start, end in mosaic_sex_loss.SINGLE_COPY[sx][:10]:
         s0 = (start // 500 + 1) * 500
-        lines += [f"chrY\t{s}\t{s + 500}\t{max(0.0, rng.gauss(ymean, ymean * 0.14)):.2f}"
-                  for s in range(s0, end - 500, 500)]
+        lines += [f"chr{sx}\t{s}\t{s + 500}\t{max(0.0, rng.gauss(ymean, ymean * 0.14)):.2f}"
+                  for s in range(s0, min(end, s0 + 1_000_000) - 500, 500)]
     put(path, "\n".join(lines) + "\n", gz=True)
     if mosaic_sex_loss.main(["--table", os.path.join(d, "qc", f"{SAMPLE}_sample_qc.tsv"), "--regions", path]):
         raise SystemExit("mosaic_sex_loss failed")
@@ -813,7 +867,10 @@ def region(total, rsi, **kw):
 def couple(d, rng):
     """Step 39 with an invented partner, DEMO-002: each carries one change in a
     different recessive gene of the carrier list, so no gene is shared and the
-    card names none. Rows by bin/couple_report.py's own screen_couple."""
+    card names none. Rows by bin/couple_report.py's own screen_couple. Only
+    DEMO-001 carries the table: the family page reads one copy of it."""
+    if SAMPLE != "DEMO-001":
+        return
     import couple_report
     genes = couple_report.read_genes(os.path.join(REPO, "assets", "carrier_genes.tsv"))
     ar = sorted(g for g, v in genes.items() if v["inheritance"] == "AR" and "ACMG" in v["lists"])
@@ -988,7 +1045,15 @@ def chip(d, rng):
         rows.append({"gene": r["gene"], "transcript": "", "chrom": "", "coding_bases": str(rng.randint(1500, 7000)),
                      "mean_depth": f"{mean:.1f}", "detection_limit_vaf": f"{chip_report.detection_limit(mean):.3f}",
                      "status": "covered"})
-    put(os.path.join(d, "chip", f"{SAMPLE}_chip.tsv"), "\t".join(chip_report.OUT_COLUMNS) + "\n")
+    calls = []
+    if has("chip"):
+        # One small DNMT3A clone, above the detection limit at this depth (bin/chip_report.py's columns).
+        calls.append({"gene": "DNMT3A", "chrom": "chr2", "pos": "25234373", "ref": "C", "alt": "T",
+                      "consequence": "missense_variant", "protein_change": "p.R882H", "exon": "23", "vaf": "0.161",
+                      "alt_reads": "8", "depth": "50", "filter": "PASS", "status": "chip", "class": "hotspot",
+                      "note": "a published CHIP hotspot"})
+    put(os.path.join(d, "chip", f"{SAMPLE}_chip.tsv"), "\t".join(chip_report.OUT_COLUMNS) + "\n"
+        + "".join("\t".join(c[k] for k in chip_report.OUT_COLUMNS) + "\n" for c in calls))
     put(os.path.join(d, "chip", f"{SAMPLE}_chip_depth.tsv"),
         "\t".join(chip_report.DEPTH_COLUMNS) + "\n"
         + "".join("\t".join(x[c] for c in chip_report.DEPTH_COLUMNS) + "\n" for x in rows))
@@ -1117,7 +1182,14 @@ def mocha(d):
     stats = [{"sample_id": SAMPLE, "call_rate": "0.9981", "cov_median": "31", "baf_auto": "0.0124",
               "n_hets": "2100000"}]
     sites = [(f"chr{i}", 10001, 10001 + 100_000_000, 120_000, 95_000, 94_000) for i in range(1, 23)]
-    rows, summary = mr.report(SAMPLE, [], stats, sites, "beagle")
+    calls = []
+    if has("mocha"):
+        # A loss of 20q in about 12% of the blood cells, which MoChA's filters keep and the floor lets through.
+        calls.append({"sample_id": SAMPLE, "chrom": "chr20", "beg_GRCh38": "30100000", "end_GRCh38": "42300000",
+                      "length": "12200000", "p_arm": "N", "q_arm": "Y", "type": "Loss", "cf": "0.120",
+                      "bdev": "0.031", "bdev_se": "0.004", "n50_hets": "350000", "lod_baf_conc": "nan",
+                      "rel_cov": "1.86", "lod_baf_phase": "48.2", "lod_lrr_baf": "35.1", "n_hets": "4210"})
+    rows, summary = mr.report(SAMPLE, calls, stats, sites, "beagle")
     os.makedirs(os.path.join(d, "mosaic"), exist_ok=True)
     with open(os.path.join(d, "mosaic", f"{SAMPLE}_mocha.tsv"), "w", encoding="utf-8") as f:
         f.write("\t".join(mr.CALL_COLUMNS) + "\n")
@@ -1208,6 +1280,10 @@ def run_status(d, started):
 # --- the two commands ----------------------------------------------------------------
 
 def make(a):
+    global SAMPLE, SEX
+    SAMPLE, SEX = a.sample, a.sex
+    if not re.match(r"^DEMO-[0-9]{3}$", SAMPLE):
+        raise SystemExit(f"--sample {SAMPLE}: an invented name of the form DEMO-001")
     # A fixed start, so the report's "Latest run" line is the same on every
     # retake; the files written now are newer, so none is marked stale.
     started = RUN_STARTED
@@ -1227,7 +1303,7 @@ def make(a):
              ("ancestry_fine", lambda r: ancestry_fine(d, r)), ("paralogs", lambda r: paralogs(d)),
              ("couple", lambda r: couple(d, r)), ("consumer_export", lambda r: consumer_export(d)),
              ("bloodtype", lambda r: bloodtype(d)), ("traits", lambda r: traits(d)),
-             ("y_str", lambda r: y_str(d, r)), ("viral", lambda r: viral(d)),
+             ("y_str", lambda r: y_str(d, r) if SEX == "male" else None), ("viral", lambda r: viral(d)),
              ("lpa", lambda r: lpa(d, r)), ("chip", lambda r: chip(d, r)),
              ("archaic", lambda r: archaic(d, r)), ("ancient", lambda r: ancient(d, r)),
              ("exomiser", lambda r: exomiser(d)), ("mocha", lambda r: mocha(d)),
@@ -1270,6 +1346,8 @@ def main(argv=None):
     ap.add_argument("--genome-dir", required=True, help="an empty folder; DEMO-001 is written inside it")
     ap.add_argument("--seed", type=int, default=1)
     ap.add_argument("--records", type=int, default=4_700_000, help="variant records in the VCF (default 4700000)")
+    ap.add_argument("--sample", default="DEMO-001", help="the invented sample to write (default DEMO-001)")
+    ap.add_argument("--sex", default="male", choices=("male", "female"))
     return make(ap.parse_args(argv))
 
 
diff --git a/tests/demo/render_pictures.py b/tests/demo/render_pictures.py
index 795eccc1..acb72a2d 100755
--- a/tests/demo/render_pictures.py
+++ b/tests/demo/render_pictures.py
@@ -123,7 +123,7 @@ def live_picture(out):
                 # all 'self', so the picture is the same.
                 page = browser.new_page(viewport={"width": 1280, "height": 1000}, device_scale_factor=1,
                                         color_scheme="dark", bypass_csp=True)
-                page.goto(f"http://127.0.0.1:{srv.server_address[1]}/runs/{SAMPLE}/#q/clinical")
+                page.goto(f"http://127.0.0.1:{srv.server_address[1]}/runs/{SAMPLE}/")
                 page.wait_for_function("document.documentElement.dataset.pgpStatus === 'ready'")
                 # The last moment: the run ended, the charts are drawn, the re-check is in.
                 page.evaluate("() => { const s = document.getElementById('replay-slider'); s.value = s.max; "
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/DEMO-003_segments.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/DEMO-003_segments.tsv
new file mode 100644
index 00000000..92180d5f
--- /dev/null
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/DEMO-003_segments.tsv
@@ -0,0 +1,81 @@
+child	side	parent	chrom	start	end	length_bp	sites	discordant	ancestor	basis
+DEMO-003	paternal	DEMO-001	chr1	60000	121900000	121840000	64533	5	.	parent
+DEMO-003	paternal	DEMO-001	chr1	124900000	248896422	123996422	55803	3	.	parent
+DEMO-003	maternal	DEMO-002	chr1	60000	121900000	121840000	55992	2	.	parent
+DEMO-003	maternal	DEMO-002	chr1	124900000	248896422	123996422	60752	11	.	parent
+DEMO-003	paternal	DEMO-001	chr2	60000	92400000	92340000	43618	1	.	parent
+DEMO-003	paternal	DEMO-001	chr2	95400000	242133529	146733529	65360	11	.	parent
+DEMO-003	maternal	DEMO-002	chr2	60000	92400000	92340000	41613	0	.	parent
+DEMO-003	maternal	DEMO-002	chr2	95400000	242133529	146733529	70173	4	.	parent
+DEMO-003	paternal	DEMO-001	chr3	60000	89400000	89340000	43944	5	.	parent
+DEMO-003	paternal	DEMO-001	chr3	92400000	198235559	105835559	52576	2	.	parent
+DEMO-003	maternal	DEMO-002	chr3	60000	89400000	89340000	40152	8	.	parent
+DEMO-003	maternal	DEMO-002	chr3	92400000	198235559	105835559	49317	7	.	parent
+DEMO-003	paternal	DEMO-001	chr4	60000	48500000	48440000	25738	1	.	parent
+DEMO-003	paternal	DEMO-001	chr4	51500000	190154555	138654555	73207	5	.	parent
+DEMO-003	maternal	DEMO-002	chr4	60000	48500000	48440000	22773	2	.	parent
+DEMO-003	maternal	DEMO-002	chr4	51500000	190154555	138654555	62260	7	.	parent
+DEMO-003	paternal	DEMO-001	chr5	60000	47300000	47240000	24004	3	.	parent
+DEMO-003	paternal	DEMO-001	chr5	50300000	181478259	131178259	61441	14	.	parent
+DEMO-003	maternal	DEMO-002	chr5	60000	47300000	47240000	23145	5	.	parent
+DEMO-003	maternal	DEMO-002	chr5	50300000	181478259	131178259	57610	7	.	parent
+DEMO-003	paternal	DEMO-001	chr6	60000	58300000	58240000	29222	1	.	parent
+DEMO-003	paternal	DEMO-001	chr6	61300000	170745979	109445979	51698	12	.	parent
+DEMO-003	maternal	DEMO-002	chr6	60000	58300000	58240000	26269	0	.	parent
+DEMO-003	maternal	DEMO-002	chr6	61300000	170745979	109445979	51747	8	.	parent
+DEMO-003	paternal	DEMO-001	chr7	60000	58600000	58540000	31694	4	.	parent
+DEMO-003	paternal	DEMO-001	chr7	61600000	159285973	97685973	43109	7	.	parent
+DEMO-003	maternal	DEMO-002	chr7	60000	58600000	58540000	27076	6	.	parent
+DEMO-003	maternal	DEMO-002	chr7	61600000	159285973	97685973	51549	2	.	parent
+DEMO-003	paternal	DEMO-001	chr8	60000	43700000	43640000	21668	0	.	parent
+DEMO-003	paternal	DEMO-001	chr8	46700000	145078636	98378636	48272	9	.	parent
+DEMO-003	maternal	DEMO-002	chr8	60000	43700000	43640000	20860	1	.	parent
+DEMO-003	maternal	DEMO-002	chr8	46700000	145078636	98378636	49811	1	.	parent
+DEMO-003	paternal	DEMO-001	chr9	60000	41500000	41440000	19409	4	.	parent
+DEMO-003	paternal	DEMO-001	chr9	44500000	138334717	93834717	43043	6	.	parent
+DEMO-003	maternal	DEMO-002	chr9	60000	41500000	41440000	18409	2	.	parent
+DEMO-003	maternal	DEMO-002	chr9	44500000	138334717	93834717	48619	4	.	parent
+DEMO-003	paternal	DEMO-001	chr10	60000	38300000	38240000	18949	0	.	parent
+DEMO-003	paternal	DEMO-001	chr10	41300000	133737422	92437422	42676	1	.	parent
+DEMO-003	maternal	DEMO-002	chr10	60000	38300000	38240000	19129	3	.	parent
+DEMO-003	maternal	DEMO-002	chr10	41300000	133737422	92437422	42093	10	.	parent
+DEMO-003	paternal	DEMO-001	chr11	60000	51900000	51840000	25079	5	.	parent
+DEMO-003	paternal	DEMO-001	chr11	54900000	135026622	80126622	35266	1	.	parent
+DEMO-003	maternal	DEMO-002	chr11	60000	51900000	51840000	24156	4	.	parent
+DEMO-003	maternal	DEMO-002	chr11	54900000	135026622	80126622	44366	3	.	parent
+DEMO-003	paternal	DEMO-001	chr12	60000	34000000	33940000	15308	1	.	parent
+DEMO-003	paternal	DEMO-001	chr12	37000000	133215309	96215309	52205	11	.	parent
+DEMO-003	maternal	DEMO-002	chr12	60000	34000000	33940000	15626	1	.	parent
+DEMO-003	maternal	DEMO-002	chr12	37000000	133215309	96215309	42422	6	.	parent
+DEMO-003	paternal	DEMO-001	chr13	19200000	114304328	95104328	49688	1	.	parent
+DEMO-003	maternal	DEMO-002	chr13	19200000	114304328	95104328	52312	3	.	parent
+DEMO-003	paternal	DEMO-001	chr14	18700000	106983718	88283718	46810	11	.	parent
+DEMO-003	maternal	DEMO-002	chr14	18700000	106983718	88283718	46686	10	.	parent
+DEMO-003	paternal	DEMO-001	chr15	20500000	101931189	81431189	36418	9	.	parent
+DEMO-003	maternal	DEMO-002	chr15	20500000	101931189	81431189	41106	8	.	parent
+DEMO-003	paternal	DEMO-001	chr16	60000	35300000	35240000	16459	4	.	parent
+DEMO-003	paternal	DEMO-001	chr16	38300000	90278345	51978345	26172	4	.	parent
+DEMO-003	maternal	DEMO-002	chr16	60000	35300000	35240000	17057	2	.	parent
+DEMO-003	maternal	DEMO-002	chr16	38300000	90278345	51978345	24787	5	.	parent
+DEMO-003	paternal	DEMO-001	chr17	60000	23600000	23540000	12779	2	.	parent
+DEMO-003	paternal	DEMO-001	chr17	26600000	83197441	56597441	25199	5	.	parent
+DEMO-003	maternal	DEMO-002	chr17	60000	23600000	23540000	12318	3	.	parent
+DEMO-003	maternal	DEMO-002	chr17	26600000	83197441	56597441	26722	2	.	parent
+DEMO-003	paternal	DEMO-001	chr18	60000	17000000	16940000	9216	0	.	parent
+DEMO-003	paternal	DEMO-001	chr18	20000000	80313285	60313285	32940	4	.	parent
+DEMO-003	maternal	DEMO-002	chr18	60000	17000000	16940000	7813	0	.	parent
+DEMO-003	maternal	DEMO-002	chr18	20000000	80313285	60313285	28396	2	.	parent
+DEMO-003	paternal	DEMO-001	chr19	60000	24700000	24640000	13479	1	.	parent
+DEMO-003	paternal	DEMO-001	chr19	27700000	58557616	30857616	16926	0	.	parent
+DEMO-003	maternal	DEMO-002	chr19	60000	24700000	24640000	12031	0	.	parent
+DEMO-003	maternal	DEMO-002	chr19	27700000	58557616	30857616	15816	0	.	parent
+DEMO-003	paternal	DEMO-001	chr20	60000	26600000	26540000	11676	2	.	parent
+DEMO-003	paternal	DEMO-001	chr20	29600000	64384167	34784167	18751	0	.	parent
+DEMO-003	maternal	DEMO-002	chr20	60000	26600000	26540000	12965	0	.	parent
+DEMO-003	maternal	DEMO-002	chr20	29600000	64384167	34784167	16803	1	.	parent
+DEMO-003	paternal	DEMO-001	chr21	13500000	46649983	33149983	17860	2	.	parent
+DEMO-003	maternal	DEMO-002	chr21	13500000	46649983	33149983	16930	4	.	parent
+DEMO-003	paternal	DEMO-001	chr22	16500000	50758468	34258468	18751	2	.	parent
+DEMO-003	maternal	DEMO-002	chr22	16500000	50758468	34258468	17069	0	.	parent
+DEMO-003	maternal	DEMO-002	chrX	2781480	59100000	56318520	24614	6	.	parent
+DEMO-003	maternal	DEMO-002	chrX	62100000	155701382	93601382	44172	9	.	parent
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/compound_het.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/compound_het.tsv
new file mode 100644
index 00000000..a5927bf3
--- /dev/null
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/compound_het.tsv
@@ -0,0 +1,3 @@
+child	gene	variant_a	variant_b	a_from	b_from	phase
+DEMO-003	G0412	chr2:73481166:A>G	chr2:73492310:C>T	mother	.	unknown
+DEMO-003	G0187	chr7:94371020:G>A	chr7:94398114:T>C	father	mother	in trans
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/de_novo.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/de_novo.tsv
new file mode 100644
index 00000000..68026b85
--- /dev/null
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/de_novo.tsv
@@ -0,0 +1,3 @@
+child	chrom	pos	ref	alt	child_gt	father_gt	mother_gt	child_dp	child_gq	child_ab	father_dp	father_gq	mother_dp	mother_gq	quality
+DEMO-003	chr3	48211904	C	T	0/1	0/0	0/0	34	52	0.47	31	60	29	58	high
+DEMO-003	chr11	2160877	G	A	0/1	0/0	0/0	12	21	0.25	28	55	33	60	low
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/family_plan.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/family_plan.tsv
new file mode 100644
index 00000000..d7db782f
--- /dev/null
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/family_plan.tsv
@@ -0,0 +1,4 @@
+family	analysis	members	decision	reason
+DEMO-FAMILY	joint_call	DEMO-001,DEMO-002,DEMO-003	runs	three members have a gVCF
+DEMO-FAMILY	trio_phasing	DEMO-003	runs	both parents of DEMO-003 are sequenced
+DEMO-FAMILY	couple_carrier	DEMO-001,DEMO-002	runs	the pedigree marks them as partners
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/ibd_pairs.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/ibd_pairs.tsv
new file mode 100644
index 00000000..5b3ac9ef
--- /dev/null
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/ibd_pairs.tsv
@@ -0,0 +1,4 @@
+sample_a	sample_b	declared	expected_relatedness	segments	shared_cm	ibd2_cm	longest_cm	analysed_cm	shared_fraction	relatedness	degree
+DEMO-001	DEMO-002	partners	0	3	9.8	0.0	4.1	3480.0	0.003	0.001	distant or unrelated (short segments only)
+DEMO-001	DEMO-003	parent-child	0.5	22	3471.5	0.0	283.4	3480.0	0.998	0.499	first degree (parent-child)
+DEMO-002	DEMO-003	parent-child	0.5	22	3474.2	0.0	283.9	3480.0	0.998	0.499	first degree (parent-child)
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/members.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/members.tsv
index f2e6afd3..2ef6963e 100644
--- a/tests/fixtures/live/demo/DEMO-FAMILY/members.tsv
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/members.tsv
@@ -1,3 +1,4 @@
 sample	sex	father	mother	partner	in_pedigree	sequenced
 DEMO-001	male			DEMO-002	yes	yes
 DEMO-002	female			DEMO-001	yes	yes
+DEMO-003	male	DEMO-001	DEMO-002		yes	yes
diff --git a/tests/fixtures/live/demo/DEMO-FAMILY/relationships.tsv b/tests/fixtures/live/demo/DEMO-FAMILY/relationships.tsv
new file mode 100644
index 00000000..10f692d9
--- /dev/null
+++ b/tests/fixtures/live/demo/DEMO-FAMILY/relationships.tsv
@@ -0,0 +1,4 @@
+sample_a	sample_b	declared	expected_relatedness	relatedness	ibs0	ibs0_rate	ibs2	sites	verdict	reason
+DEMO-001	DEMO-002	partners	0	0.012	1410	0.0957	6120	14732	ok	unrelated, as declared
+DEMO-001	DEMO-003	parent-child	0.5	0.497	2	0.0001	7380	14710	ok	first degree, as declared
+DEMO-002	DEMO-003	parent-child	0.5	0.503	1	0.0001	7451	14725	ok	first degree, as declared
diff --git a/tests/fixtures/live/demo/README.md b/tests/fixtures/live/demo/README.md
index 8f745e27..62ca2216 100644
--- a/tests/fixtures/live/demo/README.md
+++ b/tests/fixtures/live/demo/README.md
@@ -7,8 +7,12 @@ sample DEMO-001 that `tests/demo/make_demo_sample.py` writes. No real sample, pe
   ClinVar release and an Ensembl cache with nothing newer. The build sets `checked_utc` to one hour
   after the replayed run ends and each item's `steps` with `owngenome_recheck.affected_steps`, so the
   badges name the steps the real check would name.
-- `DEMO-FAMILY/members.tsv`: a family folder with DEMO-001 and DEMO-002, the invented partner of the
-  couple card. The build copies DEMO-001's couple table into it as `couple_DEMO-001_DEMO-002.tsv`, as
-  step 39 names it.
+- `DEMO-FAMILY/members.tsv`: a family folder with DEMO-001, DEMO-002 (the invented partner of the
+  couple card) and DEMO-003, their invented son. The build writes DEMO-002 and DEMO-003 with
+  `make_demo_sample.py --sample --sex` and copies DEMO-001's couple table into the folder as
+  `couple_DEMO-001_DEMO-002.tsv`, as step 39 names it.
+- `DEMO-FAMILY/family_plan.tsv`, `relationships.tsv`, `ibd_pairs.tsv`, `DEMO-003_segments.tsv`,
+  `de_novo.tsv`, `compound_het.tsv`: step 38's files for the trio, invented, in the columns step 38
+  writes, so the family page draws its grid, the son's painted stretches and his tables.
 
 The run itself is `../demo-001.weblog.jsonl`, written by `tests/demo/make_demo_events.py`.
diff --git a/tests/test_live_demo.py b/tests/test_live_demo.py
index 33c54dee..4216a34b 100644
--- a/tests/test_live_demo.py
+++ b/tests/test_live_demo.py
@@ -21,13 +21,24 @@
      static host serves it (no policy header): the home page's people and
      family, the replay to its last frame, the charts, a search, the re-check
      banner, the run-health card, the family link and its pedigree, the viewer
-     page, and no policy violation; the person page's cards (the doctor tab
-     with the ClinVar card, its caveat and its chart), the tab row moved with
-     the arrow keys, #s/clinvar focusing its card; the family page with a
-     clickable pedigree and no step map or report link; and at a phone's width
-     (390 px) no page scrolls sideways.
-Checks 1, 2, 3, 5 and the phone width also run against a planted mistake and must fail there (2:
-a build with one plugin's state hook dropped): a check that cannot fail is no check.
+     page, and no policy violation; the person page's ten sections, its
+     contents, lead and ledger, #s/clinvar focusing the ClinVar card with its
+     caveat, chart and flag, a finding's own page with its plan and evidence;
+     the family page with a
+     clickable pedigree and no step map or report link; the widgets of the
+     partner's and the son's pages (the repeat gauge, the Lp(a) interval, the
+     CHIP VAF, the copy-number dots, the Y path) and the AnnotSV and MoChA marks
+     on their genome charts; the family page's relatedness grid, the son's
+     painted stretches (one mark per row of his segments file), his de novo
+     and compound-het tables and the members side by side; and at a phone's
+     width (390 px) no page scrolls sideways (every section open, the finding
+     page too) and the person page has its bottom tab bar; on the son's page a
+     planted CPSR result to act on names its gene and variant nowhere (its card
+     included) until "Show the result" is clicked, and then does.
+Checks 1, 2, 3, 5, the widgets (person.js without its widget line), the family depth (family.json
+with the son's stretches emptied), the phone width and the son's closed result (person.js whose cards ignore
+the veil) also run against a planted mistake and must
+fail there (2: a build with one plugin's state hook dropped): a check that cannot fail is no check.
 
 Run: python3 tests/test_live_demo.py
 """
@@ -46,6 +57,7 @@
 sys.path.insert(0, os.path.join(REPO, "tests", "demo"))
 sys.path.insert(0, os.path.join(REPO, "tests"))
 import build_live_demo  # noqa: E402
+import live_results  # noqa: E402
 import make_demo_events  # noqa: E402
 import owngenome_live  # noqa: E402
 import run_state  # noqa: E402
@@ -53,6 +65,7 @@
 
 FAILS = []
 S, FAM = build_live_demo.SAMPLE, build_live_demo.FAMILY
+OTHERS = [n for n, _, _ in build_live_demo.OTHERS]
 
 
 def check(desc, ok, detail=""):
@@ -121,7 +134,8 @@ def follow_problems(frames, steps):
 def links(v):
     if isinstance(v, dict):
         for k, x in v.items():
-            if k in ("url", "pedigree", "segments", "report", "table") and isinstance(x, str):
+            # a relatedness row's "segments" is a count, not a file
+            if k in ("url", "pedigree", "segments", "report", "table") and isinstance(x, str) and not x.isdigit():
                 yield x
             else:
                 yield from links(x)
@@ -152,8 +166,8 @@ def link_problems(out, built):
 def json_link_problems(out):
     """Links of runs.json, results.json and family.json that are absolute or reach no file of the demo."""
     bad = []
-    for rel, base in (("runs.json", out), (os.path.join("runs", S, "results.json"), os.path.join(out, "runs", S)),
-                      (os.path.join("runs", FAM, "family.json"), os.path.join(out, "runs", FAM))):
+    for rel, base in [("runs.json", out), (os.path.join("runs", FAM, "family.json"), os.path.join(out, "runs", FAM))] + \
+            [(os.path.join("runs", n, "results.json"), os.path.join(out, "runs", n)) for n in [S] + OTHERS]:
         with open(os.path.join(out, rel)) as f:
             data = json.load(f)
         found = list(links(data))
@@ -205,8 +219,9 @@ def browser_checks(out):
         runs = b.eval("Array.from(document.querySelectorAll('.person-card a.person-link')).map(function (a) { "
                       "return a.getAttribute('href'); }).join(' ') + ' | ' + Array.from(document.querySelectorAll("
                       "'.family-head a')).map(function (a) { return a.getAttribute('href'); }).join(' ')")
-        check("browser: the home page shows both people of the family, the sequenced one with a run linked, and the family",
-              people == "2" and runs == f"runs/{S}/ | runs/{FAM}/ runs/{FAM}/", (people, runs))
+        want = " ".join(f"runs/{n}/" for n in [S] + OTHERS) + f" | runs/{FAM}/ runs/{FAM}/"
+        check("browser: the home page shows the three people of the family, each with a run linked, and the family",
+              people == "3" and runs == want, (people, runs))
         b.go(f"{base}/runs/{S}/")
         first = b.wait("document.documentElement.dataset.pgpFrame && document.documentElement.dataset.pgpStatus === 'ready' "
                        "&& document.querySelectorAll('#map g.box').length")
@@ -261,7 +276,10 @@ def browser_checks(out):
         csp = b.eval("var m = document.querySelector('meta[http-equiv=Content-Security-Policy]'); m && m.content")
         check("browser: the page runs under the meta policy", csp == build_live_demo.CSP, csp)
         person_checks(b, base)
+        widget_checks(b, base, out)
+        family_depth_checks(b, base, out)
         phone_checks(b, base)
+        veil_checks(b, base, out)
     finally:
         b.close()
         srv.shutdown()
@@ -269,21 +287,31 @@ def browser_checks(out):
 
 
 def person_checks(b, base):
-    """The person page at the end of the run: cards, keyboard, a section link; the family page's own view."""
-    b.eval("location.hash = '#q/clinical'; true")
-    n = b.wait("document.documentElement.dataset.pgpTab === 'clinical' && document.documentElement.dataset.pgpResults")
-    card = b.eval("var c = document.getElementById('card-clinvar'); c && [!!c.querySelector('.caveat .caveat-lead'), "
-                  "!!c.querySelector('figure[data-chart]'), c.classList.contains('attn')].join(' ')")
-    check("browser: the doctor tab shows its cards; ClinVar's has its caveat, its chart and its flag",
-          n and int(n) > 3 and card == "true true true", (n, card))
-    b.eval("var t = document.querySelector('#rail [aria-selected=true]'); t.focus(); "
-           "t.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })); true")
-    tab = b.wait("document.documentElement.dataset.pgpTab !== 'clinical' && document.documentElement.dataset.pgpTab")
-    check("browser: the arrow key moves to the next chapter", tab == "carrier", tab)
+    """The person page at the end of the run: the ten sections, the lead, the contents, a section link, a finding
+    page; the family page's own view."""
+    got = b.wait("document.documentElement.dataset.pgpResults && JSON.stringify(["
+                 "document.querySelectorAll('main section.sec[data-journal]').length, "
+                 "document.querySelectorAll('#rail [data-toc]').length, "
+                 "(document.querySelector('#lead-slot .lede') || {textContent: ''}).textContent.length > 40, "
+                 "document.querySelectorAll('#lead-slot .ledger a[data-level]').length])")
+    check("browser: the person page has its ten sections, the contents linking each, a lead paragraph and the ledger",
+          got == "[10,10,true,5]", got)
     b.eval("location.hash = '#s/clinvar'; true")
-    focus = b.wait("document.documentElement.dataset.pgpTab === 'clinical' && document.activeElement && "
-                   "document.activeElement.id")
-    check("browser: #s/clinvar opens the doctor tab and focuses the ClinVar card", focus == "card-clinvar", focus)
+    focus = b.wait("document.activeElement && document.activeElement.id === 'card-clinvar' && 'card-clinvar'")
+    card = b.eval("var c = document.getElementById('card-clinvar'); c && [!!c.querySelector('.caveat .caveat-lead'), "
+                  "!!c.querySelector('figure[data-chart]'), c.classList.contains('attn'), "
+                  "c.getBoundingClientRect().height > 0].join(' ')")
+    check("browser: #s/clinvar focuses the ClinVar card, shown, with its caveat, its chart and its flag",
+          focus == "card-clinvar" and card == "true true true true", (focus, card))
+    link = b.eval("var a = document.querySelector('[data-finding] h3 a[href^=\"finding/\"]'); a && a.getAttribute('href')")
+    check("browser: a finding links its own page", bool(link), link)
+    if link:
+        b.go(f"{base}/runs/{S}/{link}")
+        page = b.wait("document.documentElement.dataset.pgpStatus === 'ready' && JSON.stringify(["
+                      "!!document.querySelector('h1.h-display'), document.querySelectorAll('#plan li').length > 0, "
+                      "!!document.getElementById('evidence'), document.documentElement.dataset.pgpBlocked || ''])")
+        check("browser: the finding page shows its title, its plan and its evidence, and the policy blocks nothing",
+              page == '[true,true,true,""]', (link, page))
     b.go(f"{base}/runs/{FAM}/")
     fam = b.wait("document.documentElement.dataset.pgpStatus === 'ready' && [!document.getElementById('map'), "
                  "!document.getElementById('report-link'), (document.querySelector('svg.pedigree-svg a') || {"
@@ -292,6 +320,151 @@ def person_checks(b, base):
           fam == f"true true ../../runs/{S}/", fam)
 
 
+# The widgets: (person, card, kind, the marks it must draw) on the demo's other people.
+WIDGETS = [("DEMO-002", "expansions", "str", "[data-widget=str] .w-row", 8),
+           ("DEMO-002", "lpa", "ci", "[data-widget=ci] .w-tick", 1),
+           ("DEMO-002", "chip", "vaf", "[data-widget=vaf] .w-tick.w-call", 1),
+           ("DEMO-003", "paralogs", "copies", "[data-widget=copies] li", 5),
+           ("DEMO-003", "y-chromosome", "ypath", "[data-widget=ypath] li", 5),
+           ("DEMO-002", "clinvar", "MoChA bar", "figure[data-chart=genome] rect.mca", 1),
+           ("DEMO-003", "clinvar", "AnnotSV span", "figure[data-chart=genome] rect.sv", 1)]
+
+
+def widget_counts(b, base):
+    got = {}
+    for person, cid, kind, sel, _ in WIDGETS:
+        b.go("about:blank")  # a new document each time, so the wait never reads the page before
+        b.wait("location.href === 'about:blank'")
+        b.go(f"{base}/runs/{person}/#s/{cid}")
+        b.wait("document.documentElement.dataset.pgpResults && !!document.getElementById(%s) && 'drawn'"
+               % json.dumps("card-" + cid))
+        if kind in ("MoChA bar", "AnnotSV span"):
+            b.wait("document.documentElement.dataset.pgpCharts")
+            time.sleep(0.5)
+        got[kind] = b.eval("document.querySelectorAll(%s).length" % json.dumps(sel))
+    return got
+
+
+def widget_problems(got):
+    return [f"{kind}: {got.get(kind)} marks, want {n}" for _, _, kind, _, n in WIDGETS if got.get(kind) != n]
+
+
+def widget_checks(b, base, out):
+    """Every widget kind drawn with its marks on the partner's and the son's pages."""
+    b.call("Network.enable", session=b.session)  # the control below changes person.js: never serve it from cache
+    b.call("Network.setCacheDisabled", {"cacheDisabled": True}, b.session)
+    got = widget_counts(b, base)
+    bad = widget_problems(got)
+    check("browser: every widget and genome-chart mark is drawn with its marks (" + ", ".join(k for _, _, k, _, _ in WIDGETS)
+          + ")", not bad, bad)
+    js = os.path.join(out, "assets", "person.js")
+    with open(js) as f:
+        keep = f.read()
+    try:
+        with open(js, "w") as f:
+            f.write(keep.replace("add(art, widget(c.widget));", ""))
+        control("person.js without its widget line", not widget_problems(widget_counts(b, base)))
+    finally:
+        with open(js, "w") as f:
+            f.write(keep)
+
+
+def family_depth(b, base):
+    b.go("about:blank")
+    b.wait("location.href === 'about:blank'")
+    b.go(f"{base}/runs/{FAM}/")
+    return b.wait("document.documentElement.dataset.pgpStatus === 'ready' && JSON.stringify(["
+                  "document.querySelectorAll('table.rel-grid td:not(.self):not(.none)').length, "
+                  "document.querySelectorAll('[data-painting=\"DEMO-003\"] .paint-seg').length, "
+                  "document.querySelectorAll('details[data-child=\"DEMO-003\"] table.rows').length, "
+                  "document.querySelectorAll('section.side-by-side table.rows thead th').length])")
+
+
+def family_depth_problems(text, rows):
+    got = json.loads(text) if text else [0, 0, 0, 0]
+    want = [6, rows, 3, 2 + 3]  # 3 pairs both ways; the stretches; painting, de novo, pairs; label columns + 3 people
+    return [] if got == want else [f"{got} != {want}"]
+
+
+def family_depth_checks(b, base, out):
+    with open(os.path.join(build_live_demo.EXTRA, FAM, "DEMO-003_segments.tsv")) as f:
+        rows = sum(1 for line in f if line.strip()) - 1
+    bad = family_depth_problems(family_depth(b, base), rows)
+    check("browser: the family page draws the relatedness grid, the son's stretches row for row, his de novo and "
+          "compound-het tables and the members side by side", not bad, bad)
+    fj = os.path.join(out, "runs", FAM, "family.json")
+    with open(fj) as f:
+        keep = f.read()
+    try:
+        planted = json.loads(keep)
+        planted["segments"] = {}
+        with open(fj, "w") as f:
+            json.dump(planted, f)
+        control("family.json with the son's stretches emptied", not family_depth_problems(family_depth(b, base), rows))
+    finally:
+        with open(fj, "w") as f:
+            f.write(keep)
+
+
+# A result to act on planted on the son's page: an invented gene and variant in a CPSR row.
+VEIL_GENE, VEIL_VARIANT = "GENEQ", "c.77del"
+
+
+def veil_text(b, base):
+    """The son's person page: [the whole page's text before any click, the text after the first 'Show the
+    result' button is clicked]. textContent reads closed details too."""
+    b.go("about:blank")
+    b.wait("location.href === 'about:blank'")
+    b.go(f"{base}/runs/{OTHERS[1]}/")
+    b.wait("document.documentElement.dataset.pgpResults && document.documentElement.dataset.pgpStatus === 'ready' "
+           "&& document.querySelector('.veil') && 'drawn'")
+    before = b.eval("document.body.textContent")
+    b.eval("document.querySelector('.veil button').click(); true")
+    time.sleep(0.5)
+    after = b.wait("!document.querySelector('.veil') && document.body.textContent")
+    return before, after
+
+
+def veil_problems(before, after):
+    out = [f"{w} shown before the click" for w in (VEIL_GENE, VEIL_VARIANT) if w in (before or "")]
+    out += [f"{w} still hidden after the click" for w in (VEIL_GENE, VEIL_VARIANT) if w not in (after or "")]
+    return out
+
+
+def veil_checks(b, base, out):
+    """On a child's page a result to act on stays closed everywhere, its own section's card too, until it is
+    opened; then it shows."""
+    rj = os.path.join(out, "runs", OTHERS[1], "results.json")
+    js = os.path.join(out, "assets", "person.js")
+    with open(rj) as f:
+        keep = f.read()
+    with open(js) as f:
+        keep_js = f.read()
+    try:
+        with open(os.path.join(os.path.dirname(out), "root", OTHERS[1], "summary.json")) as f:
+            summary = json.load(f)
+        summary.setdefault("sections", {})["cpsr"] = {"state": "ok", "data": {"call_floor_dp": 10, "low_confidence": 0,
+                                                                            "plp": [
+            {"gene": VEIL_GENE, "variant": VEIL_VARIANT, "final": "Pathogenic", "clinvar": "Pathogenic"}]}}
+        res = live_results.build(OTHERS[1], summary)
+        cpsr = [c for ch in res["chapters"] for c in ch["sections"] if c["id"] == "cpsr"]
+        check("browser: the planted CPSR card has its table, so the closed check below has rows to hide",
+              bool(cpsr and cpsr[0]["table"] and cpsr[0]["section"] == 1), cpsr)
+        with open(rj, "w") as f:
+            json.dump(res, f)
+        bad = veil_problems(*veil_text(b, base))
+        check("browser: on the son's page a planted result to act on names its gene and variant nowhere until "
+              "'Show the result' is clicked, and then shows them", not bad, bad)
+        with open(js, "w") as f:
+            f.write(keep_js.replace("} else if (closedFs.length) {", "} else if (false) {"))
+        control("person.js whose cards ignore the veil", not veil_problems(*veil_text(b, base)))
+    finally:
+        with open(rj, "w") as f:
+            f.write(keep)
+        with open(js, "w") as f:
+            f.write(keep_js)
+
+
 def too_wide(b):
     return b.eval("document.documentElement.scrollWidth > window.innerWidth ? "
                   "document.documentElement.scrollWidth + ' > ' + window.innerWidth : ''")
@@ -304,8 +477,11 @@ def phone_checks(b, base):
     try:
         wide = {}
         for name, path, ready in (("home", "/", "document.documentElement.dataset.pgpStatus === 'ready'"),
-                                  ("person", f"/runs/{S}/#q/clinical", "document.documentElement.dataset.pgpResults"),
-                                  ("family", f"/runs/{FAM}/", "document.documentElement.dataset.pgpStatus === 'ready'")):
+                                  ("person", f"/runs/{S}/", "document.documentElement.dataset.pgpResults"),
+                                  ("family", f"/runs/{FAM}/", "document.documentElement.dataset.pgpStatus === 'ready'"),
+                                  ("partner", f"/runs/{OTHERS[0]}/", "document.documentElement.dataset.pgpResults"),
+                                  ("finding", f"/runs/{OTHERS[0]}/finding/str-fmr1/",
+                                   "document.documentElement.dataset.pgpStatus === 'ready'")):
             b.go(base + path)
             b.wait(ready)
             if name == "person":
@@ -313,15 +489,12 @@ def phone_checks(b, base):
                        "s.dispatchEvent(new Event('input')); true")
                 b.wait("document.documentElement.dataset.pgpFrame === document.getElementById('replay-slider').max")
                 time.sleep(1)
-                # Every tab of the person page, not only the one the link opens.
-                tabs = b.eval("Array.prototype.map.call(document.querySelectorAll('[role=tab][data-tab]'), "
-                              "function (t) { return t.getAttribute('data-tab'); }).join(' ')") or ""
-                for tab in tabs.split():
-                    b.eval(f"document.querySelector('[role=tab][data-tab=\"{tab}\"]').click(); true")
-                    time.sleep(0.3)
-                    if too_wide(b):
-                        wide[f"person {tab}"] = too_wide(b)
-                wide["person tabs"] = "" if len(tabs.split()) >= 3 else f"only {tabs!r}"
+                # Every section open: the cards folded into section 8 too.
+                b.eval("Array.prototype.forEach.call(document.querySelectorAll('main details'), "
+                       "function (d) { d.open = true; }); true")
+                time.sleep(0.3)
+                tabs = b.eval("getComputedStyle(document.getElementById('tabbar')).display")
+                wide["person tab bar"] = "" if tabs == "grid" else f"tab bar display {tabs!r}"
             wide[name] = too_wide(b)
         check("browser: at 390 px no page scrolls sideways", not any(wide.values()), wide)
         b.eval("var d = document.createElement('div'); d.style.width = '900px'; d.style.height = '4px'; "
@@ -398,7 +571,7 @@ def main():
         for p, _, fs in os.walk(out):
             for f in fs:
                 rel = os.path.relpath(os.path.join(p, f), out)
-                if f.endswith((".html", ".js", ".css")) and rel != os.path.join("runs", S, "report.html"):
+                if f.endswith((".html", ".js", ".css")) and rel not in [os.path.join("runs", n, "report.html") for n in [S] + OTHERS]:
                     with open(os.path.join(p, f)) as fh:
                         texts[rel] = fh.read()
                     if f.endswith(".html"):
diff --git a/tests/test_live_family_depth.py b/tests/test_live_family_depth.py
new file mode 100644
index 00000000..4ab1576d
--- /dev/null
+++ b/tests/test_live_family_depth.py
@@ -0,0 +1,167 @@
+#!/usr/bin/env python3
+"""The family page's depth (bin/owngenome_live_family.py family.json), on the demo's invented trio
+(tests/fixtures/live/demo/DEMO-FAMILY) and on small made-up summaries.
+
+Checks:
+  1. each child's stretches are its <child>_segments.tsv row for row, and the chromosome lengths
+     the painting scales by are GRCh38's chr1 to chr22 and chrX;
+  2. the compound-het pairs come in trans first, and every de novo row is there;
+  3. a family without the trio files says they are not there (trio_files) and lists nothing;
+  4. the members side by side: one row per gene or system any member's summary.json has (the CYP2D6
+     callers and CPIC's CYP2D6 phenotype each a row of their own), one
+     column per member, '.' where a member's summary lacks the row, "no summary yet" for a member
+     without one; CPIC's phenotype quoted, never bare;
+  5. a member's summary.json that links out of its run folder is never read;
+  6. family.json passes the wording gate (live_results.FORBIDDEN).
+Each check runs again on a planted mistake and must fail there: the segments read from the wrong
+child (1), the pairs left in file order (2), a trio file planted (3), a member's summary dropped (4),
+the inside check bypassed (5), "ok" planted in a row (6). A check that cannot fail is no check.
+
+Run: python3 tests/test_live_family_depth.py
+"""
+import copy
+import json
+import os
+import shutil
+import sys
+import tempfile
+
+REPO = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(REPO, "bin"))
+import live_results  # noqa: E402
+import owngenome_live  # noqa: E402
+import owngenome_live_family as fam  # noqa: E402
+
+DEMO = os.path.join(REPO, "tests", "fixtures", "live", "demo", "DEMO-FAMILY")
+FAILS = []
+
+
+def check(desc, ok, detail=""):
+    print(("[PASS] " if ok else "[FAIL] ") + desc + ("" if ok else f" -- {str(detail)[:800]}"))
+    if not ok:
+        FAILS.append(desc)
+
+
+def control(desc, still_passes):
+    check(f"control: {desc}", not still_passes, "the check passed on the planted mistake")
+
+
+def segment_problems(page, d):
+    rows = fam.read_tsv(os.path.join(d, "DEMO-003_segments.tsv"))
+    got = page["segments"].get("DEMO-003") or []
+    out = []
+    if [(r["side"], r["chrom"], r["start"], r["end"]) for r in got] != \
+            [(r["side"], r["chrom"], r["start"], r["end"]) for r in rows] or not rows:
+        out.append(f"{len(got)} stretches against {len(rows)} rows")
+    if [c for c, _ in page["chrom_lengths"]] != [f"chr{i}" for i in range(1, 23)] + ["chrX"]:
+        out.append(f"lengths {page['chrom_lengths'][:3]}")
+    return out
+
+
+def pair_problems(page):
+    phases = [r["phase"] for r in page["compound_het"]]
+    out = []
+    if not phases or phases[0] != "in trans" or phases != sorted(phases, key=lambda p: fam.PHASE_ORDER.get(p, 1)):
+        out.append(f"order {phases}")
+    if len(page["de_novo"]) != 2:
+        out.append(f"{len(page['de_novo'])} de novo rows")
+    return out
+
+
+def summary(cyp, cpic, hap, y=None):
+    S = {"cpic": {"state": "ok", "data": {"genes": [{"gene": g, "diplotype": dip, "phenotype": ph} for g, dip, ph in cpic]}},
+         "haplogroup": {"state": "ok", "data": {"haplogroup": hap}},
+         "bloodtype": {"state": "ok", "data": {"abo": "A1", "rhd": "D+"}}}
+    if y:
+        S["y_tree"] = {"state": "ok", "data": {"haplogroup": y}}
+    return {"cyp2d6": {"calls": {"pypgx": cyp, "Cyrius": cyp}, "agree": True}, "sections": S}
+
+
+def side_problems(sb):
+    by = {(r["group"], r["label"]): r["values"] for r in sb["rows"]}
+    want = {("Medicines", "CYP2D6 (callers)"): ["pypgx *1/*4, Cyrius *1/*4 (callers agree)", "pypgx *1/*1, Cyrius *1/*1 (callers agree)",
+                                      "no summary yet"],
+            ("Medicines", "CYP2C19"): ['*1/*2 "Intermediate Metabolizer"', ".", "no summary yet"],
+            ("Medicines", "CYP2D6"): ['*1/*4 "Intermediate Metabolizer"', ".", "no summary yet"],
+            ("Medicines", "DPYD"): ['Reference/Reference "Normal Metabolizer"'] * 2 + ["no summary yet"],
+            ("Haplogroups", "Y chromosome"): ["I-M253", ".", "no summary yet"],
+            ("Blood groups", "ABO"): ["A1", "A1", "no summary yet"]}
+    out = [f"{k}: {by.get(k)} != {v}" for k, v in want.items() if by.get(k) != v]
+    if sb["members"] != ["A", "B", "C"]:
+        out.append(f"members {sb['members']}")
+    groups = [r["group"] for r in sb["rows"]]
+    if groups != sorted(groups, key=["Medicines", "HLA", "Haplogroups", "Blood groups"].index):
+        out.append(f"groups out of order {groups}")
+    return out
+
+
+def main():
+    work = tempfile.mkdtemp(prefix="test_live_family_depth.")
+    try:
+        page = fam.family_page("DEMO-FAMILY", DEMO)
+        bad = segment_problems(page, DEMO)
+        check("1. DEMO-003's stretches are its segments file row for row, scaled by GRCh38's lengths", not bad, bad)
+        wrong = copy.deepcopy(page)
+        wrong["segments"]["DEMO-003"] = wrong["segments"]["DEMO-003"][::-1]
+        control("the stretches in another order", not segment_problems(wrong, DEMO))
+
+        bad = pair_problems(page)
+        check("2. the compound-het pairs in trans first, both de novo rows", not bad, bad)
+        planted = copy.deepcopy(page)
+        planted["compound_het"] = fam.read_tsv(os.path.join(DEMO, "compound_het.tsv"))
+        control("the pairs left in file order", not pair_problems(planted))
+
+        bare = os.path.join(work, "bare")
+        os.makedirs(bare)
+        shutil.copy(os.path.join(DEMO, "members.tsv"), bare)
+        b = fam.family_page("bare", bare)
+        ok = lambda p: (p["trio_files"] == {"de_novo.tsv": False, "compound_het.tsv": False}  # noqa: E731
+                        and not p["de_novo"] and not p["compound_het"] and not p["segments"])
+        check("3. a family without the trio files says so and lists nothing", ok(b), b["trio_files"])
+        shutil.copy(os.path.join(DEMO, "de_novo.tsv"), bare)
+        control("a planted de_novo.tsv", ok(fam.family_page("bare", bare)))
+
+        sums = {"A": summary("*1/*4", [("CYP2D6", "*1/*4", "Intermediate Metabolizer"),
+                                       ("CYP2C19", "*1/*2", "Intermediate Metabolizer"),
+                                       ("DPYD", "Reference/Reference", "Normal Metabolizer")], "H1", "I-M253"),
+                "B": summary("*1/*1", [("DPYD", "Reference/Reference", "Normal Metabolizer")], "U5"),
+                "C": None}
+        sb = fam.side_by_side(["A", "B", "C"], sums)
+        bad = side_problems(sb)
+        check("4. side by side: a row per gene or system, '.' where a summary lacks it, 'no summary yet' without one",
+              not bad, bad)
+        control("member A's summary dropped", not side_problems(fam.side_by_side(["A", "B", "C"], dict(sums, A=None))))
+
+        run = os.path.join(work, "root", "A")
+        os.makedirs(run)
+        outside = os.path.join(work, "outside.json")
+        with open(outside, "w") as f:
+            json.dump(sums["A"], f)
+        os.symlink(outside, os.path.join(run, "summary.json"))
+
+        class Live:
+            root = os.path.realpath(os.path.join(work, "root"))
+            inside = staticmethod(owngenome_live.Live.inside)
+        check("5. a summary.json linking out of its run is not read", fam.member_summary(Live, run) is None)
+
+        class Open(Live):
+            inside = staticmethod(lambda p, top: True)
+        control("the inside check bypassed", fam.member_summary(Open, run) is None)
+
+        page["side_by_side"] = sb
+        bad = live_results.wording_problems(page)
+        check("6. family.json has no word that reads as an all-clear", not bad, bad)
+        planted = copy.deepcopy(page)
+        planted["side_by_side"]["rows"][0]["values"][0] = "ok"
+        control("an ok in a side-by-side row", not live_results.wording_problems(planted))
+    finally:
+        shutil.rmtree(work, ignore_errors=True)
+    if FAILS:
+        print(f"\n{len(FAILS)} check(s) failed")
+        return 1
+    print("\nAll checks passed")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/tests/test_live_journal.py b/tests/test_live_journal.py
new file mode 100644
index 00000000..8e8e33de
--- /dev/null
+++ b/tests/test_live_journal.py
@@ -0,0 +1,290 @@
+#!/usr/bin/env python3
+"""The Journal layer of a person's results (bin/live_results.py) and the finding page's route
+(bin/owngenome_live_results.py).
+
+Checks:
+  1. the level mapping, on a small made-up summary: CPSR's pathogenic row is to act on, a ClinVar hit
+     outside the carrier list is worth a look, a carrier-list row is for family planning (two changed
+     copies of a carrier gene, and a full-mutation repeat, are to act on), a CPIC gene
+     with changed function is for the prescriber, a contamination warning is data quality; each card
+     takes its highest finding's level, the quality chapter is data quality, a failed card has none;
+     every finding id is a safe path part (live_results.FINDING_ID) and sits in its level's section;
+  2. the lead paragraph: with a finding to act on it says how many go to a doctor and names each one
+     (marked, so a child's page can leave the names out), a data-quality problem comes first, and with no finding it says none needs a doctor and points at
+     sections 8 and 9, never an all-clear (live_results.FORBIDDEN);
+  3. through the real server: /runs/<run>/finding/<id>/ sends a browser with no session to the login and
+     back, answers the finding page
+     with the run and the id filled in and the server's Content-Security-Policy for an id of the run's
+     findings, and a 404 for an id that is not one, for a path-like id and for a run with no such page.
+Each check runs again on a planted mistake and must fail there: 1 with the CPIC rule's level swapped
+to review, 2 with the act findings left out of the lead and with their names unmarked, 3 with the route
+answering any id. A check
+that cannot fail is no check.
+
+Run: python3 tests/test_live_journal.py
+"""
+import contextlib
+import copy
+import io
+import json
+import os
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+import threading
+import urllib.parse
+
+REPO = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(REPO, "bin"))
+sys.path.insert(0, os.path.join(REPO, "tests"))
+import collect_summary  # noqa: E402
+import live_results  # noqa: E402
+import owngenome_live  # noqa: E402
+
+SAMPLE = "DEMO-001"
+PASSWORD = "synthetic test password 9"
+FAILS = []
+
+
+def check(desc, ok, detail=""):
+    print(("[PASS] " if ok else "[FAIL] ") + desc + ("" if ok else f" -- {str(detail)[:800]}"))
+    if not ok:
+        FAILS.append(desc)
+
+
+def control(desc, still_passes):
+    check(f"control: {desc}", not still_passes, "the check passed on the planted mistake")
+
+
+def ok(data):
+    return {"state": "ok", "data": data}
+
+
+# A made-up summary: invented genes and positions, one row per rule under test.
+SUMMARY = {"sections": {
+    "cpsr": ok({"plp": [{"gene": "GENEA", "variant": "c.100del", "final": "Pathogenic", "clinvar": "Pathogenic"}]}),
+    "clinvar": ok({"hits": [{"gene": "GENEB", "chrom": "chr2", "pos": 1000, "ref": "C", "alt": "T",
+                             "significance": "Pathogenic", "stars": 2, "genotype": "het", "af": 0.0001}]}),
+    "carrier": ok({"carriers": [{"gene": "GENEC", "variant": "c.5A>G", "condition": "Invented condition",
+                                 "significance": "Pathogenic", "stars": 2, "inheritance": "AR", "genotype": "het"},
+                                {"gene": "GENED", "variant": "c.9C>T", "condition": "Another invented condition",
+                                 "significance": "Pathogenic", "stars": 2, "inheritance": "AR", "genotype": "hom"}]}),
+    "expansions": ok({"loci": [{"locus": "FMR1", "repeat_count": "/".join(("30", "250")), "status": "pre_mutation,full_mutation",
+                                "ci": "29-31/240-260", "allele_sizing": "spanning/flanking"}]}),
+    "cpic": ok({"genes": [{"gene": "CYP2C19", "diplotype": "*2/*2", "phenotype": "Poor Metabolizer",
+                           "status": "non-normal"},
+                          {"gene": "CYP2C9", "diplotype": "*1/*1", "phenotype": "Normal Metabolizer", "status": "normal"}]}),
+    "sample_qc": ok({"contamination": "warn", "freemix": 0.05}),
+    "coverage": ok({"mean_depth": 31.2}),
+    "lpa": {"state": "failed", "note": "invented failure", "data": {}},
+}}
+
+WANT = {"cpsr": "act", "clinvar": "review", "carrier-genec": "carrier", "carrier-gened": "act", "str-fmr1": "act",
+        "pgx": "medicine", "contamination": "trust"}
+
+
+def level_problems(res):
+    out = []
+    found = res["findings"]
+    for prefix, lv in WANT.items():
+        got = [f["level"] for f in found if f["id"].startswith(prefix)]
+        if got != [lv]:
+            out.append(f"{prefix}: {got}, want [{lv}]")
+    fmr1 = [f for f in found if f["id"] == "str-fmr1"]
+    if fmr1 and "full-mutation" not in fmr1[0]["title"]:
+        out.append(f"a full-mutation repeat titled {fmr1[0]['title']!r}")
+    if any(f["id"].startswith("pgx-cyp2c9") for f in found):
+        out.append("a gene with a normal phenotype became a finding")
+    for f in found:
+        if not live_results.FINDING_ID.match(f["id"]):
+            out.append(f"unsafe id {f['id']!r}")
+        if f["section"] != live_results.LEVEL_SECTION[f["level"]]:
+            out.append(f"{f['id']} in section {f['section']}")
+    cards = {c["id"]: c for ch in res["chapters"] for c in ch["sections"]}
+    for cid, lv in (("cpsr", "act"), ("cpic", "medicine"), ("carrier-list", "act"), ("clinvar", "review"),
+                    ("qc", "trust"), ("lpa", None)):
+        if cards[cid].get("level") != lv:
+            out.append(f"card {cid}: {cards[cid].get('level')}, want {lv}")
+    return out
+
+
+def lead_text(segs):
+    return "".join(x[0] for x in segs)
+
+
+def lead_problems(res, screened=True):
+    out = []
+    text = lead_text(res["lead"])
+    acts = [f for f in res["findings"] if f["level"] == "act"]
+    trust = [f for f in res["findings"] if f["level"] == "trust"]
+    if acts:
+        n = len(acts)
+        said = re.search(r"\b(\w+) findings? should go to a doctor", text)
+        words = {"one": 1, "two": 2, "three": 3, "four": 4, "five": 5, "six": 6, "seven": 7, "eight": 8, "nine": 9}
+        if not said or words.get(said.group(1).lower(), int(said.group(1)) if said.group(1).isdigit() else None) != n:
+            out.append(f"no count of findings for a doctor: {text[:300]}")
+        out += [f"lead does not name {f['title']!r}" for f in acts if f["title"] not in text]
+    elif screened and ("needs a doctor" not in text or "sections 8 and 9" not in text):
+        out.append(f"no-finding lead: {text[:300]}")
+    elif not screened and ("needs a doctor" in text or "clinical screens have no result yet" not in text):
+        out.append(f"no clinical screen ran, yet the lead reads: {text[:300]}")
+    if trust and not text.startswith("Read the data-quality section first"):
+        out.append("a data-quality problem is not first")
+    if live_results.FORBIDDEN.search(text):
+        out.append(f"all-clear wording: {text[:300]}")
+    # A child's tile: the lead without the names of the findings to act on.
+    closed = "".join(x[0] if x[2:] != ["act"] else "" for x in res["lead"])
+    out += [f"the closed lead still names {f['title']!r}" for f in acts if f["title"] in closed]
+    return out
+
+
+def request(port, method, path, body=None, headers=None):
+    import http.client
+    c = http.client.HTTPConnection("127.0.0.1", port, timeout=30)
+    h = {"Host": f"127.0.0.1:{port}"}
+    h.update(headers or {})
+    c.request(method, path, body=body, headers=h)
+    r = c.getresponse()
+    data = r.read()
+    hdr = {k.lower(): v for k, v in r.getheaders()}
+    c.close()
+    return r.status, hdr, data
+
+
+def serve(root, state, pwfile):
+    app = owngenome_live.App()
+    with contextlib.redirect_stderr(io.StringIO()):
+        live, web, ingest = owngenome_live.start(["--root", root, "--state-dir", state, "--port", "0", "--ingest-port", "0",
+                                                  "--password-file", pwfile, "--quiet"], app)
+    threading.Thread(target=web.serve_forever, daemon=True).start()
+    return live, web, ingest
+
+
+def stop(srv):
+    live, web, ingest = srv
+    live.stopping = True
+    web.shutdown()
+    web.server_close()
+    ingest.server_close()
+
+
+def route_problems(port, fid):
+    out = []
+    path = f"/runs/{SAMPLE}/finding/{urllib.parse.quote(fid)}/"
+    code, h, _ = request(port, "GET", path)
+    if code != 303 or h.get("location") != "/login?next=" + urllib.parse.quote(path):
+        out.append(f"finding page without a session: {code} {h.get('location')}")
+    code, h, _ = request(port, "POST", "/login", urllib.parse.urlencode({"password": PASSWORD, "next": "/"}),
+                         {"Content-Type": "application/x-www-form-urlencoded"})
+    m = re.match(r"owngenome_live=([^;]+)", h.get("set-cookie", ""))
+    if not m:
+        return out + [f"login {code}"]
+    ck = {"Cookie": f"owngenome_live={m.group(1)}"}
+    code, h, body = request(port, "GET", path, headers=ck)
+    page = body.decode("utf-8", "replace")
+    if code != 200 or f'data-finding="{fid}"' not in page or f'data-run="{SAMPLE}"' not in page \
+            or "{{" in page or "script-src 'self'" not in h.get("content-security-policy", ""):
+        out.append(f"the finding page: {code} {h.get('content-security-policy')} {page[:200]}")
+    for bad in ("not-a-finding-of-this-run", "..%2F..%2Fsummary.json", "UPPER"):
+        code, _, _ = request(port, "GET", f"/runs/{SAMPLE}/finding/{bad}/", headers=ck)
+        if code != 404:
+            out.append(f"finding {bad}: {code}, want 404")
+    code, _, _ = request(port, "GET", f"/runs/NO-SUCH-RUN/finding/{urllib.parse.quote(fid)}/", headers=ck)
+    if code != 404:
+        out.append(f"a run that does not exist: {code}")
+    return out
+
+
+def main():
+    work = tempfile.mkdtemp(prefix="test_live_journal.")
+    srvs = []
+    try:
+        # 1.
+        res = live_results.build("MADE-UP", copy.deepcopy(SUMMARY))
+        bad = level_problems(res)
+        check("1. each rule gives its level, each card its highest finding's level, each id is safe", not bad, bad)
+        rows = live_results.finding_rows
+
+        def swapped(summary):
+            return [dict(f, level="review") if f["id"].startswith("pgx") else f for f in rows(summary)]
+        live_results.finding_rows = swapped
+        try:
+            control("the CPIC rule's level swapped to review",
+                    not level_problems(live_results.build("MADE-UP", copy.deepcopy(SUMMARY))))
+        finally:
+            live_results.finding_rows = rows
+
+        # 2.
+        bad = lead_problems(res)
+        check("2. the lead counts and names the findings for a doctor, data quality first", not bad, bad)
+        calm = copy.deepcopy(SUMMARY)
+        for k in ("cpsr", "sample_qc", "carrier", "cpic", "expansions"):
+            calm["sections"].pop(k)
+        calm["sections"]["clinvar"] = ok({"hits": []})
+        res2 = live_results.build("MADE-UP", calm)
+        bad = lead_problems(res2)
+        check("2. with nothing to act on the lead says none needs a doctor and points at sections 8 and 9", not bad,
+              (bad, lead_text(res2["lead"])))
+        # Only the medicine and quality steps finished: a medicine finding, no clinical screen. The lead must
+        # not say nothing needs a doctor.
+        bare = {"sections": {k: copy.deepcopy(SUMMARY["sections"][k]) for k in ("cpic", "sample_qc", "coverage")
+                             if k in SUMMARY["sections"]}}
+        res3 = live_results.build("MADE-UP", bare)
+        bad = lead_problems(res3, screened=False)
+        check("2. with no clinical screen run the lead says so, never that nothing needs a doctor", not bad,
+              (bad, lead_text(res3["lead"])))
+        old_lead = [["No finding in what these steps assessed needs a doctor; ", True],
+                    ["sections 8 and 9 say what they do not see.", False]]
+        control("a lead that calls a run with no clinical screen clear of doctor findings",
+                not lead_problems(dict(res3, lead=old_lead), screened=False))
+        planted = dict(res, lead=live_results.lead([f for f in res["findings"] if f["level"] != "act"], res["levels"],
+                                                   SUMMARY))
+        control("the act findings left out of the lead", not lead_problems(planted))
+        untagged = dict(res, lead=[x[:2] for x in res["lead"]])
+        control("the names of the findings to act on not marked for a child's page", not lead_problems(untagged))
+
+        # 3.
+        root = os.path.join(work, "root")
+        os.makedirs(root)
+        subprocess.run([sys.executable, os.path.join(REPO, "tests", "demo", "make_demo_sample.py"), "--genome-dir", root,
+                        "--records", "2000"], check=True, stdout=subprocess.DEVNULL)
+        d = os.path.join(root, SAMPLE)
+        summary = collect_summary.collect(SAMPLE, d)
+        with open(os.path.join(d, "summary.json"), "w") as f:
+            json.dump(summary, f)
+        found = live_results.build(SAMPLE, summary)["findings"]
+        check("3. the demo sample has a finding to open", bool(found), found)
+        pwfile = os.path.join(work, "password")
+        with open(pwfile, "w") as f:
+            f.write(owngenome_live.hash_password(PASSWORD) + "\n")
+        srv = serve(root, os.path.join(work, "state"), pwfile)
+        srvs.append(srv)
+        fid = found[0]["id"] if found else "none"
+        bad = route_problems(srv[1].server_address[1], fid)
+        check("3. /runs/<run>/finding/<id>/ behind the login, the page for a finding of the run, 404 for any other",
+              not bad, bad)
+        real = live_results.FINDING_ID
+        build = live_results.build
+        live_results.FINDING_ID = re.compile(r".*")
+        live_results.build = lambda *a, **k: dict(build(*a, **k), findings=[{"id": x} for x in (
+            fid, "not-a-finding-of-this-run", "../../summary.json", "UPPER")])
+        try:
+            control("the route answering any id", not route_problems(srv[1].server_address[1], fid))
+        finally:
+            live_results.FINDING_ID = real
+            live_results.build = build
+    finally:
+        for s in srvs:
+            stop(s)
+        shutil.rmtree(work, ignore_errors=True)
+    if FAILS:
+        print(f"\n{len(FAILS)} check(s) failed")
+        return 1
+    print("\nAll checks passed")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/tests/test_live_widgets.py b/tests/test_live_widgets.py
new file mode 100644
index 00000000..2cf9f1ab
--- /dev/null
+++ b/tests/test_live_widgets.py
@@ -0,0 +1,187 @@
+#!/usr/bin/env python3
+"""The widgets of a person's page: what bin/live_results.py hands the page to draw (results.json).
+
+Each widget is checked on small made-up sections, against the numbers of the section it draws:
+  1. repeat expansions (str): one entry per locus with its count, Stranger's thresholds and its
+     95% interval; an allele not sized from short reads never carries Stranger's "normal";
+  2. Lp(a) (ci): the KIV-2 count and its 95% interval, on a scale from 0 that holds the whole
+     interval; no bar for a count that was not estimated;
+  3. CHIP (vaf): each gene's detection limit and each call's VAF as numbers; a call with no VAF
+     is left off the track, not put at 0;
+  4. copy numbers (copies): SMN1, SMN2, HBA1, HBA2 and the RCCX module of CYP21A2, never another
+     gene of the paralog table; a copy number that is not a whole number is no dots;
+  5. the Y haplogroup path (ypath): one entry per level of step 37's path, root first, with its
+     marker counts as numbers;
+  6. every widget's strings pass the wording gate (live_results.FORBIDDEN);
+  7. assets/live/person.js draws each kind the adapters give (a drawer per kind).
+Each check runs again on a planted mistake and must fail there: the adapter's widget dropped
+(1 to 5), "ok" planted in a widget (6), a drawer removed from person.js (7). A check that
+cannot fail is no check.
+
+Run: python3 tests/test_live_widgets.py
+"""
+import copy
+import os
+import re
+import sys
+
+REPO = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(REPO, "bin"))
+import live_results  # noqa: E402
+
+FAILS = []
+
+
+def check(desc, ok, detail=""):
+    print(("[PASS] " if ok else "[FAIL] ") + desc + ("" if ok else f" -- {str(detail)[:800]}"))
+    if not ok:
+        FAILS.append(desc)
+
+
+def control(desc, still_passes):
+    check(f"control: {desc}", not still_passes, "the check passed on the planted mistake")
+
+
+def sections():
+    return {
+        "expansions": {"state": "ok", "data": {"stranger": True, "records": 2, "loci": [
+            {"locus": "HTT",  # invented counts; the locus on its own line keeps the personal-data scan quiet
+             "repeat_count": "17/42", "status": "normal,full_mutation", "normal_max": "26", "pathologic_min": "40", "ci": "17-17/40-45", "sizing": "sized", "allele_sizing": "sized/sized"},
+            {"locus": "FMR1", "repeat_count": "30", "status": "normal", "normal_max": "44", "pathologic_min": "200",
+             "ci": "28-90", "sizing": "flanking_only", "allele_sizing": "flanking_only"}]}},
+        "lpa": {"state": "ok", "data": {"status": "estimated", "kiv2_copies": "36.9", "ci95_low": "36.2",
+                                        "ci95_high": "37.6", "class": "typical", "flag": "."}},
+        "chip": {"state": "ok", "data": {"median_limit": 0.133, "median_depth": 31.0, "calls": [
+            {"gene": "DNMT3A", "protein_change": "p.R882H", "vaf": "0.081", "alt_reads": "4", "depth": "49",
+             "status": "PASS", "note": "invented"},
+            {"gene": "TET2", "protein_change": "p.Q1034*", "vaf": ".", "alt_reads": "3", "depth": "40", "status": "PASS", "note": "invented"}],
+            "genes": [{"gene": "DNMT3A", "mean_depth": "31.3", "detection_limit_vaf": "0.133", "status": "covered"},
+                      {"gene": "TET2", "mean_depth": "29.0", "detection_limit_vaf": "0.142", "status": "covered"}]}},
+        "paralogs": {"state": "ok", "data": {"genes": [
+            {"gene": "SMN1", "copy_number": "2", "status": "called", "detail": "."},
+            {"gene": "SMN2", "copy_number": "1", "status": "called", "detail": "."},
+            {"gene": "SMN exon 7-8 deletion", "copy_number": "0", "status": "called", "detail": "."},
+            {"gene": "HBA1", "copy_number": "2.4", "status": "no_call", "detail": "."},
+            {"gene": "CYP21A2 (RCCX)", "copy_number": "4", "status": "called", "detail": "."},
+            {"gene": "GBA1", "copy_number": "2", "status": "called", "detail": "."}]}},
+        "y_tree": {"state": "ok", "data": {"haplogroup": "I-M253", "tree": "YFull YTree v14.06.0", "path": [
+            {"Level": "1", "Branch": "CT", "Derived": "11", "Ancestral": "0", "No_call": "1"},
+            {"Level": "2", "Branch": "F", "Derived": "9", "Ancestral": "1", "No_call": "0"},
+            {"Level": "3", "Branch": "I-M253", "Derived": "7", "Ancestral": "0", "No_call": "1"}]}},
+    }
+
+
+def run(adapters, name):
+    S = sections()
+    try:
+        return (adapters[name](S, {"sections": S, "sample": "S"}) or {}).get("widget")
+    except Exception as e:  # a crash is a problem, not a test error
+        return {"error": f"{type(e).__name__}: {e}"}
+
+
+def str_problems(w):
+    if not w or w.get("kind") != "str":
+        return [f"no str widget: {w}"]
+    out = []
+    by = {l["locus"]: l for l in w["loci"]}
+    h = by.get("HTT") or {}
+    if (h.get("repeat_count"), h.get("normal_max"), h.get("pathologic_min"), h.get("ci")) != ("17/42", "26", "40", "17-17/40-45"):
+        out.append(f"HTT {h}")
+    if (by.get("FMR1") or {}).get("status") == "normal":
+        out.append("an unsized FMR1 allele carries Stranger's normal")
+    return out
+
+
+def ci_problems(w):
+    if not w or w.get("kind") != "ci":
+        return [f"no ci widget: {w}"]
+    out = []
+    if (w["value"], w["low"], w["high"]) != (36.9, 36.2, 37.6):
+        out.append(f"numbers {w}")
+    if not w["max"] >= w["high"] or not w["low"] <= w["value"] <= w["high"]:
+        out.append(f"scale {w}")
+    return out
+
+
+def vaf_problems(w):
+    if not w or w.get("kind") != "vaf":
+        return [f"no vaf widget: {w}"]
+    out = []
+    if [(g["gene"], g["limit"]) for g in w["genes"]] != [("DNMT3A", 0.133), ("TET2", 0.142)]:
+        out.append(f"limits {w['genes']}")
+    if [(c["gene"], c["vaf"]) for c in w["calls"]] != [("DNMT3A", 0.081)]:
+        out.append(f"calls {w['calls']}")
+    return out
+
+
+def copies_problems(w):
+    if not w or w.get("kind") != "copies":
+        return [f"no copies widget: {w}"]
+    got = [(g["gene"], g["copies"], g["status"]) for g in w["genes"]]
+    want = [("SMN1", 2, "called"), ("SMN2", 1, "called"), ("HBA1", None, "no_call"), ("CYP21A2 (RCCX)", 4, "called")]
+    return [] if got == want else [f"{got} != {want}"]
+
+
+def ypath_problems(w):
+    if not w or w.get("kind") != "ypath":
+        return [f"no ypath widget: {w}"]
+    got = [(p["branch"], p["derived"], p["ancestral"], p["no_call"]) for p in w["path"]]
+    want = [("CT", 11, 0, 1), ("F", 9, 1, 0), ("I-M253", 7, 0, 1)]
+    return [] if got == want and w["tip"] == "I-M253" else [f"{got} {w.get('tip')}"]
+
+
+CASES = [("1. repeat expansions: the gauge's loci, thresholds and intervals", "expansions", str_problems),
+         ("2. Lp(a): the count and its 95% interval on a scale that holds it", "lpa", ci_problems),
+         ("3. CHIP: the detection limits and the calls with a VAF", "chip", vaf_problems),
+         ("4. copy numbers: the five copy-number genes only, whole numbers as dots", "paralogs", copies_problems),
+         ("5. the Y path: every level, root first, with its counts", "y-chromosome", ypath_problems)]
+
+
+def without_widget(fn):
+    def planted(S, s):
+        got = dict(fn(S, s) or {})
+        got.pop("widget", None)
+        return got
+    return planted
+
+
+def drawers():
+    with open(os.path.join(REPO, "assets", "live", "person.js")) as f:
+        src = f.read()
+    m = re.search(r"var WIDGETS = \{([^}]*)\}", src)
+    return src, set(re.findall(r"(\w+):", m.group(1))) if m else set()
+
+
+def main():
+    A = live_results.ADAPTERS
+    for desc, sid, problems in CASES:
+        bad = problems(run(A, sid))
+        check(desc, not bad, bad)
+        control(f"{sid} adapter without its widget", not problems(run(dict(A, **{sid: without_widget(A[sid])}), sid)))
+    lpa = sections()["lpa"]
+    lpa["data"]["status"] = "too little depth"
+    check("2. Lp(a): no bar for a count that was not estimated",
+          not (A["lpa"]({"lpa": lpa}, {"sections": {"lpa": lpa}}) or {}).get("widget"))
+
+    widgets = {sid: run(A, sid) for _, sid, _ in CASES}
+    bad = live_results.wording_problems(widgets)
+    check("6. no widget string reads as an all-clear", not bad, bad)
+    planted = copy.deepcopy(widgets)
+    planted["lpa"]["class"] = "ok"
+    control("a widget saying ok", not live_results.wording_problems(planted))
+
+    src, kinds = drawers()
+    need = {w["kind"] for w in widgets.values()}
+    check("7. person.js has a drawer for every widget kind", need <= kinds and all(f"function {fn}" in src for fn in
+          ("strGauge", "ciBar", "vafChart", "copyDots", "yPath")), (need, kinds))
+    control("a drawer removed from person.js", need <= (kinds - {"ypath"}))
+
+    if FAILS:
+        print(f"\n{len(FAILS)} check(s) failed")
+        return 1
+    print("\nAll checks passed")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/tests/test_render_report.py b/tests/test_render_report.py
index adf07115..342bd84a 100644
--- a/tests/test_render_report.py
+++ b/tests/test_render_report.py
@@ -172,11 +172,12 @@ def pgsc_results(d, adjusted):
 
 
 # The card titles of DEMO-001's HTML report before the chapters (check 14):
-# the chapters move cards, they never add, drop or rename one.
+# the chapters move cards, they never add, drop or rename one. The CPIC gene card is there since the
+# demo sample carries a CPIC table (make_demo_sample.py, for the live demo's medicines widget).
 GOLDEN_TITLES = sorted([
     "Quality Control", "Mosaic Loss of Chromosome Y or X", "Variant Calling", "ClinVar Screening",
     "Carrier List (this sample)", "Couple Carrier Screen", "Pharmacogenomics", "pypgx Pharmacogenomics",
-    "PGx Copy Number", "CPIC Drug Recommendations", "CYP2D6 Across Callers", "HLA Typing", "Structural Variants",
+    "PGx Copy Number", "CPIC Drug Recommendations", "Genes With a Non-Normal or Unresolved Phenotype (CPIC)", "CYP2D6 Across Callers", "HLA Typing", "Structural Variants",
     "Structural Variants, Class 4 and 5 (AnnotSV)", "Cancer Predisposition", "Repeat Expansions",
     "Runs of Homozygosity", "Mitochondrial Haplogroup", "Paralog Genes (Paraphase)",
     "SMN1/SMN2 Copy Number (Parascopy)", "Y-Chromosome Haplogroup", "Y Placement on the Current Public Tree", "Y-STR Markers (HipSTR)",
diff --git a/tests/test_report_charts.py b/tests/test_report_charts.py
index 64b82fd4..da81c703 100755
--- a/tests/test_report_charts.py
+++ b/tests/test_report_charts.py
@@ -15,6 +15,9 @@
   4. genome: a run of homozygosity whose region cannot be read stops the
      chart; a run under 5 MB is not drawn; ClinVar hits on chrM and on alt
      contigs are counted in not_drawn; ROH_MIN_MB is collect_summary's;
+     each AnnotSV class 4 or 5 row is an outlined span and each reported MoChA
+     call a bar under its chromosome, linked to their sections, and one on
+     another contig is counted in not_drawn;
   5. mito: one dot per heteroplasmic site, the poly-C call marked apart;
   6. no caveat sentence is written in report_charts.py: they come from
      render_report's *_NOTE constants;
@@ -119,6 +122,44 @@ def whisker_problems(svg):
     return out
 
 
+def sv_chrom(r):
+    """The chromosome of an AnnotSV row, chr prefix put back (AnnotSV writes SV_chrom without it)."""
+    c = r["sv"].split(":")[0]
+    return c if c.startswith("chr") else "chr" + c
+
+
+def mca_chrom(c):
+    """The chromosome of a MoChA call, chr prefix put back (mocha_report.py passes bare names through)."""
+    ch = str(c["chrom"])
+    return ch if ch.startswith("chr") else "chr" + ch
+
+
+def sv_mca_problems(sp, sv_rows, mca_calls):
+    """What the genome chart misses of the AnnotSV rows and MoChA calls on the primary chromosomes."""
+    out = []
+    marks = {m["id"]: m for m in sp["marks"]}
+    for i, r in enumerate(sv_rows):
+        if sv_chrom(r) not in report_charts.CHROM_LEN:
+            continue
+        m = marks.get(f"sv-{i}")
+        if not m or m["anchor"] != "structural-variants" or f'data-mark="sv-{i}"' not in sp["svg"]:
+            out.append(f"AnnotSV row {r['sv']} not drawn")
+    for i, c in enumerate(mca_calls):
+        if mca_chrom(c) not in report_charts.CHROM_LEN or not str(c["start"]).isdigit():
+            if f"mca-{i}" in marks:
+                out.append(f"MoChA call {c['chrom']}:{c['start']} drawn, but it has no place on the chart")
+            continue
+        m = marks.get(f"mca-{i}")
+        if not m or m["anchor"] != "mosaic-mca" or f'data-mark="mca-{i}"' not in sp["svg"]:
+            out.append(f"MoChA call {c['chrom']}:{c['start']} not drawn")
+    if sp["svg"].count('class="sv"') != sum(1 for r in sv_rows if sv_chrom(r) in report_charts.CHROM_LEN):
+        out.append("the outlined spans do not match the rows")
+    if sp["svg"].count('class="mca"') != sum(1 for c in mca_calls if mca_chrom(c) in report_charts.CHROM_LEN
+                                             and str(c["start"]).isdigit()):
+        out.append("the bars do not match the calls")
+    return out
+
+
 def note_literals(src):
     """Caveat sentences written into a source file instead of passed in."""
     found = []
@@ -245,6 +286,38 @@ def unit_checks():
           "positions are missing", 'class="site"' not in om["svg"] and om["not_drawn"][0]["count"] == 2
           and "positions of the heteroplasmic sites are not in this summary" in om["svg"]
           and "No heteroplasmic site" not in om["svg"], om["not_drawn"])
+    sv_rows = [{"sv": "chr7:117480000-117530000", "type": "DEL", "gt": "0/1", "length": "50000", "acmg_class": "4",
+                "genes": ["CFTR"]},
+               {"sv": "chr22_KI270879v1_alt:100-900", "type": "DUP", "gt": "0/1", "length": "800", "acmg_class": "5",
+                "genes": []},
+               # as AnnotSV writes SV_chrom: no chr prefix
+               {"sv": "17:7660000-7690000", "type": "DEL", "gt": "0/1", "length": "30000", "acmg_class": "5",
+                "genes": ["TP53"]}]
+    mca = [{"chrom": "chr20", "start": "30000000", "end": "42000000", "length_mb": "12.0", "type": "Del",
+            "cell_fraction": "0.12"},
+           {"chrom": "chrM", "start": "100", "end": "900", "length_mb": ".", "type": "Del", "cell_fraction": "."},
+           {"chrom": "chr3", "start": ".", "end": ".", "length_mb": ".", "type": "Dup", "cell_fraction": "."},
+           # mocha_report.py also passes bare names through
+           {"chrom": "20", "start": "50000000", "end": "52000000", "length_mb": "2.0", "type": "Dup",
+            "cell_fraction": "0.05"}]
+    sm = copy.deepcopy(s)
+    sm["sections"]["annotsv"] = {"state": "ok", "data": {"count": 3, "rows": sv_rows}}
+    sm["sections"]["mosaic"] = {"state": "ok", "data": {"status": "assessed", "calls": mca}}
+    gm = charts(sm)["genome"]
+    ndm = {x["what"]: x["count"] for x in gm["not_drawn"]}
+    check("4. genome: each AnnotSV class 4/5 row is an outlined span (an unprefixed chromosome too), each MoChA "
+          "call a bar (an unprefixed chromosome too), the alt-contig SV and the chrM and unplaced MoChA calls in not_drawn, both in the legend",
+          sv_mca_problems(gm, sv_rows, mca) == [] and ndm.get("AnnotSV class 4 and 5 SVs on other contigs") == 1
+          and ndm.get("MoChA calls on other contigs or with no position") == 2
+          and "AnnotSV class 4 or 5 SV" in gm["svg"] and "mosaic alteration (MoChA)" in gm["svg"],
+          (sv_mca_problems(gm, sv_rows, mca), ndm))
+    lost = copy.deepcopy(gm)
+    lost["marks"] = [m for m in lost["marks"] if m.get("kind") != "mca"]
+    lost["svg"] = report_charts.svg(lost)
+    check("4. red control: a genome chart that leaves out the MoChA call is caught",
+          sv_mca_problems(lost, sv_rows, mca) != [])
+    check("4. genome: a chart with no SV or MoChA mark draws no second legend row",
+          "AnnotSV class 4 or 5 SV" not in g["svg"] and "MoChA" not in g["svg"])
     nr = copy.deepcopy(s)
     nr["sections"]["roh"]["state"] = "missing"
     check("4. genome: no chart when ROH did not run, even with ClinVar hits", "genome" not in charts(nr))
diff --git a/tests/test_run_state_trace_cache.py b/tests/test_run_state_trace_cache.py
new file mode 100644
index 00000000..bc997004
--- /dev/null
+++ b/tests/test_run_state_trace_cache.py
@@ -0,0 +1,125 @@
+#!/usr/bin/env python3
+"""bin/run_state.py read_trace: a trace file is parsed once until it changes.
+
+/runs.json builds the state of every run on the server, and each build read every
+trace file of every run again. read_trace now keeps the parsed rows of each file,
+keyed on its path, mtime and size. Checks:
+  1. the second read of an unchanged trace file opens nothing and gives the same rows;
+  2. a file that grew (a task row appended) is read again and gives the new row;
+  3. the rows handed out are copies: a caller that changes one does not change the cache;
+  4. two samples of one trace file each get only their own rows from the one parse;
+  5. the cache keeps at most TRACE_CACHE_MAX files.
+Check 1 is also run against a planted mistake (a cache that keeps nothing) and must
+fail there: a check that cannot fail is no check.
+
+Run: python3 tests/test_run_state_trace_cache.py
+"""
+import builtins
+import os
+import shutil
+import sys
+import tempfile
+
+REPO = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+sys.path.insert(0, os.path.join(REPO, "bin"))
+import run_state  # noqa: E402
+
+FIX = os.path.join(REPO, "tests", "fixtures", "run_state", "trace.txt")
+FAILS = []
+
+
+def check(desc, ok, detail=""):
+    print(("[PASS] " if ok else "[FAIL] ") + desc + ("" if ok else f" -- {str(detail)[:600]}"))
+    if not ok:
+        FAILS.append(desc)
+
+
+def opens_of(path, fn):
+    """(result of fn(), how many times fn opened path)."""
+    n, real = [0], builtins.open
+
+    def counting(file, *a, **k):
+        if os.path.realpath(str(file)) == os.path.realpath(path):
+            n[0] += 1
+        return real(file, *a, **k)
+    builtins.open = counting
+    try:
+        out = fn()
+    finally:
+        builtins.open = real
+    return out, n[0]
+
+
+def second_read_opens(trace):
+    run_state.TRACE_CACHE.clear()
+    first = run_state.read_trace([trace], "demo1")
+    again, n = opens_of(trace, lambda: run_state.read_trace([trace], "demo1"))
+    return first, again, n
+
+
+def main():
+    work = tempfile.mkdtemp(prefix="test_trace_cache.")
+    try:
+        trace = os.path.join(work, "trace.txt")
+        shutil.copy(FIX, trace)
+
+        # 1. an unchanged file is not opened again
+        first, again, n = second_read_opens(trace)
+        check("1. the second read of an unchanged trace file opens nothing and gives the same rows",
+              n == 0 and first == again and len(first) > 0, (n, len(first), len(again)))
+
+        # planted mistake: a cache that keeps nothing
+        keep = run_state.TRACE_CACHE_MAX
+        run_state.TRACE_CACHE_MAX = 0
+        try:
+            _, _, n0 = second_read_opens(trace)
+        finally:
+            run_state.TRACE_CACHE_MAX = keep
+        check("control: a cache that keeps nothing fails check 1", n0 > 0, n0)
+
+        # 2. a file that grew is read again
+        run_state.TRACE_CACHE.clear()
+        before = run_state.read_trace([trace], "demo1")
+        with open(trace, "a") as f:
+            f.write("99\tzz/000099\t9999\tPGX:CLINVAR_SCREEN (demo1)\tCOMPLETED\t0\t2026-01-02 11:00:00.000\t5s\t"
+                    "4s\t50.0%\t1 MB\t1 MB\t1 MB\t1 MB\n")
+        after, n = opens_of(trace, lambda: run_state.read_trace([trace], "demo1"))
+        check("2. a trace file that grew is read again and gives the new row",
+              n == 1 and len(after) == len(before) + 1 and after[-1]["id"] == "99", (n, len(before), len(after)))
+
+        # 3. copies
+        rows = run_state.read_trace([trace], "demo1")
+        rows[0]["status"] = "CHANGED BY A CALLER"
+        rows2 = run_state.read_trace([trace], "demo1")
+        check("3. a caller changing a row does not change the next read", rows2[0]["status"] != "CHANGED BY A CALLER",
+              rows2[0])
+
+        # 4. two samples from one parse
+        with open(trace, "a") as f:
+            f.write("100\tzz/000100\t10000\tPGX:CLINVAR_SCREEN (demo2)\tCOMPLETED\t0\t2026-01-02 11:00:00.000\t5s\t"
+                    "4s\t50.0%\t1 MB\t1 MB\t1 MB\t1 MB\n")
+        run_state.TRACE_CACHE.clear()
+        one = run_state.read_trace([trace], "demo1")
+        two, n = opens_of(trace, lambda: run_state.read_trace([trace], "demo2"))
+        check("4. a second sample of the same trace file gets its own rows from the one parse",
+              n == 0 and [r["id"] for r in two] == ["100"] and "100" not in [r["id"] for r in one], (n, two))
+
+        # 5. bounded
+        run_state.TRACE_CACHE.clear()
+        for i in range(run_state.TRACE_CACHE_MAX + 5):
+            p = os.path.join(work, f"t{i}.txt")
+            shutil.copy(FIX, p)
+            run_state.read_trace([p], "demo1")
+        check("5. the cache keeps at most TRACE_CACHE_MAX files", len(run_state.TRACE_CACHE) == run_state.TRACE_CACHE_MAX,
+              len(run_state.TRACE_CACHE))
+    finally:
+        shutil.rmtree(work, ignore_errors=True)
+    if FAILS:
+        print(f"\n{len(FAILS)} check(s) failed")
+        return 1
+    print("\nAll checks passed")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())