pointbreak 0.5.0

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-base)/var(--line) var(--sans);
}

body { display: flex; flex-direction: column; }

#topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 16px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.brand { font-weight: 700; letter-spacing: 0.3px; }
.brand span { color: var(--accent); margin-left: 4px; font-weight: 500; }

/* The served repository / store identity (issue #391): a compact chip showing the
   repository name only, with the full detail — placement/family/worktree, the store
   counts + fingerprint, and the trust note — in a hover/focus popover so the top bar
   stays uncluttered. Hidden until the one-shot identity fetch lands. */
.store-identity { position: relative; display: flex; align-items: center; }
.store-identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg);
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px 8px;
  cursor: default;
}
.store-identity-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.store-identity-repo { font-weight: 500; }
.store-identity-caret { color: var(--fg-dim); font-size: var(--fs-sm); }
.store-identity-detail {
  position: absolute;
  top: calc(100% + 6px);
  /* The chip sits in the right-hand cluster, so anchor the popover to its right
     edge and let it open leftward — it never overruns the viewport's right edge. */
  right: 0;
  left: auto;
  z-index: 50;
  display: none;
  min-width: 210px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  padding: 8px 10px;
}
.store-identity:hover .store-identity-detail,
.store-identity:focus-within .store-identity-detail { display: block; }
.store-identity-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  margin: 0;
}
.store-identity-detail dt { color: var(--fg-dim); font-size: var(--fs-sm); }
.store-identity-detail dd { margin: 0; color: var(--fg); font-size: var(--fs-sm); }
/* The store counts + fingerprint, folded in from the old always-on stats row. The
   spans keep their `.stat` styling; this just lays them out under a divider. */
.store-identity-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
/* The trust-model footnote — replaces the persistent "read-only · advisory" badge. */
.store-identity-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  max-width: 260px;
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

#lens-switcher { display: flex; flex-wrap: wrap; gap: 4px; }
.lens-tab {
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.lens-tab[aria-pressed="true"] { color: var(--fg); background: var(--bg-row); border-color: var(--border); }

.stats { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; min-width: 0; }
.stat { color: var(--fg-dim); font-size: var(--fs-sm); }
.stat.mono { font-family: var(--mono); }

/* Auto-refresh liveness, folded onto the store chip (issue #257): a calm status
   dot that pulses when new data lands and turns amber when the poll stalls. The
   state rides a `data-state` attribute (not a class) so it stays off the
   emittable-class ledger. `idle`/pre-poll shows the neutral dim dot. */
.store-live {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-dim);
  /* `align-items: center` centers the dot on the full line box, but the text's
     optical (x-height) center sits lower — so a box-centered dot reads high, like
     the caret would if it weren't a glyph. Nudge it DOWN onto the text's optical
     center, and hold a hair more space from the repo label. */
  position: relative;
  top: 1px;
  margin-right: 1px;
}
.store-live[data-state="watching"] { background: var(--success); }
.store-live[data-state="updated"] {
  background: var(--success);
  animation: store-live-pulse 1.2s ease-out;
}
.store-live[data-state="stalled"] {
  background: var(--warning);
  /* A stall is a real problem the small calm dot could hide, so the amber dot
     softly pulses to draw the eye — this replaced the inline "stalled" word so the
     topbar stays clean when healthy (#257). */
  animation: store-live-alert 1.8s ease-out infinite;
}
@keyframes store-live-pulse {
  from { box-shadow: 0 0 0 0 var(--success); }
  to { box-shadow: 0 0 0 5px transparent; }
}
@keyframes store-live-alert {
  from { box-shadow: 0 0 0 0 rgba(240, 183, 90, 0.5); } /* --warning, softened */
  to { box-shadow: 0 0 0 6px rgba(240, 183, 90, 0); }
}
/* Honor reduced-motion: the static color still distinguishes updated/stalled. */
@media (prefers-reduced-motion: reduce) {
  .store-live[data-state="updated"],
  .store-live[data-state="stalled"] { animation: none; }
}
/* The degraded word ("stalled") is no longer shown inline (#257) — the pulsing
   amber dot carries the visual signal. The element is kept visually hidden as a
   polite live region so a stall is still ANNOUNCED to screen readers (the dot and
   the detail popover are both aria-hidden, so this is their only cue). */
.store-live-word {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Liveness echoed in the chip's detail popover as a "status: <word>" line, the
   word carrying the same state color as the dot (idle → dim, watching/updated →
   success, stalled → warning). */
.store-live-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 8px 0 0;
  color: var(--fg-dim);
  font-size: var(--fs-sm);
}
.store-live-status { color: var(--fg-dim); }
.store-live-status[data-state="watching"],
.store-live-status[data-state="updated"] { color: var(--success); }
.store-live-status[data-state="stalled"] { color: var(--warning); }

.diagnostics {
  background: #3a2a12;
  color: var(--warning-soft);
  border-bottom: 1px solid #5a4520;
  padding: 6px 16px;
  font-size: var(--fs-md);
}
.diagnostics .code { font-family: var(--mono); color: var(--warning-strong); margin-right: 6px; }

/* A quiet, informational notice when a deep link resolved to a nearby fallback
   (never an error: the view still rendered). */
.route-diagnostic {
  background: var(--bg-row);
  color: var(--fg-dim);
  border-bottom: 1px solid var(--border);
  padding: 6px 16px;
  font-size: var(--fs-md);
}

main { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; width: 100%; }
.hidden { display: none !important; }

.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.toolbar input[type="search"], .toolbar select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 5px 8px;
  font: inherit;
}
.toolbar input[type="search"] { flex: 1; min-width: 180px; }
/* Browsers render an unstyled placeholder as the input color at ~54% opacity,
   which falls under AA on --bg-row. Pin it to --fg-dim at full opacity so the
   hint text stays legible (5.7:1 light) while reading as placeholder. */
.toolbar input[type="search"]::placeholder { color: var(--fg-dim); opacity: 1; }
/* Quiet secondary controls (theme/density, order/clear, modal closes): borderless
   at rest so they read as chrome, not buttons; a hover/focus wash carries the
   affordance. Matches the borderless .type-toggle treatment. */
.ghost { background: transparent; color: var(--fg-dim); border: none; border-radius: var(--r-md); padding: 5px 10px; cursor: pointer; }
.ghost:hover { background: var(--bg-row); color: var(--fg); }
.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.type-toggles { display: flex; gap: 4px; flex-wrap: wrap; }
/* The type filters read as scan tokens, not buttons: a colored dot + mono label +
   count, no resting border or fill (that bordered-pill treatment is what dated the
   chrome). A quiet hover/focus wash keeps the click affordance. */
.type-toggle {
  font-size: var(--fs-xs);
  font-family: var(--mono);
  border: none;
  border-radius: var(--r-sm);
  padding: 3px 5px;
  cursor: pointer;
  background: transparent;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.type-toggle:hover { background: var(--bg-row); }
.type-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.type-toggle .dot { width: 8px; height: 8px; border-radius: 50%; }
.type-toggle .type-count { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.type-toggle.off { opacity: 0.4; }

/* The split grid learns the reader's ratio through --split-master (an integer
   master-pane percent, prefs-persisted); unset resolves to the 50/50 default.
   The 10px middle track is the divider. */
.split { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(360px, var(--split-master, 1fr)) 10px minmax(360px, 1fr); }

/* Closed = no detail pane at all: the timeline takes the full width and the
   empty-prompt placeholder never occupies half the viewport. `split-closed` is
   render's projection of `!state.open` (the cursor may still be parked). */
.split.split-closed { grid-template-columns: minmax(0, 1fr); }
.split.split-closed #detail, .split.split-closed .divider { display: none; }

/* Reading mode: the master pane collapses behind a thin reopen rail and the
   detail takes the split — the divider's left extreme, not a separate layout.
   j/k stepping still works (selection stepping is model-driven, never needs
   the master pane visible). */
.split.reading { grid-template-columns: 28px minmax(0, 1fr); }
.split.reading #master, .split.reading .divider { display: none; }

/* The reopen rail reading mode collapses the master pane behind: hidden in the
   normal split (display:none keeps it out of the grid), the 28px first column
   while reading. It is the way back — never a dead end. */
.master-rail {
  display: none;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  color: var(--accent);
  font-size: var(--fs-md);
  cursor: pointer;
}
.master-rail:hover { background: var(--bg-row); }
.master-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.split.reading .master-rail { display: block; }

/* The divider: at rest it renders exactly the seam #master's border-right used
   to draw; the 3px handle pill appears on hover/drag/focus only. */
.divider { cursor: col-resize; position: relative; touch-action: none; }
.divider::before { content: ""; position: absolute; inset: 0 4px; border-left: 1px solid var(--border); }
.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 34px;
  border-radius: 3px;
  background: transparent;
  transition: background 0.15s;
}
.divider:hover::after, .divider.dragging::after { background: var(--accent); }
/* Keep a real outline here — the shell contract rejects any :focus-visible
   block that strips the outline without replacement (and it reads comments
   too, so this one names no forbidden literal). */
.divider:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.divider:focus-visible::after { background: var(--accent); }

/* The narrow-viewport sheet honors reduced motion: an instant swap, no slide. */
@media (prefers-reduced-motion: reduce) {
  #detail { transition: none; }
}

/* The master pane is the swappable lens body; it owns the scroll + the divider
   between it and the detail pane. */
#master { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
#master > * { flex: 1 1 auto; min-height: 0; }

.timeline { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.event {
  display: grid;
  grid-template-columns: 96px 14px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: var(--row-pad);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.event:hover { background: var(--bg-row); }
/* Selection = a light --sel-bg wash + an --accent left bar. The bar carries the
   signal, so the wash stays light enough for the colored event-type labels to
   clear AA (a strong fill could not). */
.event[aria-selected="true"] { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--accent); }
.event .time { color: var(--fg-dim); font-size: var(--fs-xs); font-family: var(--mono); display: flex; flex-direction: column; line-height: 1.3; }
.event-date { color: var(--fg-dim); opacity: 0.8; }
.event .rail { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; }
.event .body { min-width: 0; }
.event .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event .meta { color: var(--fg-dim); font-size: var(--fs-xs); font-family: var(--mono); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.event .type { font-family: var(--mono); font-size: var(--fs-xs); }

.detail { min-width: 0; overflow-y: auto; padding: 14px 16px; }
/* The persistent pane chrome: the ghost controls (close, and later reading
   mode / back) survive every #detail-body repaint. The glyphs read one step
   larger than the ghost default — at --fs-xs the ✕ is too small a target. */
.detail-head { display: flex; justify-content: flex-end; gap: 2px; }
.detail-head .ghost { font-size: var(--fs-md); line-height: 1; }
/* The sheet's back affordance: markup at every width, revealed only by the
   narrow media block below. */
.detail-back { display: none; margin-right: auto; }
.detail .empty { color: var(--fg-dim); }
.detail h2 { font-size: var(--fs-lg); margin: 0 0 4px; }
.detail .kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; font-size: var(--fs-sm); margin-bottom: 12px; }
.detail .kv dt { color: var(--fg-dim); font-family: var(--mono); }
.detail .kv dd { margin: 0; font-family: var(--mono); word-break: break-all; }
/* Entity anchors (title + eventId/revision rows): real links to the
   entity-primary routes, so cmd/middle-click opens a new tab natively. */
.detail h2 a { color: inherit; text-decoration: none; }
.detail h2 a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.detail .kv dd a { color: var(--accent); text-decoration: none; }
.detail .kv dd a:hover { text-decoration: underline; }
.detail pre {
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 760px) {
  #topbar {
    gap: 8px 12px;
    align-items: flex-start;
  }

  .stats {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }

  .toolbar {
    padding: 8px 10px;
  }

  /* The list owns the whole viewport; the detail becomes a slide-over sheet.
     No TS knows this breakpoint — the sheet is a pure re-projection of the same
     split-closed class the wide layout uses (open ⇔ the sheet is in). */
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .divider { display: none; }

  #master { border-right: 0; }

  /* Specificity: the wide layout hides a closed pane via
     `.split.split-closed #detail { display: none; }` (1-2-0), which a bare
     `#detail` rule cannot override. The sheet must exist off-canvas while
     closed for the slide to animate, so the closed state re-declares
     `display: block` at the same specificity (order wins), and the base sheet
     rule rides `.split #detail`. The list never reflows beneath the fixed
     sheet, so its scroll position survives open/close. */
  .split #detail {
    position: fixed;
    inset: 0;
    z-index: 4;
    background: var(--bg);
    border-left: 1px solid var(--border);
    transform: translateX(102%);
    transition: transform 0.22s ease;
  }
  .split.split-closed #detail { display: block; transform: translateX(102%); }
  .split:not(.split-closed) #detail { transform: translateX(0); box-shadow: -18px 0 32px rgba(0, 0, 0, 0.28); }

  /* The sheet's back affordance (hidden at wide widths). */
  .detail-back { display: inline-block; }

  /* Reading mode is meaningless when the sheet owns the viewport. */
  .split.reading { grid-template-columns: minmax(0, 1fr); }
  .split.reading .master-rail { display: none; }
  .split.reading #master { display: flex; }
  #detail-read { display: none; }

  .diff-layout {
    flex-direction: column;
  }

  .diff-layout > .diff-nav {
    flex: 0 0 auto;
    max-height: 30vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

.units { overflow-y: auto; padding: 14px 16px; display: grid; gap: 10px; }
.unit-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  cursor: pointer;
}
.unit-card:hover { border-color: var(--accent); }
.unit-card[aria-selected="true"] { border-color: var(--accent); background: var(--sel-bg); }
.unit-card h3 { margin: 0 0 6px; font-size: var(--fs-md); font-family: var(--mono); }
.unit-card .kv { display: grid; grid-template-columns: 110px 1fr; gap: 2px 10px; font-size: var(--fs-sm); font-family: var(--mono); color: var(--fg-dim); }
.unit-card .kv b { color: var(--fg); font-weight: 500; }
.thread-card h3 { word-break: break-all; }
.supersession-badges { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 8px; }
.overview-summary { display: grid; gap: 6px; margin: 8px 0 10px; }
.overview-main { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.overview-assessment { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-dim); font-size: var(--fs-sm); }
.overview-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.overview-stat { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-dim); background: var(--bg-row); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 7px; }
.overview-stat b { color: var(--fg); font-weight: 600; }
.overview-cues { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.overview-label, .overview-muted, .overview-latest { color: var(--fg-dim); font-size: var(--fs-xs); }
.overview-cue { font: var(--fs-xs)/var(--line) var(--mono); color: var(--fg-dim); background: var(--bg-row); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; cursor: pointer; }
.overview-cue:hover, .overview-cue:focus-visible { color: var(--fg); border-color: var(--accent); }
.overview-latest { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.overview-latest b { color: var(--fg); font-weight: 500; }
.thread-overviews { display: grid; gap: 6px; margin: 0 0 10px; }
.thread-overview { display: grid; gap: 4px; padding: 7px 8px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-row); }
.thread-overview > div:first-child { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; font-size: var(--fs-sm); }
.thread-overview > div:first-child span { color: var(--fg-dim); font-family: var(--mono); }
/* The competing-heads callout on a forked thread: surface every head, never a
   null head. */
.thread-competing { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.thread-card.competing { border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.fact-status.competing { color: var(--warning); }
/* The revision DAG: one node per revision, each marked head/superseded with its
   supersession edges. */
/* The supersession DAG: a server-laid SVG the client only paints. Rendered at
   natural pixel size (the painter sets width/height to the laid-out bounds);
   max-width keeps an oversized graph inside the pane without scaling the node
   text down to illegibility by default. */
.revision-dag {
  --dag-edge: color-mix(in srgb, var(--fg-dim) 72%, var(--border));
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}
.dag-edge { fill: none; stroke: var(--dag-edge); stroke-width: 1.5; }
.dag-edge.traced { stroke: var(--accent); stroke-width: 2.5; }
/* Directional arrowhead at the superseding-head end of each edge, token-colored
   to match the edge stroke and legible in both themes. A traced edge swaps to
   the accent marker via its marker-end attribute (set in the trace handler) —
   a cross-browser alternative to `context-stroke`, which Safari does not paint. */
.dag-arrow-head { fill: var(--dag-edge); }
.dag-arrow-head-traced { fill: var(--accent); }
.dag-node { cursor: pointer; }
.dag-node rect {
  fill: var(--bg-row);
  stroke: var(--border);
  stroke-width: 1.5;
}
.dag-node text { fill: var(--fg); font-family: var(--mono); font-size: var(--fs-xs); }
/* Head vs superseded reads as a shape cue (solid vs dashed stroke), not color alone. */
.dag-node.head rect { stroke: var(--success); stroke-width: 2; }
.dag-node.superseded rect {
  stroke: color-mix(in srgb, var(--warning) 60%, transparent);
  stroke-dasharray: 4 3;
}
.dag-node[aria-selected="true"] rect { fill: var(--bg-row-sel); stroke: var(--accent); }
.dag-node.traced rect { stroke: var(--accent); }
.dag-node:focus { outline: none; }
.dag-node:focus rect { stroke: var(--accent); stroke-width: 2.5; }
.dag-node:focus-visible rect { stroke: var(--accent); stroke-width: 3; }

/* Fact-level supersession mini-DAG: reuses the .revision-dag stylesheet above;
   the figure adds a caption and marks the nodes non-interactive. */
.fact-dag { margin: 10px 0 4px; }
.fact-dag figcaption { color: var(--fg-dim); font-size: var(--fs-xs); margin-bottom: 4px; }
.fact-dag .dag-node { cursor: default; }

.error { background: var(--error-bg); color: var(--danger); padding: 8px 16px; border-top: 1px solid var(--error-border); font-family: var(--mono); font-size: var(--fs-sm); }

.badge { font-family: var(--mono); font-size: var(--fs-xs); padding: 1px 6px; border-radius: var(--r-sm); background: var(--bg-row); color: var(--fg-dim); }
.badge.stale { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.badge.head { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.badge.superseded, .badge.supersedes { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }

.unit-card .actions { margin-top: 8px; }
.unit-card .diff-btn { font-size: var(--fs-sm); }
.detail .diff-btn { margin: 0 0 12px; }

/* Diff modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: min(1100px, 94vw);
  height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.modal button:focus-visible,
.modal [tabindex]:focus-visible,
.modal input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Two-column diff: an always-visible file/fact navigator beside the scrolling
   body, each with its own overflow so the navigator survives the body scroll. */
.diff-layout { display: flex; flex: 1 1 auto; min-height: 0; }
.diff-nav {
  flex: 0 0 220px;
  overflow: auto;
  padding: 10px 8px;
  border-right: 1px solid var(--border);
  background: var(--bg-elev);
}
.diff-nav-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 8px;
  color: var(--fg-dim);
  font-size: var(--fs-xs);
}
.diff-nav-summary span {
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-row);
}
.diff-nav-summary b { color: var(--fg); font-weight: 600; }
.diff-nav-filters {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
}
.diff-nav-filters button {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg-dim);
  font: var(--fs-xs)/var(--line) var(--mono);
  cursor: pointer;
}
.diff-nav-filters button[aria-pressed="true"] {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--bg-row-sel);
}
.diff-nav ol { list-style: none; margin: 0; padding: 0; }
.diff-nav-files { margin-bottom: 10px; }
.diff-nav-file,
.diff-nav-fact {
  display: flex;
  gap: 6px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
}
.diff-nav-file:hover,
.diff-nav-fact:hover { background: var(--bg-row); }
.diff-nav-file:focus-visible,
.diff-nav-fact:focus-visible {
  background: var(--bg-row);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.diff-nav-file .dpath { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-nav-file .dfile-notes { margin-left: auto; }
.diff-nav-fact { font-size: var(--fs-sm); color: var(--fg-dim); }
.diff-nav-reason { margin-left: auto; font: var(--fs-xs)/var(--line) var(--mono); color: var(--fg-dim); }
.diff-unanchored h3 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  font-weight: 500;
  margin: 8px 6px 4px;
}
.diff-body { flex: 1; min-width: 0; overflow: auto; padding: 12px 14px; }
.diff-fact-vicinity {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: var(--bg-row);
  border-top: 1px solid var(--border);
}
.diff-fact-vicinity p { margin: 0; color: var(--fg-dim); font-size: var(--fs-sm); }
.diff-fact-vicinity button {
  justify-self: start;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--fg);
  padding: 4px 8px;
  font: var(--fs-xs)/var(--line) var(--mono);
  cursor: pointer;
}
.diff-fact-vicinity button:hover { border-color: var(--accent); }
.modal-head h2 { margin: 0; font-size: var(--fs-lg); }

/* Command palette: a top-anchored search overlay. */
#cmd-palette { align-items: flex-start; }
.cmd-card { width: min(560px, 92vw); height: auto; max-height: 70vh; margin-top: 10vh; }
.cmd-input {
  background: var(--bg-elev);
  color: var(--fg);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  font: inherit;
  font-size: var(--fs-base);
  outline: none;
}
.cmd-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.cmd-results { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; }
.cmd-group { padding: 6px 16px 2px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-dim); font-family: var(--mono); }
.cmd-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 16px; cursor: pointer; }
.cmd-item.active, .cmd-item:hover { background: var(--bg-row-sel); }
.cmd-label { font-family: var(--mono); font-size: var(--fs-sm); }
.cmd-hint { color: var(--fg-dim); font-size: var(--fs-xs); font-family: var(--mono); }
.cmd-empty { padding: 10px 16px; color: var(--fg-dim); font-size: var(--fs-sm); }

/* Keyboard cheat sheet: a compact overlay, smaller than the diff modal. */
.key-help-card { width: min(520px, 92vw); height: auto; max-height: 80vh; }
.key-help-list { margin: 0; padding: 14px 18px; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; overflow-y: auto; }
.key-help-list dt { font-family: var(--mono); color: var(--fg); }
.key-help-list dd { margin: 0; color: var(--fg-dim); font-size: var(--fs-sm); }
.key-help-list kbd {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--bg-row);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 1px 6px;
}

.dfile { margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.dfile-head { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg-elev); border-bottom: 1px solid var(--border); cursor: pointer; }
.dfile-head::before { content: "▸"; color: var(--fg-dim); font-size: var(--fs-xs); width: 0.8em; }
.dfile[data-expanded="true"] > .dfile-head::before { content: "▾"; }
.dfile[data-expanded="false"] > .dfile-head { border-bottom: none; }
.dfile[data-expanded="false"] > .dfile-body { display: none; }
.dfile-head:hover { background: var(--bg-row); }
.dfile-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Low-signal files (binary / mode-only / pure-rename / large) read quieter and
   carry a neutral one-line reason summary, collapsed by default. */
.dfile-lowsignal > .dfile-head { background: var(--bg); }
.dfile-lowsignal .dpath { color: var(--fg-dim); }
.dfile-summary { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-dim); padding: 1px 7px; border-radius: var(--r-sm); background: var(--bg-row); }
.dpath { font-family: var(--mono); font-size: var(--fs-md); }
.dstatus { font-family: var(--mono); font-size: var(--fs-xs); padding: 1px 7px; border-radius: var(--r-sm); background: var(--bg-row); color: var(--fg-dim); text-transform: lowercase; }
.s-added { color: var(--success); }
.s-deleted { color: var(--danger); }
.s-renamed, .s-copied { color: var(--warning); }
.s-modified { color: var(--info); }

.dhunk { font-family: var(--mono); font-size: var(--fs-sm); color: var(--info); background: var(--hunk-bg); padding: 3px 12px; border-top: 1px solid var(--border); }
.drow {
  display: grid;
  grid-template-columns: 52px 52px 16px 1fr;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.drow .ln { color: #5b6675; text-align: right; padding-right: 8px; user-select: none; }
.drow .sign { text-align: center; user-select: none; }
.drow .dtext { white-space: pre-wrap; word-break: break-word; padding-right: 10px; }
.drow-added { background: var(--diff-add-bg); }
.drow-added .sign, .drow-added .dtext { color: var(--diff-add-fg); }
.drow-removed { background: var(--diff-del-bg); }
.drow-removed .sign, .drow-removed .dtext { color: var(--diff-del-fg); }
.drow-context .dtext { color: var(--fg-dim); }
/* Syntax tokens (read-time highlighting). A token span sits inside .dtext, so its
   per-kind color overrides the inherited add/remove/context foreground: a changed
   row keeps its background tint and +/- sign while the code shows full syntax color. */
.tok { color: inherit; }
.tok-keyword { color: var(--tok-keyword); }
.tok-string { color: var(--tok-string); }
.tok-comment { color: var(--tok-comment); font-style: italic; }
.tok-number { color: var(--tok-number); }
.tok-type { color: var(--tok-type); }
.tok-function { color: var(--tok-function); }
.tok-constant { color: var(--tok-constant); }
.tok-operator { color: var(--tok-operator); }
.tok-punctuation { color: var(--tok-punctuation); }
.tok-variable { color: var(--tok-variable); }
/* Intraline emphasis (read-time diff sub-span marking). Emphasis is a BACKGROUND
   channel, so it composes with the syntax foreground without fighting; the tint is
   deeper than the row base so a changed sub-span stands out within its changed row. */
.emph { border-radius: 2px; }
.drow-added .emph { background: var(--emph-add-bg); }
.drow-removed .emph { background: var(--emph-del-bg); }
.drow-meta { grid-template-columns: 1fr; padding: 4px 12px; color: var(--fg-dim); font-style: italic; }
.drow-noted { box-shadow: inset 3px 0 0 var(--success); cursor: pointer; }
.drow-noted:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Review-fact annotations on the diff */
.anno-summary { font-size: var(--fs-sm); color: var(--fg-dim); margin-bottom: 10px; }
.anno-group { margin-bottom: 14px; }
.dfile-notes { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-dim); }
.anno {
  border-left: 3px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  margin: 2px 0 6px 52px;
  padding: 6px 10px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.anno-observation { border-left-color: var(--success-deep); background: rgba(70, 170, 110, 0.08); }
.anno-input-request { border-left-color: #7a5e2a; background: color-mix(in srgb, var(--warning) 8%, transparent); }
.anno-assessment { border-left-color: #5a3a7a; background: color-mix(in srgb, var(--assess) 8%, transparent); }
.anno-validation { border-left-color: color-mix(in srgb, var(--validation) 55%, #000); background: color-mix(in srgb, var(--validation) 8%, transparent); }
.anno-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-sm); }
.anno-kind {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--bg-row);
  color: var(--fg-dim);
}
.anno-kind-observation { color: var(--success); }
.anno-kind-input-request { color: var(--warning); }
.anno-kind-assessment { color: var(--assess); }
.anno-kind-validation { color: var(--validation); }
.anno-track { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-dim); }
.anno-time { margin-left: auto; color: var(--fg-dim); font-family: var(--mono); font-size: var(--fs-xs); white-space: nowrap; }
.anno-title { font-weight: 500; }
.anno-loc { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-dim); }
.anno-body { font-size: var(--fs-sm); color: var(--fg); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
.markdown-body {
  white-space: normal;
  word-break: break-word;
}
.markdown-body :where(p, ul, ol, pre) { margin: 6px 0 0; }
.markdown-body :where(h1, h2, h3, h4, h5, h6) {
  margin: 8px 0 4px;
  font-size: var(--fs-md);
  line-height: 1.25;
}
.markdown-body :where(ul, ol) { padding-left: 20px; }
.markdown-body code {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--bg-row);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 3px;
}
.markdown-body pre {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px;
  overflow-x: auto;
}
.markdown-body pre code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: pre;
}
.markdown-body a { color: var(--accent); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.anno-flash { animation: anno-flash 1.6s ease-out; }
@keyframes anno-flash {
  0% { background: color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { background: transparent; }
}

/* Reference chips (truncated IDs) */
.ref { font-family: var(--mono); }
.ref[data-ref-kind] { color: var(--accent); cursor: pointer; border-bottom: 1px dotted color-mix(in srgb, var(--accent) 60%, transparent); }
.ref[data-ref-kind]:hover { background: var(--bg-row); }
.ref[data-ref-kind]:focus-visible {
  background: var(--bg-row);
  border-radius: var(--r-sm);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ref-commit, .ref-hash { color: var(--fg-dim); }

/* The revision composite, rendered as the detail pane's "full" mode. */
.unit-page-title { color: var(--fg-dim); font-size: var(--fs-sm); font-family: var(--mono); margin: 0 0 14px; word-break: break-all; }
.unit-page section { margin-bottom: 20px; }
.unit-page h2 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-dim); margin: 0 0 8px; }
.up-identity { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; font-size: var(--fs-sm); font-family: var(--mono); }
.up-identity dt { color: var(--fg-dim); }
.up-identity dd { margin: 0; }

.verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-elev);
}
.verdict .verdict-status { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-dim); font-family: var(--mono); }
.verdict .verdict-value { font-family: var(--mono); font-weight: 600; }
.verdict-accepted .verdict-value, .verdict-accepted_with_follow_up .verdict-value { color: var(--success); }
.verdict-needs_changes .verdict-value { color: var(--danger); }
.verdict-needs_clarification .verdict-value { color: var(--warning); }
.verdict-ambiguous { border-color: #5a4520; }
.verdict-ambiguous .verdict-value { color: var(--warning); }
.verdict-unassessed .verdict-value { color: var(--fg-dim); }
.verdict-summary { font-size: var(--fs-sm); color: var(--fg); margin-top: 8px; white-space: pre-wrap; max-width: 70ch; }

.up-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.up-stat { font-family: var(--mono); font-size: var(--fs-sm); background: var(--bg-row); border: 1px solid var(--border); border-radius: var(--r-md); padding: 3px 9px; color: var(--fg-dim); }
.up-stat b { color: var(--fg); font-weight: 600; }

.up-empty { color: var(--fg-dim); font-size: var(--fs-sm); }
.fact-stale-context { color: var(--fg-dim); font-size: var(--fs-xs); margin: 0 0 8px; }
.fact-status { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: var(--r-sm); background: var(--bg-row); color: var(--fg-dim); }
.fact-status.superseded, .fact-status.replaced { color: var(--warning); }
.fact-status.responded, .fact-status.current { color: var(--success); }
.fact-status.accepted, .fact-status.accepted_with_follow_up { color: var(--success); }
.fact-status.open { color: var(--warning); }
.fact-status.stale { color: var(--danger); }
.fact-status.passed { color: var(--success); }
.fact-status.failed { color: var(--danger); }
.fact-status.errored { color: var(--warning); }
.fact-status.skipped { color: var(--fg-dim); }
.fact-status.needs_changes, .fact-status.needs_clarification { color: var(--warning); }
.fact-status.unassessed, .fact-status.ambiguous { color: var(--fg-dim); }
.validation-note { font-size: var(--fs-xs); color: var(--fg-dim); margin: 4px 0 0; }
/* Persistent advisory framing — the quietest tier (dim caption / dim chrome), never
   a banner or a second headline; the verdict stays a card. */
.advisory-note, .reader-scope-note { font-size: var(--fs-xs); color: var(--fg-dim); margin: 4px 0 0; }
.fact-rel { font-size: var(--fs-xs); color: var(--fg-dim); margin-top: 4px; }
.fact-body-removed { font-size: var(--fs-xs); color: var(--fg-dim); font-style: italic; margin-top: 4px; }
.fact-responses { margin-top: 6px; padding-left: 10px; border-left: 1px solid var(--border); }
.fact-response { font-size: var(--fs-sm); margin-top: 4px; }
.fact-response .outcome { font-family: var(--mono); color: var(--teal); }

/* Verification status + endorsement readback (#171) — advisory, reader-relative.
   Informational chips, deliberately lighter than .verdict / .fact-status so they
   never read as a gate or a verdict; the text tint is only a scan aid. */
.verify {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--bg-row);
  color: var(--fg-dim);
  white-space: nowrap;
}
.verify-valid { color: var(--success); }
/* In the timeline meta the signature readback de-chromes to inline glyph+text (the
   detail-pane readback keeps its chip). The tint sits on the row surface directly;
   it clears AA on both the base and the selection wash — worst case --success
   4.59:1 on --sel-bg (light), above the 4.52 the chip-on-row already ships. This
   scoped rule outweighs any [aria-selected] backdrop, so selected rows de-chrome
   too. */
.event .meta .verify { background: transparent; padding: 0; border-radius: 0; }
.verify-invalid { color: var(--danger); }
.verify-untrusted_key { color: var(--warning); }
.verify-unsigned { color: var(--fg-dim); }

.readback { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.readback-row { display: flex; gap: 6px; flex-wrap: wrap; }

.endorsements {
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.endorsements-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-dim); }
.endorse-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.endorse { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); flex-wrap: wrap; }
.endorse-label { font-family: var(--mono); font-size: var(--fs-xs); }
.endorse-endorsement-trusted .endorse-label { color: var(--success); }
.endorse-unknown_endorser .endorse-label { color: var(--fg-dim); }
.endorse-ambiguous_endorser .endorse-label { color: var(--warning); }
.endorse-who { font-family: var(--mono); font-size: var(--fs-sm); color: var(--fg); }
.endorse-attrs { font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-dim); }
.diagnostic-card .code { font-family: var(--mono); color: var(--warning); margin-right: 8px; }

/* Tabular figures on the id-heavy mono columns: digits align into columns and the
   slashed zero disambiguates 0/O in hashes and OIDs. Silently no-ops if the face
   lacks the feature. */
.detail .kv dd, .ref, .up-stat, .event .meta {
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Non-color status redundancy for non-positive states via ::before so meaning
   never rides on hue alone. Positive advisory states stay text-only to avoid
   implying a gate; their labels already say accepted, passed, valid, or current.
   The one exception is the signature readback (.verify-valid, below): it leads
   with a neutral dot so every timeline row carries a consistent status mark.
   Unicode only; no icon font, no build. The glyphs inherit the text tint, so
   they read in both themes. */
.fact-status::before,
.verify::before,
.verdict .verdict-value::before,
.dstatus::before { margin-right: 4px; font-weight: 600; }

/* Signature-valid: a neutral, dimmed dot (deliberately NOT a ✓, which would read
   as a gate-pass on an advisory, reader-relative readback) so a valid row still
   leads with a mark alongside the ✕/!/○ non-positive states. */
.verify-valid::before { content: "·"; color: var(--fg-dim); }

/* failed / invalid / changes-requested */
.fact-status.failed::before,
.fact-status.stale::before,
.verify-invalid::before,
.verdict-needs_changes .verdict-value::before,
.s-deleted::before { content: "✕"; }

/* warning / open / superseded / ambiguous */
.fact-status.open::before,
.fact-status.superseded::before,
.fact-status.replaced::before,
.verify-untrusted_key::before,
.verdict-ambiguous .verdict-value::before { content: "!"; }

/* needs clarification (a question, not a warning) */
.verdict-needs_clarification .verdict-value::before { content: "?"; }

/* errored */
.fact-status.errored::before { content: "~"; }

/* skipped / unsigned / unassessed */
.fact-status.skipped::before,
.verify-unsigned::before,
.verdict-unassessed .verdict-value::before { content: "○"; }