@hybridlabor-api/bdb-synapse 1.0.0

package/web/src/styles.css

@@ -0,0 +1,2565 @@
+/* mindwalk — nocturnal observatory.
+   Light is data: only touch states and trails may glow. */
+
+:root {
+  color-scheme: dark;
+
+  --sky: oklch(0.19 0.016 258);
+  --panel: oklch(0.245 0.014 256);
+  --panel-raised: oklch(0.285 0.014 254);
+  --hairline: oklch(0.37 0.014 254);
+  --hairline-strong: oklch(0.46 0.016 252);
+
+  --ink: oklch(0.91 0.014 88);
+  --muted: oklch(0.72 0.02 252);
+  --faint: oklch(0.63 0.02 252);
+
+  /* type scale: two UI sizes (1.2 step), display sizes for the stage */
+  --text-xs: 0.75rem;
+  --text-sm: 0.9rem;
+  --text-lg: 1.35rem;
+
+  /* the light scale (touch states: what the scene and HUD glow with) */
+  --moss: oklch(0.78 0.11 131);
+  --moon: oklch(0.83 0.07 250);
+  --amber: oklch(0.79 0.13 68);
+  --ember: oklch(0.73 0.16 52);
+  --pine: oklch(0.72 0.09 155);
+  --alarm: oklch(0.7 0.16 32);
+
+  /* timeline action spectrum: cool = observation, warm = mutation;
+     chroma tracks importance so edits outshine the background hum */
+  --act-search: oklch(0.74 0.09 192);
+  --act-read: oklch(0.8 0.07 242);
+  --act-edit: oklch(0.8 0.16 75);
+  --act-verify: oklch(0.75 0.13 145);
+  --act-exec: oklch(0.58 0.02 255);
+  --mark-compaction: oklch(0.66 0.2 32);
+  --mark-subagent: oklch(0.74 0.09 300);
+
+  --font-display: "Fraunces Variable", "Songti SC", "Noto Serif SC", serif;
+  --font-body: "Schibsted Grotesk Variable", "PingFang SC", "Hiragino Sans GB",
+    "Noto Sans SC", system-ui, sans-serif;
+
+  color: var(--ink);
+  background: var(--sky);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.5;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+button,
+input {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  border: 0;
+  background: none;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+p,
+dl,
+dd {
+  margin: 0;
+}
+
+::selection {
+  background: oklch(0.79 0.13 68 / 0.35);
+}
+
+:focus-visible {
+  outline: 1.5px solid var(--amber);
+  outline-offset: 2px;
+}
+
+/* ---------- frame ---------- */
+
+.app-frame {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--sky);
+}
+
+.stage {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewport {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.city-scene {
+  position: absolute;
+  inset: 0;
+}
+
+.city-scene canvas {
+  display: block;
+}
+
+/* ---------- session rail ---------- */
+
+.session-rail {
+  flex: none;
+  width: 292px;
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border-right: 1px solid var(--hairline);
+  transition: margin 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
+}
+
+/* slide out by margin so the rail's content never reflows mid-transition;
+   visibility drops it from the tab order once hidden */
+.session-rail.collapsed {
+  margin-left: -293px;
+  visibility: hidden;
+  transition: margin 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.28s;
+}
+
+.rail-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 20px 18px 14px;
+}
+
+.wordmark {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 480;
+  font-size: 1.5rem;
+  letter-spacing: 0.01em;
+  line-height: 1;
+}
+
+/* the mark's tile is the night sky; a hairline keeps it a window, not a hole */
+.wordmark svg {
+  flex: none;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px var(--hairline);
+}
+
+.wordmark .spark {
+  color: var(--amber);
+}
+
+.rail-head-actions {
+  display: flex;
+  gap: 2px;
+}
+
+.rail-head .icon-btn {
+  transform: translateY(2px);
+}
+
+/* reopens the rail once it has slid away; sits where the wordmark was */
+.rail-expand {
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  z-index: 5;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  background: var(--panel);
+  color: var(--muted);
+}
+
+.rail-expand:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+/* search + filter chips form one control zone above the list */
+.rail-controls {
+  display: grid;
+  gap: 9px;
+  margin: 0 18px 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.rail-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--faint);
+}
+
+.rail-filter input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  color: var(--ink);
+  font-size: var(--text-sm);
+}
+
+.rail-filter input::placeholder {
+  color: var(--faint);
+}
+
+.rail-filter input:focus {
+  outline: none;
+}
+
+.rail-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.chip {
+  padding: 3px 10px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.04em;
+}
+
+.chip:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.chip.active {
+  color: oklch(0.95 0.02 88);
+  background: var(--panel-raised);
+  border-color: var(--muted);
+}
+
+/* empty-session visibility: a quiet utility, styled like the refresh icon
+   rather than a peer of the source chips */
+.eye-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: auto;
+  border-radius: 4px;
+  color: var(--faint);
+}
+
+.eye-toggle:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.eye-toggle.showing {
+  color: oklch(0.95 0.02 88);
+  background: var(--panel-raised);
+}
+
+.session-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 10px 12px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--hairline) transparent;
+}
+
+.session-row {
+  position: relative;
+  width: 100%;
+  display: grid;
+  gap: 4px;
+  padding: 10px 10px 10px 14px;
+  border-radius: 4px;
+  text-align: left;
+}
+
+.session-row::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 12px;
+  bottom: 12px;
+  width: 2px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+.session-row:hover {
+  background: oklch(0.285 0.014 254 / 0.6);
+}
+
+.session-row.active {
+  background: var(--panel-raised);
+}
+
+.session-row.active::before {
+  background: var(--amber);
+  box-shadow: 0 0 8px oklch(0.79 0.13 68 / 0.55);
+}
+
+.session-title {
+  font-size: var(--text-sm);
+  font-weight: 560;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--ink);
+}
+
+.session-row.active .session-title {
+  color: oklch(0.95 0.02 88);
+}
+
+/* one fixed line: dot + text, ellipsized — row height never depends on
+   how long the branch name happens to be */
+.session-meta {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.02em;
+  font-variant-numeric: tabular-nums;
+}
+
+.session-row.active .session-meta {
+  color: var(--muted);
+}
+
+.session-meta-text {
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* rail-head map popover: the one entry point for opening any repository map */
+.rail-map {
+  position: relative;
+}
+
+.rail-map-pop {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 20;
+  display: grid;
+  /* minmax(0, …) keeps the track at the popover width — the form's intrinsic
+     width (input default size + button) is wider and would overflow it */
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  padding: 8px;
+  width: 240px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 6px;
+  background: var(--panel-raised);
+  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
+}
+
+/* primary choice: the active session's repo, name + full path visible */
+.rail-map-primary {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 8px 9px;
+  text-align: left;
+  color: var(--muted);
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+}
+
+.rail-map-primary:hover {
+  color: var(--ink);
+  background: var(--panel);
+}
+
+.rail-map-primary-text {
+  display: grid;
+  gap: 1px;
+  min-width: 0;
+}
+
+.rail-map-primary-name {
+  color: var(--ink);
+  font-size: var(--text-sm);
+  font-weight: 560;
+}
+
+.rail-map-primary-path {
+  font-size: var(--text-xs);
+  color: var(--faint);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  direction: rtl; /* keep the tail of long paths visible */
+  text-align: left;
+}
+
+.rail-map-divider {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 2px 0;
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.04em;
+}
+
+.rail-map-divider::before,
+.rail-map-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--hairline);
+}
+
+.rail-map-label {
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.rail-map-form {
+  display: flex;
+  gap: 6px;
+}
+
+.rail-map-input {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 8px;
+  color: var(--ink);
+  font-size: var(--text-sm);
+  background: var(--panel);
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+}
+
+.rail-map-input::placeholder {
+  color: var(--faint);
+}
+
+.rail-map-input:focus {
+  outline: none;
+  border-color: var(--muted);
+}
+
+.rail-map-go {
+  padding: 6px 11px;
+  color: var(--ink);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+}
+
+.rail-map-go:hover:not(:disabled) {
+  background: var(--panel);
+}
+
+.rail-map-go:disabled {
+  opacity: 0.4;
+}
+
+.rail-foot {
+  padding: 10px 18px 14px;
+  border-top: 1px solid var(--hairline);
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- HUD ---------- */
+
+.hud {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  padding: 20px 24px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.hud-left {
+  min-width: 0;
+  transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* clear the floating expand button */
+.rail-collapsed .hud-left {
+  margin-left: 42px;
+}
+
+.hud-repo {
+  font-family: var(--font-display);
+  font-weight: 540;
+  font-size: 1.6rem;
+  line-height: 1.1;
+  letter-spacing: 0.005em;
+}
+
+.hud-title-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+}
+
+.hud-lens {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 999px;
+  background: oklch(0.245 0.014 256 / 0.86);
+  color: var(--ink);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.02em;
+  pointer-events: auto;
+}
+
+.hud-lens:hover:not(:disabled),
+.hud-agent-link:hover:not(:disabled) {
+  color: var(--ink);
+  border-color: var(--amber);
+}
+
+.hud-lens:disabled,
+.hud-agent-link:disabled {
+  cursor: default;
+}
+
+.hud-lens span {
+  color: var(--amber);
+  font-size: 0.67rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.hud-commit {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.hud-commit .dirty {
+  color: var(--ember);
+}
+
+/* spectrum: scene legend and live tally in one instrument row */
+.spectrum {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 18px;
+  margin-top: 18px;
+  font-size: var(--text-xs);
+  letter-spacing: 0.03em;
+  font-variant-numeric: tabular-nums;
+  /* the HUD swallows pointer events; stats opt back in for their tooltips */
+  pointer-events: auto;
+}
+
+.spectrum-stat {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.spectrum-label {
+  color: var(--faint);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-decoration: underline dotted oklch(0.63 0.02 252 / 0.5);
+  text-underline-offset: 3px;
+}
+
+.spectrum-stat strong {
+  font-size: var(--text-sm);
+  font-weight: 560;
+  color: var(--ink);
+}
+
+.hud-quiet {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 14px;
+  margin-top: 7px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+  pointer-events: auto;
+}
+
+.hud-agent-link {
+  color: inherit;
+  border-bottom: 1px dotted var(--hairline-strong);
+}
+
+/* review: the one row allowed to raise its voice — ember marks "worth a
+   second look", pine marks the reassuring counter-signal */
+.hud-review {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 3px 14px;
+  margin-top: 8px;
+  font-size: var(--text-xs);
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+  pointer-events: auto;
+}
+
+.review-label {
+  color: var(--faint);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.hud-review .warn {
+  color: var(--ember);
+}
+
+.hud-review .ok {
+  color: var(--pine);
+}
+
+.churn-toggle {
+  font-size: inherit;
+  letter-spacing: inherit;
+  text-decoration: underline dotted oklch(0.73 0.16 52 / 0.6);
+  text-underline-offset: 3px;
+}
+
+.churn-toggle:hover,
+.churn-toggle.open {
+  color: oklch(0.82 0.16 52);
+}
+
+/* drill-down under the review row: which files, how many edits each */
+.churn-panel {
+  display: grid;
+  width: max-content;
+  min-width: 240px;
+  max-width: 340px;
+  margin-top: 8px;
+  padding: 5px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 5px;
+  background: oklch(0.245 0.014 256 / 0.97);
+  pointer-events: auto;
+}
+
+.churn-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 5px 8px;
+  border-radius: 3px;
+  text-align: left;
+  font-size: var(--text-xs);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.churn-row:hover {
+  background: var(--panel-raised);
+  color: var(--ink);
+}
+
+.churn-path {
+  direction: rtl; /* ellipsize the head: the tail of a path carries the name */
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  unicode-bidi: plaintext;
+}
+
+.churn-count {
+  flex: none;
+  color: var(--faint);
+}
+
+.churn-row:hover .churn-count {
+  color: var(--muted);
+}
+
+.churn-more {
+  padding: 4px 8px 3px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+/* instant hover definitions — native title is too slow for an instrument */
+[data-hint] {
+  position: relative;
+  cursor: help;
+}
+
+[data-hint]::after {
+  content: attr(data-hint);
+  position: absolute;
+  top: calc(100% + 7px);
+  left: 0;
+  z-index: 40;
+  width: max-content;
+  max-width: 250px;
+  padding: 6px 10px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  background: var(--panel-raised);
+  color: var(--ink);
+  font-size: var(--text-xs);
+  font-weight: 420;
+  letter-spacing: 0.01em;
+  line-height: 1.45;
+  text-transform: none;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.12s ease-out;
+}
+
+[data-hint]:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.hud-right {
+  display: grid;
+  gap: 10px;
+  justify-items: end;
+}
+
+.legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.legend-dot.hit {
+  background: var(--moss);
+  box-shadow: 0 0 7px oklch(0.78 0.11 131 / 0.8);
+}
+
+.legend-dot.read {
+  background: var(--moon);
+  box-shadow: 0 0 7px oklch(0.83 0.07 250 / 0.8);
+}
+
+.legend-dot.edit {
+  background: var(--amber);
+  box-shadow: 0 0 7px oklch(0.79 0.13 68 / 0.8);
+}
+
+.legend-dot.unvisited {
+  background: oklch(0.5 0.014 254);
+}
+
+/* hollow, matching the wireframe ghost leaves in the scene */
+.legend-dot.ghost {
+  background: transparent;
+  border: 1px solid oklch(0.55 0.014 254);
+}
+
+/* ---------- scene hover tip ---------- */
+
+/* imperatively driven by the scenes: one line, follows the pointer */
+.scene-tip {
+  position: absolute;
+  z-index: 30;
+  display: none;
+  max-width: 380px;
+  padding: 5px 9px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  background: oklch(0.245 0.014 256 / 0.97);
+  color: var(--ink);
+  font-size: var(--text-xs);
+  letter-spacing: 0.01em;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.scene-tip .dim {
+  color: var(--muted);
+}
+
+/* ---------- dock panel shell (inspector + evaluation content) ---------- */
+
+.dock-panel {
+  /* the .dock container owns placement (below the view toggle, above the
+     transport); the panel fills its column */
+  width: 308px;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: oklch(0.245 0.014 256 / 0.96);
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--hairline) transparent;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .dock-panel {
+    animation: inspector-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
+@keyframes inspector-in {
+  from {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.inspector-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.inspector-path {
+  font-size: var(--text-sm);
+  font-weight: 560;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+.inspector-path .dir {
+  color: var(--muted);
+  font-weight: 420;
+}
+
+.ghost-badge {
+  display: inline-block;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 999px;
+  color: var(--muted);
+  font-size: var(--text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.inspector-facts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 6px 16px 12px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.inspector-facts > div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 6px 0;
+}
+
+.inspector-facts > div:nth-child(odd) {
+  padding-right: 14px;
+  border-right: 1px solid var(--hairline);
+}
+
+.inspector-facts > div:nth-child(even) {
+  padding-left: 14px;
+}
+
+.inspector-facts dt {
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.inspector-facts dd {
+  font-size: var(--text-sm);
+  font-weight: 560;
+  font-variant-numeric: tabular-nums;
+}
+
+.inspector-facts dd.touch-hit {
+  color: var(--moss);
+}
+
+.inspector-facts dd.touch-read {
+  color: var(--moon);
+}
+
+.inspector-facts dd.touch-edit {
+  color: var(--amber);
+}
+
+.inspector-history {
+  padding: 12px 16px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.history-list {
+  display: grid;
+}
+
+.history-row {
+  display: grid;
+  grid-template-columns: 10px max-content 1fr auto auto;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 6px 4px;
+  border-radius: 3px;
+  text-align: left;
+  font-size: var(--text-sm);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.history-time {
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+.history-row:hover:not(:disabled) {
+  background: var(--panel-raised);
+  color: var(--ink);
+}
+
+.history-row:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.history-row strong {
+  font-weight: 560;
+  color: var(--faint);
+}
+
+.history-row:hover:not(:disabled) strong {
+  color: var(--muted);
+}
+
+.history-err {
+  color: var(--alarm);
+}
+
+.muted {
+  color: var(--faint);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+/* ---------- action colors ---------- */
+
+.action-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--faint);
+}
+
+.action-dot.search {
+  background: var(--act-search);
+}
+
+.action-dot.read {
+  background: var(--act-read);
+}
+
+.action-dot.edit {
+  background: var(--act-edit);
+}
+
+.action-dot.verify {
+  background: var(--act-verify);
+}
+
+.action-dot.exec {
+  background: var(--act-exec);
+}
+
+/* ---------- deck (timeline) ---------- */
+
+.deck {
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 22px 10px;
+  background: var(--panel);
+  border-top: 1px solid var(--hairline);
+}
+
+/* band one is the instrument row: full-width strip, then position dial and
+   transport anchored right — scrub on the left, numbers and controls where
+   the hand rests. dial and transport sit tight as one group; the strip keeps
+   its distance */
+.deck-main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.deck-main .strip {
+  margin-right: 10px;
+}
+
+/* band two is the caption line: what the playhead is on, then the key */
+.deck-foot {
+  display: flex;
+  align-items: center;
+  gap: 26px;
+}
+
+.transport {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  color: var(--muted);
+}
+
+.icon-btn:hover:not(:disabled) {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.icon-btn.recording {
+  color: var(--warm, #e0a458);
+}
+
+.spin {
+  animation: spin 0.9s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* icon-only and fixed-width: the cluster is right-anchored, so a Play/Pause
+   label swap would shift every button beside it */
+.play-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 30px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  color: var(--ink);
+}
+
+/* triangle glyphs sit optically left of center; nudge right */
+.play-btn .play-glyph {
+  transform: translateX(1px);
+}
+
+.play-btn:hover {
+  border-color: var(--muted);
+  background: var(--panel-raised);
+}
+
+/* everything past the three core keys lives behind ⋯ */
+.transport-more {
+  position: relative;
+  display: inline-flex;
+}
+
+.icon-btn.open {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+/* engaged speed shown in place of the ⋯ glyph so 16× is never invisible */
+.more-speed {
+  color: oklch(0.95 0.02 88);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* same card recipe as .dock-pop, anchored above the trigger */
+.transport-pop {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 0;
+  z-index: 20;
+  min-width: 172px;
+  padding: 8px;
+  display: grid;
+  gap: 3px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 6px;
+  background: var(--panel-raised);
+  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
+  animation: pop-rise 0.14s ease-out;
+}
+
+@keyframes pop-rise {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.pop-speed {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 2px 8px 8px;
+  margin-bottom: 3px;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.pop-speed-label {
+  color: var(--muted);
+  font-size: var(--text-sm);
+}
+
+.pop-speed-chips {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.pop-chip {
+  min-width: 26px;
+  height: 22px;
+  padding: 0 5px;
+  border-radius: 3px;
+  color: var(--muted);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+}
+
+.pop-chip:hover {
+  color: var(--ink);
+  background: var(--panel);
+}
+
+.pop-chip.engaged {
+  color: oklch(0.95 0.02 88);
+  background: var(--panel);
+  box-shadow: inset 0 0 0 1px var(--hairline-strong);
+}
+
+.pop-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  text-align: left;
+  color: var(--muted);
+  font-size: var(--text-sm);
+}
+
+.pop-item:hover {
+  color: var(--ink);
+  background: var(--panel);
+}
+
+.pop-item kbd {
+  margin-left: auto;
+  padding: 1px 5px;
+  border: 1px solid var(--hairline);
+  border-radius: 3px;
+  color: var(--faint);
+  font-family: inherit;
+  font-size: 0.62rem;
+  letter-spacing: 0.06em;
+}
+
+.transport > button:disabled,
+.transport-more > button:disabled {
+  opacity: 0.45;
+  cursor: default;
+  pointer-events: none;
+}
+
+.strip {
+  position: relative;
+  flex: 1;
+  height: 46px;
+  min-width: 0;
+}
+
+.strip-marks {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 10px;
+  /* marks are clickable jump targets, but the row itself must not block the slider */
+  pointer-events: none;
+}
+
+.strip-mark {
+  position: absolute;
+  top: 1px;
+  width: 7px;
+  height: 7px;
+  transform: translateX(-50%) rotate(45deg);
+  border: 1px solid var(--mark-compaction);
+  background: transparent;
+  pointer-events: auto;
+  cursor: pointer;
+  transition: transform 0.12s ease-out;
+}
+
+.strip-mark:hover {
+  transform: translateX(-50%) rotate(45deg) scale(1.5);
+}
+
+.strip-mark:disabled {
+  cursor: default;
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.strip-mark.subagent {
+  border-color: var(--mark-subagent);
+  border-radius: 50%;
+}
+
+/* user turns are frequent: a quiet prompt chevron — "an instruction was
+   typed here" — never a peer of compaction diamonds. the box is an
+   invisible 11px click target; the glyph is drawn by ::after. */
+.strip-mark.user-message {
+  top: 0;
+  width: 11px;
+  height: 10px;
+  border: 0;
+  border-radius: 0;
+  transform: translateX(-50%);
+}
+
+.strip-mark.user-message::after {
+  content: "";
+  position: absolute;
+  left: 3px;
+  top: 2.5px;
+  width: 4px;
+  height: 4px;
+  border: 1.5px solid var(--faint);
+  border-left: 0;
+  border-bottom: 0;
+  transform: rotate(45deg);
+}
+
+.strip-mark.user-message:hover {
+  transform: translateX(-50%) scale(1.5);
+}
+
+.strip-mark.user-message:hover::after {
+  border-color: var(--ink);
+}
+
+.strip-bars {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 12px;
+  bottom: 12px;
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+  border-bottom: 1px solid var(--hairline-strong);
+}
+
+.strip-bar {
+  flex: 1;
+  min-width: 0;
+  border-radius: 1px 1px 0 0;
+  background: var(--faint);
+  opacity: 0.85;
+}
+
+.strip-bar.search {
+  background: var(--act-search);
+}
+
+.strip-bar.read {
+  background: var(--act-read);
+}
+
+.strip-bar.edit {
+  background: var(--act-edit);
+}
+
+.strip-bar.verify {
+  background: var(--act-verify);
+}
+
+.strip-bar.exec {
+  background: var(--act-exec);
+}
+
+.strip-playhead {
+  position: absolute;
+  top: 10px;
+  bottom: 0;
+  width: 1.5px;
+  background: var(--ink);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.strip-playhead::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  transform: translate(-50%, 0) rotate(45deg);
+  background: var(--ink);
+}
+
+.strip-input {
+  position: absolute;
+  inset: 8px 0 0;
+  width: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: ew-resize;
+}
+
+/* position dial: event index, hairline, wall clock on one baseline — the
+   same height and rhythm as the buttons beside it. right-aligned inside a
+   min-width so ticking digits grow into the reserve, not into the strip */
+.deck-pos {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.deck-pos-count {
+  color: var(--ink);
+  font-size: var(--text-sm);
+  letter-spacing: 0.04em;
+  text-align: right;
+}
+
+.deck-pos-clock {
+  color: var(--faint);
+  font-size: var(--text-xs);
+  letter-spacing: 0.06em;
+}
+
+.readout-now {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-sm);
+  white-space: nowrap;
+}
+
+.readout-tool {
+  font-weight: 560;
+  flex: none;
+}
+
+.readout-now .err {
+  flex: none;
+  color: var(--alarm);
+  font-size: var(--text-xs);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.readout-summary {
+  color: var(--muted);
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* full key for the strip: bar colors, then the mark shapes above them;
+   the two groups separate by distance alone */
+.deck-legend {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  color: var(--faint);
+  font-size: 0.68rem;
+  letter-spacing: 0.07em;
+  white-space: nowrap;
+}
+
+.legend-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.deck-legend .action-dot {
+  width: 5px;
+  height: 5px;
+}
+
+/* glyphs mirror the strip-mark shapes so the key reads one-to-one */
+.legend-glyph {
+  display: inline-block;
+  flex: none;
+}
+
+.legend-glyph.compaction {
+  width: 6px;
+  height: 6px;
+  border: 1px solid var(--mark-compaction);
+  transform: rotate(45deg);
+}
+
+.legend-glyph.subagent {
+  width: 6px;
+  height: 6px;
+  border: 1px solid var(--mark-subagent);
+  border-radius: 50%;
+}
+
+.legend-glyph.user-message {
+  width: 4px;
+  height: 4px;
+  border: 1.5px solid var(--faint);
+  border-left: 0;
+  border-bottom: 0;
+  transform: rotate(45deg);
+  margin-right: 2px;
+}
+
+/* ---------- toast ---------- */
+
+.toast {
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 14px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  background: var(--panel-raised);
+  color: var(--muted);
+  font-size: var(--text-sm);
+  pointer-events: none;
+}
+
+.toast.error {
+  color: var(--alarm);
+  border-color: oklch(0.7 0.16 32 / 0.5);
+}
+
+/* ---------- empty state ---------- */
+
+.empty-stage {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.empty-stage .card {
+  text-align: center;
+  color: var(--muted);
+  max-width: 340px;
+  line-height: 1.6;
+  font-size: var(--text-sm);
+}
+
+.empty-stage .card h2 {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: 480;
+  font-size: var(--text-lg);
+  margin-bottom: 8px;
+  color: var(--ink);
+}
+
+/* ---------- responsive ---------- */
+
+@media (max-width: 900px) {
+  .app-frame {
+    flex-direction: column;
+  }
+
+  .session-rail {
+    width: auto;
+    height: 224px;
+    border-right: 0;
+    border-bottom: 1px solid var(--hairline);
+  }
+
+  /* the rail is a top bar here, so it slides up instead of left */
+  .session-rail.collapsed {
+    margin-left: 0;
+    margin-top: -225px;
+  }
+
+  .rail-expand {
+    top: 14px;
+    left: 16px;
+  }
+
+  .rail-head {
+    padding: 12px 16px 8px;
+  }
+
+  .hud {
+    padding: 14px 16px;
+  }
+
+  .hud-repo {
+    font-size: 1.2rem;
+  }
+
+  .dock {
+    /* bottom sheet on narrow screens, pinned to the visual viewport so it
+       never floats over the HUD readout */
+    position: fixed;
+    top: auto;
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+    z-index: 30;
+    flex-direction: row-reverse;
+    align-items: flex-end;
+  }
+
+  .dock-panel {
+    position: static;
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    max-height: 46vh;
+  }
+
+  .deck-pos {
+    display: none;
+  }
+}
+
+/* the key is reference material; below this the caption line belongs to the summary */
+@media (max-width: 1180px) {
+  .deck-legend {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* ---------- dock: the right-edge home of session-depth panels ---------- */
+
+.dock {
+  position: absolute;
+  top: 20px; /* level with the HUD readout's first line */
+  right: 20px;
+  bottom: 20px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.dock > * {
+  pointer-events: auto;
+}
+
+.dock-side {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+}
+
+.dock-strip {
+  display: grid;
+  gap: 6px;
+  padding: 6px;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  background: oklch(0.245 0.014 256 / 0.92);
+}
+
+.dock-strip-group {
+  display: grid;
+  gap: 6px;
+}
+
+.dock-strip-divider {
+  height: 1px;
+  margin: 2px 3px;
+  background: var(--hairline);
+}
+
+/* pop: a compact card anchored beside the strip; coexists with an open
+   sheet so a view tweak never steals the report */
+.dock-pop {
+  position: absolute;
+  top: 0;
+  right: calc(100% + 10px); /* left of the whole dock: sheet or strip */
+  z-index: 20;
+  min-width: 148px;
+  padding: 8px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 6px;
+  background: var(--panel-raised);
+  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
+}
+
+.view-pop {
+  display: grid;
+  gap: 3px;
+}
+
+.view-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  text-align: left;
+  color: var(--muted);
+  font-size: var(--text-sm);
+}
+
+.view-row:hover:not(:disabled) {
+  color: var(--ink);
+  background: var(--panel);
+}
+
+.view-row.active {
+  color: var(--ink);
+  background: var(--panel);
+  box-shadow: inset 0 0 0 1px var(--hairline-strong);
+}
+
+.view-row:disabled {
+  opacity: 0.5;
+}
+
+.view-note {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 4px 2px 0;
+  padding-top: 6px;
+  border-top: 1px solid var(--hairline);
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+.view-key {
+  padding: 0 5px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 3px;
+  font-size: var(--text-xs);
+  color: var(--muted);
+}
+
+.dock-strip button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  color: var(--muted);
+}
+
+.dock-strip button:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.dock-strip button.active {
+  color: var(--ink);
+  background: var(--panel-raised);
+  box-shadow: inset 0 0 0 1px var(--hairline-strong);
+}
+
+.dock-strip [data-hint]::after {
+  top: 50%;
+  left: auto;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.dock-dot {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+}
+
+.dock-dot-running {
+  background: var(--moon);
+  animation: report-pulse 1.4s ease-in-out infinite;
+}
+
+.dock-dot-done {
+  background: var(--pine);
+}
+
+.dock-dot-stale {
+  background: var(--amber);
+}
+
+.dock-dot-failed {
+  background: var(--alarm);
+}
+
+@keyframes report-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+.dock-note {
+  padding: 14px 16px;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+}
+
+/* agent lens picker: actor identity is typographic; color is reserved for
+   availability and the single current-lens signature */
+.agents-head-note {
+  margin-top: 3px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+.agent-list {
+  display: grid;
+  gap: 4px;
+  padding: 10px;
+}
+
+.agent-row {
+  position: relative;
+  width: 100%;
+  border-radius: 4px;
+  color: var(--muted);
+}
+
+.agent-row-select {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 8px;
+  width: 100%;
+  padding: 9px 10px 9px 12px;
+  border-radius: inherit;
+  color: inherit;
+  text-align: left;
+}
+
+.agent-row > .agent-row-select {
+  padding-right: 34px;
+}
+
+.agent-row:hover:not(:disabled) {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.agent-row.active {
+  color: var(--ink);
+  background: var(--panel-raised);
+  box-shadow: inset 0 0 0 1px var(--hairline-strong);
+}
+
+.agent-row:disabled,
+.agent-row.disabled {
+  opacity: 0.76;
+}
+
+.agent-row:disabled,
+.agent-row-select:disabled {
+  cursor: not-allowed;
+}
+
+.agent-row-icon {
+  display: grid;
+  place-items: center;
+  min-height: 19px;
+  color: var(--faint);
+}
+
+.agent-row-copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.agent-row-primary {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.agent-row-title {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: var(--text-sm);
+  font-weight: 560;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.agent-current {
+  flex: none;
+  padding: 1px 6px;
+  border: 1px solid var(--amber);
+  border-radius: 999px;
+  color: var(--amber);
+  font-size: 0.65rem;
+  font-weight: 560;
+  letter-spacing: 0.07em;
+  line-height: 1.45;
+  text-transform: uppercase;
+}
+
+.agent-row-count,
+.agent-row-secondary {
+  color: var(--faint);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+}
+
+.agent-row-count {
+  flex: none;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.agent-status-missing {
+  color: var(--amber);
+}
+
+.agent-status-unavailable {
+  color: var(--alarm);
+}
+
+.agent-row-secondary {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-row-detail-trigger {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+  color: var(--faint);
+}
+
+.agent-row-detail-trigger:hover,
+.agent-row-detail-trigger[aria-pressed="true"] {
+  color: var(--ink);
+  background: var(--panel);
+}
+
+.agent-detail-popover {
+  position: fixed;
+  z-index: 30;
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 6px;
+  background: oklch(0.225 0.014 256 / 0.99);
+  box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
+  color: var(--muted);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+.agent-detail-popover.preview {
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.agent-detail-popover.pinned {
+  overflow-y: auto;
+  pointer-events: auto;
+}
+
+.agent-detail-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.agent-detail-head > span {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  min-width: 0;
+}
+
+.agent-detail-head strong,
+.agent-detail-instruction {
+  color: var(--ink);
+}
+
+.agent-detail-head strong {
+  font-size: var(--text-sm);
+  font-weight: 560;
+}
+
+.agent-detail-close {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  color: var(--faint);
+}
+
+.agent-detail-close:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.agent-detail-instruction,
+.agent-detail-meta {
+  min-width: 0;
+}
+
+.agents-empty,
+.agents-state {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 10px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+.agents-state {
+  margin: 0 10px 10px;
+  border-top: 1px solid var(--hairline);
+}
+
+.agent-list .agents-state {
+  margin: 0;
+}
+
+.agents-error {
+  display: grid;
+  gap: 9px;
+  margin: 0 10px 10px;
+  padding: 10px;
+  border: 1px solid oklch(0.7 0.16 32 / 0.45);
+  border-radius: 4px;
+  background: oklch(0.7 0.16 32 / 0.08);
+  color: var(--muted);
+  font-size: var(--text-xs);
+  line-height: 1.45;
+}
+
+.agents-error.row-local {
+  margin: -1px 10px 4px 34px;
+}
+
+.agents-error > span,
+.agents-retry {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+}
+
+.agents-error > span svg,
+.agents-retry svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+.agents-error > span svg {
+  color: var(--alarm);
+}
+
+.agents-retry {
+  width: max-content;
+  align-items: center;
+  padding: 4px 8px;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+  color: var(--ink);
+}
+
+.agents-retry:hover {
+  background: var(--panel-raised);
+}
+
+.agents-retry:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.report-panel .report-meta {
+  margin-top: 4px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+.report-note {
+  padding: 14px 16px;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  display: grid;
+  gap: 10px;
+}
+
+.report-note code {
+  color: var(--ink);
+}
+
+.report-running {
+  color: var(--moon);
+  font-weight: 560;
+}
+
+.report-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--alarm);
+  font-weight: 560;
+}
+
+.report-error-detail {
+  color: var(--faint);
+  font-size: var(--text-xs);
+  overflow-wrap: anywhere;
+}
+
+.report-run {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 7px 12px;
+  font-size: var(--text-sm);
+  font-weight: 560;
+  color: var(--ink);
+  border: 1px solid var(--hairline-strong);
+  border-radius: 4px;
+}
+
+.report-run:hover {
+  background: var(--panel-raised);
+}
+
+.report-cost {
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+.report-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-width: 0;
+}
+
+.report-picker select {
+  max-width: 100%;
+  appearance: none;
+  padding: 4px 8px;
+  font-size: var(--text-xs);
+  font-family: inherit;
+  color: var(--muted);
+  background: transparent;
+  border: 1px solid var(--hairline-strong);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.report-picker select:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.report-stale-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.report-body {
+  display: grid;
+  gap: 2px;
+  padding-bottom: 10px;
+}
+
+/* one controls block at the top owns judge choice, re-evaluation, and the
+   staleness note — the report below it is pure content */
+.report-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  padding: 10px 16px 0;
+}
+
+.report-stale-note {
+  color: var(--amber);
+  font-size: var(--text-xs);
+  line-height: 1.4;
+}
+
+.report-rerun {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  padding: 3px 8px;
+  font-size: var(--text-xs);
+  font-weight: 560;
+  color: var(--muted);
+  border: 1px solid var(--hairline-strong);
+  border-radius: 3px;
+}
+
+.report-rerun:hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.report-task {
+  padding: 12px 16px 2px;
+  color: var(--ink);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+}
+
+.report-dimension {
+  padding: 12px 16px 2px;
+}
+
+.report-dimension-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.report-dimension-name {
+  color: var(--faint);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.verdict {
+  padding: 1px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--hairline-strong);
+  font-size: var(--text-xs);
+  font-weight: 560;
+  letter-spacing: 0.04em;
+}
+
+.verdict-good {
+  color: var(--pine);
+}
+
+.verdict-warning {
+  color: var(--amber);
+}
+
+.verdict-problem {
+  color: var(--alarm);
+}
+
+.verdict-insufficient-data {
+  color: var(--faint);
+}
+
+.report-finding {
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 4px;
+  border-radius: 3px;
+  text-align: left;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.report-finding:not(:disabled):hover {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.report-finding:disabled {
+  cursor: default;
+}
+
+.report-finding:disabled,
+.report-moment:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.severity-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  transform: translateY(-1px);
+}
+
+.severity-dot.sev-info {
+  background: var(--faint);
+}
+
+.severity-dot.sev-warning {
+  background: var(--amber);
+}
+
+.severity-dot.sev-problem {
+  background: var(--alarm);
+}
+
+.report-claim {
+  overflow-wrap: anywhere;
+}
+
+/* task-accounting layer: criteria reuse the dimension pattern; only the
+   task grouping chrome and coverage metadata are new. Coverage is metadata,
+   not state — it stays on neutral tokens, no new status colors. */
+
+/* chapter heads split the report into its two layers — Tasks (accounting)
+   and Process (dimensions) — one rank above plain section eyebrows: their
+   own ruled row, generous space above, tight below. */
+/* chapter heads are the panel's top type rank: ink, tracked wide, no rule —
+   the report separates by type and spacing, not by lines */
+.report-chapter {
+  margin: 0;
+  padding: 20px 16px 4px;
+  color: var(--ink);
+  font-size: var(--text-sm);
+  font-weight: 620;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.report-rubric-note {
+  padding: 8px 16px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+  line-height: 1.5;
+}
+
+/* CJK sentences never drop below --text-sm; --text-xs is reserved for latin
+   labels, badges, and eyebrows */
+.report-rubric-hint {
+  padding: 8px 16px 0;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+/* spacing ranks the boundaries: chapter > task > criterion > finding.
+   Criteria inside a task sit tighter than free-standing dimensions. */
+.report-criterion {
+  padding: 8px 16px 6px;
+}
+
+.report-criterion .report-dimension-head {
+  margin-bottom: 4px;
+}
+
+.rubric-task-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 16px 16px 0;
+  text-align: left;
+}
+
+.rubric-task-head:not(:disabled):hover .rubric-task-title {
+  text-decoration: underline;
+  text-decoration-color: var(--hairline-strong);
+  text-underline-offset: 3px;
+}
+
+.rubric-task-head:disabled {
+  cursor: default;
+}
+
+.rubric-task-title {
+  color: var(--ink);
+  font-size: var(--text-sm);
+  font-weight: 560;
+}
+
+/* the type tag trails the title's last character so a wrapped title keeps
+   its tag attached; severity dots on findings stay the panel's only dots */
+.rubric-task-type {
+  margin-left: 8px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+  font-weight: 400;
+  letter-spacing: 0.06em;
+}
+
+.report-criterion-name {
+  color: var(--muted);
+  font-size: var(--text-sm);
+  font-weight: 560;
+  overflow-wrap: anywhere;
+}
+
+.report-criterion-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.coverage-badge {
+  padding: 1px 7px;
+  border: 1px solid var(--hairline);
+  border-radius: 999px;
+  color: var(--faint);
+  font-size: var(--text-xs);
+}
+
+/* the scorer's note closes the rubric block: labeled so it reads as rubric
+   metadata, hairlined so it does not run into the Process chapter below.
+   The label stays an xs eyebrow; the note body is CJK prose and holds sm. */
+.report-rubric-footnote {
+  padding: 14px 16px 2px;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+}
+
+.report-rubric-footnote .eyebrow {
+  margin-bottom: 4px;
+}
+
+.report-moment {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  align-items: baseline;
+  gap: 9px;
+  width: 100%;
+  padding: 5px 4px;
+  border-radius: 3px;
+  text-align: left;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.report-moment:hover:not(:disabled) {
+  color: var(--ink);
+  background: var(--panel-raised);
+}
+
+.report-moment strong {
+  font-variant-numeric: tabular-nums;
+}
+
+/* the judge's overview joins the lede right under the task summary — the
+   report reads summary-first, itemized layers after */
+.report-narrative {
+  padding: 0 16px 12px;
+  color: var(--muted);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+
+/* moments + narrative share the dimensions' side padding so the report
+   reads as one column */
+.report-section {
+  padding: 10px 16px 6px;
+}
+
+
+/* rail evaluation badges: the list mirrors judge state without extra clicks */
+
+.rail-eval {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: var(--text-xs);
+  letter-spacing: 0.04em;
+}
+
+.rail-eval::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+}
+
+.rail-eval-running {
+  color: var(--moon);
+}
+
+.rail-eval-running::before {
+  background: var(--moon);
+  animation: report-pulse 1.4s ease-in-out infinite;
+}
+
+.rail-eval-done::before {
+  background: var(--pine);
+}
+
+.rail-eval-stale::before {
+  background: var(--amber);
+}
+
+.rail-eval-failed::before {
+  background: var(--alarm);
+}