@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/styles/transcript.css

@@ -0,0 +1,1226 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE TRANSCRIPT — the locked record (protos/agent-history-proto/transcript),
+   ported to this app's tokens.
+
+   Rules prefixed `tr-` are the record's own, transcribed rather than
+   redesigned: it was written against these same `--vf-` names, so the port is
+   a transcription and any drift between the two is a bug in this file. Where
+   the record used an inline style (an anchor's offset, a chosen option's ink)
+   the rule is written here instead, marked WRITTEN, because a component
+   cannot carry a stylesheet's job.
+
+   The claim it draws: at rest the prompt is the only container, the reply is bare, the
+   machinery is a ledger you can read without opening, and hue is spent only on
+   what did not complete or is still happening.
+
+   Two neighbours own their own files and are NOT duplicated here:
+   `transcript-head.css` (§08's head line, receipt and top fade) and
+   `favicon.css` (a source's own icon).
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* The measure is a CONTAINER: the anchor's margin appears and disappears with
+   the rail, not with the window, so the query has to ask the column. */
+.tr-col { container-type: inline-size; container-name: measure; }
+/* The record is one vertical reading surface. Wide code and tables own their
+   local scrollports; the document itself must never acquire a sideways one.
+   Removing the room's 6px top inset lets the fade begin at the literal
+   scrollport edge; the pill keeps its own inset above that painted ground.
+   The same 6px stays in the document's resting headroom. */
+.tr-scroll { padding-top: 0; overflow-x: hidden; overscroll-behavior-y: contain; }
+/* Native anchoring holds a paused reader in place. While following, the
+   tail controller owns the position, including images and streamed text. */
+.tr-scroll[data-following] { overflow-anchor: none; }
+.tr-scroll:focus-visible { outline: 2px solid var(--vf-select); outline-offset: -2px; }
+.tr {
+  --tr-action-gap: 14px;
+  position: relative; max-width: 68ch; margin: 0 auto; padding: 28px 28px 30px;
+  font-size: 14px; line-height: 1.55; color: var(--vf-text-primary);
+}
+.tr p { margin: 0; }
+
+/* the turn — one human prompt and everything that answered it */
+.tr-turn { position: relative; }
+.tr-turn + .tr-turn { margin-top: 30px; }
+
+/* T-4 — every segment can be pointed at: the anchor lives in the margin when
+   the column has one, and on hover otherwise (decided Q3 A). */
+.tr-seg { position: relative; }
+.tr-seg + .tr-seg { margin-top: 12px; }
+.tr-anchor {
+  position: absolute; top: 3px; right: 100%; margin-right: 18px; padding: 0 3px;
+  border-radius: 4px; color: var(--vf-text-faint);
+  font-family: var(--vf-font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums;
+  line-height: 16px; white-space: nowrap; opacity: 0; cursor: copy;
+  transition: opacity 160ms ease, background-color 160ms ease, color 160ms ease;
+}
+/* WRITTEN — the record drew a span; this room needs a real act, so the
+   button is reset back to the span the record specified. */
+button.tr-anchor { border: 0; background: none; font-weight: 400; }
+.tr-anchor:hover { background: var(--vf-fill); color: var(--vf-text-secondary); }
+.tr-seg:hover > .tr-anchor, .tr-seg:focus-within > .tr-anchor { opacity: 1; }
+@container measure (min-width: 760px) { .tr-anchor { opacity: 1; } }
+/* WRITTEN — the record carried these two offsets as inline styles on the
+   specimen's markup. A panel's first line sits lower than a paragraph's. */
+.tr-seg[data-prompt] > .tr-anchor { top: 12px; }
+.tr-seg[data-command] > .tr-anchor { top: 5px; }
+/* WRITTEN — the record reveals the anchor on hover when the column has no
+   gutter, but only ever drew it against frames wide enough to have one. In
+   this room's three-column 1120px layout the transcript's 28px padding cannot
+   hold a 57px time, and a time hanging past the column's edge was clipped to
+   its last digit. Under 760px the transcript keeps a 60px gutter on the left
+   for exactly this: the column already caps the measure below 68ch here, so
+   the gutter costs about 24px of line, and the revealed anchor — one size
+   down, closer in — sits wholly inside the column, never over the words. */
+@container measure (max-width: 759.98px) {
+  .tr { --tr-action-gap: 10px; padding-left: 60px; padding-right: 60px; }
+  .tr-anchor { margin-right: 4px; font-size: 10px; }
+}
+
+/* ── T-1 — the prompt: the one container in the document ──────────────────── */
+.tr-prompt {
+  display: inline-block; max-width: 100%; padding: 11px 15px 12px;
+  border-radius: 10px; background: var(--vf-fill); color: var(--vf-text-primary);
+  transition: background-color 140ms ease;
+  /* WRITTEN — the record's specimen held prose; a real prompt holds pasted
+     urls and injected tags, and one unbreakable token must not push the
+     panel past the measure it is content-hugging inside. */
+  overflow-wrap: anywhere;
+}
+.tr-prompt p + p { margin-top: 8px; }
+.tr-prompt code { font-family: var(--vf-font-mono); font-size: 12.5px; }
+
+/* Message boundaries (2026-09-09): reveal the authored block under the pointer,
+   including its images and citations. Paint into the existing space around a
+   reply so text, wrapping, sticky actions and scroll geometry stay stationary. */
+.tr-seg.tr-prose {
+  --tr-hover-fill: color-mix(in srgb, var(--vf-foreground) 2%, transparent);
+  border-radius: 3px;
+  box-shadow: 0 0 0 6px transparent;
+  transition: background-color 140ms ease, box-shadow 140ms ease;
+}
+.tr-prompt:has(:focus-visible) {
+  background: color-mix(in srgb, var(--vf-fill) 98%, var(--vf-foreground));
+}
+.tr-seg.tr-prose:has(:focus-visible) {
+  background: var(--tr-hover-fill);
+  box-shadow: 0 0 0 6px var(--tr-hover-fill);
+}
+@media (hover: hover) and (pointer: fine) {
+  .tr-prompt:hover {
+    background: color-mix(in srgb, var(--vf-fill) 98%, var(--vf-foreground));
+  }
+  .tr-seg.tr-prose:hover {
+    background: var(--tr-hover-fill);
+    box-shadow: 0 0 0 6px var(--tr-hover-fill);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tr-prompt, .tr-seg.tr-prose { transition: none; }
+}
+
+/* A recorded image marker is a second handle for the same image. It
+   reads like a link and acts like the thumbnail, without navigating away. */
+.tr-image-link {
+  margin: 0; padding: 0; border: 0; background: none; color: var(--vf-cyan);
+  font: inherit; line-height: inherit; text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
+  text-underline-offset: 2px; cursor: zoom-in;
+}
+.tr-image-link:hover { text-decoration-color: currentColor; }
+
+/* §03 H — a command is one object; settings reduce to label + useful value */
+.tr-setting {
+  display: inline-flex; align-items: center; min-width: 0; max-width: 100%; height: 26px;
+  padding: 0 10px; border-radius: 999px; background: var(--vf-fill); white-space: nowrap;
+}
+.tr-setting__label {
+  display: inline-flex; align-items: center; flex: none;
+  color: var(--vf-text-tertiary); font-size: 10.5px; font-weight: 500;
+}
+.tr-setting__label::after {
+  content: ""; width: 1px; height: 11px; margin: 0 8px;
+  background: var(--vf-hairline-strong);
+}
+.tr-setting__value {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis;
+  color: var(--vf-text-primary); font-size: 11.5px; font-weight: 500;
+}
+.tr-cmd { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
+.tr-cmd code {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
+  border-radius: 999px; background: var(--vf-fill); color: var(--vf-text-primary);
+  font-family: var(--vf-font-mono); font-size: 11.5px; white-space: nowrap;
+}
+.tr-cmd span {
+  /* WRITTEN — a flex child will not shrink below its content without this,
+     and a command's output is one long line by nature. */
+  min-width: 0;
+  color: var(--vf-text-tertiary); font-size: 12.5px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* ── T-4 — one head per response ──────────────────────────────────────────── */
+.tr-resp { margin-top: 16px; }
+.tr-head {
+  display: flex; align-items: center; gap: 8px; height: 22px; margin-bottom: 6px;
+  color: var(--vf-text-tertiary); font-size: 10.5px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.07em;
+}
+.tr-head .mark { display: inline-flex; width: 14px; height: 14px; color: var(--vf-text-secondary); }
+.tr-head .mark svg { width: 14px; height: 14px; }
+/* WRITTEN — the room's own `AgentMark` draws a 12px span; the head's slot is
+   14, and one rule sizes the wrapper and the drawing together. */
+.tr-head .mark .ah-agent { width: 14px; height: 14px; color: inherit; }
+.tr-head .model { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--vf-text-faint); }
+.tr-head .facts {
+  margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0;
+  color: var(--vf-text-faint); font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.tr-head .facts b { font-weight: 400; color: var(--vf-text-tertiary); }
+
+/* ── prose — primary ink: it is the primary content ───────────────────────── */
+.tr-prose { color: var(--vf-text-primary); overflow-wrap: anywhere; }
+.tr-prose p + p, .tr-prose p + ul, .tr-prose p + ol,
+.tr-prose ul + p, .tr-prose ol + p { margin-top: 12px; }
+.tr-prose h3 { margin: 22px 0 8px; font-size: 14.5px; font-weight: 600; }
+.tr-prose ul, .tr-prose ol { margin: 0; padding-left: 22px; }
+.tr-prose li { margin-bottom: 5px; }
+.tr-prose li::marker { color: var(--vf-text-tertiary); }
+.tr-prose strong { font-weight: 600; }
+.tr-prose em { color: var(--vf-text-primary); }
+.tr-prose code {
+  padding: 1px 4px; border-radius: 4px; background: var(--vf-fill);
+  font-family: var(--vf-font-mono); font-size: 12px;
+}
+/* WRITTEN — the elements the record's specimen never happened to contain.
+   The transcript does not borrow `.ah-markdown`: two stylesheets setting the
+   same paragraph's margin is a rule with a race in it. */
+.tr-prose h1, .tr-prose h2, .tr-prose h4, .tr-prose h5, .tr-prose h6 {
+  margin: 22px 0 8px; font-weight: 600; line-height: 1.3;
+}
+.tr-prose h1 { font-size: 17px; }
+.tr-prose h2 { font-size: 15.5px; }
+.tr-prose h4, .tr-prose h5, .tr-prose h6 { font-size: 13.5px; color: var(--vf-text-secondary); }
+.tr-prose > :first-child { margin-top: 0; }
+.tr-prose a { color: var(--vf-cyan); text-decoration: none; }
+.tr-prose a:hover { text-decoration: underline; }
+.tr-prose s { color: var(--vf-text-faint); }
+.tr-prose blockquote {
+  margin: 12px 0; padding: 2px 0 2px 12px;
+  border-left: 2px solid var(--vf-hairline-strong); color: var(--vf-text-secondary);
+}
+.tr-prose hr { margin: 18px 0; border: 0; border-top: 1px solid var(--vf-hairline); }
+.tr-prose li > ul, .tr-prose li > ol { margin-top: 5px; }
+.tr-prose [data-tight] li > p { margin: 0; }
+.tr-prose .ah-md__image, .tr-prose .ah-md__deadlink {
+  color: var(--vf-text-faint); font-family: var(--vf-font-mono); font-size: 11.5px;
+}
+/* A wide table scrolls inside its own box; the measure is not the table's to
+   widen — the same rule the markdown view already states. */
+.tr-prose .ah-md__tablebox { margin: 12px 0; overflow-x: auto; }
+.tr-prose table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
+.tr-prose th, .tr-prose td {
+  padding: 5px 10px 5px 0; border-bottom: 1px solid var(--vf-hairline);
+  text-align: left; vertical-align: top;
+}
+.tr-prose th { color: var(--vf-text-primary); font-weight: 500; white-space: nowrap; }
+/* WRITTEN — a citation is a fact about a paragraph, on the caption ramp. */
+.tr-cites {
+  margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px;
+  color: var(--vf-text-faint); font-size: 10.5px;
+}
+
+/* the code bar — the fence's language, and a copy act */
+.tr-code { margin: 12px 0 0; border-radius: 10px; background: var(--vf-fill); overflow: hidden; }
+.tr-code__bar {
+  display: flex; align-items: center; height: 24px; padding: 0 12px;
+  border-bottom: 1px solid var(--vf-hairline); color: var(--vf-text-tertiary); font-size: 10.5px;
+}
+.tr-code__bar button {
+  margin-left: auto; border: 0; background: none; color: var(--vf-text-tertiary);
+  font-size: 10.5px; cursor: pointer; padding: 0;
+}
+.tr-code__bar button:hover { color: var(--vf-text-primary); }
+.tr-code pre {
+  margin: 0; padding: 10px 12px; overflow-x: auto; color: var(--vf-text-secondary);
+  font-family: var(--vf-font-mono); font-size: 12px; line-height: 1.5;
+}
+/* WRITTEN — a fence inside the one filled container cannot use that
+   container's own fill as its ground: a fill on a fill is no boundary at all.
+   The panel supplies the ground, so the block takes the hairline instead. */
+.tr-prompt .tr-code { background: var(--vf-chrome-solid); box-shadow: inset 0 0 0 1px var(--vf-hairline); }
+
+/* the hover acts — copy is the one act this room actually has */
+.tr-acts {
+  position: absolute; top: 0; bottom: 0; left: calc(100% + var(--tr-action-gap));
+  display: flex; align-items: flex-start; gap: 5px; width: max-content;
+  /* Sticky actions are chrome, so they share the day pill's layer above the
+     top fade (`.tr-frost` is 3) instead of dissolving with message content. */
+  z-index: 4; opacity: 0; transition: opacity 160ms ease;
+}
+.tr-seg:hover > .tr-acts, .tr-seg:focus-within > .tr-acts { opacity: 1; }
+.tr-acts button {
+  position: sticky; top: 12px; flex: none; white-space: nowrap;
+  height: 24px; padding: 0 9px; border: 1px solid var(--vf-hairline); border-radius: 999px;
+  background: var(--vf-chrome-solid); color: var(--vf-text-secondary); font-size: 10.5px;
+  cursor: pointer; transition: transform 140ms ease, background-color 160ms ease;
+}
+.tr-acts button:hover { background: var(--vf-fill); color: var(--vf-text-primary); }
+.tr-acts button:active { transform: scale(0.94); }
+
+/* ── T-2 / T-3 — THE ACTIVITY LEDGER ──────────────────────────────────────
+   A contiguous run of machinery is one object (H-1). Its closed state is a
+   ledger you can read: verb · object · result, one line per act, on the tree's
+   indent guide at the tree's row pitch. Looking folds; acts stay. */
+.tr-ledger { margin: 10px 0 12px 1px; padding-left: 13px; border-left: 1px solid var(--vf-hairline-strong); }
+.tr-line {
+  display: grid; grid-template-columns: 16px minmax(72px, max-content) minmax(0, 1fr) auto;
+  column-gap: 10px; align-items: center; min-height: var(--vf-tree-row-height);
+  margin: 0 -8px; padding: 0 8px; border-radius: 6px;
+  color: var(--vf-text-secondary); font-size: 12.5px;
+  transition: background-color 120ms ease;
+}
+.tr-line[role="button"] { cursor: pointer; }
+.tr-line[role="button"]:hover { background: var(--vf-fill); }
+.tr-line:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.tr-line__g { display: inline-flex; width: 14px; height: 14px; color: var(--vf-text-tertiary); }
+.tr-line__g svg { width: 14px; height: 14px; }
+.tr-line__v { color: var(--vf-text-secondary); white-space: nowrap; }
+.tr-line__o {
+  font-family: var(--vf-font-mono); font-size: 11.5px; color: var(--vf-text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
+}
+.tr-line__o .dir { color: var(--vf-text-tertiary); }
+.tr-line__o .q { color: var(--vf-text-primary); }
+.tr-line__o .in { color: var(--vf-text-tertiary); font-family: var(--vf-font-sans); font-size: 12px; }
+.tr-line__r {
+  display: flex; gap: 12px; align-items: center; color: var(--vf-text-tertiary);
+  font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.tr-line__r .t { color: var(--vf-text-faint); font-family: var(--vf-font-mono); font-size: 10.5px; }
+.tr-line__r .tr-fav { vertical-align: middle; }
+.tr-line__r .ttl { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
+@container measure (max-width: 640px) { .tr-line__r .t { display: none; } }
+/* T-5 — hue only for what did not complete, or is still happening. */
+.tr-line[data-state="failed"] .tr-line__g,
+.tr-line[data-state="failed"] .tr-line__r .why { color: var(--vf-red); }
+.tr-line[data-state="running"] .tr-line__g { color: var(--vf-green); }
+.tr-line[data-state="running"] .tr-line__r .why { color: var(--vf-green); }
+.tr-line[data-state="muted"] .tr-line__v,
+.tr-line[data-state="muted"] .tr-line__o { color: var(--vf-text-tertiary); }
+.tr-line[data-state="muted"] .tr-line__o { font-style: italic; }
+.tr-dot {
+  width: 7px; height: 7px; margin: 3.5px; border-radius: 999px; background: currentColor;
+  animation: tr-breathe 1.6s ease-in-out infinite;
+}
+@keyframes tr-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+.tr-line .chev {
+  display: inline-flex; width: 12px; height: 12px; color: var(--vf-text-faint);
+  transition: transform 180ms var(--vf-ease-island);
+}
+.tr-line .chev svg { width: 12px; height: 12px; }
+.tr-line[aria-expanded="true"] .chev { transform: rotate(90deg); }
+/* WRITTEN — a search hit landing on a line borrows the room's own ring. */
+.tr-line[data-hit="true"], .tr-prompt[data-hit="true"], .tr-seg[data-hit="true"],
+.tr-mark[data-hit="true"], .tr-summary[data-hit="true"] {
+  animation: ah-land 1400ms ease;
+}
+
+/* the fold — every activity run, even a single line, closes to its head: one
+   sentence of nouns, acts first, the changed files named in mono, the failure
+   count in red at the right beside the span where a narrow column cannot hide
+   it (transcript-fold R-3, amended 2026-09-09). */
+.tr-fold { grid-template-columns: 16px minmax(0, 1fr) auto; }
+.tr-fold .tr-line__v {
+  color: var(--vf-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.tr-fold .names { font-family: var(--vf-font-mono); font-size: 11.5px; color: var(--vf-text-primary); }
+/* Closed runs recede behind the conversation; attention restores their ink. */
+.tr-fold[aria-expanded="false"] .tr-line__v,
+.tr-fold[aria-expanded="false"] .names { color: var(--vf-text-tertiary); }
+.tr-fold[aria-expanded="false"]:is(:hover, :focus-visible) .tr-line__v,
+.tr-fold[aria-expanded="false"]:is(:hover, :focus-visible) .names { color: var(--vf-text-secondary); }
+.tr-fold .tr-line__r b { font-weight: 500; color: var(--vf-red); }
+.tr-fold .chev { color: var(--vf-text-tertiary); }
+/* R-5 — a live run's head carries the line that is happening, in green */
+.tr-fold .cur { color: var(--vf-green); }
+.tr-fold .cur .tr-line__o { display: inline; font-family: var(--vf-font-mono); font-size: 11.5px; color: inherit; }
+.tr-fold[aria-expanded="false"] ~ .tr-ladder { display: none; }
+.tr-ladder { margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--vf-hairline); }
+/* inside the ladder every member keeps the form it had as a segment */
+.tr-ladder > .tr-seg { margin: 6px 0 6px 26px; }
+.tr-ladder > .tr-mark { margin: 8px 0; }
+.tr-ladder > .tr-summary { margin: 8px 0 8px 26px; }
+/* §05 — the room's activity act is a store every head reads (see
+   `fold-preference.ts`): it sets each run's default and the head's own
+   `aria-expanded` is the one switch, so a press on a head still folds it
+   while the act holds the room open. `[data-fold]` styles nothing here. */
+
+/* the detail — opens in place, inset under its line */
+.tr-detail {
+  margin: 2px 0 8px 26px; border: 1px solid var(--vf-hairline-strong); border-radius: 8px;
+  overflow: hidden; font-size: 11.5px;
+}
+.tr-detail:has(> .tr-command-cwd) {
+  position: relative; margin-top: 8px; overflow: visible;
+}
+.tr-command-cwd {
+  position: absolute; z-index: 2; top: 0; left: 10px; transform: translateY(-50%);
+  display: flex; align-items: center; gap: 5px; max-width: calc(100% - 22px); height: 15px;
+  padding: 0 4px; border-radius: 3px; background: var(--vf-chrome-solid);
+  color: var(--vf-text-tertiary); font-family: var(--vf-font-mono); font-size: 9.5px;
+  line-height: 15px;
+}
+.tr-command-cwd svg { flex: none; width: 11px; height: 11px; color: var(--vf-text-faint); }
+.tr-command-cwd bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tr-command-cwd + .tr-cmds { padding-top: 9px; }
+.tr-command-cwd + .tr-command-stack { padding-top: 5px; }
+.tr-detail__bar {
+  display: flex; align-items: center; gap: 12px; height: 26px; padding: 0 10px;
+  border-bottom: 1px solid var(--vf-hairline); color: var(--vf-text-tertiary);
+  font-size: 10.5px; font-variant-numeric: tabular-nums;
+}
+.tr-detail__bar .path {
+  flex: 1; min-width: 0; font-family: var(--vf-font-mono); color: var(--vf-text-secondary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.tr-detail__bar > span:not(.path) { flex: none; white-space: nowrap; }
+.tr-diff { font-family: var(--vf-font-mono); font-size: 11.5px; line-height: 1.55; overflow-x: auto; }
+.tr-diff div { display: grid; grid-template-columns: 34px 14px 1fr; white-space: pre; }
+.tr-diff div > span:first-child {
+  color: var(--vf-text-faint); text-align: right; padding-right: 8px;
+  font-variant-numeric: tabular-nums;
+}
+.tr-diff div > span:nth-child(2) { color: var(--vf-text-tertiary); }
+.tr-diff .ctx { color: var(--vf-text-secondary); }
+/* §2.5's own words: positive delta, negative delta — at 11%. */
+.tr-diff .add { background: color-mix(in srgb, var(--vf-green) 11%, transparent); color: var(--vf-text-primary); }
+.tr-diff .del { background: color-mix(in srgb, var(--vf-red) 10%, transparent); color: var(--vf-text-primary); }
+.tr-diff .more {
+  padding: 4px 10px; color: var(--vf-text-faint);
+  font-family: var(--vf-font-sans); font-size: 10.5px; white-space: normal;
+}
+.tr-diag {
+  margin: 0; padding: 8px 10px; background: var(--vf-fill); color: var(--vf-text-secondary);
+  font-family: var(--vf-font-mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap;
+  max-height: 260px; overflow: auto;
+}
+.tr-paths {
+  margin: 0; padding: 5px 10px; list-style: none; font-family: var(--vf-font-mono);
+  font-size: 11.5px; line-height: 1.9; color: var(--vf-text-secondary);
+  white-space: nowrap; overflow-x: hidden;
+}
+.tr-paths[data-openable] { padding: 4px 6px; overflow-x: hidden; }
+.tr-paths__entry,
+.tr-paths__file {
+  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0;
+}
+.tr-paths__entry { padding: 2px 4px; }
+.tr-paths__file {
+  padding: 2px 4px; border: 0; border-radius: 5px;
+  background: none; color: var(--vf-text-secondary); font: inherit; line-height: inherit;
+  text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer;
+}
+.tr-paths__file:hover { background: var(--vf-fill); color: var(--vf-text-primary); }
+.tr-paths__file:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.tr-paths__icon { flex: none; width: 13px; height: 13px; }
+.tr-paths__icon svg { display: block; width: 100%; height: 100%; }
+.tr-paths .name {
+  min-width: 0; overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap;
+}
+.tr-paths__range {
+  flex: none; margin-left: auto; padding-left: 12px; color: var(--vf-text-tertiary);
+  font-size: 10.5px; font-variant-numeric: tabular-nums;
+}
+.tr-paths .n { color: var(--vf-text-faint); font-variant-numeric: tabular-nums; margin-left: 10px; }
+.tr-kv { display: grid; grid-template-columns: 90px 1fr; gap: 3px 12px; padding: 7px 10px; font-size: 11.5px; margin: 0; }
+.tr-kv dt { margin: 0; color: var(--vf-text-tertiary); }
+.tr-kv dd { margin: 0; color: var(--vf-text-secondary); font-family: var(--vf-font-mono); word-break: break-word; }
+/* WRITTEN — the record's specimen carried these three as inline styles: a
+   pair that must stay on one grid row, a prose value that is not an id, and
+   the chosen option in primary ink. */
+.tr-kv__pair { display: contents; }
+.tr-kv dd[data-prose] { font-family: var(--vf-font-sans); line-height: 1.5; }
+.tr-kv dd b { color: var(--vf-text-primary); font-weight: 500; }
+/* WRITTEN — a bounded list says so, and a detail that is prose reads as prose. */
+.tr-more { color: var(--vf-text-faint); font-family: var(--vf-font-sans); font-size: 10.5px; }
+.tr-tasks {
+  margin: 0; padding: 4px; list-style: none; color: var(--vf-text-secondary);
+  font-size: 11.5px;
+}
+.tr-task {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto;
+  align-items: center; gap: 8px; min-height: 28px; padding: 0 6px; border-radius: 5px;
+}
+.tr-task[data-change] { background: var(--vf-fill); }
+.tr-task__check {
+  position: relative; display: block; width: 12px; height: 12px; box-sizing: border-box;
+  border: 1px solid var(--vf-hairline-strong); border-radius: 4px; color: var(--vf-text-tertiary);
+}
+.tr-task[data-status="in_progress"] .tr-task__check::after {
+  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor;
+}
+.tr-task[data-status="completed"] .tr-task__check {
+  border-color: var(--vf-text-tertiary); background: var(--vf-text-tertiary);
+}
+.tr-task[data-status="completed"] .tr-task__check::after {
+  content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px;
+  border: solid var(--vf-chrome-solid); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
+}
+.tr-task[data-status="failed"] .tr-task__check,
+.tr-task[data-status="cancelled"] .tr-task__check { border-color: var(--vf-red); color: var(--vf-red); }
+.tr-task[data-status="failed"] .tr-task__check::after,
+.tr-task[data-status="cancelled"] .tr-task__check::after {
+  content: "×"; position: absolute; inset: -4px 0 0; font-size: 13px; line-height: 12px;
+  text-align: center;
+}
+.tr-task__subject {
+  min-width: 0; overflow: hidden; color: var(--vf-text-primary); text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tr-task[data-status="completed"] .tr-task__subject {
+  color: var(--vf-text-secondary); text-decoration: line-through;
+  text-decoration-color: var(--vf-text-faint); text-decoration-thickness: 1px;
+}
+.tr-task__meta {
+  overflow: hidden; max-width: 250px; color: var(--vf-text-faint); font-family: var(--vf-font-mono);
+  font-size: 10px; text-overflow: ellipsis; white-space: nowrap;
+}
+.tr-task__delta {
+  min-width: 42px; color: var(--vf-text-secondary); font-size: 9.5px; font-weight: 500;
+  letter-spacing: .04em; text-align: right; text-transform: uppercase;
+}
+.tr-tasks__empty { padding: 7px 6px; color: var(--vf-text-faint); font-style: italic; }
+.tr-tasks > .tr-more { padding: 5px 6px 3px 28px; }
+.tr-tasks__toggle { display: flex; justify-content: flex-end; padding: 5px 6px 2px; }
+.tr-tasks__toggle button {
+  padding: 0; border: 0; border-bottom: 1px dotted var(--vf-hairline-strong);
+  background: none; color: var(--vf-text-tertiary); font: inherit; font-size: 10.5px;
+  line-height: 1.5; cursor: pointer;
+}
+.tr-tasks__toggle button:hover { color: var(--vf-text-primary); }
+.tr-tasks__toggle button:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 3px; }
+@container measure (max-width: 560px) { .tr-task__meta { display: none; } }
+
+/* ═══ §05A — timeline_meta: four floating indexes, one island ═════════════
+   Overlay chrome belongs to the message-view wrapper, never the 68ch
+   document. The controls therefore spend no grid track and cause no reflow. */
+.ah-col--measure { container-type: inline-size; container-name: message-view; }
+.tr-meta {
+  position: absolute; z-index: 34; top: 60px; right: 14px; left: 14px; height: 0;
+  pointer-events: none;
+}
+.tr-meta-launchers { display: grid; width: 42px; gap: 7px; pointer-events: auto; }
+.tr-meta-launch {
+  display: grid; grid-template-columns: 15px auto; gap: 4px; align-items: center;
+  justify-content: center; width: 42px; height: 30px; padding: 0; border: 0;
+  border-radius: 8px; background: var(--vf-chrome-surface); backdrop-filter: blur(20px);
+  box-shadow: 0 3px 14px rgb(0 0 0 / 7%), 0 0 0 1px var(--vf-hairline-strong);
+  color: var(--vf-text-tertiary); cursor: pointer;
+  transition: transform 140ms ease, color 160ms ease, background-color 160ms ease;
+}
+.tr-meta-launch:hover { color: var(--vf-text-primary); transform: translateY(-1px); }
+.tr-meta-launch:active { transform: scale(.95); }
+.tr-meta-launch:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 3px; }
+.tr-meta-launch[aria-expanded="true"] {
+  background: var(--vf-foreground); color: var(--vf-foreground-inverse);
+}
+.tr-meta-launch svg { display: block; width: 14px; height: 14px; }
+.tr-meta-launch__count {
+  font-family: var(--vf-font-mono); font-size: 10px; font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.tr-meta-popover {
+  position: absolute; top: 0; left: 50px; width: min(430px, calc(100% - 50px));
+  overflow: hidden; border-radius: 12px; background: var(--vf-chrome-surface);
+  backdrop-filter: blur(24px);
+  box-shadow: var(--vf-shadow-island), 0 0 0 1px var(--vf-hairline-strong);
+  pointer-events: auto; transform-origin: top left; animation: tr-meta-in 180ms var(--vf-ease-pop);
+}
+@keyframes tr-meta-in { from { opacity: 0; transform: translateY(-3px) scale(.98); } }
+.tr-meta-top {
+  display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center;
+  min-height: 39px; padding: 0 6px 0 10px; border-bottom: 1px solid var(--vf-hairline);
+}
+.tr-meta-tabs { display: flex; align-self: stretch; min-width: 0; }
+.tr-meta-tab {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  min-width: 0; height: 39px; padding: 0 12px; border: 0; background: none;
+  color: var(--vf-text-tertiary); font-family: inherit; font-size: 11.5px; cursor: pointer;
+}
+.tr-meta-tab:hover { color: var(--vf-text-primary); }
+.tr-meta-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.tr-meta-tab[aria-selected="true"] { color: var(--vf-text-primary); font-weight: 600; }
+.tr-meta-tab[aria-selected="true"]::after {
+  position: absolute; right: 11px; bottom: -1px; left: 11px; height: 2px;
+  border-radius: 999px 999px 0 0; background: currentColor; content: "";
+}
+.tr-meta-close {
+  display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0;
+  border-radius: 6px; background: none; color: var(--vf-text-faint); cursor: pointer;
+}
+.tr-meta-close:hover { background: var(--vf-fill); color: var(--vf-text-primary); }
+.tr-meta-close:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 2px; }
+.tr-meta-close svg { width: 13px; height: 13px; }
+.tr-meta-panel {
+  max-height: min(382px, calc(100vh - 145px)); overflow-y: auto; scrollbar-width: thin;
+}
+.tr-meta-listhead {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
+  height: 30px; padding: 0 34px 0 43px; color: var(--vf-text-faint); font-size: 9.5px;
+  font-weight: 500; text-transform: uppercase; letter-spacing: .07em;
+}
+.tr-meta-list { margin: 0; padding: 0 7px 7px; list-style: none; }
+.tr-meta-row {
+  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 12px; gap: 9px;
+  align-items: center; width: 100%; min-height: 49px; padding: 6px 8px; border: 0;
+  border-top: 1px solid var(--vf-hairline); border-radius: 7px; background: none;
+  color: var(--vf-text-secondary); text-align: left; cursor: pointer;
+  transition: background-color 120ms ease;
+}
+.tr-meta-list li:first-child .tr-meta-row { border-top-color: transparent; }
+.tr-meta-row:hover { background: var(--vf-fill); }
+.tr-meta-row:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.tr-meta-row:disabled { cursor: default; opacity: .72; }
+.tr-meta-row:disabled:hover { background: none; }
+.tr-meta-row:disabled .tr-meta-row__chev { visibility: hidden; }
+.tr-meta-row__body { min-width: 0; }
+.tr-meta-row__name {
+  display: block; overflow: hidden; color: var(--vf-text-primary); font-size: 11.5px;
+  font-weight: 500; text-overflow: ellipsis; white-space: nowrap;
+}
+.tr-meta-row__meta {
+  display: block; overflow: hidden; margin-top: 1px; color: var(--vf-text-tertiary);
+  font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap;
+}
+.tr-meta-row__value {
+  color: var(--vf-text-tertiary); font-family: var(--vf-font-mono); font-size: 10px;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.tr-meta-row__chev { display: inline-flex; width: 12px; height: 12px; color: var(--vf-text-faint); }
+.tr-meta-row__chev svg { width: 12px; height: 12px; }
+.tr-meta-status {
+  position: relative; display: grid; width: 14px; height: 14px; place-items: center;
+  border: 1px solid var(--vf-hairline-strong); border-radius: 4px;
+  color: var(--vf-text-tertiary); font-family: var(--vf-font-mono); font-size: 9px; line-height: 1;
+}
+.tr-meta-row[data-state="completed"] .tr-meta-status { border-color: var(--vf-text-tertiary); }
+.tr-meta-row[data-state="completed"] .tr-meta-row__name {
+  color: var(--vf-text-tertiary); text-decoration: line-through;
+}
+.tr-meta-row[data-kind="workflow"][data-state="completed"] .tr-meta-row__name {
+  color: var(--vf-text-primary); text-decoration: none;
+}
+.tr-meta-row[data-state="running"] .tr-meta-status { border-color: var(--vf-green); }
+.tr-meta-row[data-state="running"] .tr-meta-status::after {
+  width: 6px; height: 6px; border-radius: 999px; background: var(--vf-green);
+  content: "";
+}
+.tr-meta-row[data-state="running"] .tr-meta-row__value { color: var(--vf-green); }
+.tr-meta-row[data-state="failed"] .tr-meta-status,
+.tr-meta-row[data-state="failed"] .tr-meta-row__value { border-color: var(--vf-red); color: var(--vf-red); }
+.tr-meta-file { display: inline-flex; width: 15px; height: 15px; color: var(--vf-text-tertiary); }
+.tr-meta-file svg { width: 15px; height: 15px; }
+.tr-meta-empty {
+  margin: 0; padding: 26px 18px 28px; color: var(--vf-text-faint); font-size: 11px;
+  text-align: center;
+}
+@container message-view (max-width: 560px) {
+  .tr-meta { top: 56px; right: 8px; left: 10px; }
+  .tr-meta-popover { left: 48px; width: calc(100% - 48px); }
+  .tr-meta-tab { flex: 1; padding-right: 5px; padding-left: 5px; }
+  .tr-meta-listhead { padding-right: 27px; padding-left: 41px; }
+  .tr-meta-row { gap: 7px; padding-right: 6px; padding-left: 6px; }
+}
+.tr-text {
+  margin: 0; padding: 7px 10px; color: var(--vf-text-secondary);
+  font-size: 12px; line-height: 1.5; white-space: pre-wrap;
+}
+.tr-quiet { color: var(--vf-text-faint); font-style: italic; }
+.tr-dtable { width: 100%; border-collapse: collapse; font-size: 11.5px; }
+.tr-dtable caption { padding: 6px 10px 2px; color: var(--vf-text-tertiary); text-align: left; }
+.tr-dtable th, .tr-dtable td {
+  padding: 4px 10px; border-bottom: 1px solid var(--vf-hairline);
+  text-align: left; vertical-align: top; color: var(--vf-text-secondary);
+}
+.tr-dtable th { color: var(--vf-text-tertiary); font-weight: 500; white-space: nowrap; }
+/* the folded commands, one per line */
+.tr-cmds {
+  margin: 0; padding: 5px 10px; list-style: none; font-family: var(--vf-font-mono);
+  font-size: 11.5px; line-height: 1.9; color: var(--vf-text-secondary);
+  white-space: pre-wrap; word-break: break-word;
+}
+.tr-cmds .tr-command {
+  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
+  align-items: center; min-width: 0;
+}
+.tr-command__prompt {
+  grid-column: 1; grid-row: 1; color: var(--vf-text-faint); white-space: nowrap;
+}
+.tr-command__text {
+  min-width: 0; margin: 0; color: inherit; font: inherit; line-height: inherit;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.tr-command__text code { color: inherit; font: inherit; }
+.tr-command__line { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
+.tr-cmds .tr-command__line { min-height: 1.9em; }
+.tr-command-stack .tr-command__line { min-height: 1.55em; }
+.tr-cmds .tr-command__text { grid-column: 2; grid-row: 1; padding: 0; background: none; }
+.tr-cmds .tr-command:not([data-full="true"]) .tr-command__text,
+.tr-cmds .tr-command:not([data-full="true"]) .tr-command__line {
+  overflow: hidden; white-space: nowrap;
+}
+.tr-cmds .tr-command:not([data-full="true"]) .tr-command__more {
+  grid-column: 3; grid-row: 1; align-self: center; margin-left: 12px; white-space: nowrap;
+}
+.tr-cmds .tr-command[data-full="true"] .tr-command__text {
+  display: block; max-height: 360px; padding-bottom: 22px; overflow: auto;
+}
+.tr-cmds .tr-command[data-full="true"] .tr-command__more {
+  position: absolute; right: 0; bottom: 3px; z-index: 1; margin: 0; padding-left: 18px;
+  background: linear-gradient(90deg, transparent, var(--vf-chrome-solid) 16px);
+}
+.tr-command-stack .tr-command + .tr-command { border-top: 1px solid var(--vf-hairline); }
+.tr-command-stack .tr-command__more { margin: 0 10px 8px; }
+.tr-command__more {
+  padding: 0; border: 0; border-bottom: 1px dotted var(--vf-hairline-strong);
+  background: none; color: var(--vf-text-tertiary); font-family: var(--vf-font-sans);
+  font-size: 10.5px; line-height: 1.5; cursor: pointer;
+}
+.tr-command__more:hover { color: var(--vf-text-primary); }
+.tr-command__more:disabled { cursor: wait; opacity: .7; }
+/* the sources — a site's icon is content, so it keeps its colour */
+.tr-web { container: web-entry / inline-size; }
+.tr-src { list-style: none; margin: 0; padding: 4px 6px; }
+.tr-src__row {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) minmax(0, max-content); gap: 10px; align-items: center;
+  height: 26px; padding: 0 6px; border-radius: 6px; font-size: 12px;
+  text-decoration: none;
+}
+.tr-src a:hover, .tr-src a:focus-visible { background: var(--vf-fill); }
+.tr-src a:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: -1.5px; }
+.tr-src .title {
+  color: var(--vf-text-primary); text-decoration: none;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.tr-src a:hover .title { text-decoration: underline; }
+.tr-src .dom { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vf-text-faint); font-family: var(--vf-font-mono); font-size: 10.5px; }
+.tr-site-icons { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 6px 12px 8px; color: var(--vf-text-tertiary); font-size: 10.5px; cursor: pointer; }
+.tr-site-icons input { width: 12px; height: 12px; margin: 0; accent-color: var(--vf-text-secondary); }
+.tr-web-note { padding: 8px 12px; color: var(--vf-text-tertiary); font-size: 11px; }
+.tr-web-more { display: block; margin: 5px 12px 8px; padding: 0; border: 0; background: none; color: var(--vf-text-secondary); font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
+.tr-fetch + .tr-fetch { border-top: 1px solid var(--vf-hairline); }
+.tr-fetch a { color: var(--vf-text-primary); text-underline-offset: 2px; overflow-wrap: anywhere; }
+.tr-fetch .tr-fav { vertical-align: middle; }
+/* Web facts compete for space inside the reading measure and nested runs.
+   Ask their own width, not the wider message column, before moving them. */
+@container web-entry (max-width: 640px) {
+  .tr-line[data-page-title] { grid-template-columns: 16px max-content minmax(0, 1fr); padding-top: 4px; padding-bottom: 4px; row-gap: 3px; }
+  .tr-line[data-page-title] .tr-line__r { grid-column: 2 / -1; min-width: 0; gap: 8px; }
+  .tr-line[data-web] .ttl { min-width: 0; }
+}
+@container web-entry (max-width: 520px) {
+  .tr-line[data-web] { grid-template-columns: 16px max-content minmax(0, 1fr); padding-top: 4px; padding-bottom: 4px; row-gap: 3px; }
+  .tr-line[data-web] .tr-line__r { grid-column: 2 / -1; min-width: 0; gap: 8px; }
+}
+@container web-entry (max-width: 420px) {
+  .tr-src__row { grid-template-columns: 14px minmax(0, 1fr); height: auto; min-height: 38px; gap: 1px 10px; padding-top: 3px; padding-bottom: 3px; }
+  .tr-src__row > .tr-fav { grid-row: 1 / 3; }
+  .tr-src .dom { grid-column: 2; max-width: 100%; }
+  .tr-fetch { grid-template-columns: 44px minmax(0, 1fr); }
+  .tr-line[data-web] .tr-line__r .t { display: none; }
+}
+@container web-entry (max-width: 360px) {
+  .tr-line[data-web] { grid-template-columns: 16px minmax(0, 1fr); }
+  .tr-line[data-web] .tr-line__o { grid-column: 2; }
+}
+
+/* Q4 C — reasoning is muted, clamped prose in the measure; no box, no rail */
+.tr-think { color: var(--vf-text-tertiary); font-size: 13px; line-height: 1.5; }
+.tr-think__text {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+.tr-think__text p + p { margin-top: 8px; }
+.tr-think[data-open="true"] .tr-think__text {
+  display: block; -webkit-line-clamp: unset; overflow: visible;
+}
+.tr-think__more {
+  margin-top: 3px; padding: 0; border: 0; border-bottom: 1px dotted var(--vf-hairline-strong);
+  background: none; color: var(--vf-text-tertiary); font-family: inherit; font-size: 11px;
+  font-variant-numeric: tabular-nums; cursor: pointer;
+}
+.tr-think__more:hover { color: var(--vf-text-primary); }
+/* Q10 A — reasoning alone is a run of one, drawn as its line: Thought · its
+   first words · the span, opening to the same muted prose */
+.tr-line[data-thought] .tr-line__o { font-family: var(--vf-font-sans); font-size: 12.5px; color: var(--vf-text-tertiary); }
+.tr-thought > .tr-think { margin: 4px 0 8px 26px; }
+
+/* ── §03 F — the child run: part of the calling document ──────────────────── */
+.tr-sub { margin: 2px 0 10px 26px; padding-left: 12px; border-left: 1px solid var(--vf-hairline-strong); }
+.tr-sub__head {
+  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 8px; align-items: center;
+  height: 26px; color: var(--vf-text-secondary); font-size: 11.5px;
+}
+.tr-sub__head .mark { display: inline-flex; width: 13px; height: 13px; color: var(--vf-text-tertiary); }
+.tr-sub__head .mark svg { width: 13px; height: 13px; }
+.tr-sub__head .mark .ah-agent { width: 13px; height: 13px; color: inherit; }
+.tr-sub__head .when { color: var(--vf-text-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
+/* WRITTEN — the record's head named one subagent; a real one needs to
+   truncate, and its role is a caption beside the name rather than part of it. */
+.tr-sub__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
+/* WRITTEN — the head is a disclosure for a run nothing pressed open. */
+button.tr-sub__head {
+  width: 100%; border: 0; background: none; padding: 0; font: inherit;
+  color: var(--vf-text-secondary); cursor: pointer; text-align: left;
+}
+button.tr-sub__head:hover { color: var(--vf-text-primary); }
+.tr-sub__role { color: var(--vf-text-faint); }
+.tr-sub .tr { padding: 4px 0 0; font-size: 13px; }
+.tr-sub .tr-prompt { padding: 8px 12px 9px; font-size: 13px; }
+.tr-sub .tr-turn + .tr-turn { margin-top: 18px; }
+/* A child run has no margin of its own to put an anchor in. */
+.tr-sub .tr-anchor { display: none; }
+
+/* ── §04A — Agent workers and Agent Teams ──────────────────────────────────
+   A worker's machine-delivered assignment remains inside its one child
+   document. Team members are addressable and their delivered boundary events
+   enter shared chronology. Hue is confined to the small Claude mark. */
+:where(.ah-frame, .ah-layer) [data-member-color="blue"] { --member-color: #3b82f6; }
+:where(.ah-frame, .ah-layer) [data-member-color="green"] { --member-color: #22c55e; }
+:where(.ah-frame, .ah-layer) [data-member-color="yellow"] { --member-color: #ffd60a; }
+:where(.ah-frame, .ah-layer) [data-member-color="purple"] { --member-color: #8b5cf6; }
+:where(.ah-frame, .ah-layer) [data-member-color="orange"] { --member-color: #f59e0b; }
+:where(.ah-frame, .ah-layer) [data-member-color="pink"] { --member-color: #ec4899; }
+:where(.ah-frame, .ah-layer) [data-member-color="cyan"] { --member-color: #06b6d4; }
+:where(.ah-frame, .ah-layer) [data-member-color="red"] { --member-color: #ef4444; }
+.tr-assignment {
+  margin: 5px 0 10px; padding: 6px 0 7px 11px;
+  border-left: 2px solid var(--vf-hairline-strong);
+  color: var(--vf-text-secondary); font-size: 12.5px; line-height: 1.5;
+}
+.tr-assignment__head {
+  display: block; margin-bottom: 2px; color: var(--vf-text-tertiary);
+  font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em;
+}
+.tm-avatar {
+  display: inline-flex; flex: none; width: 14px; height: 14px;
+  color: var(--member-color, var(--vf-text-tertiary));
+}
+.tm-avatar .ah-agent, .tm-avatar svg { display: block; width: 100%; height: 100%; color: inherit; }
+.tm-avatar-stack { position: relative; width: 16px; overflow: visible; }
+.tm-avatar-stack > .tm-avatar { position: absolute; top: 2px; width: 10px; height: 10px; }
+.tm-avatar-stack > .tm-avatar:nth-child(1) { left: 0; }
+.tm-avatar-stack > .tm-avatar:nth-child(2) { left: 4px; }
+.tm-avatar-stack > .tm-avatar:nth-child(3) { left: 8px; }
+.tm-mention {
+  display: inline-flex; align-items: center; gap: 5px; min-height: 20px;
+  padding: 0 7px 0 6px; border-radius: 999px; background: var(--vf-fill);
+  color: var(--vf-text-primary); font-family: var(--vf-font-mono);
+  font-size: 10.5px; line-height: 20px; white-space: nowrap;
+}
+.tm-mention .tm-avatar { width: 11px; height: 11px; }
+.tm-roster {
+  margin: 2px 0 10px 26px; padding: 4px 0 5px 12px;
+  border-left: 1px solid var(--vf-hairline-strong);
+}
+.tm-roster__row {
+  display: grid; grid-template-columns: 14px minmax(118px, max-content) minmax(0, 1fr) auto;
+  gap: 9px; align-items: center; min-height: 28px;
+  color: var(--vf-text-secondary); font-size: 11.5px;
+}
+.tm-roster__name {
+  color: var(--vf-text-primary); font-family: var(--vf-font-mono);
+  font-size: 10.5px; white-space: nowrap;
+}
+.tm-roster__job {
+  min-width: 0; overflow: hidden; color: var(--vf-text-tertiary);
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.tm-runtime {
+  color: var(--vf-text-faint); font-size: 10.5px;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.tm-note { margin: 7px 0 0 14px; color: var(--vf-text-faint); font-size: 10.5px; }
+.tm-known { margin-top: 2px; margin-bottom: 16px; }
+.tm-message { position: relative; margin: 14px 0 15px; padding: 1px 0 2px; }
+.tm-message__head {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px;
+  min-height: 18px; color: var(--vf-text-tertiary); font-size: 10.5px;
+}
+.tm-message__head .mark { display: inline-flex; width: 12px; height: 12px; }
+.tm-message__head .tm-avatar { width: 12px; height: 12px; }
+.tm-message__who {
+  color: var(--vf-text-primary); font-family: var(--vf-font-mono);
+  font-size: 10.5px; font-weight: 500;
+}
+.tm-message__route { color: var(--vf-text-tertiary); }
+.tm-message__kind {
+  margin-left: auto; color: var(--vf-text-faint); font-size: 9.5px;
+  font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em;
+}
+.tm-message__time {
+  color: var(--vf-text-faint); font-family: var(--vf-font-mono);
+  font-size: 10px; font-variant-numeric: tabular-nums;
+}
+.tm-time-basis { color: var(--vf-text-faint); font-family: var(--vf-font-sans); }
+.tm-message__subject {
+  margin: 5px 0 0 21px; color: var(--vf-text-secondary); font-size: 12px; font-weight: 500;
+}
+.tm-message__body {
+  margin: 4px 0 0 21px; color: var(--vf-text-primary); font-size: 13.5px; line-height: 1.55;
+}
+.tm-message__body p + p { margin-top: 8px; }
+.tm-message__foot {
+  display: flex; align-items: center; gap: 8px; margin: 5px 0 0 21px;
+  color: var(--vf-text-faint); font-size: 10.5px;
+}
+.tm-report { margin-top: 14px; margin-bottom: 15px; }
+.tm-report__detail .tm-message__body { margin: 0; padding: 9px 12px 4px; }
+.tm-report__detail .tm-message__body:last-child { padding-bottom: 10px; }
+.tm-report__detail .tm-message__foot { margin: 0; padding: 0 12px 9px; }
+.tm-report__detail > .tm-workthread { margin: 0 10px 10px 22px; }
+.tm-work {
+  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0;
+  border-bottom: 1px dotted var(--vf-hairline-strong); background: none;
+  color: var(--vf-text-tertiary); font: inherit; cursor: pointer;
+}
+.tm-work:hover { color: var(--vf-text-primary); }
+.tm-work .chev { width: 10px; height: 10px; }
+.tm-work .chev svg {
+  display: block; width: 10px; height: 10px;
+  transition: transform 160ms var(--vf-ease-island);
+}
+.tm-work[aria-expanded="true"] .chev svg { transform: rotate(90deg); }
+.tm-work:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+.tm-workthread { margin-top: 7px; margin-bottom: 15px; }
+.tm-workthread .tr-sub__head .tm-avatar { width: 13px; height: 13px; }
+.tm-workthread__name {
+  color: var(--vf-text-primary); font-family: var(--vf-font-mono); font-size: 10.5px;
+}
+.tr-head .tm-workthread__name { text-transform: none; letter-spacing: 0; }
+.tm-workthread__kind { color: var(--vf-text-tertiary); }
+.tm-workthread .tr-assignment { margin-top: 4px; margin-bottom: 9px; }
+.tm-workthread__end {
+  display: flex; align-items: center; gap: 7px; margin: 8px 0 1px;
+  color: var(--vf-text-faint); font-size: 10.5px;
+}
+.tm-workthread__end::before {
+  content: ""; width: 16px; height: 1px; background: var(--vf-hairline-strong);
+}
+.tm-workthread__end time {
+  margin-left: auto; font-family: var(--vf-font-mono); font-variant-numeric: tabular-nums;
+}
+.tm-lifecycle .tm-avatar { width: 12px; height: 12px; }
+.tm-message[data-hit="true"], .tm-roster__row[data-hit="true"], .tm-lifecycle[data-hit="true"] {
+  animation: ah-land 1400ms ease;
+}
+@container measure (max-width: 560px) {
+  .tm-roster__row { grid-template-columns: 14px minmax(0, 1fr); padding: 5px 0; }
+  .tm-roster__row .tm-runtime { grid-column: 2; grid-row: 2; }
+  .tm-roster__job { grid-column: 2; grid-row: 3; white-space: normal; }
+  .tm-message__kind { margin-left: 0; }
+  .tm-message__time { margin-left: auto; }
+  .tm-invocation[data-team-operation="add"],
+  .tm-invocation[data-team-operation="resume"] {
+    grid-template-columns: 16px minmax(0, 1fr);
+    grid-template-rows: minmax(var(--vf-tree-row-height), auto) auto auto;
+    padding-top: 3px; padding-bottom: 4px;
+  }
+  .tm-invocation[data-team-operation="add"] .tr-line__g,
+  .tm-invocation[data-team-operation="resume"] .tr-line__g {
+    grid-column: 1; grid-row: 1;
+  }
+  .tm-invocation[data-team-operation="add"] .tr-line__v,
+  .tm-invocation[data-team-operation="resume"] .tr-line__v {
+    grid-column: 2; grid-row: 1;
+  }
+  .tm-invocation[data-team-operation="add"] .tr-line__o,
+  .tm-invocation[data-team-operation="resume"] .tr-line__o {
+    grid-column: 2; grid-row: 2; min-width: 0;
+    overflow: visible; text-overflow: clip; white-space: normal;
+  }
+  .tm-invocation[data-team-operation="add"] .tr-line__r,
+  .tm-invocation[data-team-operation="resume"] .tr-line__r {
+    grid-column: 2; grid-row: 3; min-width: 0; justify-self: start;
+    flex-wrap: wrap;
+  }
+  .tm-report__line {
+    grid-template-columns: 16px minmax(0, 1fr);
+    grid-template-rows: minmax(var(--vf-tree-row-height), auto) 20px 20px;
+  }
+  .tm-report__line .tr-line__g { grid-column: 1; grid-row: 1; }
+  .tm-report__line .tr-line__v { grid-column: 2; grid-row: 1; }
+  .tm-report__line .tr-line__r {
+    grid-column: 2; grid-row: 3; min-width: 0; justify-self: start;
+  }
+  .tm-report__line .tr-line__o { grid-column: 2; grid-row: 2; }
+  .tm-report__detail .tm-message__foot {
+    flex-direction: column; align-items: flex-start; gap: 2px;
+  }
+  .tm-workthread .tr-sub__head {
+    grid-template-columns: 13px minmax(0, 1fr); height: auto; min-height: 26px; padding: 4px 0;
+  }
+  .tm-workthread .tr-sub__head .when { grid-column: 2; }
+  .tm-workthread .tr-head {
+    display: grid; grid-template-columns: 14px minmax(0, 1fr) auto;
+    row-gap: 0; height: auto; min-height: 22px;
+  }
+  .tm-workthread .tr-head .model { grid-column: 2 / -1; grid-row: 2; }
+}
+
+/* ── §04B — Workflow: one durable run, chronological attempts ─────────────
+   The collapsed row answers state and progress. Its disclosure reads purpose,
+   attempts, phases, workers and result in that order; worker runtime choice
+   always gets its own line and child transcripts remain lazy. */
+.wf-run__detail { min-width: 0; padding: 0; }
+.wf-run__mast { min-width: 0; padding: 12px 14px 11px; }
+.wf-run__title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.wf-run__title strong {
+  min-width: 0; overflow: hidden; color: var(--vf-text-primary);
+  font-family: var(--vf-font-mono); font-size: 12px; font-weight: 500;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.wf-run__id {
+  color: var(--vf-text-faint); font-family: var(--vf-font-mono);
+  font-size: 9.5px; white-space: nowrap;
+}
+.wf-run__finished {
+  margin-left: auto; color: var(--vf-text-faint); font-size: 10.5px;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.wf-run__objective {
+  margin: 4px 0 9px; color: var(--vf-text-secondary); font-size: 11.5px;
+  line-height: 1.45; overflow-wrap: anywhere;
+}
+.wf-run__facts {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
+  min-width: 0; color: var(--vf-text-faint); font-size: 10.5px;
+  font-variant-numeric: tabular-nums;
+}
+.wf-run__facts b { color: var(--vf-text-secondary); font-weight: 500; }
+.wf-run__actions { display: inline-flex; gap: 10px; margin-left: auto; }
+.wf-action {
+  padding: 0; border: 0; border-bottom: 1px dotted var(--vf-hairline-strong);
+  background: none; color: var(--vf-text-tertiary); font: inherit;
+  font-size: 10.5px; cursor: pointer;
+}
+.wf-action:hover { color: var(--vf-text-primary); }
+.wf-action:disabled { border-bottom-color: transparent; opacity: .55; cursor: default; }
+.wf-action:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+.wf-logs { position: relative; }
+.wf-logs > summary, .wf-full-result > summary { list-style: none; }
+.wf-logs > summary::-webkit-details-marker,
+.wf-full-result > summary::-webkit-details-marker { display: none; }
+.wf-logs > .tr-diag {
+  position: absolute; z-index: 3; top: calc(100% + 5px); right: 0;
+  width: min(520px, 72vw); max-height: 240px; border: 1px solid var(--vf-hairline-strong);
+  border-radius: 7px; box-shadow: var(--vf-shadow-island);
+}
+.wf-section-label {
+  display: block; padding: 8px 14px 5px; color: var(--vf-text-faint);
+  font-size: 9.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
+}
+.wf-attempts, .wf-phases, .wf-result { border-top: 1px solid var(--vf-hairline); }
+.wf-attempt {
+  display: grid; grid-template-columns: 8px 62px minmax(0, 1fr) auto;
+  gap: 8px; align-items: center; min-height: 27px; padding: 0 14px 7px;
+  color: var(--vf-text-tertiary); font-size: 10.5px;
+}
+.wf-attempt__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--vf-text-tertiary); }
+.wf-attempt strong { color: var(--vf-text-secondary); font-weight: 500; }
+.wf-attempt__launch { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wf-attempt__outcome { color: var(--vf-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wf-attempt[data-state="running"] .wf-attempt__dot { background: var(--vf-green); }
+.wf-attempt[data-state="failed"] .wf-attempt__dot { background: var(--vf-red); }
+.wf-attempt[data-state="failed"] .wf-attempt__outcome { color: var(--vf-red); }
+.wf-phase { border-top: 1px solid var(--vf-hairline); }
+.wf-phase:first-of-type { border-top: 0; }
+.wf-phase > summary, .wf-worker-thread > summary { list-style: none; }
+.wf-phase > summary::-webkit-details-marker,
+.wf-worker-thread > summary::-webkit-details-marker { display: none; }
+.wf-phase__head {
+  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 12px;
+  gap: 9px; align-items: center; width: 100%; min-height: 37px; padding: 5px 14px;
+  color: var(--vf-text-secondary); cursor: pointer;
+}
+.wf-phase__head:hover { background: var(--vf-fill); }
+.wf-phase__head:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--vf-select); }
+.wf-phase__index {
+  display: grid; place-items: center; width: 18px; height: 18px;
+  border: 1px solid var(--vf-hairline-strong); border-radius: 999px;
+  color: var(--vf-text-tertiary); font-family: var(--vf-font-mono); font-size: 9.5px;
+  font-variant-numeric: tabular-nums;
+}
+.wf-phase__name { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
+.wf-phase__name strong { flex: none; color: var(--vf-text-primary); font-size: 11.5px; font-weight: 500; }
+.wf-phase__name span { min-width: 0; overflow: hidden; color: var(--vf-text-faint); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
+.wf-phase__count { color: var(--vf-text-tertiary); font-size: 10.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wf-phase__head .chev { display: inline-flex; width: 12px; height: 12px; color: var(--vf-text-faint); transition: transform 160ms var(--vf-ease-island); }
+.wf-phase__head .chev svg { width: 12px; height: 12px; }
+.wf-phase[open] > .wf-phase__head .chev { transform: rotate(90deg); }
+.wf-phase__workers { margin: 0 12px 8px 23px; padding: 2px 0 2px 12px; border-left: 1px solid var(--vf-hairline-strong); }
+.wf-empty { margin: 4px 8px 6px; color: var(--vf-text-faint); font-size: 10.5px; }
+.wf-worker-thread { margin: 0; }
+.wf-worker {
+  grid-template-columns: 16px minmax(92px, max-content) minmax(0, 1fr) auto;
+  grid-template-rows: 20px 18px; row-gap: 0; min-height: 42px;
+  margin-right: 0; margin-left: -8px; padding-top: 2px; padding-bottom: 2px;
+}
+.wf-worker .tr-line__g { grid-column: 1; grid-row: 1 / 3; }
+.wf-worker .tr-line__v {
+  grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden;
+  color: var(--vf-text-primary); font-family: var(--vf-font-mono); font-size: 11px;
+  text-overflow: ellipsis;
+}
+.wf-worker .tr-line__o { grid-column: 3; grid-row: 1; color: var(--vf-text-tertiary); font-family: var(--vf-font-sans); font-size: 10.5px; }
+.wf-worker .tr-line__r { grid-column: 4; grid-row: 1; }
+.wf-worker__runtime {
+  grid-column: 2 / 4; grid-row: 2; min-width: 0; overflow: hidden;
+  color: var(--vf-text-tertiary); font-size: 10.5px; font-variant-numeric: tabular-nums;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.wf-worker__runtime .wf-worker__basis { margin-right: 5px; color: var(--vf-text-faint); font-size: 9.5px; }
+.wf-worker__runtime b { color: var(--vf-text-secondary); font-weight: 500; }
+.wf-worker__runtime > span:last-child { margin-left: 4px; color: var(--vf-text-secondary); }
+.wf-worker__usage { grid-column: 4; grid-row: 2; color: var(--vf-text-faint); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.wf-worker-thread[open] > .wf-worker .chev { transform: rotate(90deg); }
+.wf-worker[data-state="failed"] .tr-line__r .why,
+.wf-worker__result[data-state="failed"] { color: var(--vf-red); }
+.wf-worker[data-state="running"] .tr-line__r .why { color: var(--vf-green); }
+.wf-worker__detail { margin: 2px 0 8px 18px; }
+.wf-worker__result { padding: 7px 10px 8px; color: var(--vf-text-secondary); font-size: 11.5px; line-height: 1.45; }
+.wf-worker__result p { margin: 0; overflow-wrap: anywhere; }
+.wf-worker__detail > .tr-sub { margin: 2px 0 8px; }
+.wf-result { min-width: 0; padding: 0 14px 11px; }
+.wf-result .wf-section-label { padding-right: 0; padding-left: 0; }
+.wf-result__resources { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; align-items: start; margin-bottom: 6px; color: var(--vf-text-tertiary); font-size: 10.5px; }
+.wf-result__resources > .tr-paths { padding: 0; line-height: 1.55; }
+.wf-output { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 5px 10px; min-width: 0; margin: 0; font-size: 10.5px; line-height: 1.45; }
+.wf-output__row { display: contents; }
+.wf-output dt { margin: 0; color: var(--vf-text-tertiary); }
+.wf-output dd { min-width: 0; margin: 0; color: var(--vf-text-secondary); overflow-wrap: anywhere; }
+.wf-output__verdict { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+.wf-result__error { margin-top: 8px; color: var(--vf-red); }
+.wf-result__foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin-top: 8px; color: var(--vf-text-faint); font-size: 10px; }
+.wf-result__foot > span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
+.wf-full-result { margin-left: auto; }
+.wf-full-result[open] { flex: 1 0 100%; margin-left: 0; }
+.wf-full-result[open] > summary { display: block; width: max-content; margin: 0 0 6px auto; }
+.wf-full-result > .tr-diag { border-radius: 6px; }
+
+@container measure (max-width: 560px) {
+  .wf-run__title { flex-wrap: wrap; }
+  .wf-run__finished { width: 100%; margin-left: 0; }
+  .wf-run__actions { width: 100%; margin: 3px 0 0; }
+  .wf-attempt { grid-template-columns: 8px 62px minmax(0, 1fr); }
+  .wf-attempt__outcome { grid-column: 3; }
+  .wf-phase__name span, .wf-worker .tr-line__o { display: none; }
+  .wf-worker { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-rows: 19px 18px 16px; align-items: center; min-height: 57px; padding-top: 3px; padding-bottom: 3px; }
+  .wf-worker .tr-line__g { grid-column: 1; grid-row: 1 / 4; }
+  .wf-worker .tr-line__v { grid-column: 2; grid-row: 1; }
+  .wf-worker .tr-line__r { grid-column: 3; grid-row: 1; min-width: 0; font-size: 10px; }
+  .wf-worker__runtime { grid-column: 2 / 4; grid-row: 2; font-size: 10px; }
+  .wf-worker__runtime .wf-worker__basis { display: none; }
+  .wf-worker__usage { grid-column: 2 / 4; grid-row: 3; justify-self: start; font-size: 9.5px; }
+  .wf-output, .wf-result__resources { grid-template-columns: 1fr; gap: 1px; }
+  .wf-output dd + dt { margin-top: 5px; }
+}
+
+/* ── §03 G — markers: the system's own lines ──────────────────────────────── */
+.tr-mark {
+  display: flex; align-items: center; gap: 10px; margin: 18px 0;
+  color: var(--vf-text-faint); font-size: 10px; text-transform: uppercase;
+  letter-spacing: 0.07em; font-variant-numeric: tabular-nums; text-align: center;
+}
+.tr-mark::before, .tr-mark::after { content: ""; flex: 1; height: 1px; background: var(--vf-hairline-strong); }
+.tr-mark--live { color: var(--vf-green); }
+.tr-mark--live::before, .tr-mark--live::after { background: color-mix(in srgb, var(--vf-green) 38%, transparent); }
+.tr-mark--error { color: var(--vf-red); }
+.tr-mark--gap::before, .tr-mark--gap::after {
+  background: repeating-linear-gradient(90deg, var(--vf-hairline-strong) 0 4px, transparent 4px 8px);
+}
+button.tr-mark { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
+button.tr-mark:hover { color: var(--vf-text-tertiary); }
+
+/* A generated recap folds into its compaction marker, outside tool activity. */
+.tr-compaction { margin: 18px 0; min-width: 0; }
+.tr-compaction > summary { margin: 0; min-height: 28px; cursor: pointer; list-style: none; color: var(--vf-text-tertiary); }
+.tr-compaction > summary::-webkit-details-marker { display: none; }
+.tr-compaction > summary:hover { color: var(--vf-text-secondary); }
+.tr-compaction > summary:focus-visible { outline: 1.5px solid var(--vf-select); outline-offset: 3px; border-radius: 4px; }
+.tr-compaction__label { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; }
+.tr-compaction__label .chev { display: inline-flex; flex: none; }
+.tr-compaction__label .chev svg { width: 12px; height: 12px; }
+.tr-compaction[open] .chev svg { transform: rotate(90deg); }
+.tr-compaction__hint { color: var(--vf-text-faint); }
+.tr-compaction__body { margin: 10px 0 0; padding: 4px 0 4px 14px; border-left: 1px solid var(--vf-hairline-strong); overflow-wrap: anywhere; }
+.tr-compaction__byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 14px; color: var(--vf-text-tertiary); font-size: 11px; }
+.tr-compaction__byline button { margin-left: auto; white-space: nowrap; }
+.tr-compaction__byline button, .tr-compaction__status button { padding: 2px 0; border: 0; background: none; color: var(--vf-text-tertiary); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
+.tr-compaction__byline button:hover, .tr-compaction__status button:hover { color: var(--vf-text-primary); }
+.tr-compaction__status { color: var(--vf-text-tertiary); font-size: 12px; }
+.tr-compaction__body .tr-prose > :first-child { margin-top: 0; }
+
+/* the session summary — a footnote at the end, not a state */
+.tr-summary {
+  margin: 18px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--vf-hairline-strong);
+  color: var(--vf-text-tertiary); font-size: 13px;
+}
+/* WRITTEN — the record's `.eyebrow` is its page's chrome; scoped here it is
+   the summary's own label and nothing else's. */
+.tr-summary .eyebrow {
+  display: block; margin-bottom: 4px; color: var(--vf-text-tertiary);
+  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em;
+}
+
+/* ── §07 — time: the pill is the one marker that is an object ─────────────── */
+.tr-day {
+  position: sticky; top: 6px; z-index: 4; display: flex; align-items: center; gap: 10px;
+  margin: 20px 0 16px; pointer-events: none;
+}
+.tr-day::before, .tr-day::after { content: ""; flex: 1; height: 1px; background: var(--vf-hairline-strong); }
+.tr-day__pill {
+  pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; height: 22px;
+  padding: 0 10px; border: 0; border-radius: 999px; background: var(--vf-chrome-solid);
+  box-shadow: 0 0 0 1px var(--vf-hairline-strong); color: var(--vf-text-secondary);
+  font-family: inherit; font-size: 10.5px; font-weight: 500; font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em; cursor: pointer;
+  transition: background-color 120ms ease, box-shadow 160ms ease;
+}
+.tr-day__pill:hover { background: var(--vf-fill); }
+.tr-day__pill .after { font-weight: 400; color: var(--vf-text-tertiary); }
+.tr-day__pill .after::before { content: "·"; margin-right: 7px; color: var(--vf-text-faint); }
+.tr-day--first { margin-top: 4px; }
+/* pinned: the column stamps this while a pill is stuck, so it floats as chrome */
+.tr-day[data-stuck="true"] .tr-day__pill { box-shadow: var(--vf-shadow-island), 0 0 0 1px var(--vf-hairline-strong); }
+.tr-day[data-stuck="true"]::before, .tr-day[data-stuck="true"]::after { opacity: 0; }
+/* a sitting is a section: the sticky pill's containing block, so the next pill
+   pushes it OUT instead of stacking on it */
+.tr-sitting { position: relative; }
+.tr-day + .tr-turn { margin-top: 0; }
+/* Grouped setting commands use a definite, shrinkable track. An implicit
+   max-content track can otherwise widen the entire transcript scrollport. */
+.tr-cluster {
+  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start;
+}
+.tr-cluster .tr-prompt { border-radius: 10px; }
+.tr-cluster .tr-prompt-message + .tr-prompt-message .tr-prompt { border-top-left-radius: 4px; }
+.tr-cluster .tr-prompt-message:has(+ .tr-prompt-message) .tr-prompt { border-bottom-left-radius: 4px; }
+/* the day list the pill opens into */
+.tr-daymenu {
+  position: absolute; left: 50%; transform: translateX(-50%); z-index: 12;
+  min-width: 200px; padding: 6px; border-radius: 12px; background: var(--vf-chrome-surface);
+  backdrop-filter: blur(20px); box-shadow: var(--vf-shadow-island), 0 0 0 1px var(--vf-hairline);
+}
+.tr-daymenu button {
+  display: grid; grid-template-columns: 1fr auto; gap: 14px; width: 100%; height: 26px;
+  padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--vf-text-primary);
+  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
+}
+.tr-daymenu button:hover { background: var(--vf-fill); }
+.tr-daymenu button span { color: var(--vf-text-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
+.tr-daymenu button[aria-current="true"] { background: var(--vf-fill); }
+
+/* the landing ring — a day jump lands the way a search hit does */
+.tr-prompt.is-landed, .tr-prompt-message.is-landed > .tr-prompt,
+.tr-prompt-message.is-landed > .tr-attachments .tr-att__tile { box-shadow: inset 0 0 0 1.5px var(--vf-select); }