From be1b797083259a4f98d4b88cb4f3cd45f0a7ba03 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:29:40 +0100
Subject: [PATCH 01/13] chore: capture the record dashboard scrolling sideways
 on a phone

The site-screenshots job has failed on every pull request since
2026-10-03 23:37Z: /record/ scrolls sideways at 360 and 390 px. A local
reproduction names the Latest decisions panel's title spans, not the
genealogy timeline the bisect suspected.

Refs: iss-2610040729344770
Assisted-by: Claude:claude-opus-5-5
---
 ...oard-record-scrolls-sideways-at-360-and-390.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md

diff --git a/.abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md b/.abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
new file mode 100644
index 000000000..077318754
--- /dev/null
+++ b/.abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
@@ -0,0 +1,15 @@
+---
+schema_version: 1
+id: "iss-2610040729344770"
+slug: "the-record-dashboard-record-scrolls-sideways-at-360-and-390"
+severity: "major"
+category: "bug"
+source: "agent-finding"
+found_during: "site-screenshots failing on every PR since 2026-10-03 23:37Z"
+origin: researcher-authored
+production_mode: hand-written
+found_at: "site-src/site.css"
+remedy: "Give the non-id spans of a .list row the treatment .links li>span already has: .list li>span:not(.id){overflow-wrap:anywhere;min-width:0} in site-src/site.css and its seeded copy internal/core/site/setupsrc/site.css, the id column keeping white-space:nowrap. Grounds: overflow-wrap:anywhere, unlike break-word, lowers the element's min-content width (CSS Text Module Level 3, overflow-wrap), and min-width:0 removes the grid item's content-based automatic minimum (CSS Grid Layout Level 1, section 6.6), so the 1fr track gives whatever title arrives; the stylesheet's own comment above .refs li records the same reasoning for bibliography addresses. A Go test pins the rule and the row markup it matches; the overflow audit proves it in a browser at 360/390/768/1360 px."
+---
+
+The record dashboard (/record/) scrolls sideways at 360 and 390 px: the site-screenshots job measures scrollWidth 476 to 482 there on every pull request since 2026-10-03 23:37Z. The cause is not the genealogy timeline, whose svg sits inside its own overflow-x:auto panel and cannot widen the page, and not the four sub-navigation links the job names first, which scroll inside their own bar; it is the Latest decisions panel. A .list row is a two-column grid (auto 1fr) whose title is a plain span, and a grid item's automatic minimum width is its min-content width, so a title holding one long unspaced token sets the width of the row, which spills past the panel and the page. The two ADRs from #795 (adr-2610031751065746 and adr-2610031751066232) carry such titles, a home-relative path with no break in it, and became the two newest decisions on 2026-10-03. Every .list on the site (dashboard decisions, health, status, development, supersessions) has the same shape, so any record whose title holds a long token reproduces it.

From a4316eebcde1f66d0979bdf4d96319ea43054421 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:32:28 +0100
Subject: [PATCH 02/13] chore: capture record pages scrolling sideways on a
 long unbroken token

Found while reproducing the /record/ overflow: a timestamp-id ADR's source
path and two ADR titles have no break opportunity, and the overflow audit
samples only the lowest-numbered record of each type, so it never sees them.

Refs: iss-2610040732240935
Assisted-by: Claude:claude-opus-5-5
---
 ...roll-sideways-at-360-px-whenever-a-record-s.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md

diff --git a/.abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md b/.abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
new file mode 100644
index 000000000..e387d19c7
--- /dev/null
+++ b/.abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
@@ -0,0 +1,15 @@
+---
+schema_version: 1
+id: "iss-2610040732240935"
+slug: "record-pages-scroll-sideways-at-360-px-whenever-a-record-s"
+severity: "major"
+category: "bug"
+source: "agent-finding"
+found_during: "site-screenshots failing on every PR since 2026-10-03 23:37Z"
+origin: researcher-authored
+production_mode: hand-written
+found_at: "site-src/site.css"
+remedy: "Set overflow-wrap:break-word on body in site-src/site.css and its seeded copy internal/core/site/setupsrc/site.css, as a net under every block of text: it breaks a token only where the line would otherwise overflow and, unlike anywhere, leaves min-content sizing alone, so tables, grids and flex rows lay out as before (CSS Text Module Level 3, overflow-wrap). Make the overflow audit also sample, per type, the record whose title or source path holds the longest run without a space or hyphen, so the worst case for wrapping is measured on every pull request rather than the shortest. A Go test pins the body rule; the audit run proves it in a browser."
+---
+
+Record pages scroll sideways at 360 px whenever a record's title or source path holds a long unbroken token, and the overflow audit cannot see it. Every ADR minted with a timestamp id shows its source path, .abcd/development/decisions/adrs/<16 digits>-<slug>.md, as one mono span in the side panel's reclinks paragraph, and the run up to the first hyphen is about fifty characters with no break opportunity: /record/adr/adr-2609091248200336/ measures scrollWidth 374 at 360 px. adr-2610031751065746 and adr-2610031751066232 also carry a home-relative path in their titles, which overflows the record page's h1 (scrollWidth 455). The stylesheet sets no overflow-wrap on body, the title or reclinks, so a block whose text has nowhere to break widens the page. The site-screenshots audit samples only the lowest-numbered record of each type (adr-1, itd-1, iss-1), whose paths and titles are short, so these pages have overflowed since timestamp ADRs began without the job noticing.

From e90a2a4a03cb12b71df2d89ba337f625f8b1b20b Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:35:59 +0100
Subject: [PATCH 03/13] fix(site): let a .list row's title give on a narrow
 screen

The /record/ dashboard scrolled sideways at 360 and 390 px. The genealogy
timeline was suspected, but its svg sits inside its own overflow-x:auto
panel and never widens the page; the cause is the Latest decisions panel.
A .list row is a grid (auto 1fr), and a grid item's automatic minimum
width is its min-content width, so the two newest ADR titles, which quote
a home-relative path with no break in it, set the width of their rows.

The non-id spans of a .list row now carry overflow-wrap:anywhere (the one
value that also lowers min-content) and min-width:0, the treatment
.links li>span already has. The rule reaches every .list on the site:
the dashboard's decisions, health, status, development and the
supersession list. A Go test holds the rule at the top level of both
stylesheets and the row markup it matches.

Refs: iss-2610040729344770
Assisted-by: Claude:claude-opus-5-5
---
 internal/core/site/listwrap_test.go  | 100 +++++++++++++++++++++++++++
 internal/core/site/setupsrc/site.css |   7 ++
 site-src/site.css                    |   7 ++
 3 files changed, 114 insertions(+)
 create mode 100644 internal/core/site/listwrap_test.go

diff --git a/internal/core/site/listwrap_test.go b/internal/core/site/listwrap_test.go
new file mode 100644
index 000000000..c8c721e20
--- /dev/null
+++ b/internal/core/site/listwrap_test.go
@@ -0,0 +1,100 @@
+package site
+
+// A `.list` row never widens the page, whatever title it carries.
+//
+// A row is a two-column grid, the id and then the title, and a grid item's
+// automatic minimum width is its min-content width: a title holding one long
+// unspaced token — a home-relative path, a URL — sets the width of the row, and
+// the row spills past its panel and makes the whole page scroll sideways on a
+// phone (iss-2610040729344770, the /record/ dashboard at 360 px). The browser
+// half of that rule is the overflow audit in site-src/audit/; this is the half a
+// test can hold without one: the title reaches the page as a non-id span
+// directly under the row, and the stylesheet gives every such span, at every
+// width, the two properties that let it give.
+
+import (
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+)
+
+// listTitleSelector is the selector the stylesheet must carry, and the
+// declarations it must give. `overflow-wrap:anywhere` rather than `break-word`
+// because only `anywhere` lowers the element's min-content width; `min-width:0`
+// because a grid item's automatic minimum is that min-content width.
+const listTitleSelector = ".list li>span:not(.id)"
+
+var listTitleDecls = []string{"overflow-wrap:anywhere", "min-width:0"}
+
+// TestAListTitleWithAnUnbreakableTokenIsAWrappingSpan renders the dashboard's
+// latest decisions with a title that is one 157-character token and holds that
+// it lands where the stylesheet's wrapping rule reaches it.
+func TestAListTitleWithAnUnbreakableTokenIsAWrappingSpan(t *testing.T) {
+	token := "~/.abcd.noindex/transcripts/" + strings.Repeat("0123456789abcdef", 8) + "/"
+	e := &explorer{c: &composer{}, export: RecordExport{Nodes: []ExportNode{
+		{ID: "adr-7", Type: "adr", Date: "2026-10-03", Title: token},
+	}}}
+	got := e.latestDecisions()
+	want := `<li><span class="id"><a href="/record/adr/adr-7/">adr-7</a><span class="d">2026-10-03</span></span>` +
+		`<span>` + escapeText(token) + `</span></li>`
+	if !strings.Contains(got, `<ul class="list">`) || !strings.Contains(got, want) {
+		t.Fatalf("the title is not a bare span directly under a .list row:\nwant %s\nin   %s", want, got)
+	}
+}
+
+// TestTheStylesheetLetsAListTitleGive holds the rule in abcd's own stylesheet
+// and in the copy setup seeds a managed repository with, at the top level so it
+// applies at every width rather than inside one media query.
+func TestTheStylesheetLetsAListTitleGive(t *testing.T) {
+	own, err := os.ReadFile(filepath.Join("..", "..", "..", "site-src", "site.css"))
+	if err != nil {
+		t.Fatal(err)
+	}
+	seed, err := setupSources.ReadFile("setupsrc/site.css")
+	if err != nil {
+		t.Fatal(err)
+	}
+	for name, src := range map[string]string{"site-src/site.css": string(own), "setupsrc/site.css": string(seed)} {
+		body, ok := topLevelRules(src)[listTitleSelector]
+		if !ok {
+			t.Errorf("%s has no top-level rule for %s: a long title in a .list row widens the page", name, listTitleSelector)
+			continue
+		}
+		decls := strings.ReplaceAll(body, " ", "")
+		for _, d := range listTitleDecls {
+			if !strings.Contains(decls, d) {
+				t.Errorf("%s gives %s no %s (body %q)", name, listTitleSelector, d, body)
+			}
+		}
+	}
+}
+
+// topLevelRules maps each selector of every top-level rule to its declaration
+// block, concatenated where one selector has several rules. At-rules are
+// skipped whole: a rule inside a media query holds at one width, not at all of
+// them.
+func topLevelRules(src string) map[string]string {
+	src = cssCommentRe.ReplaceAllString(src, " ")
+	out := map[string]string{}
+	for i := 0; i < len(src); {
+		open := strings.IndexByte(src[i:], '{')
+		if open < 0 {
+			break
+		}
+		open += i
+		selectors := strings.TrimSpace(src[i:open])
+		end := matchBrace(src, open)
+		if end < 0 {
+			break
+		}
+		if !strings.HasPrefix(selectors, "@") {
+			for _, sel := range strings.Split(selectors, ",") {
+				sel = strings.TrimSpace(sel)
+				out[sel] += src[open+1:end] + ";"
+			}
+		}
+		i = end + 1
+	}
+	return out
+}
diff --git a/internal/core/site/setupsrc/site.css b/internal/core/site/setupsrc/site.css
index c0135be58..0473b5126 100644
--- a/internal/core/site/setupsrc/site.css
+++ b/internal/core/site/setupsrc/site.css
@@ -381,6 +381,13 @@ a.tile.lead:hover,a.tile.lead:focus-visible{background:var(--accent-soft);border
 .list li:last-child{border-bottom:0}
 .list .id{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);white-space:nowrap}
 .list .d{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-3);margin-left:6px}
+/* A row is a grid, and a grid item's automatic minimum width is its
+   min-content width: a title holding one long unspaced token (a quoted path)
+   would set the width of the row and scroll the page sideways on a phone. Only
+   `anywhere` also lowers min-content, and `min-width:0` drops the automatic
+   minimum, so the title column gives whatever the record calls itself. The id
+   keeps its nowrap. */
+.list li>span:not(.id){overflow-wrap:anywhere;min-width:0}
 .health{font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.6}
 .health .w{color:var(--hazard-ink);background:var(--hazard-soft);padding:0 .3em;border-radius:3px}
 .health .hsum{margin-top:8px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 14px}
diff --git a/site-src/site.css b/site-src/site.css
index c0135be58..0473b5126 100644
--- a/site-src/site.css
+++ b/site-src/site.css
@@ -381,6 +381,13 @@ a.tile.lead:hover,a.tile.lead:focus-visible{background:var(--accent-soft);border
 .list li:last-child{border-bottom:0}
 .list .id{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);white-space:nowrap}
 .list .d{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-3);margin-left:6px}
+/* A row is a grid, and a grid item's automatic minimum width is its
+   min-content width: a title holding one long unspaced token (a quoted path)
+   would set the width of the row and scroll the page sideways on a phone. Only
+   `anywhere` also lowers min-content, and `min-width:0` drops the automatic
+   minimum, so the title column gives whatever the record calls itself. The id
+   keeps its nowrap. */
+.list li>span:not(.id){overflow-wrap:anywhere;min-width:0}
 .health{font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.6}
 .health .w{color:var(--hazard-ink);background:var(--hazard-soft);padding:0 .3em;border-radius:3px}
 .health .hsum{margin-top:8px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 14px}

From ef737669145152576f6774a353b5de1c7f547468 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:41:14 +0100
Subject: [PATCH 04/13] chore: capture the overflow audit naming the wrong
 culprits

Its culprit list counts elements inside their own scroll containers, so on
/record/ it named the sub-navigation links and the timeline svg rather than
the title span that widened the page, and it is silent on a text run.

Refs: iss-2610040741103264
Assisted-by: Claude:claude-opus-5-5
---
 ...-audit-names-the-wrong-culprits-when-a-page.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md

diff --git a/.abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md b/.abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
new file mode 100644
index 000000000..d2bf86d76
--- /dev/null
+++ b/.abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
@@ -0,0 +1,15 @@
+---
+schema_version: 1
+id: "iss-2610040741103264"
+slug: "the-overflow-audit-names-the-wrong-culprits-when-a-page"
+severity: "minor"
+category: "bug"
+source: "agent-finding"
+found_during: "site-screenshots failing on every PR since 2026-10-03 23:37Z"
+origin: researcher-authored
+production_mode: hand-written
+found_at: "site-src/audit/overflow-audit.js"
+remedy: "In measure(), skip any element with an ancestor whose computed overflow-x is not visible (its overflow is contained there and cannot widen the document), and also walk text nodes, measuring each with a Range, naming the parent element of any unclipped text run past the edge. Grounds: CSS Overflow Module Level 3 makes a box whose overflow-x is not visible a scroll container, and content inside it contributes to that container's scrollable overflow rather than to its ancestors'; a local probe that applies exactly this filter named the real span on /record/ and the h1 text on the ADR page."
+---
+
+The overflow audit names the wrong culprits when a page scrolls sideways. measure() in site-src/audit/overflow-audit.js lists the first five elements whose box passes the viewport edge, including elements inside their own scrolling container (overflow-x auto, scroll or hidden), which cannot widen the page. On /record/ at 360 px it named the four sub-navigation links and the genealogy svg, both inside their own scroll containers, and never the Latest decisions title span that set scrollWidth 482, which sent the bisect after the timeline renderer. It also reports nothing when the overflow is a text run rather than an element box, as on a record page whose h1 holds a long unbroken path.

From cdf1def6a8f8b7426f8b9a80e1607f27b341d1fd Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:41:23 +0100
Subject: [PATCH 05/13] fix(site): break an overflowing token in any block, and
 audit the worst case

Record pages scrolled sideways at 360 px wherever a record's title or
source path held a long unbroken run: a timestamp-id ADR's path in the
side panel (about fifty characters to its first hyphen), and the two
newest ADR titles, which quote a home-relative path, in the page heading.
An issue page measured scrollWidth 1569 even at 1360 px.

body now carries overflow-wrap:break-word, inherited by every block. It
breaks a token only where a line would otherwise overflow, and unlike
anywhere it leaves min-content sizing alone, so tables, grids and flex
rows lay out as before. A Go test holds the rule at the top level of
both stylesheets.

The overflow audit sampled only the lowest-numbered record of each type,
whose path and title are short, so it never saw these pages. It now also
samples, per type, the record whose title or source path holds the
longest run without a space or hyphen; against the unfixed site that
sample fails at 360 px for an ADR and at every width for an issue.

Refs: iss-2610040732240935
Assisted-by: Claude:claude-opus-5-5
---
 internal/core/site/blockwrap_test.go | 40 ++++++++++++++++++++++++++++
 internal/core/site/setupsrc/site.css |  8 +++++-
 site-src/audit/overflow-audit.js     | 36 +++++++++++++++++++++----
 site-src/site.css                    |  8 +++++-
 4 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 internal/core/site/blockwrap_test.go

diff --git a/internal/core/site/blockwrap_test.go b/internal/core/site/blockwrap_test.go
new file mode 100644
index 000000000..938997ee7
--- /dev/null
+++ b/internal/core/site/blockwrap_test.go
@@ -0,0 +1,40 @@
+package site
+
+// No block of text widens the page, whatever token it carries.
+//
+// A record's title and its source path are the record's own words, and some of
+// them hold a long run with nowhere to break: a timestamp-id ADR's path is about
+// fifty characters to its first hyphen, and a title can quote a home-relative
+// path. Given nowhere to break, the token sets the width of its block and the
+// page scrolls sideways on a phone (iss-2610040732240935). The net is one rule on
+// `body`: `overflow-wrap:break-word` is inherited by every block, breaks a token
+// only where the line would otherwise overflow, and — unlike `anywhere` — leaves
+// min-content sizing alone, so tables, grids and flex rows lay out as before.
+
+import (
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+)
+
+// TestTheStylesheetBreaksAnOverflowingTokenInEveryBlock holds the net in abcd's
+// own stylesheet and in the copy setup seeds a managed repository with, at the
+// top level so it applies at every width.
+func TestTheStylesheetBreaksAnOverflowingTokenInEveryBlock(t *testing.T) {
+	own, err := os.ReadFile(filepath.Join("..", "..", "..", "site-src", "site.css"))
+	if err != nil {
+		t.Fatal(err)
+	}
+	seed, err := setupSources.ReadFile("setupsrc/site.css")
+	if err != nil {
+		t.Fatal(err)
+	}
+	for name, src := range map[string]string{"site-src/site.css": string(own), "setupsrc/site.css": string(seed)} {
+		body := strings.ReplaceAll(topLevelRules(src)["body"], " ", "")
+		if !strings.Contains(body, "overflow-wrap:break-word") {
+			t.Errorf("%s gives body no overflow-wrap:break-word: a title or path with nowhere to break widens the page (body %q)",
+				name, body)
+		}
+	}
+}
diff --git a/internal/core/site/setupsrc/site.css b/internal/core/site/setupsrc/site.css
index 0473b5126..17c0258c3 100644
--- a/internal/core/site/setupsrc/site.css
+++ b/internal/core/site/setupsrc/site.css
@@ -64,7 +64,13 @@
 /* ---------- base ---------- */
 *{box-sizing:border-box}
 html{-webkit-text-size-adjust:100%}
-body{margin:0;background:var(--ground);color:var(--ink);font-family:"Newsreader",Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;font-optical-sizing:auto}
+/* overflow-wrap is the net under every block of text: a record's title or
+   source path can hold a run with nowhere to break (a timestamp-id path, a
+   quoted path), and given nowhere to break it widens the page. `break-word`
+   breaks only where a line would otherwise overflow and, unlike `anywhere`,
+   leaves min-content alone, so tables, grids and flex rows lay out as before;
+   a grid or flex item that needs to give says so itself (`.list`, `.links`). */
+body{margin:0;background:var(--ground);color:var(--ink);font-family:"Newsreader",Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;font-optical-sizing:auto;overflow-wrap:break-word}
 a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.15em}
 a:hover{text-decoration-thickness:2px}
 :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
diff --git a/site-src/audit/overflow-audit.js b/site-src/audit/overflow-audit.js
index c70bc5e93..002ded7a7 100644
--- a/site-src/audit/overflow-audit.js
+++ b/site-src/audit/overflow-audit.js
@@ -66,7 +66,8 @@ const ROUTE_FAMILIES = [
   '/references/',
 ];
 
-// One representative page per record type that has its own page shape.
+// The record types whose pages have their own shape; discoverRecordRoutes
+// samples two pages of each.
 const SAMPLED_TYPES = ['adr', 'intent', 'issue'];
 
 function slug(route) {
@@ -74,10 +75,25 @@ function slug(route) {
   return s === '' ? 'index' : s;
 }
 
-// discoverRecordRoutes reads the record export the build emits and picks the
-// lowest-numbered record of each sampled type. Lowest-numbered, not random: the
-// audit must compare like with like from run to run, or a screenshot diff is
-// noise.
+// longestRun is the longest stretch of a string with no space and no hyphen in
+// it: the longest token a browser has no ordinary place to break.
+function longestRun(s) {
+  let best = 0;
+  for (const part of String(s || '').split(/[\s-]+/)) {
+    if (part.length > best) best = part.length;
+  }
+  return best;
+}
+
+// discoverRecordRoutes reads the record export the build emits and picks two
+// records of each sampled type: the lowest-numbered, and the one whose title or
+// source path holds the longest unbroken token (ties to the lower number). The
+// lowest-numbered record is the oldest and plainest; the second is the worst
+// case for wrapping, which the oldest record never is — a timestamp-id record's
+// path and a title quoting a path both widened record pages that the first
+// sample alone could not see (iss-2610040732240935). Deterministic, not random:
+// the audit must compare like with like from run to run, or a screenshot diff
+// is noise.
 async function discoverRecordRoutes(page, baseUrl) {
   const res = await page.request.get(`${baseUrl}/record.json`);
   if (!res.ok()) {
@@ -98,6 +114,16 @@ async function discoverRecordRoutes(page, baseUrl) {
       throw new Error(`record.json holds no node of type '${type}'; the audit cannot sample one`);
     }
     routes.push(`/record/${type}/${of[0].id}/`);
+    let widest = of[0];
+    let widestRun = Math.max(longestRun(widest.title), longestRun(widest.path));
+    for (const n of of) {
+      const run = Math.max(longestRun(n.title), longestRun(n.path));
+      if (run > widestRun) {
+        widest = n;
+        widestRun = run;
+      }
+    }
+    if (widest !== of[0]) routes.push(`/record/${type}/${widest.id}/`);
   }
   return routes;
 }
diff --git a/site-src/site.css b/site-src/site.css
index 0473b5126..17c0258c3 100644
--- a/site-src/site.css
+++ b/site-src/site.css
@@ -64,7 +64,13 @@
 /* ---------- base ---------- */
 *{box-sizing:border-box}
 html{-webkit-text-size-adjust:100%}
-body{margin:0;background:var(--ground);color:var(--ink);font-family:"Newsreader",Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;font-optical-sizing:auto}
+/* overflow-wrap is the net under every block of text: a record's title or
+   source path can hold a run with nowhere to break (a timestamp-id path, a
+   quoted path), and given nowhere to break it widens the page. `break-word`
+   breaks only where a line would otherwise overflow and, unlike `anywhere`,
+   leaves min-content alone, so tables, grids and flex rows lay out as before;
+   a grid or flex item that needs to give says so itself (`.list`, `.links`). */
+body{margin:0;background:var(--ground);color:var(--ink);font-family:"Newsreader",Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;font-optical-sizing:auto;overflow-wrap:break-word}
 a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.15em}
 a:hover{text-decoration-thickness:2px}
 :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

From b89a52d71b176064ba9b72ac97a5fede32f23f16 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:44:12 +0100
Subject: [PATCH 06/13] fix(site): name only what can widen the page in the
 overflow audit

The audit's culprit list counted elements inside their own scroll
containers. On /record/ it named the sub-navigation links and the
genealogy svg, which scroll in their own windows, and never the title
span that set scrollWidth 482, so the bisect went after the timeline
renderer. It skips any element or text run whose ancestor has a
non-visible overflow-x, and it measures text runs by their Range, so a
heading whose words cannot break is named rather than reported bare.

Against the unfixed site it names the .list title span on /record/, the
source-path span on a timestamp-id ADR page and the h1 text of an issue
page; against the fixed site it passes all 104 renderings.

Refs: iss-2610040741103264
Assisted-by: Claude:claude-opus-5-5
---
 site-src/audit/overflow-audit.js | 39 ++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/site-src/audit/overflow-audit.js b/site-src/audit/overflow-audit.js
index 002ded7a7..b0a3406e2 100644
--- a/site-src/audit/overflow-audit.js
+++ b/site-src/audit/overflow-audit.js
@@ -131,25 +131,50 @@ async function discoverRecordRoutes(page, baseUrl) {
 // measure returns the widest overflow on the laid-out page, and names what
 // caused it. A bare "this page overflows" sends someone hunting; an element and
 // its class is a place to look.
+//
+// Only what can widen the DOCUMENT is named. Anything inside a scroll container
+// (an ancestor whose overflow-x is not visible) overflows that container, not
+// the page, so a chart panning in its own window or a nav bar scrolling in its
+// own strip is never a culprit; naming them sent a bisect after the wrong
+// renderer once (iss-2610040741103264). A text run is measured too, by its
+// Range, because a heading whose words have nowhere to break overflows without
+// any element box passing the edge; it is named by its parent element.
 async function measure(page, viewportWidth, tolerance) {
   return page.evaluate(
     ({ width, tol }) => {
       const de = document.documentElement;
       const culprits = [];
+      const contained = (node) => {
+        for (let a = node.parentElement; a && a !== de && a !== document.body; a = a.parentElement) {
+          if (getComputedStyle(a).overflowX !== 'visible') return true;
+        }
+        return false;
+      };
+      const passes = (r) => r.right > width + tol || r.left < -tol;
+      const name = (el, text) => ({
+        tag: el.tagName.toLowerCase() + (text ? ' text' : ''),
+        cls: String(el.getAttribute('class') || '').slice(0, 60),
+      });
       if (de.scrollWidth > width + tol) {
         for (const el of document.querySelectorAll('body *')) {
           const r = el.getBoundingClientRect();
           if (r.width === 0 && r.height === 0) continue;
-          if (r.right > width + tol || r.left < -tol) {
-            culprits.push({
-              tag: el.tagName.toLowerCase(),
-              cls: String(el.className || '').slice(0, 60),
-              left: Math.round(r.left),
-              right: Math.round(r.right),
-            });
+          if (passes(r) && !contained(el)) {
+            culprits.push({ ...name(el, false), left: Math.round(r.left), right: Math.round(r.right) });
             if (culprits.length >= 5) break;
           }
         }
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+        for (let t = walker.nextNode(); t && culprits.length < 8; t = walker.nextNode()) {
+          if (!t.textContent.trim() || !t.parentElement) continue;
+          const range = document.createRange();
+          range.selectNodeContents(t);
+          const r = range.getBoundingClientRect();
+          if (r.width === 0) continue;
+          if (passes(r) && !contained(t)) {
+            culprits.push({ ...name(t.parentElement, true), left: Math.round(r.left), right: Math.round(r.right) });
+          }
+        }
       }
       return { scrollWidth: de.scrollWidth, clientWidth: de.clientWidth, culprits };
     },

From e918a8b74112e28c1a7afca3a86a4e58684d7b19 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:44:28 +0100
Subject: [PATCH 07/13] =?UTF-8?q?chore:=20resolve=20iss-2610040729344770?=
 =?UTF-8?q?=20=E2=80=94=20.list=20titles=20wrap=20on=20a=20phone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves: iss-2610040729344770
Assisted-by: Claude:claude-opus-5-5
---
 ...rd-dashboard-record-scrolls-sideways-at-360-and-390.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 rename .abcd/work/issues/{open => resolved}/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md (72%)

diff --git a/.abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md b/.abcd/work/issues/resolved/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
similarity index 72%
rename from .abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
rename to .abcd/work/issues/resolved/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
index 077318754..07ff5c307 100644
--- a/.abcd/work/issues/open/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
+++ b/.abcd/work/issues/resolved/iss-2610040729344770-the-record-dashboard-record-scrolls-sideways-at-360-and-390.md
@@ -10,6 +10,14 @@ origin: researcher-authored
 production_mode: hand-written
 found_at: "site-src/site.css"
 remedy: "Give the non-id spans of a .list row the treatment .links li>span already has: .list li>span:not(.id){overflow-wrap:anywhere;min-width:0} in site-src/site.css and its seeded copy internal/core/site/setupsrc/site.css, the id column keeping white-space:nowrap. Grounds: overflow-wrap:anywhere, unlike break-word, lowers the element's min-content width (CSS Text Module Level 3, overflow-wrap), and min-width:0 removes the grid item's content-based automatic minimum (CSS Grid Layout Level 1, section 6.6), so the 1fr track gives whatever title arrives; the stylesheet's own comment above .refs li records the same reasoning for bibliography addresses. A Go test pins the rule and the row markup it matches; the overflow audit proves it in a browser at 360/390/768/1360 px."
+resolution: "Fixed by giving the non-id spans of a .list row overflow-wrap:anywhere and min-width:0, at the top level of site-src/site.css and its seeded copy. The genealogy timeline was not the cause: its svg sits in its own overflow-x:auto panel. Local overflow audit at base: /record/ fails at 360 and 390 px in both schemes (scrollWidth 482); after the fix it passes every route at all four widths in both schemes, every fold open included."
+impact: fix
+resolved_by:
+  commit: "e90a2a4a0"
 ---
 
 The record dashboard (/record/) scrolls sideways at 360 and 390 px: the site-screenshots job measures scrollWidth 476 to 482 there on every pull request since 2026-10-03 23:37Z. The cause is not the genealogy timeline, whose svg sits inside its own overflow-x:auto panel and cannot widen the page, and not the four sub-navigation links the job names first, which scroll inside their own bar; it is the Latest decisions panel. A .list row is a two-column grid (auto 1fr) whose title is a plain span, and a grid item's automatic minimum width is its min-content width, so a title holding one long unspaced token sets the width of the row, which spills past the panel and the page. The two ADRs from #795 (adr-2610031751065746 and adr-2610031751066232) carry such titles, a home-relative path with no break in it, and became the two newest decisions on 2026-10-03. Every .list on the site (dashboard decisions, health, status, development, supersessions) has the same shape, so any record whose title holds a long token reproduces it.
+
+## Grounds
+
+- pursued: no .list row on any page widens the page at 360 px whatever its title holds; a site-screenshots run on this pull request that still reports /record/, /record/health/ or /record/development/ overflowing, or a .list title rendered outside a non-id span directly under its row, would show it wrong.

From 4c9db08e19f2af01fa90fce77f25b70e478b91f0 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:44:37 +0100
Subject: [PATCH 08/13] =?UTF-8?q?chore:=20resolve=20iss-2610040732240935?=
 =?UTF-8?q?=20=E2=80=94=20record=20pages=20break=20an=20unbroken=20token?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves: iss-2610040732240935
Assisted-by: Claude:claude-opus-5-5
---
 ...pages-scroll-sideways-at-360-px-whenever-a-record-s.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 rename .abcd/work/issues/{open => resolved}/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md (70%)

diff --git a/.abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md b/.abcd/work/issues/resolved/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
similarity index 70%
rename from .abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
rename to .abcd/work/issues/resolved/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
index e387d19c7..f0a0d6dac 100644
--- a/.abcd/work/issues/open/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
+++ b/.abcd/work/issues/resolved/iss-2610040732240935-record-pages-scroll-sideways-at-360-px-whenever-a-record-s.md
@@ -10,6 +10,14 @@ origin: researcher-authored
 production_mode: hand-written
 found_at: "site-src/site.css"
 remedy: "Set overflow-wrap:break-word on body in site-src/site.css and its seeded copy internal/core/site/setupsrc/site.css, as a net under every block of text: it breaks a token only where the line would otherwise overflow and, unlike anywhere, leaves min-content sizing alone, so tables, grids and flex rows lay out as before (CSS Text Module Level 3, overflow-wrap). Make the overflow audit also sample, per type, the record whose title or source path holds the longest run without a space or hyphen, so the worst case for wrapping is measured on every pull request rather than the shortest. A Go test pins the body rule; the audit run proves it in a browser."
+resolution: "Fixed by overflow-wrap:break-word on body in site-src/site.css and its seeded copy, and by the overflow audit also sampling, per type, the record whose title or source path holds the longest run without a space or hyphen. Against the unfixed site that sample fails /record/adr/adr-2609021016270132/ at 360 px and /record/issue/iss-2609012039114437/ at every width up to 1360 px (scrollWidth 1569); after the fix all 104 renderings pass, and adr-2609091248200336 and the two quoting ADRs measure 360 at 360 px."
+impact: fix
+resolved_by:
+  commit: "cdf1def6a"
 ---
 
 Record pages scroll sideways at 360 px whenever a record's title or source path holds a long unbroken token, and the overflow audit cannot see it. Every ADR minted with a timestamp id shows its source path, .abcd/development/decisions/adrs/<16 digits>-<slug>.md, as one mono span in the side panel's reclinks paragraph, and the run up to the first hyphen is about fifty characters with no break opportunity: /record/adr/adr-2609091248200336/ measures scrollWidth 374 at 360 px. adr-2610031751065746 and adr-2610031751066232 also carry a home-relative path in their titles, which overflows the record page's h1 (scrollWidth 455). The stylesheet sets no overflow-wrap on body, the title or reclinks, so a block whose text has nowhere to break widens the page. The site-screenshots audit samples only the lowest-numbered record of each type (adr-1, itd-1, iss-1), whose paths and titles are short, so these pages have overflowed since timestamp ADRs began without the job noticing.
+
+## Grounds
+
+- pursued: no record page widens the page because a title or source path has nowhere to break; a site-screenshots run that reports a record page overflowing on a text run, or a later stylesheet that drops the body rule (the Go test refuses it), would show it wrong.

From f3719b3b3784b886242d73f8e00925e9787ea7d8 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:44:44 +0100
Subject: [PATCH 09/13] =?UTF-8?q?chore:=20resolve=20iss-2610040741103264?=
 =?UTF-8?q?=20=E2=80=94=20the=20overflow=20audit=20names=20real=20culprits?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolves: iss-2610040741103264
Assisted-by: Claude:claude-opus-5-5
---
 ...overflow-audit-names-the-wrong-culprits-when-a-page.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 rename .abcd/work/issues/{open => resolved}/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md (71%)

diff --git a/.abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md b/.abcd/work/issues/resolved/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
similarity index 71%
rename from .abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
rename to .abcd/work/issues/resolved/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
index d2bf86d76..a923801fc 100644
--- a/.abcd/work/issues/open/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
+++ b/.abcd/work/issues/resolved/iss-2610040741103264-the-overflow-audit-names-the-wrong-culprits-when-a-page.md
@@ -10,6 +10,14 @@ origin: researcher-authored
 production_mode: hand-written
 found_at: "site-src/audit/overflow-audit.js"
 remedy: "In measure(), skip any element with an ancestor whose computed overflow-x is not visible (its overflow is contained there and cannot widen the document), and also walk text nodes, measuring each with a Range, naming the parent element of any unclipped text run past the edge. Grounds: CSS Overflow Module Level 3 makes a box whose overflow-x is not visible a scroll container, and content inside it contributes to that container's scrollable overflow rather than to its ancestors'; a local probe that applies exactly this filter named the real span on /record/ and the h1 text on the ADR page."
+resolution: "Fixed in measure(): an element or text run inside an ancestor whose overflow-x is not visible is skipped, and text runs are measured by their Range and named by their parent element. Against the unfixed site the audit names the .list title span on /record/, the mono source-path span on a timestamp-id ADR page and the h1 text on an issue page, and no sub-navigation link or timeline svg."
+impact: fix
+resolved_by:
+  commit: "b89a52d71"
 ---
 
 The overflow audit names the wrong culprits when a page scrolls sideways. measure() in site-src/audit/overflow-audit.js lists the first five elements whose box passes the viewport edge, including elements inside their own scrolling container (overflow-x auto, scroll or hidden), which cannot widen the page. On /record/ at 360 px it named the four sub-navigation links and the genealogy svg, both inside their own scroll containers, and never the Latest decisions title span that set scrollWidth 482, which sent the bisect after the timeline renderer. It also reports nothing when the overflow is a text run rather than an element box, as on a record page whose h1 holds a long unbroken path.
+
+## Grounds
+
+- pursued: every culprit the audit names can widen the document; a failing run whose culprits include an element inside a scroll container, or a text-run overflow reported with no culprit, would show it wrong.

From 4a1e434fd1fe269651b581a81772f922b2e9192a Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 08:45:02 +0100
Subject: [PATCH 10/13] chore: capture the screenshots workflow's falsified
 path-filter premise

A record-only pull request moved the /record/ layout and was not audited;
the fix waits on a ruling on audit cost.

Refs: iss-2610040744587676
Assisted-by: Claude:claude-opus-5-5
---
 ...reenshots-workflow-s-path-filter-rests-on-a.md | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 .abcd/work/issues/open/iss-2610040744587676-the-site-screenshots-workflow-s-path-filter-rests-on-a.md

diff --git a/.abcd/work/issues/open/iss-2610040744587676-the-site-screenshots-workflow-s-path-filter-rests-on-a.md b/.abcd/work/issues/open/iss-2610040744587676-the-site-screenshots-workflow-s-path-filter-rests-on-a.md
new file mode 100644
index 000000000..975f7bfe5
--- /dev/null
+++ b/.abcd/work/issues/open/iss-2610040744587676-the-site-screenshots-workflow-s-path-filter-rests-on-a.md
@@ -0,0 +1,15 @@
+---
+schema_version: 1
+id: "iss-2610040744587676"
+slug: "the-site-screenshots-workflow-s-path-filter-rests-on-a"
+severity: "minor"
+category: "drift"
+source: "agent-finding"
+found_during: "site-screenshots failing on every PR since 2026-10-03 23:37Z"
+origin: researcher-authored
+production_mode: hand-written
+found_at: ".github/workflows/site-screenshots.yml"
+remedy: "Waits on a ruling on audit cost: either add the record stores (.abcd/development/** and .abcd/work/issues/**) to the pull_request paths so a record edit is audited on its own pull request, at the price of running the browser job on most pull requests, or keep the filter and rewrite the comment to state the residual honestly (a record edit can move layout; the wrapping nets in site.css bound the known class, and the next site-touching pull request is where anything else surfaces). Grounds: this incident, where the failure surfaced on pull requests that did not cause it."
+---
+
+The site-screenshots workflow's path filter rests on a premise this repository has falsified: its comment says a record edit under .abcd/ moves page content without moving the layout the audit measures, so record-only pull requests do not run the audit. #795 added two ADRs whose titles quote a path with no break in it, which moved the /record/ layout past 360 px; the audit did not run on #795 and first failed on the next pull request that touched site sources, an unrelated one, which then carried a red check it did not cause. The wrapping nets of iss-2610040729344770 and iss-2610040732240935 close the one class seen so far by construction, but the comment still states the premise as fact.

From 1510953da5673503cab89294cf055f27ae5a6c16 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 09:36:21 +0100
Subject: [PATCH 11/13] test(site): read the stylesheet the way the cascade
 does

The stylesheet tests keyed a rule by its selector as written and
concatenated every rule for one selector. A spaced combinator
(`.list li > span:not(.id)`) read as a different rule, and a weaker rule
further down the file still passed, because the stronger token was
somewhere in the concatenation while a browser applies the later value.

The helper now normalises selectors and values, keeps the last value of
each property, and also reads the rules inside each media query. A copy
of the stylesheet with a later `overflow-wrap:break-word` title rule and
`body{overflow-wrap:normal}` passes the old helper and fails the new one.

Refs: iss-2610040729344770
Assisted-by: Claude:claude-opus-5-5
---
 internal/core/site/blockwrap_test.go |  24 +---
 internal/core/site/listwrap_test.go  | 187 ++++++++++++++++++++++-----
 2 files changed, 163 insertions(+), 48 deletions(-)

diff --git a/internal/core/site/blockwrap_test.go b/internal/core/site/blockwrap_test.go
index 938997ee7..bdb005c20 100644
--- a/internal/core/site/blockwrap_test.go
+++ b/internal/core/site/blockwrap_test.go
@@ -11,30 +11,16 @@ package site
 // only where the line would otherwise overflow, and — unlike `anywhere` — leaves
 // min-content sizing alone, so tables, grids and flex rows lay out as before.
 
-import (
-	"os"
-	"path/filepath"
-	"strings"
-	"testing"
-)
+import "testing"
 
 // TestTheStylesheetBreaksAnOverflowingTokenInEveryBlock holds the net in abcd's
 // own stylesheet and in the copy setup seeds a managed repository with, at the
 // top level so it applies at every width.
 func TestTheStylesheetBreaksAnOverflowingTokenInEveryBlock(t *testing.T) {
-	own, err := os.ReadFile(filepath.Join("..", "..", "..", "site-src", "site.css"))
-	if err != nil {
-		t.Fatal(err)
-	}
-	seed, err := setupSources.ReadFile("setupsrc/site.css")
-	if err != nil {
-		t.Fatal(err)
-	}
-	for name, src := range map[string]string{"site-src/site.css": string(own), "setupsrc/site.css": string(seed)} {
-		body := strings.ReplaceAll(topLevelRules(src)["body"], " ", "")
-		if !strings.Contains(body, "overflow-wrap:break-word") {
-			t.Errorf("%s gives body no overflow-wrap:break-word: a title or path with nowhere to break widens the page (body %q)",
-				name, body)
+	for name, src := range bothStylesheets(t) {
+		if got := cascadeOf(src).top["body"]["overflow-wrap"].value; got != "break-word" {
+			t.Errorf("%s gives body overflow-wrap:%q, want break-word: a title or path with nowhere to break widens the page",
+				name, got)
 		}
 	}
 }
diff --git a/internal/core/site/listwrap_test.go b/internal/core/site/listwrap_test.go
index c8c721e20..a6387f456 100644
--- a/internal/core/site/listwrap_test.go
+++ b/internal/core/site/listwrap_test.go
@@ -25,7 +25,7 @@ import (
 // because a grid item's automatic minimum is that min-content width.
 const listTitleSelector = ".list li>span:not(.id)"
 
-var listTitleDecls = []string{"overflow-wrap:anywhere", "min-width:0"}
+var listTitleDecls = map[string]string{"overflow-wrap": "anywhere", "min-width": "0"}
 
 // TestAListTitleWithAnUnbreakableTokenIsAWrappingSpan renders the dashboard's
 // latest decisions with a title that is one 157-character token and holds that
@@ -47,6 +47,24 @@ func TestAListTitleWithAnUnbreakableTokenIsAWrappingSpan(t *testing.T) {
 // and in the copy setup seeds a managed repository with, at the top level so it
 // applies at every width rather than inside one media query.
 func TestTheStylesheetLetsAListTitleGive(t *testing.T) {
+	for name, src := range bothStylesheets(t) {
+		rule, ok := cascadeOf(src).top[listTitleSelector]
+		if !ok {
+			t.Errorf("%s has no top-level rule for %s: a long title in a .list row widens the page", name, listTitleSelector)
+			continue
+		}
+		for prop, want := range listTitleDecls {
+			if got := rule[prop].value; got != want {
+				t.Errorf("%s gives %s %s:%q, want %q", name, listTitleSelector, prop, got, want)
+			}
+		}
+	}
+}
+
+// bothStylesheets reads abcd's own stylesheet and the copy setup seeds a
+// managed repository with, keyed by a name for the failure message.
+func bothStylesheets(t *testing.T) map[string]string {
+	t.Helper()
 	own, err := os.ReadFile(filepath.Join("..", "..", "..", "site-src", "site.css"))
 	if err != nil {
 		t.Fatal(err)
@@ -55,46 +73,157 @@ func TestTheStylesheetLetsAListTitleGive(t *testing.T) {
 	if err != nil {
 		t.Fatal(err)
 	}
-	for name, src := range map[string]string{"site-src/site.css": string(own), "setupsrc/site.css": string(seed)} {
-		body, ok := topLevelRules(src)[listTitleSelector]
-		if !ok {
-			t.Errorf("%s has no top-level rule for %s: a long title in a .list row widens the page", name, listTitleSelector)
-			continue
+	return map[string]string{"site-src/site.css": string(own), "setupsrc/site.css": string(seed)}
+}
+
+// cssDecl is one property's value as the cascade leaves it within one rule
+// set, and the source offset of the rule that gave it, so a test can hold that
+// a narrow-screen override comes after the rule it overrides.
+type cssDecl struct {
+	value string
+	at    int
+}
+
+// cssRules maps a normalised selector to its properties. Where one selector
+// has several rules, the later declaration of a property wins, as it does in
+// the cascade: a weaker rule further down the file is the value a browser
+// uses, so it is the value a test sees.
+type cssRules map[string]map[string]cssDecl
+
+// cascade is a parsed stylesheet: the rules at the top level, which apply
+// at every width, and the rules inside each `@media` block, keyed by the
+// block's normalised prelude (`@media (max-width:520px)`). Other at-rules are
+// skipped whole.
+type cascade struct {
+	top   cssRules
+	media map[string]cssRules
+}
+
+// cascadeOf reads src into its top-level and media-query rules.
+func cascadeOf(src string) cascade {
+	src = cssCommentRe.ReplaceAllString(src, " ")
+	sh := cascade{top: cssRules{}, media: map[string]cssRules{}}
+	cascadeRules(src, 0, len(src), sh.top, func(prelude string, from, to int) {
+		if !strings.HasPrefix(prelude, "@media") {
+			return
 		}
-		decls := strings.ReplaceAll(body, " ", "")
-		for _, d := range listTitleDecls {
-			if !strings.Contains(decls, d) {
-				t.Errorf("%s gives %s no %s (body %q)", name, listTitleSelector, d, body)
-			}
+		key := normaliseSelector(prelude)
+		if sh.media[key] == nil {
+			sh.media[key] = cssRules{}
 		}
-	}
+		cascadeRules(src, from, to, sh.media[key], nil)
+	})
+	return sh
 }
 
-// topLevelRules maps each selector of every top-level rule to its declaration
-// block, concatenated where one selector has several rules. At-rules are
-// skipped whole: a rule inside a media query holds at one width, not at all of
-// them.
-func topLevelRules(src string) map[string]string {
-	src = cssCommentRe.ReplaceAllString(src, " ")
-	out := map[string]string{}
-	for i := 0; i < len(src); {
-		open := strings.IndexByte(src[i:], '{')
+// cascadeRules walks the rules in src[from:to] into into. An at-rule's block is
+// handed to atRule, or skipped when atRule is nil.
+func cascadeRules(src string, from, to int, into cssRules, atRule func(prelude string, from, to int)) {
+	for i := from; i < to; {
+		open := strings.IndexByte(src[i:to], '{')
 		if open < 0 {
-			break
+			return
 		}
 		open += i
-		selectors := strings.TrimSpace(src[i:open])
 		end := matchBrace(src, open)
-		if end < 0 {
-			break
+		if end < 0 || end > to {
+			return
+		}
+		prelude := strings.TrimSpace(src[i:open])
+		if strings.HasPrefix(prelude, "@") {
+			if atRule != nil {
+				atRule(prelude, open+1, end)
+			}
+			i = end + 1
+			continue
 		}
-		if !strings.HasPrefix(selectors, "@") {
-			for _, sel := range strings.Split(selectors, ",") {
-				sel = strings.TrimSpace(sel)
-				out[sel] += src[open+1:end] + ";"
+		decls := cascadeDecls(src[open+1:end], open)
+		for _, sel := range strings.Split(prelude, ",") {
+			sel = normaliseSelector(sel)
+			if into[sel] == nil {
+				into[sel] = map[string]cssDecl{}
+			}
+			for prop, d := range decls {
+				into[sel][prop] = d
 			}
 		}
 		i = end + 1
 	}
+}
+
+// cascadeDecls reads one declaration block; within it, too, the last
+// declaration of a property wins.
+func cascadeDecls(body string, at int) map[string]cssDecl {
+	out := map[string]cssDecl{}
+	for _, d := range strings.Split(body, ";") {
+		prop, value, ok := strings.Cut(d, ":")
+		if !ok {
+			continue
+		}
+		out[strings.ToLower(strings.TrimSpace(prop))] = cssDecl{value: normaliseValue(value), at: at}
+	}
 	return out
 }
+
+// normaliseSelector collapses whitespace and drops it around a combinator, so
+// `.list li > span:not( .id )` and `.list li>span:not(.id)` are one key. A
+// space before `:` or `(` stays: there it is a descendant combinator. The same
+// pass keys a media prelude (`@media (max-width: 520px)`).
+func normaliseSelector(sel string) string {
+	sel = strings.Join(strings.Fields(sel), " ")
+	for _, c := range []string{">", "+", "~"} {
+		sel = strings.ReplaceAll(sel, " "+c, c)
+		sel = strings.ReplaceAll(sel, c+" ", c)
+	}
+	for _, r := range []struct{ from, to string }{{"( ", "("}, {" )", ")"}, {": ", ":"}} {
+		sel = strings.ReplaceAll(sel, r.from, r.to)
+	}
+	return sel
+}
+
+// normaliseValue collapses whitespace and drops it inside parentheses and
+// after a comma, so `minmax(0, 1fr)` reads as `minmax(0,1fr)`.
+func normaliseValue(v string) string {
+	v = strings.Join(strings.Fields(v), " ")
+	for _, r := range []struct{ from, to string }{{"( ", "("}, {" )", ")"}, {" ,", ","}, {", ", ","}} {
+		v = strings.ReplaceAll(v, r.from, r.to)
+	}
+	return v
+}
+
+// TestTheCascadeHelperSeesWhatABrowserUses holds the helper the stylesheet
+// tests read through: a selector written with spaces around its combinator is
+// the same selector, a weaker rule further down the file is the value that
+// holds, and a rule inside a media query is not a top-level rule.
+func TestTheCascadeHelperSeesWhatABrowserUses(t *testing.T) {
+	src := `.list li>span:not(.id){overflow-wrap:anywhere;min-width:0}
+/* a later, weaker rule written with spaces */
+.list  li > span:not( .id ) { overflow-wrap : break-word }
+.list :hover{color:red}
+@media (max-width: 520px){.list li{grid-template-columns:minmax(0, 1fr)}}`
+	c := cascadeOf(src)
+	rule := c.top[listTitleSelector]
+	if got := rule["overflow-wrap"].value; got != "break-word" {
+		t.Errorf("overflow-wrap = %q, want the later rule's break-word", got)
+	}
+	if got := rule["min-width"].value; got != "0" {
+		t.Errorf("min-width = %q, want the earlier rule's 0 kept", got)
+	}
+	if _, ok := c.top[".list :hover"]; !ok {
+		t.Error("a descendant combinator before a pseudo-class was dropped")
+	}
+	if _, ok := c.top[".list li"]; ok {
+		t.Error("a rule inside a media query is read as a top-level rule")
+	}
+	if got := c.media["@media (max-width:520px)"][".list li"]["grid-template-columns"].value; got != "minmax(0,1fr)" {
+		t.Errorf("media rule grid-template-columns = %q (media keys %v)", got, mediaKeys(c))
+	}
+}
+
+func mediaKeys(c cascade) []string {
+	var keys []string
+	for k := range c.media {
+		keys = append(keys, k)
+	}
+	return keys
+}

From fc4616cc5344d92f966521daaa05e6b037312c6e Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 09:44:44 +0100
Subject: [PATCH 12/13] fix(site): stack a .list row on a phone and wrap its id
 span between ids

On a 360 px phone the id column of a .list row (a timestamp id and its
date, about 220 px) left the title a column 89 px wide on /record/, a few
words to a line, and on /record/health/ a supersession row's two ids and
arrow (314 px in a 322 px row) squeezed its title to 0 px and pushed it
2 px past the row.

Below 520 px a row is now one column: the id above, the title below at
the full width of the row (322 px at 360, 352 px at 390). 520 px is where
the dashboard's title column falls below about 240 px when two columns
share the row. The id span wraps at its spaces while each id link, stub
and date stays whole (`.list .id>*{white-space:nowrap}`), so a pair of
ids gives on a narrower screen instead of pushing the row.

Above 520 px nothing moves: every .list row and child rect on eight
routes, every fold open, is identical between the two builds at 521,
600, 768, 1024 and 1360 px. Both stylesheets stay byte-identical.

Refs: iss-2610040729344770
Assisted-by: Claude:claude-opus-5-5
---
 internal/core/site/liststack_test.go | 85 ++++++++++++++++++++++++++++
 internal/core/site/setupsrc/site.css | 13 ++++-
 site-src/site.css                    | 13 ++++-
 3 files changed, 105 insertions(+), 6 deletions(-)
 create mode 100644 internal/core/site/liststack_test.go

diff --git a/internal/core/site/liststack_test.go b/internal/core/site/liststack_test.go
new file mode 100644
index 000000000..f161dc481
--- /dev/null
+++ b/internal/core/site/liststack_test.go
@@ -0,0 +1,85 @@
+package site
+
+// A `.list` row stays readable on a phone.
+//
+// On a wide screen a row is two columns, the id and then the title. On a phone
+// the id column (a sixteen-digit timestamp id and its date, about 220 px) leaves
+// the title a column a few characters wide, so below the width where the two
+// columns stop fitting the row stacks: the id above, the title below at the full
+// width of the row. A sideways scroll is not the alternative; the page never
+// scrolls sideways (iss-2610040729344770).
+//
+// The id column wraps between ids and never inside one: a supersession row on
+// /record/health/ carries two timestamp ids and an arrow, wider than the row on
+// a 360 px phone, so the span gives at its spaces while each id link, the stub
+// and the date keep their nowrap.
+
+import (
+	"regexp"
+	"strconv"
+	"testing"
+)
+
+// listStackPhone and listStackTablet bound the stacking breakpoint: at or above
+// the wider of the two phone widths the overflow audit measures (390 px), and
+// below its tablet width (768 px), where a row keeps its two columns. The
+// measured value is 520 px, where the title column of the dashboard's latest
+// decisions falls below about 240 px.
+const (
+	listStackPhone  = 390
+	listStackTablet = 768
+)
+
+var maxWidthPrelude = regexp.MustCompile(`^@media \(max-width:(\d+)px\)$`)
+
+// TestAListRowStacksOnANarrowScreen holds both stylesheets to a wide row of two
+// columns at the top level and a single-column row under a max-width query
+// between the phone and tablet widths, placed after the rule it overrides.
+func TestAListRowStacksOnANarrowScreen(t *testing.T) {
+	for name, src := range bothStylesheets(t) {
+		c := cascadeOf(src)
+		wide, ok := c.top[".list li"]["grid-template-columns"]
+		if !ok || wide.value != "auto 1fr" {
+			t.Errorf("%s: a wide .list row is grid-template-columns:%q, want auto 1fr", name, wide.value)
+		}
+		var found bool
+		for prelude, rules := range c.media {
+			m := maxWidthPrelude.FindStringSubmatch(prelude)
+			if m == nil {
+				continue
+			}
+			px, _ := strconv.Atoi(m[1])
+			narrow, ok := rules[".list li"]["grid-template-columns"]
+			if !ok {
+				continue
+			}
+			found = true
+			if narrow.value != "minmax(0,1fr)" {
+				t.Errorf("%s: under %s a .list row is grid-template-columns:%q, want minmax(0,1fr)", name, prelude, narrow.value)
+			}
+			if px < listStackPhone || px >= listStackTablet {
+				t.Errorf("%s: a .list row stacks under %s, want a breakpoint in [%d,%d) px", name, prelude, listStackPhone, listStackTablet)
+			}
+			if narrow.at < wide.at {
+				t.Errorf("%s: the stacking rule under %s comes before the two-column rule, which overrides it", name, prelude)
+			}
+		}
+		if !found {
+			t.Errorf("%s: no max-width media query stacks a .list row: on a phone the title is a column a few characters wide", name)
+		}
+	}
+}
+
+// TestAListIdWrapsBetweenIdsNotInsideOne holds the id span to normal wrapping
+// and every element in it to nowrap, at the top level in both stylesheets.
+func TestAListIdWrapsBetweenIdsNotInsideOne(t *testing.T) {
+	for name, src := range bothStylesheets(t) {
+		c := cascadeOf(src)
+		if got := c.top[".list .id"]["white-space"].value; got != "normal" {
+			t.Errorf("%s: .list .id is white-space:%q, want normal: two ids and an arrow cannot wrap", name, got)
+		}
+		if got := c.top[".list .id>*"]["white-space"].value; got != "nowrap" {
+			t.Errorf("%s: .list .id>* is white-space:%q, want nowrap: an id breaks inside itself", name, got)
+		}
+	}
+}
diff --git a/internal/core/site/setupsrc/site.css b/internal/core/site/setupsrc/site.css
index 17c0258c3..0be8ae1d0 100644
--- a/internal/core/site/setupsrc/site.css
+++ b/internal/core/site/setupsrc/site.css
@@ -385,15 +385,22 @@ a.tile.lead:hover,a.tile.lead:focus-visible{background:var(--accent-soft);border
 .list{list-style:none;margin:0;padding:0;font-size:.92rem}
 .list li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);align-items:baseline}
 .list li:last-child{border-bottom:0}
-.list .id{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);white-space:nowrap}
+.list .id{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);white-space:normal}
+/* The id span wraps between ids and never inside one: a supersession row
+   carries two timestamp ids and an arrow, wider than the row on a phone, so it
+   gives at its spaces while each id link, stub and date stays whole. */
+.list .id>*{white-space:nowrap}
 .list .d{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-3);margin-left:6px}
 /* A row is a grid, and a grid item's automatic minimum width is its
    min-content width: a title holding one long unspaced token (a quoted path)
    would set the width of the row and scroll the page sideways on a phone. Only
    `anywhere` also lowers min-content, and `min-width:0` drops the automatic
-   minimum, so the title column gives whatever the record calls itself. The id
-   keeps its nowrap. */
+   minimum, so the title column gives whatever the record calls itself. */
 .list li>span:not(.id){overflow-wrap:anywhere;min-width:0}
+/* Below 520 px the id column (a timestamp id and its date, about 220 px)
+   would leave the title a column a few characters wide, so the row stacks:
+   the id above, the title below at the full width of the row. */
+@media (max-width:520px){.list li{grid-template-columns:minmax(0,1fr);row-gap:2px}}
 .health{font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.6}
 .health .w{color:var(--hazard-ink);background:var(--hazard-soft);padding:0 .3em;border-radius:3px}
 .health .hsum{margin-top:8px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 14px}
diff --git a/site-src/site.css b/site-src/site.css
index 17c0258c3..0be8ae1d0 100644
--- a/site-src/site.css
+++ b/site-src/site.css
@@ -385,15 +385,22 @@ a.tile.lead:hover,a.tile.lead:focus-visible{background:var(--accent-soft);border
 .list{list-style:none;margin:0;padding:0;font-size:.92rem}
 .list li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);align-items:baseline}
 .list li:last-child{border-bottom:0}
-.list .id{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);white-space:nowrap}
+.list .id{font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-2);white-space:normal}
+/* The id span wraps between ids and never inside one: a supersession row
+   carries two timestamp ids and an arrow, wider than the row on a phone, so it
+   gives at its spaces while each id link, stub and date stays whole. */
+.list .id>*{white-space:nowrap}
 .list .d{font-family:"IBM Plex Mono",monospace;font-size:.74rem;color:var(--ink-3);margin-left:6px}
 /* A row is a grid, and a grid item's automatic minimum width is its
    min-content width: a title holding one long unspaced token (a quoted path)
    would set the width of the row and scroll the page sideways on a phone. Only
    `anywhere` also lowers min-content, and `min-width:0` drops the automatic
-   minimum, so the title column gives whatever the record calls itself. The id
-   keeps its nowrap. */
+   minimum, so the title column gives whatever the record calls itself. */
 .list li>span:not(.id){overflow-wrap:anywhere;min-width:0}
+/* Below 520 px the id column (a timestamp id and its date, about 220 px)
+   would leave the title a column a few characters wide, so the row stacks:
+   the id above, the title below at the full width of the row. */
+@media (max-width:520px){.list li{grid-template-columns:minmax(0,1fr);row-gap:2px}}
 .health{font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.6}
 .health .w{color:var(--hazard-ink);background:var(--hazard-soft);padding:0 .3em;border-radius:3px}
 .health .hsum{margin-top:8px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 14px}

From 12faa7b6c38fa18533680c884321fc9c6a683043 Mon Sep 17 00:00:00 2001
From: REPPL <77722411+REPPL@users.noreply.github.com>
Date: Sun, 4 Oct 2026 09:44:45 +0100
Subject: [PATCH 13/13] test(site): name the overflow audit's sampling
 heuristic and naming limit

longestRun splits on spaces and hyphens only, while a browser also breaks
after some punctuation and never between a hyphen and a digit: the comment
now says it picks a likely worst case, and that pass or fail rests on
scrollWidth alone. The culprit walk skips anything with a clipping DOM
ancestor, so an absolutely positioned element whose containing block lies
outside that clip would widen the page unnamed; the page still fails, and
no page of the site has one today.

Refs: iss-2610040729344770
Assisted-by: Claude:claude-opus-5-5
---
 site-src/audit/overflow-audit.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/site-src/audit/overflow-audit.js b/site-src/audit/overflow-audit.js
index b0a3406e2..65236eb45 100644
--- a/site-src/audit/overflow-audit.js
+++ b/site-src/audit/overflow-audit.js
@@ -76,7 +76,11 @@ function slug(route) {
 }
 
 // longestRun is the longest stretch of a string with no space and no hyphen in
-// it: the longest token a browser has no ordinary place to break.
+// it: the longest token a browser has no ordinary place to break. It is a
+// heuristic for choosing a sample, not a model of line breaking: a browser also
+// breaks after some punctuation (a slash, in some engines) and never between a
+// hyphen and a digit, so the record it picks is a likely worst case, not a
+// proven one. Pass or fail never rests on it; that is the scrollWidth below.
 function longestRun(s) {
   let best = 0;
   for (const part of String(s || '').split(/[\s-]+/)) {
@@ -139,6 +143,13 @@ async function discoverRecordRoutes(page, baseUrl) {
 // renderer once (iss-2610040741103264). A text run is measured too, by its
 // Range, because a heading whose words have nowhere to break overflows without
 // any element box passing the edge; it is named by its parent element.
+//
+// A known limit of the naming, not of the verdict: an absolutely positioned
+// element whose containing block lies OUTSIDE the clipping ancestor escapes that
+// clip and can widen the page, yet `contained` reads only the DOM ancestors and
+// skips it. Such a page still fails on its scrollWidth; it is reported with the
+// culprit unnamed. No page of this site has one today (the board's cards sit in
+// a positioned stage).
 async function measure(page, viewportWidth, tolerance) {
   return page.evaluate(
     ({ width, tol }) => {