From 6183ff6d6d057a15479355d4361ba39d258786d5 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:17:03 +0000
Subject: [PATCH 01/20] dcore-citizen: rename sections, repeat the time donuts
 under the summary

- "Within reach" is now "Progress report"
- "Thread by thread" is now "Thread by thread analysis"
- the two distraction donuts also show at the top, under the summary

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../dcore-citizen/template-compact.html       | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index ed0eafe..1e87c61 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -47,6 +47,7 @@
 .summary .hook { font: 700 1.55rem/1.15 var(--f-head); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 4px; }
 .summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--bad); margin-right: 2px; }
 .summary p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
+.summary .pies { margin-top: 8px; }
 .summary p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
@@ -275,14 +276,14 @@ <h1 id="title"></h1>
 
 
   <section id="s-done">
-    <h2>Within reach</h2>
+    <h2>Progress report</h2>
     <p class="muted" id="progress-caption"></p>
     <div class="list" id="steps"></div>
     <div class="outcome" id="outcome"></div>
   </section>
 
   <section id="s-threads">
-    <h2>Thread by thread</h2>
+    <h2>Thread by thread analysis</h2>
     <div class="list" id="threads"></div>
   </section>
 
@@ -1506,7 +1507,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   '<p>' + (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
     (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.') + '</p>';
 
-// Within reach: one line per step; missed steps show when they were lost and the consequence that matters most.
+// Progress report: one line per step; missed steps show when they were lost and the consequence that matters most.
 if (DATA.progress_caption) $("progress-caption").textContent = DATA.progress_caption;
 else $("progress-caption").hidden = true;
 const blocks = bs => (bs || []).map(b =>
@@ -1543,7 +1544,8 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 
 const TYPES = [["fwd", "Progress", "var(--good)"], ["talk", "Left open", "var(--quiet)"], ["side", "Distractions", "var(--bad)"], ["idle", "Intro, breaks", "var(--idle)"]];
 const timeParts = TYPES.map(([t, label, color]) => ({ v: dur(segs.filter(s => s.type === t)), label, color, pc: share(t) })).filter(p => p.v);
-$("pie-time").innerHTML = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, wasted, "wasted") + legend(timeParts);
+const pieTime = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, wasted, "wasted") + legend(timeParts);
+$("pie-time").innerHTML = pieTime;
 
 // distraction kinds: one hue, darker for a bigger share; more than five kinds fold into "Other".
 // Measured in time throughout (slices, legend and centre), so this donut never mixes counts with shares of the whole debate.
@@ -1555,8 +1557,11 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 const STEPS = [100, 80, 64, 50, 38, 28];
 const kindParts = kinds.map(([label, v], i) => ({ v, label, pc: span(v), color: "color-mix(in srgb, var(--bad) " + STEPS[i] + "%, var(--surface))" }));
 const nD = (DATA.distractions || []).length;
-$("pie-kinds").innerHTML = '<figcaption>What the distractions were</figcaption>' +
+const pieKinds = '<figcaption>What the distractions were</figcaption>' +
   donut(kindParts, span(dur(segs.filter(s => s.type === "side"))), "in " + nD + (nD === 1 ? " moment" : " moments")) + legend(kindParts);
+$("pie-kinds").innerHTML = pieKinds;
+// The same two donuts also sit under the summary, so the first screen shows where the time went.
+$("summary").insertAdjacentHTML("beforeend", '<div class="pies"><figure class="pie">' + pieTime + '</figure><figure class="pie">' + pieKinds + '</figure></div>');
 
 $("ribbon").innerHTML = segs.map(s => '<i class="' + s.type + '" style="flex:' + (s.b - s.a) + '"></i>').join("");
 $("axis").innerHTML = [0, total / 2, total].map(s => '<span class="ts">' + clock(s) + '</span>').join("");
@@ -1673,8 +1678,8 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 (function () {
   const voices = DATA.voices.length;
   const stops = [
-    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Within reach"],
-    ["s-threads", DATA.threads.length + " threads", "Thread by thread"],
+    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Progress report"],
+    ["s-threads", DATA.threads.length + " threads", "Thread by thread analysis"],
     ["s-dist", wasted + " wasted", "Distraction analysis"],
     ["s-acc", voices + (voices === 1 ? " voice" : " voices"), "Accountability"]
   ];

From 80936a9613bd4c5e974910897fe5851fc2c6fb10 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:27:39 +0000
Subject: [PATCH 02/20] dcore-citizen: summary keeps the headline and
 highlights the missed steps

The time split lines are dropped, since the donuts under the summary show them.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 1e87c61..e63dbbf 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -48,6 +48,8 @@
 .summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--bad); margin-right: 2px; }
 .summary p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
 .summary .pies { margin-top: 8px; }
+.summary p.reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1.1rem; }
+.summary p.reach b:first-of-type { color: var(--bad); }
 .summary p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
@@ -1496,15 +1498,12 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 
 // In short: steps taken, and how much of the time moved the conversation forward.
 const reached = DATA.progress.filter(s => s.status === "reached"), missed = DATA.progress.filter(s => s.status === "missed");
-const fwd = share("fwd");
 const things = n => n + (n === 1 ? " thing" : " things");
 // Lead with what was lost: time wasted on distractions and on points nobody answered, then what slipped away.
 const wasted = pct(dur(segs.filter(s => s.type === "side" || s.type === "talk")));
 $("summary").innerHTML =
   '<p class="hook"><em>' + wasted + '</em> of ' + Math.round(total / 60) + ' minutes was wasted.</p>' +
-  '<p>Distractions took <b>' + share("side") + '</b>, and points nobody answered took <b>' + share("talk") + '</b>.</p>' +
-  '<p>Only <b>' + fwd + '</b> moved the debate forward.</p>' +
-  '<p>' + (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
+  '<p class="reach">' + (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
     (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.') + '</p>';
 
 // Progress report: one line per step; missed steps show when they were lost and the consequence that matters most.

From a8408bcddcf8a570da03ada21d93fcb7877cec1e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:29:11 +0000
Subject: [PATCH 03/20] dcore-citizen: open the progress report with the
 missed-steps line

The highlighted line moves from the summary into the progress report, in place of the caption.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/schema.md            |  2 +-
 .../skills/dcore-citizen/template-compact.html    | 15 +++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/.claude/skills/dcore-citizen/schema.md b/.claude/skills/dcore-citizen/schema.md
index afbbbea..00a2db1 100644
--- a/.claude/skills/dcore-citizen/schema.md
+++ b/.claude/skills/dcore-citizen/schema.md
@@ -30,7 +30,7 @@ contain them.
   "question": "Should the Election Commission chief resign?",
   "context": "One or two plain sentences: what triggered the conversation.",
 
-  "progress_caption": "Five steps were within reach. The panel took two.",
+  "progress_caption": "Five steps were within reach. The panel took two.",   // full page only; the compact page writes its own line
   "progress": [
     {"status": "reached", "thread": "explain",
      "text": "Everyone agreed: the Commission must explain itself in public",
diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index e63dbbf..8396e37 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -48,8 +48,8 @@
 .summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--bad); margin-right: 2px; }
 .summary p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
 .summary .pies { margin-top: 8px; }
-.summary p.reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1.1rem; }
-.summary p.reach b:first-of-type { color: var(--bad); }
+.reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1rem; }
+.reach b:first-of-type { color: var(--bad); }
 .summary p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
@@ -279,7 +279,7 @@ <h1 id="title"></h1>
 
   <section id="s-done">
     <h2>Progress report</h2>
-    <p class="muted" id="progress-caption"></p>
+    <p class="reach" id="reach"></p>
     <div class="list" id="steps"></div>
     <div class="outcome" id="outcome"></div>
   </section>
@@ -1502,13 +1502,12 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 // Lead with what was lost: time wasted on distractions and on points nobody answered, then what slipped away.
 const wasted = pct(dur(segs.filter(s => s.type === "side" || s.type === "talk")));
 $("summary").innerHTML =
-  '<p class="hook"><em>' + wasted + '</em> of ' + Math.round(total / 60) + ' minutes was wasted.</p>' +
-  '<p class="reach">' + (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
-    (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.') + '</p>';
+  '<p class="hook"><em>' + wasted + '</em> of ' + Math.round(total / 60) + ' minutes was wasted.</p>';
+// The progress report opens with how many steps were missed and how many settled.
+$("reach").innerHTML = (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
+    (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.');
 
 // Progress report: one line per step; missed steps show when they were lost and the consequence that matters most.
-if (DATA.progress_caption) $("progress-caption").textContent = DATA.progress_caption;
-else $("progress-caption").hidden = true;
 const blocks = bs => (bs || []).map(b =>
   (b.heading ? '<h4>' + esc(b.heading) + '</h4>' : "") +
   (b.items ? (b.ordered ? '<ol class="plain">' + b.items.map(i => '<li>' + esc(typeof i === "string" ? i : i.text) + '</li>').join("") + '</ol>' :

From a6fef3519a87bfad4451518cc2cfc82a20d4dcae Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:32:12 +0000
Subject: [PATCH 04/20] dcore-citizen: minute-by-minute strip under the
 summary, even donut sizes

- the summary's text style no longer leaks into the donut legends, so they match the ones lower down
- one font size for every donut's centre number
- the minute-by-minute strip also shows under the summary donuts

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../skills/dcore-citizen/template-compact.html  | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 8396e37..ffb9b29 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -46,11 +46,11 @@
 .summary { border-bottom: 1px solid var(--line); padding: 2px 0 16px; display: grid; gap: 6px; }
 .summary .hook { font: 700 1.55rem/1.15 var(--f-head); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 4px; }
 .summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--bad); margin-right: 2px; }
-.summary p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
+.summary > p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
 .summary .pies { margin-top: 8px; }
 .reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1rem; }
 .reach b:first-of-type { color: var(--bad); }
-.summary p:not(.hook) b { font: 700 1.05rem var(--f-head); }
+.summary > p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
 /* Minimap: a quiet rail on the left; a dot per section, names beside it when there is room */
@@ -157,8 +157,7 @@
 .pie svg { width: 112px; height: 112px; justify-self: center; display: block; }
 .pie svg circle.seg { fill: none; stroke-width: 16; }
 .pie svg circle.seg:hover { stroke-width: 19; }
-.pie svg .big { font: 700 20px var(--f-head); fill: var(--fg); }
-.pie svg .big.long { font-size: 16px; }
+.pie svg .big { font: 700 17px var(--f-head); fill: var(--fg); }
 .pie svg .small { font: 600 9.5px var(--f-body); fill: var(--muted); }
 .lg { display: grid; gap: 3px; font-size: .8rem; line-height: 1.25; }
 .lg p { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
@@ -1536,7 +1535,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
     at += len; return seg;
   }).join("");
   return '<svg viewBox="0 0 120 120" role="img" aria-label="' + esc(parts.map(p => p.label + " " + p.pc).join(", ")) + '">' + arcs +
-    '<text class="big' + (String(big).length > 4 ? " long" : "") + '" x="60" y="62" text-anchor="middle">' + esc(big) + '</text><text class="small" x="60" y="76" text-anchor="middle">' + esc(small) + '</text></svg>';
+    '<text class="big" x="60" y="62" text-anchor="middle">' + esc(big) + '</text><text class="small" x="60" y="76" text-anchor="middle">' + esc(small) + '</text></svg>';
 };
 const legend = parts => '<div class="lg">' + parts.map(p => '<p><i style="background:' + p.color + '"></i><span>' + esc(p.label) + '</span><b>' + esc(p.pc) + '</b></p>').join("") + '</div>';
 
@@ -1561,8 +1560,12 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 // The same two donuts also sit under the summary, so the first screen shows where the time went.
 $("summary").insertAdjacentHTML("beforeend", '<div class="pies"><figure class="pie">' + pieTime + '</figure><figure class="pie">' + pieKinds + '</figure></div>');
 
-$("ribbon").innerHTML = segs.map(s => '<i class="' + s.type + '" style="flex:' + (s.b - s.a) + '"></i>').join("");
-$("axis").innerHTML = [0, total / 2, total].map(s => '<span class="ts">' + clock(s) + '</span>').join("");
+const ribbon = segs.map(s => '<i class="' + s.type + '" style="flex:' + (s.b - s.a) + '"></i>').join("");
+const axis = [0, total / 2, total].map(s => '<span class="ts">' + clock(s) + '</span>').join("");
+$("ribbon").innerHTML = ribbon;
+$("axis").innerHTML = axis;
+// The minute-by-minute strip also sits under the summary donuts.
+$("summary").insertAdjacentHTML("beforeend", '<div class="card"><p class="card-h">Minute by minute</p><div class="ribbon">' + ribbon + '</div><div class="axis">' + axis + '</div></div>');
 $("dist").innerHTML = (DATA.distractions || []).slice().sort((x, y) => secs(x.t) - secs(y.t)).map(d =>
   '<div class="ent">' + ts(d.t) + '<div><p><b>' + esc(d.label) + '</b> · ' + esc(d.who) + (d.length ? ' · <span class="muted">' + esc(d.length) + '</span>' : "") + '</p><p class="muted">' + esc(d.what) + '</p>' +
   '<p class="muted">' + (d.victim ? "Left unanswered: " + esc(d.victim) : "Thread: " + esc((THREADS[d.thread] || {}).title || "none")) + '</p></div></div>').join("");

From 4deefa7d72d834388df140161fd7eb3e63c604bf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:35:52 +0000
Subject: [PATCH 05/20] dcore-citizen: lead with the share of time that moved
 the debate forward
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"50% … was wasted" becomes "Only 46% … moved the debate forward", in green; the donut centre and side menu follow.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index ffb9b29..9c8bcf0 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -45,7 +45,7 @@
 /* In short: two lines a reader can repeat */
 .summary { border-bottom: 1px solid var(--line); padding: 2px 0 16px; display: grid; gap: 6px; }
 .summary .hook { font: 700 1.55rem/1.15 var(--f-head); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 4px; }
-.summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--bad); margin-right: 2px; }
+.summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--good); margin-right: 2px; }
 .summary > p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
 .summary .pies { margin-top: 8px; }
 .reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1rem; }
@@ -267,7 +267,6 @@ <h1 id="title"></h1>
         <li><i class="talk"></i><span><b>Left open:</b> a point aimed at someone got no reply, or the answer left part of it open (a hollow dot).</span></li>
         <li><i class="side"></i><span><b>Distraction:</b> a move that pulled the debate off its question, like changing the subject or attacking motives.</span></li>
       </ul>
-      <p><b>Wasted time</b> is distractions plus points left open.</p>
       <p><b>Failed to reach</b> is a step that was close: one or two moves away, using only what had already been said.</p>
       <p><b>Accountability</b> shows each voice's moves, one dot per moment, in the same three colours. We judge moves, never sides or opinions.</p>
       <p>Each thread's <b>replay</b> is one fair way it could have gone, not what happened.</p>
@@ -1498,10 +1497,10 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 // In short: steps taken, and how much of the time moved the conversation forward.
 const reached = DATA.progress.filter(s => s.status === "reached"), missed = DATA.progress.filter(s => s.status === "missed");
 const things = n => n + (n === 1 ? " thing" : " things");
-// Lead with what was lost: time wasted on distractions and on points nobody answered, then what slipped away.
-const wasted = pct(dur(segs.filter(s => s.type === "side" || s.type === "talk")));
+// Lead with the share of time that moved the debate forward; "Only" when it was under half.
+const fwdSec = dur(segs.filter(s => s.type === "fwd")), fwd = pct(fwdSec);
 $("summary").innerHTML =
-  '<p class="hook"><em>' + wasted + '</em> of ' + Math.round(total / 60) + ' minutes was wasted.</p>';
+  '<p class="hook">' + (fwdSec < total / 2 ? "Only " : "") + '<em>' + fwd + '</em> of ' + Math.round(total / 60) + ' minutes moved the debate forward.</p>';
 // The progress report opens with how many steps were missed and how many settled.
 $("reach").innerHTML = (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
     (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.');
@@ -1541,7 +1540,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 
 const TYPES = [["fwd", "Progress", "var(--good)"], ["talk", "Left open", "var(--quiet)"], ["side", "Distractions", "var(--bad)"], ["idle", "Intro, breaks", "var(--idle)"]];
 const timeParts = TYPES.map(([t, label, color]) => ({ v: dur(segs.filter(s => s.type === t)), label, color, pc: share(t) })).filter(p => p.v);
-const pieTime = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, wasted, "wasted") + legend(timeParts);
+const pieTime = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, fwd, "forward") + legend(timeParts);
 $("pie-time").innerHTML = pieTime;
 
 // distraction kinds: one hue, darker for a bigger share; more than five kinds fold into "Other".
@@ -1681,7 +1680,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   const stops = [
     ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Progress report"],
     ["s-threads", DATA.threads.length + " threads", "Thread by thread analysis"],
-    ["s-dist", wasted + " wasted", "Distraction analysis"],
+    ["s-dist", fwd + " forward", "Distraction analysis"],
     ["s-acc", voices + (voices === 1 ? " voice" : " voices"), "Accountability"]
   ];
   $("minimap").innerHTML = stops.map(([id, stat, name]) => '<a href="#' + id + '" title="' + esc(name + " · " + stat) + '"><span>' + esc(name) + '</span></a>').join("");

From b181eb4b36341e014d967e724846983a3404f8d3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:37:03 +0000
Subject: [PATCH 06/20] dcore-citizen: headline says how much of the time was
 fruitful

Adds a one-line definition under it; the donut centre and side menu follow.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 9c8bcf0..2866f03 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -50,6 +50,7 @@
 .summary .pies { margin-top: 8px; }
 .reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1rem; }
 .reach b:first-of-type { color: var(--bad); }
+.summary > p.hook-sub { font-size: .88rem; color: var(--muted); margin-top: -6px; }
 .summary > p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
@@ -1500,7 +1501,8 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 // Lead with the share of time that moved the debate forward; "Only" when it was under half.
 const fwdSec = dur(segs.filter(s => s.type === "fwd")), fwd = pct(fwdSec);
 $("summary").innerHTML =
-  '<p class="hook">' + (fwdSec < total / 2 ? "Only " : "") + '<em>' + fwd + '</em> of ' + Math.round(total / 60) + ' minutes moved the debate forward.</p>';
+  '<p class="hook">' + (fwdSec < total / 2 ? "Only " : "") + '<em>' + fwd + '</em> of ' + Math.round(total / 60) + ' minutes was fruitful.</p>' +
+  '<p class="hook-sub">Fruitful: time where something got agreed or answered.</p>';
 // The progress report opens with how many steps were missed and how many settled.
 $("reach").innerHTML = (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
     (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.');
@@ -1540,7 +1542,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 
 const TYPES = [["fwd", "Progress", "var(--good)"], ["talk", "Left open", "var(--quiet)"], ["side", "Distractions", "var(--bad)"], ["idle", "Intro, breaks", "var(--idle)"]];
 const timeParts = TYPES.map(([t, label, color]) => ({ v: dur(segs.filter(s => s.type === t)), label, color, pc: share(t) })).filter(p => p.v);
-const pieTime = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, fwd, "forward") + legend(timeParts);
+const pieTime = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, fwd, "fruitful") + legend(timeParts);
 $("pie-time").innerHTML = pieTime;
 
 // distraction kinds: one hue, darker for a bigger share; more than five kinds fold into "Other".
@@ -1680,7 +1682,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   const stops = [
     ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Progress report"],
     ["s-threads", DATA.threads.length + " threads", "Thread by thread analysis"],
-    ["s-dist", fwd + " forward", "Distraction analysis"],
+    ["s-dist", fwd + " fruitful", "Distraction analysis"],
     ["s-acc", voices + (voices === 1 ? " voice" : " voices"), "Accountability"]
   ];
   $("minimap").innerHTML = stops.map(([id, stat, name]) => '<a href="#' + id + '" title="' + esc(name + " · " + stat) + '"><span>' + esc(name) + '</span></a>').join("");

From baa513ed9e55d3617baed0d42980f46b3d3fe0ea Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:43:31 +0000
Subject: [PATCH 07/20] dcore-citizen: distraction analysis drops its donuts,
 moments shown open

The donuts live under the summary now; the who-did-what lists no longer sit behind a toggle.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../dcore-citizen/template-compact.html       | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 2866f03..d7d6b56 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -164,7 +164,8 @@
 .lg p { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 6px; align-items: baseline; }
 .lg i { width: 9px; height: 9px; border-radius: 2px; display: block; align-self: center; }
 .lg b { font-weight: 600; }
-details.more h4 { margin: 6px 0 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.moments { display: grid; gap: 6px; font-size: .86rem; }
+.moments h4, details.more h4 { margin: 6px 0 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 /* stacked on narrow screens: donut beside its legend, so labels keep one line */
 @media (max-width: 520px) {
   .pies { grid-template-columns: 1fr; }
@@ -291,13 +292,9 @@ <h2>Thread by thread analysis</h2>
   <section id="s-dist">
     <h2>Distraction analysis</h2>
     <p class="muted">What pulled the debate off course.</p>
-    <div class="pies">
-      <figure class="pie" id="pie-time"></figure>
-      <figure class="pie" id="pie-kinds"></figure>
-    </div>
     <p id="unans-line"></p>
     <p id="gaps-line"></p>
-    <details class="more"><summary>Who did what, and when</summary><div>
+    <div class="moments">
       <h4>Minute by minute</h4><div class="ribbon" id="ribbon"></div><div class="axis" id="axis"></div>
       <div class="tabs" role="tablist" aria-label="Moments">
         <button type="button" role="tab" id="tab-dist" aria-controls="dist" aria-selected="true"></button>
@@ -308,7 +305,7 @@ <h4>Minute by minute</h4><div class="ribbon" id="ribbon"></div><div class="axis"
       <div id="unans" role="tabpanel" aria-labelledby="tab-unans" hidden></div>
       <div id="gaps" role="tabpanel" aria-labelledby="tab-gaps" hidden></div>
       <button type="button" class="showmore off" id="showmore"></button>
-    </div></details>
+    </div>
     <p class="insight" id="insight"></p>
   </section>
 
@@ -1526,7 +1523,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   (DATA.outcome_note ? '<span class="note">' + esc(DATA.outcome_note) + '</span>' : "");
 else $("outcome").hidden = true;
 
-// Distraction analysis: two donuts (how the time was used; what the distractions were), then one expand with every moment.
+// Two donuts (how the time was used; what the distractions were), shown under the summary.
 const donut = (parts, big, small) => {
   const r = 46, C = 2 * Math.PI * r, sum = parts.reduce((n, p) => n + p.v, 0) || 1, gap = parts.length > 1 ? 2 : 0;
   let at = 0;
@@ -1543,7 +1540,6 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 const TYPES = [["fwd", "Progress", "var(--good)"], ["talk", "Left open", "var(--quiet)"], ["side", "Distractions", "var(--bad)"], ["idle", "Intro, breaks", "var(--idle)"]];
 const timeParts = TYPES.map(([t, label, color]) => ({ v: dur(segs.filter(s => s.type === t)), label, color, pc: share(t) })).filter(p => p.v);
 const pieTime = '<figcaption>How the ' + Math.round(total / 60) + ' minutes were used</figcaption>' + donut(timeParts, fwd, "fruitful") + legend(timeParts);
-$("pie-time").innerHTML = pieTime;
 
 // distraction kinds: one hue, darker for a bigger share; more than five kinds fold into "Other".
 // Measured in time throughout (slices, legend and centre), so this donut never mixes counts with shares of the whole debate.
@@ -1557,7 +1553,6 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 const nD = (DATA.distractions || []).length;
 const pieKinds = '<figcaption>What the distractions were</figcaption>' +
   donut(kindParts, span(dur(segs.filter(s => s.type === "side"))), "in " + nD + (nD === 1 ? " moment" : " moments")) + legend(kindParts);
-$("pie-kinds").innerHTML = pieKinds;
 // The same two donuts also sit under the summary, so the first screen shows where the time went.
 $("summary").insertAdjacentHTML("beforeend", '<div class="pies"><figure class="pie">' + pieTime + '</figure><figure class="pie">' + pieKinds + '</figure></div>');
 
@@ -1589,7 +1584,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
     (g.follow_up ? '<p class="muted">Follow-up that would close it: "' + esc(g.follow_up) + '"</p>' : "") + '</div></div>').join("");
 } else { $("gaps-line").hidden = true; $("tab-gaps").hidden = true; }
 
-// Tabs inside the expand: distractions, and points left unanswered.
+// Tabs under the distraction analysis: distractions, and points left unanswered.
 (function () {
   const tabs = [$("tab-dist"), $("tab-unans"), $("tab-gaps")];
   $("tab-dist").textContent = "Distractions (" + (DATA.distractions || []).length + ")";
@@ -1612,7 +1607,6 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
     expanded.has(panel.id) ? expanded.delete(panel.id) : expanded.add(panel.id);
     fit();
   });
-  more.closest("details").addEventListener("toggle", fit);
   const pick = t => {
     tabs.forEach(b => {
       const on = b === t;
@@ -1630,6 +1624,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
       pick(next); next.focus();
     });
   });
+  fit();
 })();
 $("insight").innerHTML = '<b>' + esc(DATA.insight.title) + '</b>' + esc(DATA.insight.text);
 

From f46d092953d427a4c389b271c766c86627707403 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:45:01 +0000
Subject: [PATCH 08/20] dcore-citizen: separators between sections; "Progress
 analysis"

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index d7d6b56..7dfc3df 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -67,6 +67,8 @@
 #minimap a:hover { color: var(--fg); }
 #minimap a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-radius: 4px; }
 section[id] { scroll-margin-top: 16px; }
+/* a thin rule between sections, like the one under the summary */
+section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
 
 /* How to read: a quiet "?" that opens a floating panel, so nothing on the page moves */
 .help { position: relative; }
@@ -278,7 +280,7 @@ <h1 id="title"></h1>
 
 
   <section id="s-done">
-    <h2>Progress report</h2>
+    <h2>Progress analysis</h2>
     <p class="reach" id="reach"></p>
     <div class="list" id="steps"></div>
     <div class="outcome" id="outcome"></div>
@@ -1504,7 +1506,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 $("reach").innerHTML = (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
     (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.');
 
-// Progress report: one line per step; missed steps show when they were lost and the consequence that matters most.
+// Progress analysis: one line per step; missed steps show when they were lost and the consequence that matters most.
 const blocks = bs => (bs || []).map(b =>
   (b.heading ? '<h4>' + esc(b.heading) + '</h4>' : "") +
   (b.items ? (b.ordered ? '<ol class="plain">' + b.items.map(i => '<li>' + esc(typeof i === "string" ? i : i.text) + '</li>').join("") + '</ol>' :
@@ -1675,7 +1677,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 (function () {
   const voices = DATA.voices.length;
   const stops = [
-    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Progress report"],
+    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Progress analysis"],
     ["s-threads", DATA.threads.length + " threads", "Thread by thread analysis"],
     ["s-dist", fwd + " fruitful", "Distraction analysis"],
     ["s-acc", voices + (voices === 1 ? " voice" : " voices"), "Accountability"]

From 61fe7238c034db57e5da26c016c7b295cd634aa1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:46:06 +0000
Subject: [PATCH 09/20] dcore-citizen: bigger section titles with an ink bar;
 "Outcome analysis"

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 7dfc3df..5b48aa3 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -26,7 +26,7 @@
 .wrap { max-width: 600px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 26px; }
 h1, h2 { font-family: var(--f-head); margin: 0; text-wrap: balance; }
 h1 { font-size: 1.45rem; line-height: 1.15; }
-h2 { font-size: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+h2 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 h2 small { font: 600 .8rem var(--f-body); color: var(--muted); }
 p { margin: 0; }
 section { display: grid; gap: 8px; min-width: 0; }
@@ -67,6 +67,8 @@
 #minimap a:hover { color: var(--fg); }
 #minimap a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-radius: 4px; }
 section[id] { scroll-margin-top: 16px; }
+/* a short ink bar above each section title so the titles stand out when scanning */
+section > h2::before { content: ""; position: absolute; width: 28px; height: 4px; border-radius: 2px; background: var(--fg); margin-top: -12px; }
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
 
@@ -280,7 +282,7 @@ <h1 id="title"></h1>
 
 
   <section id="s-done">
-    <h2>Progress analysis</h2>
+    <h2>Outcome analysis</h2>
     <p class="reach" id="reach"></p>
     <div class="list" id="steps"></div>
     <div class="outcome" id="outcome"></div>
@@ -1506,7 +1508,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 $("reach").innerHTML = (missed.length ? 'It failed to reach <b>' + things(missed.length) + '</b> that ' + (missed.length === 1 ? "was" : "were") + ' close, and settled ' : 'It settled ') +
     (reached.length ? (missed.length ? 'only ' : '') + '<b>' + reached.length + '</b>.' : '<b>nothing</b>.');
 
-// Progress analysis: one line per step; missed steps show when they were lost and the consequence that matters most.
+// Outcome analysis: one line per step; missed steps show when they were lost and the consequence that matters most.
 const blocks = bs => (bs || []).map(b =>
   (b.heading ? '<h4>' + esc(b.heading) + '</h4>' : "") +
   (b.items ? (b.ordered ? '<ol class="plain">' + b.items.map(i => '<li>' + esc(typeof i === "string" ? i : i.text) + '</li>').join("") + '</ol>' :
@@ -1677,7 +1679,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 (function () {
   const voices = DATA.voices.length;
   const stops = [
-    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Progress analysis"],
+    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Outcome analysis"],
     ["s-threads", DATA.threads.length + " threads", "Thread by thread analysis"],
     ["s-dist", fwd + " fruitful", "Distraction analysis"],
     ["s-acc", voices + (voices === 1 ? " voice" : " voices"), "Accountability"]

From 1198d96743f3b2df920b1e1d39753151c316e3ad Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:53:27 +0000
Subject: [PATCH 10/20] dcore-citizen: sections as tabs under the summary

A sticky tab bar (Outcomes, Threads, Distractions, Accountability) shows one section at a time; the side menu on wide screens switches the same way. The summary, the ask-next-time questions and the transcript stay as they are.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../dcore-citizen/template-compact.html       | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 5b48aa3..a26e003 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -71,6 +71,14 @@
 section > h2::before { content: ""; position: absolute; width: 28px; height: 4px; border-radius: 2px; background: var(--fg); margin-top: -12px; }
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
+/* Section tabs: one section at a time under the summary; sticks to the top while reading */
+.sectabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -10px; }
+.sectabs::-webkit-scrollbar { display: none; }
+.sectabs button { flex: none; font: 600 .9rem var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; margin-bottom: -1px; cursor: pointer; }
+.sectabs button:hover { color: var(--fg); }
+.sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
+.sectabs button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
+section.pane, section.pane ~ section.pane { border-top: 0; padding-top: 0; }
 
 /* How to read: a quiet "?" that opens a floating panel, so nothing on the page moves */
 .help { position: relative; }
@@ -281,6 +289,8 @@ <h1 id="title"></h1>
   </div>
 
 
+  <nav class="sectabs" id="sectabs" role="tablist" aria-label="Sections of this report"></nav>
+
   <section id="s-done">
     <h2>Outcome analysis</h2>
     <p class="reach" id="reach"></p>
@@ -1675,32 +1685,40 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 } else $("ask").hidden = true;
 $("footer").textContent = DATA.footer;
 
-// Minimap: one stop per section with its headline number; the stop for the section in view is marked.
+// Sections as tabs: the tab bar under the summary and the minimap on wide screens both switch which section shows.
 (function () {
   const voices = DATA.voices.length;
   const stops = [
-    ["s-done", reached.length + " of " + DATA.progress.length + " reached", "Outcome analysis"],
-    ["s-threads", DATA.threads.length + " threads", "Thread by thread analysis"],
-    ["s-dist", fwd + " fruitful", "Distraction analysis"],
-    ["s-acc", voices + (voices === 1 ? " voice" : " voices"), "Accountability"]
+    ["s-done", "Outcomes", "Outcome analysis", reached.length + " of " + DATA.progress.length + " reached"],
+    ["s-threads", "Threads", "Thread by thread analysis", DATA.threads.length + " threads"],
+    ["s-dist", "Distractions", "Distraction analysis", fwd + " fruitful"],
+    ["s-acc", "Accountability", "Accountability", voices + (voices === 1 ? " voice" : " voices")]
   ];
-  $("minimap").innerHTML = stops.map(([id, stat, name]) => '<a href="#' + id + '" title="' + esc(name + " · " + stat) + '"><span>' + esc(name) + '</span></a>').join("");
-  const links = [...$("minimap").querySelectorAll("a")];
+  $("sectabs").innerHTML = stops.map(([id, tab, name]) => '<button type="button" role="tab" aria-controls="' + id + '" title="' + esc(name) + '">' + esc(tab) + '</button>').join("");
+  $("minimap").innerHTML = stops.map(([id, , name, stat]) => '<a href="#' + id + '" title="' + esc(name + " · " + stat) + '"><span>' + esc(name) + '</span></a>').join("");
+  const tabs = [...$("sectabs").querySelectorAll("button")], links = [...$("minimap").querySelectorAll("a")];
+  stops.forEach(([id]) => { const sec = document.getElementById(id); sec.classList.add("pane"); sec.setAttribute("role", "tabpanel"); });
+  const show = (id, scroll) => {
+    stops.forEach(([sid]) => { document.getElementById(sid).hidden = sid !== id; });
+    tabs.forEach(b => { const on = b.getAttribute("aria-controls") === id; b.setAttribute("aria-selected", on); b.tabIndex = on ? 0 : -1; });
+    links.forEach(a => a.setAttribute("aria-current", a.getAttribute("href") === "#" + id));
+    // Keep the reader at the top of the new section, not wherever the last one was scrolled to.
+    if (scroll && $("sectabs").getBoundingClientRect().top <= 1) $("sectabs").scrollIntoView({ block: "start" });
+  };
+  tabs.forEach((b, i) => {
+    b.addEventListener("click", () => show(b.getAttribute("aria-controls"), true));
+    b.addEventListener("keydown", e => {
+      if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+      const next = tabs[(i + (e.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length];
+      next.click(); next.focus();
+    });
+  });
   links.forEach(a => a.addEventListener("click", e => {
     e.preventDefault();
-    document.getElementById(a.getAttribute("href").slice(1)).scrollIntoView({ behavior: "smooth", block: "start" });
+    show(a.getAttribute("href").slice(1), false);
+    $("sectabs").scrollIntoView({ behavior: "smooth", block: "start" });
   }));
-  const mark = () => {
-    const y = innerHeight * 0.4;
-    let current = "s-done";
-    stops.forEach(([id]) => { if (document.getElementById(id).getBoundingClientRect().top <= y) current = id; });
-    links.forEach(a => {
-      const on = a.getAttribute("href") === "#" + current;
-      a.setAttribute("aria-current", on);
-    });
-  };
-  addEventListener("scroll", mark, { passive: true });
-  mark();
+  show("s-done", false);
 })();
 
 // Collapsibles open and close smoothly, and only one is open at a time (never closing its own parent).

From 9d77a333a2cdc0b5e9de4aed4ebfa734130a5996 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:56:18 +0000
Subject: [PATCH 11/20] dcore-citizen: Summary is the first tab

The tab bar moves above the summary, so the summary is one of the sections it switches between.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index a26e003..f616ae6 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -71,7 +71,7 @@
 section > h2::before { content: ""; position: absolute; width: 28px; height: 4px; border-radius: 2px; background: var(--fg); margin-top: -12px; }
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
-/* Section tabs: one section at a time under the summary; sticks to the top while reading */
+/* Section tabs: one section at a time under the header; sticks to the top while reading */
 .sectabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -10px; }
 .sectabs::-webkit-scrollbar { display: none; }
 .sectabs button { flex: none; font: 600 .9rem var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; margin-bottom: -1px; cursor: pointer; }
@@ -79,6 +79,7 @@
 .sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
 .sectabs button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
 section.pane, section.pane ~ section.pane { border-top: 0; padding-top: 0; }
+.summary.pane { border-bottom: 0; padding-bottom: 0; }
 
 /* How to read: a quiet "?" that opens a floating panel, so nothing on the page moves */
 .help { position: relative; }
@@ -267,6 +268,8 @@ <h1 id="title"></h1>
     <p class="ctx" id="context"></p>
   </header>
 
+  <nav class="sectabs" id="sectabs" role="tablist" aria-label="Sections of this report"></nav>
+
   <div class="summary" id="summary"></div>
 
   <div class="aside-col">
@@ -289,8 +292,6 @@ <h1 id="title"></h1>
   </div>
 
 
-  <nav class="sectabs" id="sectabs" role="tablist" aria-label="Sections of this report"></nav>
-
   <section id="s-done">
     <h2>Outcome analysis</h2>
     <p class="reach" id="reach"></p>
@@ -1685,10 +1686,11 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 } else $("ask").hidden = true;
 $("footer").textContent = DATA.footer;
 
-// Sections as tabs: the tab bar under the summary and the minimap on wide screens both switch which section shows.
+// Sections as tabs: the tab bar under the header and the minimap on wide screens both switch which section shows.
 (function () {
   const voices = DATA.voices.length;
   const stops = [
+    ["summary", "Summary", "Summary", fwd + " fruitful"],
     ["s-done", "Outcomes", "Outcome analysis", reached.length + " of " + DATA.progress.length + " reached"],
     ["s-threads", "Threads", "Thread by thread analysis", DATA.threads.length + " threads"],
     ["s-dist", "Distractions", "Distraction analysis", fwd + " fruitful"],
@@ -1718,7 +1720,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
     show(a.getAttribute("href").slice(1), false);
     $("sectabs").scrollIntoView({ behavior: "smooth", block: "start" });
   }));
-  show("s-done", false);
+  show("summary", false);
 })();
 
 // Collapsibles open and close smoothly, and only one is open at a time (never closing its own parent).

From b014d4b0dd7ea6ef66d86f20d95f0a1d9ce5516e Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 13:58:27 +0000
Subject: [PATCH 12/20] dcore-citizen: no titles inside tabs; the chosen tab is
 larger

The section titles (and their ink bars) go, since the tab names say the same; the selected tab grows and scrolls fully into view on narrow screens.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index f616ae6..ef06023 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -67,16 +67,14 @@
 #minimap a:hover { color: var(--fg); }
 #minimap a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-radius: 4px; }
 section[id] { scroll-margin-top: 16px; }
-/* a short ink bar above each section title so the titles stand out when scanning */
-section > h2::before { content: ""; position: absolute; width: 28px; height: 4px; border-radius: 2px; background: var(--fg); margin-top: -12px; }
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
 /* Section tabs: one section at a time under the header; sticks to the top while reading */
-.sectabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -10px; }
+.sectabs { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -10px; }
 .sectabs::-webkit-scrollbar { display: none; }
 .sectabs button { flex: none; font: 600 .9rem var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; margin-bottom: -1px; cursor: pointer; }
 .sectabs button:hover { color: var(--fg); }
-.sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
+.sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font: 700 1.2rem var(--f-head); }
 .sectabs button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
 section.pane, section.pane ~ section.pane { border-top: 0; padding-top: 0; }
 .summary.pane { border-bottom: 0; padding-bottom: 0; }
@@ -293,19 +291,16 @@ <h1 id="title"></h1>
 
 
   <section id="s-done">
-    <h2>Outcome analysis</h2>
     <p class="reach" id="reach"></p>
     <div class="list" id="steps"></div>
     <div class="outcome" id="outcome"></div>
   </section>
 
   <section id="s-threads">
-    <h2>Thread by thread analysis</h2>
     <div class="list" id="threads"></div>
   </section>
 
   <section id="s-dist">
-    <h2>Distraction analysis</h2>
     <p class="muted">What pulled the debate off course.</p>
     <p id="unans-line"></p>
     <p id="gaps-line"></p>
@@ -325,7 +320,6 @@ <h4>Minute by minute</h4><div class="ribbon" id="ribbon"></div><div class="axis"
   </section>
 
   <section id="s-acc">
-    <h2>Accountability</h2>
     <p class="muted">Who moved the debate forward, and who held it back.</p>
     <div class="list" id="voices"></div>
   </section>
@@ -1703,6 +1697,10 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   const show = (id, scroll) => {
     stops.forEach(([sid]) => { document.getElementById(sid).hidden = sid !== id; });
     tabs.forEach(b => { const on = b.getAttribute("aria-controls") === id; b.setAttribute("aria-selected", on); b.tabIndex = on ? 0 : -1; });
+    // On narrow screens the bar scrolls sideways: bring the chosen (now larger) tab fully into view.
+    const cur = tabs.find(b => b.getAttribute("aria-controls") === id), bar = $("sectabs");
+    const left = cur.offsetLeft - 8, right = cur.offsetLeft + cur.offsetWidth + 8 - bar.clientWidth;
+    if (bar.scrollLeft > left) bar.scrollLeft = left; else if (bar.scrollLeft < right) bar.scrollLeft = right;
     links.forEach(a => a.setAttribute("aria-current", a.getAttribute("href") === "#" + id));
     // Keep the reader at the top of the new section, not wherever the last one was scrolled to.
     if (scroll && $("sectabs").getBoundingClientRect().top <= 1) $("sectabs").scrollIntoView({ block: "start" });

From f33ae032204be9e1d6d3878506aa9fd565ae3cb8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:02:31 +0000
Subject: [PATCH 13/20] dcore-citizen: drop the side menu, key the thread bars,
 insight leads distractions

- the 'On this page' side menu goes; the tabs do its job
- thread bars are thicker, with a key: the time span and what each colour means
- the biggest-loss insight opens the distractions tab
- tabs no longer change size when chosen; all are a touch larger, the chosen one bold and underlined

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../dcore-citizen/template-compact.html       | 38 ++++++-------------
 1 file changed, 12 insertions(+), 26 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index ef06023..87f5fd4 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -56,25 +56,15 @@
 
 /* Minimap: a quiet rail on the left; a dot per section, names beside it when there is room */
 .aside-col { display: grid; gap: 14px; }
-.side-h { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
-.minimap { display: none; }
-#minimap { position: relative; display: grid; gap: 2px; }
-#minimap::before { content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
-#minimap a { position: relative; display: flex; align-items: center; gap: 9px; min-height: 22px; text-decoration: none; color: var(--muted); font-size: .8rem; }
-#minimap a::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--muted); transition: transform .2s, background .2s; }
-#minimap a[aria-current="true"] { color: var(--fg); font-weight: 600; }
-#minimap a[aria-current="true"]::before { background: var(--fg); box-shadow: none; transform: scale(1.3); }
-#minimap a:hover { color: var(--fg); }
-#minimap a:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-radius: 4px; }
 section[id] { scroll-margin-top: 16px; }
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
 /* Section tabs: one section at a time under the header; sticks to the top while reading */
 .sectabs { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -10px; }
 .sectabs::-webkit-scrollbar { display: none; }
-.sectabs button { flex: none; font: 600 .9rem var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; margin-bottom: -1px; cursor: pointer; }
+.sectabs button { flex: none; font: 600 1rem var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; margin-bottom: -1px; cursor: pointer; }
 .sectabs button:hover { color: var(--fg); }
-.sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font: 700 1.2rem var(--f-head); }
+.sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font-weight: 700; }
 .sectabs button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
 section.pane, section.pane ~ section.pane { border-top: 0; padding-top: 0; }
 .summary.pane { border-bottom: 0; padding-bottom: 0; }
@@ -95,7 +85,6 @@
 .kinds i { width: 9px; height: 9px; border-radius: 50%; display: block; transform: translateY(1px); }
 @media (min-width: 1120px) {
   .aside-col { position: fixed; z-index: 4; top: 20px; right: 24px; width: min(280px, calc(50vw - 300px - 56px)); max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
-  .minimap { display: block; padding: 0 2px; }
   .guide > div { font-size: .8rem; }
 }
 
@@ -210,7 +199,8 @@
 details.thr > summary { grid-template-columns: minmax(0, 1fr) auto 12px; }
 details.thr .tx-main { grid-column: 1; }
 details.thr .badge { grid-column: 2; grid-row: 1; margin-top: 2px; }
-details.thr > summary .track { grid-column: 1 / 3; grid-row: 2; height: 4px; margin: 5px 0 1px; }
+details.thr > summary .track { grid-column: 1 / 3; grid-row: 2; height: 8px; margin: 6px 0 1px; }
+.lane-key { color: var(--muted); }
 .track { position: relative; height: 6px; background: var(--track); border-radius: 3px; }
 .track i { position: absolute; top: 0; bottom: 0; }
 details.thr .body { padding-left: 12px; }
@@ -271,7 +261,6 @@ <h1 id="title"></h1>
   <div class="summary" id="summary"></div>
 
   <div class="aside-col">
-  <nav class="minimap" aria-label="Sections of this report"><p class="side-h">On this page</p><div id="minimap"></div></nav>
   <div class="help">
     <button type="button" class="help-btn" id="howto-btn" aria-expanded="false" aria-controls="howto"><span class="q">?</span>How to read this report</button>
     <details class="guide" id="howto"><summary>How to read this report</summary><div>
@@ -297,11 +286,13 @@ <h1 id="title"></h1>
   </section>
 
   <section id="s-threads">
+    <p class="key lane-key" id="lane-key"></p>
     <div class="list" id="threads"></div>
   </section>
 
   <section id="s-dist">
     <p class="muted">What pulled the debate off course.</p>
+    <p class="insight" id="insight"></p>
     <p id="unans-line"></p>
     <p id="gaps-line"></p>
     <div class="moments">
@@ -316,7 +307,6 @@ <h4>Minute by minute</h4><div class="ribbon" id="ribbon"></div><div class="axis"
       <div id="gaps" role="tabpanel" aria-labelledby="tab-gaps" hidden></div>
       <button type="button" class="showmore off" id="showmore"></button>
     </div>
-    <p class="insight" id="insight"></p>
   </section>
 
   <section id="s-acc">
@@ -1654,6 +1644,9 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
     '<p>' + esc(th.summary) + '</p>' + (th.pulled ? '<p class="pulled">' + esc(th.pulled) + '</p>' : "") + '<h4>What happened</h4>' + flow + replay, "thr");
 }).join("");
 
+$("lane-key").innerHTML = '<span>Each bar is the debate, ' + clock(0) + ' to ' + clock(total) + ':</span>' +
+  [["fwd", "progress"], ["talk", "left open"], ["side", "distraction"]].map(([c, l]) => '<span><i class="' + c + '"></i>' + l + '</span>').join("");
+
 // Voices: dots on one line, grouped by colour; tap for every moment in time order, with the better move and its cost.
 $("voices").innerHTML = DATA.voices.map(v => {
   const quiet = UNANS.filter(u => (u.to || MOD) === v.name);
@@ -1680,7 +1673,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 } else $("ask").hidden = true;
 $("footer").textContent = DATA.footer;
 
-// Sections as tabs: the tab bar under the header and the minimap on wide screens both switch which section shows.
+// Sections as tabs: the tab bar under the header switches which section shows.
 (function () {
   const voices = DATA.voices.length;
   const stops = [
@@ -1691,17 +1684,15 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
     ["s-acc", "Accountability", "Accountability", voices + (voices === 1 ? " voice" : " voices")]
   ];
   $("sectabs").innerHTML = stops.map(([id, tab, name]) => '<button type="button" role="tab" aria-controls="' + id + '" title="' + esc(name) + '">' + esc(tab) + '</button>').join("");
-  $("minimap").innerHTML = stops.map(([id, , name, stat]) => '<a href="#' + id + '" title="' + esc(name + " · " + stat) + '"><span>' + esc(name) + '</span></a>').join("");
-  const tabs = [...$("sectabs").querySelectorAll("button")], links = [...$("minimap").querySelectorAll("a")];
+  const tabs = [...$("sectabs").querySelectorAll("button")];
   stops.forEach(([id]) => { const sec = document.getElementById(id); sec.classList.add("pane"); sec.setAttribute("role", "tabpanel"); });
   const show = (id, scroll) => {
     stops.forEach(([sid]) => { document.getElementById(sid).hidden = sid !== id; });
     tabs.forEach(b => { const on = b.getAttribute("aria-controls") === id; b.setAttribute("aria-selected", on); b.tabIndex = on ? 0 : -1; });
-    // On narrow screens the bar scrolls sideways: bring the chosen (now larger) tab fully into view.
+    // On narrow screens the bar scrolls sideways: bring the chosen tab fully into view.
     const cur = tabs.find(b => b.getAttribute("aria-controls") === id), bar = $("sectabs");
     const left = cur.offsetLeft - 8, right = cur.offsetLeft + cur.offsetWidth + 8 - bar.clientWidth;
     if (bar.scrollLeft > left) bar.scrollLeft = left; else if (bar.scrollLeft < right) bar.scrollLeft = right;
-    links.forEach(a => a.setAttribute("aria-current", a.getAttribute("href") === "#" + id));
     // Keep the reader at the top of the new section, not wherever the last one was scrolled to.
     if (scroll && $("sectabs").getBoundingClientRect().top <= 1) $("sectabs").scrollIntoView({ block: "start" });
   };
@@ -1713,11 +1704,6 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
       next.click(); next.focus();
     });
   });
-  links.forEach(a => a.addEventListener("click", e => {
-    e.preventDefault();
-    show(a.getAttribute("href").slice(1), false);
-    $("sectabs").scrollIntoView({ behavior: "smooth", block: "start" });
-  }));
   show("summary", false);
 })();
 

From c09ffa688c79ec8b218b9bf943364917780b0e73 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:07:09 +0000
Subject: [PATCH 14/20] dcore-citizen: roomier rows, open titles stay in view,
 simpler accordion

- remove the eyebrow line
- more padding and line height in outcome, thread and voice rows
- an open row's title sticks under the tabs while its detail scrolls
- each voice's detail is capped in height and scrolls inside
- rows are plain <details> sharing a name per list (one open at a time); the custom animation, auto-close and scroll-holding code is gone

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/schema.md        |  2 +-
 .../dcore-citizen/template-compact.html       | 81 ++++---------------
 2 files changed, 18 insertions(+), 65 deletions(-)

diff --git a/.claude/skills/dcore-citizen/schema.md b/.claude/skills/dcore-citizen/schema.md
index 00a2db1..d091e7a 100644
--- a/.claude/skills/dcore-citizen/schema.md
+++ b/.claude/skills/dcore-citizen/schema.md
@@ -26,7 +26,7 @@ contain them.
 
 ```json
 {
-  "eyebrow": "TV debate · 21 minutes · quick read · tap any row for detail",
+  "eyebrow": "TV debate · 21 minutes · quick read · tap any row for detail",   // full page only; the compact page does not show it
   "question": "Should the Election Commission chief resign?",
   "context": "One or two plain sentences: what triggered the conversation.",
 
diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 87f5fd4..d476be2 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -30,7 +30,6 @@
 h2 small { font: 600 .8rem var(--f-body); color: var(--muted); }
 p { margin: 0; }
 section { display: grid; gap: 8px; min-width: 0; }
-.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
 header { display: grid; gap: 6px; }
 .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
 .theme { flex: none; min-height: 32px; font: 600 .75rem var(--f-body); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
@@ -89,10 +88,12 @@
 }
 
 /* Rows: one line each, tap to open */
-.list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+.list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: clip; }
 details.row { border-top: 1px solid var(--line); }
 details.row:first-child { border-top: 0; }
-details.row > summary { list-style: none; cursor: pointer; padding: 9px 12px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 12px; gap: 2px 8px; align-items: start; }
+details.row > summary { list-style: none; cursor: pointer; padding: 14px 14px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 12px; gap: 5px 10px; align-items: start; line-height: 1.35; }
+/* an open row keeps its title in view under the tabs while its detail is read */
+details.row[open] > summary { position: sticky; top: var(--tabs-h, 44px); z-index: 2; background: var(--surface); border-bottom: 1px dashed var(--line); }
 details.row > summary::-webkit-details-marker { display: none; }
 details.row > summary::after { content: "▸"; color: var(--muted); font-size: .9rem; line-height: 1.2; grid-column: 3; grid-row: 1; transition: transform .15s; }
 details.row > summary:hover::after { color: var(--fg); }
@@ -101,9 +102,9 @@
 .ic { font-weight: 700; grid-row: 1; }
 .ic.g { color: var(--good); } .ic.r { color: var(--bad); }
 .tx-main { font-weight: 600; grid-column: 2; grid-row: 1; }
-.tx-sub { grid-column: 2; font-size: .84rem; color: var(--muted); }
+.tx-sub { grid-column: 2; font-size: .86rem; line-height: 1.4; color: var(--muted); }
 .tx-sub .why { color: var(--fg); }
-.body { padding: 2px 12px 12px 38px; display: grid; gap: 8px; font-size: .88rem; }
+.body { padding: 12px 14px 16px 42px; display: grid; gap: 10px; font-size: .9rem; line-height: 1.45; }
 .body h4 { margin: 4px 0 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .chain { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
 .chain li { padding-left: 14px; position: relative; }
@@ -199,11 +200,11 @@
 details.thr > summary { grid-template-columns: minmax(0, 1fr) auto 12px; }
 details.thr .tx-main { grid-column: 1; }
 details.thr .badge { grid-column: 2; grid-row: 1; margin-top: 2px; }
-details.thr > summary .track { grid-column: 1 / 3; grid-row: 2; height: 8px; margin: 6px 0 1px; }
+details.thr > summary .track { grid-column: 1 / 3; grid-row: 2; height: 8px; margin: 8px 0 2px; }
 .lane-key { color: var(--muted); }
 .track { position: relative; height: 6px; background: var(--track); border-radius: 3px; }
 .track i { position: absolute; top: 0; bottom: 0; }
-details.thr .body { padding-left: 12px; }
+details.thr .body { padding-left: 14px; }
 .pulled { color: var(--fg); }
 .fl { display: grid; grid-template-columns: 8px 44px minmax(0, 1fr); gap: 6px; align-items: baseline; }
 .fl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--quiet); }
@@ -224,7 +225,7 @@
 .dots .h { background: transparent; box-shadow: inset 0 0 0 2px var(--quiet); }
 details.vo .note { font-size: .82rem; color: var(--muted); min-width: 0; }
 details.vo summary::after { grid-column: 4; }
-details.vo .body { padding-left: 12px; }
+details.vo .body { padding-left: 14px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
 .mv { display: grid; grid-template-columns: 8px 44px minmax(0, 1fr); gap: 6px; align-items: baseline; }
 .mv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
 .mv.g::before { background: var(--good); } .mv.o::before { background: var(--quiet); } .mv.r::before { background: var(--bad); }
@@ -251,7 +252,7 @@
 
 <div class="wrap">
   <header>
-    <div class="top"><div class="eyebrow" id="eyebrow"></div><div class="tools"><button type="button" class="theme" id="theme" aria-label="Switch light or dark mode"></button></div></div>
+    <div class="top"><div></div><div class="tools"><button type="button" class="theme" id="theme" aria-label="Switch light or dark mode"></button></div></div>
     <h1 id="title"></h1>
     <p class="ctx" id="context"></p>
   </header>
@@ -1485,9 +1486,8 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   matchMedia("(prefers-color-scheme: dark)").addEventListener("change", label);
   label();
 })();
-const row = (summary, body, cls) => '<details class="row ' + (cls || "") + '"><summary>' + summary + '</summary><div class="body">' + body + '</div></details>';
+const row = (summary, body, cls) => '<details class="row ' + (cls || "") + '" name="' + (cls || "step") + '"><summary>' + summary + '</summary><div class="body">' + body + '</div></details>';
 
-$("eyebrow").textContent = DATA.eyebrow;
 $("title").textContent = DATA.question;
 $("context").textContent = DATA.context;
 
@@ -1704,67 +1704,20 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
       next.click(); next.focus();
     });
   });
+  const fitTabs = () => document.documentElement.style.setProperty("--tabs-h", $("sectabs").offsetHeight + "px");
+  addEventListener("resize", fitTabs); fitTabs();
   show("summary", false);
 })();
 
-// Collapsibles open and close smoothly, and only one is open at a time (never closing its own parent).
-const still = matchMedia("(prefers-reduced-motion: reduce)");
-const inner = d => d.querySelector(":scope > :not(summary)");
-// After a row opens, scroll just enough to show what opened, but never push its own title off the top.
-let held = null;
-const reveal = d => {
-  if (d.id === "howto" || !d.open) return;
-  held = null;
-  const box = d.getBoundingClientRect(), head = d.querySelector(":scope > summary").getBoundingClientRect();
-  const dy = Math.min(box.bottom - (innerHeight - 16), head.top - 16);
-  if (dy > 0) scrollBy({ top: dy, behavior: still.matches ? "auto" : "smooth" });
-};
-const slide = (d, opening) => {
-  const el = inner(d);
-  if (!el || still.matches) { d.open = opening; if (opening) requestAnimationFrame(() => reveal(d)); return; }
-  if (d._anim) d._anim.cancel();
-  if (opening) d.open = true;
-  d._closing = !opening;
-  const full = el.scrollHeight;
-  el.style.overflow = "hidden";
-  d._anim = el.animate(opening ? [{ height: "0px", opacity: 0 }, { height: full + "px", opacity: 1 }] : [{ height: full + "px", opacity: 1 }, { height: "0px", opacity: 0 }],
-    { duration: opening ? 240 : 200, easing: "cubic-bezier(.2, .7, .2, 1)" });
-  d._anim.onfinish = d._anim.oncancel = () => { el.style.overflow = ""; d._anim = null; d._closing = false; if (!opening) d.open = false; };
-  if (opening) d._anim.addEventListener("finish", () => reveal(d));
-};
-document.addEventListener("click", e => {
-  const s = e.target.closest("summary");
-  if (!s || s.parentElement.tagName !== "DETAILS") return;
-  e.preventDefault();
-  const d = s.parentElement;
-  slide(d, !d.open || !!d._closing);
-});
-// While a row above collapses, hold the tapped row still on screen, so the page does not jump under the reader's finger.
-// The hold stops as soon as the opened row reveals itself, so the two never pull the page in opposite directions.
-const hold = (el, ms) => {
-  const top = el.getBoundingClientRect().top, end = performance.now() + ms, token = {};
-  const fix = () => { const dy = el.getBoundingClientRect().top - top; if (dy) scrollBy(0, dy); };
-  const loop = () => { if (held !== token) return; fix(); if (performance.now() < end) requestAnimationFrame(loop); };
-  return () => { held = token; fix(); requestAnimationFrame(loop); };
-};
-document.addEventListener("toggle", e => {
-  const opened = e.target;
-  if (!(opened instanceof HTMLDetailsElement) || !opened.open || opened.id === "howto") return;
-  const closing = [...document.querySelectorAll("details[open]:not(#howto)")]
-    .filter(d => d !== opened && !d.contains(opened) && !opened.contains(d) && !d._anim);
-  const above = closing.some(d => d.compareDocumentPosition(opened) & Node.DOCUMENT_POSITION_FOLLOWING);
-  const settle = above ? hold(opened.querySelector(":scope > summary"), 260) : null;
-  closing.forEach(d => slide(d, false));
-  if (settle) settle();
-}, true);
+// Rows are plain <details>: rows in the same list share a name, so the browser keeps one open at a time.
 
 // "How to read": the "?" opens the guide as a floating panel; a tap outside or Escape closes it.
 (function () {
   const btn = $("howto-btn"), guide = $("howto");
-  btn.addEventListener("click", () => slide(guide, !guide.open || !!guide._closing));
+  btn.addEventListener("click", () => { guide.open = !guide.open; });
   guide.addEventListener("toggle", () => btn.setAttribute("aria-expanded", guide.open));
-  document.addEventListener("click", e => { if (guide.open && !guide.contains(e.target) && !btn.contains(e.target)) slide(guide, false); });
-  document.addEventListener("keydown", e => { if (e.key === "Escape" && guide.open) { slide(guide, false); btn.focus(); } });
+  document.addEventListener("click", e => { if (guide.open && !guide.contains(e.target) && !btn.contains(e.target)) guide.open = false; });
+  document.addEventListener("keydown", e => { if (e.key === "Escape" && guide.open) { guide.open = false; btn.focus(); } });
 })();
 
 // Sources: with a YouTube link, every timestamp opens the video at that second;

From 66b6fe082bb5c74656c6974440b5088e4f7ef08c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:14:00 +0000
Subject: [PATCH 15/20] dcore-citizen: no gap above the title, quieter thread
 bars, larger open title

- the light/dark button sits beside the title instead of on its own line
- an open outcome row shows its title larger
- thread bars are thinner and faded
- more space in the distractions intro

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../skills/dcore-citizen/template-compact.html   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index d476be2..48b3b50 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -30,8 +30,9 @@
 h2 small { font: 600 .8rem var(--f-body); color: var(--muted); }
 p { margin: 0; }
 section { display: grid; gap: 8px; min-width: 0; }
-header { display: grid; gap: 6px; }
-.top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
+header { display: grid; gap: 6px; position: relative; }
+.top { position: absolute; top: 0; right: 0; }
+header h1 { padding-right: 84px; }
 .theme { flex: none; min-height: 32px; font: 600 .75rem var(--f-body); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
 .theme:hover { color: var(--fg); }
 .theme:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@@ -102,6 +103,7 @@
 .ic { font-weight: 700; grid-row: 1; }
 .ic.g { color: var(--good); } .ic.r { color: var(--bad); }
 .tx-main { font-weight: 600; grid-column: 2; grid-row: 1; }
+details.row[open] .tx-main { font-size: 1.12rem; }
 .tx-sub { grid-column: 2; font-size: .86rem; line-height: 1.4; color: var(--muted); }
 .tx-sub .why { color: var(--fg); }
 .body { padding: 12px 14px 16px 42px; display: grid; gap: 10px; font-size: .9rem; line-height: 1.45; }
@@ -141,8 +143,10 @@
 .bl .k { color: var(--muted); font-size: .76rem; }
 .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
 .card-h { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
-.insight { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; font-size: .9rem; }
-.insight b { display: block; }
+.insight { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; font-size: .92rem; line-height: 1.5; }
+#s-dist { gap: 14px; }
+#s-dist > p { line-height: 1.5; }
+.insight b { display: block; margin-bottom: 4px; }
 details.more > summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--link); display: inline-flex; gap: 5px; padding: 2px 0; }
 details.more > summary::-webkit-details-marker { display: none; }
 details.more > summary::before { content: "▸"; transition: transform .15s; }
@@ -200,7 +204,7 @@
 details.thr > summary { grid-template-columns: minmax(0, 1fr) auto 12px; }
 details.thr .tx-main { grid-column: 1; }
 details.thr .badge { grid-column: 2; grid-row: 1; margin-top: 2px; }
-details.thr > summary .track { grid-column: 1 / 3; grid-row: 2; height: 8px; margin: 8px 0 2px; }
+details.thr > summary .track { grid-column: 1 / 3; grid-row: 2; height: 4px; margin: 8px 0 2px; opacity: .5; }
 .lane-key { color: var(--muted); }
 .track { position: relative; height: 6px; background: var(--track); border-radius: 3px; }
 .track i { position: absolute; top: 0; bottom: 0; }
@@ -252,7 +256,7 @@
 
 <div class="wrap">
   <header>
-    <div class="top"><div></div><div class="tools"><button type="button" class="theme" id="theme" aria-label="Switch light or dark mode"></button></div></div>
+    <div class="top"><div class="tools"><button type="button" class="theme" id="theme" aria-label="Switch light or dark mode"></button></div></div>
     <h1 id="title"></h1>
     <p class="ctx" id="context"></p>
   </header>

From 8ca3caf674b926a8d2497862dd749187cadf6719 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:16:04 +0000
Subject: [PATCH 16/20] dcore-citizen: open row title at 1.4em

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 48b3b50..60633fb 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -103,7 +103,7 @@
 .ic { font-weight: 700; grid-row: 1; }
 .ic.g { color: var(--good); } .ic.r { color: var(--bad); }
 .tx-main { font-weight: 600; grid-column: 2; grid-row: 1; }
-details.row[open] .tx-main { font-size: 1.12rem; }
+details.row[open] .tx-main { font-size: 1.4em; line-height: 1.25; }
 .tx-sub { grid-column: 2; font-size: .86rem; line-height: 1.4; color: var(--muted); }
 .tx-sub .why { color: var(--fg); }
 .body { padding: 12px 14px 16px 42px; display: grid; gap: 10px; font-size: .9rem; line-height: 1.45; }

From a762782aa0200fd356651a37bfd95983eb872287 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:28:14 +0000
Subject: [PATCH 17/20] dcore-citizen: spacing pass

- one spacing rhythm across sections, summary, the missed-steps line and the outcome callout
- smaller missed-steps line; more room around 'what failing to reach them leads to'
- 'How to read this report' sits in the header on phones
- 'What to ask' and the transcript sit together under one rule, with taller tap targets
- small labels and timestamps up to about 12px

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../dcore-citizen/template-compact.html       | 74 ++++++++++---------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 60633fb..eddcac5 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -23,34 +23,34 @@
 
 * { box-sizing: border-box; }
 body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.4 var(--f-body); }
-.wrap { max-width: 600px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 26px; }
+.wrap { max-width: 600px; margin: 0 auto; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 24px; }
 h1, h2 { font-family: var(--f-head); margin: 0; text-wrap: balance; }
 h1 { font-size: 1.45rem; line-height: 1.15; }
 h2 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.01em; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
 h2 small { font: 600 .8rem var(--f-body); color: var(--muted); }
 p { margin: 0; }
-section { display: grid; gap: 8px; min-width: 0; }
-header { display: grid; gap: 6px; position: relative; }
+section { display: grid; gap: 16px; min-width: 0; }
+header { display: grid; gap: 8px; position: relative; }
 .top { position: absolute; top: 0; right: 0; }
 header h1 { padding-right: 84px; }
 .theme { flex: none; min-height: 32px; font: 600 .75rem var(--f-body); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
 .theme:hover { color: var(--fg); }
 .theme:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
 .ctx { color: var(--muted); font-size: .92rem; }
-.ts { font: 500 .72rem var(--f-mono); color: var(--muted); white-space: nowrap; }
+.ts { font: 500 .78rem var(--f-mono); color: var(--muted); white-space: nowrap; }
 /* padding widens the tap area to about 32px; the negative margin keeps the layout unchanged */
 a.ts { color: var(--link); text-decoration: underline dotted; text-underline-offset: 3px; padding: 9px 4px; margin: -9px -4px; border-radius: 4px; }
 .muted { color: var(--muted); }
 
 /* In short: two lines a reader can repeat */
-.summary { border-bottom: 1px solid var(--line); padding: 2px 0 16px; display: grid; gap: 6px; }
+.summary { border-bottom: 1px solid var(--line); padding: 2px 0 16px; display: grid; gap: 12px; }
 .summary .hook { font: 700 1.55rem/1.15 var(--f-head); letter-spacing: -.01em; text-wrap: balance; margin-bottom: 4px; }
 .summary .hook em { font-style: normal; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; color: var(--good); margin-right: 2px; }
 .summary > p:not(.hook) { font-size: 1.02rem; color: var(--fg); }
-.summary .pies { margin-top: 8px; }
-.reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 8px 12px; font-size: 1rem; }
+.summary .pies { margin-top: 4px; }
+.reach { background: var(--bad-soft); border-left: 3px solid var(--bad); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: .92rem; line-height: 1.45; }
 .reach b:first-of-type { color: var(--bad); }
-.summary > p.hook-sub { font-size: .88rem; color: var(--muted); margin-top: -6px; }
+.summary > p.hook-sub { font-size: .88rem; color: var(--muted); margin-top: -10px; }
 .summary > p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
@@ -60,25 +60,27 @@
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
 /* Section tabs: one section at a time under the header; sticks to the top while reading */
-.sectabs { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); margin-bottom: -10px; }
+.sectabs { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 1px solid var(--line); }
 .sectabs::-webkit-scrollbar { display: none; }
 .sectabs button { flex: none; font: 600 1rem var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 10px 8px; margin-bottom: -1px; cursor: pointer; }
 .sectabs button:hover { color: var(--fg); }
 .sectabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); font-weight: 700; }
 .sectabs button:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
 section.pane, section.pane ~ section.pane { border-top: 0; padding-top: 0; }
+#ask { padding-top: 16px; gap: 4px; }
+#trs { border-top: 0; padding-top: 0; margin-top: -24px; }
 .summary.pane { border-bottom: 0; padding-bottom: 0; }
 
 /* How to read: a quiet "?" that opens a floating panel, so nothing on the page moves */
 .help { position: relative; }
-.help-btn { display: inline-flex; align-items: center; gap: 7px; font: 600 .78rem var(--f-body); color: var(--muted); background: none; border: 0; padding: 2px 0; cursor: pointer; }
+.help-btn { display: inline-flex; align-items: center; gap: 7px; font: 600 .82rem var(--f-body); color: var(--muted); background: none; border: 0; min-height: 36px; padding: 0; cursor: pointer; }
 .help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--fg); }
 .help-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
 .q { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dotted currentColor; font-size: .72rem; font-weight: 700; }
 .guide { margin-top: 8px; }
 .guide > summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 .guide > div { background: var(--surface); border: 1.5px dotted var(--muted); border-radius: 10px; padding: 12px 14px; display: grid; gap: 7px; font-size: .84rem; line-height: 1.4; }
-.guide-h { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.guide-h { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .guide b { font-weight: 600; }
 .kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
 .kinds li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 8px; align-items: baseline; }
@@ -107,7 +109,7 @@
 .tx-sub { grid-column: 2; font-size: .86rem; line-height: 1.4; color: var(--muted); }
 .tx-sub .why { color: var(--fg); }
 .body { padding: 12px 14px 16px 42px; display: grid; gap: 10px; font-size: .9rem; line-height: 1.45; }
-.body h4 { margin: 4px 0 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.body h4 { margin: 4px 0 0; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .chain { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
 .chain li { padding-left: 14px; position: relative; }
 .chain li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
@@ -117,8 +119,8 @@
 .mo.neg { grid-template-columns: 1fr; padding-left: 50px; color: var(--muted); font-style: italic; }
 .mo.dot::before { content: none; }
 ol.plain { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
-.outcome { border-left: 3px solid var(--bad); padding: 2px 0 2px 10px; font-weight: 600; font-size: .92rem; display: grid; gap: 2px; }
-.outcome .lbl { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.outcome { border-left: 3px solid var(--bad); margin-top: 8px; padding: 8px 0 8px 14px; font-weight: 600; font-size: .95rem; line-height: 1.4; display: grid; gap: 6px; }
+.outcome .lbl { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .outcome .note { font-weight: 400; color: var(--muted); font-size: .8rem; }
 
 /* Time */
@@ -142,12 +144,12 @@
 .bl .pc { text-align: right; font-weight: 600; font-size: .86rem; }
 .bl .k { color: var(--muted); font-size: .76rem; }
 .card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
-.card-h { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.card-h { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .insight { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; font-size: .92rem; line-height: 1.5; }
 #s-dist { gap: 14px; }
 #s-dist > p { line-height: 1.5; }
 .insight b { display: block; margin-bottom: 4px; }
-details.more > summary { list-style: none; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--link); display: inline-flex; gap: 5px; padding: 2px 0; }
+details.more > summary { list-style: none; cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--link); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; }
 details.more > summary::-webkit-details-marker { display: none; }
 details.more > summary::before { content: "▸"; transition: transform .15s; }
 details.more[open] > summary::before { transform: rotate(90deg); }
@@ -159,7 +161,7 @@
 /* Two donuts side by side: how the time was used, and what the distractions were */
 .pies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .pie { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
-.pie figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.pie figcaption { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .pie svg { width: 112px; height: 112px; justify-self: center; display: block; }
 .pie svg circle.seg { fill: none; stroke-width: 16; }
 .pie svg circle.seg:hover { stroke-width: 19; }
@@ -170,7 +172,7 @@
 .lg i { width: 9px; height: 9px; border-radius: 2px; display: block; align-self: center; }
 .lg b { font-weight: 600; }
 .moments { display: grid; gap: 6px; font-size: .86rem; }
-.moments h4, details.more h4 { margin: 6px 0 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.moments h4, details.more h4 { margin: 6px 0 0; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 /* stacked on narrow screens: donut beside its legend, so labels keep one line */
 @media (max-width: 520px) {
   .pies { grid-template-columns: 1fr; }
@@ -238,7 +240,7 @@
 .mv .better b, .mv .cost b { color: var(--fg); font-weight: 600; }
 
 .ask ol { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
-.ask h4 { margin: 4px 0 0; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
+.ask h4 { margin: 4px 0 0; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
 .txs { max-height: 55vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
 .txs p { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; padding: 2px; }
 .txs p.hit { background: var(--quiet-soft); }
@@ -259,29 +261,29 @@
     <div class="top"><div class="tools"><button type="button" class="theme" id="theme" aria-label="Switch light or dark mode"></button></div></div>
     <h1 id="title"></h1>
     <p class="ctx" id="context"></p>
+    <div class="aside-col">
+    <div class="help">
+      <button type="button" class="help-btn" id="howto-btn" aria-expanded="false" aria-controls="howto"><span class="q">?</span>How to read this report</button>
+      <details class="guide" id="howto"><summary>How to read this report</summary><div>
+        <p class="guide-h">How this report works</p>
+        <p>We follow each question the debate took up (a <b>thread</b>) and sort every moment into one of three kinds:</p>
+        <ul class="kinds">
+          <li><i class="fwd"></i><span><b>Progress:</b> something got settled. Everyone agreed on a point, or a question got a straight answer.</span></li>
+          <li><i class="talk"></i><span><b>Left open:</b> a point aimed at someone got no reply, or the answer left part of it open (a hollow dot).</span></li>
+          <li><i class="side"></i><span><b>Distraction:</b> a move that pulled the debate off its question, like changing the subject or attacking motives.</span></li>
+        </ul>
+        <p><b>Failed to reach</b> is a step that was close: one or two moves away, using only what had already been said.</p>
+        <p><b>Accountability</b> shows each voice's moves, one dot per moment, in the same three colours. We judge moves, never sides or opinions.</p>
+        <p>Each thread's <b>replay</b> is one fair way it could have gone, not what happened.</p>
+      </div></details>
+    </div>
+    </div>
   </header>
 
   <nav class="sectabs" id="sectabs" role="tablist" aria-label="Sections of this report"></nav>
 
   <div class="summary" id="summary"></div>
 
-  <div class="aside-col">
-  <div class="help">
-    <button type="button" class="help-btn" id="howto-btn" aria-expanded="false" aria-controls="howto"><span class="q">?</span>How to read this report</button>
-    <details class="guide" id="howto"><summary>How to read this report</summary><div>
-      <p class="guide-h">How this report works</p>
-      <p>We follow each question the debate took up (a <b>thread</b>) and sort every moment into one of three kinds:</p>
-      <ul class="kinds">
-        <li><i class="fwd"></i><span><b>Progress:</b> something got settled. Everyone agreed on a point, or a question got a straight answer.</span></li>
-        <li><i class="talk"></i><span><b>Left open:</b> a point aimed at someone got no reply, or the answer left part of it open (a hollow dot).</span></li>
-        <li><i class="side"></i><span><b>Distraction:</b> a move that pulled the debate off its question, like changing the subject or attacking motives.</span></li>
-      </ul>
-      <p><b>Failed to reach</b> is a step that was close: one or two moves away, using only what had already been said.</p>
-      <p><b>Accountability</b> shows each voice's moves, one dot per moment, in the same three colours. We judge moves, never sides or opinions.</p>
-      <p>Each thread's <b>replay</b> is one fair way it could have gone, not what happened.</p>
-    </div></details>
-  </div>
-  </div>
 
 
   <section id="s-done">

From 4a228fef231d87fd2639927cda046631570e5758 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:31:41 +0000
Subject: [PATCH 18/20] dcore-citizen: remove 'How to read this report'

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../dcore-citizen/template-compact.html       | 46 -------------------
 1 file changed, 46 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index eddcac5..5444739 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -54,8 +54,6 @@
 .summary > p:not(.hook) b { font: 700 1.05rem var(--f-head); }
 @media (max-width: 480px) { .summary .hook { font-size: 1.35rem; } .summary .hook em { font-size: 2.2rem; } }
 
-/* Minimap: a quiet rail on the left; a dot per section, names beside it when there is room */
-.aside-col { display: grid; gap: 14px; }
 section[id] { scroll-margin-top: 16px; }
 /* a thin rule between sections, like the one under the summary */
 section ~ section { border-top: 1px solid var(--line); padding-top: 22px; }
@@ -71,25 +69,6 @@
 #trs { border-top: 0; padding-top: 0; margin-top: -24px; }
 .summary.pane { border-bottom: 0; padding-bottom: 0; }
 
-/* How to read: a quiet "?" that opens a floating panel, so nothing on the page moves */
-.help { position: relative; }
-.help-btn { display: inline-flex; align-items: center; gap: 7px; font: 600 .82rem var(--f-body); color: var(--muted); background: none; border: 0; min-height: 36px; padding: 0; cursor: pointer; }
-.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--fg); }
-.help-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
-.q { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dotted currentColor; font-size: .72rem; font-weight: 700; }
-.guide { margin-top: 8px; }
-.guide > summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
-.guide > div { background: var(--surface); border: 1.5px dotted var(--muted); border-radius: 10px; padding: 12px 14px; display: grid; gap: 7px; font-size: .84rem; line-height: 1.4; }
-.guide-h { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
-.guide b { font-weight: 600; }
-.kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
-.kinds li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 8px; align-items: baseline; }
-.kinds i { width: 9px; height: 9px; border-radius: 50%; display: block; transform: translateY(1px); }
-@media (min-width: 1120px) {
-  .aside-col { position: fixed; z-index: 4; top: 20px; right: 24px; width: min(280px, calc(50vw - 300px - 56px)); max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; }
-  .guide > div { font-size: .8rem; }
-}
-
 /* Rows: one line each, tap to open */
 .list { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: clip; }
 details.row { border-top: 1px solid var(--line); }
@@ -261,23 +240,6 @@
     <div class="top"><div class="tools"><button type="button" class="theme" id="theme" aria-label="Switch light or dark mode"></button></div></div>
     <h1 id="title"></h1>
     <p class="ctx" id="context"></p>
-    <div class="aside-col">
-    <div class="help">
-      <button type="button" class="help-btn" id="howto-btn" aria-expanded="false" aria-controls="howto"><span class="q">?</span>How to read this report</button>
-      <details class="guide" id="howto"><summary>How to read this report</summary><div>
-        <p class="guide-h">How this report works</p>
-        <p>We follow each question the debate took up (a <b>thread</b>) and sort every moment into one of three kinds:</p>
-        <ul class="kinds">
-          <li><i class="fwd"></i><span><b>Progress:</b> something got settled. Everyone agreed on a point, or a question got a straight answer.</span></li>
-          <li><i class="talk"></i><span><b>Left open:</b> a point aimed at someone got no reply, or the answer left part of it open (a hollow dot).</span></li>
-          <li><i class="side"></i><span><b>Distraction:</b> a move that pulled the debate off its question, like changing the subject or attacking motives.</span></li>
-        </ul>
-        <p><b>Failed to reach</b> is a step that was close: one or two moves away, using only what had already been said.</p>
-        <p><b>Accountability</b> shows each voice's moves, one dot per moment, in the same three colours. We judge moves, never sides or opinions.</p>
-        <p>Each thread's <b>replay</b> is one fair way it could have gone, not what happened.</p>
-      </div></details>
-    </div>
-    </div>
   </header>
 
   <nav class="sectabs" id="sectabs" role="tablist" aria-label="Sections of this report"></nav>
@@ -1717,14 +1679,6 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
 
 // Rows are plain <details>: rows in the same list share a name, so the browser keeps one open at a time.
 
-// "How to read": the "?" opens the guide as a floating panel; a tap outside or Escape closes it.
-(function () {
-  const btn = $("howto-btn"), guide = $("howto");
-  btn.addEventListener("click", () => { guide.open = !guide.open; });
-  guide.addEventListener("toggle", () => btn.setAttribute("aria-expanded", guide.open));
-  document.addEventListener("click", e => { if (guide.open && !guide.contains(e.target) && !btn.contains(e.target)) guide.open = false; });
-  document.addEventListener("keydown", e => { if (e.key === "Escape" && guide.open) { guide.open = false; btn.focus(); } });
-})();
 
 // Sources: with a YouTube link, every timestamp opens the video at that second;
 // otherwise the raw transcript is hosted here and every timestamp opens it at that line.

From 3a951bdf4ce316614603eb15fac57590f9f7333f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:34:23 +0000
Subject: [PATCH 19/20] dcore-citizen: outcome rows tinted green or red instead
 of a tick or cross

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .../skills/dcore-citizen/template-compact.html   | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 5444739..339c7a4 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -81,8 +81,14 @@
 details.row > summary:hover::after { color: var(--fg); }
 details.row[open] > summary::after { transform: rotate(90deg); }
 details.row > summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
-.ic { font-weight: 700; grid-row: 1; }
-.ic.g { color: var(--good); } .ic.r { color: var(--bad); }
+/* outcome rows: a faint green or red wash and edge instead of a tick or cross */
+details.step > summary { grid-template-columns: minmax(0, 1fr) 12px; }
+details.step .tx-main, details.step .tx-sub { grid-column: 1; }
+details.step > summary::after { grid-column: 2; }
+details.step .body { padding-left: 14px; }
+details.step.ok { --row: color-mix(in srgb, var(--good-soft) 60%, var(--surface)); --edge: color-mix(in srgb, var(--good) 55%, var(--surface)); }
+details.step.miss { --row: color-mix(in srgb, var(--bad-soft) 60%, var(--surface)); --edge: color-mix(in srgb, var(--bad) 55%, var(--surface)); }
+details.step, details.step[open] > summary { background: var(--row); box-shadow: inset 3px 0 var(--edge); }
 .tx-main { font-weight: 600; grid-column: 2; grid-row: 1; }
 details.row[open] .tx-main { font-size: 1.4em; line-height: 1.25; }
 .tx-sub { grid-column: 2; font-size: .86rem; line-height: 1.4; color: var(--muted); }
@@ -1454,7 +1460,7 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   matchMedia("(prefers-color-scheme: dark)").addEventListener("change", label);
   label();
 })();
-const row = (summary, body, cls) => '<details class="row ' + (cls || "") + '" name="' + (cls || "step") + '"><summary>' + summary + '</summary><div class="body">' + body + '</div></details>';
+const row = (summary, body, cls) => '<details class="row ' + (cls || "") + '" name="' + (cls || "step").split(" ")[0] + '"><summary>' + summary + '</summary><div class="body">' + body + '</div></details>';
 
 $("title").textContent = DATA.question;
 $("context").textContent = DATA.context;
@@ -1483,8 +1489,8 @@ <h4>To spot talk that went nowhere</h4><ol id="ask-n"></ol></div></details>
   const ok = s.status === "reached", last = lead(s.chain[s.chain.length - 1]);
   const sub = ok ? '<span class="tx-sub">→ ' + esc(last) + '</span>' :
     '<span class="tx-sub">' + (s.lost ? (s.lost.t ? ts(s.lost.t) + " " : "") + esc(s.lost.label) + " " : "") + '→ <span class="why">' + esc(last) + '</span></span>';
-  return row('<span class="ic ' + (ok ? "g" : "r") + '">' + (ok ? "✓" : "✕") + '</span><span class="tx-main">' + esc(s.text) + '</span>' + sub,
-    '<h4>' + esc(s.because) + '</h4><ul class="chain ' + (ok ? "g" : "r") + '">' + s.chain.map(c => '<li>' + esc(c) + '</li>').join("") + '</ul>' + blocks(s.detail));
+  return row('<span class="tx-main">' + esc(s.text) + '</span>' + sub,
+    '<h4>' + esc(s.because) + '</h4><ul class="chain ' + (ok ? "g" : "r") + '">' + s.chain.map(c => '<li>' + esc(c) + '</li>').join("") + '</ul>' + blocks(s.detail), "step " + (ok ? "ok" : "miss"));
 }).join("");
 if (DATA.outcome) $("outcome").innerHTML = '<span class="lbl">What failing to reach ' + (missed.length > 1 ? "them" : "it") + ' leads to</span><span>' + esc(DATA.outcome) + '</span>' +
   (DATA.outcome_note ? '<span class="note">' + esc(DATA.outcome_note) + '</span>' : "");

From 1f1039b6f83e4b7de3bc1a3b36bd62fc7dfa93f0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 23 Oct 2026 14:35:54 +0000
Subject: [PATCH 20/20] dcore-citizen: stronger green/red tint on outcome rows

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013zQeu24qpPqXMrXcoR38Ur
---
 .claude/skills/dcore-citizen/template-compact.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.claude/skills/dcore-citizen/template-compact.html b/.claude/skills/dcore-citizen/template-compact.html
index 339c7a4..c0564c2 100644
--- a/.claude/skills/dcore-citizen/template-compact.html
+++ b/.claude/skills/dcore-citizen/template-compact.html
@@ -86,8 +86,8 @@
 details.step .tx-main, details.step .tx-sub { grid-column: 1; }
 details.step > summary::after { grid-column: 2; }
 details.step .body { padding-left: 14px; }
-details.step.ok { --row: color-mix(in srgb, var(--good-soft) 60%, var(--surface)); --edge: color-mix(in srgb, var(--good) 55%, var(--surface)); }
-details.step.miss { --row: color-mix(in srgb, var(--bad-soft) 60%, var(--surface)); --edge: color-mix(in srgb, var(--bad) 55%, var(--surface)); }
+details.step.ok { --row: color-mix(in srgb, var(--good) 13%, var(--surface)); --edge: var(--good); }
+details.step.miss { --row: color-mix(in srgb, var(--bad) 12%, var(--surface)); --edge: var(--bad); }
 details.step, details.step[open] > summary { background: var(--row); box-shadow: inset 3px 0 var(--edge); }
 .tx-main { font-weight: 600; grid-column: 2; grid-row: 1; }
 details.row[open] .tx-main { font-size: 1.4em; line-height: 1.25; }