@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/styles/room.css

@@ -0,0 +1,1411 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE ROOM — ported from protos/agent-history-proto/index.html §03, class
+   names and all: the proto is the fidelity reference, and renaming its
+   vocabulary would only make the two harder to diff. App-shell adaptations
+   live in the clearly marked section at the end.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE ROOM. History is depth 1 on the materiality ladder, and its material is
+   PAPER: opaque sheet, no ground bleed. Reading is the job, and translucency
+   taxes it. (four-views §3.)
+   ═══════════════════════════════════════════════════════════════════════ */
+.ah-frame {
+  position: relative; height: 760px; min-height: 760px;
+  border-radius: 22px; overflow: hidden;
+  border: 1px solid var(--vf-hairline-strong);
+  background: var(--vf-canvas-bg);
+  box-shadow: var(--vf-shadow-card);
+  /* the ground the room sits over — always underneath, per the ladder */
+  background-image: radial-gradient(var(--vf-canvas-dot) 1.2px, transparent 1.2px);
+  background-size: 25px 25px;
+  --composer-h: 196px;
+  color: var(--vf-text-primary);
+}
+.ah-frame.is-tall { height: 860px; min-height: 860px; }
+
+.ah-room {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column;
+  background: var(--ah-plate);
+  backdrop-filter: blur(40px);
+  border-top: 1px solid var(--vf-hairline);
+}
+
+/* Five columns and two guests: projects · sessions · the project's WORKTREE ·
+   the messages · what THIS SESSION touched. Each tree opens from the head of
+   the column it describes and sits immediately to that column's right, so a
+   tree is always beside its owner rather than across the room from it. The
+   measure keeps the middle and takes back whatever a closed guest gives up.
+   H-3 is unchanged and now has two subjects: guests yield, the measure never
+   does — and when both guests want a room that seats one, the newer takes the
+   seat and the room says so. */
+.ah-cols {
+  display: grid; height: 100%;
+  grid-template-columns: 260px 300px 280px minmax(0, 1fr);
+  transition: grid-template-columns 240ms var(--vf-ease-island);
+}
+.ah-cols[data-rail="off"] { grid-template-columns: 260px 300px 0px minmax(0, 1fr); }
+/* Four tracks, not the record's five. The design draws the worktree and the
+   session's git as two guests opening from two heads; they are one column
+   here — three tabs over one checkout — so the fifth track has nothing to
+   hold and a closed guest is the third track at 0px.
+   A closed guest leaves nothing behind, including its own hairline, which
+   would otherwise stand beside its neighbour's as a second line. */
+.ah-cols[data-rail="off"] .ah-col--rail,
+.ah-col--measure { border-right: 0; }
+/* the transcript head carries a range and an act, so they travel together */
+.ah-headacts { display: flex; align-items: center; gap: 8px; flex: none; }
+
+.ah-col { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--vf-hairline); overflow: hidden; }
+.ah-col:last-child { border-right: 0; }
+/* One band across all four columns. The padding is horizontal only and the
+   height is the band's: a header holding a 26px segmented control used to
+   stand 1px taller than one holding a 15px eyebrow, which put a visible
+   step in the line that is supposed to run the width of the room. */
+.ah-col > header {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  min-height: 46px; padding: 0 14px;
+  border-bottom: 1px solid var(--vf-hairline);
+}
+.ah-col > header > div { min-width: 0; }
+.ah-eyebrow {
+  display: block; color: var(--vf-text-tertiary);
+  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-caption { color: var(--vf-text-faint); font-size: 10px; white-space: nowrap; }
+/* CB-4 — every room's scroll container reserves the capsule's height plus 16. */
+.ah-scroll {
+  flex: 1; overflow-y: auto; scrollbar-width: none;
+  padding: 6px 6px calc(var(--composer-h) + 16px);
+}
+.ah-scroll::-webkit-scrollbar { display: none; }
+.ah-scroll[data-flush] { padding-left: 0; padding-right: 0; }
+/* FLIP owns row displacement; browser anchoring must not jump the viewport
+   halfway through a sort. Scrolling itself never starts an animation. */
+.ah-motion-list { position: relative; overflow-anchor: none; }
+.ah-list-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.ah-list-update-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+
+/* ── Projects ─────────────────────────────────────────────────────────────
+   The tint wash is scaled to the busiest project in the complete collection,
+   so filtering never changes the visual meaning of a project's width. */
+.ah-project-list-item {
+  position: relative; isolation: isolate;
+  display: grid; grid-template-columns: 3px minmax(0, 1fr); gap: 0 11px;
+  width: 100%; padding: 11px 12px 12px; margin-bottom: 3px;
+  border: 0; border-radius: 12px; background: transparent; text-align: left;
+  transition: background-color 160ms ease;
+}
+.ah-project-list-item > * { position: relative; z-index: 1; }
+.ah-project-list-item::before {
+  content: ""; position: absolute; z-index: 0; inset: 0 auto 0 0;
+  width: max(3px, var(--spend-share)); border-radius: 12px;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--project-color) 15%, transparent) 0%,
+    color-mix(in srgb, var(--project-color) 8%, transparent) 64%,
+    color-mix(in srgb, var(--project-color) 0%, transparent) 100%);
+  transition: width 300ms var(--vf-ease-island);
+}
+.ah-project-list-item:hover { background: color-mix(in srgb, var(--vf-foreground) 5%, transparent); }
+.ah-project-list-item.is-selected { background: color-mix(in srgb, var(--vf-foreground) 7%, transparent); }
+.ah-project-list-item__accent {
+  grid-column: 1; grid-row: 1 / span 3; align-self: stretch;
+  width: 3px; border-radius: 999px; background: var(--project-color);
+  opacity: 0.45; transition: opacity 160ms ease;
+}
+.ah-project-list-item.is-selected .ah-project-list-item__accent { opacity: 1; }
+.ah-project-list-item__header { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
+.ah-project-list-item__path { grid-column: 2; margin-top: 3px; min-width: 0; }
+.ah-project-list-item__footer { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
+.ah-project-list-item__metrics { display: flex; align-items: center; gap: 9px; min-width: 0; }
+.ah-project-list-item strong { display: block; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--vf-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ah-project-list-item small {
+  display: block; min-width: 0; padding-top: 1px; color: var(--vf-text-faint);
+  font-size: 10px; font-family: var(--vf-font-mono);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-last {
+  color: var(--vf-text-faint); font-size: 9.5px; line-height: 1;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+}
+.ah-project-list-item.is-selected .ah-last,
+.ah-project-list-item:hover .ah-last { color: var(--vf-text-tertiary); }
+.ah-project-list-item .ah-last[data-live] { color: var(--vf-green); font-weight: 500; }
+
+.ah-project-list-item__token-figure { display: inline-flex; align-items: baseline; gap: 1px; flex: none; font-variant-numeric: tabular-nums; }
+.ah-project-list-item__token-figure b { min-width: 29px; text-align: right; color: var(--vf-text-secondary); font-size: 11px; font-weight: 500; }
+.ah-project-list-item__token-figure i { width: 7px; color: var(--vf-text-faint); font-size: 9.5px; font-style: normal; }
+.ah-project-list-item.is-selected .ah-project-list-item__token-figure b { color: var(--vf-text-primary); }
+
+/* The activity shape: 30 days in 15 two-day buckets, normalised to this
+   project's own peak. It answers "when", never "how much". */
+.ah-project-activity-sparkline { display: flex; align-items: flex-end; gap: 1px; width: 96px; height: 14px; flex: none; }
+.ah-project-activity-sparkline i {
+  flex: 1 1 0; min-width: 0; height: var(--h); border-radius: 1px;
+  background: var(--project-color); opacity: 0.38; transition: opacity 160ms ease;
+}
+.ah-project-list-item:hover .ah-project-activity-sparkline i,
+.ah-project-list-item.is-selected .ah-project-activity-sparkline i { opacity: 0.72; }
+/* A bucket with nothing in it is drawn as a hairline rather than as nothing,
+   so a dead stretch reads as measured-and-empty instead of as missing. */
+.ah-project-activity-sparkline i[data-zero] { height: 1px; opacity: 0.28; }
+
+/* ── the agent marks ──────────────────────────────────────────────────────
+   lobehub marks, monochrome on the row's ramp. Opacity ranks them by share
+   against this project's lead agent, so the leftmost mark is also the darkest
+   and the row reads as an ordering rather than as a set. */
+.ah-agents { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 58px; }
+.ah-agent { display: inline-flex; width: 12px; height: 12px; flex: none; color: var(--vf-text-primary); }
+.ah-agent svg { width: 100%; height: 100%; display: block; }
+.ah-agent--generic {
+  align-items: center; justify-content: center; border: 1px solid currentColor;
+  border-radius: 999px; font-size: 5.5px; font-weight: 700; line-height: 1;
+  letter-spacing: -0.02em;
+}
+.ah-more { color: var(--vf-text-faint); font-size: 8.5px; font-variant-numeric: tabular-nums; }
+
+
+/* ── search lives in styles/search.css: a launcher in the strip, a sheet
+   over the room (search record, 2026-09-09). The key cap stays here because
+   every surface that names a shortcut wears it. */
+.ah-kbd {
+  flex: none; padding: 2px 6px;
+  border: 1px solid var(--vf-hairline-strong); border-radius: 6px;
+  color: var(--vf-text-faint); font-family: var(--vf-font-sans); font-size: 10px; line-height: 1.4;
+}
+/* the rank control sits with the list it ranks, not in the header band: the
+   band names what a column holds, and ordering is not part of the name. */
+.ah-listbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 3px; }
+.ah-sortseg { flex: none; margin-left: auto; }
+.ah-seg.ah-sortseg button { height: 19px; padding: 0 8px; font-size: 9.5px; }
+
+/* ── the treemap ──────────────────────────────────────────────────────────
+   Area is quantity and hue is identity. Layout uses the measured container
+   ratio, and tiny interactive targets receive a documented minimum area. */
+.ah-treemap { width: 100%; }
+.ah-treemap__plot { position: relative; width: 100%; }
+.ah-treemap__item { position: absolute; border: 0; padding: 0; background: transparent; }
+.ah-treemap__item-content {
+  position: absolute; inset: 0 2px 2px 0; border-radius: 4px;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--treemap-item-color) 26%, transparent);
+  transition: background-color 160ms ease, box-shadow 160ms ease;
+}
+.ah-treemap__item:hover .ah-treemap__item-content {
+  background: color-mix(in srgb, var(--treemap-item-color) 42%, transparent);
+}
+.ah-treemap__item.is-selected .ah-treemap__item-content {
+  background: color-mix(in srgb, var(--treemap-item-color) 58%, transparent);
+  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--treemap-item-color) 90%, transparent);
+}
+.ah-treemap__item b {
+  position: absolute; left: 6px; right: 6px; top: 5px;
+  font-size: 9px; font-weight: 500; line-height: 11px; color: var(--vf-text-secondary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
+}
+.ah-treemap__item em {
+  position: absolute; right: 6px; bottom: 4px;
+  font-style: normal; font-size: 9.5px; line-height: 11px; font-variant-numeric: tabular-nums;
+  color: var(--vf-text-primary);
+}
+.ah-treemap__item:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 1px; border-radius: 5px; }
+.ah-treemap__empty, .ah-streamgraph__empty {
+  display: grid; place-items: center; height: 100%; margin: 0;
+  color: var(--vf-text-faint); font-size: 8.5px; text-align: center;
+}
+.ah-treemap__footer {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  margin-top: 8px; color: var(--vf-text-faint); font-size: 9px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   THE SUMMARY PANEL — what the ledger row's figure decomposes into.
+   A READER: no cards, no material, hairlines and the ramp doing the
+   hierarchy (§8's file-tree law, one surface over).
+   ═══════════════════════════════════════════════════════════════════════ */
+/* The block now heads its own column — there is no separate column header
+   above it — so its head takes the header band's metrics (46px, hairline
+   beneath) and the room's header line runs unbroken across all four columns.
+   Collapsed, only the head and that one hairline remain. */
+.ah-meta { flex: none; }
+.ah-meta__head {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  min-height: 46px; padding: 0 12px;
+  border-bottom: 1px solid var(--vf-hairline);
+}
+.ah-meta__body { padding: 10px 12px 12px; border-bottom: 1px solid var(--vf-hairline); }
+/* ── the column head ──────────────────────────────────────────────────────
+   Two columns name the thing they are showing — ② a project, ③ a session —
+   and they are the same object at different depths, so they are one component:
+   tint marker, name, count. Nothing about them may drift apart. */
+.ah-colhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ah-colhead > i { flex: none; width: 3px; height: 14px; border-radius: 999px; background: var(--tint); }
+.ah-colhead > strong {
+  font-size: 11.5px; font-weight: 500; color: var(--vf-text-primary);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* a path and a branch are ids, so they set in mono — the same rule the sha
+   follows. The head keeps its size and weight; only the face changes. */
+.ah-colhead > strong.ah-idname { font-family: var(--vf-font-mono); font-size: 11px; letter-spacing: -0.01em; }
+/* the count is a fact about the name, so it travels with it rather than
+   sitting at the far end of the band. Neutral fill, never the tint: the
+   marker two elements over already says which project this is. */
+.ah-bubble {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  min-width: 19px; height: 16px; padding: 0 5px; border-radius: 999px;
+  background: var(--vf-fill); color: var(--vf-text-tertiary);
+  font-size: 9.5px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums;
+}
+
+/* two acts, standing on the fill at rest so the head reads as two controls
+   rather than two glyphs. The pressed step is the segmented control's own —
+   thumb over track — so a thing that is ON looks the same everywhere here. */
+.ah-meta__acts { display: flex; align-items: center; gap: 4px; flex: none; }
+.ah-iconbtn {
+  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
+  border: 0; border-radius: 8px; background: var(--vf-fill); color: var(--vf-text-tertiary);
+  transition: color 160ms ease, background-color 160ms ease;
+}
+.ah-iconbtn:hover { color: var(--vf-text-primary); background: var(--vf-fill-hover); }
+.ah-iconbtn[aria-pressed="true"] {
+  color: var(--vf-foreground); background: var(--vf-chrome-solid); box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+}
+.dark .ah-iconbtn[aria-pressed="true"] {
+  background: color-mix(in srgb, var(--vf-foreground) 20%, transparent); box-shadow: none;
+}
+.ah-iconbtn svg { width: 14px; height: 14px; }
+
+/* The two views use the segmented control the ledger already uses to rank
+   itself. Mutually exclusive pressed buttons keep the interaction explicit
+   without claiming the full keyboard contract of ARIA tabs. */
+.ah-seg.ah-tabseg { margin-bottom: 9px; }
+.ah-seg.ah-tabseg button { height: 21px; padding: 0 11px; font-size: 10px; }
+
+/* The switch and the chart it switches are one object, so they share one
+   fill — the same step the four chips stand on. Inside the card the seg's
+   track would vanish into it, so the track takes a further step up the ramp;
+   the thumb keeps its own. Three steps, and each one still reads. */
+.ah-chartcard { padding: 9px; border-radius: 12px; background: var(--vf-fill); }
+.ah-chartcard .ah-seg { background: color-mix(in srgb, var(--vf-foreground) 7%, transparent); }
+
+/* four chips, not four cards: a fill on the same surface, no border and no
+   shadow — they group the figures without pretending to float (§5). */
+/* Four equal quarters of a 260px column leave 46px for a label that needs 54,
+   so the tracks are floored at their own content and share what is left. The
+   chips come out slightly unequal in the narrow column and equal in the wide
+   one — which is the honest way round: the width follows the word, and no
+   label is ever cut to keep a grid tidy. */
+.ah-stats { margin-bottom: 10px; display: grid; grid-template-columns: repeat(4, minmax(min-content, 1fr)); gap: 3px; }
+.ah-stat { min-width: 0; padding: 7px 3px 6px; border-radius: 9px; background: var(--vf-fill); }
+.ah-stat b {
+  display: block; font-size: 15px; font-weight: 300; line-height: 1.05;
+  letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--vf-text-primary);
+  white-space: nowrap;
+}
+.ah-stat b small { font-size: 10px; color: var(--vf-text-faint); margin-left: 1px; font-weight: 400; }
+.ah-stat span {
+  display: block; margin-top: 4px; color: var(--vf-text-faint);
+  font-size: 8px; font-weight: 500; text-transform: uppercase;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* ── the calendar heatmap ─────────────────────────────────────────────────
+   53 weeks across, days down. The scale is the project's own §2.6 accent at
+   four steps of alpha — never a hue ramp: colour in this room means *which*,
+   and a heat scale that ignored that would be the one thing on screen using
+   hue for quantity. An empty day is a faint square rather than nothing: the
+   day was measured and was empty, which is not the same as missing. */
+.ah-calendar-heatmap__axis { margin: 10px 0 3px; height: 10px; position: relative; }
+.ah-calendar-heatmap__axis span {
+  position: absolute; top: 0; color: var(--vf-text-faint);
+  font-size: 8px; letter-spacing: 0.02em; white-space: nowrap;
+}
+.ah-calendar-heatmap__grid { display: flex; gap: 1px; }
+.ah-calendar-heatmap__week { display: flex; flex-direction: column; gap: 1px; flex: 1 1 0; min-width: 0; }
+.ah-calendar-heatmap__cell {
+  display: block; width: 100%; aspect-ratio: 1; border-radius: 1px;
+  background: color-mix(in srgb, var(--heatmap-color) calc(var(--heatmap-intensity) * 25%), transparent);
+}
+.ah-calendar-heatmap__cell[data-empty] { background: color-mix(in srgb, var(--vf-foreground) 7%, transparent); }
+.ah-calendar-heatmap__cell[data-unavailable] { visibility: hidden; }
+.ah-calendar-heatmap__footer {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  margin-top: 8px; color: var(--vf-text-faint); font-size: 9px;
+}
+.ah-calendar-heatmap__legend { display: flex; align-items: center; gap: 3px; }
+.ah-calendar-heatmap__legend i {
+  width: 7px; height: 7px; border-radius: 2px;
+  background: color-mix(in srgb, var(--heatmap-color) calc(var(--heatmap-intensity) * 25%), transparent);
+}
+.ah-calendar-heatmap__legend i[data-empty] { background: color-mix(in srgb, var(--vf-foreground) 7%, transparent); }
+
+/* ── the streamgraph ──────────────────────────────────────────────────────
+   A model is an object being grouped, which is precisely what §2.6's accents
+   are for — so each model takes one, assigned stably by id. The project tint
+   and the model tints never share a chart; the legend names every line. */
+/* Both tabs draw into one box of fixed height, so switching between them
+   never moves the session list below. */
+.ah-tabbody { height: 106px; display: flex; flex-direction: column; justify-content: space-between; }
+.ah-chart-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.ah-chart-header__title { margin: 0; color: var(--vf-text-tertiary); font-size: 9px; font-weight: 500; }
+.ah-chart-header__note { color: var(--vf-text-faint); font-size: 8.5px; }
+.ah-streamgraph { display: flex; flex: 1; min-height: 0; flex-direction: column; }
+.ah-streamgraph__plot { flex: 1; min-height: 0; }
+.ah-streamgraph__plot svg { display: block; width: 100%; height: 100%; }
+.ah-streamgraph__plot path { opacity: 0.72; }
+.ah-streamgraph__axis { position: relative; height: 10px; margin-top: 3px; color: var(--vf-text-faint); font-size: 8px; font-variant-numeric: tabular-nums; }
+.ah-streamgraph__axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
+.ah-streamgraph__axis span[data-first] { transform: none; }
+.ah-streamgraph__axis span[data-last] { transform: translateX(-100%); }
+.ah-streamgraph__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; margin-top: 3px; }
+.ah-streamgraph__legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--vf-text-tertiary); font-size: 9.5px; }
+.ah-streamgraph__legend i { width: 6px; height: 6px; border-radius: 999px; background: var(--series-color); flex: none; }
+.ah-streamgraph__legend b { color: var(--vf-text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
+
+.ah-meta__facts { margin: 9px 0 0; color: var(--vf-text-tertiary); font-size: 10px; line-height: 1.5; }
+.ah-meta__facts b { color: var(--vf-text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
+
+/* ── Sessions ───────────────────────────────────────────────────────────── */
+/* The list already sits beneath its own toolbar. The shared scroll inset
+   would hold a sticky day header below that bar and expose the row behind it. */
+.ah-session-list { padding-top: 0; }
+.ah-session-list > .ah-day:first-child { margin-top: 0; }
+/* A 128-session list without day breaks is undifferentiated, so the days are
+   drawn — sticky, quiet, and never a card. */
+.ah-day {
+  position: sticky; top: 0; z-index: 2;
+  padding: 10px 10px 5px; margin-top: 4px;
+  background: linear-gradient(var(--ah-plate) 72%, transparent);
+  color: var(--vf-text-faint); font-size: 9.5px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.08em;
+}
+/* The session row answers the same four questions the ledger row does, in the
+   same corners: state and title on the first line, the agent top-right, the
+   facts in the middle, the branch bottom-left and the time bottom-right. */
+.ah-session-list-item {
+  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 9px;
+  width: 100%; padding: 8px 10px 9px; border: 0; border-radius: 11px;
+  background: transparent; text-align: left;
+  transition: background-color 160ms ease, box-shadow 160ms ease;
+}
+.ah-session-list-item:hover { background: var(--vf-fill); }
+/* location, not interaction — the same law the tree states (§8 file tree) */
+.ah-session-list-item.is-selected {
+  background: var(--vf-fill);
+  box-shadow: inset 0 0 0 1.5px var(--vf-select);
+}
+
+/* The state is the dot and only the dot — the word it replaced was saying the
+   same thing twice. §2.5's meanings, unchanged: green working, orange needs
+   attention, red failed, muted done or idle. */
+.ah-session-list-item__status {
+  grid-column: 1; grid-row: 1; align-self: center; width: 8px; height: 8px;
+  border-radius: 999px; background: var(--vf-text-faint);
+}
+.ah-session-list-item__status[data-tone="green"] { background: var(--vf-green); }
+.ah-session-list-item__status[data-tone="orange"] { background: var(--vf-orange); }
+.ah-session-list-item__status[data-tone="red"] { background: var(--vf-red); }
+/* live is the one state that is still happening, so it also breathes */
+.ah-session-list-item__status[data-live] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-green) 22%, transparent); }
+
+.ah-session-list-item__header { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 16px; }
+.ah-session-list-item__footer { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-width: 0; }
+.ah-session-list-item strong { display: block; min-width: 0; font-size: 12px; font-weight: 500; color: var(--vf-text-primary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ah-session-list-item__metadata {
+  grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px;
+  color: var(--vf-text-faint); font-size: 10px; font-variant-numeric: tabular-nums;
+}
+/* the branch is an id, so it is mono (§3) */
+.ah-session-list-item__native-id {
+  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
+  color: var(--vf-text-tertiary); font-family: var(--vf-font-mono); font-size: 9.5px;
+}
+.ah-session-list-item__native-id span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ah-session-list-item .ah-last { flex: none; }
+.ah-session-list-item:hover .ah-last,
+.ah-session-list-item.is-selected .ah-last { color: var(--vf-text-tertiary); }
+.ah-session-list-item .ah-last[data-live] { color: var(--vf-green); font-weight: 500; }
+.ah-session-list-item .ah-agent { width: 12px; height: 12px; opacity: 0.5; }
+.ah-session-list-item:hover .ah-agent,
+.ah-session-list-item.is-selected .ah-agent { opacity: 0.7; }
+.ah-session-list-item[data-role="subagent"] .ah-session-list-item__status,
+.ah-session-list-item[data-role="team"] .ah-session-list-item__status { transform: scale(0.72); }
+
+/* the only control in its row, so it takes the row: the same track and the
+   same thumb, stretched — a switch's shape is its material, not its width */
+/* the two change groups head themselves like search's result groups do */
+/* Scoped to the rail because the record's fifth column is gone — files,
+   changes and history are three tabs of column ③ now. */
+.ah-col--rail .ah-group { padding-top: 10px; }
+.ah-col--rail .ah-group:first-child { padding-top: 6px; }
+
+/* ── the Transcript — a document, not a chat log ─────────────────────────── */
+.ah-transcript { max-width: 68ch; margin: 0 auto; padding: 20px 28px 30px; font-size: 14px; }
+/* the landing ring: a search hit or a focused row is ringed, then the ring
+   goes — kept here because both the ledger line and the prose segment take it. */
+@keyframes ah-land {
+  0%, 62% { box-shadow: inset 0 0 0 1.5px var(--vf-select); border-radius: 10px; }
+  100% { box-shadow: inset 0 0 0 1.5px transparent; border-radius: 10px; }
+}
+
+/* A quiet return to the live tail, available anywhere above it. Keep the
+   control mounted so both arrival and departure can settle without a pop. */
+.ah-newpill {
+  position: absolute; left: 50%; bottom: calc(var(--composer-h) + 26px); z-index: 6;
+  transform: translate(-50%, 8px) scale(0.96); opacity: 0; visibility: hidden;
+  pointer-events: none;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 36px; max-width: calc(100% - 32px); padding: 0 14px;
+  border: 1px solid var(--vf-hairline-strong); border-radius: 999px;
+  background: var(--vf-chrome-surface); backdrop-filter: blur(24px) saturate(1.25);
+  box-shadow: var(--vf-shadow-island);
+  color: var(--vf-text-secondary); font-size: 11px; font-weight: 500;
+  font-variant-numeric: tabular-nums; white-space: nowrap;
+  transition: opacity 180ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
+    background-color 160ms ease, color 160ms ease, visibility 0s linear 180ms;
+}
+.ah-newpill[data-visible] {
+  opacity: 1; visibility: visible; pointer-events: auto;
+  transform: translate(-50%, 0) scale(1); transition-delay: 0s;
+}
+.ah-newpill:hover { background: var(--vf-chrome-solid); color: var(--vf-text-primary); }
+.ah-newpill[data-unread] { color: var(--vf-text-primary); }
+.ah-newpill:active { transform: translate(-50%, 1px) scale(0.97); }
+.ah-newpill svg { flex: none; }
+.ah-newpill span { overflow: hidden; text-overflow: ellipsis; }
+.ah-newpill i { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--vf-green); }
+.ah-tail-announcement {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+@keyframes ah-pop { from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.92); } to { opacity: 1; transform: translateX(-50%); } }
+
+/* ── result groups — the rail's change groups head themselves this way ──── */
+.ah-group {
+  display: flex; align-items: center; gap: 8px;
+  padding: 12px 10px 6px; margin-top: 2px;
+  color: var(--vf-text-faint); font-size: 9.5px; font-weight: 500;
+  text-transform: uppercase; letter-spacing: 0.08em;
+}
+.ah-group i { width: 3px; height: 11px; border-radius: 999px; background: var(--tint); flex: none; }
+.ah-hitcount { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0; }
+
+
+
+/* ── honest states ──────────────────────────────────────────────────────── */
+.ah-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 9px; height: 100%; min-height: 190px; padding: 30px 26px; text-align: center;
+}
+.ah-empty svg { width: 22px; height: 22px; color: var(--vf-text-faint); }
+.ah-empty strong { font-size: 12.5px; font-weight: 500; color: var(--vf-text-secondary); }
+.ah-empty p { margin: 0; max-width: 44ch; color: var(--vf-text-faint); font-size: 11px; line-height: 1.6; }
+.ah-empty code { font-size: 10.5px; }
+/* Loading is colourless — the veil's rule: loading is not a §2.5 state. */
+.ah-meter { width: 132px; height: 3px; border-radius: 999px; background: var(--vf-fill-hover); overflow: hidden; }
+.ah-meter i { display: block; height: 100%; border-radius: 999px; background: var(--vf-text-tertiary); }
+
+.ah-seg {
+  display: inline-flex; padding: 2px; border-radius: 999px; background: var(--vf-fill);
+}
+.ah-seg button {
+  height: 22px; padding: 0 9px; border: 0; border-radius: 999px; background: transparent;
+  color: var(--vf-text-tertiary); font-size: 10.5px;
+  transition: color 160ms ease, background-color 300ms var(--vf-ease-island);
+}
+.ah-seg button.is-on { color: var(--vf-foreground); background: var(--vf-chrome-solid); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); font-weight: 500; }
+.dark .ah-seg button.is-on { background: color-mix(in srgb, var(--vf-foreground) 20%, transparent); box-shadow: none; }
+
+/* DESIGN.md §7 — a visible focus ring, always. Both surfaces are named:
+   the file viewer is portalled out of `.ah-room`, and the first thing to
+   leave the room fell back to the browser's own ring, in the browser's own
+   colour. A focus rule scoped to one container is a rule with a hole in it. */
+.ah-room button:focus-visible,
+.ah-fileview button:focus-visible,
+.ah-fileview a:focus-visible,
+.ah-sheet button:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE ROOM IN ITS HOST — where the specimen page's frame becomes whatever
+   holds it: rosetta's window, or another app's slot. Everything above is the
+   proto verbatim; everything below is the port. The page itself (html, body,
+   the window's drag region, the global motion floor) is the host's:
+   rosetta's app keeps it in styles/app.css.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* The room's own assumptions, scoped to its root and to the layers it
+   portals out (`.ah-layer`), at zero specificity so every rule above still
+   wins as it did when these were the page's. */
+:where(.ah-frame, .ah-layer), :where(.ah-frame, .ah-layer) * { box-sizing: border-box; }
+:where(.ah-frame, .ah-layer) :where(button, input) { font: inherit; color: inherit; }
+:where(.ah-frame, .ah-layer) :where(button) { cursor: pointer; }
+:where(.ah-frame, .ah-layer) :where(code, .mono) { font-family: var(--vf-font-mono); }
+:where(.ah-frame, .ah-layer) .tnum { font-variant-numeric: tabular-nums; }
+
+/* The room's own tokens. `--ah-plate` is the colour its surface reads as —
+   the paper it paints, and what its fades and cut-out rings are drawn in. The
+   project band (`--tint-*`) is the room's identity system; both themes. */
+:where(.ah-frame, .ah-layer) {
+  --ah-plate: var(--vf-sheet-surface);
+  --tint-l: 0.60;
+  --tint-c: 0.15;
+}
+.dark :where(.ah-frame, .ah-layer) { --tint-l: 0.74; }
+
+/* the frame fills what holds it: no radius, no shadow, no fixed height */
+.ah-frame, .ah-frame.is-tall {
+  height: 100%; min-height: 0;
+  border: 0; border-radius: 0; box-shadow: none;
+  font-family: var(--vf-font-sans); -webkit-font-smoothing: antialiased;
+  --composer-h: 0px;
+  --ah-scroll-foot: calc(32px + env(safe-area-inset-bottom, 0px));
+  --ah-floating-foot: calc(24px + env(safe-area-inset-bottom, 0px));
+}
+
+/* The edges a host keeps clear for its own chrome (HistoryRoom's
+   `edgeInset`): the room sits inside its frame by that much. */
+.ah-room {
+  inset: var(--ah-inset-top, 0px) var(--ah-inset-right, 0px) var(--ah-inset-bottom, 0px) var(--ah-inset-left, 0px);
+}
+
+/* A host that paints its own surface beneath the room (`surface="host"`):
+   no ground, no plate, and the paper fades become frost — a blur of whatever
+   passes beneath, feathered by its own mask, under the chrome it grounds.
+   A mask on the scroller itself would fade the pinned chrome with the rows. */
+.ah-frame[data-ah-surface="host"] { background: none; }
+.ah-frame[data-ah-surface="host"] .ah-room { background: none; backdrop-filter: none; }
+.ah-frame[data-ah-surface="host"] .tr-frost::before {
+  background: none;
+  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
+  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 88%) 38%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 88%) 38%, transparent 100%);
+}
+.ah-frame[data-ah-surface="host"] .ah-day { background: none; }
+.ah-frame[data-ah-surface="host"] .ah-day::before {
+  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
+  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
+  -webkit-mask-image: linear-gradient(#000 72%, transparent);
+  mask-image: linear-gradient(#000 72%, transparent);
+}
+/* The search strip takes its own height. The grid fills only what remains:
+   a 100% height with an automatic minimum pushed every column's foot below
+   the window, including the transcript's absolutely positioned control. */
+.ah-cols { flex: 1; height: auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
+.ah-col { min-height: 0; }
+/* Real scrollable space after the last row, also respected by keyboard
+   reveals. The fallback keeps standalone component previews comfortable. */
+.ah-scroll {
+  min-height: 0;
+  padding-bottom: var(--ah-scroll-foot, 32px);
+  scroll-padding-bottom: var(--ah-scroll-foot, 32px);
+}
+.ah-newpill { bottom: var(--ah-floating-foot, 24px); }
+.ah-list-updates { bottom: 16px; }
+.ah-list-updates[hidden] { display: none; }
+/* Four columns: the worktree rail is real now (the proto's base grid rules
+   above already carry the rail track and its H-3 close); the footprint
+   guest still waits on Q4, so its 0px fifth track stays empty. */
+
+/* `ah-rail*` throughout is the design record's vocabulary, not the app's:
+   this file is a port of the proto §03 class names and all, and the two are
+   diffed against each other. The React side calls the column what it shows
+   — `components/worktree` — and leaves the stylesheet speaking the record's
+   language.
+
+   Files take 70% of the area below the tabs and worktrees take 30%, including
+   their heading. Both scroll independently; expanding a folder never moves
+   the divider. With no sibling worktrees, files take the whole area. */
+.ah-railbody { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
+.ah-railbody[data-split] { grid-template-rows: minmax(0, 7fr) minmax(0, 3fr); }
+.ah-railtree { height: 100%; min-height: 0; padding: 6px 6px 0; }
+.ah-railtree[data-mille-theme] [role="tree"] {
+  padding-bottom: var(--ah-scroll-foot, 32px);
+  scroll-padding-bottom: var(--ah-scroll-foot, 32px);
+  overscroll-behavior-y: contain;
+}
+/* the engine lags a project switch: the old tree dims rather than lies */
+.ah-railtree[data-stale] { opacity: 0.45; transition: opacity 160ms; }
+/* Keep the worktree heading fixed above its scrollable list. */
+.ah-railfoot { display: flex; flex-direction: column; min-height: 0; }
+.ah-railfoot__list {
+  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin;
+  padding: 0 6px var(--ah-scroll-foot, 32px);
+  scroll-padding-bottom: var(--ah-scroll-foot, 32px);
+}
+.ah-railfoot__list:focus-visible { outline: 2px solid var(--vf-select); outline-offset: -2px; }
+.ah-railsplit { flex: none; margin: 12px 12px 6px; padding-top: 12px; border-top: 1px solid var(--vf-hairline); }
+.ah-worktree {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  width: 100%; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent;
+  color: var(--vf-text-secondary); font-size: 11.5px; text-align: left;
+}
+.ah-worktree code { font-size: 10px; color: var(--vf-text-faint); font-variant-numeric: tabular-nums; }
+.ah-worktree code[data-dirty] { color: var(--vf-cyan); }
+
+/* a receipt, so a copy or an act is never silent */
+.ah-receipt {
+  position: absolute; left: 50%; bottom: 26px; z-index: 45;
+  transform: translateX(-50%);
+  display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px;
+  border: 1px solid var(--vf-hairline); border-radius: 999px;
+  background: var(--vf-chrome-surface); backdrop-filter: blur(20px);
+  box-shadow: var(--vf-shadow-island);
+  color: var(--vf-text-secondary); font-size: 11px;
+  animation: ah-pop 280ms var(--vf-ease-pop);
+}
+.ah-receipt[hidden] { display: none; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE COLD START — the veil system (design record supplement "The Cold
+   Start"). Readiness is data, never a timer; only the ready may claim
+   emptiness; a veil overlays and never changes geometry (H-2).
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* the veil's host: any section that can frost over. The content beneath
+   keeps rendering and updating — that motion IS the progress animation. */
+.ah-veilhost { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.ah-veilhost > .ah-scroll { flex: 1; }
+/* a panel body is its own host: it keeps its size and only frosts */
+.ah-meta__body.ah-veilhost { flex: none; display: block; }
+
+.ah-veil {
+  position: absolute; inset: 0; z-index: 5;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
+  background: color-mix(in srgb, var(--ah-plate) 55%, transparent);
+  backdrop-filter: blur(5px);
+  animation: ah-veil-in 240ms ease;
+}
+.ah-veil__label {
+  color: var(--vf-text-tertiary); font-size: 10px;
+  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
+}
+.ah-veil .ah-meter i { transition: width 600ms var(--vf-ease-island); }
+@keyframes ah-veil-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* the cooking card's figure slots: a shimmer where the numbers will land.
+   Loading is colourless — the sweep is the ramp, never a hue. */
+.ah-cook {
+  display: inline-block; width: 54px; height: 8px; border-radius: 4px;
+  background: linear-gradient(90deg,
+    var(--vf-fill-hover) 0%, var(--vf-fill) 45%, var(--vf-fill-hover) 90%);
+  background-size: 200% 100%;
+  animation: ah-cook-sweep 1.6s ease-in-out infinite;
+}
+.ah-project-list-item__metrics[data-cooking] { position: relative; }
+.ah-project-list-item__metrics[data-cooking]::after {
+  content: ""; position: absolute; inset: -2px -4px; border-radius: 6px;
+  background: linear-gradient(100deg,
+    transparent 20%,
+    color-mix(in srgb, var(--ah-plate) 55%, transparent) 50%,
+    transparent 80%);
+  background-size: 200% 100%;
+  animation: ah-cook-sweep 1.6s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes ah-cook-sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
+
+/* a cooking project's accent breathes in its own tint — on the stove */
+.ah-project-list-item[data-cooking] .ah-project-list-item__accent {
+  animation: ah-stove 1.8s ease-in-out infinite;
+}
+@keyframes ah-stove { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
+
+/* …and once the daemon's per-project fold names a figure, the stove turns
+   determinate: the same accent becomes the meter, filled from the floor in
+   the project's own tint over an ember of itself. Geometry never moves —
+   the bar was always there — and the fill eases on the veil's clock. */
+.ah-project-list-item[data-cooking][data-fill] .ah-project-list-item__accent {
+  animation: none;
+  opacity: 0.9;
+  background:
+    linear-gradient(var(--project-color), var(--project-color))
+      bottom / 100% var(--ingest-fill) no-repeat,
+    color-mix(in srgb, var(--project-color) 24%, transparent);
+  transition: background-size 600ms var(--vf-ease-island), opacity 160ms ease;
+}
+
+/* the first run's honest room: per-runtime meters, no fiction */
+.ah-coldstart { display: flex; flex-direction: column; gap: 9px; width: min(340px, 84%); margin-top: 4px; }
+.ah-coldstart__row { display: grid; grid-template-columns: 86px 1fr; gap: 3px 10px; align-items: center; text-align: left; }
+.ah-coldstart__row .ah-meter { width: 100%; }
+.ah-coldstart__kind {
+  color: var(--vf-text-secondary); font-size: 10px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-coldstart__caption {
+  grid-column: 2; color: var(--vf-text-faint); font-size: 9px;
+  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-coldstart__row[data-state="done"] .ah-meter i { background: var(--vf-green); }
+.ah-coldstart__row[data-state="queued"] .ah-coldstart__kind { color: var(--vf-text-faint); }
+
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   THE FILE VIEWER — new vocabulary.
+   
+   Everything above this line is a port of protos/agent-history-proto, class
+   names and all, and the two are diffed against each other. The design record
+   has no file viewer, so `ah-fileview*` and `ah-code/md/image/hex` are the
+   app's own names and must NOT be diffed against the proto.
+   
+   What it does not invent is material. DESIGN.md §5 already specifies a
+   dialog and tokens.css already carries `--vf-shadow-dialog`,
+   `--vf-backdrop-dim` and the sheet surface — and until now nothing in this
+   room spent them. This is their first user. No new colour tokens, and the
+   one new measurement (`--ah-code-line`) is declared in CodeView.tsx, which
+   owns it because the virtualizer scrolls by it.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* M5, the stage recedes: a dialog is focus made physical, so the room behind
+   it steps back rather than merely dimming. The room marks its own root while
+   one of its dialogs is open, because the dialog is portalled out of it. */
+.ah-room { transition: transform 240ms var(--vf-ease-island); }
+.ah-frame[data-ah-overlay] .ah-room { transform: scale(0.98); }
+
+.ah-fileview__backdrop {
+  position: fixed; inset: 0; z-index: 60;
+  background: var(--vf-backdrop-dim);
+  backdrop-filter: blur(2px);
+  -webkit-app-region: no-drag;
+  animation: ah-fade-in 200ms ease;
+}
+.ah-fileview__backdrop[data-state="closed"] { animation: ah-fade-out 160ms ease forwards; }
+
+.ah-fileview {
+  position: fixed; z-index: 61;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex; flex-direction: column;
+  width: min(1080px, 92%); height: min(760px, 86%);
+  border-radius: var(--vf-radius-card);
+  /* Opaque, not the sheet's glass: this frame's job is to be read through by
+     nobody. Code at 12.5px over a blurred room is a legibility tax the room
+     is not asking anyone to pay. */
+  background: var(--vf-chrome-solid);
+  box-shadow: var(--vf-shadow-dialog);
+  overflow: hidden;
+  -webkit-app-region: no-drag;
+  animation: ah-fileview-in 240ms var(--vf-ease-island);
+}
+.ah-fileview[data-state="closed"] { animation: ah-fileview-out 160ms ease forwards; }
+.ah-fileview:focus-visible, .ah-fileview:focus { outline: none; }
+.ah-fileview[data-fullscreen] {
+  inset: 0;
+  width: 100%; height: 100%;
+  border-radius: 0;
+  transform: none;
+  animation: none;
+}
+
+@keyframes ah-fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes ah-fade-out { to { opacity: 0; } }
+@keyframes ah-fileview-in {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.985); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+@keyframes ah-fileview-out {
+  to { opacity: 0; transform: translate(-50%, -50%) scale(0.99); }
+}
+
+/* M6 is a quality floor, not a preference: morphs become fades, and the
+   stage stops travelling. */
+@media (prefers-reduced-motion: reduce) {
+  .ah-room { transition: none; }
+  .ah-frame[data-ah-overlay] .ah-room { transform: none; }
+  .ah-fileview, .ah-fileview__backdrop { animation-duration: 1ms; }
+}
+
+/* ── the band ──────────────────────────────────────────────────────────── */
+
+.ah-fileview__head {
+  flex: none;
+  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
+  gap: 2px 12px;
+  padding: 12px 12px 11px 16px;
+  border-bottom: 1px solid var(--vf-hairline);
+}
+.ah-fileview__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ah-fileview__title .ah-colhead { min-width: 0; flex: 0 1 auto; }
+.ah-fileview__title .ah-colhead > strong { font-size: 12px; }
+/* The kind chip is the neutral badge the column head already uses for a
+   count — same weight, same ground — because it is doing the same job: one
+   fact, travelling beside the name it is about. */
+.ah-fileview__kind {
+  flex: none; padding: 1px 7px; border-radius: 999px;
+  background: var(--vf-fill); color: var(--vf-text-tertiary);
+  font-size: 9.5px; letter-spacing: 0.02em; white-space: nowrap;
+}
+.ah-fileview__acts { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; }
+.ah-fileview__browsers {
+  display: flex; align-items: center; gap: 3px; flex: none;
+  padding-right: 7px; margin-right: 3px; border-right: 1px solid var(--vf-hairline);
+}
+.ah-fileview__browser img { display: block; width: 20px; height: 20px; object-fit: contain; }
+.ah-fileview__browser[aria-busy="true"] { opacity: .55; }
+.ah-fileview__browser-fallback { font-size: 12px; font-weight: 600; }
+.ah-fileview__browser-status { color: var(--vf-text-faint); font-size: 10px; white-space: nowrap; padding: 0 4px; }
+@media (max-width: 680px) {
+  .ah-fileview__acts { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; flex-wrap: wrap; padding-top: 6px; }
+  .ah-fileview__browsers { flex-wrap: wrap; max-width: 100%; }
+}
+.ah-fileview__acts .ah-seg { margin: 0 6px 0 0; }
+.ah-fileview__acts .ah-iconbtn:disabled {
+  cursor: default; opacity: .38; color: var(--vf-text-tertiary); background: var(--vf-fill);
+}
+/* A long path truncates at its HEAD: the folder you are in is the end of the
+   string, and it is the end that identifies the file. `direction: rtl` is
+   what moves the ellipsis there — and the `<bdi>` inside is not optional,
+   because without an isolate the same rule also walks the leading `/` around
+   to the far end and prints a path that does not exist. */
+.ah-fileview__path {
+  grid-column: 1; grid-row: 2; margin: 0; min-width: 0;
+  color: var(--vf-text-faint); font-size: 10px; direction: rtl; text-align: left;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.ah-visually-hidden {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+
+/* ── the body, and the states that are not a document ──────────────────── */
+
+.ah-fileview__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
+.ah-fileview__scroll { flex: 1; min-height: 0; overflow: auto; }
+.ah-fileview__scroll::-webkit-scrollbar { width: 9px; height: 9px; }
+.ah-fileview__scroll::-webkit-scrollbar-thumb {
+  border: 3px solid transparent; border-radius: 999px;
+  background: var(--vf-hairline-strong); background-clip: content-box;
+}
+.ah-fileview__scroll::-webkit-scrollbar-corner { background: var(--vf-chrome-solid); }
+
+.ah-fileview__state {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 7px; padding: 30px 40px; text-align: center;
+}
+.ah-fileview__state b { color: var(--vf-text-secondary); font-size: 12.5px; font-weight: 500; }
+.ah-fileview__state span { max-width: 44ch; color: var(--vf-text-faint); font-size: 11px; line-height: 1.55; }
+/* A local read lands in single-digit milliseconds. Announcing it would be a
+   flash of text, so the wait only appears once it is long enough to be worth
+   a word — the loading veil's own rule (DESIGN.md §8 B4), one surface down. */
+.ah-fileview__state[data-waiting] { opacity: 0; animation: ah-fade-in 140ms ease 280ms forwards; }
+
+/* ── the code view ─────────────────────────────────────────────────────── */
+
+.ah-code-shell {
+  --ah-code-minimap-width: 72px;
+  position: relative; flex: 1; min-width: 0; min-height: 0; display: flex;
+}
+.ah-code-shell > .ah-code { min-width: 0; }
+.ah-code-shell:has(> .ah-code-minimap) .ah-code__line {
+  padding-right: var(--ah-code-minimap-width);
+}
+
+.ah-code-minimap {
+  position: absolute; z-index: 2; top: 0; right: 0; bottom: 0;
+  width: var(--ah-code-minimap-width); overflow: hidden;
+  background: var(--vf-chrome-solid); user-select: none; touch-action: none;
+  contain: paint;
+}
+.ah-code-minimap__stage {
+  position: relative; width: 100%; overflow: hidden; cursor: pointer;
+}
+.ah-code-minimap__text {
+  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
+  pointer-events: none; image-rendering: pixelated;
+}
+.ah-code-minimap__slider {
+  position: absolute; z-index: 1; top: 0; left: 0; right: 0;
+  border: 1px solid color-mix(in srgb, var(--vf-text-primary) 22%, transparent);
+  background: color-mix(in srgb, var(--vf-text-primary) 12%, transparent);
+  opacity: 0.4; cursor: ns-resize; will-change: transform;
+  transition: opacity 90ms linear;
+}
+.ah-code-minimap:hover .ah-code-minimap__slider,
+.ah-code-minimap__slider.is-dragging { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+  .ah-code-minimap__slider { transition: none; }
+}
+
+.ah-code {
+  padding: 8px 0 16px;
+  overflow-x: hidden;
+  font-family: var(--vf-font-mono); font-size: 12.5px;
+  /* Must equal LINE_HEIGHT in CodeView.tsx. It is the estimate and minimum
+     pitch; wrapped rows are measured by the virtualizer at their real height. */
+  --ah-code-line: 19px;
+  /* The gutter's digits come from the view (`--ah-code-digits`, widest line
+     number); the space around them is the stylesheet's. */
+  --ah-code-gutter: calc(var(--ah-code-digits, 3ch) + 30px);
+  --ah-code-trail: 24px;
+  line-height: var(--ah-code-line);
+  tab-size: 2;
+}
+.ah-code__sizer { position: relative; width: 100%; }
+.ah-code__line {
+  position: absolute; top: 0; left: 0; display: flex; width: 100%;
+  min-height: var(--ah-code-line);
+}
+.ah-code__num {
+  position: sticky; left: 0; z-index: 1; flex: none;
+  width: var(--ah-code-gutter); padding: 0 14px 0 16px; text-align: right;
+  background: var(--vf-chrome-solid);
+  color: var(--vf-text-faint); font-size: 11px; font-variant-numeric: tabular-nums;
+  user-select: none;
+}
+.ah-code__line code {
+  flex: 1; min-width: 0; padding-right: var(--ah-code-trail);
+  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--vf-text-secondary);
+}
+
+/* ── the syntax palette ────────────────────────────────────────────────────
+   DESIGN.md §2.6's curated eight, spent on a closed set of token kinds —
+   "these group and label; they never signal state", which is exactly what a
+   token kind does. Six of the eight; red and pink are left alone, because red
+   means failure everywhere else in this room.
+   
+   Only lightness moves between themes, the way `--tint-l` already does for
+   project identity: the same six hues in both, mixed toward the ground so
+   neither theme has to invent a colour. */
+.ah-fileview, .ah-syntax {
+  --ah-syn-keyword: color-mix(in oklab, var(--vf-accent-6) 88%, black);
+  --ah-syn-type: color-mix(in oklab, var(--vf-accent-4) 84%, black);
+  --ah-syn-function: color-mix(in oklab, var(--vf-accent-8) 92%, black);
+  --ah-syn-string: color-mix(in oklab, var(--vf-accent-3) 82%, black);
+  --ah-syn-value: color-mix(in oklab, var(--vf-accent-5) 88%, black);
+  --ah-syn-property: color-mix(in oklab, var(--vf-accent-1) 94%, black);
+}
+.dark .ah-fileview, .dark .ah-syntax {
+  --ah-syn-keyword: color-mix(in oklab, var(--vf-accent-6) 72%, white);
+  --ah-syn-type: color-mix(in oklab, var(--vf-accent-4) 88%, white);
+  --ah-syn-function: color-mix(in oklab, var(--vf-accent-8) 74%, white);
+  --ah-syn-string: color-mix(in oklab, var(--vf-accent-3) 82%, white);
+  --ah-syn-value: color-mix(in oklab, var(--vf-accent-5) 76%, white);
+  --ah-syn-property: color-mix(in oklab, var(--vf-accent-1) 64%, white);
+}
+
+/* Scoped to the two syntax hosts. Unscoped, `[data-t=…]` is nine global
+   selectors waiting for the first component that picks the same attribute. */
+:is(.ah-fileview, .ah-syntax) [data-t="comment"] { color: var(--vf-text-faint); font-style: italic; }
+:is(.ah-fileview, .ah-syntax) [data-t="operator"] { color: var(--vf-text-tertiary); }
+:is(.ah-fileview, .ah-syntax) [data-t="keyword"] { color: var(--ah-syn-keyword); }
+/* A markup tag is the keyword of its language, and an attribute is a
+   property. Two syntaxes, the same two roles — so the same two colours,
+   rather than a second palette for a reader to learn. */
+:is(.ah-fileview, .ah-syntax) [data-t="tag"] { color: var(--ah-syn-keyword); }
+:is(.ah-fileview, .ah-syntax) [data-t="type"] { color: var(--ah-syn-type); }
+:is(.ah-fileview, .ah-syntax) [data-t="function"] { color: var(--ah-syn-function); }
+:is(.ah-fileview, .ah-syntax) [data-t="string"] { color: var(--ah-syn-string); }
+/* Numbers and named literals are one idea — a value the language spells for
+   you — and they share an accent to say so. */
+:is(.ah-fileview, .ah-syntax) [data-t="number"],
+:is(.ah-fileview, .ah-syntax) [data-t="constant"] { color: var(--ah-syn-value); }
+:is(.ah-fileview, .ah-syntax) [data-t="property"] { color: var(--ah-syn-property); }
+
+/* ── the markdown view ─────────────────────────────────────────────────── */
+
+.ah-md { padding: 4px 0 40px; }
+/* The transcript's own setting, one surface over: 68ch at 14px/1.55, declared
+   on the box that carries the font size, because `ch` resolves against the
+   element's own font (design record §10, delta 3's implementation note). */
+.ah-md__measure {
+  max-width: 68ch; margin: 0 auto; padding: 18px 28px 0;
+  color: var(--vf-text-secondary); font-size: 14px; line-height: 1.55;
+}
+.ah-markdown > :first-child { margin-top: 0; }
+.ah-markdown h1, .ah-markdown h2, .ah-markdown h3,
+.ah-markdown h4, .ah-markdown h5, .ah-markdown h6 {
+  margin: 26px 0 9px; color: var(--vf-text-primary); font-weight: 600; line-height: 1.3;
+}
+.ah-markdown h1 { font-size: 20px; }
+.ah-markdown h2 { font-size: 16.5px; padding-bottom: 6px; border-bottom: 1px solid var(--vf-hairline); }
+.ah-markdown h3 { font-size: 14.5px; }
+.ah-markdown h4, .ah-markdown h5, .ah-markdown h6 {
+  font-size: 13px; color: var(--vf-text-secondary);
+}
+.ah-markdown p { margin: 0 0 12px; }
+.ah-markdown strong { color: var(--vf-text-primary); font-weight: 600; }
+.ah-markdown s { color: var(--vf-text-faint); }
+.ah-markdown a { color: var(--vf-cyan); text-decoration: none; }
+.ah-markdown a:hover { text-decoration: underline; }
+.ah-markdown code {
+  padding: 1px 4px; border-radius: 4px; background: var(--vf-fill);
+  font-family: var(--vf-font-mono); font-size: 12px; color: var(--vf-text-primary);
+}
+.ah-markdown ul, .ah-markdown ol { margin: 0 0 12px; padding-left: 22px; }
+.ah-markdown li { margin-bottom: 5px; }
+.ah-markdown li > ul, .ah-markdown li > ol { margin: 5px 0 0; }
+/* A tight list is one the author wrote without blank lines, and it should
+   read as one block rather than as a column of paragraphs. */
+.ah-markdown [data-tight] > li > p { margin: 0; }
+.ah-markdown blockquote {
+  margin: 0 0 12px; padding: 2px 0 2px 14px;
+  border-left: 2px solid var(--vf-hairline-strong); color: var(--vf-text-tertiary);
+}
+.ah-markdown blockquote > :last-child { margin-bottom: 0; }
+.ah-markdown hr { margin: 22px 0; border: 0; border-top: 1px solid var(--vf-hairline); }
+.ah-md__code {
+  margin: 0 0 14px; padding: 10px 13px; border-radius: 10px;
+  background: var(--vf-fill); overflow-x: auto;
+  font-family: var(--vf-font-mono); font-size: 12px; line-height: 1.5;
+  color: var(--vf-text-secondary);
+}
+.ah-md__code code { padding: 0; border-radius: 0; background: none; font-size: inherit; }
+/* A wide table scrolls inside its own box: the document's measure is a rule
+   about the prose, and a table is not allowed to overrule it. */
+.ah-md__tablebox { margin: 0 0 14px; overflow-x: auto; }
+.ah-markdown table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
+.ah-markdown th, .ah-markdown td {
+  padding: 6px 10px; border-bottom: 1px solid var(--vf-hairline); text-align: left;
+  vertical-align: top;
+}
+.ah-markdown th { color: var(--vf-text-primary); font-weight: 500; white-space: nowrap; }
+.ah-markdown thead tr { border-bottom: 1px solid var(--vf-hairline-strong); }
+/* An embedded image is named, not fetched — see markdown/render.tsx. */
+.ah-md__image {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 1px 7px; border: 1px dashed var(--vf-hairline-strong); border-radius: 6px;
+  color: var(--vf-text-faint); font-size: 11px;
+}
+.ah-md__image::before { content: "▨"; opacity: 0.6; }
+/* A link this viewer cannot follow keeps its text and loses its promise. */
+.ah-md__deadlink { color: var(--vf-text-tertiary); border-bottom: 1px dotted var(--vf-hairline-strong); }
+
+/* ── the image view ────────────────────────────────────────────────────── */
+
+.ah-image { position: relative; flex: 1; min-height: 0; display: flex; }
+.ah-image__frame { display: flex; align-items: center; justify-content: center; padding: 18px; }
+.ah-image__loading { position: absolute; inset: 50% 0 auto; text-align: center; color: var(--vf-text-tertiary); pointer-events: none; }
+.ah-image img { display: block; border-radius: 4px; }
+.ah-image[data-mode="fit"] img { max-width: 100%; max-height: 100%; object-fit: contain; }
+/* At 1:1 a picture larger than the frame is scrolled from its top-left, the
+   way an image is read, rather than from its middle. */
+.ah-image[data-mode="actual"] .ah-image__frame { align-items: flex-start; justify-content: flex-start; }
+.ah-image[data-mode="actual"] img { max-width: none; max-height: none; }
+/* Over the frame, never inside its flow: as a sibling of the picture this
+   was laid out beside it and wrapped into the middle of a wide one. */
+.ah-image__facts {
+  position: absolute; left: 15px; bottom: 13px;
+  padding: 2px 8px; border-radius: 999px;
+  background: var(--vf-chrome-surface); backdrop-filter: blur(12px);
+  color: var(--vf-text-faint); font-size: 10px;
+}
+
+/* ── the hex view ──────────────────────────────────────────────────────── */
+
+.ah-hex {
+  padding: 0 0 20px;
+  font-family: var(--vf-font-mono); font-size: 11px; line-height: 1.65;
+}
+.ah-hex__note {
+  position: sticky; top: 0; z-index: 1; margin: 0 0 8px;
+  padding: 11px 18px; border-bottom: 1px solid var(--vf-hairline);
+  background: var(--vf-chrome-solid);
+  color: var(--vf-text-faint); font-family: var(--vf-font-sans); font-size: 11px;
+}
+.ah-hex__row { display: flex; gap: 16px; padding: 0 18px; white-space: pre; }
+.ah-hex__offset { color: var(--vf-text-faint); }
+.ah-hex__bytes { color: var(--vf-text-secondary); }
+.ah-hex__text { color: var(--vf-text-tertiary); }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   COLUMN ⑤ — THE REPOSITORY'S GIT (design record §8)
+
+   `.ah-commit`, `.ah-gitseg` and `.ah-push` are the proto's own vocabulary
+   and ARE diffed against it. `.ah-changerow` and `.ah-diff*` are the app's:
+   the record draws the change groups as mille subtrees, which mille cannot
+   serve over a filtered set, so they are the room's own rows wearing mille's
+   geometry — the same row height and indent, so the two columns read as one
+   repository rather than as two components that happen to be adjacent.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* the switch is the only thing in its row, so it takes the row: "a switch's
+   shape is its material, not its width" (§8) */
+.ah-seg.ah-gitseg { display: flex; flex: 1; }
+.ah-seg.ah-gitseg button { flex: 1; height: 20px; padding: 0 9px; font-size: 10px; }
+
+/* ── the change rows ───────────────────────────────────────────────────── */
+
+.ah-changetree { padding: 0 6px 2px; }
+.ah-changerow {
+  display: flex; align-items: center; gap: 6px;
+  height: var(--vf-tree-row-height); border-radius: 7px;
+  padding-right: 4px;
+}
+.ah-changerow:hover { background: var(--vf-fill); }
+/* the active entry wears `--vf-fill` and nothing else uses that fill —
+   DESIGN.md §8, and the reason the open diff is legible at a glance */
+.ah-changerow[data-selected] { background: var(--vf-fill-hover); }
+.ah-changerow__name {
+  display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1;
+  border: 0; background: transparent; padding: 0;
+  color: var(--vf-text-secondary); font-size: 11.5px; text-align: left;
+}
+.ah-changerow__name > span {
+  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-changerow[data-kind="directory"] .ah-changerow__name {
+  color: var(--vf-text-faint); font-size: 10.5px;
+}
+.ah-changerow[data-selected] .ah-changerow__name { color: var(--vf-text-primary); }
+
+/* the session mark: the one fact a git client cannot show. A dot, in the
+   project's own §2.6 tint — it says WHICH session, and hue means which.
+   The slot is always there, so a marked row and an unmarked one line up
+   their glyphs; only the dot itself comes and goes. */
+.ah-changerow__mark { flex: none; width: 5px; height: 5px; border-radius: 999px; }
+.ah-changerow__mark[data-touched] { background: var(--tint, var(--vf-text-tertiary)); }
+
+/* mille's own glyph, at column ③'s size: one repository, one icon set */
+.ah-changerow__icon { flex: none; width: 13px; height: 13px; }
+.ah-changerow__icon svg { width: 100%; height: 100%; display: block; }
+
+/* git's own letter, in the §2.5 hue its meaning earns — added is a positive
+   delta, deleted a negative one. Everything else is a state the ramp carries
+   without spending a colour on it. The slot holds its width when empty so
+   the names align down the column. */
+.ah-changerow__letter {
+  flex: none; width: 9px; text-align: center;
+  font-family: var(--vf-font-mono); font-size: 10px; font-weight: 500;
+  color: var(--vf-text-tertiary);
+}
+.ah-changerow__letter[data-letter="A"] { color: var(--vf-green); }
+.ah-changerow__letter[data-letter="D"] { color: var(--vf-red); }
+.ah-changerow__letter[data-letter="U"] { color: var(--vf-orange); }
+.ah-changerow__letter[data-letter="?"] { color: var(--vf-text-faint); }
+
+/* the acts appear on hover: a reading column does not carry two buttons per
+   row at rest, and a row you are not pointing at is not one you are staging */
+.ah-changerow__acts { display: flex; align-items: center; gap: 2px; flex: none; opacity: 0; }
+.ah-changerow:hover .ah-changerow__acts,
+.ah-changerow:focus-within .ah-changerow__acts { opacity: 1; }
+.ah-changerow__acts button {
+  width: 18px; height: 18px; border: 0; border-radius: 5px; padding: 0;
+  background: transparent; color: var(--vf-text-tertiary); font-size: 12px; line-height: 1;
+}
+.ah-changerow__acts button:hover { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+
+/* ── the commit row: the session row, one object down ──────────────────── */
+
+.ah-commit {
+  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 9px;
+  width: 100%; padding: 9px 10px 10px; border: 0; background: transparent; text-align: left;
+}
+.ah-commit + .ah-commit { border-top: 1px solid var(--vf-hairline); }
+/* The proto draws the boundary BECAUSE it has no hover to spend — its row is
+   not pressable, since it had no diff view to open. This one does, so it
+   earns the fill as well as the hairline. */
+.ah-commit:hover { background: var(--vf-fill); }
+.ah-commit[data-selected] { background: var(--vf-fill-hover); }
+.ah-commit__l1 { grid-column: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
+.ah-commit__l3 { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; min-width: 0; }
+.ah-commit strong {
+  display: block; min-width: 0; color: var(--vf-text-primary);
+  font-size: 11.5px; font-weight: 500; line-height: 1.35;
+}
+/* The proto calls this `ah-sessmeta` and the app renamed it to
+   `ah-session-list-item__metadata`, so the proto's name resolved to nothing
+   here and the line inherited the row's own font — twice the size it should
+   be, with its separators unspaced. Named for the row it belongs to, like
+   `__l1` and `__l3`, and carrying the values the proto sets. */
+.ah-commit__meta {
+  grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px;
+  color: var(--vf-text-faint); font-size: 10px; font-variant-numeric: tabular-nums;
+}
+.ah-commit code { font-family: var(--vf-font-mono); font-size: 9.5px; color: var(--vf-text-faint); }
+.ah-commit .ah-last { flex: none; }
+/* the ONE git state the row draws, because it is the one still actionable */
+.ah-push {
+  grid-column: 1; grid-row: 1; align-self: start; margin-top: 3px;
+  display: grid; place-items: center; width: 8px; height: 8px; color: var(--vf-text-tertiary);
+}
+.ah-push svg { width: 8px; height: 8px; display: block; }
+
+/* ── the diff ──────────────────────────────────────────────────────────────
+   Two gutters, then the mark, then the line. The line hues are §2.5's own
+   and need no exception: DESIGN.md defines `--vf-green` as "positive delta"
+   and `--vf-red` as "negative delta". What stays neutral is the diffstat
+   FIGURE — §8's rule that hue says which project or which state. */
+
+/* A diff's rows are as wide as the column, not as wide as their longest
+   line: the ground behind an added line says "this whole line is new", and a
+   ground that stops at the text says it about the text only. The code itself
+   still scrolls sideways inside the row. */
+.ah-diff .ah-code__sizer { width: 100%; }
+.ah-diff .ah-code__line { width: 100%; }
+.ah-diff .ah-code__line code { flex: 1; min-width: 0; }
+
+/* the file's own figure, above its hunks */
+.ah-diff__stat {
+  position: sticky; top: 0; z-index: 2; margin: 0;
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 16px; border-bottom: 1px solid var(--vf-hairline);
+  background: var(--vf-chrome-solid);
+  color: var(--vf-text-tertiary); font-family: var(--vf-font-sans); font-size: 11px;
+}
+.ah-diff__renamed {
+  color: var(--vf-text-faint); min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.ah-diff .ah-code__num:first-of-type { padding-right: 6px; padding-left: 12px; }
+.ah-diff .ah-code__num {
+  width: calc(var(--ah-code-digits, 3ch) + 18px);
+  padding: 0 6px 0 0; background: transparent;
+}
+.ah-diff__mark {
+  flex: none; width: 16px; text-align: center; user-select: none;
+  color: var(--vf-text-faint);
+}
+.ah-diff .ah-code__line { align-items: center; }
+.ah-diff .ah-code__line[data-diff="add"] { background: color-mix(in srgb, var(--vf-green) 11%, transparent); }
+.ah-diff .ah-code__line[data-diff="del"] { background: color-mix(in srgb, var(--vf-red) 11%, transparent); }
+.ah-diff .ah-code__line[data-diff="add"] .ah-diff__mark { color: var(--vf-green); }
+.ah-diff .ah-code__line[data-diff="del"] .ah-diff__mark { color: var(--vf-red); }
+.ah-diff .ah-code__line[data-diff="note"] code { color: var(--vf-text-faint); }
+.ah-diff .ah-code__line[data-diff="note"] em { font-style: italic; }
+
+/* the hunk header: git's own `@@` plus the enclosing function it names */
+.ah-diff .ah-code__line[data-diff="hunk"] { background: var(--vf-fill); }
+.ah-diff__hunk { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-width: 0; }
+.ah-diff__range { color: var(--vf-text-faint); font-size: 10.5px; flex: none; }
+.ah-diff__context {
+  color: var(--vf-text-tertiary); font-size: 11px; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+/* ── the confirm: the one thing this room asks before doing ─────────────── */
+
+.ah-confirm {
+  position: fixed; z-index: 61; top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(420px, 88%); padding: 20px 22px 18px;
+  border-radius: 18px; background: var(--vf-chrome-solid);
+  box-shadow: var(--vf-shadow-dialog);
+  animation: ah-fileview-in 200ms var(--vf-ease-island);
+}
+.ah-confirm__title { margin: 0 0 8px; color: var(--vf-text-primary); font-size: 13.5px; font-weight: 600; }
+.ah-confirm__body p { margin: 0; color: var(--vf-text-tertiary); font-size: 12px; line-height: 1.55; }
+.ah-confirm__list {
+  margin: 10px 0 0; padding: 8px 10px; max-height: 148px; overflow: auto;
+  border-radius: 9px; background: var(--vf-fill); list-style: none;
+  font-family: var(--vf-font-mono); font-size: 10.5px; color: var(--vf-text-secondary);
+}
+.ah-confirm__list li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ah-confirm__list li[data-more] { color: var(--vf-text-faint); font-family: var(--vf-font-sans); }
+.ah-confirm__acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.ah-confirm__acts button {
+  height: 28px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 12px;
+  transition: opacity 140ms ease, transform 120ms ease;
+}
+.ah-confirm__acts button:active { transform: scale(0.97); }
+.ah-confirm__cancel { background: var(--vf-fill); color: var(--vf-text-secondary); }
+.ah-confirm__cancel:hover { background: var(--vf-fill-hover); }
+.ah-confirm__go { background: var(--vf-foreground); color: var(--vf-canvas-bg); font-weight: 500; }
+/* red is §2.5's "destructive", which is exactly what this button is */
+.ah-confirm__go[data-destructive] { background: var(--vf-red); color: var(--vf-state-on-solid); }
+.ah-confirm__go:hover { opacity: 0.9; }
+.ah-confirm button:focus-visible { outline: 2px solid var(--vf-select); outline-offset: 2px; }
+
+/* ── inside one commit ─────────────────────────────────────────────────── */
+
+/* The head still names the object the column is showing — which, while a
+   commit is open, is the commit. The way back names the branch it returns
+   to rather than just pointing at it. */
+.ah-backhead { display: flex; align-items: center; gap: 2px; min-width: 0; }
+.ah-backhead .ah-colhead { min-width: 0; }
+.ah-back {
+  flex: none; width: 18px; height: 18px; margin-left: -4px; padding: 0;
+  border: 0; border-radius: 6px; background: transparent;
+  color: var(--vf-text-tertiary); font-size: 15px; line-height: 1;
+}
+.ah-back:hover { background: var(--vf-fill-hover); color: var(--vf-text-primary); }
+
+/* The row above had to truncate a long subject; this is the surface that
+   does not, so the message is given in full before its files. */
+.ah-commitmsg {
+  margin: 0; padding: 11px 12px 3px;
+  color: var(--vf-text-secondary); font-size: 12px; line-height: 1.45;
+}
+
+/* A commit's byline can name two or three people; it truncates rather than
+   pushing the diffstat off the row. */
+.ah-commit__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* who git says wrote it, on the surface with room to name all of them */
+.ah-commitwho {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
+  margin: 0; padding: 0 12px 9px;
+  color: var(--vf-text-faint); font-size: 10px;
+}
+.ah-commitwho span { color: var(--vf-text-tertiary); }
+/* a co-author is named, not badged: the glyph is what §8 rules out, and a
+   dot before the name says "and" without spending a second vocabulary */
+.ah-commitwho span[data-co]::before { content: "· "; color: var(--vf-text-faint); }
+.ah-commitwho time { margin-left: auto; font-variant-numeric: tabular-nums; }
+
+/* three tabs over one checkout, so the track holds three */
+.ah-seg.ah-gitseg button { padding: 0 6px; }
+
+/* The agent that co-signed the commit, at the end of the message line.
+   §2.6's rule for provider identity: monochrome at `currentColor`, carrying
+   no hue of its own — the row's tint is the project's and this is not a
+   second colour competing with it. */
+.ah-commit__agents { flex: none; gap: 3px; margin-top: 1px; }
+.ah-commit__agents .ah-agent { width: 11px; height: 11px; opacity: 0.5; }
+.ah-commit:hover .ah-commit__agents .ah-agent,
+.ah-commit[data-selected] .ah-commit__agents .ah-agent { opacity: 0.75; }
+
+/* ── the commit, opened over the room ──────────────────────────────────────
+   The shape a commit wanted and a 280px column could not give it: the files
+   on the left, the change on the right, both at once. Same shell as the file
+   viewer, one size wider, because two panes need the room. */
+
+.ah-fileview[data-wide] { width: min(1320px, 94%); height: min(820px, 90%); }
+
+.ah-commitview__head { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 9px; }
+.ah-commitview__subject {
+  min-width: 0; color: var(--vf-text-primary); font-size: 13px; font-weight: 600;
+  line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* Everyone and everything git says about it, on one line under the message:
+   the people it does not draw as marks, the agents it does, the sha, the
+   neutral diffstat, and the date. */
+.ah-commitview__meta {
+  grid-column: 1 / -1; margin: 5px 0 0;
+  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px;
+  color: var(--vf-text-faint); font-size: 10.5px;
+}
+.ah-commitview__meta > span { color: var(--vf-text-tertiary); }
+.ah-commitview__meta code { font-family: var(--vf-font-mono); font-size: 10px; }
+.ah-commitview__meta .ah-agent { width: 12px; height: 12px; opacity: 0.6; }
+.ah-commitview__meta time { margin-left: auto; }
+
+.ah-commitview { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
+.ah-commitview__files {
+  display: flex; flex-direction: column; min-height: 0;
+  border-right: 1px solid var(--vf-hairline);
+}
+.ah-commitview__files .ah-group { padding: 11px 12px 7px; }
+.ah-commitview__list { flex: 1; min-height: 0; overflow: auto; padding-bottom: 10px; }
+.ah-commitview__list::-webkit-scrollbar { width: 9px; }
+.ah-commitview__list::-webkit-scrollbar-thumb {
+  border: 3px solid transparent; border-radius: 999px;
+  background: var(--vf-hairline-strong); background-clip: content-box;
+}
+
+.ah-commitview__diff { display: flex; flex-direction: column; min-height: 0; }
+/* The pane names the file it is showing, because the list beside it can be
+   scrolled away from the selection. */
+.ah-commitview__path {
+  flex: none; margin: 0; padding: 9px 16px; border-bottom: 1px solid var(--vf-hairline);
+  color: var(--vf-text-tertiary); font-size: 10.5px;
+  direction: rtl; text-align: left;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.ah-commitview__diff .ah-diff__stat { padding-top: 8px; padding-bottom: 8px; }