:root {
  --ink: #12212f;
  --muted: #5d6b7a;
  --line: #e2e8f0;
  --bg: #f4f6f9;
  --card: #ffffff;
  --brand: #4338ca;
  --good: #0f9d67;
  --warn: #b7791f;
  --bad: #d1373f;
  --void: #9aa5b1;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
/* The browser's focus ring (Chrome's blue-and-white double ring) is kept for
   keyboard-placed focus only. Chrome also switches it on retroactively for
   whatever a click last focused as soon as any key is pressed, so clicking
   "Fit" and then flying with WASD framed "Fit" for the rest of the session.
   focus-source.js stamps how the focus arrived. Text fields are exempt: the
   ring on a clicked field is the cue that typing goes there. */
html[data-focus-source="pointer"] :focus-visible:not(input, textarea, select, [contenteditable]) { outline: none; }
header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 5.5rem;
  padding: 0.65rem 1.25rem;
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-bar-leading { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.brand { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; letter-spacing: 0.02em; }
.brand .muted { font-weight: 400; opacity: 0.7; }
.top-nav-link { color: #cbd5e1; text-decoration: none; font-size: 0.85rem; padding: 0.25rem 0.6rem; border-radius: 0.3rem; border: 1px solid rgba(255,255,255,0.2); }
.top-nav-link:hover, .top-nav-link.active { color: #fff; border-color: #fff; background: rgba(255,255,255,0.08); }
/* The run's lens, stated where a reader looks first. */
.run-lens {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 0.9rem 1.25rem 0; padding: 0.85rem 1.25rem;
  background: linear-gradient(90deg, #1d2947, #2f4a9c); color: #fff; border-radius: 0.6rem;
}
.run-lens-kicker { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.8; flex: 0 0 auto; }
.run-lens-main { flex: 1 1 auto; min-width: 0; }
.run-lens h1 { margin: 0; font-size: 1.35rem; line-height: 1.2; font-weight: 700; }
.run-lens p { margin: 0.2rem 0 0; font-size: 0.85rem; opacity: 0.88; }
.run-lens-link { color: #fff; font-size: 0.85rem; text-decoration: none; border: 1px solid rgba(255,255,255,0.45); padding: 0.35rem 0.7rem; border-radius: 0.35rem; white-space: nowrap; }
.run-lens-link:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 720px) { .run-lens { flex-wrap: wrap; } }
#run-meta {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 19rem;
  font-size: 0.76rem;
  line-height: 1.35;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.showcase-actions { display: none; margin-left: auto; align-items: center; gap: 0.65rem; font-size: 0.76rem; }
.showcase-actions span { color: #b9c6d3; }
.showcase-actions a { color: #e5ebf2; text-decoration: none; border-bottom: 1px solid #64748b; }
.showcase-actions a:hover { color: #fff; border-color: #fff; }
.showcase-actions .showcase-waitlist { border: 1px solid #8b9bff; border-radius: 0.35rem; padding: 0.35rem 0.65rem; color: #fff; }
.showcase-mode .showcase-actions { display: flex; }
.showcase-mode #run-meta { flex: 1 1 auto; max-width: 28rem; }
/* AI stays hidden on the showcase unless the server says it can answer
   (body.demo-ai, set from /api/inference) — then it is rate-limited upstream. */
.showcase-mode:not(.demo-ai) #chat-toggle-btn,
.showcase-mode:not(.demo-ai) #chat-panel,
.showcase-mode:not(.demo-ai) #node-ai-panel,
.showcase-mode:not(.demo-ai) .explain-test-ai,
.showcase-mode:not(.demo-ai) .explain-file-ai,
.showcase-mode #chat-model-select,
.showcase-mode #node-ai-model-select,
.showcase-mode #usage-meta,
.showcase-mode #control-buttons,
.showcase-mode .stage-actions,
.showcase-mode .signal-action[data-action="start"],
.showcase-mode .signal-action[data-action="stop"] { display: none !important; }
.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  background: #2a3949;
}
.pill-live { background: var(--good); }
.pill-good { background: #dff6e8; color: #087348; }
.pill-muted { background: #55606b; }

#control-buttons { display: flex; flex: 0 0 auto; gap: 0.75rem; align-items: center; }
.compact-control-stack,
.provider-model-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.provider-model-stack { order: 20; }
.compact-control-stack .control-field,
.provider-model-stack .control-field {
  display: grid;
  grid-template-columns: 2.5rem auto;
  align-items: center;
  gap: 0.4rem;
}
.provider-model-stack .control-field { grid-template-columns: 3.8rem auto; }
.scope-iteration-stack .control-field { grid-template-columns: 5.2rem auto; }
.provider-model-stack .control-field select,
.provider-model-stack .control-field.model-field select { width: 10.8rem; }
.session-stack .control-field { grid-template-columns: 2.8rem auto; }
.control-field {
  display: flex; align-items: center; gap: 0.3rem; color: #cbd5e1; font-size: 0.72rem;
}
.control-field select,
.control-field input {
  height: 1.8rem; border-radius: 0.35rem; border: 1px solid #55606b;
  background: #0f1a25; color: #fff; padding: 0 0.45rem; font: inherit;
}
.control-field select { max-width: 8.8rem; }
.control-field.model-field select { max-width: 11.5rem; }
.control-field input { width: 10rem; }
.control-field.requirement-field input { width: 5.8rem; text-transform: uppercase; }
.control-field.short-field input { width: 4.8rem; }
.control-field.session-field input { width: 11rem; }
.scope-iteration-stack .control-field input { width: 6rem; }
.session-stack .control-field input,
.session-stack .control-field select { width: 12rem; max-width: 12rem; }
.control-field.checkbox-field { gap: 0.35rem; white-space: nowrap; }
.control-field.checkbox-field input { width: auto; height: auto; }
.run-action-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(4.6rem, auto));
  gap: 0.28rem;
}
.control-btn {
  min-height: 1.8rem; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 0.35rem; border: 1px solid #55606b;
  background: transparent; color: #fff; cursor: pointer;
}
.control-btn.primary { background: var(--good); border-color: var(--good); color: #fff; }
.control-btn:hover { background: #2a3949; }
.control-btn.danger { border-color: var(--bad); color: #ffb3b8; }
.control-btn.danger:hover { background: var(--bad); color: #fff; }
.control-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.control-btn.armed { background: var(--bad); border-color: var(--bad); color: #fff; }
.header-status-stack {
  display: flex;
  flex: 0 0 8.5rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
}
.header-status-stack .pill { text-align: center; line-height: 1.35; }

main { max-width: 78rem; margin: 1.25rem auto; padding: 0 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem; padding: 1.1rem 1.25rem; }
.card.card-collapsed { padding-bottom: 1.1rem; }
.card.card-collapsed > *:not(:first-child) { display: none; }
.card-collapse-btn { background: none; border: 1px solid var(--line); color: var(--muted); width: 1.4rem; height: 1.4rem; flex: 0 0 auto; border-radius: 0.25rem; padding: 0; margin-right: 0.5rem; cursor: pointer; font-size: 0.65rem; line-height: 1; vertical-align: middle; }
.card-collapse-btn:hover { border-color: var(--brand); color: var(--brand); }
.collapsible-pane summary.pane-title { cursor: pointer; list-style: none; }
.collapsible-pane summary.pane-title::-webkit-details-marker { display: none; }
.collapsible-pane summary.pane-title::before { content: "▸ "; color: var(--muted); }
.collapsible-pane[open] summary.pane-title::before { content: "▾ "; }
.card h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.muted { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.check-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.check-header h2 { margin-bottom: 0.75rem; }
.check-actions { display: grid; grid-template-columns: repeat(3, minmax(3.4rem, 1fr)); gap: 0.25rem; }

#flow { overflow: hidden; padding-bottom: 0.4rem; }
.flow-graph { position: relative; }
.flow-svg { position: absolute; left: 0; top: 0; pointer-events: auto; overflow: visible; }
.flow-arrow { fill: none; stroke: var(--void); stroke-width: 1.5; }
.flow-arrow:not(.flow-arrow-feedback) { pointer-events: none; }
.flow-arrow-branch { stroke: #b6c0cc; stroke-dasharray: 4,3; }
.flow-arrow-feedback { stroke: var(--warn); stroke-width: 1.75; pointer-events: stroke; }
.flow-arrow-feedback:hover { stroke-width: 3; cursor: pointer; }
.flow-arrow-feedback-route {
  stroke: #aab5c2;
  stroke-width: 1.2;
  stroke-dasharray: 3,4;
  opacity: 0.8;
  pointer-events: none;
}
.flow-arrow-feedback-route.feedback-route-active {
  stroke: var(--warn);
  stroke-width: 2;
  stroke-dasharray: none;
  opacity: 1;
}
.flow-feedback-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.flow-arrow-feedback.feedback-applied { stroke: #c27a18; stroke-dasharray: none; }
.flow-arrow-feedback.feedback-pending { stroke: #c7a66d; stroke-dasharray: 5,4; opacity: 0.75; }
.flow-arrowhead { fill: var(--void); }
.flow-arrowhead-feedback { fill: var(--warn); }
.flow-feedback-legend {
  position: absolute; left: 0.4rem; top: 0.35rem; z-index: 2;
  display: flex; gap: 0.8rem; align-items: center; color: var(--muted);
  font-size: 0.62rem; background: rgba(255,255,255,0.9); padding: 0.25rem 0.4rem;
  border: 1px solid var(--line); border-radius: 0.25rem;
}
.flow-feedback-legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
.legend-line { display: inline-block; width: 1.1rem; border-top: 2px solid #c27a18; }
.legend-line.pending { border-top-style: dashed; opacity: 0.7; }
.legend-line.route { border-top: 1px dashed #aab5c2; }

.stage-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  border: 2px solid var(--line);
  background: #fafbfc;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}
.stage-node:hover { border-color: var(--brand); }
.stage-node.selected { border-color: var(--brand); background: #eef0fe; }
.signal-node.selected { border-color: var(--brand); background: #eef0fe; }
.stage-node.stage-state-running {
  border-color: #f2c46d;
  background: #fffaf0;
  animation: running-card-glow 1.2s ease-in-out infinite;
}
.stage-node, .signal-node { cursor: grab; touch-action: none; }
.stage-node.dragging, .signal-node.dragging { cursor: grabbing; opacity: 0.85; z-index: 5; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.stage-node .node-topline { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; min-height: 1rem; }
.stage-node .n { font-size: 0.65rem; color: var(--muted); line-height: 1; }
.state-sign {
  display: inline-flex; align-items: center; gap: 0.2rem;
  min-width: 0; padding: 0.1rem 0.25rem; border-radius: 999px;
  border: 1px solid #cbd5e1; background: #fff; color: var(--muted);
}
.state-light {
  flex: 0 0 auto; width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--void); box-shadow: 0 0 0 1px rgba(18,33,47,0.08);
}
.state-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.52rem; font-weight: 700; text-transform: uppercase;
}
.state-running { border-color: #f2c46d; background: #fff8e8; color: #7a4b00; }
.state-running .state-light { background: var(--warn); animation: state-flash 1s infinite; }
.state-finished { border-color: #9ddbc3; background: #effaf4; color: #087348; }
.state-finished .state-light { background: var(--good); }
.state-failed { border-color: #f1a0a6; background: #fff1f2; color: #9f1d27; }
.state-failed .state-light { background: var(--bad); }
.state-stopped { border-color: #d7b56f; background: #fff8e8; color: #7a4b00; }
.state-stopped .state-light { background: var(--warn); }
.state-not-started .state-light { background: var(--void); }
@keyframes state-flash {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 1px rgba(183,121,31,0.18), 0 0 0 0 rgba(183,121,31,0.28); }
  50% { opacity: 0.35; box-shadow: 0 0 0 1px rgba(183,121,31,0.18), 0 0 0 0.35rem rgba(183,121,31,0); }
}
@keyframes running-card-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(183,121,31,0.12), 0 0 0 rgba(183,121,31,0); }
  50% { box-shadow: 0 0 0 1px rgba(183,121,31,0.25), 0 0 1.2rem rgba(183,121,31,0.34); }
}
@media (prefers-reduced-motion: reduce) {
  .state-running .state-light,
  .stage-node.stage-state-running,
  .signal-node.signal-running { animation: none; }
}
.stage-node .name { font-weight: 600; font-size: 0.78rem; margin: 0.1rem 0; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-node .score { font-size: 1.1rem; font-weight: 700; line-height: 1.1; }
.stage-node .status {
  font-size: 0.66rem; margin-top: 0.15rem; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.stage-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem; margin-top: auto; padding-top: 0.35rem; }
.stage-actions .node-action {
  padding: 0.18rem 0.1rem; border-radius: 0.25rem;
  background: #e9edf5; color: var(--ink); font-size: 0.56rem; line-height: 1;
}
.stage-actions .node-action:hover { background: var(--brand); color: #fff; }
.stage-actions .classifier-toggle[aria-pressed="true"] { background: var(--accent, #4a7); color: #fff; border-color: var(--accent, #4a7); }
.stage-actions .classifier-toggle[aria-pressed="false"] { opacity: 0.75; }
.stage-actions .stop-action:hover { background: var(--bad); color: #fff; }
.stage-node .status.running { color: var(--warn); }
.stage-node .status.stopped { color: var(--good); }
.stage-node .status.pending { color: var(--void); }

.signal-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  border: 1.5px dashed #b6c0cc;
  background: #fafbfc;
  box-sizing: border-box;
  text-align: center;
}
.signal-node.collected { border-style: solid; border-color: var(--good); background: #f2fbf5; }
.signal-node.signal-running {
  border-style: solid;
  border-color: #f2c46d;
  background: #fffaf0;
  animation: running-card-glow 1.2s ease-in-out infinite;
}
.signal-node .signal-label { font-size: 0.68rem; color: var(--muted); }
.signal-node .signal-value { font-size: 0.85rem; font-weight: 700; }
.signal-node.pending .signal-value { color: var(--void); font-weight: 400; }
.signal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.18rem; width: 100%; margin-top: 0.35rem; }
.signal-action {
  padding: 0.16rem 0.08rem; border-radius: 0.25rem; border: 0;
  background: #e9edf5; color: var(--ink); font-size: 0.54rem; line-height: 1; cursor: pointer;
}
.signal-action:hover { background: var(--brand); color: #fff; }
.signal-action.stop-action:hover { background: var(--bad); color: #fff; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(18, 33, 47, 0.42);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: min(34rem, 100%); border-radius: 0.5rem; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 1.2rem 3rem rgba(18, 33, 47, 0.28); padding: 1rem;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.modal-header h2 { margin: 0; font-size: 1rem; }
.icon-btn { border: 0; background: #e9edf5; border-radius: 0.25rem; width: 1.8rem; height: 1.8rem; cursor: pointer; }
#info-modal-body { color: var(--ink); font-size: 0.9rem; line-height: 1.55; }
.feedback-modal-meta { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; }
.feedback-modal-meta .badge { background: #fff4e5; color: var(--warn); border-radius: 0.3rem; padding: 0.08rem 0.4rem; font-size: 0.72rem; }
.feedback-reason-list { margin: 0; padding-left: 1.25rem; }
.feedback-reason-list li { margin: 0.45rem 0; }

.chat-fab {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 25;
  padding: 0.6rem 1.1rem; border-radius: 2rem; border: 0;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 0.85rem;
  box-shadow: 0 0.5rem 1.2rem rgba(18, 33, 47, 0.28); cursor: pointer;
}
.chat-fab:hover { filter: brightness(1.08); }

.chat-panel {
  position: fixed; right: 1.5rem; bottom: 5rem; z-index: 25;
  width: min(22rem, calc(100vw - 2rem)); height: min(30rem, calc(100vh - 8rem));
  min-width: 16rem; min-height: 12rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 6rem);
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem;
  box-shadow: 0 1.2rem 3rem rgba(18, 33, 47, 0.28);
  resize: both; overflow: hidden;
}
.chat-panel[hidden] { display: none; }
.chat-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 0.85rem;
  flex: 0 0 auto;
}
/* A node title is a whole requirement sentence, and the header is a flex row
   with a model picker in it — without a min-width of 0 the title refuses to
   shrink and wraps into a one-word column. */
#node-ai-title, #chat-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel-header-actions { display: flex; align-items: center; gap: 0.3rem; }
.chat-panel-header-actions .icon-btn { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.chat-model-picker { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; color: var(--muted); font-size: 0.68rem; font-weight: 500; white-space: nowrap; }
.chat-model-picker select { max-width: 11rem; border: 1px solid var(--line); border-radius: 0.3rem; padding: 0.2rem 0.3rem; background: var(--surface, #fff); color: var(--ink); font: inherit; }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.chat-bubble {
  max-width: 85%; padding: 0.45rem 0.65rem; border-radius: 0.6rem; font-size: 0.85rem; line-height: 1.45; white-space: normal;
}
.chat-bubble.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 0.15rem; }
.chat-bubble.assistant { align-self: flex-start; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 0.15rem; }
.chat-bubble.assistant.pending { color: var(--muted); font-style: italic; }
.chat-bubble.assistant.error { color: var(--bad); border-color: var(--bad); }
.chat-input-row {
  display: flex; gap: 0.5rem; padding: 0.65rem; border-top: 1px solid var(--line);
  flex: 0 0 auto;
}
.chat-input-row textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.4rem 0.55rem;
  font: inherit; max-height: 7rem; overflow-y: auto;
}
.chat-input-row button {
  border: 0; border-radius: 0.4rem; background: var(--brand); color: #fff; padding: 0 0.9rem; cursor: pointer; font-weight: 600;
}
.chat-input-row button:hover { filter: brightness(1.08); }
/* A follow-up question the assistant itself proposed at the end of its last
   reply (see splitSuggestedFollowup in server.ts) — Tab in the textarea
   accepts it. Click works too, for anyone who'd rather not remember the key. */
.chat-suggestion { padding: 0.4rem 0.85rem; font-size: 0.72rem; color: var(--muted); border-top: 1px solid var(--line); cursor: pointer; flex: 0 0 auto; }
.chat-suggestion:hover { color: var(--ink); background: var(--bg); }
.chat-suggestion[hidden] { display: none; }

.stage-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.stat-row { display: flex; gap: 1.25rem; font-size: 0.85rem; }
.stat-row .stat b { display: block; font-size: 1.1rem; }

.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; margin: 0.75rem 0 1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 1450px) {
  header { flex-wrap: wrap; }
  #run-meta { max-width: none; }
  #control-buttons {
    order: 4;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 760px) {
  .top-bar-leading { flex: 1 1 auto; }
  #run-meta { order: 3; flex-basis: 100%; max-width: none; }
  #control-buttons { justify-content: flex-start; }
  .provider-model-stack { order: 0; }
  .header-status-stack { flex-basis: 7.5rem; }
}
.pane-title { font-weight: 600; font-size: 0.85rem; margin: 0.5rem 0 0.4rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr.status-keep td:first-child { border-left: 3px solid var(--good); }
tr.status-discard td:first-child { border-left: 3px solid var(--void); }
tr.status-void td:first-child { border-left: 3px solid var(--bad); }
tr.selected-row { background: #eef0fe; }

.formula-box {
  background: #f4f4ff; border: 1px solid #dcdcff; border-radius: 0.4rem;
  padding: 0.55rem 0.7rem; font-size: 0.76rem; color: var(--ink); margin-bottom: 0.7rem; line-height: 1.5;
}
.formula-box code { background: #e7e7ff; padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.75rem; }
.formula-box .kind-key { display: inline-flex; gap: 0.9rem; margin-top: 0.3rem; }
.formula-box .kind-key span { display: inline-flex; align-items: center; gap: 0.3rem; }
.formula-box .swatch { width: 0.6rem; height: 0.6rem; border-radius: 0.15rem; display: inline-block; }
.formula-box .swatch.hard { background: var(--brand); }
.formula-box .swatch.judge { background: #9333ea; }

.comp-row { margin-bottom: 0.65rem; font-size: 0.8rem; }
.comp-row .comp-row-main { display: flex; align-items: center; gap: 0.5rem; }
.comp-row .label { flex: 0 0 11rem; }
.comp-row .bar-track { flex: 1; height: 0.6rem; background: #eef1f5; border-radius: 0.3rem; overflow: hidden; }
.comp-row .bar-fill { display: block; height: 100%; background: var(--brand); }
.comp-row .bar-fill.judge { background: #9333ea; }
.comp-row .value { flex: 0 0 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.comp-row .weight { flex: 0 0 3.2rem; color: var(--muted); text-align: right; }
.comp-row .comp-method { font-size: 0.72rem; color: var(--muted); margin: 0.15rem 0 0 0; padding-left: 0; }
.comp-row .comp-instance { font-size: 0.72rem; color: var(--ink); margin-top: 0.1rem; }

.feedback-item { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.feedback-item:last-child { border-bottom: none; }
.feedback-item .badge { display: inline-block; background: #fff4e5; color: var(--warn); border-radius: 0.3rem; padding: 0.05rem 0.4rem; font-size: 0.72rem; margin-right: 0.4rem; }
.feedback-item .feedback-state {
  display: inline-block; margin-right: 0.45rem; padding: 0.05rem 0.4rem; border-radius: 0.3rem;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
}
.feedback-item-applied .feedback-state { background: #e5f7ed; color: #087348; }
.feedback-item-pending .feedback-state { background: #fff4e5; color: #8a5a08; }

button {
  background: var(--brand); color: #fff; border: 0; border-radius: 0.4rem;
  padding: 0.4rem 0.9rem; font: inherit; cursor: pointer;
}
button:disabled { opacity: 0.5; cursor: wait; }
#overview-link { color: var(--brand); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
#overview-link:hover { text-decoration: underline; }

.cov-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; font-size: 0.8rem; }
.cov-row .path { flex: 0 0 16rem; font-family: ui-monospace, monospace; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cov-row .bar-track { flex: 1; height: 0.55rem; background: #eef1f5; border-radius: 0.3rem; overflow: hidden; }
.cov-row .bar-fill { display: block; height: 100%; }
.cov-row .pct { flex: 0 0 3rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- mutation round ledger ---- */
.mutation-scoreboard {
  display: grid; grid-template-columns: minmax(9rem, 1.5fr) repeat(6, minmax(5rem, 1fr));
  gap: 0.55rem; margin-top: 0.2rem;
}
.mutation-score, .mutation-stat {
  min-height: 4.5rem; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.6rem 0.75rem; background: #fafbfc;
}
.mutation-score { background: #f4f4ff; border-color: #dcdcff; }
.mutation-score-value { font-size: 1.65rem; line-height: 1.05; font-weight: 750; font-variant-numeric: tabular-nums; }
.mutation-score span:last-child, .mutation-stat span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.045em; }
.mutation-stat strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.mutation-gate-passed { background: #eefaf3; border-color: #b8e5c9; }
.mutation-gate-passed strong { color: #087348; }
.mutation-gate-blocked { background: #fff5f5; border-color: #f2c4c8; }
.mutation-gate-blocked strong { color: var(--bad); }
.mutation-score-note { color: var(--muted); font-size: 0.74rem; margin-top: 0.38rem; }
.mutation-scope-band {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin: 0.85rem 0 0.65rem;
  padding: 0.5rem 0.65rem; background: #f8fafc; border: 1px solid var(--line); border-radius: 0.45rem; font-size: 0.75rem;
}
.mutation-scope-label { color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mutation-scope-band code { background: #eceefe; color: #3730a3; border-radius: 0.22rem; padding: 0.05rem 0.3rem; }
.mutation-scope-files { margin-left: auto; display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
.mutation-class-grid { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mutation-class-card {
  display: grid; grid-template-columns: 0.55rem auto auto; align-items: center; gap: 0.28rem;
  padding: 0.25rem 0.48rem; border: 1px solid var(--line); border-radius: 2rem; color: var(--muted); font-size: 0.69rem;
}
.mutation-class-card strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.mutation-class-dot { display: inline-block; width: 0.48rem; height: 0.48rem; border-radius: 50%; background: var(--mutation-color, var(--void)); }
.mutation-class-killed, .mutation-detail-killed { --mutation-color: var(--good); }
.mutation-class-timeout, .mutation-detail-timeout { --mutation-color: #0f879d; }
.mutation-class-survived, .mutation-detail-survived { --mutation-color: var(--bad); }
.mutation-class-no-coverage, .mutation-detail-no-coverage { --mutation-color: var(--warn); }
.mutation-class-equivalent, .mutation-detail-equivalent { --mutation-color: #64748b; }
.mutation-class-out-of-scope, .mutation-detail-out-of-scope { --mutation-color: #94a3b8; }
.mutation-class-compile-error, .mutation-detail-compile-error { --mutation-color: #7c3aed; }
.mutation-class-runtime-error, .mutation-detail-runtime-error { --mutation-color: #be185d; }
.mutation-class-ignored, .mutation-detail-ignored { --mutation-color: #9aa5b1; }
.mutation-class-pending, .mutation-detail-pending { --mutation-color: #2563eb; }
.mutation-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1rem 0 0.5rem; }
.mutation-section-heading h3 { margin: 0; font-size: 0.86rem; }
.mutation-round-ledger { position: relative; }
.mutation-round-ledger::before { content: ""; position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 2px; background: #d9deea; }
.mutation-round { position: relative; display: grid; grid-template-columns: 2rem 1fr; gap: 0.7rem; padding: 0.35rem 0 0.65rem; }
.mutation-round-marker { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: center; }
.mutation-round-marker span {
  width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--ink); color: #fff; border: 3px solid var(--card); font-size: 0.68rem; font-weight: 750;
}
.mutation-round-body { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.62rem 0.72rem; background: #fff; }
.mutation-round-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mutation-round-header > div { display: flex; align-items: baseline; gap: 0.45rem; }
.mutation-round-header > div span { color: var(--muted); font-size: 0.7rem; }
.mutation-enforcement-badge { padding: 0.12rem 0.42rem; border-radius: 1rem; background: #eef1f5; color: var(--muted); font-size: 0.66rem; font-weight: 700; }
.mutation-enforcement-effective .mutation-enforcement-badge { background: #dff6e8; color: #087348; }
.mutation-enforcement-partial .mutation-enforcement-badge, .mutation-enforcement-pending .mutation-enforcement-badge { background: #fff4e5; color: #8a5a08; }
.mutation-enforcement-ineffective .mutation-enforcement-badge, .mutation-enforcement-no-test-change .mutation-enforcement-badge { background: #fde8e9; color: #a51d26; }
.mutation-status-strip { display: flex; height: 0.48rem; overflow: hidden; border-radius: 0.3rem; margin: 0.55rem 0 0.35rem; background: #eef1f5; }
.mutation-status-strip span { min-width: 2px; }
.mutation-strip-killed { background: var(--good); }
.mutation-strip-timeout { background: #0f879d; }
.mutation-strip-survived { background: var(--bad); }
.mutation-strip-no-coverage { background: var(--warn); }
.mutation-strip-equivalent { background: #64748b; }
.mutation-strip-out-of-scope { background: #94a3b8; }
.mutation-strip-compile-error { background: #7c3aed; }
.mutation-strip-runtime-error { background: #be185d; }
.mutation-strip-ignored { background: #9aa5b1; }
.mutation-strip-pending { background: #2563eb; }
.mutation-round-counts, .mutation-enforcement-detail { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.69rem; color: var(--muted); }
.mutation-enforcement-detail { justify-content: space-between; border-top: 1px dashed var(--line); margin-top: 0.48rem; padding-top: 0.42rem; color: var(--ink); }
.mutation-file-row .mutation-other-count { flex: 0 0 4rem; color: var(--muted); font-size: 0.66rem; }
.mutation-detail-round { margin-top: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.mutation-detail-round h4 { margin: 0 0 0.35rem; font-size: 0.78rem; }
.mutation-detail-group { border-bottom: 1px solid var(--line); }
.mutation-detail-group summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.2rem; cursor: pointer; color: var(--ink); font-size: 0.76rem; }
.mutation-detail-group summary:hover, .mutation-detail-group summary:focus-visible { color: var(--brand); }
.mutation-detail-group summary .mutation-class-dot { background: var(--mutation-color); }
.mutation-detail-group summary span:last-child { color: var(--muted); }
.mutation-table-scroll { overflow-x: auto; }
.mutation-table-scroll code { font-size: 0.7rem; white-space: nowrap; }
/* The change cell holds arbitrary source, so it is the one that must yield.
   Without a bound it grew until the objective column was pushed off the right
   edge — present in the DOM, invisible to the reader, and looking empty. */
.mutation-mutant-table { table-layout: fixed; width: 100%; }
.mutation-mutant-table th:nth-child(1), .mutation-mutant-table td:nth-child(1) { width: 22%; }
.mutation-mutant-table th:nth-child(2), .mutation-mutant-table td:nth-child(2) { width: 5rem; }
.mutation-mutant-table th:nth-child(3), .mutation-mutant-table td:nth-child(3) { width: 11rem; }
.mutation-mutant-table th:nth-child(5), .mutation-mutant-table td:nth-child(5) { width: 9.5rem; }
.mutation-change { overflow: hidden; }
.mutation-change code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.mutation-was { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(209,55,63,0.5); }
.mutation-now { color: var(--ink); background: rgba(15,157,103,0.1); border-radius: 0.2rem; padding: 0 0.2rem; }
.mutation-arrow { margin: 0 0.35rem; color: var(--muted); }
.mutation-reconstructed { margin-left: 0.35rem; color: var(--warn); font-weight: 700; cursor: help; }
.mutation-change-reason { color: var(--muted); font-size: 0.72rem; }

@media (max-width: 760px) {
  .mutation-scoreboard { grid-template-columns: repeat(2, minmax(6rem, 1fr)); }
  .mutation-score { grid-column: span 2; }
  .mutation-scope-files { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
  .mutation-section-heading { display: block; }
  .mutation-file-row .path { flex-basis: 9rem; }
  .mutation-file-row .mutation-other-count { display: none; }
}

.gap-item { font-size: 0.8rem; padding: 0.15rem 0; }

/* ---- iteration detail drill-down ---- */
#iteration-detail:empty { display: none; }
.iter-detail {
  border: 1px solid var(--brand);
  background: #f8f8ff;
  border-radius: 0.5rem;
  padding: 0.9rem 1rem;
  margin: 0.75rem 0;
}
.iter-detail .iter-detail-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem;
}
.iter-detail .iter-detail-header h3 { margin: 0; font-size: 0.95rem; }
.iter-detail .close-btn { background: none; color: var(--muted); border: 1px solid var(--line); padding: 0.1rem 0.5rem; font-size: 0.75rem; }
.iter-detail .desc { font-style: italic; color: var(--ink); margin-bottom: 0.5rem; }
.iter-detail .iter-refined { margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; border-left: 3px solid var(--accent, #4a7); background: color-mix(in srgb, var(--accent, #4a7) 8%, transparent); }
.iter-detail .iter-refined em { font-style: normal; font-weight: 600; }
.iter-detail .notes-list { font-size: 0.8rem; color: var(--warn); margin-bottom: 0.6rem; }
.iter-detail .notes-list div { padding: 0.1rem 0; }
.iter-detail table { font-size: 0.8rem; }
.delta { font-variant-numeric: tabular-nums; font-size: 0.75rem; padding: 0 0.3rem; border-radius: 0.25rem; }
.delta.up { color: var(--good); }
.delta.down { color: var(--bad); }
.delta.flat { color: var(--void); }
.detail-text { color: var(--muted); font-size: 0.75rem; }
.detail-text .method-line { display: block; font-style: italic; opacity: 0.85; margin-bottom: 0.1rem; }
.detail-text .instance-line { display: block; color: var(--ink); }

/* ---- component evolution mini-charts ---- */
#component-evolution { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.comp-evo-card {
  border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.6rem 0.7rem;
  cursor: pointer; background: #fafbfc;
}
.comp-evo-card:hover { border-color: var(--brand); }
.comp-evo-card.expanded { border-color: var(--brand); background: #f8f8ff; }
.comp-evo-card .head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; margin-bottom: 0.3rem; }
.comp-evo-card .head .label { font-weight: 600; }
.comp-evo-card .head .kind-badge { font-size: 0.65rem; color: #9333ea; }
.comp-evo-card .method { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.35rem; line-height: 1.35; }
.comp-evo-card .formula-line { font-size: 0.72rem; color: var(--brand); margin: 0.3rem 0; font-family: ui-monospace, monospace; }
.comp-evo-card .warn-badge {
  display: inline-block; font-size: 0.68rem; color: var(--bad); background: #fdecea;
  border-radius: 0.25rem; padding: 0.05rem 0.35rem; margin-top: 0.3rem;
}
.comp-evo-detail { margin-top: 0.5rem; border-top: 1px dashed var(--line); padding-top: 0.4rem; font-size: 0.75rem; }
.comp-evo-detail .row { display: flex; gap: 0.5rem; padding: 0.1rem 0; }
.comp-evo-detail .row .it { flex: 0 0 2rem; color: var(--muted); }
.comp-evo-detail .row .val { flex: 0 0 3rem; font-variant-numeric: tabular-nums; }
.comp-evo-detail .row .txt { flex: 1; color: var(--ink); }

/* ---- traceability accordion ---- */
tr.req-detail-row td { background: #fafbfc; padding: 0.75rem 1rem; }
.req-detail { font-size: 0.8rem; }
.req-detail .req-full-title { font-weight: 600; margin-bottom: 0.3rem; }
.req-detail .req-statement { color: var(--muted); margin-bottom: 0.6rem; }
.req-detail .subhead { font-weight: 600; font-size: 0.78rem; margin: 0.6rem 0 0.3rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.req-detail .chain-item { background: #fff; border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.5rem 0.6rem; margin-bottom: 0.4rem; }
.req-detail .chain-item .title { font-weight: 600; }
.req-detail .chain-item ol, .req-detail .chain-item ul { margin: 0.3rem 0 0.2rem 1.1rem; padding: 0; }
.req-detail .chain-item li { margin-bottom: 0.15rem; }
/* The deterministic "in plain English" reading of a test — meaning, a
   concrete example, then the one-line summary — same wherever a test shows
   up in the dashboard (traceability, execution live). */
.test-explanation { margin-top: 0.4rem; padding: 0.5rem 0.6rem; background: #f8fafc; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 0.3rem; font-size: 0.78rem; line-height: 1.5; }
.test-explanation .subhead { margin-top: 0; }
.test-explanation-example { margin: 0.4rem 0; padding: 0.4rem 0.5rem; background: #fff; border: 1px solid var(--line); border-radius: 0.3rem; font-family: ui-monospace, monospace; font-size: 0.72rem; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.test-explanation-summary { margin-top: 0.3rem; font-style: italic; color: var(--muted); }
/* Progressive disclosure: collapsed by default, a plain question as the
   affordance rather than a generic "Details" toggle. */
.test-explanation-more { margin-top: 0.5rem; border-top: 1px dashed var(--line); padding-top: 0.4rem; }
.test-explanation-more summary { cursor: pointer; font-weight: 600; color: var(--brand); list-style: none; }
.test-explanation-more summary::-webkit-details-marker { display: none; }
.test-explanation-more summary::before { content: "▸ "; }
.test-explanation-more[open] summary::before { content: "▾ "; }
.test-explanation-section { margin-top: 0.5rem; }
.test-explanation-section-heading { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 0.2rem; }
.test-explanation-section ul, .test-explanation-section ol { margin: 0.2rem 0 0 1.1rem; padding: 0; }
.test-explanation-section li { margin-bottom: 0.15rem; }
.req-detail .test-item { display: flex; align-items: center; gap: 0.5rem; }
.req-detail .test-status { flex: 0 0 5rem; font-weight: 600; }
.req-detail .test-status.passed { color: var(--good); }
.req-detail .test-status.failed, .req-detail .test-status.timedOut { color: var(--bad); }
.req-detail .test-status.unknown { color: var(--void); }
.req-detail pre.test-body {
  background: #12212f; color: #d6e2ef; padding: 0.6rem 0.7rem; border-radius: 0.4rem;
  font-size: 0.72rem; overflow-x: auto; margin: 0.3rem 0 0; white-space: pre-wrap;
}
.req-detail details summary { cursor: pointer; color: var(--brand); font-size: 0.78rem; margin-top: 0.2rem; }
.test-code-details { margin-top: 0.25rem; }

/* ---- generated test code browser (stage 5, directory + VS-Code-highlighted viewer) ---- */
.testcode-browser { display: flex; gap: 0.8rem; align-items: flex-start; }
.testcode-tree { flex: 0 0 14rem; max-height: 34rem; overflow: auto; border: 1px solid var(--line); border-radius: 0.35rem; padding: 0.5rem; font-size: 0.78rem; background: #f8fafc; }
.tree-list { list-style: none; margin: 0; padding-left: 0.95rem; }
.testcode-tree > .tree-list { padding-left: 0; }
.tree-dir summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 0.12rem 0; list-style: none; }
.tree-dir summary::-webkit-details-marker { display: none; }
.tree-dir summary::before { content: "▸ "; }
.tree-dir details[open] > summary::before { content: "▾ "; }
.tree-file-btn { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.15rem 0.3rem; border-radius: 0.25rem; cursor: pointer; color: var(--ink); font-family: ui-monospace, monospace; font-size: 0.75rem; }
.tree-file-btn:hover { background: rgba(37, 99, 235, 0.1); }
.tree-file-btn.active { background: var(--brand); color: #fff; }
.testcode-viewer { flex: 1 1 auto; min-width: 0; }
.testcode-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.testcode-path { font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--ink); }
.testcode-viewer-body { max-height: 42rem; overflow-y: auto; }
.testcode-code { border-radius: 0.4rem; overflow: hidden; margin-bottom: 0.5rem; }
.testcode-code pre.shiki { margin: 0 !important; padding: 0.7rem 0.8rem; overflow-x: auto; font-size: 0.75rem; line-height: 1.55; }
.testcode-full-file { max-height: 30rem; overflow-y: auto; }
.testcode-summary { border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; background: #fafbfc; font-size: 0.78rem; }
.testcode-summary-row { display: flex; gap: 0.6rem; padding: 0.15rem 0; align-items: baseline; }
.testcode-summary-row + .testcode-summary-row { border-top: 1px dashed var(--line); margin-top: 0.15rem; }
.testcode-summary-label { flex: 0 0 5rem; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.02em; }
.testcode-summary-value { color: var(--ink); }
.testcode-summary-checks { margin: 0; padding-left: 1.1rem; }
.testcode-summary-checks li { margin-bottom: 0.1rem; }
.code-token-keyword { color: #7c3aed; border-bottom-color: #7c3aed; }
.test-explanation-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; margin: 0.5rem 0 0.35rem; }
.test-explanation-actions .small-btn { margin-left: auto; }
.language-badge { color: var(--brand); border: 1px solid var(--line); border-radius: 0.25rem; padding: 0.12rem 0.35rem; font-size: 0.68rem; font-weight: 600; }
.test-explanation { border: 1px solid var(--line); border-radius: 0.35rem; overflow: hidden; background: #f8fafc; }
.test-explanation-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.42rem 0.55rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.test-explanation-rows { overflow-x: auto; }
.test-explanation-row { display: grid; grid-template-columns: 2rem minmax(18rem, 1.2fr) minmax(14rem, 1fr); align-items: start; min-width: 44rem; border-bottom: 1px solid rgba(148, 163, 184, 0.18); }
.test-explanation-row:last-child { border-bottom: none; }
.test-explanation-row-failed { background: rgba(220, 38, 38, 0.07); }
.test-explanation-row-failed .test-business-line { color: var(--bad); font-weight: 600; }
.test-explanation-row-passed { background: rgba(22, 163, 74, 0.05); }
.test-explanation-row-passed .test-business-line { color: var(--good); }
.code-token-assertion { font-weight: 700; }
.code-token-failed { color: #fca5a5; border-bottom-color: #fca5a5; }
.code-token-passed { color: #86efac; border-bottom-color: #86efac; }
.testcode-evidence { margin: 0.5rem 0; }

/* ---- AI explanation popup ---- */
.app-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 200; align-items: center; justify-content: center; padding: 2rem; }
.app-modal-overlay.open { display: flex; }
.app-modal { background: #fff; border-radius: 0.5rem; max-width: 40rem; width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 1rem 3rem rgba(15, 23, 42, 0.35); }
.app-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.app-modal-title { font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-modal-close { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0.1rem 0.5rem; }
.app-modal-close:hover { color: var(--ink); }
.app-modal-body { padding: 1rem; overflow-y: auto; font-size: 0.85rem; line-height: 1.65; color: var(--ink); }
.app-modal-explanation strong { color: var(--brand); }

/* ---- per-repeat-run history (stage 6's stability runs) ---- */
.execution-test-flaky { outline: 1px dashed var(--warn); outline-offset: -1px; }
.run-dots { display: inline-flex; gap: 0.2rem; justify-content: flex-end; }
.run-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--void); }
.run-dot-passed { background: var(--good); }
.run-dot-failed, .run-dot-timedOut, .run-dot-interrupted { background: var(--bad); }
.run-dot-skipped { background: var(--muted); }
.run-dot-passed-text { color: var(--good); }
.run-dot-failed-text, .run-dot-timedOut-text, .run-dot-interrupted-text { color: var(--bad); }
.run-dot-skipped-text { color: var(--muted); }
.code-line-number { padding: 0.34rem 0.35rem; color: var(--muted); text-align: right; user-select: none; font: 0.68rem/1.45 ui-monospace, monospace; }
/* Long lines wrap inside the dark cell. As `pre` they ran past the cell's
   right edge into the business column: light code on a light background. */
.test-code-line { position: relative; display: block; min-width: 0; align-self: stretch; padding: 0.34rem 0.5rem; color: #d6e2ef; background: #12212f; min-height: 1.45rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.71rem; }
.test-business-line { min-width: 0; padding: 0.34rem 0.55rem; color: var(--ink); font-size: 0.74rem; line-height: 1.45; }
.code-token { position: relative; color: #93c5fd; border-bottom: 1px dotted #93c5fd; cursor: help; }
/* Below the token, not above — the walkthrough sits inside scrolling panels, and a
   tooltip opening upward from a row near the top gets clipped by the panel's own
   edge before it's ever visible. Below always has a full scrollable panel beneath it. */
.code-token:hover::after, .code-token:focus::after { content: attr(data-tooltip); position: absolute; z-index: 20; left: 0; top: calc(100% + 0.35rem); width: min(19rem, 70vw); padding: 0.45rem 0.55rem; border: 1px solid #334155; border-radius: 0.3rem; background: #0f172a; color: #f8fafc; white-space: normal; font: 0.72rem/1.4 system-ui, sans-serif; box-shadow: 0 0.3rem 1rem rgba(15, 23, 42, 0.25); }
.test-ai-result { margin-top: 0.45rem; padding: 0.55rem 0.65rem; border-left: 3px solid var(--brand); background: #f1f5f9; color: var(--ink); font-size: 0.78rem; line-height: 1.5; }
.test-ai-result.pending { color: var(--muted); border-left-color: var(--warn); }
.test-ai-result.error { color: var(--bad); border-left-color: var(--bad); }
.explanation-provider { margin: 0.45rem 0; color: var(--muted); font-size: 0.74rem; }
.req-detail .defect-item.critical { border-left: 3px solid var(--bad); }
.req-detail .defect-item.major { border-left: 3px solid var(--warn); }
.req-detail .defect-item.minor { border-left: 3px solid var(--void); }

.agent-log-box { margin-top: 0.8rem; }
.agent-log-box .agent-log-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.agent-log-box .pill-live-dot { color: var(--good); }
.agent-log-iter-picker { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-right: auto; }
.testcode-which-toggle { display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* ---- traceability graph (force-directed, hand-rolled — no client dep) ---- */
.trace-graph-toolbar { display: flex; align-items: stretch; flex-direction: column; gap: 0.8rem; margin: 0.55rem 0; }
.trace-graph-help { color: var(--muted); font-size: 0.78rem; line-height: 1.5; max-width: 70rem; }
.trace-graph-controls { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; gap: 0.55rem; flex-wrap: wrap; }
.trace-reading-key { color: var(--muted); font-size: 0.72rem; line-height: 1.5; margin: 0.5rem 0 0.75rem; }
.trace-drill-selection { color: var(--muted); font-size: 0.75rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-drill-selection { color: #cbd5e1; }
.trace-selection-note { color: var(--muted); font-size: 0.75rem; margin-bottom: 0.7rem; }
.trace-layer-action { margin-bottom: 0.75rem; }
.trace-connections { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.65rem; }
.trace-connections h3 { font-size: 0.85rem; margin: 0 0 0.5rem; }
.trace-connections button { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; width: 100%; margin-bottom: 0.45rem; padding: 0.6rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 0.3rem; white-space: normal; overflow-wrap: anywhere; font-size: 0.78rem; }
.trace-connections button:hover, .trace-connections button:focus-visible { border-color: #2563eb; background: #eff6ff; }
.trace-connections small { color: var(--muted); line-height: 1.4; }
.trace-graph-controls .small-btn { background: #f8fafc; color: #334155; border-color: #cbd5e1; box-shadow: none; }
.trace-graph-controls .small-btn:hover, .trace-graph-controls .small-btn:focus-visible, .trace-graph-controls .small-btn.active { background: #eef2ff; color: #3730a3; border-color: #818cf8; }
.trace-layout-control { display: inline-flex; align-items: center; gap: 0.3rem; color: #475569; font-size: 0.68rem; white-space: nowrap; }
.trace-layout-control select { height: 1.8rem; border: 1px solid #cbd5e1; border-radius: 0.35rem; padding: 0 0.35rem; background: #f8fafc; color: #334155; font: inherit; }
#trace-find-item { max-width: 15rem; }
/* Panel now spans the viewport, not just the card column — a lot more room
   to actually read the sphere. Escapes `main`'s max-width via the usual
   full-bleed trick (100vw + negative margin), independent of scroll width. */
#trace-section { width: calc(100vw - 2.5rem); align-self: center; box-sizing: border-box; }
.trace-graph-view { width: 100%; position: relative; left: 0; margin-left: 0; box-sizing: border-box; }
/* Graph on the left, a fixed-width detail column on the right — replaces the
   old stacked layout so clicking a node doesn't push the map down the page. */
.trace-graph-body { display: flex; align-items: stretch; gap: 1rem; }
.trace-graph-shell { position: relative; flex: 1 1 auto; min-width: 0; height: 74vh; min-height: 34rem; border: 1px solid #27364c; border-radius: 0.5rem; background: radial-gradient(ellipse at 50% 46%, rgba(30,64,175,0.42) 0%, rgba(15,23,42,0.96) 38%, #030712 82%), radial-gradient(ellipse at 18% 78%, rgba(124,58,237,0.2), transparent 48%), radial-gradient(ellipse at 82% 20%, rgba(8,145,178,0.18), transparent 46%); overflow: hidden; box-shadow: inset 0 0 5rem rgba(2, 6, 23, 0.58), 0 0.55rem 1.4rem rgba(15, 23, 42, 0.12); }
/* Fullscreen target is the whole graph view so its toolbar remains available
   alongside the shell and detail column — see toggleTraceFullscreen. */
.trace-graph-view:is(:fullscreen, .is-expanded) { width: 100vw; height: 100vh; left: 0; margin-left: 0; padding: 0.75rem; box-sizing: border-box; background: #0b1220; overflow: hidden; display: flex; flex-direction: column; }
.trace-graph-view.is-expanded { position: fixed; inset: 0; z-index: 1000; }
body.trace-expanded { overflow: hidden; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-toolbar { position: static; width: auto; margin: 0 0 0.5rem; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-help { display: none; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-controls { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-controls .small-btn, .trace-graph-view:is(:fullscreen, .is-expanded) .trace-layout-control select { width: auto; box-sizing: border-box; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-layout-control { justify-content: space-between; color: #cbd5e1; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-reading-key { color: #cbd5e1; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-body { flex: 1; min-height: 0; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-shell { height: 100%; min-height: 0; border-radius: 0; }
.trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-detail { height: 100%; min-height: 0; box-sizing: border-box; }
.trace-graph-svg { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; outline: none; }
.trace-graph-svg.panning { cursor: grabbing; }
.trace-graph-shell.navigation-active { border-color: #38bdf8; box-shadow: inset 0 0 5rem rgba(2, 6, 23, 0.58), inset 0 0 0 1px rgba(56,189,248,0.35), 0 0 1.6rem rgba(14,165,233,0.18); }
.trace-graph-shell.navigation-active .trace-graph-svg { cursor: none; }
/* Keyboard focus only. The map takes focus on every pointerdown so WASD has
   somewhere to land, and Chrome keeps :focus-visible true across a
   programmatic focus that follows keyboard use — so clicking a star after
   flying drew this border round the whole map. focus-source.js records that
   such a focus was pointer-placed. */
html:not([data-focus-source="pointer"]) .trace-graph-svg:focus-visible { box-shadow: inset 0 0 0 2px #60a5fa; }
.trace-graph-input-hint { position: absolute; top: 0.65rem; left: 0.65rem; z-index: 2; width: 14.5rem; padding: 0.45rem 0.55rem; border: 1px solid rgba(71, 85, 105, 0.85); border-radius: 0.45rem; background: rgba(15, 23, 42, 0.82); color: #cbd5e1; font-size: 0.63rem; line-height: 1.25; pointer-events: none; user-select: none; }
.trace-input-title { color: #f8fafc; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.trace-wasd { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; margin: 0.35rem 0 0.2rem; }
.trace-wasd-row { display: flex; gap: 0.12rem; }
.trace-graph-input-hint kbd { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.15rem; border: 1px solid #64748b; border-bottom-width: 2px; border-radius: 0.22rem; background: #1e293b; color: #f8fafc; font: 700 0.62rem/1 ui-monospace, monospace; }
.trace-input-caption, .trace-mouse-caption { color: #94a3b8; white-space: normal; }
.trace-mouse-caption { margin-top: 0.22rem; color: #bae6fd; }
.trace-crosshair { position: absolute; left: 50%; top: 50%; z-index: 4; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; opacity: 0; pointer-events: none; transition: opacity 140ms ease; filter: drop-shadow(0 0 0.25rem rgba(56,189,248,0.9)); }
.trace-crosshair::before, .trace-crosshair::after { content: ""; position: absolute; background: rgba(224,242,254,0.9); }
.trace-crosshair::before { left: 0.45rem; top: 0; width: 0.1rem; height: 1rem; }
.trace-crosshair::after { left: 0; top: 0.45rem; width: 1rem; height: 0.1rem; }
.trace-graph-shell.navigation-active .trace-crosshair { opacity: 1; }
.trace-navigation-state { position: absolute; left: 50%; bottom: 0.65rem; z-index: 3; transform: translateX(-50%); padding: 0.3rem 0.55rem; border: 1px solid rgba(71,85,105,0.9); border-radius: 999px; background: rgba(15,23,42,0.84); color: #cbd5e1; font: 600 0.62rem/1.2 ui-monospace, monospace; letter-spacing: 0.015em; pointer-events: none; white-space: nowrap; }
.trace-graph-shell.navigation-active .trace-navigation-state { border-color: rgba(56,189,248,0.75); color: #e0f2fe; background: rgba(3,105,161,0.34); }
.trace-graph-fullscreen-btn { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; border: 1px solid #334155; border-radius: 0.4rem; background: rgba(15, 23, 42, 0.82); color: #cbd5e1; font-size: 1rem; line-height: 1; cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.trace-graph-fullscreen-btn:hover, .trace-graph-fullscreen-btn:focus-visible { background: #1e293b; color: #fff; }
/* Flowing curved connectors + a small direction arrow at each one's midpoint —
   github.com/rengwu/chartr's star-map look, adapted onto this sphere. */
/* The resting value before the render loop takes over: edges are alpha-fogged
   per frame from their own eye distance (see traceDepthFog), because a 1.4px
   translucent stroke has no interior for the nodes' colour-blend fog to act on
   and filtering hundreds of long curved paths would cost far more than it shows. */
.trace-edge { opacity: 0.8; }
/* Wider invisible twin of trace-edge-line, purely for hover — see
   syncTraceGraphDom/traceGraphTick loop. Sits under the visible line and
   arrow/particle in paint order but ahead of them for pointer purposes since
   it's the only one listening. */
.trace-edge-hit { stroke: transparent; stroke-width: 22; stroke-linecap: round; pointer-events: stroke; cursor: pointer; }
.trace-edge-line { fill: none; stroke: rgba(148, 163, 184, 0.4); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.trace-edge.basis-inferred .trace-edge-line { stroke-dasharray: 4 6; stroke: rgba(148, 163, 184, 0.26); stroke-width: 1.3; }
.trace-edge-arrow { fill: rgba(148, 163, 184, 0.6); }
.trace-edge.basis-inferred .trace-edge-arrow { fill: rgba(148, 163, 184, 0.32); }
.trace-edge-particle { fill: #7dd3fc; filter: drop-shadow(0 0 2px #7dd3fc); pointer-events: none; }
.trace-edge.basis-inferred .trace-edge-particle { fill: #67e8f9; opacity: 0.6; }
/* Every edge touching the hovered node, in and out both — see setTraceEdgeHighlight. */
.trace-edge.trace-edge-highlight { opacity: 1 !important; }
.trace-edge.trace-edge-highlight .trace-edge-line { stroke: #fbbf24 !important; stroke-width: 2.2 !important; stroke-dasharray: none !important; filter: drop-shadow(0 0 3px #fbbf24); }
.trace-edge.trace-edge-highlight .trace-edge-arrow { fill: #fbbf24 !important; filter: drop-shadow(0 0 3px #fbbf24); }
.trace-edge.trace-edge-highlight .trace-edge-particle { fill: #fef08a !important; filter: drop-shadow(0 0 3px #fde047); }
/* Hovering a node: its inbound edges (things feeding it) glow white instead
   of yellow, so direction is legible at a glance — yellow stays reserved for
   outbound edges, a directly-hovered edge, and the persistent selection. */
.trace-edge.trace-edge-highlight-in { opacity: 1 !important; }
.trace-edge.trace-edge-highlight-in .trace-edge-line { stroke: #f8fafc !important; stroke-width: 2.2 !important; stroke-dasharray: none !important; filter: drop-shadow(0 0 3px #f8fafc); }
.trace-edge.trace-edge-highlight-in .trace-edge-arrow { fill: #f8fafc !important; filter: drop-shadow(0 0 3px #f8fafc); }
.trace-edge.trace-edge-highlight-in .trace-edge-particle { fill: #ffffff !important; filter: drop-shadow(0 0 3px #f8fafc); }
.trace-expansion-ripple { fill: none; stroke: rgba(147, 197, 253, 0.75); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; animation: trace-expansion-ripple 650ms ease-out forwards; }
@keyframes trace-expansion-ripple { from { opacity: 0.85; stroke-width: 3; } to { opacity: 0; stroke-width: 0.5; } }
.trace-node { outline: none; }
.trace-node-circle { stroke-width: 2; cursor: pointer; vector-effect: non-scaling-stroke; transition: filter 140ms ease, opacity 140ms ease; }
.trace-node:hover .trace-node-circle, .trace-node:focus-visible .trace-node-circle { filter: brightness(1.22); }
.trace-node-circle.kind-requirement { fill: #2563eb; stroke: #93c5fd; }
.trace-node-circle.kind-requirement.expanded { fill: #1d4ed8; stroke: #dbeafe; }
.trace-node-circle.kind-scenario { fill: #16a34a; stroke: #86efac; }
.trace-node-circle.kind-edgeCase { fill: #d97706; stroke: #fcd34d; }
.trace-node-circle.kind-testData { fill: #0891b2; stroke: #67e8f9; }
.trace-node-circle.kind-test { fill: #7c3aed; stroke: #c4b5fd; }
.trace-node-circle.kind-defect { fill: #dc2626; stroke: #fca5a5; }
.trace-node-circle.expanded { filter: brightness(1.14) drop-shadow(0 0 0.22rem rgba(255,255,255,0.35)); }
.trace-node-circle.placed { stroke-dasharray: 2.5 2.5; filter: drop-shadow(0 0 0.26rem rgba(255,255,255,0.72)); }
/* The "you are here" glow chartr puts on its current node — a soft halo
   rather than just a thicker stroke. */
.trace-node-circle.selected { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 0.3rem rgba(147, 197, 253, 0.95)) drop-shadow(0 0 0.75rem rgba(147, 197, 253, 0.55)); }
.trace-node-circle.test-passed { opacity: 0.55; }
/* The soft halo behind the star (chartr's outer glow gradient) — never a hit
   target, and never interferes with the ring's own hover/click behaviour. */
/* The glow was briefly made a hit target to give a drifting node a more
   forgiving hover area. It is drawn at 2.6x the circle's radius, which is
   wider than the entire separation the repulsion pass guarantees between two
   nodes (rA + rB + TRACE_MIN_GAP) — so every node's invisible hit area
   reached well past its neighbours. Measured on a 125-node map, 105 nodes had
   their visible centre buried under another node's disc, up to six deep:
   hovering reported whichever node was nearest the camera rather than the one
   under the cursor, and moving off a node landed inside the next node's disc
   instead of leaving, so the detail column appeared to stick on the wrong item
   until something else was clicked. The forgiving target is .trace-node-hit
   below, sized so it cannot reach a neighbour. */
.trace-node-glow { pointer-events: none; }
/* The node's actual pointer target: TRACE_MIN_GAP/2 wider than the circle
   that's drawn. That is the largest radius which still cannot overlap the
   next node's, since repulsion holds their centres at least
   (rA + rB + TRACE_MIN_GAP) apart — forgiving by construction rather than by
   a guessed margin. pointer-events: all (not visiblePainted) so the disc
   hit-tests without depending on how its fill is painted. */
.trace-node-hit { fill: none; pointer-events: all; }
.trace-node-label { fill: #e2e8f0; font-size: 9px; font-family: inherit; font-weight: 400; pointer-events: none; user-select: none; }
.trace-node-badge { fill: #f8fafc; font-size: 0.58rem; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; user-select: none; }
.trace-node-expand { cursor: pointer; }
html:not([data-focus-source="pointer"]) .trace-node-expand:focus-visible circle { stroke: #fff; stroke-width: 1.5px; }
.trace-node-badge.test-badge-passed { fill: #86efac; filter: drop-shadow(0 0 2px rgba(34,197,94,0.8)); }
.trace-node-badge.test-badge-failed { fill: #fca5a5; filter: drop-shadow(0 0 2px rgba(239,68,68,0.8)); }
.trace-node-badge.test-badge-unknown { fill: #fde68a; }
/* The starfield is a <canvas> now (see drawTraceStarfield) — a true bitmap,
   painted pixels, not individual SVG shapes — sitting behind the SVG layer. */
.trace-stars-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
/* Hover-revealed "reveal / focus" action pair on each node — hidden until the
   node is hovered or focused, then faded in together so they never render as
   plain unstyled black discs. */
/* Visibility is JS-driven (showTraceNodeActions/hideTraceNodeActions, with a
   short delay on hide) rather than pure :hover — the sphere keeps nudging
   nodes out from under a stationary cursor while it orbits, and a raw :hover
   toggle flickers the ring on and off every time that happens. :focus-visible
   stays hover-independent so keyboard users are unaffected. */
/* Neo4j-Browser-style: a curved band hugging the node's rim instead of a
   free-floating circle. fill:none + a thick round-capped stroke is the band. */
/* butt (not round) caps so the three bands butt up against each other with a
   sharp join instead of leaving rounded notches — one continuous ring. */
/* Invisible, wider stroke on the same centerline as the band above — a
   fatter click/hover target than the visible band itself, 25% wider than it
   (12 * 1.25 = 15), extending evenly on both sides of the arc since an SVG
   stroke is always centered on its path. stroke-linecap:butt keeps it from
   overlapping into the next segment's hit region at the seams. */
   off while the ring is hidden. Naming a value here opted this path out of
   that: every node kept a live, invisible 18px-wide ring out at radius + 13
   whether or not its ring was showing, which reached across the gap between
   neighbours and quietly took their hover. `inherit` keeps the wider target
   without letting a hidden ring have one at all — when the parent is auto the
   path still hit-tests only where it paints, which is its stroke. */
/* Two characters ("AI") need a touch less size than the single-glyph arrows
   to sit comfortably in the same arc band width. */
.trace-graph-tooltip { position: absolute; z-index: 5; max-width: 20rem; padding: 0.5rem 0.65rem; background: #1e293b; color: #f1f5f9; border: 1px solid #334155; border-radius: 0.35rem; font-size: 0.72rem; line-height: 1.45; pointer-events: none; box-shadow: 0 0.4rem 1rem rgba(0,0,0,0.35); }
.trace-graph-tooltip strong { color: #93c5fd; }
.trace-graph-status { position: absolute; right: 3.1rem; bottom: 0.6rem; z-index: 2; padding: 0.3rem 0.48rem; border: 1px solid #334155; border-radius: 0.35rem; background: rgba(15, 23, 42, 0.82); color: #94a3b8; font: 0.62rem/1.2 ui-monospace, monospace; pointer-events: none; }
.trace-graph-legend { position: absolute; left: 0.6rem; bottom: 0.6rem; display: flex; gap: 0.7rem; flex-wrap: wrap; background: rgba(15, 23, 42, 0.75); border: 1px solid #334155; border-radius: 0.35rem; padding: 0.35rem 0.55rem; }
.trace-graph-legend span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; color: #cbd5e1; }
.trace-graph-legend i { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
/* A light card beside the dark sphere rather than a strip that pushes the
   whole page down — its inner .req-detail/.chain-item styles already assume
   a light background, so the column stays light while the map stays dark. */
.trace-graph-detail { flex: 0 0 22rem; max-width: 22rem; height: 74vh; min-height: 34rem; padding: 0.9rem; background: var(--card); border: 1px solid var(--line); border-radius: 0.5rem; overflow-x: hidden; overflow-y: auto; }
.trace-graph-detail .req-detail,
.trace-graph-detail .chain-item { min-width: 0; max-width: 100%; }
.trace-source-code { max-width: 100%; overflow: hidden; margin-top: 0.35rem; border-radius: 0.4rem; background: #1e1e1e; }
.trace-source-code pre.shiki { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0 !important; padding: 0.65rem 0.7rem; overflow-x: auto; white-space: pre; font-size: 0.69rem; line-height: 1.5; tab-size: 2; }
.trace-source-fallback { box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 0.65rem 0.7rem; overflow-x: auto; white-space: pre; color: #d4d4d4; background: #1e1e1e; font: 0.69rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
/* The panel always holds at least a placeholder now (see
   clearTraceGraphDetail in app.js) so it stays visible — including in
   fullscreen — instead of collapsing to nothing between selections. */
.trace-detail-placeholder { color: var(--muted); font-size: 0.85rem; padding-top: 0.4rem; }
@media (max-width: 1100px) {
  .trace-graph-toolbar { align-items: stretch; flex-direction: column; }
  .trace-graph-help { flex: 0 0 auto; max-width: none; }
  .trace-graph-controls { justify-content: flex-start; flex-wrap: wrap; }
  .trace-graph-body { flex-direction: column; }
  .trace-graph-detail { flex: 0 0 auto; max-width: none; height: auto; max-height: 26rem; }
  .trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-shell { flex: 1; }
  .trace-graph-view:is(:fullscreen, .is-expanded) .trace-graph-detail { height: 30%; max-height: 30%; }
}
@media (max-width: 800px) {
  .trace-graph-view { padding: 0 0.6rem; }
  .trace-graph-shell { height: 60vh; min-height: 24rem; }
  .trace-graph-status { top: 0.55rem; right: 0.55rem; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .trace-node-circle { transition: none; }
  .trace-expansion-ripple { animation-duration: 1ms; }
}
.iter-chip { font-size: 0.68rem; padding: 0.12rem 0.5rem; border-radius: 1rem; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.iter-chip:hover { border-color: var(--brand); color: var(--ink); }
.iter-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.agent-log-content {
  background: #12212f; color: #d6e2ef; padding: 0.6rem 0.7rem; border-radius: 0.4rem;
  font-size: 0.75rem; overflow-y: auto; max-height: 26rem; margin: 0.3rem 0 0;
}
.agent-log-content .log-entry { padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.agent-log-content .log-entry:last-child { border-bottom: none; }
.agent-log-content .log-kind { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.4rem; padding: 0.05rem 0.35rem; border-radius: 0.25rem; }
.agent-log-content .log-kind.text { background: rgba(99,179,237,0.18); color: #93c5fd; }
.agent-log-content .log-kind.thinking { background: rgba(167,139,250,0.18); color: #c4b5fd; }
.agent-log-content .log-kind.tool-use { background: rgba(251,191,36,0.18); color: #fcd34d; }
.agent-log-content .log-kind.tool-result { background: rgba(74,222,128,0.15); color: #86efac; }
.agent-log-content .log-kind.result { background: rgba(248,113,113,0.15); color: #fca5a5; }
.agent-log-content .log-kind.system { background: rgba(148,163,184,0.15); color: #94a3b8; }
.agent-log-content .log-body { white-space: pre-wrap; word-break: break-word; margin-top: 0.2rem; font-family: ui-monospace, monospace; font-size: 0.72rem; }
.agent-log-content .log-body.thinking-body { color: #a78bfa; font-style: italic; }
.agent-log-content .log-raw { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: 0.72rem; color: #94a3b8; }
.framework-log-content { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace; font-size: 0.72rem; max-height: 16rem; }

/* ---- decision audit log ----
   Same dark panel family as the agent log, but records are structured rather
   than a text dump: claim, the rule applied, the measurements it was applied
   to. The rule line is deliberately the loudest secondary element — it is the
   part a reviewer checks the claim against. */
/* ---- shared explainer for the post-check views ---- */
.check-explainer { margin: 0.3rem 0 0.7rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--brand);
  background: #f5f6ff; border-radius: 0 0.3rem 0.3rem 0; }
.check-explainer p { margin: 0 0 0.4rem; color: var(--ink); font-size: 0.82rem; line-height: 1.6; }
.check-explainer p:last-child { margin-bottom: 0; }
.check-explainer p.muted { color: var(--muted); font-size: 0.76rem; }
.parity-headline { font-size: 0.85rem; color: var(--ink); margin-bottom: 0.4rem; }
.parity-section-heading { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin: 1rem 0 0.5rem; }
.parity-section-heading h3 { margin: 0; font-size: 0.92rem; }
.parity-section-heading .muted { font-size: 0.76rem; }

/* ---- channel parity ---- */
.parity-spread { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.parity-chip { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line);
  border-radius: 1rem; font-size: 0.74rem; color: var(--muted); }
.parity-chip strong { color: var(--ink); font-size: 0.82rem; }
.parity-table { width: 100%; font-size: 0.76rem; }
.parity-input { max-width: 30rem; }
.parity-field { display: inline-flex; gap: 0.25rem; margin: 0 0.45rem 0.15rem 0; font-family: ui-monospace, monospace; font-size: 0.7rem; }
.parity-field b { color: var(--muted); font-weight: 500; }
.parity-code { margin-left: 0.35rem; padding: 0.05rem 0.35rem; border-radius: 0.25rem; background: #f1f5f9;
  font-family: ui-monospace, monospace; font-size: 0.68rem; color: var(--muted); }
.parity-agree { color: var(--good); }
.parity-disagree { color: var(--bad); font-weight: 600; }
.parity-row-disagree { background: #fff5f5; }

/* ---- blind-spot self-critique ---- */
.blind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.7rem; margin: 0.6rem 0; }
.blind-stat { padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 0.4rem; border-left-width: 3px; }
.blind-stat strong { display: block; font-size: 1.15rem; color: var(--ink); }
.blind-stat span { display: block; margin-top: 0.1rem; font-size: 0.8rem; color: var(--ink); }
.blind-stat small { display: block; margin-top: 0.35rem; font-size: 0.74rem; color: var(--muted); line-height: 1.5; }
.blind-good { border-left-color: var(--good); }
.blind-warn { border-left-color: var(--warn); }
.blind-bad { border-left-color: var(--bad); }
.blind-sowhat { margin: 0.2rem 0 0; padding: 0.6rem 0.8rem; background: #f8fafc; border-radius: 0.3rem;
  font-size: 0.82rem; line-height: 1.6; color: var(--ink); }
.blind-table { width: 100%; font-size: 0.78rem; }
.blind-hypothesis { max-width: 34rem; line-height: 1.5; }
.blind-hit { color: var(--warn); }

/* ---- coverage source ---- */
.coverage-hint { font-size: 0.76rem; margin: 0.4rem 0 0; }
button.cov-row { width: 100%; text-align: left; background: none; color: var(--ink); border: 1px solid transparent; cursor: pointer; font: inherit; border-radius: 0.3rem; }
button.cov-row:hover { border-color: var(--line); background: #f8fafc; }
button.cov-row.active { border-color: var(--brand); background: #eef2ff; }
.coverage-source-panel { margin-top: 0.8rem; }
.coverage-decisions { padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 0.4rem; background: #fffdf7; }
.coverage-decisions h4 { margin: 0 0 0.2rem; font-size: 0.86rem; }
.coverage-decisions .muted { font-size: 0.76rem; margin: 0 0 0.5rem; }
.coverage-decision-list { margin: 0; padding: 0; list-style: none; }
.coverage-decision-list li { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.28rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.coverage-decision-list li:first-child { border-top: none; }
.coverage-decision-list code { font-size: 0.72rem; color: var(--ink); overflow-wrap: anywhere; }
.coverage-jump { flex: 0 0 auto; padding: 0.05rem 0.45rem; border: 1px solid var(--line); border-radius: 0.25rem;
  background: #fff; color: var(--brand); font-family: ui-monospace, monospace; font-size: 0.7rem; cursor: pointer; }
.coverage-jump:hover { border-color: var(--brand); }
.coverage-decision-path { flex: 0 0 auto; font-size: 0.7rem; color: var(--warn); text-transform: uppercase; letter-spacing: 0.04em; }
.coverage-seeded { margin: 0.55rem 0 0; font-size: 0.74rem; }
.coverage-source { margin-top: 0.7rem; max-height: 34rem; overflow: auto; border: 1px solid var(--line); border-radius: 0.4rem; background: #fbfcfe; }
.cov-line { display: grid; grid-template-columns: 3.4rem 3.4rem 1fr; align-items: baseline; gap: 0.5rem;
  padding: 0 0.5rem; font-family: ui-monospace, monospace; font-size: 0.72rem; line-height: 1.65; }
.cov-line code { white-space: pre; overflow-wrap: normal; }
.cov-num { color: #94a3b8; text-align: right; }
.cov-hits { color: #94a3b8; text-align: right; font-size: 0.66rem; }
.cov-hit { background: rgba(15,157,103,0.07); }
.cov-hit .cov-hits { color: var(--good); }
.cov-miss { background: rgba(209,55,63,0.11); box-shadow: inset 3px 0 0 var(--bad); }
.cov-miss .cov-hits { color: var(--bad); }
.cov-blank { color: #b6c2cf; }
.cov-flash { animation: cov-flash 1.4s ease-out; }
@keyframes cov-flash { from { background: rgba(67,56,202,0.28); } }

.mutation-demo-note { margin: 0.7rem 0 0.2rem; padding: 0.7rem 0.85rem; border-left: 3px solid var(--brand);
  background: #f5f6ff; border-radius: 0 0.3rem 0.3rem 0; color: var(--ink); font-size: 0.8rem; line-height: 1.55; }
.mutation-demo-note strong { display: block; margin-bottom: 0.15rem; }
.mutation-filter-bar { display: flex; align-items: center; gap: 0.7rem; margin: 0.5rem 0 0.6rem; flex-wrap: wrap; }
.mutation-filter-bar input { flex: 1 1 22rem; min-width: 14rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line);
  border-radius: 0.3rem; font: inherit; font-size: 0.8rem; }
.mutation-filter-bar input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mutation-filter-bar .muted { font-size: 0.75rem; }
.mutation-stat-triaged { border-color: #a78bfa; background: rgba(167,139,250,0.08); }
.mutation-stat-triaged strong { color: #7c3aed; }
.audit-header-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.audit-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.6rem; }
.audit-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.2rem 0.55rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--muted); font-size: 0.7rem; }
.audit-stat b { color: var(--ink); font-size: 0.82rem; }
.audit-stat.warn { border-color: #f0c36d; background: #fffaf0; }
.audit-stat.warn b { color: var(--warn); }
.audit-filters { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.audit-filter-set, #audit-log-view-toggle { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.audit-filter-set button, #audit-log-view-toggle button { font-size: 0.7rem; padding: 0.18rem 0.6rem; border-radius: 1rem; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.audit-filter-set button:hover, #audit-log-view-toggle button:hover { border-color: var(--brand); color: var(--ink); }
.audit-filter-set button.active, #audit-log-view-toggle button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.audit-log-content { background: #12212f; color: #d6e2ef; padding: 0.5rem 0.6rem; border-radius: 0.4rem; max-height: 28rem; overflow-y: auto; }
.audit-empty { padding: 0.6rem; color: #94a3b8; }
.audit-record { padding: 0.55rem 0.65rem; margin-bottom: 0.4rem; border-radius: 0.35rem; border-left: 3px solid #33465a; background: rgba(255,255,255,0.03); }
.audit-record:last-child { margin-bottom: 0; }
.audit-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.68rem; }
.audit-seq, .audit-time { font-family: ui-monospace, monospace; color: #7f93a8; }
.audit-outcome { text-transform: uppercase; letter-spacing: 0.05em; padding: 0.05rem 0.4rem; border-radius: 0.25rem; background: rgba(148,163,184,0.18); color: #cbd5e1; }
.audit-where { color: #e2e8f0; font-weight: 600; }
.audit-actor { margin-left: auto; color: #6b8299; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; }
.audit-claim { margin: 0.3rem 0 0; font-size: 0.8rem; line-height: 1.45; color: #f1f6fb; }
.audit-rule { display: flex; gap: 0.45rem; margin: 0.35rem 0 0; padding: 0.3rem 0.45rem; border-radius: 0.25rem;
  background: rgba(99,179,237,0.1); color: #b9d4ee; font-size: 0.71rem; line-height: 1.45; }
.audit-rule span { flex: 0 0 auto; color: #63b3ed; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; padding-top: 0.12rem; }
.audit-because { margin: 0.35rem 0 0; padding-left: 1rem; color: #a9bccd; font-size: 0.72rem; line-height: 1.5; }
.audit-because li { margin-bottom: 0.15rem; }
.audit-evidence { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.audit-chip { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.1rem 0.45rem; border-radius: 0.25rem;
  background: rgba(255,255,255,0.06); font-family: ui-monospace, monospace; font-size: 0.68rem; color: #dbe7f2; }
.audit-chip b { color: #7f93a8; font-weight: 500; }
.audit-chip i { font-style: normal; }
.audit-chip i.down { color: #86efac; }
.audit-chip i.up { color: #fca5a5; }
.audit-caused-by { margin-top: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 0.25rem; border: 1px solid rgba(255,255,255,0.14);
  background: none; color: #8ba7ff; font-family: ui-monospace, monospace; font-size: 0.66rem; cursor: pointer; }
.audit-caused-by:hover { border-color: #8ba7ff; background: rgba(139,167,255,0.12); }
.audit-keep { border-left-color: var(--good); }
.audit-keep .audit-outcome { background: rgba(74,222,128,0.16); color: #86efac; }
.audit-discard { border-left-color: #7a8896; }
.audit-void { border-left-color: var(--bad); }
.audit-void .audit-outcome { background: rgba(248,113,113,0.18); color: #fca5a5; }
.audit-converged { border-left-color: #63b3ed; }
.audit-converged .audit-outcome { background: rgba(99,179,237,0.18); color: #93c5fd; }
.audit-raise, .audit-apply { border-left-color: var(--warn); }
.audit-raise .audit-outcome, .audit-apply .audit-outcome { background: rgba(251,191,36,0.18); color: #fcd34d; }
.audit-measure { border-left-color: #a78bfa; }
.audit-measure .audit-outcome { background: rgba(167,139,250,0.18); color: #c4b5fd; }
.audit-fail .audit-outcome { background: rgba(248,113,113,0.2); color: #fca5a5; }
.audit-sev-critical { background: rgba(248,113,113,0.07); }
.audit-sev-warning { background: rgba(251,191,36,0.06); }
.audit-flash { animation: audit-flash 1.4s ease-out; }
@keyframes audit-flash { from { background: rgba(139,167,255,0.35); } to { background: rgba(255,255,255,0.03); } }
.execution-live-state { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.execution-running { color: var(--warn); animation: execution-pulse 1.2s ease-in-out infinite; }
.execution-finished { color: var(--good); }
.execution-stopped { color: var(--muted); }
.execution-live-progress { height: 0.45rem; margin: 0.7rem 0 0.5rem; background: #e9eef3; border-radius: 0.3rem; overflow: hidden; }
.execution-live-progress span { display: block; height: 100%; width: 0; background: var(--good); transition: width 0.25s ease; }
.execution-live-progress.active span { background: var(--brand); }
.execution-live-current { min-height: 1.7rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 0.35rem; background: #f8fafc; font-size: 0.8rem; }
.execution-current-header { display: flex; align-items: center; gap: 0.4rem; }
.execution-spinner { display: inline-block; width: 0.8rem; height: 0.8rem; border: 2px solid rgba(37, 99, 235, 0.2); border-top-color: var(--brand); border-radius: 50%; animation: execution-spin 0.8s linear infinite; flex: 0 0 auto; }
.execution-steps { display: flex; flex-direction: column; gap: 0.1rem; max-height: 10rem; overflow-y: auto; }
.execution-step { display: grid; grid-template-columns: 1.1rem minmax(9rem, 1.3fr) minmax(7rem, 1fr) 3.4rem; gap: 0.4rem; align-items: center; font-size: 0.71rem; padding: 0.08rem 0.25rem; border-radius: 0.2rem; }
.execution-step-icon { text-align: center; font-weight: 700; }
.execution-step-title { font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.execution-step-duration { color: var(--muted); text-align: right; font-size: 0.66rem; }
.execution-step-diff { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; }
.execution-step-diff code { background: rgba(148, 163, 184, 0.18); padding: 0 0.2rem; border-radius: 0.15rem; }
.execution-step-expect.execution-step-passed { color: var(--good); }
.execution-step-expect.execution-step-failed, .execution-step-other.execution-step-failed { color: var(--bad); background: rgba(220, 38, 38, 0.07); }
.execution-step-expect.execution-step-failed .execution-step-diff, .execution-step-other.execution-step-failed .execution-step-diff { color: var(--bad); }
.execution-step-action, .execution-step-step, .execution-step-hook { color: var(--muted); }
.execution-step-action .execution-step-title, .execution-step-step .execution-step-title { color: var(--ink); }
.execution-live-tests { max-height: 18rem; overflow-y: auto; margin-top: 0.5rem; }
.execution-test-row { display: grid; grid-template-columns: 1.2rem minmax(12rem, 1.5fr) minmax(8rem, 1fr) 5rem; gap: 0.45rem; align-items: center; padding: 0.32rem 0.45rem; border-bottom: 1px solid rgba(148, 163, 184, 0.18); font-size: 0.74rem; cursor: pointer; }
.execution-test-row:hover { background: rgba(148, 163, 184, 0.12); }
.execution-test-row[aria-expanded="true"] { background: rgba(148, 163, 184, 0.12); border-bottom-color: transparent; }
.execution-test-detail { padding: 0.5rem 0.6rem 0.7rem; border-bottom: 1px solid rgba(148, 163, 184, 0.18); background: rgba(148, 163, 184, 0.06); }
.execution-test-detail .title { display: none; }
.execution-test-icon { font-weight: 700; text-align: center; }
.execution-test-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.execution-test-file { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; font-size: 0.68rem; }
.execution-test-status { color: var(--muted); text-align: right; font-size: 0.68rem; text-transform: uppercase; }
.execution-test-passed .execution-test-icon, .execution-test-passed .execution-test-status { color: var(--good); }
.execution-test-failed .execution-test-icon, .execution-test-failed .execution-test-status, .execution-test-timedOut .execution-test-status, .execution-test-interrupted .execution-test-status { color: var(--bad); }
.execution-test-running .execution-test-icon, .execution-test-running .execution-test-status { color: var(--warn); }
@keyframes execution-spin { to { transform: rotate(360deg); } }
@keyframes execution-pulse { 50% { opacity: 0.55; } }
@media (max-width: 760px) {
  .execution-test-row { grid-template-columns: 1.2rem minmax(12rem, 1fr) 4.5rem; }
  .execution-test-file { display: none; }
}
.activity-starting {
  display: flex; align-items: flex-start; gap: 0.65rem; min-height: 2.4rem;
  color: #dce7f2; font-family: ui-sans-serif, system-ui, sans-serif; white-space: normal;
}
.activity-starting strong { display: block; color: #fff; font-size: 0.78rem; }
.activity-starting small { display: block; margin-top: 0.18rem; color: #9eb0c2; font-size: 0.7rem; }
.activity-spinner {
  flex: 0 0 auto; width: 0.9rem; height: 0.9rem; margin-top: 0.08rem;
  border: 2px solid rgba(255,255,255,0.25); border-top-color: #f2c46d;
  border-radius: 50%; animation: activity-spin 0.8s linear infinite;
}
.activity-failed .activity-spinner { border-top-color: var(--bad); animation: none; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }
.trace-detail-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }

/* --- AI assurance evidence pack (index.html #assurance-section) ------------ */
.assurance-intro { margin: 0 0 0.75rem; font-size: 0.82rem; }
.pill-gate-proceed { background: #dff6e8; color: #087348; }
.pill-gate-conditions { background: #fff2cc; color: #6b4e00; }
.pill-gate-withhold { background: #fbd9d9; color: #8a1c1c; }
.assurance-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 0.9rem; }
.assurance-rule { font-size: 0.78rem; color: var(--muted); margin: 0 0 0.5rem; }
.assurance-reasons { margin: 0 0 0.9rem; padding-left: 1.2rem; font-size: 0.82rem; }
.assurance-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 0.4rem 0 1rem; }
.assurance-table th, .assurance-table td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.assurance-table th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
.assurance-table .controls { color: var(--muted); font-size: 0.74rem; }
.assurance-table .controls b { color: var(--ink); font-weight: 500; }
.assurance-result-met { color: var(--good); font-weight: 600; }
.assurance-result-reproduced { color: var(--bad); font-weight: 600; }
.assurance-result-accepted { color: var(--warn); font-weight: 600; }
.assurance-result-not-exercised, .assurance-result-trail { color: var(--muted); }
.assurance-h3 { margin: 0.9rem 0 0.35rem; font-size: 0.9rem; }
.assurance-section details { margin: 0.4rem 0; font-size: 0.82rem; }
.assurance-section summary { cursor: pointer; color: var(--brand); }
.assurance-provider-note { font-size: 0.78rem; color: var(--warn); }

/* Human review queue */
.review-intro { margin: 0 0 0.6rem; }
.review-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.review-chip { border: 1px solid var(--line, #ddd); background: transparent; color: var(--ink); border-radius: 12px; padding: 0.15rem 0.6rem; font-size: 0.8rem; cursor: pointer; }
.review-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.review-table { width: 100%; border-collapse: collapse; }
.review-table th, .review-table td { text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--line, #ddd); vertical-align: top; }
.review-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.review-stage { display: inline-block; font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--line, #ddd); }
.review-detail { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; opacity: 0.85; margin-top: 0.2rem; white-space: pre-wrap; }
.review-why { color: var(--muted); font-size: 0.85rem; }
.review-p { font-variant-numeric: tabular-nums; color: #b8860b; font-weight: 600; }
.review-actions { white-space: nowrap; }
.review-btn { border: 1px solid var(--line, #ddd); background: transparent; color: var(--ink); padding: 0.2rem 0.6rem; border-radius: 5px; cursor: pointer; font-size: 0.8rem; }
.review-btn.accept { border-color: #2e7d4f; color: #2e7d4f; }
.review-btn.reject { border-color: #b3402e; color: #b3402e; }
.review-btn.accept.on { background: #2e7d4f; color: #fff; }
.review-btn.reject.on { background: #b3402e; color: #fff; }
.review-table tr.decided td { opacity: 0.55; }
.review-who { font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-left: 0.6rem; }
.review-who input { font-size: 0.8rem; padding: 0.1rem 0.4rem; border: 1px solid var(--line, #ddd); border-radius: 4px; background: transparent; color: var(--ink); width: 9rem; }

/* ---- Brownfield: the launcher's sources and the discovery page ---------- */
.control-field.mode-field select { width: 8.2rem; }
.brownfield-sources {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1.2rem;
  padding: 0.6rem 1rem; background: #1b2a3a; color: #cbd5e1; font-size: 0.75rem;
  border-bottom: 1px solid #2a3949;
}
.brownfield-sources[hidden] { display: none; }
.bf-heading { flex: 1 1 100%; display: flex; gap: 0.6rem; align-items: baseline; }
.bf-heading strong { color: #fff; font-size: 0.8rem; white-space: nowrap; }
.bf-heading span { color: #9fb0c2; }
.bf-field, .bf-source { display: flex; align-items: center; gap: 0.4rem; }
.bf-field input, .bf-source input[type="text"] {
  height: 1.8rem; border-radius: 0.35rem; border: 1px solid #55606b;
  background: #0f1a25; color: #fff; padding: 0 0.45rem; font: inherit;
}
.bf-codebase { flex: 1 1 22rem; }
.bf-codebase input { flex: 1; min-width: 12rem; }
.bf-docs { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; border: 1px solid #2f4052; border-radius: 0.4rem; padding: 0.3rem 0.6rem 0.45rem; margin: 0; }
.bf-docs legend { padding: 0 0.3rem; color: #9fb0c2; }
.bf-source span { white-space: nowrap; }
.bf-source small { color: #9fb0c2; font-size: 0.65rem; margin-left: 0.15rem; }
.bf-source input[type="text"] { width: 14rem; }
.bf-source input[type="text"]:disabled { opacity: 0.45; }

.discovery-content h3 { font-size: 0.9rem; margin: 1.1rem 0 0.45rem; }
.discovery-content code { font-size: 0.8rem; }
.bf-read { margin: 0; }
.bf-flag { background: #fdf3e1; color: var(--warn); border-radius: 0.3rem; padding: 0.05rem 0.35rem; font-size: 0.72rem; }
.bf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; }
.bf-tiles > div { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.55rem 0.7rem; display: flex; flex-direction: column; }
.bf-tiles strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.bf-tiles span { color: var(--muted); font-size: 0.75rem; }
.bf-tiles .bf-attention { border-color: var(--warn); background: #fffaf0; }
.bf-source-docs summary, .bf-contract-doc summary { cursor: pointer; padding: 0.25rem 0; }
.bf-source-docs ul { margin: 0.2rem 0 0.4rem 1.2rem; padding: 0; font-size: 0.8rem; }
.bf-contract-doc pre { max-height: 28rem; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.7rem; font-size: 0.75rem; white-space: pre-wrap; }
.table-scroll { overflow-x: auto; }
.bf-discrepancies { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bf-discrepancies th, .bf-discrepancies td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); }
.bf-discrepancies th { color: var(--muted); font-weight: 600; }
.mode-stack .control-field.mode-field { grid-template-columns: 2.5rem auto; }
.mode-switches { display: flex; gap: 0.7rem; }
.mode-stack .mode-switches .control-field { display: flex; }

.chat-quota { margin: 0; padding: 0.35rem 0.75rem; font-size: 0.72rem; color: var(--muted); border-bottom: 1px solid var(--line); }