script-build-and-framework-tmp/visualization/frontend/app/globals.css

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --type-caption: .75rem;
  --type-label: .8125rem;
  --type-ui: .875rem;
  --type-body: 1rem;
  --type-title: 1.125rem;
  --type-heading: 1.25rem;
  --inspector-title-size: var(--type-heading);
  --inspector-section-title-size: var(--type-title);
  --inspector-field-label-size: var(--type-label);
  --inspector-copy-size: var(--type-body);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --bg: #101114;
  --canvas: #15171b;
  --surface: #202228;
  --surface-raised: #25282f;
  --surface-control: #2b2e36;
  --surface-subtle: #1b1d22;
  --text-primary: #f5f5f6;
  --text-secondary: #d7d9df;
  --text-muted: #aeb2bb;
  --text-subtle: #9298a3;
  --border-subtle: #30343d;
  --border: #3c414c;
  --border-strong: #5b6270;
  --accent: #ff6d5a;
  --accent-hover: #ff806e;
  --accent-soft: rgba(255, 109, 90, .12);
  --success: #63c883;
  --warning: #f4c152;
  --danger: #ff806e;
  --info: #7bb8ff;
  --evaluator: #b7a0eb;
  --retrieval: #e6a86f;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --shadow-sm: 0 5px 14px rgba(0, 0, 0, .22);
  --shadow-md: 0 16px 38px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .24);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-sticky: 20;
  --z-popover: 30;
  --z-drawer: 40;
  --z-toast: 50;
  --z-modal: 60;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 100%;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: .008em;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

button,
input,
select { font: inherit; }

button,
select { cursor: pointer; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.srOnly {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* App shell and floating run controls */

.appFrame {
  position: relative;
  height: 100vh;
  background: var(--bg);
}

.runHeader {
  position: absolute;
  z-index: var(--z-sticky);
  top: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  pointer-events: none;
}

.withInspector .runHeader { right: 29.75rem; }

.topBar {
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.productMark {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3) 0 var(--space-1);
}

.productIcon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent);
  border: 1px solid rgba(255, 109, 90, .42);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.productMark h1 {
  margin: 0;
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}

.buildPicker {
  min-width: 19.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.buildPicker select,
.buildPicker input {
  height: 2.75rem;
  min-width: 0;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text-primary);
  font-size: var(--type-ui);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}

.buildPicker select:hover,
.buildPicker input:hover { border-color: var(--border-strong); }
.buildPicker select { width: 12rem; }
.buildPicker input { width: 7rem; }
.buildPicker input::placeholder { color: var(--text-muted); opacity: 1; }

.quietButton,
.iconButton {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}

.quietButton:active,
.iconButton:active { transform: translateY(1px); }

.quietButton,
.iconButton {
  border: 1px solid var(--border);
  background: var(--surface-control);
  color: var(--text-secondary);
}

.quietButton { padding: 0 var(--space-3); }
.quietButton:hover,
.iconButton:hover { border-color: var(--border-strong); color: var(--text-primary); background: #31353e; }
.iconButton { width: 2.75rem; padding: 0; }

.roundNav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.roundNav::-webkit-scrollbar { display: none; }
.roundNav button {
  min-width: max-content;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text-secondary);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
}
.roundNav button:hover { border-color: var(--border-strong); }
.roundNav button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-primary);
}

.runMeta {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-left: auto;
}

.refreshing { width: 1.75rem; display: grid; place-items: center; color: var(--text-muted); }
.refreshing svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.dataNotes { position: relative; }
.dataNotes summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--warning);
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.dataNotes summary::-webkit-details-marker { display: none; }
.dataNotes summary:hover { background: var(--surface-control); }
.dataNotes summary b {
  min-width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(244, 193, 82, .13);
  font-size: var(--type-caption);
}
.dataNotes > div {
  position: absolute;
  top: 3.25rem;
  right: 0;
  width: min(28rem, 80vw);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}
.dataNotes ul {
  margin: 0 0 var(--space-3);
  padding-left: 1.25rem;
  color: var(--text-secondary);
  font-size: var(--type-ui);
  line-height: 1.6;
}
.dataNotes li + li { margin-top: var(--space-2); }
.dataNotes p,
.dataNotes small { color: var(--text-muted); font-size: var(--type-label); }

/* Canvas and React Flow */

.workspace {
  position: relative;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
.withInspector .workspace { grid-template-columns: minmax(0, 1fr) 28.75rem; }

.flowShell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--canvas);
}
.react-flow { background: var(--canvas); }
.react-flow__edge-path { stroke: #858b95; stroke-width: 1.5; }

.react-flow__controls {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.react-flow__controls-button {
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-bottom-color: var(--border) !important;
  background: var(--surface) !important;
  fill: var(--text-secondary) !important;
}
.react-flow__controls-button:hover { background: var(--surface-control) !important; }
.react-flow__node.selected .flowCard {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft), var(--shadow-md);
}

/* Business cards */

.flowCard {
  width: 20rem;
  min-height: 12.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  user-select: none;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out);
}
.flowCard:hover { border-color: var(--border-strong); background: #22252b; }
.flowHandle {
  width: .625rem !important;
  height: .625rem !important;
  border: 2px solid var(--canvas) !important;
  background: #858b95 !important;
}
.cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.cardIdentity { min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.actorBadge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: .125rem .5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}
.actor-main { color: var(--accent); background: rgba(255, 109, 90, .06); }
.actor-implementer { color: var(--info); background: rgba(123, 184, 255, .06); }
.actor-retrieval { color: var(--retrieval); background: rgba(230, 168, 111, .065); }
.actor-evaluator { color: var(--evaluator); background: rgba(183, 160, 235, .065); }
.flowCard h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.storyRole,
.roundNumber,
.candidateLabel,
.finalLabel {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
}
.role-objective,
.story-decision { border-color: rgba(255, 109, 90, .5); }
.role-branch-task,
.role-candidate-output { border-color: rgba(123, 184, 255, .42); }
.role-data-decision { border-color: rgba(230, 168, 111, .42); }
.role-multipath-decision { border-color: rgba(255, 109, 90, .52); }
.role-domain-output { border-color: rgba(99, 200, 131, .44); }
.role-multipath-review,
.role-round-evaluation { border-color: rgba(183, 160, 235, .48); }

.story-result,
.runResultCard { border-color: rgba(99, 200, 131, .48); }
.story-missing { border-color: rgba(244, 193, 82, .5); border-style: dashed; }

.agentDecisionCard { min-height: 18.5rem; }
.agentDecisionCard.decision-direction { border-color: rgba(255, 109, 90, .55); }
.agentDecisionCard.decision-tradeoff { border-color: rgba(230, 168, 111, .52); }
.agentDecisionCard.decision-evaluation { border-color: rgba(183, 160, 235, .54); }
.agentDecisionCard.decision-creative { border-color: rgba(123, 184, 255, .5); }
.authorityBadge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: .125rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .025);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.authority-final { color: var(--accent-hover); border-color: rgba(255, 109, 90, .42); }
.authority-recommendation { color: var(--evaluator); border-color: rgba(183, 160, 235, .42); }
.authority-implementation-scope { color: var(--info); border-color: rgba(123, 184, 255, .38); }
.promptAction { color: var(--text-muted); }
.inspectorDecisionActions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.cardFields,
.candidateSummary { display: grid; gap: var(--space-3); }
.cardFields > div,
.candidateSummary > div {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}
.cardFields > div,
.candidateSummary > div { grid-template-columns: 4.5rem minmax(0, 1fr); }
.cardFields b,
.candidateSummary b {
  padding-top: .125rem;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.cardFields p,
.candidateSummary p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-ui);
  font-weight: var(--weight-regular);
  line-height: 1.58;
  letter-spacing: .012em;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-wrap: pretty;
}
.cardFields .cardFieldPrimary p {
  color: var(--text-primary);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: 1.58;
}

.cardFooter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  flex-wrap: wrap;
}
.nodeAction {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text-secondary);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nodeAction:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); }
.nodeAction.artifactAction {
  border-color: rgba(255, 109, 90, .42);
  color: var(--accent-hover);
}
.nodeAction.lineageAction,
.frameDetail.lineageAction {
  border-color: rgba(123, 184, 255, .34);
  color: #a9cfff;
  background: rgba(123, 184, 255, .045);
}
.nodeAction.lineageAction:hover,
.frameDetail.lineageAction:hover { border-color: var(--info); background: rgba(123, 184, 255, .11); color: #d6e9ff; }

.roundSummaryCard { width: 22.5rem; min-height: 25rem; }
.roundSummaryContent { display: grid; gap: 1.125rem; }
.roundGoalSummary {
  display: grid;
  gap: .5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}
.roundGoalSummary > b,
.roundSummaryBlock > b {
  color: var(--text-muted);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.roundGoalSummary > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.roundGoalSummary > small {
  color: var(--text-subtle);
  font-size: var(--type-caption);
  line-height: 1.45;
}
.roundSummaryFacts { display: grid; gap: .9375rem; }
.roundSummaryBlock {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.roundSummaryBlock > div { min-width: 0; display: grid; gap: .25rem; }
.roundSummaryBlock p,
.roundSummaryBlock small {
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.roundSummaryBlock p {
  color: var(--text-secondary);
  font-size: var(--type-ui);
  font-weight: var(--weight-medium);
  line-height: 1.55;
}
.roundSummaryBlock small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-subtle);
  font-size: var(--type-caption);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.summaryTone-decision p:first-child { color: var(--accent-hover); }
.summaryTone-success p { color: var(--success); }
.summaryTone-warning p { color: var(--warning); }
.candidateCard { width: 22.5rem; min-height: 13rem; border-color: rgba(123, 184, 255, .38); }
.runResultCard {
  width: 22.5rem;
  min-height: 23rem;
  border-color: rgba(99, 200, 131, .52);
  background: #1d2422;
}
.runResultCard:hover { border-color: rgba(99, 200, 131, .72); background: #202824; }
.runResultCard .finalLabel { color: var(--success); }
.finalOutcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.finalOutcome > span {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(99, 200, 131, .12);
  color: var(--success);
}
.finalOutcome > div { min-width: 0; display: grid; gap: var(--space-1); }
.finalOutcome b { color: var(--text-primary); font-size: var(--type-body); font-weight: var(--weight-semibold); }
.finalOutcome p,
.finalSummaryPreview p { margin: 0; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.58; text-wrap: pretty; }
.finalOutcome p { color: #b8c4bf; font-size: var(--type-label); }
.finalSummaryPreview {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid rgba(99, 200, 131, .15);
  border-bottom: 1px solid rgba(99, 200, 131, .15);
}
.finalSummaryPreview > b { color: #a9d8b7; font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.finalSummaryPreview p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.finalRunFacts { display: flex; align-items: center; gap: var(--space-4); color: #aebbb6; font-size: var(--type-caption); }
.finalRunFacts b { color: var(--text-primary); font-weight: var(--weight-semibold); }

.artifactStats,
.metricGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.artifactStats span,
.metricGrid span {
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--type-caption);
  text-align: center;
}
.runResultCard .artifactStats span {
  border-color: rgba(99, 200, 131, .18);
  background: rgba(99, 200, 131, .055);
  color: #aebbb6;
}
.runResultCard .artifactStats b { color: var(--success); }
.artifactStats b,
.metricGrid b {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
}

.sourceBadge,
.statusBadge {
  width: max-content;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: .125rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: var(--text-secondary);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  white-space: nowrap;
}
.source-runtime-associated,
.source-process-incomplete,
.source-record-missing,
.source-legacy-record { align-self: flex-start; color: var(--warning); }
.status-merged,
.status-success,
.status-completed,
.status-passed,
.status-done { color: var(--success); }
.status-parked,
.status-partial,
.status-partially-passed,
.status-open,
.status-not-evaluated,
.status-unknown { color: var(--warning); }
.status-discarded,
.status-failed,
.status-needs-retry,
.status-cancel,
.status-cancle,
.status-cancelled { color: var(--danger); }
.status-running { color: var(--accent); }
.status-interrupted { color: var(--warning); }
.status-legacy { color: var(--warning); border-color: rgba(244, 193, 82, .42); }

/* Round group */

.roundFrame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(25, 27, 32, .55);
}
.roundFrame > header {
  height: 5rem;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.roundFrame > header > div { min-width: 0; display: grid; gap: var(--space-1); }
.roundFrame > header strong { font-size: var(--type-body); font-weight: var(--weight-semibold); }
.roundFrame > header div span {
  max-width: 44rem;
  color: var(--text-muted);
  font-size: var(--type-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roundCollapse {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-control);
  color: var(--text-secondary);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
}
.roundCollapse:hover { border-color: var(--border-strong); color: var(--text-primary); }
.branchCount {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--type-label);
  white-space: nowrap;
}

/* Agent ownership and convergence regions */

.agentRegion {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(20, 22, 26, .34);
  pointer-events: none;
}
.agentRegion > header {
  min-height: 3.375rem;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid currentColor;
  color: var(--text-muted);
}
.agentRegion > header strong {
  color: currentColor;
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.agentRegion > header span {
  min-width: 0;
  color: var(--text-subtle);
  font-size: var(--type-caption);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.region-main { border-color: rgba(255, 109, 90, .22); background: rgba(255, 109, 90, .025); }
.region-main > header { color: #d9897e; border-bottom-color: rgba(255, 109, 90, .16); }
.region-implementer { border-color: rgba(123, 184, 255, .24); background: rgba(123, 184, 255, .025); }
.region-implementer > header { color: #82b5e9; border-bottom-color: rgba(123, 184, 255, .17); }
.region-evaluator { border-color: rgba(183, 160, 235, .24); background: rgba(183, 160, 235, .025); }
.region-evaluator > header { color: #ab99d5; border-bottom-color: rgba(183, 160, 235, .17); }
.region-outcome { border-color: rgba(99, 200, 131, .24); background: rgba(99, 200, 131, .025); }
.region-outcome > header { color: #71bc88; border-bottom-color: rgba(99, 200, 131, .17); }

.branchFrame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(123, 184, 255, .38);
  border-radius: var(--radius-md);
  background: rgba(29, 35, 43, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.branchFrame > header {
  min-height: 4.125rem;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px dashed rgba(123, 184, 255, .26);
  background: rgba(123, 184, 255, .035);
}
.branchFrameTitle { display: flex; align-items: center; gap: var(--space-3); }
.branchFrameTitle span {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--info);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.branchFrameTitle strong { font-size: var(--type-ui); font-weight: var(--weight-semibold); }
.branchFrameActions { display: flex; gap: var(--space-2); margin-left: auto; }
.branchFrame .nodeAction { min-height: 2.5rem; }

/* Retrieval is a real nested stage: direct tools and delegated agents share one level. */

.retrievalStageFrame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px dashed rgba(230, 168, 111, .45);
  border-radius: var(--radius-md);
  background: rgba(230, 168, 111, .035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
.retrievalStageFrame > header {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed rgba(230, 168, 111, .28);
  background: rgba(230, 168, 111, .035);
}
.retrievalStageFrame > header > div { display: flex; align-items: center; gap: var(--space-2); }
.retrievalStageFrame > header > .retrievalStageActions { flex: none; }
.retrievalStageIcon {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(230, 168, 111, .12);
  color: var(--retrieval);
}
.retrievalStageFrame > header strong { color: var(--retrieval); font-size: var(--type-ui); font-weight: var(--weight-semibold); }
.retrievalStageFrame > header em {
  padding: .125rem .5rem;
  border: 1px solid rgba(230, 168, 111, .28);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-style: normal;
  white-space: nowrap;
}
.frameDetail {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text-secondary);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.retrievalEmpty {
  height: calc(100% - 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--type-label);
}

.retrievalCard {
  width: 21.25rem;
  min-height: 14rem;
  border-color: rgba(230, 168, 111, .34);
  background: rgba(31, 30, 30, .97);
}
.retrievalCard > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.retrievalCard h3 { font-size: var(--type-body); }
.retrievalKind {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  color: var(--retrieval);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
}
.retrievalOwner,
.agentRunStatus { color: var(--text-subtle); font-size: var(--type-caption); white-space: nowrap; }
.run-completed { color: var(--success); }
.run-failed { color: var(--danger); }
.run-running { color: var(--accent); }
.retrievalStats { display: grid; gap: var(--space-2); margin: 0; }
.retrievalStats > div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-3); }
.retrievalStats dt,
.agentTask b,
.agentQuerySummary b,
.agentScreening b { color: var(--text-muted); font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.retrievalStats dd { margin: 0; color: var(--text-secondary); font-size: var(--type-ui); }
.retrievalAgentCard { min-height: 18.25rem; }
.agentTask,
.agentQuerySummary,
.agentScreening { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.agentTask p,
.agentQuerySummary p,
.agentScreening p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--type-label);
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.query-hit { color: var(--success); }
.query-empty { color: var(--text-muted); }
.query-failure { color: var(--danger); }
.query-unknown { color: var(--warning); }
.query-interrupted { color: var(--warning); }
.retrievalAgentCard > footer { display: flex; gap: var(--space-2); margin-top: auto; flex-wrap: wrap; }
.queryAttemptList { display: grid; gap: .25rem; margin: var(--space-1) 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--border-subtle); list-style: none; }
.queryAttemptList button {
  width: 100%;
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: .25rem .375rem;
  border: 0;
  border-radius: .375rem;
  background: transparent;
  text-align: left;
}
.queryAttemptList button:hover { background: rgba(255, 255, 255, .035); }
.queryIndex { color: var(--text-subtle); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.queryText { overflow: hidden; color: var(--text-secondary); font-size: var(--type-caption); text-overflow: ellipsis; white-space: nowrap; }
.queryStatus { font-size: var(--type-caption); font-weight: var(--weight-semibold); white-space: nowrap; }
.queryStatus.query-hit { color: var(--success); }
.queryStatus.query-empty,
.queryStatus.query-unknown { color: var(--text-muted); }
.queryStatus.query-failure { color: var(--danger); }
.queryStatus.query-running { color: var(--accent); }
.queryStatus.query-interrupted { color: var(--warning); }

.retrievalHoverPreview {
  position: fixed;
  z-index: var(--z-popover);
  width: min(23.75rem, calc(100vw - 1.5rem));
  max-height: min(31rem, calc(100vh - 1.5rem));
  overflow: auto;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: #202228;
  box-shadow: var(--shadow-md);
  color: var(--text-secondary);
  animation: retrievalPreviewIn 160ms var(--ease-out);
}
.retrievalPreviewHeader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.retrievalPreviewHeader > div { min-width: 0; }
.retrievalPreviewHeader small { display: block; color: var(--text-muted); font-size: var(--type-caption); }
.retrievalPreviewHeader h3 { margin: .1rem 0 0; color: var(--text-primary); font-size: var(--type-body); line-height: 1.4; text-wrap: balance; }
.retrievalPreviewHeader strong { align-self: start; padding: .2rem .5rem; border-radius: 999px; background: rgba(99, 200, 131, .1); color: #91dca8; font-size: var(--type-caption); white-space: nowrap; }
.retrievalPreviewIcon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .45rem; }
.retrievalPreviewIcon.is-agent { background: rgba(230, 168, 111, .12); color: var(--retrieval); }
.retrievalPreviewIcon.is-tool { background: rgba(123, 184, 255, .11); color: #afd2ff; }
.retrievalHoverPreview section { display: grid; gap: var(--space-2); }
.retrievalHoverPreview section + section { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.retrievalHoverPreview h4 { margin: 0; color: var(--text-primary); font-size: var(--type-label); font-weight: var(--weight-semibold); }
.retrievalPreviewSummary,
.retrievalPreviewText,
.retrievalPreviewError { margin: 0; font-size: var(--type-ui); line-height: 1.65; overflow-wrap: anywhere; text-wrap: pretty; }
.retrievalPreviewText { color: var(--text-secondary); }
.retrievalPreviewError { color: #ffb0a2; }
.retrievalHoverPreview ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.retrievalHoverPreview li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; padding: .45rem .55rem; border-radius: .4rem; background: rgba(255, 255, 255, .035); }
.retrievalHoverPreview li span { min-width: 0; color: var(--text-secondary); font-size: var(--type-label); line-height: 1.5; overflow-wrap: anywhere; }
.retrievalHoverPreview li em { color: var(--success); font-size: var(--type-caption); font-style: normal; white-space: nowrap; }
.retrievalHoverPreview li small { grid-column: 1 / -1; color: var(--text-muted); font-size: var(--type-caption); line-height: 1.55; }
.retrievalPreviewCalls { display: grid; gap: var(--space-3); }
.retrievalPreviewLoading { min-height: 5rem; display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--text-muted); font-size: var(--type-ui); }
.retrievalPreviewLoading svg { animation: retrievalPreviewSpin 900ms linear infinite; }
.retrievalPreviewMore { color: var(--text-muted); font-size: var(--type-caption); }
.retrievalPreviewAction { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-control); color: var(--text-primary); font-size: var(--type-label); font-weight: var(--weight-semibold); }
.retrievalPreviewAction:hover { border-color: var(--info); background: rgba(123, 184, 255, .1); }
.retrievalPreviewAction:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
@keyframes retrievalPreviewIn { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes retrievalPreviewSpin { to { transform: rotate(360deg); } }

/* Semantic zoom: reduce content density instead of shrinking unreadable prose. */

.detail-compact .flowCard {
  min-height: 8.75rem;
  gap: var(--space-2);
  padding: .875rem;
}
.detail-compact .flowCard h3 { font-size: var(--type-body); }
.detail-compact .cardFields > div:nth-child(n + 2),
.detail-compact .candidateSummary > div:nth-child(n + 2) { display: none; }
.detail-compact .cardFields > div,
.detail-compact .candidateSummary > div { grid-template-columns: 3.5rem minmax(0, 1fr); }
.detail-compact .cardFields .cardField:first-child p { -webkit-line-clamp: 2; }
.detail-compact .roundGoalSummary > small,
.detail-compact .roundSummaryBlock small { display: none; }
.detail-compact .finalSummaryPreview,
.detail-compact .sourceBadge,
.detail-compact .agentTask,
.detail-compact .agentScreening { display: none; }
.detail-compact .nodeAction {
  min-height: 2.25rem;
  padding-inline: .625rem;
}
.detail-compact .retrievalAgentCard { min-height: 13.75rem; }
.detail-compact .queryAttemptList button { min-height: 2.25rem; }

.detail-overview .cardFields,
.detail-overview .roundSummaryContent,
.detail-overview .candidateSummary,
.detail-overview .finalSummaryPreview,
.detail-overview .artifactStats,
.detail-overview .finalRunFacts,
.detail-overview .sourceBadge { display: none; }
.detail-overview .flowCard {
  min-height: 6.5rem;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
}
.detail-overview .roundSummaryCard,
.detail-overview .candidateCard,
.detail-overview .runResultCard { min-height: 8.5rem; }
.detail-overview .finalOutcome p { display: none; }
.detail-overview .finalOutcome > span { width: 1.75rem; height: 1.75rem; }
.detail-overview .retrievalCard { min-height: 7.5rem; }
.detail-overview .retrievalCard .agentTask,
.detail-overview .retrievalCard .agentQuerySummary,
.detail-overview .retrievalCard .agentScreening,
.detail-overview .retrievalCard .retrievalStats { display: none; }
.detail-overview .queryAttemptList,
.detail-overview .flowCard > footer,
.detail-overview .flowCard > .cardFooter { display: none; }
.detail-overview .roundFrame > header div span,
.detail-overview .branchCount { display: none; }
.detail-compact .agentRegion > header span,
.detail-overview .agentRegion > header span { display: none; }
.detail-overview .agentRegion > header { padding-inline: var(--space-3); }

.cardFields .cardField p,
.candidateSummary p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}
.cardFields .cardField:first-child p { -webkit-line-clamp: 4; }
.cardFields .tone-warning p { color: var(--warning); }
.cardFields .tone-success p { color: var(--success); }
.cardFields .tone-failure p { color: var(--danger); }

/* Inspector and long-form reading */

.inspector {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border-left: 1px solid var(--border);
  background: var(--surface-subtle);
  box-shadow: -14px 0 35px rgba(0, 0, 0, .22);
  z-index: var(--z-drawer);
}
.inspectorHeader {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.inspectorHeader > div { min-width: 0; flex: 1; }
.inspectorHeader > .inspectorHeaderActions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.inspectorHeader > .iconButton { flex: none; }
.inspectorBack { color: var(--text-secondary); }
.inspectorHeader span {
  color: var(--accent);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.inspectorHeader h2 {
  max-width: 22rem;
  margin: var(--space-1) 0 0;
  font-size: var(--inspector-title-size);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.inspectorTabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  border-bottom: 1px solid var(--border-subtle);
}
.changeExactness {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--type-caption);
  line-height: 1.55;
}
.inspectorTabs button {
  min-height: 3rem;
  padding: 0 var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--type-ui);
  font-weight: var(--weight-medium);
}
.inspectorTabs button:hover { color: var(--text-secondary); background: rgba(255, 255, 255, .025); }
.inspectorTabs button.active { border-bottom-color: var(--accent); color: var(--text-primary); font-weight: var(--weight-semibold); }

.inspectorBody {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}
.inspectorBadgeRow { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.decisionMetaRow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.decisionMetaRow span,
.decisionMetaRow strong {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding: .125rem .625rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.decisionMetaRow strong { color: var(--accent-hover); border-color: rgba(255, 109, 90, .38); }
.decisionDetailBlocks { display: grid; gap: var(--space-5); }
.decisionDetailBlocks .inspectorPanel { margin: 0; }
.decisionSummaryPanel[data-presentation="document"] {
  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
.decisionSummaryPanel[data-presentation="document"] > h3 {
  color: var(--accent-hover);
}
.decisionSummaryPanel[data-presentation="document"] > .richText {
  max-width: 72ch;
  color: var(--text-secondary);
  font-size: var(--inspector-copy-size);
  line-height: 1.75;
}
.decisionSummaryPanel[data-presentation="document"] .richText h2 {
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--inspector-section-title-size);
  line-height: 1.4;
}
.decisionSummaryPanel[data-presentation="document"] .richText h2:first-child { margin-top: 0; }
.decisionSummaryPanel[data-presentation="document"] .richText h3 {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--accent-hover);
  font-size: var(--type-body);
  line-height: 1.45;
}
.decisionSummaryPanel[data-presentation="document"] .richText > ul {
  margin: 0;
  padding-left: 1.25rem;
}
.decisionSummaryPanel[data-presentation="document"] .richText ul ul {
  margin-top: var(--space-2);
  padding-left: 1.1rem;
}
.decisionItemsPanel[data-presentation="labelled-list"] .inspectorDetailItem {
  grid-template-columns: minmax(5.75rem, 7rem) minmax(0, 1fr);
  gap: var(--space-4);
}
.decisionItemsPanel[data-presentation="labelled-list"] .inspectorDetailItem dt {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--accent-hover);
  font-size: var(--inspector-field-label-size);
  text-align: left;
}
.decisionItemsPanel[data-presentation="labelled-list"] .inspectorDetailItem .richText {
  color: var(--text-primary);
  line-height: 1.75;
}
.implementationPlanPanel {
  gap: var(--space-4);
  padding: 0 0 var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
.implementationPlanHeader,
.implementationRouteHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.implementationPlanHeader > div { min-width: 0; display: grid; gap: .25rem; }
.implementationPlanHeader h3 { color: var(--accent-hover); }
.implementationPlanHeader p { margin: 0; color: var(--text-muted); font-size: var(--type-caption); }
.implementationPlanHeader > span {
  flex: none;
  padding: .25rem .625rem;
  color: var(--accent-hover);
  border: 1px solid rgba(255, 109, 90, .38);
  border-radius: 999px;
  background: rgba(255, 109, 90, .08);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.implementationRoutes { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.implementationRoutes > li {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.implementationRouteHeader { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.implementationRouteHeader > strong { color: var(--text-primary); font-size: var(--type-body); }
.implementationRouteTags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.implementationRouteTags b {
  padding: .1875rem .5rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-control);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}
.implementationRouteBody {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-4);
}
.implementationPlanField { min-width: 0; display: grid; align-content: start; gap: var(--space-2); }
.implementationPlanField.is-wide { grid-column: 1 / -1; }
.implementationPlanField > small { color: var(--text-muted); font-size: var(--inspector-field-label-size); font-weight: var(--weight-semibold); }
.implementationPlanField .richText { color: var(--text-primary); font-size: var(--type-body); line-height: 1.7; overflow-wrap: break-word; word-break: normal; }
.implementationReasoning { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgba(255, 109, 90, .2); }
.implementationReasoning h4 { margin: 0; color: var(--text-muted); font-size: var(--inspector-field-label-size); }
.implementationReasoning .richText { color: var(--text-primary); line-height: 1.75; }
.creativeProcessPanel,
.evaluationBranchesPanel,
.evaluationMatrixPanel { gap: var(--space-4); }
.creativeProcessHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.creativeProcessHeader h3,
.evaluationBranchesPanel > h3,
.evaluationMatrixPanel > h3 { margin: 0; color: var(--info); font-size: var(--inspector-section-title-size); }
.creativeProcessHeader p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--type-caption); }
.creativeProcessSteps { margin: 0; padding: 0; list-style: none; }
.creativeProcessSteps > li { display: grid; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.creativeProcessSteps > li:first-child { padding-top: 0; border-top: 0; }
.creativeProcessSteps > li > header { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-3); }
.creativeProcessSteps > li > header span { color: var(--text-muted); font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.creativeProcessSteps > li > header strong { color: var(--text-primary); font-size: var(--type-body); line-height: 1.5; }
.creativeStepSummary { margin: 0 0 0 5.25rem; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.65; }
.creativeStepPlan { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); }
.creativeStepPlan > small { color: var(--text-muted); font-size: var(--inspector-field-label-size); font-weight: var(--weight-semibold); }
.creativeStepPlan .decisionReadableText { color: var(--text-primary); font-weight: var(--weight-regular); }
.creativeStepReasoning { margin-left: 5.25rem; }
.creativeStepReasoning > summary { width: fit-content; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-muted); font-size: var(--type-caption); cursor: pointer; list-style: none; }
.creativeStepReasoning > summary::-webkit-details-marker { display: none; }
.creativeStepReasoning > summary svg { transition: transform 180ms var(--ease-out); }
.creativeStepReasoning[open] > summary svg { transform: rotate(90deg); }
.creativeStepReasoning > .richText { margin-top: var(--space-3); color: var(--text-secondary); font-size: var(--type-ui); }
.evaluationBranchList { display: grid; }
.evaluationBranchList > article { display: grid; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--border-subtle); }
.evaluationBranchList > article:first-child { padding-top: 0; border-top: 0; }
.evaluationBranchList > article > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.evaluationBranchList h4 { margin: 0; color: var(--text-primary); font-size: var(--type-title); }
.evaluationBranchList > article > header span { padding: .25rem .55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); font-size: var(--type-caption); }
.evaluationList { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); }
.evaluationList > strong,
.evaluationEvidence > strong { font-size: var(--inspector-field-label-size); font-weight: var(--weight-semibold); }
.evaluationList.is-success > strong { color: var(--success); }
.evaluationList.is-warning > strong { color: var(--warning); }
.evaluationList ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.evaluationList li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.evaluationList li:last-child { padding-bottom: 0; border-bottom: 0; }
.evaluationList .richText { color: var(--text-primary); font-size: var(--inspector-copy-size); line-height: 1.7; }
.evaluationEvidence { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.evaluationEvidence > strong { color: var(--info); }
.evaluationEvidence .richText { color: var(--text-secondary); font-size: var(--type-ui); }
.evaluationMatrixScroll { overflow-x: auto; }
.evaluationMatrixPanel table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--type-ui); line-height: 1.55; }
.evaluationMatrixPanel th,
.evaluationMatrixPanel td { padding: var(--space-3); border: 1px solid var(--border); text-align: left; vertical-align: top; }
.evaluationMatrixPanel thead th { color: var(--text-primary); background: var(--surface-control); font-weight: var(--weight-semibold); }
.evaluationMatrixPanel tbody th { width: 10rem; color: var(--info); background: transparent; font-weight: var(--weight-semibold); }
.evaluationMatrixPanel td { color: var(--text-secondary); }
.decisionDisclosurePanel {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .018);
  overflow: hidden;
}
.decisionDisclosure > summary {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.decisionDisclosure > summary::-webkit-details-marker { display: none; }
.decisionDisclosure > summary:hover { color: var(--text-primary); background: rgba(255, 255, 255, .025); }
.decisionDisclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.decisionDisclosureLabel { min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); }
.decisionDisclosureLabel svg { flex: none; color: var(--text-muted); transition: transform 180ms var(--ease-out); }
.decisionDisclosure[open] .decisionDisclosureLabel svg { transform: rotate(90deg); }
.decisionDisclosureLabel strong { color: var(--text-primary); font-size: var(--inspector-section-title-size); font-weight: var(--weight-semibold); line-height: 1.4; }
.decisionDisclosureCount { flex: none; color: var(--text-muted); font-size: var(--type-caption); }
.decisionDisclosureBody { padding: var(--space-1) var(--space-4) var(--space-4); border-top: 1px solid var(--border-subtle); }
.decisionDisclosureBody .inspectorDetailItems { padding-top: var(--space-4); }
.decisionSummaryPanel {
  gap: var(--space-3);
  padding: 0 0 var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
.decisionSummaryPanel.is-role-key-result {
  border-color: var(--border-subtle);
  background: transparent;
}
.inspectorPanel.is-role-key-result > h3 { color: var(--accent-hover); }
.inspectorPanel.is-role-section > h3,
.inspectorPanel.is-role-reason > h3,
.inspectorPanel.is-role-evidence > h3 { color: var(--info); }
.decisionItemsPanel.is-role-evidence > h3 {
  color: var(--accent-hover);
  font-size: var(--type-title);
}
.inspectorPanel.is-role-notice > h3 { color: var(--warning); }
.decisionSummaryPanel .decisionReadableText {
  width: 100%;
  min-width: 0;
  max-width: 68ch;
  color: var(--text-primary);
  font-size: var(--inspector-copy-size);
  font-weight: var(--weight-medium);
  line-height: 1.78;
  letter-spacing: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
}
.decisionReadableText > :first-child { margin-top: 0; }
.decisionReadableText > :last-child { margin-bottom: 0; }
.decisionReadableText p { margin-block: 0 var(--space-3); }
.decisionReadableText ol { padding-left: 1.65rem; }
.decisionReadableText ol > li { padding-left: .25rem; }
.decisionReadableText ol > li + li { margin-top: var(--space-3); }
.decisionNotice {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.decisionNotice.is-warning { border-color: rgba(244, 193, 82, .38); background: rgba(244, 193, 82, .05); }
.decisionNotice.is-info { border-color: rgba(123, 184, 255, .32); background: rgba(123, 184, 255, .04); }
.decisionComparison { display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.comparisonHeader,
.comparisonRow {
  display: grid;
  grid-template-columns: minmax(6.5rem, .75fr) repeat(2, minmax(7.5rem, 1fr));
}
.decisionComparison.hasHandling .comparisonHeader,
.decisionComparison.hasHandling .comparisonRow { grid-template-columns: minmax(6.5rem, .75fr) repeat(3, minmax(7.5rem, 1fr)); }
.comparisonHeader { background: var(--surface-control); }
.comparisonHeader b,
.comparisonRow > * { padding: var(--space-3); border-right: 1px solid var(--border-subtle); }
.comparisonHeader b:last-child,
.comparisonRow > *:last-child { border-right: 0; }
.comparisonHeader b { color: var(--text-muted); font-size: var(--type-caption); }
.comparisonRow { border-top: 1px solid var(--border-subtle); background: var(--surface); }
.comparisonRow strong { color: var(--text-primary); font-size: var(--type-label); }
.comparisonRow span { color: var(--text-secondary); font-size: var(--type-label); line-height: 1.55; }
.decisionNestedList { margin-top: var(--space-3); }
.decisionNestedList > strong { display: block; margin-bottom: var(--space-2); color: var(--text-muted); font-size: var(--type-caption); }
.decisionNestedList ul { margin: 0; padding-left: 1.15rem; color: var(--text-secondary); }
.decisionNestedList li + li { margin-top: var(--space-2); }

.promptDrawer {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-modal);
  width: min(40rem, calc(100vw - 2rem));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
}
.promptDrawer > header {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.promptDrawer > header span { color: var(--accent); font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.promptDrawer > header h2 { margin: var(--space-1) 0 0; font-size: var(--type-heading); }
.promptDrawerBody {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.promptAccuracy { padding: var(--space-4); border: 1px solid rgba(244, 193, 82, .38); border-radius: var(--radius-sm); background: rgba(244, 193, 82, .05); }
.promptMeta { color: var(--warning) !important; font-size: var(--type-label) !important; }
.inspectorPanel {
  display: grid;
  gap: var(--space-3);
  padding: 0 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.inspectorPanel:last-child { border-bottom: 0; }
.inspectorPanel.is-summary {
  gap: var(--space-2);
  padding: 0 0 var(--space-5);
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
.inspectorPanel.is-summary h3 { color: var(--accent-hover); }
.inspectorPanel.is-summary .richText {
  color: var(--text-primary);
  font-size: var(--inspector-copy-size);
  font-weight: var(--weight-semibold);
  line-height: 1.52;
  letter-spacing: -.008em;
}
.inspectorPanel.is-report { gap: var(--space-4); }
.inspectorPanel.is-report > .richText { max-width: 68ch; }
.inspectorPanel.isMissing {
  padding: var(--space-4);
  border: 1px solid rgba(244, 193, 82, .38);
  border-radius: var(--radius-md);
  background: rgba(244, 193, 82, .055);
}
.inspectorPanel h3 {
  margin: 0;
  color: var(--info);
  font-size: var(--inspector-section-title-size);
  font-weight: var(--weight-semibold);
  line-height: 1.45;
  letter-spacing: -.006em;
}
.inspectorPanel > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--inspector-copy-size);
  line-height: 1.7;
  white-space: pre-wrap;
}
.inspectorDetailItems {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}
.inspectorDetailItem {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.inspectorDetailItem + .inspectorDetailItem {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.inspectorDetailItem dt {
  color: var(--text-muted);
  font-size: var(--inspector-field-label-size);
  font-weight: var(--weight-semibold);
  line-height: 1.55;
}
.inspectorDetailItem dd {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  margin: 0;
}
.decisionItemsPanel .inspectorDetailItem,
.decisionDisclosureBody .inspectorDetailItem {
  grid-template-columns: 1fr;
}
.decisionItemsPanel .inspectorDetailItem dt,
.decisionDisclosureBody .inspectorDetailItem dt {
  width: fit-content;
  min-width: 2rem;
  padding: .125rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--inspector-field-label-size);
  text-align: center;
}
.inspectorDetailItem .richText {
  color: var(--text-secondary);
  font-size: var(--inspector-copy-size);
  line-height: 1.68;
  overflow-wrap: break-word;
  word-break: normal;
}
.inspectorDetailItem .decisionReadableText { max-width: 68ch; line-height: 1.75; text-wrap: pretty; }
.inspectorDetailItem dd > small { color: var(--text-muted); font-size: var(--type-caption); line-height: 1.55; }
.inspectorDetailItem .richText > :first-child { margin-top: 0; }
.inspectorDetailItem .richText > :last-child { margin-bottom: 0; }
.inspectorDetailItem .sourceBadge { justify-self: start; }

/* Retrieval details: a compact index first, complete records on demand. */

.retrievalInspector { min-width: 0; display: grid; gap: var(--space-5); }
.retrievalActivityPanel,
.retrievalConditionPanel,
.retrievalResultsPanel { gap: var(--space-4); }
.retrievalSectionHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.retrievalSectionHeader h3 { margin: 0; color: var(--info); font-size: var(--inspector-section-title-size); }
.retrievalSectionHeader > span { flex: none; color: var(--text-muted); font-size: var(--type-caption); }
.retrievalActivityList { margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); list-style: none; }
.retrievalActivityList > li { border-bottom: 1px solid var(--border-subtle); }
.retrievalActivityList button {
  width: 100%;
  min-height: 4rem;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto 1rem;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}
.retrievalActivityList button:hover:not(:disabled) { background: rgba(255, 255, 255, .025); }
.retrievalActivityList button:disabled { cursor: default; opacity: .72; }
.retrievalActivityList button > svg { color: var(--text-subtle); }
.retrievalActivityIndex { color: var(--text-subtle); font-size: var(--type-caption); font-variant-numeric: tabular-nums; }
.retrievalActivityCopy { min-width: 0; display: grid; gap: .25rem; }
.retrievalActivityCopy strong { overflow: hidden; color: var(--text-primary); font-size: var(--type-ui); text-overflow: ellipsis; white-space: nowrap; }
.retrievalActivityCopy small { overflow: hidden; color: var(--text-muted); font-size: var(--type-caption); line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.retrievalActivityStatus { font-size: var(--type-caption); font-weight: var(--weight-semibold); white-space: nowrap; }
.retrievalActivityStatus.is-hit,
.retrievalActivityStatus.is-success { color: var(--success); }
.retrievalActivityStatus.is-empty,
.retrievalActivityStatus.is-unknown { color: var(--text-muted); }
.retrievalActivityStatus.is-failure { color: var(--danger); }
.retrievalActivityStatus.is-running { color: var(--accent); }
.retrievalActivityStatus.is-interrupted { color: var(--warning); }
.retrievalMissingNotice,
.retrievalCompletenessNotice { margin: 0; color: var(--text-muted); font-size: var(--type-ui); line-height: 1.65; }
.retrievalCompletenessNotice {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(244, 193, 82, .28);
  border-radius: var(--radius-sm);
  background: rgba(244, 193, 82, .045);
  color: var(--warning);
}
.retrievalOutcome {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.retrievalOutcome > span { color: var(--text-muted); font-size: var(--type-caption); font-weight: var(--weight-semibold); }
.retrievalOutcome > strong { color: var(--text-primary); font-size: var(--type-body); line-height: 1.55; }
.retrievalOutcome.is-hit { border-color: rgba(99, 200, 131, .34); }
.retrievalOutcome.is-empty { border-color: var(--border-strong); }
.retrievalOutcome.is-failure { border-color: rgba(255, 109, 90, .4); }
.retrievalOutcome.is-running { border-color: rgba(255, 109, 90, .26); }
.retrievalOutcome.is-interrupted { border-color: rgba(244, 193, 82, .36); }
.retrievalOutcome.is-hit > span { color: var(--success); }
.retrievalOutcome.is-failure > span { color: var(--danger); }
.retrievalOutcome.is-running > span { color: var(--accent); }
.retrievalOutcome.is-interrupted > span { color: var(--warning); }
.retrievalConditions { display: grid; gap: 0; margin: 0; }
.retrievalConditions > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}
.retrievalConditions > div:first-child { padding-top: 0; border-top: 0; }
.retrievalConditions dt { color: var(--text-muted); font-size: var(--inspector-field-label-size); font-weight: var(--weight-semibold); }
.retrievalConditions dd { min-width: 0; margin: 0; color: var(--text-primary); font-size: var(--type-ui); line-height: 1.65; overflow-wrap: anywhere; }
.retrievalResultList { display: grid; gap: var(--space-3); }
.retrievalResult {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.retrievalResult > summary {
  min-height: 4.25rem;
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}
.retrievalResult > summary::-webkit-details-marker { display: none; }
.retrievalResult > summary:hover { background: rgba(255, 255, 255, .025); }
.retrievalResult > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.retrievalResultChevron { grid-row: 1 / span 2; align-self: center; display: inline-flex; color: var(--text-muted); transition: transform 180ms var(--ease-out); }
.retrievalResult[open] .retrievalResultChevron { transform: rotate(90deg); }
.retrievalResultHeading { min-width: 0; display: grid; gap: .2rem; }
.retrievalResultHeading strong { color: var(--text-primary); font-size: var(--type-ui); line-height: 1.45; overflow-wrap: break-word; word-break: normal; text-wrap: pretty; }
.retrievalResultHeading small { color: var(--text-muted); font-size: var(--type-caption); overflow-wrap: anywhere; }
.retrievalResultMeta { grid-column: 2; min-width: 0; display: flex; justify-content: flex-start; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.retrievalResultMeta b { color: var(--text-muted); font-size: var(--type-caption); font-weight: var(--weight-medium); line-height: 1.45; overflow-wrap: anywhere; }
.retrievalResultBody { display: grid; gap: var(--space-4); padding: var(--space-4); border-top: 1px solid var(--border-subtle); }
.retrievalResultLink { width: fit-content; display: inline-flex; align-items: center; gap: var(--space-1); color: var(--info); font-size: var(--type-ui); }
.retrievalResultSection { min-width: 0; display: grid; gap: var(--space-2); }
.retrievalResultSection + .retrievalResultSection { padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.retrievalResultSection h4 { margin: 0; color: var(--info); font-size: var(--type-ui); }
.retrievalResultSection .richText { color: var(--text-secondary); font-size: var(--inspector-copy-size); line-height: 1.72; overflow-wrap: anywhere; }
.retrievalEmptyValue { color: var(--text-muted); font-size: var(--type-ui); }

/* Card data lineage: one readable spine from input to output and UI projection. */

.dataFlow {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0;
  color: var(--text-secondary);
}
.dataFlowOverview {
  min-width: 0;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.dataFlowOverviewIcon {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(123, 184, 255, .11);
  color: var(--info);
}
.dataFlowOverview > div:nth-child(2) { min-width: 0; }
.dataFlowOverview > div:nth-child(2) > span { color: var(--text-muted); font-size: var(--type-caption); }
.dataFlowOverview h3 { margin: .125rem 0 0; color: var(--text-primary); font-size: var(--inspector-section-title-size); font-weight: var(--weight-semibold); }
.dataFlowOverviewBadges { grid-column: 1 / -1; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dataFlowOverviewBadges span,
.dataCompleteness,
.runtimeStatus {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  padding: .125rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--surface-control);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}
.dataFlowOverviewBadges .is-complete,
.dataCompleteness.is-complete { border-color: rgba(99, 200, 131, .36); color: var(--success); background: rgba(99, 200, 131, .07); }
.dataFlowOverviewBadges .is-partial,
.dataCompleteness.is-partial { border-color: rgba(244, 193, 82, .36); color: var(--warning); background: rgba(244, 193, 82, .07); }
.dataFlowOverviewBadges .is-missing,
.dataCompleteness.is-missing { border-color: rgba(255, 128, 110, .36); color: var(--danger); background: rgba(255, 128, 110, .07); }
.dataFlowNotices { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.dataFlowNotices p {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: rgba(123, 184, 255, .045);
  font-size: var(--type-ui);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.dataFlowNotices p.is-warning { border-color: rgba(244, 193, 82, .3); background: rgba(244, 193, 82, .045); color: #efd486; }
.dataFlowNotices svg { margin-top: .25rem; }
.dataFlowStage,
.displayUse { --stage-color: var(--info); min-width: 0; display: grid; gap: var(--space-4); }
.dataFlowStage[data-stage="runtime"] { --stage-color: var(--warning); }
.dataFlowStage[data-stage="output"] { --stage-color: var(--success); }
.dataFlowStage > header,
.displayUse > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}
.dataFlowStage > header > div,
.displayUse > header > div { min-width: 0; }
.dataFlowStage h3,
.displayUse h3 { margin: 0; color: var(--text-primary); font-size: .9375rem; font-weight: var(--weight-semibold); line-height: 1.45; }
.dataFlowStage > header p,
.displayUse > header p { max-width: 70ch; margin: .2rem 0 0; color: var(--text-muted); font-size: var(--type-label); line-height: 1.6; overflow-wrap: anywhere; text-wrap: pretty; }
.dataFlowStageIcon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--stage-color) 34%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--stage-color) 8%, transparent);
  color: var(--stage-color);
}
.dataFlowConnector {
  position: relative;
  width: 2rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  margin-left: 0;
  color: var(--text-subtle);
}
.dataFlowConnector::before {
  position: absolute;
  width: 1px;
  height: 2.5rem;
  background: var(--border-strong);
  content: "";
}
.dataFlowConnector svg { position: relative; padding: 2px; border-radius: 50%; background: var(--surface-subtle); }
.dataFlowConnector.is-muted { color: var(--text-muted); }
.dataFieldList,
.runtimeUnitList { min-width: 0; display: grid; gap: var(--space-3); }
.dataField {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(32, 34, 40, .58);
}
.dataField > header { min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dataField h4 { min-width: 0; flex: 1 1 10rem; margin: 0; color: var(--text-primary); font-size: var(--type-ui); font-weight: var(--weight-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.sourceMarker {
  flex: none;
  min-width: 2rem;
  min-height: 1.55rem;
  display: inline-grid;
  place-items: center;
  padding: 0 .35rem;
  border: 1px solid rgba(123, 184, 255, .3);
  border-radius: .375rem;
  background: rgba(123, 184, 255, .07);
  color: #9fcaff;
  font: var(--type-caption)/1 var(--font-mono);
}
.dataField > footer { min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--text-muted); font-size: var(--type-caption); line-height: 1.5; }
.dataField > footer code,
.runtimeEventRef code { min-width: 0; color: var(--text-secondary); font: var(--type-caption)/1.5 var(--font-mono); overflow-wrap: anywhere; }
.dataSourceBadge {
  display: inline-flex;
  min-height: 1.65rem;
  align-items: center;
  gap: .3rem;
  padding: .125rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-control);
  color: var(--text-secondary);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.dataSourceBadge.is-runtime-event { border-color: rgba(244, 193, 82, .3); color: #efd486; }
.dataSourceBadge.is-artifact { border-color: rgba(99, 200, 131, .3); color: #8edca6; }
.dataSourceBadge.is-calculation { border-color: rgba(183, 160, 235, .34); color: #c7b5ee; }
.dataRelation { flex-basis: 100%; color: var(--text-muted); }
.dataFlowText { max-width: 70ch; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.65; overflow-wrap: anywhere; word-break: normal; text-wrap: pretty; }
.dataFlowText > :first-child { margin-top: 0; }
.dataFlowText > :last-child { margin-bottom: 0; }
.runtimeUnit {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(32, 34, 40, .58);
  overflow: hidden;
}
.runtimeUnit > summary {
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.runtimeUnit > summary::-webkit-details-marker,
.longDataValue > summary::-webkit-details-marker { display: none; }
.runtimeUnit > summary:hover,
.longDataValue > summary:hover { background: rgba(255, 255, 255, .025); }
.runtimeUnit > summary:focus-visible,
.longDataValue > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.runtimeUnit > summary strong { min-width: 0; color: var(--text-primary); font-size: var(--type-ui); line-height: 1.45; overflow-wrap: anywhere; }
.runtimeUnit > summary small { color: var(--text-muted); font: var(--type-caption)/1.4 var(--font-mono); white-space: nowrap; }
.dataDisclosureChevron { flex: none; color: var(--text-muted); transition: transform 180ms var(--ease-out); }
.runtimeUnit[open] > summary .dataDisclosureChevron,
.longDataValue[open] > summary .dataDisclosureChevron { transform: rotate(90deg); }
.runtimeStatus.is-success { border-color: rgba(99, 200, 131, .3); color: var(--success); }
.runtimeStatus.is-failure { border-color: rgba(255, 128, 110, .3); color: var(--danger); }
.runtimeStatus.is-running { border-color: rgba(244, 193, 82, .3); color: var(--warning); }
.runtimeUnitBody { min-width: 0; display: grid; gap: var(--space-4); padding: var(--space-4); border-top: 1px solid var(--border-subtle); }
.runtimeValue { min-width: 0; display: grid; gap: var(--space-2); }
.runtimeValue h5 { margin: 0; color: var(--warning); font-size: var(--type-label); font-weight: var(--weight-semibold); }
.runtimeEventRef,
.runtimeCompleteness { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-muted); font-size: var(--type-caption); }
.runtimeCompleteness { color: var(--success); }
.dataFlowCalculation { display: grid; gap: var(--space-2); padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle); }
.dataFlowCalculation > strong { color: var(--warning); font-size: var(--type-label); }
.longDataValue { min-width: 0; display: grid; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.longDataValue > summary { min-height: 2.75rem; display: grid; gap: var(--space-2); padding: var(--space-3); cursor: pointer; list-style: none; color: var(--text-secondary); font-size: var(--type-label); font-weight: var(--weight-semibold); }
.longDataSummaryLine { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.longDataSummaryLine small { margin-left: auto; color: var(--text-muted); font: var(--type-caption)/1.4 var(--font-mono); }
.longDataPreview { display: block; color: var(--text-secondary); font-size: var(--type-ui); font-weight: var(--weight-regular); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.longDataValue > .richText,
.longDataValue > .valueView { margin: 0 var(--space-3) var(--space-3); }
.dataFlowEmpty { margin: 0; padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--type-ui); line-height: 1.6; }
.displayUse { --stage-color: var(--evaluator); }
.displayUseGroups { display: grid; gap: var(--space-4); }
.mappingGroup { min-width: 0; display: grid; gap: var(--space-2); }
.mappingGroup h4,
.unusedSources > strong { margin: 0; color: var(--text-primary); font-size: var(--type-label); font-weight: var(--weight-semibold); }
.mappingGroup ul { display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); list-style: none; }
.mappingGroup li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.mappingGroup li > div { min-width: 0; display: grid; gap: .2rem; }
.mappingGroup li strong { color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.5; overflow-wrap: anywhere; }
.mappingGroup li small { color: var(--text-muted); font-size: var(--type-caption); line-height: 1.5; overflow-wrap: anywhere; }
.sourceReferences { display: inline-flex; justify-content: flex-end; gap: .25rem; flex-wrap: wrap; }
.sourceReferences > span { min-width: 2rem; min-height: 1.45rem; display: inline-grid; place-items: center; padding: 0 .3rem; border-radius: .325rem; background: rgba(123, 184, 255, .08); color: #9fcaff; font: var(--type-caption)/1 var(--font-mono); }
.sourceReferenceEmpty { color: var(--text-subtle); font-size: var(--type-caption); white-space: nowrap; }
.unusedSources { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.dataFlowState { min-height: 16rem; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-5); color: var(--text-muted); text-align: center; }
.dataFlowState svg { color: var(--info); }
.dataFlowState h3 { margin: var(--space-1) 0 0; color: var(--text-primary); font-size: var(--type-title); }
.dataFlowState p { max-width: 34rem; margin: 0; font-size: var(--type-ui); line-height: 1.65; }
.dataFlowSkeleton { display: grid; gap: var(--space-3); }
.dataFlowSkeleton div { height: 5.5rem; border-radius: var(--radius-md); background: var(--surface); }
.dataFlowSkeleton span { width: 100%; height: 2.75rem; border-radius: var(--radius-sm); background: var(--surface-control); }
.dataFlowSkeleton span:nth-child(3),
.dataFlowSkeleton span:nth-child(6),
.dataFlowSkeleton span:nth-child(8) { width: 72%; }
.dataFlowSkeleton > * { animation: dataFlowPulse 1.5s ease-in-out infinite alternate; }
@keyframes dataFlowPulse { from { opacity: .45; } to { opacity: .9; } }

/* Current final script: a document surface, not another canvas card. */

.scriptViewer {
  width: min(96vw, 112rem);
  height: 92dvh;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--text-primary);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .58);
  z-index: var(--z-modal);
}
.scriptViewer[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.scriptViewer::backdrop { background: rgba(7, 8, 10, .76); }
.scriptViewerHeader {
  min-width: 0;
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}
.scriptViewerHeader > .iconButton { flex: none; }
.scriptViewerHeaderActions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.scriptViewerTitle { min-width: 0; display: grid; gap: .15rem; }
.scriptViewerTitle > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--success);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
}
.scriptViewer.isCandidate .scriptViewerTitle > span { color: var(--accent-hover); }
.scriptViewerTitle h2 { margin: 0; font-size: var(--type-heading); font-weight: var(--weight-semibold); }
.scriptViewerTitle p { margin: 0; color: var(--text-muted); font-size: var(--type-label); }
.scriptViewerToolbar {
  min-width: 0;
  min-height: 3.5rem;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}
.scriptViewerTabs { display: flex; align-items: stretch; }
.scriptViewerTabs button {
  min-width: 7.5rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--type-ui);
  font-weight: var(--weight-medium);
}
.scriptViewerTabs button:hover { color: var(--text-primary); }
.scriptViewerTabs button.active { border-bottom-color: var(--accent); color: var(--text-primary); font-weight: var(--weight-semibold); }
.scriptViewerVersion {
  align-self: center;
  max-width: 52rem;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-label);
  line-height: 1.5;
  text-align: right;
  text-wrap: pretty;
}
.scriptViewerVersion.isHistorical { color: var(--success); }
.scriptViewerVersion.isCurrent { color: var(--warning); }
.scriptViewerBody { min-width: 0; min-height: 0; overflow: hidden; padding: var(--space-4); background: #e9ecf2; }
.scriptViewerState {
  width: min(34rem, 100%);
  min-height: 14rem;
  display: grid;
  align-content: center;
  gap: var(--space-3);
  margin: 10vh auto 0;
  padding: var(--space-5);
  border: 1px solid #d5dae3;
  border-radius: var(--radius-md);
  background: #fff;
  color: #323944;
  text-align: center;
}
.scriptViewerState p { margin: 0; color: #667080; }
.scriptViewerState.isError { border-color: #efb5ad; }

.originalScriptTable {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: #1e293b;
}
.scriptTableTitle {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, .04);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #fff;
  color: #1e293b;
  font-size: 14px;
}
.script-table-wrapper {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 0 0 16px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(0, 0, 0, .04);
  border-top: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  isolation: isolate;
}
.script-table-wrapper::-webkit-scrollbar { width: 8px; height: 8px; }
.script-table-wrapper::-webkit-scrollbar-thumb { background: #c1c9d2; border-radius: 4px; }
.script-table-wrapper::-webkit-scrollbar-track { background: #f1f5f9; }
.script-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  border: none;
  color: #1e293b;
  font-size: 12px;
  line-height: 1.5;
}
.script-table th,
.script-table td {
  max-width: 0;
  padding: 6px 8px;
  border-right: 1px solid #d0d5dd;
  border-bottom: 1px solid #d0d5dd;
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: break-word;
}
.script-table th:first-child,
.script-table td:first-child { border-left: 1px solid #d0d5dd; }
.script-table thead tr:first-child th { border-top: 1px solid #d0d5dd; }
.script-table thead th {
  position: sticky;
  z-index: 5;
  color: #1e293b;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.script-table thead tr.st-header-group th { top: 0; z-index: 12; }
.script-table thead tr.st-header-subgroup th { top: 34px; z-index: 11; }
.script-table thead tr.st-header-col th { top: 68px; z-index: 10; }
.st-header-group th { font-size: 12px; font-weight: 700; }
.st-header-subgroup th { font-size: 11px; font-weight: 600; }
.st-header-col th { color: #475569; font-size: 11px; font-weight: 500; }
.col-paragraph { background: #ffe4e1; }
.col-range { background: #ffdab9; }
.col-outline { background: #d6eaf8; }
.script-table thead th.col-outline-theme { background: #c8e6c9; color: #2e7d32; }
.script-table thead th.col-outline-form { background: #ffe0b2; color: #e65100; }
.script-table thead th.col-outline-action { background: #bbdefb; color: #1565c0; }
.script-table thead th.col-outline-feeling { background: #f8bbd0; color: #c2185b; }
.col-full-desc { background: #eceff1; color: #37474f; }
.script-table tbody td { position: relative; z-index: 0; }
.script-table th.col-paragraph,
.script-table td.col-paragraph {
  position: sticky;
  padding: 8px 14px;
  background-color: #fff5f3;
}
.script-table thead tr.st-header-group th.col-paragraph,
.script-table thead tr.st-header-subgroup th.col-paragraph,
.script-table thead tr.st-header-col th.col-paragraph { z-index: 40; background-color: #ffe4e1; }
.script-table thead tr.st-header-group th.col-paragraph,
.script-table thead tr.st-header-subgroup th.col-paragraph:first-child { box-shadow: -14px 0 0 #ffe4e1; }
.script-table tbody td.col-paragraph { z-index: 15; box-shadow: inset 0 -1px #d0d5dd; }
.script-table th.col-paragraph-last,
.script-table td.col-paragraph-last { box-shadow: inset 0 -1px #d0d5dd, 3px 0 6px -2px rgba(0, 0, 0, .07); }
.script-table tbody tr > td.col-paragraph:first-child { box-shadow: -14px 0 0 #fff5f3, inset 0 -1px #d0d5dd; }
.script-table tbody td.col-paragraph { background: #fff5f3; }
.script-table tbody td.col-range { background: #fff8f0; }
.script-table tbody td.col-outline,
.script-table tbody td.col-outline-theme,
.script-table tbody td.col-outline-form,
.script-table tbody td.col-outline-action,
.script-table tbody td.col-outline-feeling { background: #fff; }
.script-table tbody td.col-full-desc { background: #f5f5f5; }
.script-table thead th.col-atom-sub { font-size: 11px; font-weight: 600; }
.script-table tbody td.col-atom-group { padding: 0; background: #fff; font-size: 12px; vertical-align: top; }
.script-table tbody td.col-atom-group .atom-rows-table { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; }
.script-table tbody td.col-atom-group .atom-rows-table td {
  padding: 6px 8px;
  border-right: 1px solid #d0d5dd;
  border-bottom: 1px solid #d0d5dd;
  line-height: 1.35;
  vertical-align: top;
  white-space: normal;
}
.script-table tbody td.col-atom-group .atom-rows-table tr:last-child td { border-bottom: none; }
.script-table tbody td.col-atom-group .atom-rows-table td:last-child { border-right: none; }
.script-table tbody td.col-atom-group .atom-rows-table .col-atom-type { color: #64748b; }
.script-table tbody td.col-atom-group-theme .atom-rows-table .atom-dim-main { background: #66bb6a; color: #fff; font-weight: 600; }
.script-table tbody td.col-atom-group-theme .atom-rows-table .atom-dim-sub { background: #c8e6c9; color: #2e7d32; font-weight: 500; }
.script-table tbody td.col-atom-group-form .atom-rows-table .atom-dim-main { background: #ffb74d; color: #4e342e; font-weight: 600; }
.script-table tbody td.col-atom-group-form .atom-rows-table .atom-dim-sub { background: #ffe0b2; color: #e65100; font-weight: 500; }
.script-table tbody td.col-atom-group-action .atom-rows-table .atom-dim-main { background: #64b5f6; color: #fff; font-weight: 600; }
.script-table tbody td.col-atom-group-action .atom-rows-table .atom-dim-sub { background: #bbdefb; color: #1565c0; font-weight: 500; }
.script-table tbody td.col-atom-group .atom-val-with-id { cursor: help; border-bottom: 1px dotted #99f6e4; }
.script-row-l1 td { font-weight: 500; }
.script-row-l2 td { color: #475569; font-size: 11.5px; }
.script-row-l3 td,
tr[class^="script-row-l"]:not(.script-row-l1):not(.script-row-l2):not(.script-row-l3) td { color: #64748b; font-size: 11px; }
tr[class^="script-row-l"]:hover td:not(.col-paragraph) { background: rgba(91, 141, 239, .04); }
.collapse-toggle {
  width: 16px;
  min-height: 16px;
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
}
.collapse-toggle:hover { color: #1e293b; }
.collapse-toggle.collapsed { color: #94a3b8; }
.content-range-tags { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cr-tag {
  display: inline-block;
  margin: 1px 2px;
  padding: 1px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 3px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  word-break: break-word;
}
.elem-hl-extended {
  display: inline;
  margin: 0;
  padding: 0 1px 0 2px;
  border: 0;
  border-radius: 2px;
  background: #fff;
  color: #0288d1;
  box-shadow: 0 0 0 1px #81d4fa;
  font: inherit;
  font-weight: 600;
  line-height: inherit;
  cursor: pointer;
}
span.elem-hl-extended { cursor: default; }
.cell-expandable {
  max-height: 100px;
  overflow: hidden;
  position: relative;
  color: #4a5568;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}
.cell-expandable::after {
  content: '... 点击展开';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 24px;
  background: linear-gradient(transparent, #f5f5f5 60%);
  color: #5b8def;
  font-size: 10px;
  line-height: 28px;
  text-align: center;
}
.cell-expandable.expanded { max-height: none; }
.cell-expandable.expanded::after { content: none; }
.script-legend { display: flex; flex-wrap: wrap; gap: 10px; color: #64748b; font-size: 11px; font-weight: 400; }
.legend-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.legend-swatch { width: 12px; height: 12px; display: inline-block; border: 1px solid #81d4fa; border-radius: 2px; background: #fff; }
.elementParagraphs { margin: 0; padding: 0; list-style: none; }
.elementTableViewport {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid #cfd5df;
  border-radius: var(--radius-sm);
  background: #f8f9fc;
  color: #2e3540;
  box-shadow: 0 4px 18px rgba(30, 40, 55, .1);
}
.elementTable {
  width: 100%;
  min-width: 72rem;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #303744;
  font-size: .875rem;
  line-height: 1.55;
}
.elementTable th,
.elementTable td {
  min-width: 9.5rem;
  padding: .875rem;
  border-right: 1px solid #d7dce5;
  border-bottom: 1px solid #d7dce5;
  background: #fff;
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}
.elementTable thead th { top: 0 !important; min-width: 12rem; background: #e8edf4; }
.elementTable thead th { position: sticky; z-index: 2; color: #374151; font-size: .8125rem; font-weight: 700; }
.elementTable thead th:first-child { width: 18rem; }
.elementTable tbody th { background: #f5f7fa; color: #2d3541; font-weight: 700; }
.elementTable tr.isSelected th,
.elementTable tr.isSelected td { background: #fff2d7; box-shadow: inset 0 2px #e6a83f, inset 0 -2px #e6a83f; }
.elementParagraphs { margin: 0; display: grid; gap: .4rem; }
.elementParagraphs li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-2); }
.elementParagraphs span { color: #788291; font-size: .75rem; font-weight: 600; }

.richText {
  max-width: 72ch;
  color: var(--text-secondary);
  font-size: var(--type-body);
  line-height: 1.72;
  letter-spacing: .012em;
  overflow-wrap: anywhere;
}
.richText > :first-child { margin-top: 0; }
.richText > :last-child { margin-bottom: 0; }
.richText h1,
.richText h2,
.richText h3,
.richText h4 {
  margin: 1.5em 0 .55em;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.richText h1 { font-size: var(--type-heading); }
.richText h2 { font-size: var(--type-title); }
.richText h3,
.richText h4 { font-size: var(--type-body); }
.richText p { margin: 0 0 1em; text-wrap: pretty; }
.richText strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.richText ul,
.richText ol { margin: .5em 0 1em; padding-left: 1.4em; }
.richText li + li { margin-top: .35em; }
.richText blockquote {
  margin: 1em 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
}
.richText code {
  padding: .12em .35em;
  border-radius: .25rem;
  background: var(--canvas);
  color: #e4e6ea;
  font-family: var(--font-mono);
  font-size: .875em;
  font-variant-ligatures: none;
}
.richText pre {
  max-width: 100%;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--canvas);
}
.richText pre code { padding: 0; background: transparent; }
.richText table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--type-ui);
}
.richText th,
.richText td { padding: var(--space-2); border: 1px solid var(--border); text-align: left; vertical-align: top; }
.richText th { color: var(--text-primary); background: var(--surface); font-weight: var(--weight-semibold); }
.richText hr { height: 1px; margin: var(--space-5) 0; border: 0; background: var(--border-subtle); }
.richText a { color: var(--info); text-underline-offset: .18em; }

.valueView {
  max-width: 100%;
  max-height: 62vh;
  margin: 0;
  padding: var(--space-4);
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: #d8dae0;
  font: var(--type-label)/1.65 var(--font-mono);
  font-variant-ligatures: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.diffWarning,
.emptyState { color: var(--warning) !important; }
.planHistorySummary { color: var(--text-muted) !important; }
.planHistoryList { display: grid; gap: var(--space-3); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.planHistoryItem {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.planHistoryItem.is-success { border-color: rgba(99, 200, 131, .48); }
.planHistoryItem.is-failure { border-color: rgba(255, 128, 110, .48); }
.planHistoryItem p { margin-top: var(--space-2); }
.planCurrentTag {
  display: inline-flex;
  margin-left: var(--space-2);
  padding: .125rem .5rem;
  border-radius: 999px;
  background: rgba(99, 200, 131, .14);
  color: var(--success);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
}

/* Feedback and loading */

.errorBanner {
  position: fixed;
  left: 1.125rem;
  right: 1.125rem;
  bottom: 1.125rem;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 128, 110, .45);
  border-radius: var(--radius-sm);
  background: #3a201d;
  color: #ffb7aa;
  font-size: var(--type-ui);
  box-shadow: var(--shadow-md);
}
.loadingScreen,
.fatalState {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--canvas);
  text-align: center;
}
.loadingScreen h1,
.fatalState h1 { margin: 0; font-size: var(--type-heading); font-weight: var(--weight-semibold); }
.fatalState p { max-width: 65ch; margin: 0; color: var(--text-muted); font-size: var(--type-body); line-height: 1.65; }
.skeletonWide,
.skeletonLines { width: min(26rem, 80vw); display: grid; gap: var(--space-2); }
.skeletonWide i,
.skeletonLines i { height: .625rem; border-radius: .25rem; background: var(--surface-control); }
.skeletonWide i:nth-child(2),
.skeletonLines i:nth-child(2) { width: 82%; }
.skeletonWide i:nth-child(3),
.skeletonLines i:nth-child(3) { width: 64%; }

.mobileTimeline { display: none; }
.exitFullscreen {
  position: absolute;
  z-index: var(--z-toast);
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold);
}

@media (max-width: 1199px) {
  .runHeader,
  .withInspector .runHeader { right: var(--space-3); left: var(--space-3); }
  .topBar { flex-wrap: wrap; }
  .runMeta { order: 3; }
  .roundNav { order: 5; flex: 1 1 20rem; width: auto; }
  .withInspector .workspace { grid-template-columns: 1fr; }
  .inspector {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    width: min(28.75rem, calc(100vw - 1.5rem));
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  body { overflow: auto; }
  .appFrame { height: auto; min-height: 100vh; }
  .runHeader,
  .withInspector .runHeader { position: relative; top: auto; left: auto; right: auto; margin: var(--space-2); }
  .topBar { gap: var(--space-2); }
  .productMark { flex: 1; }
  .buildPicker { order: 3; width: 100%; min-width: 0; }
  .buildPicker select { flex: 1; width: auto; }
  .buildPicker input { flex: 1; width: auto; }
  .roundNav { order: 5; width: 100%; }
  .runMeta { order: 2; margin-left: auto; }
  .compactAction span,
  .dataNotes summary span,
  .refreshing { display: none; }
  .dataNotes > div { position: fixed; top: auto; left: .625rem; right: .625rem; bottom: .625rem; width: auto; }

  .workspace { height: auto; min-height: calc(100vh - 11.25rem); display: block; overflow: visible; }
  .flowShell { display: none; }
  .mobileTimeline { display: block; padding: var(--space-4); background: var(--canvas); }
  .mobileTimeline > header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
  .mobileTimeline h2 { margin: 0; font-size: var(--type-title); font-weight: var(--weight-semibold); }
  .mobileTimeline header p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--type-label); }

  .mobileStory {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    min-height: 6rem;
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    text-align: left;
  }
  .mobileStory > span:first-child { color: var(--accent); font-size: var(--type-label); font-weight: var(--weight-semibold); }
  .mobileStory strong,
  .mobileStory p { grid-column: 1 / -1; margin: 0; }
  .mobileStory strong { font-size: var(--type-title); font-weight: var(--weight-semibold); }
  .mobileStory p { color: var(--text-secondary); font-size: var(--type-body); line-height: 1.65; }
  .mobileStory > .cardFields,
  .mobileSteps .cardFields {
    grid-column: 1 / -1;
    width: 100%;
    gap: var(--space-3);
  }
  .mobileStory .cardField,
  .mobileSteps .cardField {
    grid-template-columns: minmax(4.75rem, 5.5rem) minmax(0, 1fr);
    gap: var(--space-3);
  }
  .mobileStory .cardField b,
  .mobileSteps .cardField b {
    color: var(--text-muted);
    font-size: var(--type-label);
    line-height: 1.55;
  }
  .mobileStory .cardField p,
  .mobileSteps .cardField p {
    grid-column: auto;
    color: var(--text-secondary);
    font-size: var(--type-ui);
    font-weight: var(--weight-regular);
    line-height: 1.58;
    -webkit-line-clamp: unset;
  }
  .mobileStory .cardFieldPrimary p,
  .mobileSteps .cardFieldPrimary p {
    color: var(--text-primary);
    font-size: var(--type-body);
    font-weight: var(--weight-semibold);
  }
  .mobileFinal { display: block; padding: 0; }
  .mobileFinalSummary {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
  }
  .mobileFinalSummary > span:first-child { color: var(--accent); font-size: var(--type-label); font-weight: var(--weight-semibold); }
  .mobileFinalSummary strong,
  .mobileFinalSummary p { grid-column: 1 / -1; margin: 0; }
  .mobileFinal > .nodeAction { margin: 0 var(--space-4) var(--space-4); }

  .mobileTimeline > .mobileDecision {
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
  }
  .mobileDecision > button:first-child {
    width: 100%;
    min-height: 5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(255, 109, 90, .42);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    text-align: left;
  }
  .mobileDecision > button:first-child > span { color: var(--accent); font-size: var(--type-label); font-weight: var(--weight-semibold); }
  .mobileDecision > button:first-child > em { color: var(--text-muted); font-size: var(--type-caption); font-style: normal; }
  .mobileDecision > button:first-child > strong,
  .mobileDecision > button:first-child > .cardFields { grid-column: 1 / -1; }
  .mobileDecision > button:first-child > strong { font-size: var(--type-title); }
  .mobilePromptAction { width: 100%; min-height: 2.75rem; margin-bottom: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--canvas); color: var(--text-secondary); }

  .roundList,
  .mobileSteps { margin: 0; padding: 0; list-style: none; }
  .roundList > li { margin-bottom: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
  .mobileRoundSummary { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); }
  .roundExpand { border: 0; border-right: 1px solid var(--border-subtle); background: var(--surface-control); color: var(--text-primary); }
  .roundSummaryOpen {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
  }
  .roundSummaryOpen > span { color: var(--accent); font-size: var(--type-label); font-weight: var(--weight-semibold); }
  .roundSummaryOpen > strong,
  .mobileSummarySequence { grid-column: 1 / -1; }
  .roundSummaryOpen > strong { font-size: var(--type-title); font-weight: var(--weight-semibold); }
  .mobileSummarySequence { display: grid; gap: var(--space-2); }
  .mobileSummarySequence p {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-2);
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--type-ui);
    line-height: 1.55;
  }
  .mobileSummarySequence b { color: var(--text-muted); font-size: var(--type-label); font-weight: var(--weight-semibold); }

  .mobileSteps { padding: var(--space-2); border-top: 1px solid var(--border-subtle); background: var(--canvas); }
  .mobileSteps li > button:first-child {
    width: 100%;
    min-height: 5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    text-align: left;
  }
  .mobileSteps span { color: var(--accent); font-size: var(--type-label); font-weight: var(--weight-semibold); }
  .mobileSteps strong,
  .mobileSteps p { grid-column: 1 / -1; }
  .mobileSteps strong { font-size: var(--type-body); font-weight: var(--weight-semibold); }
  .mobileSteps p { margin: 0; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.55; }
  .mobileConvergenceSteps {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mobileConvergenceSteps > li { margin: 0; padding: 0; }
  .inspectorDetailItem {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .implementationRouteBody { grid-template-columns: 1fr; }
  .implementationPlanField.is-wide { grid-column: auto; }
  .mobileCandidate { padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-control); }
  .mobileCandidate .candidateExpand {
    width: 100%;
    min-height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--canvas);
    color: var(--accent);
    font-size: var(--type-ui);
    font-weight: var(--weight-semibold);
  }
  .mobileCandidateActions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .mobileCandidateActions .candidateExpand {
    width: auto;
    flex: 1 1 12rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: 0 var(--space-3);
  }
  .mobileCandidate ol { margin: 0; padding: var(--space-2) 0 0; list-style: none; }
  .mobileBranchProcess { display: grid; gap: var(--space-2); }
  .mobileRetrievalStage {
    padding: var(--space-2);
    border: 1px dashed rgba(230, 168, 111, .42);
    border-radius: var(--radius-sm);
    background: rgba(230, 168, 111, .045);
  }
  .mobileRetrievalStage > button:first-child { border-color: rgba(230, 168, 111, .38); background: rgba(37, 35, 31, .96); }
  .mobileRetrievalStage > button:first-child span,
  .mobileRetrievalStage > ol > li > button:first-child span { color: var(--retrieval); }
  .mobileRetrievalStage > ol { display: grid; gap: var(--space-2); padding: 0; }
  .mobileRetrievalStage > ol > li { padding-left: var(--space-2); border-left: 2px solid rgba(230, 168, 111, .28); }
  .mobileRetrievalAgent > button:first-child { background: rgba(31, 30, 30, .97); }
  .mobileRetrievalAgent > ol { display: grid; gap: .25rem; padding-left: var(--space-3); }
  .mobileRetrievalAgent > ol > li > button:first-child { min-height: 2.75rem; }

  .flowShell.mobileFullscreen { position: fixed; inset: 0; z-index: var(--z-drawer); display: block; }
  .inspector { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .inspectorHeader { padding: var(--space-4); }
  .inspectorTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }
  .inspectorTabs button { min-width: 0; }
  .inspectorTabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .inspectorBody { gap: var(--space-4); padding: var(--space-4); }
  .retrievalActivityList button { grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: var(--space-2); }
  .retrievalActivityList button > svg { display: none; }
  .retrievalConditions > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .retrievalResult > summary { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .retrievalResultMeta { grid-column: 2; justify-content: flex-start; }
  .decisionComparison { overflow-x: auto; }
  .comparisonHeader,
  .comparisonRow { min-width: 30rem; }
  .decisionComparison.hasHandling .comparisonHeader,
  .decisionComparison.hasHandling .comparisonRow { min-width: 38rem; }
  .runtimeUnit > summary { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .runtimeUnit > summary small { display: none; }
  .dataField { padding: var(--space-3); }
  .mappingGroup li { align-items: start; grid-template-columns: 1fr; }
  .sourceReferences { justify-content: flex-start; }
  .unusedSources { align-items: flex-start; flex-direction: column; }
  .promptDrawer { inset: 0; width: 100vw; border: 0; border-radius: 0; }
  .promptDrawerBody { padding: var(--space-4); }
  .errorBanner { left: .625rem; right: .625rem; bottom: .625rem; }

  .scriptViewer { inset: 0; width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .scriptViewerHeader { min-height: 4.75rem; padding: var(--space-3) var(--space-4); }
  .scriptViewerTitle h2 { font-size: var(--type-title); }
  .scriptViewerHeaderActions .quietButton span { display: none; }
  .scriptViewerHeaderActions .quietButton { width: 2.75rem; padding: 0; justify-content: center; }
  .scriptViewerToolbar { min-height: 6.5rem; align-items: center; flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
  .scriptViewerTabs { height: 3rem; flex: 1 1 100%; }
  .scriptViewerTabs button { flex: 1; min-width: 0; }
  .scriptViewerVersion { flex: 1 1 100%; max-width: none; text-align: left; }
  .scriptViewerBody { padding: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .react-flow__edge.animated .react-flow__edge-path { animation: none !important; }
}

/* Inspector three-column source comparison workbench. */

.withLineageInspector .runHeader { right: var(--space-4); }
.withLineageInspector .workspace { grid-template-columns: minmax(0, 1fr); }

.inspectorWorkbenchBackdrop {
  position: fixed;
  z-index: calc(var(--z-drawer) - 1);
  inset: 0;
  background: rgba(7, 8, 10, .48);
  backdrop-filter: blur(1px);
}

.inspectorWorkbench {
  position: fixed;
  inset: var(--space-3) var(--space-3) var(--space-3) auto;
  width: min(96vw, 112rem);
  height: auto;
  max-height: none;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #17191e;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .62);
}
.comparisonInspectorHeader {
  min-height: 5rem;
  padding: var(--space-3) var(--space-4);
  background: #1d2026;
}
.comparisonInspectorTitle { min-width: 0; flex: 1; }
.comparisonInspectorTitle h2 { max-width: none; font-size: var(--type-title); }
.comparisonInspectorMeta { min-width: 0; display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.comparisonInspectorActions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex: none; }
.comparisonInspectorBody { display: block; padding: 0; overflow-y: auto; }

.inspectorComparison { min-width: 0; color: var(--text-secondary); }
.inspectorComparison .valueView {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.comparisonToolbar {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: #1b1e23;
}
.comparisonToolbar > div { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.comparisonToolbar > div:first-child > svg { color: var(--info); }
.comparisonToolbar span { color: var(--text-secondary); font-size: var(--type-ui); font-weight: var(--weight-semibold); }
.comparisonCompleteness,
.sourceCompleteness {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: .125rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.comparisonCompleteness.is-complete,
.sourceCompleteness.is-complete { border-color: rgba(99, 200, 131, .35); color: var(--success); }
.comparisonCompleteness.is-partial,
.sourceCompleteness.is-partial { border-color: rgba(244, 193, 82, .36); color: var(--warning); }
.comparisonCompleteness.is-missing,
.sourceCompleteness.is-missing { border-color: rgba(255, 128, 110, .36); color: var(--danger); }
.comparisonTextAction,
.comparisonInlineAction {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
}
.comparisonTextAction:hover,
.comparisonInlineAction:hover { border-color: var(--border-strong); background: var(--surface-control); color: var(--text-primary); }
.comparisonNotices { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.comparisonNotices p { margin: 0; display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid rgba(123, 184, 255, .25); border-radius: var(--radius-sm); background: rgba(123, 184, 255, .04); color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.6; }
.comparisonNotices p.is-warning { border-color: rgba(244, 193, 82, .28); color: #efd486; background: rgba(244, 193, 82, .04); }
.comparisonNotices p.is-error { border-color: rgba(255, 128, 110, .3); color: #ffb0a2; background: rgba(255, 128, 110, .04); }
.comparisonNotices svg { flex: none; margin-top: .25rem; }

.comparisonColumnHeaders {
  position: sticky;
  z-index: 3;
  top: 3.25rem;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 24fr) minmax(0, 34fr);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border);
  background: #20232a;
}
.comparisonColumnHeaders span { min-width: 0; padding: var(--space-3) var(--space-4); color: var(--text-primary); font-size: var(--type-ui); font-weight: var(--weight-semibold); }
.comparisonColumnHeaders span:first-child { color: var(--accent-hover); }
.comparisonColumnHeaders span:nth-child(2) { color: #9fcaff; border-left: 1px solid var(--border); }
.comparisonColumnHeaders span:nth-child(3) { color: #79d5c3; border-left: 1px solid var(--border); }

.comparisonModules { padding-bottom: var(--space-4); }
.comparisonModule { min-width: 0; border-bottom: 1px solid var(--border); }
.comparisonModuleHeader {
  width: 100%;
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: #1b1e23;
  color: var(--text-secondary);
  text-align: left;
}
.comparisonModuleHeader:hover { background: #22252b; color: var(--text-primary); }
.comparisonModuleHeader > svg { color: var(--text-muted); }
.comparisonModuleHeader strong { min-width: 0; color: var(--text-primary); font-size: var(--type-body); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.comparisonModuleHeader small { color: var(--text-muted); font-size: var(--type-caption); white-space: nowrap; }
.moduleMarker {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  height: 1.55rem;
  padding: 0 .4rem;
  border: 1px solid rgba(255, 109, 90, .34);
  border-radius: .375rem;
  background: rgba(255, 109, 90, .07);
  color: var(--accent-hover);
  font: var(--type-caption)/1 var(--font-mono);
}
.comparisonModuleGrid { min-width: 0; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 30fr) minmax(0, 24fr); align-items: start; }
.comparisonColumnRegion { display: contents; }
.comparisonCell { min-width: 0; padding: var(--space-4); background: #181a1f; }
.comparisonCell + .comparisonCell { border-left: 1px solid var(--border); }
.businessModuleCell { background: rgba(255, 109, 90, .018); }
.evidenceCell { background: rgba(123, 184, 255, .018); }
.sourceRecordCell { background: rgba(88, 208, 185, .018); }

.comparisonBusinessValue { min-width: 0; display: grid; gap: var(--space-3); }
.businessSourceLinks { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.businessSourceLinks > span { color: var(--text-muted); font-size: var(--type-caption); }
.businessDefinitionList { min-width: 0; display: grid; gap: var(--space-3); margin: 0; }
.businessDefinitionList > div { min-width: 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.businessDefinitionList > div:first-child { padding-top: 0; border-top: 0; }
.businessDefinitionList dt { color: var(--text-muted); font-size: var(--type-label); font-weight: var(--weight-medium); line-height: 1.65; }
.businessDefinitionList dd { min-width: 0; max-width: 72ch; margin: 0; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.72; overflow-wrap: anywhere; text-wrap: pretty; }
.businessDefinitionList .is-emphasis dd { color: var(--text-primary); font-size: var(--type-body); font-weight: var(--weight-semibold); }
.businessPlanRoutes { min-width: 0; display: grid; gap: var(--space-3); }
.businessPlanRoute { min-width: 0; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .018); }
.businessPlanRoute > header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.businessPlanRoute > header > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: rgba(255, 109, 90, .11); color: var(--accent-hover); font: var(--type-caption)/1 var(--font-mono); }
.businessPlanRoute > header > div { min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.businessPlanRoute h5,
.businessNarrative h5,
.businessRecordItem h5 { margin: 0; color: var(--text-primary); font-size: var(--type-body); font-weight: var(--weight-semibold); }
.businessPlanRoute header small { color: var(--text-muted); font-size: var(--type-caption); }
.businessPlanRoute dl { margin: 0; }
.businessRevisionSummary,
.businessRecordList { min-width: 0; display: grid; gap: var(--space-4); }
.businessNarrative { min-width: 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.businessNarrative p,
.businessRecordItem p { max-width: 72ch; margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.72; overflow-wrap: anywhere; text-wrap: pretty; }
.businessRecordItem { min-width: 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); }
.businessBulletList { max-width: 72ch; margin: 0; padding-left: 1.25rem; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.72; }
.businessBulletList li + li { margin-top: var(--space-2); }
.comparisonBusinessItems { min-width: 0; display: grid; }
.comparisonBusinessItem { min-width: 0; display: grid; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.comparisonBusinessItem:first-child { padding-top: 0; border-top: 0; }
.comparisonBusinessItem:last-child { padding-bottom: 0; }
.comparisonBusinessItem > header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.comparisonBusinessItem > header > div:first-child { min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.comparisonBusinessItem h4 { min-width: 0; margin: 0; color: var(--text-primary); font-size: var(--type-ui); font-weight: var(--weight-semibold); line-height: 1.5; overflow-wrap: anywhere; }
.businessItemId { color: var(--text-muted); font: var(--type-caption)/1 var(--font-mono); }
.comparisonReadableText { max-width: 72ch; color: var(--text-secondary); font-size: var(--type-ui); line-height: 1.72; overflow-wrap: anywhere; text-wrap: pretty; }
.comparisonReadableText > :first-child { margin-top: 0; }
.comparisonReadableText > :last-child { margin-bottom: 0; }
.comparisonReadableText h2,
.comparisonReadableText h3 { color: var(--text-primary); font-size: var(--type-body); }
.comparisonEmptyValue { margin: 0; color: var(--text-muted); font-size: var(--type-ui); line-height: 1.65; }
.comparisonInlineAction { width: fit-content; }

.bindingBadgeRow { min-width: 0; display: flex; justify-content: flex-end; gap: var(--space-1); flex-wrap: wrap; }
.bindingBadge {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .75rem;
  border: 1px solid rgba(123, 184, 255, .32);
  border-radius: 999px;
  background: rgba(123, 184, 255, .06);
  color: #afd2ff;
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-align: left;
}
.bindingBadge.is-compact { width: 2.75rem; min-width: 2.75rem; padding: 0; justify-content: center; }
.bindingBadge.is-compact > svg { display: none; }
.bindingMarker { color: inherit; font-family: var(--font-mono); }
.bindingBadge:hover,
.bindingBadge.is-active { border-color: var(--info); background: rgba(123, 184, 255, .16); color: #d6e9ff; box-shadow: 0 0 0 2px rgba(123, 184, 255, .08); }
.bindingBadge.is-adopted { border-color: rgba(99, 200, 131, .36); color: #91dca8; background: rgba(99, 200, 131, .07); }
.bindingBadge.is-rejected { border-color: var(--border-strong); color: var(--text-secondary); background: rgba(174, 178, 187, .06); }
.bindingBadge.is-available { border-color: rgba(244, 193, 82, .36); color: #efd486; background: rgba(244, 193, 82, .06); }
.bindingBadge.is-calculated { border-color: rgba(183, 160, 235, .38); color: #cabaf0; background: rgba(183, 160, 235, .07); }
.bindingBadge.is-missing { border-color: rgba(255, 128, 110, .38); color: #ffb0a2; background: rgba(255, 128, 110, .06); }
.bindingBadge.is-unsafe { border-color: rgba(244, 193, 82, .38); color: #efd486; background: rgba(244, 193, 82, .06); }
.bindingBadge.is-partial { border-color: rgba(183, 160, 235, .38); color: #cabaf0; background: rgba(183, 160, 235, .07); }
.bindingBadge.is-fallback { border-color: rgba(174, 178, 187, .34); color: var(--text-secondary); }

.evidenceList { min-width: 0; display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.evidenceList > li { min-width: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(32, 34, 40, .55); transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); }
.evidenceList > li.is-active { border-color: rgba(123, 184, 255, .62); background: rgba(123, 184, 255, .08); }
.evidenceCopy { min-width: 0; display: grid; gap: .3rem; }
.evidenceCopy strong { color: var(--text-primary); font-size: var(--type-label); line-height: 1.45; overflow-wrap: anywhere; }
.evidenceCopy code { color: #a9cfff; font: var(--type-caption)/1.55 var(--font-mono); overflow-wrap: anywhere; }
.evidenceCopy span { color: var(--text-muted); font-size: var(--type-caption); line-height: 1.5; }

.sourceRecordCell { display: grid; align-content: start; gap: var(--space-3); }
.sourceRecord { min-width: 0; display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(32, 34, 40, .55); transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); }
.sourceRecord.is-active { border-color: rgba(88, 208, 185, .62); background: rgba(88, 208, 185, .07); }
.sourceRecord > header { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); }
.sourceRecord > header > svg { margin-top: .2rem; color: #79d5c3; }
.sourceRecord > header > div { min-width: 0; display: grid; gap: .2rem; }
.sourceRecord > header strong { color: var(--text-primary); font-size: var(--type-label); line-height: 1.45; overflow-wrap: anywhere; }
.sourceRecord > header small { color: #8ccfc2; font-size: var(--type-caption); }
.sourceBindingMarkers { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.sourceBindingMarkers button { min-width: 2.75rem; height: 2.75rem; padding: 0 .55rem; border: 1px solid rgba(88, 208, 185, .3); border-radius: .45rem; background: rgba(88, 208, 185, .05); color: #93ded0; font: var(--type-label)/1 var(--font-mono); }
.sourceBindingMarkers button:hover,
.sourceBindingMarkers button.is-active { border-color: #79d5c3; background: rgba(88, 208, 185, .15); color: #d2fff6; }
.sourceMeta { min-width: 0; display: grid; gap: .4rem; margin: 0; }
.sourceMeta > div { min-width: 0; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-2); }
.sourceMeta dt { color: var(--text-muted); font-size: var(--type-caption); }
.sourceMeta dd { min-width: 0; margin: 0; color: var(--text-secondary); font-size: var(--type-caption); overflow-wrap: anywhere; }
.sourceMeta code { color: #a8e2d7; font: var(--type-caption)/1.5 var(--font-mono); overflow-wrap: anywhere; }
.selectedSourceValues { min-width: 0; padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.selectedSourceValues > summary { min-height: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: #79d5c3; font-size: var(--type-label); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.selectedSourceValues > summary::-webkit-details-marker { display: none; }
.selectedSourceValues > summary small { color: var(--text-muted); font-size: var(--type-caption); font-weight: var(--weight-regular); }
.selectedSourceValues > .comparisonLongValue,
.selectedSourceValues > .valueView { margin-top: var(--space-2); }
.sourceMissingReason { margin: 0; color: #ffb0a2; font-size: var(--type-ui); line-height: 1.6; overflow-wrap: anywhere; }
.sourceMissingReason code { font-family: var(--font-mono); }
.unboundRuntimeRefs { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.unboundRuntimeRefs strong { color: var(--text-primary); font-size: var(--type-label); }
.unboundRuntimeRefs code { color: var(--text-muted); font: var(--type-caption)/1.5 var(--font-mono); overflow-wrap: anywhere; }

.comparisonLongValue { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); overflow: hidden; }
.comparisonLongValue > summary { min-height: 2.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-3); color: var(--text-secondary); cursor: pointer; list-style: none; }
.comparisonLongValue > summary::-webkit-details-marker,
.rawRecordDisclosure > summary::-webkit-details-marker { display: none; }
.comparisonLongValue > summary:hover,
.rawRecordDisclosure > summary:hover { background: rgba(255, 255, 255, .025); }
.comparisonDisclosureTitle { min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.comparisonDisclosureTitle svg { flex: none; color: var(--text-muted); transition: transform 180ms var(--ease-out); }
.comparisonLongValue[open] .comparisonDisclosureTitle svg { transform: rotate(90deg); }
.comparisonDisclosureTitle strong { color: var(--text-primary); font-size: var(--type-label); }
.comparisonLongValue > summary > small { color: var(--text-muted); font: var(--type-caption)/1.4 var(--font-mono); white-space: nowrap; }
.comparisonDisclosurePreview { grid-column: 1 / -1; color: var(--text-secondary); font-size: var(--type-ui); font-weight: var(--weight-regular); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.comparisonDisclosureBody { padding: var(--space-3); border-top: 1px solid var(--border-subtle); }
.comparisonDisclosureBody .valueView,
.selectedSourceValues .valueView { max-height: none; margin: 0; }
.rawRecordDisclosure { min-width: 0; border-top: 1px solid var(--border-subtle); }
.rawRecordDisclosure > summary { min-height: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--text-secondary); font-size: var(--type-label); cursor: pointer; list-style: none; }
.rawRecordDisclosure > summary small { color: var(--text-muted); font-size: var(--type-caption); }
.rawRecordDisclosure > div { padding-top: var(--space-2); }
.comparisonLongValue > summary:focus-visible,
.rawRecordDisclosure > summary:focus-visible,
.comparisonModuleHeader:focus-visible,
.bindingBadge:focus-visible,
.sourceBindingMarkers button:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

.comparisonState { min-height: 22rem; display: grid; place-content: center; justify-items: center; gap: var(--space-2); padding: var(--space-5); color: var(--warning); text-align: center; }
.comparisonState h3 { margin: var(--space-1) 0 0; color: var(--text-primary); font-size: var(--type-title); }
.comparisonState p { max-width: 45rem; margin: 0; color: var(--text-muted); font-size: var(--type-ui); line-height: 1.65; }
.comparisonSkeleton { min-height: 24rem; display: grid; grid-template-columns: 42fr 24fr 34fr; gap: 1px; background: var(--border); }
.comparisonSkeleton > * { min-height: 8rem; background: var(--surface); animation: dataFlowPulse 1.5s ease-in-out infinite alternate; }
.comparisonSkeleton > div { grid-column: 1 / -1; min-height: 3.5rem; }

/* One business item, its evidence and its exact source share one physical row. */
.comparisonItemRows { min-width: 0; }
.comparisonItemRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 24fr) minmax(0, 34fr);
  align-items: stretch;
  border-top: 1px solid var(--border-subtle);
  background: #181a1f;
}
.comparisonItemRow:first-child { border-top: 0; }
.comparisonItemRow.is-active { background: rgba(123, 184, 255, .035); }
.comparisonItemBusiness,
.comparisonItemEvidence,
.comparisonItemSource {
  min-width: 0;
  padding: var(--space-4);
}
.comparisonItemEvidence,
.comparisonItemSource { border-left: 1px solid var(--border); }
.comparisonItemBusiness { background: rgba(255, 109, 90, .018); }
.comparisonItemEvidence { display: grid; align-content: start; gap: var(--space-3); background: rgba(123, 184, 255, .018); }
.comparisonItemSource { display: grid; align-content: start; gap: var(--space-3); background: rgba(88, 208, 185, .018); }
.comparisonItemBusiness > h4 {
  max-width: 72ch;
  margin: 0 0 var(--space-3);
  color: var(--accent-hover);
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  text-wrap: pretty;
}
.comparisonItemBusiness .comparisonReadableText,
.comparisonItemBusiness .businessDefinitionList dd,
.comparisonItemBusiness .businessNarrative p,
.comparisonItemBusiness .businessRecordItem p { font-size: var(--type-body); line-height: 1.72; }

.comparisonEvidenceSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.comparisonEvidenceSummary:last-child { padding-bottom: 0; border-bottom: 0; }
.comparisonEvidenceSummary.is-active { color: var(--text-primary); }
.comparisonEvidenceCopy { min-width: 0; display: grid; gap: .3rem; }
.comparisonEvidenceCopy > strong { color: var(--text-primary); font-size: var(--type-label); line-height: 1.45; overflow-wrap: anywhere; }
.comparisonEvidenceCopy > span { color: #afd2ff; font-size: var(--type-ui); font-weight: var(--weight-semibold); line-height: 1.5; }
.comparisonEvidenceCopy > small { color: var(--text-muted); font-size: var(--type-caption); line-height: 1.5; }
.comparisonLocatorDetails { min-width: 0; margin-top: var(--space-1); }
.comparisonLocatorDetails > summary {
  width: fit-content;
  min-height: 2rem;
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--type-caption);
  cursor: pointer;
}
.comparisonLocatorDetails[open] > summary { color: #afd2ff; }
.comparisonLocatorDetails > code,
.comparisonLocatorDetails > small { display: block; margin-top: .35rem; color: var(--text-muted); font: var(--type-caption)/1.55 var(--font-mono); overflow-wrap: anywhere; }

.comparisonSourceExcerpt {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.comparisonSourceExcerpt:last-child { padding-bottom: 0; border-bottom: 0; }
.comparisonSourceExcerpt > header {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
}
.comparisonSourceExcerpt > header > svg { margin-top: .2rem; color: #79d5c3; }
.comparisonSourceExcerpt > header > div { min-width: 0; display: grid; gap: .2rem; }
.comparisonSourceExcerpt > header strong { color: var(--text-primary); font-size: var(--type-label); line-height: 1.45; overflow-wrap: anywhere; }
.comparisonSourceExcerpt > header small { color: #8ccfc2; font-size: var(--type-caption); }
.sourceExcerptMarker {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .55rem;
  border: 1px solid rgba(88, 208, 185, .3);
  border-radius: .45rem;
  background: rgba(88, 208, 185, .05);
  color: #93ded0;
  font: var(--type-label)/1 var(--font-mono);
}
.sourceEmptyResult {
  display: grid;
  gap: .25rem;
  padding: var(--space-3);
  border: 1px solid rgba(99, 200, 131, .3);
  border-radius: var(--radius-sm);
  background: rgba(99, 200, 131, .055);
}
.sourceEmptyResult strong { color: var(--success); font-size: var(--type-ui); }
.sourceEmptyResult span { color: var(--text-secondary); font-size: var(--type-caption); }
.comparisonTextExcerpt {
  max-width: 72ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--type-ui);
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comparisonTextExcerpt mark {
  padding: .08em .2em;
  border-radius: .2rem;
  background: rgba(88, 208, 185, .18);
  color: #d8fff7;
}
.sourceMemberList { min-width: 0; display: grid; gap: var(--space-3); }
.sourceMemberList > section { min-width: 0; display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.sourceMemberList > section:first-child { padding-top: 0; border-top: 0; }
.sourceMemberList > section > strong { color: var(--text-primary); font-size: var(--type-label); overflow-wrap: anywhere; }

@media (max-width: 1099px) {
  .inspectorWorkbench { inset: var(--space-2); width: auto; }
  .comparisonColumnHeaders { display: none; }
  .comparisonModuleGrid { grid-template-columns: 1fr; }
  .comparisonItemRow { grid-template-columns: 1fr; }
  .comparisonItemEvidence,
  .comparisonItemSource { border-top: 1px solid var(--border); border-left: 0; }
  .comparisonItemBusiness::before,
  .comparisonItemEvidence::before,
  .comparisonItemSource::before { display: block; margin-bottom: var(--space-3); font-size: var(--type-ui); font-weight: var(--weight-semibold); }
  .comparisonItemBusiness::before { color: var(--accent-hover); content: "业务详情中的内容"; }
  .comparisonItemEvidence::before { color: #9fcaff; content: "这一项的数据依据"; }
  .comparisonItemSource::before { color: #79d5c3; content: "对应的原始字段或原文"; }
  .comparisonCell + .comparisonCell { border-top: 1px solid var(--border); border-left: 0; }
  .comparisonCell::before { display: block; margin-bottom: var(--space-3); font-size: var(--type-ui); font-weight: var(--weight-semibold); }
  .businessModuleCell::before { color: var(--accent-hover); content: "业务详情"; }
  .evidenceCell::before { color: #9fcaff; content: "数据依据"; }
  .sourceRecordCell::before { color: #79d5c3; content: "原始记录与运行"; }
  .comparisonSkeleton { grid-template-columns: 1fr; }
  .comparisonSkeleton > div { grid-column: 1; }
}

@media (max-width: 1099px) {
  .bindingBadge,
  .bindingBadge.is-compact,
  .sourceBindingMarkers button { min-width: 2.75rem; width: auto; height: 2.75rem; min-height: 2.75rem; }
}

@media (max-width: 767px) {
  .inspectorWorkbench { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .comparisonInspectorHeader { align-items: flex-start; flex-wrap: wrap; }
  .comparisonInspectorTitle { order: 1; flex: 1 1 calc(100% - 7rem); }
  .comparisonInspectorActions { order: 2; }
  .comparisonInspectorActions .quietButton { width: 2.75rem; padding: 0; }
  .comparisonInspectorActions .quietButton:not(:last-child) { font-size: 0; }
  .comparisonInspectorActions .quietButton svg { margin: 0; }
  .inspectorHeaderActions .quietButton { width: 2.75rem; padding: 0; font-size: 0; }
  .inspectorHeaderActions .quietButton svg { margin: 0; }
  .comparisonToolbar { align-items: flex-start; }
  .comparisonToolbar > div:last-child { justify-content: flex-end; flex-wrap: wrap; }
  .comparisonTextAction { min-height: 2.75rem; }
  .comparisonModuleHeader { grid-template-columns: auto auto minmax(0, 1fr); }
  .comparisonModuleHeader small { grid-column: 3; }
  .comparisonCell { padding: var(--space-3); }
  .comparisonBusinessItem > header { flex-direction: column; }
  .businessDefinitionList > div { grid-template-columns: 1fr; gap: .25rem; }
  .bindingBadgeRow { justify-content: flex-start; }
  .evidenceList > li { grid-template-columns: 1fr; }
  .sourceMeta > div { grid-template-columns: 1fr; gap: .15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .comparisonDisclosureTitle svg,
  .sourceRecord,
  .evidenceList > li { transition: none !important; }
}