@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg: #fff;
  --panel: #fff;
  --side: #f6f6f6;
  --ink: #212121;
  --muted: #555;
  --line: #e5e5e5;
  --soft: #f0f0f0;
  /* Postman brand orange, split by contrast duty: --accent for glyph-size
     indicators (carets, sort arrows, outlines: >=3:1 on white), --accent-ink
     for text-size orange and white-text fills (>=4.5:1 AA), --accent-dim
     (#FF6C37, the brand hue itself) for decorative borders and tints. */
  --accent: #e05320;
  --accent-ink: #b8481c;
  --accent-dim: #ff6c37;
  --good: #23784f;
  --bad: #a64035;
  --warn: #9a6a12;
  --blue: #315f9b;
  --role-system: #5d4d8f;
  --role-system-bg: #efeaf8;
  --role-user: #4f7a3a;
  --role-user-bg: #ecf3e5;
  --role-assistant: #1f5a8a;
  --role-assistant-bg: #e3edf6;
  --role-tool: #875c1e;
  --role-tool-bg: #f4ecd9;
  --role-tool-err: #b34a3a;
  --role-tool-err-bg: #f6e0db;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* tooltip badge + popover (mirrors arena_leaderboard.html) */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border: 1px solid #d5d5d5;
  border-radius: 50%;
  color: #555;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}
.tip-popover {
  position: fixed;
  z-index: 2147483647;
  max-width: 320px;
  padding: 10px 11px;
  border-radius: 8px;
  background: #262626;
  color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .08s ease, transform .08s ease;
}
.tip-popover.show { opacity: 1; transform: translateY(0); }

/* column resizer handles */
table thead th { position: relative; }
.col-resizer {
  position: absolute;
  top: 0;
  right: -2px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 5;
}
.col-resizer:hover, .col-resizer.active {
  background: rgba(255, 108, 55, 0.5);
}
body.col-resizing, body.col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.topbar, .pagebar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  height: 64px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
}
.topbar { padding: 0 28px; gap: 16px; z-index: 10; }
.pagebar { padding: 0 24px; z-index: 6; }
/* Topbar landmark (2026-07-21 UI dedup): one full-width brand strip; the
   brand always links home ("where is home"). Going back up is the
   breadcrumb's job — its Overview link carries the #from slice memory. */
.brand, .brand-home { display: flex; gap: 10px; align-items: center; text-decoration: none; }
a.brand:hover, a.brand-home:hover { text-decoration: none; }
.brand-logo { display: block; width: 30px; height: 30px; flex-shrink: 0; }
.brand-text { font: 700 20px/1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); letter-spacing: -0.01em; }
.brand-text .brand-name { color: var(--accent-dim); }
@media (max-width: 640px) {
  .topbar, .pagebar { height: 43px; }
  .topbar { padding: 0 16px; }
  .pagebar { padding: 0 16px; }
  .brand, .brand-home { gap: 6px; }
  .brand-logo { width: 18px; height: 18px; }
  .brand-text { font-size: 12px; }
}

.crumbs {
  padding: 14px 28px 0;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: #999; }

.content { max-width: 1480px; margin: 0 auto; padding: 24px 32px 64px; }

h1 { font: 500 28px/1.2 Georgia, serif; margin: 6px 0 8px; }
h2 { font: 500 22px/1.2 Georgia, serif; margin: 28px 0 12px; }
h3 { font: 500 16px/1.2 Georgia, serif; margin: 16px 0 8px; }

.lede { color: #555; font-size: 15px; max-width: 880px; margin: 0 0 18px; }

.meta {
  display: flex;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background: #fafafa;
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 22px;
}
@media (max-width: 1100px) { .overview-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.card-link {
  display: block;
  color: var(--ink);
  text-decoration: none !important;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.card-link:hover {
  border-color: var(--accent-dim);
  box-shadow: 0 4px 14px rgba(255, 108, 55, 0.18);
  transform: translateY(-1px);
}
.card-link.empty-slice {
  opacity: 0.62;
}
.card-link.empty-slice:hover {
  opacity: 0.85;
}
tr.empty td {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 22px 14px;
}

.tags-block { margin-top: 14px; }
.tags-block .k { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.tags-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.empty-card {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 32px 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f5f5f5;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px 10px;
}
.card-title {
  font: 500 21px/1.1 Georgia, serif;
  display: flex;
  gap: 9px;
  align-items: center;
}
.updated { color: var(--muted); font-size: 12px; }
.view-all {
  display: block;
  text-align: center;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
  font-weight: 650;
  font-size: 13px;
  color: var(--accent-ink);
}
.view-all:hover { background: var(--soft); text-decoration: none; }

.overview-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.overview-table th, .overview-table td {
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.overview-table th:first-child, .overview-table td.rank { width: 64px; text-align: left; }
.overview-table th:last-child, .overview-table td.score {
  width: 100px;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.overview-table th {
  font-size: 12px;
  color: #555;
  font-weight: 650;
  background: #f6f6f6;
}
.overview-table td.rank { font-weight: 700; }
.overview-table .model {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.overview-table .model a { color: var(--ink); }
.overview-table .sub {
  display: block;
  font-family: -apple-system;
  font-size: 11px;
  color: var(--muted);
}

.behavior-card { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; }
.behavior-card .card-head { flex: 0 0 auto; }
.behavior-legend {
  flex: 0 0 auto;
  padding: 10px 22px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f6f6f6;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}
.behavior-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
/* Behavior Mix card: overview-table layout with an inline mix-bar column */
.overview-table th.mixth, .overview-table td.mixcell { width: 34%; }
.overview-table .mixbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: #e8e8e8; }
.behavior-row {
  /* grow to share the card's remaining height so the top-10 list fills the
     frame exactly like the neighbouring axis card (no bottom whitespace) */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 9px 22px;
  border-bottom: 1px solid var(--line);
  max-width: 100%;
}
.behavior-row:last-child { border-bottom: 0; }
.behavior-row .model {
  flex: 0 0 38%;
  max-width: 38%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.behavior-row .bar {
  flex: 1 1 auto;
  display: flex;
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
  background: #e8e8e8;
  min-width: 60px;
  max-width: 100%;
}
.behavior-row .bar > span { display: block; height: 100%; }
.behavior-row .pct {
  flex: 0 0 54px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.transcripts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.model-tile {
  display: block;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
}
.model-tile:hover { background: var(--soft); text-decoration: none; }
.model-tile .name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  word-break: break-word;
}
.model-tile .stats {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 10px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  background: var(--panel);
  max-height: 78vh;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
table.data th, table.data td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
/* Numeric / right-aligned cells include a small `.sub` second line. Align all
   cells to the top so that single-line cells visually line up with the first
   line of multi-line cells in the same row. */
table.data td.right, table.data td.center { line-height: 1.4; }
table.data th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f6f6;
  background-clip: padding-box;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 -1px 0 var(--line);
}
table.data th.sorted-asc::after { content: " ▲"; color: var(--accent); }
table.data th.sorted-desc::after { content: " ▼"; color: var(--accent); }
table.data tbody tr:hover { background: #f5f5f5; }
/* All cells (and headers) are left-aligned. Numeric cells keep tabular-nums
   so digits still line up vertically within the column. */
table.data td.center,
table.data td.right {
  text-align: left;
  font-variant-numeric: tabular-nums;
}
table.data .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  /* Model names / ids are the row key — never wrap them onto 2-4 lines. The
     table wrapper already scrolls horizontally; scrolling beats folding. */
  white-space: nowrap;
}
table.data .sub {
  display: block;
  font-family: -apple-system;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
table.data .badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.badge.pass { background: #e0f2ea; color: var(--good); }
.badge.fail { background: #f7e3e0; color: var(--bad); }
.badge.err  { background: #e8e8e8; color: var(--muted); }
.badge.partial { background: #f6ecd2; color: #8a5f10; }

input.search {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  min-width: 240px;
  background: #fff;
  font-size: 13px;
}
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0 12px; }
.toolbar .info { color: var(--muted); font-size: 13px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 14px 0 22px;
}
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 15px;
}
.metric .k { color: var(--muted); font-size: 12px; }
.metric .v { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Trial detail */
.basic-info {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 14px 0 20px;
}
.basic-info h3 { margin: 0 0 14px; }
.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 28px;
}
.kv { display: flex; flex-direction: column; }
.kv .k { color: var(--muted); font-size: 12px; }
.kv .v {
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

.transcript { margin-top: 8px; }
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.step > summary {
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
}
.step > summary::-webkit-details-marker { display: none; }
.step > summary:hover { background: var(--soft); }
.step-num { font-weight: 700; min-width: 60px; }
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.role-badge.system { background: var(--role-system-bg); color: var(--role-system); }
.role-badge.user { background: var(--role-user-bg); color: var(--role-user); }
.role-badge.agent, .role-badge.assistant { background: var(--role-assistant-bg); color: var(--role-assistant); }
.role-badge.tool { background: var(--role-tool-bg); color: var(--role-tool); }
.role-badge.tool.err { background: var(--role-tool-err-bg); color: var(--role-tool-err); }
.step-summary-text {
  flex: 1;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tool-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tool-chip {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: #fff1ea;
  color: var(--accent-ink);
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid #ffd0bb;
}

.tags-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: -8px 0 18px;
}
.tags-row .tags-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  margin-right: 4px;
}
.step-meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.step-body { padding: 0 18px 16px; }

.msg {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}
.msg:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.msg-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.msg-content {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #212121;
}
.msg-content.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.thinking-block {
  margin: 6px 0 8px;
  background: #f7f7f7;
  border-left: 3px solid var(--accent-dim);
  padding: 10px 13px;
  border-radius: 4px;
  font-size: 13px;
  white-space: pre-wrap;
  color: #555;
}
.thinking-block::before { content: "thinking · "; font-weight: 650; color: var(--accent-ink); }

.tool-call {
  margin: 8px 0;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 10px 12px;
}
.tool-call .head {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--accent-ink);
  font-weight: 650;
  margin-bottom: 6px;
}
.tool-call pre {
  margin: 0;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 280px;
}

.tool-result {
  margin: 8px 0;
  border-left: 3px solid var(--role-tool);
  padding: 8px 12px 8px 14px;
  background: #fafafa;
  border-radius: 0 6px 6px 0;
}
.tool-result.err { border-left-color: var(--role-tool-err); background: #fcefe9; }
.tool-result .head { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tool-result .head .func {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent-ink);
}
.tool-result pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
  color: #212121;
}

.validator-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 22px;
  margin-top: 20px;
}
.validator-card.pass { border-left: 4px solid var(--good); }
.validator-card.fail { border-left: 4px solid var(--bad); }
.validator-card.noscore { border-left: 4px solid var(--muted); }
.validator-card .validator-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.validator-card .validator-head h3 { margin: 0; }
.validator-card .reason {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #212121;
  margin: 8px 0 14px;
}
.validator-card .reason .label {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #a64035;
  color: #fff;
  font-family: -apple-system;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.pred-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.pred-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.pred-row.ok { border-left: 3px solid var(--good); }
.pred-row.no { border-left: 3px solid var(--bad); }
.pred-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 6px;
}
.pred-row .check {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.pred-row .check.ok { background: var(--good); }
.pred-row .check.no { background: var(--bad); }
.pred-title { font-weight: 650; color: var(--ink); }
.pred-name {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--soft);
  padding: 2px 6px;
  border-radius: 3px;
}
.pred-body {
  padding: 0 14px 10px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #444;
}
.pred-expected .label, .pred-found .label {
  display: inline-block;
  width: 76px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.pred-found {
  color: var(--bad);
}

.counts-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.counts-panel .count-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 12px;
  background: #f6f6f6;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}
.counts-panel .count-label { color: var(--muted); font-size: 12px; }
.counts-panel .count-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.counts-panel .count-key {
  margin-left: 4px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.pred-summary {
  font-size: 13px;
  color: #444;
}
.pred-summary .label, .pred-expected .label, .pred-found .label {
  display: inline-block;
  width: 76px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.candidates {
  margin-top: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}
.candidates > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
  list-style: none;
}
.candidates > summary::-webkit-details-marker { display: none; }
.candidates > summary::before { content: "▸ "; color: var(--accent); }
.candidates[open] > summary::before { content: "▾ "; }
.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.candidate {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fcfcfc;
  overflow: hidden;
}
.candidate.ok { border-left: 3px solid var(--good); }
.candidate.no { border-left: 3px solid #cda47b; }
.cand-head {
  padding: 8px 12px;
  font-size: 12px;
  background: #f6f6f6;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.cand-badge {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.cand-badge.match { background: #e0f2ea; color: var(--good); }
.cand-badge.miss { background: #f7e3e0; color: var(--bad); }

table.field-diff {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fcfcfc;
}
table.field-diff th, table.field-diff td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.field-diff th {
  background: #f6f6f6;
  color: var(--muted);
  font-weight: 650;
  font-size: 11px;
}
table.field-diff .cell-icon {
  width: 28px;
  text-align: center;
  font-weight: 700;
}
table.field-diff tr.ok .cell-icon { color: var(--good); }
table.field-diff tr.no .cell-icon { color: var(--bad); }
table.field-diff tr.no { background: #fcf5f2; }
table.field-diff .cell-field { width: 132px; }
table.field-diff .cell-expected, table.field-diff .cell-actual {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-word;
  max-width: 360px;
}
table.field-diff .cell-detail {
  color: var(--muted);
  font-size: 11px;
}

.pred-list-empty {
  color: var(--muted);
  font-style: italic;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: #f5f5f5;
  font-size: 13px;
}

.sig-criteria {
  margin-top: 12px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
}
.sig-criteria > summary {
  cursor: pointer;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  list-style: none;
}
.sig-criteria > summary::-webkit-details-marker { display: none; }
.sig-criteria > summary::before { content: "▸ "; color: var(--accent); margin-right: 4px; }
.sig-criteria[open] > summary::before { content: "▾ "; }
.sig-criteria pre {
  margin: 0;
  padding: 12px 14px;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  color: #212121;
}

/* heatmap-lite grid for model index */
.task-grid-wrap { overflow-x: auto; }
.task-grid { width: 100%; border-collapse: collapse; min-width: 600px; }
.task-grid th, .task-grid td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.task-grid th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f6f6;
  background-clip: padding-box;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 -1px 0 var(--line);
}
.task-grid td.center { text-align: left; }
.task-grid .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  white-space: nowrap;
}
.task-grid .sub {
  display: block;
  font-family: -apple-system;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.task-grid .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 650; }
.task-grid tbody tr:hover { background: #f5f5f5; }

/* Task-row drill-down (2026-07-20 design §3): whole row toggles an inline
   accordion panel with the task's individual trials. */
.task-grid tbody tr[data-task] { cursor: pointer; }
.task-grid .caret { display: inline-block; width: 15px; color: var(--muted); }
tr.trial-panel > td { background: #fafafa; padding: 0; cursor: default; }
tr.trial-panel:hover > td { background: #fafafa; }
.trial-panel-inner { padding: 14px 18px 16px; border-left: 3px solid #d5d5d5; }
.trial-summary { font-weight: 650; margin-bottom: 10px; font-size: 13px; }
table.trial-detail { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.trial-detail th, table.trial-detail td {
  padding: 7px 10px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
table.trial-detail th {
  position: static; cursor: default; background: transparent;
  color: #555; font-size: 11.5px; box-shadow: none;
}
.transcript-note { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }
/* Short human-language failure tag next to a FAIL badge (from G1/G2 groups) */
.fail-label {
  display: inline-block; margin-left: 4px; padding: 1px 7px;
  border-radius: 4px; background: #f7ece7; color: #9a4b3a;
  font-size: 11px; white-space: nowrap;
}
.badge.refusal { background: #f1e4f5; color: #7b3a8f; }
/* Row hidden by the task-set/difficulty filter (composes with search's inline display) */
tr.slice-hide { display: none; }
.trial-summary .task-detail-link { font-weight: 500; margin-left: 10px; }
.task-grid tbody tr.fail { background: #fef7f5; }
.task-grid tbody tr.pass { background: #f5fbf7; }
.task-grid tbody tr.fail:hover { background: #fcecea; }
.task-grid tbody tr.pass:hover { background: #ecf8f1; }

.footer {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* Empty states ----------------------------------------------------------- */
tr.empty td,
.empty-card {
  color: #8a8a8a;
  font-style: italic;
  text-align: center;
  padding: 22px 16px;
}
.empty-card {
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 8px;
  margin: 12px 0;
  font-size: 13px;
}

/* Transcript controls ---------------------------------------------------- */
.transcript-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
input.transcript-search {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  min-width: 280px;
  background: #fff;
  font-size: 13px;
}
button.step-expand-all,
button.step-collapse-all {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
button.step-expand-all:hover,
button.step-collapse-all:hover {
  background: var(--soft);
}

/* Compact number / reltime spans are inline; no extra layout needed.
   Keep them tabular so dashboards align. */
span.num-fmt,
span.reltime {
  font-variant-numeric: tabular-nums;
}

/* Creation-time difficulty filter bar (overview pages) */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 16px;
}
.filter-bar .filter-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  margin-right: 4px;
  white-space: nowrap;
}
.filter-bar a,
.filter-bar button {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease;
}
.filter-bar a:hover,
.filter-bar button:hover {
  background: #ececec;
  border-color: var(--accent-dim);
  text-decoration: none;
}
.filter-bar a.filter-active,
.filter-bar button.filter-active {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: #fff;
  font-weight: 650;
}
.filter-note {
  color: var(--muted);
  font-size: 13px;
  margin: -8px 0 12px;
}
/* Primary task-set filter bar (20/15/10/5-subtask chain · solo · all) — visually
   stronger than the secondary difficulty bar since it owns the default view. */
.filter-bar-primary {
  background: #fff5f0;
  border-color: var(--accent-dim);
  margin-bottom: 10px;
}
.filter-bar-primary .filter-label {
  color: var(--accent-ink);
}

/* ── Verifier group cards ─────────────────────────────────────────────────── */
.vg-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
}

/* Each group is a <details> card */
.vg-group {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--panel);
}
.vg-group.pass  { border-left: 4px solid var(--good); background: #f5fbf8; }
.vg-group.fail  { border-left: 4px solid var(--bad);  background: #fef7f5; }
.vg-group.muted { border-left: 4px solid var(--muted); background: #fafafa; }

.vg-head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex-wrap: wrap;
}
.vg-head::-webkit-details-marker { display: none; }
.vg-head::before { content: "▸ "; color: var(--accent); font-size: 11px; }
.vg-group[open] > .vg-head::before { content: "▾ "; }
.vg-head:hover { background: rgba(0,0,0,0.02); }

.vg-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.vg-badge.pass  { background: #e0f2ea; color: var(--good); }
.vg-badge.fail  { background: #f7e3e0; color: var(--bad); }
.vg-badge.muted { background: #e8e8e8; color: var(--muted); }

.vg-title {
  font-weight: 650;
  font-size: 14px;
  color: var(--ink);
}
.vg-one-line {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
  text-align: right;
}

.vg-body {
  padding: 6px 14px 12px;
  border-top: 1px solid var(--line);
}
.vg-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 6px;
}

/* Per-predicate row inside a group */
.vg-pred-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel);
  flex-wrap: wrap;
}
.vg-pred-row.ok { border-left: 3px solid var(--good); }
.vg-pred-row.no { border-left: 3px solid var(--bad); }

.vg-pred-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.vg-pred-icon.ok { background: var(--good); }
.vg-pred-icon.no { background: var(--bad); }

.vg-pred-label {
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
  flex: 1;
}
.vg-pred-reason {
  font-size: 12px;
  color: var(--muted);
  width: 100%;
  padding-left: 26px;
}

/* Expandable "raw check" <details> inside each predicate row */
.vg-pred-detail {
  width: 100%;
  margin-top: 2px;
}
.vg-pred-detail > summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  list-style: none;
  padding: 2px 0 2px 26px;
}
.vg-pred-detail > summary::-webkit-details-marker { display: none; }
.vg-pred-detail > summary::before { content: "▸ "; color: var(--accent); }
.vg-pred-detail[open] > summary::before { content: "▾ "; }
.vg-detail-body {
  margin: 4px 0 0 26px;
  background: #f6f6f6;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 12px;
}
.vg-detail-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  flex-wrap: wrap;
}
.vg-detail-row:last-child { border-bottom: 0; }
.vg-detail-key {
  width: 140px;
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 650;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.vg-detail-val {
  flex: 1;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #212121;
}

/* Diagnostic rows (checkpoints + constraints) */
.vg-diag-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
  flex-wrap: wrap;
}
.vg-diag-row.ok   { border-left: 3px solid var(--good); }
.vg-diag-row.no   { border-left: 3px solid var(--bad); }
.vg-diag-row.warn { border-left: 3px solid var(--warn); }
.vg-diag-row.na   { border-left: 3px solid var(--muted); opacity: 0.7; }

.vg-diag-kind {
  font-size: 11px;
  background: var(--soft);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.vg-diag-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 650;
}
.vg-diag-status {
  font-size: 12px;
  font-weight: 650;
  margin-left: auto;
  white-space: nowrap;
}
.vg-diag-status.ok   { color: var(--good); }
.vg-diag-status.no   { color: var(--bad); }
.vg-diag-status.warn { color: var(--warn); }
.vg-diag-desc {
  width: 100%;
  font-size: 12px;
  color: var(--muted);
  padding-left: 0;
}

.vg-not-run {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 8px 0 2px;
  margin: 0;
}
.vg-notes {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  padding-left: 4px;
  border-left: 2px solid var(--line);
}

/* ============================================================================
   Transcript v2 — raw per-message, colored JSON trees, #N anchors
   ============================================================================ */
.tx-toolbar { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
.tx-search { flex: 1; max-width: 420px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: var(--panel); }
.tx-btn { padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-weight: 600; font-size: 13px; cursor: pointer; }
.tx-btn:hover { background: var(--soft); }
.tx-note { color: var(--muted); font-size: 12.5px; margin: 4px 0 12px; line-height: 1.5; }
.tx-list .msg { border: 1px solid var(--line); border-radius: 8px; margin: 9px 0; background: var(--panel); overflow: hidden; scroll-margin-top: 16px; }
.tx-list .msg.target { box-shadow: 0 0 0 2px #8b5cf6; }
.tx-list .msg.hide { display: none; }
.mhead { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-bottom: 1px solid var(--soft); }
.mnum { font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.rbadge { font: 600 10.5px -apple-system; letter-spacing: .04em; padding: 2px 8px; border-radius: 5px; text-transform: uppercase; }
.r-sys .rbadge { background: var(--role-system-bg); color: var(--role-system); }
.r-user .rbadge { background: var(--role-user-bg); color: var(--role-user); }
.r-asst .rbadge { background: var(--role-assistant-bg); color: var(--role-assistant); }
.r-tool .rbadge { background: var(--role-tool-bg); color: var(--role-tool); }
.mbody { padding: 10px 13px; }
.mtext { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.fold { margin: 6px 0; }
.fold > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.rawfull { white-space: pre-wrap; margin: 6px 0 0; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #555; background: #f8f8f8; border: 1px solid var(--soft); border-radius: 6px; padding: 9px 11px; }
.rawfull.dim { color: var(--muted); }
.callblk { margin: 8px 0; padding: 8px 10px; border-radius: 7px; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.callblk.req { background: #f1f5fb; border: 1px solid #dde7f3; }
.callblk.res { background: #f7f4ee; border: 1px solid #ece3d4; }
.callfn { font-weight: 700; color: var(--role-assistant); margin-bottom: 2px; }
.httpline { margin: 3px 0 5px; color: #315f9b; font-weight: 600; }
.httpline .url { color: #212121; font-weight: 500; }
.stbadge { display: inline-block; font: 700 11px ui-monospace, monospace; padding: 1px 8px; border-radius: 5px; margin-bottom: 6px; }
.stbadge.ok { background: #e0f0e6; color: #23784f; }
.stbadge.warn { background: #f6eccf; color: #9a6a12; }
.stbadge.bad { background: #f6ded9; color: #a64035; }
.jt { margin: 0; }
.jt > summary { cursor: pointer; list-style: none; }
.jt > summary::-webkit-details-marker { display: none; }
.jt > summary::before { content: "▸ "; color: #b0a896; font-size: 10px; }
.jt[open] > summary::before { content: "▾ "; }
.jbody { margin-left: 14px; border-left: 1px solid #e7e0d4; padding-left: 8px; }
.jrow { padding: 1px 0; }
.jk { color: #875c1e; }
.jc, .jp { color: #b0a896; }
.jcount { color: #b0a896; font-size: 10px; margin: 0 4px; }
.js { color: #23784f; word-break: break-word; }
.jn { color: #315f9b; }
.jb { color: #7a52c4; }
.mref { display: inline-block; background: #ede9fe; color: #6d28d9; padding: 1px 6px; border-radius: 4px; font: 600 11px ui-monospace, monospace; text-decoration: none; }
.mref:hover { background: #ddd0fb; text-decoration: none; }

/* ── Validator fixes ── */
/* (a) long detail keys (from_response_url_pattern) collided with the value → aligned grid */
.vg-detail-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px; align-items: start; }
.vg-detail-key { width: auto; white-space: normal; word-break: break-word; }
/* (b) far-right pass/fail mark on every deterministic check (G1/G2 only — .checked) */
.vg-pred-row.checked .vg-pred-label { flex: 0 1 auto; }
.vg-pred-row.checked.ok::after { content: "\2713 pass"; margin-left: auto; align-self: flex-start; color: var(--good); font-weight: 700; font-size: 12px; white-space: nowrap; }
.vg-pred-row.checked.no::after { content: "\2717 fail"; margin-left: auto; align-self: flex-start; color: var(--bad); font-weight: 700; font-size: 12px; white-space: nowrap; }
/* (c) G1 expected-vs-actual section headers inside the raw check */
.vg-g1-hd { font-weight: 700; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 9px 0 2px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,0.06); }
.vg-g1-hd.found { color: var(--good); }
/* (d) one-line intro after each intermediate-step-check kind */
.vg-diag-about { color: var(--muted); font-style: italic; font-size: 11.5px; margin-left: 2px; }

/* 🛠 Tool definitions block (top of transcript) */
.tx-tools { border: 1px solid var(--line); border-radius: 8px; background: #fafafa; margin: 4px 0 12px; }
.tx-tools > summary { cursor: pointer; padding: 9px 13px; font-weight: 650; font-size: 13px; color: var(--ink); }
.tx-tools-body { padding: 4px 13px 10px; }
.tx-tools .tooldef { margin: 5px 0; border-top: 1px solid var(--soft); padding-top: 6px; }
.tx-tools .tooldef > summary { font-weight: 500; }
.tx-tools .tool-chip { font-weight: 700; }

/* LLM verifier per-value rows — unified with G1/G2: value left, signals right, reason below */
.vg-pred-row.llmval .vg-pred-label { flex: 0 1 auto; }
.llm-sigs { margin-left: auto; display: inline-flex; gap: 14px; align-items: center; }
.llm-sig { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.llm-sig.sig-ok { color: var(--good); }
.llm-sig.sig-no { color: var(--bad); }
.vg-pred-row.llmval .vg-pred-reason { width: 100%; background: none; padding: 2px 0 0 26px; color: var(--muted); font-size: 12px; }

/* Saturation note inside an overview slice card (top-10 would be all-100%) */
.card-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 14px 0;
}

/* Run sections on the task detail page (anchor contract id="run-N") */
details.run-block {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  margin: 12px 0;
}
details.run-block > summary.run-head {
  cursor: pointer;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  list-style: revert;
}
details.run-block[open] > summary.run-head {
  border-bottom: 1px solid var(--line);
}
.run-title { font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.run-stats { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.run-body { padding: 4px 16px 16px; }
.run-split-note { color: var(--muted); font-size: 13px; margin: 12px 0 4px; }
.tx-heading { margin-top: 20px; }

/* postman.com chrome injection (#pm-topnav-slot, first child of <body>):
   anchor jumps must land clear of the sticky topbar plus an injected bar
   (~72px) above it. scroll-margin only affects anchor/scrollIntoView
   placement — zero visual effect otherwise. */
tr[data-task], :target { scroll-margin-top: 132px; }

/* ── Postman privacy footer bar ──────────────────────────────────────────── */
.pm-footer {
  border-top: 1px solid var(--line);
  padding: 14px 24px;
  font-size: 13px;
}
.pm-footer__bar {
  display: grid;
  gap: 6px 16px;
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 768px) {
  .pm-footer__bar {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: start;
    text-align: left;
  }
  .pm-footer__col--center { text-align: center; }
  .pm-footer__col--right  { text-align: right;  }
}
.pm-footer__link,
.pm-footer__cookie-btn,
.pm-footer__dnss {
  color: var(--accent-ink);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.pm-footer__link:hover,
.pm-footer__cookie-btn:hover,
.pm-footer__dnss:hover { text-decoration: underline; }
.pm-footer__cookie-btn:focus-visible,
.pm-footer__dnss:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 2px;
}
.pm-footer__consent-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.pm-footer__col--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pm-footer__copyright {
  color: var(--muted);
  margin: 0;
}