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.

components/answered-card.tsx

@@ -143,11 +143,16 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 
 			{(answer.thinking ?? answer.note) && (
 				/* The SAME unified row (owner round, 2026-10-05): the quiz answer's
-				    thinking is the identical collapsible ThinkingBlock — and since
-				    owner round three (2026-10-07) IDENTICALLY styled, band and all:
-				    collapsed thinking matches in height everywhere, card or chat
-				    (card-on-card is quiet by design; too light → revert). */
-				<ThinkingBlock testId="your-thinking" label="YOUR THINKING" text={answer.thinking ?? answer.note ?? ""} />
+				    thinking is the identical collapsible ThinkingBlock — one
+				    geometry, and since owner round four (2026-10-07) the band steps
+				    to accent on the card's surface (the same one-step lift the chat
+				    band gets). Collapsed thinking matches in height everywhere. */
+				<ThinkingBlock
+					testId="your-thinking"
+					label="YOUR THINKING"
+					text={answer.thinking ?? answer.note ?? ""}
+					inCard
+				/>
 			)}
 
 			{/* px-3→removed: card p-4 + box px-3 double-inset sat the "Why" label deeper

components/chat.tsx

@@ -1406,7 +1406,7 @@ export function Chat({
 										    inset (the band is the authorship mark against the agent's
 										    transparent prose). The "You" label stays — one register
 										    with the thinking labels. */
-										className="my-2 w-full border-l-[calc(3ch-5px)] border-muted-foreground/30 bg-card py-[5px] pl-[5px] pr-2 font-ui text-xs"
+										className="my-2 w-full border-l-[calc(3ch-8px)] border-muted-foreground/30 bg-card py-1 pl-[8px] pr-4 font-ui text-xs"
 									>
 												{/* The rail GROUPS (owner round 4, 2026-10-05): the YOU heading
 												    sits INSIDE the rail, same mono-xs register and same 1ch

components/thinking-block.tsx

@@ -23,13 +23,15 @@ import { cn } from "@/lib/utils";
  *  along the left edge. ONE geometry everywhere, in cards and out: the
  *  band padding is a tight 5px (round three: halved — subtle, not tall),
  *  and the left gap MATCHES it, so the rail fills the rest of the 3ch
- *  inset — border-l-[calc(3ch-5px)] pl-[5px]. Total inset stays 3ch (the
- *  chevron-alignment law with the agent's flush rows survives); the rail
- *  grows as the padding shrinks. In-card rows carry the identical
- *  styling (owner round three: same band, same heights — card-on-card is
- *  quiet by design; if it reads too light we revert). `defaultOpen`
- *  marks transcript rows, which arrive EXPANDED (clearly conveyed that
- *  the thinking was sent).
+ *  inset — total inset stays 3ch (the chevron-alignment law with the
+ *  agent's flush rows survives). Round four tunes the split: rail
+ *  thinner (gap 8px, rail calc(3ch-8px)), band padding down to 4px, and
+ *  pr-4 so the expanded text wraps EARLY — the band has a clear right
+ *  edge and text hugging it looks odd. In-card rows (on the card's own
+ *  background) take bg-accent — the same ONE-STEP lift the chat band
+ *  gets (background→card); card→accent (`inCard`). `defaultOpen` marks
+ *  transcript rows, which arrive EXPANDED (clearly conveyed that the
+ *  thinking was sent).
  *
  *  ⌘T (toggle-user-thinking) sets EVERY row to one state via the module
  *  store below — one source of truth, no provider tree: rows subscribe on
@@ -69,6 +71,7 @@ export function ThinkingBlock({
 	testId,
 	dataCommit,
 	defaultOpen = false,
+	inCard = false,
 }: {
 	label?: string;
 	text: string;
@@ -77,6 +80,8 @@ export function ThinkingBlock({
 	dataCommit?: boolean;
 	/** Transcript rows arrive expanded (owner, 2026-10-07). */
 	defaultOpen?: boolean;
+	/** On the card's own background: the band steps to accent (one lift). */
+	inCard?: boolean;
 }) {
 	const [open, setOpen] = useState(() => resolveUserThinkingOpen(defaultOpen));
 	// ⌘T: an explicit global set overrides every row (once set, rows re-sync).
@@ -100,12 +105,13 @@ export function ThinkingBlock({
 			data-testid={testId}
 			data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"}
 			className={cn(
-				// The rail geometry (owner round three, 2026-10-07): total inset
-				// STAYS 3ch (the chevron-alignment law with the agent's flush
-				// rows). The band padding is a tight 5px (halved from 10px) and
-				// the left gap MATCHES it — the rail fills the rest:
-				// calc(3ch-5px) wide. One geometry everywhere, cards included.
-				"lh-card-enter my-2 w-full border-l-[calc(3ch-5px)] border-muted-foreground/30 bg-card py-[5px] pl-[5px] font-ui text-xs",
+				// Round four (owner, 2026-10-07): total inset still 3ch (the
+				// chevron law); rail thinner (8px gap), padding 4px, and pr-4 —
+				// the text wraps EARLY, never hugging the band's right edge.
+				// In-card rows step the band to accent: the same one-step lift
+				// the chat band gets (background→card → card→accent).
+				"lh-card-enter my-2 w-full border-l-[calc(3ch-8px)] border-muted-foreground/30 py-1 pl-[8px] pr-4 font-ui text-xs",
+				inCard ? "bg-accent" : "bg-card",
 			)}
 		>
 			<button
@@ -113,7 +119,7 @@ export function ThinkingBlock({
 				data-testid={testId ? `${testId}-trigger` : undefined}
 				onClick={() => setOpen((v) => !v)}
 				aria-expanded={open}
-				className="flex w-full items-center gap-2 pr-2 font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
+				className="flex w-full items-center gap-2 font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
 			>
 				{label}
 				<ChevronDownIcon className={cn("size-4 shrink-0 transition-transform", open ? "rotate-180" : "rotate-0")} />