/* ===========================================================================
   Director Eval Harness — interface styles
   Light, calm, precise. System typography, hairline structure, one blue accent,
   soft depth, and unhurried motion.
   =========================================================================== */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --raised: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #515154;
  --muted: #86868b;
  --hairline: rgba(0, 0, 0, 0.10);
  --hairline-soft: rgba(0, 0, 0, 0.06);
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-tint: rgba(0, 113, 227, 0.10);
  --accent-ring: rgba(0, 113, 227, 0.16);
  --pass: #1d8a4e;
  --pass-bg: rgba(29, 138, 78, 0.12);
  --fail: #d70015;
  --fail-bg: rgba(215, 0, 21, 0.10);
  --review: #b25000;
  --review-bg: rgba(178, 80, 0, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10);
  --radius: 16px;
  --radius-sm: 10px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- release-readiness UX ---------------------------------------------- */
.header-inner { max-width: 1440px; gap: 22px; }
nav { align-items: center; }
nav a { padding-inline: 9px; }
nav a.nav-break {
  position: relative;
  margin-left: 8px;
}
nav a.nav-break::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  width: 1px;
  height: 18px;
  background: var(--hairline);
}
.build-indicator {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.build-indicator.warn { color: var(--review); }

.data-freshness {
  margin: -8px 0 14px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}
.data-status-banner,
.compare-compatibility {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--review) 28%, var(--hairline-soft));
  border-radius: var(--radius-sm);
  background: var(--review-bg);
  color: var(--review);
  font-size: 13px;
}
.data-status-banner > div,
.compare-compatibility > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.data-status-banner strong,
.compare-compatibility strong { color: inherit; }
.data-status-banner span,
.compare-compatibility span { color: var(--ink-2); }
.data-status-banner button { margin-left: auto; }
.compare-compatibility.pass {
  border-color: color-mix(in srgb, var(--pass) 24%, var(--hairline-soft));
  background: var(--pass-bg);
  color: var(--pass);
}
.health-definition,
.run-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 18px;
  margin: -4px 0 14px;
  color: var(--muted);
  font-size: 12.5px;
}
.health-definition span {
  display: inline-flex;
  gap: 5px;
}
.health-definition strong,
.run-scope strong { color: var(--ink-2); }
.runs-overview.compare-metrics.expanded {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.run-pill.minimized {
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
}
.pill-minimized {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  box-shadow: none;
  font-size: 12.5px;
}
.pill-minimized:hover { background: var(--surface-2); }
.pill-collapse {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.pill-collapse:hover { background: var(--surface-2); color: var(--ink); }
.run-transcript-section { margin-top: 22px; }
.run-transcript-section > h2 { margin-left: 2px; }
.run-technical-meta {
  flex-basis: 100%;
  margin-top: 3px;
}
.run-technical-meta > summary {
  width: max-content;
  color: var(--muted);
  font-size: 12px;
}
.run-technical-meta-body {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}

.scenario-actions-menu {
  position: relative;
}
.scenario-actions-menu > summary {
  min-width: 36px;
  padding: 5px 9px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 1px;
  list-style: none;
  text-align: center;
}
.scenario-actions-menu > summary::-webkit-details-marker { display: none; }
.scenario-actions-menu > summary:hover { background: var(--surface-2); color: var(--ink); }
.scenario-actions-menu > div {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.scenario-actions-menu > div button { width: 100%; text-align: left; }

.editor-title-row { align-items: flex-start; margin-bottom: 12px; }
.editor-section-nav {
  position: sticky;
  top: 64px;
  z-index: 35;
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: rgba(245, 245, 247, .92);
  backdrop-filter: blur(16px);
}
.editor-section-nav button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink-2);
  font-size: 12.5px;
}
.editor-section-nav button:hover { background: var(--surface); }
.editor-section { scroll-margin-top: 118px; }
.editor-action-bar {
  position: sticky;
  bottom: 12px;
  z-index: 34;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  margin-top: 14px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.editor-action-bar #msg { min-width: 0; font-size: 13px; }

.environment-create-resolution {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}
.environment-create-resolution > div,
.environment-create-resolution:not(.ready) {
  display: grid;
  gap: 2px;
}
.environment-create-resolution.ready {
  justify-content: space-between;
  border-color: color-mix(in srgb, var(--pass) 24%, var(--hairline-soft));
  background: var(--pass-bg);
}
.environment-create-resolution.error {
  border-color: color-mix(in srgb, var(--fail) 24%, var(--hairline-soft));
  background: var(--fail-bg);
  color: var(--fail);
}
.environment-create-resolution.pending { color: var(--review); }
.environment-create-resolution span { color: var(--ink-2); }
.environment-commit {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}
.environment-failure {
  display: grid;
  gap: 3px;
}
.environment-failure strong { color: var(--fail); }
.environment-failure span { color: var(--ink-2); }
.environment-failure em { color: var(--muted); font-size: 12px; font-style: normal; }

.workbench-shell.empty .workbench-chat { min-height: 0; max-height: none; }
.workbench-shell.empty .workbench-empty {
  padding: 12px 2px 4px;
  text-align: left;
}
.workbench-recent .run-title {
  max-width: 760px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prompt-lab-stage { padding: 0; overflow: clip; scroll-margin-top: 72px; }
.prompt-lab-stage > .prompt-lab-section-summary {
  padding: 16px 18px;
  margin: 0;
}
.prompt-lab-stage[open] > .prompt-lab-section-summary {
  border-bottom: 1px solid var(--hairline-soft);
}
.prompt-lab-stage-body { padding: 18px; }
.prompt-lab-stage-body > .row:first-child { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .build-indicator { display: none; }
  .header-inner { gap: 14px; padding-inline: 18px; }
  nav a { padding-inline: 7px; font-size: 13px; }
  .runs-overview.compare-metrics.expanded { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  nav a.nav-break { margin-left: 5px; }
  nav a.nav-break::before { left: -5px; }
  .data-status-banner,
  .compare-compatibility,
  .environment-create-resolution { align-items: flex-start; }
  .health-definition { display: grid; gap: 4px; }
  .runs-overview.compare-metrics.expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-section-nav { top: 104px; }
  .editor-action-bar { bottom: 8px; flex-wrap: wrap; }
  .editor-action-bar #msg { flex-basis: 100%; }
  .scenario-actions-menu > div { left: 0; right: auto; }
  .prompt-lab-stage-body { padding: 14px; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-tint); }

/* ---- header ------------------------------------------------------------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--hairline-soft);
}
.header-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  height: 56px; display: flex; align-items: center; gap: 30px;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand-mark { color: var(--accent); font-size: 14px; transform: translateY(-1px); }
.brand-dim { color: var(--muted); font-weight: 500; margin-left: 1px; }
nav { display: flex; gap: 4px; }
nav a {
  color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 450;
  padding: 6px 12px; border-radius: 980px; transition: background .18s, color .18s;
}
nav a:hover { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
nav a.active { color: var(--accent); background: var(--accent-tint); }
.header-spacer { flex: 1; }
.run-pill {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 42px;
  gap: 10px;
  padding: 7px 8px 7px 12px;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.run-pill .pill-link {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
}
.run-pill .activity-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.run-pill .activity-current {
  min-width: 0;
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 13px;
}
.run-pill .activity-time {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.run-pill .pill-stop {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--muted);
  box-shadow: none;
}
.run-pill .pill-stop:hover { color: var(--fail); border-color: var(--fail); }

/* ---- layout ------------------------------------------------------------- */
main { max-width: 1080px; margin: 0 auto; padding: 40px 28px 120px; }
main:has(.prompt-lab-launch) { max-width: 1440px; }
.loading { color: var(--muted); padding: 64px; text-align: center; font-size: 15px; }
h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.row { display: flex; align-items: center; gap: 14px; }
.spacer { flex: 1; }
.sub { color: var(--muted); font-size: 13.5px; }
.crumbs { margin-bottom: 14px; }
.crumbs a { color: var(--muted); text-decoration: none; transition: color .15s; }

/* overview / health / compare */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(180px, .7fr) minmax(220px, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.overview-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.overview-card.latest { min-height: 190px; }
.overview-verdict {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.overview-number {
  font-size: 34px;
  font-weight: 680;
  line-height: 1;
  margin: 4px 0 6px;
}
.overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.overview-actions button,
.section-title-row button,
.overview-run-row {
  font-size: 13px;
  padding: 7px 12px;
}
.health-strip {
  display: grid;
  gap: 8px;
}
.health-strip span,
.diagnosis-cost span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--ink-2);
  font-size: 13.5px;
}
.health-strip strong,
.diagnosis-cost strong {
  color: var(--ink);
  font-size: 18px;
}
.overview-columns,
.compare-run-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.soft-panel {
  box-shadow: var(--shadow-sm);
}
.flat-panel {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-title-row h2 { margin: 0; }
button.ghost {
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
button.ghost:hover {
  background: var(--surface-2);
  border-color: var(--hairline-soft);
  color: var(--ink);
}
.overview-run-list,
.suite-list {
  display: grid;
  gap: 8px;
}
.overview-run-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  text-align: left;
  border-radius: 9px;
  box-shadow: none;
  background: transparent;
}
.overview-run-row:hover { background: var(--surface-2); }
.overview-run-main,
.diagnosis-issue-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.overview-run-main .id,
.diagnosis-issue-main .id {
  overflow-wrap: anywhere;
}
.suite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.suite-row:last-child { border-bottom: none; }
.suite-row button { padding: 6px 13px; }
.trend-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.trend-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
}
.trend-dots .pass { background: var(--pass); }
.trend-dots .fail { background: var(--fail); }
.trend-dots .needs_review { background: var(--review); }
.trend-dots .invalid { background: var(--fail); }
.compare-selectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.compare-selectors label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.compare-select {
  width: 100%;
  min-height: 40px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 9px 34px 9px 12px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.compare-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.compare-metrics { margin-bottom: 16px; }
.compare-run-summary {
  display: grid;
  gap: 7px;
}
.comparison-recent { padding-top: 16px; padding-bottom: 16px; }
.comparison-recent h2,
.workbench-recent h2,
.workbench-save h2 { margin-top: 0; }
.comparison-list {
  display: grid;
  gap: 8px;
}
.comparison-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  cursor: pointer;
  background: var(--surface);
}
.comparison-list-row:hover { background: var(--surface-2); }
.comparison-side {
  display: grid;
  align-content: start;
  gap: 8px;
}
.health-table td,
.compare-table td {
  vertical-align: top;
}
.health-table .actions button { padding: 6px 13px; }

/* run detail diagnosis */
.run-diagnosis {
  border-bottom: 1px solid var(--hairline-soft);
  margin: -2px 0 18px;
  padding-bottom: 18px;
}
.diagnosis-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.diagnosis-title {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.2;
}
.diagnosis-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.diagnosis-actions button { padding: 7px 13px; font-size: 13px; }
.diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--hairline-soft);
}
.diagnosis-grid > div {
  background: var(--surface);
  min-height: 76px;
  padding: 12px 14px;
}
.diagnosis-grid label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.diagnosis-grid div div {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.diagnosis-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}
.diagnosis-issues {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.diagnosis-issues button {
  display: grid;
  grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  box-shadow: none;
  border-radius: 9px;
  padding: 8px 9px;
}
.diagnosis-issues button:hover { background: var(--surface-2); }

/* runs list */
.runs-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.runs-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  background: var(--hairline-soft);
  margin-bottom: 14px;
}
.runs-metric {
  min-height: 72px;
  background: var(--surface);
  padding: 13px 15px;
  display: grid;
  align-content: center;
  gap: 2px;
}
.runs-metric span { font-size: 24px; line-height: 1; font-weight: 650; letter-spacing: 0; }
.runs-metric label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.runs-metric.issue span { color: var(--review); }
.runs-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.segmented {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 980px;
  padding: 3px;
  gap: 2px;
}
.segmented .seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 13px;
  font-size: 13px;
  color: var(--ink-2);
}
.segmented .seg:hover { color: var(--ink); background: transparent; }
.segmented .seg.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented .seg span { color: var(--muted); font-size: 12px; }
.run-search {
  width: min(100%, 260px);
  min-height: 36px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 13px;
  outline: none;
}
.run-search:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.environment-page-head button { white-space: nowrap; }
.environment-create-panel {
  padding: 16px 18px;
}
.environment-create-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.environment-create-head h2 { margin-bottom: 2px; }
.environment-create-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(190px, 240px) minmax(160px, 190px) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}
.environment-create-grid .f {
  margin: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.environment-create-grid input,
.environment-create-grid select {
  width: 100%;
  min-height: 40px;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  outline: none;
}
.environment-create-grid input.mono { font-family: var(--mono); font-size: 13.5px; }
.environment-create-grid input:focus,
.environment-create-grid select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.environment-create-actions {
  display: flex;
  justify-content: flex-end;
}
.environment-media-readout {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
}
.environment-media-readout span { color: var(--muted); font-weight: 500; }
.environment-overview { margin-bottom: 14px; }
.environment-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.environment-warning {
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid rgba(215, 0, 21, .14);
  border-radius: var(--radius-sm);
  background: var(--fail-bg);
  color: var(--fail);
  font-size: 13.5px;
}
.environment-panel {
  padding: 0;
  overflow: hidden;
}
.environment-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, .46fr) auto;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline-soft);
}
.environment-row:last-child { border-bottom: none; }
.environment-row.needs-cleanup {
  box-shadow: inset 3px 0 0 var(--review);
}
.environment-row.outdated {
  box-shadow: inset 3px 0 0 var(--review);
}
.environment-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.environment-title-line,
.environment-meta-line,
.environment-endpoints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 9px;
  min-width: 0;
}
.environment-title-line strong {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.environment-meta-line,
.environment-endpoints {
  color: var(--muted);
  font-size: 12.5px;
}
.environment-meta-line code,
.environment-endpoints code {
  color: var(--ink-2);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.environment-details { margin-top: 1px; }
.environment-details > summary {
  width: max-content;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.environment-details-body {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}
.environment-meta-line .warn { color: var(--review); }
.environment-failure {
  color: var(--fail);
  background: var(--fail-bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.environment-times {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr);
  gap: 9px 14px;
  color: var(--ink-2);
}
.environment-times div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.environment-times label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.environment-times span {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.environment-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 150px;
}
.environment-actions button { padding: 7px 11px; font-size: 12.5px; }
.environment-logs {
  grid-column: 1 / -1;
  margin-top: -4px;
}
.environment-log-tail {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 10px 11px;
  border-radius: 8px;
  border: 1px solid var(--hairline-soft);
  background: #fbfbfd;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
}
.environment-log-error {
  color: var(--fail);
  background: var(--fail-bg);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
}
.environment-empty {
  padding: 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.run-section { margin-top: 24px; }
.run-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.run-section-head h2 { margin: 0; }
.run-section-count {
  color: var(--muted);
  font-size: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 1px 7px;
}
.run-empty {
  color: var(--muted);
  border-top: 1px solid var(--hairline-soft);
  padding: 14px 2px 6px;
  font-size: 13.5px;
}
.run-card {
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer; transition: box-shadow .14s, transform .06s;
}
.run-card:hover { box-shadow: var(--shadow); }
.run-card:active { transform: scale(0.997); }
.run-list-header { align-items: flex-start; margin-bottom: 16px; }
.run-head .id { font-size: 13px; }
.run-main { min-width: 0; }
.run-title {
  font-weight: 650;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 3px;
}
.run-subline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 12.5px;
}
.run-raw-id {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  vertical-align: bottom;
}
.run-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  max-width: min(100%, 560px);
}
.run-card-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12.5px;
}
.run-target-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.run-target-line span {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
}
.run-current {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
}
.run-note {
  margin-top: 9px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.run-counts {
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.run-issues {
  margin-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 10px;
  display: grid;
  gap: 7px;
}
.run-issue {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 12px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 2px 0;
}
.run-issue .id { color: var(--ink); }
.run-issue.more { display: block; color: var(--muted); }
.running-badge { color: var(--accent); }
.refresh-sm { padding: 4px 13px; font-size: 12.5px; color: var(--ink-2); border-color: var(--hairline); }
.refresh-sm:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.stop-sm { padding: 4px 13px; font-size: 12.5px; color: var(--fail); border-color: var(--hairline); }
.stop-sm:hover { border-color: var(--fail); background: var(--fail-bg); }
.live-controls { margin-bottom: 12px; }
.pause-sm { padding: 4px 13px; font-size: 12.5px; color: var(--ink-2); border-color: var(--hairline); }
.pause-sm:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.pause-sm.on { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.live-pause-status { color: var(--muted); font-size: 12.5px; }
.run-detail-top { align-items: flex-start; margin-bottom: 14px; }
.run-title-wrap { min-width: 0; }
.run-detail-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding-top: 28px; }
.run-add-scenario-panel {
  margin: 10px 0 14px;
  padding: 12px 14px;
}
.run-add-scenario-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}
.run-add-scenario-grid .filter { margin: 0; }
.run-add-scenario-grid input,
.run-add-scenario-grid select {
  width: 100%;
  min-height: 38px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.run-add-scenario-status {
  min-height: 18px;
  margin-top: 8px;
  font-size: 13px;
}
.ok-msg.inline { margin: 0; }
.run-refresh-status { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.run-refresh-status.busy { color: var(--accent); }
.run-meta { margin-bottom: 18px; }
.fails { margin-top: 12px; border-top: 1px solid var(--hairline-soft); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.fail-line { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 10px 14px; align-items: start; padding: 8px 9px; border-radius: 9px; cursor: pointer; }
.fail-line:hover { background: var(--surface-2); }
.fail-line .ev { color: var(--ink-2); font-size: 13px; }
.fail-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fail-copy { min-width: 0; }
.fail-meta { color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.fail-detail { color: var(--ink-2); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }

/* structured failure checklist — one labeled row per failed check */
.check-fails { display: grid; gap: 6px; }
.check-fail {
  display: grid; grid-template-columns: 14px minmax(86px, 124px) 1fr; gap: 6px 11px;
  align-items: baseline; font-size: 13px; line-height: 1.4;
}
.check-fail-mark { color: var(--fail); font-weight: 700; text-align: center; }
.check-fail.trace .check-fail-mark { color: var(--review); }
.check-fail-label { color: var(--ink-2); font-weight: 600; }
.check-fail-ev { color: var(--ink-2); overflow-wrap: anywhere; }
.run-failure-summary { margin-bottom: 18px; }
.crumbs a:hover { color: var(--accent); }
.id { font-family: var(--mono); font-size: 13px; }
.mono { font-family: var(--mono); }

/* run-detail environment summary — labeled chips instead of a dot-joined run-on */
.run-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.run-meta .target-chip { font-family: var(--mono); }
.run-meta .chip-k { color: var(--muted); margin-right: 5px; font-family: var(--sans); }

/* ---- cards -------------------------------------------------------------- */
.panel {
  background: var(--surface); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.panel.form { padding: 24px 26px; }
.run-target { padding: 18px 20px; }
/* collapsible target panel — reads as a setting, not list content. The active
   profile stays visible in the summary even when collapsed. */
.target-panel { padding: 16px 18px; }
.target-panel > summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; cursor: pointer; padding: 13px 20px;
  font-size: 14px; color: var(--ink);
}
.target-panel > summary::-webkit-details-marker { display: none; }
.target-panel > summary::before {
  content: "›"; color: var(--muted); transform: rotate(0deg);
  transition: transform .14s ease; margin-right: 2px;
}
.target-panel[open] > summary::before { transform: rotate(90deg); }
.target-panel > summary:hover { color: var(--accent); }
.target-panel .tp-k { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.target-panel .tp-label { font-weight: 600; }
.target-panel .tp-hint { margin-left: auto; }
.target-panel-body { padding: 4px 20px 18px; border-top: 1px solid var(--hairline-soft); }
.target-quick-grid {
  display: grid;
  grid-template-columns: minmax(290px, .9fr) minmax(250px, 1fr) minmax(230px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.target-panel .f { margin: 0; min-width: 0; }
.target-mode { min-height: 40px; align-items: center; }
.target-mode .seg { white-space: nowrap; }
.target-quick-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 170px;
}
.target-quick-actions button { white-space: nowrap; }
.target-state-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  min-height: 22px;
}
.target-state-row .target-summary { margin: 0; }
.target-advanced-block {
  margin-top: 12px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 10px;
}
.target-advanced-block > summary { color: var(--muted); }
.target-advanced-body { padding-top: 10px; }
.compact-grid { margin-bottom: 10px; }
.target-select {
  width: min(100%, 420px);
  min-height: 40px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 9px 36px 9px 12px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.target-select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.target-summary { margin-top: 4px; }
.target-summary-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.target-ref-field { margin-bottom: 12px; }
.comparison-launch-panel {
  padding: 14px 18px;
}
.comparison-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
}
.comparison-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.comparison-launch-grid {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(260px, 1fr) minmax(220px, .8fr);
  gap: 12px;
  align-items: end;
  margin-top: 12px;
}
.comparison-launch-grid .f { margin: 0; }
.comparison-launch-grid select,
.comparison-launch-grid input {
  width: 100%;
  min-height: 40px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.comparison-baseline-copy {
  align-self: end;
  color: var(--ink-2);
  padding: 9px 0;
}
.comparison-launch-note { margin-top: 8px; }
.runtime-settings-grid { margin-top: 4px; }
.runtime-settings-actions {
  align-items: center;
  flex-wrap: wrap;
  margin: -2px 0 12px;
}
.runtime-settings-actions button { padding: 7px 13px; font-size: 13px; }
.runtime-settings-actions button.ghost { box-shadow: none; background: transparent; color: var(--muted); }
.runtime-settings-actions button.ghost:hover { color: var(--ink); background: var(--surface-2); }
.runtime-settings-actions .error { color: var(--fail); }
.target-ref-grid { align-items: end; }
.target-stack-actions { margin-top: 8px; }
.target-stack-box {
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
}
.target-stack-empty { padding: 4px 0; }
.target-stack-list { display: grid; gap: 6px; }
.target-stack-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto auto auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
}
.target-stack-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.target-stack-row.outdated {
  margin: 0 -4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--review-bg);
}
.target-stack-row .stack-ref {
  font-family: var(--mono);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.target-stack-row.has-error .stack-ref {
  display: grid;
  gap: 2px;
  white-space: normal;
}
.target-stack-error {
  color: var(--fail);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.target-stack-row button { padding: 5px 10px; font-size: 12px; }
.target-ready-stacks {
  margin-top: 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px;
  display: grid;
  gap: 8px;
}
.target-ready-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.target-ready-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
}
.target-ready-row.selected { border-color: var(--accent-soft); background: var(--accent-tint); }
.target-ready-main {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.target-ready-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.target-ready-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.target-ready-actions button { padding: 5px 10px; font-size: 12px; }
.target-panel input {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 10px 13px; transition: border-color .15s, box-shadow .15s; outline: none;
}
.target-panel input.mono { font-family: var(--mono); font-size: 13.5px; }
.target-panel input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.target-chip {
  display: inline-flex; align-items: center; border: 1px solid var(--hairline-soft);
  border-radius: 999px; padding: 2px 7px; color: var(--ink-2); background: var(--surface-2);
  font-size: 12px; line-height: 1.2;
}
.target-notes { margin-top: 8px; display: grid; gap: 3px; }
.target-advanced { margin-top: 12px; }
.git-resolve-preview { margin-top: 10px; }
.git-resolve-card {
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  display: grid;
  gap: 5px;
}
.git-resolve-card.muted { color: var(--muted); }
.git-resolve-card.error {
  background: var(--fail-bg);
  border-color: rgba(229, 0, 35, .16);
}
.git-resolve-card.warn {
  background: var(--review-bg);
  border-color: rgba(178, 80, 0, .14);
}
.git-resolve-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.git-resolve-main strong { font-size: 13.5px; }
.git-resolve-main code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 2px 7px;
}
.git-resolve-sub { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.git-resolve-sub.warn,
.git-resolve-meta .warn { color: var(--review); }
.git-resolve-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 12px;
}
.target-stack-progress {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  display: grid;
  gap: 7px;
}
.target-stack-progress.error {
  background: var(--fail-bg);
  border-color: rgba(229, 0, 35, .16);
}
.target-stack-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.target-stack-log-tail {
  margin: 2px 0 0;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 9px 10px;
  border-radius: 7px;
  border: 1px solid var(--hairline-soft);
  background: #fbfbfd;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
}
.spinner-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: .3; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}
.preflight-box { margin-top: 12px; display: grid; gap: 6px; }
.preflight-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.preflight-line {
  display: grid; grid-template-columns: auto minmax(150px, 220px) 1fr; align-items: baseline; gap: 10px;
  padding: 7px 9px; border-radius: 9px; background: var(--surface-2);
}
.preflight-line.error { background: var(--fail-bg); }
.preflight-line.warn { background: var(--review-bg); }
.pf-name { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.preflight-guidance {
  display: grid;
  gap: 4px;
  padding: 9px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 8px;
}
.preflight-guidance .sub { min-width: 0; }
.disabled-block {
  opacity: .52;
  filter: grayscale(.18);
}
.disabled-block input, .disabled-block select, .disabled-block textarea {
  cursor: not-allowed;
}

/* ---- buttons ------------------------------------------------------------ */
button, .btn {
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--ink); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 980px; padding: 9px 17px; cursor: pointer;
  transition: background .16s, border-color .16s, transform .08s, box-shadow .16s;
  box-shadow: var(--shadow-sm);
}
button:hover, .btn:hover { background: var(--surface-2); border-color: rgba(0, 0, 0, 0.18); }
button:active, .btn:active { transform: scale(0.97); }
button.primary { background: var(--accent); color: #fff; border-color: transparent; }
button.primary:hover { background: var(--accent-hover); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.primary:disabled {
  opacity: 1;
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--hairline);
  box-shadow: none;
}
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---- tables ------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--hairline-soft); }
th { color: var(--muted); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .14s; }
tbody tr:hover td { background: var(--surface-2); }
td.actions { text-align: right; white-space: nowrap; }
td.actions button { padding: 6px 13px; margin-left: 6px; }
/* keep the destructive delete clearly separated from the primary Run action */
.act-divider { display: inline-block; width: 1px; height: 18px; margin: 0 6px 0 14px; background: var(--hairline); vertical-align: middle; }
td.actions button.danger.ghost { box-shadow: none; background: transparent; border-color: transparent; color: var(--muted); padding: 6px 10px; }
td.actions button.danger.ghost:hover { color: var(--fail); background: var(--fail-bg); border-color: var(--hairline); }
th.check-cell, td.check-cell { width: 36px; text-align: center; padding-right: 0; }
td.check-cell input, th.check-cell input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
table.clickable tbody tr { cursor: pointer; }
.table-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 760px; }
.run-results-table td { vertical-align: top; }
button.danger { color: var(--fail); border-color: var(--hairline); padding: 6px 11px; }
button.danger:hover { background: var(--fail-bg); border-color: var(--fail); }
.run-when { font-weight: 600; font-size: 14px; }
.run-rid { font-family: var(--mono); font-size: 11.5px; }
.scenario-title {
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
}
.scenario-id-sub {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.measure { display: grid; gap: 4px; max-width: 560px; }
.measure.compact { margin-top: 6px; max-width: 480px; }
.measure-desc { color: var(--ink-2); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.measure-expect { color: var(--muted); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.measure-expect span { color: var(--accent); font-weight: 600; margin-right: 6px; }
/* scenario list: id on top, one-line muted description folded beneath it
   (single row per scenario instead of a second full-width measure row) */
td.scenario-id-cell { max-width: 420px; }
td.scenario-id-cell .id { margin-bottom: 2px; }
.scenario-row-desc {
  color: var(--muted); font-size: 12.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-clamp: 2;
}
.scenario-page-head {
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.scenario-page-head button { white-space: nowrap; }
.scenario-toolbar {
  align-items: flex-end;
  gap: 10px 12px;
}
.scenario-search-filter { flex: 1 1 240px; }
.scenario-search-input {
  width: 100%;
  min-width: 220px;
  min-height: 38px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  outline: none;
}
.scenario-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.bulk-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.bulk-select input,
.scenario-select input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.scenario-catalog { padding: 0; overflow: hidden; }
.scenario-list { display: grid; }
.scenario-list-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  cursor: pointer;
  transition: background .14s;
}
.scenario-list-row:last-child { border-bottom: none; }
.scenario-list-row:hover { background: var(--surface-2); }
.scenario-select {
  display: flex;
  align-items: center;
  justify-content: center;
}
.scenario-list-main { min-width: 0; }
.scenario-row-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.scenario-title-wrap { min-width: 0; }
.scenario-row-verdict {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 120px;
}
.scenario-meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.scenario-chip {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 2px 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scenario-chip.suite {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: transparent;
}
.scenario-time {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.scenario-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 184px;
}
.scenario-row-actions button {
  padding: 7px 13px;
  white-space: nowrap;
}
.scenario-row-actions button.danger.ghost {
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 7px 10px;
}
.scenario-row-actions button.danger.ghost:hover {
  color: var(--fail);
  background: var(--fail-bg);
  border-color: var(--hairline);
}
.scenario-empty { padding: 18px; }
.scenario-brief { padding: 14px 18px; margin-top: 14px; margin-bottom: 14px; }
.scenario-brief .measure { max-width: none; }
.scenario-context { padding: 18px 22px; }
.context-list { display: grid; gap: 12px; }
.context-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  align-items: start;
}
.context-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.context-value {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.compact-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
}
.filter {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.filter select {
  min-width: 160px; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background-color: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 8px 32px 8px 10px; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.filter select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }

/* scenario list verdict column — verdict + media-quality badge on one
   line; keeps every row the same height regardless of media-quality results */
.verdict-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---- badges ------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px;
  border-radius: 980px; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
}
.badge.sm { font-size: 11.5px; padding: 2px 9px; }
.badge.pass { background: var(--pass-bg); color: var(--pass); }
.badge.fail { background: var(--fail-bg); color: var(--fail); }
.badge.warn { background: var(--review-bg); color: var(--review); }
.badge.muted { background: rgba(0, 0, 0, 0.05); color: var(--muted); }
.badge.needs_review { background: var(--review-bg); color: var(--review); }
.badge.none { background: rgba(0, 0, 0, 0.05); color: var(--muted); }
.badge.media { background: var(--accent-tint); color: var(--accent); }
.badge.media.accept { background: var(--pass-bg); color: var(--pass); }
.badge.media.reject { background: var(--fail-bg); color: var(--fail); }
.badge.media.review { background: var(--review-bg); color: var(--review); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---- tabs (editor) ------------------------------------------------------ */
.tabs { display: inline-flex; background: rgba(0, 0, 0, 0.05); border-radius: 980px; padding: 3px; gap: 2px; }
.tab { background: transparent; border: none; box-shadow: none; padding: 6px 18px; font-size: 13.5px; color: var(--ink-2); border-radius: 980px; }
.tab:hover { background: transparent; color: var(--ink); }
.tab.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---- forms -------------------------------------------------------------- */
.form .f { margin-bottom: 18px; }
.form .f:last-child { margin-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; }
.tip {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px; transform: translateY(-1px);
  border-radius: 50%; border: 1px solid var(--hairline); color: var(--muted);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: help; background: var(--surface-2);
}
.tip:hover, .tip:focus { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); outline: none; }
/* Tooltips render through a single fixed `.hover-tip` element positioned by JS
   (handles viewport edges); the CSS ::after/::before approach was retired. */
.hover-tip {
  position: fixed;
  z-index: 1000;
  display: none;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(29, 29, 31, 0.96);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
}
.hint { margin-top: 5px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.form input, .form textarea, .form select, .editor textarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 10px 13px; transition: border-color .15s, box-shadow .15s; outline: none;
}
.form input.mono { font-family: var(--mono); font-size: 13.5px; }
.form textarea { resize: vertical; line-height: 1.5; }
.form input:focus, .form textarea:focus, .form select:focus, .editor textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring);
}
.form input:disabled { background: var(--surface-2); color: var(--muted); }
.form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868b' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }

/* canvas node editor */
.canvas-setup-summary {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.canvas-setup-summary strong { color: var(--ink); }
.canvas-setup-summary.empty { border-style: dashed; }
.canvas-setup-summary .mono {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
}
.canvas-node {
  border-top: 1px solid var(--hairline-soft);
  padding: 14px 0;
}
.canvas-node:first-child { border-top: 0; padding-top: 0; }
.canvas-node-main {
  display: grid;
  grid-template-columns: 86px minmax(120px, 170px) minmax(110px, 140px) minmax(220px, 1fr) auto 34px;
  gap: 10px;
  align-items: end;
}
.canvas-node-preview {
  position: relative;
  width: 86px;
  height: 64px;
  overflow: hidden;
  align-self: end;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
}
.canvas-node-preview img,
.canvas-node-preview video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.canvas-node-preview.text,
.canvas-node-preview.asset {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
}
.canvas-node-preview.text > div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.25;
}
.canvas-node-preview.asset > div {
  color: var(--ink);
  font-weight: 650;
  text-transform: capitalize;
}
.canvas-node-preview span {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  overflow: hidden;
  padding: 2px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.canvas-node-main label,
.canvas-node-options label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.canvas-node-main label span,
.canvas-node-options label span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.canvas-node-source { min-width: 0; }
.canvas-node-attach {
  height: 40px;
  align-self: end;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.canvas-node .x {
  width: 34px;
  height: 40px;
  padding: 0;
  align-self: end;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  box-shadow: none;
  background: var(--surface-2);
}
.canvas-node .x:hover { color: var(--fail); border-color: var(--fail); background: var(--fail-bg); }
.canvas-source { min-height: 40px; }
.canvas-node-details {
  margin-top: 10px;
}
.canvas-node-details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.canvas-node-details > summary::-webkit-details-marker { display: none; }
.canvas-node-details > summary::before {
  content: "›";
  display: inline-block;
  transition: transform .14s ease;
}
.canvas-node-details[open] > summary::before { transform: rotate(90deg); }
.canvas-node-options {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 180px) minmax(120px, 150px) repeat(4, minmax(72px, 92px));
  gap: 10px;
  align-items: end;
  padding-top: 10px;
}
.canvas-node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* list editor */
.ref-head {
  display: grid;
  grid-template-columns: 150px minmax(180px, 1fr) 150px 76px 76px auto;
  gap: 8px;
  align-items: center;
  margin: 0 42px 7px 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ref-head span { display: inline-flex; align-items: center; min-width: 0; }
.li { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.li input, .li textarea { flex: 1; }
.li select { flex: 0 0 150px; }
.li input[type="number"] { flex: 0 0 76px; }
.li .x {
  flex: 0 0 auto; width: 34px; height: 38px; padding: 0; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; box-shadow: none; background: var(--surface-2);
}
.li .x:hover { color: var(--fail); border-color: var(--fail); background: var(--fail-bg); }
.add { margin-top: 2px; padding: 7px 14px; font-size: 13px; color: var(--accent); background: transparent; border: 1px dashed var(--hairline); box-shadow: none; }
.add:hover { background: var(--accent-tint); border-color: var(--accent); border-style: solid; }

.checks-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 4px 0 16px; }
.chk { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.chk .tip { margin-left: 0; }
.chk input { width: 16px; height: 16px; accent-color: var(--accent); }
.subform { border-top: 1px solid var(--hairline-soft); margin-top: 16px; padding-top: 16px; }
.subhead { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
/* Collapsed advanced sections read as flat hairline rows; they only gain
   elevation and the full card treatment once opened. */
.adv { padding: 0; overflow: visible; box-shadow: none; transition: box-shadow .16s, border-color .16s, background .16s; }
.adv:not([open]):hover { border-color: var(--hairline); background: var(--surface-2); }
.adv[open] { box-shadow: var(--shadow); }
.adv > summary {
  display: flex; align-items: center; gap: 6px; list-style: none;
  padding: 15px 22px; cursor: pointer; color: var(--ink); font-weight: 600;
}
.adv > summary::-webkit-details-marker, .adv-inline > summary::-webkit-details-marker { display: none; }
.adv > summary::before, .adv-inline > summary::before {
  content: "›"; display: inline-block; color: var(--muted); transform: rotate(0deg);
  transition: transform .14s ease;
}
.adv[open] > summary::before, .adv-inline[open] > summary::before { transform: rotate(90deg); }
.adv > summary:hover, .adv-inline > summary:hover { color: var(--accent); }
.adv .adv-body { padding: 0 24px 24px; }
.adv-inline {
  border-top: 1px solid var(--hairline-soft); margin-top: 16px; padding-top: 12px;
}
.adv-inline > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--ink-2); font-weight: 600; font-size: 13.5px; list-style: none;
}
.adv-inline .adv-body { padding-top: 14px; }

.errors { background: var(--fail-bg); border: 1px solid rgba(215, 0, 21, 0.25); border-radius: var(--radius-sm); padding: 12px 16px; margin: 14px 0; }
.errors strong { color: var(--fail); }
.errors ul { margin: 6px 0 0; padding-left: 18px; }
.errors li { color: var(--fail); font-size: 13.5px; }
.ok-msg { color: var(--pass); font-weight: 500; margin: 14px 0; }
.editor textarea { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; min-height: 480px; }

@media (max-width: 920px) {
  .canvas-node-main {
    grid-template-columns: 86px minmax(120px, 1fr) minmax(110px, 150px) auto 34px;
  }
  .canvas-node-source { grid-column: 1 / -1; }
  .canvas-node-options {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}
@media (max-width: 620px) {
  .canvas-node-main,
  .canvas-node-options {
    grid-template-columns: 1fr;
  }
  .canvas-node-preview {
    width: 100%;
    height: 110px;
  }
  .canvas-node-attach,
  .canvas-node .x {
    justify-self: start;
  }
}

/* ---- chat (live + evidence transcript) --------------------------------- */
.live-scenario-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.live-scenario-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.live-brief-desc { margin: 4px 0 8px; line-height: 1.4; }
/* expectations live behind a light disclosure in the live card, not a gray wall */
.live-expect { border-top: none; margin-top: 0; padding-top: 0; margin-bottom: 10px; }
.live-expect > summary { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.live-expect > summary:hover { color: var(--accent); }
.live-expect .measure-expect { margin-top: 6px; }
.bubble.work { display: inline-flex; align-items: center; gap: 7px; }
/* inline scoring & judgement on the run screen — full detail without click-through */
.live-scoring { margin-top: 14px; }
.live-scoring > summary { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.live-scoring-loading { margin-top: 14px; }
.inline-scoring { display: grid; gap: 18px; }
.score-section .subhead { margin-bottom: 8px; }
.score-subhead { margin-top: 14px; }
.section-help {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  margin: 2px 0 10px;
}
.inline-scoring .bubble { max-width: 100%; background: var(--surface-2); border: 1px solid var(--hairline-soft); }
.inline-scoring .check:first-of-type { padding-top: 0; }
.assessment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  overflow: hidden;
}
.assessment-summary.mixed {
  border-color: rgba(184, 100, 0, 0.24);
}
.assessment-card {
  background: var(--surface);
  padding: 16px 18px;
  min-width: 0;
}
.assessment-summary.mixed .assessment-card {
  background: #fffaf3;
}
.assessment-label {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.assessment-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin-bottom: 8px;
}
.assessment-copy {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}
.judge-criteria {
  display: grid;
  border-top: 1px solid var(--hairline-soft);
  margin-top: 6px;
}
.judge-criteria-head,
.judge-criterion-row {
  display: grid;
  grid-template-columns: 28px minmax(260px, 0.9fr) minmax(320px, 1.1fr);
  gap: 14px;
  align-items: start;
}
.judge-criteria-head {
  padding: 0 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.judge-criterion-row {
  padding: 14px 0;
  border-top: 1px solid var(--hairline-soft);
}
.judge-mark {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.judge-mark.pass { color: var(--pass); }
.judge-mark.fail { color: var(--fail); }
.judge-criterion-text {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
.judge-evidence {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}
/* evidence page — surface the verdict's reason right under the title */
.evidence-reason { font-size: 15px; color: var(--ink-2); line-height: 1.45; margin: 4px 0 16px; max-width: 760px; }
.chat .goal { margin: 2px 0 16px; }
.chat .reason { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline-soft); }
.turn { margin: 14px 0; display: flex; flex-direction: column; }
.turn .who { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 5px; }
.bubble {
  max-width: 78%; padding: 11px 15px; border-radius: 20px; white-space: pre-wrap;
  word-break: break-word; font-size: 14.5px; line-height: 1.5;
}
/* message-style transcript shared by live runs and historical evidence */
.chat .turn.user,
.history-chat .turn.user { align-items: flex-end; }
.chat .turn.user .who,
.history-chat .turn.user .who { margin-right: 4px; }
.chat .turn.user .bubble,
.history-chat .turn.user .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.chat .turn.assistant,
.history-chat .turn.assistant { align-items: flex-start; }
.chat .turn.assistant .bubble,
.history-chat .turn.assistant .bubble { background: #e9e9eb; color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.streaming { color: var(--muted); }
.bubble.streaming::after { content: ""; }
/* Per-message timestamp + multi-message separation */
.msg-time { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: 0.03em; margin: 0 6px 3px; }
.chat .turn.user .msg-time,
.history-chat .turn.user .msg-time { text-align: right; }
.assistant-msg { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
/* Consecutive Director sends read as separate messages: gap + tightened adjoining corner. */
.assistant-msg + .assistant-msg { margin-top: 9px; }
.chat .turn.assistant .assistant-msg.multi + .assistant-msg.multi .bubble,
.history-chat .turn.assistant .assistant-msg.multi + .assistant-msg.multi .bubble { border-top-left-radius: 7px; }
.assistant-msg.multi .msg-time::before { content: "•"; margin-right: 5px; color: var(--accent); }
/* rendered-markdown bubbles (transcript user + director text) */
.bubble.md { white-space: normal; }
.bubble.md > :first-child { margin-top: 0; }
.bubble.md > :last-child { margin-bottom: 0; }
.bubble.md p { margin: 0 0 8px; }
.bubble.md h1, .bubble.md h2, .bubble.md h3,
.bubble.md h4, .bubble.md h5, .bubble.md h6 {
  margin: 12px 0 5px; font-weight: 650; line-height: 1.3;
  text-transform: none; letter-spacing: normal; color: inherit;
}
.bubble.md h1 { font-size: 17px; }
.bubble.md h2 { font-size: 15.5px; }
.bubble.md h3, .bubble.md h4, .bubble.md h5, .bubble.md h6 { font-size: 14.5px; }
.bubble.md ul, .bubble.md ol { margin: 4px 0 8px; padding-left: 20px; }
.bubble.md li { margin: 2px 0; }
.bubble.md code {
  font-family: var(--mono); font-size: 0.86em;
  background: rgba(0, 0, 0, 0.06); padding: 1px 4px; border-radius: 4px;
}
.bubble.md pre {
  background: rgba(0, 0, 0, 0.06); padding: 8px 10px; border-radius: 8px;
  overflow-x: auto; margin: 6px 0;
}
.bubble.md pre code { background: none; padding: 0; }
.bubble.md blockquote {
  margin: 6px 0; padding: 2px 0 2px 10px;
  border-left: 3px solid var(--hairline-soft); color: var(--ink-2);
}
.bubble.md hr { border: none; border-top: 1px solid var(--hairline-soft); margin: 8px 0; }
.bubble.md a { color: inherit; text-decoration: underline; }
.bubble.think { background: var(--surface-2); color: var(--ink-2); font-family: var(--mono); font-size: 12.5px; max-width: 100%; }
.thinking { margin-bottom: 6px; }
.thinking summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }

/* evidence transcript (labeled, left-aligned) */
.transcript .turn { margin: 12px 0; }
.transcript .bubble { max-width: 100%; border: 1px solid var(--hairline-soft); }
.transcript .turn.user .bubble { background: var(--surface-2); }
.transcript .turn.assistant .bubble { background: #eef4fd; }
.workbench-layout {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.workbench-layout.new { grid-template-columns: minmax(0, 1fr); }
.workbench-sidebar,
.workbench-main {
  display: grid;
  gap: 14px;
}
.workbench-side-panel {
  padding: 16px 18px;
  margin-bottom: 0;
}
.workbench-side-panel h2,
.workbench-setup-panel h2 { margin-top: 0; }
.workbench-setup-body {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.workbench-info-row {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline-soft);
}
.workbench-info-row:first-of-type { border-top: none; }
.workbench-info-row span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.workbench-info-row strong {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 550;
  overflow-wrap: anywhere;
}
.workbench-artifact-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  color: var(--ink-2);
  font-size: 12.5px;
}
.workbench-artifact-counts strong { color: var(--ink); }
.workbench-artifact-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.workbench-artifact-list.task-list {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 8px;
}
.workbench-artifact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 8px 0;
  border-top: 1px solid var(--hairline-soft);
  font-size: 12.5px;
}
.workbench-artifact-row:first-child { border-top: none; }
.workbench-artifact-row > div:first-child {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}
.workbench-artifact-row strong { color: var(--ink); }
.workbench-artifact-row span,
.workbench-artifact-row a {
  color: var(--muted);
  text-decoration: none;
}
.workbench-artifact-row a:hover { color: var(--accent); }
.workbench-setup-panel {
  padding: 16px 18px;
  margin-bottom: 0;
}
.workbench-setup-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.workbench-setup-options button {
  padding: 7px 12px;
  font-size: 12.5px;
}
.workbench-shell {
  display: grid;
  gap: 14px;
}
.workbench-chat {
  min-height: 320px;
  max-height: min(62vh, 720px);
  overflow: auto;
  padding: 8px 4px;
}
.workbench-empty {
  padding: 90px 0;
  text-align: center;
}
.workbench-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  border-top: 1px solid var(--hairline-soft);
}
.workbench-compose textarea,
.workbench-setup-panel textarea,
.workbench-save textarea,
.workbench-save input {
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}
.workbench-save input.mono { font-family: var(--mono); font-size: 13.5px; }
.workbench-compose textarea:focus,
.workbench-setup-panel textarea:focus,
.workbench-save textarea:focus,
.workbench-save input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.workbench-compose button {
  min-height: 44px;
  padding-left: 22px;
  padding-right: 22px;
}
.workbench-save .f { margin: 0 0 12px; }
.termtag.error {
  color: var(--fail);
  background: var(--fail-bg);
}
.history-chat .turn { margin: 16px 0; }
.history-chat .bubble {
  max-width: min(760px, 88%);
  border: none;
  box-shadow: var(--shadow-sm);
}
.history-chat .turn.user .bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.history-chat .turn.assistant .bubble {
  background: #e9e9eb;
  color: var(--ink);
  border-bottom-left-radius: 6px;
}
.chat .attachment-strip,
.history-chat .attachment-strip {
  max-width: min(760px, 88%);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chat .attachment-chip,
.history-chat .attachment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.history-chat .tool-ui {
  background: #f7f7f8;
  max-width: min(760px, 88%);
}
.history-chat .visible-tool-output {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.history-chat .chips,
.history-chat .genbar,
.history-chat .assets,
.history-chat .termtag {
  max-width: min(760px, 88%);
}
.history-chat .asset {
  width: min(360px, 100%);
  background: #f7f7f8;
}
.history-chat .asset img,
.history-chat .asset video {
  max-height: 420px;
}
.chat-end {
  max-width: min(760px, 88%);
  margin: 22px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-2);
}
.chat-end-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.chat-end-reason {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
}
.chat-end-meta {
  display: grid;
  grid-template-columns: 142px 1fr;
  gap: 10px;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.35;
}
.chat-end-meta span {
  color: var(--muted);
  font-weight: 600;
}

.tool-ui {
  max-width: min(760px, 100%);
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.chat .turn.assistant .tool-ui { background: #f7f7f8; }
.tool-ui-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 8px;
}
.tool-ui-list { display: grid; gap: 8px; }
.tool-ui-item {
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
}
.tool-ui-label {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
}
.tool-ui-prompt {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}
.tool-ui-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tool-ui-option {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 980px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
}

/* tool chips */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px;
  padding: 4px 10px; border-radius: 980px; border: 1px solid var(--hairline-soft); background: var(--surface);
}
.chip.started { color: var(--ink-2); }
.chip.started::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
.chip.ok { color: var(--pass); background: var(--pass-bg); border-color: transparent; }
.chip.failed { color: var(--fail); background: var(--fail-bg); border-color: transparent; }
.chip.refs { color: var(--ink-2); background: var(--surface-2); border-color: var(--hairline-soft); }
.termtag { margin-top: 9px; font-family: var(--mono); font-size: 12px; color: var(--fail); }

/* generation progress + assets */
.genbar {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 9px;
  font-size: 13px; color: var(--ink-2); background: var(--accent-tint);
  padding: 6px 12px; border-radius: 980px;
}
.genbar .dot { background: var(--accent); }
.genbar.done { background: var(--pass-bg); color: var(--pass); }
.genbar.timeout { background: var(--review-bg); color: var(--review); }
.notice { margin: 4px 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; background: var(--review-bg); color: var(--review); border: 1px solid rgba(178,80,0,.2); }
.assets { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.asset {
  border: 1px solid var(--hairline-soft); border-radius: 12px; overflow: hidden;
  background: var(--surface-2); width: 260px; box-shadow: var(--shadow-sm);
}
.asset img, .asset video { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; background: #000; }
.asset audio { display: block; width: 100%; padding: 12px; }
.asset-cap { padding: 8px 12px; font-size: 12px; color: var(--muted); }
.asset-missing { padding: 28px 12px; text-align: center; color: var(--muted); font-size: 12.5px; }
.asset a { display: block; padding: 16px 12px; }
.mock-tag { display: inline-block; background: var(--review-bg); color: var(--review); border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.real-gen-dot {
  display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%;
  background: var(--review); opacity: .62; vertical-align: 1px; box-shadow: 0 0 0 2px var(--review-bg);
}
.real-gen-dot:hover, .real-gen-dot:focus-visible { opacity: 1; outline: none; }
.mq-cell { display: inline-grid; gap: 3px; max-width: 360px; vertical-align: top; }
.mq-cell-detail { color: var(--ink-2); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-summary { margin-bottom: 14px; }
.mq-list { border-top: 1px solid var(--hairline-soft); margin-top: 14px; }
.mq-row { padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); }
.mq-row:last-child { border-bottom: none; padding-bottom: 0; }
.mq-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; }
.mq-measure, .mq-defects, .mq-note { display: grid; grid-template-columns: 88px 1fr; gap: 10px; font-size: 13px; margin-top: 4px; }
.mq-measure span, .mq-defects span, .mq-note span { color: var(--muted); }
.mq-defects { color: var(--review); }
.mq-note { color: var(--ink-2); }
.errors.compact { margin: 8px 0 0; padding: 8px 10px; font-size: 12.5px; }

/* ---- prompt lab --------------------------------------------------------- */
.prompt-lab-mode-strip {
  display: grid;
  grid-template-columns: minmax(240px, 330px) minmax(220px, 300px) 1fr;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-mode-strip label {
  display: grid;
  gap: 5px;
  color: var(--ink-2);
  font-size: 13px;
}
.prompt-lab-mode-strip select { width: 100%; }
.prompt-lab-launch-grid { margin-top: 14px; }
.prompt-lab-target-hint {
  margin-top: 8px;
}
.prompt-lab-ab {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.prompt-lab-run-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}
.prompt-lab-run-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.prompt-lab-run-card h3 {
  margin: 0;
  font-size: 15px;
}
.prompt-lab-anchor {
  min-height: 24px;
  margin-bottom: 8px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.prompt-lab-run-card button {
  margin-top: 12px;
}
.prompt-lab-stack-card {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-2);
  font-size: 12.5px;
}
.prompt-lab-stack-card.ready {
  background: var(--pass-bg);
}
.prompt-lab-stack-card.warn {
  background: var(--review-bg);
  border-color: color-mix(in srgb, var(--review) 28%, var(--hairline-soft));
}
.prompt-lab-stack-card.busy {
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--hairline-soft));
}
.prompt-lab-stack-card.muted {
  color: var(--muted);
}
.prompt-lab-stack-card > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.prompt-lab-stack-card > button {
  margin-top: 0;
  flex-shrink: 0;
}
.prompt-lab-stack-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.prompt-lab-source-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--review) 40%, var(--hairline-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--review-bg) 72%, var(--surface));
  color: var(--ink-2);
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.prompt-lab-source-notice strong {
  color: var(--ink);
}
.prompt-lab-source-run-notice {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--fail) 24%, var(--hairline-soft));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fail-bg) 70%, var(--surface));
  color: var(--ink-2);
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.prompt-lab-source-run-notice strong {
  color: var(--ink);
}
.prompt-lab-advanced-run {
  margin-top: 14px;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 10px;
}
.prompt-lab-config-note {
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
}
.prompt-lab-config-note.bad {
  border-color: color-mix(in srgb, var(--fail) 45%, var(--hairline-soft));
  color: var(--fail);
}
.prompt-lab-launch-message {
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: var(--surface-2);
  font-size: 13px;
}
.prompt-lab-launch-message.bad {
  border-color: color-mix(in srgb, var(--fail) 45%, var(--hairline-soft));
  color: var(--fail);
}
.prompt-lab-status .row { margin-bottom: 8px; }
.prompt-lab-job-list {
  display: grid;
  gap: 8px;
}
.prompt-lab-job {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
}
.prompt-lab-job-main {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.prompt-lab-job-main > div { min-width: 0; }
.prompt-lab-job .bad {
  margin-top: 6px;
  color: var(--fail);
  font-size: 12.5px;
}
.warn-text { color: var(--review); }
.prompt-lab-controls .actions { margin-top: 12px; }
.prompt-lab-controls .grid2 { align-items: end; }
.prompt-lab-controls select,
.prompt-lab-detail select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-lab-suite-catalog summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
}
.prompt-lab-cases {
  table-layout: fixed;
  margin-top: 12px;
}
.prompt-lab-cases td {
  vertical-align: top;
  overflow-wrap: anywhere;
}
.prompt-lab-cases td:last-child {
  max-height: 130px;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--ink-2);
}
.prompt-lab-detail .row {
  align-items: start;
}
.prompt-lab-detail .actions {
  min-width: min(520px, 100%);
}
.prompt-lab-summary-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin: 14px 0 10px;
}
.prompt-lab-tile {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px;
  min-width: 0;
}
.prompt-lab-tile div {
  font-size: 18px;
  font-weight: 700;
}
.prompt-lab-tile span {
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-tile.bad { background: var(--fail-bg); color: var(--fail); }
.prompt-lab-tile.warn { background: var(--review-bg); color: var(--review); }
.prompt-lab-run-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--ink-2);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.prompt-lab-notice {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--review) 28%, var(--hairline-soft));
  border-radius: var(--radius-sm);
  background: var(--review-bg);
  color: var(--review);
  font-size: 13px;
}
.prompt-lab-selected-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.prompt-lab-selected-run {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--pass) 24%, var(--hairline-soft));
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-selected-run.not-usable {
  border-color: color-mix(in srgb, var(--review) 30%, var(--hairline-soft));
}
.prompt-lab-selected-run.empty {
  border-style: dashed;
  color: var(--muted);
}
.prompt-lab-selected-head,
.prompt-lab-selected-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.prompt-lab-selected-head {
  justify-content: space-between;
}
.prompt-lab-selected-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.prompt-lab-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  font-weight: 800;
}
.prompt-lab-run-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.prompt-lab-run-coverage span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
}
.prompt-lab-run-coverage strong {
  color: var(--ink);
  font-weight: 750;
}
.prompt-lab-lane-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.prompt-lab-lane-summary > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-lane-summary > div.pass { border-left-color: var(--pass); }
.prompt-lab-lane-summary > div.fail { border-left-color: var(--fail); }
.prompt-lab-lane-summary > div.pending { border-left-color: var(--review); }
.prompt-lab-lane-summary strong {
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-lane-summary span,
.prompt-lab-lane-summary em {
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.prompt-lab-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.prompt-lab-case-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}
.prompt-lab-case-card.has-error {
  border-color: color-mix(in srgb, var(--fail) 36%, var(--hairline-soft));
}
.prompt-lab-case-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}
.prompt-lab-case-head > div { min-width: 0; }
.prompt-lab-card-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.prompt-lab-feature-badge.smart {
  background: color-mix(in srgb, var(--accent-tint) 74%, var(--surface));
  color: var(--accent);
}
.prompt-lab-feature-badge.lane {
  background: var(--review-bg);
  color: var(--review);
}
.prompt-lab-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  min-width: 0;
}
.prompt-lab-case-tags .badge {
  font-size: 10.5px;
  padding: 2px 6px;
}
.prompt-lab-error {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--fail-bg);
  color: var(--fail);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.prompt-lab-guide-line {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.prompt-lab-case-layout {
  display: grid;
  grid-template-columns: minmax(420px, .86fr) minmax(560px, 1.14fr);
  gap: 16px;
  align-items: start;
}
.prompt-lab-media-column,
.prompt-lab-prompt-column {
  min-width: 0;
}
.prompt-lab-prompt-column {
  display: grid;
  align-content: start;
  gap: 8px;
}
.prompt-lab-lineage-panel {
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}
.prompt-lab-lineage-title {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.prompt-lab-lineage-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.prompt-lab-lineage-item {
  min-width: 0;
}
.prompt-lab-lineage-item .sub {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.prompt-lab-lineage-item pre,
.prompt-lab-provider-prompt pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
  margin: 5px 0 0;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.45;
}
.prompt-lab-lineage-item.original pre {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--hairline-soft));
  background: color-mix(in srgb, var(--accent-tint) 22%, var(--surface));
}
.prompt-lab-lineage-item.enhanced pre {
  border-color: color-mix(in srgb, var(--review) 18%, var(--hairline-soft));
  background: color-mix(in srgb, var(--review-bg) 18%, var(--surface));
}
.prompt-lab-provider-prompt {
  margin-top: 8px;
}
.prompt-lab-provider-prompt summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}
.prompt-lab-lineage-panel.compact .prompt-lab-lineage-columns {
  grid-template-columns: 1fr;
}
.prompt-lab-lineage-panel.compact .prompt-lab-lineage-item pre,
.prompt-lab-lineage-panel.compact .prompt-lab-provider-prompt pre {
  max-height: 180px;
}
.prompt-lab-defects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}
.prompt-lab-defects span {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--review-bg);
  color: var(--review);
  font-size: 11.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.prompt-lab-defects span.hard {
  background: var(--fail-bg);
  color: var(--fail);
}
.prompt-lab-warning-overview {
  display: grid;
  gap: 6px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--review);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12.5px;
}
.prompt-lab-warning-overview strong {
  color: var(--ink);
}
.prompt-lab-warning-overview div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.prompt-lab-warning-overview em {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--review-bg);
  color: var(--review);
  font-style: normal;
  font-weight: 700;
}
.prompt-lab-corpus-warning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.prompt-lab-warnings {
  margin: 10px 0;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.prompt-lab-warnings summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 750;
}
.prompt-lab-warnings summary span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}
.prompt-lab-warnings.compact {
  margin: 0;
}
.prompt-lab-warning-list {
  display: grid;
  gap: 7px;
  padding: 8px;
}
.prompt-lab-warning-card {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-left: 4px solid var(--muted);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
}
.prompt-lab-warning-card.warn {
  border-left-color: var(--review);
  background: color-mix(in srgb, var(--review-bg) 35%, var(--surface));
}
.prompt-lab-warning-card.info {
  border-left-color: var(--accent);
}
.prompt-lab-warning-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.prompt-lab-warning-card strong {
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-warning-card span {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.prompt-lab-warning-card p,
.prompt-lab-warning-card ul {
  margin: 0;
}
.prompt-lab-warning-card ul {
  padding-left: 18px;
}
.prompt-lab-warning-card li {
  margin: 2px 0;
}
.prompt-lab-warning-card details {
  margin-top: 2px;
}
.prompt-lab-warning-card details summary {
  display: inline-flex;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
}
.prompt-lab-warning-card pre {
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 5px 0 0;
  padding: 7px;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}
.prompt-lab-scorecard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.prompt-lab-scorecard div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11.5px;
}
.prompt-lab-scorecard div.pass { background: var(--pass-bg); color: var(--pass); }
.prompt-lab-scorecard div.warn { background: var(--review-bg); color: var(--review); }
.prompt-lab-scorecard div.fail { background: var(--fail-bg); color: var(--fail); }
.prompt-lab-scorecard strong { color: inherit; }
.prompt-lab-judge-sources {
  display: grid;
  gap: 5px;
  margin: 8px 0;
}
.prompt-lab-judge-sources div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  font-size: 11.5px;
  color: var(--ink-2);
}
.prompt-lab-judge-sources div.pass { background: var(--pass-bg); color: var(--pass); border-color: transparent; }
.prompt-lab-judge-sources div.warn { background: var(--review-bg); color: var(--review); border-color: transparent; }
.prompt-lab-judge-sources div.fail { background: var(--fail-bg); color: var(--fail); border-color: transparent; }
.prompt-lab-judge-sources div.muted { color: var(--muted); }
.prompt-lab-judge-sources strong {
  color: inherit;
  font-weight: 650;
}
.prompt-lab-judge-source-note {
  grid-column: 1 / -1;
  color: inherit;
  overflow-wrap: anywhere;
}
.prompt-lab-judge-note {
  margin: 6px 0;
  color: var(--muted);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.prompt-lab-requirements {
  margin: 8px 0;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.prompt-lab-requirements summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.prompt-lab-requirements summary span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.prompt-lab-requirement-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}
.prompt-lab-requirement-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) auto;
  gap: 6px 10px;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-2);
}
.prompt-lab-requirement-row.pass { border-left-color: var(--pass); }
.prompt-lab-requirement-row.warn { border-left-color: var(--review); }
.prompt-lab-requirement-row.fail { border-left-color: var(--fail); }
.prompt-lab-requirement-row.muted { border-left-color: var(--muted); }
.prompt-lab-requirement-row strong {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-requirement-row span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.prompt-lab-requirement-row em {
  justify-self: end;
  font-style: normal;
  font-weight: 750;
  font-size: 12px;
}
.prompt-lab-requirement-row.pass em { color: var(--pass); }
.prompt-lab-requirement-row.warn em { color: var(--review); }
.prompt-lab-requirement-row.fail em { color: var(--fail); }
.prompt-lab-requirement-row p,
.prompt-lab-requirement-row pre {
  grid-column: 1 / -1;
  margin: 0;
  overflow-wrap: anywhere;
}
.prompt-lab-requirement-row p {
  font-size: 12px;
  line-height: 1.35;
}
.prompt-lab-requirement-row pre {
  max-height: 96px;
  overflow: auto;
  white-space: pre-wrap;
  padding: 6px 7px;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}
.prompt-lab-atomic-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.prompt-lab-atomic-list span {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.prompt-lab-atomic-list span.evidenced {
  background: var(--pass-bg);
  color: var(--pass);
}
.prompt-lab-atomic-list span.not_evidenced {
  background: var(--review-bg);
  color: var(--review);
}
.prompt-lab-atomic-list span.pass {
  background: var(--pass-bg);
  color: var(--pass);
}
.prompt-lab-atomic-list span.warn,
.prompt-lab-atomic-list span.unknown {
  background: var(--review-bg);
  color: var(--review);
}
.prompt-lab-atomic-list span.fail {
  background: var(--fail-bg);
  color: var(--fail);
}
.prompt-lab-observations {
  margin: 8px 0;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.prompt-lab-observations summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.prompt-lab-observations summary span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.prompt-lab-observation-list {
  display: grid;
  gap: 6px;
  padding: 8px;
}
.prompt-lab-observation-list h4 {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.prompt-lab-observation-row {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-2);
}
.prompt-lab-observation-row.pass { border-left-color: var(--pass); }
.prompt-lab-observation-row.warn { border-left-color: var(--review); }
.prompt-lab-observation-row.muted { border-left-color: var(--muted); }
.prompt-lab-observation-row strong {
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-observation-row span {
  color: var(--muted);
  font-size: 11px;
}
.prompt-lab-observation-row p,
.prompt-lab-observation-row pre {
  margin: 0;
  overflow-wrap: anywhere;
}
.prompt-lab-observation-row p {
  font-size: 12px;
  line-height: 1.35;
}
.prompt-lab-observation-row pre {
  max-height: 80px;
  overflow: auto;
  white-space: pre-wrap;
  padding: 6px 7px;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
}
.prompt-lab-video-evidence {
  margin: 0 0 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.prompt-lab-video-evidence.pass {
  border-color: color-mix(in srgb, var(--pass) 28%, var(--hairline-soft));
}
.prompt-lab-video-evidence.fail {
  border-color: color-mix(in srgb, var(--fail) 36%, var(--hairline-soft));
}
.prompt-lab-video-evidence summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.prompt-lab-video-evidence summary span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.prompt-lab-video-evidence-summary,
.prompt-lab-video-evidence-note {
  padding: 8px 10px 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}
.prompt-lab-video-evidence-note {
  color: var(--muted);
}
.prompt-lab-video-evidence-chips,
.prompt-lab-video-evidence-files,
.prompt-lab-video-evidence-errors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
.prompt-lab-video-evidence-chips span,
.prompt-lab-video-evidence-files a,
.prompt-lab-video-evidence-errors span {
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.25;
  text-decoration: none;
}
.prompt-lab-video-evidence-files a {
  color: var(--accent);
}
.prompt-lab-video-evidence-errors span {
  background: var(--fail-bg);
  color: var(--fail);
  border-color: color-mix(in srgb, var(--fail) 22%, var(--hairline-soft));
}
.prompt-lab-video-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 10px;
}
.prompt-lab-video-evidence-artifact {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  text-decoration: none;
}
.prompt-lab-video-evidence-artifact img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 5px;
  background: #0f1115;
  border: 1px solid var(--hairline-soft);
}
.prompt-lab-video-evidence-artifact span {
  overflow-wrap: anywhere;
}
.prompt-lab-motion-metrics {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 8px;
  padding: 8px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
}
.prompt-lab-motion-metrics strong {
  color: var(--ink);
}
.prompt-lab-motion-metrics em {
  font-style: normal;
  font-weight: 750;
  color: var(--muted);
}
.prompt-lab-transcript {
  margin: 8px 0;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.prompt-lab-transcript.pass { border-color: color-mix(in srgb, var(--pass) 24%, var(--hairline-soft)); }
.prompt-lab-transcript.warn { border-color: color-mix(in srgb, var(--review) 28%, var(--hairline-soft)); }
.prompt-lab-transcript.fail { border-color: color-mix(in srgb, var(--fail) 30%, var(--hairline-soft)); }
.prompt-lab-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
}
.prompt-lab-transcript.pass .prompt-lab-transcript-head { color: var(--pass); background: var(--pass-bg); }
.prompt-lab-transcript.warn .prompt-lab-transcript-head { color: var(--review); background: var(--review-bg); }
.prompt-lab-transcript.fail .prompt-lab-transcript-head { color: var(--fail); background: var(--fail-bg); }
.prompt-lab-transcript-grid {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 6px 10px;
  padding: 10px;
}
.prompt-lab-transcript-grid .sub {
  padding-top: 7px;
  font-size: 11.5px;
  font-weight: 650;
}
.prompt-lab-transcript pre {
  min-height: 38px;
  max-height: 130px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.prompt-lab-transcript-missing {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 10px;
  padding: 0 10px 10px;
  color: var(--fail);
  font-size: 12px;
}
.prompt-lab-transcript-missing span {
  overflow-wrap: anywhere;
}
.prompt-lab-expectations,
.prompt-lab-context {
  margin: 8px 0;
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
}
.prompt-lab-expectations summary,
.prompt-lab-context summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}
.prompt-lab-context.has-smart-context {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--hairline-soft));
  background: color-mix(in srgb, var(--accent-tint) 10%, var(--surface));
}
.prompt-lab-guide {
  margin-top: 7px;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.prompt-lab-expectation-grid {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
  gap: 5px 10px;
  margin-top: 8px;
  font-size: 12px;
}
.prompt-lab-expectation-key {
  color: var(--muted);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.prompt-lab-expectation-value {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.prompt-lab-gate {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 12px 0 16px;
  color: var(--ink-2);
  font-size: 13px;
}
.prompt-lab-pairs { display: grid; gap: 16px; }
.prompt-lab-pair {
  border-top: 1px solid var(--hairline-soft);
  padding-top: 16px;
}
.prompt-lab-pair-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.prompt-lab-side-by-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.prompt-lab-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 12px;
  min-width: 0;
}
.prompt-lab-card-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 650;
}
.prompt-lab-media,
.prompt-lab-empty {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 300px;
  display: grid;
  place-items: center;
  object-fit: contain;
  background: #0f1115;
  border-radius: 6px;
  color: var(--muted);
  margin-bottom: 10px;
}
.prompt-lab-case-card .prompt-lab-media,
.prompt-lab-case-card .prompt-lab-empty {
  max-height: 520px;
}
.prompt-lab-source-preview {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}
.prompt-lab-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.prompt-lab-source-card {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 7px;
  display: grid;
  gap: 7px;
  min-width: 0;
}
.prompt-lab-source-card img,
.prompt-lab-source-card video,
.prompt-lab-source-empty {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #0f1115;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-source-card strong,
.prompt-lab-source-card span,
.prompt-lab-source-card code,
.prompt-lab-source-card small {
  display: block;
  overflow-wrap: anywhere;
}
.prompt-lab-source-card strong {
  font-size: 12.5px;
}
.prompt-lab-source-card span,
.prompt-lab-source-card small,
.prompt-lab-source-card code {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
}
.prompt-lab-source-card .prompt-lab-source-provenance {
  display: inline-block;
  width: fit-content;
  margin: 3px 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}
.prompt-lab-context-asset-list {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.prompt-lab-context-asset {
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px;
}
.prompt-lab-context-asset strong,
.prompt-lab-context-asset span {
  display: block;
  overflow-wrap: anywhere;
}
.prompt-lab-context-asset strong {
  font-size: 12.5px;
}
.prompt-lab-context-asset span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}
.prompt-lab-context-asset p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.prompt-lab-context-content {
  margin-top: 7px;
}
.prompt-lab-context-content > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}
.prompt-lab-context-content pre {
  margin: 4px 0 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface-2);
  padding: 8px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}
.prompt-lab-context-asset.relevant { border-color: rgba(33, 143, 92, .24); }
.prompt-lab-context-asset.distractor,
.prompt-lab-context-asset.conflict { border-color: rgba(220, 86, 52, .26); }
.prompt-lab-context-trace-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 7px 0;
}
.prompt-lab-context-trace-summary span {
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
  background: var(--surface-2);
  padding: 3px 8px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 650;
}
.prompt-lab-context-trace-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.prompt-lab-context-trace-columns > div {
  border: 1px solid var(--hairline-soft);
  border-radius: 7px;
  background: var(--surface-2);
  padding: 8px;
  min-width: 0;
}
.prompt-lab-context-trace-columns > div > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 12px;
}
.prompt-lab-context-trace-columns em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.prompt-lab-context-trace-asset {
  display: grid;
  gap: 3px;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface);
  padding: 7px;
}
.prompt-lab-context-trace-asset + .prompt-lab-context-trace-asset {
  margin-top: 6px;
}
.prompt-lab-context-trace-asset.selected {
  border-color: rgba(33, 143, 92, .32);
}
.prompt-lab-context-trace-asset.ignored {
  border-color: rgba(220, 86, 52, .24);
  opacity: .92;
}
.prompt-lab-context-trace-asset div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prompt-lab-context-trace-asset span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
}
.prompt-lab-context-trace-asset small,
.prompt-lab-context-trace-asset p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.prompt-lab-context-trace-asset p {
  margin: 0;
  color: var(--ink-2);
}
.prompt-lab-context-risk {
  border-radius: 999px;
  padding: 1px 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}
.prompt-lab-context-risk.medium,
.prompt-lab-context-risk.high {
  background: rgba(255, 149, 0, .15);
  color: #b35d00;
}
.prompt-lab-context-risk.high {
  background: rgba(220, 86, 52, .16);
  color: #c83b2e;
}
.prompt-lab-expectation-table {
  display: grid;
  grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
  gap: 5px 10px;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 12px;
}
.prompt-lab-expectation-table code {
  color: var(--muted);
}
.prompt-lab-empty {
  text-align: center;
  padding: 12px;
}
.prompt-lab-empty strong {
  color: #fff;
  font-size: 13px;
}
.prompt-lab-empty span {
  color: var(--muted);
  font-size: 12px;
}
.lineage-block { margin-top: 8px; }
.lineage-block pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
  margin: 4px 0 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  font-size: 12px;
}
.prompt-lab-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 12px;
}
.prompt-lab-human {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.prompt-lab-human label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: 13px;
}
.prompt-lab-human input { width: 70px; }
.prompt-lab-human .prompt-lab-review-note {
  flex: 1 1 240px;
}
.prompt-lab-human .prompt-lab-review-note input {
  width: 100%;
  min-width: 160px;
}
.prompt-lab-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.prompt-lab-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.prompt-lab-step {
  text-align: left;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.prompt-lab-step span {
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-step.done {
  background: var(--pass-bg);
  border-color: transparent;
}
.prompt-lab-step.current {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline-soft));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
.prompt-lab-activity .row,
.prompt-lab-history .row,
.prompt-lab-launch .row {
  margin-bottom: 10px;
}
.prompt-lab-candidate-target {
  display: grid;
  gap: 8px;
}
.prompt-lab-candidate-target input {
  width: 100%;
  max-width: 100%;
}
.prompt-lab-stack-mode select {
  max-width: 220px;
}
.prompt-lab-inline-progress {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  color: var(--ink-2);
  font-size: 12.5px;
}
.prompt-lab-inline-progress > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.prompt-lab-progress-bar {
  height: 7px;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
}
.prompt-lab-progress-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.prompt-lab-history-table {
  display: grid;
  gap: 4px;
}
.prompt-lab-history-head,
.prompt-lab-history-row {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(150px, 1fr) minmax(90px, .6fr) minmax(170px, 1fr) minmax(110px, .7fr) minmax(220px, auto);
  gap: 10px;
  align-items: center;
}
.prompt-lab-history-head {
  padding: 0 10px 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
.prompt-lab-history-row {
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}
.prompt-lab-history-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12.5px;
}
.prompt-lab-history-row.inspecting {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--hairline-soft));
}
.prompt-lab-history-row.not-usable {
  border-color: color-mix(in srgb, var(--review) 22%, var(--hairline-soft));
}
.prompt-lab-history-row > span small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.25;
}
.prompt-lab-history-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.prompt-lab-section-summary {
  list-style: none;
  margin: 0;
}
.prompt-lab-section-summary::-webkit-details-marker { display: none; }
.prompt-lab-section-summary > span {
  display: grid;
  gap: 3px;
}
.prompt-lab-section-summary strong {
  color: var(--ink);
  font-size: 15px;
}
.prompt-lab-section-summary em {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 400;
}
.prompt-lab-section-summary::before {
  content: "›";
  float: right;
  color: var(--muted);
  font-size: 20px;
  transition: transform 120ms ease;
}
.prompt-lab-corpus[open] > .prompt-lab-section-summary::before { transform: rotate(90deg); }
.prompt-lab-corpus-body { margin-top: 14px; }
.prompt-lab-corpus-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.prompt-lab-corpus-card {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  min-width: 0;
}
.prompt-lab-corpus-card.selected {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--hairline-soft));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}
.prompt-lab-corpus-card strong {
  overflow-wrap: anywhere;
}
.prompt-lab-corpus-card span,
.prompt-lab-corpus-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.prompt-lab-corpus-detail {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.prompt-lab-corpus-controls,
.prompt-lab-corpus-run-list,
.prompt-lab-corpus-comparison {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline-soft);
}
.prompt-lab-corpus-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.prompt-lab-corpus-metrics > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  background: var(--surface-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
}
.prompt-lab-corpus-metrics strong {
  font-size: 18px;
}
.prompt-lab-corpus-metrics span {
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-corpus-rows {
  display: grid;
  gap: 10px;
}
.prompt-lab-corpus-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.prompt-lab-corpus-compare label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-corpus-compare select {
  width: 100%;
}
.prompt-lab-corpus-row {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.prompt-lab-corpus-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
}
.prompt-lab-corpus-row > summary span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.prompt-lab-corpus-row > summary em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.prompt-lab-corpus-row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 13px 13px;
}
.prompt-lab-corpus-row-grid h4,
.prompt-lab-corpus-block h4 {
  margin: 0 0 5px;
  color: var(--ink-2);
  font-size: 12px;
}
.prompt-lab-corpus-row pre,
.prompt-lab-corpus-snippet pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}
.prompt-lab-corpus-block {
  display: grid;
  gap: 7px;
  padding: 0 13px 13px;
}
.prompt-lab-corpus-snippet {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.prompt-lab-corpus-snippet summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.prompt-lab-corpus-snippet span,
.prompt-lab-corpus-snippet p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  overflow-wrap: anywhere;
}
.prompt-lab-role {
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 11.5px;
  font-weight: 700;
  margin-right: 5px;
}
.prompt-lab-role.baseline { background: var(--accent-tint); color: var(--accent); }
.prompt-lab-role.candidate { background: var(--pass-bg); color: var(--pass); }
.prompt-lab-role.other { background: var(--surface); color: var(--muted); }
.prompt-lab-filterbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.prompt-lab-review-shell {
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.prompt-lab-case-rail {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  position: sticky;
  top: 12px;
}
.prompt-lab-case-rail-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 7px;
  min-width: 0;
}
.prompt-lab-case-rail-row.selected {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--hairline-soft));
  background: color-mix(in srgb, var(--accent-tint) 18%, var(--surface));
}
.prompt-lab-case-rail-row strong,
.prompt-lab-case-rail-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-lab-case-rail-row small {
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
}
.prompt-lab-case-rail-row em {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.prompt-lab-thumb,
.prompt-lab-thumb-empty,
.prompt-lab-thumb-video {
  width: 48px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: #0f1115;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  text-transform: uppercase;
}
.prompt-lab-case-card .prompt-lab-media-column {
  position: sticky;
  top: 12px;
}
.prompt-lab-review-shell .prompt-lab-case-layout {
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
}
.prompt-lab-lineage-item pre,
.prompt-lab-provider-prompt pre {
  max-height: 420px;
  font-size: 14px;
}
.prompt-lab-lineage-panel.compact .prompt-lab-lineage-item pre,
.prompt-lab-lineage-panel.compact .prompt-lab-provider-prompt pre {
  max-height: 240px;
}
.prompt-lab-original-once,
.prompt-lab-comparison-prompts {
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
  margin: 8px 0 10px;
}
.prompt-lab-original-once summary,
.prompt-lab-comparison-prompts summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.prompt-lab-original-once pre,
.prompt-lab-comparison-prompts pre {
  margin: 8px 0 0;
  padding: 10px;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.45;
}
.prompt-lab-gate-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
}
.prompt-lab-gate-checklist div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2);
  font-size: 12px;
}
.prompt-lab-gate-checklist strong {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
}
.prompt-lab-gate-checklist em {
  color: var(--ink-2);
  font-style: normal;
}
.prompt-lab-gate-checklist .pass { background: var(--pass-bg); color: var(--pass); border-color: transparent; }
.prompt-lab-gate-checklist .fail { background: var(--fail-bg); color: var(--fail); border-color: transparent; }
.prompt-lab-gate-checklist .pending { background: var(--review-bg); color: var(--review); border-color: transparent; }
.prompt-lab-lane-gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  margin: -4px 0 16px;
}
.prompt-lab-lane-gates > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-lane-gates > div.pass { border-left-color: var(--pass); }
.prompt-lab-lane-gates > div.fail { border-left-color: var(--fail); }
.prompt-lab-lane-gates > .prompt-lab-lane-gates-title {
  grid-column: 1 / -1;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.prompt-lab-lane-gates strong {
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-lane-gates span,
.prompt-lab-lane-gates em {
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.prompt-lab-req-delta-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-req-delta-summary > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--ink);
}
.prompt-lab-req-delta-summary > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-req-delta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.prompt-lab-req-delta-chips span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
}
.prompt-lab-pairwise-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-pairwise-summary > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--ink);
}
.prompt-lab-pairwise-summary > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-attribution-summary {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-attribution-summary > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--ink);
}
.prompt-lab-attribution-summary > div:first-child span {
  color: var(--muted);
  font-size: 12px;
}
.prompt-lab-pairwise {
  margin: 8px 0 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.prompt-lab-pairwise summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
}
.prompt-lab-pairwise summary span {
  color: var(--muted);
  font-weight: 600;
}
.prompt-lab-pairwise-axis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
}
.prompt-lab-pairwise-axis span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
}
.prompt-lab-pairwise-axis .pass { background: var(--pass-bg); color: var(--pass); }
.prompt-lab-pairwise-axis .fail { background: var(--fail-bg); color: var(--fail); }
.prompt-lab-pairwise-axis .muted { background: rgba(0, 0, 0, 0.04); color: var(--muted); }
.prompt-lab-pairwise-requirements {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}
.prompt-lab-pairwise-requirement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: start;
  padding: 7px 8px;
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
}
.prompt-lab-pairwise-requirement strong,
.prompt-lab-pairwise-requirement span,
.prompt-lab-pairwise-requirement em,
.prompt-lab-pairwise-requirement p {
  min-width: 0;
}
.prompt-lab-pairwise-requirement strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.prompt-lab-pairwise-requirement span {
  color: var(--muted);
}
.prompt-lab-pairwise-requirement em {
  color: var(--ink-2);
  font-style: normal;
  white-space: nowrap;
}
.prompt-lab-pairwise-requirement p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.prompt-lab-pairwise-requirement.pass { border-color: transparent; background: var(--pass-bg); }
.prompt-lab-pairwise-requirement.fail { border-color: transparent; background: var(--fail-bg); }
.prompt-lab-pairwise-requirement.needs_review { border-color: transparent; background: var(--review-bg); }
.prompt-lab-req-delta-chips .pass { background: var(--pass-bg); color: var(--pass); }
.prompt-lab-req-delta-chips .fail { background: var(--fail-bg); color: var(--fail); }
.prompt-lab-req-delta-chips .needs_review,
.prompt-lab-req-delta-chips .warn { background: var(--review-bg); color: var(--review); }
.prompt-lab-req-delta-chips .muted { background: rgba(0, 0, 0, 0.04); color: var(--muted); }
.prompt-lab-attribution {
  margin: 8px 0 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.prompt-lab-attribution summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
}
.prompt-lab-attribution summary span {
  color: var(--muted);
  font-weight: 600;
}
.prompt-lab-attribution-grid {
  display: grid;
  gap: 6px;
  padding: 8px;
}
.prompt-lab-attribution-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, .8fr) minmax(140px, .8fr);
  gap: 8px;
  align-items: start;
  padding: 8px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--surface);
  font-size: 12px;
}
.prompt-lab-attribution-row.pass { border-left-color: var(--pass); }
.prompt-lab-attribution-row.warn { border-left-color: var(--review); }
.prompt-lab-attribution-row.fail { border-left-color: var(--fail); }
.prompt-lab-attribution-row.muted { border-left-color: var(--muted); }
.prompt-lab-attribution-row strong {
  color: var(--ink);
  display: block;
}
.prompt-lab-attribution-row span,
.prompt-lab-attribution-row small {
  color: var(--muted);
  display: block;
  overflow-wrap: anywhere;
}
.prompt-lab-attribution-row em {
  color: var(--ink-2);
  display: block;
  font-style: normal;
  font-weight: 750;
}
.prompt-lab-attribution-row p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  line-height: 1.35;
}
.prompt-lab-coverage {
  display: block;
}
.prompt-lab-coverage > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
}
.prompt-lab-coverage > summary::-webkit-details-marker {
  display: none;
}
.prompt-lab-coverage > summary::before {
  content: "›";
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease;
}
.prompt-lab-coverage[open] > summary::before {
  transform: rotate(90deg);
}
.prompt-lab-coverage > summary span:first-of-type {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}
.prompt-lab-coverage > summary strong {
  color: var(--ink);
  font-size: 16px;
}
.prompt-lab-coverage > summary em {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.prompt-lab-coverage-note {
  margin-top: 10px;
}
.prompt-lab-lane-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.prompt-lab-coverage-lane {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-coverage-lane.pass { border-left-color: var(--pass); }
.prompt-lab-coverage-lane.fail { border-left-color: var(--fail); }
.prompt-lab-coverage-lane strong {
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-coverage-lane span,
.prompt-lab-coverage-lane em {
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.prompt-lab-coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.prompt-lab-coverage-dimension {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.prompt-lab-coverage-dimension.pass { border-left-color: var(--pass); }
.prompt-lab-coverage-dimension.fail { border-left-color: var(--fail); }
.prompt-lab-coverage-dimension strong {
  color: var(--ink);
  font-size: 12.5px;
}
.prompt-lab-coverage-dimension span,
.prompt-lab-coverage-dimension em {
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  overflow-wrap: anywhere;
}
.prompt-lab-req-delta {
  margin: 8px 0 12px;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.prompt-lab-req-delta summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
}
.prompt-lab-req-delta summary span {
  color: var(--muted);
  font-weight: 600;
}
.prompt-lab-req-delta-grid {
  display: grid;
  gap: 6px;
  padding: 8px;
}
.prompt-lab-req-delta-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(100px, 0.8fr) minmax(100px, 0.8fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid var(--hairline-soft);
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--surface);
  font-size: 12px;
}
.prompt-lab-req-delta-row.pass { border-left-color: var(--pass); }
.prompt-lab-req-delta-row.fail { border-left-color: var(--fail); }
.prompt-lab-req-delta-row.muted { border-left-color: var(--muted); }
.prompt-lab-req-delta-row strong { color: var(--ink); }
.prompt-lab-req-delta-row span { color: var(--muted); }
.prompt-lab-req-delta-row em {
  justify-self: end;
  font-style: normal;
  font-weight: 750;
  color: var(--ink-2);
}
.prompt-lab-req-delta-row.pass em { color: var(--pass); }
.prompt-lab-req-delta-row.fail em { color: var(--fail); }
.prompt-lab-human-choice {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
}
.prompt-lab-human-choice button {
  border: 0;
  background: transparent;
  padding: 6px 8px;
}
.prompt-lab-human-choice button.on {
  background: var(--accent);
  color: #fff;
  border-radius: 7px;
}
.check-inline {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--ink-2);
  font-size: 12.5px;
}
.danger-text { color: var(--fail); }
@media (max-width: 820px) {
  .prompt-lab-mode-strip,
  .prompt-lab-ab,
  .prompt-lab-side-by-side,
  .prompt-lab-case-layout,
  .prompt-lab-review-shell,
  .prompt-lab-selected-pair,
  .prompt-lab-result-grid {
    grid-template-columns: 1fr;
  }
  .prompt-lab-hero,
  .prompt-lab-history-row,
  .prompt-lab-history-head {
    display: block;
  }
  .prompt-lab-workflow { grid-template-columns: 1fr; }
  .prompt-lab-case-rail,
  .prompt-lab-case-card .prompt-lab-media-column {
    position: static;
  }
  .prompt-lab-summary-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompt-lab-job-main { align-items: flex-start; flex-direction: column; }
  .prompt-lab-expectation-grid { grid-template-columns: 1fr; }
  .prompt-lab-scorecard { grid-template-columns: 1fr; }
  .prompt-lab-lineage-columns { grid-template-columns: 1fr; }
}

/* ---- key/value + checks ------------------------------------------------- */
.kv { display: grid; grid-template-columns: 168px 1fr; gap: 9px 18px; font-size: 14px; }
.kv .k { color: var(--muted); }
.kv .v { font-family: var(--mono); font-size: 13px; word-break: break-word; }
.check { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline-soft); align-items: baseline; }
.check:last-child { border-bottom: none; }
.check .mark { width: 16px; font-weight: 700; }
.check .mark.pass { color: var(--pass); }
.check .mark.fail { color: var(--fail); }
.check .cid { font-family: var(--mono); font-size: 12.5px; min-width: 240px; color: var(--ink); }
.check .ev { color: var(--ink-2); font-size: 13.5px; }

/* ---- raw events --------------------------------------------------------- */
.events, pre.code { background: var(--surface-2); border: 1px solid var(--hairline-soft); border-radius: var(--radius-sm); padding: 14px; overflow-x: auto; }
.ev-line { display: flex; gap: 12px; padding: 4px 0; font-family: var(--mono); font-size: 12px; border-bottom: 1px solid var(--hairline-soft); }
.ev-line:last-child { border-bottom: none; }
.ev-line .name { color: var(--accent); min-width: 168px; }
.ev-line .name.unknown { color: var(--fail); font-weight: 600; }
.ev-line .data { color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }
details summary { cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 13.5px; margin: 2px 0; }
details summary:hover { color: var(--accent); }

@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
  body { overflow-x: hidden; }
  .header-inner {
    height: auto;
    min-height: 56px;
    padding: 8px 18px;
    gap: 8px 14px;
    flex-wrap: wrap;
  }
  .brand { flex: 0 0 auto; }
  nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 4px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a {
    flex: 0 0 auto;
    padding: 5px 8px;
    font-size: 13px;
  }
  .header-spacer { flex: 1 1 auto; }
  .run-pill {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
    width: auto;
  }
  .run-pill .pill-link {
    flex: 1 1 auto;
  }
  .run-pill .activity-current {
    max-width: none;
  }
  .page-head,
  .diagnosis-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .page-head .spacer { display: none; }
  .overview-grid,
  .overview-columns,
  .compare-selectors,
  .compare-run-context,
  .comparison-launch-grid,
  .environment-create-grid,
  .workbench-layout,
  .workbench-compose {
    grid-template-columns: 1fr;
  }
  .overview-card { padding: 16px 18px; }
  .overview-run-row,
  .diagnosis-issues button {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .diagnosis-actions { width: 100%; justify-content: flex-start; }
  .diagnosis-grid { grid-template-columns: 1fr 1fr; }
  .compact-toolbar .segmented {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    border-radius: 14px;
  }
  .compact-toolbar .segmented .seg {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
    padding: 6px 8px;
  }
  .filter,
  .filter select { width: 100%; }
  .target-quick-grid,
  .scenario-list-row,
  .scenario-row-head {
    grid-template-columns: 1fr;
  }
  .target-quick-actions,
  .scenario-row-actions,
  .scenario-row-verdict {
    justify-content: flex-start;
    min-width: 0;
  }
  .scenario-select {
    justify-content: flex-start;
  }
  .scenario-list-row {
    gap: 9px;
    padding: 14px 16px;
  }
  .scenario-row-actions {
    flex-wrap: wrap;
  }
  .scenario-search-input,
  .target-select {
    min-width: 0;
    width: 100%;
  }
  .target-stack-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 8px 0;
  }
  .environment-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .environment-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-actions {
    justify-content: flex-start;
    min-width: 0;
  }
  .health-table thead,
  .compare-table thead { display: none; }
  .health-table,
  .health-table tbody,
  .health-table tr,
  .health-table td,
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table td {
    display: block;
    width: 100%;
  }
  .health-table tr,
  .compare-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--hairline-soft);
  }
  .health-table tr:last-child,
  .compare-table tr:last-child { border-bottom: none; }
  .health-table td,
  .compare-table td {
    border-bottom: none;
    padding: 5px 0;
  }
  .health-table td[data-label]::before,
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .health-table td[data-label="Scenario"]::before,
  .compare-table td[data-label="Scenario"]::before { display: none; }
  .health-table td.actions {
    text-align: left;
    padding-top: 8px;
  }
  .runs-top,
  .runs-toolbar,
  .run-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .runs-top .spacer,
  .runs-toolbar .spacer,
  .run-head .spacer { display: none; }
  .runs-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runs-metric { min-height: 64px; padding: 11px 13px; }
  .runs-metric span { font-size: 21px; }
  .segmented { width: 100%; overflow-x: auto; }
  .segmented .seg { white-space: nowrap; flex: 1 0 auto; justify-content: center; }
  .run-search { width: 100%; }
  .run-card { padding: 14px 16px; }
  .run-card-actions { width: 100%; justify-content: flex-start; }
  .run-current { max-width: 100%; }
  .run-target-line span { max-width: 100%; }
  .run-issue { grid-template-columns: 1fr; gap: 2px; }
  .run-list-header,
  .run-detail-top,
  .evidence-title-row { align-items: flex-start; flex-wrap: wrap; }
  .run-detail-actions { width: 100%; justify-content: flex-start; padding-top: 0; }
  .run-add-scenario-grid { grid-template-columns: 1fr; }
  .run-add-scenario-grid button { width: 100%; }
  .run-refresh-status { white-space: normal; }
  .evidence-title-row .spacer { display: none; }
  .table-scroll { overflow-x: visible; }
  .table-scroll table { min-width: 0; }
  .run-results-table thead { display: none; }
  .run-results-table,
  .run-results-table tbody,
  .run-results-table tr,
  .run-results-table td { display: block; width: 100%; }
  .run-results-table tr { padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
  .run-results-table tr:last-child { border-bottom: none; }
  .run-results-table td { border-bottom: none; padding: 5px 0; }
  .run-results-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .run-results-table td[data-label="Scenario"]::before { display: none; }
  .ref-head { display: none; }
  .fail-line { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .assessment-summary { grid-template-columns: 1fr; }
  .context-row { grid-template-columns: 1fr; gap: 3px; }
  .judge-criteria-head { display: none; }
  .judge-criterion-row { grid-template-columns: 24px 1fr; gap: 8px 12px; }
  .judge-evidence { grid-column: 2; }
  .chat-end-meta { grid-template-columns: 1fr; gap: 2px; }
  .prompt-lab-side-by-side { grid-template-columns: 1fr; }
  .prompt-lab-pair-head { align-items: flex-start; flex-direction: column; }
  .prompt-lab-corpus-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompt-lab-corpus-compare { grid-template-columns: 1fr; }
  .prompt-lab-corpus-row-grid { grid-template-columns: 1fr; }
  .prompt-lab-corpus-row > summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .bubble { max-width: 92%; }
  main { padding: 28px 18px 100px; }
}

/* Keep navigation-group sizing after the base and responsive header rules. */
.header-inner { max-width: 1440px; gap: 22px; }
nav a { padding-inline: 9px; }

@media (max-width: 1100px) {
  .build-indicator { display: none; }
  .header-inner { gap: 14px; padding-inline: 18px; }
  nav a { padding-inline: 7px; font-size: 13px; }
}

@media (max-width: 720px) {
  nav a.nav-break { margin-left: 5px; }
  nav a.nav-break::before { left: -5px; }
  .editor-section-nav { top: 104px; }
}

.overview-issue-reason {
  display: -webkit-box;
  overflow: hidden;
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}