ui: round four — thinner rail, tighter band, the accent step, early wrap

Owner round four on the user rows: (1) the rail thins - the gap inside
the 3ch inset grows 5px -> 8px, so the rail is calc(3ch-8px); total
inset still 3ch, chevron law intact. (2) The band padding drops again,
5px -> 4px (py-1). (3) The in-card thinking band steps to bg-accent -
the same ONE-STEP lift the chat band gets (background->card on the page,
card->accent on the card); card-color on card-color was invisible, the
accent gives the card rows a visible band with identical heights. (4)
pr-4 on the band rows - the expanded text wraps EARLY instead of hugging
the band's clear right edge.

tests/render-cards.test.tsx

@@ -295,14 +295,14 @@ describe("render smoke tests", () => {
 		// trigger row only — the thinking text is one click away, never loud.
 		assert.ok(html.includes('data-testid="your-thinking-trigger"'), "the trigger row");
 		assert.ok(html.includes('aria-expanded="false"'), "arrives collapsed");
-		// IDENTICAL GEOMETRY (owner round three, 2026-10-07): the in-card row
-		// carries the band too — collapsed thinking matches in height
-		// everywhere, card or chat.
+		// ONE GEOMETRY + THE ACCENT STEP (owner round four, 2026-10-07): the
+		// in-card row carries the accent band — the same one-step lift the
+		// chat band gets; collapsed heights match everywhere.
 		const yourRow = html.slice(html.indexOf('data-testid="your-thinking"'));
-		assert.ok(yourRow.slice(0, 400).includes("bg-card"), "the band inside the card as well");
+		assert.ok(yourRow.slice(0, 400).includes("bg-accent"), "accent inside the card");
 		// THE RAIL GROUPS (owner correction): the label sits INSIDE the rail —
 		// ownership readable from the rail alone, collapsed or expanded.
-		const railAt = html.indexOf("border-l-[calc(3ch-5px)]");
+		const railAt = html.indexOf("border-l-[calc(3ch-8px)]");
 		const trigAt = html.indexOf("your-thinking-trigger");
 		assert.ok(railAt !== -1 && railAt < trigAt, "the rail opens before the label (same quote)");
 		assert.ok(!html.includes("brightness isn&#x27;t distance"), "the text is hidden until expanded");

tests/render-md-blocks.test.tsx

@@ -243,16 +243,23 @@ describe("md-blocks — the restored plain blockquote (owner round, 2026-10-07)"
 });
 
 describe("ThinkingBlock — the document band + ⌘T sync (owner rounds, 2026-10-07)", () => {
-	it("the row is the document band — one geometry, cards included (owner round three)", () => {
+	it("the row is the document band — round four geometry (owner, 2026-10-07)", () => {
 		const html = renderToStaticMarkup(<ThinkingBlock text="banded" defaultOpen />);
 		assert.ok(html.includes("bg-card"), "the card-color band");
-		assert.ok(html.includes("border-l-[calc(3ch-5px)]"), "the rail fills the 3ch inset");
-		assert.ok(html.includes("py-[5px]") && html.includes("pl-[5px]"), "tight 5px padding, gap matches it");
+		assert.ok(html.includes("border-l-[calc(3ch-8px)]"), "thinner rail — 8px gap inside the 3ch inset");
+		assert.ok(html.includes("py-1") && html.includes("pl-[8px]"), "4px band padding");
+		assert.ok(html.includes("pr-4"), "the text wraps early — air at the band's right edge");
 		assert.ok(html.includes("w-full"), "full width — no chat side");
 		assert.match(html, /aria-expanded="true"/);
 		assert.ok(html.includes("banded"), "text visible on arrival");
 	});
 
+	it("in-card rows step the band to accent — the same one-step lift (owner round four)", () => {
+		const html = renderToStaticMarkup(<ThinkingBlock text="in card" inCard />);
+		assert.ok(html.includes("bg-accent"), "accent on the card's surface");
+		assert.ok(!html.includes("bg-card"), "card-color would vanish on the card");
+	});
+
 	it("⌘T sets every row — explicit sets stomp individual state, late mounts honor the last set", () => {
 		setAllUserThinkingOpen(false);
 		const collapsed = renderToStaticMarkup(<ThinkingBlock text="synced" defaultOpen />);

tests/render-practice-surface.test.tsx

@@ -185,7 +185,7 @@ describe("the practice transcript cards", () => {
 		assert.match(trace, /aria-expanded="true"/);
 		assert.ok(trace.includes("stuck at step two"), "the text is visible on arrival");
 		assert.ok(trace.includes("bg-card"), "the card-color band");
-		assert.ok(trace.includes("border-l-[calc(3ch-5px)]"), "the rail fills the 3ch inset");
+		assert.ok(trace.includes("border-l-[calc(3ch-8px)]"), "thinner rail inside the 3ch inset");
 		const legacy = renderToStaticMarkup(<ThinkingCard data={{ problemCallId: "c", commit: true, text: "It is 42." }} />);
 		assert.match(legacy, /YOUR THINKING/);
 		assert.doesNotMatch(legacy, /Your solution/);