:root {
  --bg: #0f1117; --panel: #181b24; --panel2: #1f2330; --ink: #e6e8ee;
  --muted: #8b91a3; --line: #2a2f3d; --accent: #6ea8fe; --ok: #4ade80;
  --warn: #fbbf24; --bad: #f87171; --pill: #2a3142;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; align-items: center; gap: 20px; padding: 12px 24px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
header .brand { font-weight: 700; letter-spacing: .2px; }
/* Environment badge + header stripe (TASKGEN_ENV_LABEL) — make canary vs prod unmistakable. */
header .env-badge { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  vertical-align: middle; color: #0f1117; background: var(--muted); }
header .env-badge.env-canary { background: var(--warn); }
header .env-badge.env-prod   { background: var(--bad); }
body.env-canary header { border-top: 3px solid var(--warn); }
body.env-prod   header { border-top: 3px solid var(--bad); }
header nav { display: flex; gap: 16px; }
/* Count of peer reviews waiting on the viewer's response. Carries a number, not just a dot: "3
   tasks need you" is a different decision from "1", and the nav is the only place an author
   learns either. Accent-filled so it reads as a call to action rather than a status pill. */
header nav .nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-align: center; vertical-align: baseline;
  color: #0f1117; background: var(--accent); }
/* Amber for the ADMIN queues (splits, disputes) — these are things blocking somebody else's
   task, not the viewer's own work, and they had no surface at all before. */
header nav .nav-badge.warn { background: var(--warn); }
header .spacer { flex: 1; }
header .who { color: var(--muted); }
main { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 24px 0 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; }
/* Keep a jumped-to section clear of the sticky section nav (see .section-nav). */
h2[id] { scroll-margin-top: 54px; }

/* Task-detail at-a-glance summary strip: compact verdict tiles that link to their section. */
.summary-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.summary-strip .sm-tile { display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 14px; min-width: 116px; color: var(--ink); text-decoration: none; }
.summary-strip .sm-tile:hover { border-color: var(--accent); text-decoration: none; }
.summary-strip .sm-k { font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .3px; }
.summary-strip .sm-v { font-size: 16px; font-weight: 600; }

/* Peer-review state banner on a task page. Muted while the task is out with reviewers or an
   admin; accent-edged the moment the ball is in the author's court, because that is the one
   state that asks something of the person reading it. */
.review-banner { max-width: 820px; margin: 0 0 16px; padding: 12px 14px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.review-banner.act { background: var(--panel2); border-color: var(--accent); color: var(--ink); }

/* Sticky in-page section nav (populated by a script from the h2[id] sections). The global
   header is not sticky, so this pins to the very top once the hero scrolls past. */
.section-nav { position: sticky; top: 0; z-index: 20; margin: 0 0 16px;
  display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 8px 0;
  background: var(--bg); border-bottom: 1px solid var(--line); }
.section-nav a { font-size: 12px; color: var(--muted);
  padding: 3px 10px; border-radius: 999px; }
.section-nav a:hover { color: var(--ink); background: var(--pill); text-decoration: none; }
.section-nav a.active { color: var(--ink); background: var(--pill); }
.panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; }
/* Wide tables (e.g. the admin users grid) whose columns can't shrink below their
   content min-width scroll horizontally inside the panel instead of spilling the
   last column past the frame. */
.table-scroll { overflow-x: auto; }
.table-scroll > table { min-width: 100%; width: max-content; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top; }
/* Preserve authored newlines (and wrap long lines) in free-text like human/LLM review comments. */
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
th { color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; }
.tally { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; }
a.dl { white-space: nowrap; font-size: 12px; }
.tally .muted { font-size: 11px; margin-right: 4px; }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lane { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; }
.lane .acct { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
.lane.busy { border-color: var(--accent); }
/* Out of the pool. Muted + dashed rather than loud red: a quarantined lane is a standing
   condition to notice, not an alarm to silence — and several at once must not drown the board. */
.lane.quarantined { border-style: dashed; border-color: var(--bad); opacity: .72; }
.pill.quarantined { background: #3a1d1d; color: var(--bad); }
.lane-stats .bad { color: var(--bad); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--pill); font-size: 12px; color: var(--ink); }
.pill.queued { background: #2a3142; }
.pill.scaffolding, .pill.gating, .pill.judging, .pill.rollouts, .pill.reviewing { background: #33405e; color: #cfe0ff; }
.pill.done { background: #16361f; color: var(--ok); }
.pill.rejected { background: #3a1d1d; color: var(--bad); }
/* Leaderboard 💎/🏅 tallies link to the filtered Candidate Database — keep the pill look, add a
   subtle affordance on hover instead of the default underline. */
a.tally-link { text-decoration: none; }
a.tally-link:hover { text-decoration: none; }
a.tally-link:hover .pill { outline: 1px solid var(--accent); }
.pill.stale { background: #3a2a12; color: #e8b870; }
.pill.error { background: #3a1d1d; color: var(--bad); }
/* Failure-kind badges on the admin infra/health page (k-<FailureKind>). */
.pill.k-infra, .pill.k-auth { background: #3a1d1d; color: var(--bad); }
.pill.k-timeout { background: #3a2a12; color: #e8b870; }
.pill.k-setup { background: #33405e; color: #cfe0ff; }
.health-ok { color: var(--ok); }
.health-bad { color: var(--bad); }
.diff-very-hard { color: var(--bad); }
.diff-hard { color: var(--warn); }
.diff-medium { color: var(--accent); }
.diff-trivial { color: var(--muted); }
.muted { color: var(--muted); }
td.rank { font-variant-numeric: tabular-nums; color: var(--muted); width: 40px; }
a.email { font-size: 12px; }
dl.legend { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  margin: 0; font-size: 13px; }
dl.legend dt { font-weight: 600; white-space: nowrap; }
dl.legend dd { margin: 0; color: var(--muted); }
form.stack { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
input, textarea, select, button { font: inherit; }
input, textarea, select { background: var(--panel2); border: 1px solid var(--line);
  color: var(--ink); border-radius: 6px; padding: 8px 10px; }
textarea { min-height: 120px; resize: vertical; }
button, .btn { background: var(--accent); color: #06122b; border: none;
  border-radius: 6px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.ghost.danger { color: #ff9d9d; border-color: #5a2a2a; }
button.ghost.danger:hover { background: #3a1d1d; }
.error { background: #3a1d1d; border: 1px solid var(--bad); color: #ffd7d7;
  padding: 10px 12px; border-radius: 6px; }
.toolbar { display: flex; gap: 10px; align-items: end; margin-bottom: 12px; flex-wrap: wrap; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; overflow: auto; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.traj-step { border-left: 3px solid var(--line); padding: 4px 0 4px 12px; margin: 10px 0; }
.traj-label { font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .4px; margin-bottom: 4px; }
.traj-step pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.traj-assistant { border-left-color: var(--accent); }
.traj-reasoning { border-left-color: #7c6bb0; }
.traj-reasoning pre { color: var(--muted); font-style: italic; }
.traj-tool_use { border-left-color: var(--warn); }
.traj-tool_result { border-left-color: #3a4760; }
.traj-status { border-left-color: var(--ok); }
.traj-prompt { border-left-color: #6b7280; }
.filebox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 16px; margin-bottom: 10px; }
.filebox > summary { cursor: pointer; font-weight: 600; }
.filebox > summary code { font-weight: 600; }
/* Wrap long lines (e.g. the task prompt) into multi-line text instead of a
   horizontal scrollbar; pre-wrap still preserves indentation/whitespace. */
.filebox pre { margin: 10px 0 2px; max-height: 480px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; }

.lane-stats { margin: 4px 0 12px; }

/* Per-rollout trajectory-review attribution badges */
.attr { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 600; }
.attr-reasoning_gap { background: #16361f; color: #8fe0a6; }   /* real difficulty signal — good */
.attr-unfair_grader { background: #3a1d1d; color: #f0a0a0; }   /* task problem */
.attr-infra_friction { background: #2a2412; color: #ead9a0; }  /* infra problem */
.attr-wall_timeout { background: #0e2f33; color: #7fd8e0; }    /* killed on the clock — measured nothing */
.attr-passed { background: #16361f; color: var(--ok); }
.attr-side_channel { background: #4a1414; color: #ff9d9d; box-shadow: 0 0 0 1px #ff9d9d33; }  /* gamed pass — invalid signal */
.attr-inconclusive { background: #2a3142; color: var(--muted); }
/* per-rollout review flags + the model-block review aggregate banner */
.attr-flag { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; background: #2a3142; color: var(--muted); vertical-align: middle; }
.attr-flag.truncated { background: #33263a; color: #d9a8ec; }
.attr-flag.contested, .attr-flag.capped { background: #3a2a12; color: #e8b870; }
/* Marks a turn count we could only measure in tool calls (see the Turns column) — dim, because
   it qualifies the number rather than competing with it. */
.approx { opacity: .55; margin-right: 1px; }
.review-agg { margin: .4em 0 .2em; padding: 6px 10px; border-radius: 6px; font-size: 12px; }
.review-agg.needs-human { background: #3a2a12; color: #e8b870; }
.review-agg.clean { background: #16361f; color: #8fe0a6; }
tr.review-row td { border-top: none; padding-top: 0; }
.rollout-review > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.rollout-review p { margin: 8px 0 4px; }

/* Failure banner on the task page + inline reason in lists */
.failbox { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  background: #2a1414; border: 1px solid #5a2a2a; color: #f0c2c2;
  border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.failbox.warn { background: #2a2412; border-color: #5a4f2a; color: #ead9a0; }
.failbox .fail-kind { font-weight: 700; }
.failbox .fail-msg { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.fail-inline { font-size: 12px; }

/* Dashboard info banner — matches the gold "note" callouts on the leaderboard page
   (e.g. explaining the stale-heartbeat error after a backend restart). */
.notice { max-width: 820px; margin: 0 0 16px; padding: 12px 14px; border-radius: 8px;
  line-height: 1.5; background: #3a2a12; border: 1px solid var(--warn); color: #f4dca0; }

/* Submit: task spec panel */
.taskspec { margin-bottom: 16px; }
.taskspec > summary { cursor: pointer; font-size: 15px; }
table.spec { width: 100%; border-collapse: collapse; margin: 10px 0; }
table.spec th, table.spec td { text-align: left; padding: 6px 10px; vertical-align: top;
  border-bottom: 1px solid var(--line); }
table.spec th { color: var(--muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; }
table.spec td code { white-space: nowrap; }
.pill.req { background: #3a2a2a; color: #f3b0b0; }
.pill.opt { background: #2a3340; color: #9db4cc; }
.req-size { margin-top: 8px; }

/* Submit: task-files upload block */
fieldset.upload { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
  margin: 4px 0; }
fieldset.upload legend { padding: 0 6px; color: var(--muted); font-size: 13px; }
fieldset.upload label { display: block; margin: 10px 0; }
.or-sep { text-align: center; margin: 6px 0; }

/* Rollout model picker (multi-select) + per-model rollout blocks */
fieldset.model-picker { border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 16px; margin: 4px 0; }
fieldset.model-picker legend { padding: 0 6px; color: var(--muted); font-size: 13px; }
/* Checkbox + inline label on ONE row. flex-direction:row is explicit because the base `label`
   rule sets column, which would otherwise stack the box above the text and centre each fragment. */
label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 8px 0; font-weight: 500; }
label.check input { width: auto; margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.model-block { margin: 12px 0; }
.model-block h3 code { font-size: .95em; }
.panel.rerun form select { max-width: 260px; }

/* History pagination */
.pager { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.pager a { text-decoration: none; }
.pager .disabled { color: var(--muted); opacity: .5; }

/* --- Versioning: version badge, version-history panel, diff --- */
.pill.ver { background: #24314a; color: #bcd2ff; }                 /* v3 badge */
.pill.rep { background: #16361f; color: var(--ok); }              /* family representative */
.pill.pinned { background: #3a2f12; color: #f0d089; }             /* author-pinned */
.pill.delivery { background: #24314a; color: #bcd2ff; }           /* comments-cleaned delivery version */
.pill.curated { background: #123434; color: #8fe0d0; }            /* curation-pinned version (candidate DB) */
.pill.promo { background: #2e2440; color: #d3bcf0; }              /* arrived from the other site (app/promote.py) */
/* Staged-calibration stage: open-source screen (cool grey-blue) vs frontier tier (accent). */
.pill.stage-open_source { background: #2a3340; color: #9db4cc; }
.pill.stage-frontier { background: #2f2440; color: #cdb4ff; }
.version-table td, .version-table th { padding: 6px 10px; }
.version-table tr.current { background: var(--panel2); }
.version-note { color: var(--muted); font-size: 12px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 16px; }

/* Diff view — one .diff block per changed file; lines colored by kind. */
.diff-file { margin: 12px 0; }
.diff-file .status-added { color: var(--ok); }
.diff-file .status-removed { color: var(--bad); }
.diff-file .status-changed { color: var(--warn); }
pre.diff { max-height: 560px; overflow: auto; line-height: 1.45; }
pre.diff .d-add { display: block; background: #16361f; color: #b7f0c6; }
pre.diff .d-del { display: block; background: #3a1d1d; color: #f0b7b7; }
pre.diff .d-hunk { display: block; background: #24314a; color: #9db4cc; }
pre.diff .d-ctx { display: block; color: var(--muted); }
.compare-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 16px; }
.compare-form select { max-width: 320px; }

/* Fairness-judge toggle (leaderboard + database) */
.judge-toggle { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.judge-toggle .jt { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--pill); color: var(--ink); font-size: 13px; text-decoration: none; }
.judge-toggle .jt.sel { background: var(--accent); color: #06122b; border-color: transparent; font-weight: 600; }
.judge-toggle .jt:hover { border-color: var(--accent); }
/* Dual-judge fairness panel on the task page */
.fair-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .fair-dual { grid-template-columns: 1fr; } }
/* min-width:0 lets a grid child shrink below its content width, so long unbreakable tokens
   (ARNs, resource ids) wrap instead of forcing the card past its 1fr track and clobbering the box. */
.fair-card { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.fair-card.is-default { border-color: var(--accent); }
.fair-card h3 { margin: 0 0 4px; font-size: 14px; }
.fair-card .jm { font-size: 12px; color: var(--muted); font-weight: 400; }
.fair-card .big { font-size: 24px; font-weight: 700; margin: 2px 0 10px; }
.fair-card .subs { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 12.5px; margin-bottom: 10px; }
.fair-card .subs .k { color: var(--muted); }
.fair-card .fb { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }

/* Itemized fairness review — a short prose verdict, then Strengths / Concerns lists. */
.fb-summary { font-size: 13px; line-height: 1.55; margin: 0 0 10px; color: var(--ink); overflow-wrap: anywhere; }
.fb-group { margin-top: 10px; }
.fb-group .fb-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.fb-group.pos .fb-h { color: var(--ok); }
.fb-group.neg .fb-h { color: var(--bad); }
.fb-group ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.fb-group li { margin: 3px 0; overflow-wrap: anywhere; }
.fb-group.pos li::marker { color: var(--ok); }
.fb-group.neg li::marker { color: var(--bad); }

/* Author fairness rebuttal — a crit banner, per-concern uphold/withdraw, and the appeal form. */
.rebut-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px;
  border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.rebut-banner .ico { font-size: 16px; }
.rebut-banner .sub { font-weight: 400; color: var(--muted); }
.fb-group.neg.rebutted ul { list-style: none; padding-left: 0; }
.concern { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.concern .ctext { font-size: 13px; overflow-wrap: anywhere; }
.concern .ctext::before { content: "•"; color: var(--bad); margin-right: 7px; }
.concern.withdrawn .ctext { text-decoration: line-through; color: var(--muted); }
.ro-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; }
.ro-badge.withdrawn { color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, transparent); }
.ro-badge.upheld { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.ro-reason { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.ro-reason .who { color: var(--ink); font-weight: 600; }
.author-rebut { margin-top: 5px; font-size: 12px; line-height: 1.5; padding: 6px 9px; overflow-wrap: anywhere;
  border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 6px 6px 0; }
.author-rebut .who { color: var(--accent); font-weight: 600; font-size: 11px; }
.revised { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 2px; padding-top: 10px; border-top: 1px dashed var(--line); }
.revised .rk { font-size: 12px; color: var(--muted); }
.revised .rv { font-size: 18px; font-weight: 700; color: var(--accent); }
.revised .adv { font-size: 11px; color: var(--muted); }
.rebut-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.rebut-form summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.rebut-form .cbox { margin: 10px 0; }
.rebut-form .cq { font-size: 12.5px; margin-bottom: 4px; }
.rebut-form .cq b { color: var(--bad); font-weight: 600; }
.rebut-form textarea { width: 100%; min-height: 52px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 12.5px; resize: vertical; }
.rebut-form .note { font-size: 11.5px; color: var(--muted); margin: 8px 0; }
.rebut-form button { background: var(--accent); color: #0b1220; border: none; border-radius: 7px;
  padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.rebut-form .oneshot { font-size: 11.5px; color: var(--warn); margin-top: 8px; }